@flowgram.ai/form-materials 0.4.1 → 0.4.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowgram.ai/form-materials",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "homepage": "https://flowgram.ai/",
   "repository": "https://github.com/bytedance/flowgram.ai",
   "license": "MIT",
@@ -35,8 +35,8 @@
     "@codemirror/state": "~6.5.2",
     "typescript": "^5.8.3",
     "zod": "^3.24.4",
-    "@flowgram.ai/editor": "0.4.1",
-    "@flowgram.ai/json-schema": "0.4.1"
+    "@flowgram.ai/editor": "0.4.3",
+    "@flowgram.ai/json-schema": "0.4.3"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.137",
@@ -52,8 +52,8 @@
     "tsup": "^8.0.1",
     "typescript": "^5.8.3",
     "vitest": "^0.34.6",
-    "@flowgram.ai/eslint-config": "0.4.1",
-    "@flowgram.ai/ts-config": "0.4.1"
+    "@flowgram.ai/eslint-config": "0.4.3",
+    "@flowgram.ai/ts-config": "0.4.3"
   },
   "peerDependencies": {
     "react": ">=16.8",

package/src/components/display-flow-value/index.tsx

@@ -9,6 +9,7 @@ import { JsonSchemaTypeManager, JsonSchemaUtils } from '@flowgram.ai/json-schema
 import { useScopeAvailable } from '@flowgram.ai/editor';
 
 import { IFlowValue } from '@/typings';
+import { FlowValueUtils } from '@/shared';
 import { DisplaySchemaTag } from '@/components/display-schema-tag';
 
 interface PropsType {
@@ -31,18 +32,7 @@ export function DisplayFlowValue({ value, title, showIconInTree }: PropsType) {
       return { type: 'string' };
     }
     if (value?.type === 'constant') {
-      if (value?.schema) {
-        return value?.schema;
-      }
-      if (typeof value?.content === 'string') {
-        return { type: 'string' };
-      }
-      if (typeof value?.content === 'number') {
-        return { type: 'number' };
-      }
-      if (typeof value?.content === 'boolean') {
-        return { type: 'boolean' };
-      }
+      return FlowValueUtils.inferConstantJsonSchema(value);
     }
 
     return { type: 'unknown' };

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

@@ -3,15 +3,19 @@
  * SPDX-License-Identifier: MIT
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 
-import { IFlowValue } from '@/typings';
+import { isPlainObject } from 'lodash';
+import { useScopeAvailable } from '@flowgram.ai/editor';
+
+import { FlowValueUtils } from '@/shared';
 import { DisplayFlowValue } from '@/components/display-flow-value';
 
 import { DisplayInputsWrapper } from './styles';
+import { DisplaySchemaTag } from '../display-schema-tag';
 
 interface PropsType {
-  value?: Record<string, IFlowValue | undefined>;
+  value?: any;
   showIconInTree?: boolean;
 }
 
@@ -20,9 +24,43 @@ export function DisplayInputsValues({ value, showIconInTree }: PropsType) {
 
   return (
     <DisplayInputsWrapper>
-      {childEntries.map(([key, value]) => (
-        <DisplayFlowValue key={key} title={key} value={value} showIconInTree={showIconInTree} />
-      ))}
+      {childEntries.map(([key, value]) => {
+        if (FlowValueUtils.isFlowValue(value)) {
+          return (
+            <DisplayFlowValue key={key} title={key} value={value} showIconInTree={showIconInTree} />
+          );
+        }
+
+        if (isPlainObject(value)) {
+          return (
+            <DisplayInputsValueAllInTag
+              key={key}
+              title={key}
+              value={value}
+              showIconInTree={showIconInTree}
+            />
+          );
+        }
+
+        return null;
+      })}
     </DisplayInputsWrapper>
   );
 }
+
+export function DisplayInputsValueAllInTag({
+  value,
+  title,
+  showIconInTree,
+}: PropsType & {
+  title: string;
+}) {
+  const available = useScopeAvailable();
+
+  const schema = useMemo(
+    () => FlowValueUtils.inferJsonSchema(value, available.scope),
+    [available.version, value]
+  );
+
+  return <DisplaySchemaTag title={title} value={schema} showIconInTree={showIconInTree} />;
+}

package/src/components/dynamic-value-input/hooks.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 
 import { IJsonSchema } from '@flowgram.ai/json-schema';
 import { useScopeAvailable } from '@flowgram.ai/editor';
@@ -33,9 +33,30 @@ export function useSelectSchema(
     defaultSelectSchema = value?.schema || defaultSelectSchema;
   }
 
+  const changeVersion = useRef(0);
+  const effectVersion = useRef(0);
+
   const [selectSchema, setSelectSchema] = useState(defaultSelectSchema);
 
-  return [selectSchema, setSelectSchema] as const;
+  useEffect(() => {
+    effectVersion.current += 1;
+    if (changeVersion.current === effectVersion.current) {
+      return;
+    }
+    effectVersion.current = changeVersion.current;
+
+    if (value?.type === 'constant' && value?.schema) {
+      setSelectSchema(value?.schema);
+      return;
+    }
+  }, [value]);
+
+  const setSelectSchemaWithVersionUpdate = (schema: IJsonSchema) => {
+    setSelectSchema(schema);
+    changeVersion.current += 1;
+  };
+
+  return [selectSchema, setSelectSchemaWithVersionUpdate] as const;
 }
 
 export function useIncludeSchema(schemaFromProps?: IJsonSchema) {

package/src/components/dynamic-value-input/index.tsx

@@ -5,11 +5,16 @@
 
 import React from 'react';
 
-import { JsonSchemaUtils, IJsonSchema } from '@flowgram.ai/json-schema';
+import {
+  JsonSchemaUtils,
+  IJsonSchema,
+  useTypeManager,
+  type JsonSchemaTypeManager,
+} from '@flowgram.ai/json-schema';
 import { IconButton } from '@douyinfe/semi-ui';
 import { IconSetting } from '@douyinfe/semi-icons';
 
-import { IFlowConstantRefValue } from '@/typings';
+import { IFlowConstantRefValue, IFlowConstantValue } from '@/typings';
 import { createInjectMaterial } from '@/shared';
 import { InjectVariableSelector } from '@/components/variable-selector';
 import { TypeSelector } from '@/components/type-selector';
@@ -32,6 +37,12 @@ interface PropsType {
   };
 }
 
+const DEFAULT_VALUE: IFlowConstantValue = {
+  type: 'constant',
+  content: '',
+  schema: { type: 'string' },
+};
+
 export function DynamicValueInput({
   value,
   onChange,
@@ -44,6 +55,8 @@ export function DynamicValueInput({
   const [selectSchema, setSelectSchema] = useSelectSchema(schemaFromProps, constantProps, value);
   const includeSchema = useIncludeSchema(schemaFromProps);
 
+  const typeManager = useTypeManager() as JsonSchemaTypeManager;
+
   const renderTypeSelector = () => {
     if (schemaFromProps) {
       return <TypeSelector value={schemaFromProps} readonly={true} />;
@@ -60,24 +73,20 @@ export function DynamicValueInput({
         value={selectSchema}
         onChange={(_v) => {
           setSelectSchema(_v || { type: 'string' });
-          let content;
 
+          const schema = _v || { type: 'string' };
+          let content = typeManager.getDefaultValue(schema);
           if (_v?.type === 'object') {
             content = '{}';
           }
-
           if (_v?.type === 'array') {
             content = '[]';
           }
 
-          if (_v?.type === 'boolean') {
-            content = false;
-          }
-
           onChange({
             type: 'constant',
             content,
-            schema: _v || { type: 'string' },
+            schema,
           });
         }}
         readonly={readonly}
@@ -92,7 +101,7 @@ export function DynamicValueInput({
         <InjectVariableSelector
           style={{ width: '100%' }}
           value={value?.content}
-          onChange={(_v) => onChange(_v ? { type: 'ref', content: _v } : undefined)}
+          onChange={(_v) => onChange(_v ? { type: 'ref', content: _v } : DEFAULT_VALUE)}
           includeSchema={includeSchema}
           readonly={readonly}
         />
@@ -107,16 +116,16 @@ export function DynamicValueInput({
         onChange={(_v) => onChange({ type: 'constant', content: _v, schema: constantSchema })}
         schema={constantSchema || { type: 'string' }}
         readonly={readonly}
-        strategies={[...(constantProps?.strategies || [])]}
         fallbackRenderer={() => (
           <InjectVariableSelector
             style={{ width: '100%' }}
-            onChange={(_v) => onChange(_v ? { type: 'ref', content: _v } : undefined)}
+            onChange={(_v) => onChange(_v ? { type: 'ref', content: _v } : DEFAULT_VALUE)}
             includeSchema={includeSchema}
             readonly={readonly}
           />
         )}
         {...constantProps}
+        strategies={[...(constantProps?.strategies || [])]}
       />
     );
   };

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

@@ -67,7 +67,18 @@ export function InputsValues({
           </UIRow>
         ))}
       </UIRows>
-      <Button disabled={readonly} icon={<IconPlus />} size="small" onClick={() => add()}>
+      <Button
+        disabled={readonly}
+        icon={<IconPlus />}
+        size="small"
+        onClick={() =>
+          add({
+            type: 'constant',
+            content: '',
+            schema: { type: 'string' },
+          })
+        }
+      >
         {I18n.t('Add')}
       </Button>
     </div>

package/src/components/inputs-values-tree/hooks/use-child-list.tsx

@@ -21,8 +21,9 @@ export function useChildList(
   onChange?: (value: any) => void
 ): {
   canAddField: boolean;
+  hasChildren: boolean;
   list: ListItem[];
-  add: (key?: string) => void;
+  add: (defaultValue?: any) => void;
   updateKey: (id: string, key: string) => void;
   updateValue: (id: string, value: any) => void;
   remove: (id: string) => void;
@@ -50,8 +51,6 @@ export function useChildList(
     return undefined;
   }, [value]);
 
-  console.log('debugger objectListValue', objectListValue);
-
   const { list, add, updateKey, updateValue, remove } = useObjectList<any>({
     value: objectListValue,
     onChange: (value) => {
@@ -60,8 +59,14 @@ export function useChildList(
     sortIndexKey: (value) => (FlowValueUtils.isFlowValue(value) ? 'extra.index' : ''),
   });
 
+  const hasChildren = useMemo(
+    () => canAddField && (list.length > 0 || Object.keys(objectListValue || {}).length > 0),
+    [canAddField, list.length, Object.keys(objectListValue || {}).length]
+  );
+
   return {
     canAddField,
+    hasChildren,
     list,
     add,
     updateKey,

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

@@ -47,7 +47,13 @@ export function InputsValuesTree(props: PropsType) {
         disabled={readonly}
         icon={<IconPlus />}
         size="small"
-        onClick={add}
+        onClick={() => {
+          add({
+            type: 'constant',
+            content: '',
+            schema: { type: 'string' },
+          });
+        }}
       >
         {I18n.t('Add')}
       </Button>

package/src/components/inputs-values-tree/row.tsx

@@ -3,12 +3,13 @@
  * SPDX-License-Identifier: MIT
  */
 
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 
 import { I18n } from '@flowgram.ai/editor';
 import { IconButton, Input } from '@douyinfe/semi-ui';
 import { IconChevronDown, IconChevronRight, IconDelete } from '@douyinfe/semi-icons';
 
+import { IFlowConstantValue } from '@/typings';
 import { ConstantInputStrategy } from '@/components/constant-input';
 
 import { PropsType } from './types';
@@ -64,14 +65,26 @@ export function InputValueRow(
   } = props;
   const [collapse, setCollapse] = useState(false);
 
-  const { canAddField, list, add, updateKey, updateValue, remove } = useChildList(
+  const { canAddField, hasChildren, list, add, updateKey, updateValue, remove } = useChildList(
     value,
     onUpdateValue
   );
 
-  const hasChildren = canAddField && list.length > 0;
+  const strategies = useMemo(
+    () => [...(hasChildren ? [AddObjectChildStrategy] : []), ...(constantProps?.strategies || [])],
+    [hasChildren, constantProps?.strategies]
+  );
 
-  const flowDisplayValue = hasChildren ? { type: 'constant', schema: { type: ' object' } } : value;
+  const flowDisplayValue = useMemo(
+    () =>
+      hasChildren
+        ? ({
+            type: 'constant',
+            schema: { type: 'object' },
+          } as IFlowConstantValue)
+        : value,
+    [hasChildren, value]
+  );
 
   return (
     <>
@@ -101,10 +114,7 @@ export function InputValueRow(
               hasError={hasError}
               constantProps={{
                 ...constantProps,
-                strategies: [
-                  ...(hasChildren ? [AddObjectChildStrategy] : []),
-                  ...(constantProps?.strategies || []),
-                ],
+                strategies,
               }}
             />
             <UIActions>
@@ -115,7 +125,11 @@ export function InputValueRow(
                   theme="borderless"
                   icon={<IconAddChildren />}
                   onClick={() => {
-                    add();
+                    add({
+                      type: 'constant',
+                      content: '',
+                      schema: { type: 'string' },
+                    });
                     setCollapse(true);
                   }}
                 />

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

@@ -134,7 +134,7 @@ export function VariableTagInject() {
   // 基于 {{var}} 的正则进行匹配，匹配后进行自定义渲染
   useLayoutEffect(() => {
     const atMatcher = new MatchDecorator({
-      regexp: /\{\{([^\}]+)\}\}/g,
+      regexp: /\{\{([^\}\{]+)\}\}/g,
       decoration: (match) =>
         Decoration.replace({
           widget: new VariableTagWidget({

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

@@ -32,6 +32,17 @@ export function InputsTree({ inputsValues }: { inputsValues: Record<string, IFlo
       return;
     }
 
+    /**
+     * When user input {{xxxx}}, {{{xxx}}}(more brackets if possible), replace all brackets with {{xxxx}}
+     */
+    let { from, to } = range;
+    while (editor.$view.state.doc.sliceString(from - 1, from) === '{') {
+      from--;
+    }
+    while (editor.$view.state.doc.sliceString(to, to + 1) === '}') {
+      to++;
+    }
+
     editor.replaceText({
       ...range,
       text: '{{' + variablePath + '}}',

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

@@ -5,13 +5,12 @@
 
 import React from 'react';
 
-import { IFlowValue } from '@/typings';
 import { PromptEditor, PromptEditorPropsType } from '@/components/prompt-editor';
 
 import { InputsTree } from './extensions/inputs-tree';
 
 interface PropsType extends PromptEditorPropsType {
-  inputsValues: Record<string, IFlowValue>;
+  inputsValues: any;
 }
 
 export function PromptEditorWithInputs({ inputsValues, ...restProps }: PropsType) {

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

@@ -5,7 +5,7 @@
 
 import React, { useMemo } from 'react';
 
-import { last } from 'lodash';
+import { isPlainObject, last } from 'lodash';
 import {
   type ArrayType,
   ASTMatch,
@@ -16,7 +16,7 @@ import {
 import { TreeNodeData } from '@douyinfe/semi-ui/lib/es/tree';
 import { Tree } from '@douyinfe/semi-ui';
 
-import { IFlowValue } from '@/typings';
+import { FlowValueUtils } from '@/shared';
 
 type VariableField = BaseVariableField<{ icon?: string | JSX.Element; title?: string }>;
 
@@ -24,7 +24,7 @@ export function InputsPicker({
   inputsValues,
   onSelect,
 }: {
-  inputsValues: Record<string, IFlowValue>;
+  inputsValues: any;
   onSelect: (v: string) => void;
 }) {
   const available = useScopeAvailable();
@@ -76,23 +76,40 @@ export function InputsPicker({
     };
   };
 
-  const treeData: TreeNodeData[] = useMemo(
-    () =>
-      Object.entries(inputsValues).map(([key, value]) => {
-        if (value?.type === 'ref') {
-          const variable = available.getByKeyPath(value.content || []);
+  const getTreeData = (value: any, keyPath: string[]): TreeNodeData | undefined => {
+    const currKey = keyPath.join('.');
 
-          if (variable) {
-            return renderVariable(variable, [key]);
-          }
+    if (FlowValueUtils.isFlowValue(value)) {
+      if (FlowValueUtils.isRef(value)) {
+        const variable = available.getByKeyPath(value.content || []);
+        if (variable) {
+          return renderVariable(variable, keyPath);
         }
+      }
+      return {
+        key: currKey,
+        value: currKey,
+        label: last(keyPath),
+      };
+    }
 
-        return {
-          key,
-          value: key,
-          label: key,
-        };
-      }),
+    if (isPlainObject(value)) {
+      return {
+        key: currKey,
+        value: currKey,
+        label: last(keyPath),
+        children: Object.entries(value)
+          .map(([key, value]) => getTreeData(value, [...keyPath, key])!)
+          .filter(Boolean),
+      };
+    }
+  };
+
+  const treeData: TreeNodeData[] = useMemo(
+    () =>
+      Object.entries(inputsValues)
+        .map(([key, value]) => getTreeData(value, [key])!)
+        .filter(Boolean),
     []
   );
 

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

@@ -143,7 +143,7 @@ export function VariableTagInject() {
   // 基于 {{var}} 的正则进行匹配，匹配后进行自定义渲染
   useLayoutEffect(() => {
     const atMatcher = new MatchDecorator({
-      regexp: /\{\{([^\}]+)\}\}/g,
+      regexp: /\{\{([^\}\{]+)\}\}/g,
       decoration: (match) =>
         Decoration.replace({
           widget: new VariableTagWidget({

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

@@ -30,8 +30,20 @@ export function VariableTree() {
       return;
     }
 
+    /**
+     * When user input {{xxxx}}, {{{xxx}}}(more brackets if possible), replace all brackets with {{xxxx}}
+     */
+    let { from, to } = range;
+    while (editor.$view.state.doc.sliceString(from - 1, from) === '{') {
+      from--;
+    }
+    while (editor.$view.state.doc.sliceString(to, to + 1) === '}') {
+      to++;
+    }
+
     editor.replaceText({
-      ...range,
+      from,
+      to,
       text: '{{' + variablePath + '}}',
     });
 

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

@@ -86,12 +86,22 @@ export function TypeSelector(props: TypeSelectorProps) {
     []
   );
 
+  const isDisabled = readonly || disabled;
+
   return (
     <Cascader
-      disabled={readonly || disabled}
+      disabled={isDisabled}
       size="small"
       triggerRender={() => (
-        <IconButton size="small" style={style} disabled={readonly || disabled} icon={icon} />
+        <IconButton
+          size="small"
+          style={{
+            ...(isDisabled ? { pointerEvents: 'none' } : {}),
+            ...(style || {}),
+          }}
+          disabled={isDisabled}
+          icon={icon}
+        />
       )}
       treeData={options}
       value={selectValue}

package/src/index.ts

@@ -10,3 +10,4 @@ export * from './typings';
 export * from './form-plugins';
 export * from './plugins';
 export * from './validate';
+export * from './hooks';

package/src/shared/flow-value/schema.ts

@@ -14,7 +14,7 @@ export const extraSchema = z
 
 export const constantSchema = z.object({
   type: z.literal('constant'),
-  content: z.union([z.string(), z.number(), z.boolean()]).optional(),
+  content: z.any().optional(),
   schema: z.any().optional(),
   extra: extraSchema,
 });

package/src/shared/flow-value/utils.ts

@@ -121,7 +121,7 @@ export namespace FlowValueUtils {
    */
   export function getTemplateKeyPaths(value: IFlowTemplateValue) {
     // find all keyPath wrapped in {{}}
-    const keyPathReg = /{{(.*?)}}/g;
+    const keyPathReg = /\{\{([^\}\{]+)\}\}/g;
     return uniq(value.content?.match(keyPathReg) || []).map((_keyPath) =>
       _keyPath.slice(2, -2).split('.')
     );

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

@@ -13,7 +13,7 @@ export type FlowValueType = 'constant' | 'ref' | 'expression' | 'template';
 
 export interface IFlowConstantValue {
   type: 'constant';
-  content?: string | number | boolean;
+  content?: any;
   schema?: IJsonSchema;
   extra?: IFlowValueExtra;
 }

package/src/validate/validate-flow-value/index.tsx

@@ -3,10 +3,11 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { isNil, uniq } from 'lodash';
+import { isNil } from 'lodash';
 import { FeedbackLevel, FlowNodeEntity, getNodeScope } from '@flowgram.ai/editor';
 
-import { IFlowTemplateValue, IFlowValue } from '@/typings';
+import { IFlowValue } from '@/typings';
+import { FlowValueUtils } from '@/shared';
 
 interface Context {
   node: FlowNodeEntity;
@@ -43,7 +44,7 @@ export function validateFlowValue(value: IFlowValue | undefined, ctx: Context) {
   }
 
   if (value?.type === 'template') {
-    const allRefs = getTemplateKeyPaths(value);
+    const allRefs = FlowValueUtils.getTemplateKeyPaths(value);
 
     for (const ref of allRefs) {
       const variable = getNodeScope(node).available.getByKeyPath(ref);
@@ -58,16 +59,3 @@ export function validateFlowValue(value: IFlowValue | undefined, ctx: Context) {
 
   return undefined;
 }
-
-/**
- * get template key paths
- * @param value
- * @returns
- */
-function getTemplateKeyPaths(value: IFlowTemplateValue) {
-  // find all keyPath wrapped in {{}}
-  const keyPathReg = /{{(.*?)}}/g;
-  return uniq(value.content?.match(keyPathReg) || []).map((_keyPath) =>
-    _keyPath.slice(2, -2).split('.')
-  );
-}