@baishuyun/ai-design 1.0.0

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

@@ -0,0 +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>
+  );
+};

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

@@ -0,0 +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>
+  );
+};

package/src/components/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",
+      }}
+    />
+  );
+};