From bb6739a59e7db18914a17c390d0d6bcf49ba1583 Mon Sep 17 00:00:00 2001
From: XianYuDaXian <xian_yu@live.com>
Date: Tue, 24 Mar 2026 22:22:22 +0800
Subject: [PATCH] =?UTF-8?q?fix(chat):=20=E4=BF=AE=E5=A4=8D=E6=80=9D?=
 =?UTF-8?q?=E8=80=83=E5=9D=97=E5=9B=BE=E6=A0=87=E6=97=8B=E8=BD=AC=E4=B8=8E?=
 =?UTF-8?q?=E9=95=BF=E6=96=87=E6=9C=AC=E6=8D=A2=E8=A1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/static/public/css/chat.css | 36 +++++++++++++++++++++++++++++-----
 app/static/public/js/chat.js   | 18 +++++++++--------
 2 files changed, 41 insertions(+), 13 deletions(-)

diff --git a/app/static/public/css/chat.css b/app/static/public/css/chat.css
index e609ddb..c3ec762 100644
--- a/app/static/public/css/chat.css
+++ b/app/static/public/css/chat.css
@@ -681,12 +681,17 @@ body {
 }
 
 .think-block[data-thinking="true"] .think-summary::before {
-  animation: thinkSpinSlow 5.5s linear infinite;
+  animation: thinkSpinSlow 2.2s linear infinite;
   animation-delay: var(--think-spin-delay, 0s);
 }
 
-.think-block[data-thinking="true"] .think-agent summary::before {
-  animation: thinkSpinSlow 5.5s linear infinite;
+.think-block[data-thinking="true"] .think-agent-avatar {
+  animation: thinkSpinSlow 2.2s linear infinite;
+  animation-delay: var(--think-spin-delay, 0s);
+}
+
+.think-block[data-thinking="true"] .think-rollout-title::before {
+  animation: thinkSpinSlow 2.2s linear infinite;
   animation-delay: var(--think-spin-delay, 0s);
 }
 
@@ -716,6 +721,8 @@ body {
   font-size: 12px;
   color: var(--accents-5);
   line-height: 1.6;
+  overflow-wrap: anywhere;
+  word-break: break-word;
   max-height: 0;
   opacity: 0;
   overflow: hidden;
@@ -844,8 +851,7 @@ body {
   max-width: 100%;
 }
 
-.think-agent summary::before {
-  content: "";
+.think-agent-avatar {
   width: 20px;
   height: 20px;
   display: inline-flex;
@@ -858,6 +864,12 @@ body {
   box-shadow: 0 2px 8px rgba(17, 17, 17, 0.15);
 }
 
+.think-agent-label {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+}
+
 .think-agent summary::after {
   content: "";
   width: 6px;
@@ -974,6 +986,9 @@ body {
   display: flex;
   flex-direction: column;
   gap: 10px;
+  min-width: 0;
+  overflow-wrap: anywhere;
+  word-break: break-word;
 }
 
 .think-item-row {
@@ -1024,6 +1039,17 @@ body {
   font-size: 12px;
   color: var(--accents-5);
   line-height: 1.6;
+  min-width: 0;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.think-item-body code,
+.think-rollout-body code,
+.think-content code {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  word-break: break-word;
 }
 
 html[data-theme='dark'] .think-agent {
diff --git a/app/static/public/js/chat.js b/app/static/public/js/chat.js
index 99a8489..bef11d7 100644
--- a/app/static/public/js/chat.js
+++ b/app/static/public/js/chat.js
@@ -1141,6 +1141,10 @@
     if (!sections.length) {
       return renderBasicMarkdown(text);
     }
+    const renderThinkAgentSummary = (title) => {
+      const safeTitle = escapeHtml(title);
+      return `<summary><span class="think-agent-avatar" aria-hidden="true"></span><span class="think-agent-label">${safeTitle}</span></summary>`;
+    };
     const renderGroups = (blocks, openAllGroups) => {
       const groups = [];
       const map = new Map();
@@ -1175,9 +1179,8 @@
         if (synthetic.length) {
           return synthetic.map((agent, agentIdx) => {
             const inner = renderFlatBlocks(agent.blocks);
-            const title = escapeHtml(agent.title);
             const openAttr = openAll ? ' open' : (idx === 0 && agentIdx === 0 ? ' open' : '');
-            return `<details class="think-agent"${openAttr}><summary>${title}</summary><div class="think-agent-items">${inner}</div></details>`;
+            return `<details class="think-agent"${openAttr}>${renderThinkAgentSummary(agent.title)}<div class="think-agent-items">${inner}</div></details>`;
           }).join('');
         }
       }
@@ -1187,9 +1190,8 @@
       if (!section.title) {
         return `<div class="think-agent-items">${inner}</div>`;
       }
-      const title = escapeHtml(section.title);
       const openAttr = openAll ? ' open' : (idx === 0 ? ' open' : '');
-      return `<details class="think-agent"${openAttr}><summary>${title}</summary><div class="think-agent-items">${inner}</div></details>`;
+      return `<details class="think-agent"${openAttr}>${renderThinkAgentSummary(section.title)}<div class="think-agent-items">${inner}</div></details>`;
     });
     return `<div class="think-agents">${agentBlocks.join('')}</div>`;
   }
@@ -1617,14 +1619,14 @@
       if (!entry.thinkingActive) {
         block.removeAttribute('data-thinking');
         node.style.removeProperty('--think-spin-delay');
-        block.querySelectorAll('.think-agent summary').forEach((summary) => {
-          summary.style.removeProperty('--think-spin-delay');
+        block.querySelectorAll('.think-agent-avatar').forEach((avatar) => {
+          avatar.style.removeProperty('--think-spin-delay');
         });
       } else {
         block.setAttribute('data-thinking', 'true');
         node.style.setProperty('--think-spin-delay', spinOffset);
-        block.querySelectorAll('.think-agent summary').forEach((summary) => {
-          summary.style.setProperty('--think-spin-delay', spinOffset);
+        block.querySelectorAll('.think-agent-avatar').forEach((avatar) => {
+          avatar.style.setProperty('--think-spin-delay', spinOffset);
         });
       }
     });