可信代码库-AI大模型猜你想问接口对接及功能优化

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

@@ -39,23 +39,20 @@
 <!--            </template>-->
 <!--          </McBubble>-->
         </template>
-        <div class="conversation-cnxw">
+        <div v-if="followupQuestions.length>0" class="conversation-cnxw">
           <a class="flex conversation-cnxw-item">
             <span class="span2">猜你想问</span>
-            <img style="height: 15px;margin-right: 8px" width="16" src="@/assets/imgs/jyh/ai/icon_generate.png" />
+            <img style="height: 15px;margin-right: 16px" width="16" src="@/assets/imgs/jyh/ai/icon_generate.png" />
+          </a>
+          <a
+            v-for="(q, index) in followupQuestions"
+            :key="index"
+            class="g-header-copilot"
+            @click="onSubmit(q)"
+          >
+            <img src="@/assets/imgs/jyh/ai/icon_cnxw.png" style="height: 15px; margin-right: 8px" />
+            <span class="ml-xs">{{ q }}</span>
           </a>
-          <div class="flex conversation-cnxw-item">
-            <a class="g-header-copilot" @click="onSubmit('我想看Redis的详情')">
-              <img style="height: 15px;" width="16" src="@/assets/imgs/jyh/ai/icon_cnxw.png" />
-              <span class="ml-xs">我想看Redis的详情</span>
-            </a>
-          </div>
-          <div class="flex conversation-cnxw-item">
-            <a class="g-header-copilot" @click="onSubmit('Redis的可信评分是多少')">
-              <img style="height: 15px;" width="16" src="@/assets/imgs/jyh/ai/icon_cnxw.png" />
-              <span class="ml-xs">Redis的可信评分是多少</span>
-            </a>
-          </div>
         </div>
       </div>
       <div v-else class="welcome-page">
@@ -195,6 +192,7 @@ const inputFootIcons = [
 ];
 
 const messages = ref([]);
+const followupQuestions = ref([]);
 
 // 控制 ViewHistoryAside 组件的显示状态
 const isHistoryVisible = ref(false);
@@ -225,6 +223,7 @@ const onSubmit = async (e, answer = undefined) => {
     avatarPosition: 'side-right',
     avatarConfig: { ...customerAvatar },
   });
+  followupQuestions.value = [];
   // getAIAnswer(answer ?? e);
   // 判断是否有会话id
   if(!CONV_ID.value) {
@@ -244,7 +243,6 @@ const VITE_AI_API_HOST = (import.meta as any).env.VITE_AI_API_HOST;
 
 // AI对话接口对接
 const getAIAnswer = async (content) => {
-  debugger
   if(CONV_ID.value) {
     messages.value.push({
       role: 'ai-model',
@@ -262,7 +260,7 @@ const getAIAnswer = async (content) => {
     });
 
     if(response.data.type) {
-      const {text,type} = response.data;
+      const {text,type,id} = response.data;
 
       if(type==='text') {
         messages.value[messages.value.length - 1].content = text;
@@ -273,6 +271,7 @@ const getAIAnswer = async (content) => {
         messages.value[messages.value.length - 1].loading = false;
         messages.value[messages.value.length - 1].type = 'df';
       }
+      fetchFollowupQuestions(content,id)
     } else {
       Message.warning('接口异常！')
     }
@@ -334,6 +333,31 @@ const createConversation = async () => {
     Message.error('创建会话失败，请重试');
   }
 };
+// 猜你想问接口
+const fetchFollowupQuestions = async (question,df_id,sql_id='') => {
+  try {
+    // 构造请求参数（需根据实际文档补充 df_id 和 sql_id，示例中使用空字符串占位）
+    const params = {
+      question,
+      df_id: df_id || '', // 使用当前会话ID，若无则为空
+      sql_id: sql_id || '' // 同上
+    };
+    const response = await axios.post(
+      `${VITE_AI_API_HOST}/api/v0/provide_followup_questions`,
+      params
+    );
+    debugger
+    const createRes = response.data;
+    if (createRes&&createRes.questions) {
+      followupQuestions.value = createRes.questions
+    } else {
+      // Message.error('创建会话失败，未获取到会话ID');
+    }
+  } catch (error) {
+    console.error('查询相关问题失败:', error);
+    // Message.error('创建会话失败，请重试');
+  }
+};
 
 const handleSelectConv = (convId: string) => {
   CONV_ID.value = convId; // 更新为选中的会话 ID
@@ -529,11 +553,14 @@ onMounted(() => {
     }
     .conversation-cnxw {
       margin-top: 8px;
+      display: flex;
+      flex-direction: column; /* 改为垂直排列 */
+      align-items: flex-end; /* 内容右对齐 */
       .conversation-cnxw-item {
         cursor: pointer;
         align-items: center;
-        justify-content: end;
+        //justify-content: end;
-        margin-right: 12px;
+        //margin-right: 12px;
         margin-bottom: 8px;
       }
       .span2{
@@ -547,16 +574,17 @@ onMounted(() => {
         margin-right: 8px;
       }
       .g-header-copilot {
+        margin-right: 16px;
+        margin-top: 4px;
         background: #fff;
         color: black;
-        //width: 120px;
         padding: 0 12px;
         border-radius: 48px;
         height: 32px;
         display: flex;
         align-items: center;
         cursor: pointer;
-        justify-content: center;
+        //justify-content: center;
         &:hover {
           background: rgba(41, 81, 224, 0.8);
         }