@flowgram.ai/form-materials 0.1.0-alpha.11 → 0.1.0-alpha.13

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

@@ -3,11 +3,12 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useState } from 'react';
 
-import { omit } from 'lodash';
+import { difference, omit } from 'lodash';
+import { produce } from 'immer';
+import { IJsonSchema, type JsonSchemaTypeManager, useTypeManager } from '@flowgram.ai/json-schema';
 
-import { IJsonSchema } from '../../typings';
 import { PropertyValueType } from './types';
 
 let _id = 0;
@@ -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

@@ -5,6 +5,8 @@
 
 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,
@@ -15,8 +17,8 @@ import {
   IconMinus,
 } from '@douyinfe/semi-icons';
 
-import { TypeSelector } from '../type-selector';
-import { IJsonSchema } from '../../typings';
+import { InjectTypeSelector } from '@/components/type-selector';
+
 import { ConfigType, PropertyValueType } from './types';
 import {
   IconAddChildren,
@@ -39,13 +41,16 @@ 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;
   config?: ConfigType;
   className?: string;
+  readonly?: boolean;
 }) {
-  const { value = { type: 'object' }, config = {}, onChange: onChangeProps } = props;
+  const { value = DEFAULT, config = {}, onChange: onChangeProps, readonly } = props;
   const { propertyList, onAddProperty, onRemoveProperty, onEditProperty } = usePropertiesEdit(
     value,
     onChangeProps
@@ -56,6 +61,7 @@ export function JsonSchemaEditor(props: {
       <UIProperties>
         {propertyList.map((_property, index) => (
           <PropertyEdit
+            readonly={readonly}
             key={_property.key}
             value={_property}
             config={config}
@@ -70,12 +76,13 @@ export function JsonSchemaEditor(props: {
         ))}
       </UIProperties>
       <Button
+        disabled={readonly}
         size="small"
         style={{ marginTop: 10, marginLeft: 16 }}
         icon={<IconPlus />}
         onClick={onAddProperty}
       >
-        {config?.addButtonText ?? 'Add'}
+        {config?.addButtonText ?? I18n.t('Add')}
       </Button>
     </UIContainer>
   );
@@ -86,6 +93,7 @@ function PropertyEdit(props: {
   config?: ConfigType;
   onChange?: (value: PropertyValueType) => void;
   onRemove?: () => void;
+  readonly?: boolean;
   $isLast?: boolean;
   $index?: number;
   $isFirst?: boolean;
@@ -97,6 +105,7 @@ function PropertyEdit(props: {
   const {
     value,
     config,
+    readonly,
     $level = 0,
     onChange: onChangeProps,
     onRemove,
@@ -115,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) => {
@@ -125,7 +134,7 @@ function PropertyEdit(props: {
     });
   };
 
-  const showCollapse = isDrilldownObject && propertyList.length > 0;
+  const showCollapse = canAddField && propertyList.length > 0;
 
   return (
     <>
@@ -155,6 +164,7 @@ function PropertyEdit(props: {
           <UIRow>
             <UIName>
               <BlurInput
+                disabled={readonly}
                 placeholder={config?.placeholder ?? 'Input Variable Name'}
                 size="small"
                 value={name}
@@ -162,8 +172,9 @@ function PropertyEdit(props: {
               />
             </UIName>
             <UIType>
-              <TypeSelector
+              <InjectTypeSelector
                 value={typeSelectorValue}
+                readonly={readonly}
                 onChange={(_value) => {
                   onChangeProps?.({
                     ...(value || {}),
@@ -174,12 +185,14 @@ function PropertyEdit(props: {
             </UIType>
             <UIRequired>
               <Checkbox
+                disabled={readonly}
                 checked={isPropertyRequired}
                 onChange={(e) => onChange('isPropertyRequired', e.target.checked)}
               />
             </UIRequired>
             <UIActions>
               <IconButton
+                disabled={readonly}
                 size="small"
                 theme="borderless"
                 icon={expand ? <IconShrink size="small" /> : <IconExpand size="small" />}
@@ -187,8 +200,9 @@ function PropertyEdit(props: {
                   setExpand((_expand) => !_expand);
                 }}
               />
-              {isDrilldownObject && (
+              {canAddField && (
                 <IconButton
+                  disabled={readonly}
                   size="small"
                   theme="borderless"
                   icon={<IconAddChildren />}
@@ -199,6 +213,7 @@ function PropertyEdit(props: {
                 />
               )}
               <IconButton
+                disabled={readonly}
                 size="small"
                 theme="borderless"
                 icon={<IconMinus size="small" />}
@@ -208,24 +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)}
                     />
@@ -240,6 +258,7 @@ function PropertyEdit(props: {
             <UIProperties $shrink={true}>
               {propertyList.map((_property, index) => (
                 <PropertyEdit
+                  readonly={readonly}
                   key={_property.key}
                   value={_property}
                   config={config}

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/json-schema-editor/types.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { IJsonSchema } from '../../typings';
+import { IJsonSchema } from '@flowgram.ai/json-schema';
 
 export interface PropertyValueType extends IJsonSchema {
   name?: string;

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 }>;
 
@@ -79,7 +79,7 @@ export function InputsPicker({
   const treeData: TreeNodeData[] = useMemo(
     () =>
       Object.entries(inputsValues).map(([key, value]) => {
-        if (value.type === 'ref') {
+        if (value?.type === 'ref') {
           const variable = available.getByKeyPath(value.content || []);
 
           if (variable) {

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/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

@@ -5,18 +5,25 @@
 
 import React, { useMemo } from 'react';
 
-import { Button, Cascader } from '@douyinfe/semi-ui';
+import { IJsonSchema } from '@flowgram.ai/json-schema';
+import { Cascader, Icon, IconButton } from '@douyinfe/semi-ui';
 
-import { IJsonSchema } from '../../typings';
-import { ArrayIcons, VariableTypeIcons, getSchemaIcon, options } from './constants';
+import { createInjectMaterial } from '@/shared/inject-material';
+import { useTypeManager } from '@/plugins';
 
-interface PropTypes {
+export interface TypeSelectorProps {
   value?: Partial<IJsonSchema>;
-  onChange: (value?: Partial<IJsonSchema>) => void;
+  onChange?: (value?: Partial<IJsonSchema>) => void;
+  readonly?: boolean;
+  /**
+   * @deprecated use readonly instead
+   */
   disabled?: boolean;
   style?: React.CSSProperties;
 }
 
+const labelStyle: React.CSSProperties = { display: 'flex', alignItems: 'center', gap: 5 };
+
 export const getTypeSelectValue = (value?: Partial<IJsonSchema>): string[] | undefined => {
   if (value?.type === 'array' && value?.items) {
     return [value.type, ...(getTypeSelectValue(value.items) || [])];
@@ -35,28 +42,66 @@ export const parseTypeSelectValue = (value?: string[]): Partial<IJsonSchema> | u
   return { type };
 };
 
-export function TypeSelector(props: PropTypes) {
-  const { value, onChange, disabled, style } = props;
+export function TypeSelector(props: TypeSelectorProps) {
+  const { value, onChange, readonly, disabled, style } = props;
 
   const selectValue = useMemo(() => getTypeSelectValue(value), [value]);
 
+  const typeManager = useTypeManager();
+
+  const icon = typeManager.getDisplayIcon(value || {});
+
+  const options = useMemo(
+    () =>
+      typeManager.getTypeRegistriesWithParentType().map((_type) => {
+        const isArray = _type.type === 'array';
+
+        return {
+          label: (
+            <div style={labelStyle}>
+              <Icon size="small" svg={_type.icon} />
+              {typeManager.getTypeBySchema(_type)?.label || _type.type}
+            </div>
+          ),
+          value: _type.type,
+          children: isArray
+            ? typeManager.getTypeRegistriesWithParentType('array').map((_type) => ({
+                label: (
+                  <div style={labelStyle}>
+                    <Icon
+                      size="small"
+                      svg={typeManager.getDisplayIcon({
+                        type: 'array',
+                        items: { type: _type.type },
+                      })}
+                    />
+                    {typeManager.getTypeBySchema(_type)?.label || _type.type}
+                  </div>
+                ),
+                value: _type.type,
+              }))
+            : [],
+        };
+      }),
+    []
+  );
+
   return (
     <Cascader
-      disabled={disabled}
+      disabled={readonly || disabled}
       size="small"
       triggerRender={() => (
-        <Button size="small" style={style}>
-          {getSchemaIcon(value)}
-        </Button>
+        <IconButton size="small" style={style} disabled={readonly || disabled} icon={icon} />
       )}
       treeData={options}
       value={selectValue}
       leafOnly={true}
       onChange={(value) => {
-        onChange(parseTypeSelectValue(value as string[]));
+        onChange?.(parseTypeSelectValue(value as string[]));
       }}
     />
   );
 }
 
-export { VariableTypeIcons, ArrayIcons, getSchemaIcon };
+TypeSelector.renderKey = 'type-selector-render-key';
+export const InjectTypeSelector = createInjectMaterial(TypeSelector);