st-comp 0.0.249 → 0.0.251

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "st-comp",
   "public": true,
-  "version": "0.0.249",
+  "version": "0.0.251",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/packages/VarietyAiHelper/index.vue

@@ -1,26 +1,31 @@
 <script setup>
 import dayjs from "dayjs";
 import { ElMessage } from "element-plus";
-import { ref, nextTick, watch } from "vue";
-import { sendToBaiLianAppNonStreaming } from "../../public/aiTools";
+import { ref, nextTick, watch, onMounted } from "vue";
+import { sendToBaiLianAppStreaming } from "../../public/aiTools";
 import { UserFilled, Service, Promotion } from "@element-plus/icons-vue";
 
 const emit = defineEmits(["callBack"]);
+const props = defineProps({
+  defaultMessage: {
+    type: String,
+    default: "你好呀！我是你的品种池AI助手，会根据您的自然语言去进行品种的条件查询\n\n示例: \n帮我查A股科创板下品种转价差上证50并且总市值大于1千万, 按照总市值升序进行排序",
+  },
+});
 
 const visible = ref(false);
-const isSending = ref(false);
-const isThinking = ref(false);
+const isSending = ref(false); // 发送按钮
+const isThinking = ref(false); // AI思考状态
 
+// 消息列表
 const messageListRef = ref(null);
-const messages = ref([
-  {
-    role: "assistant",
-    time: dayjs().format("HH:mm"),
-    content: "你好呀！我是你的品种池AI助手，会根据您的自然语言去进行品种的条件查询\n\n示例: \n帮我查找A股，总市值1000亿，流通股本大于等于1000万",
-  },
-]);
+const messages = ref([]);
 const inputMessage = ref("");
 
+// 当前正在接收的AI消息（用于流式更新）
+const currentAssistantMessage = ref(null);
+const currentAssistantIndex = ref(-1);
+
 // 发送消息
 const sendMessage = async () => {
   // 校验输入内容是否为空
@@ -38,29 +43,85 @@ const sendMessage = async () => {
   inputMessage.value = "";
   await scrollToBottom();
 
-  // 发送请求至百炼应用AI
+  // 创建一个临时的AI消息占位符
+  const assistantMessage = {
+    role: "assistant",
+    time: dayjs().format("HH:mm"),
+    content: "",
+  };
+  messages.value.push(assistantMessage);
+  currentAssistantIndex.value = messages.value.length - 1;
+  currentAssistantMessage.value = assistantMessage;
+  await scrollToBottom();
+
+  // 发送请求至百炼应用AI（流式）
   isSending.value = true;
   isThinking.value = true;
-  let apiRes = "{}";
+  
+  let fullResponse = "";
+  
   try {
     const appId = "9e54d112acfe4531bd1fc4fee8827fef";
     const apiKey = "sk-d995eb26a4334bdeb2ccb4cbfaf51de8";
-    apiRes = await sendToBaiLianAppNonStreaming({ appId, apiKey, value: content });
+    
+    await sendToBaiLianAppStreaming({
+      appId,
+      apiKey,
+      value: content,
+      callback: (type, data) => {
+        if (type === "message") {
+          // 实时更新消息内容
+          fullResponse += data;
+          if (currentAssistantMessage.value) {
+            currentAssistantMessage.value.content = fullResponse;
+            // 实时滚动到底部
+            scrollToBottom();
+          }
+        } else if (type === "finish") {
+          // 流式传输完成
+          isThinking.value = false;
+          isSending.value = false;
+          console.log(fullResponse)
+          // 触发回调
+          try {
+            // 尝试解析完整的响应为JSON
+            const jsonResponse = JSON.parse(fullResponse);
+            emit("callBack", jsonResponse);
+          } catch (error) {
+            // 如果不是JSON格式，直接返回文本
+            emit("callBack", fullResponse);
+          }
+          
+          // 清空当前消息引用
+          currentAssistantMessage.value = null;
+          currentAssistantIndex.value = -1;
+        }
+      }
+    });
+  } catch (error) {
+    ElMessage.error(`AI响应异常: ${error}`);
+    console.error("AI响应异常:", error);
+    
+    // 如果出错，移除占位消息并显示错误
+    if (currentAssistantIndex.value !== -1) {
+      messages.value.splice(currentAssistantIndex.value, 1);
+      currentAssistantMessage.value = null;
+      currentAssistantIndex.value = -1;
+    }
+    
+    // 添加错误提示消息
     messages.value.push({
       role: "assistant",
       time: dayjs().format("HH:mm"),
-      content: apiRes,
+      content: "抱歉，AI服务响应异常，请稍后重试。",
     });
     await scrollToBottom();
-  } catch (error) {
-    ElMessage.error(`AI响应异常: ${error}`);
-    console.error("AI响应异常:", error);
-  } finally {
+    
     isSending.value = false;
     isThinking.value = false;
   }
-  emit("callBack", JSON.parse(apiRes));
 };
+
 // 滚动到底部
 const scrollToBottom = async () => {
   await nextTick();
@@ -68,6 +129,15 @@ const scrollToBottom = async () => {
     messageListRef.value.scrollTop = messageListRef.value.scrollHeight;
   }
 };
+
+onMounted(() => {
+  messages.value.push({
+    role: "assistant",
+    time: dayjs().format("HH:mm"),
+    content: props.defaultMessage,
+  });
+});
+
 watch(
   () => messages.value,
   () => {
@@ -75,6 +145,7 @@ watch(
   },
   { deep: true },
 );
+
 defineExpose({
   open: (data) => {
     visible.value = true;
@@ -110,21 +181,23 @@ defineExpose({
           class="message-item"
           :class="message.role"
         >
-          <div class="avatar">
-            <el-avatar
-              :size="32"
-              :icon="message.role === 'user' ? UserFilled : Service"
-            />
-          </div>
-          <div class="message-content">
-            <div class="message-text">{{ message.content }}</div>
-            <div class="message-time">{{ message.time }}</div>
-          </div>
+          <template v-if="message.content">
+            <div class="avatar">
+              <el-avatar
+                :size="32"
+                :icon="message.role === 'user' ? UserFilled : Service"
+              />
+            </div>
+            <div class="message-content">
+              <div class="message-text">{{ message.content }}</div>
+              <div class="message-time">{{ message.time }}</div>
+            </div>
+          </template>
         </div>
 
-        <!-- AI 思考状态 -->
+        <!-- AI 思考状态（仅在未开始接收流式消息时显示） -->
         <div
-          v-if="isThinking"
+          v-if="isThinking && !currentAssistantMessage?.content"
           class="message-item assistant"
         >
           <div class="avatar">
@@ -427,4 +500,4 @@ defineExpose({
     opacity: 1;
   }
 }
-</style>
+</style>

package/public/aiTools.js

@@ -1,11 +1,4 @@
-/**
- * 发送非流式请求到百炼 AI 应用
- * @param {Object} options
- * @param {string} options.appId - 应用ID
- * @param {string} options.apiKey - API Key
- * @param {string} options.value - 用户输入
- * @returns {Promise<string>} 返回 AI 输出的完整文本（JSON 字符串）
- */
+// 非流式返回
 export const sendToBaiLianAppNonStreaming = async ({ appId, apiKey, value }) => {
   try {
     const response = await fetch(`https://dashscope.aliyuncs.com/api/v1/apps/${appId}/completion`, {
@@ -34,3 +27,43 @@ export const sendToBaiLianAppNonStreaming = async ({ appId, apiKey, value }) =>
     throw error;
   }
 };
+// 流式返回
+export const sendToBaiLianAppStreaming = async ({ appId, apiKey, value, callback }) => {
+  try {
+    const res = await fetch(`https://dashscope.aliyuncs.com/api/v1/apps/${appId}/completion`, {
+      method: "POST",
+      body: JSON.stringify({
+        input: { prompt: value },
+        parameters: {
+          incremental_output: "true", // 流式返回
+        },
+        debug: {},
+      }),
+      headers: {
+        Authorization: `Bearer ${apiKey}`,
+        "Content-Type": "application/json",
+        "X-DashScope-SSE": "enable", // 流式输出
+      },
+    });
+    if (!res.ok || !res.body) throw new Error("请求失败");
+
+    const reader = res.body.getReader();
+    const decoder = new TextDecoder();
+
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done && callback) {
+        callback("finish", "");
+        break;
+      }
+      try {
+        const data = decoder.decode(value, { stream: true });
+        const resData = JSON.parse(data.split("\n")[3].substr(5));
+        const resText = resData?.output?.text;
+        if (resText && callback) callback("message", resText);
+      } catch (error) {}
+    }
+  } catch (error) {
+    console.error(error);
+  }
+};