added boring avatars

autogpt_platform/frontend/package.json

@@ -46,6 +46,7 @@
     "@tanstack/react-table": "^8.20.5",
     "@xyflow/react": "^12.3.1",
     "ajv": "^8.17.1",
+    "boring-avatars": "^1.11.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "1.0.0",

autogpt_platform/frontend/src/components/ui/BoringAvatarWrapper.tsx

@@ -0,0 +1,32 @@
+import Avatar from "boring-avatars";
+
+import React from 'react';
+
+interface BoringAvatarWrapperProps {
+  size?: number;
+  name: string;
+  variant?: 'marble' | 'beam' | 'pixel' | 'sunset' | 'ring' | 'bauhaus';
+  colors?: string[];
+  square?: boolean;
+}
+
+export const BoringAvatarWrapper: React.FC<BoringAvatarWrapperProps> = ({
+  size = 40,
+  name,
+  variant = 'beam',
+  colors = ['#92A1C6', '#146A7C', '#F0AB3D', '#C271B4', '#C20D90'],
+  square = false,
+}) => {
+  return (
+    <Avatar
+      size={size}
+      name={name}
+      variant={variant}
+      colors={colors}
+      square={square}
+    />
+  );
+};
+
+export default BoringAvatarWrapper;
+

autogpt_platform/frontend/src/components/ui/avatar.tsx

@@ -2,6 +2,7 @@
 
 import * as React from "react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import BoringAvatar from "./BoringAvatarWrapper"
 
 import { cn } from "@/lib/utils";
 
@@ -35,16 +36,23 @@ AvatarImage.displayName = AvatarPrimitive.Image.displayName;
 const AvatarFallback = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Fallback>,
   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
->(({ className, ...props }, ref) => (
+>(({ className, ...props }, ref) => (  
   <AvatarPrimitive.Fallback
     ref={ref}
     className={cn(
-      "flex h-full w-full items-center justify-center rounded-full bg-neutral-100 dark:bg-neutral-800",
+      "flex h-full w-full items-center justify-center rounded-full",
       className,
     )}
     {...props}
-  />
+  >
+    <BoringAvatar
+      size={40}
+      name={props.children?.toString() || "User"}
+      variant="marble"
+      colors={["#92A1C6", "#146A7C", "#F0AB3D", "#C271B4", "#C20D90"]}
+    />
+  </AvatarPrimitive.Fallback>
 ));
 AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 
-export { Avatar, AvatarImage, AvatarFallback };
+export { Avatar as Avatar, AvatarImage, AvatarFallback };

autogpt_platform/frontend/yarn.lock

@@ -4596,6 +4596,11 @@ boolbase@^1.0.0:
   resolved "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz"
   integrity sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==
 
+boring-avatars@^1.11.2:
+  version "1.11.2"
+  resolved "https://registry.npmjs.org/boring-avatars/-/boring-avatars-1.11.2.tgz"
+  integrity sha512-3+wkwPeObwS4R37FGXMYViqc4iTrIRj5yzfX9Qy4mnpZ26sX41dGMhsAgmKks1r/uufY1pl4vpgzMWHYfJRb2A==
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz"