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>
34 lines
1.4 KiB
Markdown
34 lines
1.4 KiB
Markdown
# 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 輸出端點
|