可信代码库-AI大模型思考过程接口展示

src/assets/css/jyh.scss

@@ -340,15 +340,15 @@
 
 .green {
   cursor: pointer;
-  color: rgb(80, 212, 171)
+  color: rgb(61, 204, 166)
 }
 .yellow {
   cursor: pointer;
-  color: rgb(250, 194, 10)
+  color: rgb(254, 204, 85)
 }
 .red {
   cursor: pointer;
-  color: rgb(246, 111, 106)
+  color: rgb(249, 95, 91)
 }
 
 .jyh-split {
@@ -450,3 +450,8 @@
     }
   }
 }
+
+.align-center {
+  display: flex;
+  align-items: center;
+}

src/views/Jyh/AI/Home/index.vue

@@ -6,14 +6,31 @@
           <McBubble v-if="msg.role === 'user'" :content="msg.content" :align="'right'" ></McBubble>
           <McBubble v-else :loading="msg.loading ?? false" >
             <div class="think-toggle-btn" @click="toggleThink(idx)">
-              <div class="flex align-middle">
+              <div class="flex align-center">
                 <img style="height: 15px;margin-right: 8px" width="16" src="@/assets/imgs/jyh/ai/icon_skgc.png" />
                 <span class="span1">思考过程：</span>
-<!--                <i style="margin-left: auto" :class="btnIcon"></i>-->
+                <i style="margin-left: auto" :class="btnIcon"></i>
+
+              </div>
+              <!-- 思考过程展示区域 -->
+              <div class="mc-think-block" :style="{ display: msg.thinkExpanded ? 'block' : 'none' }">
+
+                <div class="think-process">
+                  <div v-for="(step, index) in msg.thinkProcess" :key="index" class="think-step flex align-center">
+                    <i v-if="step.status === 1" style="font-size: 16px;margin-right: 8px" class="icon icon-right"></i>
+                    <i v-else style="font-size: 16px;margin-right: 8px" class="icon icon-right"></i>
+                    <span class="step-name span1">{{ step.name }}</span>
+                    <span style="margin-left: 8px" :class="['step-status', step.status === 1 ? 'green' : 'red']">{{ step.status === 1 ? '成功' : '失败' }}</span>
+                  </div>
+                </div>
               </div>
             </div>
-            <div class="flex align-middle" style="margin-top: 6px">
+            <div v-if="msg.type==='error'" class="flex align-center" style="margin-top: 6px">
-              <i style="font-size: 16px;height: 15px;margin-right: 8px" class="icon icon-right"></i>
+              <i style="font-size: 16px;margin-right: 8px" class="icon icon-info-o"></i>
+              <span class="span1">回答异常：</span>
+            </div>
+            <div v-else class="flex align-center" style="margin-top: 6px">
+              <i style="font-size: 16px;margin-right: 8px" class="icon icon-right"></i>
               <span class="span1">完成回答：</span>
             </div>
             <!--开源软件列表-->
@@ -326,9 +343,15 @@ const getAIAnswer = async (content) => {
       question: content,
     });
 
+    debugger
+
     if(response.data.type) {
-      const {text,type,id,table_name=[]} = response.data;
+      const {text,type,id,table_name=[], states={}} = response.data;
       messages.value[messages.value.length - 1].id = id;
+      // 处理思考过程
+      const thinkProcess = processThinkStates(states);
+      messages.value[messages.value.length - 1].thinkProcess = thinkProcess;
+
       if(type==='text') {
         messages.value[messages.value.length - 1].content = text;
         messages.value[messages.value.length - 1].loading = false;
@@ -347,6 +370,10 @@ const getAIAnswer = async (content) => {
             messages.value[messages.value.length - 1].software_name = arr[0]?.software_name || arr[0]['软件名称'];
           }
         }
+      } else if(type==='sql_error') {
+        messages.value[messages.value.length - 1].content = response.data.error;
+        messages.value[messages.value.length - 1].loading = false;
+        messages.value[messages.value.length - 1].type = 'error';
       }
       fetchFollowupQuestions(content,id)
     } else {
@@ -378,6 +405,20 @@ const getAIAnswer = async (content) => {
   }
 };
 
+// 思考步骤定义
+const thinkStepsOrder = ['意图分析', 'sql有效性判断', 'sql执行'];
+// 处理思考状态
+const processThinkStates = (states) => {
+  debugger
+  return thinkStepsOrder.map(stepName => {
+    return {
+      name: stepName,
+      status: states[stepName] || 0 // 默认为0(失败)
+    };
+  });
+};
+
+
 const viewHistoryRef = ref(null);
 // 当前会话id
 const CONV_ID = ref('');