@baishuyun/ai-design 2.0.35 → 2.0.37

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @baishuyun/ai-design
 
+## 2.0.37
+
+### Patch Changes
+
+- 移动端优化
+- Updated dependencies
+  - @baishuyun/ai-feat-utils@2.0.33
+
+## 2.0.36
+
+### Patch Changes
+
+- 消息过长折叠显示,附件图标完善
+- Updated dependencies
+  - @baishuyun/ai-feat-utils@2.0.32
+  - @baishuyun/types@3.0.30
+
 ## 2.0.35
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@baishuyun/ai-design",
-  "version": "2.0.35",
+  "version": "2.0.37",
   "description": "AI 功能 UI 组件库 - 所有 AI 功能的 UI 表现唯一真相来源",
   "type": "module",
   "main": "src/index.ts",
@@ -60,8 +60,8 @@
     "tw-animate-css": "^1.4.0",
     "vaul": "^1.1.2",
     "zod": "^4.1.13",
-    "@baishuyun/ai-feat-utils": "2.0.31",
-    "@baishuyun/types": "3.0.29"
+    "@baishuyun/ai-feat-utils": "2.0.33",
+    "@baishuyun/types": "3.0.30"
   },
   "peerDependencies": {
     "react": "^19.0.0",
@@ -83,8 +83,8 @@
     "typescript": "^5.5.0",
     "vite": "^5.1.4",
     "vite-plugin-dts": "^4.5.4",
+    "@baishuyun/types": "3.0.30",
     "@baishuyun/tailwind-config": "3.0.9",
-    "@baishuyun/types": "3.0.29",
     "@baishuyun/typescript-config": "2.0.9"
   },
   "keywords": [],

package/src/components/attachment-part.tsx

@@ -1,5 +1,7 @@
 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';
 
@@ -22,12 +24,45 @@ export interface AttachmentPartProps {
   onClick?: (part: FilePart) => void;
 }
 
-type FileIconComponent = ComponentType;
+type FileIconComponent = ComponentType<{ color?: string }>;
 
-interface FileTypeConfig {
+/**
+ * 字体图标方案：文件类型图标使用 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 */
@@ -45,6 +80,44 @@ const FILE_TYPE_MAP: Record<string, FileTypeConfig> = {
   // 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 = {
@@ -53,17 +126,25 @@ const DEFAULT_FILE_CONFIG: FileTypeConfig = {
 };
 
 /** Check if media type is an image */
-const isImageType = (mediaType?: string): boolean => {
+export const isImageType = (mediaType?: string): boolean => {
   return Boolean(mediaType?.startsWith('image/'));
 };
 
 /** Get file config based on media type and file extension */
-const getFileConfig = (mediaType?: string, fileName?: string): FileTypeConfig => {
+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();
@@ -81,6 +162,38 @@ const getFileConfig = (mediaType?: string, fileName?: string): FileTypeConfig =>
       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'];
     }
   }
 
@@ -100,12 +213,14 @@ const FileMsgPart = ({
   fileName,
   icon: Icon,
   iconSize,
+  color,
   className,
   size = 102,
 }: {
   fileName?: string;
   icon: FileIconComponent;
   iconSize: number;
+  color?: string;
   className?: string;
   size?: number;
 }) => {
@@ -128,6 +243,7 @@ const FileMsgPart = ({
         style={{
           width: scaledIconSize,
           height: scaledIconSize,
+          color,
         }}
       >
         <div
@@ -136,7 +252,7 @@ const FileMsgPart = ({
             transformOrigin: 'center',
           }}
         >
-          <Icon />
+          <Icon color={color} />
         </div>
       </div>
       {hasFileName && (
@@ -162,7 +278,7 @@ export const AttachmentPart = ({ part, className, size = 102, iconOnly, onClick
   }
 
   // Render file icon for other types
-  const { icon, iconSize } = getFileConfig(mediaType, name);
+  const { icon, iconSize, color } = getFileConfig(mediaType, name);
   const displayName = iconOnly ? undefined : getDisplayFileName(name);
 
   return (
@@ -171,6 +287,7 @@ export const AttachmentPart = ({ part, className, size = 102, iconOnly, onClick
         fileName={displayName}
         icon={icon}
         iconSize={iconSize}
+        color={color}
         className={className}
         size={size}
       />

package/src/components/attachments-previewer.tsx

@@ -1,8 +1,9 @@
 import { cn } from '../lib/utils';
 import { transCls } from '../const/ui';
-import { useRef, useState, useEffect, useCallback, ComponentType } from 'react';
-import { RemoveCircleIcon, XlsxIcon, CsvFileIcon, TxtFileIcon, UnknownFileIcon } from './bs-icons';
+import { useRef, useState, useEffect, useCallback } from 'react';
+import { RemoveCircleIcon } from './bs-icons';
 import { LoaderIcon } from './ui/icons';
+import { getFileConfig, isImageType } from './attachment-part';
 
 export interface AttachmentItem {
   id: string;
@@ -22,59 +23,6 @@ export interface AttachmentsPreviewerProps {
   onImageRemove?: (attachment: AttachmentItem, index: number) => void;
 }
 
-type FileIconComponent = ComponentType;
-
-interface FileTypeConfig {
-  icon: FileIconComponent;
-  /** Icon original size for scaling */
-  iconSize: number;
-}
-
-const FILE_TYPE_MAP: Record<string, FileTypeConfig> = {
-  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': {
-    icon: XlsxIcon,
-    iconSize: 52,
-  },
-  'application/vnd.ms-excel': { icon: XlsxIcon, iconSize: 52 },
-  'text/csv': { icon: CsvFileIcon, iconSize: 16 },
-  'text/plain': { icon: TxtFileIcon, iconSize: 16 },
-  'application/octet-stream': { icon: TxtFileIcon, iconSize: 16 },
-};
-
-const DEFAULT_FILE_CONFIG: FileTypeConfig = {
-  icon: UnknownFileIcon,
-  iconSize: 16,
-};
-
-const isImageType = (mediaType?: string): boolean => Boolean(mediaType?.startsWith('image/'));
-
-const getFileConfig = (mediaType?: string, fileName?: string): FileTypeConfig => {
-  if (mediaType && FILE_TYPE_MAP[mediaType]) {
-    return FILE_TYPE_MAP[mediaType];
-  }
-
-  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'];
-    }
-  }
-
-  return DEFAULT_FILE_CONFIG;
-};
-
 const ChevronRightIcon = () => (
   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
     <path
@@ -231,7 +179,7 @@ export const AttachmentsPreviewer = ({
       >
         {attachments.map((attachment, index) => {
           const isImage = isImageType(attachment.contentType);
-          const { icon: Icon, iconSize } = getFileConfig(attachment.contentType, attachment.alt);
+          const { icon: Icon, iconSize, color } = getFileConfig(attachment.contentType, attachment.alt);
           const scaledIconSize = (52 / 102) * imageSize;
           const iconScale = scaledIconSize / iconSize;
 
@@ -255,7 +203,7 @@ export const AttachmentsPreviewer = ({
                 <div className="absolute inset-0 flex h-full w-full items-center justify-center rounded-lg bg-[#EFF0F6]">
                   <div
                     className="shrink-0 flex items-center justify-center"
-                    style={{ width: scaledIconSize, height: scaledIconSize }}
+                    style={{ width: scaledIconSize, height: scaledIconSize, color }}
                   >
                     <div
                       style={{
@@ -263,7 +211,7 @@ export const AttachmentsPreviewer = ({
                         transformOrigin: 'center',
                       }}
                     >
-                      <Icon />
+                      <Icon color={color} />
                     </div>
                   </div>
                 </div>

package/src/components/bs-icons.tsx

@@ -1,5 +1,3 @@
-import { transCls } from '../const/ui';
-import { cn } from '../lib/utils';
 // import { FontIcon } from './font-icon';
 
 export const DockIcon = () => (

package/src/components/collapsible-txt-msg.tsx

@@ -2,6 +2,7 @@ import { ReactNode, useState } from 'react';
 import { cn } from '../lib/utils';
 import { transCls } from '../const/ui';
 import { AnalysisIcon, ChevronIcon } from './bs-icons';
+import classNames from 'classnames';
 
 export interface CollapsibleTxtMsgProps {
   title: string;
@@ -10,11 +11,14 @@ export interface CollapsibleTxtMsgProps {
   defaultOpen?: boolean;
   children?: ReactNode;
 
+  ghost?: boolean;
+
   disableExpand?: boolean;
 }
 
 export const CollapsibleTxtMsg = ({
   title,
+  ghost,
   content,
   icon,
   disableExpand,
@@ -23,8 +27,16 @@ export const CollapsibleTxtMsg = ({
 }: CollapsibleTxtMsgProps) => {
   const [isOpen, setIsOpen] = useState(defaultOpen);
 
+  const cls = classNames({
+    'bg-[#fafafa] border border-[#e0e0e0] border-solid p-2.5': !ghost
+  })
+
+  const isGhostOpen = isOpen && ghost;
+
+  const t = isGhostOpen ? '' : title;
+
   return (
-    <div className="bg-[#fafafa] border border-[#e0e0e0] border-solid flex flex-col gap-2.5 p-2.5 rounded-lg w-full">
+    <div className={classNames("flex flex-col gap-2.5 rounded-lg w-full", cls)}>
       <div
         className={cn('flex items-center justify-between w-full', {
           'cursor-pointer': !disableExpand,
@@ -37,7 +49,7 @@ export const CollapsibleTxtMsg = ({
       >
         <div className="flex gap-2.5 items-center">
           <div className="w-4 h-4 shrink-0 flex items-center">{icon || <AnalysisIcon />}</div>
-          <p className="text-[#666] text-[14px] leading-normal">{title}</p>
+          <p className="text-[#666] text-[14px] leading-normal">{t}</p>
         </div>
         <button
           onClick={() => {

package/src/components/font-icon.tsx

@@ -20,12 +20,14 @@ export const FontIcon = ({
   code,
   name,
   className,
+  fontCls= 'sdk-icon',
   style,
   color,
 }: {
   code?: string;
   name?: number;
   className?: string;
+  fontCls?: string;
   style?: React.CSSProperties;
   color?: string;
 }) => {
@@ -36,7 +38,7 @@ export const FontIcon = ({
   if (code) {
     return (
       <i
-        className={`sdk-icon ${className || ''}`}
+        className={`${fontCls} ${className || ''}`}
         style={{ ...style, color }}
         dangerouslySetInnerHTML={{ __html: code }}
       />

package/src/components/ui/drawer.tsx

@@ -58,9 +58,12 @@ function DrawerContent({
   className,
   children,
   container: containerProp,
+  hideOverlay = false,
   ...props
 }: React.ComponentProps<typeof DrawerPrimitive.Content> & {
   container?: HTMLElement | null;
+  /** 全屏等场景下头部需保持可交互时，可隐藏遮罩 */
+  hideOverlay?: boolean;
 }) {
   const [autoContainer, setAutoContainer] = React.useState<HTMLElement | null>(null);
 
@@ -102,7 +105,7 @@ function DrawerContent({
         <span ref={setDetectorRef} style={{ display: 'none' }} aria-hidden />
       )}
       <DrawerPortal container={effectiveContainer ?? undefined}>
-        <DrawerOverlay />
+        {!hideOverlay && <DrawerOverlay />}
         <DrawerPrimitive.Content
           data-slot="drawer-content"
           className={cn(

package/src/components/ui/popover.tsx

@@ -20,7 +20,7 @@ const PopoverContent = React.forwardRef<
   PopoverContentProps
 >(
   (
-    { className, align = 'start', sideOffset = 4, portalContainer, style, onWheel, ...props },
+    { className, align = 'start', sideOffset = 4, portalContainer, style, onWheel, onOpenAutoFocus, ...props },
     ref
   ) => {
     const handleWheel = portalContainer
@@ -45,6 +45,12 @@ const PopoverContent = React.forwardRef<
         }
       : onWheel;
 
+    // 默认阻止 Radix 打开浮层时自动聚焦内部第一个可聚焦元素（通常是搜索框），
+    // 移动端会因此唤起软键盘，不是期望的交互；调用方仍可显式传 onOpenAutoFocus 覆盖
+    const handleOpenAutoFocus = onOpenAutoFocus ?? ((event: Event) => {
+      event.preventDefault();
+    });
+
     return (
       <PopoverPrimitive.Portal container={portalContainer ?? undefined}>
         <PopoverPrimitive.Content
@@ -52,6 +58,7 @@ const PopoverContent = React.forwardRef<
           align={align}
           sideOffset={sideOffset}
           onWheel={handleWheel}
+          onOpenAutoFocus={handleOpenAutoFocus}
           className={cn(
             'z-50 w-60 rounded-[8px] bg-white p-1 text-[#121111] shadow-[0px_6px_16px_rgba(0,0,0,0.06)] outline-none',
             'data-[state=open]:animate-in data-[state=closed]:animate-out',

package/src/components/user-txt-msg-bubble.tsx

@@ -1,9 +1,31 @@
+import { TextIcon } from "./bs-icons";
+import { CollapsibleTxtMsg } from "./collapsible-txt-msg";
+
 export interface UserTextMsgBubbleProps {
   text?: string;
   children?: string;
 }
 
 export const UserTextMsgBubble = ({ text, children }: UserTextMsgBubbleProps) => {
+  const content = (text || children) as string;
+
+  if (typeof content !== 'string') {
+    return (
+    <div
+      className="px-2.5 py-[7px] text-[#0265FF] text-[14px] w-fit"
+      style={{
+        borderRadius: `10px 0 10px 10px`,
+        wordWrap: 'break-word',
+        background: `linear-gradient(180deg, #DBE9FF 0%, #E9FFFD 100%)`,
+      }}
+    >
+      {content}
+    </div>
+    ) 
+  }
+
+  const isTooLong = content.length > 200;
+  const summary = `${content?.slice(0, 10)}...`;
   return (
     <div
       className="px-2.5 py-[7px] text-[#0265FF] text-[14px] w-fit"
@@ -13,7 +35,13 @@ export const UserTextMsgBubble = ({ text, children }: UserTextMsgBubbleProps) =>
         background: `linear-gradient(180deg, #DBE9FF 0%, #E9FFFD 100%)`,
       }}
     >
-      {text || children}
+      {isTooLong ? (
+        <CollapsibleTxtMsg
+          icon={<TextIcon />}
+          ghost
+          title={summary}
+        >{content}</CollapsibleTxtMsg>
+      ) : content}
     </div>
   );
 };