feat(desktop): 聊天区域的宽度修改add configurable conversation width (standard 960px / full 90%)

[SauronSkywalker]

Conversation Width — configurable max transcript width for the desktop chat area

English

Motivation

The desktop chat (transcript) area had a hard-coded max-width of 760px, which is narrower than industry standards (VS Code: 950px, Lobe Chat: 960px). On widescreen monitors (1920px+, ultrawide), this left excessive whitespace on both sides, wasting screen real estate.

Additionally, the CSS had three redundant --maxw definitions, with only one actually taking effect, making maintenance confusing.

What changed

File	Change
desktop/frontend/src/styles.css	Removed 2 dead --maxw definitions; changed default from 760px → 960px
internal/config/config.go	Added ConversationWidth string field to DesktopConfig
internal/config/edit.go	Added SetDesktopConversationWidth() setter
internal/config/render.go	Added TOML rendering for conversation_width (when set to "full")
desktop/settings_app.go	Added Go bind + SettingsView.ConversationWidth + startup settings
desktop/frontend/src/lib/theme.ts	Added ConversationWidth types + getter/setter + initTheme integration
desktop/frontend/src/lib/types.ts	Added conversationWidth to SettingsView and DesktopStartupSettingsView
desktop/frontend/src/lib/bridge.ts	Added interface + mock for SetDesktopConversationWidth
desktop/frontend/src/App.tsx	applyDesktopPreferences now applies stored conversationWidth
desktop/frontend/src/components/SettingsPanel.tsx	Added toggle UI in Appearance section
desktop/frontend/src/locales/{en,zh,zh-TW}.ts	Added translation keys

How it works

A new "Conversation width" row in Settings → Appearance, between "Theme" and "Visual style", offers two options:

• Standard (960px) — fixed max-width, centered transcript
• Full width (90%) — 90% of the parent container width

The setting is persisted to the desktop config file (config.toml) under the [desktop] section as conversation_width. It syncs via DesktopStartupSettings on startup and is applied immediately via CSS custom property --maxw.

Old clients that do not know about conversation_width silently ignore it (TOML spec). New clients reading old configs without the key default to "standard" (960px).

Backward compatibility

• Old client reads new config: TOML ignores unknown keys — zero impact
• New client reads old config: Missing key → empty string → defaults to "standard" (960px)
• Downgrade: No effect on old client functionality

Verification

• TypeScript: npx tsc --noEmit — zero errors
• Go: go build ./internal/config/ — zero errors
• Full Wails build:— zero errors

---

中文

需求背景

桌面聊天（transcript）区域的宽度此前被硬编码为 760px 的最大宽度，低于行业常见值（VS Code: 950px、Lobe Chat: 960px）。在宽屏显示器（1920px+、带鱼屏）上，两侧留白过多，浪费了屏幕空间。

此外，CSS 中存在三层冗余的 --maxw 定义，只有一层实际生效，维护成本高。

改动内容

文件	改动
desktop/frontend/src/styles.css	删除两处死 --maxw；默认值 760px → 960px
internal/config/config.go	DesktopConfig 新增 ConversationWidth string 字段
internal/config/edit.go	新增 SetDesktopConversationWidth() setter
internal/config/render.go	新增 conversation_width 的 TOML 渲染（设为 "full" 时写入）
desktop/settings_app.go	新增 Go bind + SettingsView.ConversationWidth + 启动设置
desktop/frontend/src/lib/theme.ts	新增 ConversationWidth 类型 + 读写函数 + initTheme 集成
desktop/frontend/src/lib/types.ts	SettingsView 和 DesktopStartupSettingsView 加入字段
desktop/frontend/src/lib/bridge.ts	新增 SetDesktopConversationWidth 接口 + mock
desktop/frontend/src/App.tsx	applyDesktopPreferences 现在会应用存储的宽度值
desktop/frontend/src/components/SettingsPanel.tsx	外观设置页新增切换 UI
desktop/frontend/src/locales/{en,zh,zh-TW}.ts	新增翻译键

使用方式

设置 → 外观"主题"和"视觉风格"之间新增一行**"会话区域宽度"**，两个选项：

• 标准（960px） — 固定最大宽度居中
• 全宽（90%） — 父容器宽度的 90%

设置持久化到桌面配置文件 config.toml 的 [desktop] 节，以 conversation_width 字段存储。启动时通过 DesktopStartupSettings 同步，立即通过 CSS 自定义属性 --maxw 生效。

兼容性

• 旧版本读新配置：TOML 静默忽略未知字段，零影响
• 新版本读旧配置：无该字段 → 空串 → 默认 "standard"（960px）
• 降级：不影响旧版本功能

验证

• TypeScript：npx tsc --noEmit — 零错误
• Go：go build ./internal/config/ — 零错误
• 完整 Wails 构建：— 零错误

win11实测图

---

Review follow-up (2026-07-19)

The review fixes are included in 43480ccf after merging the latest main-v2:

• Integrated the control into the current AppearanceOverview / Theme Pack architecture.
• Moved the width lifecycle to lib/conversationWidth.ts. localStorage is now only an early-paint cache; desktop config is authoritative after startup.
• Full width now uses max(960px, 90%), so it never becomes narrower than Standard in common window sizes.
• Nested folded transcript content uses 100% of its outer container, avoiding compounded 90% × 90% width.
• Older Wails payloads may omit the new field and safely normalize to Standard.

Compatibility matrix

Surface / scenario	Result
Windows, macOS, Linux desktop targets	Applies consistently; there is no OS-specific branch
Classic, Workbench, Creation layouts	Applies to the shared transcript/composer width token
Base styles, official packs, user theme packs	Applies consistently through the root CSS custom property
New client + old config/payload	Missing field falls back to Standard (960px)
Old client + new config	Unknown TOML key is ignored
Narrow panes	Full is never narrower than Standard
Wide panes	Full expands to 90% of the parent
Folded/nested transcript content	Width is applied once; it no longer compounds to 81%

Verified

• pnpm test:all
• pnpm build
• Root module: go vet ./..., go test ./...
• Desktop module: go vet ./..., go build ./..., go test ./...

评审后修复

已合并最新 main-v2，并完成以下调整：全宽使用 max(960px, 90%)，避免窄窗口下反而小于标准宽度；嵌套折叠内容不再重复计算 90%；桌面配置成为权威数据源，localStorage 仅用于首屏预热；当前支持的 Windows、macOS、Linux 桌面目标，以及 Classic、Workbench、Creation 布局和各类主题包均使用同一套宽度逻辑。

Cache-impact: low - Only added a config field (ConversationWidth) for the desktop setting; no prompt, tool, or cache-prefix content changed
Cache-guard: go build ./internal/config/ && npx tsc --noEmit
System-prompt-review: SivanCola (no actual system prompt change, only a DesktopConfig UI field added)

[HaoyueQin]

切换区域宽度选项时出现了和之前保存并应用主题之后相同的bug：主题设置中的基础配色配置会被停用主题后的基础配色配置覆盖，造成基础配色的变更。如果方便的话还望修复一下。 @SauronSkywalker @SivanCola

[SauronSkywalker]

切换区域宽度选项时出现了和之前保存并应用主题之后相同的bug：主题设置中的基础配色配置会被停用主题后的基础配色配置覆盖，造成基础配色的变更。如果方便的话还望修复一下。 @SauronSkywalker @SivanCola

会覆盖成什么样的，有录像或者前后对比截图加操作说明吗

[HaoyueQin]

切换区域宽度选项时出现了和之前保存并应用主题之后相同的bug：主题设置中的基础配色配置会被停用主题后的基础配色配置覆盖，造成基础配色的变更。如果方便的话还望修复一下。 @SauronSkywalker @SivanCola

会覆盖成什么样的，有录像或者前后对比截图加操作说明吗

2026-07-19.212048.mp4

如视频所示，就是按钮、背景色等基础配色会发生改变

[SivanCola]

切换区域宽度选项时出现了和之前保存并应用主题之后相同的bug：主题设置中的基础配色配置会被停用主题后的基础配色配置覆盖，造成基础配色的变更。如果方便的话还望修复一下。 @SauronSkywalker @SivanCola

感谢，我来弄一下

[SivanCola]

@HaoyueQin Confirmed from the video. The persisted theme pack was not changed; the generic settings refresh replaced the active pack effective base style in the live DOM after the width save completed.

I opened #6694 with the follow-up fix (commit ca4a503). It centralizes configured base-appearance application so the active pack is reapplied after any settings refresh, while preserving the correct restore target when the pack is disabled.

Verified with the theme-pack regression test (237 passed), the full frontend suite, typecheck, CSS checks, production build, and a browser reproduction: Spark Notebook stayed active with its Aurora effective style after switching conversation width from Standard to Full.