[Feature]: 会话全宽平铺切换(chat full-width tiled toggle)
- Langage dominant
- Rust
- Étoiles
- 2.3k
- Forks
- 231
- Merge moyen
- 2 h 49 min
- PR mergées (30 j)
- 589
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).
Guide de contribution
Ouvrir le guide de contribution
Piste de recherche
Commencez par src/web-ui/src/app/components/FlowChatHeader.tsx et FlowChatHeader.test.tsx, puis suivez LayoutState et les hooks de useApp.ts. Examinez les règles SCSS de ChatPane, de ChatInput et les règles associées, ainsi que les traductions de flow-chat.json. Le travail est terminé lorsque le bouton bascule l’état de la mise en page, que les libellés et les icônes sont localisés, que les largeurs s’adaptent correctement et que les tests indiqués de type-check, i18n, token-build et les tests ciblés passent.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- react, scss, typescript
- Domaine
- design, frontend, internationalization, testing
- Type d'issue
- Fonctionnalité
- Difficulté
- 4/5
- Temps estimé
- 3-5 jours
- Activité
- Active
- Clarté
- Clairement spécifiée
- Accessibilité débutants
- 68/100