inl-ui 0.1.3 → 0.1.4

package/dist/components/index.js

@@ -1,5 +1,5 @@
 import { defineComponent, createVNode, ref, watch, resolveComponent, isVNode, inject, computed, onActivated, onDeactivated, onBeforeUnmount, nextTick, Fragment, withDirectives, vShow, toRaw, reactive, provide, watchEffect, createTextVNode, onMounted, KeepAlive, shallowRef, onBeforeMount, mergeProps, onBeforeUpdate } from 'vue';
-import { createFromIconfontCN, SearchOutlined, DownOutlined, PoweroffOutlined, MenuUnfoldOutlined, MenuFoldOutlined, SkinFilled, FullscreenOutlined, CaretUpOutlined, CaretRightOutlined, CaretDownOutlined, FileExcelTwoTone, InboxOutlined, MessageOutlined, AudioFilled, SendOutlined } from '@ant-design/icons-vue';
+import { createFromIconfontCN, SearchOutlined, DownOutlined, PoweroffOutlined, MenuUnfoldOutlined, MenuFoldOutlined, SkinFilled, FullscreenOutlined, CaretUpOutlined, CaretRightOutlined, CaretDownOutlined, FileExcelTwoTone, InboxOutlined, MessageOutlined, BorderOutlined } from '@ant-design/icons-vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useMounted, resolveRef, useThrottleFn, useVModel, useMagicKeys, whenever, watchArray, useEventListener, useSessionStorage, useFullscreen, useLocalStorage, useToggle, useElementBounding, useMemory, useWindowSize, useClipboard, useBreakpoints, breakpointsAntDesign } from '@vueuse/core';
 import axios from 'axios';
@@ -11221,6 +11221,105 @@ const SszComment = 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) {
+  fetch("/mt_cpp_gpt/chat", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify({
+      query: question,
+      conversation_id: ""
+    })
+  }).then(res => res.body).then(stream => {
+    const decoder = new TextDecoder();
+    const reader = stream.getReader();
+    let result = "";
+    function processText() {
+      return reader.read().then(({
+        done,
+        value
+      }) => {
+        if (done) {
+          doneCallback();
+          return;
+        }
+        const dataString = decoder.decode(value, {
+          stream: true
+        });
+        const str = formatDataString(dataString);
+        result += str;
+        streamCallback(result);
+        return processText();
+      });
+    }
+    return processText();
+  });
+}
+function useQA() {
+  const context = ref([]);
+  const answerLoading = ref(false);
+  const answer = ref("");
+  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 = 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);
+    request(question, data => {
+      answer.value = data;
+      answerItem.value.content = data;
+    }, () => {
+      answerLoading.value = false;
+      answerItem.value.loadEnd = true;
+    });
+  }
+  return {
+    context,
+    answerLoading,
+    answer,
+    sendQuestion
+  };
+}
+
 const Input = defineComponent({
   emits: ["send"],
   setup(props, {
@@ -11229,7 +11328,13 @@ const Input = defineComponent({
   }) {
     const value = ref("");
     const isFocus = ref(false);
+    const loading = inject("answerLoading");
     const send = () => {
+      if (loading.value) return;
+      if (value.value.length === 0) {
+        message.warn("\u8BF7\u8F93\u5165\u95EE\u9898");
+        return;
+      }
       emit("send", value.value);
       value.value = "";
     };
@@ -11241,14 +11346,24 @@ const Input = defineComponent({
       "class": ["chat-box-input", {
         focus: isFocus.value
       }]
-    }, [createVNode(AudioFilled, null, null), createVNode(resolveComponent("a-input"), {
+    }, [createVNode("img", {
+      "class": "img img-mic",
+      "src": "/micro-assets/largeLanguageModel/mic.png",
+      "alt": ""
+    }, null), createVNode(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), createVNode(SendOutlined, {
+      "onBlur": () => isFocus.value = false,
+      "onPressEnter": send
+    }, null), loading.value ? createVNode(BorderOutlined, {
+      "class": "btn-abord",
+      "title": "\u4E2D\u6B62\u56DE\u7B54"
+    }, null) : createVNode("img", {
+      "class": "img img-send",
+      "src": "/micro-assets/largeLanguageModel/send.png",
       "onClick": send
     }, null)]);
   }
@@ -11256,15 +11371,19 @@ const Input = defineComponent({
 
 const tips = ["\u8BBE\u5907\u5DE5\u4F5C\u539F\u7406", "\u8BBE\u5907\u7EF4\u4FDD\u624B\u518C"];
 const Bottom = defineComponent({
-  setup() {
+  emits: ["send"],
+  setup(props, {
+    emit
+  }) {
     const inputRef = ref();
     const handleSend = msg => {
       inputRef.value.clear();
+      emit("send", msg);
     };
     return () => {
       const tipsDom = tips.map(tip => createVNode("div", {
         "class": "tip",
-        "onClick": () => handleSend()
+        "onClick": () => handleSend(tip)
       }, [tip]));
       return createVNode("div", {
         "class": "bottom"
@@ -11309,6 +11428,28 @@ const Avatar = defineComponent({
   }
 });
 
+const QuestionBubble = defineComponent({
+  props: {
+    content: {
+      type: String,
+      default: ""
+    }
+  },
+  setup(props) {
+    return () => createVNode("div", {
+      "class": "question-bubble chat-bubble"
+    }, [createVNode(Avatar, {
+      "reverse": true,
+      "avatar": "/micro-assets/platform_app/avatar.png",
+      "name": "\u5F20\u660E\u5FD7"
+    }, null), createVNode("div", {
+      "class": "bubble question"
+    }, [props.content]), createVNode("div", {
+      "class": "operates"
+    }, null)]);
+  }
+});
+
 const styleDark = `
   <style>
     :host > p {
@@ -11336,25 +11477,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 = defineComponent({
+  emits: ["send", "render", "delete"],
+  props: {
+    content: {
+      type: Array,
+      default: () => []
+    }
+  },
   setup(props, {
     emit
   }) {
     const chatTheme = inject("chat-theme");
+    const {
+      copy
+    } = useClipboard({
+      legacy: true
+    });
     const bubbleRef = ref();
+    const activeAnswerIndex = ref(0);
+    const activeAnswer = computed(() => props.content[activeAnswerIndex.value]);
     let shadowRoot;
-    const mdText = 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(mdString);
     };
@@ -11362,49 +11504,177 @@ const AnswerBubble = defineComponent({
       shadowRoot = bubbleRef.value.attachShadow({
         mode: "open"
       });
+      renderText();
+    });
+    const renderText = () => {
+      if (!shadowRoot) return;
+      emit("render", activeAnswer.value.content);
       const themeStyle = chatTheme === "dark" ? styleDark : styleLight;
       const html = `
-          ${trasformMd(mdText.value)}
+          ${trasformMd(activeAnswer.value.content)}
 
           ${themeStyle}
       `;
       shadowRoot.innerHTML = html;
+    };
+    watch([() => props.content, activeAnswerIndex], renderText, {
+      deep: true
     });
+    const operateList = reactive([{
+      title: "\u590D\u5236",
+      key: "copy",
+      isActive: false
+    }, {
+      title: "\u6709\u7528",
+      key: "like",
+      isActive: computed(() => activeAnswer.value.isLike)
+    }, {
+      title: "\u65E0\u7528",
+      key: "dislike",
+      isActive: 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);
+          message.success("\u590D\u5236\u6210\u529F");
+          break;
+        case "delete":
+          Modal.confirm({
+            title: "\u786E\u5B9A\u5220\u9664\u8FD9\u4E2A\u56DE\u7B54\u5417\uFF1F",
+            onOk: () => {
+              emit("delete", activeAnswer.value.id);
+            }
+          });
+          break;
+        case "comment":
+          message.info("\u6682\u672A\u5F00\u653E");
+          break;
+      }
+    };
     return () => {
-      const suggestionListDom = suggestionList.map(item => createVNode("div", {
+      suggestionList.map(item => createVNode("div", {
         "class": "suggestion-item",
         "onClick": () => emit("send", item)
       }, [item]));
+      const showOperates = !activeAnswer.value.hideOperates && activeAnswer.value.loadEnd;
+      const operateDom = operateList.map(item => {
+        return createVNode(resolveComponent("a-tooltip"), {
+          "title": item.title
+        }, {
+          default: () => [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 = createVNode("div", {
+        "class": "operate-item"
+      }, [createVNode("span", {
+        "class": ["nav", {
+          disalbed: prevDisabled
+        }]
+      }, ["<"]), activeAnswerIndex.value + 1, "/ ", props.content.length, createVNode("span", {
+        "class": ["nav", {
+          disalbed: nextDisabled
+        }]
+      }, [">"])]);
       return createVNode("div", {
         "class": "answer-bubble chat-bubble"
       }, [createVNode(Avatar, {
-        "avatar": "",
+        "avatar": "/micro-assets/largeLanguageModel/robot-avatar.png",
         "name": "\u7F8E\u5C0F\u817E"
       }, null), createVNode("div", {
         "ref": bubbleRef,
         "class": "bubble answer"
-      }, null), createVNode("div", {
+      }, null), showOperates && createVNode("div", {
         "class": "operates"
-      }, null), createVNode("div", {
-        "class": "suggestion-list"
-      }, [suggestionListDom])]);
+      }, [props.content.length > 1 && answerNav, operateDom])]);
     };
   }
 });
 
-const QuestionBubble = defineComponent({
-  setup() {
-    return () => createVNode("div", {
-      "class": "question-bubble chat-bubble"
-    }, [createVNode(Avatar, {
-      "reverse": true,
-      "avatar": "",
-      "name": "\u5F20\u660E\u5FD7"
-    }, null), createVNode("div", {
-      "class": "bubble question"
-    }, ["\u6562\u4E0D\u6562\u8DDF\u6211\u6BD4\u5212\u6BD4\u5212"]), createVNode("div", {
-      "class": "operates"
-    }, null)]);
+const QaContext = defineComponent({
+  props: {
+    list: {
+      type: Array,
+      default: () => []
+    }
+  },
+  setup(props) {
+    const containerRef = 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(createVNode("div", {
+            "class": "time-line"
+          }, [dayjs(currentTime).format("MM/DD HH:mm")]));
+        }
+        if (questionItem.content) {
+          contextList.push(createVNode(QuestionBubble, {
+            "content": questionItem.content
+          }, null));
+        }
+        if (questionItem.answers.length > 0) {
+          contextList.push(createVNode(AnswerBubble, {
+            "onRender": onAnswerRender,
+            "content": questionItem.answers,
+            "onDelete": answerId => handleDeleteAnswer(questionItem.id, answerId)
+          }, null));
+        }
+      }
+      return createVNode("div", {
+        "class": "qa-context",
+        "ref": containerRef
+      }, [contextList]);
+    };
   }
 });
 
@@ -11424,11 +11694,24 @@ const ChatBox = defineComponent({
     emit
   }) {
     provide("chat-theme", props.theme);
-    ref();
+    const {
+      context,
+      answerLoading,
+      sendQuestion,
+      answer
+    } = useQA();
+    provide("answerLoading", answerLoading);
+    const handleSend = msg => {
+      sendQuestion(msg);
+    };
     return () => {
       return createVNode("div", {
         "class": ["inl-chat-box", `inl-chat-box-${props.theme}`]
-      }, [createVNode(AnswerBubble, null, null), createVNode(QuestionBubble, null, null), createVNode(Bottom, null, null)]);
+      }, [createVNode(QaContext, {
+        "list": context.value
+      }, null), createVNode(Bottom, {
+        "onSend": handleSend
+      }, null)]);
     };
   }
 });