feat: 添加流式支持；教材知识库 Demo

pages/index.vue

@@ -9,56 +9,83 @@ const getPopularInquiriesByRole = () => {
   return {
     stu: [
       {
-        label: "学籍管理",
+        label: "物联网基础",
         inquiries: [
           {
-            question: "学籍注册的要求",
+            question: "物联网的定义是什么",
           },
           {
-            question: "病假请假的审批流程",
+            question: "物联网与互联网的关系与区别",
           },
           {
-            question: "转专业有哪些条件",
+            question: "物联网有哪些典型应用场景",
           },
           {
-            question: "办理休学的流程",
+            question: "物联网系统的四层结构是什么",
           },
           {
-            question: "人工智能专业毕业的要求",
+            question: "物联网的本质是什么",
+          },
+          {
+            question: "新基建和物联网的关系",
+          },
+          {
+            question: "物联网工程的生命周期包括哪些阶段",
           },
         ],
       },
       {
-        label: "学生日常",
+        label: "智慧工地",
         inquiries: [
           {
-            question: "校医院服务时间和报销政策",
+            question: "智慧工地的概念与核心目标",
           },
           {
-            question: "学工部的联系方式",
+            question: "智慧工地系统的四层架构是什么",
           },
           {
-            question: "宿舍管理制度是怎样的",
+            question: "施工场地工人健康检测系统包括哪些功能",
           },
           {
-            question: "助学贷款申请指南",
+            question: "施工场地工人健康检测系统的作用是什么",
           },
           {
-            question: "成立社团的流程",
+            question: "智慧工地中常用的传感器有哪些",
+          },
+          {
+            question: "选择传感器需要考虑哪些特性参数",
+          },
+          {
+            question: "传感器安装调试的主要步骤有哪些",
           },
         ],
       },
       {
-        label: "职业发展",
+        label: "智能交通",
         inquiries: [
           {
-            question: "专升本的条件和要求",
+            question: "智能交通系统的定义和主要目标是什么",
           },
           {
-            question: "金融相关专业实习单位有哪些",
+            question: "智能交通系统的四层结构及其功能",
           },
           {
-            question: "创业孵化基地申请方式",
+            question: "我国智能交通的发展现状如何",
+          },
+          {
+            question: "国外智能交通发展的主要特点是什么",
+          },
+          {
+            question: "智能交通系统中常用的感知技术有哪些",
+          },
+          {
+            question: "射频识别技术在智能交通中的应用有哪些",
+          },
+          {
+            question: "自动识别技术包括哪些分类",
+          },
+          {
+            question: "交通卡口监控系统需求分析包含哪些方面",
           },
         ],
       },
@@ -177,30 +204,84 @@ const onInquirySubmit = async () => {
     });
 
     try {
-      const resp = await useFetch<IWorkflowResponse>(
-        `${runtimeConfig.public.DifyBaseURL}/workflows/run`,
-        {
-          method: "post",
-          headers: {
-            Authorization: `Bearer ${runtimeConfig.public.DifyApiKey}`,
-          },
-          body: JSON.stringify({
-            inputs: {
-              question: inquiryInput.value,
-              role: gstate.currentRole,
-            },
-            response_mode: "blocking",
-            user: "abc-123",
-          }),
-        }
-      );
-      gstate.insertOrUpdateMessage({
-        id: botMessageId,
-        role: "bot",
-        message:
-          resp.data.value?.data.outputs.message.match(regex)?.[1] ||
-          "网络繁忙，请稍后再试",
-      });
+      // const resp = await useFetch<IWorkflowResponse>(
+      //   `${runtimeConfig.public.DifyBaseURL}/workflows/run`,
+      //   {
+      //     method: "post",
+      //     headers: {
+      //       Authorization: `Bearer ${runtimeConfig.public.DifyApiKey}`,
+      //     },
+      //     body: JSON.stringify({
+      //       inputs: {
+      //         query: inquiryInput.value,
+      //       },
+      //       response_mode: "blocking",
+      //       user: "xsh",
+      //     }),
+      //   }
+      // );
+      // gstate.insertOrUpdateMessage({
+      //   id: botMessageId,
+      //   role: "bot",
+      //   message:
+      //     resp.data.value?.data.outputs.message.match(regex)?.[1] ||
+      //     "网络繁忙，请稍后再试",
+      // });
+      http_stream<{
+        query: string
+        response_mode: "blocking" | "streaming"
+        user: string
+        conversation_id: string
+        inputs: Record<string, any>
+      }>(`${runtimeConfig.public.DifyBaseURL}/chat-messages`, {
+        query: inquiryInput.value,
+        response_mode: "streaming",
+        user: "xsh",
+        conversation_id: "",
+        inputs: {}
+      }, {
+        onStart: () => {
+          responding.value = true;
+          gstate.insertOrUpdateMessage({
+            id: botMessageId,
+            role: "bot",
+            message: "",
+          });
+        },
+        onTextChunk: (message: string) => {
+          gstate.insertOrUpdateMessage({
+            id: botMessageId,
+            role: "bot",
+            message: gstate.messages.find(m => m.id === botMessageId)?.message + message,
+          });
+        },
+        onComplete: (id, finished_at, messageId) => {
+          responding.value = false;
+          gstate.insertOrUpdateMessage({
+            id: botMessageId,
+            role: "bot",
+            message: gstate.messages.find(m => m.id === botMessageId)?.message || "网络繁忙，请稍后再试",
+          });
+          scrollLastMessageIntoView();
+          fetch(
+            `${runtimeConfig.public.DifyBaseURL}/messages/${messageId}/suggested?user=xsh`,
+            {
+              method: "GET",
+              headers: {
+                Authorization: `Bearer ${runtimeConfig.public.DifyApiKey}`,
+              },
+            }
+          ).then(res => res.json()).then(data => {
+            if (data?.data?.length) {
+              gstate.insertOrUpdateMessage({
+                id: uuidv4(),
+                role: "suggestion",
+                suggestions: data.data,
+              });
+            }
+          })
+        },
+      })
     } catch (error) {
       gstate.insertOrUpdateMessage({
         id: botMessageId,
@@ -244,6 +325,12 @@ const scrollLastMessageIntoView = () => {
         :name="gstate.botName"
         :key="message.id"
         :message="message"
+        @select-suggestion="
+          (suggestion) => {
+            if (responding) return;
+            inquiryInput = suggestion;
+            onInquirySubmit();
+          }"
       />
     </div>
     <div