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

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

@@ -3,17 +3,20 @@
  * SPDX-License-Identifier: MIT
  */
 
-import React, { useMemo } from 'react';
+import React from 'react';
 
+import { JsonSchemaUtils, IJsonSchema } from '@flowgram.ai/json-schema';
 import { IconButton } from '@douyinfe/semi-ui';
 import { IconSetting } from '@douyinfe/semi-icons';
 
-import { Strategy } from '../constant-input/types';
-import { ConstantInput } from '../constant-input';
-import { IFlowConstantRefValue } from '../../typings/flow-value';
-import { UIContainer, UIMain, UITrigger } from './styles';
-import { VariableSelector } from '../variable-selector';
-import { IJsonSchema } from '../../typings';
+import { IFlowConstantRefValue } from '@/typings/flow-value';
+import { createInjectMaterial } from '@/shared';
+import { InjectVariableSelector } from '@/components/variable-selector';
+import { TypeSelector } from '@/components/type-selector';
+import { ConstantInput, ConstantInputStrategy } from '@/components/constant-input';
+
+import { UIContainer, UIMain, UITrigger, UIType } from './styles';
+import { useIncludeSchema, useRefVariable, useSelectSchema } from './hooks';
 
 interface PropsType {
   value?: IFlowConstantRefValue;
@@ -23,7 +26,7 @@ interface PropsType {
   style?: React.CSSProperties;
   schema?: IJsonSchema;
   constantProps?: {
-    strategies?: Strategy[];
+    strategies?: ConstantInputStrategy[];
     schema?: IJsonSchema; // set schema of constant input only
     [key: string]: any;
   };
@@ -34,22 +37,59 @@ export function DynamicValueInput({
   onChange,
   readonly,
   style,
-  schema,
+  schema: schemaFromProps,
   constantProps,
 }: PropsType) {
-  // When is number type, include integer as well
-  const includeSchema = useMemo(() => {
-    if (schema?.type === 'number') {
-      return [schema, { type: 'integer' }];
+  const refVariable = useRefVariable(value);
+  const [selectSchema, setSelectSchema] = useSelectSchema(schemaFromProps, constantProps, value);
+  const includeSchema = useIncludeSchema(schemaFromProps);
+
+  const renderTypeSelector = () => {
+    if (schemaFromProps) {
+      return <TypeSelector value={schemaFromProps} readonly={true} />;
     }
-    return schema;
-  }, [schema]);
+
+    if (value?.type === 'ref') {
+      const schema = refVariable?.type ? JsonSchemaUtils.astToSchema(refVariable?.type) : undefined;
+
+      return <TypeSelector value={schema} readonly={true} />;
+    }
+
+    return (
+      <TypeSelector
+        value={selectSchema}
+        onChange={(_v) => {
+          setSelectSchema(_v || { type: 'string' });
+          let content;
+
+          if (_v?.type === 'object') {
+            content = '{}';
+          }
+
+          if (_v?.type === 'array') {
+            content = '[]';
+          }
+
+          if (_v?.type === 'boolean') {
+            content = false;
+          }
+
+          onChange({
+            type: 'constant',
+            content,
+            schema: _v || { type: 'string' },
+          });
+        }}
+        readonly={readonly}
+      />
+    );
+  };
 
   const renderMain = () => {
     if (value?.type === 'ref') {
       // Display Variable Or Delete
       return (
-        <VariableSelector
+        <InjectVariableSelector
           style={{ width: '100%' }}
           value={value?.content}
           onChange={(_v) => onChange(_v ? { type: 'ref', content: _v } : undefined)}
@@ -59,19 +99,30 @@ export function DynamicValueInput({
       );
     }
 
+    const constantSchema = schemaFromProps || selectSchema || { type: 'string' };
+
     return (
       <ConstantInput
         value={value?.content}
-        onChange={(_v) => onChange({ type: 'constant', content: _v })}
-        schema={schema || { type: 'string' }}
+        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)}
+            includeSchema={includeSchema}
+            readonly={readonly}
+          />
+        )}
         {...constantProps}
       />
     );
   };
 
   const renderTrigger = () => (
-    <VariableSelector
+    <InjectVariableSelector
       style={{ width: '100%' }}
       value={value?.type === 'ref' ? value?.content : undefined}
       onChange={(_v) => onChange({ type: 'ref', content: _v })}
@@ -85,8 +136,12 @@ export function DynamicValueInput({
 
   return (
     <UIContainer style={style}>
+      <UIType>{renderTypeSelector()}</UIType>
       <UIMain>{renderMain()}</UIMain>
       <UITrigger>{renderTrigger()}</UITrigger>
     </UIContainer>
   );
 }
+
+DynamicValueInput.renderKey = 'dynamic-value-input-render-key';
+export const InjectDynamicValueInput = createInjectMaterial(DynamicValueInput);

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

@@ -8,7 +8,12 @@ import styled from 'styled-components';
 export const UIContainer = styled.div`
   display: flex;
   align-items: center;
-  gap: 5px;
+  border-radius: 4px;
+  border: 1px solid var(--semi-color-border);
+
+  overflow: hidden;
+
+  background-color: var(--semi-color-fill-0);
 `;
 
 export const UIMain = styled.div`
@@ -20,7 +25,28 @@ export const UIMain = styled.div`
   & .semi-input-number,
   & .semi-select {
     width: 100%;
+    border: none;
+    border-radius: 0;
+  }
+
+  & .semi-input-wrapper {
+    border: none;
+    border-radius: 0;
+  }
+`;
+
+export const UIType = styled.div`
+  border-right: 1px solid #e5e5e5;
+
+  & .semi-button {
+    border-radius: 0;
   }
 `;
 
-export const UITrigger = styled.div``;
+export const UITrigger = styled.div`
+  border-left: 1px solid #e5e5e5;
+
+  & .semi-button {
+    border-radius: 0;
+  }
+`;

package/src/components/index.ts

@@ -15,4 +15,13 @@ export * from './prompt-editor';
 export * from './prompt-editor-with-variables';
 export * from './prompt-editor-with-inputs';
 export * from './code-editor';
+export * from './code-editor-mini';
 export * from './json-editor-with-variables';
+export * from './inputs-values';
+export * from './display-schema-tree';
+export * from './display-outputs';
+export * from './display-schema-tag';
+export * from './display-flow-value';
+export * from './display-inputs-values';
+export * from './assign-rows';
+export * from './assign-row';

package/src/components/inputs-values/components/blur-input.tsx

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React, { useEffect, useState } from 'react';
+
+import Input, { InputProps } from '@douyinfe/semi-ui/lib/es/input';
+
+export function BlurInput(props: InputProps) {
+  const [value, setValue] = useState('');
+
+  useEffect(() => {
+    setValue(props.value as string);
+  }, [props.value]);
+
+  return (
+    <Input
+      {...props}
+      value={value}
+      onChange={(value) => {
+        setValue(value);
+      }}
+      onBlur={(e) => props.onChange?.(value, e)}
+    />
+  );
+}

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

@@ -0,0 +1,75 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React from 'react';
+
+import { I18n } from '@flowgram.ai/editor';
+import { Button, IconButton } from '@douyinfe/semi-ui';
+import { IconDelete, IconPlus } from '@douyinfe/semi-icons';
+
+import { IFlowConstantRefValue, IFlowValue } from '@/typings';
+import { useObjectList } from '@/hooks';
+import { InjectDynamicValueInput } from '@/components/dynamic-value-input';
+
+import { PropsType } from './types';
+import { UIRow, UIRows } from './styles';
+import { BlurInput } from './components/blur-input';
+
+export function InputsValues({
+  value,
+  onChange,
+  style,
+  readonly,
+  constantProps,
+  schema,
+  hasError,
+}: PropsType) {
+  const { list, updateKey, updateValue, remove, add } = useObjectList<IFlowValue | undefined>({
+    value,
+    onChange,
+    sortIndexKey: 'extra.index',
+  });
+
+  return (
+    <div>
+      <UIRows style={style}>
+        {list.map((item) => (
+          <UIRow key={item.id}>
+            <BlurInput
+              style={{ width: 100, minWidth: 100, maxWidth: 100 }}
+              disabled={readonly}
+              size="small"
+              value={item.key}
+              onChange={(v) => updateKey(item.id, v)}
+              placeholder={I18n.t('Input Key')}
+            />
+            <InjectDynamicValueInput
+              style={{ flexGrow: 1 }}
+              readonly={readonly}
+              value={item.value as IFlowConstantRefValue}
+              onChange={(v) => updateValue(item.id, v)}
+              schema={schema}
+              hasError={hasError}
+              constantProps={{
+                ...constantProps,
+                strategies: [...(constantProps?.strategies || [])],
+              }}
+            />
+            <IconButton
+              disabled={readonly}
+              theme="borderless"
+              icon={<IconDelete size="small" />}
+              size="small"
+              onClick={() => remove(item.id)}
+            />
+          </UIRow>
+        ))}
+      </UIRows>
+      <Button disabled={readonly} icon={<IconPlus />} size="small" onClick={add}>
+        Add
+      </Button>
+    </div>
+  );
+}

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

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import styled from 'styled-components';
+
+export const UIRows = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 10px;
+`;
+
+export const UIRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 5px;
+`;

package/src/components/inputs-values/types.ts

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { IJsonSchema } from '@flowgram.ai/json-schema';
+
+import { IFlowValue } from '@/typings';
+import { ConstantInputStrategy } from '@/components/constant-input';
+
+export interface PropsType {
+  value?: Record<string, IFlowValue | undefined>;
+  onChange: (value?: Record<string, IFlowValue | undefined>) => void;
+  readonly?: boolean;
+  hasError?: boolean;
+  schema?: IJsonSchema;
+  style?: React.CSSProperties;
+  constantProps?: {
+    strategies?: ConstantInputStrategy[];
+    [key: string]: any;
+  };
+}

package/src/components/json-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/json-editor-with-variables/index.tsx

@@ -8,9 +8,10 @@ import React from 'react';
 import { transformerCreator } from '@coze-editor/editor/preset-code';
 import { Text } from '@coze-editor/editor/language-json';
 
+import { CodeEditor, type CodeEditorPropsType } from '@/components/code-editor';
+
 import { VariableTree } from './extensions/variable-tree';
 import { VariableTagInject } from './extensions/variable-tag';
-import { CodeEditor, type CodeEditorPropsType } from '../code-editor';
 
 type Match = { match: string; range: [number, number] };
 function findAllMatches(inputString: string, regex: RegExp): Match[] {

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 { IconButton, JsonViewer, Tooltip } from '@douyinfe/semi-ui';
-import { IconBrackets } from '@douyinfe/semi-icons';
+import { IJsonSchema } from '@flowgram.ai/json-schema';
+import { I18n } from '@flowgram.ai/editor';
 
-import { getValueType } from './utils';
-import {
-  ConstantInputWrapper,
-  JSONHeader,
-  JSONHeaderLeft,
-  JSONHeaderRight,
-  JSONViewerWrapper,
-} from './styles';
-import { ConstantInput } from '../constant-input';
-import { IJsonSchema } from '../../typings';
+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>
   );