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>
1.4 KiB
1.4 KiB
Change: Improve Chat UX - Action Bar and Features
Why
目前聊天室的主要操作按鈕（生成報告、上傳檔案、添加人員）位於頁首，當訊息增多時需要向上捲動才能操作，影響使用效率。此外，報告僅提供 Word 下載，缺少即時預覽功能；聊天介面也缺少複製訊息、@提及、通知等現代化功能。
What Changes
1. Action Bar Redesign (類似 LINE 佈局)
- 將常用操作按鈕從頁首移至輸入框區域附近
- 新增可展開的工具列，包含：上傳檔案、生成報告、添加人員
- 保持頁首僅顯示房間資訊和設定
2. Report Preview Enhancement
- 報告生成後以 Markdown 格式在頁面內預覽
- 提供「複製 Markdown」按鈕，方便轉貼發布
- 保留原有 Word 下載功能
3. Message Actions
- 新增訊息複製按鈕（hover 顯示）
- 新增 @mention 功能（輸入 @ 觸發成員選單）
4. Notification System
- 瀏覽器 Push Notification（需用戶授權）
- 新訊息音效提示
- 移動端震動提示（支援 Vibration API）
Impact
- Affected specs:
chat-room,realtime-messaging,ai-report-generation - Affected code:
frontend/src/pages/RoomDetail.tsx- 主要介面重構frontend/src/components/- 新增 ActionBar, ReportPreview, MentionInput 組件app/modules/realtime/- @mention 解析和通知app/modules/report_generation/- Markdown 輸出端點