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

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

@@ -0,0 +1,142 @@
+import { createVNode } from 'vue';
+
+"use strict";
+const StopIcon = createVNode("svg", {
+  "class": "icon",
+  "viewBox": "0 0 1040 1024",
+  "version": "1.1",
+  "xmlns": "http://www.w3.org/2000/svg",
+  "p-id": "12982",
+  "width": "16",
+  "height": "16",
+  "fill": "currentColor"
+}, [createVNode("path", {
+  "d": "M528 960C280.576 960 80 759.424 80 512S280.576 64 528 64s448 200.576 448 448-200.576 448-448 448z m-80-592a64 64 0 0 0-64 64v160a64 64 0 0 0 64 64h160a64 64 0 0 0 64-64V432a64 64 0 0 0-64-64H448z",
+  "p-id": "12983"
+}, null)]);
+const AIIcon = createVNode("svg", {
+  "id": "ai",
+  "viewBox": "0 0 16 16",
+  "xmlns": "http://www.w3.org/2000/svg",
+  "width": "16",
+  "height": "16",
+  "preserveAspectRatio": "xMidYMid meet",
+  "focusable": "false",
+  "fill": "currentColor"
+}, [createVNode("g", {
+  "id": "aae1.Base\u57FA\u7840/1.icon\u56FE\u6807/2.normal/ai-star",
+  "stroke-width": "1",
+  "fill-rule": "evenodd"
+}, [createVNode("path", {
+  "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",
+  "id": "aae\u5F62\u72B6\u7ED3\u5408"
+}, null)])]);
+const SendIcon = createVNode("svg", {
+  "id": "send",
+  "viewBox": "0 0 16 16",
+  "version": "1.1",
+  "xmlns": "http://www.w3.org/2000/svg",
+  "width": "16",
+  "height": "16",
+  "preserveAspectRatio": "xMidYMid meet",
+  "focusable": "false",
+  "fill": "currentColor"
+}, [createVNode("g", {
+  "id": "az1.Base\u57FA\u7840/1.icon\u56FE\u6807/2.normal/airplane-fill",
+  "stroke-width": "1",
+  "fill-rule": "evenodd"
+}, [createVNode("path", {
+  "d": "M9.09609607,13.5642768 L13.2170975,15.5669393 C13.4741816,15.6766453 13.7609293,15.517073 13.8004807,15.2378214 L15.9955838,0.48735567 C16.0450231,0.138291234 15.6692847,-0.121013775 15.3726492,0.0585050774 L0.20432945,7.12444843 C-0.0824182488,7.29399401 -0.0626425454,7.7228446 0.233993005,7.87244365 L4.41476499,10.6518549 C4.57297062,10.7216678 4.75095195,10.7017213 4.87949402,10.5820421 L11.7317893,4.66709687 C11.7735964,4.63100873 11.8367429,4.63564485 11.872831,4.67745192 C11.9046123,4.71426959 11.9052944,4.76861446 11.8744472,4.80621817 L5.83087229,12.1735275 L5.83087229,12.1735275 C5.77154518,12.2433404 5.74188162,12.3330998 5.74188162,12.4228593 L5.3388256,15.5669393 C5.32893775,15.9658701 5.82333033,16.1553622 6.08041448,15.8461909 L8.63136704,13.683956 C8.73024556,13.5443302 8.92800259,13.4944639 9.09609607,13.5642768 Z",
+  "id": "az\u8DEF\u5F84"
+}, null)])]);
+const RegenerateIcon = createVNode("svg", {
+  "viewBox": "0 0 16 16",
+  "xmlns": "http://www.w3.org/2000/svg",
+  "width": "16",
+  "height": "16",
+  "preserveAspectRatio": "xMidYMid meet",
+  "focusable": "false",
+  "fill": "currentColor"
+}, [createVNode("g", {
+  "id": "avf1.Base\u57FA\u7840/1.icon\u56FE\u6807/11.editor/redo",
+  "stroke-width": "1",
+  "fill-rule": "evenodd"
+}, [createVNode("g", {
+  "id": "avf\u7F16\u7EC4",
+  "transform": "matrix(-1 0 0 1 15.015 1)"
+}, [createVNode("path", {
+  "d": "M3.84 5.825a.6.6 0 01.063.774l-.064.075a.6.6 0 01-.774.063l-.074-.063L.176 3.859a.6.6 0 01-.064-.775l.064-.074L3.01.176a.6.6 0 01.912.774l-.063.074-1.795 1.794h6.851a5.1 5.1 0 01.216 10.196l-.216.004h-4a.6.6 0 01-.097-1.192l.097-.008h4a3.9 3.9 0 00.201-7.795l-.2-.005H2.033l1.805 1.807z",
+  "id": "avf\u5F62\u72B6\u7ED3\u5408"
+}, null)])])]);
+const insertTextIcon = createVNode("svg", {
+  "viewBox": "0 0 16 16",
+  "version": "1.1",
+  "xmlns": "http://www.w3.org/2000/svg",
+  "fill": "currentColor",
+  "width": "16",
+  "height": "16",
+  "preserveAspectRatio": "xMidYMid meet",
+  "focusable": "false"
+}, [createVNode("g", {
+  "id": "ae1.Base\u57FA\u7840/1.icon\u56FE\u6807/2.normal/insert-below",
+  "stroke-width": "1",
+  "fill-rule": "evenodd"
+}, [createVNode("path", {
+  "d": "M13.4,12.7902394 C13.7313708,12.7902394 14,13.0588685 14,13.3902394 C14,13.7216102 13.7313708,13.9902394 13.4,13.9902394 L9.61247231,13.9902394 C9.28110146,13.9902394 9.01247231,13.7216102 9.01247231,13.3902394 C9.01247231,13.0588685 9.28110146,12.7902394 9.61247231,12.7902394 L13.4,12.7902394 Z M2.64424308,9.33926858 C2.97561393,9.33926858 3.24424308,9.60789773 3.24424308,9.93926858 L3.24424308,11.3602686 L5.96531725,11.3599906 L5.33280173,10.7263268 C5.12191861,10.5154437 5.1008303,10.1866372 5.2695368,9.95216939 L5.33280173,9.87779866 C5.56711631,9.64348408 5.94701529,9.64348408 6.18132987,9.87779866 L7.8400676,11.5365364 C8.07438217,11.770851 8.07438217,12.1507499 7.8400676,12.3850645 L6.4106287,13.8145034 C6.17631412,14.048818 5.79641514,14.048818 5.56210056,13.8145034 C5.32778599,13.5801888 5.32778599,13.2002899 5.56210056,12.9659753 L5.96631725,12.5599906 L2.64424308,12.5608005 C2.31287223,12.5608005 2.04424308,12.2921713 2.04424308,11.9608005 L2.04424308,9.93926858 C2.04424308,9.60789773 2.31287223,9.33926858 2.64424308,9.33926858 Z M13.4,9.19548978 C13.7313708,9.19548978 14,9.46411893 14,9.79548978 C14,10.1268606 13.7313708,10.3954898 13.4,10.3954898 L9.61247231,10.3954898 C9.28110146,10.3954898 9.01247231,10.1268606 9.01247231,9.79548978 C9.01247231,9.46411893 9.28110146,9.19548978 9.61247231,9.19548978 L13.4,9.19548978 Z M13.4,5.60074021 C13.7313708,5.60074021 14,5.86936936 14,6.20074021 C14,6.53211106 13.7313708,6.80074021 13.4,6.80074021 L2.61931725,6.80074021 C2.2879464,6.80074021 2.01931725,6.53211106 2.01931725,6.20074021 C2.01931725,5.86936936 2.2879464,5.60074021 2.61931725,5.60074021 L13.4,5.60074021 Z M13.4,2.00599065 C13.7313708,2.00599065 14,2.2746198 14,2.60599065 C14,2.9373615 13.7313708,3.20599065 13.4,3.20599065 L2.61931725,3.20599065 C2.2879464,3.20599065 2.01931725,2.9373615 2.01931725,2.60599065 C2.01931725,2.2746198 2.2879464,2.00599065 2.61931725,2.00599065 L13.4,2.00599065 Z",
+  "id": "ae\u5F62\u72B6\u7ED3\u5408"
+}, null)])]);
+const ReplaceTextIcon = createVNode("svg", {
+  "viewBox": "0 0 16 16",
+  "version": "1.1",
+  "xmlns": "http://www.w3.org/2000/svg",
+  "fill": "currentColor",
+  "width": "16",
+  "height": "16",
+  "preserveAspectRatio": "xMidYMid meet",
+  "focusable": "false"
+}, [createVNode("g", {
+  "id": "ao1.Base\u57FA\u7840/1.icon\u56FE\u6807/2.normal/replace-selection",
+  "stroke-width": "1",
+  "fill-rule": "evenodd"
+}, [createVNode("path", {
+  "d": "M6.61931725,12.8 C6.9506881,12.8 7.21931725,13.0686292 7.21931725,13.4 C7.21931725,13.7313708 6.9506881,14 6.61931725,14 L2.61931725,14 C2.2879464,14 2.01931725,13.7313708 2.01931725,13.4 C2.01931725,13.0686292 2.2879464,12.8 2.61931725,12.8 L6.61931725,12.8 Z M13.882771,9.53617937 L13.9544547,9.59882598 C14.2050411,9.8494124 14.2259233,10.2427187 14.0171013,10.5170918 L13.9544547,10.5887755 L10.6802912,13.862939 C10.6039101,13.93932 10.4806802,13.9412495 10.4019453,13.8672971 L8.52941673,12.1085105 C8.24762538,11.8438358 8.23374956,11.4008376 8.49842422,11.1190462 C8.74104265,10.8607375 9.13350242,10.8275522 9.41427862,11.027682 L9.48788845,11.0880537 L10.5124867,12.0507581 L12.9645052,9.59882598 C13.2150916,9.34823956 13.608398,9.32735736 13.882771,9.53617937 Z M6.61931725,9.20415791 C6.9506881,9.20415791 7.21931725,9.47278706 7.21931725,9.80415791 C7.21931725,10.1355288 6.9506881,10.4041579 6.61931725,10.4041579 L2.61931725,10.4041579 C2.2879464,10.4041579 2.01931725,10.1355288 2.01931725,9.80415791 C2.01931725,9.47278706 2.2879464,9.20415791 2.61931725,9.20415791 L6.61931725,9.20415791 Z M13.4,5.60831582 C13.7313708,5.60831582 14,5.87694497 14,6.20831582 C14,6.53968667 13.7313708,6.80831582 13.4,6.80831582 L2.61931725,6.80831582 C2.2879464,6.80831582 2.01931725,6.53968667 2.01931725,6.20831582 C2.01931725,5.87694497 2.2879464,5.60831582 2.61931725,5.60831582 L13.4,5.60831582 Z M13.4,2.01247373 C13.7313708,2.01247373 14,2.28110288 14,2.61247373 C14,2.94384458 13.7313708,3.21247373 13.4,3.21247373 L2.61931725,3.21247373 C2.2879464,3.21247373 2.01931725,2.94384458 2.01931725,2.61247373 C2.01931725,2.28110288 2.2879464,2.01247373 2.61931725,2.01247373 L13.4,2.01247373 Z",
+  "id": "ao\u5F62\u72B6\u7ED3\u5408"
+}, null)])]);
+const CopyTextIcon = createVNode("svg", {
+  "viewBox": "0 0 16 16",
+  "xmlns": "http://www.w3.org/2000/svg",
+  "fill": "currentColor",
+  "width": "16",
+  "height": "16",
+  "preserveAspectRatio": "xMidYMid meet",
+  "focusable": "false"
+}, [createVNode("g", {
+  "id": "aiqaction/copy",
+  "stroke-width": "1",
+  "fill-rule": "evenodd"
+}, [createVNode("g", {
+  "id": "aiq\u590D\u5236",
+  "transform": "translate(2 -.27)",
+  "fill-rule": "nonzero"
+}, [createVNode("path", {
+  "d": "M5.6 8.47v-1.2h4.174v1.2H5.6zm0 3v-1.2h4.174v1.2H5.6zm-4.4-10v10.075H0L.003 2.27c0-1.088.895-2 1.997-2h7.585v1.2H1.2zm1.8.8h9a1 1 0 011 1v12a1 1 0 01-1 1H3a1 1 0 01-1-1v-12a1 1 0 011-1zm.2 1.2v11.6h8.6V3.47H3.2z",
+  "id": "aiq\u5F62\u72B6\u7ED3\u5408"
+}, null)])])]);
+const CancelIcon = createVNode("svg", {
+  "viewBox": "0 0 16 16",
+  "xmlns": "http://www.w3.org/2000/svg",
+  "fill": "currentColor",
+  "width": "16",
+  "height": "16",
+  "preserveAspectRatio": "xMidYMid meet",
+  "focusable": "false"
+}, [createVNode("g", {
+  "id": "bbhaction/trash",
+  "stroke-width": "1",
+  "fill-rule": "evenodd"
+}, [createVNode("path", {
+  "d": "M4.002 3.403V1a1 1 0 011-1h6.003a1 1 0 011 1v2.403h3.396a.6.6 0 110 1.2h-1.395V15a1 1 0 01-1 1H3a1 1 0 01-1-1V4.603H.6a.6.6 0 110-1.2h3.4zm8.804 1.205H3.2V14.8h9.605V4.608zM5.202 1.2v2.155h5.603V1.2H5.202zm.6 6.417a.6.6 0 011.201 0v4.758a.6.6 0 01-1.2 0V7.617zm3.202 0a.6.6 0 011.2 0v4.758a.6.6 0 01-1.2 0V7.617z",
+  "id": "bbh\u5220\u9664"
+}, null)])]);
+
+export { AIIcon, CancelIcon, CopyTextIcon, RegenerateIcon, ReplaceTextIcon, SendIcon, StopIcon, insertTextIcon };

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

@@ -0,0 +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)}

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

@@ -0,0 +1,162 @@
+import { onMounted, onUnmounted, ref } from 'vue';
+import { calcResPath } from '@ibiz-template/runtime';
+import { RegenerateIcon, insertTextIcon, ReplaceTextIcon, CopyTextIcon, CancelIcon } from './icon.mjs';
+
+"use strict";
+const computedInLineAIParams = (props) => {
+  var _a;
+  return {
+    srfaiappendcurdata: (_a = props.context.srfaiappendcurdata) != null ? _a : true,
+    srfaiautoappend: props.params.srfaiautoappend === "true" || props.params.srfaiautoappend === true,
+    srfmode: props.params.srfmode
+  };
+};
+const useInLineAIContainerClick = (props) => {
+  const handclick = (evt) => {
+    const target = evt.target;
+    if (!target.closest(".ibiz-inline-ai-textarea-container")) {
+      props.unMountAIChat();
+    }
+  };
+  onMounted(() => {
+    document.addEventListener("click", handclick, true);
+  });
+  onUnmounted(() => {
+    document.removeEventListener("click", handclick, true);
+  });
+};
+const useAI = (props, opts) => {
+  const { context, data, deACMode } = props;
+  const { srfaiappendcurdata, srfmode } = opts;
+  const params = { srfactag: deACMode.codeName };
+  const app = ibiz.hub.getApp(deACMode.appId);
+  let history = [];
+  const calcAIPath = (appDataEntity, isHistories = false) => {
+    const srfkey = context[appDataEntity.codeName.toLowerCase()];
+    const curPath = "/".concat(appDataEntity.deapicodeName2, "/chatcompletion").concat(isHistories ? "/histories" : "").concat(srfkey ? "/".concat(srfkey) : "");
+    const resPath = calcResPath(context, appDataEntity);
+    return resPath ? "/".concat(resPath).concat(curPath) : "".concat(curPath);
+  };
+  const loadAiHistory = async () => {
+    const appDataEntity = await ibiz.hub.getAppDataEntity(
+      deACMode.appDataEntityId,
+      deACMode.appId
+    );
+    const path = calcAIPath(appDataEntity, true);
+    const body = {};
+    if (srfaiappendcurdata)
+      Object.assign(body, { data });
+    if (srfmode)
+      Object.assign(body, { mode: srfmode });
+    const response = await app.net.post(path, body, params);
+    if (response.ok && Array.isArray(response.data)) {
+      history = response.data.filter(
+        (item) => ["USER", "ASSISTANT"].includes(item.role)
+      );
+    }
+  };
+  const askAI = async (content) => {
+    var _a, _b;
+    const body = {
+      messages: [
+        ...history,
+        {
+          role: "USER",
+          content
+        }
+      ]
+    };
+    if (srfmode)
+      Object.assign(body, { mode: srfmode });
+    const appDataEntity = await ibiz.hub.getAppDataEntity(
+      deACMode.appDataEntityId,
+      deACMode.appId
+    );
+    const path = calcAIPath(appDataEntity);
+    const response = await app.net.post(path, body, params);
+    if (response.ok) {
+      const result = (_b = (_a = response.data.choices) == null ? void 0 : _a[0]) == null ? void 0 : _b.content;
+      return result;
+    }
+    return "";
+  };
+  onMounted(() => {
+    loadAiHistory();
+  });
+  return {
+    askAI
+  };
+};
+const useBase = (props, container, target) => {
+  const actions = [
+    {
+      title: ibiz.i18n.t("util.inlineAiUtil.regenerate"),
+      icon: RegenerateIcon,
+      itemType: "action",
+      actionName: "regenerate"
+    },
+    {
+      title: ibiz.i18n.t("util.inlineAiUtil.insertText"),
+      icon: insertTextIcon,
+      itemType: "action",
+      actionName: "insertText"
+    },
+    {
+      title: ibiz.i18n.t("util.inlineAiUtil.replaceText"),
+      icon: ReplaceTextIcon,
+      itemType: "action",
+      actionName: "replaceText"
+    },
+    {
+      itemType: "divider"
+    },
+    {
+      title: ibiz.i18n.t("util.inlineAiUtil.copyText"),
+      icon: CopyTextIcon,
+      itemType: "action",
+      actionName: "copyText"
+    },
+    {
+      title: ibiz.i18n.t("app.cancel"),
+      icon: CancelIcon,
+      itemType: "action",
+      actionName: "cancel"
+    }
+  ];
+  const actionStyle = ref({});
+  const containerStyle = ref({
+    width: "".concat(props.options.width, "px"),
+    left: "".concat(props.options.left, "px"),
+    top: "".concat(props.options.top, "px")
+  });
+  const contentStyle = ref({
+    height: "".concat(props.options.height || 80, "px"),
+    "max-height": "".concat(props.options.maxHeight, "px")
+  });
+  const calcStyle = (isInit = false) => {
+    if (!container.value || !target.value)
+      return;
+    const containerRect = container.value.getBoundingClientRect();
+    const targetHeight = target.value.offsetHeight;
+    const spaceBelow = window.innerHeight - containerRect.bottom;
+    const position = (isInit ? containerRect.height + 41 : containerRect.height) + 4;
+    if (spaceBelow >= targetHeight + 8) {
+      actionStyle.value.top = "".concat(position, "px");
+      actionStyle.value.bottom = "auto";
+    } else {
+      actionStyle.value.bottom = "".concat(position, "px");
+      actionStyle.value.top = "auto";
+    }
+  };
+  const updatePosition = () => calcStyle();
+  onMounted(() => {
+    calcStyle(true);
+    window.addEventListener("resize", updatePosition, { passive: true });
+  });
+  onUnmounted(() => {
+    window.removeEventListener("resize", updatePosition);
+  });
+  return { actions, actionStyle, containerStyle, contentStyle };
+};
+
+export { computedInLineAIParams, useAI, useBase, useInLineAIContainerClick };

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

@@ -0,0 +1,205 @@
+import { defineComponent, createVNode, withDirectives, vModelText, ref, computed, onMounted } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import { computedInLineAIParams, useBase, useInLineAIContainerClick, useAI } from './inline-ai-textarea.hook.mjs';
+import { AIIcon, StopIcon, SendIcon } from './icon.mjs';
+import './inline-ai-textarea.css';
+
+"use strict";
+const InlineAITextArea = /* @__PURE__ */ defineComponent({
+  props: {
+    context: {
+      type: Object,
+      required: true
+    },
+    params: {
+      type: Object,
+      required: true
+    },
+    data: {
+      type: Object,
+      required: true
+    },
+    content: {
+      type: String,
+      required: true
+    },
+    deACMode: {
+      type: Object,
+      required: true
+    },
+    options: {
+      type: Object,
+      required: true
+    },
+    insertText: {
+      type: Function,
+      required: true
+    },
+    replaceSelectionText: {
+      type: Function,
+      required: true
+    },
+    restoreSelection: {
+      type: Function,
+      required: true
+    },
+    unMountAIChat: {
+      type: Function,
+      required: true
+    }
+  },
+  setup(props, ctx) {
+    const ns = useNamespace("inline-ai-textarea-container");
+    const containerRef = ref();
+    const actionsRef = ref();
+    const {
+      srfaiappendcurdata,
+      srfaiautoappend,
+      srfmode
+    } = computedInLineAIParams(props);
+    const {
+      actions,
+      actionStyle,
+      containerStyle,
+      contentStyle
+    } = useBase(props, containerRef, actionsRef);
+    useInLineAIContainerClick(props);
+    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;
+    });
+    const sendQuestion = async (content) => {
+      question = content;
+      textareaContent.value = "";
+      isLoading.value = true;
+      textareaContent.value = await askAI(question);
+      isLoading.value = false;
+      contentType.value = "ASSISTANT";
+    };
+    const stopQuestion = () => {
+      props.unMountAIChat();
+    };
+    const onKeydown = (e) => {
+      if (e.code === "Enter" && !e.isComposing) {
+        e.stopPropagation();
+        if (e.shiftKey === false) {
+          sendQuestion(textareaContent.value);
+        }
+      }
+    };
+    const handleAction = (_e, actionName) => {
+      const content = textareaContent.value;
+      switch (actionName) {
+        case "regenerate":
+          sendQuestion(question);
+          break;
+        case "insertText":
+          props.insertText(content);
+          props.unMountAIChat();
+          break;
+        case "replaceText":
+          props.replaceSelectionText(content);
+          props.unMountAIChat();
+          break;
+        case "copyText":
+          ibiz.util.text.copy(content);
+          props.unMountAIChat();
+          break;
+        case "cancel":
+          props.unMountAIChat();
+          break;
+        default:
+          break;
+      }
+    };
+    onMounted(() => {
+      if (srfaiautoappend)
+        sendQuestion(textareaContent.value);
+    });
+    return {
+      ns,
+      actions,
+      isLoading,
+      actionsRef,
+      disabled,
+      actionStyle,
+      contentType,
+      containerRef,
+      contentStyle,
+      containerStyle,
+      textareaContent,
+      onKeydown,
+      sendQuestion,
+      stopQuestion,
+      handleAction
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "ref": "containerRef",
+      "class": this.ns.b(),
+      "style": this.containerStyle
+    }, [createVNode("div", {
+      "class": this.ns.e("content"),
+      "style": this.contentStyle
+    }, [!this.disabled && createVNode("div", {
+      "class": this.ns.em("content", "prefix")
+    }, [createVNode("div", {
+      "class": this.ns.em("content", "ai-icon")
+    }, [AIIcon])]), createVNode("div", {
+      "class": this.ns.em("content", "textarea")
+    }, [this.isLoading && createVNode("div", {
+      "class": "el-loading-mask",
+      "style": ""
+    }, [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", {
+      "disabled": this.disabled,
+      "onKeydown": this.onKeydown,
+      "onUpdate:modelValue": ($event) => this.textareaContent = $event
+    }, null), [[vModelText, this.textareaContent]])]), this.contentType === "USER" && createVNode("div", {
+      "class": this.ns.em("content", "suffix")
+    }, [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", {
+      "class": this.ns.em("content", "sand-icon"),
+      "onClick": () => this.sendQuestion(this.textareaContent)
+    }, [SendIcon])])]), this.contentType === "ASSISTANT" && createVNode("div", {
+      "class": this.ns.e("footer")
+    }, [ibiz.i18n.t("util.inlineAiUtil.info")]), createVNode("div", {
+      "ref": "actionsRef",
+      "class": [this.ns.e("actions"), this.ns.is("show", this.contentType === "ASSISTANT")],
+      "style": this.actionStyle
+    }, [this.actions.map((action) => {
+      if (action.itemType === "divider")
+        return createVNode("div", {
+          "class": this.ns.em("actions", action.itemType)
+        }, null);
+      return createVNode("div", {
+        "class": [this.ns.em("actions", action.itemType), this.ns.is("danger", action.actionName === "cancel")],
+        "onClick": (e) => this.handleAction(e, action.actionName)
+      }, [action.icon, createVNode("span", null, [action.title])]);
+    })])]);
+  }
+});
+
+export { InlineAITextArea };

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

@@ -0,0 +1,145 @@
+import { h, createApp } from 'vue';
+import ContextMenu from '@imengyu/vue3-context-menu';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import { InlineAITextArea } from './inline-ai-textarea/inline-ai-textarea.mjs';
+
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class InLineAIUtil {
+  /**
+   * Creates an instance of InLineAIUtil.
+   * @memberof InLineAIUtil
+   */
+  constructor() {
+    __publicField(this, "currentApp", null);
+    __publicField(this, "container", null);
+    __publicField(this, "ns", useNamespace("inline-ai-container"));
+  }
+  /**
+   * 计算上下文菜单
+   * @param deACMode
+   * @param clickCallBack
+   * @returns
+   */
+  calcContextMenus(deACMode, clickCallBack) {
+    var _a, _b;
+    const menus = [];
+    if (!deACMode || !deACMode.deuiactionGroup || !deACMode.deuiactionGroup.uiactionGroupDetails)
+      return menus;
+    (_b = (_a = deACMode.deuiactionGroup) == null ? void 0 : _a.uiactionGroupDetails) == null ? void 0 : _b.forEach((item) => {
+      var _a2, _b2, _c;
+      const menuItem = {};
+      if (item.detailType === "DEUIACTION" && ((_a2 = item.uiactionId) == null ? void 0 : _a2.startsWith("inline"))) {
+        if (item.showCaption && item.caption) {
+          menuItem.label = item.caption;
+        }
+        if (item.sysImage && item.showIcon) {
+          menuItem.icon = h("iBizIcon", {
+            icon: item.sysImage
+          });
+        }
+        menuItem.clickClose = true;
+        const { uiactionId } = item;
+        if (uiactionId) {
+          menuItem.onClick = () => {
+            clickCallBack(uiactionId);
+          };
+        }
+        menus.push(menuItem);
+      } else if (item.detailType === "DEUIACTIONGROUP" && item.refUIActionGroup && ((_b2 = item.refUIActionGroup.id) == null ? void 0 : _b2.startsWith("inline"))) {
+        menuItem.label = item.refUIActionGroup.name;
+        const menuItems = (_c = item.refUIActionGroup.uiactionGroupDetails) == null ? void 0 : _c.filter((detail) => {
+          var _a3;
+          return detail.detailType === "DEUIACTION" && ((_a3 = detail.uiactionId) == null ? void 0 : _a3.startsWith("inline"));
+        }).map((detail) => {
+          return {
+            label: detail.showCaption ? detail.caption : void 0,
+            icon: detail.showIcon && detail.sysImage ? h("iBizIcon", {
+              icon: detail.sysImage
+            }) : void 0,
+            clickableWhenHasChildren: true,
+            onClick: () => {
+              ContextMenu.closeContextMenu();
+              clickCallBack(detail.uiactionId);
+            }
+          };
+        });
+        menuItem.children = menuItems;
+        menus.push(menuItem);
+      }
+    });
+    return menus;
+  }
+  /**
+   * 显示上下文菜单
+   * @param x 距离左侧距离
+   * @param y 距离上方距离
+   * @param menus 菜单集合
+   */
+  showContextMenus(x, y, menus) {
+    ContextMenu.showContextMenu({
+      x,
+      y,
+      customClass: this.ns.b("context-menu"),
+      items: menus
+    });
+  }
+  /**
+   * 销毁组件实例
+   */
+  destroyInlineAIComponent() {
+    if (this.currentApp && this.container) {
+      this.currentApp.unmount();
+      this.currentApp = null;
+    }
+    if (this.container && document.body.contains(this.container)) {
+      document.body.removeChild(this.container);
+      this.container = null;
+    }
+  }
+  /**
+   *  显示AI聊天组件
+   * @param selectText
+   * @param options
+   * @returns
+   */
+  showAIChat(context, params, data, selectText, deACMode, options) {
+    this.destroyInlineAIComponent();
+    this.container = document.createElement("div");
+    this.container.id = this.ns.b();
+    this.container.className = this.ns.b();
+    document.body.appendChild(this.container);
+    const { editor } = params;
+    const { insertText, replaceSelectionText, restoreSelection } = editor;
+    delete params.editor;
+    const unMountAIChat = () => {
+      this.destroyInlineAIComponent();
+    };
+    this.currentApp = createApp(InlineAITextArea, {
+      context,
+      params,
+      data,
+      content: selectText,
+      deACMode,
+      options,
+      insertText: insertText.bind(editor),
+      replaceSelectionText: replaceSelectionText.bind(editor),
+      restoreSelection: restoreSelection.bind(editor),
+      unMountAIChat
+    });
+    this.currentApp.mount(this.container);
+  }
+  /**
+   * 隐藏AI聊天组件
+   */
+  hideAIChat() {
+    this.destroyInlineAIComponent();
+  }
+}
+
+export { InLineAIUtil };

package/es/web-app/main.mjs

@@ -21,6 +21,7 @@ import { NotificationUtil } from '../util/notification-util/notification-util.mj
 import { LoadingUtil } from '../util/loading-util/loading-util.mjs';
 import { NoticeUtil } from '../util/notice-util/notice-util.mjs';
 import { OverlayController } from '../util/overlay-controller/overlay-controller.mjs';
+import { InLineAIUtil } from '../util/inline-ai-util/inline-ai-util.mjs';
 import { FullscreenUtil } from '../util/fullscreen/fullscreen-util.mjs';
 
 "use strict";
@@ -81,6 +82,7 @@ async function runApp(plugins, opts) {
   ibiz.loading = new LoadingUtil();
   ibiz.notice = new NoticeUtil();
   ibiz.overlay = new OverlayController();
+  ibiz.inLineAIUtil = new InLineAIUtil();
   ibiz.util.text.format = (value, code) => {
     return app.config.globalProperties.$textFormat(value, code);
   };