Merge pull request #308 from SmythOS/Responsive-Embodiment-Tabs-86evbh920

test sidebar should have dynamic headers with width and drop down button

Author: hamza-smythos

packages/app/src/builder-ui/pages/builder/agent-settings.ts

@@ -905,6 +905,54 @@ export async function openPostmanEmbodiment() {
   );
 }
 
+export async function openVoiceEmbodiment() {
+  Observability.observeInteraction('voice_embodiment_click', {
+    position: 'top right of builder inside dropdown',
+  });
+  const { dev: testDomain, scheme } = builderStore.getState().agentDomains;
+  const wrapContent = (content) => `<div id="voice-embodiment-wrapper">${content}</div>`;
+
+  if (!testDomain) {
+    const content = wrapContent(
+      '<div class="p-4">Agent domain is not set. Cannot provide Voice features</div>',
+    );
+    openEmbodimentDialog(
+      content,
+      {},
+      EMBODIMENT_DESCRIPTIONS.voice.title,
+      EMBODIMENT_DESCRIPTIONS.voice.tooltipTitle,
+    );
+    return;
+  }
+
+  const voiceUrl = testDomain ? `${scheme}://${testDomain}/emb/voice` : '';
+
+  const content = wrapContent(`<div class="emb-instructions p-4 flex-row">
+        <div id="talk-to-agent-wrapper">
+           <div class="flex items-center justify-between">
+           <label class="block text-sm font-medium text-gray-700 mb-1">Talk to Agent</label>
+           <a href="${voiceUrl}" target="_blank" rel="noopener noreferrer">
+            <div class="text-[#3C89F9] text-[13px] font-medium cursor-pointer flex items-center gap-1">Start Voice Chat
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <path d="M6.74674 2.3335H5.34389C3.49341 2.3335 2.33301 3.64376 2.33301 5.49802V10.5023C2.33301 12.3566 3.48775 13.6668 5.34389 13.6668H10.6542C12.5109 13.6668 13.6663 12.3566 13.6663 10.5023V9.4061" stroke="#3C89F9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M13.6668 5.38279V2.3335M13.6668 2.3335H10.6176M13.6668 2.3335L8.91309 7.08723" stroke="#3C89F9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+            </div>
+           </a>
+           </div>
+           <p class="text-gray-700 font-normal">Starts a live voice session with the agent.</p>
+        </div>
+    </div>`);
+
+  const actions = {};
+  openEmbodimentDialog(
+    content,
+    actions,
+    EMBODIMENT_DESCRIPTIONS.voice.title,
+    EMBODIMENT_DESCRIPTIONS.voice.tooltipTitle,
+  );
+}
+
 export async function openAlexaEmbodiment() {
   Observability.observeInteraction('alexa_embodiment_click', {
     position: 'top right of builder inside dropdown',
@@ -925,7 +973,6 @@ export async function openAlexaEmbodiment() {
     return;
   }
 
-  const voiceUrl = testDomain ? `${scheme}://${testDomain}/emb/voice` : '';
   const testUrl = testDomain ? `${scheme}://${testDomain}/alexa` : '';
   const prodUrl = prodDomain ? `${scheme}://${prodDomain}/alexa` : 'Agent is not deployed yet';
 
@@ -989,21 +1036,6 @@ export async function openAlexaEmbodiment() {
   </button>`;
 
   const content = wrapContent(`<div class="emb-instructions p-4 flex-row">
-        <div id="talk-to-agent-wrapper">
-           <div class="flex items-center justify-between">
-           <label class="block text-sm font-medium text-gray-700 mb-1">Talk to Agent</label>
-           <a href="${voiceUrl}" target="_blank" rel="noopener noreferrer">
-            <div class="text-[#3C89F9] text-[13px] font-medium cursor-pointer flex items-center gap-1">Start Voice Chat
-              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
-                <path d="M6.74674 2.3335H5.34389C3.49341 2.3335 2.33301 3.64376 2.33301 5.49802V10.5023C2.33301 12.3566 3.48775 13.6668 5.34389 13.6668H10.6542C12.5109 13.6668 13.6663 12.3566 13.6663 10.5023V9.4061" stroke="#3C89F9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-                <path d="M13.6668 5.38279V2.3335M13.6668 2.3335H10.6176M13.6668 2.3335L8.91309 7.08723" stroke="#3C89F9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-              </svg>
-            </div>
-           </a>
-           </div>
-           <p class="text-gray-700 font-normal">Starts a live voice session with the agent.</p>
-        </div>
-        <hr class="my-4"/>
         <div class="mb-4">
           <label class="block text-sm font-medium text-gray-700 mb-1">Alexa Integration</label>
           <p class="text-gray-700 font-normal">Publish as an Alexa Skill or deploy across managed Echo devices</p>
@@ -1618,9 +1650,10 @@ setEmbodimentHandlers({
   openEmbodimentDialog,
   openChatGPTEmbodiment,
   openPostmanEmbodiment,
+  openVoiceEmbodiment,
+  openAlexaEmbodiment,
   openChatbotEmbodiment,
   openAPIEmbodiment,
   openFormPreviewEmbodiment,
-  openAlexaEmbodiment,
   openMCPEmbodiment,
 });