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

package/src/components/border-animation.tsx

@@ -1,107 +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;
+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/border-color-animation.tsx

@@ -1,66 +1,66 @@
-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>
-  );
-};
+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/bot-avatar-name.tsx

@@ -1,36 +1,36 @@
-import { BotIcon } from './bot-icon';
-
-export const BotAvatarAndName = ({
-  name,
-  icon,
-  variant = 'default',
-}: {
-  name?: string;
-  icon?: React.ReactNode | string;
-  variant?: 'default' | 'active';
-}) => {
-  const size = variant === 'default' ? 20 : 24;
-
-  if (!name) {
-    return null;
-  }
-
-  const variantStyles = {
-    default: 'text-[#999] text-[14px] font-[400]',
-    active: 'text-[#0265FF] text-[14px] font-[700]',
-  };
-
-  const isUrl = typeof icon === 'string' && /^https?:\/\//.test(icon);
-  const iconJsx = isUrl ? (
-    <img src={icon as string} alt="" className="rounded-full" width={size} height={size} />
-  ) : (
-    icon || <BotIcon size={size} />
-  );
-
-  return (
-    <div className="flex items-center gap-1.5">
-      {iconJsx}
-      <div className={variantStyles[variant]}>{name}</div>
-    </div>
-  );
-};
+import { BotIcon } from './bot-icon';
+
+export const BotAvatarAndName = ({
+  name,
+  icon,
+  variant = 'default',
+}: {
+  name?: string;
+  icon?: React.ReactNode | string;
+  variant?: 'default' | 'active';
+}) => {
+  const size = variant === 'default' ? 20 : 24;
+
+  if (!name) {
+    return null;
+  }
+
+  const variantStyles = {
+    default: 'text-[#999] text-[14px] font-[400]',
+    active: 'text-[#0265FF] text-[14px] font-[700]',
+  };
+
+  const isUrl = typeof icon === 'string' && /^https?:\/\//.test(icon);
+  const iconJsx = isUrl ? (
+    <img src={icon as string} alt="" className="rounded-full" width={size} height={size} />
+  ) : (
+    icon || <BotIcon size={size} />
+  );
+
+  return (
+    <div className="flex items-center gap-1.5">
+      {iconJsx}
+      <div className={variantStyles[variant]}>{name}</div>
+    </div>
+  );
+};

package/src/components/bot-icon.tsx

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

package/src/components/bs-entry-select/app-group-folder.tsx

@@ -1,61 +1,61 @@
-import { useState, useEffect } from 'react';
-import { cn } from '../../lib/utils';
-import { transCls } from '../../const/ui';
-import { SolidArrowDownIcon } from '../bs-icons';
-
-const ChevronRightIcon = ({ size }: { size?: number }) => (
-  <SolidArrowDownIcon className="-rotate-90" size={size} />
-);
-
-export function AppGroupFolder({
-  label,
-  searchQuery,
-  children,
-}: {
-  label: string;
-  searchQuery: string;
-  children: React.ReactNode;
-}) {
-  const [expanded, setExpanded] = useState(true);
-  const hasSearch = searchQuery.trim().length > 0;
-
-  useEffect(() => {
-    if (hasSearch) {
-      setExpanded(true);
-    }
-  }, [hasSearch]);
-
-  return (
-    <div>
-      <div
-        className={cn(
-          'flex items-center gap-[6px] h-[32px] cursor-pointer rounded-[4px] pr-[10px]',
-          'hover:bg-[#EFF0F6]',
-          'border-b border-[#E0E0E0]',
-          'rounded-b-none',
-          transCls,
-        )}
-        style={{ paddingLeft: 10, paddingTop: 9 }}
-        onClick={() => setExpanded(!expanded)}
-      >
-        <span
-          className={cn(
-            'shrink-0 flex items-center justify-center w-[16px] h-[16px]',
-            transCls,
-            expanded && 'rotate-90',
-          )}
-        >
-          <ChevronRightIcon size={16} />
-        </span>
-        <i
-          className="icon-bsy-folder-close"
-          style={{ fontSize: 16, lineHeight: 1 }}
-        />
-        <span className="text-[12px] text-[#666666]">{label}</span>
-      </div>
-      {expanded && (
-        <div className="flex flex-col">{children}</div>
-      )}
-    </div>
-  );
-}
+import { useState, useEffect } from 'react';
+import { cn } from '../../lib/utils';
+import { transCls } from '../../const/ui';
+import { SolidArrowDownIcon } from '../bs-icons';
+
+const ChevronRightIcon = ({ size }: { size?: number }) => (
+  <SolidArrowDownIcon className="-rotate-90" size={size} />
+);
+
+export function AppGroupFolder({
+  label,
+  searchQuery,
+  children,
+}: {
+  label: string;
+  searchQuery: string;
+  children: React.ReactNode;
+}) {
+  const [expanded, setExpanded] = useState(true);
+  const hasSearch = searchQuery.trim().length > 0;
+
+  useEffect(() => {
+    if (hasSearch) {
+      setExpanded(true);
+    }
+  }, [hasSearch]);
+
+  return (
+    <div>
+      <div
+        className={cn(
+          'flex items-center gap-[6px] h-[32px] cursor-pointer rounded-[4px] pr-[10px]',
+          'hover:bg-[#EFF0F6]',
+          'border-b border-[#E0E0E0]',
+          'rounded-b-none',
+          transCls,
+        )}
+        style={{ paddingLeft: 10, paddingTop: 9 }}
+        onClick={() => setExpanded(!expanded)}
+      >
+        <span
+          className={cn(
+            'shrink-0 flex items-center justify-center w-[16px] h-[16px]',
+            transCls,
+            expanded && 'rotate-90',
+          )}
+        >
+          <ChevronRightIcon size={16} />
+        </span>
+        <i
+          className="icon-bsy-folder-close"
+          style={{ fontSize: 16, lineHeight: 1 }}
+        />
+        <span className="text-[12px] text-[#666666]">{label}</span>
+      </div>
+      {expanded && (
+        <div className="flex flex-col">{children}</div>
+      )}
+    </div>
+  );
+}