@baishuyun/ai-design 2.1.0-alpha.0 → 2.1.0-alpha.2

package/src/components/attachment-part.tsx

@@ -1,296 +1,296 @@
-import { ComponentType } from 'react';
-import { getIconUnicode } from '@baishuyun/ai-feat-utils';
-import { cn } from '../lib/utils';
-import { FontIcon } from './font-icon';
-import { ImgMsgPart } from './img-part';
-import { XlsxIcon, CsvFileIcon, TxtFileIcon, UnknownFileIcon } from './bs-icons';
-
-/** File part from AI message */
-export interface FilePart {
-  type: 'file';
-  url: string;
-  name?: string;
-  mediaType?: string;
-}
-
-export interface AttachmentPartProps {
-  part: FilePart;
-  className?: string;
-  /** Size in pixels (width & height), defaults to 102 */
-  size?: number;
-  /** Show only the icon without file name */
-  iconOnly?: boolean;
-  /** Click handler for the attachment */
-  onClick?: (part: FilePart) => void;
-}
-
-type FileIconComponent = ComponentType<{ color?: string }>;
-
-/**
- * 字体图标方案：文件类型图标使用 baishu 主字体的 icon-bsy-* 字形
- * （码位见 ai-feat-utils/iconfont.ts）。注意宿主的 .icon-bsy-form 类自带
- * color 规则（PC 为 #0265ff），继承色会被覆盖，因此颜色必须通过
- * FontIcon 的 color prop 以内联样式落到 <i> 上
- */
-const createFontFileIcon = (iconName: string): FileIconComponent => {
-  const FontFileIcon = ({ color }: { color?: string }) => (
-    <FontIcon
-      fontCls="icon-bsy-form"
-      code={getIconUnicode(iconName)}
-      color={color}
-      style={{ fontSize: 16, lineHeight: 1 }}
-    />
-  );
-  FontFileIcon.displayName = `FontFileIcon(${iconName})`;
-  return FontFileIcon;
-};
-
-const DocFileIcon = createFontFileIcon('bsy-doc');
-const DocxFileIcon = createFontFileIcon('bsy-docx');
-const PptFileIcon = createFontFileIcon('bsy-ppt');
-const PptxFileIcon = createFontFileIcon('bsy-pptx');
-const PdfFileIcon = createFontFileIcon('bsy-pdf');
-const ZipFileIcon = createFontFileIcon('bsy-zip');
-const RarFileIcon = createFontFileIcon('bsy-rar');
-const Mp4FileIcon = createFontFileIcon('bsy-mp4');
-const WebmFileIcon = createFontFileIcon('bsy-webm');
-const MovFileIcon = createFontFileIcon('bsy-mov');
-const AudioFileIcon = createFontFileIcon('bsy-ogg');
-
-export interface FileTypeConfig {
-  icon: FileIconComponent;
-  /** Icon original size for scaling */
-  iconSize: number;
-  /** Icon color (对齐 baishu BsyFileUpload 的 icon-bsy-* 配色)，仅对字体图标生效 */
-  color?: string;
-}
-
-/** Map media types to icon configurations */
-const FILE_TYPE_MAP: Record<string, FileTypeConfig> = {
-  // Excel files
-  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': {
-    icon: XlsxIcon,
-    iconSize: 52,
-  },
-  'application/vnd.ms-excel': { icon: XlsxIcon, iconSize: 52 },
-
-  // CSV files
-  'text/csv': { icon: CsvFileIcon, iconSize: 16 },
-
-  // Text files
-  'text/plain': { icon: TxtFileIcon, iconSize: 16 },
-  'application/octet-stream': { icon: TxtFileIcon, iconSize: 16 }, // treat as text for ts/js files
-
-  // Word files
-  'application/msword': { icon: DocFileIcon, iconSize: 16, color: '#096dd9' },
-  'application/vnd.openxmlformats-officedocument.wordprocessingml.document': {
-    icon: DocxFileIcon,
-    iconSize: 16,
-    color: '#096dd9',
-  },
-
-  // PowerPoint files
-  'application/vnd.ms-powerpoint': { icon: PptFileIcon, iconSize: 16, color: '#d46b08' },
-  'application/vnd.openxmlformats-officedocument.presentationml.presentation': {
-    icon: PptxFileIcon,
-    iconSize: 16,
-    color: '#08979c',
-  },
-
-  // PDF files
-  'application/pdf': { icon: PdfFileIcon, iconSize: 16, color: '#d4380d' },
-
-  // Archive files
-  'application/zip': { icon: ZipFileIcon, iconSize: 16, color: '#d46b08' },
-  'application/x-zip-compressed': { icon: ZipFileIcon, iconSize: 16, color: '#d46b08' },
-  'application/x-rar-compressed': { icon: RarFileIcon, iconSize: 16, color: '#389e0d' },
-  'application/vnd.rar': { icon: RarFileIcon, iconSize: 16, color: '#389e0d' },
-  'application/x-7z-compressed': { icon: ZipFileIcon, iconSize: 16, color: '#d46b08' },
-  'application/gzip': { icon: ZipFileIcon, iconSize: 16, color: '#d46b08' },
-
-  // Video files
-  'video/mp4': { icon: Mp4FileIcon, iconSize: 16, color: '#1d39c4' },
-  'video/webm': { icon: WebmFileIcon, iconSize: 16, color: '#d46b08' },
-  'video/quicktime': { icon: MovFileIcon, iconSize: 16, color: '#1d39c4' }, // mov
-
-  // Audio files
-  'audio/ogg': { icon: AudioFileIcon, iconSize: 16, color: '#d4380d' },
-  'audio/mpeg': { icon: AudioFileIcon, iconSize: 16, color: '#d4380d' }, // mp3
-  'audio/wav': { icon: AudioFileIcon, iconSize: 16, color: '#d4380d' },
-  'audio/x-wav': { icon: AudioFileIcon, iconSize: 16, color: '#d4380d' },
-};
-
-const DEFAULT_FILE_CONFIG: FileTypeConfig = {
-  icon: UnknownFileIcon,
-  iconSize: 16,
-};
-
-/** Check if media type is an image */
-export const isImageType = (mediaType?: string): boolean => {
-  return Boolean(mediaType?.startsWith('image/'));
-};
-
-/** Get file config based on media type and file extension */
-export const getFileConfig = (mediaType?: string, fileName?: string): FileTypeConfig => {
-  // Check media type first
-  if (mediaType && FILE_TYPE_MAP[mediaType]) {
-    return FILE_TYPE_MAP[mediaType];
-  }
-
-  // Prefix match for video/audio (covers mkv/avi/flac/m4a etc.)
-  if (mediaType?.startsWith('video/')) {
-    return FILE_TYPE_MAP['video/mp4'];
-  }
-  if (mediaType?.startsWith('audio/')) {
-    return FILE_TYPE_MAP['audio/ogg'];
-  }
-
-  // Fallback to file extension
-  if (fileName) {
-    const ext = fileName.split('.').pop()?.toLowerCase();
-    switch (ext) {
-      case 'xlsx':
-      case 'xls':
-        return FILE_TYPE_MAP['application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'];
-      case 'csv':
-        return FILE_TYPE_MAP['text/csv'];
-      case 'txt':
-      case 'ts':
-      case 'tsx':
-      case 'js':
-      case 'jsx':
-      case 'json':
-      case 'md':
-        return FILE_TYPE_MAP['text/plain'];
-      case 'doc':
-        return FILE_TYPE_MAP['application/msword'];
-      case 'docx':
-        return FILE_TYPE_MAP['application/vnd.openxmlformats-officedocument.wordprocessingml.document'];
-      case 'ppt':
-        return FILE_TYPE_MAP['application/vnd.ms-powerpoint'];
-      case 'pptx':
-        return FILE_TYPE_MAP['application/vnd.openxmlformats-officedocument.presentationml.presentation'];
-      case 'pdf':
-        return FILE_TYPE_MAP['application/pdf'];
-      case 'zip':
-      case '7z':
-      case 'gz':
-      case 'tar':
-        return FILE_TYPE_MAP['application/zip'];
-      case 'rar':
-        return FILE_TYPE_MAP['application/x-rar-compressed'];
-      case 'mp4':
-      case 'mkv':
-      case 'avi':
-        return FILE_TYPE_MAP['video/mp4'];
-      case 'webm':
-        return FILE_TYPE_MAP['video/webm'];
-      case 'mov':
-        return FILE_TYPE_MAP['video/quicktime'];
-      case 'ogg':
-      case 'mp3':
-      case 'wav':
-      case 'flac':
-      case 'aac':
-      case 'm4a':
-        return FILE_TYPE_MAP['audio/ogg'];
-    }
-  }
-
-  return DEFAULT_FILE_CONFIG;
-};
-
-/** Extract display file name from full path */
-const getDisplayFileName = (name?: string): string | undefined => {
-  if (!name) return undefined;
-  // Get last segment of path
-  const segments = name.split('/');
-  return segments[segments.length - 1];
-};
-
-/** Generic file message part component */
-const FileMsgPart = ({
-  fileName,
-  icon: Icon,
-  iconSize,
-  color,
-  className,
-  size = 102,
-}: {
-  fileName?: string;
-  icon: FileIconComponent;
-  iconSize: number;
-  color?: string;
-  className?: string;
-  size?: number;
-}) => {
-  const scale = size / 102;
-  const scaledIconSize = (52 / 102) * size; // Target icon takes ~51% of container
-  const iconScale = scaledIconSize / iconSize;
-  const hasFileName = Boolean(fileName);
-
-  return (
-    <div
-      className={cn(
-        'relative flex flex-col items-center justify-center rounded-[10px] bg-[#EFF0F6] px-[10px]',
-        hasFileName && 'gap-[6px]',
-        className
-      )}
-      style={{ width: size, height: size }}
-    >
-      <div
-        className="shrink-0 flex items-center justify-center"
-        style={{
-          width: scaledIconSize,
-          height: scaledIconSize,
-          color,
-        }}
-      >
-        <div
-          style={{
-            transform: iconScale !== 1 ? `scale(${iconScale})` : undefined,
-            transformOrigin: 'center',
-          }}
-        >
-          <Icon color={color} />
-        </div>
-      </div>
-      {hasFileName && (
-        <p
-          className="block max-w-full shrink-0 truncate text-center text-[14px] leading-normal text-[#030303]"
-          style={{ fontSize: 14 * scale, maxWidth: '100%', display: 'block' }}
-          title={fileName}
-        >
-          {fileName}
-        </p>
-      )}
-    </div>
-  );
-};
-
-export const AttachmentPart = ({ part, className, size = 102, iconOnly, onClick }: AttachmentPartProps) => {
-  const { url, name, mediaType } = part;
-  const handleClick = onClick ? () => onClick(part) : undefined;
-
-  // Render image for image types
-  if (isImageType(mediaType)) {
-    return <ImgMsgPart url={url} alt={name} className={className} size={size} onClick={handleClick} />;
-  }
-
-  // Render file icon for other types
-  const { icon, iconSize, color } = getFileConfig(mediaType, name);
-  const displayName = iconOnly ? undefined : getDisplayFileName(name);
-
-  return (
-    <div onClick={handleClick} className={onClick ? 'cursor-pointer' : undefined}>
-      <FileMsgPart
-        fileName={displayName}
-        icon={icon}
-        iconSize={iconSize}
-        color={color}
-        className={className}
-        size={size}
-      />
-    </div>
-  );
-};
+import { ComponentType } from 'react';
+import { getIconUnicode } from '@baishuyun/ai-feat-utils';
+import { cn } from '../lib/utils';
+import { FontIcon } from './font-icon';
+import { ImgMsgPart } from './img-part';
+import { XlsxIcon, CsvFileIcon, TxtFileIcon, UnknownFileIcon } from './bs-icons';
+
+/** File part from AI message */
+export interface FilePart {
+  type: 'file';
+  url: string;
+  name?: string;
+  mediaType?: string;
+}
+
+export interface AttachmentPartProps {
+  part: FilePart;
+  className?: string;
+  /** Size in pixels (width & height), defaults to 102 */
+  size?: number;
+  /** Show only the icon without file name */
+  iconOnly?: boolean;
+  /** Click handler for the attachment */
+  onClick?: (part: FilePart) => void;
+}
+
+type FileIconComponent = ComponentType<{ color?: string }>;
+
+/**
+ * 字体图标方案：文件类型图标使用 baishu 主字体的 icon-bsy-* 字形
+ * （码位见 ai-feat-utils/iconfont.ts）。注意宿主的 .icon-bsy-form 类自带
+ * color 规则（PC 为 #0265ff），继承色会被覆盖，因此颜色必须通过
+ * FontIcon 的 color prop 以内联样式落到 <i> 上
+ */
+const createFontFileIcon = (iconName: string): FileIconComponent => {
+  const FontFileIcon = ({ color }: { color?: string }) => (
+    <FontIcon
+      fontCls="icon-bsy-form"
+      code={getIconUnicode(iconName)}
+      color={color}
+      style={{ fontSize: 16, lineHeight: 1 }}
+    />
+  );
+  FontFileIcon.displayName = `FontFileIcon(${iconName})`;
+  return FontFileIcon;
+};
+
+const DocFileIcon = createFontFileIcon('bsy-doc');
+const DocxFileIcon = createFontFileIcon('bsy-docx');
+const PptFileIcon = createFontFileIcon('bsy-ppt');
+const PptxFileIcon = createFontFileIcon('bsy-pptx');
+const PdfFileIcon = createFontFileIcon('bsy-pdf');
+const ZipFileIcon = createFontFileIcon('bsy-zip');
+const RarFileIcon = createFontFileIcon('bsy-rar');
+const Mp4FileIcon = createFontFileIcon('bsy-mp4');
+const WebmFileIcon = createFontFileIcon('bsy-webm');
+const MovFileIcon = createFontFileIcon('bsy-mov');
+const AudioFileIcon = createFontFileIcon('bsy-ogg');
+
+export interface FileTypeConfig {
+  icon: FileIconComponent;
+  /** Icon original size for scaling */
+  iconSize: number;
+  /** Icon color (对齐 baishu BsyFileUpload 的 icon-bsy-* 配色)，仅对字体图标生效 */
+  color?: string;
+}
+
+/** Map media types to icon configurations */
+const FILE_TYPE_MAP: Record<string, FileTypeConfig> = {
+  // Excel files
+  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': {
+    icon: XlsxIcon,
+    iconSize: 52,
+  },
+  'application/vnd.ms-excel': { icon: XlsxIcon, iconSize: 52 },
+
+  // CSV files
+  'text/csv': { icon: CsvFileIcon, iconSize: 16 },
+
+  // Text files
+  'text/plain': { icon: TxtFileIcon, iconSize: 16 },
+  'application/octet-stream': { icon: TxtFileIcon, iconSize: 16 }, // treat as text for ts/js files
+
+  // Word files
+  'application/msword': { icon: DocFileIcon, iconSize: 16, color: '#096dd9' },
+  'application/vnd.openxmlformats-officedocument.wordprocessingml.document': {
+    icon: DocxFileIcon,
+    iconSize: 16,
+    color: '#096dd9',
+  },
+
+  // PowerPoint files
+  'application/vnd.ms-powerpoint': { icon: PptFileIcon, iconSize: 16, color: '#d46b08' },
+  'application/vnd.openxmlformats-officedocument.presentationml.presentation': {
+    icon: PptxFileIcon,
+    iconSize: 16,
+    color: '#08979c',
+  },
+
+  // PDF files
+  'application/pdf': { icon: PdfFileIcon, iconSize: 16, color: '#d4380d' },
+
+  // Archive files
+  'application/zip': { icon: ZipFileIcon, iconSize: 16, color: '#d46b08' },
+  'application/x-zip-compressed': { icon: ZipFileIcon, iconSize: 16, color: '#d46b08' },
+  'application/x-rar-compressed': { icon: RarFileIcon, iconSize: 16, color: '#389e0d' },
+  'application/vnd.rar': { icon: RarFileIcon, iconSize: 16, color: '#389e0d' },
+  'application/x-7z-compressed': { icon: ZipFileIcon, iconSize: 16, color: '#d46b08' },
+  'application/gzip': { icon: ZipFileIcon, iconSize: 16, color: '#d46b08' },
+
+  // Video files
+  'video/mp4': { icon: Mp4FileIcon, iconSize: 16, color: '#1d39c4' },
+  'video/webm': { icon: WebmFileIcon, iconSize: 16, color: '#d46b08' },
+  'video/quicktime': { icon: MovFileIcon, iconSize: 16, color: '#1d39c4' }, // mov
+
+  // Audio files
+  'audio/ogg': { icon: AudioFileIcon, iconSize: 16, color: '#d4380d' },
+  'audio/mpeg': { icon: AudioFileIcon, iconSize: 16, color: '#d4380d' }, // mp3
+  'audio/wav': { icon: AudioFileIcon, iconSize: 16, color: '#d4380d' },
+  'audio/x-wav': { icon: AudioFileIcon, iconSize: 16, color: '#d4380d' },
+};
+
+const DEFAULT_FILE_CONFIG: FileTypeConfig = {
+  icon: UnknownFileIcon,
+  iconSize: 16,
+};
+
+/** Check if media type is an image */
+export const isImageType = (mediaType?: string): boolean => {
+  return Boolean(mediaType?.startsWith('image/'));
+};
+
+/** Get file config based on media type and file extension */
+export const getFileConfig = (mediaType?: string, fileName?: string): FileTypeConfig => {
+  // Check media type first
+  if (mediaType && FILE_TYPE_MAP[mediaType]) {
+    return FILE_TYPE_MAP[mediaType];
+  }
+
+  // Prefix match for video/audio (covers mkv/avi/flac/m4a etc.)
+  if (mediaType?.startsWith('video/')) {
+    return FILE_TYPE_MAP['video/mp4'];
+  }
+  if (mediaType?.startsWith('audio/')) {
+    return FILE_TYPE_MAP['audio/ogg'];
+  }
+
+  // Fallback to file extension
+  if (fileName) {
+    const ext = fileName.split('.').pop()?.toLowerCase();
+    switch (ext) {
+      case 'xlsx':
+      case 'xls':
+        return FILE_TYPE_MAP['application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'];
+      case 'csv':
+        return FILE_TYPE_MAP['text/csv'];
+      case 'txt':
+      case 'ts':
+      case 'tsx':
+      case 'js':
+      case 'jsx':
+      case 'json':
+      case 'md':
+        return FILE_TYPE_MAP['text/plain'];
+      case 'doc':
+        return FILE_TYPE_MAP['application/msword'];
+      case 'docx':
+        return FILE_TYPE_MAP['application/vnd.openxmlformats-officedocument.wordprocessingml.document'];
+      case 'ppt':
+        return FILE_TYPE_MAP['application/vnd.ms-powerpoint'];
+      case 'pptx':
+        return FILE_TYPE_MAP['application/vnd.openxmlformats-officedocument.presentationml.presentation'];
+      case 'pdf':
+        return FILE_TYPE_MAP['application/pdf'];
+      case 'zip':
+      case '7z':
+      case 'gz':
+      case 'tar':
+        return FILE_TYPE_MAP['application/zip'];
+      case 'rar':
+        return FILE_TYPE_MAP['application/x-rar-compressed'];
+      case 'mp4':
+      case 'mkv':
+      case 'avi':
+        return FILE_TYPE_MAP['video/mp4'];
+      case 'webm':
+        return FILE_TYPE_MAP['video/webm'];
+      case 'mov':
+        return FILE_TYPE_MAP['video/quicktime'];
+      case 'ogg':
+      case 'mp3':
+      case 'wav':
+      case 'flac':
+      case 'aac':
+      case 'm4a':
+        return FILE_TYPE_MAP['audio/ogg'];
+    }
+  }
+
+  return DEFAULT_FILE_CONFIG;
+};
+
+/** Extract display file name from full path */
+const getDisplayFileName = (name?: string): string | undefined => {
+  if (!name) return undefined;
+  // Get last segment of path
+  const segments = name.split('/');
+  return segments[segments.length - 1];
+};
+
+/** Generic file message part component */
+const FileMsgPart = ({
+  fileName,
+  icon: Icon,
+  iconSize,
+  color,
+  className,
+  size = 102,
+}: {
+  fileName?: string;
+  icon: FileIconComponent;
+  iconSize: number;
+  color?: string;
+  className?: string;
+  size?: number;
+}) => {
+  const scale = size / 102;
+  const scaledIconSize = (52 / 102) * size; // Target icon takes ~51% of container
+  const iconScale = scaledIconSize / iconSize;
+  const hasFileName = Boolean(fileName);
+
+  return (
+    <div
+      className={cn(
+        'relative flex flex-col items-center justify-center rounded-[10px] bg-[#EFF0F6] px-[10px]',
+        hasFileName && 'gap-[6px]',
+        className
+      )}
+      style={{ width: size, height: size }}
+    >
+      <div
+        className="shrink-0 flex items-center justify-center"
+        style={{
+          width: scaledIconSize,
+          height: scaledIconSize,
+          color,
+        }}
+      >
+        <div
+          style={{
+            transform: iconScale !== 1 ? `scale(${iconScale})` : undefined,
+            transformOrigin: 'center',
+          }}
+        >
+          <Icon color={color} />
+        </div>
+      </div>
+      {hasFileName && (
+        <p
+          className="block max-w-full shrink-0 truncate text-center text-[14px] leading-normal text-[#030303]"
+          style={{ fontSize: 14 * scale, maxWidth: '100%', display: 'block' }}
+          title={fileName}
+        >
+          {fileName}
+        </p>
+      )}
+    </div>
+  );
+};
+
+export const AttachmentPart = ({ part, className, size = 102, iconOnly, onClick }: AttachmentPartProps) => {
+  const { url, name, mediaType } = part;
+  const handleClick = onClick ? () => onClick(part) : undefined;
+
+  // Render image for image types
+  if (isImageType(mediaType)) {
+    return <ImgMsgPart url={url} alt={name} className={className} size={size} onClick={handleClick} />;
+  }
+
+  // Render file icon for other types
+  const { icon, iconSize, color } = getFileConfig(mediaType, name);
+  const displayName = iconOnly ? undefined : getDisplayFileName(name);
+
+  return (
+    <div onClick={handleClick} className={onClick ? 'cursor-pointer' : undefined}>
+      <FileMsgPart
+        fileName={displayName}
+        icon={icon}
+        iconSize={iconSize}
+        color={color}
+        className={className}
+        size={size}
+      />
+    </div>
+  );
+};