diff --git a/src/langbot/templates/embed/widget.js b/src/langbot/templates/embed/widget.js index 2a710711b..3e6f423b3 100644 --- a/src/langbot/templates/embed/widget.js +++ b/src/langbot/templates/embed/widget.js @@ -1240,6 +1240,14 @@ // Root container var root = document.createElement("div"); root.id = "langbot-widget-root"; + root.langbotDestroy = function () { + wsDisconnect(); + if (state.historyReloadTimer) { + clearTimeout(state.historyReloadTimer); + state.historyReloadTimer = null; + } + root.remove(); + }; document.body.appendChild(root); var shadow = root.attachShadow({ mode: "open" }); diff --git a/web/src/app/wizard/page.tsx b/web/src/app/wizard/page.tsx index 49142e089..f2a2b13bd 100644 --- a/web/src/app/wizard/page.tsx +++ b/web/src/app/wizard/page.tsx @@ -17,6 +17,7 @@ import { Copy, Send, Webhook, + MessageSquare, } from 'lucide-react'; import { httpClient } from '@/app/infra/http/HttpClient'; @@ -970,6 +971,35 @@ function StepPlatform({ // Step 1: Bot Configuration + Logs // --------------------------------------------------------------------------- +function PageBotFloatingWidget({ + botUuid, + title, +}: { + botUuid: string; + title?: string; +}) { + useEffect(() => { + const script = document.createElement('script'); + script.src = `${window.location.origin}/api/v1/embed/${botUuid}/widget.js`; + script.dataset.title = title || 'LangBot'; + document.body.appendChild(script); + + return () => { + script.remove(); + const root = document.getElementById('langbot-widget-root') as + | (HTMLElement & { langbotDestroy?: () => void }) + | null; + if (root?.langbotDestroy) { + root.langbotDestroy(); + } else { + root?.remove(); + } + }; + }, [botUuid, title]); + + return null; +} + function StepBotConfig({ adapterConfigItems, adapterConfigValues, @@ -1043,6 +1073,17 @@ function StepBotConfig({ return (
@@ -1068,6 +1109,8 @@ function StepBotConfig({
>
{messageReceived ? (