流式数据相应

src/layouts/default/sider/bottomSider2.vue

@@ -93,7 +93,8 @@
                 <div v-else class="system-message">
                   <div class="answerIcon"></div>
                   <div class="answer-message">
-                    <div v-html="formatMessage(message.content)"></div>
+                    <div v-if="message.Origintype == 'thinking'" class="thinking-text" v-html="formatMessage(message.content)"></div>
+                    <div v-else-if="message.Origintype == 'text'" class="answer-text" v-html="formatMessage(message.content)"></div>
                   </div>
                 </div>
               </div>
@@ -156,6 +157,7 @@ type MessageItem = {
   id: string; // 唯一标识（可用时间戳生成）
   type: 'user' | 'system';
   content: string;
+  Origintype: string;
   timestamp: number; // 排序依据
 };
 const messageList = ref<MessageItem[]>([]);
@@ -305,9 +307,9 @@ const sendMessage1 = async () => {
     id: `user_${Date.now()}`,
     type: 'user',
     content: inputText.value,
+    Origintype: '',
     timestamp: Date.now(),
   });
-
   // 构造请求参数
   const params = {
     chat_session_id: session_id.value, // 替换为实际的会话 ID
@@ -339,6 +341,7 @@ const sendMessage1 = async () => {
       id: `response_${Date.now()}`,
       type: 'response', // 消息类型
       content: '',
+      Origintype: '',
       timestamp: Date.now(), // 时间戳用来排序
     };
 
@@ -360,16 +363,26 @@ const sendMessage1 = async () => {
       // 使用正则表达式匹配完整的 JSON 对象
       const jsonRegex = /{.*?}/g;
       const matches = chunk.match(jsonRegex);
-
       if (matches) {
         matches.forEach((match) => {
           try {
             const data = JSON.parse(match);
-            if (data.type === 'text') {
+            console.log(data.type, '数据类型11111111111111111');
+            if (data.type === 'thinking') {
               // 找到当前消息对象并更新 content
               const targetMessage = messageList.value.find((msg) => msg.id === newMessage.id);
               if (targetMessage) {
                 targetMessage.content += data.content; // 追加内容
+                targetMessage.Origintype = data.type;
+                scrollToBottom();
+              }
+            }
+            if (data.type === 'text') {
+              // 找到当前消息对象并更新 content
+              const targetMessage1 = messageList.value.find((msg) => msg.id === newMessage.id);
+              if (targetMessage1) {
+                targetMessage1.content += data.content; // 追加内容
+                targetMessage1.Origintype = data.type;
                 scrollToBottom();
               }
             }
@@ -387,6 +400,7 @@ const sendMessage1 = async () => {
         id: `system_${Date.now()}`,
         type: 'system',
         content: systemMessage.value,
+        Origintype: 'text',
         timestamp: Date.now(),
       });
       console.error('请求失败:', error);
@@ -716,7 +730,13 @@ onMounted(() => {
   border-radius: 5px;
   background: #0c2842;
 }
-
+.thinking-text {
+  color: gray;
+  font-size: 12px;
+}
+.answer-text {
+  color: #fff;
+}
 /** 系统返回信息**/
 .system-message {
   display: flex;