@epxing/business 0.0.0-stage → 5.3.0-beta.1

package/dist/src/base/AiPromptView.js

@@ -0,0 +1,362 @@
+import "codemirror/addon/hint/show-hint.js";
+import "codemirror/lib/codemirror.css";
+import "codemirror/addon/hint/show-hint.css";
+import "codemirror/addon/edit/closebrackets.js";
+import "codemirror/addon/display/autorefresh";
+import "./aiPromptMode.js";
+import __cjsReq0 from "codemirror";
+import { component } from "@epxing/core/src/mixins";
+import { openBlock, createElementBlock, createElementVNode } from "vue";
+/* empty css                 */
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
+const __compatRequireEnsure = (_deps, cb) => Promise.resolve().then(() => cb && cb());
+const _sfc_main = {
+  name: "epx-base-ai-prompt-view",
+  mixins: [component],
+  props: {
+    formData: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  data() {
+    return {
+      activeTab: "base",
+      functionList: [],
+      staticVariableList: [],
+      paramList: [],
+      foldMap: {},
+      showParamsDialog: false,
+      params: {},
+      templateList: []
+    };
+  },
+  methods: {
+    getFunctionLibary() {
+      this.$http.$post({
+        action: "list",
+        entityId: "FM_AI_FUNCTION",
+        "scope.ENABLE#not": "0"
+      }).then((data) => {
+        this.functionList = data.entitys.filter((item) => item.TYPE === "func");
+        this.staticVariableList = data.entitys.filter((item) => item.TYPE === "static_var");
+        this.initFormula();
+      });
+    },
+    getParamList() {
+      return this.$http.list({
+        entityId: "FM_AI_PROMPT_PARAM",
+        "scope.PROMPT": this.$query.id
+      }).then((data) => {
+        this.paramList = data.entitys;
+      });
+    },
+    initFormula() {
+      __compatRequireEnsure([], () => {
+        const CodeMirror = __cjsReq0;
+        globalThis.codemirror = CodeMirror;
+        this.editor = CodeMirror.fromTextArea(this.$refs.textarea, {
+          mode: { name: "prompt", functionList: this.functionList },
+          lineWrapping: true,
+          lineNumbers: false,
+          autofocus: true,
+          showCursorWhenSelecting: true,
+          readOnly: true,
+          matchBrackets: {
+            afterCursor: false
+          },
+          autoCloseBrackets: true,
+          inputStyle: "contenteditable",
+          hintOptions: { completeSingle: false }
+        });
+        this.editor.on("change", (editor, change) => {
+          if (change.origin === "+input") {
+            setTimeout(function() {
+              editor.execCommand("autocomplete");
+            }, 20);
+          }
+        });
+        this.editor.showHint();
+        this.editor.focus();
+        if (this.formData.CONTENT) {
+          this.addEditorContent(this.formData.CONTENT);
+        }
+      });
+    },
+    addEditorContent(content) {
+      const lineCount = this.editor.lineCount();
+      const lines = content.split("\n");
+      const markList = [];
+      lines.forEach((line, index) => {
+        let diffNum = 0;
+        const lineIndex = lineCount + index - 1;
+        let text = line.replace(/{{(\w+)}}/g, (str, $1, chIndex) => {
+          const item = this.staticVariableList.find((item2) => item2.FUNC_VAR === $1);
+          const paramItem = this.paramList.find((item2) => item2.KEY === $1);
+          const realIndex = diffNum + chIndex;
+          if (item) {
+            markList.push({
+              line: lineIndex,
+              from: realIndex,
+              to: item.NAME.length + realIndex,
+              marker: {
+                className: "cm-variable",
+                atomic: true,
+                attributes: {
+                  type: item.TYPE,
+                  code: str
+                }
+              }
+            });
+            diffNum += item.NAME.length - str.length;
+            return item.NAME;
+          } else if (paramItem) {
+            markList.push({
+              line: lineIndex,
+              from: realIndex,
+              to: paramItem.NAME.length + realIndex,
+              marker: {
+                className: "cm-variable",
+                atomic: true,
+                attributes: {
+                  type: "params",
+                  code: str
+                }
+              }
+            });
+            diffNum += paramItem.NAME.length - str.length;
+            return paramItem.NAME;
+          } else {
+            return str;
+          }
+        });
+        diffNum = 0;
+        text = text.replace(/#{(\w+)\(([^#{]+)\)}/g, (str, $1, $2, chIndex) => {
+          const paramList = [];
+          const params = $2.split(",");
+          params.forEach((param, paramIndex) => {
+            if (param.trim()) {
+              const item = this.staticVariableList.find((item2) => item2.FUNC_VAR === param.trim());
+              const paramItem = this.paramList.find((item2) => item2.KEY === param.trim());
+              const realIndex = diffNum + chIndex + $1.length + 3;
+              if (item) {
+                markList.push({
+                  line: lineIndex,
+                  from: realIndex,
+                  to: item.NAME.length + realIndex,
+                  marker: {
+                    className: "cm-variable",
+                    atomic: true,
+                    attributes: {
+                      type: item.TYPE,
+                      code: param.trim()
+                    }
+                  }
+                });
+                param = item.NAME;
+              } else if (paramItem) {
+                markList.push({
+                  line: lineIndex,
+                  from: realIndex,
+                  to: paramItem.NAME.length + realIndex,
+                  marker: {
+                    className: "cm-variable",
+                    atomic: true,
+                    attributes: {
+                      type: "params",
+                      code: param.trim()
+                    }
+                  }
+                });
+                param = paramItem.MAME;
+              }
+            }
+            paramList.push(param);
+            diffNum += param.length + (paramIndex === params.length - 1 ? 0 : 1);
+          });
+          return `#{${$1}(${paramList.join(",")})}`;
+        });
+        this.editor.replaceRange(text + (index < lines.length - 1 ? "\n" : ""), { line: lineIndex });
+      });
+      markList.forEach((item) => {
+        this.editor.markText({ line: item.line, ch: item.from }, { line: item.line, ch: item.to }, {
+          ...item.marker
+        });
+      });
+    },
+    addFunction(data) {
+      const cursor = this.editor.getCursor();
+      const inFunction = this.isInfunction(cursor);
+      const code = inFunction ? data.FUNC_VAR + "()" : "#{" + data.FUNC_VAR + "()}";
+      this.editor.replaceRange(code, cursor);
+      this.editor.focus();
+      this.editor.setCursor({ line: cursor.line, ch: cursor.ch + inFunction ? code.length - 1 : code.length - 2 });
+    },
+    isInfunction(cursor) {
+      const line = this.editor.getLine(cursor.line);
+      const fucnList = [];
+      line.replace(/#{[^#{]+}/g, (str, index) => {
+        fucnList.push([index, index + str.length]);
+        return str;
+      });
+      const inFunction = fucnList.some((item) => cursor.ch > item[0] && cursor.ch < item[1]);
+      return inFunction;
+    },
+    addVariable(data) {
+      const cursor = this.editor.getCursor();
+      const inFunction = this.isInfunction(cursor);
+      this.editor.replaceRange(data.NAME, cursor);
+      this.editor.markText(cursor, { line: cursor.line, ch: cursor.ch + data.NAME.length }, {
+        className: "cm-variable",
+        atomic: true,
+        attributes: {
+          type: data.TYPE,
+          code: inFunction ? data.FUNC_VAR : `{{${data.FUNC_VAR}}}`
+        }
+      });
+      this.editor.focus();
+      this.editor.setCursor({ line: cursor.line, ch: cursor.ch + data.NAME.length });
+    },
+    addParamToDesigner(data) {
+      const cursor = this.editor.getCursor();
+      const inFunction = this.isInfunction(cursor);
+      this.editor.replaceRange(data.NAME, cursor);
+      this.editor.markText(cursor, { line: cursor.line, ch: cursor.ch + data.NAME.length }, {
+        className: "cm-variable",
+        atomic: true,
+        attributes: {
+          type: "params",
+          code: inFunction ? data.KEY : `{{${data.KEY}}}`
+        }
+      });
+      this.editor.focus();
+      this.editor.setCursor({ line: cursor.line, ch: cursor.ch + data.NAME.length });
+    },
+    addParams() {
+      this.params = {};
+      this.showParamsDialog = true;
+    },
+    editParams(param) {
+      this.params = { ...param };
+      this.showParamsDialog = true;
+    },
+    deleteParams(param) {
+      this.$http.removeMulti({
+        entityId: "FM_AI_PROMPT_PARAM",
+        ids: param.ID
+      }).then((data) => {
+        this.$message.success("删除成功");
+        this.getParamList();
+        this.showParamsDialog = false;
+        this.params = {};
+      }).catch((err) => {
+        this.$message.error(err.message);
+      });
+    },
+    saveParams() {
+      const { ID } = this.params;
+      this.$http.save({
+        action: ID ? "update" : "save",
+        entityId: "FM_AI_PROMPT_PARAM",
+        bean: {
+          CLIENT: this.CLIENT,
+          SYSTEM: this.SYSTEM,
+          PROMPT: this.$query.id,
+          ...this.params
+        }
+      }).then((data) => {
+        this.getParamList();
+        this.showParamsDialog = false;
+        this.params = {};
+      }).catch((err) => {
+        this.$message.error(err.message);
+      });
+    },
+    getTemplateList() {
+      this.$http.list({
+        entityId: this.$metaId,
+        "scope.IS_COMMON_USE": "1"
+      }).then((data) => {
+        this.templateList = data.entitys;
+      });
+    },
+    refTemplate(template) {
+      this.$http.$post({
+        action: "refTemplate",
+        entityId: "FM_AI_PROMPT_PARAM",
+        promptTemplate: template.ID,
+        promptId: this.$query.id
+      }).then((data) => {
+        this.$message.success("引入成功");
+        this.getParamList().then(() => {
+          this.addEditorContent(template.CONTENT);
+        });
+      }).catch((err) => {
+        this.$message.error(err.message);
+      });
+    },
+    replaceStr(str, startIndex, endIndex, char) {
+      return str.substring(0, startIndex) + char + str.substring(endIndex);
+    },
+    setContent() {
+      const value = this.editor.getValue();
+      if (value) {
+        let el = "";
+        let index = 0;
+        this.editor.eachLine((line) => {
+          let text = line.text;
+          const lineItem = {
+            text: line.text,
+            styles: [...line.styles]
+          };
+          if (line.markedSpans) {
+            lineItem.markedSpans = line.markedSpans.map((item) => ({ from: item.from, to: item.to, marker: { atomic: item.marker.atomic, attributes: item.marker.attributes, className: item.marker.className, type: item.marker.type } }));
+            const reverseMark = line.markedSpans.sort((a, b) => b.from - a.from);
+            reverseMark.map((item, index2) => {
+              if (item.marker.attributes) {
+                text = this.replaceStr(text, item.from, item.to, item.marker.attributes.code);
+              }
+            });
+          }
+          el += (index !== 0 ? "\n" : "") + text;
+          index++;
+        });
+        this.$emit("change", { ...this.formData, CONTENT: el });
+      } else {
+        this.$emit("change", { ...this.formData, CONTENT: "" });
+      }
+    }
+  },
+  mounted() {
+    this.getFunctionLibary();
+    this.getParamList();
+    this.getTemplateList();
+  }
+};
+const _hoisted_1 = { class: "ai-prompt-designer__editor" };
+const _hoisted_2 = {
+  class: "ai-prompt-designer__editor-input",
+  ref: "editorInput"
+};
+const _hoisted_3 = {
+  ref: "textarea",
+  name: "",
+  id: "",
+  cols: "30",
+  rows: "3"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", null, [
+    createElementVNode("div", _hoisted_1, [
+      createElementVNode("div", _hoisted_2, [
+        createElementVNode("textarea", _hoisted_3, null, 512)
+      ], 512)
+    ])
+  ]);
+}
+const AiPromptView = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-3fe69cdd"]]);
+export {
+  AiPromptView as default
+};