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

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

@@ -6,12 +6,16 @@ import {
   CustomParamSchema,
   ValidationResult,
   validateCustomParams,
+  sortPropertiesByOrder,
 } from './types';
 
 export * from './types';
 export { FieldRenderer } from './FieldRenderer';
 export { ArrayField } from './ArrayField';
 export { ObjectField } from './ObjectField';
+export { TimeField } from './TimeField';
+export { FileField } from './FileField';
+export { EnumField } from './EnumField';
 
 // ==================== Styled Components ====================
 
@@ -42,6 +46,9 @@ const EmptyState = styled.div`
  *     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: '标签',
@@ -72,6 +79,8 @@ export const CustomParamsRenderer: React.FC<CustomParamsRendererProps> = ({
   onChange,
   disabled = false,
   errors = {},
+  uploadSender,
+  fileUploader,
 }) => {
   const Properties = schema?.Properties;
   const Required = schema?.Required || [];
@@ -96,9 +105,12 @@ export const CustomParamsRenderer: React.FC<CustomParamsRendererProps> = ({
     );
   }
 
+  // 使用排序后的属性列表进行渲染
+  const sortedProperties = sortPropertiesByOrder(Properties);
+
   return (
     <CustomParamsRendererContainer>
-      {Object.entries(Properties).map(([propertyName, propertySchema]) => {
+      {sortedProperties?.map(([propertyName, propertySchema]) => {
         const isRequired = Required.includes(propertyName);
 
         return (
@@ -113,6 +125,8 @@ export const CustomParamsRenderer: React.FC<CustomParamsRendererProps> = ({
             level={0}
             errors={errors}
             fieldPath=""
+            uploadSender={uploadSender}
+            fileUploader={fileUploader}
           />
         );
       })}
@@ -163,4 +177,4 @@ export const useCustomParamsRenderer = (schema: CustomParamSchema) => {
   };
 };
 
-export default CustomParamsRenderer;
+export default CustomParamsRenderer;

package/src/components/HumanVerify/CustomParamsRenderer/types.ts

@@ -1,4 +1,102 @@
-export type ParamType = 'string' | 'number' | 'boolean' | 'array' | 'object';
+// ============ 上传相关类型定义 ============
+
+/**
+ * 上传请求参数
+ */
+export interface UploadRequestParams {
+  /** 事件类型：uploadToken-获取上传凭证，uploadFile-获取文件ID */
+  eventType: 'uploadToken' | 'uploadFile';
+  /** 文件名 */
+  fileName: string;
+  /** 文件下载 URL（uploadFile 时需要） */
+  content?: string;
+}
+
+/**
+ * 上传 Token 响应
+ */
+export interface UploadTokenResponse {
+  /** 预签名上传 URL */
+  uploadUrl: string;
+  /** 文件下载 URL */
+  downloadUrl: string;
+}
+
+/**
+ * 上传文件响应
+ */
+export interface UploadFileResponse {
+  /** 文件 ID */
+  fileId: string;
+}
+
+/**
+ * 上传发送方法类型
+ * 用于发送上传相关的事件请求
+ */
+export type UploadSender = (params: UploadRequestParams) => Promise<string | null>;
+
+/**
+ * 文件上传方法类型
+ * 用于实际执行文件上传到 OSS
+ */
+export type FileUploader = (file: Blob, uploadUrl: string) => Promise<void>;
+
+/**
+ * 上传配置
+ */
+export interface UploadConfig {
+  /** 上传发送方法 */
+  uploadSender?: UploadSender;
+  /** 文件上传方法 */
+  fileUploader?: FileUploader;
+}
+
+// ============ 基础类型定义 ============
+
+// 基础类型
+export type BasicParamType = 'string' | 'number' | 'boolean';
+
+// 复合类型
+export type ComplexParamType = 'array' | 'object';
+
+// 扩展类型
+export type ExtendedParamType = 'time' | 'file';
+
+// 所有参数类型
+export type ParamType = BasicParamType | ComplexParamType | ExtendedParamType;
+
+// 时间子类型
+export type TimeSubType = 'year-month' | 'year-month-day' | 'datetime';
+
+// 文件子类型
+export type FileSubType =
+  | 'default'
+  | 'jpg'
+  | 'png'
+  | 'svg'
+  | 'doc'
+  | 'ppt'
+  | 'excel'
+  | 'txt'
+  | 'markdown'
+  | 'zip';
+
+// 枚举展示样式
+export type EnumDisplayStyle = 'select' | 'checkbox' | 'radio' | 'multi-select';
+
+/**
+ * AssociationPropertyMetadata 类型定义
+ * 包含枚举、时间、文件等扩展属性的元数据
+ */
+export interface AssociationPropertyMetadata {
+  /** 子类型（用于 time 和 file 类型），现在是数组 */
+  SubType?: (TimeSubType | FileSubType)[];
+  /** 枚举值 */
+  EnumValues?: (string | number | boolean)[];
+  /** 枚举展示样式 */
+  EnumDisplayStyle?: EnumDisplayStyle;
+}
 
 /**
  * CustomParam 的 Schema 定义
@@ -10,12 +108,29 @@ export interface CustomParamSchema {
   Required?: string[];
   Properties?: Record<string, CustomParamSchema>;
   Items?: CustomParamSchema;
+  // 排序字段（支持小写）
+  order?: number;
+  // 排序字段（支持大写，兼容实际数据格式）
+  Order?: string | number;
+  // 关联属性元数据（包含 SubType、EnumValues、EnumDisplayStyle）
+  AssociationPropertyMetadata?: AssociationPropertyMetadata;
+  AssociationProperty?: string;
+
+  // ============ 以下字段已废弃，保留用于向后兼容 ============
+  /** @deprecated 使用 AssociationPropertyMetadata.SubType 代替 */
+  TimeSubType?: TimeSubType;
+  /** @deprecated 使用 AssociationPropertyMetadata.SubType 代替 */
+  FileSubType?: FileSubType;
+  /** @deprecated 使用 AssociationPropertyMetadata.EnumValues 代替 */
+  EnumValues?: string[];
+  /** @deprecated 使用 AssociationPropertyMetadata.EnumDisplayStyle 代替 */
+  EnumDisplayStyle?: EnumDisplayStyle;
 }
 
 /**
  * CustomParamsRenderer 组件的 Props
  */
-export interface CustomParamsRendererProps {
+export interface CustomParamsRendererProps extends UploadConfig {
   /** CustomParams 的 schema */
   schema: CustomParamSchema;
   /** 表单值 */
@@ -33,7 +148,7 @@ export interface CustomParamsRendererProps {
 /**
  * 单个字段渲染器的 Props
  */
-export interface FieldRendererProps {
+export interface FieldRendererProps extends UploadConfig {
   /** 字段名 */
   name: string;
   /** 字段 Schema */
@@ -52,12 +167,14 @@ export interface FieldRendererProps {
   errors?: Record<string, string>;
   /** 字段路径（用于匹配错误信息） */
   fieldPath?: string;
+  /** 是否隐藏标签（用于数组项渲染时隐藏 Items 标题） */
+  hideLabel?: boolean;
 }
 
 /**
  * 数组字段的 Props
  */
-export interface ArrayFieldProps {
+export interface ArrayFieldProps extends UploadConfig {
   /** 字段名 */
   name: string;
   /** 字段 Schema */
@@ -81,7 +198,7 @@ export interface ArrayFieldProps {
 /**
  * 对象字段的 Props
  */
-export interface ObjectFieldProps {
+export interface ObjectFieldProps extends UploadConfig {
   /** 字段名 */
   name: string;
   /** 字段 Schema */
@@ -102,6 +219,60 @@ export interface ObjectFieldProps {
   fieldPath?: string;
 }
 
+/**
+ * 时间字段的 Props
+ */
+export interface TimeFieldProps {
+  /** 字段名 */
+  name: string;
+  /** 字段 Schema */
+  schema: CustomParamSchema;
+  /** 字段值 */
+  value?: string;
+  /** 值变化回调 */
+  onChange?: (value: string | null) => void;
+  /** 是否必填 */
+  required?: boolean;
+  /** 是否禁用 */
+  disabled?: boolean;
+}
+
+/**
+ * 文件字段的 Props
+ */
+export interface FileFieldProps extends UploadConfig {
+  /** 字段名 */
+  name: string;
+  /** 字段 Schema */
+  schema: CustomParamSchema;
+  /** 字段值 */
+  value?: any;
+  /** 值变化回调 */
+  onChange?: (value: any) => void;
+  /** 是否必填 */
+  required?: boolean;
+  /** 是否禁用 */
+  disabled?: boolean;
+}
+
+/**
+ * 枚举字段的 Props
+ */
+export interface EnumFieldProps {
+  /** 字段名 */
+  name: string;
+  /** 字段 Schema */
+  schema: CustomParamSchema;
+  /** 字段值 */
+  value?: any;
+  /** 值变化回调 */
+  onChange?: (value: any) => void;
+  /** 是否必填 */
+  required?: boolean;
+  /** 是否禁用 */
+  disabled?: boolean;
+}
+
 /**
  * 校验错误信息
  */
@@ -150,6 +321,12 @@ export const validateCustomParams = (
           field: fieldName,
           message: `${fieldSchema?.Title || key} 是必填项`,
         });
+      } else if (Array.isArray(fieldValue) && fieldValue.length === 0) {
+        // 数组类型的必填检查
+        errors.push({
+          field: fieldName,
+          message: `${fieldSchema?.Title || key} 是必填项`,
+        });
       }
     }
 
@@ -194,6 +371,26 @@ export const validateCustomParams = (
         }
       });
     }
+
+    // 校验时间类型
+    if (fieldSchema?.Type === 'time' && isRequired) {
+      if (!fieldValue) {
+        errors.push({
+          field: fieldName,
+          message: `${fieldSchema?.Title || key} 是必填项`,
+        });
+      }
+    }
+
+    // 校验文件类型
+    if (fieldSchema?.Type === 'file' && isRequired) {
+      if (!fieldValue || (Array.isArray(fieldValue) && fieldValue.length === 0)) {
+        errors.push({
+          field: fieldName,
+          message: `${fieldSchema?.Title || key} 是必填项`,
+        });
+      }
+    }
   });
 
   return {
@@ -201,3 +398,32 @@ export const validateCustomParams = (
     errors,
   };
 };
+
+/**
+ * 根据 Order 字段对属性进行排序
+ * 完全兼容没有 Order 字段的历史数据
+ * 
+ * @param properties - 属性对象
+ * @returns 排序后的属性数组 [key, schema][]
+ */
+export const sortPropertiesByOrder = (
+  properties: Record<string, CustomParamSchema>
+): [string, CustomParamSchema][] => {
+  return Object.entries(properties).sort(([, schemaA], [, schemaB]) => {
+    // 读取 Order 字段（支持大小写）
+    const orderA = schemaA.Order ?? schemaA.order;
+    const orderB = schemaB.Order ?? schemaB.order;
+
+    // 转换为数字（字符串 "12" -> 12）
+    const numA = orderA !== undefined ? Number(orderA) : Number.MAX_SAFE_INTEGER;
+    const numB = orderB !== undefined ? Number(orderB) : Number.MAX_SAFE_INTEGER;
+
+    // 如果两个都没有 Order，保持原有顺序（返回 0）
+    // 这样可以确保历史数据（所有字段都没有 Order）不会被打乱
+    if (numA === Number.MAX_SAFE_INTEGER && numB === Number.MAX_SAFE_INTEGER) {
+      return 0;
+    }
+
+    return numA - numB;
+  });
+};

package/src/components/HumanVerify/HistoryCard.tsx

@@ -36,12 +36,8 @@ const StatusText = styled.div`
 // ==================== Types ====================
 
 export interface HistoryCardProps {
-  /** 审批状态 */
-  approvalStatus?: string;
-  /** 表单值 */
-  formValues?: Record<string, any>;
-  /** 表单 Schema */
-  formSchema?: CustomParamSchema;
+  /** 消息数据对象 */
+  data: any;
 }
 
 /**
@@ -68,7 +64,35 @@ export const convertSchemaToUpperCase = (schema: any): CustomParamSchema | undef
     result.Required = schema.required;
   }
 
-  if (schema.properties && typeof schema.properties === 'object') {
+  // 排序字段
+  if (schema.order !== undefined) {
+    result.order = schema.order;
+  }
+
+  // 处理 AssociationPropertyMetadata
+  if (schema.associationPropertyMetadata) {
+    const metadata = schema.associationPropertyMetadata;
+    result.AssociationPropertyMetadata = {};
+    
+    // SubType（数组格式）
+    if (metadata.subType) {
+      const subType = metadata.subType;
+      // 确保是数组格式
+      result.AssociationPropertyMetadata.SubType = Array.isArray(subType) ? subType : [subType];
+    }
+    
+    // EnumValues
+    if (metadata.enumValues) {
+      result.AssociationPropertyMetadata.EnumValues = metadata.enumValues;
+    }
+    
+    // EnumDisplayStyle
+    if (metadata.enumDisplayStyle) {
+      result.AssociationPropertyMetadata.EnumDisplayStyle = metadata.enumDisplayStyle;
+    }
+  }
+
+  if ((schema.properties && typeof schema.properties === 'object')) {
     result.Properties = {};
     for (const [key, value] of Object.entries(schema.properties)) {
       const converted = convertSchemaToUpperCase(value);
@@ -88,21 +112,15 @@ export const convertSchemaToUpperCase = (schema: any): CustomParamSchema | undef
 /**
  * HistoryCard 历史卡片组件 (SDK 版本)
  * 用于展示历史对话中的 card 类型消息（只读模式）
- * 
- * @example
- * ```tsx
- * <HistoryCard
- *   approvalStatus="approved"
- *   formValues={{ name: 'test', age: 18 }}
- *   formSchema={schema}
- * />
- * ```
  */
-export const HistoryCard: React.FC<HistoryCardProps> = ({
-  approvalStatus,
-  formValues = {},
-  formSchema,
-}) => {
+export const HistoryCard: React.FC<HistoryCardProps> = ({ data }) => {
+  // 从data中提取需要的参数
+  const approvalStatus = data?.approvalStatus;
+  
+  // 使用测试数据或真实数据
+  const formValues = (data?.formValues || {});
+  const formSchema = data?.formSchema;
+
   // 判断是否已提交
   const isApproved = approvalStatus === 'approved';
 

package/src/components/HumanVerify/HumanVerify.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { Button, message } from 'antd';
 import styled from 'styled-components';
-import CustomParamsRenderer, { validateCustomParams, CustomParamSchema } from './CustomParamsRenderer';
+import CustomParamsRenderer, { validateCustomParams, UploadSender, FileUploader } from './CustomParamsRenderer';
 
 // ==================== Styled Components ====================
 
@@ -35,16 +35,12 @@ const StatusText = styled.div`
 // ==================== Types ====================
 
 export 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;
@@ -58,39 +54,20 @@ export interface HumanVerifyProps {
 /**
  * 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 const HumanVerify: React.FC<HumanVerifyProps> = ({
-  verifyId,
-  sessionWebhook,
-  approved = false,
-  customParamsSchema,
-  customParamsKey = 'customParams',
-  onSubmit,
+export const HumanVerify: React.FC<HumanVerifyProps> = ({ 
+  data,
+  uploadSender,
+  fileUploader,
+  onSubmit
 }) => {
+  // 从 data 中提取需要的参数
+  const verifyId = data?.verifyId;
+  const sessionWebhook = data?.sessionWebhook;
+  const approved = data?.approved || false;
+  const customParamsSchema = data?.customParams;
+  const customParamsKey = data?.customParamsKey;
+
   // CustomParams表单状态管理
   const [customParamsValue, setCustomParamsValue] = useState<Record<string, any>>({});
   // CustomParams验证错误状态
@@ -142,7 +119,7 @@ export const HumanVerify: React.FC<HumanVerifyProps> = ({
     }
 
     // 调用提交回调
-    onSubmit({
+    onSubmit?.({
       verifyId,
       sessionWebhook: sessionWebhook || '',
       status: 'approve',
@@ -159,7 +136,8 @@ export const HumanVerify: React.FC<HumanVerifyProps> = ({
           value={customParamsValue}
           onChange={setCustomParamsValue}
           errors={validationErrors}
-          disabled={approved}
+          uploadSender={uploadSender}
+          fileUploader={fileUploader}
         />
       )}
       <StatusContainer $approved={approved}>
@@ -181,4 +159,4 @@ export const HumanVerify: React.FC<HumanVerifyProps> = ({
   );
 };
 
-export default HumanVerify;
+export default HumanVerify;

package/src/components/MessageBubble.tsx

@@ -351,11 +351,7 @@ export const MessageBubble: React.FC<MessageBubbleProps> = ({
             {/* HumanVerify事件 - 人工审核表单 */}
             {eventType === 'humanVerify' && humanVerifyData && (
               <HumanVerify 
-                verifyId={humanVerifyData.verifyId}
-                sessionWebhook={humanVerifyData.sessionWebhook}
-                approved={humanVerifyData.approved}
-                customParamsSchema={humanVerifyData.customParams}
-                customParamsKey={humanVerifyData.customParamsKey}
+                data={humanVerifyData}
                 onSubmit={onHumanVerifySubmit}
               />
             )}
@@ -363,14 +359,12 @@ export const MessageBubble: React.FC<MessageBubbleProps> = ({
             {/* HistoryCard 事件 - 历史对话中的审核卡片 */}
             {eventType === 'historyCard' && historyCardData && (
               <HistoryCard 
-                approvalStatus={historyCardData.approvalStatus}
-                formValues={historyCardData.formValues}
-                formSchema={historyCardData.formSchema}
+                data={historyCardData}
               />
             )}
             
             {/* 参考资料 */}
-            {references.length > 0 && status === 'Success' && (
+            {references && references.length > 0 && status === 'Success' && (
               <ReferencesContainer>
                 <DocReferences
                   items={references}
@@ -397,4 +391,4 @@ export const MessageBubble: React.FC<MessageBubbleProps> = ({
   );
 };
 
-export default MessageBubble;
+export default MessageBubble;

package/src/components/RichMessageBubble.tsx

@@ -254,7 +254,7 @@ export const RichMessageBubble: React.FC<RichMessageBubbleProps> = ({
           role="bot"
         >
           {/* 参考资料 */}
-          {references.length > 0 && status === 'Success' && (
+          {references && references.length > 0 && status === 'Success' && (
             <ReferencesContainer>
               <DocReferences
                 items={references}
@@ -280,4 +280,4 @@ export const RichMessageBubble: React.FC<RichMessageBubbleProps> = ({
   );
 };
 
-export default RichMessageBubble;
+export default RichMessageBubble;

package/src/index.ts

@@ -78,3 +78,4 @@ export type {
 
 // ==================== 工具函数导出 ====================
 export { loadEchartsScript } from './utils/loadEcharts';
+export { loadMermaidScript } from './utils/loadMermaid';