@baishuyun/chat-sdk 0.0.1-alpha.1

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

@@ -0,0 +1,229 @@
+import { cn } from '@/lib/utils';
+import { transCls } from '@/const/ui';
+import { useRef, useState, useEffect, useCallback } from 'react';
+import { RemoveCircleIcon } from './bs-icons';
+
+export interface AttachmentItem {
+  id: string;
+  url: string;
+  alt?: string;
+}
+
+export interface AttachmentsPreviewerProps {
+  attachments: AttachmentItem[];
+  className?: string;
+  imageSize?: number;
+  gap?: number;
+  onImageClick?: (attachment: AttachmentItem, index: number) => void;
+  onImageRemove?: (attachment: AttachmentItem, index: number) => void;
+}
+
+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
+      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) => (
+          <div
+            key={attachment.id}
+            className={cn('relative shrink-0 cursor-pointer group', transCls)}
+            style={{ width: imageSize, height: imageSize }}
+            onClick={() => onImageClick?.(attachment, index)}
+          >
+            <img
+              src={attachment.url}
+              alt={attachment.alt || `Attachment ${index + 1}`}
+              className="absolute inset-0 w-full h-full object-cover rounded-[10px]"
+            />
+            {onImageRemove && (
+              <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/border-color-animation.tsx

@@ -0,0 +1,58 @@
+export const BorderColorAnimation = ({
+  children,
+  width,
+  height,
+  padding,
+  borderWidth = 2,
+  borderRadius = 12,
+}: {
+  children?: React.ReactNode;
+  width?: string | number;
+  height?: string | number;
+  borderWidth?: number;
+  padding?: number;
+  borderRadius?: number;
+}) => {
+  return (
+    <div
+      style={{
+        position: 'relative',
+        width: width ?? '100%',
+        height: height ?? '100%',
+        borderRadius,
+        overflow: 'hidden',
+      }}
+    >
+      <div
+        style={{
+          position: 'absolute',
+          inset: '-150%',
+          background: 'conic-gradient(from 0deg, #0265FF, #00D4FF, #0265FF, #00D4FF, #0265FF)',
+          animation: 'borderRotate 4s linear infinite',
+        }}
+      />
+      <div
+        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

@@ -0,0 +1,25 @@
+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-[500]',
+  };
+
+  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

@@ -0,0 +1,23 @@
+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",
+      }}
+    />
+  );
+};