@flowgram.ai/form-materials 0.2.29 → 0.2.30

package/dist/index.d.mts

@@ -2,7 +2,7 @@ import React$1 from 'react';
 import { TriggerRenderProps } from '@douyinfe/semi-ui/lib/es/treeSelect';
 import { InferValues } from '@coze-editor/editor/react';
 import preset from '@coze-editor/editor/preset-code';
-import { EffectOptions, ASTNodeJSON, ASTNode, BaseType, FormPluginCreator } from '@flowgram.ai/editor';
+import { BaseVariableField, EffectOptions, ASTNodeJSON, ASTNode, BaseType, FormPluginCreator } from '@flowgram.ai/editor';
 import * as _flowgram_ai_node from '@flowgram.ai/node';
 import { TreeNodeData } from '@douyinfe/semi-ui/lib/es/tree';
 
@@ -36,9 +36,14 @@ type IBasicJsonSchema = IJsonSchema<JsonSchemaBasicType>;
  * SPDX-License-Identifier: MIT
  */
 
+type VariableField = BaseVariableField<{
+    icon?: string | JSX.Element;
+    title?: string;
+}>;
 declare function useVariableTree(params: {
     includeSchema?: IJsonSchema | IJsonSchema[];
     excludeSchema?: IJsonSchema | IJsonSchema[];
+    customSkip?: (variable: VariableField) => boolean;
 }): TreeNodeData[];
 
 /**
@@ -69,22 +74,29 @@ declare const VariableSelector: ({ value, config, onChange, style, readonly, inc
  * SPDX-License-Identifier: MIT
  */
 
+interface IFlowValueExtra {
+    index?: number;
+}
 interface IFlowConstantValue {
     type: 'constant';
     content?: string | number | boolean;
     schema?: IJsonSchema;
+    extra?: IFlowValueExtra;
 }
 interface IFlowRefValue {
     type: 'ref';
     content?: string[];
+    extra?: IFlowValueExtra;
 }
 interface IFlowExpressionValue {
     type: 'expression';
     content?: string;
+    extra?: IFlowValueExtra;
 }
 interface IFlowTemplateValue {
     type: 'template';
     content?: string;
+    extra?: IFlowValueExtra;
 }
 type IFlowValue = IFlowConstantValue | IFlowRefValue | IFlowExpressionValue | IFlowTemplateValue;
 type IFlowConstantRefValue = IFlowConstantValue | IFlowRefValue;
@@ -342,6 +354,7 @@ interface PropsType {
     onChange: (value?: Record<string, IFlowValue | undefined>) => void;
     readonly?: boolean;
     hasError?: boolean;
+    schema?: IJsonSchema;
     style?: React.CSSProperties;
     constantProps?: {
         strategies?: Strategy[];
@@ -354,7 +367,7 @@ interface PropsType {
  * SPDX-License-Identifier: MIT
  */
 
-declare function InputsValues({ value, onChange, style, readonly, constantProps }: PropsType): React$1.JSX.Element;
+declare function InputsValues({ value, onChange, style, readonly, constantProps, schema, hasError, }: PropsType): React$1.JSX.Element;
 
 /**
  * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
@@ -537,4 +550,4 @@ interface InputConfig {
 }
 declare const createInferInputsPlugin: _flowgram_ai_node.FormPluginCreator<InputConfig>;
 
-export { ArrayIcons, BatchOutputs, BatchVariableSelector, CodeEditor, type CodeEditorPropsType, ConditionRow, type ConditionRowValueType, ConstantInput, DynamicValueInput, type IBasicJsonSchema, type IFlowConstantRefValue, type IFlowConstantValue, type IFlowExpressionValue, type IFlowRefValue, type IFlowTemplateValue, type IFlowValue, type IJsonSchema, InputsValues, JsonEditorWithVariables, type JsonSchemaBasicType, JsonSchemaEditor, JsonSchemaUtils, PromptEditor, type PromptEditorPropsType, PromptEditorWithInputs, PromptEditorWithVariables, TypeSelector, VariableSelector, type VariableSelectorProps, VariableTypeIcons, autoRenameRefEffect, createBatchOutputsFormPlugin, createInferInputsPlugin, formatLegacyRefOnInit, formatLegacyRefOnSubmit, formatLegacyRefToNewRef, formatNewRefToLegacyRef, getSchemaIcon, getTypeSelectValue, isLegacyFlowRefValueSchema, isNewFlowRefValueSchema, parseTypeSelectValue, provideBatchInputEffect, provideBatchOutputsEffect, provideJsonSchemaOutputs, syncVariableTitle, useVariableTree };
+export { ArrayIcons, BatchOutputs, BatchVariableSelector, CodeEditor, type CodeEditorPropsType, ConditionRow, type ConditionRowValueType, ConstantInput, DynamicValueInput, type IBasicJsonSchema, type IFlowConstantRefValue, type IFlowConstantValue, type IFlowExpressionValue, type IFlowRefValue, type IFlowTemplateValue, type IFlowValue, type IFlowValueExtra, type IJsonSchema, InputsValues, JsonEditorWithVariables, type JsonSchemaBasicType, JsonSchemaEditor, JsonSchemaUtils, PromptEditor, type PromptEditorPropsType, PromptEditorWithInputs, PromptEditorWithVariables, TypeSelector, VariableSelector, type VariableSelectorProps, VariableTypeIcons, autoRenameRefEffect, createBatchOutputsFormPlugin, createInferInputsPlugin, formatLegacyRefOnInit, formatLegacyRefOnSubmit, formatLegacyRefToNewRef, formatNewRefToLegacyRef, getSchemaIcon, getTypeSelectValue, isLegacyFlowRefValueSchema, isNewFlowRefValueSchema, parseTypeSelectValue, provideBatchInputEffect, provideBatchOutputsEffect, provideJsonSchemaOutputs, syncVariableTitle, useVariableTree };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowgram.ai/form-materials",
-  "version": "0.2.29",
+  "version": "0.2.30",
   "homepage": "https://flowgram.ai/",
   "repository": "https://github.com/bytedance/flowgram.ai",
   "license": "MIT",
@@ -34,7 +34,7 @@
     "@codemirror/view": "~6.38.0",
     "@codemirror/state": "~6.5.2",
     "typescript": "^5.8.3",
-    "@flowgram.ai/editor": "0.2.29"
+    "@flowgram.ai/editor": "0.2.30"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.137",
@@ -50,8 +50,8 @@
     "tsup": "^8.0.1",
     "typescript": "^5.8.3",
     "vitest": "^0.34.6",
-    "@flowgram.ai/eslint-config": "0.2.29",
-    "@flowgram.ai/ts-config": "0.2.29"
+    "@flowgram.ai/ts-config": "0.2.30",
+    "@flowgram.ai/eslint-config": "0.2.30"
   },
   "peerDependencies": {
     "react": ">=16.8",
@@ -64,7 +64,7 @@
   },
   "scripts": {
     "build": "npm run build:fast -- --dts-resolve",
-    "build:fast": "tsup src/index.ts --format cjs,esm --sourcemap --legacy-output",
+    "build:fast": "tsup src/index.ts --format esm --sourcemap --legacy-output",
     "build:watch": "npm run build:fast -- --dts-resolve",
     "clean": "rimraf dist",
     "test": "exit 0",

package/src/components/code-editor/index.tsx

@@ -15,6 +15,7 @@ import preset, { type EditorAPI } from '@coze-editor/editor/preset-code';
 import { EditorView } from '@codemirror/view';
 
 import { getSuffixByLanguageId } from './utils';
+import { initTsWorker } from './language-features';
 
 import './theme';
 import './language-features';
@@ -54,6 +55,12 @@ export function CodeEditor({
 }: CodeEditorPropsType) {
   const editorRef = useRef<EditorAPI | null>(null);
 
+  useEffect(() => {
+    if (languageId === 'typescript') {
+      initTsWorker();
+    }
+  }, [languageId]);
+
   useEffect(() => {
     // listen to value change
     if (editorRef.current?.getValue() !== value) {

package/src/components/code-editor/language-features.ts

@@ -11,8 +11,8 @@ import { json } from '@coze-editor/editor/language-json';
 import { mixLanguages } from '@coze-editor/editor';
 
 languages.register('python', python);
-languages.register('typescript', typescript);
 languages.register('shell', shell);
+languages.register('typescript', typescript);
 
 languages.register('json', {
   // mixLanguages is used to solve the problem that interpolation also uses parentheses, which causes incorrect highlighting
@@ -21,3 +21,24 @@ languages.register('json', {
   }),
   languageService: json.languageService,
 });
+
+let tsWorkerInit = false;
+
+export const initTsWorker = () => {
+  if (tsWorkerInit) {
+    return;
+  }
+  tsWorkerInit = true;
+
+  const tsWorker = new Worker(
+    new URL(`@coze-editor/editor/language-typescript/worker`, import.meta.url),
+    { type: 'module' }
+  );
+  typescript.languageService.initialize(tsWorker, {
+    compilerOptions: {
+      // eliminate Promise error
+      lib: ['es2015', 'dom'],
+      noImplicitAny: false,
+    },
+  });
+};

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

@@ -13,8 +13,8 @@ export const rules: IRules = {
     [Op.NOT_CONTAINS]: 'string',
     [Op.IN]: 'array',
     [Op.NIN]: 'array',
-    [Op.IS_EMPTY]: 'string',
-    [Op.IS_NOT_EMPTY]: 'string',
+    [Op.IS_EMPTY]: null,
+    [Op.IS_NOT_EMPTY]: null,
   },
   number: {
     [Op.EQ]: 'number',
@@ -25,8 +25,6 @@ export const rules: IRules = {
     [Op.LTE]: 'number',
     [Op.IN]: 'array',
     [Op.NIN]: 'array',
-    [Op.IS_EMPTY]: null,
-    [Op.IS_NOT_EMPTY]: null,
   },
   integer: {
     [Op.EQ]: 'number',
@@ -37,8 +35,6 @@ export const rules: IRules = {
     [Op.LTE]: 'number',
     [Op.IN]: 'array',
     [Op.NIN]: 'array',
-    [Op.IS_EMPTY]: null,
-    [Op.IS_NOT_EMPTY]: null,
   },
   boolean: {
     [Op.EQ]: 'boolean',
@@ -47,8 +43,6 @@ export const rules: IRules = {
     [Op.IS_FALSE]: null,
     [Op.IN]: 'array',
     [Op.NIN]: 'array',
-    [Op.IS_EMPTY]: null,
-    [Op.IS_NOT_EMPTY]: null,
   },
   object: {
     [Op.IS_EMPTY]: null,

package/src/components/inputs-values/components/blur-input.tsx

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React, { useEffect, useState } from 'react';
+
+import Input, { InputProps } from '@douyinfe/semi-ui/lib/es/input';
+
+export function BlurInput(props: InputProps) {
+  const [value, setValue] = useState('');
+
+  useEffect(() => {
+    setValue(props.value as string);
+  }, [props.value]);
+
+  return (
+    <Input
+      {...props}
+      value={value}
+      onChange={(value) => {
+        setValue(value);
+      }}
+      onBlur={(e) => props.onChange?.(value, e)}
+    />
+  );
+}

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

@@ -5,7 +5,7 @@
 
 import React from 'react';
 
-import { Button, IconButton, Input } from '@douyinfe/semi-ui';
+import { Button, IconButton } from '@douyinfe/semi-ui';
 import { IconDelete, IconPlus } from '@douyinfe/semi-icons';
 
 import { PropsType } from './types';
@@ -13,11 +13,21 @@ import { DynamicValueInput } from '../dynamic-value-input';
 import { IFlowConstantRefValue, IFlowValue } from '../../typings';
 import { useObjectList } from '../../hooks';
 import { UIRow, UIRows } from './styles';
+import { BlurInput } from './components/blur-input';
 
-export function InputsValues({ value, onChange, style, readonly, constantProps }: PropsType) {
+export function InputsValues({
+  value,
+  onChange,
+  style,
+  readonly,
+  constantProps,
+  schema,
+  hasError,
+}: PropsType) {
   const { list, updateKey, updateValue, remove, add } = useObjectList<IFlowValue | undefined>({
     value,
     onChange,
+    sortIndexKey: 'extra.index',
   });
 
   return (
@@ -25,18 +35,21 @@ export function InputsValues({ value, onChange, style, readonly, constantProps }
       <UIRows style={style}>
         {list.map((item) => (
           <UIRow key={item.id}>
-            <Input
+            <BlurInput
               style={{ width: 100, minWidth: 100, maxWidth: 100 }}
               disabled={readonly}
               size="small"
               value={item.key}
               onChange={(v) => updateKey(item.id, v)}
+              placeholder="Input Key"
             />
             <DynamicValueInput
               style={{ flexGrow: 1 }}
               readonly={readonly}
               value={item.value as IFlowConstantRefValue}
               onChange={(v) => updateValue(item.id, v)}
+              schema={schema}
+              hasError={hasError}
               constantProps={{
                 ...constantProps,
                 strategies: [...(constantProps?.strategies || [])],

package/src/components/inputs-values/types.ts

@@ -4,13 +4,14 @@
  */
 
 import { Strategy } from '../constant-input/types';
-import { IFlowValue } from '../../typings';
+import { IFlowValue, IJsonSchema } from '../../typings';
 
 export interface PropsType {
   value?: Record<string, IFlowValue | undefined>;
   onChange: (value?: Record<string, IFlowValue | undefined>) => void;
   readonly?: boolean;
   hasError?: boolean;
+  schema?: IJsonSchema;
   style?: React.CSSProperties;
   constantProps?: {
     strategies?: Strategy[];

package/src/components/prompt-editor-with-variables/extensions/variable-tag.tsx

@@ -67,10 +67,13 @@ class VariableTagWidget extends WidgetType {
       return;
     }
 
-    const rootField = last(v.parentFields);
+    const rootField = last(v.parentFields) || v;
+    const isRoot = v.parentFields.length === 0;
 
     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);
 
@@ -86,7 +89,7 @@ class VariableTagWidget extends WidgetType {
       >
         <UITag prefixIcon={rootIcon}>
           {rootTitle}
-          <UIVarName>{v?.key}</UIVarName>
+          {!isRoot && <UIVarName>{v?.key}</UIVarName>}
         </UITag>
       </Popover>
     );

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

@@ -98,7 +98,9 @@ export const VariableSelector = ({
 
           const rootTitle = (
             <UIRootTitle>
-              {_option.rootMeta?.title ? `${_option.rootMeta?.title} -` : null}
+              {_option.rootMeta?.title
+                ? `${_option.rootMeta?.title} ${_option.isRoot ? '' : '-'} `
+                : null}
             </UIRootTitle>
           );
 
@@ -119,7 +121,7 @@ export const VariableSelector = ({
                   onClose={() => onChange(undefined)}
                 >
                   {rootTitle}
-                  <UIVarName $inSelector>{_option.label}</UIVarName>
+                  {!_option.isRoot && <UIVarName $inSelector>{_option.label}</UIVarName>}
                 </UITag>
               </Popover>
             </div>

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

@@ -18,8 +18,9 @@ type VariableField = BaseVariableField<{ icon?: string | JSX.Element; title?: st
 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 variables = useAvailableVariables();
 
@@ -77,8 +78,9 @@ export function useVariableTree(params: {
     const isSchemaExclude = excludeSchema
       ? JsonSchemaUtils.isASTMatchSchema(type, excludeSchema)
       : false;
+    const isCustomSkip = customSkip ? customSkip(variable) : false;
 
-    const isSchemaMatch = isSchemaInclude && !isSchemaExclude;
+    const isSchemaMatch = isSchemaInclude && !isSchemaExclude && !isCustomSkip;
 
     // If not match, and no children, return null
     if (!isSchemaMatch && !children?.length) {
@@ -93,7 +95,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/hooks/use-object-list/index.tsx

@@ -6,7 +6,7 @@
 import { useEffect, useState } from 'react';
 
 import { nanoid } from 'nanoid';
-import { difference } from 'lodash';
+import { difference, get, isObject, set } from 'lodash';
 
 function genId() {
   return nanoid();
@@ -23,15 +23,20 @@ type ObjectType<ValueType> = Record<string, ValueType | undefined>;
 export function useObjectList<ValueType>({
   value,
   onChange,
+  sortIndexKey,
 }: {
   value?: ObjectType<ValueType>;
   onChange: (value?: ObjectType<ValueType>) => void;
+  sortIndexKey?: string;
 }) {
   const [list, setList] = useState<ListItem<ValueType>[]>([]);
 
   useEffect(() => {
     setList((_prevList) => {
-      const newKeys = Object.keys(value || {});
+      const newKeys = Object.entries(value || {})
+        .sort((a, b) => get(a[1], sortIndexKey || 0) - get(b[1], sortIndexKey || 0))
+        .map(([key]) => key);
+
       const oldKeys = _prevList.map((item) => item.key).filter(Boolean) as string[];
       const addKeys = difference(newKeys, oldKeys);
 
@@ -75,7 +80,15 @@ export function useObjectList<ValueType>({
 
       onChange(
         Object.fromEntries(
-          nextList.filter((item) => item.key).map((item) => [item.key!, item.value])
+          nextList
+            .filter((item) => item.key)
+            .map((item) => [item.key!, item.value])
+            .map((_res, idx) => {
+              if (isObject(_res[1]) && sortIndexKey) {
+                set(_res[1], sortIndexKey, idx);
+              }
+              return _res;
+            })
         )
       );
 

package/src/typings/flow-value/index.ts

@@ -5,25 +5,33 @@
 
 import { IJsonSchema } from '../json-schema';
 
+export interface IFlowValueExtra {
+  index?: number;
+}
+
 export interface IFlowConstantValue {
   type: 'constant';
   content?: string | number | boolean;
   schema?: IJsonSchema;
+  extra?: IFlowValueExtra;
 }
 
 export interface IFlowRefValue {
   type: 'ref';
   content?: string[];
+  extra?: IFlowValueExtra;
 }
 
 export interface IFlowExpressionValue {
   type: 'expression';
   content?: string;
+  extra?: IFlowValueExtra;
 }
 
 export interface IFlowTemplateValue {
   type: 'template';
   content?: string;
+  extra?: IFlowValueExtra;
 }
 
 export type IFlowValue =