Feat/onboarding wizard (#2086)

* feat(web): add onboarding wizard for guided bot creation

Implement a full-screen 4-step wizard at /wizard that guides users
through selecting a platform, configuring a bot, choosing an AI engine,
and completing setup. The wizard uses DynamicFormComponent for adapter
and pipeline configuration, embeds BotLogListComponent for real-time
debugging, persists state to localStorage, and integrates with Space
OAuth flow. Also fixes a prompt-editor crash in DynamicFormComponent
when value is undefined.

* feat(wizard): redesign step 0/1 flow, add skip dialog, auto-expand log images

- Step 0: Remove bot name/description fields; auto-derive name from adapter
  label; create disabled bot on confirm; advance to Step 1 automatically
- Step 1: Replace 'Create Bot' with 'Save & Enable Bot'; update adapter
  config and enable bot; disable form fields after saving
- Add skip confirmation AlertDialog with i18n message
- Add LanguageSelector to wizard header
- Move wizard sidebar entry to last position to prevent fallback redirect loop
- Add defaultExpanded prop to BotLogCard; auto-expand entries with images
  in wizard via autoExpandImages prop on BotLogListComponent
- Remove automatic default pipeline creation (write_default_pipeline) from
  backend persistence manager since the wizard now handles pipeline creation
- Update all 4 locale files (en-US, zh-Hans, zh-Hant, ja-JP)

* fix(wizard): hide detailed logs link in wizard, allow re-editing bot config after save

- Add hideDetailedLogsLink prop to BotLogListComponent; pass it in wizard
- Remove isEditing on DynamicFormComponent so form stays editable after save
- Always show save button; label changes to 'Re-save' after first save
- Add resaveBot i18n key to all 4 locale files

* style(wizard): move save button into config card header

* fix(wizard): initialize userInfo/systemInfo so model selector works

The wizard runs outside /home layout, so userInfo was null. This caused
the model-fallback-selector to filter out all Space models, showing an
empty dropdown. Fix by calling initializeUserInfo() and
initializeSystemInfo() before fetching wizard data.

Also:
- Hide log toolbar in wizard via hideToolbar prop on BotLogListComponent
- Add empty state message for bot logs (noLogs i18n key, all 4 locales)

* feat(wizard): redesign AI Engine step with left-right split layout

Before selecting a runner: centered grid of runner cards.
After selecting: left panel shows compact runner list for switching,
right panel shows runner config form with slide-in animations.

Also fix prompt field default: add default value to prompt-editor field
in ai.yaml metadata so the prompt is pre-populated with
'You are a helpful assistant.' instead of being empty.

* feat(pipeline): add default values to ai.yaml runner configs and show_if for n8n auth fields

- Sync default values from default-pipeline-config.json to all runner
  config fields in ai.yaml so wizard forms are pre-populated
- Add show_if conditions to n8n-service-api auth fields so only the
  relevant credentials appear based on selected auth-type
- Fix prompt-editor crash in DynamicFormItemComponent when field.value
  is undefined (Array.isArray guard + fallback)
- Improve wizard Step 2 split layout with fixed column widths,
  independent scroll, ring clipping fix, and mobile responsiveness
- Use key={selected} on DynamicFormComponent to force remount on
  runner switch
- Improve pipeline creation flow: create → fetch defaults → merge AI
  section → update (preserves trigger/safety/output defaults)

* feat(dynamic-form): add systemContext prop with __system.* namespace for show_if conditions

- Add systemContext prop to DynamicFormComponent for injecting external
  variables accessible via __system.* prefix in show_if conditions
- Extract resolveShowIfValue() helper for cleaner field resolution
- Pass { is_wizard: true } from wizard to hide knowledge-bases field
- Remove bot config save toast in wizard (keep inline indicator)

* feat(sidebar): render wizard as standalone item before Home group with fallback redirect fix

* fix(wizard): remove unused setBotDescription to fix lint error
This commit is contained in:
Junyan Chin
2026-03-28 00:46:22 +08:00
committed by GitHub
parent 6570f276d2
commit c111bf1714
15 changed files with 1601 additions and 115 deletions
+64
View File
@@ -5,6 +5,7 @@ const enUS = {
installedPlugins: 'Installed Plugins',
pluginMarket: 'Marketplace',
mcpServers: 'MCP Servers',
quickStart: 'Quick Start',
},
common: {
login: 'Login',
@@ -321,6 +322,7 @@ const enUS = {
viewDetails: 'Details',
collapse: 'Collapse',
imagesAttached: 'image(s) attached',
noLogs: 'No logs yet',
sessionMonitor: {
title: 'Sessions',
sessions: 'Sessions',
@@ -1109,6 +1111,68 @@ const enUS = {
maxExtensionsReached:
'Maximum number of extensions ({{max}}) reached. Please remove an existing MCP server or plugin before adding a new one.',
},
wizard: {
sidebarDescription: 'Create a bot with guided steps',
loading: 'Loading wizard...',
loadError: 'Failed to load wizard data',
skip: 'Skip',
skipConfirmMessage:
'You can re-enter the Quick Start wizard from the sidebar later, or create a bot manually.',
skipConfirmOk: 'OK',
prev: 'Previous',
next: 'Next',
finish: 'Create & Deploy',
confirmCreateBot: 'Confirm, Create Bot',
createSuccess: 'Pipeline created and linked to bot successfully!',
botCreateSuccess: 'Bot created successfully!',
botSaveSuccess: 'Bot configuration saved and enabled!',
createError: 'Failed to create resources',
spaceAuthError: 'Failed to initiate Space authorization',
step: {
platform: 'Platform',
botConfig: 'Bot Setup',
aiEngine: 'AI Engine',
done: 'Done',
},
platform: {
title: 'Select a Platform',
description: 'Choose the messaging platform your bot will connect to.',
},
botConfig: {
title: 'Configure Your Bot',
description: 'Set up your bot and verify it works before continuing.',
saveBot: 'Save & Enable Bot',
resaveBot: 'Re-save Configuration',
botSaved:
'Bot configuration saved and enabled. Check the logs to verify the connection.',
logsTitle: 'Bot Logs',
logsDescription:
'Monitor bot activity to verify the platform connection is working.',
},
aiEngine: {
title: 'Select an AI Engine',
description:
"Choose the AI engine that will power your bot's intelligence.",
},
spaceBanner: {
message:
'Connect to LangBot Space for free trial model credits and zero-config instant setup!',
action: 'Authorize with Space',
},
config: {
botInfo: 'Bot Information',
botNamePlaceholder: 'Enter bot name',
botDescPlaceholder: 'Enter bot description (optional)',
platformConfig: '{{platform}} Configuration',
aiConfig: '{{engine}} Configuration',
},
done: {
title: 'All Set!',
description:
'Your bot has been created and connected to the AI pipeline. You can now manage it from the workbench.',
backToWorkbench: 'Back to Workbench',
},
},
};
export default enUS;
+66
View File
@@ -5,6 +5,7 @@
installedPlugins: 'インストール済みプラグイン',
pluginMarket: 'プラグインマーケット',
mcpServers: 'MCPサーバー',
quickStart: 'クイックスタート',
},
common: {
login: 'ログイン',
@@ -322,6 +323,7 @@
allLevels: 'すべてのレベル',
selectLevel: 'レベルを選択',
levelsSelected: 'レベル選択済み',
noLogs: 'ログはまだありません',
sessionMonitor: {
title: 'セッション監視',
sessions: 'セッション一覧',
@@ -1083,6 +1085,70 @@
maxExtensionsReached:
'拡張機能数が上限({{max}}個)に達しました。新しい MCP サーバーやプラグインを追加するには、既存のものを削除してください。',
},
wizard: {
sidebarDescription: 'ガイド付きステップでボットを作成',
loading: 'ウィザードを読み込み中...',
loadError: 'ウィザードデータの読み込みに失敗しました',
skip: 'スキップ',
skipConfirmMessage:
'サイドバーからクイックスタートウィザードに再度アクセスするか、手動でボットを作成できます。',
skipConfirmOk: 'OK',
prev: '前へ',
next: '次へ',
finish: '作成&デプロイ',
confirmCreateBot: '確定、ボットを作成',
createSuccess: 'パイプラインが作成され、ボットにリンクされました!',
botCreateSuccess: 'ボットが正常に作成されました!',
botSaveSuccess: 'ボット設定が保存され、有効になりました!',
createError: 'リソースの作成に失敗しました',
spaceAuthError: 'Space 認証の開始に失敗しました',
step: {
platform: 'プラットフォーム',
botConfig: 'ボット設定',
aiEngine: 'AIエンジン',
done: '完了',
},
platform: {
title: 'プラットフォームを選択',
description:
'ボットが接続するメッセージングプラットフォームを選択してください。',
},
botConfig: {
title: 'ボットを設定',
description:
'ボットをセットアップし、正常に動作することを確認してから続行してください。',
saveBot: '保存して有効化',
resaveBot: '設定を再保存',
botSaved:
'ボット設定が保存され、有効になりました。ログを確認して接続を検証してください。',
logsTitle: 'ボットログ',
logsDescription:
'ボットの活動を監視して、プラットフォーム接続が正常に動作していることを確認します。',
},
aiEngine: {
title: 'AIエンジンを選択',
description:
'ボットのインテリジェンスを駆動するAIエンジンを選択してください。',
},
spaceBanner: {
message:
'LangBot Spaceに接続して、無料トライアルモデルクレジットとゼロ設定の即時セットアップを入手!',
action: 'Spaceで認証',
},
config: {
botInfo: 'ボット情報',
botNamePlaceholder: 'ボット名を入力',
botDescPlaceholder: 'ボットの説明を入力(任意)',
platformConfig: '{{platform}} 設定',
aiConfig: '{{engine}} 設定',
},
done: {
title: '完了しました!',
description:
'ボットが作成され、AIパイプラインに接続されました。ワークベンチから管理できます。',
backToWorkbench: 'ワークベンチに戻る',
},
},
};
export default jaJP;
+60
View File
@@ -5,6 +5,7 @@ const zhHans = {
installedPlugins: '已安装插件',
pluginMarket: '插件市场',
mcpServers: 'MCP 服务器',
quickStart: '快速开始',
},
common: {
login: '登录',
@@ -306,6 +307,7 @@ const zhHans = {
viewDetails: '详情',
collapse: '收起',
imagesAttached: '张图片',
noLogs: '暂无日志',
sessionMonitor: {
title: '会话监控',
sessions: '会话列表',
@@ -1056,6 +1058,64 @@ const zhHans = {
maxExtensionsReached:
'已达到扩展数量上限({{max}}个)。请先删除已有的 MCP 服务器或插件后再添加新的。',
},
wizard: {
sidebarDescription: '通过引导步骤创建机器人',
loading: '正在加载向导...',
loadError: '加载向导数据失败',
skip: '跳过',
skipConfirmMessage:
'您之后可以在侧边栏重新进入快速开始向导,或手动创建机器人。',
skipConfirmOk: '确定',
prev: '上一步',
next: '下一步',
finish: '创建并部署',
confirmCreateBot: '确定,创建机器人',
createSuccess: '流水线已创建并关联到机器人!',
botCreateSuccess: '机器人创建成功!',
botSaveSuccess: '机器人配置已保存并启用!',
createError: '创建资源失败',
spaceAuthError: '无法发起 Space 授权',
step: {
platform: '平台接入',
botConfig: '机器人配置',
aiEngine: 'AI 引擎',
done: '完成',
},
platform: {
title: '选择平台',
description: '选择机器人要接入的消息平台。',
},
botConfig: {
title: '配置机器人',
description: '配置好机器人并确认其正常运行后再继续。',
saveBot: '保存并启用',
resaveBot: '重新保存配置',
botSaved: '机器人配置已保存并启用,请查看日志确认连接正常。',
logsTitle: '机器人日志',
logsDescription: '监控机器人活动,确认平台连接是否正常工作。',
},
aiEngine: {
title: '选择 AI 引擎',
description: '选择驱动机器人智能的 AI 引擎。',
},
spaceBanner: {
message: '接入 LangBot Space,获取免费试用模型额度,零配置极速开箱!',
action: '前往授权登录',
},
config: {
botInfo: '机器人信息',
botNamePlaceholder: '请输入机器人名称',
botDescPlaceholder: '请输入机器人描述(可选)',
platformConfig: '{{platform}} 配置',
aiConfig: '{{engine}} 配置',
},
done: {
title: '一切就绪!',
description:
'机器人已创建并连接到 AI 流水线。你现在可以在工作台中管理它。',
backToWorkbench: '返回工作台',
},
},
};
export default zhHans;
+60
View File
@@ -5,6 +5,7 @@ const zhHant = {
installedPlugins: '已安裝外掛',
pluginMarket: '外掛市場',
mcpServers: 'MCP 伺服器',
quickStart: '快速開始',
},
common: {
login: '登入',
@@ -301,6 +302,7 @@ const zhHant = {
allLevels: '全部級別',
selectLevel: '選擇級別',
levelsSelected: '個級別已選',
noLogs: '暫無日誌',
sessionMonitor: {
title: '會話監控',
sessions: '會話列表',
@@ -1023,6 +1025,64 @@ const zhHant = {
maxExtensionsReached:
'已達到擴充功能數量上限({{max}}個)。請先刪除已有的 MCP 伺服器或外掛後再新增。',
},
wizard: {
sidebarDescription: '透過引導步驟建立機器人',
loading: '正在載入嚮導...',
loadError: '載入嚮導資料失敗',
skip: '跳過',
skipConfirmMessage:
'您之後可以在側邊欄重新進入快速開始嚮導,或手動建立機器人。',
skipConfirmOk: '確定',
prev: '上一步',
next: '下一步',
finish: '建立並部署',
confirmCreateBot: '確定,建立機器人',
createSuccess: '流水線已建立並關聯到機器人!',
botCreateSuccess: '機器人建立成功!',
botSaveSuccess: '機器人配置已儲存並啟用!',
createError: '建立資源失敗',
spaceAuthError: '無法發起 Space 授權',
step: {
platform: '平台接入',
botConfig: '機器人配置',
aiEngine: 'AI 引擎',
done: '完成',
},
platform: {
title: '選擇平台',
description: '選擇機器人要接入的訊息平台。',
},
botConfig: {
title: '配置機器人',
description: '配置好機器人並確認其正常運作後再繼續。',
saveBot: '儲存並啟用',
resaveBot: '重新儲存配置',
botSaved: '機器人配置已儲存並啟用,請查看日誌確認連接正常。',
logsTitle: '機器人日誌',
logsDescription: '監控機器人活動,確認平台連接是否正常運作。',
},
aiEngine: {
title: '選擇 AI 引擎',
description: '選擇驅動機器人智慧的 AI 引擎。',
},
spaceBanner: {
message: '接入 LangBot Space,取得免費試用模型額度,零配置極速開箱!',
action: '前往授權登入',
},
config: {
botInfo: '機器人資訊',
botNamePlaceholder: '請輸入機器人名稱',
botDescPlaceholder: '請輸入機器人描述(可選)',
platformConfig: '{{platform}} 配置',
aiConfig: '{{engine}} 配置',
},
done: {
title: '一切就緒!',
description:
'機器人已建立並連接到 AI 流水線。你現在可以在工作台中管理它。',
backToWorkbench: '返回工作台',
},
},
};
export default zhHant;