@flowgram.ai/form-materials 0.2.5 → 0.2.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowgram.ai/form-materials",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "homepage": "https://flowgram.ai/",
   "repository": "https://github.com/bytedance/flowgram.ai",
   "license": "MIT",
@@ -21,16 +21,16 @@
     "src"
   ],
   "dependencies": {
-    "@douyinfe/semi-icons": "^2.72.3",
-    "@douyinfe/semi-illustrations": "^2.36.0",
-    "@douyinfe/semi-ui": "^2.72.3",
+    "@douyinfe/semi-icons": "^2.80.0",
+    "@douyinfe/semi-illustrations": "^2.80.0",
+    "@douyinfe/semi-ui": "^2.80.0",
     "lodash": "^4.17.21",
     "nanoid": "^4.0.2",
     "commander": "^11.0.0",
     "chalk": "^5.3.0",
     "inquirer": "^9.2.7",
     "immer": "~10.1.1",
-    "@flowgram.ai/editor": "0.2.5"
+    "@flowgram.ai/editor": "0.2.7"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.137",
@@ -46,8 +46,8 @@
     "tsup": "^8.0.1",
     "typescript": "^5.0.4",
     "vitest": "^0.34.6",
-    "@flowgram.ai/eslint-config": "0.2.5",
-    "@flowgram.ai/ts-config": "0.2.5"
+    "@flowgram.ai/eslint-config": "0.2.7",
+    "@flowgram.ai/ts-config": "0.2.7"
   },
   "peerDependencies": {
     "react": ">=16.8",

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

@@ -0,0 +1,130 @@
+import React, { useRef, useState, useCallback } from 'react';
+
+import { IconButton, JsonViewer, Tooltip } from '@douyinfe/semi-ui';
+import { IconBrackets } from '@douyinfe/semi-icons';
+
+import { getValueType } from './utils';
+import {
+  ConstantInputWrapper,
+  JSONHeader,
+  JSONHeaderLeft,
+  JSONHeaderRight,
+  JSONViewerWrapper,
+} from './styles';
+import { ConstantInput } from '../constant-input';
+import { IJsonSchema } from '../../typings';
+
+/**
+ * 根据不同的数据类型渲染对应的默认值输入组件。
+ * @param props - 组件属性，包括 value, type, placeholder, onChange。
+ * @returns 返回对应类型的输入组件或 null。
+ */
+export function DefaultValue(props: {
+  value: any;
+  schema?: IJsonSchema;
+  name?: string;
+  type?: string;
+  placeholder?: string;
+  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>
+
+      <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>
+    </>
+  ) : (
+    <ConstantInputWrapper>
+      <ConstantInput
+        value={value}
+        onChange={(_v) => onChange(_v)}
+        schema={schema || { type: 'string' }}
+        placeholder={placeholder ?? 'Default value if parameter is not provided'}
+      />
+    </ConstantInputWrapper>
+  );
+}

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

@@ -29,8 +29,9 @@ import {
   UIType,
 } from './styles';
 import { UIName } from './styles';
-import { UIRow } from './styles';
+import { DefaultValueWrapper, UIRow } from './styles';
 import { usePropertiesEdit } from './hooks';
+import { DefaultValue } from './default-value';
 import { BlurInput } from './components/blur-input';
 
 export function JsonSchemaEditor(props: {
@@ -47,11 +48,12 @@ export function JsonSchemaEditor(props: {
   return (
     <UIContainer>
       <UIProperties>
-        {propertyList.map((_property) => (
+        {propertyList.map((_property, index) => (
           <PropertyEdit
             key={_property.key}
             value={_property}
             config={config}
+            $index={index}
             onChange={(_v) => {
               onEditProperty(_property.key!, _v);
             }}
@@ -74,14 +76,31 @@ function PropertyEdit(props: {
   onChange?: (value: PropertyValueType) => void;
   onRemove?: () => void;
   $isLast?: boolean;
+  $index?: number;
+  $isFirst?: boolean;
+  $parentExpand?: boolean;
+  $parentType?: string;
   $showLine?: boolean;
+  $level?: number; // 添加层级属性
 }) {
-  const { value, config, onChange: onChangeProps, onRemove, $isLast, $showLine } = props;
+  const {
+    value,
+    config,
+    $level = 0,
+    onChange: onChangeProps,
+    onRemove,
+    $index,
+    $isFirst,
+    $isLast,
+    $parentExpand = false,
+    $parentType = '',
+    $showLine,
+  } = props;
 
   const [expand, setExpand] = useState(false);
   const [collapse, setCollapse] = useState(false);
 
-  const { name, type, items, description, isPropertyRequired } = value || {};
+  const { name, type, items, default: defaultValue, description, isPropertyRequired } = value || {};
 
   const typeSelectorValue = useMemo(() => ({ type, items }), [type, items]);
 
@@ -99,7 +118,16 @@ function PropertyEdit(props: {
 
   return (
     <>
-      <UIPropertyLeft $isLast={$isLast} $showLine={$showLine}>
+      <UIPropertyLeft
+        type={type}
+        $index={$index}
+        $isFirst={$isFirst}
+        $isLast={$isLast}
+        $showLine={$showLine}
+        $isExpand={expand}
+        $parentExpand={$parentExpand}
+        $parentType={$parentType}
+      >
         {showCollapse && (
           <UICollapseTrigger onClick={() => setCollapse((_collapse) => !_collapse)}>
             {collapse ? <IconChevronDown size="small" /> : <IconChevronRight size="small" />}
@@ -107,7 +135,12 @@ function PropertyEdit(props: {
         )}
       </UIPropertyLeft>
       <UIPropertyRight>
-        <UIPropertyMain $expand={expand}>
+        <UIPropertyMain
+          $showCollapse={showCollapse}
+          $collapse={collapse}
+          $expand={expand}
+          type={type}
+        >
           <UIRow>
             <UIName>
               <BlurInput
@@ -139,7 +172,9 @@ function PropertyEdit(props: {
                 size="small"
                 theme="borderless"
                 icon={expand ? <IconShrink size="small" /> : <IconExpand size="small" />}
-                onClick={() => setExpand((_expand) => !_expand)}
+                onClick={() => {
+                  setExpand((_expand) => !_expand);
+                }}
               />
               {isDrilldownObject && (
                 <IconButton
@@ -169,6 +204,23 @@ function PropertyEdit(props: {
                 onChange={(value) => onChange('description', value)}
                 placeholder={config?.descPlaceholder ?? 'Help LLM to understand the property'}
               />
+              {$level === 0 && type && type !== 'array' && (
+                <>
+                  <UILabel style={{ marginTop: 10 }}>
+                    {config?.defaultValueTitle ?? 'Default Value'}
+                  </UILabel>
+                  <DefaultValueWrapper>
+                    <DefaultValue
+                      value={defaultValue}
+                      schema={value}
+                      type={type}
+                      placeholder={config?.defaultValuePlaceholder}
+                      jsonFormatText={config?.jsonFormatText}
+                      onChange={(value) => onChange('default', value)}
+                    />
+                  </DefaultValueWrapper>
+                </>
+              )}
             </UIExpandDetail>
           )}
         </UIPropertyMain>
@@ -180,6 +232,9 @@ function PropertyEdit(props: {
                   key={_property.key}
                   value={_property}
                   config={config}
+                  $level={$level + 1} // 传递递增的层级
+                  $parentExpand={expand}
+                  $parentType={type}
                   onChange={(_v) => {
                     onEditProperty(_property.key!, _v);
                   }}
@@ -187,6 +242,8 @@ function PropertyEdit(props: {
                     onRemoveProperty(_property.key!);
                   }}
                   $isLast={index === propertyList.length - 1}
+                  $isFirst={index === 0}
+                  $index={index}
                   $showLine={true}
                 />
               ))}

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

@@ -46,37 +46,55 @@ export const UIProperties = styled.div<{ $shrink?: boolean }>`
     `}
 `;
 
-export const UIPropertyLeft = styled.div<{ $isLast?: boolean; $showLine?: boolean }>`
+export const UIPropertyLeft = styled.div<{
+  $isLast?: boolean;
+  $showLine?: boolean;
+  $isExpand?: boolean;
+  type?: string;
+  $isFirst?: boolean;
+  $index?: number;
+  $parentExpand?: boolean;
+  $parentType?: string;
+}>`
   grid-column: 1;
   position: relative;
-
-  ${({ $showLine, $isLast }) =>
-    $showLine &&
-    css`
-      &::before {
-        /* 竖线 */
-        content: '';
-        position: absolute;
-        left: -22px;
-        top: -18px;
-        bottom: ${$isLast ? '12px' : '0px'};
-        width: 1px;
-        background: #d9d9d9;
-        display: block;
-      }
-
-      &::after {
-        /* 横线 */
-        content: '';
-        position: absolute;
-        left: -22px; // 横线起点和竖线对齐
-        top: 12px; // 跟随你的行高调整
-        width: 22px; // 横线长度
-        height: 1px;
-        background: #d9d9d9;
-        display: block;
-      }
-    `}
+  width: 16px;
+
+  ${({ $showLine, $isLast, $parentType }) => {
+    let height = '100%';
+    if ($parentType && $isLast) {
+      height = '24px';
+    }
+
+    return (
+      $showLine &&
+      css`
+        &::before {
+          /* 竖线 */
+          content: '';
+          height: ${height};
+          position: absolute;
+          left: -22px;
+          top: -16px;
+          width: 1px;
+          background: #d9d9d9;
+          display: block;
+        }
+
+        &::after {
+          /* 横线 */
+          content: '';
+          position: absolute;
+          left: -22px; // 横线起点和竖线对齐
+          top: 8px; // 跟随你的行高调整
+          width: 18px; // 横线长度
+          height: 1px;
+          background: #d9d9d9;
+          display: block;
+        }
+      `
+    );
+  }}
 `;
 
 export const UIPropertyRight = styled.div`
@@ -88,18 +106,47 @@ export const UIPropertyRight = styled.div`
   }
 `;
 
-export const UIPropertyMain = styled.div<{ $expand?: boolean }>`
+export const UIPropertyMain = styled.div<{
+  $expand?: boolean;
+  type?: string;
+  $collapse?: boolean;
+  $showCollapse?: boolean;
+}>`
   display: flex;
   flex-direction: column;
   gap: 10px;
+  position: relative;
 
-  ${({ $expand }) =>
-    $expand &&
-    css`
-      background-color: #f5f5f5;
-      padding: 10px;
-      border-radius: 4px;
-    `}
+  ${({ $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 }>`
@@ -143,3 +190,46 @@ const iconAddChildrenSvg = (
 );
 
 export const IconAddChildren = () => <Icon size="small" svg={iconAddChildrenSvg} />;
+
+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;
+
+  & .semi-tree-select,
+  & .semi-input-number,
+  & .semi-select {
+    width: 100%;
+  }
+`;

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

@@ -14,5 +14,8 @@ export interface ConfigType {
   placeholder?: string;
   descTitle?: string;
   descPlaceholder?: string;
+  defaultValueTitle?: string;
+  defaultValuePlaceholder?: string;
   addButtonText?: string;
+  jsonFormatText?: string;
 }

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

@@ -0,0 +1,24 @@
+/**
+ * Return the corresponding string description according to the type of the input value.根据输入值的类型返回对应的字符串描述。
+ * @param value - 需要判断类型的值。The value whose type needs to be judged.
+ * @returns 返回值的类型字符串 The type string of the return value（'string', 'integer', 'number', 'boolean', 'object', 'array', 'other'）。
+ */
+export function getValueType(value: any): string {
+  const type = typeof value;
+
+  if (type === 'string') {
+    return 'string';
+  } else if (type === 'number') {
+    return Number.isInteger(value) ? 'integer' : 'number';
+  } else if (type === 'boolean') {
+    return 'boolean';
+  } else if (type === 'object') {
+    if (value === null) {
+      return 'other';
+    }
+    return Array.isArray(value) ? 'array' : 'object';
+  } else {
+    // undefined, function, symbol, bigint etc.
+    return 'other';
+  }
+}

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

@@ -27,7 +27,7 @@ export type VariableSelectorProps = PropTypes;
 
 export const VariableSelector = ({
   value,
-  config,
+  config = {},
   onChange,
   style,
   readonly = false,