@flowgram.ai/form-materials 0.4.2 → 0.4.3

package/package.json

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

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}
         />
@@ -110,7 +119,7 @@ export function DynamicValueInput({
         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}
           />

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

@@ -23,7 +23,7 @@ export function useChildList(
   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;

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

@@ -125,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/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('.')
-  );
-}