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 (
+ {selectedAdapterName === 'web_page_bot' && botSaved && createdBotUuid && ( + + )} +

{t('wizard.botConfig.title')}

@@ -1068,6 +1109,8 @@ function StepBotConfig({ > {messageReceived ? ( + ) : selectedAdapterName === 'web_page_bot' ? ( + ) : selectedAdapterName === 'http_bot' ? ( ) : webhookUrl ? ( @@ -1087,11 +1130,13 @@ function StepBotConfig({ > {messageReceived ? t('wizard.botConfig.messageReceived') - : selectedAdapterName === 'http_bot' - ? t('wizard.botConfig.httpTestPrompt') - : webhookUrl - ? t('wizard.botConfig.webhookTestPrompt') - : t('wizard.botConfig.waitingForMessage')} + : selectedAdapterName === 'web_page_bot' + ? t('wizard.botConfig.pageBotTestPrompt') + : selectedAdapterName === 'http_bot' + ? t('wizard.botConfig.httpTestPrompt') + : webhookUrl + ? t('wizard.botConfig.webhookTestPrompt') + : t('wizard.botConfig.waitingForMessage')}

{!messageReceived && webhookUrl && ( diff --git a/web/src/i18n/locales/en-US.ts b/web/src/i18n/locales/en-US.ts index 20b35ae5e..a5ceb54d5 100644 --- a/web/src/i18n/locales/en-US.ts +++ b/web/src/i18n/locales/en-US.ts @@ -1831,6 +1831,8 @@ const enUS = { 'The bot is enabled. Send it a message from your IM platform to continue.', messageReceived: 'The bot received an IM message. You can continue to the next step.', + pageBotTestPrompt: + 'Page Bot is enabled. Click the chat bubble in the lower-right corner and send a message to verify the full conversation flow.', webhookTestPrompt: 'The callback URL is ready. Configure it on the external platform, then send the bot a real message.', httpTestPrompt: diff --git a/web/src/i18n/locales/ja-JP.ts b/web/src/i18n/locales/ja-JP.ts index cd1d41202..e73e5b998 100644 --- a/web/src/i18n/locales/ja-JP.ts +++ b/web/src/i18n/locales/ja-JP.ts @@ -1748,6 +1748,8 @@ const jaJP = { 'ボットが有効になりました。続行するには IM からメッセージを送信してください。', messageReceived: 'ボットが IM メッセージを受信しました。次のステップに進めます。', + pageBotTestPrompt: + 'ページボットが有効になりました。右下のチャットバブルをクリックしてメッセージを送信し、会話フロー全体を確認してください。', webhookTestPrompt: 'コールバック URL の準備ができました。外部プラットフォームに設定し、ボットへ実際のメッセージを送信してください。', httpTestPrompt: diff --git a/web/src/i18n/locales/zh-Hans.ts b/web/src/i18n/locales/zh-Hans.ts index ef6c93af9..d03e6de36 100644 --- a/web/src/i18n/locales/zh-Hans.ts +++ b/web/src/i18n/locales/zh-Hans.ts @@ -1751,6 +1751,8 @@ const zhHans = { botSaved: '机器人配置已保存并启用,请查看日志确认连接正常。', waitingForMessage: '机器人已启用。请在 IM 中向机器人发送一条消息以继续。', messageReceived: '机器人已成功收到 IM 消息,可以进入下一步。', + pageBotTestPrompt: + '页面机器人已启用。点击右下角聊天气泡并发送一条消息,验证完整对话链路。', webhookTestPrompt: '回调地址已就绪。将它配置到外部平台,然后向机器人发送一条真实消息。', httpTestPrompt: 'HTTP Bot 已启用。可直接发送一条真实入站消息验证连接。',