inl-ui 0.1.4 → 0.1.6

package/dist/components/index.cjs

@@ -11234,13 +11234,16 @@ var index = installComponent(SszComment, "ssz-comment");
 function formatDataString(str) {
   const lines = str.split("\n");
   const result = lines.filter(line => !!line.trim()).map(line => {
-    const data = JSON.parse(line.replace("data: ", ""));
+    const data = JSON.parse(line.replace(/^data: /, ""));
     return data.text;
   }).filter(line => line !== void 0).join("");
   return result;
 }
 function request(question, streamCallback, doneCallback) {
+  const controller = new AbortController();
+  const signal = controller.signal;
   fetch("/mt_cpp_gpt/chat", {
+    signal,
     method: "POST",
     headers: {
       "Content-Type": "application/json"
@@ -11249,7 +11252,8 @@ function request(question, streamCallback, doneCallback) {
       query: question,
       conversation_id: ""
     })
-  }).then(res => res.body).then(stream => {
+  }).then(res => {
+    const stream = res.body;
     const decoder = new TextDecoder();
     const reader = stream.getReader();
     let result = "";
@@ -11262,22 +11266,32 @@ function request(question, streamCallback, doneCallback) {
           doneCallback();
           return;
         }
-        const dataString = decoder.decode(value, {
-          stream: true
-        });
-        const str = formatDataString(dataString);
-        result += str;
-        streamCallback(result);
+        try {
+          const dataString = decoder.decode(value, {
+            stream: true
+          });
+          const str = formatDataString(dataString);
+          result += str;
+          streamCallback(result);
+        } catch (e) {}
         return processText();
+      }).catch(() => {
+        doneCallback();
       });
     }
     return processText();
+  }).catch(() => {
+    doneCallback();
   });
+  return function stop() {
+    controller.abort();
+  };
 }
 function useQA() {
   const context = vue.ref([]);
   const answerLoading = vue.ref(false);
   const answer = vue.ref("");
+  let abort = null;
   setTimeout(() => {
     const questionItem = {
       type: "answer",
@@ -11314,19 +11328,27 @@ function useQA() {
       id: /* @__PURE__ */new Date().getTime()
     });
     questionItem.answers.push(answerItem.value);
-    request(question, data => {
+    abort = request(question, data => {
       answer.value = data;
       answerItem.value.content = data;
     }, () => {
       answerLoading.value = false;
       answerItem.value.loadEnd = true;
+      abort = null;
     });
   }
+  function abortRequest() {
+    if (abort) {
+      abort();
+      abort = null;
+    }
+  }
   return {
     context,
     answerLoading,
     answer,
-    sendQuestion
+    sendQuestion,
+    abortRequest
   };
 }
 
@@ -11336,9 +11358,10 @@ const Input = vue.defineComponent({
     emit,
     expose
   }) {
+    const abortRequest = vue.inject("abortRequest");
+    const loading = vue.inject("answerLoading");
     const value = vue.ref("");
     const isFocus = vue.ref(false);
-    const loading = vue.inject("answerLoading");
     const send = () => {
       if (loading.value) return;
       if (value.value.length === 0) {
@@ -11348,6 +11371,12 @@ const Input = vue.defineComponent({
       emit("send", value.value);
       value.value = "";
     };
+    const handleAbord = () => {
+      abortRequest();
+    };
+    const handleMicClick = () => {
+      antDesignVue.message.info("\u6682\u4E0D\u652F\u6301\u8BED\u97F3\u8F93\u5165");
+    };
     const clear = () => value.value = "";
     expose({
       clear
@@ -11359,7 +11388,8 @@ const Input = vue.defineComponent({
     }, [vue.createVNode("img", {
       "class": "img img-mic",
       "src": "/micro-assets/largeLanguageModel/mic.png",
-      "alt": ""
+      "alt": "",
+      "onClick": handleMicClick
     }, null), vue.createVNode(vue.resolveComponent("a-input"), {
       "value": value.value,
       "onUpdate:value": $event => value.value = $event,
@@ -11368,9 +11398,11 @@ const Input = vue.defineComponent({
       "onFocus": () => isFocus.value = true,
       "onBlur": () => isFocus.value = false,
       "onPressEnter": send
-    }, null), loading.value ? vue.createVNode(iconsVue.BorderOutlined, {
-      "class": "btn-abord",
-      "title": "\u4E2D\u6B62\u56DE\u7B54"
+    }, null), loading.value ? vue.createVNode("img", {
+      "class": "btn-abort",
+      "title": "\u4E2D\u6B62\u56DE\u7B54",
+      "src": "/micro-assets/largeLanguageModel/btn-abort.png",
+      "onClick": handleAbord
     }, null) : vue.createVNode("img", {
       "class": "img img-send",
       "src": "/micro-assets/largeLanguageModel/send.png",
@@ -11446,12 +11478,15 @@ const QuestionBubble = vue.defineComponent({
     }
   },
   setup(props) {
+    const userinfo = JSON.parse(sessionStorage.getItem("userinfo") || "{}");
+    const avatar = userinfo.photo || "/micro-assets/platform_app/avatar.png";
+    const name = userinfo.employeeName || userinfo.userName || "\u7528\u6237";
     return () => vue.createVNode("div", {
       "class": "question-bubble chat-bubble"
     }, [vue.createVNode(Avatar, {
       "reverse": true,
-      "avatar": "/micro-assets/platform_app/avatar.png",
-      "name": "\u5F20\u660E\u5FD7"
+      "avatar": avatar,
+      "name": name
     }, null), vue.createVNode("div", {
       "class": "bubble question"
     }, [props.content]), vue.createVNode("div", {
@@ -11460,12 +11495,18 @@ const QuestionBubble = vue.defineComponent({
   }
 });
 
+const commonStyle = `
+  :host > p {
+    margin: 0;
+  }
+  :host {
+    font-size: 14px;
+  }
+`;
 const styleDark = `
   <style>
-    :host > p {
-      margin: 0;
-    }
-
+    ${commonStyle}
+  
     * {
       color: #fff;
     }
@@ -11476,6 +11517,8 @@ const styleDark = `
 `;
 const styleLight = `
   <style>
+    ${commonStyle}
+
     * {
       color: #20242B;
     }
@@ -11487,7 +11530,7 @@ const styleLight = `
 
 const suggestionList = ["\u7F8E\u5C0F\u817E\u80FD\u5E2E\u6211\u505A\u4EC0\u4E48\uFF1F", "\u8FD1\u4E00\u4E2A\u6708\u7684\u4ECB\u8017\u60C5\u51B5\u5982\u4F55\uFF1F", "\u5C3E\u77FF\u8DD1\u7C97\u7684\u6392\u67E5\u5904\u7406\u65B9\u6CD5\u6709\u54EA\u4E9B\uFF1F\u5C3E\u77FF\u8DD1\u7C97\u7684\u6392\u67E5\u5904\u7406\u65B9\u6CD5\u6709\u54EA\u4E9B\u5C3E\u77FF\u8DD1\u7C97\u7684\u6392\u67E5\u5904\u7406\u65B9\u6CD5\u6709\u54EA\u4E9B\u5C3E\u77FF\u8DD1\u7C97\u7684\u6392\u67E5\u5904\u7406\u65B9\u6CD5\u6709\u54EA\u4E9B"];
 const AnswerBubble = vue.defineComponent({
-  emits: ["send", "render", "delete"],
+  emits: ["send", "render", "delete", "regenerate"],
   props: {
     content: {
       type: Array,
@@ -11518,7 +11561,9 @@ const AnswerBubble = vue.defineComponent({
     });
     const renderText = () => {
       if (!shadowRoot) return;
-      emit("render", activeAnswer.value.content);
+      vue.nextTick(() => {
+        emit("render", activeAnswer.value.content);
+      });
       const themeStyle = chatTheme === "dark" ? styleDark : styleLight;
       const html = `
           ${trasformMd(activeAnswer.value.content)}
@@ -11527,9 +11572,12 @@ const AnswerBubble = vue.defineComponent({
       `;
       shadowRoot.innerHTML = html;
     };
-    vue.watch([() => props.content, activeAnswerIndex], renderText, {
+    vue.watch([activeAnswer, activeAnswerIndex], renderText, {
       deep: true
     });
+    const switchAnswer = step => {
+      activeAnswerIndex.value += step;
+    };
     const operateList = vue.reactive([{
       title: "\u590D\u5236",
       key: "copy",
@@ -11558,7 +11606,7 @@ const AnswerBubble = vue.defineComponent({
     const handleOperate = key => {
       switch (key) {
         case "like":
-          if (!activeAnswer.value.isDislike && !activeAnswer.value.isDislike) {
+          if (!activeAnswer.value.isLike && !activeAnswer.value.isDislike) {
             activeAnswer.value.isLike = !activeAnswer.value.isLike;
           }
           break;
@@ -11576,12 +11624,25 @@ const AnswerBubble = vue.defineComponent({
             title: "\u786E\u5B9A\u5220\u9664\u8FD9\u4E2A\u56DE\u7B54\u5417\uFF1F",
             onOk: () => {
               emit("delete", activeAnswer.value.id);
+              if (activeAnswerIndex.value > 0 && activeAnswerIndex.value === props.content.length - 1) {
+                activeAnswerIndex.value--;
+              }
             }
           });
           break;
         case "comment":
           antDesignVue.message.info("\u6682\u672A\u5F00\u653E");
           break;
+        case "regenerate":
+          if (props.content.length >= 5) {
+            antDesignVue.message.info("\u6700\u591A\u652F\u6301\u751F\u62105\u6761\u56DE\u7B54");
+            return;
+          }
+          emit("regenerate", activeAnswer.value.id);
+          vue.nextTick(() => {
+            activeAnswerIndex.value = props.content.length - 1;
+          });
+          break;
       }
     };
     return () => {
@@ -11590,30 +11651,30 @@ const AnswerBubble = vue.defineComponent({
         "onClick": () => emit("send", item)
       }, [item]));
       const showOperates = !activeAnswer.value.hideOperates && activeAnswer.value.loadEnd;
-      const operateDom = operateList.map(item => {
-        return vue.createVNode(vue.resolveComponent("a-tooltip"), {
-          "title": item.title
-        }, {
-          default: () => [vue.createVNode("div", {
-            "class": ["operate-item", item.key, {
-              active: item.isActive
-            }],
-            "onClick": () => handleOperate(item.key)
-          }, null)]
-        });
-      });
+      const operateDom = operateList.map(item => vue.createVNode(vue.resolveComponent("a-tooltip"), {
+        "title": item.title
+      }, {
+        default: () => [vue.createVNode("div", {
+          "class": ["operate-item", item.key, {
+            active: item.isActive
+          }],
+          "onClick": () => handleOperate(item.key)
+        }, null)]
+      }));
       const prevDisabled = activeAnswerIndex.value === 0;
       const nextDisabled = activeAnswerIndex.value === props.content.length - 1;
       const answerNav = vue.createVNode("div", {
-        "class": "operate-item"
+        "class": "operate-item operate-nav"
       }, [vue.createVNode("span", {
         "class": ["nav", {
-          disalbed: prevDisabled
-        }]
-      }, ["<"]), activeAnswerIndex.value + 1, "/ ", props.content.length, vue.createVNode("span", {
+          disabled: prevDisabled
+        }],
+        "onClick": () => switchAnswer(-1)
+      }, ["<"]), vue.createVNode("span", null, [activeAnswerIndex.value + 1]), " ", vue.createVNode("span", null, [vue.createTextVNode("/")]), vue.createVNode("span", null, [props.content.length]), vue.createVNode("span", {
         "class": ["nav", {
-          disalbed: nextDisabled
-        }]
+          disabled: nextDisabled
+        }],
+        "onClick": () => switchAnswer(1)
       }, [">"])]);
       return vue.createVNode("div", {
         "class": "answer-bubble chat-bubble"
@@ -11623,21 +11684,24 @@ const AnswerBubble = vue.defineComponent({
       }, null), vue.createVNode("div", {
         "ref": bubbleRef,
         "class": "bubble answer"
-      }, null), showOperates && vue.createVNode("div", {
+      }, null), vue.createVNode("div", {
         "class": "operates"
-      }, [props.content.length > 1 && answerNav, operateDom])]);
+      }, [props.content.length > 1 && answerNav, showOperates && operateDom])]);
     };
   }
 });
 
 const QaContext = vue.defineComponent({
+  emits: ["regenerate"],
   props: {
     list: {
       type: Array,
       default: () => []
     }
   },
-  setup(props) {
+  setup(props, {
+    emit
+  }) {
     const containerRef = vue.ref();
     const onAnswerRender = text => {
       containerRef.value.scrollTo({
@@ -11676,7 +11740,8 @@ const QaContext = vue.defineComponent({
           contextList.push(vue.createVNode(AnswerBubble, {
             "onRender": onAnswerRender,
             "content": questionItem.answers,
-            "onDelete": answerId => handleDeleteAnswer(questionItem.id, answerId)
+            "onDelete": answerId => handleDeleteAnswer(questionItem.id, answerId),
+            "onRegenerate": () => emit("regenerate", questionItem.id)
           }, null));
         }
       }
@@ -11708,17 +11773,19 @@ const ChatBox = vue.defineComponent({
       context,
       answerLoading,
       sendQuestion,
-      answer
+      abortRequest
     } = useQA();
     vue.provide("answerLoading", answerLoading);
-    const handleSend = msg => {
-      sendQuestion(msg);
+    vue.provide("abortRequest", abortRequest);
+    const handleSend = (msg, questionId) => {
+      sendQuestion(msg, questionId);
     };
     return () => {
       return vue.createVNode("div", {
         "class": ["inl-chat-box", `inl-chat-box-${props.theme}`]
       }, [vue.createVNode(QaContext, {
-        "list": context.value
+        "list": context.value,
+        "onRegenerate": qId => handleSend("", qId)
       }, null), vue.createVNode(Bottom, {
         "onSend": handleSend
       }, null)]);