@alicloud/appflow-chat 0.0.1-beta.2 → 0.0.1-beta.4

package/dist/types/index.d.ts

@@ -1,6 +1,21 @@
 import { default as default_2 } from 'react';
 import { Provider } from 'react';
 
+/**
+ * AssociationPropertyMetadata 类型定义
+ * 包含枚举、时间、文件等扩展属性的元数据
+ */
+declare interface AssociationPropertyMetadata {
+    /** 子类型（用于 time 和 file 类型），现在是数组 */
+    SubType?: (TimeSubType | FileSubType)[];
+    /** 枚举值 */
+    EnumValues?: (string | number | boolean)[];
+    /** 枚举展示样式 */
+    EnumDisplayStyle?: EnumDisplayStyle;
+}
+
+declare type BasicParamType = 'string' | 'number' | 'boolean';
+
 /**
  * BubbleContent - 消息气泡核心展示组件
  *
@@ -213,6 +228,8 @@ export declare interface ChatStreamCallbacks {
     onError?: (error: Error) => void;
 }
 
+declare type ComplexParamType = 'array' | 'object';
+
 /**
  * 将后端返回的小写 schema 转换为组件需要的大写格式
  * @param schema 后端返回的 schema（小写字段名）
@@ -230,6 +247,18 @@ export declare interface CustomParamSchema {
     Required?: string[];
     Properties?: Record<string, CustomParamSchema>;
     Items?: CustomParamSchema;
+    order?: number;
+    Order?: string | number;
+    AssociationPropertyMetadata?: AssociationPropertyMetadata;
+    AssociationProperty?: string;
+    /** @deprecated 使用 AssociationPropertyMetadata.SubType 代替 */
+    TimeSubType?: TimeSubType;
+    /** @deprecated 使用 AssociationPropertyMetadata.SubType 代替 */
+    FileSubType?: FileSubType;
+    /** @deprecated 使用 AssociationPropertyMetadata.EnumValues 代替 */
+    EnumValues?: string[];
+    /** @deprecated 使用 AssociationPropertyMetadata.EnumDisplayStyle 代替 */
+    EnumDisplayStyle?: EnumDisplayStyle;
 }
 
 /**
@@ -244,6 +273,9 @@ export declare interface CustomParamSchema {
  *     name: { Type: 'string', Title: '名称', Description: '请输入名称' },
  *     age: { Type: 'number', Title: '年龄' },
  *     enabled: { Type: 'boolean', Title: '是否启用' },
+ *     date: { Type: 'time', Title: '日期', TimeSubType: 'year-month-day' },
+ *     file: { Type: 'file', Title: '文件', FileSubType: 'image' },
+ *     status: { Type: 'string', Title: '状态', EnumValues: ['active', 'inactive'], EnumDisplayStyle: 'radio' },
  *     tags: {
  *       Type: 'array',
  *       Title: '标签',
@@ -273,7 +305,7 @@ export declare const CustomParamsRenderer: default_2.FC<CustomParamsRendererProp
 /**
  * CustomParamsRenderer 组件的 Props
  */
-export declare interface CustomParamsRendererProps {
+export declare interface CustomParamsRendererProps extends UploadConfig {
     /** CustomParams 的 schema */
     schema: CustomParamSchema;
     /** 表单值 */
@@ -323,18 +355,21 @@ export declare interface DocReferencesProps {
     style?: default_2.CSSProperties;
 }
 
+declare type EnumDisplayStyle = 'select' | 'checkbox' | 'radio' | 'multi-select';
+
+declare type ExtendedParamType = 'time' | 'file';
+
+declare type FileSubType = 'default' | 'jpg' | 'png' | 'svg' | 'doc' | 'ppt' | 'excel' | 'txt' | 'markdown' | 'zip';
+
+/**
+ * 文件上传方法类型
+ * 用于实际执行文件上传到 OSS
+ */
+declare type FileUploader = (file: Blob, uploadUrl: string) => Promise<void>;
+
 /**
  * HistoryCard 历史卡片组件 (SDK 版本)
  * 用于展示历史对话中的 card 类型消息（只读模式）
- *
- * @example
- * ```tsx
- * <HistoryCard
- *   approvalStatus="approved"
- *   formValues={{ name: 'test', age: 18 }}
- *   formSchema={schema}
- * />
- * ```
  */
 export declare const HistoryCard: default_2.FC<HistoryCardProps>;
 
@@ -346,12 +381,8 @@ export declare interface HistoryCardData {
 }
 
 export declare interface HistoryCardProps {
-    /** 审批状态 */
-    approvalStatus?: string;
-    /** 表单值 */
-    formValues?: Record<string, any>;
-    /** 表单 Schema */
-    formSchema?: CustomParamSchema;
+    /** 消息数据对象 */
+    data: any;
 }
 
 export declare interface HistoryMessage {
@@ -371,30 +402,6 @@ export declare interface HistoryMessage {
 /**
  * HumanVerify 人工审核组件 (SDK 版本)
  * 用于展示需要人工审核的表单，并处理提交逻辑
- *
- * @example
- * ```tsx
- * <HumanVerify
- *   verifyId="xxx"
- *   sessionWebhook="https://..."
- *   approved={false}
- *   customParamsSchema={schema}
- *   customParamsKey="customParams"
- *   onSubmit={(data) => {
- *     bot.postMessage({
- *       msgType: 'cardCallBack',
- *       data: {
- *         sessionWebhook: data.sessionWebhook,
- *         content: JSON.stringify({
- *           verifyId: data.verifyId,
- *           status: data.status,
- *           [data.customParamsKey]: data.customParamsValue,
- *         }),
- *       },
- *     });
- *   }}
- * />
- * ```
  */
 export declare const HumanVerify: default_2.FC<HumanVerifyProps>;
 
@@ -408,16 +415,12 @@ export declare interface HumanVerifyData {
 }
 
 export declare interface HumanVerifyProps {
-    /** 验证ID */
-    verifyId?: string;
-    /** 会话 Webhook */
-    sessionWebhook?: string;
-    /** 是否已提交 */
-    approved?: boolean;
-    /** CustomParams 的 schema */
-    customParamsSchema?: CustomParamSchema;
-    /** CustomParams 的 key（用于提交时的字段名） */
-    customParamsKey?: string;
+    /** 消息数据对象 */
+    data: any;
+    /** 上传发送方法 */
+    uploadSender?: UploadSender;
+    /** 文件上传方法 */
+    fileUploader?: FileUploader;
     /** 提交回调函数 */
     onSubmit?: (data: {
         verifyId: string;
@@ -443,6 +446,8 @@ export declare interface HumanVerifySubmitData {
  */
 export declare const loadEchartsScript: () => Promise<void>;
 
+export declare const loadMermaidScript: () => Promise<void>;
+
 /**
  * MarkdownRenderer - Markdown渲染组件
  *
@@ -558,7 +563,7 @@ export declare interface ModelInfo {
     };
 }
 
-declare type ParamType = 'string' | 'number' | 'boolean' | 'array' | 'object';
+declare type ParamType = BasicParamType | ComplexParamType | ExtendedParamType;
 
 /**
  * RichBubbleContent - 富文本消息气泡核心展示组件
@@ -737,6 +742,36 @@ export declare interface SourceItem {
     index_id?: string;
 }
 
+declare type TimeSubType = 'year-month' | 'year-month-day' | 'datetime';
+
+/**
+ * 上传配置
+ */
+declare interface UploadConfig {
+    /** 上传发送方法 */
+    uploadSender?: UploadSender;
+    /** 文件上传方法 */
+    fileUploader?: FileUploader;
+}
+
+/**
+ * 上传请求参数
+ */
+declare interface UploadRequestParams {
+    /** 事件类型：uploadToken-获取上传凭证，uploadFile-获取文件ID */
+    eventType: 'uploadToken' | 'uploadFile';
+    /** 文件名 */
+    fileName: string;
+    /** 文件下载 URL（uploadFile 时需要） */
+    content?: string;
+}
+
+/**
+ * 上传发送方法类型
+ * 用于发送上传相关的事件请求
+ */
+declare type UploadSender = (params: UploadRequestParams) => Promise<string | null>;
+
 /**
  * 使用 CustomParamsRenderer 的 Hook
  * 提供表单值管理和校验功能

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alicloud/appflow-chat",
-  "version": "0.0.1-beta.2",
+  "version": "0.0.1-beta.4",
   "description": "Appflow-Chat AI聊天机器人组件库，提供聊天服务和UI组件",
   "type": "module",
   "main": "./dist/appflow-chat.cjs.js",

package/src/components/HumanVerify/CustomParamsRenderer/ArrayField.tsx

@@ -1,12 +1,18 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo, useRef } from 'react';
 import { Button, Input, InputNumber, Switch, Space } from 'antd';
 import { PlusOutlined, MinusOutlined } from '@ant-design/icons';
+import { ArrayFieldProps, CustomParamSchema, FileSubType, sortPropertiesByOrder } from './types';
 import styled from 'styled-components';
-import { ArrayFieldProps, CustomParamSchema } from './types';
+
+// 图片类型列表
+const IMAGE_TYPES: FileSubType[] = ['jpg', 'png', 'svg'];
 
 // 前向声明，避免循环依赖
 const FieldRenderer = React.lazy(() => import('./FieldRenderer'));
 
+// 全局计数器，用于生成稳定的数组项 key
+let globalItemCounter = 0;
+
 // ==================== Styled Components ====================
 
 const ArrayFieldContainer = styled.div`
@@ -104,6 +110,37 @@ const ArrayActions = styled.div`
   gap: 8px;
 `;
 
+// 复杂类型变体
+type ComplexItemVariant = 'fileImage' | 'fileDoc' | 'time' | 'enum';
+
+// 复杂类型数组项行
+const ArrayItemRowComplex = styled.div`
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  margin-bottom: 8px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+`;
+
+// 复杂类型的 Actions 容器，根据变体调整 padding-top
+const ArrayItemActionsComplex = styled.div<{ $variant?: ComplexItemVariant }>`
+  flex-shrink: 0;
+  padding-top: ${({ $variant }) => {
+    switch ($variant) {
+      case 'fileDoc':
+      case 'time':
+      case 'enum':
+        return '4px';
+      case 'fileImage':
+      default:
+        return '38px';
+    }
+  }};
+`;
+
 /**
  * 获取数组项的默认值
  */
@@ -149,6 +186,8 @@ export const ArrayField: React.FC<ArrayFieldProps> = ({
   level = 0,
   errors = {},
   fieldPath = '',
+  uploadSender,
+  fileUploader,
 }) => {
   const { Title, Description, Items } = schema;
   const displayTitle = Title || name;
@@ -156,11 +195,39 @@ export const ArrayField: React.FC<ArrayFieldProps> = ({
   // 计算当前数组的完整路径
   const currentPath = fieldPath ? `${fieldPath}.${name}` : name;
 
+  // 使用 ref 来存储每个数组项的唯一 key，避免在数据中添加额外字段
+  const itemKeysRef = useRef<Map<number, string>>(new Map());
+  
+  // 获取或创建数组项的唯一 key
+  const getItemKey = useCallback((index: number, item: any): string => {
+    // 如果 item 有 url 或 uid，优先使用（已上传的文件）
+    if (item?.url) return item.url;
+    if (item?.uid) return item.uid;
+    if (item?.__arrayItemId) return item.__arrayItemId;
+    
+    // 否则使用 ref 中存储的 key
+    if (!itemKeysRef.current.has(index)) {
+      itemKeysRef.current.set(index, `item-${++globalItemCounter}`);
+    }
+    return itemKeysRef.current.get(index)!;
+  }, []);
+
   // 添加数组项
   const handleAdd = useCallback(() => {
     if (!Items) return;
     const newItem = getDefaultValue(Items);
-    onChange?.([...value, newItem]);
+    const newIndex = value.length;
+    
+    // 为新项预先生成 key
+    itemKeysRef.current.set(newIndex, `item-${++globalItemCounter}`);
+    
+    // 对于 object 类型，添加 __arrayItemId；对于其他类型，保持原值
+    if (typeof newItem === 'object' && newItem !== null) {
+      onChange?.([...value, { ...newItem, __arrayItemId: itemKeysRef.current.get(newIndex) }]);
+    } else {
+      // 对于 file、time 等类型，保持 undefined，不要包装成对象
+      onChange?.([...value, newItem]);
+    }
   }, [Items, value, onChange]);
 
   // 删除数组项
@@ -196,9 +263,35 @@ export const ArrayField: React.FC<ArrayFieldProps> = ({
     [value, onChange]
   );
 
+  // 判断数组项是否有枚举值（从 AssociationPropertyMetadata 或旧字段读取）
+  const hasItemEnumValues = (Items?.AssociationPropertyMetadata?.EnumValues?.length ?? 0) > 0 || 
+    (Array.isArray(Items?.EnumValues) && Items.EnumValues.length > 0);
+  
   // 判断数组项类型（必须在 early return 之前）
   const isObjectItems = Items?.Type === 'object' && Items?.Properties;
   const isArrayItems = Items?.Type === 'array';
+  const isFileItems = Items?.Type === 'file';
+  const isTimeItems = Items?.Type === 'time';
+  // 需要使用 FieldRenderer 渲染的复杂类型
+  const needsFieldRenderer = isObjectItems || isArrayItems || isFileItems || isTimeItems || hasItemEnumValues;
+
+  // 判断文件类型是否为图片类型
+  const isImageFileType = useMemo((): boolean => {
+    if (!isFileItems) return false;
+    
+    // 优先从 AssociationPropertyMetadata.SubType 读取
+    const subTypes = Items?.AssociationPropertyMetadata?.SubType;
+    if (Array.isArray(subTypes) && subTypes.length > 0) {
+      return subTypes.some(subType => IMAGE_TYPES.includes(subType as FileSubType));
+    }
+    
+    // 兼容旧的 FileSubType 字段
+    if (Items?.FileSubType) {
+      return IMAGE_TYPES.includes(Items.FileSubType);
+    }
+    
+    return false;
+  }, [isFileItems, Items]);
 
   if (!Items) {
     return null;
@@ -271,7 +364,10 @@ export const ArrayField: React.FC<ArrayFieldProps> = ({
   const renderObjectItemContent = (item: any, index: number) => {
     if (!Items.Properties) return null;
 
-    return Object.entries(Items.Properties).map(([propertyName, propertySchema]) => {
+    // 使用排序后的属性列表进行渲染
+    const sortedProperties = sortPropertiesByOrder(Items.Properties);
+
+    return sortedProperties.map(([propertyName, propertySchema]) => {
       const isRequired = itemRequired.includes(propertyName);
       return (
         <React.Suspense key={propertyName} fallback={<div>加载中...</div>}>
@@ -285,6 +381,8 @@ export const ArrayField: React.FC<ArrayFieldProps> = ({
             level={level + 1}
             errors={errors}
             fieldPath={`${currentPath}[${index}]`}
+            uploadSender={uploadSender}
+            fileUploader={fileUploader}
           />
         </React.Suspense>
       );
@@ -304,6 +402,29 @@ export const ArrayField: React.FC<ArrayFieldProps> = ({
           level={level + 1}
           errors={errors}
           fieldPath={currentPath}
+          uploadSender={uploadSender}
+          fileUploader={fileUploader}
+        />
+      </React.Suspense>
+    );
+  };
+
+  // 渲染复杂类型的数组项（file、time、带枚举的类型）
+  const renderComplexItemContent = (item: any, index: number) => {
+    return (
+      <React.Suspense fallback={<div>加载中...</div>}>
+        <FieldRenderer
+          name={`[${index}]`}
+          schema={Items}
+          value={item}
+          onChange={(newValue) => handleItemChange(index, newValue)}
+          disabled={disabled}
+          level={level + 1}
+          errors={errors}
+          fieldPath={currentPath}
+          hideLabel={true}
+          uploadSender={uploadSender}
+          fileUploader={fileUploader}
         />
       </React.Suspense>
     );
@@ -322,6 +443,9 @@ export const ArrayField: React.FC<ArrayFieldProps> = ({
 
       <ArrayItems>
         {value.map((item, index) => {
+            // 获取数组项的唯一key
+            const itemKey = getItemKey(index, item);
+            
             // 渲染数组项内容
             const renderItemContent = () => {
               if (isObjectItems) {
@@ -340,6 +464,37 @@ export const ArrayField: React.FC<ArrayFieldProps> = ({
                   </ArrayItemContent>
                 );
               }
+              if (isFileItems || isTimeItems || hasItemEnumValues) {
+                // 复杂类型（file、time、带枚举）：使用 FieldRenderer 渲染
+                // 确定变体类型
+                let variant: ComplexItemVariant | undefined;
+                if (isFileItems) {
+                  // 区分图片类型和非图片类型的文件上传
+                  variant = isImageFileType ? 'fileImage' : 'fileDoc';
+                } else if (isTimeItems) {
+                  // 时间类型
+                  variant = 'time';
+                } else if (hasItemEnumValues) {
+                  variant = 'enum';
+                }
+                return (
+                  <ArrayItemRowComplex>
+                    <ArrayItemInput>
+                      {renderComplexItemContent(item, index)}
+                    </ArrayItemInput>
+                    <ArrayItemActionsComplex $variant={variant}>
+                      <Button
+                        type="text"
+                        danger
+                        icon={<MinusOutlined />}
+                        onClick={() => handleRemove(index)}
+                        disabled={disabled}
+                        size="small"
+                      />
+                    </ArrayItemActionsComplex>
+                  </ArrayItemRowComplex>
+                );
+              }
               // 基础类型：渲染输入框和删除按钮
               return (
                 <ArrayItemRow>
@@ -361,7 +516,7 @@ export const ArrayField: React.FC<ArrayFieldProps> = ({
             };
 
             return (
-              <ArrayItem key={index}>
+              <ArrayItem key={itemKey}>
                 {renderItemContent()}
               </ArrayItem>
             );
@@ -376,7 +531,7 @@ export const ArrayField: React.FC<ArrayFieldProps> = ({
             shape="circle"
             icon={<PlusOutlined />}
           />
-          {(isObjectItems || isArrayItems) && value.length > 0 && (
+          {needsFieldRenderer && value.length > 0 && (
             <Button
               onClick={() => handleRemove(value.length - 1)}
               shape="circle"
@@ -391,4 +546,4 @@ export const ArrayField: React.FC<ArrayFieldProps> = ({
   );
 };
 
-export default ArrayField;
+export default ArrayField;

package/src/components/HumanVerify/CustomParamsRenderer/EnumField.tsx

@@ -0,0 +1,199 @@
+import React, { useCallback, useMemo } from 'react';
+import { Select, Checkbox, Radio } from 'antd';
+import type { RadioChangeEvent } from 'antd';
+import { EnumFieldProps, EnumDisplayStyle } from './types';
+import styled from 'styled-components';
+
+const { Option } = Select;
+
+// ==================== Styled Components ====================
+
+// 枚举选择器容器
+const EnumSelect = styled.div`
+  width: 100%;
+
+  .ant-select {
+    width: 100%;
+  }
+`;
+
+// 枚举复选框容器
+const EnumCheckbox = styled.div`
+  width: 100%;
+
+  .ant-checkbox-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .ant-checkbox-wrapper {
+    margin-right: 0;
+
+    &:hover .ant-checkbox-inner {
+      border-color: #1890ff;
+    }
+  }
+`;
+
+// 枚举单选按钮容器
+const EnumRadio = styled.div`
+  width: 100%;
+
+  .ant-radio-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .ant-radio-wrapper {
+    margin-right: 0;
+
+    &:hover .ant-radio-inner {
+      border-color: #1890ff;
+    }
+  }
+`;
+
+/**
+ * 枚举字段组件
+ * 根据 EnumDisplayStyle 渲染不同的选择器
+ * - select: 下拉选择框
+ * - multi-select: 多选下拉框
+ * - checkbox: 复选框组（多选）
+ * - radio: 单选按钮组
+ */
+export const EnumField: React.FC<EnumFieldProps> = ({
+  schema,
+  value,
+  onChange,
+  disabled = false,
+}) => {
+  const { Type } = schema;
+  
+  // 优先从 AssociationPropertyMetadata 中读取，兼容旧的字段
+  const enumValues = useMemo(() => {
+    return schema.AssociationPropertyMetadata?.EnumValues || schema.EnumValues || [];
+  }, [schema]);
+  
+  const displayStyle: EnumDisplayStyle = useMemo(() => {
+    return schema.AssociationPropertyMetadata?.EnumDisplayStyle || schema.EnumDisplayStyle || 'select';
+  }, [schema]);
+
+  // 处理 Select 变化
+  const handleSelectChange = useCallback(
+    (newValue: string | string[]) => {
+      onChange?.(newValue);
+    },
+    [onChange]
+  );
+
+  // 处理 Checkbox 变化
+  const handleCheckboxChange = useCallback(
+    (checkedValues: (string | number | boolean)[]) => {
+      onChange?.(checkedValues as string[]);
+    },
+    [onChange]
+  );
+
+  // 处理 Radio 变化
+  const handleRadioChange = useCallback(
+    (e: RadioChangeEvent) => {
+      onChange?.(e.target.value);
+    },
+    [onChange]
+  );
+
+  // 根据展示样式渲染不同的组件
+  const renderByDisplayStyle = () => {
+    switch (displayStyle) {
+      case 'checkbox':
+        // 复选框组 - 多选
+        return (
+          <EnumCheckbox>
+            <Checkbox.Group
+              value={Array.isArray(value) ? value : value ? [value] : []}
+              onChange={handleCheckboxChange}
+              disabled={disabled}
+            >
+              {enumValues.map((item) => (
+                <Checkbox key={String(item)} value={item}>
+                  {String(item)}
+                </Checkbox>
+              ))}
+            </Checkbox.Group>
+          </EnumCheckbox>
+        );
+
+      case 'radio':
+        // 单选按钮组
+        return (
+          <EnumRadio>
+            <Radio.Group
+              value={value}
+              onChange={handleRadioChange}
+              disabled={disabled}
+            >
+              {enumValues.map((item) => (
+                <Radio key={String(item)} value={item}>
+                  {String(item)}
+                </Radio>
+              ))}
+            </Radio.Group>
+          </EnumRadio>
+        );
+
+      case 'multi-select':
+        // 多选下拉框
+        return (
+          <EnumSelect>
+            <Select
+              value={Array.isArray(value) ? value : value ? [value] : []}
+              onChange={handleSelectChange}
+              disabled={disabled}
+              mode="multiple"
+              placeholder={`请选择`}
+              style={{ width: '100%' }}
+              allowClear
+            >
+              {enumValues.map((item) => (
+                <Option key={String(item)} value={item}>
+                  {String(item)}
+                </Option>
+              ))}
+            </Select>
+          </EnumSelect>
+        );
+
+      case 'select':
+      default: {
+        // 下拉选择框
+        // 根据原始类型决定是否支持多选
+        const isMultiple = Type === 'array';
+        return (
+          <EnumSelect>
+            <Select
+              value={value}
+              onChange={handleSelectChange}
+              disabled={disabled}
+              mode={isMultiple ? 'multiple' : undefined}
+              placeholder={`请选择`}
+              style={{ width: '100%' }}
+              allowClear
+            >
+              {enumValues.map((item) => (
+                <Option key={String(item)} value={item}>
+                  {String(item)}
+                </Option>
+              ))}
+            </Select>
+          </EnumSelect>
+        );
+      }
+    }
+  };
+
+  return renderByDisplayStyle();
+};
+
+export default EnumField;