首页会话 深度思考功能

src/layouts/default/sider/bottomSider2.vue

@@ -107,14 +107,18 @@
               <textarea v-model="inputText" placeholder="请输入你的问题"> </textarea>
               <!-- 底部操作栏 -->
               <div class="action-bar">
-                <!-- 文件上传按钮 -->
-                <label class="upload-btn">
-                  <div class="send-file" />
-                  <span class="divider"> | </span>
-                  <div class="send-img" />
-                </label>
-                <!-- 发送按钮 -->
-                <div class="send-btn" @click="handleSend"></div>
+                <!-- 左侧深度思考按钮 -->
+                <div class="think-btn" :class="{ active: isThinking }" @click="toggleThinking"> <span>深度思考</span> </div>
+
+                <!-- 右侧操作按钮 -->
+                <div class="right-actions">
+                  <label class="upload-btn">
+                    <div class="send-file"></div>
+                    <span class="divider"> | </span>
+                    <div class="send-img"></div>
+                    <div class="send-btn" @click="handleSend"></div>
+                  </label>
+                </div>
               </div>
             </div>
           </div>
@@ -141,6 +145,7 @@ const hasAdd = ref(false); // 标志位，防止重复调用create接口
 const userStore = useUserStore(); //获取用户信息
 const editingId = ref<number | null>(null);
 const editText = ref('');
+const isThinking = ref(false);
 interface ListItem {
   id: number;
   title?: string;
@@ -180,6 +185,10 @@ const fold = () => {
     sessionsHistoryList();
   }
 };
+//启用深度思考
+const toggleThinking = () => {
+  isThinking.value = !isThinking.value;
+};
 //创建新对话
 async function addNew() {
   hasAdd.value = !hasAdd.value;
@@ -304,7 +313,7 @@ const sendMessage1 = async () => {
     chat_session_id: session_id.value, // 替换为实际的会话 ID
     prompt: inputText.value,
     ref_file_ids: [],
-    thinking_enabled: false,
+    thinking_enabled: isThinking.value,
   };
   inputText.value = ''; // 清空输入框
   try {
@@ -325,12 +334,12 @@ const sendMessage1 = async () => {
     // 获取可读流
     const reader = response.body.getReader();
 
-    // 创建一条新的消息对象
+    // 创建消息对象
     const newMessage = {
-      id: `response_${Date.now()}`,
-      type: 'response', // 消息类型
-      content: '',
-      timestamp: Date.now(), // 时间戳用来排序
+      id: `msg_${Date.now()}`,
+      type: 'response', // 初始类型为 response
+      content: '', // 初始内容为空
+      timestamp: Date.now(),
     };
 
     // 将新消息添加到消息列表
@@ -347,13 +356,16 @@ const sendMessage1 = async () => {
       // 将流数据转换为字符串
       const chunk = new TextDecoder().decode(value);
       console.log('Received chunk:', chunk);
+
+      // 使用正则表达式匹配完整的 JSON 对象
       const jsonRegex = /{.*?}/g;
       const matches = chunk.match(jsonRegex);
+
       if (matches) {
         matches.forEach((match) => {
           try {
             const data = JSON.parse(match);
-            if (data.type === 'text') {
+            if (data.type === 'text' || data.type === 'thinking') {
               // 找到当前消息对象并更新 content
               const targetMessage = messageList.value.find((msg) => msg.id === newMessage.id);
               if (targetMessage) {
@@ -369,14 +381,16 @@ const sendMessage1 = async () => {
     }
   } catch (error) {
     // 请求失败时设置系统消息
-    systemMessage.value = '服务器异常';
-    messageList.value.push({
-      id: `system_${Date.now()}`,
-      type: 'system',
-      content: systemMessage.value,
-      timestamp: Date.now(),
-    });
-    console.error('请求失败:', error);
+    if (!response || !response.ok) {
+      systemMessage.value = '服务器异常';
+      messageList.value.push({
+        id: `system_${Date.now()}`,
+        type: 'system',
+        content: systemMessage.value,
+        timestamp: Date.now(),
+      });
+      console.error('请求失败:', error);
+    }
   } finally {
     spinning.value = false; // 停止加载
   }
@@ -700,7 +714,6 @@ onMounted(() => {
   padding: 10px;
   margin: 10px;
   border-radius: 5px;
-  color: #fff;
   background: #0c2842;
 }
 
@@ -720,14 +733,11 @@ onMounted(() => {
   background-image: url('/@/assets/images/vent/home/answerIcon.svg');
   background-size: 100% 100%;
 }
-.answer-message {
-  float: left;
-  width: 100%;
-  padding: 10px;
-  margin: 10px;
-  border-radius: 5px;
+.think-area {
+  color: #7979799f;
+}
+.answer-area {
   color: #fff;
-  background: #0c2842;
 }
 .dialog-area {
   flex: 1; /* 占据剩余空间 */
@@ -762,12 +772,42 @@ textarea {
 
 .action-bar {
   display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 16px;
+}
+
+.think-btn {
+  border: 1px solid #ccc;
+  width: 120px;
+  height: 20px;
+  line-height: 20px;
+  text-align: center;
+  border-radius: 50px;
+  cursor: pointer;
+  background: white;
+  transition: background 0.3s;
+}
+
+.think-btn.active {
+  background: #1890ff;
+  color: white;
+  border-color: #1890ff;
+}
+.right-actions {
+  display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 8px;
 }
 
 .upload-btn {
   display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.upload-btn {
+  float: right;
+  display: flex;
   cursor: pointer;
   padding: 6px 12px;
 }
@@ -797,7 +837,7 @@ textarea {
 .send-btn {
   width: 20px;
   height: 20px;
-  margin-left: auto;
+  margin-left: 10px;
   margin-right: 10px;
   background-color: #1074c1;
   background-image: url('/@/assets/images/vent/home/send.svg');