@flowgram.ai/form-materials 0.4.0 → 0.4.2

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

@@ -0,0 +1,128 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React from 'react';
+
+import styled, { css } from 'styled-components';
+import Icon from '@douyinfe/semi-icons';
+
+export const UIContainer = styled.div``;
+
+export const UIRow = styled.div`
+  display: flex;
+  align-items: flex-start;
+  gap: 5px;
+`;
+
+export const UICollapseTrigger = styled.div`
+  cursor: pointer;
+  margin-right: 5px;
+`;
+
+export const UITreeItems = styled.div<{ $shrink?: boolean }>`
+  display: grid;
+  grid-template-columns: auto 1fr;
+
+  ${({ $shrink }) =>
+    $shrink &&
+    css`
+      padding-left: 3px;
+      margin-top: 10px;
+    `}
+`;
+
+export const UITreeItemLeft = styled.div<{
+  $isLast?: boolean;
+  $showLine?: boolean;
+  $showCollapse?: boolean;
+}>`
+  grid-column: 1;
+  position: relative;
+  width: 16px;
+
+  ${({ $showLine, $isLast, $showCollapse }) => {
+    let height = $isLast ? '24px' : '100%';
+    let width = $showCollapse ? '12px' : '30px';
+
+    return (
+      $showLine &&
+      css`
+        &::before {
+          /* 竖线 */
+          content: '';
+          height: ${height};
+          position: absolute;
+          left: -14px;
+          top: -16px;
+          width: 1px;
+          background: #d9d9d9;
+          display: block;
+        }
+
+        &::after {
+          /* 横线 */
+          content: '';
+          position: absolute;
+          left: -14px; // 横线起点和竖线对齐
+          top: 8px; // 跟随你的行高调整
+          width: ${width}; // 横线长度
+          height: 1px;
+          background: #d9d9d9;
+          display: block;
+        }
+      `
+    );
+  }}
+`;
+
+export const UITreeItemRight = styled.div`
+  grid-column: 2;
+  margin-bottom: 10px;
+
+  &:last-child {
+    margin-bottom: 0px;
+  }
+`;
+
+export const UITreeItemMain = styled.div<{}>`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  position: relative;
+`;
+
+export const UICollapsible = styled.div<{ $collapse?: boolean }>`
+  display: none;
+
+  ${({ $collapse }) =>
+    $collapse &&
+    css`
+      display: block;
+    `}
+`;
+
+export const UIActions = styled.div`
+  white-space: nowrap;
+`;
+
+const iconAddChildrenSvg = (
+  <svg
+    className="icon-icon icon-icon-coz_add_node "
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M11 6.49988C11 8.64148 9.50397 10.4337 7.49995 10.8884V15.4998C7.49995 16.0521 7.94767 16.4998 8.49995 16.4998H11.208C11.0742 16.8061 11 17.1443 11 17.4998C11 17.8554 11.0742 18.1936 11.208 18.4998H8.49995C6.8431 18.4998 5.49995 17.1567 5.49995 15.4998V10.8884C3.49599 10.4336 2 8.64145 2 6.49988C2 4.0146 4.01472 1.99988 6.5 1.99988C8.98528 1.99988 11 4.0146 11 6.49988ZM6.5 8.99988C7.88071 8.99988 9 7.88059 9 6.49988C9 5.11917 7.88071 3.99988 6.5 3.99988C5.11929 3.99988 4 5.11917 4 6.49988C4 7.88059 5.11929 8.99988 6.5 8.99988Z"
+    ></path>
+    <path d="M17.5 12.4999C18.0523 12.4999 18.5 12.9476 18.5 13.4999V16.4999H21.5C22.0523 16.4999 22.5 16.9476 22.5 17.4999C22.5 18.0522 22.0523 18.4999 21.5 18.4999H18.5V21.4999C18.5 22.0522 18.0523 22.4999 17.5 22.4999C16.9477 22.4999 16.5 22.0522 16.5 21.4999V18.4999H13.5C12.9477 18.4999 12.5 18.0522 12.5 17.4999C12.5 16.9476 12.9477 16.4999 13.5 16.4999H16.5V13.4999C16.5 12.9476 16.9477 12.4999 17.5 12.4999Z"></path>
+  </svg>
+);
+
+export const IconAddChildren = () => <Icon size="small" svg={iconAddChildrenSvg} />;

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

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

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

@@ -20,10 +20,7 @@ import { ConstantInputWrapper } from './styles';
 export function DefaultValue(props: {
   value: any;
   schema?: IJsonSchema;
-  name?: string;
-  type?: string;
   placeholder?: string;
-  jsonFormatText?: string;
   onChange: (value: any) => void;
 }) {
   const { value, schema, onChange, placeholder } = props;
@@ -35,6 +32,7 @@ export function DefaultValue(props: {
         onChange={(_v) => onChange(_v)}
         schema={schema || { type: 'string' }}
         placeholder={placeholder ?? I18n.t('Default value if parameter is not provided')}
+        enableMultiLineStr
       />
     </ConstantInputWrapper>
   );

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

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import { difference, omit } from 'lodash';
 import { produce } from 'immer';
@@ -28,7 +28,16 @@ export function usePropertiesEdit(
 
   const [propertyList, setPropertyList] = useState<PropertyValueType[]>([]);
 
+  const effectVersion = useRef(0);
+  const changeVersion = useRef(0);
+
   useEffect(() => {
+    effectVersion.current = effectVersion.current + 1;
+    if (effectVersion.current === changeVersion.current) {
+      return;
+    }
+    effectVersion.current = changeVersion.current;
+
     // If the value is changed, update the property list
     setPropertyList((_list) => {
       const newNames = Object.entries(drilldownSchema?.properties || {})
@@ -44,7 +53,7 @@ export function usePropertiesEdit(
           key: item.key,
           name: item.name,
           isPropertyRequired: drilldownSchema?.required?.includes(item.name || '') || false,
-          ...item,
+          ...(drilldownSchema?.properties?.[item.name || ''] || item || {}),
         }))
         .concat(
           addNames.map((_name) => ({
@@ -58,6 +67,8 @@ export function usePropertiesEdit(
   }, [drilldownSchema]);
 
   const updatePropertyList = (updater: (list: PropertyValueType[]) => PropertyValueType[]) => {
+    changeVersion.current = changeVersion.current + 1;
+
     setPropertyList((_list) => {
       const next = updater(_list);
 

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

@@ -18,6 +18,7 @@ import {
 } from '@douyinfe/semi-icons';
 
 import { InjectTypeSelector } from '@/components/type-selector';
+import { BlurInput } from '@/components/blur-input';
 
 import { ConfigType, PropertyValueType } from './types';
 import {
@@ -28,10 +29,10 @@ import {
   UIContainer,
   UIExpandDetail,
   UILabel,
-  UIProperties,
-  UIPropertyLeft,
-  UIPropertyMain,
-  UIPropertyRight,
+  UITreeItems,
+  UITreeItemLeft,
+  UITreeItemMain,
+  UITreeItemRight,
   UIRequired,
   UIType,
 } from './styles';
@@ -39,7 +40,6 @@ import { UIName } from './styles';
 import { DefaultValueWrapper, UIRow } from './styles';
 import { usePropertiesEdit } from './hooks';
 import { DefaultValue } from './default-value';
-import { BlurInput } from './components/blur-input';
 
 const DEFAULT = { type: 'object' };
 
@@ -58,14 +58,13 @@ export function JsonSchemaEditor(props: {
 
   return (
     <UIContainer className={props.className}>
-      <UIProperties>
-        {propertyList.map((_property, index) => (
+      <UITreeItems>
+        {propertyList.map((_property) => (
           <PropertyEdit
             readonly={readonly}
             key={_property.key}
             value={_property}
             config={config}
-            $index={index}
             onChange={(_v) => {
               onEditProperty(_property.key!, _v);
             }}
@@ -74,7 +73,7 @@ export function JsonSchemaEditor(props: {
             }}
           />
         ))}
-      </UIProperties>
+      </UITreeItems>
       <Button
         disabled={readonly}
         size="small"
@@ -95,27 +94,9 @@ function PropertyEdit(props: {
   onRemove?: () => void;
   readonly?: boolean;
   $isLast?: boolean;
-  $index?: number;
-  $isFirst?: boolean;
-  $parentExpand?: boolean;
-  $parentType?: string;
-  $showLine?: boolean;
   $level?: number; // 添加层级属性
 }) {
-  const {
-    value,
-    config,
-    readonly,
-    $level = 0,
-    onChange: onChangeProps,
-    onRemove,
-    $index,
-    $isFirst,
-    $isLast,
-    $parentExpand = false,
-    $parentType = '',
-    $showLine,
-  } = props;
+  const { value, config, readonly, $level = 0, onChange: onChangeProps, onRemove, $isLast } = props;
 
   const [expand, setExpand] = useState(false);
   const [collapse, setCollapse] = useState(false);
@@ -138,29 +119,15 @@ function PropertyEdit(props: {
 
   return (
     <>
-      <UIPropertyLeft
-        type={type}
-        $index={$index}
-        $isFirst={$isFirst}
-        $isLast={$isLast}
-        $showLine={$showLine}
-        $isExpand={expand}
-        $parentExpand={$parentExpand}
-        $parentType={$parentType}
-      >
+      <UITreeItemLeft $isLast={$isLast} $showLine={$level > 0} $showCollapse={showCollapse}>
         {showCollapse && (
           <UICollapseTrigger onClick={() => setCollapse((_collapse) => !_collapse)}>
             {collapse ? <IconChevronDown size="small" /> : <IconChevronRight size="small" />}
           </UICollapseTrigger>
         )}
-      </UIPropertyLeft>
-      <UIPropertyRight>
-        <UIPropertyMain
-          $showCollapse={showCollapse}
-          $collapse={collapse}
-          $expand={expand}
-          type={type}
-        >
+      </UITreeItemLeft>
+      <UITreeItemRight>
+        <UITreeItemMain>
           <UIRow>
             <UIName>
               <BlurInput
@@ -242,9 +209,7 @@ function PropertyEdit(props: {
                     <DefaultValue
                       value={defaultValue}
                       schema={value}
-                      type={type}
                       placeholder={config?.defaultValuePlaceholder ?? I18n.t('Default Value')}
-                      jsonFormatText={config?.jsonFormatText}
                       onChange={(value) => onChange('default', value)}
                     />
                   </DefaultValueWrapper>
@@ -252,10 +217,10 @@ function PropertyEdit(props: {
               )}
             </UIExpandDetail>
           )}
-        </UIPropertyMain>
+        </UITreeItemMain>
         {showCollapse && (
           <UICollapsible $collapse={collapse}>
-            <UIProperties $shrink={true}>
+            <UITreeItems $shrink={true}>
               {propertyList.map((_property, index) => (
                 <PropertyEdit
                   readonly={readonly}
@@ -263,8 +228,6 @@ function PropertyEdit(props: {
                   value={_property}
                   config={config}
                   $level={$level + 1} // 传递递增的层级
-                  $parentExpand={expand}
-                  $parentType={type}
                   onChange={(_v) => {
                     onEditProperty(_property.key!, _v);
                   }}
@@ -272,15 +235,12 @@ function PropertyEdit(props: {
                     onRemoveProperty(_property.key!);
                   }}
                   $isLast={index === propertyList.length - 1}
-                  $isFirst={index === 0}
-                  $index={index}
-                  $showLine={true}
                 />
               ))}
-            </UIProperties>
+            </UITreeItems>
           </UICollapsible>
         )}
-      </UIPropertyRight>
+      </UITreeItemRight>
     </>
   );
 }

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

@@ -39,37 +39,30 @@ export const UILabel = styled.div`
   margin-bottom: 2px;
 `;
 
-export const UIProperties = styled.div<{ $shrink?: boolean }>`
+export const UITreeItems = styled.div<{ $shrink?: boolean }>`
   display: grid;
   grid-template-columns: auto 1fr;
 
   ${({ $shrink }) =>
     $shrink &&
     css`
-      padding-left: 10px;
+      padding-left: 3px;
       margin-top: 10px;
     `}
 `;
 
-export const UIPropertyLeft = styled.div<{
+export const UITreeItemLeft = styled.div<{
   $isLast?: boolean;
   $showLine?: boolean;
-  $isExpand?: boolean;
-  type?: string;
-  $isFirst?: boolean;
-  $index?: number;
-  $parentExpand?: boolean;
-  $parentType?: string;
+  $showCollapse?: boolean;
 }>`
   grid-column: 1;
   position: relative;
   width: 16px;
 
-  ${({ $showLine, $isLast, $parentType }) => {
-    let height = '100%';
-    if ($parentType && $isLast) {
-      height = '24px';
-    }
+  ${({ $showLine, $isLast, $showCollapse }) => {
+    let height = $isLast ? '24px' : '100%';
+    let width = $showCollapse ? '12px' : '30px';
 
     return (
       $showLine &&
@@ -79,7 +72,7 @@ export const UIPropertyLeft = styled.div<{
           content: '';
           height: ${height};
           position: absolute;
-          left: -22px;
+          left: -14px;
           top: -16px;
           width: 1px;
           background: #d9d9d9;
@@ -90,9 +83,9 @@ export const UIPropertyLeft = styled.div<{
           /* 横线 */
           content: '';
           position: absolute;
-          left: -22px; // 横线起点和竖线对齐
+          left: -14px; // 横线起点和竖线对齐
           top: 8px; // 跟随你的行高调整
-          width: 18px; // 横线长度
+          width: ${width}; // 横线长度
           height: 1px;
           background: #d9d9d9;
           display: block;
@@ -102,7 +95,7 @@ export const UIPropertyLeft = styled.div<{
   }}
 `;
 
-export const UIPropertyRight = styled.div`
+export const UITreeItemRight = styled.div`
   grid-column: 2;
   margin-bottom: 10px;
 
@@ -111,47 +104,11 @@ export const UIPropertyRight = styled.div`
   }
 `;
 
-export const UIPropertyMain = styled.div<{
-  $expand?: boolean;
-  type?: string;
-  $collapse?: boolean;
-  $showCollapse?: boolean;
-}>`
+export const UITreeItemMain = styled.div<{}>`
   display: flex;
   flex-direction: column;
   gap: 10px;
   position: relative;
-
-  ${({ $expand, type, $collapse, $showCollapse }) => {
-    const beforeElement = `
-      &::before {
-        /* 竖线 */
-        content: '';
-        height: 100%;
-        position: absolute;
-        left: -12px;
-        top: 18px;
-        width: 1px;
-        background: #d9d9d9;
-        display: block;
-      }`;
-
-    return (
-      $expand &&
-      css`
-        background-color: #f5f5f5;
-        padding: 10px;
-        border-radius: 4px;
-
-        ${$showCollapse &&
-        $collapse &&
-        (type === 'array' || type === 'object') &&
-        css`
-          ${beforeElement}
-        `}
-      `
-    );
-  }}
 `;
 
 export const UICollapsible = styled.div<{ $collapse?: boolean }>`

package/src/components/json-schema-editor/types.ts

@@ -22,5 +22,4 @@ export interface ConfigType {
   defaultValueTitle?: string;
   defaultValuePlaceholder?: string;
   addButtonText?: string;
-  jsonFormatText?: string;
 }

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

@@ -5,7 +5,7 @@
 
 import React, { useEffect, useRef } from 'react';
 
-import { Renderer, EditorProvider, ActiveLinePlaceholder } from '@coze-editor/editor/react';
+import { Renderer, EditorProvider, ActiveLinePlaceholder, InferValues } from '@coze-editor/editor/react';
 import preset, { EditorAPI } from '@coze-editor/editor/preset-prompt';
 
 import { PropsType } from './types';
@@ -14,9 +14,14 @@ import MarkdownHighlight from './extensions/markdown';
 import LanguageSupport from './extensions/language-support';
 import JinjaHighlight from './extensions/jinja';
 
-export type PromptEditorPropsType = PropsType;
+type Preset = typeof preset;
+type Options = Partial<InferValues<Preset[number]>>;
 
-export function PromptEditor(props: PropsType) {
+export interface PromptEditorPropsType extends PropsType {
+  options?: Options;
+}
+
+export function PromptEditor(props: PromptEditorPropsType) {
   const {
     value,
     onChange,
@@ -27,6 +32,7 @@ export function PromptEditor(props: PropsType) {
     hasError,
     children,
     disableMarkdownHighlight,
+    options,
   } = props || {};
 
   const editorRef = useRef<EditorAPI | null>(null);
@@ -51,6 +57,7 @@ export function PromptEditor(props: PropsType) {
             readOnly: readonly,
             editable: !readonly,
             placeholder,
+            ...options
           }}
           onChange={(e) => {
             onChange({ type: 'template', content: e.value });

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

@@ -3,7 +3,6 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { isArray, isObject, uniq } from 'lodash';
 import {
   DataEvent,
   Effect,
@@ -12,6 +11,7 @@ import {
 } from '@flowgram.ai/editor';
 
 import { IFlowRefValue, IFlowTemplateValue } from '@/typings';
+import { FlowValueUtils } from '@/shared';
 
 /**
  * Auto rename ref when form item's key is renamed
@@ -52,7 +52,7 @@ export const autoRenameRefEffect: EffectOptions[] = [
             }
           } else if (_v.type === 'template') {
             // template auto rename
-            const templateKeyPaths = getTemplateKeyPaths(_v);
+            const templateKeyPaths = FlowValueUtils.getTemplateKeyPaths(_v);
             let hasMatch = false;
 
             templateKeyPaths.forEach((_keyPath) => {
@@ -93,34 +93,6 @@ function isKeyPathMatch(keyPath: string[] = [], targetKeyPath: string[]) {
   return targetKeyPath.every((_key, index) => _key === keyPath[index]);
 }
 
-/**
- * get template key paths
- * @param value
- * @returns
- */
-function getTemplateKeyPaths(value: IFlowTemplateValue) {
-  // find all keyPath wrapped in {{}}
-  const keyPathReg = /{{(.*?)}}/g;
-  return uniq(value.content?.match(keyPathReg) || []).map((_keyPath) =>
-    _keyPath.slice(2, -2).split('.')
-  );
-}
-
-/**
- * If value is ref
- * @param value
- * @returns
- */
-function isRef(value: any): value is IFlowRefValue {
-  return (
-    value?.type === 'ref' && Array.isArray(value?.content) && typeof value?.content[0] === 'string'
-  );
-}
-
-function isTemplate(value: any): value is IFlowTemplateValue {
-  return value?.type === 'template' && typeof value?.content === 'string';
-}
-
 /**
  * Traverse value to find ref
  * @param value
@@ -132,29 +104,10 @@ function traverseRef(
   value: any,
   cb: (name: string, _v: IFlowRefValue | IFlowTemplateValue) => void
 ) {
-  if (isObject(value)) {
-    if (isRef(value)) {
-      cb(name, value);
-      return;
-    }
-
-    if (isTemplate(value)) {
-      cb(name, value);
-      return;
-    }
-
-    Object.entries(value).forEach(([_key, _value]) => {
-      traverseRef(`${name}.${_key}`, _value, cb);
-    });
-    return;
-  }
-
-  if (isArray(value)) {
-    value.forEach((_value, idx) => {
-      traverseRef(`${name}[${idx}]`, _value, cb);
-    });
-    return;
+  for (const { value: _v, path } of FlowValueUtils.traverse(value, {
+    includeTypes: ['ref', 'template'],
+    path: name,
+  })) {
+    cb(path, _v as IFlowRefValue | IFlowTemplateValue);
   }
-
-  return;
 }