@alicloud/appflow-chat 0.0.4-alpha.2 → 0.0.4-alpha.4

package/src/components/MessageAttachments.tsx

@@ -0,0 +1,227 @@
+/**
+ * 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: 180px;
+  color: #333;
+
+  .image-preview {
+    border-radius: 6px;
+    overflow: hidden;
+    cursor: pointer;
+
+    .ant-image {
+      display: block;
+    }
+
+    img {
+      max-width: 100%;
+      height: auto;
+      display: block;
+    }
+  }
+`;
+
+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: 100%;
+  box-sizing: border-box;
+
+  &: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,6 +7,7 @@
 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';
@@ -47,6 +48,10 @@ export interface MessageBubbleProps {
   status?: 'Running' | 'Success' | 'Error';
   /** 参考资料列表 */
   references?: DocReferenceItem[];
+  /** 图片URL列表（用户消息中上传的图片） */
+  images?: string[];
+  /** 文件列表（用户消息中上传的文件） */
+  files?: { name: string; url: string }[];
   /** 自定义类名 */
   className?: string;
   /** 自定义样式 */
@@ -80,11 +85,10 @@ 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;
+  overflow: hidden;
   
   /* 样式隔离 */
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
@@ -178,7 +182,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;
   }
@@ -261,6 +265,8 @@ export const MessageBubble: React.FC<MessageBubbleProps> = ({
   role = 'bot',
   status = 'Success',
   references = [],
+  images,
+  files,
   className,
   style,
   onReferenceClick,
@@ -375,6 +381,14 @@ export const MessageBubble: React.FC<MessageBubbleProps> = ({
               </ReferencesContainer>
             )}
           </BubbleContent>
+
+          {/* 附件展示区域：图片和文件 */}
+          <MessageAttachments 
+            role={role} 
+            images={images} 
+            files={files} 
+          />
+
           {contextHolder}
         </StyledBubble>
       </StyledContainer>

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;
   };