@flowgram.ai/form-materials 0.2.29 → 0.2.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowgram.ai/form-materials",
-  "version": "0.2.29",
+  "version": "0.2.31",
   "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.31"
   },
   "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/eslint-config": "0.2.31",
+    "@flowgram.ai/ts-config": "0.2.31"
   },
   "peerDependencies": {
     "react": ">=16.8",

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 =