@flowgram.ai/form-materials 0.4.13 → 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/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' },
+    },
+  },
 };

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

@@ -6,20 +6,39 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
 
+import { format } from 'date-fns';
+import { type DatePickerProps } from '@douyinfe/semi-ui/lib/es/datePicker';
 import { DatePicker } from '@douyinfe/semi-ui';
 
-import { type JsonSchemaTypeRegistry } from '../manager';
+import { ConditionPresetOp } from '@/components/condition-context/op';
+
+import { type JsonSchemaTypeRegistry } from '../types';
 
 export const dateTimeRegistry: Partial<JsonSchemaTypeRegistry> = {
   type: 'date-time',
-  ConstantRenderer: (props) => (
+  ConstantRenderer: (props: DatePickerProps & { readonly?: boolean }) => (
     <DatePicker
       size="small"
       type="dateTime"
       density="compact"
+      defaultValue={Date.now()}
       style={{ width: '100%', ...(props.style || {}) }}
       disabled={props.readonly}
       {...props}
+      onChange={(date) => {
+        props.onChange?.(format(date as Date, "yyyy-MM-dd'T'HH:mm:ss.SSS'Z'"));
+      }}
+      value={props.value}
     />
   ),
+  conditionRule: {
+    [ConditionPresetOp.EQ]: { type: 'date-time' },
+    [ConditionPresetOp.NEQ]: { type: 'date-time' },
+    [ConditionPresetOp.GT]: { type: 'date-time' },
+    [ConditionPresetOp.GTE]: { type: 'date-time' },
+    [ConditionPresetOp.LT]: { type: 'date-time' },
+    [ConditionPresetOp.LTE]: { type: 'date-time' },
+    [ConditionPresetOp.IS_EMPTY]: null,
+    [ConditionPresetOp.IS_NOT_EMPTY]: null,
+  },
 };

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

@@ -8,10 +8,12 @@ import { jsonSchemaTypeManager } from '@flowgram.ai/json-schema';
 import { stringRegistry } from './string';
 import { objectRegistry } from './object';
 import { numberRegistry } from './number';
+import { mapRegistry } from './map';
 import { integerRegistry } from './integer';
 import { dateTimeRegistry } from './date-time';
 import { booleanRegistry } from './boolean';
 import { arrayRegistry } from './array';
+import { type JsonSchemaTypeRegistry } from '../types';
 
 export const jsonSchemaTypePreset = [
   stringRegistry,
@@ -20,7 +22,14 @@ export const jsonSchemaTypePreset = [
   integerRegistry,
   booleanRegistry,
   arrayRegistry,
+  mapRegistry,
   dateTimeRegistry,
 ];
 
-jsonSchemaTypePreset.forEach((_type) => jsonSchemaTypeManager.register(_type));
+export const initRegistries = () => {
+  if ((jsonSchemaTypeManager.getTypeByName('string') as JsonSchemaTypeRegistry)?.ConstantRenderer) {
+    return;
+  }
+
+  jsonSchemaTypePreset.forEach((_type) => jsonSchemaTypeManager.register(_type));
+};

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

@@ -9,7 +9,9 @@ import React from 'react';
 import { I18n } from '@flowgram.ai/editor';
 import { InputNumber } from '@douyinfe/semi-ui';
 
-import { type JsonSchemaTypeRegistry } from '../manager';
+import { ConditionPresetOp } from '@/components/condition-context/op';
+
+import { type JsonSchemaTypeRegistry } from '../types';
 
 export const integerRegistry: Partial<JsonSchemaTypeRegistry> = {
   type: 'integer',
@@ -22,4 +24,20 @@ export const integerRegistry: Partial<JsonSchemaTypeRegistry> = {
       {...props}
     />
   ),
+  conditionRule: {
+    [ConditionPresetOp.EQ]: { type: 'number' },
+    [ConditionPresetOp.NEQ]: { type: 'number' },
+    [ConditionPresetOp.GT]: { type: 'number' },
+    [ConditionPresetOp.GTE]: { type: 'number' },
+    [ConditionPresetOp.LT]: { type: 'number' },
+    [ConditionPresetOp.LTE]: { type: 'number' },
+    [ConditionPresetOp.IN]: {
+      type: 'array',
+      extra: { weak: true },
+    },
+    [ConditionPresetOp.NIN]: {
+      type: 'array',
+      extra: { weak: true },
+    },
+  },
 };

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

@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+/* eslint-disable react/prop-types */
+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 '../types';
+
+export const mapRegistry: Partial<JsonSchemaTypeRegistry> = {
+  type: 'map',
+  ConstantRenderer: (props) => (
+    <CodeEditorMini
+      value={props.value}
+      onChange={(v) => props.onChange?.(v)}
+      languageId="json"
+      placeholder={I18n.t('Please Input Map')}
+      readonly={props.readonly}
+    />
+  ),
+  conditionRule: {
+    [ConditionPresetOp.IS_EMPTY]: null,
+    [ConditionPresetOp.IS_NOT_EMPTY]: null,
+  },
+};