@alicloud/appflow-chat 0.0.1-beta.1

package/src/core/SourceContent.tsx

@@ -0,0 +1,285 @@
+/**
+ * SourceContent - 参考资料核心展示组件
+ * 
+ * 支持的内容类型：
+ * - rag: 知识库参考资料
+ * - web_search: 网页搜索结果
+ */
+
+import React, { useMemo } from 'react';
+import styled from 'styled-components';
+import { Image } from 'antd';
+import { SearchOutlined } from '@ant-design/icons';
+import { flatten, uniq } from 'lodash-es';
+
+// 参考资料项类型
+export interface SourceItem {
+  /** 标题 */
+  title?: string;
+  Title?: string;
+  /** 内容文本 */
+  text?: string;
+  Text?: string;
+  /** 索引序号 */
+  index?: string;
+  Index?: string;
+  /** 类型：rag-知识库, web_search-网页搜索 */
+  type?: 'rag' | 'web_search' | string;
+  Type?: string;
+  /** 图片列表 */
+  images?: string[];
+  Images?: string[];
+  /** 链接URL（网页搜索结果） */
+  url?: string;
+  Url?: string;
+  /** 文档ID */
+  doc_id?: string;
+  doc_name?: string;
+  index_id?: string;
+}
+
+export interface SourceContentProps {
+  /** 参考资料列表 */
+  items: SourceItem[];
+  /** 渲染状态 */
+  status?: 'Running' | 'Success' | 'Error' | string;
+  /** 是否使用大写字段名（PageConfig模式） */
+  isPageConfig?: boolean;
+  /** 点击参考资料回调 */
+  onItemClick?: (item: SourceItem) => void;
+  /** 点击网页搜索结果回调 */
+  onWebSearchClick?: (items: SourceItem[]) => void;
+  /** 自定义类名 */
+  className?: string;
+  /** 自定义样式 */
+  style?: React.CSSProperties;
+}
+
+// 样式组件
+const StyledSource = styled.div`
+  margin-top: 16px;
+  border-top: 1px solid #e8e8e8;
+  padding-top: 16px;
+`;
+
+const StyledAnswerSource = styled.div`
+  display: flex;
+  gap: 8px;
+  margin-bottom: 8px;
+  align-items: baseline;
+`;
+
+const StyledSourceItem = styled.div`
+  margin-bottom: 8px;
+  cursor: pointer;
+  width: 100%;
+`;
+
+const StyledSourceItemSpace = styled.div`
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: flex-start;
+`;
+
+const StyledItemOrder = styled.div`
+  align-items: center;
+  border: 0.5px solid #2c2c73;
+  border-radius: 2px;
+  display: flex;
+  font-size: 10px;
+  height: 12px;
+  justify-content: center;
+  line-height: 1;
+  min-width: 14px;
+  white-space: nowrap;
+`;
+
+const StyledItemTitle = styled.div`
+  border: 0.5px solid #9296a9;
+  border-radius: 4px;
+  color: #707279;
+  font-size: 12px;
+  height: 28px;
+  line-height: 28px;
+  margin: 0;
+  padding: 0 8px;
+  width: auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+const StyledWrapSpace = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+`;
+
+const StyledImageBox = styled.div`
+  border: 1px solid #e8e8e8;
+  border-radius: 4px;
+  padding: 4px;
+`;
+
+const StyledWebSearchSource = styled.div`
+  display: flex;
+  gap: 8px;
+  margin-bottom: 8px;
+  align-items: center;
+  background: rgb(230, 232, 236);
+  border-radius: 10px;
+  width: fit-content;
+  padding: 7px 14px;
+  font-size: 12px;
+  cursor: pointer;
+  
+  &:hover {
+    background: rgb(220, 222, 226);
+  }
+`;
+
+const StyledLabel = styled.div`
+  color: #707279;
+  font-size: 12px;
+  min-width: 60px;
+`;
+
+// 单个参考资料项组件
+interface SourceItemComponentProps {
+  item: SourceItem;
+  isPageConfig?: boolean;
+  onClick: (item: SourceItem) => void;
+}
+
+const SourceItemComponent: React.FC<SourceItemComponentProps> = ({ 
+  item, 
+  isPageConfig,
+  onClick 
+}) => {
+  const index = isPageConfig ? item.Index : item.index;
+  const title = isPageConfig ? item.Title : item.title;
+
+  return (
+    <StyledSourceItem onClick={() => onClick(item)}>
+      <StyledSourceItemSpace>
+        {index && <StyledItemOrder>{index}</StyledItemOrder>}
+        {title && <StyledItemTitle>{title}</StyledItemTitle>}
+      </StyledSourceItemSpace>
+    </StyledSourceItem>
+  );
+};
+
+/**
+ * SourceContent - 参考资料核心展示组件
+ * 
+ * @example
+ * ```tsx
+ * <SourceContent 
+ *   items={[
+ *     { title: '参考文档1', text: '内容...', index: '1', type: 'rag' },
+ *     { title: '搜索结果1', url: 'https://...', type: 'web_search' }
+ *   ]}
+ *   status="Success"
+ *   onItemClick={(item) => console.log('点击了', item)}
+ *   onWebSearchClick={(items) => console.log('网页搜索', items)}
+ * />
+ * ```
+ */
+export const SourceContent: React.FC<SourceContentProps> = ({
+  items,
+  status = 'Success',
+  isPageConfig = false,
+  onItemClick,
+  onWebSearchClick,
+  className,
+  style,
+}) => {
+  // 提取唯一图片
+  const uniqueImages = useMemo(() => {
+    let images;
+    if (isPageConfig) {
+      images = items?.filter(item => item.Images)?.map(item => item.Images);
+    } else {
+      images = items?.filter(item => item.images)?.map(item => item.images);
+    }
+    return uniq(flatten(images));
+  }, [items, isPageConfig]);
+
+  // RAG类型的参考资料
+  const ragArray = useMemo(() => {
+    if (isPageConfig) {
+      return items?.filter(item => item.Type === 'rag') || [];
+    } else {
+      return items?.filter(item => item.type === 'rag') || [];
+    }
+  }, [items, isPageConfig]);
+
+  // 网页搜索结果
+  const webSearchArray = useMemo(() => {
+    if (isPageConfig) {
+      return items?.filter(item => item.Type === 'web_search') || [];
+    } else {
+      return items?.filter(item => item.type === 'web_search') || [];
+    }
+  }, [items, isPageConfig]);
+
+  // 点击处理
+  const handleItemClick = (item: SourceItem) => {
+    onItemClick?.(item);
+  };
+
+  const handleWebSearchClick = () => {
+    onWebSearchClick?.(webSearchArray);
+  };
+
+  // 只在成功状态下显示
+  if (status !== 'Success') {
+    return null;
+  }
+
+  return (
+    <StyledSource className={className} style={style}>
+      {/* 网页搜索结果 */}
+      {webSearchArray.length > 0 && (
+        <StyledWebSearchSource onClick={handleWebSearchClick}>
+          <SearchOutlined />
+          <div>已搜索到{webSearchArray.length}个网页</div>
+        </StyledWebSearchSource>
+      )}
+
+      {/* RAG参考资料 */}
+      {ragArray.length > 0 && (
+        <StyledAnswerSource>
+          <StyledLabel>回答来源：</StyledLabel>
+          <div style={{ width: 'calc(100% - 70px)' }}>
+            {ragArray.map((item, index) => (
+              <SourceItemComponent
+                key={index}
+                item={item}
+                isPageConfig={isPageConfig}
+                onClick={handleItemClick}
+              />
+            ))}
+          </div>
+        </StyledAnswerSource>
+      )}
+
+      {/* 图片来源 */}
+      {uniqueImages.length > 0 && (
+        <StyledAnswerSource>
+          <StyledLabel>图片来源：</StyledLabel>
+          <StyledWrapSpace>
+            {uniqueImages.map((image, index) => (
+              <StyledImageBox key={index}>
+                <Image src={image} width={50} height={50} />
+              </StyledImageBox>
+            ))}
+          </StyledWrapSpace>
+        </StyledAnswerSource>
+      )}
+    </StyledSource>
+  );
+};
+
+export default SourceContent;

package/src/core/WebSearchContent.tsx

@@ -0,0 +1,219 @@
+/**
+ * WebSearchContent - 网页搜索结果核心展示组件
+ */
+
+import React from 'react';
+import styled from 'styled-components';
+import { Drawer, List, Typography } from 'antd';
+import { CloseOutlined } from '@ant-design/icons';
+
+const { Title } = Typography;
+
+// 网页搜索结果项类型
+export interface WebSearchItem {
+  /** 标题 */
+  title?: string;
+  Title?: string;
+  /** 内容摘要 */
+  text?: string;
+  Text?: string;
+  /** 链接URL */
+  url?: string;
+  Url?: string;
+}
+
+export interface WebSearchContentProps {
+  /** 搜索结果列表 */
+  items?: WebSearchItem[];
+  /** 是否显示 */
+  open?: boolean;
+  /** 关闭回调 */
+  onClose?: () => void;
+  /** 是否使用大写字段名（PageConfig模式） */
+  isPageConfig?: boolean;
+  /** 面板宽度 */
+  width?: number | string;
+  /** 挂载容器 */
+  getContainer?: () => HTMLElement;
+  /** 自定义类名 */
+  className?: string;
+  /** 自定义样式 */
+  style?: React.CSSProperties;
+}
+
+// 样式组件
+const StyledContainer = styled.div<{ $isMobile: boolean }>`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  ${props => props.$isMobile && `
+    padding: 16px;
+  `}
+`;
+
+const StyledContent = styled.div`
+  flex: 1;
+  overflow-y: auto;
+`;
+
+const StyledHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  padding-bottom: 16px;
+  border-bottom: 1px solid #f0f0f0;
+  margin-bottom: 16px;
+`;
+
+const StyledCloseButton = styled.div`
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 4px;
+  color: #666;
+  font-size: 14px;
+  
+  &:hover {
+    background: #f5f5f5;
+    color: #333;
+  }
+`;
+
+const StyledMeta = styled.div`
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+`;
+
+const StyledMetaIndex = styled.span`
+  font-weight: 600;
+  color: #333;
+  min-width: 20px;
+`;
+
+const StyledMetaTitle = styled.div`
+  color: #1890ff;
+  cursor: pointer;
+  flex: 1;
+  
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+const StyledMetaText = styled.div`
+  color: #666;
+  font-size: 13px;
+  cursor: pointer;
+  margin-top: 4px;
+  
+  &:hover {
+    color: #333;
+  }
+`;
+
+/**
+ * WebSearchContent - 网页搜索结果核心展示组件
+ * 
+ * @example
+ * ```tsx
+ * <WebSearchContent 
+ *   items={[
+ *     { title: '搜索结果1', text: '内容摘要...', url: 'https://...' }
+ *   ]}
+ *   open={true}
+ *   onClose={() => setOpen(false)}
+ * />
+ * ```
+ */
+export const WebSearchContent: React.FC<WebSearchContentProps> = ({
+  items = [],
+  open = false,
+  onClose,
+  isPageConfig = false,
+  width = 400,
+  getContainer,
+  className,
+  style,
+}) => {
+  // 判断是否移动端
+  const isMobile = typeof window !== 'undefined' && window.innerWidth <= 500;
+  const panelWidth = isMobile ? '100%' : width;
+
+  // 打开链接
+  const handleOpenUrl = (item: WebSearchItem) => {
+    const url = isPageConfig ? item.Url : item.url;
+    if (url) {
+      window.open(url, '_blank');
+    }
+  };
+
+  // 关闭处理
+  const handleClose = () => {
+    onClose?.();
+  };
+
+  return (
+    <Drawer
+      className={className}
+      style={style}
+      placement="right"
+      open={open}
+      mask={false}
+      width={panelWidth}
+      destroyOnClose
+      closable={false}
+      bodyStyle={{
+        boxShadow: 'none',
+        outline: 'none',
+        padding: '16px',
+      }}
+      getContainer={getContainer}
+      onClose={handleClose}
+    >
+      <StyledContainer $isMobile={isMobile}>
+        <StyledContent>
+          <StyledHeader>
+            <Title level={5} style={{ margin: 0 }}>搜索结果</Title>
+            <StyledCloseButton onClick={handleClose}>
+              <CloseOutlined />
+            </StyledCloseButton>
+          </StyledHeader>
+          
+          <List
+            itemLayout="horizontal"
+            dataSource={items}
+            renderItem={(item, index) => {
+              const title = isPageConfig ? item.Title : item.title;
+              const text = isPageConfig ? item.Text : item.text;
+              
+              return (
+                <List.Item>
+                  <List.Item.Meta
+                    title={
+                      <StyledMeta>
+                        <StyledMetaIndex>{index + 1}.</StyledMetaIndex>
+                        <StyledMetaTitle
+                          onClick={() => handleOpenUrl(item)}
+                          dangerouslySetInnerHTML={{ __html: title || '' }}
+                        />
+                      </StyledMeta>
+                    }
+                    description={
+                      <StyledMetaText
+                        onClick={() => handleOpenUrl(item)}
+                        dangerouslySetInnerHTML={{ __html: text || '' }}
+                      />
+                    }
+                  />
+                </List.Item>
+              );
+            }}
+          />
+        </StyledContent>
+      </StyledContainer>
+    </Drawer>
+  );
+};
+
+export default WebSearchContent;

package/src/core/index.ts

@@ -0,0 +1,16 @@
+/**
+ * Core 组件导出
+ * 这些是纯展示组件，不包含业务逻辑
+ */
+
+export { BubbleContent } from './BubbleContent';
+export type { BubbleContentProps } from './BubbleContent';
+
+export { RichBubbleContent } from './RichBubbleContent';
+export type { RichBubbleContentProps } from './RichBubbleContent';
+
+export { SourceContent } from './SourceContent';
+export type { SourceContentProps, SourceItem } from './SourceContent';
+
+export { WebSearchContent } from './WebSearchContent';
+export type { WebSearchContentProps, WebSearchItem } from './WebSearchContent';

package/src/hooks/usePreSignUpload.ts

@@ -0,0 +1,36 @@
+import axios from "axios";
+
+export interface FetchUploadResponseData {
+  /** 文件全路径链接 */
+  url?: string;
+  /** 文件 oss key */
+  key?: string;
+  /** oss bucket name */
+  bucketName?: string;
+}
+
+/**
+ * 上传数据到指定bucket
+ * @param file 文件
+ * @param signedUrl 预签名URL
+ * @returns
+ */
+export const fetchUploadApi = (
+  file: Blob,
+  signedUrl: string,
+): Promise<FetchUploadResponseData> => {
+  return new Promise<FetchUploadResponseData>((resolve, reject) => {
+    // 发送 PUT 请求上传文件
+    axios.put(signedUrl, file, {
+      headers: {
+        'Content-Type': 'application/octet-stream',
+        'x-oss-object-acl': 'private',
+      },
+    }).then(() => {
+      // 文件上传成功 请求体为空 暂定判断 ok
+      resolve({});
+    }).catch(error => reject(error));
+  });
+};
+
+export default fetchUploadApi;

package/src/index.ts

@@ -0,0 +1,80 @@
+/**
+ * Appflow Chat - NPM 包入口文件
+ * 
+ * 使用方式：
+ * import { chatService, MarkdownRenderer, BubbleContent } from '@ali/appflow-chat';
+ */
+
+// ==================== 服务导出 ====================
+export { chatService } from './services/ChatService';
+export { default as ChatService } from './services/ChatService';
+
+// ==================== 服务类型导出 ====================
+export type {
+  SetupConfig,
+  ChatConfig,
+  ModelInfo,
+  ModelCapabilities,
+  ChatMessage,
+  ChatStreamCallbacks,
+  ChatStream,
+  HistoryMessage,
+  ChatSession,
+} from './services/ChatService';
+
+// ==================== UI 组件导出（简化接口，包含默认交互） ====================
+export { MarkdownRenderer } from './components/MarkdownRenderer';
+export { MessageBubble } from './components/MessageBubble';
+export { RichMessageBubble } from './components/RichMessageBubble';
+export { DocReferences } from './components/DocReferences';
+export { WebSearchPanel } from './components/WebSearchPanel';
+
+// ==================== UI 组件类型导出 ====================
+export type { MarkdownRendererProps } from './components/MarkdownRenderer';
+export type {
+  MessageBubbleProps,
+  HumanVerifySubmitData,
+  HumanVerifyData,
+  HistoryCardData
+} from './components/MessageBubble';
+export type { RichMessageBubbleProps } from './components/RichMessageBubble';
+export type { DocReferencesProps, DocReferenceItem } from './components/DocReferences';
+export type { WebSearchPanelProps, WebSearchItem } from './components/WebSearchPanel';
+
+// ==================== Core 组件导出（纯展示组件，供高级定制） ====================
+export { BubbleContent } from './core/BubbleContent';
+export { RichBubbleContent } from './core/RichBubbleContent';
+export { SourceContent } from './core/SourceContent';
+export { WebSearchContent } from './core/WebSearchContent';
+
+// ==================== Core 组件类型导出 ====================
+export type { BubbleContentProps } from './core/BubbleContent';
+export type { RichBubbleContentProps } from './core/RichBubbleContent';
+export type { SourceContentProps, SourceItem } from './core/SourceContent';
+export type { WebSearchContentProps } from './core/WebSearchContent';
+
+// ==================== Context 导出 ====================
+export { useRichBubbleContext, RichBubbleProvider } from './context/RichBubble';
+export type { RichBubbleContextValue } from './context/RichBubble';
+
+// ==================== Markdown 组件导出 ====================
+export { MarkdownView } from './markdown';
+export type { MarkdownViewProps } from './markdown';
+
+// ==================== HumanVerify 组件导出 ====================
+export { HumanVerify } from './components/HumanVerify';
+export { HistoryCard, convertSchemaToUpperCase } from './components/HumanVerify';
+export { CustomParamsRenderer, useCustomParamsRenderer, validateCustomParams } from './components/HumanVerify';
+
+// ==================== HumanVerify 组件类型导出 ====================
+export type { HumanVerifyProps } from './components/HumanVerify';
+export type { HistoryCardProps } from './components/HumanVerify';
+export type {
+  CustomParamSchema,
+  CustomParamsRendererProps,
+  ValidationResult,
+  ValidationError,
+} from './components/HumanVerify';
+
+// ==================== 工具函数导出 ====================
+export { loadEchartsScript } from './utils/loadEcharts';