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

package/src/components/variable-selector/index.tsx

@@ -5,15 +5,19 @@
 
 import React, { useMemo } from 'react';
 
+import { IJsonSchema } from '@flowgram.ai/json-schema';
+import { I18n } from '@flowgram.ai/editor';
 import { TriggerRenderProps } from '@douyinfe/semi-ui/lib/es/treeSelect';
 import { TreeNodeData } from '@douyinfe/semi-ui/lib/es/tree';
+import { Popover } from '@douyinfe/semi-ui';
 import { IconChevronDownStroked, IconIssueStroked } from '@douyinfe/semi-icons';
 
-import { IJsonSchema } from '../../typings/json-schema';
+import { createInjectMaterial } from '@/shared';
+
 import { useVariableTree } from './use-variable-tree';
-import { UIRootTitle, UITag, UITreeSelect, UIVarName } from './styles';
+import { UIPopoverContent, UIRootTitle, UITag, UITreeSelect, UIVarName } from './styles';
 
-interface PropTypes {
+export interface VariableSelectorProps {
   value?: string[];
   config?: {
     placeholder?: string;
@@ -28,8 +32,6 @@ interface PropTypes {
   triggerRender?: (props: TriggerRenderProps) => React.ReactNode;
 }
 
-export type VariableSelectorProps = PropTypes;
-
 export { useVariableTree };
 
 export const VariableSelector = ({
@@ -42,7 +44,7 @@ export const VariableSelector = ({
   excludeSchema,
   hasError,
   triggerRender,
-}: PropTypes) => {
+}: VariableSelectorProps) => {
   const treeData = useVariableTree({ includeSchema, excludeSchema });
 
   const treeValue = useMemo(() => {
@@ -93,24 +95,47 @@ export const VariableSelector = ({
             );
           }
 
+          const rootIcon = renderIcon(_option.rootMeta?.icon || _option?.icon);
+
+          const rootTitle = (
+            <UIRootTitle>
+              {_option.rootMeta?.title
+                ? `${_option.rootMeta?.title} ${_option.isRoot ? '' : '-'} `
+                : null}
+            </UIRootTitle>
+          );
+
           return (
-            <UITag
-              prefixIcon={renderIcon(_option.rootMeta?.icon || _option?.icon)}
-              closable={!readonly}
-              onClose={() => onChange(undefined)}
-            >
-              <UIRootTitle>
-                {_option.rootMeta?.title ? `${_option.rootMeta?.title} -` : null}
-              </UIRootTitle>
-              <UIVarName>{_option.label}</UIVarName>
-            </UITag>
+            <div>
+              <Popover
+                content={
+                  <UIPopoverContent>
+                    {rootIcon}
+                    {rootTitle}
+                    <UIVarName>{_option.keyPath.slice(1).join('.')}</UIVarName>
+                  </UIPopoverContent>
+                }
+              >
+                <UITag
+                  prefixIcon={rootIcon}
+                  closable={!readonly}
+                  onClose={() => onChange(undefined)}
+                >
+                  {rootTitle}
+                  {!_option.isRoot && <UIVarName $inSelector>{_option.label}</UIVarName>}
+                </UITag>
+              </Popover>
+            </div>
           );
         }}
         showClear={false}
         arrowIcon={<IconChevronDownStroked size="small" />}
         triggerRender={triggerRender}
-        placeholder={config?.placeholder ?? 'Select Variable...'}
+        placeholder={config?.placeholder ?? I18n.t('Select Variable')}
       />
     </>
   );
 };
+
+VariableSelector.renderKey = 'variable-selector-render-key';
+export const InjectVariableSelector = createInjectMaterial(VariableSelector);

package/src/components/variable-selector/styles.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { Tag, TreeSelect } from '@douyinfe/semi-ui';
 
 export const UIRootTitle = styled.div`
@@ -15,11 +15,16 @@ export const UIRootTitle = styled.div`
   color: var(--semi-color-text-2);
 `;
 
-export const UIVarName = styled.div`
+export const UIVarName = styled.div<{ $inSelector?: boolean }>`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  min-width: 50%;
+
+  ${({ $inSelector }) =>
+    $inSelector &&
+    css`
+      min-width: 50%;
+    `}
 `;
 
 export const UITag = styled(Tag)`
@@ -34,18 +39,15 @@ export const UITag = styled(Tag)`
 
   &.semi-tag {
     margin: 0;
+    height: 22px;
   }
 `;
 
 export const UITreeSelect = styled(TreeSelect)<{ $error?: boolean }>`
   outline: ${({ $error }) => ($error ? '1px solid red' : 'none')};
 
-  height: 22px;
-  min-height: 22px;
-  line-height: 22px;
-
   & .semi-tree-select-selection {
-    padding: 0 2px;
+    padding: 0px;
     height: 22px;
   }
 
@@ -57,3 +59,11 @@ export const UITreeSelect = styled(TreeSelect)<{ $error?: boolean }>`
     padding-left: 10px;
   }
 `;
+
+export const UIPopoverContent = styled.div`
+  padding: 10px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  white-space: nowrap;
+`;

package/src/components/variable-selector/use-variable-tree.tsx

@@ -5,22 +5,27 @@
 
 import React, { useCallback } from 'react';
 
+import { IJsonSchema, JsonSchemaUtils } from '@flowgram.ai/json-schema';
 import { ASTMatch, BaseVariableField, useAvailableVariables } from '@flowgram.ai/editor';
 import { TreeNodeData } from '@douyinfe/semi-ui/lib/es/tree';
 import { Icon } from '@douyinfe/semi-ui';
 
-import { ArrayIcons, VariableTypeIcons } from '../type-selector/constants';
-import { JsonSchemaUtils } from '../../utils/json-schema';
-import { IJsonSchema } from '../../typings/json-schema';
+import { useTypeManager } from '@/plugins';
 
-type VariableField = BaseVariableField<{ icon?: string | JSX.Element; title?: string }>;
+type VariableField = BaseVariableField<{
+  icon?: string | JSX.Element;
+  title?: string;
+  disabled?: boolean;
+}>;
 
 export function useVariableTree(params: {
   includeSchema?: IJsonSchema | IJsonSchema[];
   excludeSchema?: IJsonSchema | IJsonSchema[];
+  customSkip?: (variable: VariableField) => boolean;
 }): TreeNodeData[] {
-  const { includeSchema, excludeSchema } = params;
+  const { includeSchema, excludeSchema, customSkip } = params;
 
+  const typeManager = useTypeManager();
   const variables = useAvailableVariables();
 
   const getVariableTypeIcon = useCallback((variable: VariableField) => {
@@ -32,22 +37,9 @@ export function useVariableTree(params: {
       return variable.meta.icon;
     }
 
-    const _type = variable.type;
+    const schema = JsonSchemaUtils.astToSchema(variable.type, { drilldownObject: false });
 
-    if (ASTMatch.isArray(_type)) {
-      return (
-        <Icon
-          size="small"
-          svg={ArrayIcons[_type.items?.kind.toLowerCase()] || VariableTypeIcons.array}
-        />
-      );
-    }
-
-    if (ASTMatch.isCustomType(_type)) {
-      return <Icon size="small" svg={VariableTypeIcons[_type.typeName.toLowerCase()]} />;
-    }
-
-    return <Icon size="small" svg={VariableTypeIcons[variable.type?.kind.toLowerCase()]} />;
+    return <Icon size="small" svg={typeManager.getDisplayIcon(schema || {})} />;
   }, []);
 
   const renderVariable = (
@@ -77,8 +69,12 @@ export function useVariableTree(params: {
     const isSchemaExclude = excludeSchema
       ? JsonSchemaUtils.isASTMatchSchema(type, excludeSchema)
       : false;
+    const isCustomSkip = customSkip ? customSkip(variable) : false;
+
+    // disabled in meta when created
+    const isMetaDisabled = variable.meta?.disabled;
 
-    const isSchemaMatch = isSchemaInclude && !isSchemaExclude;
+    const isSchemaMatch = isSchemaInclude && !isSchemaExclude && !isCustomSkip && !isMetaDisabled;
 
     // If not match, and no children, return null
     if (!isSchemaMatch && !children?.length) {
@@ -93,7 +89,8 @@ export function useVariableTree(params: {
       icon: getVariableTypeIcon(variable),
       children,
       disabled: !isSchemaMatch,
-      rootMeta: parentFields[0]?.meta,
+      rootMeta: parentFields[0]?.meta || variable.meta,
+      isRoot: !parentFields?.length,
     };
   };
 

package/src/effects/auto-rename-ref/index.ts

@@ -11,7 +11,7 @@ import {
   VariableFieldKeyRenameService,
 } from '@flowgram.ai/editor';
 
-import { IFlowRefValue, IFlowTemplateValue } from '../../typings';
+import { IFlowRefValue, IFlowTemplateValue } from '@/typings';
 
 /**
  * Auto rename ref when form item's key is renamed

package/src/effects/index.ts

@@ -4,7 +4,9 @@
  */
 
 export * from './provide-batch-input';
-export * from './provide-batch-outputs';
 export * from './auto-rename-ref';
 export * from './provide-json-schema-outputs';
 export * from './sync-variable-title';
+export * from './validate-when-variable-sync';
+export * from './listen-ref-value-change';
+export * from './listen-ref-schema-change';

package/src/effects/listen-ref-schema-change/index.ts

@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { IJsonSchema, JsonSchemaUtils } from '@flowgram.ai/json-schema';
+import {
+  BaseType,
+  DataEvent,
+  Effect,
+  EffectFuncProps,
+  EffectOptions,
+  getNodeScope,
+} from '@flowgram.ai/editor';
+
+import { IFlowRefValue } from '@/typings';
+
+/**
+ * Example:
+ * const formMeta = {
+ *   effect: {
+ *     'inputsValues.*': listenRefSchemaChange(({ name, schema, form }) => {
+ *       form.setValueIn(`${name}.schema`, schema);
+ *     })
+ *   }
+ * }
+ * @param cb
+ * @returns
+ */
+export const listenRefSchemaChange = (
+  cb: (props: EffectFuncProps<IFlowRefValue> & { schema?: IJsonSchema }) => void
+): EffectOptions[] => [
+  {
+    event: DataEvent.onValueInitOrChange,
+    effect: ((params) => {
+      const { context, value } = params;
+
+      if (value?.type !== 'ref') {
+        return () => null;
+      }
+
+      const disposable = getNodeScope(context.node).available.trackByKeyPath<BaseType | undefined>(
+        value?.content || [],
+        (_type) => {
+          cb({ ...params, schema: JsonSchemaUtils.astToSchema(_type) });
+        },
+        {
+          selector: (_v) => _v?.type,
+        }
+      );
+      return () => {
+        disposable.dispose();
+      };
+    }) as Effect,
+  },
+];

package/src/effects/listen-ref-value-change/index.ts

@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import {
+  BaseVariableField,
+  DataEvent,
+  Effect,
+  EffectFuncProps,
+  EffectOptions,
+  getNodeScope,
+} from '@flowgram.ai/editor';
+
+import { IFlowRefValue } from '@/typings';
+
+/**
+ * Example:
+ * const formMeta = {
+ *   effect: {
+ *     'inputsValues.*': listenRefValueChange(({ name, variable, form }) => {
+ *       const schema = JsonSchemaUtils.astToSchema(variable?.type);
+ *       form.setValueIn(`${name}.schema`, schema);
+ *     })
+ *   }
+ * }
+ * @param cb
+ * @returns
+ */
+export const listenRefValueChange = (
+  cb: (props: EffectFuncProps<IFlowRefValue> & { variable?: BaseVariableField }) => void
+): EffectOptions[] => [
+  {
+    event: DataEvent.onValueInitOrChange,
+    effect: ((params) => {
+      const { context, value } = params;
+
+      if (value?.type !== 'ref') {
+        return () => null;
+      }
+
+      const disposable = getNodeScope(context.node).available.trackByKeyPath(
+        value?.content || [],
+        (v) => {
+          cb({ ...params, variable: v });
+        }
+      );
+      return () => {
+        disposable.dispose();
+      };
+    }) as Effect,
+  },
+];

package/src/effects/provide-batch-input/index.ts

@@ -11,7 +11,7 @@ import {
   getNodeForm,
 } from '@flowgram.ai/editor';
 
-import { IFlowRefValue } from '../../typings';
+import { IFlowRefValue } from '@/typings';
 
 export const provideBatchInputEffect: EffectOptions[] = createEffectFromVariableProvider({
   private: true,

package/src/effects/provide-json-schema-outputs/index.ts

@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
+import { JsonSchemaUtils, IJsonSchema } from '@flowgram.ai/json-schema';
 import {
   ASTFactory,
   EffectOptions,
@@ -11,9 +12,6 @@ import {
   getNodeForm,
 } from '@flowgram.ai/editor';
 
-import { JsonSchemaUtils } from '../../utils';
-import { IJsonSchema } from '../../typings';
-
 export const provideJsonSchemaOutputs: EffectOptions[] = createEffectFromVariableProvider({
   parse: (value: IJsonSchema, ctx) => [
     ASTFactory.createVariableDeclaration({

package/src/effects/sync-variable-title/index.ts

@@ -18,6 +18,7 @@ export const syncVariableTitle: EffectOptions[] = [
       context.node.getData(FlowNodeVariableData).allScopes.forEach((_scope) => {
         _scope.output.variables.forEach((_var) => {
           _var.updateMeta({
+            ...(_var.meta || {}),
             title: value || context.node.id,
             icon: context.node.getNodeRegistry<FlowNodeRegistry>().info?.icon,
           });

package/src/effects/validate-when-variable-sync/index.ts

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { isEmpty } from 'lodash';
+import {
+  DataEvent,
+  Effect,
+  EffectOptions,
+  getNodeScope,
+  getNodePrivateScope,
+} from '@flowgram.ai/editor';
+
+export const validateWhenVariableSync = ({
+  scope,
+}: {
+  scope?: 'private' | 'public';
+} = {}): EffectOptions[] => [
+  {
+    event: DataEvent.onValueInit,
+    effect: (({ context, form }) => {
+      const nodeScope =
+        scope === 'private' ? getNodePrivateScope(context.node) : getNodeScope(context.node);
+
+      const disposable = nodeScope.available.onListOrAnyVarChange(() => {
+        if (!isEmpty(form.state.errors)) {
+          form.validate();
+        }
+      });
+
+      return () => disposable.dispose();
+    }) as Effect,
+  },
+];

package/src/form-plugins/batch-outputs-plugin/index.ts

@@ -17,7 +17,7 @@ import {
   FlowNodeScopeType,
 } from '@flowgram.ai/editor';
 
-import { IFlowRefValue } from '../../typings';
+import { IFlowRefValue } from '@/typings';
 
 export const provideBatchOutputsEffect: EffectOptions[] = createEffectFromVariableProvider({
   parse: (value: Record<string, IFlowRefValue>, ctx) => [

package/src/form-plugins/index.ts

@@ -3,4 +3,6 @@
  * SPDX-License-Identifier: MIT
  */
 
-export { createBatchOutputsFormPlugin } from './batch-outputs-plugin';
+export * from './batch-outputs-plugin';
+export * from './infer-inputs-plugin';
+export * from './infer-assign-plugin';

package/src/form-plugins/infer-assign-plugin/index.ts

@@ -0,0 +1,90 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { set, uniqBy } from 'lodash';
+import { JsonSchemaUtils } from '@flowgram.ai/json-schema';
+import {
+  ASTFactory,
+  createEffectFromVariableProvider,
+  defineFormPluginCreator,
+  FlowNodeRegistry,
+  getNodeForm,
+  getNodeScope,
+} from '@flowgram.ai/editor';
+
+import { IFlowRefValue, IFlowValue } from '@/typings';
+
+type AssignValueType =
+  | {
+      operator: 'assign';
+      left?: IFlowRefValue;
+      right?: IFlowValue;
+    }
+  | {
+      operator: 'declare';
+      left?: string;
+      right?: IFlowValue;
+    };
+
+interface InputConfig {
+  assignKey: string;
+  outputKey: string;
+}
+
+export const createInferAssignPlugin = defineFormPluginCreator<InputConfig>({
+  onSetupFormMeta({ addFormatOnSubmit, mergeEffect }, { assignKey, outputKey }) {
+    if (!assignKey || !outputKey) {
+      return;
+    }
+
+    mergeEffect({
+      [assignKey]: createEffectFromVariableProvider({
+        parse: (value: AssignValueType[], ctx) => {
+          const declareRows = uniqBy(
+            value.filter((_v) => _v.operator === 'declare' && _v.left && _v.right),
+            'left'
+          );
+
+          return [
+            ASTFactory.createVariableDeclaration({
+              key: `${ctx.node.id}`,
+              meta: {
+                title: getNodeForm(ctx.node)?.getValueIn('title'),
+                icon: ctx.node.getNodeRegistry<FlowNodeRegistry>().info?.icon,
+              },
+              type: ASTFactory.createObject({
+                properties: declareRows.map((_v) =>
+                  ASTFactory.createProperty({
+                    key: _v.left as string,
+                    type:
+                      _v.right?.type === 'constant'
+                        ? JsonSchemaUtils.schemaToAST(_v.right?.schema || {})
+                        : undefined,
+                    initializer:
+                      _v.right?.type === 'ref'
+                        ? ASTFactory.createKeyPathExpression({
+                            keyPath: _v.right?.content || [],
+                          })
+                        : {},
+                  })
+                ),
+              }),
+            }),
+          ];
+        },
+      }),
+    });
+
+    addFormatOnSubmit((formData, ctx) => {
+      set(
+        formData,
+        outputKey,
+        JsonSchemaUtils.astToSchema(getNodeScope(ctx.node).output.variables?.[0]?.type)
+      );
+
+      return formData;
+    });
+  },
+});

package/src/form-plugins/infer-inputs-plugin/index.ts

@@ -0,0 +1,108 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { get, set } from 'lodash';
+import { JsonSchemaUtils, IJsonSchema } from '@flowgram.ai/json-schema';
+import {
+  defineFormPluginCreator,
+  getNodePrivateScope,
+  getNodeScope,
+  Scope,
+} from '@flowgram.ai/editor';
+
+import { IFlowConstantValue, IFlowRefValue, IFlowTemplateValue } from '@/typings';
+
+interface InputConfig {
+  sourceKey: string;
+  targetKey: string;
+  scope?: 'private' | 'public';
+}
+
+export const createInferInputsPlugin = defineFormPluginCreator<InputConfig>({
+  onSetupFormMeta({ addFormatOnSubmit }, { sourceKey, targetKey, scope }) {
+    if (!sourceKey || !targetKey) {
+      return;
+    }
+
+    addFormatOnSubmit((formData, ctx) => {
+      set(
+        formData,
+        targetKey,
+        infer(
+          get(formData, sourceKey),
+          scope === 'private' ? getNodePrivateScope(ctx.node) : getNodeScope(ctx.node)
+        )
+      );
+
+      return formData;
+    });
+  },
+});
+
+function isRef(value: any): value is IFlowRefValue {
+  return (
+    value?.type === 'ref' && Array.isArray(value?.content) && typeof value?.content[0] === 'string'
+  );
+}
+
+function isTemplate(value: any): value is IFlowTemplateValue {
+  return value?.type === 'template' && typeof value?.content === 'string';
+}
+
+function isConstant(value: any): value is IFlowConstantValue {
+  return value?.type === 'constant' && typeof value?.content !== 'undefined';
+}
+
+const infer = (values: any, scope: Scope): IJsonSchema | undefined => {
+  if (typeof values === 'object') {
+    if (isConstant(values)) {
+      if (values?.schema) {
+        return values.schema;
+      }
+
+      if (typeof values.content === 'string') {
+        return {
+          type: 'string',
+        };
+      }
+
+      if (typeof values.content === 'number') {
+        return {
+          type: 'number',
+        };
+      }
+
+      if (typeof values.content === 'boolean') {
+        return {
+          type: 'boolean',
+        };
+      }
+    }
+
+    if (isRef(values)) {
+      const variable = scope.available.getByKeyPath(values?.content);
+      const schema = variable?.type ? JsonSchemaUtils.astToSchema(variable?.type) : undefined;
+
+      return schema;
+    }
+
+    if (isTemplate(values)) {
+      return {
+        type: 'string',
+      };
+    }
+
+    return {
+      type: 'object',
+      properties: Object.keys(values).reduce((acc, key) => {
+        const schema = infer(values[key], scope);
+        if (schema) {
+          acc[key] = schema;
+        }
+        return acc;
+      }, {} as Record<string, IJsonSchema>),
+    };
+  }
+};

package/src/hooks/index.tsx

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export * from './use-object-list';