Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Nov 10, 2025
Merged

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

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fd1d690
test sidebar should have dynamic headers with width and drop down button
ali-inkco Nov 5, 2025
dd8a7a0
refactored dynamic headers
ali-inkco Nov 6, 2025
3e3bbf6
Merge branch 'dev' into Responsive-Embodiment-Tabs-86evbh920
ali-inkco Nov 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 50 additions & 17 deletions packages/app/src/builder-ui/pages/builder/agent-settings.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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';

Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -1618,9 +1650,10 @@ setEmbodimentHandlers({
openEmbodimentDialog,
openChatGPTEmbodiment,
openPostmanEmbodiment,
openVoiceEmbodiment,
openAlexaEmbodiment,
openChatbotEmbodiment,
openAPIEmbodiment,
openFormPreviewEmbodiment,
openAlexaEmbodiment,
openMCPEmbodiment,
});
Loading