@flowgram.ai/form-materials 0.4.0 → 0.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowgram.ai/form-materials",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "homepage": "https://flowgram.ai/",
   "repository": "https://github.com/bytedance/flowgram.ai",
   "license": "MIT",
@@ -34,8 +34,9 @@
     "@codemirror/view": "~6.38.0",
     "@codemirror/state": "~6.5.2",
     "typescript": "^5.8.3",
-    "@flowgram.ai/editor": "0.4.0",
-    "@flowgram.ai/json-schema": "0.4.0"
+    "zod": "^3.24.4",
+    "@flowgram.ai/editor": "0.4.2",
+    "@flowgram.ai/json-schema": "0.4.2"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.137",
@@ -51,8 +52,8 @@
     "tsup": "^8.0.1",
     "typescript": "^5.8.3",
     "vitest": "^0.34.6",
-    "@flowgram.ai/eslint-config": "0.4.0",
-    "@flowgram.ai/ts-config": "0.4.0"
+    "@flowgram.ai/ts-config": "0.4.2",
+    "@flowgram.ai/eslint-config": "0.4.2"
   },
   "peerDependencies": {
     "react": ">=16.8",

package/src/components/batch-outputs/index.tsx

@@ -5,6 +5,7 @@
 
 import React from 'react';
 
+import { I18n } from '@flowgram.ai/editor';
 import { Button, Input } from '@douyinfe/semi-ui';
 import { IconDelete, IconPlus } from '@douyinfe/semi-icons';
 
@@ -46,8 +47,8 @@ export function BatchOutputs(props: PropsType) {
           </UIRow>
         ))}
       </UIRows>
-      <Button disabled={readonly} icon={<IconPlus />} size="small" onClick={add}>
-        Add
+      <Button disabled={readonly} icon={<IconPlus />} size="small" onClick={() => add()}>
+        {I18n.t('Add')}
       </Button>
     </div>
   );

package/src/components/display-flow-value/index.tsx

@@ -9,6 +9,7 @@ import { JsonSchemaTypeManager, JsonSchemaUtils } from '@flowgram.ai/json-schema
 import { useScopeAvailable } from '@flowgram.ai/editor';
 
 import { IFlowValue } from '@/typings';
+import { FlowValueUtils } from '@/shared';
 import { DisplaySchemaTag } from '@/components/display-schema-tag';
 
 interface PropsType {
@@ -31,18 +32,7 @@ export function DisplayFlowValue({ value, title, showIconInTree }: PropsType) {
       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' };

package/src/components/display-inputs-values/index.tsx

@@ -3,15 +3,19 @@
  * SPDX-License-Identifier: MIT
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 
-import { IFlowValue } from '@/typings';
+import { isPlainObject } from 'lodash';
+import { useScopeAvailable } from '@flowgram.ai/editor';
+
+import { FlowValueUtils } from '@/shared';
 import { DisplayFlowValue } from '@/components/display-flow-value';
 
 import { DisplayInputsWrapper } from './styles';
+import { DisplaySchemaTag } from '../display-schema-tag';
 
 interface PropsType {
-  value?: Record<string, IFlowValue | undefined>;
+  value?: any;
   showIconInTree?: boolean;
 }
 
@@ -20,9 +24,43 @@ export function DisplayInputsValues({ value, showIconInTree }: PropsType) {
 
   return (
     <DisplayInputsWrapper>
-      {childEntries.map(([key, value]) => (
-        <DisplayFlowValue key={key} title={key} value={value} showIconInTree={showIconInTree} />
-      ))}
+      {childEntries.map(([key, value]) => {
+        if (FlowValueUtils.isFlowValue(value)) {
+          return (
+            <DisplayFlowValue key={key} title={key} value={value} showIconInTree={showIconInTree} />
+          );
+        }
+
+        if (isPlainObject(value)) {
+          return (
+            <DisplayInputsValueAllInTag
+              key={key}
+              title={key}
+              value={value}
+              showIconInTree={showIconInTree}
+            />
+          );
+        }
+
+        return null;
+      })}
     </DisplayInputsWrapper>
   );
 }
+
+export function DisplayInputsValueAllInTag({
+  value,
+  title,
+  showIconInTree,
+}: PropsType & {
+  title: string;
+}) {
+  const available = useScopeAvailable();
+
+  const schema = useMemo(
+    () => FlowValueUtils.inferJsonSchema(value, available.scope),
+    [available.version, value]
+  );
+
+  return <DisplaySchemaTag title={title} value={schema} showIconInTree={showIconInTree} />;
+}

package/src/components/dynamic-value-input/hooks.ts

@@ -3,12 +3,12 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 
 import { IJsonSchema } from '@flowgram.ai/json-schema';
 import { useScopeAvailable } from '@flowgram.ai/editor';
 
-import { IFlowConstantRefValue } from '@/typings/flow-value';
+import { IFlowConstantRefValue } from '@/typings';
 
 export function useRefVariable(value?: IFlowConstantRefValue) {
   const available = useScopeAvailable();
@@ -33,9 +33,30 @@ export function useSelectSchema(
     defaultSelectSchema = value?.schema || defaultSelectSchema;
   }
 
+  const changeVersion = useRef(0);
+  const effectVersion = useRef(0);
+
   const [selectSchema, setSelectSchema] = useState(defaultSelectSchema);
 
-  return [selectSchema, setSelectSchema] as const;
+  useEffect(() => {
+    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: IJsonSchema) => {
+    setSelectSchema(schema);
+    changeVersion.current += 1;
+  };
+
+  return [selectSchema, setSelectSchemaWithVersionUpdate] as const;
 }
 
 export function useIncludeSchema(schemaFromProps?: IJsonSchema) {

package/src/components/dynamic-value-input/index.tsx

@@ -9,7 +9,7 @@ import { JsonSchemaUtils, IJsonSchema } from '@flowgram.ai/json-schema';
 import { IconButton } from '@douyinfe/semi-ui';
 import { IconSetting } from '@douyinfe/semi-icons';
 
-import { IFlowConstantRefValue } from '@/typings/flow-value';
+import { IFlowConstantRefValue } from '@/typings';
 import { createInjectMaterial } from '@/shared';
 import { InjectVariableSelector } from '@/components/variable-selector';
 import { TypeSelector } from '@/components/type-selector';
@@ -107,7 +107,6 @@ export function DynamicValueInput({
         onChange={(_v) => onChange({ type: 'constant', content: _v, schema: constantSchema })}
         schema={constantSchema || { type: 'string' }}
         readonly={readonly}
-        strategies={[...(constantProps?.strategies || [])]}
         fallbackRenderer={() => (
           <InjectVariableSelector
             style={{ width: '100%' }}
@@ -117,6 +116,7 @@ export function DynamicValueInput({
           />
         )}
         {...constantProps}
+        strategies={[...(constantProps?.strategies || [])]}
       />
     );
   };

package/src/components/dynamic-value-input/styles.tsx

@@ -20,6 +20,8 @@ export const UIMain = styled.div`
   flex-grow: 1;
   overflow: hidden;
   min-width: 0;
+  border-left: 1px solid var(--semi-color-border);
+  border-right: 1px solid var(--semi-color-border);
 
   & .semi-tree-select,
   & .semi-input-number,
@@ -33,19 +35,27 @@ export const UIMain = styled.div`
     border: none;
     border-radius: 0;
   }
+
+  & .semi-input-textarea-wrapper {
+    border: none;
+    border-radius: 0;
+  }
+
+  & .semi-input-textarea {
+    padding: 2px 6px;
+    border: none;
+    border-radius: 0;
+    word-break: break-all;
+  }
 `;
 
 export const UIType = styled.div`
-  border-right: 1px solid #e5e5e5;
-
   & .semi-button {
     border-radius: 0;
   }
 `;
 
 export const UITrigger = styled.div`
-  border-left: 1px solid #e5e5e5;
-
   & .semi-button {
     border-radius: 0;
   }

package/src/components/index.ts

@@ -25,3 +25,5 @@ export * from './display-flow-value';
 export * from './display-inputs-values';
 export * from './assign-rows';
 export * from './assign-row';
+export * from './blur-input';
+export * from './inputs-values-tree';

package/src/components/inputs-values/index.tsx

@@ -12,10 +12,10 @@ import { IconDelete, IconPlus } from '@douyinfe/semi-icons';
 import { IFlowConstantRefValue, IFlowValue } from '@/typings';
 import { useObjectList } from '@/hooks';
 import { InjectDynamicValueInput } from '@/components/dynamic-value-input';
+import { BlurInput } from '@/components/blur-input';
 
 import { PropsType } from './types';
 import { UIRow, UIRows } from './styles';
-import { BlurInput } from './components/blur-input';
 
 export function InputsValues({
   value,
@@ -67,8 +67,8 @@ export function InputsValues({
           </UIRow>
         ))}
       </UIRows>
-      <Button disabled={readonly} icon={<IconPlus />} size="small" onClick={add}>
-        Add
+      <Button disabled={readonly} icon={<IconPlus />} size="small" onClick={() => add()}>
+        {I18n.t('Add')}
       </Button>
     </div>
   );

package/src/components/inputs-values/styles.tsx

@@ -14,6 +14,6 @@ export const UIRows = styled.div`
 
 export const UIRow = styled.div`
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: 5px;
 `;

package/src/components/inputs-values-tree/hooks/use-child-list.tsx

@@ -0,0 +1,76 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { useMemo } from 'react';
+
+import { isPlainObject } from 'lodash';
+
+import { FlowValueUtils } from '@/shared';
+import { useObjectList } from '@/hooks';
+
+interface ListItem {
+  id: string;
+  key?: string;
+  value?: any;
+}
+
+export function useChildList(
+  value?: any,
+  onChange?: (value: any) => void
+): {
+  canAddField: boolean;
+  hasChildren: boolean;
+  list: ListItem[];
+  add: (key?: string) => void;
+  updateKey: (id: string, key: string) => void;
+  updateValue: (id: string, value: any) => void;
+  remove: (id: string) => void;
+} {
+  const canAddField = useMemo(() => {
+    if (!isPlainObject(value)) {
+      return false;
+    }
+
+    if (FlowValueUtils.isFlowValue(value)) {
+      // Constant Object Value Can Add child fields
+      return FlowValueUtils.isConstant(value) && value?.schema?.type === 'object';
+    }
+
+    return true;
+  }, [value]);
+
+  const objectListValue = useMemo(() => {
+    if (isPlainObject(value)) {
+      if (FlowValueUtils.isFlowValue(value)) {
+        return undefined;
+      }
+      return value;
+    }
+    return undefined;
+  }, [value]);
+
+  const { list, add, updateKey, updateValue, remove } = useObjectList<any>({
+    value: objectListValue,
+    onChange: (value) => {
+      onChange?.(value);
+    },
+    sortIndexKey: (value) => (FlowValueUtils.isFlowValue(value) ? 'extra.index' : ''),
+  });
+
+  const hasChildren = useMemo(
+    () => canAddField && (list.length > 0 || Object.keys(objectListValue || {}).length > 0),
+    [canAddField, list.length, Object.keys(objectListValue || {}).length]
+  );
+
+  return {
+    canAddField,
+    hasChildren,
+    list,
+    add,
+    updateKey,
+    updateValue,
+    remove,
+  };
+}

package/src/components/inputs-values-tree/index.tsx

@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React from 'react';
+
+import { I18n } from '@flowgram.ai/editor';
+import { Button } from '@douyinfe/semi-ui';
+import { IconPlus } from '@douyinfe/semi-icons';
+
+import { FlowValueUtils } from '@/shared';
+import { useObjectList } from '@/hooks';
+
+import { PropsType } from './types';
+import { UITreeItems } from './styles';
+import { InputValueRow } from './row';
+
+export function InputsValuesTree(props: PropsType) {
+  const { value, onChange, readonly, hasError, constantProps } = props;
+
+  const { list, updateKey, updateValue, remove, add } = useObjectList({
+    value,
+    onChange,
+    sortIndexKey: (value) => (FlowValueUtils.isFlowValue(value) ? 'extra.index' : ''),
+  });
+
+  return (
+    <div>
+      <UITreeItems>
+        {list.map((item) => (
+          <InputValueRow
+            key={item.id}
+            keyName={item.key}
+            value={item.value}
+            onUpdateKey={(key) => updateKey(item.id, key)}
+            onUpdateValue={(value) => updateValue(item.id, value)}
+            onRemove={() => remove(item.id)}
+            readonly={readonly}
+            hasError={hasError}
+            constantProps={constantProps}
+          />
+        ))}
+      </UITreeItems>
+      <Button
+        style={{ marginTop: 10, marginLeft: 16 }}
+        disabled={readonly}
+        icon={<IconPlus />}
+        size="small"
+        onClick={add}
+      >
+        {I18n.t('Add')}
+      </Button>
+    </div>
+  );
+}

package/src/components/inputs-values-tree/row.tsx

@@ -0,0 +1,173 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React, { useMemo, useState } from 'react';
+
+import { I18n } from '@flowgram.ai/editor';
+import { IconButton, Input } from '@douyinfe/semi-ui';
+import { IconChevronDown, IconChevronRight, IconDelete } from '@douyinfe/semi-icons';
+
+import { IFlowConstantValue } from '@/typings';
+import { ConstantInputStrategy } from '@/components/constant-input';
+
+import { PropsType } from './types';
+import {
+  IconAddChildren,
+  UIActions,
+  UICollapseTrigger,
+  UICollapsible,
+  UIRow,
+  UITreeItemLeft,
+  UITreeItemMain,
+  UITreeItemRight,
+  UITreeItems,
+} from './styles';
+import { useChildList } from './hooks/use-child-list';
+import { InjectDynamicValueInput } from '../dynamic-value-input';
+import { BlurInput } from '../blur-input';
+
+const AddObjectChildStrategy: ConstantInputStrategy = {
+  hit: (schema) => schema.type === 'object',
+  Renderer: () => (
+    <Input
+      size="small"
+      disabled
+      style={{ pointerEvents: 'none' }}
+      value={I18n.t('Configure via child fields')}
+    />
+  ),
+};
+
+export function InputValueRow(
+  props: {
+    keyName?: string;
+    value?: any;
+    onUpdateKey: (key: string) => void;
+    onUpdateValue: (value: any) => void;
+    onRemove?: () => void;
+    $isLast?: boolean;
+    $level?: number;
+  } & Pick<PropsType, 'constantProps' | 'hasError' | 'readonly'>
+) {
+  const {
+    keyName,
+    value,
+    $level = 0,
+    onUpdateKey,
+    onUpdateValue,
+    $isLast,
+    onRemove,
+    constantProps,
+    hasError,
+    readonly,
+  } = props;
+  const [collapse, setCollapse] = useState(false);
+
+  const { canAddField, hasChildren, list, add, updateKey, updateValue, remove } = useChildList(
+    value,
+    onUpdateValue
+  );
+
+  const strategies = useMemo(
+    () => [...(hasChildren ? [AddObjectChildStrategy] : []), ...(constantProps?.strategies || [])],
+    [hasChildren, constantProps?.strategies]
+  );
+
+  const flowDisplayValue = useMemo(
+    () =>
+      hasChildren
+        ? ({
+            type: 'constant',
+            schema: { type: 'object' },
+          } as IFlowConstantValue)
+        : value,
+    [hasChildren, value]
+  );
+
+  return (
+    <>
+      <UITreeItemLeft $isLast={$isLast} $showLine={$level > 0} $showCollapse={hasChildren}>
+        {hasChildren && (
+          <UICollapseTrigger onClick={() => setCollapse((_collapse) => !_collapse)}>
+            {collapse ? <IconChevronDown size="small" /> : <IconChevronRight size="small" />}
+          </UICollapseTrigger>
+        )}
+      </UITreeItemLeft>
+      <UITreeItemRight>
+        <UITreeItemMain>
+          <UIRow>
+            <BlurInput
+              style={{ width: 100, minWidth: 100, maxWidth: 100 }}
+              disabled={readonly}
+              size="small"
+              value={keyName}
+              onChange={(v) => onUpdateKey?.(v)}
+              placeholder={I18n.t('Input Key')}
+            />
+            <InjectDynamicValueInput
+              style={{ flexGrow: 1 }}
+              readonly={readonly}
+              value={flowDisplayValue}
+              onChange={(v) => onUpdateValue(v)}
+              hasError={hasError}
+              constantProps={{
+                ...constantProps,
+                strategies,
+              }}
+            />
+            <UIActions>
+              {canAddField && (
+                <IconButton
+                  disabled={readonly}
+                  size="small"
+                  theme="borderless"
+                  icon={<IconAddChildren />}
+                  onClick={() => {
+                    add();
+                    setCollapse(true);
+                  }}
+                />
+              )}
+              <IconButton
+                disabled={readonly}
+                theme="borderless"
+                icon={<IconDelete size="small" />}
+                size="small"
+                onClick={() => onRemove?.()}
+              />
+            </UIActions>
+          </UIRow>
+        </UITreeItemMain>
+        {hasChildren && (
+          <UICollapsible $collapse={collapse}>
+            <UITreeItems $shrink={true}>
+              {list.map((_item, index) => (
+                <InputValueRow
+                  readonly={readonly}
+                  hasError={hasError}
+                  constantProps={constantProps}
+                  key={_item.id}
+                  keyName={_item.key}
+                  value={_item.value}
+                  $level={$level + 1} // 传递递增的层级
+                  onUpdateValue={(_v) => {
+                    updateValue(_item.id, _v);
+                  }}
+                  onUpdateKey={(k) => {
+                    updateKey(_item.id, k);
+                  }}
+                  onRemove={() => {
+                    remove(_item.id);
+                  }}
+                  $isLast={index === list.length - 1}
+                />
+              ))}
+            </UITreeItems>
+          </UICollapsible>
+        )}
+      </UITreeItemRight>
+    </>
+  );
+}