@flowgram.ai/form-materials 0.1.0-alpha.13 → 0.1.0-alpha.15

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

@@ -5,11 +5,16 @@
 
 import React from 'react';
 
-import { JsonSchemaUtils, IJsonSchema } from '@flowgram.ai/json-schema';
+import {
+  JsonSchemaUtils,
+  IJsonSchema,
+  useTypeManager,
+  type JsonSchemaTypeManager,
+} 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, IFlowConstantValue } from '@/shared';
 import { createInjectMaterial } from '@/shared';
 import { InjectVariableSelector } from '@/components/variable-selector';
 import { TypeSelector } from '@/components/type-selector';
@@ -32,6 +37,12 @@ interface PropsType {
   };
 }
 
+const DEFAULT_VALUE: IFlowConstantValue = {
+  type: 'constant',
+  content: '',
+  schema: { type: 'string' },
+};
+
 export function DynamicValueInput({
   value,
   onChange,
@@ -44,6 +55,8 @@ export function DynamicValueInput({
   const [selectSchema, setSelectSchema] = useSelectSchema(schemaFromProps, constantProps, value);
   const includeSchema = useIncludeSchema(schemaFromProps);
 
+  const typeManager = useTypeManager() as JsonSchemaTypeManager;
+
   const renderTypeSelector = () => {
     if (schemaFromProps) {
       return <TypeSelector value={schemaFromProps} readonly={true} />;
@@ -60,24 +73,20 @@ export function DynamicValueInput({
         value={selectSchema}
         onChange={(_v) => {
           setSelectSchema(_v || { type: 'string' });
-          let content;
 
+          const schema = _v || { type: 'string' };
+          let content = typeManager.getDefaultValue(schema);
           if (_v?.type === 'object') {
             content = '{}';
           }
-
           if (_v?.type === 'array') {
             content = '[]';
           }
 
-          if (_v?.type === 'boolean') {
-            content = false;
-          }
-
           onChange({
             type: 'constant',
             content,
-            schema: _v || { type: 'string' },
+            schema,
           });
         }}
         readonly={readonly}
@@ -92,7 +101,7 @@ export function DynamicValueInput({
         <InjectVariableSelector
           style={{ width: '100%' }}
           value={value?.content}
-          onChange={(_v) => onChange(_v ? { type: 'ref', content: _v } : undefined)}
+          onChange={(_v) => onChange(_v ? { type: 'ref', content: _v } : DEFAULT_VALUE)}
           includeSchema={includeSchema}
           readonly={readonly}
         />
@@ -107,16 +116,16 @@ 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%' }}
-            onChange={(_v) => onChange(_v ? { type: 'ref', content: _v } : undefined)}
+            onChange={(_v) => onChange(_v ? { type: 'ref', content: _v } : DEFAULT_VALUE)}
             includeSchema={includeSchema}
             readonly={readonly}
           />
         )}
         {...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

@@ -3,25 +3,53 @@
  * SPDX-License-Identifier: MIT
  */
 
-export * from './variable-selector';
-export * from './type-selector';
-export * from './json-schema-editor';
-export * from './batch-variable-selector';
-export * from './constant-input';
-export * from './dynamic-value-input';
-export * from './condition-row';
-export * from './batch-outputs';
-export * from './prompt-editor';
-export * from './prompt-editor-with-variables';
-export * from './prompt-editor-with-inputs';
-export * from './code-editor';
-export * from './code-editor-mini';
-export * from './json-editor-with-variables';
-export * from './inputs-values';
-export * from './display-schema-tree';
-export * from './display-outputs';
-export * from './display-schema-tag';
-export * from './display-flow-value';
-export * from './display-inputs-values';
-export * from './assign-rows';
-export * from './assign-row';
+export { AssignRow, type AssignValueType } from './assign-row';
+export { AssignRows } from './assign-rows';
+export { BatchOutputs } from './batch-outputs';
+export { BatchVariableSelector } from './batch-variable-selector';
+export { BlurInput } from './blur-input';
+export { CodeEditor, type CodeEditorPropsType } from './code-editor';
+export { CodeEditorMini } from './code-editor-mini';
+export { ConditionRow, type ConditionRowValueType } from './condition-row';
+export { ConstantInput, type ConstantInputStrategy } from './constant-input';
+export {
+  DBConditionRow,
+  type DBConditionOptionType,
+  type DBConditionRowValueType,
+} from './db-condition-row';
+export { DisplayFlowValue } from './display-flow-value';
+export { DisplayInputsValueAllInTag, DisplayInputsValues } from './display-inputs-values';
+export { DisplayOutputs } from './display-outputs';
+export { DisplaySchemaTag } from './display-schema-tag';
+export { DisplaySchemaTree } from './display-schema-tree';
+export { DynamicValueInput, InjectDynamicValueInput } from './dynamic-value-input';
+export { InputsValues } from './inputs-values';
+export { InputsValuesTree } from './inputs-values-tree';
+export {
+  JsonEditorWithVariables,
+  type JsonEditorWithVariablesProps,
+} from './json-editor-with-variables';
+export { JsonSchemaEditor } from './json-schema-editor';
+export { PromptEditor, type PromptEditorPropsType } from './prompt-editor';
+export {
+  PromptEditorWithInputs,
+  type PromptEditorWithInputsProps,
+} from './prompt-editor-with-inputs';
+export {
+  PromptEditorWithVariables,
+  type PromptEditorWithVariablesProps,
+} from './prompt-editor-with-variables';
+export {
+  InjectTypeSelector,
+  TypeSelector,
+  getTypeSelectValue,
+  parseTypeSelectValue,
+  type TypeSelectorProps,
+} from './type-selector';
+export {
+  InjectVariableSelector,
+  VariableSelector,
+  VariableSelectorProvider,
+  useVariableTree,
+  type VariableSelectorProps,
+} from './variable-selector';

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

@@ -9,13 +9,13 @@ import { I18n } from '@flowgram.ai/editor';
 import { Button, IconButton } from '@douyinfe/semi-ui';
 import { IconDelete, IconPlus } from '@douyinfe/semi-icons';
 
-import { IFlowConstantRefValue, IFlowValue } from '@/typings';
+import { IFlowConstantRefValue, IFlowValue } from '@/shared';
 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,19 @@ export function InputsValues({
           </UIRow>
         ))}
       </UIRows>
-      <Button disabled={readonly} icon={<IconPlus />} size="small" onClick={add}>
-        Add
+      <Button
+        disabled={readonly}
+        icon={<IconPlus />}
+        size="small"
+        onClick={() =>
+          add({
+            type: 'constant',
+            content: '',
+            schema: { type: 'string' },
+          })
+        }
+      >
+        {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/types.ts

@@ -5,7 +5,7 @@
 
 import { IJsonSchema } from '@flowgram.ai/json-schema';
 
-import { IFlowValue } from '@/typings';
+import { IFlowValue } from '@/shared';
 import { ConstantInputStrategy } from '@/components/constant-input';
 
 export interface PropsType {

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-es';
+
+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: (defaultValue?: any) => 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,62 @@
+/**
+ * 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({
+            type: 'constant',
+            content: '',
+            schema: { type: 'string' },
+          });
+        }}
+      >
+        {I18n.t('Add')}
+      </Button>
+    </div>
+  );
+}

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

@@ -0,0 +1,177 @@
+/**
+ * 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 '@/shared';
+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({
+                      type: 'constant',
+                      content: '',
+                      schema: { type: 'string' },
+                    });
+                    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>
+    </>
+  );
+}