@baishuyun/chat-sdk 0.1.9 → 1.0.0

package/src/components/bs-ui/attachments-previewer.tsx

@@ -1,324 +0,0 @@
-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 '@/components/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-[36px] 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-[8px] 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-gradient-to-r from-white via-white via-[63.57%] to-transparent'
-            : 'bg-gradient-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-[8px]"
-        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-[10px]',
-                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-[10px] object-cover"
-                />
-              ) : (
-                <div className="absolute inset-0 flex h-full w-full items-center justify-center rounded-[10px] 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-[10px] 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-[6px] -right-[6px]',
-                    '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/bs-ui/base-button.tsx

@@ -1,49 +0,0 @@
-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/bs-ui/border-animation.tsx

@@ -1,107 +0,0 @@
-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;

package/src/components/bs-ui/border-color-animation.tsx

@@ -1,66 +0,0 @@
-export const BorderColorAnimation = ({
-  children,
-  width,
-  height,
-  padding,
-  borderWidth = 2,
-  borderRadius = 12,
-  bgInset,
-  style,
-}: {
-  children?: React.ReactNode;
-  width?: string | number;
-  height?: string | number;
-  borderWidth?: number;
-  padding?: number;
-  borderRadius?: number;
-  bgInset?: number;
-  style?: React.CSSProperties;
-}) => {
-  const isNumSize = typeof width === 'number' && typeof height === 'number';
-  const safeSize = isNumSize ? Math.max(width ?? 0, height ?? 0) : 0;
-  const safeInset = isNumSize ? -1 * safeSize * 1.5 : '-150%'; // ensure the background covers the whole area during rotation
-  return (
-    <div
-      style={{
-        position: 'relative',
-        width: width ?? '100%',
-        height: height ?? '100%',
-        borderRadius,
-        overflow: 'hidden',
-      }}
-    >
-      <div
-        style={{
-          position: 'absolute',
-          inset: bgInset !== undefined ? -bgInset : safeInset,
-          background: 'conic-gradient(from 0deg, #0265FF, #00D4FF, #0265FF, #00D4FF, #0265FF)',
-          animation: 'borderRotate 4s linear infinite',
-        }}
-      />
-      <div
-        style={{
-          ...style,
-          position: 'absolute',
-          inset: borderWidth,
-          borderRadius: borderRadius - 2,
-          background: 'white',
-          zIndex: 1,
-          padding: padding || 0,
-        }}
-      >
-        {children}
-      </div>
-      <style>{`
-        @keyframes borderRotate {
-          0% {
-            transform: rotate(0deg);
-          }
-          100% {
-            transform: rotate(360deg);
-          }
-        }
-      `}</style>
-    </div>
-  );
-};

package/src/components/bs-ui/bot-avatar-name.tsx

@@ -1,25 +0,0 @@
-import { BotIcon } from './bot-icon';
-
-export const BotAvatarAndName = ({
-  name,
-  icon,
-  variant = 'default',
-}: {
-  name: string;
-  icon?: React.ReactNode;
-  variant?: 'default' | 'active';
-}) => {
-  const size = variant === 'default' ? 20 : 24;
-
-  const variantStyles = {
-    default: 'text-[#999] text-[14px] font-[400]',
-    active: 'text-[#0265FF] text-[14px] font-[700]',
-  };
-
-  return (
-    <div className="flex items-center gap-1.5">
-      {icon || <BotIcon size={size} />}
-      <div className={variantStyles[variant]}>{name}</div>
-    </div>
-  );
-};

package/src/components/bs-ui/bot-icon.tsx

@@ -1,23 +0,0 @@
-import { BotImgUrl } from "@/const/ui";
-
-export const BotIcon = ({
-  size = 30,
-  className,
-}: {
-  size?: number;
-  className?: string;
-}) => {
-  return (
-    <div
-      className={className}
-      style={{
-        backgroundImage: `${BotImgUrl}`,
-        backgroundRepeat: "no-repeat",
-        backgroundSize: "cover",
-        width: size,
-        height: size,
-        aspectRatio: "1/1",
-      }}
-    />
-  );
-};