Files

Haze e02cf05baf feat(update): implement auto-update functionality with electron-updater

- 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

2026-02-05 23:36:12 +08:00

3.7 KiB

Raw Blame History

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:

Select channel type
View connection instructions
For QR: Generate and display QR code
For Token: Enter bot token
Optionally name the channel
Confirm and add

Channel Info Configuration:

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)

3.7 KiB Raw Blame History