feat(wizard): label page bot test preview

web/src/app/wizard/page.tsx

@@ -1128,14 +1128,17 @@ function StepPlatform({
 function PageBotFloatingWidget({
   botUuid,
   title,
+  testNotice,
 }: {
   botUuid: string;
   title?: string;
+  testNotice: string;
 }) {
   useEffect(() => {
     const script = document.createElement('script');
-    script.src = `${window.location.origin}/api/v1/embed/${botUuid}/widget.js`;
+    script.src = `${window.location.origin}/api/v1/embed/${botUuid}/widget.js?preview=wizard&v=${Date.now()}`;
     script.dataset.title = title || 'LangBot';
+    script.dataset.testNotice = testNotice;
     document.body.appendChild(script);
 
     return () => {
@@ -1149,7 +1152,7 @@ function PageBotFloatingWidget({
         root?.remove();
       }
     };
-  }, [botUuid, title]);
+  }, [botUuid, testNotice, title]);
 
   return null;
 }
@@ -1242,6 +1245,7 @@ function StepBotConfig({
               ? adapterConfigValues.title
               : undefined
           }
+          testNotice={t('wizard.botConfig.pageBotTestNotice')}
         />
       )}
 

web/src/i18n/locales/en-US.ts

@@ -1833,6 +1833,8 @@ const enUS = {
         '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.',
+      pageBotTestNotice:
+        'For testing only. Embed the code on a real external webpage.',
       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

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

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

@@ -1753,6 +1753,7 @@ const zhHans = {
       messageReceived: '机器人已成功收到 IM 消息，可以进入下一步。',
       pageBotTestPrompt:
         '页面机器人已启用。点击右下角聊天气泡并发送一条消息，验证完整对话链路。',
+      pageBotTestNotice: '仅供测试使用，请嵌入代码到真实外部网页。',
       webhookTestPrompt:
         '回调地址已就绪。将它配置到外部平台，然后向机器人发送一条真实消息。',
       httpTestPrompt: 'HTTP Bot 已启用。可直接发送一条真实入站消息验证连接。',

web/tests/unit/wizard-page-bot.test.mjs

@@ -0,0 +1,33 @@
+import assert from 'node:assert/strict';
+import fs from 'node:fs';
+import path from 'node:path';
+import test from 'node:test';
+import { fileURLToPath } from 'node:url';
+
+const currentDirectory = path.dirname(fileURLToPath(import.meta.url));
+const wizardSource = fs.readFileSync(
+  path.resolve(currentDirectory, '../../src/app/wizard/page.tsx'),
+  'utf8',
+);
+const widgetSource = fs.readFileSync(
+  path.resolve(
+    currentDirectory,
+    '../../../src/langbot/templates/embed/widget.js',
+  ),
+  'utf8',
+);
+
+test('shows the test-only notice only when the wizard opts in', () => {
+  assert.match(
+    wizardSource,
+    /widget\.js\?preview=wizard&v=\$\{Date\.now\(\)\}/,
+  );
+  assert.match(wizardSource, /script\.dataset\.testNotice = testNotice/);
+  assert.match(
+    wizardSource,
+    /testNotice=\{t\('wizard\.botConfig\.pageBotTestNotice'\)\}/,
+  );
+  assert.match(widgetSource, /getAttribute\("data-test-notice"\)/);
+  assert.match(widgetSource, /if \(scriptTestNotice\)/);
+  assert.match(widgetSource, /testNotice\.textContent = scriptTestNotice/);
+});