e02cf05baf
- Add AppUpdater module with update lifecycle management - Create UpdateSettings UI component with progress display - Add Progress UI component based on Radix UI - Create update Zustand store for state management - Register update IPC handlers in main process - Auto-check for updates on production startup - Add commit documentation for commits 2-6
125 lines
3.7 KiB
Markdown
125 lines
3.7 KiB
Markdown
# Commit 5: Channel Connection Flows
|
|
|
|
## Summary
|
|
Implement comprehensive channel management UI with multi-platform support, including QR code-based connection for WhatsApp/WeChat and token-based connection for Telegram/Discord/Slack.
|
|
|
|
## Changes
|
|
|
|
### React Renderer
|
|
|
|
#### `src/pages/Channels/index.tsx`
|
|
Complete rewrite with enhanced functionality:
|
|
|
|
**Main Components:**
|
|
- `Channels` - Main page with channel list, stats, and add dialog
|
|
- `ChannelCard` - Individual channel display with connect/disconnect/delete
|
|
- `AddChannelDialog` - Multi-step channel addition flow
|
|
|
|
**Features:**
|
|
- Channel statistics (Total, Connected, Disconnected)
|
|
- Gateway status warning when not running
|
|
- Supported channel type grid for quick add
|
|
- Connection-type specific flows:
|
|
- QR Code: WhatsApp, WeChat
|
|
- Token: Telegram, Discord, Slack
|
|
|
|
**AddChannelDialog Flow:**
|
|
1. Select channel type
|
|
2. View connection instructions
|
|
3. For QR: Generate and display QR code
|
|
4. For Token: Enter bot token
|
|
5. Optionally name the channel
|
|
6. Confirm and add
|
|
|
|
**Channel Info Configuration:**
|
|
```typescript
|
|
const channelInfo: Record<ChannelType, {
|
|
description: string;
|
|
connectionType: 'qr' | 'token' | 'oauth';
|
|
instructions: string[];
|
|
tokenLabel?: string;
|
|
docsUrl?: string;
|
|
}>
|
|
```
|
|
|
|
#### `src/stores/channels.ts`
|
|
Enhanced channel store with new actions:
|
|
- `addChannel(params)` - Add new channel with type, name, token
|
|
- `deleteChannel(channelId)` - Remove channel
|
|
- `requestQrCode(channelType)` - Request QR code from Gateway
|
|
- `clearError()` - Clear error state
|
|
|
|
Improved error handling:
|
|
- Graceful fallback when Gateway unavailable
|
|
- Local channel creation for offline mode
|
|
|
|
#### `src/types/channel.ts`
|
|
No changes - existing types sufficient.
|
|
|
|
### Electron Main Process
|
|
|
|
#### `electron/utils/store.ts`
|
|
- Converted to dynamic imports for ESM compatibility
|
|
- All functions now async
|
|
|
|
#### `electron/main/window.ts`
|
|
- Converted to dynamic imports for ESM compatibility
|
|
- `getWindowState()` and `saveWindowState()` now async
|
|
|
|
## Technical Details
|
|
|
|
### Channel Connection Architecture
|
|
```
|
|
AddChannelDialog
|
|
|
|
|
+-- QR Flow
|
|
| |
|
|
| v
|
|
| requestQrCode() --> Gateway --> WhatsApp/WeChat API
|
|
| | |
|
|
| v v
|
|
| Display QR <-- qrCode string <-- QR Generated
|
|
| |
|
|
| v
|
|
| User Scans --> Device Confirms --> channel:status event
|
|
|
|
|
+-- Token Flow
|
|
|
|
|
v
|
|
Enter Token --> addChannel() --> Gateway --> Bot API
|
|
| |
|
|
v v
|
|
Validate <-- success/error <-- Connection Attempt
|
|
```
|
|
|
|
### Channel Types Configuration
|
|
| Type | Connection | Token Label | Docs |
|
|
|------|------------|-------------|------|
|
|
| WhatsApp | QR Code | - | WhatsApp FAQ |
|
|
| Telegram | Token | Bot Token | BotFather Docs |
|
|
| Discord | Token | Bot Token | Developer Portal |
|
|
| Slack | Token | Bot Token (xoxb-) | Slack API |
|
|
| WeChat | QR Code | - | - |
|
|
|
|
### Connection Instructions
|
|
Each channel type provides step-by-step instructions:
|
|
- WhatsApp: Open app > Settings > Linked Devices > Scan
|
|
- Telegram: @BotFather > /newbot > Copy token
|
|
- Discord: Developer Portal > Application > Bot > Token
|
|
- Slack: API Apps > Create App > OAuth > Install
|
|
|
|
### UI Components Used
|
|
- `Card`, `Button`, `Input`, `Label` - Base components
|
|
- `Separator` - Visual dividers
|
|
- `StatusBadge` - Connection status
|
|
- `LoadingSpinner` - Loading states
|
|
- Lucide icons: Plus, Radio, RefreshCw, Power, QrCode, etc.
|
|
|
|
### Error Handling
|
|
- Gateway offline: Create local channel, show warning
|
|
- Connection failed: Display error on ChannelCard
|
|
- Invalid token: Show validation error in dialog
|
|
|
|
## Version
|
|
v0.1.0-alpha (incremental)
|