@flowgram.ai/form-materials 0.3.3 → 0.3.5

package/src/components/json-schema-editor/default-value.tsx

@@ -3,26 +3,19 @@
  * SPDX-License-Identifier: MIT
  */
 
-import React, { useRef, useState, useCallback } from 'react';
+import React from 'react';
 
 import { IJsonSchema } from '@flowgram.ai/json-schema';
-import { IconButton, JsonViewer, Tooltip } from '@douyinfe/semi-ui';
-import { IconBrackets } from '@douyinfe/semi-icons';
+import { I18n } from '@flowgram.ai/editor';
 
-import { getValueType } from './utils';
-import {
-  ConstantInputWrapper,
-  JSONHeader,
-  JSONHeaderLeft,
-  JSONHeaderRight,
-  JSONViewerWrapper,
-} from './styles';
-import { ConstantInput } from '../constant-input';
+import { ConstantInput } from '@/components/constant-input';
+
+import { ConstantInputWrapper } from './styles';
 
 /**
- * 根据不同的数据类型渲染对应的默认值输入组件。
- * @param props - 组件属性，包括 value, type, placeholder, onChange。
- * @returns 返回对应类型的输入组件或 null。
+ * Renders the corresponding default value input component based on different data types.
+ * @param props - Component properties, including value, type, placeholder, onChange.
+ * @returns Returns the input component of the corresponding type or null.
  */
 export function DefaultValue(props: {
   value: any;
@@ -33,102 +26,15 @@ export function DefaultValue(props: {
   jsonFormatText?: string;
   onChange: (value: any) => void;
 }) {
-  const { value, schema, type, onChange, placeholder, jsonFormatText } = props;
-
-  const wrapperRef = useRef<HTMLDivElement>(null);
-  const JsonViewerRef = useRef<JsonViewer>(null);
-
-  // 为 JsonViewer 添加状态管理
-  const [internalJsonValue, setInternalJsonValue] = useState<string>(
-    getValueType(value) === 'string' ? value : ''
-  );
-
-  // 使用 useCallback 创建稳定的回调函数
-  const handleJsonChange = useCallback((val: string) => {
-    // 只在值真正改变时才更新状态
-    if (val !== internalJsonValue) {
-      setInternalJsonValue(val);
-    }
-  }, []);
-
-  // 处理编辑完成事件
-  const handleEditComplete = useCallback(() => {
-    // 只有当存在key，编辑完成时才触发父组件的 onChange
-    onChange(internalJsonValue);
-    // 确保在更新后移除焦点
-    requestAnimationFrame(() => {
-      // JsonViewerRef.current?.format();
-      wrapperRef.current?.blur();
-    });
-    setJsonReadOnly(true);
-  }, [internalJsonValue, onChange]);
-
-  const [jsonReadOnly, setJsonReadOnly] = useState<boolean>(true);
-
-  const handleFormatJson = useCallback(() => {
-    try {
-      const parsed = JSON.parse(internalJsonValue);
-      const formatted = JSON.stringify(parsed, null, 4);
-      setInternalJsonValue(formatted);
-      onChange(formatted);
-    } catch (error) {
-      console.error('Invalid JSON:', error);
-    }
-  }, [internalJsonValue, onChange]);
-
-  return type === 'object' ? (
-    <>
-      <JSONHeader>
-        <JSONHeaderLeft>json</JSONHeaderLeft>
-        <JSONHeaderRight>
-          <Tooltip content={jsonFormatText ?? 'Format'}>
-            <IconButton
-              icon={<IconBrackets style={{ color: 'var(--semi-color-primary)' }} />}
-              size="small"
-              type="tertiary"
-              theme="borderless"
-              onClick={handleFormatJson}
-            />
-          </Tooltip>
-        </JSONHeaderRight>
-      </JSONHeader>
+  const { value, schema, onChange, placeholder } = props;
 
-      <JSONViewerWrapper
-        ref={wrapperRef}
-        tabIndex={-1}
-        onBlur={(e) => {
-          if (wrapperRef.current && !wrapperRef.current?.contains(e.relatedTarget as Node)) {
-            handleEditComplete();
-          }
-        }}
-        onClick={(e: React.MouseEvent) => {
-          setJsonReadOnly(false);
-        }}
-      >
-        <JsonViewer
-          ref={JsonViewerRef}
-          value={getValueType(value) === 'string' ? value : ''}
-          height={120}
-          width="100%"
-          showSearch={false}
-          options={{
-            readOnly: jsonReadOnly,
-            formatOptions: { tabSize: 4, insertSpaces: true, eol: '\n' },
-          }}
-          style={{
-            padding: 0,
-          }}
-          onChange={handleJsonChange}
-        />
-      </JSONViewerWrapper>
-    </>
-  ) : (
+  return (
     <ConstantInputWrapper>
       <ConstantInput
         value={value}
         onChange={(_v) => onChange(_v)}
         schema={schema || { type: 'string' }}
-        placeholder={placeholder ?? 'Default value if parameter is not provided'}
+        placeholder={placeholder ?? I18n.t('Default value if parameter is not provided')}
       />
     </ConstantInputWrapper>
   );

package/src/components/json-schema-editor/hooks.tsx

@@ -3,10 +3,11 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useState } from 'react';
 
-import { omit } from 'lodash';
-import { IJsonSchema } from '@flowgram.ai/json-schema';
+import { difference, omit } from 'lodash';
+import { produce } from 'immer';
+import { IJsonSchema, type JsonSchemaTypeManager, useTypeManager } from '@flowgram.ai/json-schema';
 
 import { PropertyValueType } from './types';
 
@@ -15,92 +16,46 @@ function genId() {
   return _id++;
 }
 
-function getDrilldownSchema(
-  value?: PropertyValueType,
-  path?: (keyof PropertyValueType)[]
-): { schema?: PropertyValueType | null; path?: (keyof PropertyValueType)[] } {
-  if (!value) {
-    return {};
-  }
-
-  if (value.type === 'array' && value.items) {
-    return getDrilldownSchema(value.items, [...(path || []), 'items']);
-  }
-
-  return { schema: value, path };
-}
-
 export function usePropertiesEdit(
   value?: PropertyValueType,
   onChange?: (value: PropertyValueType) => void
 ) {
-  // Get drilldown (array.items.items...)
-  const drilldown = useMemo(() => getDrilldownSchema(value), [value, value?.type, value?.items]);
-
-  const isDrilldownObject = drilldown.schema?.type === 'object';
-
-  // Generate Init Property List
-  const initPropertyList = useMemo(
-    () =>
-      isDrilldownObject
-        ? Object.entries(drilldown.schema?.properties || {})
-            .sort(([, a], [, b]) => (a.extra?.index ?? 0) - (b.extra?.index ?? 0))
-            .map(
-              ([name, _value], index) =>
-                ({
-                  key: genId(),
-                  name,
-                  isPropertyRequired: drilldown.schema?.required?.includes(name) || false,
-                  ..._value,
-                  extra: {
-                    ...(_value.extra || {}),
-                    index,
-                  },
-                } as PropertyValueType)
-            )
-        : [],
-    [isDrilldownObject]
-  );
-
-  const [propertyList, setPropertyList] = useState<PropertyValueType[]>(initPropertyList);
-
-  const mountRef = useRef(false);
+  const typeManager = useTypeManager() as JsonSchemaTypeManager;
+
+  // Get drilldown properties (array.items.items.properties...)
+  const drilldownSchema = typeManager.getPropertiesParent(value || {});
+  const canAddField = typeManager.canAddField(value || {});
+
+  const [propertyList, setPropertyList] = useState<PropertyValueType[]>([]);
 
   useEffect(() => {
-    // If initRef is true, it means the component has been mounted
-    if (mountRef.current) {
-      // If the value is changed, update the property list
-      setPropertyList((_list) => {
-        const nameMap = new Map<string, PropertyValueType>();
-
-        for (const _property of _list) {
-          if (_property.name) {
-            nameMap.set(_property.name, _property);
-          }
-        }
-        return Object.entries(drilldown.schema?.properties || {})
-          .sort(([, a], [, b]) => (a.extra?.index ?? 0) - (b.extra?.index ?? 0))
-          .map(([name, _value]) => {
-            const _property = nameMap.get(name);
-            if (_property) {
-              return {
-                key: _property.key,
-                name,
-                isPropertyRequired: drilldown.schema?.required?.includes(name) || false,
-                ..._value,
-              };
-            }
-            return {
-              key: genId(),
-              name,
-              isPropertyRequired: drilldown.schema?.required?.includes(name) || false,
-              ..._value,
-            };
-          });
-      });
-    }
-    mountRef.current = true;
-  }, [drilldown.schema]);
+    // If the value is changed, update the property list
+    setPropertyList((_list) => {
+      const newNames = Object.entries(drilldownSchema?.properties || {})
+        .sort(([, a], [, b]) => (a.extra?.index ?? 0) - (b.extra?.index ?? 0))
+        .map(([key]) => key);
+
+      const oldNames = _list.map((item) => item.name).filter(Boolean) as string[];
+      const addNames = difference(newNames, oldNames);
+
+      return _list
+        .filter((item) => !item.name || newNames.includes(item.name))
+        .map((item) => ({
+          key: item.key,
+          name: item.name,
+          isPropertyRequired: drilldownSchema?.required?.includes(item.name || '') || false,
+          ...item,
+        }))
+        .concat(
+          addNames.map((_name) => ({
+            key: genId(),
+            name: _name,
+            isPropertyRequired: drilldownSchema?.required?.includes(_name) || false,
+            ...(drilldownSchema?.properties?.[_name] || {}),
+          }))
+        );
+    });
+  }, [drilldownSchema]);
 
   const updatePropertyList = (updater: (list: PropertyValueType[]) => PropertyValueType[]) => {
     setPropertyList((_list) => {
@@ -122,21 +77,25 @@ export function usePropertiesEdit(
         }
       }
 
-      let drilldownSchema = value || {};
-      if (drilldown.path) {
-        drilldownSchema = drilldown.path.reduce((acc, key) => acc[key], value || {});
-      }
-      drilldownSchema.properties = nextProperties;
-      drilldownSchema.required = nextRequired;
+      onChange?.(
+        produce(value || {}, (draft) => {
+          const propertiesParent = typeManager.getPropertiesParent(draft);
 
-      onChange?.(value || {});
+          if (propertiesParent) {
+            propertiesParent.properties = nextProperties;
+            propertiesParent.required = nextRequired;
+            return;
+          }
+        })
+      );
 
       return next;
     });
   };
 
   const onAddProperty = () => {
-    updatePropertyList((_list) => [
+    // set property list only, not trigger updatePropertyList
+    setPropertyList((_list) => [
       ..._list,
       { key: genId(), name: '', type: 'string', extra: { index: _list.length + 1 } },
     ]);
@@ -153,14 +112,14 @@ export function usePropertiesEdit(
   };
 
   useEffect(() => {
-    if (!isDrilldownObject) {
+    if (!canAddField) {
       setPropertyList([]);
     }
-  }, [isDrilldownObject]);
+  }, [canAddField]);
 
   return {
     propertyList,
-    isDrilldownObject,
+    canAddField,
     onAddProperty,
     onRemoveProperty,
     onEditProperty,

package/src/components/json-schema-editor/index.tsx

@@ -6,6 +6,7 @@
 import React, { useMemo, useState } from 'react';
 
 import { IJsonSchema } from '@flowgram.ai/json-schema';
+import { I18n } from '@flowgram.ai/editor';
 import { Button, Checkbox, IconButton } from '@douyinfe/semi-ui';
 import {
   IconExpand,
@@ -16,7 +17,8 @@ import {
   IconMinus,
 } from '@douyinfe/semi-icons';
 
-import { TypeSelector } from '../type-selector';
+import { InjectTypeSelector } from '@/components/type-selector';
+
 import { ConfigType, PropertyValueType } from './types';
 import {
   IconAddChildren,
@@ -39,6 +41,8 @@ import { usePropertiesEdit } from './hooks';
 import { DefaultValue } from './default-value';
 import { BlurInput } from './components/blur-input';
 
+const DEFAULT = { type: 'object' };
+
 export function JsonSchemaEditor(props: {
   value?: IJsonSchema;
   onChange?: (value: IJsonSchema) => void;
@@ -46,7 +50,7 @@ export function JsonSchemaEditor(props: {
   className?: string;
   readonly?: boolean;
 }) {
-  const { value = { type: 'object' }, config = {}, onChange: onChangeProps, readonly } = props;
+  const { value = DEFAULT, config = {}, onChange: onChangeProps, readonly } = props;
   const { propertyList, onAddProperty, onRemoveProperty, onEditProperty } = usePropertiesEdit(
     value,
     onChangeProps
@@ -78,7 +82,7 @@ export function JsonSchemaEditor(props: {
         icon={<IconPlus />}
         onClick={onAddProperty}
       >
-        {config?.addButtonText ?? 'Add'}
+        {config?.addButtonText ?? I18n.t('Add')}
       </Button>
     </UIContainer>
   );
@@ -120,7 +124,7 @@ function PropertyEdit(props: {
 
   const typeSelectorValue = useMemo(() => ({ type, items }), [type, items]);
 
-  const { propertyList, isDrilldownObject, onAddProperty, onRemoveProperty, onEditProperty } =
+  const { propertyList, canAddField, onAddProperty, onRemoveProperty, onEditProperty } =
     usePropertiesEdit(value, onChangeProps);
 
   const onChange = (key: string, _value: any) => {
@@ -130,7 +134,7 @@ function PropertyEdit(props: {
     });
   };
 
-  const showCollapse = isDrilldownObject && propertyList.length > 0;
+  const showCollapse = canAddField && propertyList.length > 0;
 
   return (
     <>
@@ -168,7 +172,7 @@ function PropertyEdit(props: {
               />
             </UIName>
             <UIType>
-              <TypeSelector
+              <InjectTypeSelector
                 value={typeSelectorValue}
                 readonly={readonly}
                 onChange={(_value) => {
@@ -196,7 +200,7 @@ function PropertyEdit(props: {
                   setExpand((_expand) => !_expand);
                 }}
               />
-              {isDrilldownObject && (
+              {canAddField && (
                 <IconButton
                   disabled={readonly}
                   size="small"
@@ -219,25 +223,27 @@ function PropertyEdit(props: {
           </UIRow>
           {expand && (
             <UIExpandDetail>
-              <UILabel>{config?.descTitle ?? 'Description'}</UILabel>
+              <UILabel>{config?.descTitle ?? I18n.t('Description')}</UILabel>
               <BlurInput
                 disabled={readonly}
                 size="small"
                 value={description}
                 onChange={(value) => onChange('description', value)}
-                placeholder={config?.descPlaceholder ?? 'Help LLM to understand the property'}
+                placeholder={
+                  config?.descPlaceholder ?? I18n.t('Help LLM to understand the property')
+                }
               />
-              {$level === 0 && type && type !== 'array' && (
+              {$level === 0 && (
                 <>
                   <UILabel style={{ marginTop: 10 }}>
-                    {config?.defaultValueTitle ?? 'Default Value'}
+                    {config?.defaultValueTitle ?? I18n.t('Default Value')}
                   </UILabel>
                   <DefaultValueWrapper>
                     <DefaultValue
                       value={defaultValue}
                       schema={value}
                       type={type}
-                      placeholder={config?.defaultValuePlaceholder}
+                      placeholder={config?.defaultValuePlaceholder ?? I18n.t('Default Value')}
                       jsonFormatText={config?.jsonFormatText}
                       onChange={(value) => onChange('default', value)}
                     />

package/src/components/json-schema-editor/styles.tsx

@@ -200,35 +200,6 @@ export const DefaultValueWrapper = styled.div`
   margin: 0;
 `;
 
-export const JSONViewerWrapper = styled.div`
-  padding: 0 0 24px;
-  &:first-child {
-    margin-top: 0px;
-  }
-`;
-
-export const JSONHeader = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background-color: var(--semi-color-fill-0);
-  border-radius: 6px 6px 0 0;
-  height: 36px;
-  padding: 0 8px 0 12px;
-`;
-
-export const JSONHeaderLeft = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 10px;
-`;
-
-export const JSONHeaderRight = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 10px;
-`;
-
 export const ConstantInputWrapper = styled.div`
   flex-grow: 1;
 

package/src/components/prompt-editor/types.tsx

@@ -5,7 +5,7 @@
 
 import React from 'react';
 
-import { IFlowTemplateValue } from '../../typings';
+import { IFlowTemplateValue } from '@/typings';
 
 export type PropsType = React.PropsWithChildren<{
   value?: IFlowTemplateValue;

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

@@ -15,8 +15,9 @@ import {
 } from '@coze-editor/editor/react';
 import { EditorAPI } from '@coze-editor/editor/preset-prompt';
 
+import { IFlowValue } from '@/typings';
+
 import { InputsPicker } from '../inputs-picker';
-import { IFlowValue } from '../../../typings';
 
 export function InputsTree({ inputsValues }: { inputsValues: Record<string, IFlowValue> }) {
   const [posKey, setPosKey] = useState('');

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

@@ -5,9 +5,10 @@
 
 import React from 'react';
 
+import { IFlowValue } from '@/typings';
+import { PromptEditor, PromptEditorPropsType } from '@/components/prompt-editor';
+
 import { InputsTree } from './extensions/inputs-tree';
-import { PromptEditor, PromptEditorPropsType } from '../prompt-editor';
-import { IFlowValue } from '../../typings';
 
 interface PropsType extends PromptEditorPropsType {
   inputsValues: Record<string, IFlowValue>;

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

@@ -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 { IFlowValue } from '@/typings';
 
 type VariableField = BaseVariableField<{ icon?: string | JSX.Element; title?: string }>;
 

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('');

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

@@ -5,9 +5,10 @@
 
 import React from 'react';
 
+import { PromptEditor, PromptEditorPropsType } from '@/components/prompt-editor';
+
 import { VariableTree } from './extensions/variable-tree';
 import { VariableTagInject } from './extensions/variable-tag';
-import { PromptEditor, PromptEditorPropsType } from '../prompt-editor';
 
 export function PromptEditorWithVariables(props: PromptEditorPropsType) {
   return (

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,
@@ -103,3 +102,6 @@ export function TypeSelector(props: PropTypes) {
     />
   );
 }
+
+TypeSelector.renderKey = 'type-selector-render-key';
+export const InjectTypeSelector = createInjectMaterial(TypeSelector);

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

@@ -6,15 +6,18 @@
 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';
 
-interface PropTypes {
+export interface VariableSelectorProps {
   value?: string[];
   config?: {
     placeholder?: string;
@@ -29,8 +32,6 @@ interface PropTypes {
   triggerRender?: (props: TriggerRenderProps) => React.ReactNode;
 }
 
-export type VariableSelectorProps = PropTypes;
-
 export { useVariableTree };
 
 export const VariableSelector = ({
@@ -43,7 +44,7 @@ export const VariableSelector = ({
   excludeSchema,
   hasError,
   triggerRender,
-}: PropTypes) => {
+}: VariableSelectorProps) => {
   const treeData = useVariableTree({ includeSchema, excludeSchema });
 
   const treeValue = useMemo(() => {
@@ -130,8 +131,11 @@ 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);

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;

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

@@ -11,7 +11,7 @@ import {
   VariableFieldKeyRenameService,
 } from '@flowgram.ai/editor';
 
-import { IFlowRefValue, IFlowTemplateValue } from '../../typings';
+import { IFlowRefValue, IFlowTemplateValue } from '@/typings';
 
 /**
  * Auto rename ref when form item's key is renamed