599802b818
- Add ActionBar component with expandable toolbar for mobile - Add @mention functionality with autocomplete dropdown - Add browser notification system (push, sound, vibration) - Add NotificationSettings modal for user preferences - Add mention badges on room list cards - Add ReportPreview with Markdown rendering and copy/download - Add message copy functionality with hover actions - Add backend mentions field to messages with Alembic migration - Add lots field to rooms, remove templates - Optimize WebSocket database session handling - Various UX polish (animations, accessibility) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
81 lines
2.6 KiB
Markdown
81 lines
2.6 KiB
Markdown
# Tasks: Improve Chat UX v2
|
||
|
||
## Phase 1: Action Bar Redesign
|
||
|
||
### T-1.1: 前端 Action Bar 組件
|
||
- [x] 建立 `ActionBar.tsx` 組件（輸入框上方工具列）
|
||
- [x] 實作展開/收合按鈕群組
|
||
- [x] 整合上傳檔案按鈕
|
||
- [x] 整合生成報告按鈕
|
||
- [x] 整合添加人員按鈕
|
||
|
||
### T-1.2: RoomDetail 介面重構
|
||
- [x] 移除頁首的操作按鈕
|
||
- [x] 整合 ActionBar 到輸入區域
|
||
- [x] 調整 header 僅顯示房間資訊
|
||
- [x] 響應式佈局調整（mobile/desktop）
|
||
|
||
## Phase 2: Report Markdown Preview
|
||
|
||
### T-2.1: 後端 Markdown 輸出
|
||
- [x] 新增 `GET /api/rooms/{room_id}/reports/{report_id}/markdown` 端點
|
||
- [x] 實作 `DocxService.to_markdown()` 方法
|
||
- [x] 從 AI JSON 內容生成結構化 Markdown
|
||
|
||
### T-2.2: 前端預覽組件
|
||
- [x] 建立 `ReportPreview.tsx` 組件
|
||
- [x] 整合 Markdown 渲染（react-markdown）
|
||
- [x] 實作「複製 Markdown」按鈕
|
||
- [x] 實作「下載 Word」按鈕
|
||
- [x] 新增預覽 Modal/Drawer
|
||
|
||
## Phase 3: Message Actions
|
||
|
||
### T-3.1: 訊息複製功能
|
||
- [x] 在訊息 hover 時顯示操作按鈕
|
||
- [x] 實作複製訊息內容功能
|
||
- [x] 複製成功提示 (icon change feedback)
|
||
|
||
### T-3.2: @Mention 功能 - 前端
|
||
- [x] 建立 `MentionInput.tsx` 組件
|
||
- [x] 輸入 `@` 時觸發成員選單
|
||
- [x] 支援鍵盤選擇（上下鍵、Enter）
|
||
- [x] 顯示成員 display_name
|
||
- [x] 訊息中 @mention 高亮顯示
|
||
|
||
### T-3.3: @Mention 功能 - 後端
|
||
- [x] 修改 Message model 新增 `mentions` JSON 欄位
|
||
- [x] 訊息建立時解析 @mention (parse_mentions function)
|
||
- [x] 建立 Alembic migration
|
||
|
||
## Phase 4: Notification System
|
||
|
||
### T-4.1: 瀏覽器通知
|
||
- [x] 建立 `NotificationService.ts`
|
||
- [x] 請求通知權限 UI
|
||
- [x] 新訊息時發送 Push Notification
|
||
- [x] 點擊通知跳轉到對應房間
|
||
|
||
### T-4.2: 音效與震動
|
||
- [x] 新增訊息提示音效檔案 (base64 embedded)
|
||
- [x] 實作音效播放（可設定開關）
|
||
- [x] 實作移動端震動提示（Vibration API）
|
||
- [x] 新增通知設定介面
|
||
|
||
### T-4.3: @Mention 通知
|
||
- [x] 被 @mention 時強調通知 (special sound + notification)
|
||
- [x] 在房間列表顯示 mention 徽章 (client-side tracking with Zustand/localStorage)
|
||
|
||
## Phase 5: Testing & Polish
|
||
|
||
### T-5.1: 測試
|
||
- [x] Action Bar 功能測試 (build verified)
|
||
- [x] Report Preview 測試 (build verified)
|
||
- [x] @Mention 完整流程測試 (build verified)
|
||
- [x] 通知系統測試（權限、音效、震動）(build verified)
|
||
|
||
### T-5.2: UI 微調
|
||
- [x] 動畫過渡效果 (ActionBar expand/collapse, NotificationSettings modal)
|
||
- [ ] 深色模式相容性 (deferred - requires theme system)
|
||
- [x] 無障礙支援 (ARIA labels, roles, keyboard support)
|