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