st-comp 0.0.251 → 0.0.253

package/package.json

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

package/packages/VarietyAiHelper/index.vue

@@ -1,10 +1,13 @@
 <script setup>
 import dayjs from "dayjs";
 import { ElMessage } from "element-plus";
-import { ref, nextTick, watch, onMounted } from "vue";
+import { getUserData } from "st-func";
+import { inject, ref, nextTick, watch, reactive } from "vue";
 import { sendToBaiLianAppStreaming } from "../../public/aiTools";
 import { UserFilled, Service, Promotion } from "@element-plus/icons-vue";
 
+const stConfig = inject("stConfig");
+const userData = reactive(getUserData());
 const emit = defineEmits(["callBack"]);
 const props = defineProps({
   defaultMessage: {
@@ -14,114 +17,188 @@ const props = defineProps({
 });
 
 const visible = ref(false);
-const isSending = ref(false); // 发送按钮
-const isThinking = ref(false); // AI思考状态
+const isSending = ref(false);
+const isThinking = ref(false);
 
-// 消息列表
 const messageListRef = ref(null);
-const messages = ref([]);
+const messages = ref([
+  {
+    role: "assistant", // AI-assistant, 用户-user
+    content: props.defaultMessage,
+    userContent: null,
+    showFeedback: false, // 是否展示反馈按钮(默认信息不用展示)
+    hasFeedback: false, // 是否已进行过反馈
+    createTime: dayjs().format("YYYY-MM-DD HH:mm:ss"), // 消息发起时间
+    resTime: 0, // 响应总耗时
+    firstPackageTime: 0, // 首包响应耗时
+  },
+]);
 const inputMessage = ref("");
 
-// 当前正在接收的AI消息（用于流式更新）
-const currentAssistantMessage = ref(null);
-const currentAssistantIndex = ref(-1);
+// 反馈弹窗相关
+const feedbackDialogVisible = ref(false);
+const feedbackContent = ref("");
+const feedbackMessageIndex = ref({}); // 当前点击要反馈的message的索引
+
+// 反馈弹窗相关函数处理
+const handleFeedbackAction = async (action, messageIndex) => {
+  switch (action) {
+    // 窗口: 提交(满意)
+    case "satisfied": {
+      const message = messages.value[messageIndex];
+      const params = {
+        userName: userData.username,
+        userContent: message.userContent,
+        aiContent: message.content,
+        type: 1,
+        createTime: message.createTime,
+        resTime: message.resTime,
+        firstPackageTime: message.firstPackageTime,
+      };
+      await stConfig.request.post("/alarm/deliversign/addVarietyAiHelperLog", params);
+      ElMessage.success("感谢您的评价！");
+      messages.value[messageIndex].hasFeedback = true;
+      break;
+    }
+    // 窗口: 打开
+    case "open": {
+      feedbackMessageIndex.value = messageIndex;
+      feedbackDialogVisible.value = true;
+      break;
+    }
+    // 窗口: 提交(不满意)
+    case "unsatisfied": {
+      const message = messages.value[messageIndex];
+      const params = {
+        userName: userData.username,
+        userContent: message.userContent,
+        userSuggestion: feedbackContent.value,
+        aiContent: message.content,
+        type: 2,
+        resTime: message.resTime,
+        createTime: message.createTime,
+        firstPackageTime: message.firstPackageTime
+      };
+      await stConfig.request.post("/alarm/deliversign/addVarietyAiHelperLog", params);
+      ElMessage.success("感谢您的反馈！我们将持续跟踪并进行优化");
+      feedbackDialogVisible.value = false;
+      messages.value[messageIndex].hasFeedback = true;
+      break;
+    }
+    // 自动提交记录跟踪日志
+    case "default": {
+      const message = messages.value[messageIndex];
+      const params = {
+        userName: userData.username,
+        userContent: message.userContent,
+        userSuggestion: feedbackContent.value,
+        aiContent: message.content,
+        type: null,
+        resTime: message.resTime,
+        createTime: message.createTime,
+        firstPackageTime: message.firstPackageTime
+      };
+      await stConfig.request.post("/alarm/deliversign/addVarietyAiHelperLog", params);
+    }
+  }
+};
 
 // 发送消息
 const sendMessage = async () => {
-  // 校验输入内容是否为空
   const content = inputMessage.value.trim();
   if (!content) return ElMessage.warning("请输入消息内容");
-  // 校验是否正在处理消息
   if (isSending.value) return;
 
   // 记录用户消息
   messages.value.push({
     role: "user",
-    time: dayjs().format("HH:mm"),
     content: content,
+    createTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
   });
   inputMessage.value = "";
   await scrollToBottom();
 
-  // 创建一个临时的AI消息占位符
-  const assistantMessage = {
+  // 创建AI消息占位符，记录对应的用户输入
+  messages.value.push({
     role: "assistant",
-    time: dayjs().format("HH:mm"),
     content: "",
-  };
-  messages.value.push(assistantMessage);
-  currentAssistantIndex.value = messages.value.length - 1;
-  currentAssistantMessage.value = assistantMessage;
+    userContent: content,
+    showFeedback: false,
+    hasFeedback: false,
+    createTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
+    resTime: 0,
+    firstPackageTime: 0,
+  });
   await scrollToBottom();
 
-  // 发送请求至百炼应用AI（流式）
   isSending.value = true;
   isThinking.value = true;
-  
+
   let fullResponse = "";
-  
+  let resTime = new Date().getTime();
   try {
     const appId = "9e54d112acfe4531bd1fc4fee8827fef";
     const apiKey = "sk-d995eb26a4334bdeb2ccb4cbfaf51de8";
-    
     await sendToBaiLianAppStreaming({
       appId,
       apiKey,
       value: content,
       callback: (type, data) => {
         if (type === "message") {
-          // 实时更新消息内容
           fullResponse += data;
-          if (currentAssistantMessage.value) {
-            currentAssistantMessage.value.content = fullResponse;
-            // 实时滚动到底部
+          // 直接更新最后一条AI消息
+          const lastMessage = messages.value[messages.value.length - 1];
+          if (lastMessage && lastMessage.role === "assistant") {
+            lastMessage.content = fullResponse;
             scrollToBottom();
           }
+          // 记录首包响应耗时
+          if (lastMessage.firstPackageTime === 0) {
+            lastMessage.firstPackageTime = new Date().getTime() - resTime;
+          }
         } else if (type === "finish") {
-          // 流式传输完成
           isThinking.value = false;
           isSending.value = false;
-          console.log(fullResponse)
+
+          // 显示反馈按钮
+          const lastMessage = messages.value[messages.value.length - 1];
+          if (lastMessage && lastMessage.role === "assistant") {
+            lastMessage.showFeedback = true;
+            lastMessage.resTime = new Date().getTime() - resTime;
+            handleFeedbackAction("default", messages.value.length - 1);
+          }
+
           // 触发回调
           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;
-    }
-    
+    // 移除占位的AI消息
+    messages.value.pop();
     // 添加错误提示消息
     messages.value.push({
       role: "assistant",
-      time: dayjs().format("HH:mm"),
+      userContent: content,
       content: "抱歉，AI服务响应异常，请稍后重试。",
+      showFeedback: true,
+      hasFeedback: false,
+      createTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
+      resTime: new Date().getTime() - resTime,
+      firstPackageTime: 0,
     });
+    handleFeedbackAction("default", messages.value.length - 1);
     await scrollToBottom();
-    
     isSending.value = false;
     isThinking.value = false;
   }
 };
-
 // 滚动到底部
 const scrollToBottom = async () => {
   await nextTick();
@@ -130,14 +207,6 @@ const scrollToBottom = async () => {
   }
 };
 
-onMounted(() => {
-  messages.value.push({
-    role: "assistant",
-    time: dayjs().format("HH:mm"),
-    content: props.defaultMessage,
-  });
-});
-
 watch(
   () => messages.value,
   () => {
@@ -145,11 +214,9 @@ watch(
   },
   { deep: true },
 );
-
 defineExpose({
-  open: (data) => {
+  open: () => {
     visible.value = true;
-    // 自动滚动到底部
     nextTick(() => {
       scrollToBottom();
     });
@@ -170,7 +237,6 @@ defineExpose({
     :modal-penetrable="true"
   >
     <div class="chat-container">
-      <!-- 消息列表 -->
       <div
         ref="messageListRef"
         class="message-list"
@@ -178,26 +244,54 @@ defineExpose({
         <div
           v-for="(message, index) in messages"
           :key="index"
-          class="message-item"
-          :class="message.role"
+          class="message-item-wrapper"
         >
-          <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
+            class="message-item"
+            :class="message.role"
+          >
+            <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-createTime">{{ message.createTime }}</div>
+                <!-- 反馈按钮(仅AI侧展示) -->
+                <template v-if="message.role === 'assistant'">
+                  <template v-if="message.showFeedback && !message.hasFeedback">
+                    <div class="message-createTime">请问对本轮查询结果是否满意?</div>
+                    <div class="feedback-buttons">
+                      <button
+                        class="feedback-btn satisfied-btn"
+                        @click="handleFeedbackAction('satisfied', index)"
+                      >
+                        <span class="btn-emoji">👍</span>
+                        <span class="btn-text">满意</span>
+                      </button>
+                      <button
+                        class="feedback-btn unsatisfied-btn"
+                        @click="handleFeedbackAction('open', index)"
+                      >
+                        <span class="btn-emoji">👎</span>
+                        <span class="btn-text">不满意</span>
+                      </button>
+                    </div>
+                  </template>
+                  <template v-if="message.showFeedback && message.hasFeedback">
+                    <div class="message-createTime">感谢您进行的评价反馈</div>
+                  </template>
+                </template>
+              </div>
+            </template>
+          </div>
         </div>
 
-        <!-- AI 思考状态（仅在未开始接收流式消息时显示） -->
         <div
-          v-if="isThinking && !currentAssistantMessage?.content"
+          v-if="isThinking && !messages[messages.length - 1]?.content"
           class="message-item assistant"
         >
           <div class="avatar">
@@ -215,7 +309,7 @@ defineExpose({
           </div>
         </div>
       </div>
-      <!-- 输入区域 -->
+
       <div class="input-area">
         <el-input
           class="message-input"
@@ -244,9 +338,38 @@ defineExpose({
       </div>
     </div>
   </el-dialog>
+
+  <!-- 窗口: 反馈意见 -->
+  <el-dialog
+    v-model="feedbackDialogVisible"
+    title="📝 反馈意见"
+    width="400px"
+  >
+    <div class="feedback-dialog-content">
+      <div class="feedback-emoji">😟</div>
+      <p class="feedback-tip">很抱歉没能帮到您，请告诉我们哪里需要改进：</p>
+      <el-input
+        v-model="feedbackContent"
+        type="textarea"
+        :rows="4"
+        placeholder="[非必填]例如：回答不够准确、查询结果有误、界面体验不佳..."
+      />
+    </div>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="feedbackDialogVisible = false">取消</el-button>
+        <el-button
+          type="primary"
+          @click="handleFeedbackAction('unsatisfied', feedbackMessageIndex)"
+          >提交反馈</el-button
+        >
+      </span>
+    </template>
+  </el-dialog>
 </template>
 
 <style lang="scss" scoped>
+/* 样式保持不变，和之前一样 */
 .ai-dialog {
   :deep(.el-dialog) {
     border-radius: 24px;
@@ -280,12 +403,14 @@ defineExpose({
     }
   }
 }
+
 .chat-container {
   display: flex;
   flex-direction: column;
-  height: 380px;
+  height: 480px;
   background: transparent;
 }
+
 .message-list {
   flex: 1;
   overflow-y: auto;
@@ -310,9 +435,13 @@ defineExpose({
     }
   }
 }
+
+.message-item-wrapper {
+  margin-bottom: 20px;
+}
+
 .message-item {
   display: flex;
-  margin-bottom: 20px;
   animation: fadeInUp 0.3s ease-out;
 
   &.user {
@@ -332,7 +461,7 @@ defineExpose({
         border-radius: 18px 18px 4px 18px;
       }
 
-      .message-time {
+      .message-createTime {
         text-align: right;
       }
     }
@@ -383,14 +512,80 @@ defineExpose({
       white-space: pre-wrap;
     }
 
-    .message-time {
+    .message-createTime {
       font-size: 11px;
       color: #9ca3af;
       margin-top: 6px;
       padding: 0 4px;
     }
+
+    .feedback-buttons {
+      display: flex;
+      gap: 12px;
+      margin-top: 12px;
+      .feedback-btn {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 4px 10px;
+        border: none;
+        border-radius: 20px;
+        font-size: 13px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        background: rgba(255, 255, 255, 0.9);
+        backdrop-filter: blur(10px);
+
+        .btn-emoji {
+          font-size: 16px;
+          transition: transform 0.2s ease;
+        }
+
+        .btn-text {
+          font-size: 13px;
+        }
+
+        &:hover {
+          transform: translateY(-2px);
+
+          .btn-emoji {
+            transform: scale(1.1);
+          }
+        }
+
+        &:active {
+          transform: translateY(0);
+        }
+      }
+      .satisfied-btn {
+        background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
+        color: #1890ff;
+        border: 1px solid rgba(24, 144, 255, 0.2);
+        box-shadow: 0 2px 8px rgba(24, 144, 255, 0.1);
+
+        &:hover {
+          background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%);
+          border-color: #1890ff;
+          box-shadow: 0 4px 12px rgba(24, 144, 255, 0.2);
+        }
+      }
+      .unsatisfied-btn {
+        background: linear-gradient(135deg, #fff1f0 0%, #ffe7e5 100%);
+        color: #ff4d4f;
+        border: 1px solid rgba(255, 77, 79, 0.2);
+        box-shadow: 0 2px 8px rgba(255, 77, 79, 0.1);
+
+        &:hover {
+          background: linear-gradient(135deg, #ffe7e5 0%, #ffccc7 100%);
+          border-color: #ff4d4f;
+          box-shadow: 0 4px 12px rgba(255, 77, 79, 0.2);
+        }
+      }
+    }
   }
 }
+
 .typing-indicator {
   display: flex;
   gap: 4px;
@@ -416,6 +611,7 @@ defineExpose({
     }
   }
 }
+
 .input-area {
   padding: 16px 24px 24px;
   border-top: 1px solid rgba(102, 126, 234, 0.1);
@@ -478,6 +674,36 @@ defineExpose({
     }
   }
 }
+
+.feedback-dialog-content {
+  text-align: center;
+  padding: 12px 0;
+
+  .feedback-emoji {
+    font-size: 48px;
+    margin-bottom: 16px;
+    animation: shake 0.5s ease-in-out;
+  }
+
+  .feedback-tip {
+    font-size: 14px;
+    color: #666;
+    margin-bottom: 20px;
+    line-height: 1.6;
+  }
+
+  :deep(.el-textarea__inner) {
+    border-radius: 12px;
+    border: 1px solid rgba(102, 126, 234, 0.2);
+    font-size: 14px;
+
+    &:focus {
+      border-color: #667eea;
+      box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+    }
+  }
+}
+
 @keyframes fadeInUp {
   from {
     opacity: 0;
@@ -500,4 +726,16 @@ defineExpose({
     opacity: 1;
   }
 }
-</style>
+@keyframes shake {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(-5px);
+  }
+  75% {
+    transform: translateX(5px);
+  }
+}
+</style>

package/public/aiTools.js

@@ -30,40 +30,80 @@ export const sendToBaiLianAppNonStreaming = async ({ appId, apiKey, value }) =>
 // 流式返回
 export const sendToBaiLianAppStreaming = async ({ appId, apiKey, value, callback }) => {
   try {
-    const res = await fetch(`https://dashscope.aliyuncs.com/api/v1/apps/${appId}/completion`, {
+    const response = await fetch(`https://dashscope.aliyuncs.com/api/v1/apps/${appId}/completion`, {
       method: "POST",
       body: JSON.stringify({
         input: { prompt: value },
-        parameters: {
-          incremental_output: "true", // 流式返回
-        },
+        parameters: { incremental_output: "true" },
         debug: {},
       }),
       headers: {
         Authorization: `Bearer ${apiKey}`,
         "Content-Type": "application/json",
-        "X-DashScope-SSE": "enable", // 流式输出
+        "X-DashScope-SSE": "enable",
       },
     });
-    if (!res.ok || !res.body) throw new Error("请求失败");
-
-    const reader = res.body.getReader();
+    
+    if (!response.ok) throw new Error(`HTTP ${response.status}`);
+    
+    const reader = response.body.getReader();
     const decoder = new TextDecoder();
-
+    let buffer = "";
+    
     while (true) {
       const { done, value } = await reader.read();
-      if (done && callback) {
+      if (done) {
+        // 处理最后可能遗留的数据
+        if (buffer.trim()) {
+          tryProcessBuffer(buffer, 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) {}
+      
+      buffer += decoder.decode(value, { stream: true });
+      
+      let newlineIndex;
+      while ((newlineIndex = buffer.indexOf("\n")) !== -1) {
+        const line = buffer.substring(0, newlineIndex).trim();
+        buffer = buffer.substring(newlineIndex + 1);
+        
+        if (line.startsWith("data:")) {
+          const data = line.substring(5).trim();
+          if (data && data !== "[DONE]") {
+            try {
+              const parsed = JSON.parse(data);
+              const text = parsed?.output?.text;
+              if (text && callback) {
+                callback("message", text);
+              }
+            } catch (e) {
+              // 可能是部分数据，继续等待
+              console.debug("等待完整数据...");
+            }
+          }
+        }
+      }
     }
   } catch (error) {
-    console.error(error);
+    console.error("流式请求失败:", error);
+    callback("error", error.message);
   }
 };
+
+// 辅助函数：处理缓冲区剩余数据
+function tryProcessBuffer(buffer, callback) {
+  const lines = buffer.split("\n");
+  for (const line of lines) {
+    if (line.startsWith("data:")) {
+      const data = line.substring(5).trim();
+      if (data && data !== "[DONE]") {
+        try {
+          const parsed = JSON.parse(data);
+          const text = parsed?.output?.text;
+          if (text && callback) callback("message", text);
+        } catch (e) {}
+      }
+    }
+  }
+}