inl-ui 0.1.3 → 0.1.5

package/dist/components/index.cjs

@@ -11231,18 +11231,152 @@ const SszComment = vue.defineComponent({
 });
 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: /, ""));
+    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"
+    },
+    body: JSON.stringify({
+      query: question,
+      conversation_id: ""
+    })
+  }).then(res => {
+    const stream = res.body;
+    const decoder = new TextDecoder();
+    const reader = stream.getReader();
+    let result = "";
+    function processText() {
+      return reader.read().then(({
+        done,
+        value
+      }) => {
+        if (done) {
+          doneCallback();
+          return;
+        }
+        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",
+      content: "",
+      id: /* @__PURE__ */new Date().getTime(),
+      timestamp: /* @__PURE__ */new Date().getTime(),
+      answers: [{
+        content: "\u4F60\u597D\uFF0C\u6211\u662F\u4F60\u7684\u5DE5\u4F5C\u4F19\u4F34 \u7F8E\u5C0F\u817E! \u6211\u53EF\u4EE5\u8F85\u52A9\u4F60\u5FEB\u901F\u83B7\u53D6\u4FE1\u606F\uFF0C\u76D1\u63A7\u3001\u67E5\u770B\u751F\u4EA7\u6307\u6807\uFF0C\u56DE\u7B54\u60A8\u7684\u9009\u7164\u4E13\u4E1A\u95EE\u9898\uFF0C\u5FEB\u8BD5\u8BD5\u4E0B\u9762\u5BF9\u8BDD\u5427\u3002",
+        timestamp: /* @__PURE__ */new Date().getTime(),
+        hideOperates: true,
+        id: /* @__PURE__ */new Date().getTime()
+      }]
+    };
+    context.value.push(questionItem);
+  }, 1e3);
+  function sendQuestion(question, questionId) {
+    if (answerLoading.value) return;
+    answerLoading.value = true;
+    let questionItem = context.value.find(item => item.id === questionId);
+    question = questionItem?.content || question;
+    if (!questionId) {
+      questionItem = {
+        id: /* @__PURE__ */new Date().getTime(),
+        timestamp: /* @__PURE__ */new Date().getTime(),
+        content: question,
+        answers: []
+      };
+      context.value.push(questionItem);
+    }
+    const answerItem = vue.ref({
+      content: "\u6B63\u5728\u601D\u8003\u4E2D...",
+      timestamp: /* @__PURE__ */new Date().getTime(),
+      parentId: questionItem.id,
+      id: /* @__PURE__ */new Date().getTime()
+    });
+    questionItem.answers.push(answerItem.value);
+    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,
+    abortRequest
+  };
+}
+
 const Input = vue.defineComponent({
   emits: ["send"],
   setup(props, {
     emit,
     expose
   }) {
+    const abortRequest = vue.inject("abortRequest");
+    const loading = vue.inject("answerLoading");
     const value = vue.ref("");
     const isFocus = vue.ref(false);
     const send = () => {
+      if (loading.value) return;
+      if (value.value.length === 0) {
+        antDesignVue.message.warn("\u8BF7\u8F93\u5165\u95EE\u9898");
+        return;
+      }
       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
@@ -11251,14 +11385,26 @@ const Input = vue.defineComponent({
       "class": ["chat-box-input", {
         focus: isFocus.value
       }]
-    }, [vue.createVNode(iconsVue.AudioFilled, null, null), vue.createVNode(vue.resolveComponent("a-input"), {
+    }, [vue.createVNode("img", {
+      "class": "img img-mic",
+      "src": "/micro-assets/largeLanguageModel/mic.png",
+      "alt": "",
+      "onClick": handleMicClick
+    }, null), vue.createVNode(vue.resolveComponent("a-input"), {
       "value": value.value,
       "onUpdate:value": $event => value.value = $event,
       "bordered": false,
       "placeholder": "\u5982: \u67E5\u770BXXX\u76AE\u5E26\u673A\u5934\u7535\u6D41\u7B49",
       "onFocus": () => isFocus.value = true,
-      "onBlur": () => isFocus.value = false
-    }, null), vue.createVNode(iconsVue.SendOutlined, {
+      "onBlur": () => isFocus.value = false,
+      "onPressEnter": send
+    }, null), loading.value ? vue.createVNode(iconsVue.BorderOutlined, {
+      "class": "btn-abord",
+      "title": "\u4E2D\u6B62\u56DE\u7B54",
+      "onClick": handleAbord
+    }, null) : vue.createVNode("img", {
+      "class": "img img-send",
+      "src": "/micro-assets/largeLanguageModel/send.png",
       "onClick": send
     }, null)]);
   }
@@ -11266,15 +11412,19 @@ const Input = vue.defineComponent({
 
 const tips = ["\u8BBE\u5907\u5DE5\u4F5C\u539F\u7406", "\u8BBE\u5907\u7EF4\u4FDD\u624B\u518C"];
 const Bottom = vue.defineComponent({
-  setup() {
+  emits: ["send"],
+  setup(props, {
+    emit
+  }) {
     const inputRef = vue.ref();
     const handleSend = msg => {
       inputRef.value.clear();
+      emit("send", msg);
     };
     return () => {
       const tipsDom = tips.map(tip => vue.createVNode("div", {
         "class": "tip",
-        "onClick": () => handleSend()
+        "onClick": () => handleSend(tip)
       }, [tip]));
       return vue.createVNode("div", {
         "class": "bottom"
@@ -11319,12 +11469,40 @@ const Avatar = vue.defineComponent({
   }
 });
 
-const styleDark = `
-  <style>
-    :host > p {
-      margin: 0;
+const QuestionBubble = vue.defineComponent({
+  props: {
+    content: {
+      type: String,
+      default: ""
     }
+  },
+  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": avatar,
+      "name": name
+    }, null), vue.createVNode("div", {
+      "class": "bubble question"
+    }, [props.content]), vue.createVNode("div", {
+      "class": "operates"
+    }, null)]);
+  }
+});
 
+const commonStyle = `
+  :host > p {
+    margin: 0;
+  }
+`;
+const styleDark = `
+  <style>
+    ${commonStyle}
+  
     * {
       color: #fff;
     }
@@ -11335,6 +11513,8 @@ const styleDark = `
 `;
 const styleLight = `
   <style>
+    ${commonStyle}
+
     * {
       color: #20242B;
     }
@@ -11346,25 +11526,26 @@ 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", "regenerate"],
+  props: {
+    content: {
+      type: Array,
+      default: () => []
+    }
+  },
   setup(props, {
     emit
   }) {
     const chatTheme = vue.inject("chat-theme");
+    const {
+      copy
+    } = core.useClipboard({
+      legacy: true
+    });
     const bubbleRef = vue.ref();
+    const activeAnswerIndex = vue.ref(0);
+    const activeAnswer = vue.computed(() => props.content[activeAnswerIndex.value]);
     let shadowRoot;
-    const mdText = vue.ref(`\u4ECA\u5929\u7684\u7CBE\u7164\u4EA7\u91CF**18830.0**\u5428\uFF0C\u672B\u7164\u4EA7\u91CF**15900.0**\u5428\uFF0C\u7164\u6CE5**539.0**\u5428
-      
-#### \u4F60\u597D\u554A
-
-1. \u4F60\u597D\u554A
-
-2. \u4E09\u5929\u4E4B\u5185\u6740\u4E86\u4F60
-
-3. \u4F60\u662F\u771F\u6CA1\u89C1\u8FC7\u9ED1\u793E\u4F1A\u554A
-
-4. \u6562\u4E0D\u6562\u8DDF\u6211\u6BD4\u5212\u6BD4\u5212
-
-5. \u8BA9\u4F60\u89C1\u8BC6\u89C1\u8BC6\u4EC0\u4E48\u53EB\u9ED1\u624B`);
     const trasformMd = mdString => {
       return marked.marked(mdString);
     };
@@ -11372,49 +11553,199 @@ const AnswerBubble = vue.defineComponent({
       shadowRoot = bubbleRef.value.attachShadow({
         mode: "open"
       });
+      renderText();
+    });
+    const renderText = () => {
+      if (!shadowRoot) return;
+      vue.nextTick(() => {
+        emit("render", activeAnswer.value.content);
+      });
       const themeStyle = chatTheme === "dark" ? styleDark : styleLight;
       const html = `
-          ${trasformMd(mdText.value)}
+          ${trasformMd(activeAnswer.value.content)}
 
           ${themeStyle}
       `;
       shadowRoot.innerHTML = html;
+    };
+    vue.watch([activeAnswer, activeAnswerIndex], renderText, {
+      deep: true
     });
+    const switchAnswer = step => {
+      activeAnswerIndex.value += step;
+    };
+    const operateList = vue.reactive([{
+      title: "\u590D\u5236",
+      key: "copy",
+      isActive: false
+    }, {
+      title: "\u6709\u7528",
+      key: "like",
+      isActive: vue.computed(() => activeAnswer.value.isLike)
+    }, {
+      title: "\u65E0\u7528",
+      key: "dislike",
+      isActive: vue.computed(() => activeAnswer.value.isDislike)
+    }, {
+      title: "\u8BC4\u8BBA",
+      key: "comment",
+      isActive: false
+    }, {
+      title: "\u91CD\u65B0\u751F\u6210",
+      key: "regenerate",
+      isActive: false
+    }, {
+      ttile: "\u5220\u9664",
+      key: "delete",
+      isActive: false
+    }]);
+    const handleOperate = key => {
+      switch (key) {
+        case "like":
+          if (!activeAnswer.value.isDislike && !activeAnswer.value.isDislike) {
+            activeAnswer.value.isLike = !activeAnswer.value.isLike;
+          }
+          break;
+        case "dislike":
+          if (!activeAnswer.value.isLike && !activeAnswer.value.isDislike) {
+            activeAnswer.value.isDislike = !activeAnswer.value.isDislike;
+          }
+          break;
+        case "copy":
+          copy(activeAnswer.value.content);
+          antDesignVue.message.success("\u590D\u5236\u6210\u529F");
+          break;
+        case "delete":
+          antDesignVue.Modal.confirm({
+            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 () => {
-      const suggestionListDom = suggestionList.map(item => vue.createVNode("div", {
+      suggestionList.map(item => vue.createVNode("div", {
         "class": "suggestion-item",
         "onClick": () => emit("send", item)
       }, [item]));
+      const showOperates = !activeAnswer.value.hideOperates && activeAnswer.value.loadEnd;
+      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 operate-nav"
+      }, [vue.createVNode("span", {
+        "class": ["nav", {
+          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", {
+          disabled: nextDisabled
+        }],
+        "onClick": () => switchAnswer(1)
+      }, [">"])]);
       return vue.createVNode("div", {
         "class": "answer-bubble chat-bubble"
       }, [vue.createVNode(Avatar, {
-        "avatar": "",
+        "avatar": "/micro-assets/largeLanguageModel/robot-avatar.png",
         "name": "\u7F8E\u5C0F\u817E"
       }, null), vue.createVNode("div", {
         "ref": bubbleRef,
         "class": "bubble answer"
       }, null), vue.createVNode("div", {
         "class": "operates"
-      }, null), vue.createVNode("div", {
-        "class": "suggestion-list"
-      }, [suggestionListDom])]);
+      }, [props.content.length > 1 && answerNav, showOperates && operateDom])]);
     };
   }
 });
 
-const QuestionBubble = vue.defineComponent({
-  setup() {
-    return () => vue.createVNode("div", {
-      "class": "question-bubble chat-bubble"
-    }, [vue.createVNode(Avatar, {
-      "reverse": true,
-      "avatar": "",
-      "name": "\u5F20\u660E\u5FD7"
-    }, null), vue.createVNode("div", {
-      "class": "bubble question"
-    }, ["\u6562\u4E0D\u6562\u8DDF\u6211\u6BD4\u5212\u6BD4\u5212"]), vue.createVNode("div", {
-      "class": "operates"
-    }, null)]);
+const QaContext = vue.defineComponent({
+  emits: ["regenerate"],
+  props: {
+    list: {
+      type: Array,
+      default: () => []
+    }
+  },
+  setup(props, {
+    emit
+  }) {
+    const containerRef = vue.ref();
+    const onAnswerRender = text => {
+      containerRef.value.scrollTo({
+        top: containerRef.value.scrollHeight,
+        behavior: "smooth"
+      });
+    };
+    const handleDeleteAnswer = (questionId, answerId) => {
+      const question = props.list.find(item => item.id === questionId);
+      if (question) {
+        question.answers = question.answers.filter(item => item.id !== answerId);
+      }
+    };
+    return () => {
+      const contextList = [];
+      for (let i = 0; i < props.list.length; i++) {
+        const questionItem = props.list[i];
+        const prevItem = props.list[i - 1];
+        const currentTime = questionItem.timestamp;
+        let timeDiff = 0;
+        if (prevItem) {
+          const prevTime = prevItem.timestamp;
+          timeDiff = currentTime - prevTime;
+        }
+        if (!prevItem || timeDiff > 1e3 * 60 * 5) {
+          contextList.push(vue.createVNode("div", {
+            "class": "time-line"
+          }, [dayjs__default["default"](currentTime).format("MM/DD HH:mm")]));
+        }
+        if (questionItem.content) {
+          contextList.push(vue.createVNode(QuestionBubble, {
+            "content": questionItem.content
+          }, null));
+        }
+        if (questionItem.answers.length > 0) {
+          contextList.push(vue.createVNode(AnswerBubble, {
+            "onRender": onAnswerRender,
+            "content": questionItem.answers,
+            "onDelete": answerId => handleDeleteAnswer(questionItem.id, answerId),
+            "onRegenerate": () => emit("regenerate", questionItem.id)
+          }, null));
+        }
+      }
+      return vue.createVNode("div", {
+        "class": "qa-context",
+        "ref": containerRef
+      }, [contextList]);
+    };
   }
 });
 
@@ -11434,11 +11765,26 @@ const ChatBox = vue.defineComponent({
     emit
   }) {
     vue.provide("chat-theme", props.theme);
-    vue.ref();
+    const {
+      context,
+      answerLoading,
+      sendQuestion,
+      abortRequest
+    } = useQA();
+    vue.provide("answerLoading", answerLoading);
+    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(AnswerBubble, null, null), vue.createVNode(QuestionBubble, null, null), vue.createVNode(Bottom, null, null)]);
+      }, [vue.createVNode(QaContext, {
+        "list": context.value,
+        "onRegenerate": qId => handleSend("", qId)
+      }, null), vue.createVNode(Bottom, {
+        "onSend": handleSend
+      }, null)]);
     };
   }
 });