From 3fd62e112f57eb3c71ba704f54653f307e4a9194 Mon Sep 17 00:00:00 2001 From: Haze <709547807@qq.com> Date: Fri, 6 Feb 2026 01:48:34 +0800 Subject: [PATCH] refactor(setup): remove channel step from setup wizard - Remove channel connection step from onboarding flow (6 steps -> 5 steps) - Users can now start using ClawX immediately - Channel configuration moved to Settings > Channels (future) - Update architecture doc to reflect simplified setup flow - Reduces onboarding friction for new users --- ClawX-项目架构与版本大纲.md | 20 +-- .../commit_13_remove_channel_setup.md | 67 +++++++ build_process/process.md | 2 + src/pages/Setup/index.tsx | 165 ++---------------- 4 files changed, 92 insertions(+), 162 deletions(-) create mode 100644 build_process/commit_13_remove_channel_setup.md diff --git a/ClawX-项目架构与版本大纲.md b/ClawX-项目架构与版本大纲.md index 193cab3cc..f35654257 100644 --- a/ClawX-项目架构与版本大纲.md +++ b/ClawX-项目架构与版本大纲.md @@ -576,13 +576,13 @@ clawx/ │ │ │ ├── index.tsx │ │ │ ├── GeneralSettings.tsx │ │ │ ├── ProviderSettings.tsx +│ │ │ ├── ChannelsSettings.tsx # 通道连接配置 (从安装向导移出) │ │ │ └── AdvancedSettings.tsx -│ │ └── Setup/ # 安装向导 +│ │ └── Setup/ # 安装向导 (简化版，不含通道连接) │ │ ├── index.tsx │ │ ├── WelcomeStep.tsx │ │ ├── RuntimeStep.tsx │ │ ├── ProviderStep.tsx -│ │ ├── ChannelStep.tsx │ │ └── SkillStep.tsx │ │ │ ├── components/ # 通用组件 @@ -812,12 +812,8 @@ const steps: SetupStep[] = [ description: '配置您的 AI 服务提供商', component: ProviderStep, }, - { - id: 'channel', - title: '连接消息应用', - description: '绑定 WhatsApp、Telegram 等', - component: ChannelStep, - }, + // NOTE: Channel step removed - 通道连接移至 Settings > Channels 页面 + // 用户可在完成初始设置后自行配置消息通道 { id: 'skills', title: '选择技能包', @@ -4042,13 +4038,15 @@ ClawX 版本: X.Y.Z[-prerelease] | Node.js 自动检测/安装 | P0 | ⬜ | | openclaw npm 安装 | P0 | ⬜ | | Provider 配置 (API Key) | P0 | ⬜ | -| 首个通道连接 (WhatsApp QR) | P1 | ⬜ | | 错误处理与提示 | P1 | ⬜ | +> **注意**: 通道连接功能 (WhatsApp/Telegram 等) 已从安装向导移至 Settings > Channels 页面。 +> 用户可在完成初始设置后，根据需要自行配置消息通道，降低首次使用门槛。 + **交付物**: -- 完整安装向导流程 +- 简化版安装向导流程 (不含通道连接) - 支持 macOS (Apple Silicon + Intel) -- 可配置 Anthropic/OpenAI +- 可配置 Anthropic/OpenAI/OpenRouter --- diff --git a/build_process/commit_13_remove_channel_setup.md b/build_process/commit_13_remove_channel_setup.md new file mode 100644 index 000000000..cd5bf84b2 --- /dev/null +++ b/build_process/commit_13_remove_channel_setup.md @@ -0,0 +1,67 @@ +# Commit 13: Remove Channel Setup Step + +## Overview +Simplified the setup wizard by removing the channel connection step. Users can now start using ClawX immediately and configure messaging channels later in Settings. + +## Rationale +- Channel connection (WhatsApp, Telegram, etc.) is complex and requires external platform configuration +- Not required for core functionality - users can use the built-in chat interface directly +- Reduces onboarding friction for new users +- Progressive disclosure - advanced features available when needed + +## Changes + +### 1. Setup Wizard (`src/pages/Setup/index.tsx`) + +**Steps reduced from 6 to 5:** + +| Before | After | +|--------|-------| +| 0: Welcome | 0: Welcome | +| 1: Runtime | 1: Runtime | +| 2: Provider | 2: Provider | +| 3: Channel | (removed) | +| 4: Skills | 3: Skills | +| 5: Complete | 4: Complete | + +**Code changes:** +- Removed `channel` step from `steps` array +- Updated `currentStep` indices for content rendering +- Updated `useEffect` for `canProceed` validation +- Removed `selectedChannel` state variable +- Removed `ChannelContent` component and `Channel` interface +- Updated `CompleteContent` to remove channel row +- Added note about configuring channels in Settings + +### 2. Architecture Document (`ClawX-项目架构与版本大纲.md`) + +- Updated section 2.4.2 setup wizard steps (removed ChannelStep) +- Updated directory structure (added ChannelsSettings.tsx to Settings, removed ChannelStep.tsx) +- Updated v0.5.0 milestone to note channel connection is deferred + +## User Experience + +**Before:** +``` +Welcome → Runtime → Provider → Channel → Skills → Complete + ↑ + (complex, often skipped) +``` + +**After:** +``` +Welcome → Runtime → Provider → Skills → Complete + ↓ + "Configure channels in Settings" +``` + +## Files Changed +- `src/pages/Setup/index.tsx` - Removed channel step (-140 lines) +- `ClawX-项目架构与版本大纲.md` - Updated documentation + +## Future Work +- Implement Settings > Channels page with: + - WhatsApp QR code scanning + - Telegram bot token configuration + - Discord/Slack OAuth flows + - Connection status indicators diff --git a/build_process/process.md b/build_process/process.md index b60ff3092..77be9dec8 100644 --- a/build_process/process.md +++ b/build_process/process.md @@ -18,6 +18,7 @@ * [commit_10] Cron tasks - Create/edit dialog, schedule presets, improved UI * [commit_11] OpenClaw submodule fix - GitHub URL, auto-generated token, WebSocket auth * [commit_12] Real API key validation - OpenRouter support, actual API calls to verify keys +* [commit_13] Remove channel setup step - Simplified onboarding, channels moved to Settings ### Plan: 1. ~~Initialize project structure~~ ✅ @@ -46,6 +47,7 @@ All core features have been implemented: - Cron tasks management for scheduled automation - OpenClaw submodule from official GitHub (v2026.2.3) with auto-token auth - Real API key validation via actual API calls (Anthropic, OpenAI, Google, OpenRouter) +- Simplified setup wizard (channel connection deferred to Settings page) ## Version Milestones diff --git a/src/pages/Setup/index.tsx b/src/pages/Setup/index.tsx index 8b5764b7a..66e916ebc 100644 --- a/src/pages/Setup/index.tsx +++ b/src/pages/Setup/index.tsx @@ -47,11 +47,7 @@ const steps: SetupStep[] = [ title: 'AI Provider', description: 'Configure your AI service', }, - { - id: 'channel', - title: 'Connect Channel', - description: 'Link a messaging app', - }, + // Channel step removed - users can configure channels later in Settings { id: 'skills', title: 'Choose Skills', @@ -80,20 +76,7 @@ const providers: Provider[] = [ { id: 'openrouter', name: 'OpenRouter', model: 'Multi-Model', icon: '🌐', placeholder: 'sk-or-...' }, ]; -// Channel types -interface Channel { - type: string; - name: string; - icon: string; - description: string; -} - -const channels: Channel[] = [ - { type: 'whatsapp', name: 'WhatsApp', icon: '📱', description: 'Connect via QR code scan' }, - { type: 'telegram', name: 'Telegram', icon: '✈️', description: 'Connect via bot token' }, - { type: 'discord', name: 'Discord', icon: '🎮', description: 'Connect via bot token' }, - { type: 'slack', name: 'Slack', icon: '💼', description: 'Connect via OAuth' }, -]; +// NOTE: Channel types moved to Settings > Channels page // Skill bundle types interface SkillBundle { @@ -146,7 +129,7 @@ export function Setup() { // Setup state const [selectedProvider, setSelectedProvider] = useState(null); const [apiKey, setApiKey] = useState(''); - const [selectedChannel, setSelectedChannel] = useState(null); + // Channel selection moved to Settings page const [selectedBundles, setSelectedBundles] = useState>(new Set(['productivity', 'developer'])); const step = steps[currentStep]; @@ -187,17 +170,14 @@ export function Setup() { case 2: // Provider setCanProceed(selectedProvider !== null && apiKey.length > 0); break; - case 3: // Channel - setCanProceed(true); // Channel is optional - break; - case 4: // Skills + case 3: // Skills setCanProceed(selectedBundles.size > 0); break; - case 5: // Complete + case 4: // Complete setCanProceed(true); break; } - }, [currentStep, selectedProvider, apiKey, selectedChannel, selectedBundles]); + }, [currentStep, selectedProvider, apiKey, selectedBundles]); return (
@@ -263,13 +243,6 @@ export function Setup() { /> )} {currentStep === 3 && ( - - )} - {currentStep === 4 && ( )} - {currentStep === 5 && ( + {currentStep === 4 && ( @@ -315,7 +287,7 @@ export function Setup() { 'Get Started' ) : ( <> - {currentStep === 3 && !selectedChannel ? 'Skip' : 'Next'} + Next )} @@ -703,112 +675,7 @@ function ProviderContent({ ); } -interface ChannelContentProps { - channels: Channel[]; - selectedChannel: string | null; - onSelectChannel: (type: string | null) => void; -} - -function ChannelContent({ channels, selectedChannel, onSelectChannel }: ChannelContentProps) { - const [connecting, setConnecting] = useState(false); - const [qrCode, setQrCode] = useState(null); - - const handleConnect = async (channelType: string) => { - onSelectChannel(channelType); - setConnecting(true); - - // Simulate QR code generation for WhatsApp - if (channelType === 'whatsapp') { - await new Promise((resolve) => setTimeout(resolve, 1000)); - // In real app, this would be a real QR code - setQrCode('placeholder'); - } - - setConnecting(false); - }; - - return ( -
-
-

Connect a Channel

-

- Link a messaging app to start chatting with your AI -

-
- - {!selectedChannel ? ( -
- {channels.map((channel) => ( - - ))} -
- ) : ( - -
- - {channels.find((c) => c.type === selectedChannel)?.icon} - - - {channels.find((c) => c.type === selectedChannel)?.name} - -
- - {connecting ? ( -
- -

Generating QR code...

-
- ) : selectedChannel === 'whatsapp' && qrCode ? ( -
-
- {/* Placeholder QR code */} -
- QR Code Placeholder -
-
-

- Scan this QR code with WhatsApp to connect -

-
- ) : ( -
-

- Follow the instructions to connect your {channels.find((c) => c.type === selectedChannel)?.name} account. -

-
- )} - - - - )} - -

- You can add more channels later in Settings -

-
- ); -} +// NOTE: ChannelContent component moved to Settings > Channels page interface SkillsContentProps { bundles: SkillBundle[]; @@ -865,16 +732,14 @@ function SkillsContent({ bundles, selectedBundles, onToggleBundle }: SkillsConte interface CompleteContentProps { selectedProvider: string | null; - selectedChannel: string | null; selectedBundles: Set; bundles: SkillBundle[]; } -function CompleteContent({ selectedProvider, selectedChannel, selectedBundles, bundles }: CompleteContentProps) { +function CompleteContent({ selectedProvider, selectedBundles, bundles }: CompleteContentProps) { const gatewayStatus = useGatewayStore((state) => state.status); const providerData = providers.find((p) => p.id === selectedProvider); - const channelData = channels.find((c) => c.type === selectedChannel); const selectedBundleNames = bundles .filter((b) => selectedBundles.has(b.id)) .map((b) => b.name) @@ -896,12 +761,6 @@ function CompleteContent({ selectedProvider, selectedChannel, selectedBundles, b {providerData ? `${providerData.icon} ${providerData.name}` : '—'}
-
- Channel - - {channelData ? `${channelData.icon} ${channelData.name}` : 'Skipped'} - -
Skills @@ -915,6 +774,10 @@ function CompleteContent({ selectedProvider, selectedChannel, selectedBundles, b
+ +

+ You can connect messaging channels later in Settings → Channels +

); }