@flowgram.ai/form-materials 0.2.17 → 0.2.18

package/dist/esm/index.js

@@ -416,7 +416,10 @@ var JsonSchemaUtils;
           properties: Object.entries(jsonSchema.properties || {}).sort((a, b) => (get(a?.[1], "extra.index") || 0) - (get(b?.[1], "extra.index") || 0)).map(([key, _property]) => ({
             key,
             type: schemaToAST(_property),
-            meta: { description: _property.description }
+            meta: {
+              title: _property.title,
+              description: _property.description
+            }
           }))
         });
       case "array":
@@ -472,7 +475,16 @@ var JsonSchemaUtils;
       return {
         type: "object",
         properties: drilldown ? Object.fromEntries(
-          typeAST.properties.map((property) => [property.key, astToSchema(property.type)])
+          typeAST.properties.map((property) => {
+            const schema = astToSchema(property.type);
+            if (property.meta?.title && schema) {
+              schema.title = property.meta.title;
+            }
+            if (property.meta?.description && schema) {
+              schema.description = property.meta.description;
+            }
+            return [property.key, schema];
+          })
         ) : {}
       };
     }
@@ -569,10 +581,20 @@ function useVariableTree(params) {
 // src/components/variable-selector/styles.tsx
 import styled from "styled-components";
 import { Tag, TreeSelect } from "@douyinfe/semi-ui";
-var UIRootTitle = styled.span`
+var UIRootTitle = styled.div`
   margin-right: 4px;
+  min-width: 20px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   color: var(--semi-color-text-2);
 `;
+var UIVarName = styled.div`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 50%;
+`;
 var UITag = styled(Tag)`
   width: 100%;
   display: flex;
@@ -673,7 +695,7 @@ var VariableSelector = ({
             onClose: () => onChange(void 0)
           },
           /* @__PURE__ */ React3.createElement(UIRootTitle, null, _option.rootMeta?.title ? `${_option.rootMeta?.title} -` : null),
-          _option.label
+          /* @__PURE__ */ React3.createElement(UIVarName, null, _option.label)
         );
       },
       showClear: false,
@@ -1123,14 +1145,14 @@ function ConstantInput(props) {
     () => [...defaultStrategies, ...extraStrategies || []],
     [extraStrategies]
   );
-  const Renderer = useMemo4(() => {
+  const Renderer2 = useMemo4(() => {
     const strategy = strategies.find((_strategy) => _strategy.hit(schema));
     return strategy?.Renderer;
   }, [strategies, schema]);
-  if (!Renderer) {
+  if (!Renderer2) {
     return /* @__PURE__ */ React6.createElement(Input, { size: "small", disabled: true, placeholder: "Unsupported type" });
   }
-  return /* @__PURE__ */ React6.createElement(Renderer, { value, onChange, readonly, ...rest });
+  return /* @__PURE__ */ React6.createElement(Renderer2, { value, onChange, readonly, ...rest });
 }
 
 // src/components/json-schema-editor/default-value.tsx
@@ -1438,6 +1460,8 @@ var UIContainer2 = styled3.div`
 `;
 var UIMain = styled3.div`
   flex-grow: 1;
+  overflow: hidden;
+  min-width: 0;
 
   & .semi-tree-select,
   & .semi-input-number,
@@ -1467,6 +1491,7 @@ function DynamicValueInput({
       return /* @__PURE__ */ React11.createElement(
         VariableSelector,
         {
+          style: { width: "100%" },
           value: value?.content,
           onChange: (_v) => onChange(_v ? { type: "ref", content: _v } : void 0),
           includeSchema,
@@ -1917,6 +1942,228 @@ function BatchOutputs(props) {
   )))), /* @__PURE__ */ React14.createElement(Button4, { disabled: readonly, icon: /* @__PURE__ */ React14.createElement(IconPlus2, null), size: "small", onClick: add }, "Add"));
 }
 
+// src/components/prompt-editor/index.tsx
+import React15 from "react";
+import { Renderer, EditorProvider } from "@coze-editor/editor/react";
+import preset from "@coze-editor/editor/preset-prompt";
+
+// src/components/prompt-editor/styles.tsx
+import styled6, { css as css2 } from "styled-components";
+var UIContainer4 = styled6.div`
+  background-color: var(--semi-color-fill-0);
+  padding-left: 10px;
+  padding-right: 6px;
+
+  ${({ $hasError }) => $hasError && css2`
+      border: 1px solid var(--semi-color-danger-6);
+    `}
+`;
+
+// src/components/prompt-editor/extensions/markdown.tsx
+import { useLayoutEffect } from "react";
+import { useInjector } from "@coze-editor/editor/react";
+import { astDecorator } from "@coze-editor/editor";
+import { EditorView } from "@codemirror/view";
+function MarkdownHighlight() {
+  const injector = useInjector();
+  useLayoutEffect(
+    () => injector.inject([
+      astDecorator.whole.of((cursor) => {
+        if (cursor.name.startsWith("ATXHeading")) {
+          return {
+            type: "className",
+            className: "heading"
+          };
+        }
+        if (cursor.name === "Emphasis") {
+          return {
+            type: "className",
+            className: "emphasis"
+          };
+        }
+        if (cursor.name === "StrongEmphasis") {
+          return {
+            type: "className",
+            className: "strong-emphasis"
+          };
+        }
+        if (cursor.name === "ListMark" || cursor.name === "QuoteMark") {
+          return {
+            type: "className",
+            className: "mark"
+          };
+        }
+      }),
+      EditorView.theme({
+        ".heading": {
+          color: "#00818C",
+          fontWeight: "bold"
+        },
+        ".emphasis": {
+          fontStyle: "italic"
+        },
+        ".strong-emphasis": {
+          fontWeight: "bold"
+        },
+        ".mark": {
+          color: "#4E40E5"
+        }
+      })
+    ]),
+    [injector]
+  );
+  return null;
+}
+var markdown_default = MarkdownHighlight;
+
+// src/components/prompt-editor/extensions/language-support.tsx
+import { useLayoutEffect as useLayoutEffect2 } from "react";
+import { useInjector as useInjector2 } from "@coze-editor/editor/react";
+import { languageSupport } from "@coze-editor/editor/preset-prompt";
+function LanguageSupport() {
+  const injector = useInjector2();
+  useLayoutEffect2(() => injector.inject([languageSupport]), [injector]);
+  return null;
+}
+var language_support_default = LanguageSupport;
+
+// src/components/prompt-editor/extensions/jinja.tsx
+import { useLayoutEffect as useLayoutEffect3 } from "react";
+import { useInjector as useInjector3 } from "@coze-editor/editor/react";
+import { astDecorator as astDecorator2 } from "@coze-editor/editor";
+import { EditorView as EditorView2 } from "@codemirror/view";
+function JinjaHighlight() {
+  const injector = useInjector3();
+  useLayoutEffect3(
+    () => injector.inject([
+      astDecorator2.whole.of((cursor) => {
+        if (cursor.name === "JinjaStatementStart" || cursor.name === "JinjaStatementEnd") {
+          return {
+            type: "className",
+            className: "jinja-statement-bracket"
+          };
+        }
+        if (cursor.name === "JinjaComment") {
+          return {
+            type: "className",
+            className: "jinja-comment"
+          };
+        }
+        if (cursor.name === "JinjaExpression") {
+          return {
+            type: "className",
+            className: "jinja-expression"
+          };
+        }
+      }),
+      EditorView2.theme({
+        ".jinja-statement-bracket": {
+          color: "#D1009D"
+        },
+        ".jinja-comment": {
+          color: "#0607094D"
+        },
+        ".jinja-expression": {
+          color: "#4E40E5"
+        }
+      })
+    ]),
+    [injector]
+  );
+  return null;
+}
+var jinja_default = JinjaHighlight;
+
+// src/components/prompt-editor/index.tsx
+function PromptEditor(props) {
+  const { value, onChange, readonly, style, hasError, children } = props || {};
+  return /* @__PURE__ */ React15.createElement(UIContainer4, { $hasError: hasError, style }, /* @__PURE__ */ React15.createElement(EditorProvider, null, /* @__PURE__ */ React15.createElement(
+    Renderer,
+    {
+      plugins: preset,
+      defaultValue: String(value?.content),
+      options: {
+        readOnly: readonly,
+        editable: !readonly
+      },
+      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));
+}
+
+// src/components/prompt-editor-with-variables/index.tsx
+import React17 from "react";
+
+// src/components/prompt-editor-with-variables/extensions/variable.tsx
+import React16, { useEffect as useEffect4, useState as useState6 } from "react";
+import { Popover, Tree } from "@douyinfe/semi-ui";
+import {
+  Mention,
+  getCurrentMentionReplaceRange,
+  useEditor,
+  PositionMirror
+} from "@coze-editor/editor/react";
+function Variable() {
+  const [posKey, setPosKey] = useState6("");
+  const [visible, setVisible] = useState6(false);
+  const [position, setPosition] = useState6(-1);
+  const editor = useEditor();
+  function insert(variablePath) {
+    const range = getCurrentMentionReplaceRange(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);
+  }
+  useEffect4(() => {
+    if (!editor) {
+      return;
+    }
+  }, [editor, visible]);
+  const treeData = useVariableTree({});
+  return /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(Mention, { triggerCharacters: ["{", "{}"], onOpenChange: handleOpenChange }), /* @__PURE__ */ React16.createElement(
+    Popover,
+    {
+      visible,
+      trigger: "custom",
+      position: "topLeft",
+      rePosKey: posKey,
+      content: /* @__PURE__ */ React16.createElement("div", { style: { width: 300 } }, /* @__PURE__ */ React16.createElement(
+        Tree,
+        {
+          treeData,
+          onSelect: (v) => {
+            insert(v);
+          }
+        }
+      ))
+    },
+    /* @__PURE__ */ React16.createElement(
+      PositionMirror,
+      {
+        position,
+        onChange: () => setPosKey(String(Math.random()))
+      }
+    )
+  ));
+}
+var variable_default = Variable;
+
+// src/components/prompt-editor-with-variables/index.tsx
+function PromptEditorWithVariables(props) {
+  return /* @__PURE__ */ React17.createElement(PromptEditor, { ...props }, /* @__PURE__ */ React17.createElement(variable_default, null));
+}
+
 // src/effects/provide-batch-input/index.ts
 import {
   ASTFactory as ASTFactory2,
@@ -2165,6 +2412,8 @@ export {
   DynamicValueInput,
   JsonSchemaEditor,
   JsonSchemaUtils,
+  PromptEditor,
+  PromptEditorWithVariables,
   TypeSelector,
   VariableSelector,
   VariableTypeIcons,