@baishuyun/ai-design 1.0.0

package/src/components/attachment-part.tsx

@@ -0,0 +1,179 @@
+import { ComponentType } from 'react';
+import { cn } from '../lib/utils';
+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;
+
+interface FileTypeConfig {
+  icon: FileIconComponent;
+  /** Icon original size for scaling */
+  iconSize: number;
+}
+
+/** 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
+};
+
+const DEFAULT_FILE_CONFIG: FileTypeConfig = {
+  icon: UnknownFileIcon,
+  iconSize: 16,
+};
+
+/** Check if media type is an image */
+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 => {
+  // Check media type first
+  if (mediaType && FILE_TYPE_MAP[mediaType]) {
+    return FILE_TYPE_MAP[mediaType];
+  }
+
+  // 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'];
+    }
+  }
+
+  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,
+  className,
+  size = 102,
+}: {
+  fileName?: string;
+  icon: FileIconComponent;
+  iconSize: number;
+  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,
+        }}
+      >
+        <div
+          style={{
+            transform: iconScale !== 1 ? `scale(${iconScale})` : undefined,
+            transformOrigin: 'center',
+          }}
+        >
+          <Icon />
+        </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 } = 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}
+        className={className}
+        size={size}
+      />
+    </div>
+  );
+};

package/src/components/attachments-previewer.tsx

@@ -0,0 +1,324 @@
+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 { LoaderIcon } from './ui/icons';
+
+export interface AttachmentItem {
+  id: string;
+  url: string;
+  alt?: string;
+  isLoading?: boolean;
+  /** MIME type, used to decide whether to show image or icon */
+  contentType?: string;
+}
+
+export interface AttachmentsPreviewerProps {
+  attachments: AttachmentItem[];
+  className?: string;
+  imageSize?: number;
+  gap?: number;
+  onImageClick?: (attachment: AttachmentItem, index: number) => void;
+  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
+      d="M9 6L15 12L9 18"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+const ChevronLeftIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <path
+      d="M15 6L9 12L15 18"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+const NavButton = ({
+  direction,
+  onClick,
+  className,
+}: {
+  direction: 'left' | 'right';
+  onClick: () => void;
+  className?: string;
+}) => {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={cn(
+        'flex items-center justify-center',
+        'size-9 p-1 rounded-[18px]',
+        'bg-white shadow-[0px_0px_10px_0px_rgba(0,0,0,0.06)]',
+        'cursor-pointer',
+        'hover:bg-gray-50',
+        'text-gray-600',
+        transCls,
+        className
+      )}
+    >
+      {direction === 'left' ? <ChevronLeftIcon /> : <ChevronRightIcon />}
+    </button>
+  );
+};
+
+const GradientOverlay = ({
+  direction,
+  height,
+  visible,
+}: {
+  direction: 'left' | 'right';
+  height: number;
+  visible: boolean;
+}) => {
+  const isLeft = direction === 'left';
+  return (
+    <div
+      className={cn(
+        'absolute top-2 pointer-events-none z-5',
+        isLeft ? 'left-0' : 'right-0',
+        transCls,
+        visible ? 'opacity-100' : 'opacity-0'
+      )}
+      style={{ height: `${height}px`, width: '46px' }}
+    >
+      {/* Gradient layer - from white via white@63.57% to transparent */}
+      <div
+        className={cn(
+          'absolute inset-0',
+          isLeft
+            ? 'bg-linear-to-r from-white via-white via-[63.57%] to-transparent'
+            : 'bg-linear-to-l from-white via-white via-[63.57%] to-transparent'
+        )}
+      />
+      {/* Blur layer */}
+      <div className="absolute inset-0 bg-white blur-[7px]" />
+    </div>
+  );
+};
+
+export const AttachmentsPreviewer = ({
+  attachments,
+  className,
+  imageSize = 53,
+  gap = 10,
+  onImageClick,
+  onImageRemove,
+}: AttachmentsPreviewerProps) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [showLeftNav, setShowLeftNav] = useState(false);
+  const [showRightNav, setShowRightNav] = useState(false);
+
+  const checkScroll = useCallback(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+
+    const { scrollLeft, scrollWidth, clientWidth } = el;
+    setShowLeftNav(scrollLeft > 0);
+    setShowRightNav(scrollLeft + clientWidth < scrollWidth - 1);
+  }, []);
+
+  useEffect(() => {
+    checkScroll();
+    const el = scrollRef.current;
+    if (!el) return;
+
+    el.addEventListener('scroll', checkScroll);
+    window.addEventListener('resize', checkScroll);
+
+    return () => {
+      el.removeEventListener('scroll', checkScroll);
+      window.removeEventListener('resize', checkScroll);
+    };
+  }, [checkScroll, attachments]);
+
+  const scroll = (direction: 'left' | 'right') => {
+    const el = scrollRef.current;
+    if (!el) return;
+
+    const scrollAmount = imageSize + gap;
+    const newScrollLeft =
+      direction === 'left' ? el.scrollLeft - scrollAmount * 2 : el.scrollLeft + scrollAmount * 2;
+
+    el.scrollTo({
+      left: newScrollLeft,
+      behavior: 'smooth',
+    });
+  };
+
+  if (!attachments.length) {
+    return null;
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      className={cn('relative w-full', className)}
+      style={{ height: imageSize + 16 }}
+    >
+      {/* Scrollable images container */}
+      <div
+        ref={scrollRef}
+        className="flex overflow-x-auto scrollbar-hide py-2"
+        style={{ gap, height: imageSize + 16 }}
+      >
+        {attachments.map((attachment, index) => {
+          const isImage = isImageType(attachment.contentType);
+          const { icon: Icon, iconSize } = getFileConfig(attachment.contentType, attachment.alt);
+          const scaledIconSize = (52 / 102) * imageSize;
+          const iconScale = scaledIconSize / iconSize;
+
+          return (
+            <div
+              key={attachment.id}
+              className={cn(
+                'relative shrink-0 cursor-pointer group border border-[#e0e0e0] rounded-lg',
+                transCls
+              )}
+              style={{ width: imageSize, height: imageSize }}
+              onClick={() => onImageClick?.(attachment, index)}
+            >
+              {isImage && attachment.url ? (
+                <img
+                  src={attachment.url}
+                  alt={attachment.alt || `Attachment ${index + 1}`}
+                  className="absolute inset-0 h-full w-full rounded-lg object-cover"
+                />
+              ) : (
+                <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 }}
+                  >
+                    <div
+                      style={{
+                        transform: iconScale !== 1 ? `scale(${iconScale})` : undefined,
+                        transformOrigin: 'center',
+                      }}
+                    >
+                      <Icon />
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {attachment.isLoading && (
+                <div className="absolute inset-0 flex items-center justify-center rounded-lg bg-black/50 pointer-events-none">
+                  <div className="inline-flex animate-spin items-center justify-center">
+                    <LoaderIcon size={16} />
+                  </div>
+                </div>
+              )}
+
+              {onImageRemove /* && !attachment.isLoading*/ && (
+                <button
+                  className={cn(
+                    'absolute -top-1.5 -right-1.5',
+                    'flex items-center justify-center',
+                    'opacity-0 group-hover:opacity-100 cursor-pointer',
+                    transCls
+                  )}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onImageRemove(attachment, index);
+                  }}
+                >
+                  <RemoveCircleIcon />
+                </button>
+              )}
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Left navigation */}
+      <GradientOverlay direction="left" height={imageSize} visible={showLeftNav} />
+      <NavButton
+        direction="left"
+        onClick={() => scroll('left')}
+        className={cn(
+          'absolute left-0 top-1/2 -translate-y-1/2 z-10',
+          showLeftNav ? 'opacity-100' : 'opacity-0 pointer-events-none'
+        )}
+      />
+
+      {/* Right navigation */}
+      <GradientOverlay direction="right" height={imageSize} visible={showRightNav} />
+      <NavButton
+        direction="right"
+        onClick={() => scroll('right')}
+        className={cn(
+          'absolute right-0 top-1/2 -translate-y-1/2 z-10',
+          showRightNav ? 'opacity-100' : 'opacity-0 pointer-events-none'
+        )}
+      />
+    </div>
+  );
+};

package/src/components/base-button.tsx

@@ -0,0 +1,49 @@
+import { forwardRef } from 'react';
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+import { cn } from '../lib/utils';
+import { transCls } from '../const/ui';
+import { BsTooltip } from './tooltip';
+
+export interface BaseButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  icon?: ReactNode;
+  tooltip?: string;
+  hoverTextCls?: string;
+}
+
+export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
+  ({ className, children, hoverTextCls, tooltip, icon, type, ...rest }, ref) => {
+    const btn = (
+      <button
+        ref={ref}
+        type={type ?? 'button'}
+        className={cn(
+          'group inline-flex items-center gap-[6px] px-[16px] rounded-[4px] h-[34px]',
+          'border border-solid border-[#E0E0E0] bg-transparent',
+          'text-[14px] font-[400] leading-[normal] text-[#030303]',
+          'hover:bg-[#EFF0F6] hover:border-transparent',
+          'cursor-pointer',
+          {
+            'hover:text-[#0265FF]': !hoverTextCls,
+            [`hover:${hoverTextCls}`]: hoverTextCls,
+          },
+          transCls,
+          className
+        )}
+        {...rest}
+      >
+        {icon ? <span className="shrink-0">{icon}</span> : null}
+        {children ? (
+          <span className="whitespace-nowrap">{children}</span>
+        ) : null}
+      </button>
+    );
+
+    if (tooltip) {
+      return <BsTooltip content={tooltip}>{btn}</BsTooltip>;
+    }
+
+    return btn;
+  }
+);
+
+BaseButton.displayName = 'BaseButton';

package/src/components/border-animation.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import { cn } from '../lib/utils';
+
+export interface BorderAnimationProps {
+  children?: React.ReactNode;
+  className?: string;
+  /** Duration of one full animation cycle in seconds @default 2 */
+  duration?: number;
+  /** Border radius in pixels @default 4 */
+  borderRadius?: number;
+  /** Width of the animated beam in pixels @default 30 */
+  beamWidth?: number;
+  /** Height of the animated beam in pixels @default 4 */
+  beamHeight?: number;
+  /** Gradient for the animated beam */
+  gradient?: string;
+  height?: string | number;
+  /** Border width in pixels @default 1.5 */
+  borderWidth?: number;
+  /** Default border color @default '#E5E5E5' */
+  borderColor?: string;
+}
+
+const defaultGradient = `linear-gradient(90deg, 
+  rgba(132, 180, 255, 0) 0%, 
+  rgba(132, 180, 255, 0.5) 10%, 
+  rgba(132, 180, 255, 1) 25%, 
+  rgb(2, 101, 255) 50%, 
+  rgba(177, 250, 255, 1) 75%, 
+  rgba(177, 250, 255, 0.5) 90%, 
+  rgba(177, 250, 255, 0) 100%
+)`;
+
+export const BorderAnimation: React.FC<BorderAnimationProps> = ({
+  children,
+  className,
+  duration = 2,
+  borderRadius = 4,
+  beamWidth = 170,
+  beamHeight = 4,
+//   gradient = 'linear-gradient(180deg, #84B4FF 0%, #0265FF 50%, #B1FAFF 100%)',
+//   gradient = 'linear-gradient(90deg, rgb(132, 180, 255) 0%, rgb(2, 101, 255) 50%, rgb(177, 250, 255) 100%)',
+  gradient = defaultGradient,
+  borderWidth = 1,
+  height,
+  borderColor = 'transparent',
+}) => {
+    const pseudoCls = "gradient-border"
+  return (
+    <div
+      className={cn('relative w-full overflow-hidden', className, pseudoCls)}
+      style={{
+        borderRadius: `${borderRadius}px`,
+        border: `${borderWidth}px solid ${borderColor}`,
+        ...(height ? { height } : {}),
+      }}
+    >
+      {children}
+      {/* Animated border overlay */}
+      <div
+        style={{
+          position: 'absolute',
+        //   inset: `${-borderWidth}px`,
+          inset: 0,
+          pointerEvents: 'none',
+          border: `${borderWidth}px solid transparent`,
+          borderRadius: 'inherit',
+        //   contain: 'layout style paint',
+          maskImage:
+            'linear-gradient(transparent, transparent), linear-gradient(white, white)',
+          WebkitMaskImage:
+            'linear-gradient(transparent, transparent), linear-gradient(white, white)',
+          maskOrigin: 'border-box, border-box',
+          WebkitMaskOrigin: 'border-box, border-box',
+          maskClip: 'padding-box, border-box',
+          WebkitMaskClip: 'padding-box, border-box',
+          maskComposite: 'intersect',
+          WebkitMaskComposite: 'source-in',
+        }}
+      >
+        {/* Traveling beam */}
+        <div
+          style={{
+            position: 'absolute',
+            aspectRatio: '1 / 1',
+            width: `${beamWidth}px`,
+            height: `${beamHeight}px`,
+            background: gradient,
+            offsetPath: `rect(0px auto auto 0px round ${borderRadius}px)`,
+            animation: `bs-border-travel ${duration}s linear infinite`,
+            willChange: 'offset-distance',
+            transform: 'translateZ(0)',
+            backfaceVisibility: 'hidden',
+          }}
+        />
+      </div>
+      <style>{`
+        @keyframes bs-border-travel {
+          0% { offset-distance: 0%; }
+          100% { offset-distance: 100%; }
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default BorderAnimation;