fix(ui): Fix Long Word/Function Name Truncation in Assistant Messages & Reasoning Body修复助手消息和思考过程中长词/函数名显示截断问题

[SauronSkywalker]

Pull Request: Fix Long Word/Function Name Truncation in Assistant Messages & Reasoning Body

Pull Request：修复助手消息和思考过程中长词/函数名显示截断问题

---

Summary / 概述

Problem: When the model generates a long continuous string with no spaces or hyphens — such as a very long function name — the text overflows the container width. On the desktop client, the .transcript container has overflow-x: hidden, which clips the overflowing text, making it appear truncated. The root cause is missing CSS word-break / overflow-wrap properties on the Markdown prose container (.md) and the reasoning body (.reasoning__body).

问题现象： 当模型生成了一个没有空格或连字符的极长连续字符串（如超长函数名时），文本会超出容器宽度。桌面客户端的 .transcript 容器设置了 overflow-x: hidden，超出的文本被直接裁剪，看起来像是被截断了。根本原因是 Markdown 正文容器（.md）和思考过程容器（.reasoning__body）缺少 CSS 的 word-break / overflow-wrap 属性。

Fix: Add word-break: break-word and overflow-wrap: anywhere to the .md CSS class, and word-break: break-word to the .reasoning__body / .turn-collapse__inline-reasoning CSS class. These properties tell the browser to break a word at any character when it would otherwise overflow its container.

修复方案： 在 .md CSS 类上添加 word-break: break-word 和 overflow-wrap: anywhere，在 .reasoning__body / .turn-collapse__inline-reasoning CSS 类上添加 word-break: break-word。这些属性告诉浏览器当单词超出容器宽度时，可以在任意字符处断开。

---

Files Changed / 修改的文件

1. desktop/frontend/src/styles.css

Platform: Desktop app — Windows (WebView2), macOS (WKWebView), Linux (WebKitGTK)
平台： 桌面应用 — Windows (WebView2)、macOS (WKWebView)、Linux (WebKitGTK)

Change A — .md (Markdown prose container)

 .md {
   font-family: var(--font-content-family);
   font-weight: var(--font-weight-regular);
+  word-break: break-word;
+  overflow-wrap: anywhere;
 }

Purpose: All assistant message content is rendered through the Markdown → MarkdownRenderer → ReactMarkdown pipeline, which produces <div class="md"><p>...</p></div>. Without word-break, long continuous text in wrapped <p> elements overflows the max-width: var(--maxw) constraint and gets clipped by the parent .transcript { overflow-x: hidden }.

目的： 所有助手消息内容都通过 Markdown → MarkdownRenderer → ReactMarkdown 管线渲染，生成 <div class="md"><p>...</p></div> 结构。没有 word-break 时，<p> 元素中的长连续文本会超出 max-width: var(--maxw) 限制，被父容器 .transcript { overflow-x: hidden } 裁剪。

Change B — .reasoning__body / .turn-collapse__inline-reasoning

 .reasoning__body,
 .turn-collapse__inline-reasoning {
   overflow: hidden;
   ...
   white-space: pre-wrap;
+  word-break: break-word;
 }

Purpose: The model's reasoning/thinking text also uses white-space: pre-wrap with overflow: hidden but had no word-break. A long function name in the thinking section would overflow and be hidden by the container's overflow: hidden.

目的： 模型的思考/推理文本也使用了 white-space: pre-wrap + overflow: hidden，但缺少 word-break。思考部分中的长函数名会超出并被 overflow: hidden 隐藏。

---

2. internal/serve/index.html

Platform: Web UI (standalone single-page application served via internal HTTP server)
平台： Web 界面（自包含单页应用，通过内部 HTTP 服务器提供）

Change — .reasoning__body

-.reasoning__body{...white-space:pre-wrap;...}
+.reasoning__body{...white-space:pre-wrap;word-break:break-word;...}

Note: The .msg__text class in this file already had word-break: break-word (used for both user and assistant message text). Only the reasoning body was missing this property.

注意： 该文件中的 .msg__text 类已经包含 word-break: break-word（用户和助手消息文本共用）。只有思考过程容器缺少此属性。

---

Why These CSS Properties / 为什么选择这些 CSS 属性

Property	Effect	Why Used
word-break: break-word	Breaks at word boundaries when possible; falls back to character-level breaks for overflowing words	Consistent with existing .msg--user .msg__text style; handles the general case well
overflow-wrap: anywhere	Modern CSS equivalent; breaks at any character to prevent overflow	Serves as a robust fallback for edge cases where word-break alone might not suffice

属性	效果	选用原因
word-break: break-word	优先在词边界断行，超出时在字符间打断	与已有的 .msg--user .msg__text 样式一致，通用性好
overflow-wrap: anywhere	现代 CSS 等价方案；在任意字符处断行以防止溢出	作为健壮的后备，覆盖极端边界情况

---

Scope of Impact / 影响范围

Client / 客户端	Rendering Engine / 渲染引擎	Assistant Text / 助手正文	Reasoning / 思考	Status / 状态
Desktop — Windows	Wails + WebView2	✅ Fixed (.md)	✅ Fixed (.reasoning__body)	Previously truncated by overflow-x: hidden
Desktop — macOS	Wails + WKWebView	✅ Fixed	✅ Fixed	Same codebase, same issue
Desktop — Linux	Wails + WebKitGTK	✅ Fixed	✅ Fixed	Same codebase, same issue
Web UI	Browser (standalone HTML)	✅ Already had word-break (.msg__text)	✅ Fixed	No change needed for message text
CLI/TUI	Bubble Tea + lipgloss	✅ Own wrapping mechanism (wrapAnsi)	N/A	Different rendering path, not affected

Not affected: Code blocks rendered via CodeViewer (they have independent scrollbars), inline code spans (.md-code), and the CLI/TUI (which uses ansi.Wrap to hard-break long words).

不受影响： 通过 CodeViewer 渲染的代码块（有独立滚动条）、内联代码片段（.md-code）以及 CLI/TUI（使用 ansi.Wrap 硬断长词）。

---

windows desktop修复测试（其他客户端没条件没测，理论上mac等也可以正确换行）
修复前（过长被截断）

修复后（正确换行）