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

package/es/editor/markdown/markdown-editor.controller.mjs

@@ -89,6 +89,20 @@ class MarkDownEditorController extends 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();
@@ -174,6 +188,33 @@ class MarkDownEditorController extends 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";
+  }
   /**
    * 获取选中文本
    *
@@ -184,6 +225,30 @@ class MarkDownEditorController extends 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;
+  }
   /**
    * 插入文本
    *
@@ -191,8 +256,32 @@ class MarkDownEditorController extends 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();
+    }
   }
   /**
    * 替换选中文本
@@ -223,14 +312,30 @@ class MarkDownEditorController extends 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/es/locale/en/index.mjs

@@ -625,7 +625,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"
@@ -842,7 +843,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/es/locale/zh-CN/index.mjs

@@ -621,7 +621,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"
@@ -838,7 +839,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/es/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/es/util/inline-ai-util/inline-ai-textarea/inline-ai-textarea.hook.mjs

@@ -8,14 +8,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();
     }
   };
   onMounted(() => {
@@ -27,7 +40,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 = [];
@@ -48,6 +61,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(
@@ -68,6 +83,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
@@ -123,24 +140,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 = ref({});
   const containerStyle = 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 = 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 {
@@ -148,15 +188,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;
+    }
+  };
   onMounted(() => {
-    calcStyle(true);
-    window.addEventListener("resize", updatePosition, { passive: true });
+    updatePosition();
+    document.addEventListener("scroll", optimizedUpdatePosition, {
+      capture: true
+    });
+    window.addEventListener("resize", optimizedUpdatePosition);
   });
   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 };
 };
 
 export { computedInLineAIParams, useAI, useBase, useInLineAIContainerClick };

package/es/util/inline-ai-util/inline-ai-textarea/inline-ai-textarea.mjs

@@ -52,32 +52,45 @@ const InlineAITextArea = /* @__PURE__ */ defineComponent({
     const ns = useNamespace("inline-ai-textarea-container");
     const containerRef = ref();
     const actionsRef = ref();
+    const textareaRef = ref();
+    const textareaContent = ref(props.content);
+    let question;
+    const contentType = ref("USER");
+    const isLoading = ref(false);
+    const disabled = computed(() => {
+      return contentType.value === "ASSISTANT" || isLoading.value;
+    });
+    const isShow = computed(() => {
+      return contentType.value === "ASSISTANT" && !isLoading.value;
+    });
     const {
       srfaiappendcurdata,
       srfaiautoappend,
-      srfmode
+      srfmode,
+      srfaiagent
     } = computedInLineAIParams(props);
     const {
+      theme,
       actions,
       actionStyle,
       containerStyle,
       contentStyle
     } = useBase(props, containerRef, actionsRef);
-    useInLineAIContainerClick(props);
+    useInLineAIContainerClick(props, textareaContent, isLoading);
     const {
       askAI
     } = useAI(props, {
       srfaiappendcurdata,
-      srfmode
-    });
-    const textareaContent = ref(props.content);
-    let question;
-    const contentType = ref("USER");
-    const isLoading = ref(false);
-    const disabled = 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;
@@ -122,15 +135,22 @@ const InlineAITextArea = /* @__PURE__ */ defineComponent({
       }
     };
     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,
@@ -146,8 +166,8 @@ const InlineAITextArea = /* @__PURE__ */ defineComponent({
   render() {
     return 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)]
     }, [createVNode("div", {
       "class": this.ns.e("content"),
       "style": this.contentStyle
@@ -158,36 +178,31 @@ const InlineAITextArea = /* @__PURE__ */ defineComponent({
     }, [AIIcon])]), createVNode("div", {
       "class": this.ns.em("content", "textarea")
     }, [this.isLoading && createVNode("div", {
-      "class": "el-loading-mask",
-      "style": ""
+      "class": this.ns.e("loading")
     }, [createVNode("div", {
-      "class": "el-loading-spinner"
-    }, [createVNode("svg", {
-      "class": "circular",
-      "viewBox": "0 0 50 50"
-    }, [createVNode("circle", {
-      "class": "path",
-      "cx": "25",
-      "cy": "25",
-      "r": "20",
-      "fill": "none"
-    }, null)])])]), withDirectives(createVNode("textarea", {
+      "class": this.ns.em("loading", "dot")
+    }, null), createVNode("div", {
+      "class": this.ns.em("loading", "dot")
+    }, null), createVNode("div", {
+      "class": this.ns.em("loading", "dot")
+    }, null)]), withDirectives(createVNode("textarea", {
+      "ref": "textareaRef",
       "disabled": this.disabled,
       "onKeydown": this.onKeydown,
       "onUpdate:modelValue": ($event) => this.textareaContent = $event
-    }, null), [[vModelText, this.textareaContent]])]), this.contentType === "USER" && createVNode("div", {
+    }, null), [[vModelText, this.textareaContent]])]), createVNode("div", {
       "class": this.ns.em("content", "suffix")
-    }, [this.isLoading ? createVNode("div", {
+    }, [this.isLoading && createVNode("div", {
       "class": this.ns.em("content", "stop-icon"),
       "onClick": () => this.stopQuestion()
-    }, [StopIcon, createVNode("span", null, [ibiz.i18n.t("util.inlineAiUtil.stopEdit")])]) : createVNode("div", {
+    }, [StopIcon, createVNode("span", null, [ibiz.i18n.t("util.inlineAiUtil.stopEdit")])]), !this.disabled && createVNode("div", {
       "class": this.ns.em("content", "sand-icon"),
       "onClick": () => this.sendQuestion(this.textareaContent)
-    }, [SendIcon])])]), this.contentType === "ASSISTANT" && createVNode("div", {
-      "class": this.ns.e("footer")
+    }, [SendIcon])])]), createVNode("div", {
+      "class": [this.ns.e("footer"), this.ns.is("show", this.isShow)]
     }, [ibiz.i18n.t("util.inlineAiUtil.info")]), 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/control/form/form-detail/form-item/form-item-container/form-item-container.cjs

@@ -56,7 +56,7 @@ const IBizFormItemContainer = /* @__PURE__ */ vue.defineComponent({
           }, null);
       }
     };
-    const renderInputTip = () => {
+    const renderTipsIcon = () => {
       return vue.createVNode(vue.resolveComponent("el-tooltip"), {
         "effect": "light",
         "visible": visible.value,
@@ -66,16 +66,42 @@ const IBizFormItemContainer = /* @__PURE__ */ vue.defineComponent({
         "placement": labelPos === "RIGHT" ? "right" : "left"
       }, {
         default: () => {
-          return vue.createVNode("div", {
-            "class": [ns.em("label", "content"), ns.is("tooltip", enableInputTip)]
-          }, [enableInputTip && ibiz.config.form.showTipsIcon && vue.createVNode("ion-icon", {
+          return vue.createVNode("ion-icon", {
             "name": "bulb-outline",
             "class": ns.em("label", "icon")
-          }, null), sysImage && vue.createVNode(vue3Util.IBizIcon, {
+          }, null);
+        },
+        content: () => {
+          return vue.createVNode("div", {
+            "class": ns.em("popper", "content")
+          }, [vue.createVNode("div", {
+            "class": ns.em("popper", "tooltip")
+          }, [renderTipContent()]), c.state.inputTipUrl && vue.createVNode("a", {
+            "target": "_blank",
+            "href": c.state.inputTipUrl,
+            "title": ibiz.i18n.t("component.formItemContainer.more")
+          }, [ibiz.i18n.t("component.formItemContainer.more")])]);
+        }
+      });
+    };
+    const renderLabelWithoutTips = () => {
+      return vue.createVNode(vue.resolveComponent("el-tooltip"), {
+        "effect": "light",
+        "visible": visible.value,
+        "onUpdate:visible": ($event) => visible.value = $event,
+        "popper-class": [ns.e("popper"), ns.is(ibiz.config.tooltiprendermode.toLowerCase(), true)],
+        "disabled": !enableInputTip,
+        "placement": labelPos === "RIGHT" ? "right" : "left"
+      }, {
+        default: () => {
+          return vue.createVNode("div", {
+            "class": [ns.em("label", "content"), ns.is("tooltip", enableInputTip)]
+          }, [sysImage && vue.createVNode(vue3Util.IBizIcon, {
             "class": ns.em("label", "icon"),
             "icon": sysImage
           }, null), vue.createVNode("div", {
-            "class": ns.em("label", "text")
+            "class": ns.em("label", "text"),
+            "title": enableInputTip ? void 0 : core.showTitle(c.labelCaption)
           }, [c.labelCaption])]);
         },
         content: () => {
@@ -92,10 +118,18 @@ const IBizFormItemContainer = /* @__PURE__ */ vue.defineComponent({
       });
     };
     const renderLabel = () => {
+      const showTipsIcon = enableInputTip && ibiz.config.form.showTipsIcon;
       return vue.createVNode("div", {
-        "title": enableInputTip ? void 0 : core.showTitle(c.labelCaption),
         "class": [ns.e("label"), ...c.labelClass || []]
-      }, [renderInputTip()]);
+      }, [showTipsIcon && vue.createVNode("div", {
+        "class": [ns.em("label", "content"), ns.is("tooltip", enableInputTip)]
+      }, [renderTipsIcon(), sysImage && vue.createVNode(vue3Util.IBizIcon, {
+        "class": ns.em("label", "icon"),
+        "icon": sysImage
+      }, null), vue.createVNode("div", {
+        "class": ns.em("label", "text"),
+        "title": core.showTitle(c.labelCaption)
+      }, [c.labelCaption])]), !showTipsIcon && renderLabelWithoutTips()]);
     };
     return {
       ns,