@flowgram.ai/form-materials 0.2.27 → 0.2.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowgram.ai/form-materials",
-  "version": "0.2.27",
+  "version": "0.2.29",
   "homepage": "https://flowgram.ai/",
   "repository": "https://github.com/bytedance/flowgram.ai",
   "license": "MIT",
@@ -33,7 +33,8 @@
     "@coze-editor/editor": "0.1.0-alpha.879fbb",
     "@codemirror/view": "~6.38.0",
     "@codemirror/state": "~6.5.2",
-    "@flowgram.ai/editor": "0.2.27"
+    "typescript": "^5.8.3",
+    "@flowgram.ai/editor": "0.2.29"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.137",
@@ -47,10 +48,10 @@
     "react-dom": "^18",
     "styled-components": "^5",
     "tsup": "^8.0.1",
-    "typescript": "^5.0.4",
+    "typescript": "^5.8.3",
     "vitest": "^0.34.6",
-    "@flowgram.ai/eslint-config": "0.2.27",
-    "@flowgram.ai/ts-config": "0.2.27"
+    "@flowgram.ai/eslint-config": "0.2.29",
+    "@flowgram.ai/ts-config": "0.2.29"
   },
   "peerDependencies": {
     "react": ">=16.8",

package/src/components/batch-outputs/config.json

@@ -2,7 +2,8 @@
   "name": "batch-outputs",
   "depMaterials": [
     "flow-value",
-    "variable-selector"
+    "variable-selector",
+    "use-object-list"
   ],
   "depPackages": [
     "@douyinfe/semi-ui",

package/src/components/batch-outputs/index.tsx

@@ -8,15 +8,15 @@ import React from 'react';
 import { Button, Input } from '@douyinfe/semi-ui';
 import { IconDelete, IconPlus } from '@douyinfe/semi-icons';
 
-import { useList } from './use-list';
 import { PropsType } from './types';
 import { VariableSelector } from '../variable-selector';
+import { useObjectList } from '../../hooks';
 import { UIRow, UIRows } from './styles';
 
 export function BatchOutputs(props: PropsType) {
   const { readonly, style } = props;
 
-  const { list, add, update, remove } = useList(props);
+  const { list, add, updateKey, updateValue, remove } = useObjectList(props);
 
   return (
     <div>
@@ -28,21 +28,13 @@ export function BatchOutputs(props: PropsType) {
               disabled={readonly}
               size="small"
               value={item.key}
-              onChange={(v) => update({ ...item, key: v })}
+              onChange={(v) => updateKey(item.id, v)}
             />
             <VariableSelector
               style={{ flexGrow: 1 }}
               readonly={readonly}
               value={item.value?.content}
-              onChange={(v) =>
-                update({
-                  ...item,
-                  value: {
-                    type: 'ref',
-                    content: v,
-                  },
-                })
-              }
+              onChange={(v) => updateValue(item.id, { type: 'ref', content: v })}
             />
             <Button
               disabled={readonly}

package/src/components/code-editor/config.json

@@ -4,6 +4,7 @@
   "depPackages": [
     "@coze-editor/editor@0.1.0-alpha.879fbb",
     "@codemirror/view",
-    "@codemirror/state"
+    "@codemirror/state",
+    "typescript"
   ]
 }

package/src/components/code-editor/language-features.ts

@@ -4,14 +4,15 @@
  */
 
 import { languages } from '@coze-editor/editor/preset-code';
-// import { typescript } from '@coze-editor/editor/language-typescript';
+import { typescript } from '@coze-editor/editor/language-typescript';
 import { shell } from '@coze-editor/editor/language-shell';
 import { python } from '@coze-editor/editor/language-python';
 import { json } from '@coze-editor/editor/language-json';
 import { mixLanguages } from '@coze-editor/editor';
 
 languages.register('python', python);
-// languages.register('typescript', typescript);
+languages.register('typescript', typescript);
+languages.register('shell', shell);
 
 languages.register('json', {
   // mixLanguages is used to solve the problem that interpolation also uses parentheses, which causes incorrect highlighting
@@ -20,5 +21,3 @@ languages.register('json', {
   }),
   languageService: json.languageService,
 });
-
-languages.register('shell', shell);

package/src/components/constant-input/index.tsx

@@ -65,10 +65,19 @@ const defaultStrategies: Strategy[] = [
 ];
 
 export function ConstantInput(props: PropsType) {
-  const { value, onChange, schema, strategies: extraStrategies, readonly, ...rest } = props;
+  const {
+    value,
+    onChange,
+    schema,
+    strategies: extraStrategies,
+    fallbackRenderer,
+    readonly,
+    ...rest
+  } = props;
 
   const strategies = useMemo(
-    () => [...defaultStrategies, ...(extraStrategies || [])],
+    // user's extraStrategies first
+    () => [...(extraStrategies || []), ...defaultStrategies],
     [extraStrategies]
   );
 
@@ -79,6 +88,14 @@ export function ConstantInput(props: PropsType) {
   }, [strategies, schema]);
 
   if (!Renderer) {
+    if (fallbackRenderer) {
+      return React.createElement(fallbackRenderer, {
+        value,
+        onChange,
+        readonly,
+        ...rest,
+      });
+    }
     return <Input size="small" disabled placeholder="Unsupported type" />;
   }
 

package/src/components/constant-input/types.ts

@@ -19,5 +19,6 @@ export interface RendererProps<Value = any> {
 export interface PropsType extends RendererProps {
   schema: IJsonSchema;
   strategies?: Strategy[];
+  fallbackRenderer?: React.FC<RendererProps>;
   [key: string]: any;
 }

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

@@ -3,16 +3,19 @@
  * SPDX-License-Identifier: MIT
  */
 
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 
+import { useScopeAvailable } from '@flowgram.ai/editor';
 import { IconButton } from '@douyinfe/semi-ui';
 import { IconSetting } from '@douyinfe/semi-icons';
 
 import { Strategy } from '../constant-input/types';
 import { ConstantInput } from '../constant-input';
+import { JsonSchemaUtils } from '../../utils';
 import { IFlowConstantRefValue } from '../../typings/flow-value';
-import { UIContainer, UIMain, UITrigger } from './styles';
+import { UIContainer, UIMain, UITrigger, UIType } from './styles';
 import { VariableSelector } from '../variable-selector';
+import { TypeSelector } from '../type-selector';
 import { IJsonSchema } from '../../typings';
 
 interface PropsType {
@@ -34,16 +37,50 @@ export function DynamicValueInput({
   onChange,
   readonly,
   style,
-  schema,
+  schema: schemaFromProps,
   constantProps,
 }: PropsType) {
+  const available = useScopeAvailable();
+  const refVariable = useMemo(() => {
+    if (value?.type === 'ref') {
+      return available.getByKeyPath(value.content);
+    }
+  }, [value, available]);
+
+  const [selectSchema, setSelectSchema] = useState(
+    schemaFromProps || constantProps?.schema || { type: 'string' }
+  );
+
+  const renderTypeSelector = () => {
+    if (schemaFromProps) {
+      return <TypeSelector value={schemaFromProps} readonly={true} />;
+    }
+
+    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' })}
+        readonly={readonly}
+      />
+    );
+  };
+
   // When is number type, include integer as well
   const includeSchema = useMemo(() => {
-    if (schema?.type === 'number') {
-      return [schema, { type: 'integer' }];
+    if (!schemaFromProps) {
+      return;
     }
-    return schema;
-  }, [schema]);
+    if (schemaFromProps?.type === 'number') {
+      return [schemaFromProps, { type: 'integer' }];
+    }
+    return { ...schemaFromProps, extra: { ...schemaFromProps?.extra, weak: true } };
+  }, [schemaFromProps]);
 
   const renderMain = () => {
     if (value?.type === 'ref') {
@@ -59,12 +96,23 @@ 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={() => (
+          <VariableSelector
+            style={{ width: '100%' }}
+            onChange={(_v) => onChange(_v ? { type: 'ref', content: _v } : undefined)}
+            includeSchema={includeSchema}
+            readonly={readonly}
+          />
+        )}
         {...constantProps}
       />
     );
@@ -85,6 +133,7 @@ export function DynamicValueInput({
 
   return (
     <UIContainer style={style}>
+      <UIType>{renderTypeSelector()}</UIType>
       <UIMain>{renderMain()}</UIMain>
       <UITrigger>{renderTrigger()}</UITrigger>
     </UIContainer>

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

@@ -16,3 +16,4 @@ export * from './prompt-editor-with-variables';
 export * from './prompt-editor-with-inputs';
 export * from './code-editor';
 export * from './json-editor-with-variables';
+export * from './inputs-values';

package/src/components/inputs-values/config.json

@@ -0,0 +1,12 @@
+{
+  "name": "inputs-values",
+  "depMaterials": [
+    "flow-value",
+    "dynamic-value-input"
+  ],
+  "depPackages": [
+    "@douyinfe/semi-ui",
+    "@douyinfe/semi-icons",
+    "styled-components"
+  ]
+}

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

@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React from 'react';
+
+import { Button, IconButton, Input } from '@douyinfe/semi-ui';
+import { IconDelete, IconPlus } from '@douyinfe/semi-icons';
+
+import { PropsType } from './types';
+import { DynamicValueInput } from '../dynamic-value-input';
+import { IFlowConstantRefValue, IFlowValue } from '../../typings';
+import { useObjectList } from '../../hooks';
+import { UIRow, UIRows } from './styles';
+
+export function InputsValues({ value, onChange, style, readonly, constantProps }: PropsType) {
+  const { list, updateKey, updateValue, remove, add } = useObjectList<IFlowValue | undefined>({
+    value,
+    onChange,
+  });
+
+  return (
+    <div>
+      <UIRows style={style}>
+        {list.map((item) => (
+          <UIRow key={item.id}>
+            <Input
+              style={{ width: 100, minWidth: 100, maxWidth: 100 }}
+              disabled={readonly}
+              size="small"
+              value={item.key}
+              onChange={(v) => updateKey(item.id, v)}
+            />
+            <DynamicValueInput
+              style={{ flexGrow: 1 }}
+              readonly={readonly}
+              value={item.value as IFlowConstantRefValue}
+              onChange={(v) => updateValue(item.id, v)}
+              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,19 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { Strategy } from '../constant-input/types';
+import { IFlowValue } from '../../typings';
+
+export interface PropsType {
+  value?: Record<string, IFlowValue | undefined>;
+  onChange: (value?: Record<string, IFlowValue | undefined>) => void;
+  readonly?: boolean;
+  hasError?: boolean;
+  style?: React.CSSProperties;
+  constantProps?: {
+    strategies?: Strategy[];
+    [key: string]: any;
+  };
+}

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

@@ -44,8 +44,9 @@ export function JsonSchemaEditor(props: {
   onChange?: (value: IJsonSchema) => void;
   config?: ConfigType;
   className?: string;
+  readonly?: boolean;
 }) {
-  const { value = { type: 'object' }, config = {}, onChange: onChangeProps } = props;
+  const { value = { type: 'object' }, config = {}, onChange: onChangeProps, readonly } = props;
   const { propertyList, onAddProperty, onRemoveProperty, onEditProperty } = usePropertiesEdit(
     value,
     onChangeProps
@@ -56,6 +57,7 @@ export function JsonSchemaEditor(props: {
       <UIProperties>
         {propertyList.map((_property, index) => (
           <PropertyEdit
+            readonly={readonly}
             key={_property.key}
             value={_property}
             config={config}
@@ -70,6 +72,7 @@ export function JsonSchemaEditor(props: {
         ))}
       </UIProperties>
       <Button
+        disabled={readonly}
         size="small"
         style={{ marginTop: 10, marginLeft: 16 }}
         icon={<IconPlus />}
@@ -86,6 +89,7 @@ function PropertyEdit(props: {
   config?: ConfigType;
   onChange?: (value: PropertyValueType) => void;
   onRemove?: () => void;
+  readonly?: boolean;
   $isLast?: boolean;
   $index?: number;
   $isFirst?: boolean;
@@ -97,6 +101,7 @@ function PropertyEdit(props: {
   const {
     value,
     config,
+    readonly,
     $level = 0,
     onChange: onChangeProps,
     onRemove,
@@ -155,6 +160,7 @@ function PropertyEdit(props: {
           <UIRow>
             <UIName>
               <BlurInput
+                disabled={readonly}
                 placeholder={config?.placeholder ?? 'Input Variable Name'}
                 size="small"
                 value={name}
@@ -164,6 +170,7 @@ function PropertyEdit(props: {
             <UIType>
               <TypeSelector
                 value={typeSelectorValue}
+                readonly={readonly}
                 onChange={(_value) => {
                   onChangeProps?.({
                     ...(value || {}),
@@ -174,12 +181,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" />}
@@ -189,6 +198,7 @@ function PropertyEdit(props: {
               />
               {isDrilldownObject && (
                 <IconButton
+                  disabled={readonly}
                   size="small"
                   theme="borderless"
                   icon={<IconAddChildren />}
@@ -199,6 +209,7 @@ function PropertyEdit(props: {
                 />
               )}
               <IconButton
+                disabled={readonly}
                 size="small"
                 theme="borderless"
                 icon={<IconMinus size="small" />}
@@ -210,6 +221,7 @@ function PropertyEdit(props: {
             <UIExpandDetail>
               <UILabel>{config?.descTitle ?? 'Description'}</UILabel>
               <BlurInput
+                disabled={readonly}
                 size="small"
                 value={description}
                 onChange={(value) => onChange('description', value)}
@@ -240,6 +252,7 @@ function PropertyEdit(props: {
             <UIProperties $shrink={true}>
               {propertyList.map((_property, index) => (
                 <PropertyEdit
+                  readonly={readonly}
                   key={_property.key}
                   value={_property}
                   config={config}

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

@@ -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/type-selector/index.tsx

@@ -5,14 +5,18 @@
 
 import React, { useMemo } from 'react';
 
-import { Button, Cascader } from '@douyinfe/semi-ui';
+import { Cascader, IconButton } from '@douyinfe/semi-ui';
 
 import { IJsonSchema } from '../../typings';
 import { ArrayIcons, VariableTypeIcons, getSchemaIcon, options } from './constants';
 
 interface PropTypes {
   value?: Partial<IJsonSchema>;
-  onChange: (value?: Partial<IJsonSchema>) => void;
+  onChange?: (value?: Partial<IJsonSchema>) => void;
+  readonly?: boolean;
+  /**
+   * @deprecated use readonly instead
+   */
   disabled?: boolean;
   style?: React.CSSProperties;
 }
@@ -36,24 +40,27 @@ export const parseTypeSelectValue = (value?: string[]): Partial<IJsonSchema> | u
 };
 
 export function TypeSelector(props: PropTypes) {
-  const { value, onChange, disabled, style } = props;
+  const { value, onChange, readonly, disabled, style } = props;
 
   const selectValue = useMemo(() => getTypeSelectValue(value), [value]);
 
   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={getSchemaIcon(value)}
+        />
       )}
       treeData={options}
       value={selectValue}
       leafOnly={true}
       onChange={(value) => {
-        onChange(parseTypeSelectValue(value as string[]));
+        onChange?.(parseTypeSelectValue(value as string[]));
       }}
     />
   );

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

@@ -7,11 +7,12 @@ import React, { useMemo } from 'react';
 
 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 { IJsonSchema } from '../../typings/json-schema';
 import { useVariableTree } from './use-variable-tree';
-import { UIRootTitle, UITag, UITreeSelect, UIVarName } from './styles';
+import { UIPopoverContent, UIRootTitle, UITag, UITreeSelect, UIVarName } from './styles';
 
 interface PropTypes {
   value?: string[];
@@ -93,17 +94,35 @@ export const VariableSelector = ({
             );
           }
 
+          const rootIcon = renderIcon(_option.rootMeta?.icon || _option?.icon);
+
+          const rootTitle = (
+            <UIRootTitle>
+              {_option.rootMeta?.title ? `${_option.rootMeta?.title} -` : null}
+            </UIRootTitle>
+          );
+
           return (
-            <UITag
-              prefixIcon={renderIcon(_option.rootMeta?.icon || _option?.icon)}
-              closable={!readonly}
-              onClose={() => onChange(undefined)}
-            >
-              <UIRootTitle>
-                {_option.rootMeta?.title ? `${_option.rootMeta?.title} -` : null}
-              </UIRootTitle>
-              <UIVarName>{_option.label}</UIVarName>
-            </UITag>
+            <div>
+              <Popover
+                content={
+                  <UIPopoverContent>
+                    {rootIcon}
+                    {rootTitle}
+                    <UIVarName>{_option.keyPath.slice(1).join('.')}</UIVarName>
+                  </UIPopoverContent>
+                }
+              >
+                <UITag
+                  prefixIcon={rootIcon}
+                  closable={!readonly}
+                  onClose={() => onChange(undefined)}
+                >
+                  {rootTitle}
+                  <UIVarName $inSelector>{_option.label}</UIVarName>
+                </UITag>
+              </Popover>
+            </div>
           );
         }}
         showClear={false}