[Feature]: 会话全宽平铺切换(chat full-width tiled toggle)
- Dominant language
- Rust
- Stars
- 2.2k
- Forks
- 229
- Avg merge
- 2h 46m
- Merged PRs (30d)
- 577
Description
### 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).
Contributor guide
Research direction
Start with src/web-ui/src/app/components/FlowChatHeader.tsx and FlowChatHeader.test.tsx, then trace LayoutState and the useApp.ts hooks. Inspect the ChatPane, ChatInput, and related SCSS rules plus flow-chat.json translations. Done means the toggle changes layout state, labels and icons are localized, widths respond correctly, and the listed type-check, i18n, token-build, and focused tests pass.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, scss, typescript
- Domain
- design, frontend, internationalization, testing
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 68/100