feat(wizard): add floating page bot verification

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" });

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 (
     <div className="max-w-5xl mx-auto space-y-6">
+      {selectedAdapterName === 'web_page_bot' && botSaved && createdBotUuid && (
+        <PageBotFloatingWidget
+          botUuid={createdBotUuid}
+          title={
+            typeof adapterConfigValues.title === 'string'
+              ? adapterConfigValues.title
+              : undefined
+          }
+        />
+      )}
+
       <div className="text-center">
         <h2 className="text-xl font-semibold">{t('wizard.botConfig.title')}</h2>
         <p className="text-sm text-muted-foreground mt-1">
@@ -1068,6 +1109,8 @@ function StepBotConfig({
             >
               {messageReceived ? (
                 <Check className="size-3 text-white" />
+              ) : selectedAdapterName === 'web_page_bot' ? (
+                <MessageSquare className="size-3 text-white" />
               ) : selectedAdapterName === 'http_bot' ? (
                 <Send className="size-3 text-white" />
               ) : 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')}
               </p>
 
               {!messageReceived && webhookUrl && (

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:

web/src/i18n/locales/ja-JP.ts

@@ -1748,6 +1748,8 @@ const jaJP = {
         'ボットが有効になりました。続行するには IM からメッセージを送信してください。',
       messageReceived:
         'ボットが IM メッセージを受信しました。次のステップに進めます。',
+      pageBotTestPrompt:
+        'ページボットが有効になりました。右下のチャットバブルをクリックしてメッセージを送信し、会話フロー全体を確認してください。',
       webhookTestPrompt:
         'コールバック URL の準備ができました。外部プラットフォームに設定し、ボットへ実際のメッセージを送信してください。',
       httpTestPrompt:

web/src/i18n/locales/zh-Hans.ts

@@ -1751,6 +1751,8 @@ const zhHans = {
       botSaved: '机器人配置已保存并启用，请查看日志确认连接正常。',
       waitingForMessage: '机器人已启用。请在 IM 中向机器人发送一条消息以继续。',
       messageReceived: '机器人已成功收到 IM 消息，可以进入下一步。',
+      pageBotTestPrompt:
+        '页面机器人已启用。点击右下角聊天气泡并发送一条消息，验证完整对话链路。',
       webhookTestPrompt:
         '回调地址已就绪。将它配置到外部平台，然后向机器人发送一条真实消息。',
       httpTestPrompt: 'HTTP Bot 已启用。可直接发送一条真实入站消息验证连接。',