@flowgram.ai/form-materials 0.4.12 → 0.4.14

package/src/components/condition-row/index.tsx

@@ -5,17 +5,17 @@
 
 import React, { useMemo } from 'react';
 
-import { I18n } from '@flowgram.ai/editor';
-import { Input } from '@douyinfe/semi-ui';
+import { JsonSchemaUtils } from '@flowgram.ai/json-schema';
+import { I18n, useScopeAvailable } from '@flowgram.ai/editor';
+import { Button, Input, Select } from '@douyinfe/semi-ui';
+import { IconChevronDownStroked } from '@douyinfe/semi-icons';
 
 import { InjectVariableSelector } from '@/components/variable-selector';
 import { InjectDynamicValueInput } from '@/components/dynamic-value-input';
+import { IConditionRule, ConditionOpConfigs, useCondition } from '@/components/condition-context';
 
-import { ConditionRowValueType, IRules, OpConfigs } from './types';
+import { ConditionRowValueType } from './types';
 import { UIContainer, UILeft, UIOperator, UIRight, UIValues } from './styles';
-import { useRule } from './hooks/useRule';
-import { useOp } from './hooks/useOp';
-import { defaultOpConfigs, defaultRules } from './constants';
 
 interface PropTypes {
   value?: ConditionRowValueType;
@@ -23,8 +23,8 @@ interface PropTypes {
   style?: React.CSSProperties;
   readonly?: boolean;
   ruleConfig?: {
-    ops?: OpConfigs;
-    rules?: IRules;
+    ops?: ConditionOpConfigs;
+    rules?: Record<string, IConditionRule>;
   };
 }
 
@@ -41,19 +41,44 @@ export function ConditionRow({
   ruleConfig = defaultRuleConfig,
 }: PropTypes) {
   const { left, operator, right } = value || {};
-  const { rule } = useRule(left, ruleConfig.rules);
-  const { renderOpSelect, opConfig } = useOp({
-    rule,
-    op: operator,
-    onChange: (v) => onChange({ ...value, operator: v }),
-    readonly,
-    userOps: ruleConfig.ops,
+
+  const available = useScopeAvailable();
+
+  const variable = useMemo(() => {
+    if (!left) return undefined;
+    return available.getByKeyPath(left.content);
+  }, [available, left]);
+
+  const leftSchema = useMemo(() => {
+    if (!variable) return undefined;
+    return JsonSchemaUtils.astToSchema(variable.type, { drilldown: false });
+  }, [variable?.type?.hash]);
+
+  const { rule, opConfig, opOptionList, targetSchema } = useCondition({
+    leftSchema,
+    operator,
   });
 
-  const targetSchema = useMemo(() => {
-    const targetType: string | null = rule?.[operator || ''] || null;
-    return targetType ? { type: targetType, extra: { weak: true } } : null;
-  }, [rule, opConfig]);
+  const renderOpSelect = () => (
+    <Select
+      style={{ height: 22 }}
+      disabled={readonly}
+      size="small"
+      value={operator}
+      optionList={opOptionList}
+      onChange={(v) => {
+        onChange({
+          ...value,
+          operator: v as string,
+        });
+      }}
+      triggerRender={({ value }) => (
+        <Button size="small" disabled={!rule}>
+          {opConfig?.abbreviation || <IconChevronDownStroked size="small" />}
+        </Button>
+      )}
+    />
+  );
 
   return (
     <UIContainer style={style}>
@@ -97,7 +122,4 @@ export function ConditionRow({
   );
 }
 
-ConditionRow.defaultRules = defaultRules;
-ConditionRow.defaultOpConfigs = defaultOpConfigs;
-
 export { type ConditionRowValueType };

package/src/components/condition-row/types.ts

@@ -5,36 +5,6 @@
 
 import { IFlowConstantRefValue, IFlowRefValue } from '@/shared';
 
-export enum Op {
-  EQ = 'eq',
-  NEQ = 'neq',
-  GT = 'gt',
-  GTE = 'gte',
-  LT = 'lt',
-  LTE = 'lte',
-  IN = 'in',
-  NIN = 'nin',
-  CONTAINS = 'contains',
-  NOT_CONTAINS = 'not_contains',
-  IS_EMPTY = 'is_empty',
-  IS_NOT_EMPTY = 'is_not_empty',
-  IS_TRUE = 'is_true',
-  IS_FALSE = 'is_false',
-}
-
-export interface OpConfig {
-  label: string;
-  abbreviation: string;
-  // When right is not a value, display this text
-  rightDisplay?: string;
-}
-
-export type OpConfigs = Record<string, OpConfig>;
-
-export type IRule = Partial<Record<string, string | null>>;
-
-export type IRules = Record<string, IRule>;
-
 export interface ConditionRowValueType {
   left?: IFlowRefValue;
   operator?: string;

package/src/components/coze-editor-extensions/extensions/variable-tag.tsx

@@ -63,10 +63,13 @@ class VariableTagWidget extends WidgetType {
       return;
     }
 
-    const rootField = last(v.parentFields);
+    const rootField = last(v.parentFields) || v;
+    const isRoot = v === rootField;
 
     const rootTitle = (
-      <UIRootTitle>{rootField?.meta.title ? `${rootField.meta.title} -` : ''}</UIRootTitle>
+      <UIRootTitle>
+        {rootField.meta?.title ? `${rootField.meta.title} ${isRoot ? '' : '-'} ` : ''}
+      </UIRootTitle>
     );
     const rootIcon = this.renderIcon(rootField?.meta.icon);
 
@@ -82,7 +85,7 @@ class VariableTagWidget extends WidgetType {
       >
         <UITag prefixIcon={rootIcon}>
           {rootTitle}
-          <UIVarName>{v?.key}</UIVarName>
+          {!isRoot && <UIVarName>{v?.key}</UIVarName>}
         </UITag>
       </Popover>
     );

package/src/components/coze-editor-extensions/extensions/variable-tree.tsx

@@ -82,6 +82,9 @@ export function VariableTree({
           <div style={{ width: 300, maxHeight: 300, overflowY: 'auto' }}>
             <Tree
               treeData={treeData}
+              onExpand={(v) => {
+                setPosKey(String(Math.random()));
+              }}
               onSelect={(v) => {
                 insert(v);
               }}

package/src/components/db-condition-row/index.tsx

@@ -6,14 +6,27 @@
 import React, { useMemo } from 'react';
 
 import { I18n } from '@flowgram.ai/editor';
-import { Input } from '@douyinfe/semi-ui';
+import { Button, Icon, Input, Select } from '@douyinfe/semi-ui';
+import { IconChevronDownStroked } from '@douyinfe/semi-icons';
 
+import { useTypeManager } from '@/plugins';
 import { InjectDynamicValueInput } from '@/components/dynamic-value-input';
+import {
+  useCondition,
+  type ConditionOpConfigs,
+  type IConditionRule,
+} from '@/components/condition-context';
 
-import { DBConditionOptionType, DBConditionRowValueType, IRules, OpConfigs } from './types';
-import { UIContainer, UILeft, UIOperator, UIRight, UIValues } from './styles';
-import { useOp } from './hooks/use-op';
-import { useLeft } from './hooks/use-left';
+import { DBConditionOptionType, DBConditionRowValueType } from './types';
+import {
+  UIContainer,
+  UILeft,
+  UIOperator,
+  UIOptionLabel,
+  UIRight,
+  UISelect,
+  UIValues,
+} from './styles';
 
 interface PropTypes {
   value?: DBConditionRowValueType;
@@ -22,8 +35,8 @@ interface PropTypes {
   options?: DBConditionOptionType[];
   readonly?: boolean;
   ruleConfig?: {
-    ops?: OpConfigs;
-    rules?: IRules;
+    ops?: ConditionOpConfigs;
+    rules?: Record<string, IConditionRule>;
   };
 }
 
@@ -42,26 +55,65 @@ export function DBConditionRow({
 }: PropTypes) {
   const { left, operator, right } = value || {};
 
-  const { rule, renderDBOptionSelect } = useLeft({
-    left,
-    options,
-    onChange: (leftKey) => onChange({ ...value, left: leftKey }),
-    readonly,
-    userRules: ruleConfig.rules,
-  });
+  const typeManager = useTypeManager();
+
+  const leftSchema = useMemo(
+    () => options?.find((item) => item.value === left)?.schema,
+    [left, options]
+  );
 
-  const { renderOpSelect, opConfig } = useOp({
-    rule,
-    op: operator,
-    onChange: (v) => onChange({ ...value, operator: v }),
-    readonly,
-    userOps: ruleConfig.ops,
+  const { opConfig, rule, opOptionList, targetSchema } = useCondition({
+    leftSchema,
+    operator,
+    ruleConfig,
   });
 
-  const targetSchema = useMemo(() => {
-    const targetType: string | null = rule?.[operator || ''] || null;
-    return targetType ? { type: targetType, extra: { weak: true } } : null;
-  }, [rule, opConfig]);
+  const renderDBOptionSelect = () => (
+    <UISelect
+      disabled={readonly}
+      size="small"
+      style={{ width: '100%' }}
+      value={left}
+      onChange={(v) =>
+        onChange({
+          ...value,
+          left: v as string,
+        })
+      }
+      optionList={
+        options?.map((item) => ({
+          label: (
+            <UIOptionLabel>
+              <Icon size="small" svg={typeManager.getDisplayIcon(item.schema)} />
+              {item.label}
+            </UIOptionLabel>
+          ),
+          value: item.value,
+        })) || []
+      }
+    />
+  );
+
+  const renderOpSelect = () => (
+    <Select
+      style={{ height: 22 }}
+      disabled={readonly}
+      size="small"
+      value={operator}
+      optionList={opOptionList}
+      onChange={(v) => {
+        onChange({
+          ...value,
+          operator: v as string,
+        });
+      }}
+      triggerRender={({ value }) => (
+        <Button size="small" disabled={!rule}>
+          {opConfig?.abbreviation || <IconChevronDownStroked size="small" />}
+        </Button>
+      )}
+    />
+  );
 
   return (
     <UIContainer style={style}>

package/src/components/db-condition-row/types.ts

@@ -7,19 +7,6 @@ import { IJsonSchema } from '@flowgram.ai/json-schema';
 
 import { IFlowConstantRefValue } from '@/shared';
 
-export interface OpConfig {
-  label: string;
-  abbreviation: string;
-  // When right is not a value, display this text
-  rightDisplay?: string;
-}
-
-export type OpConfigs = Record<string, OpConfig>;
-
-export type IRule = Partial<Record<string, string | null>>;
-
-export type IRules = Record<string, IRule>;
-
 export interface DBConditionRowValueType {
   left?: string;
   schema?: IJsonSchema;

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

@@ -73,8 +73,6 @@ export const VariableSelector = ({
     return icon;
   };
 
-  console.log('debugger treeValue', treeValue);
-
   return (
     <>
       <UITreeSelect

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

@@ -3,6 +3,8 @@
  * SPDX-License-Identifier: MIT
  */
 
+import { set } from 'lodash-es';
+import { JsonSchemaUtils } from '@flowgram.ai/json-schema';
 import {
   ASTFactory,
   createEffectFromVariableProvider,
@@ -46,59 +48,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/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/plugins/json-schema-preset/create-type-preset-plugin.tsx

@@ -10,8 +10,10 @@ import {
 } from '@flowgram.ai/json-schema';
 import { definePluginCreator } from '@flowgram.ai/editor';
 
-import { jsonSchemaTypePreset } from './type-definition';
-import { JsonSchemaTypeRegistry } from './manager';
+import { JsonSchemaTypeRegistry } from './types';
+import { initRegistries, jsonSchemaTypePreset } from './type-definition';
+
+initRegistries();
 
 export const createTypePresetPlugin = definePluginCreator<{
   types?: Partial<JsonSchemaTypeRegistry> & Pick<JsonSchemaTypeRegistry, 'type'>[];

package/src/plugins/json-schema-preset/index.tsx

@@ -9,8 +9,8 @@ import {
   type IJsonSchema,
 } from '@flowgram.ai/json-schema';
 
+import { type ConstantRendererProps, type JsonSchemaTypeRegistry } from './types';
 import { useTypeManager, JsonSchemaTypePresetProvider } from './react';
-import { ConstantRendererProps, type JsonSchemaTypeRegistry } from './manager';
 import { createTypePresetPlugin } from './create-type-preset-plugin';
 
 export {

package/src/plugins/json-schema-preset/react.tsx

@@ -12,8 +12,11 @@ import {
   JsonSchemaTypeManager,
 } from '@flowgram.ai/json-schema';
 
-import { jsonSchemaTypePreset } from './type-definition';
-import { type JsonSchemaTypeRegistry } from './manager';
+import { type JsonSchemaTypeRegistry } from './types';
+import { initRegistries, jsonSchemaTypePreset } from './type-definition';
+
+// If you want to use new type Manager, init registries
+initRegistries();
 
 export const useTypeManager = () =>
   useOriginTypeManager() as JsonSchemaTypeManager<IJsonSchema, JsonSchemaTypeRegistry>;

package/src/plugins/json-schema-preset/type-definition/array.tsx

@@ -8,9 +8,10 @@ import React from 'react';
 
 import { I18n } from '@flowgram.ai/editor';
 
+import { ConditionPresetOp } from '@/components/condition-context/op';
 import { CodeEditorMini } from '@/components/code-editor-mini';
 
-import { type JsonSchemaTypeRegistry } from '../manager';
+import { type JsonSchemaTypeRegistry } from '../types';
 
 export const arrayRegistry: Partial<JsonSchemaTypeRegistry> = {
   type: 'array',
@@ -23,4 +24,12 @@ export const arrayRegistry: Partial<JsonSchemaTypeRegistry> = {
       readonly={props.readonly}
     />
   ),
+  conditionRule: {
+    [ConditionPresetOp.IS_EMPTY]: null,
+    [ConditionPresetOp.IS_NOT_EMPTY]: null,
+    [ConditionPresetOp.CONTAINS]: { type: 'array', extra: { weak: true } },
+    [ConditionPresetOp.NOT_CONTAINS]: { type: 'array', extra: { weak: true } },
+    [ConditionPresetOp.EQ]: { type: 'array', extra: { weak: true } },
+    [ConditionPresetOp.NEQ]: { type: 'array', extra: { weak: true } },
+  },
 };

package/src/plugins/json-schema-preset/type-definition/boolean.tsx

@@ -9,7 +9,9 @@ import React from 'react';
 import { I18n } from '@flowgram.ai/editor';
 import { Select } from '@douyinfe/semi-ui';
 
-import { type JsonSchemaTypeRegistry } from '../manager';
+import { ConditionPresetOp } from '@/components/condition-context/op';
+
+import { type JsonSchemaTypeRegistry } from '../types';
 
 export const booleanRegistry: Partial<JsonSchemaTypeRegistry> = {
   type: 'boolean',
@@ -30,4 +32,18 @@ export const booleanRegistry: Partial<JsonSchemaTypeRegistry> = {
       />
     );
   },
+  conditionRule: {
+    [ConditionPresetOp.EQ]: { type: 'boolean' },
+    [ConditionPresetOp.NEQ]: { type: 'boolean' },
+    [ConditionPresetOp.IS_TRUE]: null,
+    [ConditionPresetOp.IS_FALSE]: null,
+    [ConditionPresetOp.IN]: {
+      type: 'array',
+      items: { type: 'boolean' },
+    },
+    [ConditionPresetOp.NIN]: {
+      type: 'array',
+      items: { type: 'boolean' },
+    },
+  },
 };