@alicloud/appflow-chat 0.0.1-beta.1

package/src/components/HumanVerify/HistoryCard.tsx

@@ -0,0 +1,156 @@
+import React from 'react';
+import { Button } from 'antd';
+import styled from 'styled-components';
+import CustomParamsRenderer from './CustomParamsRenderer';
+import { CustomParamSchema } from './CustomParamsRenderer/types';
+
+// ==================== Styled Components ====================
+
+const HistoryCardContainer = styled.div`
+  margin-top: 12px;
+  width: 400px;
+  max-width: 100%;
+`;
+
+const StatusContainer = styled.div<{ $approved: boolean }>`
+  margin-top: 16px;
+  padding: 12px 16px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  background-color: ${props => props.$approved ? 'rgb(238, 244, 248)' : 'rgb(252, 250, 245)'};
+  border: 1px solid ${props => props.$approved ? 'rgb(238, 244, 248)' : 'rgb(252, 250, 245)'};
+`;
+
+const StatusContent = styled.div`
+  flex: 1;
+`;
+
+const StatusText = styled.div`
+  font-size: 14px;
+  font-weight: 500;
+  margin-bottom: 4px;
+`;
+
+// ==================== Types ====================
+
+export interface HistoryCardProps {
+  /** 审批状态 */
+  approvalStatus?: string;
+  /** 表单值 */
+  formValues?: Record<string, any>;
+  /** 表单 Schema */
+  formSchema?: CustomParamSchema;
+}
+
+/**
+ * 将后端返回的小写 schema 转换为组件需要的大写格式
+ * @param schema 后端返回的 schema（小写字段名）
+ * @returns 转换后的 schema（大写字段名）
+ */
+export const convertSchemaToUpperCase = (schema: any): CustomParamSchema | undefined => {
+  if (!schema) return undefined;
+
+  const result: CustomParamSchema = {
+    Type: schema.type || 'string',
+  };
+
+  if (schema.title) {
+    result.Title = schema.title;
+  }
+
+  if (schema.description) {
+    result.Description = schema.description;
+  }
+
+  if (schema.required && Array.isArray(schema.required)) {
+    result.Required = schema.required;
+  }
+
+  if (schema.properties && typeof schema.properties === 'object') {
+    result.Properties = {};
+    for (const [key, value] of Object.entries(schema.properties)) {
+      const converted = convertSchemaToUpperCase(value);
+      if (converted) {
+        result.Properties[key] = converted;
+      }
+    }
+  }
+
+  if (schema.items) {
+    result.Items = convertSchemaToUpperCase(schema.items);
+  }
+
+  return result;
+};
+
+/**
+ * HistoryCard 历史卡片组件 (SDK 版本)
+ * 用于展示历史对话中的 card 类型消息（只读模式）
+ * 
+ * @example
+ * ```tsx
+ * <HistoryCard
+ *   approvalStatus="approved"
+ *   formValues={{ name: 'test', age: 18 }}
+ *   formSchema={schema}
+ * />
+ * ```
+ */
+export const HistoryCard: React.FC<HistoryCardProps> = ({
+  approvalStatus,
+  formValues = {},
+  formSchema,
+}) => {
+  // 判断是否已提交
+  const isApproved = approvalStatus === 'approved';
+
+  // 如果没有表单 schema，只显示状态
+  if (!formSchema) {
+    return (
+      <HistoryCardContainer>
+        <StatusContainer $approved={isApproved}>
+          <StatusContent>
+            <StatusText>
+              {isApproved ? '已提交' : '待提交'}
+            </StatusText>
+          </StatusContent>
+          <Button 
+            color="primary" 
+            variant="filled"
+            disabled={true}
+          >
+            {isApproved ? '已提交' : '提交'}
+          </Button>
+        </StatusContainer>
+      </HistoryCardContainer>
+    );
+  }
+
+  return (
+    <HistoryCardContainer>
+      <CustomParamsRenderer
+        schema={formSchema}
+        value={formValues}
+        disabled={true}
+      />
+      <StatusContainer $approved={isApproved}>
+        <StatusContent>
+          <StatusText>
+            {isApproved ? '已提交' : '待提交'}
+          </StatusText>
+        </StatusContent>
+        <Button 
+          color="primary" 
+          variant="filled"
+          disabled={true}
+        >
+          {isApproved ? '已提交' : '提交'}
+        </Button>
+      </StatusContainer>
+    </HistoryCardContainer>
+  );
+};
+
+export default HistoryCard;

package/src/components/HumanVerify/HumanVerify.tsx

@@ -0,0 +1,184 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { Button, message } from 'antd';
+import styled from 'styled-components';
+import CustomParamsRenderer, { validateCustomParams, CustomParamSchema } from './CustomParamsRenderer';
+
+// ==================== Styled Components ====================
+
+const HumanVerifyContainer = styled.div`
+  margin-top: 12px;
+  width: 400px;
+  max-width: 100%;
+`;
+
+const StatusContainer = styled.div<{ $approved: boolean }>`
+  margin-top: 16px;
+  padding: 12px 16px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  background-color: ${props => props.$approved ? 'rgb(238, 244, 248)' : 'rgb(252, 250, 245)'};
+  border: 1px solid ${props => props.$approved ? 'rgb(238, 244, 248)' : 'rgb(252, 250, 245)'};
+`;
+
+const StatusContent = styled.div`
+  flex: 1;
+`;
+
+const StatusText = styled.div`
+  font-size: 14px;
+  font-weight: 500;
+  margin-bottom: 4px;
+`;
+
+// ==================== Types ====================
+
+export interface HumanVerifyProps {
+  /** 验证ID */
+  verifyId?: string;
+  /** 会话 Webhook */
+  sessionWebhook?: string;
+  /** 是否已提交 */
+  approved?: boolean;
+  /** CustomParams 的 schema */
+  customParamsSchema?: CustomParamSchema;
+  /** CustomParams 的 key（用于提交时的字段名） */
+  customParamsKey?: string;
+  /** 提交回调函数 */
+  onSubmit?: (data: {
+    verifyId: string;
+    sessionWebhook: string;
+    status: string;
+    customParamsKey: string;
+    customParamsValue: Record<string, any>;
+  }) => void;
+}
+
+/**
+ * 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,
+}) => {
+  // CustomParams表单状态管理
+  const [customParamsValue, setCustomParamsValue] = useState<Record<string, any>>({});
+  // CustomParams验证错误状态
+  const [validationErrors, setValidationErrors] = useState<Record<string, string>>({});
+
+  // 实时验证：当表单值变化时，如果已经有错误信息，则重新验证
+  useEffect(() => {
+    // 只有在已经显示过错误的情况下才进行实时验证
+    if (Object.keys(validationErrors).length > 0 && customParamsSchema) {
+      const validation = validateCustomParams(customParamsSchema, customParamsValue);
+
+      if (validation.valid) {
+        // 如果验证通过，清空所有错误
+        setValidationErrors({});
+      } else {
+        // 如果仍有错误，更新错误信息
+        const errors: Record<string, string> = {};
+        validation.errors.forEach((err) => {
+          errors[err.field] = err.message;
+        });
+        setValidationErrors(errors);
+      }
+    }
+  }, [customParamsValue, customParamsSchema, validationErrors]);
+
+  // 处理审批按钮点击
+  const handleApprove = useCallback(() => {
+    if (!verifyId || !onSubmit) return;
+
+    // 验证表单
+    if (customParamsSchema) {
+      const validation = validateCustomParams(customParamsSchema, customParamsValue);
+
+      if (!validation.valid) {
+        // 转换错误格式
+        const errors: Record<string, string> = {};
+        validation.errors.forEach((err) => {
+          errors[err.field] = err.message;
+        });
+        setValidationErrors(errors);
+
+        // 提示用户
+        message.error('请填写所有必填项');
+        return;
+      }
+
+      // 清空错误
+      setValidationErrors({});
+    }
+
+    // 调用提交回调
+    onSubmit({
+      verifyId,
+      sessionWebhook: sessionWebhook || '',
+      status: 'approve',
+      customParamsKey,
+      customParamsValue,
+    });
+  }, [verifyId, sessionWebhook, onSubmit, customParamsValue, customParamsSchema, customParamsKey]);
+
+  return (
+    <HumanVerifyContainer>
+      {customParamsSchema && (
+        <CustomParamsRenderer
+          schema={customParamsSchema}
+          value={customParamsValue}
+          onChange={setCustomParamsValue}
+          errors={validationErrors}
+          disabled={approved}
+        />
+      )}
+      <StatusContainer $approved={approved}>
+        <StatusContent>
+          <StatusText>
+            {approved ? '已提交' : '待提交'}
+          </StatusText>
+        </StatusContent>
+        <Button 
+          color="primary" 
+          variant="filled"
+          onClick={handleApprove}
+          disabled={approved}
+        >
+          {'提交'}
+        </Button>
+      </StatusContainer>
+    </HumanVerifyContainer>
+  );
+};
+
+export default HumanVerify;

package/src/components/HumanVerify/index.ts

@@ -0,0 +1,11 @@
+export { HumanVerify, type HumanVerifyProps } from './HumanVerify';
+export { HistoryCard, type HistoryCardProps, convertSchemaToUpperCase } from './HistoryCard';
+export {
+  CustomParamsRenderer,
+  useCustomParamsRenderer,
+  validateCustomParams,
+  type CustomParamSchema,
+  type CustomParamsRendererProps,
+  type ValidationResult,
+  type ValidationError,
+} from './CustomParamsRenderer';

package/src/components/MarkdownRenderer.tsx

@@ -0,0 +1,195 @@
+/**
+ * MarkdownRenderer - SDK封装的Markdown渲染组件
+ * 内部复用 MarkdownView，提供简化的接口
+ */
+
+import React, { useEffect } from 'react';
+import styled from 'styled-components';
+import { MarkdownView } from '@/markdown';
+import { loadEchartsScript } from '@/utils/loadEcharts';
+
+export interface MarkdownRendererProps {
+  /** Markdown内容 */
+  content: string;
+  /** 渲染状态，Running时显示加载动画 */
+  status?: 'Running' | 'Success' | 'Error';
+  /** 自定义类名 */
+  className?: string;
+  /** 自定义样式 */
+  style?: React.CSSProperties;
+}
+
+// 样式隔离容器
+const StyledContainer = styled.div`
+  /* 样式隔离 - 确保内部样式不受外部影响 */
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.6;
+  color: #333;
+  
+  /* 确保内部元素正常显示 */
+  * {
+    box-sizing: border-box;
+  }
+
+  /* Markdown内容样式 */
+  p {
+    margin: 0 0 8px 0;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  ul, ol {
+    margin: 8px 0;
+    padding-left: 20px;
+  }
+
+  li {
+    margin: 4px 0;
+  }
+
+  code {
+    background: rgba(0, 0, 0, 0.05);
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+    font-size: 13px;
+  }
+
+  pre {
+    background: #f6f8fa;
+    padding: 12px;
+    border-radius: 6px;
+    overflow-x: auto;
+    
+    code {
+      background: transparent;
+      padding: 0;
+    }
+  }
+
+  blockquote {
+    margin: 8px 0;
+    padding: 8px 16px;
+    border-left: 4px solid #ddd;
+    background: #f9f9f9;
+    color: #666;
+  }
+
+  table {
+    border-collapse: collapse;
+    width: 100%;
+    margin: 8px 0;
+    
+    th, td {
+      border: 1px solid #ddd;
+      padding: 8px 12px;
+      text-align: left;
+    }
+    
+    th {
+      background: #f6f8fa;
+      font-weight: 600;
+    }
+    
+    tr:nth-child(even) {
+      background: #f9f9f9;
+    }
+  }
+
+  img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 4px;
+  }
+
+  a {
+    color: #1890ff;
+    text-decoration: none;
+    
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    margin: 16px 0 8px 0;
+    font-weight: 600;
+    line-height: 1.4;
+    
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+
+  h1 { font-size: 24px; }
+  h2 { font-size: 20px; }
+  h3 { font-size: 18px; }
+  h4 { font-size: 16px; }
+  h5 { font-size: 14px; }
+  h6 { font-size: 14px; color: #666; }
+
+  hr {
+    border: none;
+    border-top: 1px solid #ddd;
+    margin: 16px 0;
+  }
+
+  /* 深度思考样式 */
+  details {
+    margin: 8px 0;
+    padding: 8px 12px;
+    background: #f6f8fa;
+    border-radius: 6px;
+    
+    summary {
+      cursor: pointer;
+      font-weight: 500;
+      color: #666;
+    }
+    
+    pre.think {
+      margin: 8px 0 0 0;
+      padding: 8px;
+      background: #fff;
+      border-radius: 4px;
+      white-space: pre-wrap;
+      font-size: 13px;
+      color: #666;
+    }
+  }
+`;
+
+/**
+ * MarkdownRenderer - Markdown渲染组件
+ * 
+ * @example
+ * ```tsx
+ * <MarkdownRenderer 
+ *   content="# 标题\n这是正文内容，支持**加粗**和*斜体*"
+ *   status="Success"
+ * />
+ * ```
+ */
+export const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({
+  content,
+  status = 'Success',
+  className,
+  style,
+}) => {
+  // 自动加载ECharts（如果内容中包含echarts代码块）
+  useEffect(() => {
+    if (content?.includes('```echarts')) {
+      loadEchartsScript().catch(console.error);
+    }
+  }, [content]);
+
+  return (
+    <StyledContainer className={`appflow-sdk-markdown ${className || ''}`} style={style}>
+      <MarkdownView content={content} status={status} />
+    </StyledContainer>
+  );
+};
+
+export default MarkdownRenderer;