@cozeloop/prompt-components 0.0.1 → 0.0.2

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

@@ -1,178 +0,0 @@
-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

@@ -1,171 +0,0 @@
-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

@@ -1,83 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,157 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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
-};