[Feature]: 会话全宽平铺切换(chat full-width tiled toggle)
- Ngôn ngữ chính
- Rust
- Star
- 2.3k
- Fork
- 231
- Merge trung bình
- 2 giờ 49 phút
- Pull request đã merge (30 ngày)
- 589
Mô tả
### Problem / opportunity
The chat reading column in the web UI is capped at a fixed `900px` max-width (hard-coded in multiple SCSS rules). On wide windows or when the side panels are collapsed, users cannot expand the conversation to use the available width, forcing a narrow centered column even when there is plenty of horizontal space.
### Proposed behavior
Add a full-width tiled toggle to the FlowChatHeader. When enabled, the chat reading column (message list, composer, runtime-status, explore region, file-modifications bar) stretches edge-to-edge instead of capping at `900px`; the layout returns to the centered `900px` column when the toggle is off, including when the chat pane is collapsed.
A new appearance token ``--bf-appearance-token-flowchat-content-max-width`` (default `900px`) replaces the hard-coded `900px`, so the full-width behavior is backed by the appearance token system and other surfaces keep their existing width.
### Product surface
- Web UI
### Details, examples, or constraints
- New `layout.chatFullWidth` boolean in `LayoutState` / `DEFAULT_LAYOUT_STATE` (`src/web-ui/src/app/types/index.ts`).
- Fine-grained hooks `useChatFullWidth` and `useToggleChatFullWidth` in `useApp.ts` (uses `useSyncExternalStore` so only observing components re-render, and the action reads the manager directly).
- Toggle button in `FlowChatHeader.tsx` (Maximize2 / Minimize2 icons), aria-label + tooltip via i18n.
- i18n strings for en-US / zh-CN / zh-TW in `flow-chat.json` (``layout.fullWidth.enter`` / ``layout.fullWidth.exit``).
- `ChatPane` / `ChatInput` / related SCSS rules switched from hard-coded `900px` to the appearance token, plus a full-width modifier that removes the cap.
- Focused test added in `FlowChatHeader.test.tsx` (``session-fullwidth-toggle`` renders and flips the layout).
- Verification: `pnpm run type-check:web`, i18n check (0 warnings), apperance/theme token build, `vitest` focused tests (6 passed).
Hướng dẫn đóng góp
Hướng nghiên cứu
Bắt đầu với src/web-ui/src/app/components/FlowChatHeader.tsx và FlowChatHeader.test.tsx, sau đó lần theo LayoutState và các hooks trong useApp.ts. Kiểm tra các quy tắc SCSS của ChatPane, ChatInput và các quy tắc liên quan, cùng với các bản dịch trong flow-chat.json. Được xem là hoàn tất khi toggle thay đổi trạng thái layout, labels và icons được bản địa hóa, độ rộng phản hồi chính xác, và các bài kiểm tra type-check, i18n, token-build cùng các focused tests được liệt kê đều đạt.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- react, scss, typescript
- Lĩnh vực
- design, frontend, internationalization, testing
- Loại issue
- Tính năng
- Độ khó
- 4/5
- Thời gian dự kiến
- 3-5 ngày
- Mức độ hoạt động
- Sôi nổi
- Độ rõ ràng
- Đặc tả rõ ràng
- Mức phù hợp với người mới
- 68/100