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

package/src/components/card-field.tsx

@@ -1,23 +1,23 @@
-import { cn } from '../lib/utils';
-import { ReactNode } from 'react';
-
-export interface CardFieldProps {
-  label: string;
-  children?: ReactNode;
-  className?: string;
-}
-
-export const CardField = ({ label, children, className }: CardFieldProps) => {
-  return (
-    <div className={cn('flex gap-2 items-start w-full', className)}>
-      <div className="w-[100px] shrink-0 text-[#666] text-sm leading-normal truncate">{label}</div>
-      <div className="flex-1 min-w-0 text-sm leading-normal whitespace-pre-wrap break-words">
-        {children ?? <span className="text-[#666]">无</span>}
-      </div>
-    </div>
-  );
-};
-
-export const CardFieldsWrapper = ({ children }: { children: ReactNode }) => {
-  return <div className="flex flex-col gap-[10px] w-full">{children}</div>;
-};
+import { cn } from '../lib/utils';
+import { ReactNode } from 'react';
+
+export interface CardFieldProps {
+  label: string;
+  children?: ReactNode;
+  className?: string;
+}
+
+export const CardField = ({ label, children, className }: CardFieldProps) => {
+  return (
+    <div className={cn('flex gap-2 items-start w-full', className)}>
+      <div className="w-[100px] shrink-0 text-[#666] text-sm leading-normal truncate">{label}</div>
+      <div className="flex-1 min-w-0 text-sm leading-normal whitespace-pre-wrap break-words">
+        {children ?? <span className="text-[#666]">无</span>}
+      </div>
+    </div>
+  );
+};
+
+export const CardFieldsWrapper = ({ children }: { children: ReactNode }) => {
+  return <div className="flex flex-col gap-[10px] w-full">{children}</div>;
+};

package/src/components/card.tsx

@@ -1,36 +1,36 @@
-import { transCls } from '../const/ui';
-import { cn } from '../lib/utils';
-import { ReactNode } from 'react';
-
-export interface CardProps {
-  title: string;
-  desc?: string;
-  index?: number;
-  icon?: ReactNode;
-  iconCode?: string;
-  onClick?: (title: string, iconCode?: string) => void;
-}
-
-export const Card = ({ title, desc, index, icon, onClick, iconCode }: CardProps) => {
-  return (
-    <div
-      className={cn(
-        'bs-card group flex flex-col cursor-pointer p-2.5 gap-2.5 rounded-lg max-w-[350px] border border-[#e0e0e0] bg-white',
-        {
-          transCls,
-        }
-      )}
-      onClick={() => {
-        onClick?.(title, iconCode);
-      }}
-    >
-      <div className="px-2.5 flex items-center gap-1.5 rounded-[4px] h-[34px]  bg-white">
-        {index === undefined ? null : <div>{index}</div>}
-        {icon === undefined ? null : <div className="text-[#0265FF]">{icon}</div>}
-        {/* make title text ellipsis */}
-        <div className="truncate !text-[#12111] group-hover:text-[#0265FF]">{title}</div>
-      </div>
-      <div className="text-[#666] leading-5 text-[12px]">{desc}</div>
-    </div>
-  );
-};
+import { transCls } from '../const/ui';
+import { cn } from '../lib/utils';
+import { ReactNode } from 'react';
+
+export interface CardProps {
+  title: string;
+  desc?: string;
+  index?: number;
+  icon?: ReactNode;
+  iconCode?: string;
+  onClick?: (title: string, iconCode?: string) => void;
+}
+
+export const Card = ({ title, desc, index, icon, onClick, iconCode }: CardProps) => {
+  return (
+    <div
+      className={cn(
+        'bs-card group flex flex-col cursor-pointer p-2.5 gap-2.5 rounded-lg max-w-[350px] border border-[#e0e0e0] bg-white',
+        {
+          transCls,
+        }
+      )}
+      onClick={() => {
+        onClick?.(title, iconCode);
+      }}
+    >
+      <div className="px-2.5 flex items-center gap-1.5 rounded-[4px] h-[34px]  bg-white">
+        {index === undefined ? null : <div>{index}</div>}
+        {icon === undefined ? null : <div className="text-[#0265FF]">{icon}</div>}
+        {/* make title text ellipsis */}
+        <div className="truncate !text-[#12111] group-hover:text-[#0265FF]">{title}</div>
+      </div>
+      <div className="text-[#666] leading-5 text-[12px]">{desc}</div>
+    </div>
+  );
+};

package/src/components/chat-area-header.tsx

@@ -1,65 +1,65 @@
-import { cn } from '../lib/utils';
-import { ChatHeaderBgImgUrl } from '../const/ui';
-import { IconBtn } from './icon-btn';
-import { CloseIcon, DockIcon, FloatIcon } from './bs-icons';
-
-export interface ChatAreaHeaderProps {
-  title?: string;
-  width?: number;
-  onDockClick?: () => void;
-  onCloseClick?: () => void;
-  avatar?: React.ReactNode;
-  draggable?: boolean;
-  isDragging?: boolean;
-  isDocked?: boolean;
-  onDragStart?: (e: React.MouseEvent) => void;
-}
-
-export const ChatAreaHeader = ({
-  avatar,
-  width,
-  onDockClick,
-  onCloseClick,
-  draggable,
-  isDragging,
-  isDocked,
-  onDragStart,
-}: ChatAreaHeaderProps) => {
-  return (
-    <div
-      className={cn('flex items-center justify-between', 'px-4', 'h-[52px] min-w-[200px]', {
-        'w-full': !width,
-        [`w-[${width}px]`]: width,
-        'cursor-grab': draggable && !isDragging,
-        'cursor-grabbing': isDragging,
-      })}
-      style={{
-        backgroundImage: ChatHeaderBgImgUrl,
-        backgroundSize: 'cover',
-        backgroundRepeat: 'no-repeat',
-      }}
-      onMouseDown={draggable ? onDragStart : undefined}
-    >
-      {avatar}
-
-      <div className="actions flex items-center gap-2.5 text-[#666]">
-        <IconBtn
-          onMouseDown={(e) => {
-            // 阻止事件冒泡，避免触发拖拽
-            e.stopPropagation();
-          }}
-          tooltip={isDocked ? '悬浮' : '右侧打开'}
-          // className="hover:!bg-[#ffffff]"
-          icon={isDocked ? <FloatIcon /> : <DockIcon />}
-          onClick={onDockClick}
-        />
-        <IconBtn
-          // tooltip="关闭"
-          // className="hover:!bg-[#ffffff]"
-          icon={<CloseIcon />}
-          onClick={onCloseClick}
-        />
-      </div>
-    </div>
-  );
-};
+import { cn } from '../lib/utils';
+import { ChatHeaderBgImgUrl } from '../const/ui';
+import { IconBtn } from './icon-btn';
+import { CloseIcon, DockIcon, FloatIcon } from './bs-icons';
+
+export interface ChatAreaHeaderProps {
+  title?: string;
+  width?: number;
+  onDockClick?: () => void;
+  onCloseClick?: () => void;
+  avatar?: React.ReactNode;
+  draggable?: boolean;
+  isDragging?: boolean;
+  isDocked?: boolean;
+  onDragStart?: (e: React.MouseEvent) => void;
+}
+
+export const ChatAreaHeader = ({
+  avatar,
+  width,
+  onDockClick,
+  onCloseClick,
+  draggable,
+  isDragging,
+  isDocked,
+  onDragStart,
+}: ChatAreaHeaderProps) => {
+  return (
+    <div
+      className={cn('flex items-center justify-between', 'px-4', 'h-[52px] min-w-[200px]', {
+        'w-full': !width,
+        [`w-[${width}px]`]: width,
+        'cursor-grab': draggable && !isDragging,
+        'cursor-grabbing': isDragging,
+      })}
+      style={{
+        backgroundImage: ChatHeaderBgImgUrl,
+        backgroundSize: 'cover',
+        backgroundRepeat: 'no-repeat',
+      }}
+      onMouseDown={draggable ? onDragStart : undefined}
+    >
+      {avatar}
+
+      <div className="actions flex items-center gap-2.5 text-[#666]">
+        <IconBtn
+          onMouseDown={(e) => {
+            // 阻止事件冒泡，避免触发拖拽
+            e.stopPropagation();
+          }}
+          tooltip={isDocked ? '悬浮' : '右侧打开'}
+          // className="hover:!bg-[#ffffff]"
+          icon={isDocked ? <FloatIcon /> : <DockIcon />}
+          onClick={onDockClick}
+        />
+        <IconBtn
+          // tooltip="关闭"
+          // className="hover:!bg-[#ffffff]"
+          icon={<CloseIcon />}
+          onClick={onCloseClick}
+        />
+      </div>
+    </div>
+  );
+};

package/src/components/check-card.tsx

@@ -1,77 +1,77 @@
-import { useRef, useState } from 'react';
-import { cn } from '../lib/utils';
-import { SquareChecker, type SquareCheckerProps } from './square-checker';
-
-export interface CheckCardProps extends SquareCheckerProps {
-  title: string;
-  description?: string;
-}
-
-export const CheckCard = ({
-  defaultChecked = false,
-  checked: controlledChecked,
-  onCheckedChange,
-  title,
-  description,
-  disabled = false,
-  className,
-}: CheckCardProps) => {
-  const [internalChecked, setInternalChecked] = useState<boolean>(!!defaultChecked);
-
-  const isControlled = controlledChecked !== undefined;
-  const isChecked = isControlled ? !!controlledChecked : internalChecked;
-
-  const isCheckedRef = useRef(isChecked);
-  isCheckedRef.current = isChecked;
-
-  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
-    // if the target is not the card itself (e.g. clicking on a link inside the card), do not toggle
-    if (e.target !== e.currentTarget) {
-      return;
-    }
-
-    if (disabled) return;
-
-    const newChecked = !isCheckedRef.current;
-
-
-    if (!isControlled) {
-      setInternalChecked(newChecked);
-    }
-    onCheckedChange?.(newChecked);
-  };
-
-  return (
-    <div
-      role="button"
-      tabIndex={disabled ? -1 : 0}
-      aria-checked={isChecked}
-      aria-disabled={disabled}
-      onClick={handleClick}
-      onKeyDown={(e) => {
-        if (e.key === 'Enter' || e.key === ' ') {
-          e.preventDefault();
-          handleClick(e as unknown as React.MouseEvent<HTMLDivElement>);
-        }
-      }}
-      className={cn(
-        'flex flex-col gap-[6px] p-[10px] rounded-[4px] cursor-pointer select-none bg-white',
-        'border',
-        isChecked ? 'border-[#0265FF]' : 'border-[#E0E0E0]',
-        disabled && 'cursor-not-allowed opacity-50',
-        className
-      )}
-    >
-      <div className="inline-flex items-center gap-[6px] pointer-events-none">
-          <SquareChecker
-            checked={isChecked}
-            disabled={disabled}
-          />
-        <span className="text-[#121111] text-[14px]">{title}</span>
-      </div>
-      {description != null && (
-        <p className="text-[#666] text-[12px] pl-[22px] pointer-events-none">{description}</p>
-      )}
-    </div>
-  );
-};
+import { useRef, useState } from 'react';
+import { cn } from '../lib/utils';
+import { SquareChecker, type SquareCheckerProps } from './square-checker';
+
+export interface CheckCardProps extends SquareCheckerProps {
+  title: string;
+  description?: string;
+}
+
+export const CheckCard = ({
+  defaultChecked = false,
+  checked: controlledChecked,
+  onCheckedChange,
+  title,
+  description,
+  disabled = false,
+  className,
+}: CheckCardProps) => {
+  const [internalChecked, setInternalChecked] = useState<boolean>(!!defaultChecked);
+
+  const isControlled = controlledChecked !== undefined;
+  const isChecked = isControlled ? !!controlledChecked : internalChecked;
+
+  const isCheckedRef = useRef(isChecked);
+  isCheckedRef.current = isChecked;
+
+  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    // if the target is not the card itself (e.g. clicking on a link inside the card), do not toggle
+    if (e.target !== e.currentTarget) {
+      return;
+    }
+
+    if (disabled) return;
+
+    const newChecked = !isCheckedRef.current;
+
+
+    if (!isControlled) {
+      setInternalChecked(newChecked);
+    }
+    onCheckedChange?.(newChecked);
+  };
+
+  return (
+    <div
+      role="button"
+      tabIndex={disabled ? -1 : 0}
+      aria-checked={isChecked}
+      aria-disabled={disabled}
+      onClick={handleClick}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          handleClick(e as unknown as React.MouseEvent<HTMLDivElement>);
+        }
+      }}
+      className={cn(
+        'flex flex-col gap-[6px] p-[10px] rounded-[4px] cursor-pointer select-none bg-white',
+        'border',
+        isChecked ? 'border-[#0265FF]' : 'border-[#E0E0E0]',
+        disabled && 'cursor-not-allowed opacity-50',
+        className
+      )}
+    >
+      <div className="inline-flex items-center gap-[6px] pointer-events-none">
+          <SquareChecker
+            checked={isChecked}
+            disabled={disabled}
+          />
+        <span className="text-[#121111] text-[14px]">{title}</span>
+      </div>
+      {description != null && (
+        <p className="text-[#666] text-[12px] pl-[22px] pointer-events-none">{description}</p>
+      )}
+    </div>
+  );
+};

package/src/components/circle-checker.tsx

@@ -1,66 +1,66 @@
-import { useState } from 'react';
-import { cn } from '../lib/utils';
-import { CheckerInBoxIcon } from './bs-icons';
-
-export interface CircleCheckerProps {
-  defaultChecked?: boolean;
-  checked?: boolean;
-  onCheckedChange?: (checked: boolean) => void;
-  children?: React.ReactNode;
-  disabled?: boolean;
-  className?: string;
-}
-
-export const CircleChecker = ({
-  defaultChecked = false,
-  checked: controlledChecked,
-  onCheckedChange,
-  children,
-  disabled = false,
-  className,
-}: CircleCheckerProps) => {
-  const [internalChecked, setInternalChecked] = useState(defaultChecked);
-
-  const isControlled = controlledChecked !== undefined;
-  const isChecked = isControlled ? controlledChecked : internalChecked;
-
-  const handleClick = () => {
-    if (disabled) return;
-
-    const newChecked = !isChecked;
-    if (!isControlled) {
-      setInternalChecked(newChecked);
-    }
-    onCheckedChange?.(newChecked);
-  };
-
-  return (
-    <button
-      type="button"
-      role="checkbox"
-      aria-checked={isChecked}
-      disabled={disabled}
-      onClick={handleClick}
-      className={cn(
-        'inline-flex items-center gap-[6px] cursor-pointer select-none',
-        'text-[#121111] text-[14px]',
-        disabled && 'cursor-not-allowed opacity-50',
-        className
-      )}
-    >
-      <span
-        className={cn(
-          'inline-flex items-center justify-center w-4 h-4 rounded-full transition-colors duration-200 box-border border',
-          isChecked ? 'bg-[#2E60FF] border-transparent' : 'bg-white border-[#e0e0e0]'
-        )}
-      >
-        {isChecked && (
-          <span className="text-white">
-            <CheckerInBoxIcon />
-          </span>
-        )}
-      </span>
-      {children && <span className="text-sm">{children}</span>}
-    </button>
-  );
-};
+import { useState } from 'react';
+import { cn } from '../lib/utils';
+import { CheckerInBoxIcon } from './bs-icons';
+
+export interface CircleCheckerProps {
+  defaultChecked?: boolean;
+  checked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  children?: React.ReactNode;
+  disabled?: boolean;
+  className?: string;
+}
+
+export const CircleChecker = ({
+  defaultChecked = false,
+  checked: controlledChecked,
+  onCheckedChange,
+  children,
+  disabled = false,
+  className,
+}: CircleCheckerProps) => {
+  const [internalChecked, setInternalChecked] = useState(defaultChecked);
+
+  const isControlled = controlledChecked !== undefined;
+  const isChecked = isControlled ? controlledChecked : internalChecked;
+
+  const handleClick = () => {
+    if (disabled) return;
+
+    const newChecked = !isChecked;
+    if (!isControlled) {
+      setInternalChecked(newChecked);
+    }
+    onCheckedChange?.(newChecked);
+  };
+
+  return (
+    <button
+      type="button"
+      role="checkbox"
+      aria-checked={isChecked}
+      disabled={disabled}
+      onClick={handleClick}
+      className={cn(
+        'inline-flex items-center gap-[6px] cursor-pointer select-none',
+        'text-[#121111] text-[14px]',
+        disabled && 'cursor-not-allowed opacity-50',
+        className
+      )}
+    >
+      <span
+        className={cn(
+          'inline-flex items-center justify-center w-4 h-4 rounded-full transition-colors duration-200 box-border border',
+          isChecked ? 'bg-[#2E60FF] border-transparent' : 'bg-white border-[#e0e0e0]'
+        )}
+      >
+        {isChecked && (
+          <span className="text-white">
+            <CheckerInBoxIcon />
+          </span>
+        )}
+      </span>
+      {children && <span className="text-sm">{children}</span>}
+    </button>
+  );
+};