From 58df6a599e8f7a837568697cb07ef74286792fc1 Mon Sep 17 00:00:00 2001
From: Wenjie Zhang <xerrors@163.com>
Date: Sun, 30 Mar 2025 21:40:49 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=B4=E6=8A=A4=20Agent=20=E5=AF=B9=E8=AF=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/ChatComponent.vue    | 69 +++++-------------
 web/src/components/MessageComponent.vue | 96 ++++++++++++++-----------
 web/src/components/RefsComponent.vue    |  8 +--
 web/src/views/AgentView.vue             |  6 +-
 4 files changed, 74 insertions(+), 105 deletions(-)

diff --git a/web/src/components/ChatComponent.vue b/web/src/components/ChatComponent.vue
index 60e61f5d..7ed84bc9 100644
--- a/web/src/components/ChatComponent.vue
+++ b/web/src/components/ChatComponent.vue
@@ -79,20 +79,11 @@
         v-for="message in conv.messages"
         :message="message"
         :key="message.id"
-        :role="message.role"
-        :content="message.text"
-        :content-html="message.text.length > 0 ? renderMarkdown(message) : ''"
-        :reasoning-content="message.reasoning_content"
-        :reasoning-header="message.status=='reasoning' ? '正在思考...' : '推理过程'"
-        :status="message.status"
         :is-processing="isStreaming"
-        :error-message="message.message"
+        :show-refs="true"
         @retry="retryMessage(message.id)"
         @retryStoppedMessage="retryStoppedMessage(message.id)"
       >
-        <template #refs v-if="message.role=='received' && message.status=='finished'">
-          <RefsComponent :message="message" :conv="conv" @retry="retryMessage(message.id)" />
-        </template>
       </MessageComponent>
     </div>
     <div class="bottom">
@@ -178,13 +169,8 @@ import {
   CopyOutlined
 } from '@ant-design/icons-vue'
 import { onClickOutside } from '@vueuse/core'
-import { Marked } from 'marked';
-import { markedHighlight } from 'marked-highlight';
 import { useConfigStore } from '@/stores/config'
 import { message } from 'ant-design-vue'
-import RefsComponent from '@/components/RefsComponent.vue'
-import hljs from 'highlight.js';
-import 'highlight.js/styles/github.css';
 import MessageInputComponent from '@/components/MessageInputComponent.vue'
 import MessageComponent from '@/components/MessageComponent.vue'
 
@@ -232,39 +218,18 @@ const meta = reactive(JSON.parse(localStorage.getItem('meta')) || {
   wideScreen: false,
 })
 
-const marked = new Marked(
-  {
-    gfm: true,
-    breaks: true,
-    tables: true,
-  },
-  markedHighlight({
-    langPrefix: 'hljs language-',
-    highlight(code) {
-      return hljs.highlightAuto(code).value;
-    }
-  })
-);
 
 const consoleMsg = (msg) => console.log(msg)
 onClickOutside(panel, () => setTimeout(() => opts.showPanel = false, 30))
 onClickOutside(modelCard, () => setTimeout(() => opts.showModelCard = false, 30))
 
-const renderMarkdown = (msg) => {
-  if (msg.status === 'loading') {
-    return marked.parse(msg.text + '🟢')
-  } else {
-    return marked.parse(msg.text)
-  }
-}
-
 // 从 message 中获取 history 信息，每个消息都是 {role, content} 的格式
 const getHistory = () => {
   const history = conv.value.messages.map((msg) => {
-    if (msg.text) {
+    if (msg.content) {
       return {
         role: msg.role === 'sent' ? 'user' : 'assistant',
-        content: msg.text
+        content: msg.content
       }
     }
   }).reduce((acc, cur) => {
@@ -309,15 +274,15 @@ const handleKeyDown = (e) => {
 const renameTitle = () => {
   if (meta.summary_title) {
     const prompt = '请用一个很短的句子关于下面的对话内容的主题起一个名字，不要带标点符号：'
-    const firstUserMessage = conv.value.messages[0].text
-    const firstAiMessage = conv.value.messages[1].text
+    const firstUserMessage = conv.value.messages[0].content
+    const firstAiMessage = conv.value.messages[1].content
     const context = `${prompt}\n\n问题: ${firstUserMessage}\n\n回复: ${firstAiMessage}，主题是（一句话）：`
     simpleCall(context).then((data) => {
       const response = data.response.split("：")[0].replace(/^["'"']/g, '').replace(/["'"']$/g, '')
       emit('rename-title', response)
     })
   } else {
-    emit('rename-title', conv.value.messages[0].text)
+    emit('rename-title', conv.value.messages[0].content)
   }
 }
 
@@ -353,16 +318,16 @@ const appendUserMessage = (msg) => {
   conv.value.messages.push({
     id: generateRandomHash(16),
     role: 'sent',
-    text: msg
+    content: msg
   })
   scrollToBottom()
 }
 
-const appendAiMessage = (text, refs=null) => {
+const appendAiMessage = (content, refs=null) => {
   conv.value.messages.push({
     id: generateRandomHash(16),
     role: 'received',
-    text: text,
+    content: content,
     reasoning_content: '',
     refs,
     status: "init",
@@ -377,8 +342,8 @@ const updateMessage = (info) => {
   if (msg) {
     try {
       // 只有在 text 不为空时更新
-      if (info.text !== null && info.text !== undefined && info.text !== '') {
-        msg.text += info.text;
+      if (info.content !== null && info.content !== undefined && info.content !== '') {
+        msg.content += info.content;
       }
 
       if (info.reasoning_content !== null && info.reasoning_content !== undefined && info.reasoning_content !== '') {
@@ -415,7 +380,7 @@ const updateMessage = (info) => {
     } catch (error) {
       console.error('Error updating message:', error);
       msg.status = 'error';
-      msg.text = '消息更新失败';
+      msg.content = '消息更新失败';
     }
   } else {
     console.error('Message not found:', info.id);
@@ -512,13 +477,13 @@ const fetchChatResponse = (user_input, cur_res_id) => {
               const data = JSON.parse(line);
               updateMessage({
                 id: cur_res_id,
-                text: data.response,
+                content: data.response,
                 reasoning_content: data.reasoning_content,
                 status: data.status,
                 meta: data.meta,
                 ...data,
               });
-              // console.log("Last message", conv.value.messages[conv.value.messages.length - 1].text)
+              // console.log("Last message", conv.value.messages[conv.value.messages.length - 1].content)
               // console.log("Last message", conv.value.messages[conv.value.messages.length - 1].status)
 
               if (data.history) {
@@ -588,7 +553,7 @@ const retryMessage = (id) => {
   const index = conv.value.messages.findIndex(msg => msg.id === id);
   const pastMessage = conv.value.messages[index-1]
   console.log("retryMessage", id, pastMessage)
-  conv.value.inputText = pastMessage.text
+  conv.value.inputText = pastMessage.content
   if (index !== -1) {
     conv.value.messages = conv.value.messages.slice(0, index-1);
   }
@@ -606,7 +571,7 @@ onMounted(() => {
   // 检查现有消息中是否有内容为空的情况
   if (conv.value.messages && conv.value.messages.length > 0) {
     conv.value.messages.forEach(msg => {
-      if (msg.role === 'received' && (!msg.text || msg.text.trim() === '')) {
+      if (msg.role === 'received' && (!msg.content || msg.content.trim() === '')) {
         msg.status = 'error';
         msg.message = '内容加载失败';
       }
@@ -669,7 +634,7 @@ const retryStoppedMessage = (id) => {
   if (messageIndex > 0) {
     const userMessage = conv.value.messages[messageIndex - 1];
     if (userMessage && userMessage.role === 'sent') {
-      conv.value.inputText = userMessage.text;
+      conv.value.inputText = userMessage.content;
       // 删除被停止的消息，以及所有后面的消息
       conv.value.messages = conv.value.messages.slice(0, messageIndex-1);
       // sendMessage();
diff --git a/web/src/components/MessageComponent.vue b/web/src/components/MessageComponent.vue
index e5b0eca9..be18d974 100644
--- a/web/src/components/MessageComponent.vue
+++ b/web/src/components/MessageComponent.vue
@@ -1,18 +1,18 @@
 <template>
-  <div class="message-box" :class="[role, customClasses]">
+  <div class="message-box" :class="[message.role, customClasses]">
     <!-- 用户消息 -->
-    <p v-if="role === 'user' || role === 'sent'" class="message-text">{{ content }}</p>
+    <p v-if="message.role === 'user' || message.role === 'sent'" class="message-text">{{ message.content }}</p>
 
     <!-- 助手消息 -->
-    <div v-else-if="role === 'assistant' || role === 'received'" class="assistant-message">
+    <div v-else-if="message.role === 'assistant' || message.role === 'received'" class="assistant-message">
       <!-- 推理过程 (ChatComponent特有) -->
-      <div v-if="reasoningContent" class="reasoning-box">
+      <div v-if="message.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="reasoningHeader" class="reasoning-header">
-            <p class="reasoning-content">{{ reasoningContent }}</p>
+          <a-collapse-panel key="show" :header="message.status=='reasoning' ? '正在思考...' : '推理过程'" class="reasoning-header">
+            <p class="reasoning-content">{{ message.reasoning_content }}</p>
           </a-collapse-panel>
         </a-collapse>
       </div>
@@ -25,21 +25,21 @@
       </div>
 
       <!-- 检索中状态 (ChatComponent特有) -->
-      <div v-else-if="status === 'searching' && isProcessing" class="searching-msg">
+      <div v-else-if="message.status === 'searching' && isProcessing" class="searching-msg">
         <i>正在检索……</i>
       </div>
 
       <!-- 生成中状态 (ChatComponent特有) -->
-      <div v-else-if="status === 'generating' && isProcessing" class="searching-msg">
+      <div v-else-if="message.status === 'generating' && isProcessing" class="searching-msg">
         <i>正在生成……</i>
       </div>
 
-      <div v-else-if="status === 'error'" class="err-msg" @click="$emit('retry')">
-        请求错误，请重试。{{ errorMessage }}
+      <div v-else-if="message.status === 'error'" class="err-msg" @click="$emit('retry')">
+        请求错误，请重试。{{ message.message }}
       </div>
 
       <!-- 消息内容 -->
-      <div v-else-if="contentHtml" v-html="contentHtml" class="message-md"></div>
+      <div v-else-if="message.content" v-html="renderMarkdown(message)" class="message-md"></div>
 
       <div v-if="message.isStoppedByUser" class="retry-hint">
         你停止生成了本次回答
@@ -49,8 +49,9 @@
       <!-- 工具调用 (AgentView特有) -->
       <slot name="tool-calls"></slot>
 
-      <!-- 引用组件 (ChatComponent特有) -->
-      <slot name="refs"></slot>
+      <div v-if="(message.role=='received' || message.role=='assistant') && message.status=='finished' && showRefs">
+        <RefsComponent :message="message" @retry="emit('retry')" />
+      </div>
       <!-- 错误消息 -->
     </div>
 
@@ -62,6 +63,13 @@
 <script setup>
 import { computed, ref } from 'vue';
 import { CaretRightOutlined } from '@ant-design/icons-vue';
+import RefsComponent from '@/components/RefsComponent.vue'
+
+import { Marked } from 'marked';
+import { markedHighlight } from 'marked-highlight';
+import hljs from 'highlight.js';
+import 'highlight.js/styles/github.css';
+
 
 const props = defineProps({
   // 消息角色：'user'|'assistant'|'sent'|'received'
@@ -69,49 +77,25 @@ const props = defineProps({
     type: Object,
     required: true
   },
-  role: {
-    type: String,
-    required: true
-  },
-  // 消息内容
-  content: {
-    type: String,
-    default: ''
-  },
   // 已渲染的HTML内容
   contentHtml: {
     type: String,
     default: ''
   },
-  // 推理内容 (ChatComponent使用)
-  reasoningContent: {
-    type: String,
-    default: ''
-  },
-  // 消息状态
-  status: {
-    type: String,
-    default: ''
-  },
   // 是否正在处理中
   isProcessing: {
     type: Boolean,
     default: false
   },
-  // 错误信息
-  errorMessage: {
-    type: String,
-    default: ''
-  },
   // 自定义类
   customClasses: {
     type: Object,
     default: () => ({})
   },
-  // 推理框标题
-  reasoningHeader: {
-    type: String,
-    default: '推理过程'
+  // 是否显示推理过程
+  showRefs: {
+    type: Boolean,
+    default: false
   }
 });
 
@@ -128,10 +112,36 @@ const emit = defineEmits(['retry', 'retryStoppedMessage']);
 // 推理面板展开状态
 const reasoningActiveKey = ref(['show']);
 
+
+const renderMarkdown = (msg) => {
+  if (!msg.content) return '';
+
+  if (msg.status === 'loading') {
+    return marked.parse(msg.content + '🟢')
+  } else {
+    return marked.parse(msg.content)
+  }
+}
+
+
+const marked = new Marked(
+  {
+    gfm: true,
+    breaks: true,
+    tables: true,
+  },
+  markedHighlight({
+    langPrefix: 'hljs language-',
+    highlight(code) {
+      return hljs.highlightAuto(code).value;
+    }
+  })
+);
+
 // 计算属性：内容为空且正在加载
 const isEmptyAndLoading = computed(() => {
-  const isEmpty = !props.content || props.content.length === 0;
-  const isLoading = props.status === 'init'
+  const isEmpty = !props.message.content || props.message.content.length === 0;
+  const isLoading = props.message.status === 'init'
   return isEmpty && isLoading;
 });
 </script>
diff --git a/web/src/components/RefsComponent.vue b/web/src/components/RefsComponent.vue
index ad6be515..9ee3bff9 100644
--- a/web/src/components/RefsComponent.vue
+++ b/web/src/components/RefsComponent.vue
@@ -3,8 +3,8 @@
     <div class="tags">
       <!-- <span class="item btn" @click="likeThisResponse(msg)"><LikeOutlined /></span> -->
       <!-- <span class="item btn" @click="dislikeThisResponse(msg)"><DislikeOutlined /></span> -->
-      <span class="item"><BulbOutlined /> {{ msg.meta.server_model_name }}</span>
-      <span class="item btn" @click="copyText(msg.text)" title="复制"><CopyOutlined /></span>
+      <span v-if="msg.meta?.server_model_name" class="item"><BulbOutlined /> {{ msg.meta.server_model_name }}</span>
+      <span class="item btn" @click="copyText(msg.content)" title="复制"><CopyOutlined /></span>
       <span class="item btn" @click="regenerateMessage()" title="重新生成"><ReloadOutlined /></span>
       <span
         class="item btn"
@@ -120,11 +120,9 @@ import GraphContainer from './GraphContainer.vue'  // 导入 GraphContainer 组
 const emit = defineEmits(['retry']);
 const props = defineProps({
   message: Object,
-  conv: Object,
 })
 
 const msg = ref(props.message)
-const conv = ref(props.conv)
 
 // 使用 useClipboard 实现复制功能
 const { copy, isSupported } = useClipboard()
@@ -166,7 +164,7 @@ const toggleDrawer = (filename) => {
   openDetail[filename] = !openDetail[filename]
 }
 
-const showRefs = computed(() => msg.value.role=='received' && msg.value.status=='finished')
+const showRefs = computed(() => (msg.value.role=='received' || msg.value.role=='assistant') && msg.value.status=='finished')
 
 const subGraphVisible = ref(false)
 const subGraphData = ref(null)
diff --git a/web/src/views/AgentView.vue b/web/src/views/AgentView.vue
index 5980e084..d836f186 100644
--- a/web/src/views/AgentView.vue
+++ b/web/src/views/AgentView.vue
@@ -38,13 +38,9 @@
       <div class="chat-box" ref="messagesContainer" :class="{ 'is-debug': options.debug_mode }">
         <MessageComponent
           v-for="(message, index) in messages"
+          :message="message"
           :key="index"
-          :role="message.role"
-          :content="message.content"
-          :content-html="message.content ? renderMarkdown(message.content) : ''"
-          :status="message.status"
           :is-processing="isProcessing"
-          :error-message="message.message"
           @retry="retryMessage(index)"
         >
           <div v-if="options.debug_mode" class="status-info">{{ message }}</div>