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

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

@@ -3,17 +3,19 @@
  * 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 { VariableSelector } from '../variable-selector';
+import { TypeSelector } from '../type-selector';
 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 { UIContainer, UIMain, UITrigger, UIType } from './styles';
+import { useIncludeSchema, useRefVariable, useSelectSchema } from './hooks';
 
 interface PropsType {
   value?: IFlowConstantRefValue;
@@ -34,16 +36,53 @@ 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') {
@@ -59,12 +98,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 +135,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

@@ -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/config.json

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

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

@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React from 'react';
+
+import { Button, IconButton } 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';
+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="Input Key"
+            />
+            <DynamicValueInput
+              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 { 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;
+  schema?: IJsonSchema;
+  style?: React.CSSProperties;
+  constantProps?: {
+    strategies?: Strategy[];
+    [key: string]: any;
+  };
+}

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

@@ -5,13 +5,59 @@
 
 import React from 'react';
 
+import { transformerCreator } from '@coze-editor/editor/preset-code';
+import { Text } from '@coze-editor/editor/language-json';
+
 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[] {
+  const globalRegex = new RegExp(
+    regex,
+    regex.flags.includes('g') ? regex.flags : regex.flags + 'g'
+  );
+  let match;
+  const matches: Match[] = [];
+
+  while ((match = globalRegex.exec(inputString)) !== null) {
+    if (match.index === globalRegex.lastIndex) {
+      globalRegex.lastIndex++;
+    }
+    matches.push({
+      match: match[0],
+      range: [match.index, match.index + match[0].length],
+    });
+  }
+
+  return matches;
+}
+
+const transformer = transformerCreator((text: Text) => {
+  const originalSource = text.toString();
+  const matches = findAllMatches(originalSource, /\{\{([^\}]*)\}\}/g);
+
+  if (matches.length > 0) {
+    matches.forEach(({ range }) => {
+      text.replaceRange(range[0], range[1], 'null');
+    });
+  }
+
+  return text;
+});
+
 export function JsonEditorWithVariables(props: Omit<CodeEditorPropsType, 'languageId'>) {
   return (
-    <CodeEditor languageId="json" activeLinePlaceholder="Press '@' to Select variable" {...props}>
+    <CodeEditor
+      languageId="json"
+      activeLinePlaceholder="Press '@' to Select variable"
+      {...props}
+      options={{
+        transformer,
+        ...(props.options || {}),
+      }}
+    >
       <VariableTree />
       <VariableTagInject />
     </CodeEditor>

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

@@ -2,12 +2,12 @@
   "name": "json-schema-editor",
   "depMaterials": [
     "type-selector",
-    "typings/json-schema",
     "constant-inputs"
   ],
   "depPackages": [
     "@douyinfe/semi-ui",
     "@douyinfe/semi-icons",
-    "styled-components"
+    "styled-components",
+    "@flowgram.ai/json-schema"
   ]
 }

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

@@ -5,6 +5,7 @@
 
 import React, { useRef, useState, useCallback } from 'react';
 
+import { IJsonSchema } from '@flowgram.ai/json-schema';
 import { IconButton, JsonViewer, Tooltip } from '@douyinfe/semi-ui';
 import { IconBrackets } from '@douyinfe/semi-icons';
 
@@ -17,7 +18,6 @@ import {
   JSONViewerWrapper,
 } from './styles';
 import { ConstantInput } from '../constant-input';
-import { IJsonSchema } from '../../typings';
 
 /**
  * 根据不同的数据类型渲染对应的默认值输入组件。

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

@@ -5,7 +5,9 @@
 
 import { useEffect, useMemo, useRef, useState } from 'react';
 
-import { IJsonSchema } from '../../typings';
+import { omit } from 'lodash';
+import { IJsonSchema } from '@flowgram.ai/json-schema';
+
 import { PropertyValueType } from './types';
 
 let _id = 0;
@@ -113,7 +115,7 @@ export function usePropertiesEdit(
           continue;
         }
 
-        nextProperties[_property.name] = _property;
+        nextProperties[_property.name] = omit(_property, ['key', 'name', 'isPropertyRequired']);
 
         if (_property.isPropertyRequired) {
           nextRequired.push(_property.name);

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

@@ -5,6 +5,7 @@
 
 import React, { useMemo, useState } from 'react';
 
+import { IJsonSchema } from '@flowgram.ai/json-schema';
 import { Button, Checkbox, IconButton } from '@douyinfe/semi-ui';
 import {
   IconExpand,
@@ -16,7 +17,6 @@ import {
 } from '@douyinfe/semi-icons';
 
 import { TypeSelector } from '../type-selector';
-import { IJsonSchema } from '../../typings';
 import { ConfigType, PropertyValueType } from './types';
 import {
   IconAddChildren,
@@ -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/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/index.tsx

@@ -26,6 +26,7 @@ export function PromptEditor(props: PropsType) {
     style,
     hasError,
     children,
+    disableMarkdownHighlight,
   } = props || {};
 
   const editorRef = useRef<EditorAPI | null>(null);
@@ -58,7 +59,7 @@ export function PromptEditor(props: PropsType) {
         {activeLinePlaceholder && (
           <ActiveLinePlaceholder>{activeLinePlaceholder}</ActiveLinePlaceholder>
         )}
-        <MarkdownHighlight />
+        {!disableMarkdownHighlight && <MarkdownHighlight />}
         <LanguageSupport />
         <JinjaHighlight />
         {children}

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

@@ -14,5 +14,6 @@ export type PropsType = React.PropsWithChildren<{
   hasError?: boolean;
   placeholder?: string;
   activeLinePlaceholder?: string;
+  disableMarkdownHighlight?: boolean;
   style?: React.CSSProperties;
 }>;

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/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/type-selector/config.json

@@ -1,5 +1,9 @@
 {
   "name": "type-selector",
-  "depMaterials": ["typings/json-schema"],
-  "depPackages": ["@douyinfe/semi-ui", "@douyinfe/semi-icons"]
+  "depMaterials": [],
+  "depPackages": [
+    "@douyinfe/semi-ui",
+    "@douyinfe/semi-icons",
+    "@flowgram.ai/json-schema"
+  ]
 }