@flowgram.ai/form-materials 0.4.1 → 0.4.2

package/dist/esm/index.js

@@ -103,7 +103,7 @@ var extraSchema = z.object({
 }).optional();
 var constantSchema = z.object({
   type: z.literal("constant"),
-  content: z.union([z.string(), z.number(), z.boolean()]).optional(),
+  content: z.any().optional(),
   schema: z.any().optional(),
   extra: extraSchema
 });
@@ -1601,7 +1601,7 @@ var UITrigger = styled4.div`
 `;
 
 // src/components/dynamic-value-input/hooks.ts
-import { useMemo as useMemo5, useState as useState4 } from "react";
+import { useEffect as useEffect4, useMemo as useMemo5, useRef as useRef3, useState as useState4 } from "react";
 import { useScopeAvailable } from "@flowgram.ai/editor";
 function useRefVariable(value) {
   const available = useScopeAvailable();
@@ -1617,8 +1617,25 @@ function useSelectSchema(schemaFromProps, constantProps, value) {
   if (value?.type === "constant") {
     defaultSelectSchema = value?.schema || defaultSelectSchema;
   }
+  const changeVersion = useRef3(0);
+  const effectVersion = useRef3(0);
   const [selectSchema, setSelectSchema] = useState4(defaultSelectSchema);
-  return [selectSchema, setSelectSchema];
+  useEffect4(() => {
+    effectVersion.current += 1;
+    if (changeVersion.current === effectVersion.current) {
+      return;
+    }
+    effectVersion.current = changeVersion.current;
+    if (value?.type === "constant" && value?.schema) {
+      setSelectSchema(value?.schema);
+      return;
+    }
+  }, [value]);
+  const setSelectSchemaWithVersionUpdate = (schema) => {
+    setSelectSchema(schema);
+    changeVersion.current += 1;
+  };
+  return [selectSchema, setSelectSchemaWithVersionUpdate];
 }
 function useIncludeSchema(schemaFromProps) {
   const includeSchema = useMemo5(() => {
@@ -1700,7 +1717,6 @@ function DynamicValueInput({
         onChange: (_v) => onChange({ type: "constant", content: _v, schema: constantSchema2 }),
         schema: constantSchema2 || { type: "string" },
         readonly,
-        strategies: [...constantProps?.strategies || []],
         fallbackRenderer: () => /* @__PURE__ */ React20.createElement(
           InjectVariableSelector,
           {
@@ -1710,7 +1726,8 @@ function DynamicValueInput({
             readonly
           }
         ),
-        ...constantProps
+        ...constantProps,
+        strategies: [...constantProps?.strategies || []]
       }
     );
   };
@@ -1996,7 +2013,7 @@ import { Button as Button3, Input as Input5 } from "@douyinfe/semi-ui";
 import { IconDelete, IconPlus as IconPlus2 } from "@douyinfe/semi-icons";
 
 // src/hooks/use-object-list/index.tsx
-import { useEffect as useEffect4, useRef as useRef3, useState as useState5 } from "react";
+import { useEffect as useEffect5, useRef as useRef4, useState as useState5 } from "react";
 import { nanoid } from "nanoid";
 import { difference as difference2, get, isObject as isObject3, set } from "lodash";
 function genId2() {
@@ -2008,15 +2025,15 @@ function useObjectList({
   sortIndexKey
 }) {
   const [list, setList] = useState5([]);
-  const effectVersion = useRef3(0);
-  const changeVersion = useRef3(0);
+  const effectVersion = useRef4(0);
+  const changeVersion = useRef4(0);
   const getSortIndex = (value2) => {
     if (typeof sortIndexKey === "function") {
       return get(value2, sortIndexKey(value2)) || 0;
     }
     return get(value2, sortIndexKey || "") || 0;
   };
-  useEffect4(() => {
+  useEffect5(() => {
     effectVersion.current = effectVersion.current + 1;
     if (effectVersion.current === changeVersion.current) {
       return;
@@ -2156,7 +2173,7 @@ function BatchOutputs(props) {
 }
 
 // src/components/prompt-editor/index.tsx
-import React24, { useEffect as useEffect5, useRef as useRef4 } from "react";
+import React24, { useEffect as useEffect6, useRef as useRef5 } from "react";
 import { Renderer, EditorProvider as EditorProvider2, ActiveLinePlaceholder as ActiveLinePlaceholder2 } from "@coze-editor/editor/react";
 import preset2 from "@coze-editor/editor/preset-prompt";
 
@@ -2301,8 +2318,8 @@ function PromptEditor(props) {
     disableMarkdownHighlight,
     options
   } = props || {};
-  const editorRef = useRef4(null);
-  useEffect5(() => {
+  const editorRef = useRef5(null);
+  useEffect6(() => {
     if (editorRef.current?.getValue() !== value?.content) {
       editorRef.current?.setValue(String(value?.content || ""));
     }
@@ -2332,7 +2349,7 @@ function PromptEditor(props) {
 import React27 from "react";
 
 // src/components/prompt-editor-with-variables/extensions/variable-tree.tsx
-import React25, { useEffect as useEffect6, useState as useState6 } from "react";
+import React25, { useEffect as useEffect7, useState as useState6 } from "react";
 import { Popover as Popover2, Tree } from "@douyinfe/semi-ui";
 import {
   Mention,
@@ -2360,7 +2377,7 @@ function VariableTree() {
     setPosition(e.state.selection.main.head);
     setVisible(e.value);
   }
-  useEffect6(() => {
+  useEffect7(() => {
     if (!editor) {
       return;
     }
@@ -2565,7 +2582,7 @@ function PromptEditorWithVariables(props) {
 import React30 from "react";
 
 // src/components/prompt-editor-with-inputs/extensions/inputs-tree.tsx
-import React29, { useEffect as useEffect7, useState as useState7 } from "react";
+import React29, { useEffect as useEffect8, useState as useState7 } from "react";
 import { Popover as Popover4 } from "@douyinfe/semi-ui";
 import {
   Mention as Mention2,
@@ -2659,7 +2676,7 @@ function InputsTree({ inputsValues }) {
     setPosition(e.state.selection.main.head);
     setVisible(e.value);
   }
-  useEffect7(() => {
+  useEffect8(() => {
     if (!editor) {
       return;
     }
@@ -2701,7 +2718,7 @@ import React33 from "react";
 import { transformerCreator } from "@coze-editor/editor/preset-code";
 
 // src/components/json-editor-with-variables/extensions/variable-tree.tsx
-import React31, { useEffect as useEffect8, useState as useState8 } from "react";
+import React31, { useEffect as useEffect9, useState as useState8 } from "react";
 import { Popover as Popover5, Tree as Tree3 } from "@douyinfe/semi-ui";
 import {
   Mention as Mention3,
@@ -2729,7 +2746,7 @@ function VariableTree2() {
     setPosition(e.state.selection.main.head);
     setVisible(e.value);
   }
-  useEffect8(() => {
+  useEffect9(() => {
     if (!editor) {
       return;
     }
@@ -3145,7 +3162,7 @@ function SchemaTree(props) {
 }
 
 // src/components/display-outputs/index.tsx
-import React37, { useEffect as useEffect9 } from "react";
+import React37, { useEffect as useEffect10 } from "react";
 import { JsonSchemaUtils as JsonSchemaUtils6 } from "@flowgram.ai/json-schema";
 import { useCurrentScope as useCurrentScope3, useRefresh } from "@flowgram.ai/editor";
 
@@ -3202,7 +3219,7 @@ var DisplayOutputsWrapper = styled13.div`
 function DisplayOutputs({ value, showIconInTree, displayFromScope }) {
   const scope = useCurrentScope3();
   const refresh = useRefresh();
-  useEffect9(() => {
+  useEffect10(() => {
     if (!displayFromScope) {
       return () => null;
     }
@@ -3248,18 +3265,7 @@ function DisplayFlowValue({ value, title, showIconInTree }) {
       return { type: "string" };
     }
     if (value?.type === "constant") {
-      if (value?.schema) {
-        return value?.schema;
-      }
-      if (typeof value?.content === "string") {
-        return { type: "string" };
-      }
-      if (typeof value?.content === "number") {
-        return { type: "number" };
-      }
-      if (typeof value?.content === "boolean") {
-        return { type: "boolean" };
-      }
+      return FlowValueUtils.inferConstantJsonSchema(value);
     }
     return { type: "unknown" };
   }, [value, variable?.hash]);
@@ -3275,7 +3281,9 @@ function DisplayFlowValue({ value, title, showIconInTree }) {
 }
 
 // src/components/display-inputs-values/index.tsx
-import React39 from "react";
+import React39, { useMemo as useMemo11 } from "react";
+import { isPlainObject as isPlainObject2 } from "lodash";
+import { useScopeAvailable as useScopeAvailable5 } from "@flowgram.ai/editor";
 
 // src/components/display-inputs-values/styles.ts
 import styled14 from "styled-components";
@@ -3288,7 +3296,35 @@ var DisplayInputsWrapper = styled14.div`
 // src/components/display-inputs-values/index.tsx
 function DisplayInputsValues({ value, showIconInTree }) {
   const childEntries = Object.entries(value || {});
-  return /* @__PURE__ */ React39.createElement(DisplayInputsWrapper, null, childEntries.map(([key, value2]) => /* @__PURE__ */ React39.createElement(DisplayFlowValue, { key, title: key, value: value2, showIconInTree })));
+  return /* @__PURE__ */ React39.createElement(DisplayInputsWrapper, null, childEntries.map(([key, value2]) => {
+    if (FlowValueUtils.isFlowValue(value2)) {
+      return /* @__PURE__ */ React39.createElement(DisplayFlowValue, { key, title: key, value: value2, showIconInTree });
+    }
+    if (isPlainObject2(value2)) {
+      return /* @__PURE__ */ React39.createElement(
+        DisplayInputsValueAllInTag,
+        {
+          key,
+          title: key,
+          value: value2,
+          showIconInTree
+        }
+      );
+    }
+    return null;
+  }));
+}
+function DisplayInputsValueAllInTag({
+  value,
+  title,
+  showIconInTree
+}) {
+  const available = useScopeAvailable5();
+  const schema = useMemo11(
+    () => FlowValueUtils.inferJsonSchema(value, available.scope),
+    [available.version, value]
+  );
+  return /* @__PURE__ */ React39.createElement(DisplaySchemaTag, { title, value: schema, showIconInTree });
 }
 
 // src/components/assign-rows/index.tsx
@@ -3303,11 +3339,11 @@ import { IconButton as IconButton5 } from "@douyinfe/semi-ui";
 import { IconMinus as IconMinus2 } from "@douyinfe/semi-icons";
 
 // src/components/assign-row/components/blur-input.tsx
-import React40, { useEffect as useEffect10, useState as useState9 } from "react";
+import React40, { useEffect as useEffect11, useState as useState9 } from "react";
 import Input6 from "@douyinfe/semi-ui/lib/es/input";
 function BlurInput2(props) {
   const [value, setValue] = useState9("");
-  useEffect10(() => {
+  useEffect11(() => {
     setValue(props.value);
   }, [props.value]);
   return /* @__PURE__ */ React40.createElement(
@@ -3523,17 +3559,17 @@ var iconAddChildrenSvg2 = /* @__PURE__ */ React43.createElement(
 var IconAddChildren2 = () => /* @__PURE__ */ React43.createElement(Icon4, { size: "small", svg: iconAddChildrenSvg2 });
 
 // src/components/inputs-values-tree/row.tsx
-import React44, { useState as useState10 } from "react";
+import React44, { useMemo as useMemo13, useState as useState10 } from "react";
 import { I18n as I18n14 } from "@flowgram.ai/editor";
 import { IconButton as IconButton6, Input as Input7 } from "@douyinfe/semi-ui";
 import { IconChevronDown as IconChevronDown2, IconChevronRight as IconChevronRight2, IconDelete as IconDelete3 } from "@douyinfe/semi-icons";
 
 // src/components/inputs-values-tree/hooks/use-child-list.tsx
-import { useMemo as useMemo11 } from "react";
-import { isPlainObject as isPlainObject2 } from "lodash";
+import { useMemo as useMemo12 } from "react";
+import { isPlainObject as isPlainObject3 } from "lodash";
 function useChildList(value, onChange) {
-  const canAddField = useMemo11(() => {
-    if (!isPlainObject2(value)) {
+  const canAddField = useMemo12(() => {
+    if (!isPlainObject3(value)) {
       return false;
     }
     if (FlowValueUtils.isFlowValue(value)) {
@@ -3541,8 +3577,8 @@ function useChildList(value, onChange) {
     }
     return true;
   }, [value]);
-  const objectListValue = useMemo11(() => {
-    if (isPlainObject2(value)) {
+  const objectListValue = useMemo12(() => {
+    if (isPlainObject3(value)) {
       if (FlowValueUtils.isFlowValue(value)) {
         return void 0;
       }
@@ -3550,7 +3586,6 @@ function useChildList(value, onChange) {
     }
     return void 0;
   }, [value]);
-  console.log("debugger objectListValue", objectListValue);
   const { list, add, updateKey, updateValue, remove } = useObjectList({
     value: objectListValue,
     onChange: (value2) => {
@@ -3558,8 +3593,13 @@ function useChildList(value, onChange) {
     },
     sortIndexKey: (value2) => FlowValueUtils.isFlowValue(value2) ? "extra.index" : ""
   });
+  const hasChildren = useMemo12(
+    () => canAddField && (list.length > 0 || Object.keys(objectListValue || {}).length > 0),
+    [canAddField, list.length, Object.keys(objectListValue || {}).length]
+  );
   return {
     canAddField,
+    hasChildren,
     list,
     add,
     updateKey,
@@ -3595,12 +3635,21 @@ function InputValueRow(props) {
     readonly
   } = props;
   const [collapse, setCollapse] = useState10(false);
-  const { canAddField, list, add, updateKey, updateValue, remove } = useChildList(
+  const { canAddField, hasChildren, list, add, updateKey, updateValue, remove } = useChildList(
     value,
     onUpdateValue
   );
-  const hasChildren = canAddField && list.length > 0;
-  const flowDisplayValue = hasChildren ? { type: "constant", schema: { type: " object" } } : value;
+  const strategies = useMemo13(
+    () => [...hasChildren ? [AddObjectChildStrategy] : [], ...constantProps?.strategies || []],
+    [hasChildren, constantProps?.strategies]
+  );
+  const flowDisplayValue = useMemo13(
+    () => hasChildren ? {
+      type: "constant",
+      schema: { type: "object" }
+    } : value,
+    [hasChildren, value]
+  );
   return /* @__PURE__ */ React44.createElement(React44.Fragment, null, /* @__PURE__ */ React44.createElement(UITreeItemLeft2, { $isLast, $showLine: $level > 0, $showCollapse: hasChildren }, hasChildren && /* @__PURE__ */ React44.createElement(UICollapseTrigger2, { onClick: () => setCollapse((_collapse) => !_collapse) }, collapse ? /* @__PURE__ */ React44.createElement(IconChevronDown2, { size: "small" }) : /* @__PURE__ */ React44.createElement(IconChevronRight2, { size: "small" }))), /* @__PURE__ */ React44.createElement(UITreeItemRight2, null, /* @__PURE__ */ React44.createElement(UITreeItemMain2, null, /* @__PURE__ */ React44.createElement(UIRow4, null, /* @__PURE__ */ React44.createElement(
     BlurInput,
     {
@@ -3621,10 +3670,7 @@ function InputValueRow(props) {
       hasError,
       constantProps: {
         ...constantProps,
-        strategies: [
-          ...hasChildren ? [AddObjectChildStrategy] : [],
-          ...constantProps?.strategies || []
-        ]
+        strategies
       }
     }
   ), /* @__PURE__ */ React44.createElement(UIActions2, null, canAddField && /* @__PURE__ */ React44.createElement(
@@ -4137,6 +4183,7 @@ export {
   ConditionRow,
   ConstantInput,
   DisplayFlowValue,
+  DisplayInputsValueAllInTag,
   DisplayInputsValues,
   DisplayOutputs,
   DisplaySchemaTag,