@ibiz-template/vue3-components 0.7.41-alpha.40 → 0.7.41-alpha.42

package/lib/util/inline-ai-util/inline-ai-textarea/inline-ai-textarea.cjs

@@ -17,6 +17,10 @@ const InlineAITextArea = /* @__PURE__ */ vue.defineComponent({
       type: Object,
       required: true
     },
+    editorParams: {
+      type: Object,
+      required: true
+    },
     data: {
       type: Object,
       required: true
@@ -55,21 +59,28 @@ const InlineAITextArea = /* @__PURE__ */ vue.defineComponent({
     const containerRef = vue.ref();
     const actionsRef = vue.ref();
     const textareaRef = vue.ref();
-    const textareaContent = vue.ref(props.content);
+    const message = vue.ref({
+      role: "USER",
+      error: void 0,
+      think: void 0,
+      content: props.content
+    });
     let question;
-    const contentType = vue.ref("USER");
+    let answerContent;
     const isLoading = vue.ref(false);
+    const isCollapse = vue.ref(false);
     const disabled = vue.computed(() => {
-      return contentType.value === "ASSISTANT" || isLoading.value;
+      return message.value.role === "ASSISTANT" || isLoading.value;
     });
     const isShow = vue.computed(() => {
-      return contentType.value === "ASSISTANT" && !isLoading.value;
+      return message.value.role === "ASSISTANT" && !isLoading.value;
     });
     const {
-      srfaiappendcurdata,
-      srfaiautoappend,
       srfmode,
-      srfaiagent
+      srfaiagent,
+      autoquestion,
+      srfaiappendcurdata,
+      inlinecompletionmode
     } = inlineAiTextarea_hook.computedInLineAIParams(props);
     const {
       theme,
@@ -77,34 +88,75 @@ const InlineAITextArea = /* @__PURE__ */ vue.defineComponent({
       actionStyle,
       containerStyle,
       contentStyle
-    } = inlineAiTextarea_hook.useBase(props, containerRef, actionsRef);
+    } = inlineAiTextarea_hook.useBase(props, {
+      containerRef,
+      actionsRef,
+      textareaRef
+    }, message);
     const {
-      askAI,
+      syncAskAI,
+      asyncAskAI,
+      parseContent,
+      loadAiHistory,
       abortController
     } = inlineAiTextarea_hook.useAI(props, {
-      srfaiappendcurdata,
       srfmode,
-      srfaiagent
+      srfaiagent,
+      srfaiappendcurdata
     });
+    inlineAiTextarea_hook.useInLineAIContainerClick(props, message, isLoading);
     const stopQuestionAndClose = () => {
       var _a;
       (_a = abortController.value) == null ? void 0 : _a.abort();
       props.unMountAIChat();
     };
-    inlineAiTextarea_hook.useInLineAIContainerClick(props, textareaContent, isLoading);
-    const restoreFocus = () => {
-      var _a;
-      (_a = textareaRef.value) == null ? void 0 : _a.blur();
-      props.restoreSelection();
+    const handleAnswer = (answer) => {
+      switch (answer.state) {
+        case 20:
+          answerContent += answer.content;
+          Object.assign(message.value, parseContent(answerContent));
+          break;
+        case 30:
+          answerContent = answer.content;
+          Object.assign(message.value, parseContent(answerContent));
+          break;
+        case 40:
+          isCollapse.value = true;
+          Object.assign(message.value, {
+            error: answer.content,
+            think: void 0,
+            content: void 0
+          });
+          break;
+        default:
+          break;
+      }
+      message.value.role = "ASSISTANT";
     };
     const sendQuestion = async (content) => {
+      var _a;
+      if (!content || isLoading.value)
+        return;
+      isLoading.value = true;
       try {
-        isLoading.value = true;
-        restoreFocus();
+        (_a = textareaRef.value) == null ? void 0 : _a.blur();
+        props.restoreSelection();
         question = content;
-        textareaContent.value = "";
-        textareaContent.value = await askAI(question);
-        contentType.value = "ASSISTANT";
+        answerContent = void 0;
+        Object.assign(message.value, {
+          error: void 0,
+          think: void 0,
+          content: void 0
+        });
+        isCollapse.value = false;
+        if (inlinecompletionmode === "async") {
+          await asyncAskAI(question, handleAnswer, () => {
+            isLoading.value = false;
+          });
+        } else {
+          const answer = await syncAskAI(question);
+          handleAnswer(answer);
+        }
       } catch (error) {
         ibiz.log.error(error);
       } finally {
@@ -114,13 +166,15 @@ const InlineAITextArea = /* @__PURE__ */ vue.defineComponent({
     const onKeydown = (e) => {
       if (e.code === "Enter" && !e.isComposing) {
         e.stopPropagation();
-        if (e.shiftKey === false) {
-          sendQuestion(textareaContent.value);
-        }
+        if (e.shiftKey === false)
+          sendQuestion(message.value.content);
       }
     };
+    const onCollapseChange = () => {
+      isCollapse.value = !isCollapse.value;
+    };
     const handleAction = (_e, actionName) => {
-      const content = textareaContent.value;
+      const content = message.value.content;
       switch (actionName) {
         case "regenerate":
           sendQuestion(question);
@@ -144,32 +198,69 @@ const InlineAITextArea = /* @__PURE__ */ vue.defineComponent({
           break;
       }
     };
-    vue.onMounted(() => {
+    vue.onMounted(async () => {
       var _a;
-      if (srfaiautoappend) {
-        sendQuestion(textareaContent.value);
+      await loadAiHistory();
+      if (autoquestion) {
+        await sendQuestion(message.value.content);
       } else {
         (_a = textareaRef.value) == null ? void 0 : _a.focus();
       }
     });
+    const renderLoading = () => {
+      const value = message.value.error || message.value.content || message.value.think;
+      if (!isLoading.value || value)
+        return;
+      return vue.createVNode("div", {
+        "class": ns.e("loading")
+      }, [vue.createVNode("div", {
+        "class": ns.em("loading", "dot")
+      }, null), vue.createVNode("div", {
+        "class": ns.em("loading", "dot")
+      }, null), vue.createVNode("div", {
+        "class": ns.em("loading", "dot")
+      }, null)]);
+    };
+    const renderContent = () => {
+      if (message.value.error)
+        return vue.createVNode("div", {
+          "class": ns.e("error")
+        }, [message.value.error]);
+      if (message.value.think)
+        return vue.createVNode("div", {
+          "class": ns.e("think")
+        }, [vue.createVNode("div", {
+          "class": ns.em("think", "header"),
+          "onClick": onCollapseChange
+        }, [vue.createVNode("div", {
+          "class": [ns.em("think", "state-icon"), ns.is("loading", isLoading.value)]
+        }, [isLoading.value ? icon.LoadingIcon : icon.ThinkSuccessIcon]), vue.createVNode("div", {
+          "class": ns.em("think", "title")
+        }, [isLoading.value ? ibiz.i18n.t("util.inlineAiUtil.thinking") : ibiz.i18n.t("util.inlineAiUtil.thinked")]), vue.createVNode("div", {
+          "class": ns.em("think", "collapse-icon")
+        }, [isCollapse.value ? icon.DownIcon : icon.UpIcon])]), !isCollapse.value && vue.createVNode("div", {
+          "class": ns.em("think", "content")
+        }, [message.value.think])]);
+    };
     return {
       ns,
       theme,
       isShow,
       actions,
+      message,
       disabled,
       isLoading,
       actionsRef,
       textareaRef,
       actionStyle,
-      contentType,
       containerRef,
       contentStyle,
       containerStyle,
-      textareaContent,
       onKeydown,
       sendQuestion,
       handleAction,
+      renderLoading,
+      renderContent,
       stopQuestionAndClose
     };
   },
@@ -187,33 +278,26 @@ const InlineAITextArea = /* @__PURE__ */ vue.defineComponent({
       "class": this.ns.em("content", "ai-icon")
     }, [icon.AIIcon])]), vue.createVNode("div", {
       "class": this.ns.em("content", "textarea")
-    }, [this.isLoading && vue.createVNode("div", {
-      "class": this.ns.e("loading")
-    }, [vue.createVNode("div", {
-      "class": this.ns.em("loading", "dot")
-    }, null), vue.createVNode("div", {
-      "class": this.ns.em("loading", "dot")
-    }, null), vue.createVNode("div", {
-      "class": this.ns.em("loading", "dot")
-    }, null)]), vue.withDirectives(vue.createVNode("textarea", {
+    }, [this.renderLoading(), this.renderContent(), vue.withDirectives(vue.createVNode("textarea", {
       "ref": "textareaRef",
       "disabled": this.disabled,
       "onKeydown": this.onKeydown,
-      "onUpdate:modelValue": ($event) => this.textareaContent = $event
-    }, null), [[vue.vModelText, this.textareaContent]])]), vue.createVNode("div", {
+      "onUpdate:modelValue": ($event) => this.message.content = $event,
+      "class": this.ns.is("hidden", !!this.message.error)
+    }, null), [[vue.vModelText, this.message.content]])]), vue.createVNode("div", {
       "class": this.ns.em("content", "suffix")
     }, [this.isLoading && vue.createVNode("div", {
       "class": this.ns.em("content", "stop-icon"),
       "onClick": () => this.stopQuestionAndClose()
     }, [icon.StopIcon, vue.createVNode("span", null, [ibiz.i18n.t("util.inlineAiUtil.stopEdit")])]), !this.disabled && vue.createVNode("div", {
       "class": this.ns.em("content", "sand-icon"),
-      "onClick": () => this.sendQuestion(this.textareaContent)
-    }, [icon.SendIcon])])]), vue.createVNode("div", {
-      "class": [this.ns.e("footer"), this.ns.is("show", this.isShow)]
-    }, [ibiz.i18n.t("util.inlineAiUtil.info")]), vue.createVNode("div", {
+      "onClick": () => this.sendQuestion(this.message.content)
+    }, [icon.SendIcon])])]), this.isShow && vue.createVNode("div", {
+      "class": this.ns.e("footer")
+    }, [ibiz.i18n.t("util.inlineAiUtil.info")]), this.isShow && vue.createVNode("div", {
       "ref": "actionsRef",
-      "class": [this.ns.e("actions"), this.ns.is("show", this.isShow)],
-      "style": this.actionStyle
+      "style": this.actionStyle,
+      "class": this.ns.e("actions")
     }, [this.actions.map((action) => {
       if (action.itemType === "divider")
         return vue.createVNode("div", {

package/lib/util/inline-ai-util/inline-ai-textarea/inline-ai-textarea.css

@@ -1 +1 @@
-.ibiz-inline-ai-container-context-menu{--ibiz-inline-ai-context-menu-color-bg:var(--ibiz-color-bg-2);--ibiz-inline-ai-context-menu-color-text:var(--ibiz-color-text-0);--ibiz-inline-ai-context-menu-color-bg-active:var(--ibiz-color-fill-0);--mx-menu-text:var(--ibiz-inline-ai-context-menu-color-text);--mx-menu-backgroud:var(--ibiz-inline-ai-context-menu-color-bg);--mx-menu-hover-backgroud:var(--ibiz-inline-ai-context-menu-color-bg-active);--mx-menu-hover-text:var(--ibiz-inline-ai-context-menu-color-text);--mx-menu-open-text:var(--ibiz-inline-ai-context-menu-color-text);--mx-menu-open-backgroud:var(--ibiz-inline-ai-context-menu-color-bg-active);--mx-menu-open-hover-text:var(--ibiz-inline-ai-context-menu-color-text);--mx-menu-open-hover-backgroud:var(--ibiz-inline-ai-context-menu-color-bg-active);--mx-menu-active-backgroud:var(--ibiz-inline-ai-context-menu-color-bg-active);--mx-menu-active-text:var(--ibiz-inline-ai-context-menu-color-text);--mx-menu-backgroud-radius:0}.ibiz-inline-ai-container-context-menu .scroll-content{pointer-events:unset}.ibiz-inline-ai-container-context-menu .mx-context-menu-item{cursor:pointer}.ibiz-inline-ai-textarea-container{--ibiz-inline-ai-textarea-container-color-bg-0:rgb(255, 255, 255);--ibiz-inline-ai-textarea-container-color-bg-1:rgb(249, 249, 249);--ibiz-inline-ai-textarea-container-color-border:rgba(29, 31, 35, 0.1);--ibiz-inline-ai-textarea-container-color-text-0:rgb(29, 31, 35);--ibiz-inline-ai-textarea-container-color-text-1:rgba(29, 31, 35, 0.35);--ibiz-inline-ai-textarea-container-color-text-2:rgb(85, 125, 165);--ibiz-inline-ai-textarea-container-color-text-hove-1:rgb(105, 148, 190);--ibiz-inline-ai-textarea-container-color-bg-hover-1:rgb(217, 236, 255);--ibiz-inline-ai-textarea-container-color-bg-hover-2:rgba(46, 50, 55, 0.05);--ibiz-inline-ai-textarea-container-color-loading:#65b3fc}.ibiz-inline-ai-textarea-container--dark{--ibiz-inline-ai-textarea-container-color-bg-0:rgb(28, 28, 28);--ibiz-inline-ai-textarea-container-color-bg-1:rgb(53, 54, 60);--ibiz-inline-ai-textarea-container-color-border:rgba(255, 255, 255, 0.08);--ibiz-inline-ai-textarea-container-color-text-0:rgb(255, 255, 255);--ibiz-inline-ai-textarea-container-color-text-1:rgba(249, 249, 249, 0.35);--ibiz-inline-ai-textarea-container-color-text-2:rgb(70, 107, 144);--ibiz-inline-ai-textarea-container-color-text-hove-1:rgb(105, 148, 190);--ibiz-inline-ai-textarea-container-color-bg-hover-1:rgba(85, 125, 165, 0.2);--ibiz-inline-ai-textarea-container-color-bg-hover-2:rgb(67, 68, 74);--ibiz-inline-ai-textarea-container-color-loading:rgba(204, 204, 204, 0.6)}.ibiz-inline-ai-textarea-container{position:absolute;z-index:2000;color:var(--ibiz-inline-ai-textarea-container-color-text-0);-webkit-user-select:none;-moz-user-select:none;user-select:none}.ibiz-inline-ai-textarea-container .ibiz-inline-ai-textarea-container__content{border:1px solid var(--ibiz-inline-ai-textarea-container-color-border);border-radius:var(--ibiz-border-radius-small);box-shadow:0 0 16px var(--ibiz-color-shadow)}.ibiz-inline-ai-textarea-container.is-show-ai{border:1px solid var(--ibiz-inline-ai-textarea-container-color-border);border-radius:var(--ibiz-border-radius-small);box-shadow:0 0 16px var(--ibiz-color-shadow)}.ibiz-inline-ai-textarea-container.is-show-ai .ibiz-inline-ai-textarea-container__content{border:none;border-radius:var(--ibiz-border-radius-small) var(--ibiz-border-radius-small) 0 0;box-shadow:none}.ibiz-inline-ai-textarea-container.is-show-ai .ibiz-inline-ai-textarea-container__footer{border-radius:0 0 var(--ibiz-border-radius-small) var(--ibiz-border-radius-small)}.ibiz-inline-ai-textarea-container__content{position:relative;display:flex;gap:var(--ibiz-spacing-tight);padding:var(--ibiz-spacing-base-tight);background-color:var(--ibiz-inline-ai-textarea-container-color-bg-0)}.ibiz-inline-ai-textarea-container__content--prefix{flex-shrink:0;color:var(--ibiz-inline-ai-textarea-container-color-text-1)}.ibiz-inline-ai-textarea-container__content--textarea{position:relative;flex-grow:1}.ibiz-inline-ai-textarea-container__content--textarea textarea{width:100%;height:100%;padding:0;color:var(--ibiz-inline-ai-textarea-container-color-text-0);resize:none;background-color:var(--ibiz-inline-ai-textarea-container-color-bg-0);border:none;outline:0}.ibiz-inline-ai-textarea-container__content--textarea textarea:disabled{background-color:var(--ibiz-inline-ai-textarea-container-color-bg-0)}.ibiz-inline-ai-textarea-container__content--suffix{display:flex;flex-direction:column-reverse;flex-shrink:0}.ibiz-inline-ai-textarea-container__content--sand-icon{display:flex;align-items:center;justify-content:center;width:28px;height:28px;color:var(--ibiz-inline-ai-textarea-container-color-text-2);cursor:pointer;border-radius:var(--ibiz-spacing-extra-tight)}.ibiz-inline-ai-textarea-container__content--sand-icon:hover{background-color:var(--ibiz-inline-ai-textarea-container-color-bg-hover-1)}.ibiz-inline-ai-textarea-container__content--stop-icon{display:flex;gap:var(--ibiz-spacing-extra-tight);align-items:center;font-size:var(--ibiz-font-size-small);color:var(--ibiz-inline-ai-textarea-container-color-text-1);cursor:pointer}.ibiz-inline-ai-textarea-container__content--stop-icon:hover{color:var(--ibiz-inline-ai-textarea-container-color-text-hove-1)}.ibiz-inline-ai-textarea-container__footer{padding:var(--ibiz-spacing-base-tight) var(--ibiz-spacing-base);font-size:var(--ibiz-font-size-small);color:var(--ibiz-inline-ai-textarea-container-color-text-1);visibility:hidden;background-color:var(--ibiz-inline-ai-textarea-container-color-bg-1);border-top:1px solid var(--ibiz-inline-ai-textarea-container-color-border)}.ibiz-inline-ai-textarea-container__footer.is-show{visibility:visible}.ibiz-inline-ai-textarea-container__actions{position:absolute;width:240px;padding:var(--ibiz-spacing-base-tight) 0;font-size:var(--ibiz-font-size-regular);visibility:hidden;background-color:var(--ibiz-inline-ai-textarea-container-color-bg-0);border:1px solid var(--ibiz-inline-ai-textarea-container-color-border);border-radius:var(--ibiz-border-radius-small);box-shadow:0 0 16px var(--ibiz-color-shadow)}.ibiz-inline-ai-textarea-container__actions.is-show{visibility:visible}.ibiz-inline-ai-textarea-container__actions--action{display:flex;gap:var(--ibiz-spacing-tight);align-items:center;padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-loose);cursor:pointer}.ibiz-inline-ai-textarea-container__actions--action:hover{background-color:var(--ibiz-inline-ai-textarea-container-color-bg-hover-2)}.ibiz-inline-ai-textarea-container__actions--action.is-danger:hover{color:var(--ibiz-color-danger)}.ibiz-inline-ai-textarea-container__actions--divider{margin:var(--ibiz-spacing-extra-tight) var(--ibiz-spacing-base-loose);border-top:1px solid var(--ibiz-inline-ai-textarea-container-color-border)}.ibiz-inline-ai-textarea-container__loading{position:absolute;top:0;left:0;display:flex;gap:8px;align-items:center;width:100%;height:100%;overflow:hidden}@keyframes bounce{0%,100%,80%{transform:scale(0)}40%{transform:scale(1)}}.ibiz-inline-ai-textarea-container__loading--dot{width:12px;height:12px;background:var(--ibiz-inline-ai-textarea-container-color-loading);border-radius:50%;animation:bounce 1.5s infinite ease-in-out}.ibiz-inline-ai-textarea-container__loading--dot:nth-child(2){animation-delay:.2s}.ibiz-inline-ai-textarea-container__loading--dot:nth-child(3){animation-delay:.4s}
+.ibiz-inline-ai-container-context-menu{--ibiz-inline-ai-context-menu-color-bg:var(--ibiz-color-bg-2);--ibiz-inline-ai-context-menu-color-text:var(--ibiz-color-text-0);--ibiz-inline-ai-context-menu-color-bg-active:var(--ibiz-color-fill-0);--mx-menu-text:var(--ibiz-inline-ai-context-menu-color-text);--mx-menu-backgroud:var(--ibiz-inline-ai-context-menu-color-bg);--mx-menu-hover-backgroud:var(--ibiz-inline-ai-context-menu-color-bg-active);--mx-menu-hover-text:var(--ibiz-inline-ai-context-menu-color-text);--mx-menu-open-text:var(--ibiz-inline-ai-context-menu-color-text);--mx-menu-open-backgroud:var(--ibiz-inline-ai-context-menu-color-bg-active);--mx-menu-open-hover-text:var(--ibiz-inline-ai-context-menu-color-text);--mx-menu-open-hover-backgroud:var(--ibiz-inline-ai-context-menu-color-bg-active);--mx-menu-active-backgroud:var(--ibiz-inline-ai-context-menu-color-bg-active);--mx-menu-active-text:var(--ibiz-inline-ai-context-menu-color-text);--mx-menu-backgroud-radius:0}.ibiz-inline-ai-container-context-menu .scroll-content{pointer-events:unset}.ibiz-inline-ai-container-context-menu .mx-context-menu-item{cursor:pointer}.ibiz-inline-ai-textarea-container{--ibiz-inline-ai-textarea-container-color-bg-0:rgb(255, 255, 255);--ibiz-inline-ai-textarea-container-color-bg-1:rgb(249, 249, 249);--ibiz-inline-ai-textarea-container-color-border:rgba(29, 31, 35, 0.1);--ibiz-inline-ai-textarea-container-color-text-0:rgb(29, 31, 35);--ibiz-inline-ai-textarea-container-color-text-1:rgba(0, 0, 0, 0.45);--ibiz-inline-ai-textarea-container-color-text-2:rgb(85, 125, 165);--ibiz-inline-ai-textarea-container-color-text-hove-1:rgb(105, 148, 190);--ibiz-inline-ai-textarea-container-color-bg-hover-1:rgb(217, 236, 255);--ibiz-inline-ai-textarea-container-color-bg-hover-2:rgba(46, 50, 55, 0.05);--ibiz-inline-ai-textarea-container-color-loading:#65b3fc}.ibiz-inline-ai-textarea-container--dark{--ibiz-inline-ai-textarea-container-color-bg-0:rgb(28, 28, 28);--ibiz-inline-ai-textarea-container-color-bg-1:rgb(53, 54, 60);--ibiz-inline-ai-textarea-container-color-border:rgba(255, 255, 255, 0.08);--ibiz-inline-ai-textarea-container-color-text-0:rgb(255, 255, 255);--ibiz-inline-ai-textarea-container-color-text-1:rgba(249, 249, 249, 0.35);--ibiz-inline-ai-textarea-container-color-text-2:rgb(70, 107, 144);--ibiz-inline-ai-textarea-container-color-text-hove-1:rgb(105, 148, 190);--ibiz-inline-ai-textarea-container-color-bg-hover-1:rgba(85, 125, 165, 0.2);--ibiz-inline-ai-textarea-container-color-bg-hover-2:rgb(67, 68, 74);--ibiz-inline-ai-textarea-container-color-loading:rgba(204, 204, 204, 0.6)}.ibiz-inline-ai-textarea-container{position:absolute;color:var(--ibiz-inline-ai-textarea-container-color-text-0);-webkit-user-select:none;-moz-user-select:none;user-select:none}.ibiz-inline-ai-textarea-container .ibiz-inline-ai-textarea-container__content{border:1px solid var(--ibiz-inline-ai-textarea-container-color-border);border-radius:var(--ibiz-border-radius-small);box-shadow:0 0 16px var(--ibiz-color-shadow)}.ibiz-inline-ai-textarea-container.is-show-ai{border:1px solid var(--ibiz-inline-ai-textarea-container-color-border);border-radius:var(--ibiz-border-radius-small);box-shadow:0 0 16px var(--ibiz-color-shadow)}.ibiz-inline-ai-textarea-container.is-show-ai .ibiz-inline-ai-textarea-container__content{border:none;border-radius:var(--ibiz-border-radius-small) var(--ibiz-border-radius-small) 0 0;box-shadow:none}.ibiz-inline-ai-textarea-container.is-show-ai .ibiz-inline-ai-textarea-container__footer{border-radius:0 0 var(--ibiz-border-radius-small) var(--ibiz-border-radius-small)}.ibiz-inline-ai-textarea-container__content{position:relative;display:flex;gap:var(--ibiz-spacing-tight);padding:var(--ibiz-spacing-base-tight);background-color:var(--ibiz-inline-ai-textarea-container-color-bg-0)}.ibiz-inline-ai-textarea-container__content--prefix{flex-shrink:0;color:var(--ibiz-inline-ai-textarea-container-color-text-1)}.ibiz-inline-ai-textarea-container__content--textarea{position:relative;display:flex;flex-direction:column;flex-grow:1;gap:var(--ibiz-spacing-tight);overflow-y:auto}.ibiz-inline-ai-textarea-container__content--textarea textarea{flex-shrink:0;padding:0;overflow:hidden;color:var(--ibiz-inline-ai-textarea-container-color-text-0);resize:none;background-color:var(--ibiz-inline-ai-textarea-container-color-bg-0);border:none;outline:0;transition:height .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1)}.ibiz-inline-ai-textarea-container__content--textarea textarea:disabled{background-color:var(--ibiz-inline-ai-textarea-container-color-bg-0)}.ibiz-inline-ai-textarea-container__content--textarea textarea.is-hidden{display:none}.ibiz-inline-ai-textarea-container__content--suffix{display:flex;flex-direction:column-reverse;flex-shrink:0}.ibiz-inline-ai-textarea-container__content--sand-icon{display:flex;align-items:center;justify-content:center;width:28px;height:28px;color:var(--ibiz-inline-ai-textarea-container-color-text-2);cursor:pointer;border-radius:var(--ibiz-spacing-extra-tight)}.ibiz-inline-ai-textarea-container__content--sand-icon:hover{background-color:var(--ibiz-inline-ai-textarea-container-color-bg-hover-1)}.ibiz-inline-ai-textarea-container__content--stop-icon{display:flex;gap:var(--ibiz-spacing-extra-tight);align-items:center;font-size:var(--ibiz-font-size-small);color:var(--ibiz-inline-ai-textarea-container-color-text-1);cursor:pointer}.ibiz-inline-ai-textarea-container__content--stop-icon:hover{color:var(--ibiz-inline-ai-textarea-container-color-text-hove-1)}.ibiz-inline-ai-textarea-container__footer{padding:var(--ibiz-spacing-base-tight) var(--ibiz-spacing-base);font-size:var(--ibiz-font-size-small);color:var(--ibiz-inline-ai-textarea-container-color-text-1);background-color:var(--ibiz-inline-ai-textarea-container-color-bg-1);border-top:1px solid var(--ibiz-inline-ai-textarea-container-color-border)}.ibiz-inline-ai-textarea-container__actions{position:absolute;width:240px;padding:var(--ibiz-spacing-base-tight) 0;font-size:var(--ibiz-font-size-regular);background-color:var(--ibiz-inline-ai-textarea-container-color-bg-0);border:1px solid var(--ibiz-inline-ai-textarea-container-color-border);border-radius:var(--ibiz-border-radius-small);box-shadow:0 0 16px var(--ibiz-color-shadow)}.ibiz-inline-ai-textarea-container__actions--action{display:flex;gap:var(--ibiz-spacing-tight);align-items:center;padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-loose);cursor:pointer}.ibiz-inline-ai-textarea-container__actions--action:hover{background-color:var(--ibiz-inline-ai-textarea-container-color-bg-hover-2)}.ibiz-inline-ai-textarea-container__actions--action.is-danger:hover{color:var(--ibiz-color-danger)}.ibiz-inline-ai-textarea-container__actions--divider{margin:var(--ibiz-spacing-extra-tight) var(--ibiz-spacing-base-loose);border-top:1px solid var(--ibiz-inline-ai-textarea-container-color-border)}.ibiz-inline-ai-textarea-container__error{flex-grow:1;color:var(--ibiz-color-danger)}.ibiz-inline-ai-textarea-container__think{flex-shrink:0;width:100%;height:auto;font-size:var(--ibiz-font-size-small);color:var(--ibiz-inline-ai-textarea-container-color-text-1)}.ibiz-inline-ai-textarea-container__think--header{display:flex;gap:var(--ibiz-spacing-extra-tight);align-items:center;margin-bottom:var(--ibiz-spacing-tight);cursor:pointer}.ibiz-inline-ai-textarea-container__think--header:hover{color:var(--ibiz-inline-ai-textarea-container-color-text-hove-1)}.ibiz-inline-ai-textarea-container__think--state-icon{display:flex;align-items:center;color:var(--ibiz-color-success)}.ibiz-inline-ai-textarea-container__think--state-icon.is-loading{color:var(--ibiz-inline-ai-textarea-container-color-loading)}.ibiz-inline-ai-textarea-container__think--collapse-icon{display:flex;align-items:center}.ibiz-inline-ai-textarea-container__think--content{position:relative;padding-left:var(--ibiz-spacing-tight);word-wrap:break-word;white-space:pre-wrap;transition:height .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1)}.ibiz-inline-ai-textarea-container__think--content::before{position:absolute;top:0;bottom:0;left:0;width:2px;content:"";background-color:var(--ibiz-inline-ai-textarea-container-color-border)}.ibiz-inline-ai-textarea-container__loading{position:absolute;top:0;left:0;display:flex;gap:8px;align-items:center;width:100%;height:100%;overflow:hidden}@keyframes bounce{0%,100%,80%{transform:scale(0)}40%{transform:scale(1)}}.ibiz-inline-ai-textarea-container__loading--dot{width:12px;height:12px;background:var(--ibiz-inline-ai-textarea-container-color-loading);border-radius:50%;animation:bounce 1.5s infinite ease-in-out}.ibiz-inline-ai-textarea-container__loading--dot:nth-child(2){animation-delay:.2s}.ibiz-inline-ai-textarea-container__loading--dot:nth-child(3){animation-delay:.4s}

package/lib/util/inline-ai-util/inline-ai-textarea/inline-ai-textarea.hook.cjs

@@ -2,21 +2,31 @@
 
 var qs = require('qs');
 var qxUtil = require('qx-util');
+var vue3Util = require('@ibiz-template/vue3-util');
 var vue = require('vue');
 var runtime = require('@ibiz-template/runtime');
 var icon = require('./icon.cjs');
 
 "use strict";
 const computedInLineAIParams = (props) => {
-  var _a;
+  var _a, _b, _c, _d, _e, _f, _g;
+  const { params, context, editorParams } = props;
+  const getBooleanValue = (value) => {
+    if (value === "false")
+      return false;
+    if (value === "true")
+      return true;
+    return null;
+  };
   return {
-    srfaiappendcurdata: (_a = props.context.srfaiappendcurdata) != null ? _a : true,
-    srfaiautoappend: props.params.srfaiautoappend === "true" || props.params.srfaiautoappend === true,
-    srfmode: props.params.srfmode,
-    srfaiagent: props.params.srfaiagent
+    srfaiappendcurdata: (_c = (_b = (_a = getBooleanValue(context.srfaiappendcurdata)) != null ? _a : getBooleanValue(params.srfaiappendcurdata)) != null ? _b : getBooleanValue(editorParams.srfaiappendcurdata)) != null ? _c : true,
+    autoquestion: (_e = (_d = getBooleanValue(params.autoquestion)) != null ? _d : getBooleanValue(editorParams.autoquestion)) != null ? _e : false,
+    srfmode: params.srfmode,
+    srfaiagent: params.srfaiagent,
+    inlinecompletionmode: (_g = (_f = params.inlinecompletionmode) != null ? _f : editorParams.inlinecompletionmode) != null ? _g : "async"
   };
 };
-const useInLineAIContainerClick = (props, content, isLoading) => {
+const useInLineAIContainerClick = (props, message, isLoading) => {
   const handclick = async (evt) => {
     const target = evt.target;
     if (!target.closest(".ibiz-inline-ai-textarea-container") && !target.closest(".ibiz-inline-ai-alert")) {
@@ -24,7 +34,7 @@ const useInLineAIContainerClick = (props, content, isLoading) => {
         evt.stopPropagation();
         return;
       }
-      const isChange = props.content !== content.value;
+      const isChange = props.content !== message.value.content;
       let isClose = true;
       if (isChange) {
         isClose = await ibiz.confirm.warning({
@@ -52,21 +62,24 @@ const useAI = (props, opts) => {
   const params = { srfactag: deACMode.codeName };
   const app = ibiz.hub.getApp(deACMode.appId);
   let history = [];
-  const calcAIPath = (appDataEntity, isHistories = false) => {
+  let appDataEntity;
+  const calcAIPath = (isHistories = false, isAsync = false) => {
+    if (!appDataEntity)
+      return "";
     const srfkey = context[appDataEntity.codeName.toLowerCase()];
-    const curPath = "/".concat(appDataEntity.deapicodeName2, "/chatcompletion").concat(isHistories ? "/histories" : "").concat(srfkey ? "/".concat(srfkey) : "");
+    const curPath = "/".concat(appDataEntity.deapicodeName2, "/").concat(isAsync ? "sse" : "", "chatcompletion").concat(isHistories ? "/histories" : "").concat(srfkey ? "/".concat(srfkey) : "");
     const resPath = runtime.calcResPath(context, appDataEntity);
     return resPath ? "/".concat(resPath).concat(curPath) : "".concat(curPath);
   };
   const loadAiHistory = async () => {
-    const appDataEntity = await ibiz.hub.getAppDataEntity(
+    appDataEntity = await ibiz.hub.getAppDataEntity(
       deACMode.appDataEntityId,
       deACMode.appId
     );
-    const path = calcAIPath(appDataEntity, true);
+    const path = calcAIPath(true);
     const body = {};
     if (srfaiappendcurdata)
-      Object.assign(body, { data });
+      Object.assign(body, data);
     if (srfmode)
       Object.assign(body, { mode: srfmode });
     if (srfaiagent)
@@ -99,14 +112,13 @@ const useAI = (props, opts) => {
     }
     return url;
   };
-  const askAI = async (content) => {
-    var _a, _b;
+  const prepareData = (question, isAsync = false) => {
     const body = {
       messages: [
         ...history,
         {
           role: "USER",
-          content
+          content: question
         }
       ]
     };
@@ -114,32 +126,96 @@ const useAI = (props, opts) => {
       Object.assign(body, { mode: srfmode });
     if (srfaiagent)
       Object.assign(body, { srfaiagent });
-    abortController.value = new AbortController();
-    const appDataEntity = await ibiz.hub.getAppDataEntity(
-      deACMode.appDataEntityId,
-      deACMode.appId
-    );
-    const path = attachUrlParam(calcAIPath(appDataEntity));
-    const response = await app.net.request(path, {
-      method: "post",
-      data: body,
-      signal: abortController.value.signal
+    let url = calcAIPath(false, isAsync);
+    if (!isAsync)
+      url = attachUrlParam(url);
+    return { body, url };
+  };
+  const parseContent = (text) => {
+    let think;
+    let content;
+    if (!text)
+      return { think, content };
+    const openThinkIndex = text.indexOf("<think>");
+    const closeThinkIndex = text.indexOf("</think>");
+    if (openThinkIndex !== -1) {
+      think = closeThinkIndex === -1 ? text.slice(openThinkIndex + 7) : text.slice(openThinkIndex + 7, closeThinkIndex);
+      content = closeThinkIndex === -1 ? void 0 : text.slice(closeThinkIndex + 8);
+    } else {
+      content = text;
+    }
+    return { think, content };
+  };
+  const asyncAskAI = (question, callBack, errorBack) => {
+    return new Promise((resolve) => {
+      abortController.value = new AbortController();
+      const { body, url } = prepareData(question, true);
+      app.net.sse(url, params, {
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify(body),
+        onmessage: (e) => {
+          var _a;
+          try {
+            if (e.data) {
+              const msg = JSON.parse(e.data);
+              let content = msg.actionresult;
+              if (msg.actionstate === 30 && content)
+                content = (_a = JSON.parse(content).choices) == null ? void 0 : _a[0].content;
+              callBack({ state: msg.actionstate, content });
+            }
+          } catch (error) {
+            ibiz.log.error(error);
+          }
+        },
+        onclose: () => resolve(),
+        onerror: (error) => {
+          callBack({ state: 40, content: error.message });
+          errorBack();
+          throw error;
+        },
+        signal: abortController.value.signal
+      });
     });
-    if (response.ok) {
-      const result = (_b = (_a = response.data.choices) == null ? void 0 : _a[0]) == null ? void 0 : _b.content;
-      return result;
+  };
+  const syncAskAI = async (question) => {
+    var _a, _b;
+    abortController.value = new AbortController();
+    const { body, url } = prepareData(question);
+    const answer = {
+      state: 10,
+      content: ""
+    };
+    try {
+      const response = await app.net.request(url, {
+        method: "post",
+        data: body,
+        signal: abortController.value.signal
+      });
+      if (response.ok)
+        Object.assign(answer, {
+          state: 30,
+          content: (_b = (_a = response.data.choices) == null ? void 0 : _a[0]) == null ? void 0 : _b.content
+        });
+      return answer;
+    } catch (error) {
+      Object.assign(answer, {
+        state: 40,
+        content: error.message
+      });
+      return answer;
     }
-    return "";
   };
-  vue.onMounted(() => {
-    loadAiHistory();
-  });
   return {
-    askAI,
+    syncAskAI,
+    asyncAskAI,
+    parseContent,
+    loadAiHistory,
     abortController
   };
 };
-const useBase = (props, container, target) => {
+const useBase = (props, element, message) => {
   const actions = [
     {
       title: ibiz.i18n.t("util.inlineAiUtil.regenerate"),
@@ -175,7 +251,9 @@ const useBase = (props, container, target) => {
       actionName: "cancel"
     }
   ];
+  const { zIndex } = vue3Util.useUIStore();
   const { options } = props;
+  const { containerRef, actionsRef, textareaRef } = element;
   const editorRect = options.editorElement.getBoundingClientRect();
   const offsetX = options.left - editorRect.left;
   const offsetY = options.top - editorRect.top;
@@ -184,20 +262,32 @@ const useBase = (props, container, target) => {
   const containerStyle = vue.ref({
     width: "".concat(options.width, "px"),
     left: "".concat(options.left, "px"),
-    top: "".concat(options.top, "px")
+    top: "".concat(options.top, "px"),
+    zIndex: zIndex.increment()
   });
   const contentStyle = vue.ref({
-    height: "".concat(options.height || 300, "px"),
-    "max-height": "".concat(options.maxHeight, "px")
+    height: options.height ? "".concat(options.height, "px") : "auto",
+    "max-height": "".concat(options.maxHeight || (options.height && options.height > 300 ? options.height : 300), "px")
   });
+  vue.watch(
+    () => message.value.content,
+    () => {
+      vue.nextTick(() => {
+        if (!textareaRef.value)
+          return;
+        textareaRef.value.style.height = "auto";
+        textareaRef.value.style.height = "".concat(textareaRef.value.scrollHeight, "px");
+      });
+    }
+  );
   const updatePosition = () => {
-    if (!container.value || !target.value)
+    if (!containerRef.value || !actionsRef.value)
       return;
     const rect = options.editorElement.getBoundingClientRect();
     let top = rect.top + offsetY;
     let left = rect.left + offsetX;
-    const containerWidth = container.value.offsetWidth;
-    const containerHeight = container.value.offsetHeight;
+    const containerWidth = containerRef.value.offsetWidth;
+    const containerHeight = containerRef.value.offsetHeight;
     const windowWidth = window.innerWidth;
     const windowHeight = window.innerHeight;
     const margin = 8;
@@ -214,7 +304,7 @@ const useBase = (props, container, target) => {
     containerStyle.value.top = "".concat(top, "px");
     containerStyle.value.left = "".concat(left, "px");
     const position = containerHeight + 4;
-    const targetHeight = target.value.offsetHeight;
+    const targetHeight = actionsRef.value.offsetHeight;
     if (windowHeight - (top + containerHeight + targetHeight) > margin) {
       actionStyle.value.top = "".concat(position, "px");
       actionStyle.value.bottom = "auto";
@@ -233,18 +323,25 @@ const useBase = (props, container, target) => {
       ticking = true;
     }
   };
+  let observer;
   vue.onMounted(() => {
-    updatePosition();
     document.addEventListener("scroll", optimizedUpdatePosition, {
       capture: true
     });
     window.addEventListener("resize", optimizedUpdatePosition);
+    if (containerRef.value) {
+      observer = new ResizeObserver(optimizedUpdatePosition);
+      observer.observe(containerRef.value);
+    }
   });
   vue.onUnmounted(() => {
+    zIndex.decrement();
     document.removeEventListener("scroll", optimizedUpdatePosition, {
       capture: true
     });
     window.removeEventListener("resize", optimizedUpdatePosition);
+    observer == null ? void 0 : observer.disconnect();
+    observer = null;
   });
   return { theme, actions, actionStyle, containerStyle, contentStyle };
 };

package/lib/util/inline-ai-util/inline-ai-util.cjs

@@ -118,7 +118,7 @@ class InLineAIUtil {
     this.container.className = this.ns.b();
     document.body.appendChild(this.container);
     const { editor } = params;
-    const { insertText, replaceSelectionText, restoreSelection } = editor;
+    const { insertText, replaceSelectionText, restoreSelection, editorParams } = editor;
     delete params.editor;
     const unMountAIChat = () => {
       this.destroyInlineAIComponent();
@@ -127,6 +127,7 @@ class InLineAIUtil {
       context,
       params,
       data,
+      editorParams,
       content: selectText,
       deACMode,
       options,

package/lib/web-app/main.cjs

@@ -24,6 +24,7 @@ var loadingUtil = require('../util/loading-util/loading-util.cjs');
 var noticeUtil = require('../util/notice-util/notice-util.cjs');
 var overlayController = require('../util/overlay-controller/overlay-controller.cjs');
 var inlineAiUtil = require('../util/inline-ai-util/inline-ai-util.cjs');
+var aiChatUtil = require('../util/ai-chat-util/ai-chat-util.cjs');
 var fullscreenUtil = require('../util/fullscreen/fullscreen-util.cjs');
 
 "use strict";
@@ -85,6 +86,7 @@ async function runApp(plugins, opts) {
   ibiz.notice = new noticeUtil.NoticeUtil();
   ibiz.overlay = new overlayController.OverlayController();
   ibiz.inLineAIUtil = new inlineAiUtil.InLineAIUtil();
+  ibiz.aiChatUtil = new aiChatUtil.AIChatUtil();
   ibiz.util.text.format = (value, code) => {
     return app.config.globalProperties.$textFormat(value, code);
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ibiz-template/vue3-components",
-  "version": "0.7.41-alpha.40",
+  "version": "0.7.41-alpha.42",
   "description": "web端组件库(vue3)",
   "main": "lib/index.cjs",
   "module": "es/index.mjs",
@@ -30,16 +30,16 @@
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
     "@floating-ui/dom": "^1.5.3",
-    "@ibiz-template-plugin/ai-chat": "^0.0.34",
+    "@ibiz-template-plugin/ai-chat": "^0.0.35",
     "@ibiz-template-plugin/gantt": "0.1.8-alpha.316",
     "@ibiz-template-plugin/bi-report": "0.0.30",
     "@ibiz-template-plugin/data-view": "0.0.6",
     "@ibiz-template/core": "0.7.41-alpha.35",
     "@ibiz-template/devtool": "0.0.13",
-    "@ibiz-template/model-helper": "0.7.41-alpha.39",
-    "@ibiz-template/runtime": "0.7.41-alpha.39",
+    "@ibiz-template/model-helper": "0.7.41-alpha.41",
+    "@ibiz-template/runtime": "0.7.41-alpha.41",
     "@ibiz-template/theme": "0.7.39",
-    "@ibiz-template/vue3-util": "0.7.41-alpha.39",
+    "@ibiz-template/vue3-util": "0.7.41-alpha.41",
     "@ibiz-template/web-theme": "3.9.0",
     "@ibiz/model-core": "^0.1.83",
     "@imengyu/vue3-context-menu": "^1.3.5",