refactor: voice ai conversation (#45)

kpchoy · web-flow · commit 44270f587cdd · 2025-09-29T13:07:02.000-07:00
diff --git a/README.md b/README.md
@@ -20,7 +20,7 @@ The reference components demonstrate several common Twilio Voice use cases. Thes
   - View quality metrics
   - Receive warnings
   - View errors
-- Voice AI Assistant
+- Voice AI Conversation
   - Place an outbound call and connect to an agent
   - Provide a Websocket server to interface with Conversation Relay
   - Basic OpenAI integration
@@ -51,7 +51,7 @@ cp example.env .env
 https://yourdomain/twilio-voice-dialer/twiml
 https://yourdomain/twilio-voice-basic-call-control/twiml
 https://yourdomain/twilio-voice-monitoring/twiml
-https://yourdomain/twilio-voice-ai-assistant/twiml
+https://yourdomain/twilio-voice-ai-conversation/twiml
 ```
 
 ## Run the project locally
@@ -67,4 +67,4 @@ npm start
 - Dialer: [http://localhost:3030/twilio-voice-dialer?identity=bob](http://localhost:3030/twilio-voice-dialer?identity=bob).
 - Basic Call Control: [http://localhost:3030/twilio-voice-basic-call-control?identity=bob](http://localhost:3030/twilio-voice-basic-call-control?identity=bob).
 - Monitoring: [http://localhost:3030/twilio-voice-monitoring?identity=bob](http://localhost:3030/twilio-voice-monitoring?identity=bob).
-- Voice AI Assistant: [http://localhost:3030/twilio-voice-ai-assistant?identity=bob](http://localhost:3030/twilio-voice-ai-assistant?identity=bob).
+- Voice AI Conversation: [http://localhost:3030/twilio-voice-ai-conversation?identity=bob](http://localhost:3030/twilio-voice-ai-conversation?identity=bob).
diff --git a/example.env b/example.env
@@ -31,6 +31,6 @@ CALLBACK_BASE_URL=foo.ngrok.dev
 # Default identity to use
 DEFAULT_IDENTITY=alice
 
-# twilio-voice-ai-assistant
+# twilio-voice-ai-conversation
 # See https://platform.openai.com/settings/organization/api-keys
 OPENAI_API_KEY=sk-proj.......
diff --git a/src/components/twilio-voice-ai-conversation/index.js b/src/components/twilio-voice-ai-conversation/index.js
diff --git a/src/components/twilio-voice-ai-conversation/public/index.html b/src/components/twilio-voice-ai-conversation/public/index.html
@@ -4,15 +4,15 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>Twilio Voice AI Assistant</title>
+    <title>Twilio Voice AI Conversation</title>
   </head>
   <body>
-    <h1>Twilio Voice AI Assistant</h1>
+    <h1>Twilio Voice AI Conversation</h1>
 
-    <twilio-voice-ai-assistant></twilio-voice-ai-assistant>
+    <twilio-voice-ai-conversation></twilio-voice-ai-conversation>
 
     <script src="/twilio.js"></script>
-    <script src="twilio-voice-ai-assistant.js"></script>
+    <script src="twilio-voice-ai-conversation.js"></script>
     <script src="index.js"></script>
   </body>
 </html>
diff --git a/src/components/twilio-voice-ai-conversation/public/index.js b/src/components/twilio-voice-ai-conversation/public/index.js
@@ -1,14 +1,14 @@
 (async function() {
   const urlParams = new URLSearchParams(window.location.search);
   const identity = urlParams.get('identity');
-  const tokenUrl = `/twilio-voice-ai-assistant/token?identity=${identity}`;
+  const tokenUrl = `/twilio-voice-ai-conversation/token?identity=${identity}`;
 
   const response = await fetch(tokenUrl);
   const data = await response.json();
 
-  const twilioVoiceAIAssistant = document.querySelector('twilio-voice-ai-assistant');
-  twilioVoiceAIAssistant.setToken(data.token);
-  twilioVoiceAIAssistant.addEventListener('tokenWillExpire', async (e) => {
+  const twilioVoiceAIConversation = document.querySelector('twilio-voice-ai-conversation');
+  twilioVoiceAIConversation.setToken(data.token);
+  twilioVoiceAIConversation.addEventListener('tokenWillExpire', async (e) => {
     const device = e.detail.device;
 
     const updateTokenResponse = await fetch(tokenUrl);
diff --git a/src/components/twilio-voice-ai-conversation/public/twilio-voice-ai-conversation.js b/src/components/twilio-voice-ai-conversation/public/twilio-voice-ai-conversation.js
@@ -1,4 +1,4 @@
-class TwilioVoiceAIAssistant extends HTMLElement {
+class TwilioVoiceAIConversation extends HTMLElement {
   #call;
   #conversationRelayLog;
   #device;
@@ -114,6 +114,6 @@ class TwilioVoiceAIAssistant extends HTMLElement {
 }
 
 customElements.define(
-  'twilio-voice-ai-assistant',
-  TwilioVoiceAIAssistant
+  'twilio-voice-ai-conversation',
+  TwilioVoiceAIConversation
 );
diff --git a/src/components/twilio-voice-ai-conversation/routes.js b/src/components/twilio-voice-ai-conversation/routes.js
diff --git a/src/components/twilio-voice-dialer/public/twilio-voice-dialer.js b/src/components/twilio-voice-dialer/public/twilio-voice-dialer.js
@@ -76,10 +76,6 @@ class TwilioVoiceDialer extends HTMLElement {
     this.dispatchEvent(tokenWillExpireEvent);
   }
 
-  disconnectedCallback() {
-    this.#device.destroy();
-  }
-
   #handleAccept() {
     this.#call.accept();
     this.#setStatus('inprogress');
