@alicloud/appflow-chat 0.0.3 → 0.0.4-alpha.10

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,8 @@
 import React, { useEffect, useState, useCallback } from 'react';
 import styled from 'styled-components';
 import { Modal, Image, Space } from 'antd';
+import { MessageAttachments } from './MessageAttachments';
+import { AudioPlayer } from './AudioPlayer';
 import { loadEchartsScript } from '@/utils/loadEcharts';
 import { DocReferences, DocReferenceItem } from './DocReferences';
 import { WebSearchPanel } from './WebSearchPanel';
@@ -47,6 +49,12 @@ export interface MessageBubbleProps {
   status?: 'Running' | 'Success' | 'Error';
   /** 参考资料列表 */
   references?: DocReferenceItem[];
+  /** 图片URL列表（用户消息中上传的图片） */
+  images?: string[];
+  /** 文件列表（用户消息中上传的文件） */
+  files?: { name: string; url: string }[];
+  /** 语音消息URL */
+  audio?: string;
   /** 自定义类名 */
   className?: string;
   /** 自定义样式 */
@@ -80,11 +88,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 +185,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 +268,9 @@ export const MessageBubble: React.FC<MessageBubbleProps> = ({
   role = 'bot',
   status = 'Success',
   references = [],
+  images,
+  files,
+  audio,
   className,
   style,
   onReferenceClick,
@@ -334,6 +344,9 @@ export const MessageBubble: React.FC<MessageBubbleProps> = ({
   const handleReferenceClick = onReferenceClick || defaultReferenceClick;
   const handleWebSearchClick = onWebSearchClick || defaultWebSearchClick;
 
+  // 纯语音消息：跳过 StyledBubble 包裹，直接渲染 AudioPlayer
+  const isAudioOnly = !!(audio && !content);
+
   return (
     <>
       <StyledContainer 
@@ -341,42 +354,55 @@ export const MessageBubble: React.FC<MessageBubbleProps> = ({
         className={`appflow-sdk-message-bubble ${className || ''}`} 
         style={style}
       >
-        <StyledBubble $role={role}>
-          {/* 使用核心组件渲染内容 */}
-          <BubbleContent 
-            content={content} 
-            status={status} 
-            role={role}
-          >
-            {/* HumanVerify事件 - 人工审核表单 */}
-            {eventType === 'humanVerify' && humanVerifyData && (
-              <HumanVerify 
-                data={humanVerifyData}
-                onSubmit={onHumanVerifySubmit}
-              />
-            )}
-            
-            {/* HistoryCard 事件 - 历史对话中的审核卡片 */}
-            {eventType === 'historyCard' && historyCardData && (
-              <HistoryCard 
-                data={historyCardData}
-              />
-            )}
-            
-            {/* 参考资料 */}
-            {references && references.length > 0 && status === 'Success' && (
-              <ReferencesContainer>
-                <DocReferences
-                  items={references}
-                  status={status}
-                  onItemClick={handleReferenceClick}
-                  onWebSearchClick={handleWebSearchClick}
+        {isAudioOnly ? (
+          /* 纯语音消息：直接渲染播放器，无气泡包裹 */
+          <AudioPlayer src={audio} role={role} />
+        ) : (
+          <StyledBubble $role={role}>
+            {/* 使用核心组件渲染内容 */}
+            <BubbleContent 
+              content={content} 
+              status={status} 
+              role={role}
+            >
+              {/* HumanVerify事件 - 人工审核表单 */}
+              {eventType === 'humanVerify' && humanVerifyData && (
+                <HumanVerify 
+                  data={humanVerifyData}
+                  onSubmit={onHumanVerifySubmit}
+                />
+              )}
+              
+              {/* HistoryCard 事件 - 历史对话中的审核卡片 */}
+              {eventType === 'historyCard' && historyCardData && (
+                <HistoryCard 
+                  data={historyCardData}
                 />
-              </ReferencesContainer>
-            )}
-          </BubbleContent>
-          {contextHolder}
-        </StyledBubble>
+              )}
+              
+              {/* 参考资料 */}
+              {references && references.length > 0 && status === 'Success' && (
+                <ReferencesContainer>
+                  <DocReferences
+                    items={references}
+                    status={status}
+                    onItemClick={handleReferenceClick}
+                    onWebSearchClick={handleWebSearchClick}
+                  />
+                </ReferencesContainer>
+              )}
+            </BubbleContent>
+
+            {/* 附件展示区域：图片和文件 */}
+            <MessageAttachments 
+              role={role} 
+              images={images} 
+              files={files}
+            />
+
+            {contextHolder}
+          </StyledBubble>
+        )}
       </StyledContainer>
 
       {/* 默认的网页搜索抽屉（仅在用户未传入onWebSearchClick时使用） */}

package/src/index.ts

@@ -20,6 +20,7 @@ export type {
   ChatStream,
   HistoryMessage,
   ChatSession,
+  UploadResult,
 } from './services/ChatService';
 
 // ==================== UI 组件导出（简化接口，包含默认交互） ====================
@@ -28,6 +29,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 +42,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';

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/markdown/index.tsx

@@ -53,9 +53,28 @@ export const MarkdownView: React.FC<MarkdownViewProps> = ({
           />
         );
       },
-      code: ({ node, className, ...props }: any) => {
+      code: ({ node, inline, className, ...props }: any) => {
+        // 判断是否为行内代码
+        // 行内代码没有 className，且 inline 为 true
+        const isInline = inline || (!className && !node?.properties?.className);
+        
+        if (isInline) {
+          // 行内代码 - 使用简单的 <code> 标签样式
+          return (
+            <code style={{
+              backgroundColor: 'rgba(175, 184, 193, 0.2)',
+              padding: '0.2em 0.4em',
+              borderRadius: '3px',
+              fontSize: '85%',
+              fontFamily: 'Consolas, Monaco, "Andale Mono", monospace',
+            }}>
+              {props.children}
+            </code>
+          );
+        }
+
         // 元信息中解析语言类型
-        const languageType = /language-(\w+)/.exec(node?.properties?.className || '')?.[0];
+        const languageType = /language-(\w+)/.exec(node?.properties?.className || className || '')?.[0];
         const langFromMeta = node?.position?.start?.line === 2 ? 'language-file' : null;
         const finalLang = languageType || langFromMeta;