GCWing / GCWing/OpenBitFun

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

Open
#2,430 0 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.