@flowgram.ai/form-materials 0.1.0-alpha.12 → 0.1.0-alpha.14

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-es';
 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/editor.tsx

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React from 'react';
+
+import { PromptEditor, PromptEditorPropsType } from '@/components/prompt-editor';
+
+import { VariableTree } from './extensions/variable-tree';
+import { VariableTagInject } from './extensions/variable-tag';
+
+export interface PromptEditorWithVariablesProps extends PromptEditorPropsType {}
+
+export function PromptEditorWithVariables(props: PromptEditorWithVariablesProps) {
+  return (
+    <PromptEditor {...props}>
+      <VariableTree />
+      <VariableTagInject />
+    </PromptEditor>
+  );
+}

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

@@ -3,10 +3,9 @@
  * SPDX-License-Identifier: MIT
  */
 
-import ReactDOM from 'react-dom';
 import React, { useLayoutEffect } from 'react';
 
-import { isEqual, last } from 'lodash';
+import { isEqual, last } from 'lodash-es';
 import {
   BaseVariableField,
   Disposable,
@@ -26,6 +25,8 @@ import {
   WidgetType,
 } from '@codemirror/view';
 
+import { IPolyfillRoot, polyfillCreateRoot } from '@/shared';
+
 import { UIPopoverContent, UIRootTitle, UITag, UIVarName } from '../styles';
 
 class VariableTagWidget extends WidgetType {
@@ -35,7 +36,7 @@ class VariableTagWidget extends WidgetType {
 
   scope: Scope;
 
-  rootDOM?: HTMLSpanElement;
+  root: IPolyfillRoot;
 
   constructor({ keyPath, scope }: { keyPath?: string[]; scope: Scope }) {
     super();
@@ -52,14 +53,9 @@ class VariableTagWidget extends WidgetType {
     return icon;
   };
 
-  renderReact(jsx: React.ReactElement) {
-    // NOTICE: For React 19, upgrade to 'react-dom/client'
-    ReactDOM.render(jsx, this.rootDOM!);
-  }
-
   renderVariable(v?: BaseVariableField) {
     if (!v) {
-      this.renderReact(
+      this.root.render(
         <UITag prefixIcon={<IconIssueStroked />} color="amber">
           Unknown
         </UITag>
@@ -67,17 +63,14 @@ class VariableTagWidget extends WidgetType {
       return;
     }
 
-    const rootField = last(v.parentFields) || v;
-    const isRoot = v.parentFields.length === 0;
+    const rootField = last(v.parentFields);
 
     const rootTitle = (
-      <UIRootTitle>
-        {rootField?.meta.title ? `${rootField.meta.title} ${isRoot ? '' : '-'} ` : ''}
-      </UIRootTitle>
+      <UIRootTitle>{rootField?.meta.title ? `${rootField.meta.title} -` : ''}</UIRootTitle>
     );
     const rootIcon = this.renderIcon(rootField?.meta.icon);
 
-    this.renderReact(
+    this.root.render(
       <Popover
         content={
           <UIPopoverContent>
@@ -89,7 +82,7 @@ class VariableTagWidget extends WidgetType {
       >
         <UITag prefixIcon={rootIcon}>
           {rootTitle}
-          {!isRoot && <UIVarName>{v?.key}</UIVarName>}
+          <UIVarName>{v?.key}</UIVarName>
         </UITag>
       </Popover>
     );
@@ -98,12 +91,11 @@ class VariableTagWidget extends WidgetType {
   toDOM(view: EditorView): HTMLElement {
     const dom = document.createElement('span');
 
-    this.rootDOM = dom;
+    this.root = polyfillCreateRoot(dom);
 
     this.toDispose.push(
       Disposable.create(() => {
-        // NOTICE: For React 19, upgrade to 'react-dom/client'
-        ReactDOM.unmountComponentAtNode(this.rootDOM!);
+        this.root.unmount();
       })
     );
 
@@ -143,7 +135,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

@@ -15,7 +15,7 @@ import {
 } from '@coze-editor/editor/react';
 import { EditorAPI } from '@coze-editor/editor/preset-prompt';
 
-import { useVariableTree } from '../../variable-selector';
+import { useVariableTree } from '@/components/variable-selector';
 
 export function VariableTree() {
   const [posKey, setPosKey] = useState('');
@@ -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/prompt-editor-with-variables/index.tsx

@@ -3,17 +3,10 @@
  * SPDX-License-Identifier: MIT
  */
 
-import React from 'react';
+import { lazySuspense } from '@/shared';
 
-import { VariableTree } from './extensions/variable-tree';
-import { VariableTagInject } from './extensions/variable-tag';
-import { PromptEditor, PromptEditorPropsType } from '../prompt-editor';
+export const PromptEditorWithVariables = lazySuspense(() =>
+  import('./editor').then((module) => ({ default: module.PromptEditorWithVariables }))
+);
 
-export function PromptEditorWithVariables(props: PromptEditorPropsType) {
-  return (
-    <PromptEditor {...props}>
-      <VariableTree />
-      <VariableTagInject />
-    </PromptEditor>
-  );
-}
+export type { PromptEditorWithVariablesProps } from './editor';

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

@@ -8,9 +8,10 @@ import React, { useMemo } from 'react';
 import { IJsonSchema } from '@flowgram.ai/json-schema';
 import { Cascader, Icon, IconButton } from '@douyinfe/semi-ui';
 
-import { useTypeManager } from '../../plugins';
+import { createInjectMaterial } from '@/shared/inject-material';
+import { useTypeManager } from '@/plugins';
 
-interface PropTypes {
+export interface TypeSelectorProps {
   value?: Partial<IJsonSchema>;
   onChange?: (value?: Partial<IJsonSchema>) => void;
   readonly?: boolean;
@@ -23,8 +24,6 @@ interface PropTypes {
 
 const labelStyle: React.CSSProperties = { display: 'flex', alignItems: 'center', gap: 5 };
 
-const firstUppercase = (str: string) => str.charAt(0).toUpperCase() + str.slice(1);
-
 export const getTypeSelectValue = (value?: Partial<IJsonSchema>): string[] | undefined => {
   if (value?.type === 'array' && value?.items) {
     return [value.type, ...(getTypeSelectValue(value.items) || [])];
@@ -43,7 +42,7 @@ export const parseTypeSelectValue = (value?: string[]): Partial<IJsonSchema> | u
   return { type };
 };
 
-export function TypeSelector(props: PropTypes) {
+export function TypeSelector(props: TypeSelectorProps) {
   const { value, onChange, readonly, disabled, style } = props;
 
   const selectValue = useMemo(() => getTypeSelectValue(value), [value]);
@@ -61,7 +60,7 @@ export function TypeSelector(props: PropTypes) {
           label: (
             <div style={labelStyle}>
               <Icon size="small" svg={_type.icon} />
-              {firstUppercase(_type.type)}
+              {typeManager.getTypeBySchema(_type)?.label || _type.type}
             </div>
           ),
           value: _type.type,
@@ -76,7 +75,7 @@ export function TypeSelector(props: PropTypes) {
                         items: { type: _type.type },
                       })}
                     />
-                    {firstUppercase(_type.type)}
+                    {typeManager.getTypeBySchema(_type)?.label || _type.type}
                   </div>
                 ),
                 value: _type.type,
@@ -87,12 +86,22 @@ export function TypeSelector(props: PropTypes) {
     []
   );
 
+  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}
@@ -103,3 +112,6 @@ export function TypeSelector(props: PropTypes) {
     />
   );
 }
+
+TypeSelector.renderKey = 'type-selector-render-key';
+export const InjectTypeSelector = createInjectMaterial(TypeSelector);

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

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React, { createContext, useContext, useMemo } from 'react';
+
+import { BaseVariableField } from '@flowgram.ai/editor';
+
+export const VariableSelectorContext = createContext<{
+  skipVariable?: (variable?: BaseVariableField) => boolean;
+}>({});
+
+export const useVariableSelectorContext = () => useContext(VariableSelectorContext);
+
+export const VariableSelectorProvider = ({
+  children,
+  skipVariable,
+}: {
+  skipVariable?: (variable?: BaseVariableField) => boolean;
+  children: React.ReactNode;
+}) => {
+  const context = useMemo(() => ({ skipVariable }), [skipVariable]);
+
+  return (
+    <VariableSelectorContext.Provider value={context}>{children}</VariableSelectorContext.Provider>
+  );
+};

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

@@ -6,15 +6,19 @@
 import React, { useMemo } from 'react';
 
 import { IJsonSchema } from '@flowgram.ai/json-schema';
+import { I18n } from '@flowgram.ai/editor';
 import { TriggerRenderProps } from '@douyinfe/semi-ui/lib/es/treeSelect';
 import { TreeNodeData } from '@douyinfe/semi-ui/lib/es/tree';
 import { Popover } from '@douyinfe/semi-ui';
 import { IconChevronDownStroked, IconIssueStroked } from '@douyinfe/semi-icons';
 
+import { createInjectMaterial } from '@/shared';
+
 import { useVariableTree } from './use-variable-tree';
 import { UIPopoverContent, UIRootTitle, UITag, UITreeSelect, UIVarName } from './styles';
+import { useVariableSelectorContext } from './context';
 
-interface PropTypes {
+export interface VariableSelectorProps {
   value?: string[];
   config?: {
     placeholder?: string;
@@ -29,8 +33,6 @@ interface PropTypes {
   triggerRender?: (props: TriggerRenderProps) => React.ReactNode;
 }
 
-export type VariableSelectorProps = PropTypes;
-
 export { useVariableTree };
 
 export const VariableSelector = ({
@@ -43,8 +45,14 @@ export const VariableSelector = ({
   excludeSchema,
   hasError,
   triggerRender,
-}: PropTypes) => {
-  const treeData = useVariableTree({ includeSchema, excludeSchema });
+}: VariableSelectorProps) => {
+  const { skipVariable } = useVariableSelectorContext();
+
+  const treeData = useVariableTree({
+    includeSchema,
+    excludeSchema,
+    skipVariable,
+  });
 
   const treeValue = useMemo(() => {
     if (typeof value === 'string') {
@@ -130,8 +138,13 @@ export const VariableSelector = ({
         showClear={false}
         arrowIcon={<IconChevronDownStroked size="small" />}
         triggerRender={triggerRender}
-        placeholder={config?.placeholder ?? 'Select Variable'}
+        placeholder={config?.placeholder ?? I18n.t('Select Variable')}
       />
     </>
   );
 };
+
+VariableSelector.renderKey = 'variable-selector-render-key';
+export const InjectVariableSelector = createInjectMaterial(VariableSelector);
+
+export { VariableSelectorProvider } from './context';

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

@@ -10,7 +10,7 @@ import { ASTMatch, BaseVariableField, useAvailableVariables } from '@flowgram.ai
 import { TreeNodeData } from '@douyinfe/semi-ui/lib/es/tree';
 import { Icon } from '@douyinfe/semi-ui';
 
-import { useTypeManager } from '../../plugins';
+import { useTypeManager } from '@/plugins';
 
 type VariableField = BaseVariableField<{
   icon?: string | JSX.Element;
@@ -21,9 +21,9 @@ type VariableField = BaseVariableField<{
 export function useVariableTree(params: {
   includeSchema?: IJsonSchema | IJsonSchema[];
   excludeSchema?: IJsonSchema | IJsonSchema[];
-  customSkip?: (variable: VariableField) => boolean;
+  skipVariable?: (variable: VariableField) => boolean;
 }): TreeNodeData[] {
-  const { includeSchema, excludeSchema, customSkip } = params;
+  const { includeSchema, excludeSchema, skipVariable } = params;
 
   const typeManager = useTypeManager();
   const variables = useAvailableVariables();
@@ -69,7 +69,7 @@ export function useVariableTree(params: {
     const isSchemaExclude = excludeSchema
       ? JsonSchemaUtils.isASTMatchSchema(type, excludeSchema)
       : false;
-    const isCustomSkip = customSkip ? customSkip(variable) : false;
+    const isCustomSkip = skipVariable ? skipVariable(variable) : false;
 
     // disabled in meta when created
     const isMetaDisabled = variable.meta?.disabled;

package/src/effects/auto-rename-ref/index.ts

@@ -3,7 +3,6 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { isArray, isObject, uniq } from 'lodash';
 import {
   DataEvent,
   Effect,
@@ -11,7 +10,8 @@ import {
   VariableFieldKeyRenameService,
 } from '@flowgram.ai/editor';
 
-import { IFlowRefValue, IFlowTemplateValue } from '../../typings';
+import { IFlowRefValue, IFlowTemplateValue } from '@/typings';
+import { FlowValueUtils } from '@/shared';
 
 /**
  * Auto rename ref when form item's key is renamed
@@ -52,7 +52,7 @@ export const autoRenameRefEffect: EffectOptions[] = [
             }
           } else if (_v.type === 'template') {
             // template auto rename
-            const templateKeyPaths = getTemplateKeyPaths(_v);
+            const templateKeyPaths = FlowValueUtils.getTemplateKeyPaths(_v);
             let hasMatch = false;
 
             templateKeyPaths.forEach((_keyPath) => {
@@ -93,34 +93,6 @@ function isKeyPathMatch(keyPath: string[] = [], targetKeyPath: string[]) {
   return targetKeyPath.every((_key, index) => _key === keyPath[index]);
 }
 
-/**
- * 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('.')
-  );
-}
-
-/**
- * If value is ref
- * @param value
- * @returns
- */
-function isRef(value: any): value is IFlowRefValue {
-  return (
-    value?.type === 'ref' && Array.isArray(value?.content) && typeof value?.content[0] === 'string'
-  );
-}
-
-function isTemplate(value: any): value is IFlowTemplateValue {
-  return value?.type === 'template' && typeof value?.content === 'string';
-}
-
 /**
  * Traverse value to find ref
  * @param value
@@ -132,29 +104,10 @@ function traverseRef(
   value: any,
   cb: (name: string, _v: IFlowRefValue | IFlowTemplateValue) => void
 ) {
-  if (isObject(value)) {
-    if (isRef(value)) {
-      cb(name, value);
-      return;
-    }
-
-    if (isTemplate(value)) {
-      cb(name, value);
-      return;
-    }
-
-    Object.entries(value).forEach(([_key, _value]) => {
-      traverseRef(`${name}.${_key}`, _value, cb);
-    });
-    return;
-  }
-
-  if (isArray(value)) {
-    value.forEach((_value, idx) => {
-      traverseRef(`${name}[${idx}]`, _value, cb);
-    });
-    return;
+  for (const { value: _v, path } of FlowValueUtils.traverse(value, {
+    includeTypes: ['ref', 'template'],
+    path: name,
+  })) {
+    cb(path, _v as IFlowRefValue | IFlowTemplateValue);
   }
-
-  return;
 }

package/src/effects/listen-ref-schema-change/index.ts

@@ -13,7 +13,7 @@ import {
   getNodeScope,
 } from '@flowgram.ai/editor';
 
-import { IFlowRefValue } from '../../typings';
+import { IFlowRefValue } from '@/typings';
 
 /**
  * Example:

package/src/effects/listen-ref-value-change/index.ts

@@ -12,7 +12,7 @@ import {
   getNodeScope,
 } from '@flowgram.ai/editor';
 
-import { IFlowRefValue } from '../../typings';
+import { IFlowRefValue } from '@/typings';
 
 /**
  * Example:

package/src/effects/provide-batch-input/index.ts

@@ -11,7 +11,7 @@ import {
   getNodeForm,
 } from '@flowgram.ai/editor';
 
-import { IFlowRefValue } from '../../typings';
+import { IFlowRefValue } from '@/typings';
 
 export const provideBatchInputEffect: EffectOptions[] = createEffectFromVariableProvider({
   private: true,

package/src/effects/validate-when-variable-sync/index.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { isEmpty } from 'lodash';
+import { isEmpty } from 'lodash-es';
 import {
   DataEvent,
   Effect,

package/src/form-plugins/batch-outputs-plugin/index.ts

@@ -17,7 +17,7 @@ import {
   FlowNodeScopeType,
 } from '@flowgram.ai/editor';
 
-import { IFlowRefValue } from '../../typings';
+import { IFlowRefValue } from '@/typings';
 
 export const provideBatchOutputsEffect: EffectOptions[] = createEffectFromVariableProvider({
   parse: (value: Record<string, IFlowRefValue>, ctx) => [

package/src/form-plugins/infer-assign-plugin/index.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { set, uniqBy } from 'lodash';
+import { set, uniqBy } from 'lodash-es';
 import { JsonSchemaUtils } from '@flowgram.ai/json-schema';
 import {
   ASTFactory,
@@ -14,7 +14,7 @@ import {
   getNodeScope,
 } from '@flowgram.ai/editor';
 
-import { IFlowRefValue, IFlowValue } from '../../typings';
+import { IFlowRefValue, IFlowValue } from '@/typings';
 
 type AssignValueType =
   | {