GCWing / GCWing/OpenBitFun

[Feature]: 会话全宽平铺切换(chat full-width tiled toggle)

Đã đóng
#2,430 0 bình luận 0 reaction 0 người được giao Xem trên GitHub
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

Mở 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

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.