@flowgram.ai/form-materials 0.2.20 → 0.2.22

package/dist/esm/index.js

@@ -1952,7 +1952,7 @@ function BatchOutputs(props) {
 
 // src/components/prompt-editor/index.tsx
 import React15 from "react";
-import { Renderer, EditorProvider } from "@coze-editor/editor/react";
+import { Renderer, EditorProvider, ActiveLinePlaceholder } from "@coze-editor/editor/react";
 import preset from "@coze-editor/editor/preset-prompt";
 
 // src/components/prompt-editor/styles.tsx
@@ -2084,7 +2084,16 @@ var jinja_default = JinjaHighlight;
 
 // src/components/prompt-editor/index.tsx
 function PromptEditor(props) {
-  const { value, onChange, readonly, style, hasError, children } = props || {};
+  const {
+    value,
+    onChange,
+    readonly,
+    placeholder,
+    activeLinePlaceholder,
+    style,
+    hasError,
+    children
+  } = props || {};
   return /* @__PURE__ */ React15.createElement(UIContainer4, { $hasError: hasError, style }, /* @__PURE__ */ React15.createElement(EditorProvider, null, /* @__PURE__ */ React15.createElement(
     Renderer,
     {
@@ -2092,13 +2101,14 @@ function PromptEditor(props) {
       defaultValue: String(value?.content),
       options: {
         readOnly: readonly,
-        editable: !readonly
+        editable: !readonly,
+        placeholder
       },
       onChange: (e) => {
         onChange({ type: "template", content: e.value });
       }
     }
-  ), /* @__PURE__ */ React15.createElement(markdown_default, null), /* @__PURE__ */ React15.createElement(language_support_default, null), /* @__PURE__ */ React15.createElement(jinja_default, null), children));
+  ), activeLinePlaceholder && /* @__PURE__ */ React15.createElement(ActiveLinePlaceholder, null, activeLinePlaceholder), /* @__PURE__ */ React15.createElement(markdown_default, null), /* @__PURE__ */ React15.createElement(language_support_default, null), /* @__PURE__ */ React15.createElement(jinja_default, null), children));
 }
 
 // src/components/prompt-editor-with-variables/index.tsx
@@ -2330,6 +2340,672 @@ function PromptEditorWithVariables(props) {
   return /* @__PURE__ */ React18.createElement(PromptEditor, { ...props }, /* @__PURE__ */ React18.createElement(VariableTree, null), /* @__PURE__ */ React18.createElement(VariableTagInject, null));
 }
 
+// src/components/prompt-editor-with-inputs/index.tsx
+import React21 from "react";
+
+// src/components/prompt-editor-with-inputs/extensions/inputs-tree.tsx
+import React20, { useEffect as useEffect5, useState as useState7 } from "react";
+import { Popover as Popover3 } from "@douyinfe/semi-ui";
+import {
+  Mention as Mention2,
+  getCurrentMentionReplaceRange as getCurrentMentionReplaceRange2,
+  useEditor as useEditor2,
+  PositionMirror as PositionMirror2
+} from "@coze-editor/editor/react";
+
+// src/components/prompt-editor-with-inputs/inputs-picker.tsx
+import React19, { useMemo as useMemo10 } from "react";
+import { last as last2 } from "lodash";
+import {
+  ASTMatch as ASTMatch3,
+  useScopeAvailable as useScopeAvailable2
+} from "@flowgram.ai/editor";
+import { Tree as Tree2 } from "@douyinfe/semi-ui";
+function InputsPicker({
+  inputsValues,
+  onSelect
+}) {
+  const available = useScopeAvailable2();
+  const getArrayDrilldown = (type, depth = 1) => {
+    if (ASTMatch3.isArray(type.items)) {
+      return getArrayDrilldown(type.items, depth + 1);
+    }
+    return { type: type.items, depth };
+  };
+  const renderVariable = (variable, keyPath) => {
+    let type = variable?.type;
+    let children;
+    if (ASTMatch3.isObject(type)) {
+      children = (type.properties || []).map((_property) => renderVariable(_property, [...keyPath, _property.key])).filter(Boolean);
+    }
+    if (ASTMatch3.isArray(type)) {
+      const drilldown = getArrayDrilldown(type);
+      if (ASTMatch3.isObject(drilldown.type)) {
+        children = (drilldown.type.properties || []).map(
+          (_property) => renderVariable(_property, [
+            ...keyPath,
+            ...new Array(drilldown.depth).fill("[0]"),
+            _property.key
+          ])
+        ).filter(Boolean);
+      }
+    }
+    const key = keyPath.map((_key, idx) => _key === "[0]" || idx === 0 ? _key : `.${_key}`).join("");
+    return {
+      key,
+      label: last2(keyPath),
+      value: key,
+      children
+    };
+  };
+  const treeData = useMemo10(
+    () => Object.entries(inputsValues).map(([key, value]) => {
+      if (value.type === "ref") {
+        const variable = available.getByKeyPath(value.content || []);
+        if (variable) {
+          return renderVariable(variable, [key]);
+        }
+      }
+      return {
+        key,
+        value: key,
+        label: key
+      };
+    }),
+    []
+  );
+  return /* @__PURE__ */ React19.createElement(Tree2, { treeData, onSelect: (v) => onSelect(v) });
+}
+
+// src/components/prompt-editor-with-inputs/extensions/inputs-tree.tsx
+function InputsTree({ inputsValues }) {
+  const [posKey, setPosKey] = useState7("");
+  const [visible, setVisible] = useState7(false);
+  const [position, setPosition] = useState7(-1);
+  const editor = useEditor2();
+  function insert(variablePath) {
+    const range = getCurrentMentionReplaceRange2(editor.$view.state);
+    if (!range) {
+      return;
+    }
+    editor.replaceText({
+      ...range,
+      text: "{{" + variablePath + "}}"
+    });
+    setVisible(false);
+  }
+  function handleOpenChange(e) {
+    setPosition(e.state.selection.main.head);
+    setVisible(e.value);
+  }
+  useEffect5(() => {
+    if (!editor) {
+      return;
+    }
+  }, [editor, visible]);
+  return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(Mention2, { triggerCharacters: ["{", "{}", "@"], onOpenChange: handleOpenChange }), /* @__PURE__ */ React20.createElement(
+    Popover3,
+    {
+      visible,
+      trigger: "custom",
+      position: "topLeft",
+      rePosKey: posKey,
+      content: /* @__PURE__ */ React20.createElement("div", { style: { width: 300 } }, /* @__PURE__ */ React20.createElement(
+        InputsPicker,
+        {
+          inputsValues,
+          onSelect: (v) => {
+            insert(v);
+          }
+        }
+      ))
+    },
+    /* @__PURE__ */ React20.createElement(
+      PositionMirror2,
+      {
+        position,
+        onChange: () => setPosKey(String(Math.random()))
+      }
+    )
+  ));
+}
+
+// src/components/prompt-editor-with-inputs/index.tsx
+function PromptEditorWithInputs({ inputsValues, ...restProps }) {
+  return /* @__PURE__ */ React21.createElement(PromptEditor, { ...restProps }, /* @__PURE__ */ React21.createElement(InputsTree, { inputsValues }));
+}
+
+// src/components/code-editor/index.tsx
+import React22, { useRef as useRef3 } from "react";
+import { createRenderer, EditorProvider as EditorProvider2 } from "@coze-editor/editor/react";
+import preset2 from "@coze-editor/editor/preset-code";
+import { EditorView as EditorView4 } from "@codemirror/view";
+
+// src/components/code-editor/utils.ts
+function getSuffixByLanguageId(languageId) {
+  if (languageId === "python") {
+    return ".py";
+  }
+  if (languageId === "typescript") {
+    return ".ts";
+  }
+  if (languageId === "shell") {
+    return ".sh";
+  }
+  if (languageId === "json") {
+    return ".json";
+  }
+  return "";
+}
+
+// src/components/code-editor/theme/index.ts
+import { themes } from "@coze-editor/editor/preset-code";
+
+// src/components/code-editor/theme/light.ts
+import { createTheme, tags as t } from "@coze-editor/editor/preset-code";
+var colors = {
+  background: "#F7F7FC",
+  // syntax
+  comment: "#000A298A",
+  key: "#00818C",
+  string: "#D1009D",
+  number: "#C74200",
+  boolean: "#2B57D9",
+  null: "#2B57D9",
+  separator: "#0F1529D1"
+};
+var lightTheme = createTheme({
+  variant: "light",
+  settings: {
+    background: "#fff",
+    foreground: "#000",
+    caret: "#000",
+    selection: "#d9d9d9",
+    gutterBackground: "#f0f0f0",
+    gutterForeground: "#666",
+    gutterBorderColor: "transparent",
+    gutterBorderWidth: 0,
+    lineHighlight: "#f0f0f0",
+    bracketColors: ["#FFEF61", "#DD99FF", "#78B0FF"],
+    tooltip: {
+      backgroundColor: "#f0f0f0",
+      color: "#000",
+      border: "1px solid #ccc"
+    },
+    link: {
+      color: "#007bff"
+    },
+    completionItemHover: {
+      backgroundColor: "#f0f0f0"
+    },
+    completionItemSelected: {
+      backgroundColor: "#e0e0e0"
+    },
+    completionItemIcon: {
+      color: "#333"
+    },
+    completionItemLabel: {
+      color: "#333"
+    },
+    completionItemInfo: {
+      color: "#333"
+    },
+    completionItemDetail: {
+      color: "#666"
+    }
+  },
+  styles: [
+    // JSON
+    {
+      tag: t.comment,
+      color: colors.comment
+    },
+    {
+      tag: [t.propertyName],
+      color: colors.key
+    },
+    {
+      tag: [t.string],
+      color: colors.string
+    },
+    {
+      tag: [t.number],
+      color: colors.number
+    },
+    {
+      tag: [t.bool],
+      color: colors.boolean
+    },
+    {
+      tag: [t.null],
+      color: colors.null
+    },
+    {
+      tag: [t.separator],
+      color: colors.separator
+    },
+    // markdown
+    {
+      tag: [t.heading],
+      color: "#3e76ef"
+    },
+    {
+      tag: [t.processingInstruction],
+      color: "#3e76ef"
+    },
+    // shell
+    // curl
+    {
+      tag: [t.standard(t.variableName)],
+      color: "#00804A"
+    },
+    // -X
+    {
+      tag: [t.attributeName],
+      color: "#C74200"
+    },
+    // url in string (includes quotes), e.g. "https://..."
+    {
+      tag: [t.special(t.string)],
+      color: "#2B57D9"
+    }
+  ]
+});
+
+// src/components/code-editor/theme/dark.ts
+import { createTheme as createTheme2, tags as t2 } from "@coze-editor/editor/preset-code";
+var colors2 = {
+  background: "#151B27",
+  // syntax
+  comment: "#FFFFFF63",
+  key: "#39E5D7",
+  string: "#FF94D2",
+  number: "#FF9933",
+  boolean: "#78B0FF",
+  null: "#78B0FF",
+  separator: "#FFFFFFC9"
+};
+var darkTheme = createTheme2({
+  variant: "dark",
+  settings: {
+    background: colors2.background,
+    foreground: "#fff",
+    caret: "#AEAFAD",
+    selection: "#d9d9d942",
+    gutterBackground: colors2.background,
+    gutterForeground: "#FFFFFF63",
+    gutterBorderColor: "transparent",
+    gutterBorderWidth: 0,
+    lineHighlight: "#272e3d36",
+    bracketColors: ["#FFEF61", "#DD99FF", "#78B0FF"],
+    tooltip: {
+      backgroundColor: "#363D4D",
+      color: "#fff",
+      border: "none"
+    },
+    link: {
+      color: "#4daafc"
+    },
+    completionItemHover: {
+      backgroundColor: "#FFFFFF0F"
+    },
+    completionItemSelected: {
+      backgroundColor: "#FFFFFF17"
+    },
+    completionItemIcon: {
+      color: "#FFFFFFC9"
+    },
+    completionItemLabel: {
+      color: "#FFFFFFC9"
+    },
+    completionItemInfo: {
+      color: "#FFFFFFC9"
+    },
+    completionItemDetail: {
+      color: "#FFFFFF63"
+    }
+  },
+  styles: [
+    // json
+    {
+      tag: t2.comment,
+      color: colors2.comment
+    },
+    {
+      tag: [t2.propertyName],
+      color: colors2.key
+    },
+    {
+      tag: [t2.string],
+      color: colors2.string
+    },
+    {
+      tag: [t2.number],
+      color: colors2.number
+    },
+    {
+      tag: [t2.bool],
+      color: colors2.boolean
+    },
+    {
+      tag: [t2.null],
+      color: colors2.null
+    },
+    {
+      tag: [t2.separator],
+      color: colors2.separator
+    },
+    // markdown
+    {
+      tag: [t2.heading],
+      color: "#6b6bff"
+    },
+    {
+      tag: [t2.processingInstruction],
+      color: "#6b6bff"
+    },
+    // shell
+    // curl
+    {
+      tag: [t2.standard(t2.variableName)],
+      color: "#3BEB84"
+    },
+    // -X
+    {
+      tag: [t2.attributeName],
+      color: "#FF9933"
+    },
+    // url in string (includes quotes), e.g. "https://..."
+    {
+      tag: [t2.special(t2.string)],
+      color: "#78B0FF"
+    }
+  ]
+});
+
+// src/components/code-editor/theme/index.ts
+themes.register("dark", darkTheme);
+themes.register("light", lightTheme);
+
+// src/components/code-editor/language-features.ts
+import { languages } from "@coze-editor/editor/preset-code";
+import { shell } from "@coze-editor/editor/language-shell";
+import { python } from "@coze-editor/editor/language-python";
+import { json } from "@coze-editor/editor/language-json";
+import { mixLanguages } from "@coze-editor/editor";
+languages.register("python", python);
+languages.register("json", {
+  // mixLanguages is used to solve the problem that interpolation also uses parentheses, which causes incorrect highlighting
+  language: mixLanguages({
+    outerLanguage: json.language
+  }),
+  languageService: json.languageService
+});
+languages.register("shell", shell);
+
+// src/components/code-editor/index.tsx
+var OriginCodeEditor = createRenderer(preset2, [
+  EditorView4.theme({
+    "&.cm-focused": {
+      outline: "none"
+    }
+  })
+]);
+function CodeEditor({
+  value,
+  onChange,
+  languageId = "python",
+  theme = "light",
+  children
+}) {
+  const editorRef = useRef3(null);
+  return /* @__PURE__ */ React22.createElement(EditorProvider2, null, /* @__PURE__ */ React22.createElement(
+    OriginCodeEditor,
+    {
+      defaultValue: value,
+      options: {
+        uri: `file:///untitled${getSuffixByLanguageId(languageId)}`,
+        languageId,
+        theme
+      },
+      didMount: (editor) => {
+        editorRef.current = editor;
+      },
+      onChange: (e) => onChange?.(e.value)
+    },
+    children
+  ));
+}
+
+// src/components/json-editor-with-variables/index.tsx
+import React25 from "react";
+
+// src/components/json-editor-with-variables/extensions/variable-tree.tsx
+import React23, { useEffect as useEffect6, useState as useState8 } from "react";
+import { Popover as Popover4, Tree as Tree3 } from "@douyinfe/semi-ui";
+import {
+  Mention as Mention3,
+  getCurrentMentionReplaceRange as getCurrentMentionReplaceRange3,
+  useEditor as useEditor3,
+  PositionMirror as PositionMirror3
+} from "@coze-editor/editor/react";
+function VariableTree2() {
+  const [posKey, setPosKey] = useState8("");
+  const [visible, setVisible] = useState8(false);
+  const [position, setPosition] = useState8(-1);
+  const editor = useEditor3();
+  function insert(variablePath) {
+    const range = getCurrentMentionReplaceRange3(editor.$view.state);
+    if (!range) {
+      return;
+    }
+    editor.replaceText({
+      ...range,
+      text: "{{" + variablePath + "}}"
+    });
+    setVisible(false);
+  }
+  function handleOpenChange(e) {
+    setPosition(e.state.selection.main.head);
+    setVisible(e.value);
+  }
+  useEffect6(() => {
+    if (!editor) {
+      return;
+    }
+  }, [editor, visible]);
+  const treeData = useVariableTree({});
+  return /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(Mention3, { triggerCharacters: ["@"], onOpenChange: handleOpenChange }), /* @__PURE__ */ React23.createElement(
+    Popover4,
+    {
+      visible,
+      trigger: "custom",
+      position: "topLeft",
+      rePosKey: posKey,
+      content: /* @__PURE__ */ React23.createElement("div", { style: { width: 300 } }, /* @__PURE__ */ React23.createElement(
+        Tree3,
+        {
+          treeData,
+          onSelect: (v) => {
+            insert(v);
+          }
+        }
+      ))
+    },
+    /* @__PURE__ */ React23.createElement(
+      PositionMirror3,
+      {
+        position,
+        onChange: () => setPosKey(String(Math.random()))
+      }
+    )
+  ));
+}
+
+// src/components/json-editor-with-variables/extensions/variable-tag.tsx
+import React24, { useLayoutEffect as useLayoutEffect5 } from "react";
+import { createRoot as createRoot2 } from "react-dom/client";
+import { isEqual as isEqual2, last as last3 } from "lodash";
+import {
+  Disposable as Disposable2,
+  DisposableCollection as DisposableCollection2,
+  useCurrentScope as useCurrentScope2
+} from "@flowgram.ai/editor";
+import { Popover as Popover5 } from "@douyinfe/semi-ui";
+import { IconIssueStroked as IconIssueStroked3 } from "@douyinfe/semi-icons";
+import { useInjector as useInjector5 } from "@coze-editor/editor/react";
+import {
+  Decoration as Decoration2,
+  EditorView as EditorView5,
+  MatchDecorator as MatchDecorator2,
+  ViewPlugin as ViewPlugin2,
+  WidgetType as WidgetType2
+} from "@codemirror/view";
+
+// src/components/json-editor-with-variables/styles.tsx
+import styled8 from "styled-components";
+import { Tag as Tag3 } from "@douyinfe/semi-ui";
+var UIRootTitle3 = styled8.div`
+  margin-right: 4px;
+  min-width: 20px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--semi-color-text-2);
+`;
+var UIVarName3 = styled8.div`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+var UITag3 = styled8(Tag3)`
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  max-width: 300px;
+
+  & .semi-tag-content-center {
+    justify-content: flex-start;
+  }
+
+  &.semi-tag {
+    margin: 0 5px;
+  }
+`;
+var UIPopoverContent2 = styled8.div`
+  padding: 10px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+`;
+
+// src/components/json-editor-with-variables/extensions/variable-tag.tsx
+var VariableTagWidget2 = class extends WidgetType2 {
+  constructor({ keyPath, scope }) {
+    super();
+    this.toDispose = new DisposableCollection2();
+    this.renderIcon = (icon) => {
+      if (typeof icon === "string") {
+        return /* @__PURE__ */ React24.createElement("img", { style: { marginRight: 8 }, width: 12, height: 12, src: icon });
+      }
+      return icon;
+    };
+    this.keyPath = keyPath;
+    this.scope = scope;
+  }
+  renderVariable(v) {
+    if (!v) {
+      this.root.render(
+        /* @__PURE__ */ React24.createElement(UITag3, { prefixIcon: /* @__PURE__ */ React24.createElement(IconIssueStroked3, null), color: "amber" }, "Unknown")
+      );
+      return;
+    }
+    const rootField = last3(v.parentFields);
+    const rootTitle = /* @__PURE__ */ React24.createElement(UIRootTitle3, null, rootField?.meta.title ? `${rootField.meta.title} -` : "");
+    const rootIcon = this.renderIcon(rootField?.meta.icon);
+    this.root.render(
+      /* @__PURE__ */ React24.createElement(
+        Popover5,
+        {
+          content: /* @__PURE__ */ React24.createElement(UIPopoverContent2, null, rootIcon, rootTitle, /* @__PURE__ */ React24.createElement(UIVarName3, null, v?.keyPath.slice(1).join(".")))
+        },
+        /* @__PURE__ */ React24.createElement(UITag3, { prefixIcon: rootIcon }, rootTitle, /* @__PURE__ */ React24.createElement(UIVarName3, null, v?.key))
+      )
+    );
+  }
+  toDOM(view) {
+    const dom = document.createElement("span");
+    this.root = createRoot2(dom);
+    this.toDispose.push(
+      Disposable2.create(() => {
+        this.root.unmount();
+      })
+    );
+    this.toDispose.push(
+      this.scope.available.trackByKeyPath(
+        this.keyPath,
+        (v) => {
+          this.renderVariable(v);
+        },
+        { triggerOnInit: false }
+      )
+    );
+    this.renderVariable(this.scope.available.getByKeyPath(this.keyPath));
+    return dom;
+  }
+  eq(other) {
+    return isEqual2(this.keyPath, other.keyPath);
+  }
+  ignoreEvent() {
+    return false;
+  }
+  destroy(dom) {
+    this.toDispose.dispose();
+  }
+};
+function VariableTagInject2() {
+  const injector = useInjector5();
+  const scope = useCurrentScope2();
+  useLayoutEffect5(() => {
+    const atMatcher = new MatchDecorator2({
+      regexp: /\{\{([^\}]+)\}\}/g,
+      decoration: (match) => Decoration2.replace({
+        widget: new VariableTagWidget2({
+          keyPath: match[1]?.split(".") ?? [],
+          scope
+        })
+      })
+    });
+    return injector.inject([
+      ViewPlugin2.fromClass(
+        class {
+          constructor(view) {
+            this.view = view;
+            this.decorations = atMatcher.createDeco(view);
+          }
+          update() {
+            this.decorations = atMatcher.createDeco(this.view);
+          }
+        },
+        {
+          decorations: (p) => p.decorations,
+          provide(p) {
+            return EditorView5.atomicRanges.of(
+              (view) => view.plugin(p)?.decorations ?? Decoration2.none
+            );
+          }
+        }
+      )
+    ]);
+  }, [injector]);
+  return null;
+}
+
+// src/components/json-editor-with-variables/index.tsx
+function JsonEditorWithVariables(props) {
+  return /* @__PURE__ */ React25.createElement(CodeEditor, { languageId: "json", ...props }, /* @__PURE__ */ React25.createElement(VariableTree2, null), /* @__PURE__ */ React25.createElement(VariableTagInject2, null));
+}
+
 // src/effects/provide-batch-input/index.ts
 import {
   ASTFactory as ASTFactory2,
@@ -2573,12 +3249,15 @@ export {
   ArrayIcons,
   BatchOutputs,
   BatchVariableSelector,
+  CodeEditor,
   ConditionRow,
   ConstantInput,
   DynamicValueInput,
+  JsonEditorWithVariables,
   JsonSchemaEditor,
   JsonSchemaUtils,
   PromptEditor,
+  PromptEditorWithInputs,
   PromptEditorWithVariables,
   TypeSelector,
   VariableSelector,