@cozeloop/prompt-components 0.0.2 → 0.0.4

package/dist/es/basic-editor/extensions/variable.js

@@ -0,0 +1,178 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import {
+  Mention,
+  getCurrentMentionReplaceRange,
+  useEditor,
+  PositionMirror,
+  useLatest
+} from "@coze-editor/editor/react";
+import { Popover, Typography } from "@coze-arch/coze-design";
+function Variable({
+  variables,
+  isGoTemplate
+}) {
+  const [posKey, setPosKey] = useState("");
+  const [visible, setVisible] = useState(false);
+  const [position, setPosition] = useState(-1);
+  const editor = useEditor();
+  function insert(variableName) {
+    const range = getCurrentMentionReplaceRange(editor.$view.state);
+    if (!range) {
+      return;
+    }
+    editor.replaceText(__spreadProps(__spreadValues({}, range), {
+      text: isGoTemplate ? `{{.${variableName}}}` : `{{${variableName}}}`,
+      cursorOffset: variableName ? 0 : -2
+    }));
+    setVisible(false);
+  }
+  function handleOpenChange(e) {
+    setPosition(e.state.selection.main.head);
+    setVisible(e.value && variables.length > 0);
+  }
+  useEffect(() => {
+    if (!editor) {
+      return;
+    }
+    if (visible) {
+      editor.disableKeybindings(["ArrowUp", "ArrowDown", "Enter"]);
+    } else {
+      editor.disableKeybindings([]);
+    }
+  }, [editor, visible]);
+  const selectedIndex = usePopoverNavigation({
+    enable: visible,
+    variables,
+    onApply: insert
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Mention,
+      {
+        trigger: (tr) => {
+          if (tr.docChanged) {
+            let context = void 0;
+            tr.changes.iterChanges((fromA, toA, fromB, toB, inserted) => {
+              if (fromA > 0 && // 新增，非替换
+              fromA === toA && // 新增内容为 {
+              inserted.toString() === "{}" && // { 前还有个 {
+              tr.state.sliceDoc(
+                Math.max(0, fromA - 1),
+                Math.max(0, fromA)
+              ) === "{") {
+                context = {
+                  from: fromB - 1,
+                  to: toB + 1,
+                  triggerCharacter: "{{",
+                  cursorPosition: tr.state.selection.main.head
+                };
+              }
+            });
+            return context;
+          }
+          return void 0;
+        },
+        onOpenChange: handleOpenChange
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        visible,
+        trigger: "custom",
+        position: "topLeft",
+        rePosKey: posKey,
+        content: /* @__PURE__ */ jsxs("div", { className: "p-1 min-w-[100px] flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsx(Typography.Text, { type: "secondary", strong: true, children: "插入变量" }),
+          /* @__PURE__ */ jsx("div", { className: "max-h-[200px] overflow-y-auto", children: variables.map((variable, index) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `cursor-pointer hover:bg-gray-100 px-2 py-1 mb-0.5 rounded ${selectedIndex === index ? "!bg-gray-200" : ""}`,
+              onMouseDown: (e) => e.preventDefault(),
+              onClick: () => (variable == null ? void 0 : variable.key) && insert(variable.key),
+              children: variable.key
+            },
+            variable.key
+          )) })
+        ] }),
+        onClickOutSide: () => setVisible(false),
+        children: /* @__PURE__ */ jsx(
+          PositionMirror,
+          {
+            position,
+            onChange: () => setPosKey(String(Math.random()))
+          }
+        )
+      }
+    )
+  ] });
+}
+function usePopoverNavigation(options) {
+  const { enable, variables, onApply } = options;
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const indexRef = useLatest(selectedIndex);
+  const variablesRef = useLatest([...variables, { key: "" }]);
+  const onApplyRef = useLatest(onApply);
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [enable]);
+  useEffect(() => {
+    if (!enable) {
+      return;
+    }
+    function handleNavigation(e) {
+      switch (e.key) {
+        case "ArrowUp":
+          setSelectedIndex((prevIndex) => {
+            const nextIndex = prevIndex - 1;
+            return Math.max(0, nextIndex);
+          });
+          break;
+        case "ArrowDown":
+          setSelectedIndex((prevIndex) => {
+            const nextIndex = prevIndex + 1;
+            return Math.min(variablesRef.current.length - 1, nextIndex);
+          });
+          break;
+        case "Enter": {
+          const variableName = variablesRef.current[indexRef.current];
+          if (variableName) {
+            onApplyRef.current(variableName.key || "");
+          }
+          break;
+        }
+        default:
+          break;
+      }
+    }
+    document.addEventListener("keydown", handleNavigation, false);
+    return () => {
+      document.removeEventListener("keydown", handleNavigation, false);
+    };
+  }, [enable]);
+  return selectedIndex;
+}
+var variable_default = Variable;
+export {
+  variable_default as default
+};

package/dist/es/basic-editor/index.js

@@ -0,0 +1,171 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef
+} from "react";
+import {
+  EditorProvider,
+  Renderer,
+  Placeholder
+} from "@coze-editor/editor/react";
+import preset from "@coze-editor/editor/preset-prompt";
+import { EditorView, keymap } from "@codemirror/view";
+import { Prec } from "@codemirror/state";
+import { indentWithTab } from "@codemirror/commands";
+import Variable from "./extensions/variable";
+import Validation from "./extensions/validation";
+import { search } from "./extensions/search";
+import MarkdownHighlight from "./extensions/markdown";
+import LanguageSupport from "./extensions/language-support";
+import { insertFourSpaces } from "./extensions/keymap";
+import JinjaHighlight from "./extensions/jinja";
+import { goExtension } from "./extensions/go-template";
+const extensions = [
+  EditorView.theme({
+    ".cm-gutters": {
+      backgroundColor: "transparent",
+      borderRight: "none"
+    },
+    ".cm-scroller": {
+      paddingLeft: "10px",
+      paddingRight: "6px !important"
+    }
+  }),
+  Prec.high(keymap.of([{ key: "Tab", run: insertFourSpaces }, indentWithTab]))
+];
+const PromptBasicEditor = forwardRef(
+  ({
+    defaultValue,
+    onChange,
+    variables,
+    height,
+    minHeight,
+    maxHeight,
+    fontSize = 13,
+    forbidJinjaHighlight,
+    forbidVariables,
+    readOnly,
+    linePlaceholder = "请输入内容，支持按此格式书写变量：{{USER_NAME}}",
+    customExtensions = [],
+    autoScrollToBottom,
+    onBlur,
+    isGoTemplate,
+    onFocus,
+    canSearch,
+    children,
+    isJinja2Template
+  }, ref) => {
+    const editorRef = useRef(null);
+    useImperativeHandle(ref, () => ({
+      setEditorValue: (value) => {
+        var _a;
+        const editor = editorRef.current;
+        if (!editor) {
+          return;
+        }
+        (_a = editor == null ? void 0 : editor.setValue) == null ? void 0 : _a.call(editor, value || "");
+      },
+      insertText: (text) => {
+        const editor = editorRef.current;
+        if (!editor) {
+          return;
+        }
+        const range = editor.getSelection();
+        if (!range) {
+          return;
+        }
+        editor.replaceText(__spreadProps(__spreadValues({}, range), {
+          text,
+          cursorOffset: 0
+        }));
+      }
+    }));
+    const newExtensions = useMemo(() => {
+      const xExtensions = [...extensions, ...customExtensions];
+      const searchExt = canSearch ? [...search()] : [];
+      if (isGoTemplate) {
+        return [...xExtensions, goExtension, ...searchExt];
+      }
+      return [...xExtensions, ...searchExt];
+    }, [customExtensions, extensions, isGoTemplate, canSearch]);
+    useEffect(() => {
+      if (isJinja2Template || isGoTemplate) {
+        setTimeout(() => {
+          var _a;
+          (_a = editorRef.current) == null ? void 0 : _a.updateWholeDecorations();
+        }, 150);
+      }
+    }, [variables, isJinja2Template, isGoTemplate]);
+    return /* @__PURE__ */ jsxs(EditorProvider, { children: [
+      /* @__PURE__ */ jsx(
+        Renderer,
+        {
+          plugins: preset,
+          defaultValue,
+          options: {
+            editable: !readOnly,
+            readOnly,
+            height,
+            minHeight: minHeight || height,
+            maxHeight: maxHeight || height,
+            fontSize
+          },
+          onChange: (e) => onChange == null ? void 0 : onChange(e.value),
+          onFocus,
+          onBlur,
+          extensions: newExtensions,
+          didMount: (editor) => {
+            editorRef.current = editor;
+            if (autoScrollToBottom) {
+              editor.$view.dispatch({
+                effects: EditorView.scrollIntoView(
+                  editor.$view.state.doc.length
+                )
+              });
+            }
+          }
+        }
+      ),
+      !forbidVariables && /* @__PURE__ */ jsx(Variable, { variables: variables || [], isGoTemplate }),
+      /* @__PURE__ */ jsx(LanguageSupport, {}),
+      !forbidJinjaHighlight && !isGoTemplate && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          Validation,
+          {
+            variables,
+            isNormalTemplate: !isJinja2Template && !isGoTemplate
+          }
+        ),
+        /* @__PURE__ */ jsx(JinjaHighlight, { isJinja2Template })
+      ] }),
+      /* @__PURE__ */ jsx(MarkdownHighlight, {}),
+      /* @__PURE__ */ jsx(Placeholder, { children: linePlaceholder }),
+      children
+    ] });
+  }
+);
+export {
+  PromptBasicEditor
+};

package/dist/es/code-editor/code-editor.js

@@ -0,0 +1,83 @@
+import { createRenderer, option } from "@coze-editor/editor/react";
+import preset, { languages, themes } from "@coze-editor/editor/preset-code";
+import { shell } from "@coze-editor/editor/language-shell";
+import { json } from "@coze-editor/editor/language-json";
+import { mixLanguages } from "@coze-editor/editor";
+import { EditorView } from "@codemirror/view";
+import { cozeLight } from "./themes/coze-light";
+import { cozeDark } from "./themes/coze-dark";
+languages.register("json", {
+  // mixLanguages 用于解决 「插值也使用了括号，导致无法正确高亮」的问题
+  language: mixLanguages({
+    outerLanguage: json.language
+  }),
+  languageService: json.languageService
+});
+languages.register("shell", shell);
+themes.register("coze-light", cozeLight);
+themes.register("coze-dark", cozeDark);
+const minHeightOption = (value) => EditorView.theme({
+  ".cm-content, .cm-gutter, .cm-right-gutter": {
+    minHeight: typeof value === "number" ? `${value}px` : typeof value === "string" ? value : "unset"
+  },
+  "&.cm-editor": {
+    minHeight: typeof value === "number" ? `${value}px` : typeof value === "string" ? value : "unset"
+  }
+});
+const maxHeightOption = (value) => EditorView.theme({
+  "&.cm-editor": {
+    maxHeight: typeof value === "number" ? `${value}px` : typeof value === "string" ? value : "unset"
+  }
+});
+const heightOption = (value) => EditorView.theme({
+  "&.cm-editor": {
+    height: typeof value === "number" ? `${value}px` : typeof value === "string" ? value : "unset"
+  }
+});
+const paddingOption = (value) => EditorView.theme({
+  "&.cm-editor": {
+    padding: typeof value === "number" ? `${value}px` : typeof value === "string" ? value : "unset"
+  }
+});
+const borderRadiusOption = (value) => EditorView.theme({
+  "&.cm-editor, .cm-gutters": {
+    borderRadius: typeof value === "number" ? `${value}px` : typeof value === "string" ? value : "unset"
+  }
+});
+const lineHeightOption = (value) => EditorView.theme({
+  ".cm-content, .cm-gutter, .cm-right-gutter": {
+    lineHeight: typeof value === "number" ? `${value}px` : typeof value === "string" ? value : "unset"
+  }
+});
+function createStyleOptions() {
+  return [
+    option("minHeight", minHeightOption),
+    option("maxHeight", maxHeightOption),
+    option("editerHeight", heightOption),
+    option("borderRadius", borderRadiusOption),
+    option("padding", paddingOption),
+    option("lineHeight", lineHeightOption)
+  ];
+}
+const builtinExtensions = [
+  EditorView.theme({
+    "&.cm-focused": {
+      outline: "none"
+    },
+    "& *": {
+      fontFamily: 'Menlo, Monaco, "Courier New", monospace'
+    }
+  }),
+  EditorView.theme({
+    "&.cm-content": {
+      wordBreak: "break-all"
+    }
+  })
+];
+const CodeEditor = createRenderer(
+  [...preset, ...createStyleOptions()],
+  builtinExtensions
+);
+export {
+  CodeEditor
+};

package/dist/es/code-editor/index.js

@@ -0,0 +1,12 @@
+import { EditorProvider } from "@coze-editor/editor/react";
+import { CodeEditor } from "./code-editor";
+import { TextEditor } from "./text-editor";
+import { BaseJsonEditor } from "./json-editor";
+import { BaseRawTextEditor } from "./raw-text-editor";
+export {
+  BaseJsonEditor,
+  BaseRawTextEditor,
+  CodeEditor,
+  EditorProvider,
+  TextEditor
+};

package/dist/es/code-editor/json-editor.js

@@ -0,0 +1,157 @@
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+import { jsx } from "react/jsx-runtime";
+import React, {
+  useCallback,
+  useEffect,
+  useRef,
+  useImperativeHandle
+} from "react";
+import { EditorProvider } from "@coze-editor/editor/react";
+import {
+  transformerCreator
+} from "@coze-editor/editor/preset-code";
+import { json } from "@coze-editor/editor/language-json";
+import { EditorView } from "@codemirror/view";
+import { CodeEditor } from "./code-editor";
+const extensions = [
+  EditorView.theme({
+    ".cm-activeLineGutter": {
+      backgroundColor: "transparent !important"
+    },
+    ".cm-activeLine": {
+      backgroundColor: "transparent !important"
+    }
+  })
+];
+function findAllMatches(inputString, regex) {
+  const globalRegex = new RegExp(
+    regex,
+    regex.flags.includes("g") ? regex.flags : `${regex.flags}g`
+  );
+  let match;
+  const matches = [];
+  while (true) {
+    match = globalRegex.exec(inputString);
+    if (!match) {
+      break;
+    }
+    if (match.index === globalRegex.lastIndex) {
+      globalRegex.lastIndex++;
+    }
+    matches.push({
+      match: match[0],
+      range: [match.index, match.index + match[0].length]
+    });
+  }
+  return matches;
+}
+const transformer = transformerCreator((text) => {
+  const originalSource = text.toString();
+  const matches = findAllMatches(originalSource, /\{\{([^\}]*)\}\}/g);
+  if (matches.length > 0) {
+    matches.forEach(({ range }) => {
+      text.replaceRange(range[0], range[1], "null");
+    });
+  }
+  return text;
+});
+const BaseJsonEditor = React.forwardRef(
+  (props, ref) => {
+    const {
+      value,
+      onChange,
+      placeholder,
+      className,
+      isDarkTheme,
+      readonly,
+      minHeight = "100px",
+      maxHeight,
+      editerHeight,
+      padding,
+      borderRadius
+    } = props;
+    const apiRef = useRef(null);
+    const handleChange = useCallback(
+      (e) => {
+        if (typeof onChange === "function") {
+          onChange(e.value);
+        }
+      },
+      [onChange]
+    );
+    useEffect(() => {
+      var _a;
+      (_a = apiRef.current) == null ? void 0 : _a.updateASTDecorations();
+    }, [isDarkTheme]);
+    useEffect(() => {
+      const editor = apiRef.current;
+      if (!editor) {
+        return;
+      }
+      if (typeof value === "string" && value !== editor.getValue()) {
+        editor.setValue(value);
+      }
+    }, [value]);
+    const formatJson = () => __async(void 0, null, function* () {
+      var _a;
+      const view = (_a = apiRef.current) == null ? void 0 : _a.$view;
+      if (!view) {
+        return;
+      }
+      view.dispatch(
+        yield json.languageService.format(view.state, {
+          tabSize: 2
+        })
+      );
+    });
+    useImperativeHandle(ref, () => ({
+      formatJson
+    }));
+    return /* @__PURE__ */ jsx(EditorProvider, { children: /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(
+      CodeEditor,
+      {
+        defaultValue: value != null ? value : "",
+        onChange: handleChange,
+        options: {
+          placeholder,
+          lineWrapping: true,
+          theme: isDarkTheme ? "coze-dark" : "coze-light",
+          languageId: "json",
+          editable: !readonly,
+          transformer,
+          minHeight,
+          maxHeight,
+          editerHeight,
+          borderRadius,
+          padding,
+          fontSize: 13,
+          lineHeight: 20
+        },
+        didMount: (api) => apiRef.current = api,
+        extensions
+      }
+    ) }) });
+  }
+);
+export {
+  BaseJsonEditor
+};

package/dist/es/code-editor/raw-text-editor.js

@@ -0,0 +1,46 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useRef } from "react";
+import { EditorProvider } from "@coze-editor/editor/react";
+import { TextEditor } from "./text-editor";
+const BaseRawTextEditor = forwardRef(
+  (props, ref) => {
+    const { value, onChange, placeholder, className, minHeight, readonly } = props;
+    const apiRef = useRef(null);
+    const handleChange = useCallback(
+      (e) => {
+        if (typeof onChange === "function") {
+          onChange(e.value);
+        }
+      },
+      [onChange]
+    );
+    useEffect(() => {
+      const editor = apiRef.current;
+      if (!editor) {
+        return;
+      }
+      if (typeof value === "string" && value !== editor.getValue()) {
+        editor.setValue(value);
+      }
+    }, [value]);
+    return /* @__PURE__ */ jsx(EditorProvider, { children: /* @__PURE__ */ jsx("div", { ref, className, children: /* @__PURE__ */ jsx(
+      TextEditor,
+      {
+        defaultValue: value != null ? value : "",
+        onChange: handleChange,
+        options: {
+          placeholder,
+          lineWrapping: true,
+          minHeight,
+          fontSize: 13,
+          editable: !readonly,
+          lineHeight: 20
+        },
+        didMount: (api) => apiRef.current = api
+      }
+    ) }) });
+  }
+);
+export {
+  BaseRawTextEditor
+};

package/dist/es/code-editor/text-editor.js

@@ -0,0 +1,41 @@
+import { createRenderer, option } from "@coze-editor/editor/react";
+import universal from "@coze-editor/editor/preset-universal";
+import { mixLanguages } from "@coze-editor/editor";
+import { keymap, EditorView } from "@codemirror/view";
+import { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
+const RawEditorTheme = EditorView.theme({
+  "&.cm-editor": {
+    outline: "none"
+  },
+  "&.cm-content": {
+    wordBreak: "break-all"
+  }
+});
+const minHeightOption = (value) => EditorView.theme({
+  ".cm-content, .cm-gutter, .cm-right-gutter": {
+    minHeight: typeof value === "number" ? `${value}px` : typeof value === "string" ? value : "unset"
+  }
+});
+const lineHeightOption = (value) => EditorView.theme({
+  ".cm-content, .cm-gutter, .cm-right-gutter": {
+    lineHeight: typeof value === "number" ? `${value}px` : typeof value === "string" ? value : "unset"
+  }
+});
+const extensions = [
+  mixLanguages({}),
+  RawEditorTheme,
+  // ...其他 extensions
+  history(),
+  keymap.of([...defaultKeymap, ...historyKeymap])
+];
+const TextEditor = createRenderer(
+  [
+    ...universal,
+    option("minHeight", minHeightOption),
+    option("lineHeight", lineHeightOption)
+  ],
+  extensions
+);
+export {
+  TextEditor
+};