@ibiz-template/vue3-components 0.7.41-alpha.38 → 0.7.41-alpha.39

package/lib/editor/markdown/markdown-editor.controller.cjs

@@ -91,6 +91,20 @@ class MarkDownEditorController extends runtime.EditorController {
      * @memberof MarkDownEditorController
      */
     __publicField(this, "selectionAreaPosition", null);
+    /**
+     * 选区方向  true表示正向，从左到右；false表示反向，从右到左
+     *
+     * @type {boolean}
+     * @memberof MarkDownEditorController
+     */
+    __publicField(this, "selectionDirection", true);
+    /**
+     * 当前编辑器使用主题
+     *
+     * @type {string}
+     * @memberof MarkDownEditorController
+     */
+    __publicField(this, "currentEditorTheme", "light");
   }
   async onInit() {
     await super.onInit();
@@ -176,6 +190,33 @@ class MarkDownEditorController extends runtime.EditorController {
   setCursorPos(start, end) {
     this.selectionAreaPosition = { start, end };
   }
+  /**
+   * 设置当前编辑器的主题
+   *
+   * @param {string} theme
+   * @memberof MarkDownEditorController
+   */
+  setCurrentEditorTheme(theme) {
+    this.currentEditorTheme = theme;
+  }
+  /**
+   * 设置当前选区方向
+   *
+   * @param {boolean} direction
+   * @memberof MarkDownEditorController
+   */
+  setSelectionDirection(direction) {
+    this.selectionDirection = direction;
+  }
+  /**
+   * 获取当前主题
+   *
+   * @return {*}  {('light' | 'dark')}
+   * @memberof MarkDownEditorController
+   */
+  getCurrentTheme() {
+    return this.currentEditorTheme === "dark" ? "dark" : "light";
+  }
   /**
    * 获取选中文本
    *
@@ -186,6 +227,30 @@ class MarkDownEditorController extends runtime.EditorController {
     var _a;
     return (_a = this.mdeditor) == null ? void 0 : _a.editor.editor.getSelection();
   }
+  /**
+   * 获取内联AI编辑器主题
+   *
+   * @return {*}  {('light' | 'dark')}
+   * @memberof MarkDownEditorController
+   */
+  getInLineAiEditorTheme() {
+    return this.getCurrentTheme();
+  }
+  /**
+   * 判断选区方向
+   *
+   * @param {IData} posA
+   * @param {IData} posB
+   * @return {*}  {boolean}
+   * @memberof MarkDownEditorController
+   */
+  isPositionBefore(posA, posB) {
+    if (posA.line < posB.line)
+      return true;
+    if (posA.line > posB.line)
+      return false;
+    return posA.ch < posB.ch;
+  }
   /**
    * 插入文本
    *
@@ -193,8 +258,32 @@ class MarkDownEditorController extends runtime.EditorController {
    * @memberof MarkDownEditorController
    */
   insertText(text) {
-    var _a;
-    (_a = this.mdeditor) == null ? void 0 : _a.insert(text);
+    var _a, _b, _c;
+    if (this.selectionAreaPosition) {
+      const { start, end } = this.selectionAreaPosition;
+      const contentToInsert = "\n".concat(text, "\n");
+      const hasSelection = !(start.line === end.line && start.ch === end.ch);
+      if (!hasSelection) {
+        (_a = this.mdeditor) == null ? void 0 : _a.editor.editor.replaceSelection(contentToInsert);
+        return;
+      }
+      let insetPos;
+      if (this.selectionDirection) {
+        insetPos = end;
+      } else {
+        insetPos = start;
+      }
+      (_b = this.mdeditor) == null ? void 0 : _b.editor.editor.setCursor(insetPos);
+      (_c = this.mdeditor) == null ? void 0 : _c.editor.editor.replaceSelection(contentToInsert);
+      if (this.selectionDirection === false) {
+        const index = (contentToInsert.match(/\n/g) || []).length;
+        this.selectionAreaPosition.start.line += index;
+        this.selectionAreaPosition.end.line += index;
+        this.selectionAreaPosition.end.ch -= this.selectionAreaPosition.start.ch;
+        this.selectionAreaPosition.start.ch = 0;
+      }
+      this.restoreSelection();
+    }
   }
   /**
    * 替换选中文本
@@ -225,14 +314,30 @@ class MarkDownEditorController extends runtime.EditorController {
    * @memberof MarkDownEditorController
    */
   getInLineAiChatOptions() {
-    var _a;
+    var _a, _b, _c;
     const editorRect = (_a = this.mdeditor) == null ? void 0 : _a.wrapperDom.getBoundingClientRect();
+    const bubbleRect = (_b = this.mdeditor) == null ? void 0 : _b.bubble.bubbleDom.getBoundingClientRect();
     return {
-      left: editorRect == null ? void 0 : editorRect.left,
-      top: editorRect == null ? void 0 : editorRect.top,
-      width: editorRect == null ? void 0 : editorRect.width
+      // 编辑器的左侧距离 + 10px
+      left: editorRect.left + 10,
+      // 浮动工具栏的顶部距离位置
+      top: bubbleRect.top,
+      // 编辑器的宽度 - 右侧工具栏的宽度(38px) - 左侧边距（10px）- 右侧边距（10px）
+      width: editorRect.width - 58,
+      editorElement: (_c = this.mdeditor) == null ? void 0 : _c.wrapperDom,
+      editorTheme: this.getCurrentTheme()
     };
   }
+  /**
+   * 返回内联AI编辑器元素
+   *
+   * @return {*}  {Element}
+   * @memberof MarkDownEditorController
+   */
+  getInLineAiEditorElement() {
+    var _a;
+    return (_a = this.mdeditor) == null ? void 0 : _a.wrapperDom;
+  }
   /**
    *  执行内联AIUI操作
    *

package/lib/locale/en/index.cjs

@@ -629,7 +629,8 @@ var index = {
       noEditorArea: "Editor content area not found",
       noSelStart: "No start position of current selection",
       noEditorRect: "No editor DOM node position info",
-      noSelCoords: "No scroll coordinates of selection"
+      noSelCoords: "No scroll coordinates of selection",
+      editorNotInit: "Editor not initialized"
     },
     dateRange: {
       rangeSeparator: "To"
@@ -846,7 +847,9 @@ var index = {
       replaceText: "Replace Text",
       copyText: "Copy Text",
       info: "The content is generated by AI, please carefully discern.",
-      stopEdit: "Terminate editing"
+      stopEdit: "Terminate editing",
+      warningTitle: "Confirm termination",
+      warningDesc: "Are you sure to terminate the creation?"
     }
   },
   // runTime

package/lib/locale/zh-CN/index.cjs

@@ -625,7 +625,8 @@ var index = {
       noEditorArea: "\u672A\u627E\u5230\u7F16\u8F91\u5668\u5185\u5BB9\u533A\u57DF",
       noSelStart: "\u672A\u83B7\u53D6\u5230\u5F53\u524D\u9009\u4E2D\u533A\u57DF\u7684\u8D77\u59CB\u4F4D\u7F6E",
       noEditorRect: "\u672A\u83B7\u53D6\u5230\u7F16\u8F91\u5668DOM\u8282\u70B9\u7684\u4F4D\u7F6E\u4FE1\u606F",
-      noSelCoords: "\u672A\u8BA1\u7B97\u51FA\u9009\u4E2D\u4F4D\u7F6E\u7684\u6EDA\u52A8\u53EF\u89C6\u5750\u6807"
+      noSelCoords: "\u672A\u8BA1\u7B97\u51FA\u9009\u4E2D\u4F4D\u7F6E\u7684\u6EDA\u52A8\u53EF\u89C6\u5750\u6807",
+      editorNotInit: "\u7F16\u8F91\u5668\u672A\u521D\u59CB\u5316"
     },
     dateRange: {
       rangeSeparator: "\u81F3"
@@ -842,7 +843,9 @@ var index = {
       replaceText: "\u66FF\u6362\u6587\u672C",
       copyText: "\u590D\u5236\u6587\u672C",
       info: "\u5185\u5BB9\u7531 AI \u751F\u6210\uFF0C\u8BF7\u4ED4\u7EC6\u7504\u522B\u3002",
-      stopEdit: "\u7EC8\u6B62\u7F16\u8F91"
+      stopEdit: "\u7EC8\u6B62\u7F16\u8F91",
+      warningTitle: "\u786E\u8BA4\u4E2D\u6B62",
+      warningDesc: "\u786E\u8BA4\u4E2D\u6B62\u521B\u4F5C\u5417\uFF1F"
     }
   },
   // runTime

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

@@ -54,32 +54,45 @@ const InlineAITextArea = /* @__PURE__ */ vue.defineComponent({
     const ns = vue3Util.useNamespace("inline-ai-textarea-container");
     const containerRef = vue.ref();
     const actionsRef = vue.ref();
+    const textareaRef = vue.ref();
+    const textareaContent = vue.ref(props.content);
+    let question;
+    const contentType = vue.ref("USER");
+    const isLoading = vue.ref(false);
+    const disabled = vue.computed(() => {
+      return contentType.value === "ASSISTANT" || isLoading.value;
+    });
+    const isShow = vue.computed(() => {
+      return contentType.value === "ASSISTANT" && !isLoading.value;
+    });
     const {
       srfaiappendcurdata,
       srfaiautoappend,
-      srfmode
+      srfmode,
+      srfaiagent
     } = inlineAiTextarea_hook.computedInLineAIParams(props);
     const {
+      theme,
       actions,
       actionStyle,
       containerStyle,
       contentStyle
     } = inlineAiTextarea_hook.useBase(props, containerRef, actionsRef);
-    inlineAiTextarea_hook.useInLineAIContainerClick(props);
+    inlineAiTextarea_hook.useInLineAIContainerClick(props, textareaContent, isLoading);
     const {
       askAI
     } = inlineAiTextarea_hook.useAI(props, {
       srfaiappendcurdata,
-      srfmode
-    });
-    const textareaContent = vue.ref(props.content);
-    let question;
-    const contentType = vue.ref("USER");
-    const isLoading = vue.ref(false);
-    const disabled = vue.computed(() => {
-      return contentType.value === "ASSISTANT" || isLoading.value;
+      srfmode,
+      srfaiagent
     });
+    const restoreFocus = () => {
+      var _a;
+      (_a = textareaRef.value) == null ? void 0 : _a.blur();
+      props.restoreSelection();
+    };
     const sendQuestion = async (content) => {
+      restoreFocus();
       question = content;
       textareaContent.value = "";
       isLoading.value = true;
@@ -124,15 +137,22 @@ const InlineAITextArea = /* @__PURE__ */ vue.defineComponent({
       }
     };
     vue.onMounted(() => {
-      if (srfaiautoappend)
+      var _a;
+      if (srfaiautoappend) {
         sendQuestion(textareaContent.value);
+      } else {
+        (_a = textareaRef.value) == null ? void 0 : _a.focus();
+      }
     });
     return {
       ns,
+      theme,
+      isShow,
       actions,
+      disabled,
       isLoading,
       actionsRef,
-      disabled,
+      textareaRef,
       actionStyle,
       contentType,
       containerRef,
@@ -148,8 +168,8 @@ const InlineAITextArea = /* @__PURE__ */ vue.defineComponent({
   render() {
     return vue.createVNode("div", {
       "ref": "containerRef",
-      "class": this.ns.b(),
-      "style": this.containerStyle
+      "style": this.containerStyle,
+      "class": [this.ns.b(), this.ns.m(this.theme), this.ns.is("show-ai", this.isShow)]
     }, [vue.createVNode("div", {
       "class": this.ns.e("content"),
       "style": this.contentStyle
@@ -160,36 +180,31 @@ const InlineAITextArea = /* @__PURE__ */ vue.defineComponent({
     }, [icon.AIIcon])]), vue.createVNode("div", {
       "class": this.ns.em("content", "textarea")
     }, [this.isLoading && vue.createVNode("div", {
-      "class": "el-loading-mask",
-      "style": ""
+      "class": this.ns.e("loading")
     }, [vue.createVNode("div", {
-      "class": "el-loading-spinner"
-    }, [vue.createVNode("svg", {
-      "class": "circular",
-      "viewBox": "0 0 50 50"
-    }, [vue.createVNode("circle", {
-      "class": "path",
-      "cx": "25",
-      "cy": "25",
-      "r": "20",
-      "fill": "none"
-    }, null)])])]), vue.withDirectives(vue.createVNode("textarea", {
+      "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", {
+      "ref": "textareaRef",
       "disabled": this.disabled,
       "onKeydown": this.onKeydown,
       "onUpdate:modelValue": ($event) => this.textareaContent = $event
-    }, null), [[vue.vModelText, this.textareaContent]])]), this.contentType === "USER" && vue.createVNode("div", {
+    }, null), [[vue.vModelText, this.textareaContent]])]), vue.createVNode("div", {
       "class": this.ns.em("content", "suffix")
-    }, [this.isLoading ? vue.createVNode("div", {
+    }, [this.isLoading && vue.createVNode("div", {
       "class": this.ns.em("content", "stop-icon"),
       "onClick": () => this.stopQuestion()
-    }, [icon.StopIcon, vue.createVNode("span", null, [ibiz.i18n.t("util.inlineAiUtil.stopEdit")])]) : vue.createVNode("div", {
+    }, [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])])]), this.contentType === "ASSISTANT" && vue.createVNode("div", {
-      "class": this.ns.e("footer")
+    }, [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", {
       "ref": "actionsRef",
-      "class": [this.ns.e("actions"), this.ns.is("show", this.contentType === "ASSISTANT")],
+      "class": [this.ns.e("actions"), this.ns.is("show", this.isShow)],
       "style": this.actionStyle
     }, [this.actions.map((action) => {
       if (action.itemType === "divider")

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)}.ibiz-inline-ai-container-context-menu .scroll-content{pointer-events:unset}.ibiz-inline-ai-container-context-menu .mx-context-menu{cursor:pointer}.ibiz-inline-ai-textarea-container{position:absolute;z-index:99999999;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:var(--ibiz-color-bg-1);border:1px solid var(--ibiz-color-border);border-radius:var(--ibiz-border-radius-small);box-shadow:rgba(0,0,0,.08) 0 0 16px 0}.ibiz-inline-ai-textarea-container__content{position:relative;display:flex;gap:var(--ibiz-spacing-tight);padding:var(--ibiz-spacing-base-tight)}.ibiz-inline-ai-textarea-container__content--prefix{flex-shrink:0}.ibiz-inline-ai-textarea-container__content--ai-icon{color:var(--ibiz-color-disabled-text)}.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;resize:none;border:none;outline:0}.ibiz-inline-ai-textarea-container__content--textarea textarea:disabled{background-color:var(--ibiz-color-bg-1)}.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-color-primary);cursor:pointer;border-radius:var(--ibiz-spacing-extra-tight)}.ibiz-inline-ai-textarea-container__content--sand-icon:hover{background-color:var(--ibiz-color-primary-light-default)}.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-color-disabled-text);cursor:pointer}.ibiz-inline-ai-textarea-container__content--stop-icon:hover{color:var(--ibiz-color-primary-hover)}.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-color-disabled-text);background-color:var(--ibiz-color-disabled-fill);border-top:1px solid var(--ibiz-color-disabled-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);visibility:hidden;background-color:var(--ibiz-color-bg-1);border:1px solid var(--ibiz-color-border);border-radius:var(--ibiz-border-radius-small);box-shadow:rgba(0,0,0,.08) 0 0 16px 0}.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-color-fill-0)}.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-color-border)}
+.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}

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

@@ -10,14 +10,27 @@ const computedInLineAIParams = (props) => {
   return {
     srfaiappendcurdata: (_a = props.context.srfaiappendcurdata) != null ? _a : true,
     srfaiautoappend: props.params.srfaiautoappend === "true" || props.params.srfaiautoappend === true,
-    srfmode: props.params.srfmode
+    srfmode: props.params.srfmode,
+    srfaiagent: props.params.srfaiagent
   };
 };
-const useInLineAIContainerClick = (props) => {
-  const handclick = (evt) => {
+const useInLineAIContainerClick = (props, content, isLoading) => {
+  const handclick = async (evt) => {
     const target = evt.target;
-    if (!target.closest(".ibiz-inline-ai-textarea-container")) {
-      props.unMountAIChat();
+    if (!target.closest(".ibiz-inline-ai-textarea-container") && !target.closest(".ibiz-inline-ai-alert") && !isLoading.value) {
+      const isChange = props.content !== content.value;
+      let isClose = true;
+      if (isChange) {
+        isClose = await ibiz.confirm.warning({
+          title: ibiz.i18n.t("util.inlineAiUtil.warningTitle"),
+          desc: ibiz.i18n.t("util.inlineAiUtil.warningDesc"),
+          options: {
+            modalClass: "ibiz-inline-ai-alert"
+          }
+        });
+      }
+      if (isClose)
+        props.unMountAIChat();
     }
   };
   vue.onMounted(() => {
@@ -29,7 +42,7 @@ const useInLineAIContainerClick = (props) => {
 };
 const useAI = (props, opts) => {
   const { context, data, deACMode } = props;
-  const { srfaiappendcurdata, srfmode } = opts;
+  const { srfaiappendcurdata, srfmode, srfaiagent } = opts;
   const params = { srfactag: deACMode.codeName };
   const app = ibiz.hub.getApp(deACMode.appId);
   let history = [];
@@ -50,6 +63,8 @@ const useAI = (props, opts) => {
       Object.assign(body, { data });
     if (srfmode)
       Object.assign(body, { mode: srfmode });
+    if (srfaiagent)
+      Object.assign(body, { srfaiagent });
     const response = await app.net.post(path, body, params);
     if (response.ok && Array.isArray(response.data)) {
       history = response.data.filter(
@@ -70,6 +85,8 @@ const useAI = (props, opts) => {
     };
     if (srfmode)
       Object.assign(body, { mode: srfmode });
+    if (srfaiagent)
+      Object.assign(body, { srfaiagent });
     const appDataEntity = await ibiz.hub.getAppDataEntity(
       deACMode.appDataEntityId,
       deACMode.appId
@@ -125,24 +142,47 @@ const useBase = (props, container, target) => {
       actionName: "cancel"
     }
   ];
+  const { options } = props;
+  const editorRect = options.editorElement.getBoundingClientRect();
+  const offsetX = options.left - editorRect.left;
+  const offsetY = options.top - editorRect.top;
+  const theme = options.editorTheme || "light";
   const actionStyle = vue.ref({});
   const containerStyle = vue.ref({
-    width: "".concat(props.options.width, "px"),
-    left: "".concat(props.options.left, "px"),
-    top: "".concat(props.options.top, "px")
+    width: "".concat(options.width, "px"),
+    left: "".concat(options.left, "px"),
+    top: "".concat(options.top, "px")
   });
   const contentStyle = vue.ref({
-    height: "".concat(props.options.height || 80, "px"),
-    "max-height": "".concat(props.options.maxHeight, "px")
+    height: "".concat(options.height || 80, "px"),
+    "max-height": "".concat(options.maxHeight, "px")
   });
-  const calcStyle = (isInit = false) => {
+  const updatePosition = () => {
     if (!container.value || !target.value)
       return;
-    const containerRect = container.value.getBoundingClientRect();
+    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 windowWidth = window.innerWidth;
+    const windowHeight = window.innerHeight;
+    const margin = 8;
+    if (left + containerWidth + margin > windowWidth) {
+      left = windowWidth - containerWidth - margin;
+    } else if (left < margin) {
+      left = margin;
+    }
+    if (top + containerHeight + margin > windowHeight) {
+      top = windowHeight - containerHeight - margin;
+    } else if (top < margin) {
+      top = margin;
+    }
+    containerStyle.value.top = "".concat(top, "px");
+    containerStyle.value.left = "".concat(left, "px");
+    const position = containerHeight + 4;
     const targetHeight = target.value.offsetHeight;
-    const spaceBelow = window.innerHeight - containerRect.bottom;
-    const position = (isInit ? containerRect.height + 41 : containerRect.height) + 4;
-    if (spaceBelow >= targetHeight + 8) {
+    if (windowHeight - (top + containerHeight + targetHeight) > margin) {
       actionStyle.value.top = "".concat(position, "px");
       actionStyle.value.bottom = "auto";
     } else {
@@ -150,15 +190,30 @@ const useBase = (props, container, target) => {
       actionStyle.value.top = "auto";
     }
   };
-  const updatePosition = () => calcStyle();
+  let ticking = false;
+  const optimizedUpdatePosition = () => {
+    if (!ticking) {
+      requestAnimationFrame(() => {
+        updatePosition();
+        ticking = false;
+      });
+      ticking = true;
+    }
+  };
   vue.onMounted(() => {
-    calcStyle(true);
-    window.addEventListener("resize", updatePosition, { passive: true });
+    updatePosition();
+    document.addEventListener("scroll", optimizedUpdatePosition, {
+      capture: true
+    });
+    window.addEventListener("resize", optimizedUpdatePosition);
   });
   vue.onUnmounted(() => {
-    window.removeEventListener("resize", updatePosition);
+    document.removeEventListener("scroll", optimizedUpdatePosition, {
+      capture: true
+    });
+    window.removeEventListener("resize", optimizedUpdatePosition);
   });
-  return { actions, actionStyle, containerStyle, contentStyle };
+  return { theme, actions, actionStyle, containerStyle, contentStyle };
 };
 
 exports.computedInLineAIParams = computedInLineAIParams;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ibiz-template/vue3-components",
-  "version": "0.7.41-alpha.38",
+  "version": "0.7.41-alpha.39",
   "description": "web端组件库(vue3)",
   "main": "lib/index.cjs",
   "module": "es/index.mjs",
@@ -36,10 +36,10 @@
     "@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.37",
-    "@ibiz-template/runtime": "0.7.41-alpha.37",
+    "@ibiz-template/model-helper": "0.7.41-alpha.38",
+    "@ibiz-template/runtime": "0.7.41-alpha.38",
     "@ibiz-template/theme": "0.7.39",
-    "@ibiz-template/vue3-util": "0.7.41-alpha.37",
+    "@ibiz-template/vue3-util": "0.7.41-alpha.38",
     "@ibiz-template/web-theme": "3.9.0",
     "@ibiz/model-core": "^0.1.83",
     "@imengyu/vue3-context-menu": "^1.3.5",

package/dist/ibiz-markdown-editor-qRaayafj.js

@@ -1 +0,0 @@
-System.register(["vue","@ibiz-template/vue3-util","qx-util","cherry-markdown"],function(e){"use strict";var t,i,l,n,o,a,r,s,d,c,u,m,h,f;return{setters:[function(e){t=e.nextTick,i=e.defineComponent,l=e.createVNode,n=e.ref,o=e.watch,a=e.onMounted,r=e.onBeforeUnmount,s=e.onUnmounted},function(e){d=e.getEditorEmits,c=e.getMarkDownProps,u=e.useNamespace,m=e.useUIStore},function(e){h=e.createUUID},function(e){f=e.default}],execute:function(){e("default",i({name:"IBizMarkDown",props:c(),emits:d(),setup(e,{emit:i}){var d,c,v;const b=u("markdown"),p=e.controller,g=n("");let w=null;const k=h(),[C]=function(e){return[f.createMenuHook("AI",{icon:{type:"svg",content:"<svg\n                viewBox='0 0 16 16'\n                xmlns='http://www.w3.org/2000/svg'\n                fill='currentColor'\n                height='1em'\n                width='1em'\n                preserveAspectRatio='xMidYMid meet'\n                focusable='false'\n              >\n                <g\n                  id='aae1.Base基础/1.icon图标/2.normal/ai-star'\n                  stroke-width='1'\n                  fill-rule='evenodd'\n                >\n                  <path\n                    d='M5.817 1.53l3.158 8.797h.054v.152l1.443 4.021-1.402.001-1.041-2.982H2.495l-1.03 2.982L0 14.5 4.671 1.533l1.146-.003zm7.86 5.424V14.5h-1.213V6.954h1.212zM5.248 3.549l-2.342 6.778h4.706L5.249 3.55zM13.046 0c.075 0 .147.02.204.071a.318.318 0 01.094.181l.064.273c.097.417.17.727.255.968.084.24.177.4.31.523.134.124.318.218.599.306.281.088.65.166 1.15.265a.358.358 0 01.195.095c.056.057.083.13.083.213a.289.289 0 01-.083.21.362.362 0 01-.197.094c-.528.093-.918.167-1.214.255-.295.088-.485.187-.621.324-.137.138-.23.324-.31.606-.08.283-.145.651-.23 1.147a.329.329 0 01-.093.184.293.293 0 01-.206.075.308.308 0 01-.207-.072.322.322 0 01-.1-.188l-.006-.033c-.085-.486-.149-.845-.228-1.12-.079-.274-.17-.452-.305-.585-.135-.133-.323-.23-.618-.32s-.683-.168-1.21-.273a.353.353 0 01-.2-.096.29.29 0 01-.08-.208c0-.079.023-.153.079-.211a.35.35 0 01.2-.097c.5-.098.869-.176 1.15-.263.282-.087.465-.18.597-.302.132-.12.224-.278.306-.511.082-.236.151-.539.244-.947l.071-.312a.312.312 0 01.102-.183.311.311 0 01.205-.069z'\n                    id='aae形状结合'\n                  ></path>\n                </g>\n              </svg>\n            "},onClick:(i,l,n)=>{var o,a;const r=null==(o=e.mdeditor)?void 0:o.editor.editor.getCursor("start"),s=null==(a=e.mdeditor)?void 0:a.editor.editor.getCursor("end");e.setCursorPos(r,s),n.stopPropagation(),n.preventDefault(),t(()=>{var t;if(null==(t=e.mdeditor)?void 0:t.bubble){e.mdeditor.bubble.visible=!0;const t=e.mdeditor.bubble.bubbleDom.getBoundingClientRect();if(!t||!t.left||!t.top)return;const i=ibiz.inLineAIUtil.calcContextMenus(e.deACMode,t=>{e.doInLineAIUIAction(t,e.model.appId)});if(0===i.length)return;ibiz.inLineAIUtil.showContextMenus(t.left,t.top+60,i)}})}})]}(p),y=ibiz.util.file.getUploadHeaders(),x=n({...y}),z=n(""),M=(null==(d=null==p?void 0:p.editorParams)?void 0:d.customTheme)||(null==(c=null==p?void 0:p.editorParams)?void 0:c.customtheme),{UIStore:U}=m(),I=n(M||U.theme),P=n(!1);let D="default";p&&(null==(v=p.editorParams)?void 0:v.showmode)&&(D=p.editorParams.showmode);const E=n(!1),T=n("editOnly");let A=null,B=0;const O=n({});let L=!1;o(()=>e.data,e=>{if(e&&p){const t={...p.editorParams};t.uploadparams&&(t.uploadParams=JSON.parse(t.uploadparams));const i=ibiz.util.file.calcFileUpDownUrl(p.context,p.params,e,t);z.value=i.uploadUrl}},{immediate:!0,deep:!0});const N=n(),S=async(t,i)=>{const l=await ibiz.util.file.fileUpload(z.value,t,x.value),n=((e,t)=>{if(!p)return"";const i={...p.editorParams};return i.exportparams&&(i.exportParams=JSON.parse(i.exportparams)),t&&t.folder&&(i.osscat=t.folder),ibiz.util.file.calcFileUpDownUrl(p.context,p.params,e,i).downloadUrl})(e.data||{},l.fileid);let o=n.replace("%fileId%",l.fileid);if(ibiz.config.common.enableDownloadTicket&&p){const t=await ibiz.util.file.getDownloadTicket(p.context,p.params,e.data||{},{fileId:l.fileid},p.downloadTicketParams);t&&t.ticket&&(o=n.replace("%fileId%",t.ticket),i(o))}else i(o)},H=()=>null==w?void 0:w.getMarkdown(),V=e=>{L=!0,null==w||w.setMarkdown(e,!0)};o(()=>e.value,(e,t)=>{e!==t&&(g.value=e||"")},{immediate:!0}),o(g,(e,t)=>{const i=H();e!==t&&i!==e&&V(e)});const R=e=>{"manual"!==D&&(i("change",H(),null==p?void 0:p.model.id,L),L=!1)},q=(e,t)=>({[e]:t}),F=(e,t="")=>{const i=document.createElement(e);return i.className=t,i},j=e=>F("i","ch-icon ch-icon-".concat(e)),J=b.e("fullscreen"),W=e=>{for(;e.firstChild;)e.removeChild(e.firstChild)},Y=()=>{if(w&&N.value){const e=w.editor.options.editorDom.parentElement;if(!e)return{};const t=e.classList,i=N.value.querySelector(".".concat(J));return i?{parentElement:e,cherryClass:t,fullscreenNode:i}:{}}return{}},G=()=>{const{parentElement:e,cherryClass:t,fullscreenNode:i}=Y();e&&t&&i&&(W(i),i.appendChild(j("fullscreen")),i.title=ibiz.i18n.t("editor.common.fullscreen"),t.remove("fullscreen"),null==e||e.blur(),e.setAttribute("tabindex","-1"))},K=()=>{const{cherryClass:e}=Y();return null==e?void 0:e.contains("fullscreen")},Q=()=>{w&&N.value&&(K()?(G(),E.value=!1):((()=>{const{parentElement:e,cherryClass:i,fullscreenNode:l}=Y();e&&i&&l&&(W(l),l.appendChild(j("minscreen")),i.add("fullscreen"),l.title=ibiz.i18n.t("editor.common.minimize"),e.setAttribute("tabindex","-1"),t(()=>null==e?void 0:e.focus()))})(),E.value=!0))},X=e=>{e.stopPropagation(),"Escape"===e.key&&K()&&(G(),E.value=!1)};o(()=>U.theme,e=>{I.value=M||e,null==w||w.setTheme(I.value),null==w||w.setCodeBlockTheme(I.value)});const Z=()=>{P.value=!0,T.value="editOnly",null==w||w.switchModel(T.value)},$=()=>{P.value=!1,T.value="previewOnly",null==w||w.switchModel(T.value)},_=()=>{V(g.value),$()},ee=()=>{i("change",H(),null==p?void 0:p.model.id,L),L=!1,$()};return a(()=>{(e.disabled||e.readonly||"manual"===D)&&(T.value="previewOnly"),t(()=>{var t;const i=["bold","italic","underline","strikethrough","sub","sup","|","size","color"];p.editorParams.ac&&p.deACMode&&i.unshift("AI"),w=new f({id:k,value:g.value,previewer:{enablePreviewerBubble:!(e.disabled||e.readonly)},themeSettings:{mainTheme:I.value,codeBlockTheme:I.value},fileUpload:S,emoji:{useUnicode:!0},header:{anchorStyle:"autonumber"},editor:{height:"100%",defaultModel:T.value,codemirror:{autofocus:!1}},toolbars:{toolbar:["bold","italic","underline","strikethrough","|","color","header","|","list","image",{insert:["link","hr","br","code","formula","toc","table","line-table","bar-table"]},"settings","togglePreview"],bubble:i,float:["h1","h2","h3","|","checklist","quote","quickTable","code"],customMenu:{AI:C},sidebar:["theme","copy"],toolbarRight:[],toc:{updateLocationHash:!1,defaultModel:"pure",showAutoNumber:!0,position:"absolute",cssText:""}},callback:{afterChange:R,beforeImageMounted:q},engine:{syntax:{table:{enableChart:!1,externals:["echarts"]}}}}),w.setTheme(I.value),M&&(w.setTheme(M),w.setCodeBlockTheme(M));const l=F("span","".concat(J," cherry-toolbar-button"));l.title=ibiz.i18n.t("editor.common.fullscreen"),l.onclick=Q,l.appendChild(j("fullscreen"));const n=e.disabled?w.editor.options.editorDom.parentElement:null==(t=w.editor.options.editorDom.parentElement)?void 0:t.querySelector(".cherry-toolbar>.toolbar-right");null==n||n.appendChild(l),p.setMDEditor(w)}),(()=>{if(window.ResizeObserver&&N.value){const e={width:N.value.offsetWidth?"".concat(N.value.offsetWidth,"px"):"100%"};p&&"number"==typeof p.parent.model.height&&Object.assign(e,{height:"".concat(p.parent.model.height,"px")}),O.value=b.cssVarBlock(e),A=new ResizeObserver(e=>{const t=e[0].contentRect.width;if(t!==B){const i={width:"".concat(e[0].contentRect.width,"px")};p&&"number"==typeof p.parent.model.height&&Object.assign(i,{height:"".concat(p.parent.model.height,"px")}),O.value=b.cssVarBlock(i),B=t}}),A.observe(N.value)}})(),document.addEventListener("keydown",X.bind(this))}),r(()=>{document.removeEventListener("keydown",X.bind(this))}),s(()=>{w=null,A&&A.disconnect()}),{ns:b,currentVal:g,id:k,editor:w,markDownBox:N,headers:x,theme:I,defaultModel:T,cssVars:O,isEditing:P,showmode:D,getCherryHtml:()=>null==w?void 0:w.getHtml(),getCherryContent:H,setCherryContent:V,renderHeader:()=>{if("manual"===D&&!P.value)return l("div",{class:[b.e("header"),b.is("fullscreen",E.value)]},[!e.disabled&&!e.readonly&&l("div",{class:b.em("header","edit"),onClick:Z,title:ibiz.i18n.t("editor.markdown.edit")},[l("i",{class:"fa fa-edit","aria-hidden":"true"},null)]),l("div",{class:b.em("header","full"),onClick:Q},[E.value?l("i",{class:"fa fa-compress","aria-hidden":"true",title:ibiz.i18n.t("editor.html.reduce")},null):l("i",{class:"fa fa-expand","aria-hidden":"true",title:ibiz.i18n.t("editor.common.fullscreen")},null)])])},renderFooter:()=>{if("manual"===D&&P.value&&!e.disabled&&!e.readonly)return l("div",{class:[b.e("footer"),b.is("fullscreen",E.value)]},[l("div",{class:b.em("footer","cancel"),onClick:_},[ibiz.i18n.t("editor.common.cancel")]),l("div",{class:b.em("footer","save"),onClick:ee},[ibiz.i18n.t("editor.common.confirm")])])}}},render(){return l("div",{ref:"markDownBox",class:[this.ns.b(),this.ns.is("disabled",this.disabled),this.ns.is("manual","manual"===this.showmode),this.ns.is("editing",this.isEditing)]},[this.renderHeader(),this.renderFooter(),l("div",{id:this.id,style:this.cssVars,class:this.ns.b("cherry")},null)])}}))}}});