From 0e2abccf116f3dd159fb2b874cfc1d0c3f28fb82 Mon Sep 17 00:00:00 2001
From: Wenjie Zhang <xerrors@163.com>
Date: Sun, 22 Jun 2025 23:56:12 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E5=8A=A9=E6=89=8B?=
 =?UTF-8?q?=E6=B6=88=E6=81=AF=E7=BB=84=E4=BB=B6=E5=92=8C=E8=AE=A1=E7=AE=97?=
 =?UTF-8?q?=E5=99=A8=E7=BB=93=E6=9E=9C=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在 AgentMessageComponent.vue 中更新消息解析逻辑，使用 parsedMessage 处理内容和推理信息。
- 改进样式，增强用户体验，包括工具调用结果的展示和交互效果。
- 移除 CalculatorResult.vue 中不必要的元素，简化结果展示。
---
 web/src/components/AgentMessageComponent.vue  | 118 +++++++++++++++---
 .../ToolCallingResult/CalculatorResult.vue    |  20 ---
 2 files changed, 103 insertions(+), 35 deletions(-)

diff --git a/web/src/components/AgentMessageComponent.vue b/web/src/components/AgentMessageComponent.vue
index 1d580f86..1cc634cf 100644
--- a/web/src/components/AgentMessageComponent.vue
+++ b/web/src/components/AgentMessageComponent.vue
@@ -5,28 +5,28 @@
 
     <!-- 助手消息 -->
     <div v-else-if="message.type === 'ai'" class="assistant-message">
-      <div v-if="message.reasoning_content" class="reasoning-box">
+      <div v-if="parsedMessage.reasoning_content" class="reasoning-box">
         <a-collapse v-model:activeKey="reasoningActiveKey" :bordered="false">
           <template #expandIcon="{ isActive }">
             <caret-right-outlined :rotate="isActive ? 90 : 0" />
           </template>
           <a-collapse-panel key="show" :header="message.status=='reasoning' ? '正在思考...' : '推理过程'" class="reasoning-header">
-            <p class="reasoning-content">{{ message.reasoning_content.trim() }}</p>
+            <p class="reasoning-content">{{ parsedMessage.reasoning_content.trim() }}</p>
           </a-collapse-panel>
         </a-collapse>
       </div>
 
       <!-- 消息内容 -->
       <!-- <div v-else-if="message.content" v-html="renderMarkdown(message)" class="message-md"></div> -->
-      <MdPreview v-else-if="message.content" ref="editorRef"
+      <MdPreview v-if="parsedMessage.content" ref="editorRef"
         editorId="preview-only"
         previewTheme="github"
         :showCodeRowNumber="false"
-        :modelValue="message.content"
+        :modelValue="parsedMessage.content"
         :key="message.id"
         class="message-md"/>
 
-      <div v-else-if="message.reasoning_content"  class="empty-block"></div>
+      <div v-else-if="parsedMessage.reasoning_content"  class="empty-block"></div>
 
       <div v-if="message.tool_calls && Object.keys(message.tool_calls).length > 0" class="tool-calls-container">
         <div v-for="(toolCall, index) in message.tool_calls || {}" :key="index" class="tool-call-container">
@@ -38,13 +38,13 @@
                 <span class="tool-name">{{ toolCall.name || toolCall.function.name }}</span>
               </span>
               <span v-else>
-                <ThunderboltOutlined /> 工具 <span class="tool-name">{{ toolCall.name || toolCall.function.name }}</span> 执行完成
+                <ThunderboltOutlined /> &nbsp; 工具 <span class="tool-name">{{ toolCall.name || toolCall.function.name }}</span> 执行完成
               </span>
             </div>
             <div class="tool-content" v-show="expandedToolCalls.has(toolCall.id)">
               <div class="tool-params" v-if="toolCall.args || toolCall.function.arguments">
                 <div class="tool-params-content">
-                  <pre> 参数: {{ toolCall.args || toolCall.function.arguments }}</pre>
+                  <strong>参数:</strong> {{ toolCall.args || toolCall.function.arguments }}
                 </div>
               </div>
               <div class="tool-result" v-if="toolCall.tool_call_result && toolCall.tool_call_result.content">
@@ -137,6 +137,26 @@ const isEmptyAndLoading = computed(() => {
   return isEmpty && isLoading;
 });
 
+const parsedMessage = computed(() => {
+  const message = props.message;
+  if (message.content) {
+    // 匹配完整的 <think>...</think> 标签
+    const thinkContent = message.content.match(/<think>(.*?)<\/think>/s);
+    if (thinkContent) {
+      message.reasoning_content = thinkContent[1];
+      message.content = message.content.replace(/<think>(.*?)<\/think>/s, '');
+    } else {
+      // 匹配未闭合的 <think> 标签，处理加载中的情况
+      const incompleteThinkContent = message.content.match(/<think>(.*?)$/s);
+      if (incompleteThinkContent) {
+        message.reasoning_content = incompleteThinkContent[1];
+        message.content = message.content.replace(/<think>(.*?)$/s, '');
+      }
+    }
+  }
+  return message;
+});
+
 const toggleToolCall = (toolCallId) => {
   if (expandedToolCalls.value.has(toolCallId)) {
     expandedToolCalls.value.delete(toolCallId);
@@ -207,14 +227,61 @@ const toggleToolCall = (toolCallId) => {
   .reasoning-box {
     margin-top: 10px;
     margin-bottom: 15px;
-    border-radius: 8px;
-    border: 1px solid var(--main-light-3);
+    border-radius: 12px;
+    border: 1px solid var(--gray-200);
+    background-color: var(--gray-50);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
+    overflow: hidden;
+    transition: all 0.2s ease;
+
+    &:hover {
+      border-color: var(--main-300);
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
+    }
+
+    :deep(.ant-collapse) {
+      background-color: transparent;
+      border: none;
+
+      .ant-collapse-item {
+        border: none;
+
+        .ant-collapse-header {
+          padding: 12px 16px;
+          background-color: var(--gray-100);
+          font-size: 14px;
+          font-weight: 500;
+          color: var(--gray-800);
+          border-bottom: 1px solid var(--gray-200);
+          transition: all 0.2s ease;
+
+          &:hover {
+            background-color: var(--gray-150);
+          }
+
+          .ant-collapse-expand-icon {
+            color: var(--main-600);
+          }
+        }
+
+        .ant-collapse-content {
+          border: none;
+          background-color: transparent;
+
+          .ant-collapse-content-box {
+            padding: 16px;
+            background-color: var(--gray-50);
+          }
+        }
+      }
+    }
 
     .reasoning-content {
       font-size: 13px;
       color: var(--gray-800);
       white-space: pre-wrap;
       margin: 0;
+      line-height: 1.6;
     }
   }
 
@@ -251,11 +318,18 @@ const toggleToolCall = (toolCallId) => {
   :deep(.tool-call-display) {
     background-color: var(--gray-50);
     border: 1px solid var(--gray-200);
-    border-radius: 8px;
+    border-radius: 12px;
     overflow: hidden;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
+    transition: all 0.2s ease;
+
+    &:hover {
+      border-color: var(--main-300);
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
+    }
 
     .tool-header {
-      padding: 10px 12px;
+      padding: 12px 16px;
       background-color: var(--gray-100);
       font-size: 14px;
       font-weight: 500;
@@ -267,9 +341,20 @@ const toggleToolCall = (toolCallId) => {
       cursor: pointer;
       user-select: none;
       position: relative;
+      transition: all 0.2s ease;
+
+      &:hover {
+        background-color: var(--gray-150);
+      }
 
       .anticon {
         color: var(--main-600);
+        font-size: 16px;
+      }
+
+      .tool-name {
+        font-weight: 600;
+        color: var(--main-700);
       }
 
       .step-badge {
@@ -285,27 +370,30 @@ const toggleToolCall = (toolCallId) => {
 
     .tool-content {
       transition: all 0.3s ease;
+
       .tool-params {
-        padding: 10px 12px;
+        padding: 16px;
         background-color: var(--gray-50);
 
         .tool-params-header {
           background-color: var(--gray-100);
           font-size: 13px;
           color: var(--gray-800);
+          margin-bottom: 8px;
+          font-weight: 500;
         }
 
         .tool-params-content {
           margin: 0;
           font-size: 13px;
           background-color: var(--gray-100);
-          border-radius: 4px;
-          padding: 8px;
           overflow-x: auto;
           color: var(--gray-800);
+          line-height: 1.5;
 
           pre {
             margin: 0;
+            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
           }
         }
       }
@@ -315,7 +403,7 @@ const toggleToolCall = (toolCallId) => {
         background-color: transparent;
 
         .tool-result-header {
-          padding: 10px 12px;
+          padding: 12px 16px;
           background-color: var(--gray-100);
           font-size: 12px;
           color: var(--gray-700);
diff --git a/web/src/components/ToolCallingResult/CalculatorResult.vue b/web/src/components/ToolCallingResult/CalculatorResult.vue
index 81a346ce..a87e3fda 100644
--- a/web/src/components/ToolCallingResult/CalculatorResult.vue
+++ b/web/src/components/ToolCallingResult/CalculatorResult.vue
@@ -6,28 +6,8 @@
 
     <div class="calc-display">
       <div class="result-container">
-        <div class="result-label">结果:</div>
         <div class="result-value">{{ formatNumber(data) }}</div>
       </div>
-
-      <div class="result-actions">
-        <a-button size="small" @click="copyResult" type="primary" ghost>
-          <CopyOutlined /> 复制结果
-        </a-button>
-      </div>
-    </div>
-
-    <!-- 如果结果很大或很小，显示科学记数法 -->
-    <div v-if="showScientificNotation" class="scientific-notation">
-      <span class="notation-label">科学记数法:</span>
-      <span class="notation-value">{{ data.toExponential(6) }}</span>
-    </div>
-
-    <!-- 显示数字类型信息 -->
-    <div class="number-info">
-      <a-tag :color="getNumberTypeColor()">{{ getNumberType() }}</a-tag>
-      <span v-if="isInteger" class="number-detail">整数</span>
-      <span v-else class="number-detail">{{ getDecimalPlaces() }} 位小数</span>
     </div>
   </div>
 </template>