@flowgram.ai/form-materials 0.1.0-alpha.14 → 0.1.0-alpha.16

package/src/components/prompt-editor/types.tsx

@@ -5,7 +5,7 @@
 
 import React from 'react';
 
-import { IFlowTemplateValue } from '@/typings';
+import { IFlowTemplateValue } from '@/shared';
 
 export type PropsType = React.PropsWithChildren<{
   value?: IFlowTemplateValue;

package/src/components/prompt-editor-with-inputs/editor.tsx

@@ -6,8 +6,7 @@
 import React from 'react';
 
 import { PromptEditor, PromptEditorPropsType } from '@/components/prompt-editor';
-
-import { InputsTree } from './extensions/inputs-tree';
+import { EditorInputsTree } from '@/components/coze-editor-extensions';
 
 export interface PromptEditorWithInputsProps extends PromptEditorPropsType {
   inputsValues: any;
@@ -19,7 +18,7 @@ export function PromptEditorWithInputs({
 }: PromptEditorWithInputsProps) {
   return (
     <PromptEditor {...restProps}>
-      <InputsTree inputsValues={inputsValues} />
+      <EditorInputsTree inputsValues={inputsValues} />
     </PromptEditor>
   );
 }

package/src/components/prompt-editor-with-variables/editor.tsx

@@ -6,17 +6,15 @@
 import React from 'react';
 
 import { PromptEditor, PromptEditorPropsType } from '@/components/prompt-editor';
-
-import { VariableTree } from './extensions/variable-tree';
-import { VariableTagInject } from './extensions/variable-tag';
+import { EditorVariableTree, EditorVariableTagInject } from '@/components/coze-editor-extensions';
 
 export interface PromptEditorWithVariablesProps extends PromptEditorPropsType {}
 
 export function PromptEditorWithVariables(props: PromptEditorWithVariablesProps) {
   return (
     <PromptEditor {...props}>
-      <VariableTree />
-      <VariableTagInject />
+      <EditorVariableTree />
+      <EditorVariableTagInject />
     </PromptEditor>
   );
 }

package/src/components/sql-editor-with-variables/editor.tsx

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React from 'react';
+
+import { I18n } from '@flowgram.ai/editor';
+
+import { EditorVariableTree, EditorVariableTagInject } from '@/components/coze-editor-extensions';
+import { SQLCodeEditor, type CodeEditorPropsType } from '@/components/code-editor';
+
+export interface SQLEditorWithVariablesProps extends Omit<CodeEditorPropsType, 'languageId'> {}
+
+export function SQLEditorWithVariables(props: SQLEditorWithVariablesProps) {
+  return (
+    <SQLCodeEditor
+      activeLinePlaceholder={I18n.t("Press '@' to Select variable")}
+      {...props}
+      options={{
+        ...(props.options || {}),
+      }}
+    >
+      <EditorVariableTree />
+      <EditorVariableTagInject />
+    </SQLCodeEditor>
+  );
+}

package/src/components/sql-editor-with-variables/index.tsx

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { lazySuspense } from '@/shared';
+
+export const SQLEditorWithVariables = lazySuspense(() =>
+  import('./editor').then((module) => ({ default: module.SQLEditorWithVariables }))
+);
+
+export type { SQLEditorWithVariablesProps } from './editor';

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

@@ -5,11 +5,10 @@
 
 import React, { useMemo } from 'react';
 
-import { IJsonSchema } from '@flowgram.ai/json-schema';
+import { IJsonSchema, useTypeManager, JsonSchemaTypeManager } from '@flowgram.ai/json-schema';
 import { Cascader, Icon, IconButton } from '@douyinfe/semi-ui';
 
 import { createInjectMaterial } from '@/shared/inject-material';
-import { useTypeManager } from '@/plugins';
 
 export interface TypeSelectorProps {
   value?: Partial<IJsonSchema>;
@@ -47,7 +46,7 @@ export function TypeSelector(props: TypeSelectorProps) {
 
   const selectValue = useMemo(() => getTypeSelectValue(value), [value]);
 
-  const typeManager = useTypeManager();
+  const typeManager = useTypeManager() as JsonSchemaTypeManager;
 
   const icon = typeManager.getDisplayIcon(value || {});
 

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

@@ -7,8 +7,8 @@ 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 { type TriggerRenderProps } from '@douyinfe/semi-ui/lib/es/treeSelect';
+import { type TreeNodeData } from '@douyinfe/semi-ui/lib/es/tree';
 import { Popover } from '@douyinfe/semi-ui';
 import { IconChevronDownStroked, IconIssueStroked } from '@douyinfe/semi-icons';
 

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

@@ -5,13 +5,16 @@
 
 import React, { useCallback } from 'react';
 
-import { IJsonSchema, JsonSchemaUtils } from '@flowgram.ai/json-schema';
+import {
+  IJsonSchema,
+  JsonSchemaTypeManager,
+  JsonSchemaUtils,
+  useTypeManager,
+} 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 { useTypeManager } from '@/plugins';
-
 type VariableField = BaseVariableField<{
   icon?: string | JSX.Element;
   title?: string;
@@ -25,7 +28,7 @@ export function useVariableTree(params: {
 }): TreeNodeData[] {
   const { includeSchema, excludeSchema, skipVariable } = params;
 
-  const typeManager = useTypeManager();
+  const typeManager = useTypeManager() as JsonSchemaTypeManager;
   const variables = useAvailableVariables();
 
   const getVariableTypeIcon = useCallback((variable: VariableField) => {

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

@@ -10,7 +10,7 @@ import {
   VariableFieldKeyRenameService,
 } from '@flowgram.ai/editor';
 
-import { IFlowRefValue, IFlowTemplateValue } from '@/typings';
+import { IFlowRefValue, IFlowTemplateValue } from '@/shared';
 import { FlowValueUtils } from '@/shared';
 
 /**

package/src/effects/index.ts

@@ -3,10 +3,10 @@
  * SPDX-License-Identifier: MIT
  */
 
-export * from './provide-batch-input';
-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';
+export { autoRenameRefEffect } from './auto-rename-ref';
+export { listenRefSchemaChange } from './listen-ref-schema-change';
+export { listenRefValueChange } from './listen-ref-value-change';
+export { provideBatchInputEffect } from './provide-batch-input';
+export { provideJsonSchemaOutputs } from './provide-json-schema-outputs';
+export { syncVariableTitle } from './sync-variable-title';
+export { validateWhenVariableSync } from './validate-when-variable-sync';

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

@@ -13,7 +13,7 @@ import {
   getNodeScope,
 } from '@flowgram.ai/editor';
 
-import { IFlowRefValue } from '@/typings';
+import { IFlowRefValue } from '@/shared';
 
 /**
  * Example:

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

@@ -12,7 +12,7 @@ import {
   getNodeScope,
 } from '@flowgram.ai/editor';
 
-import { IFlowRefValue } from '@/typings';
+import { IFlowRefValue } from '@/shared';
 
 /**
  * Example:

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

@@ -8,10 +8,9 @@ import {
   EffectOptions,
   FlowNodeRegistry,
   createEffectFromVariableProvider,
-  getNodeForm,
 } from '@flowgram.ai/editor';
 
-import { IFlowRefValue } from '@/typings';
+import { IFlowRefValue } from '@/shared';
 
 export const provideBatchInputEffect: EffectOptions[] = createEffectFromVariableProvider({
   private: true,
@@ -19,7 +18,7 @@ export const provideBatchInputEffect: EffectOptions[] = createEffectFromVariable
     ASTFactory.createVariableDeclaration({
       key: `${ctx.node.id}_locals`,
       meta: {
-        title: getNodeForm(ctx.node)?.getValueIn('title'),
+        title: ctx.node.form?.getValueIn('title'),
         icon: ctx.node.getNodeRegistry<FlowNodeRegistry>().info?.icon,
       },
       type: ASTFactory.createObject({

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

@@ -9,7 +9,6 @@ import {
   EffectOptions,
   FlowNodeRegistry,
   createEffectFromVariableProvider,
-  getNodeForm,
 } from '@flowgram.ai/editor';
 
 export const provideJsonSchemaOutputs: EffectOptions[] = createEffectFromVariableProvider({
@@ -17,7 +16,7 @@ export const provideJsonSchemaOutputs: EffectOptions[] = createEffectFromVariabl
     ASTFactory.createVariableDeclaration({
       key: `${ctx.node.id}`,
       meta: {
-        title: getNodeForm(ctx.node)?.getValueIn('title') || ctx.node.id,
+        title: ctx.node.form?.getValueIn('title') || ctx.node.id,
         icon: ctx.node.getNodeRegistry<FlowNodeRegistry>().info?.icon,
       },
       type: JsonSchemaUtils.schemaToAST(value),

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

@@ -3,12 +3,13 @@
  * SPDX-License-Identifier: MIT
  */
 
+import { set } from 'lodash-es';
+import { JsonSchemaUtils } from '@flowgram.ai/json-schema';
 import {
   ASTFactory,
   createEffectFromVariableProvider,
   defineFormPluginCreator,
   FlowNodeRegistry,
-  getNodeForm,
   getNodePrivateScope,
   getNodeScope,
   ScopeChainTransformService,
@@ -17,14 +18,14 @@ import {
   FlowNodeScopeType,
 } from '@flowgram.ai/editor';
 
-import { IFlowRefValue } from '@/typings';
+import { IFlowRefValue } from '@/shared';
 
 export const provideBatchOutputsEffect: EffectOptions[] = createEffectFromVariableProvider({
   parse: (value: Record<string, IFlowRefValue>, ctx) => [
     ASTFactory.createVariableDeclaration({
       key: `${ctx.node.id}`,
       meta: {
-        title: getNodeForm(ctx.node)?.getValueIn('title'),
+        title: ctx.node.form?.getValueIn('title'),
         icon: ctx.node.getNodeRegistry<FlowNodeRegistry>().info?.icon,
       },
       type: ASTFactory.createObject({
@@ -46,59 +47,76 @@ export const provideBatchOutputsEffect: EffectOptions[] = createEffectFromVariab
 /**
  * Free Layout only right now
  */
-export const createBatchOutputsFormPlugin: FormPluginCreator<{ outputKey: string }> =
-  defineFormPluginCreator({
-    name: 'batch-outputs-plugin',
-    onSetupFormMeta({ mergeEffect }, { outputKey }) {
-      mergeEffect({
-        [outputKey]: provideBatchOutputsEffect,
+export const createBatchOutputsFormPlugin: FormPluginCreator<{
+  outputKey: string;
+  /**
+   * if set, infer json schema to inferTargetKey when submit
+   */
+  inferTargetKey?: string;
+}> = defineFormPluginCreator({
+  name: 'batch-outputs-plugin',
+  onSetupFormMeta({ mergeEffect, addFormatOnSubmit }, { outputKey, inferTargetKey }) {
+    mergeEffect({
+      [outputKey]: provideBatchOutputsEffect,
+    });
+
+    if (inferTargetKey) {
+      addFormatOnSubmit((formData, ctx) => {
+        const outputVariable = getNodeScope(ctx.node).output.variables?.[0];
+
+        if (outputVariable?.type) {
+          set(formData, inferTargetKey, JsonSchemaUtils.astToSchema(outputVariable?.type));
+        }
+
+        return formData;
       });
-    },
-    onInit(ctx, { outputKey }) {
-      const chainTransformService = ctx.node.getService(ScopeChainTransformService);
+    }
+  },
+  onInit(ctx, { outputKey }) {
+    const chainTransformService = ctx.node.getService(ScopeChainTransformService);
 
-      const batchNodeType = ctx.node.flowNodeType;
+    const batchNodeType = ctx.node.flowNodeType;
 
-      const transformerId = `${batchNodeType}-outputs`;
+    const transformerId = `${batchNodeType}-outputs`;
 
-      if (chainTransformService.hasTransformer(transformerId)) {
-        return;
-      }
+    if (chainTransformService.hasTransformer(transformerId)) {
+      return;
+    }
 
-      chainTransformService.registerTransformer(transformerId, {
-        transformCovers: (covers, ctx) => {
-          const node = ctx.scope.meta?.node;
+    chainTransformService.registerTransformer(transformerId, {
+      transformCovers: (covers, ctx) => {
+        const node = ctx.scope.meta?.node;
 
-          // Child Node's variable can cover parent
-          if (node?.parent?.flowNodeType === batchNodeType) {
-            return [...covers, getNodeScope(node.parent)];
-          }
+        // Child Node's variable can cover parent
+        if (node?.parent?.flowNodeType === batchNodeType) {
+          return [...covers, getNodeScope(node.parent)];
+        }
 
-          return covers;
-        },
-        transformDeps(scopes, ctx) {
-          const scopeMeta = ctx.scope.meta;
+        return covers;
+      },
+      transformDeps(scopes, ctx) {
+        const scopeMeta = ctx.scope.meta;
 
-          if (scopeMeta?.type === FlowNodeScopeType.private) {
-            return scopes;
-          }
+        if (scopeMeta?.type === FlowNodeScopeType.private) {
+          return scopes;
+        }
 
-          const node = scopeMeta?.node;
+        const node = scopeMeta?.node;
 
-          // Public of Loop Node depends on child Node
-          if (node?.flowNodeType === batchNodeType) {
-            // Get all child blocks
-            const childBlocks = node.blocks;
+        // Public of Loop Node depends on child Node
+        if (node?.flowNodeType === batchNodeType) {
+          // Get all child blocks
+          const childBlocks = node.blocks;
 
-            // public scope of all child blocks
-            return [
-              getNodePrivateScope(node),
-              ...childBlocks.map((_childBlock) => getNodeScope(_childBlock)),
-            ];
-          }
+          // public scope of all child blocks
+          return [
+            getNodePrivateScope(node),
+            ...childBlocks.map((_childBlock) => getNodeScope(_childBlock)),
+          ];
+        }
 
-          return scopes;
-        },
-      });
-    },
-  });
+        return scopes;
+      },
+    });
+  },
+});

package/src/form-plugins/index.ts

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

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

@@ -10,11 +10,10 @@ import {
   createEffectFromVariableProvider,
   defineFormPluginCreator,
   FlowNodeRegistry,
-  getNodeForm,
   getNodeScope,
 } from '@flowgram.ai/editor';
 
-import { IFlowRefValue, IFlowValue } from '@/typings';
+import { IFlowRefValue, IFlowValue } from '@/shared';
 
 type AssignValueType =
   | {
@@ -51,7 +50,7 @@ export const createInferAssignPlugin = defineFormPluginCreator<InputConfig>({
             ASTFactory.createVariableDeclaration({
               key: `${ctx.node.id}`,
               meta: {
-                title: getNodeForm(ctx.node)?.getValueIn('title'),
+                title: ctx.node.form?.getValueIn('title'),
                 icon: ctx.node.getNodeRegistry<FlowNodeRegistry>().info?.icon,
               },
               type: ASTFactory.createObject({

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

@@ -3,34 +3,82 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { get, set } from 'lodash-es';
+import { get, omit, set } from 'lodash-es';
+import { Immer } from 'immer';
 import { defineFormPluginCreator, getNodePrivateScope, getNodeScope } from '@flowgram.ai/editor';
 
 import { FlowValueUtils } from '@/shared';
 
+const { produce } = new Immer({ autoFreeze: false });
+
 interface InputConfig {
   sourceKey: string;
   targetKey: string;
   scope?: 'private' | 'public';
+  /**
+   * For backend runtime, constant schema is redundant, so we can choose to ignore it
+   */
+  ignoreConstantSchema?: boolean;
 }
 
 export const createInferInputsPlugin = defineFormPluginCreator<InputConfig>({
-  onSetupFormMeta({ addFormatOnSubmit }, { sourceKey, targetKey, scope }) {
+  onSetupFormMeta(
+    { addFormatOnSubmit, addFormatOnInit },
+    { sourceKey, targetKey, scope, ignoreConstantSchema }
+  ) {
     if (!sourceKey || !targetKey) {
       return;
     }
 
-    addFormatOnSubmit((formData, ctx) => {
-      set(
-        formData,
-        targetKey,
-        FlowValueUtils.inferJsonSchema(
-          get(formData, sourceKey),
-          scope === 'private' ? getNodePrivateScope(ctx.node) : getNodeScope(ctx.node)
-        )
-      );
-
-      return formData;
-    });
+    addFormatOnSubmit((formData, ctx) =>
+      produce(formData, (draft: any) => {
+        const sourceData = get(formData, sourceKey);
+
+        set(
+          draft,
+          targetKey,
+          FlowValueUtils.inferJsonSchema(
+            sourceData,
+            scope === 'private' ? getNodePrivateScope(ctx.node) : getNodeScope(ctx.node)
+          )
+        );
+
+        if (ignoreConstantSchema) {
+          for (const { value, path } of FlowValueUtils.traverse(sourceData, {
+            includeTypes: ['constant'],
+          })) {
+            if (FlowValueUtils.isConstant(value) && value?.schema) {
+              set(formData, `${sourceKey}.${path}`, omit(value, ['schema']));
+            }
+          }
+        }
+      })
+    );
+
+    if (ignoreConstantSchema) {
+      // Revert Schema in frontend
+      addFormatOnInit((formData, ctx) => {
+        const targetSchema = get(formData, targetKey);
+
+        if (!targetSchema) {
+          return formData;
+        }
+
+        // For backend data, it's not necessary to use immer
+        for (const { value, pathArr } of FlowValueUtils.traverse(get(formData, sourceKey), {
+          includeTypes: ['constant'],
+        })) {
+          if (FlowValueUtils.isConstant(value) && !value?.schema) {
+            const schemaPath = pathArr.map((_item) => `properties.${_item}`).join('.');
+            const schema = get(targetSchema, schemaPath);
+            if (schema) {
+              set(value, 'schema', schema);
+            }
+          }
+        }
+
+        return formData;
+      });
+    }
   },
 });

package/src/hooks/{index.tsx → index.ts}

@@ -3,4 +3,4 @@
  * SPDX-License-Identifier: MIT
  */
 
-export * from './use-object-list';
+export { useObjectList } from './use-object-list';

package/src/index.ts

@@ -3,11 +3,120 @@
  * SPDX-License-Identifier: MIT
  */
 
-export * from './components';
-export * from './effects';
-export * from './shared';
-export * from './typings';
-export * from './form-plugins';
-export * from './plugins';
-export * from './validate';
-export * from './hooks';
+export {
+  AssignRow,
+  AssignRows,
+  BaseCodeEditor,
+  BatchOutputs,
+  BatchVariableSelector,
+  BlurInput,
+  CodeEditor,
+  CodeEditorMini,
+  ConditionPresetOp,
+  ConditionProvider,
+  ConditionRow,
+  ConstantInput,
+  DBConditionRow,
+  DisplayFlowValue,
+  DisplayInputsValueAllInTag,
+  DisplayInputsValues,
+  DisplayOutputs,
+  DisplaySchemaTag,
+  DisplaySchemaTree,
+  DynamicValueInput,
+  EditorInputsTree,
+  EditorVariableTagInject,
+  EditorVariableTree,
+  InjectDynamicValueInput,
+  InjectTypeSelector,
+  InjectVariableSelector,
+  InputsValues,
+  InputsValuesTree,
+  JsonCodeEditor,
+  JsonEditorWithVariables,
+  JsonSchemaEditor,
+  PromptEditor,
+  PromptEditorWithInputs,
+  PromptEditorWithVariables,
+  PythonCodeEditor,
+  SQLCodeEditor,
+  SQLEditorWithVariables,
+  ShellCodeEditor,
+  TypeScriptCodeEditor,
+  TypeSelector,
+  VariableSelector,
+  VariableSelectorProvider,
+  getTypeSelectValue,
+  parseTypeSelectValue,
+  type AssignValueType,
+  type CodeEditorPropsType,
+  type ConditionOpConfig,
+  type ConditionOpConfigs,
+  type ConditionRowValueType,
+  type ConstantInputStrategy,
+  type DBConditionOptionType,
+  type DBConditionRowValueType,
+  type IConditionRule,
+  type IConditionRuleFactory,
+  type JsonEditorWithVariablesProps,
+  type PromptEditorPropsType,
+  type PromptEditorWithInputsProps,
+  type PromptEditorWithVariablesProps,
+  type SQLEditorWithVariablesProps,
+  type TypeSelectorProps,
+  type VariableSelectorProps,
+  useCondition,
+  useConditionContext,
+  useVariableTree,
+} from './components';
+export {
+  autoRenameRefEffect,
+  listenRefSchemaChange,
+  listenRefValueChange,
+  provideBatchInputEffect,
+  provideJsonSchemaOutputs,
+  syncVariableTitle,
+  validateWhenVariableSync,
+} from './effects';
+export {
+  createBatchOutputsFormPlugin,
+  createInferAssignPlugin,
+  createInferInputsPlugin,
+  provideBatchOutputsEffect,
+} from './form-plugins';
+export { useObjectList } from './hooks';
+export {
+  JsonSchemaTypePresetProvider,
+  JsonSchemaUtils,
+  createDisableDeclarationPlugin,
+  createTypePresetPlugin,
+  type ConstantRendererProps,
+  type IJsonSchema,
+  type JsonSchemaBasicType,
+  type JsonSchemaTypeRegistry,
+  useTypeManager,
+} from './plugins';
+export {
+  FlowValueUtils,
+  createInjectMaterial,
+  formatLegacyRefOnInit,
+  formatLegacyRefOnSubmit,
+  formatLegacyRefToNewRef,
+  formatNewRefToLegacyRef,
+  isLegacyFlowRefValueSchema,
+  isNewFlowRefValueSchema,
+  lazySuspense,
+  polyfillCreateRoot,
+  type FlowValueType,
+  type IFlowConstantRefValue,
+  type IFlowConstantValue,
+  type IFlowExpressionValue,
+  type IFlowRefValue,
+  type IFlowTemplateValue,
+  type IFlowValue,
+  type IFlowValueExtra,
+  type IPolyfillRoot,
+  unstableSetCreateRoot,
+  withSuspense,
+} from './shared';
+export { validateFlowValue } from './validate';