@alicloud/appflow-chat 0.0.4-alpha.1 → 0.0.4-alpha.3

package/src/components/MessageAttachments.tsx

@@ -0,0 +1,216 @@
+/**
+ * MessageAttachments - 消息附件展示组件
+ * 用于在消息气泡中展示上传的图片和文件
+ */
+
+import React from 'react';
+import styled from 'styled-components';
+import { Image } from 'antd';
+import {
+  FileWordOutlined,
+  FilePdfOutlined,
+  FileExcelOutlined,
+  FileTextOutlined,
+  FileOutlined,
+} from '@ant-design/icons';
+
+// ==================== 类型定义 ====================
+
+export interface MessageAttachmentsProps {
+  /** 消息角色，影响卡片配色 */
+  role?: 'user' | 'bot';
+  /** 图片URL列表 */
+  images?: string[];
+  /** 文件列表 */
+  files?: { name: string; url: string }[];
+}
+
+// ==================== 样式组件 ====================
+
+const AttachmentsArea = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 4px;
+`;
+
+const ImageCard = styled.div<{ $role: 'user' | 'bot' }>`
+  background: ${props => props.$role === 'user' ? '#eef0ff' : '#e8f4fd'};
+  border-radius: 8px;
+  padding: 8px;
+  display: inline-flex;
+  flex-direction: column;
+  gap: 6px;
+  max-width: 200px;
+  color: #333;
+
+  .image-preview {
+    border-radius: 6px;
+    overflow: hidden;
+    cursor: pointer;
+  }
+`;
+
+const ImagesRow = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+`;
+
+const FileCard = styled.a<{ $role: 'user' | 'bot' }>`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  background: ${props => props.$role === 'user' ? '#eef0ff' : '#e8f4fd'};
+  border-radius: 8px;
+  padding: 10px 12px;
+  text-decoration: none;
+  color: #333;
+  transition: background 0.2s;
+  max-width: 280px;
+
+  &:hover {
+    background: ${props => props.$role === 'user' ? '#e2e5ff' : '#d6ecf8'};
+  }
+
+  .file-icon {
+    font-size: 28px;
+    flex-shrink: 0;
+    color: #1677ff;
+  }
+
+  .file-info {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+  }
+
+  .file-name {
+    font-size: 13px;
+    font-weight: 500;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: #333;
+  }
+
+  .file-meta {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .file-type {
+    font-size: 11px;
+    padding: 1px 4px;
+    border-radius: 3px;
+    background: rgba(0, 0, 0, 0.06);
+    color: #666;
+    text-transform: uppercase;
+    font-weight: 500;
+  }
+`;
+
+// ==================== 工具函数 ====================
+
+/** 根据文件名获取文件扩展名 */
+function getFileExtension(fileName: string): string {
+  const parts = fileName.split('.');
+  return parts.length > 1 ? parts[parts.length - 1].toLowerCase() : '';
+}
+
+/** 根据文件扩展名获取对应的图标组件 */
+function getFileIcon(ext: string): React.ReactNode {
+  switch (ext) {
+    case 'doc':
+    case 'docx':
+      return <FileWordOutlined />;
+    case 'pdf':
+      return <FilePdfOutlined />;
+    case 'xls':
+    case 'xlsx':
+    case 'csv':
+      return <FileExcelOutlined />;
+    case 'txt':
+    case 'md':
+    case 'json':
+      return <FileTextOutlined />;
+    default:
+      return <FileOutlined />;
+  }
+}
+
+// ==================== 组件实现 ====================
+
+/**
+ * MessageAttachments - 消息附件展示组件
+ *
+ * 在消息气泡中展示上传的图片（缩略图 + 点击预览）和文件（图标 + 文件名 + 类型标签 + 点击下载）。
+ *
+ * @example
+ * ```tsx
+ * <MessageAttachments
+ *   role="user"
+ *   images={['https://example.com/image.png']}
+ *   files={[{ name: '文档.docx', url: 'https://example.com/doc.docx' }]}
+ * />
+ * ```
+ */
+export const MessageAttachments: React.FC<MessageAttachmentsProps> = ({
+  role = 'user',
+  images,
+  files,
+}) => {
+  const hasImages = images && images.length > 0;
+  const hasFiles = files && files.length > 0;
+
+  if (!hasImages && !hasFiles) return null;
+
+  return (
+    <AttachmentsArea>
+      {/* 图片列表 */}
+      {hasImages && (
+        <ImagesRow>
+          {images.map((url, index) => (
+            <ImageCard key={index} $role={role}>
+              <div className="image-preview">
+                <Image
+                  src={url}
+                  width={160}
+                  style={{ borderRadius: 6, objectFit: 'cover' }}
+                  preview={{ mask: '预览' }}
+                />
+              </div>
+            </ImageCard>
+          ))}
+        </ImagesRow>
+      )}
+
+      {/* 文件列表 */}
+      {hasFiles && files.map((file, index) => {
+        const ext = getFileExtension(file.name);
+        return (
+          <FileCard
+            key={index}
+            className="appflow-file-card"
+            $role={role}
+            href={file.url}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <span className="file-icon">{getFileIcon(ext)}</span>
+            <div className="file-info">
+              <span className="file-name">{file.name}</span>
+              <div className="file-meta">
+                {ext && <span className="file-type">{ext}</span>}
+              </div>
+            </div>
+          </FileCard>
+        );
+      })}
+    </AttachmentsArea>
+  );
+};
+
+export default MessageAttachments;

package/src/components/MessageBubble.tsx

@@ -7,12 +7,11 @@
 import React, { useEffect, useState, useCallback } from 'react';
 import styled from 'styled-components';
 import { Modal, Image, Space } from 'antd';
+import { MessageAttachments } from './MessageAttachments';
 import { loadEchartsScript } from '@/utils/loadEcharts';
 import { DocReferences, DocReferenceItem } from './DocReferences';
 import { WebSearchPanel } from './WebSearchPanel';
 import { HumanVerify, HistoryCard, CustomParamSchema } from './HumanVerify';
-import { A2UISurface } from './A2UIRenderer';
-import type { A2UIMessage } from './A2UIRenderer';
 import { BubbleContent } from '@/core';
 
 /** HumanVerify 提交数据类型 */
@@ -49,6 +48,10 @@ export interface MessageBubbleProps {
   status?: 'Running' | 'Success' | 'Error';
   /** 参考资料列表 */
   references?: DocReferenceItem[];
+  /** 图片URL列表（用户消息中上传的图片） */
+  images?: string[];
+  /** 文件列表（用户消息中上传的文件） */
+  files?: { name: string; url: string }[];
   /** 自定义类名 */
   className?: string;
   /** 自定义样式 */
@@ -60,21 +63,14 @@ export interface MessageBubbleProps {
   
   // ==================== HumanVerify相关Props ====================
   
-  /** 事件类型（用于特殊消息如 humanVerify、historyCard、a2ui） */
-  eventType?: 'humanVerify' | 'historyCard' | 'a2ui';
+  /** 事件类型（用于特殊消息如 humanVerify、historyCard） */
+  eventType?: 'humanVerify' | 'historyCard';
   /** HumanVerify 相关数据 */
   humanVerifyData?: HumanVerifyData;
   /** HistoryCard 相关数据（历史对话中的审核卡片） */
   historyCardData?: HistoryCardData;
   /** HumanVerify 提交回调 */
   onHumanVerifySubmit?: (data: HumanVerifySubmitData) => void;
-
-  // ==================== A2UI相关Props ====================
-
-  /** A2UI 消息数组（Agent 生成的声明式 UI 描述） */
-  a2uiMessages?: A2UIMessage[];
-  /** A2UI 用户交互回调 */
-  onA2UIAction?: (action: any) => void;
 }
 
 // 样式隔离容器
@@ -89,10 +85,8 @@ const StyledContainer = styled.div<{ $role: 'user' | 'bot' }>`
 const StyledBubble = styled.div<{ $role: 'user' | 'bot' }>`
   padding: 12px 16px;
   border-radius: 12px;
-  background: ${props => props.$role === 'user' 
-    ? 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' 
-    : 'rgba(205, 208, 220, 0.15)'};
-  color: ${props => props.$role === 'user' ? '#fff' : '#333'};
+  background: ${props => props.$role === 'user' ? '#e5effe' : 'rgba(205, 208, 220, 0.15)'};
+  color: '#333';
   word-break: break-word;
   
   /* 样式隔离 */
@@ -187,7 +181,7 @@ const StyledBubble = styled.div<{ $role: 'user' | 'bot' }>`
     border-radius: 4px;
   }
 
-  a {
+  a:not(.appflow-file-card) {
     color: ${props => props.$role === 'user' ? '#fff' : '#1890ff'};
     text-decoration: underline;
   }
@@ -270,6 +264,8 @@ export const MessageBubble: React.FC<MessageBubbleProps> = ({
   role = 'bot',
   status = 'Success',
   references = [],
+  images,
+  files,
   className,
   style,
   onReferenceClick,
@@ -279,9 +275,6 @@ export const MessageBubble: React.FC<MessageBubbleProps> = ({
   humanVerifyData,
   historyCardData,
   onHumanVerifySubmit,
-  // A2UI 相关 props
-  a2uiMessages,
-  onA2UIAction,
 }) => {
   const [modal, contextHolder] = Modal.useModal();
   
@@ -374,14 +367,6 @@ export const MessageBubble: React.FC<MessageBubbleProps> = ({
                 data={historyCardData}
               />
             )}
-
-            {/* A2UI 事件 - Agent 声明式 UI 渲染 */}
-            {eventType === 'a2ui' && a2uiMessages && a2uiMessages.length > 0 && (
-              <A2UISurface
-                messages={a2uiMessages}
-                onAction={onA2UIAction}
-              />
-            )}
             
             {/* 参考资料 */}
             {references && references.length > 0 && status === 'Success' && (
@@ -395,6 +380,14 @@ export const MessageBubble: React.FC<MessageBubbleProps> = ({
               </ReferencesContainer>
             )}
           </BubbleContent>
+
+          {/* 附件展示区域：图片和文件 */}
+          <MessageAttachments 
+            role={role} 
+            images={images} 
+            files={files} 
+          />
+
           {contextHolder}
         </StyledBubble>
       </StyledContainer>

package/src/index.ts

@@ -28,6 +28,7 @@ export { MessageBubble } from './components/MessageBubble';
 export { RichMessageBubble } from './components/RichMessageBubble';
 export { DocReferences } from './components/DocReferences';
 export { WebSearchPanel } from './components/WebSearchPanel';
+export { ChatSender } from './components/ChatSender';
 
 // ==================== UI 组件类型导出 ====================
 export type { MarkdownRendererProps } from './components/MarkdownRenderer';
@@ -40,6 +41,7 @@ export type {
 export type { RichMessageBubbleProps } from './components/RichMessageBubble';
 export type { DocReferencesProps, DocReferenceItem } from './components/DocReferences';
 export type { WebSearchPanelProps, WebSearchItem } from './components/WebSearchPanel';
+export type { ChatSenderProps, ChatSenderSubmitData, ChatAttachment } from './components/ChatSender';
 
 // ==================== Core 组件导出（纯展示组件，供高级定制） ====================
 export { BubbleContent } from './core/BubbleContent';
@@ -76,12 +78,6 @@ export type {
   ValidationError,
 } from './components/HumanVerify';
 
-// ==================== A2UI 组件导出 ====================
-export { A2UISurface, A2UIStaticViewer } from './components/A2UIRenderer';
-
-// ==================== A2UI 组件类型导出 ====================
-export type { A2UISurfaceProps, A2UIStaticViewerProps, A2UIMessage } from './components/A2UIRenderer';
-
 // ==================== 工具函数导出 ====================
 export { loadEchartsScript } from './utils/loadEcharts';
 export { loadMermaidScript } from './utils/loadMermaid';

package/src/main.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

package/src/services/ChatService.ts

@@ -35,6 +35,7 @@ export interface ModelInfo {
   config?: {
     image?: boolean;
     file?: boolean;
+    audio?: boolean;
     webSearch?: boolean;
     fileConfig?: string;
   };

package/src/components/A2UIRenderer/A2UIRenderer.tsx

@@ -1,181 +0,0 @@
-/**
- * A2UISurface - A2UI 声明式 UI 渲染组件
- * 
- * 基于 Google A2UI 协议，将 Agent 生成的声明式 JSON 消息
- * 渲染为原生 React 组件。支持流式增量更新和自定义组件注册。
- * 
- */
-
-import React, { useEffect, useRef, useCallback } from 'react';
-import styled from 'styled-components';
-import {
-  A2UIProvider,
-  A2UIRenderer,
-  A2UIViewer,
-  useA2UI,
-  initializeDefaultCatalog,
-  ComponentRegistry,
-} from '@a2ui/react';
-import type {
-  ServerToClientMessage,
-  OnActionCallback,
-  A2UIViewerProps,
-} from '@a2ui/react';
-
-// 初始化默认组件目录（全局只需执行一次）
-initializeDefaultCatalog();
-
-// ==================== Types ====================
-
-/** A2UI 协议消息（v0.8 格式，透传给 @a2ui/react 处理） */
-export type A2UIMessage = ServerToClientMessage;
-
-export interface A2UISurfaceProps {
-  /** A2UI JSON 消息数组（来自 Agent 的响应） */
-  messages: A2UIMessage[];
-  /** 渲染的 Surface ID（默认 'main'） */
-  surfaceId?: string;
-  /** 用户在 A2UI 组件上的交互回调 */
-  onAction?: OnActionCallback;
-  /** 自定义组件注册表（可选，默认使用内置组件） */
-  registry?: ComponentRegistry;
-  /** 自定义类名 */
-  className?: string;
-  /** 自定义样式 */
-  style?: React.CSSProperties;
-}
-
-/** A2UIViewer 的 Props，用于静态 JSON 渲染场景 */
-export type A2UIStaticViewerProps = A2UIViewerProps;
-
-// ==================== Styled Components ====================
-
-const A2UIContainer = styled.div`
-  margin-top: 12px;
-  width: 100%;
-  max-width: 100%;
-`;
-
-// ==================== Internal Component ====================
-
-/**
- * 内部组件：负责消息处理和 Surface 渲染
- * 必须在 A2UIProvider 内部使用，以获取 useA2UI hook 的上下文
- */
-const A2UISurfaceInner: React.FC<{
-  messages: A2UIMessage[];
-  surfaceId: string;
-  registry?: ComponentRegistry;
-  className?: string;
-  style?: React.CSSProperties;
-}> = ({ messages, surfaceId, registry, className, style }) => {
-  const { processMessages, getSurface } = useA2UI();
-  const processedCountRef = useRef(0);
-
-  // 增量处理新到达的消息（支持流式场景）
-  useEffect(() => {
-    if (messages.length > processedCountRef.current) {
-      const newMessages = messages.slice(processedCountRef.current);
-      processMessages(newMessages);
-      processedCountRef.current = messages.length;
-    }
-  }, [messages, processMessages]);
-
-  // 当消息被清空时重置计数器
-  useEffect(() => {
-    if (messages.length === 0) {
-      processedCountRef.current = 0;
-    }
-  }, [messages.length]);
-
-  const surface = getSurface(surfaceId);
-
-  if (!surface) {
-    return null;
-  }
-
-  return (
-    <A2UIContainer className={className} style={style}>
-      <A2UIRenderer
-        surfaceId={surfaceId}
-        registry={registry}
-      />
-    </A2UIContainer>
-  );
-};
-
-// ==================== Exported Components ====================
-
-/**
- * A2UISurface - A2UI 声明式 UI 渲染组件（流式消息场景）
- * 
- * 接收 Agent 发送的 A2UI 协议消息数组，增量处理并渲染对应的 Surface。
- * 内部封装了 A2UIProvider，可直接作为 BubbleContent 的 children 使用。
- * 
- * @example
- * ```tsx
- * // 作为 BubbleContent 的 children 使用
- * <BubbleContent content={content} status={status}>
- *   <A2UISurface 
- *     messages={a2uiMessages} 
- *     surfaceId="main"
- *     onAction={(msg) => console.log('用户操作:', msg)} 
- *   />
- * </BubbleContent>
- * ```
- */
-export const A2UISurface: React.FC<A2UISurfaceProps> = ({
-  messages,
-  surfaceId = 'main',
-  onAction,
-  registry,
-  className,
-  style,
-}) => {
-  const handleAction: OnActionCallback = useCallback((message) => {
-    onAction?.(message);
-  }, [onAction]);
-
-  return (
-    <A2UIProvider onAction={handleAction}>
-      <A2UISurfaceInner
-        messages={messages}
-        surfaceId={surfaceId}
-        registry={registry}
-        className={className}
-        style={style}
-      />
-    </A2UIProvider>
-  );
-};
-
-/**
- * A2UIStaticViewer - A2UI 静态 JSON 渲染组件
- * 
- * 用于直接从静态的组件定义和数据渲染 UI，无需流式消息。
- * 适用于已有完整 A2UI 组件树的场景。
- * 
- * @example
- * ```tsx
- * const components = [
- *   { id: 'root', component: { Card: { child: 'text' } } },
- *   { id: 'text', component: { Text: { text: { path: '/message' } } } },
- * ];
- * 
- * <A2UIStaticViewer
- *   root="root"
- *   components={components}
- *   data={{ message: 'Hello World!' }}
- *   onAction={(action) => console.log('Action:', action)}
- * />
- * ```
- */
-export const A2UIStaticViewer: React.FC<A2UIStaticViewerProps> = (props) => {
-  return (
-    <A2UIContainer>
-      <A2UIViewer {...props} />
-    </A2UIContainer>
-  );
-};
-
-export default A2UISurface;

package/src/components/A2UIRenderer/index.ts

@@ -1 +0,0 @@
-export { A2UISurface, A2UIStaticViewer, type A2UISurfaceProps, type A2UIStaticViewerProps, type A2UIMessage } from './A2UIRenderer';