insforge 0.3.1

package/frontend/src/components/layout/AppHeader.tsx

@@ -0,0 +1,146 @@
+import { useState, useEffect } from 'react';
+import { LogOut, ChevronDown } from 'lucide-react';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/radix/DropdownMenu';
+import { Avatar, AvatarFallback } from '@/components/radix/Avatar';
+import { Separator } from '@/components/radix/Separator';
+import { cn } from '@/lib/utils/utils';
+import { ThemeToggle } from '@/components/ThemeToggle';
+import { useTheme } from '@/lib/contexts/ThemeContext';
+
+// Import SVG icons
+import DiscordIcon from '@/assets/logos/discord.svg?react';
+import GitHubIcon from '@/assets/logos/github.svg?react';
+import InsForgeLogoLight from '@/assets/logos/insforge_light.svg';
+import InsForgeLogoDark from '@/assets/logos/insforge_dark.svg';
+import { User } from '@/lib/contexts/AuthContext';
+
+interface AppHeaderProps {
+  currentUser: User | null;
+  onLogout: () => void;
+}
+
+export default function AppHeader({ currentUser, onLogout }: AppHeaderProps) {
+  const { resolvedTheme } = useTheme();
+  const [currentEmojiIndex, setCurrentEmojiIndex] = useState(0);
+  const emojis = ['🙏', '🥺', '🫵'];
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentEmojiIndex((prevIndex) => (prevIndex + 1) % emojis.length);
+    }, 2000);
+
+    return () => clearInterval(interval);
+  }, [emojis.length]);
+
+  const getUserInitials = (email: string) => {
+    if (!email) {
+      return 'U';
+    }
+    const parts = email.split('@')[0].split('.');
+    if (parts.length > 1) {
+      return (parts[0].charAt(0) + parts[1].charAt(0)).toUpperCase();
+    }
+    return email.substring(0, 2).toUpperCase();
+  };
+
+  const getAvatarColor = (email: string) => {
+    if (!email) {
+      return 'bg-gray-500';
+    }
+    const hash = email.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0);
+    const colors = [
+      'bg-blue-500',
+      'bg-green-500',
+      'bg-yellow-500',
+      'bg-purple-500',
+      'bg-pink-500',
+      'bg-indigo-500',
+    ];
+    return colors[hash % colors.length];
+  };
+
+  return (
+    <div className="h-16 w-full bg-white dark:bg-neutral-800 border-b border-border-gray dark:border-neutral-700 z-50 flex items-center justify-between px-6">
+      {/* Logo */}
+      <div className="px-2 py-3">
+        <img
+          src={resolvedTheme === 'light' ? InsForgeLogoLight : InsForgeLogoDark}
+          alt="Insforge Logo"
+          className="h-8 w-auto"
+        />
+      </div>
+
+      {/* Social Links */}
+      <div className="flex items-center gap-3">
+        {/* GitHub Badge */}
+        <a
+          href="https://github.com/InsForge/InsForge"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="inline-flex items-center gap-3 h-10 px-4 text-zinc-50 text-sm font-medium bg-black hover:bg-[#28282F] rounded-full transition-all duration-200"
+        >
+          <GitHubIcon className="h-5 w-5 dark:text-white" />
+          <p className="text-sm text-white">
+            We need you
+            <span className="text-md ml-1">{emojis[currentEmojiIndex]}</span>
+          </p>
+        </a>
+
+        {/* Discord Badge */}
+        <a
+          href="https://discord.gg/mqPxArVZ26"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="inline-flex items-center gap-3 h-10 px-4 text-zinc-50 text-sm font-medium bg-[#5765F2] hover:bg-[#3E4CD7] rounded-full transition-all duration-200"
+        >
+          <DiscordIcon className="h-5 w-5" />
+          <p className="text-sm text-white mr-1.5">Ask us anything</p>
+        </a>
+        <Separator className="h-6 mx-1" orientation="vertical" />
+        {/* Theme Toggle */}
+        <ThemeToggle />
+        <Separator className="h-6 mx-1" orientation="vertical" />
+        {/* User Profile */}
+        <DropdownMenu modal={false}>
+          <DropdownMenuTrigger asChild>
+            <button className="w-50 flex items-center gap-3 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-[8px] pr-3 transition-all duration-200 group">
+              <Avatar className="h-10 w-10 ring-2 ring-white dark:ring-gray-700 shadow-sm">
+                <AvatarFallback
+                  className={cn(
+                    'text-white font-medium text-sm',
+                    getAvatarColor(currentUser?.email ?? '')
+                  )}
+                >
+                  {getUserInitials(currentUser?.email ?? '')}
+                </AvatarFallback>
+              </Avatar>
+              <div className="text-left hidden md:block">
+                <p className="text-sm font-medium text-zinc-950 dark:text-zinc-100 leading-tight">
+                  Admin
+                </p>
+                <p className="text-xs text-zinc-500 dark:text-zinc-400">
+                  {currentUser?.email || 'Administrator'}
+                </p>
+              </div>
+              <ChevronDown className="h-5 w-5 text-black dark:text-white hidden md:block ml-auto" />
+            </button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-48" sideOffset={8} collisionPadding={16}>
+            <DropdownMenuItem
+              onClick={onLogout}
+              className="cursor-pointer text-red-600 dark:text-red-400"
+            >
+              <LogOut className="mr-2 h-4 w-4" />
+              <span>Sign Out</span>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </div>
+  );
+}

package/frontend/src/components/layout/AppSidebar.tsx

@@ -0,0 +1,190 @@
+import { Link, useLocation } from 'react-router-dom';
+import {
+  Home,
+  Database,
+  UserRoundCog,
+  HardDrive,
+  PanelLeftOpen,
+  PanelRightOpen,
+  BookOpen,
+  ExternalLink,
+  RotateCw,
+  Sparkles,
+  Code2,
+} from 'lucide-react';
+import { cn } from '@/lib/utils/utils';
+import { Button } from '@/components/radix/Button';
+import { ScrollArea } from '@/components/radix/ScrollArea';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/radix/Tooltip';
+import { OnboardButton } from '@/features/onboard/components/OnboardButton';
+import { useOnboardingCompletion } from '@/lib/hooks/useOnboardingCompletion';
+
+interface AppSidebarProps extends React.HTMLAttributes<HTMLElement> {
+  onLogout: () => void;
+  isCollapsed: boolean;
+  onToggleCollapse: () => void;
+}
+
+interface NavigationProps {
+  name: string;
+  href: string;
+  icon: React.ComponentType<{ className?: string }>;
+}
+
+const navigation: NavigationProps[] = [
+  { name: 'Dashboard', href: '/dashboard', icon: Home },
+  { name: 'Authentications', href: '/dashboard/authentication', icon: UserRoundCog },
+  { name: 'Database', href: '/dashboard/database', icon: Database },
+  { name: 'Storage', href: '/dashboard/storage', icon: HardDrive },
+  { name: 'Functions', href: '/dashboard/functions', icon: Code2 },
+  //{ name: 'Audit', href: '/dashboard/logs', icon: Logs },
+  // { name: 'Analytics', href: '/dashboard/analytics', icon: Activity },
+  { name: 'AI', href: '/dashboard/ai', icon: Sparkles },
+];
+
+const bottomNavigation = [
+  {
+    name: 'Documentation',
+    href: 'https://docs.insforge.dev',
+    icon: BookOpen,
+    external: true,
+  },
+];
+
+export default function AppSidebar({
+  onLogout: _onLogout,
+  isCollapsed,
+  onToggleCollapse,
+  ...props
+}: AppSidebarProps) {
+  const location = useLocation();
+  const { isCompleted } = useOnboardingCompletion();
+
+  // Add reinstall navigation item when onboarding is completed
+  const dynamicNavigation = isCompleted
+    ? [
+        ...navigation,
+        {
+          name: 'Reinstall',
+          href: '/dashboard/onboard?step=1',
+          icon: RotateCw,
+        },
+      ]
+    : navigation;
+
+  const NavItem = ({ item, onClick }: { item: NavigationProps; onClick?: () => void }) => {
+    const isActive = location.pathname === item.href.split('?')[0];
+
+    const buttonContent = (
+      <Button
+        variant={isActive ? 'default' : 'ghost'}
+        className={cn(
+          'w-full h-12 relative transition-all duration-200 ease-in-out',
+          isActive
+            ? 'bg-zinc-950 dark:bg-emerald-300 text-white dark:text-black'
+            : 'hover:bg-zinc-100 dark:hover:bg-neutral-600 text-black dark:text-white'
+        )}
+        onClick={onClick}
+      >
+        <div className="absolute left-3.5 h-5 w-5">
+          <item.icon className="h-5 w-5" />
+        </div>
+        {!isCollapsed && (
+          <span className="absolute left-11.5 font-medium truncate">{item.name}</span>
+        )}
+      </Button>
+    );
+
+    return (
+      <TooltipProvider delayDuration={300}>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Link to={item.href} className="block">
+              {buttonContent}
+            </Link>
+          </TooltipTrigger>
+          {isCollapsed && (
+            <TooltipContent side="right">
+              <p>{item.name}</p>
+            </TooltipContent>
+          )}
+        </Tooltip>
+      </TooltipProvider>
+    );
+  };
+
+  return (
+    <aside
+      {...props}
+      className={cn(
+        'fixed left-0 z-40 bg-white dark:bg-neutral-800 border-r border-gray-200 dark:border-neutral-700 flex flex-col transition-all duration-300 ease-in-out',
+        'top-16 bottom-0',
+        isCollapsed ? 'w-18' : 'w-60',
+        props.className
+      )}
+    >
+      {!isCompleted && (
+        <div className={`py-3 ${isCollapsed ? 'pl-1 pr-[3px]' : 'pl-3 pr-[11px]'} overflow-hidden`}>
+          <OnboardButton isCollapsed={isCollapsed} />
+        </div>
+      )}
+      {/* Navigation */}
+      <ScrollArea className="flex-1 pl-3 pr-[11px] py-4">
+        <nav className="space-y-2">
+          {dynamicNavigation.map((item) => (
+            <NavItem key={item.name} item={item} />
+          ))}
+        </nav>
+      </ScrollArea>
+
+      {/* Bottom section */}
+      <div className="p-3 pr-[11px] space-y-6 overflow-hidden">
+        {/* Bottom navigation items */}
+        {bottomNavigation.map((item) => (
+          <div key={item.name}>
+            <Button
+              variant="ghost"
+              className="w-full h-12 relative transition-all duration-200 ease-in-out border border-gray-200 dark:border-neutral-700 rounded-md hover:bg-zinc-100 dark:hover:bg-neutral-600 text-black dark:text-white"
+              onClick={() => window.open(item.href, '_blank')}
+            >
+              <div className="absolute left-3.5 h-5 w-5">
+                <item.icon className="h-5 w-5" />
+              </div>
+              {!isCollapsed && (
+                <>
+                  <span className="absolute left-11.5 font-medium truncate">{item.name}</span>
+                  {item.external && (
+                    <ExternalLink className="absolute left-46.5 h-4 w-4 text-zinc-400" />
+                  )}
+                </>
+              )}
+            </Button>
+          </div>
+        ))}
+
+        {/* Collapse button - only visible on 2xl screens */}
+        <div className="hidden 2xl:block">
+          <Button
+            variant="ghost"
+            className="w-full h-12 relative transition-all duration-200 ease-in-out hover:bg-zinc-100 dark:hover:bg-neutral-600 text-black dark:text-white"
+            onClick={onToggleCollapse}
+          >
+            <div className="absolute left-3.5 h-5 w-5">
+              {isCollapsed ? (
+                <PanelLeftOpen className="h-5 w-5" />
+              ) : (
+                <PanelRightOpen className="h-5 w-5" />
+              )}
+            </div>
+            {!isCollapsed && <span className="absolute left-11.5 font-medium">Collapse</span>}
+          </Button>
+        </div>
+      </div>
+    </aside>
+  );
+}

package/frontend/src/components/layout/CloudLayout.tsx

@@ -0,0 +1,95 @@
+import { useEffect } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { ThemeProvider } from '@/lib/contexts/ThemeContext';
+import { cn } from '@/lib/utils/utils';
+import { ServerEvents, useSocket } from '@/lib/contexts/SocketContext';
+
+interface CloudLayoutProps {
+  children: React.ReactNode;
+}
+
+interface RouterMessage {
+  type: 'ROUTE_CHANGE' | 'REFRESH';
+  path: string;
+}
+
+export default function CloudLayout({ children }: CloudLayoutProps) {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { socket } = useSocket();
+
+  useEffect(() => {
+    const handleCloudMessage = (event: MessageEvent) => {
+      try {
+        const message = event.data as RouterMessage;
+
+        if (message.type === 'ROUTE_CHANGE' && message.path) {
+          // Navigate to the corresponding cloud route
+          void navigate(message.path);
+        } else if (message.type === 'REFRESH') {
+          window.location.reload();
+        }
+      } catch (error) {
+        console.error('Error handling router message:', error);
+      }
+    };
+
+    // Add event listener for messages from parent window
+    window.addEventListener('message', handleCloudMessage);
+
+    // Cleanup listener on unmount
+    return () => {
+      window.removeEventListener('message', handleCloudMessage);
+    };
+  }, [navigate]);
+
+  useEffect(() => {
+    // Only send messages if we're in an iframe (not the main window)
+    if (window.parent !== window) {
+      // Send the current route to the parent cloud application
+      window.parent.postMessage(
+        {
+          type: 'APP_ROUTE_CHANGE',
+          path: location.pathname,
+        },
+        '*'
+      );
+    }
+  }, [location.pathname]);
+
+  // Listen for MCP connection events and forward to parent
+  useEffect(() => {
+    if (!socket || window.parent === window) {
+      return;
+    }
+
+    const handleMcpConnected = () => {
+      window.parent.postMessage(
+        {
+          type: 'MCP_CONNECTION_STATUS',
+          connected: true,
+        },
+        '*'
+      );
+    };
+
+    socket.on(ServerEvents.MCP_CONNECTED, handleMcpConnected);
+
+    return () => {
+      socket.off(ServerEvents.MCP_CONNECTED, handleMcpConnected);
+    };
+  }, [socket]);
+
+  return (
+    <ThemeProvider forcedTheme="dark">
+      <div
+        className={cn(
+          'h-screen bg-neutral-800',
+          location.pathname !== '/cloud/visualizer' && 'pt-13 pl-13'
+        )}
+      >
+        {children}
+      </div>
+    </ThemeProvider>
+  );
+}

package/frontend/src/components/layout/Layout.tsx

@@ -0,0 +1,43 @@
+import React, { useState } from 'react';
+import AppSidebar from './AppSidebar';
+import AppHeader from './AppHeader';
+import { cn } from '@/lib/utils/utils';
+import { useAuth } from '@/lib/contexts/AuthContext';
+import { useMediaQuery } from '@/lib/hooks/useMediaQuery';
+import { ThemeProvider } from '@/lib/contexts/ThemeContext';
+
+interface LayoutProps {
+  children: React.ReactNode;
+}
+
+export default function Layout({ children }: LayoutProps) {
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+  const [isHovering, setIsHovering] = useState(false);
+  const { user, logout } = useAuth();
+  const is2xl = useMediaQuery('(min-width: 1536px)');
+
+  return (
+    <ThemeProvider>
+      <div className="h-screen bg-gray-50 dark:bg-neutral-800 flex flex-col">
+        <AppHeader currentUser={user} onLogout={logout} />
+
+        {/* Main content */}
+        <div
+          className={cn(
+            'flex-1 transition-all duration-300 ease-in-out overflow-y-auto ml-18',
+            !sidebarCollapsed && '2xl:ml-60'
+          )}
+        >
+          <AppSidebar
+            onLogout={logout}
+            isCollapsed={is2xl ? sidebarCollapsed : !isHovering}
+            onToggleCollapse={() => setSidebarCollapsed(!sidebarCollapsed)}
+            onMouseEnter={() => setIsHovering(true)}
+            onMouseLeave={() => setIsHovering(false)}
+          />
+          {children}
+        </div>
+      </div>
+    </ThemeProvider>
+  );
+}

package/frontend/src/components/radix/Alert.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/lib/utils/utils';
+
+const alertVariants = cva(
+  'relative w-full rounded-lg border px-4 py-4 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7',
+  {
+    variants: {
+      variant: {
+        default: 'bg-background text-foreground',
+        destructive:
+          'border-destructive/50 text-destructive dark:bg-red-200 dark:border-destructive [&>svg]:text-destructive',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
+));
+Alert.displayName = 'Alert';
+
+const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h5 ref={ref} className={cn('font-medium leading-none tracking-tight', className)} {...props} />
+  )
+);
+AlertTitle.displayName = 'AlertTitle';
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('text-sm [&_p]:leading-relaxed', className)} {...props} />
+));
+AlertDescription.displayName = 'AlertDescription';
+
+export { Alert, AlertTitle, AlertDescription };

package/frontend/src/components/radix/AlertDialog.tsx

@@ -0,0 +1,115 @@
+import * as React from 'react';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+
+import { cn } from '@/lib/utils/utils';
+import { buttonVariants } from '@/components/radix/Button';
+
+const AlertDialog = AlertDialogPrimitive.Root;
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ComponentRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+
+const AlertDialogContent = React.forwardRef<
+  React.ComponentRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'rounded-lg fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+        className
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...props} />
+);
+AlertDialogHeader.displayName = 'AlertDialogHeader';
+
+const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
+    {...props}
+  />
+);
+AlertDialogFooter.displayName = 'AlertDialogFooter';
+
+const AlertDialogTitle = React.forwardRef<
+  React.ComponentRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn('text-lg font-semibold', className)}
+    {...props}
+  />
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+const AlertDialogDescription = React.forwardRef<
+  React.ComponentRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-gray-500', className)}
+    {...props}
+  />
+));
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
+
+const AlertDialogAction = React.forwardRef<
+  React.ComponentRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+const AlertDialogCancel = React.forwardRef<
+  React.ComponentRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', className)}
+    {...props}
+  />
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};

package/frontend/src/components/radix/Avatar.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+
+import { cn } from '@/lib/utils/utils';
+
+const Avatar = React.forwardRef<
+  React.ComponentRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-[8px]', className)}
+    {...props}
+  />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+  React.ComponentRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn('aspect-square h-full w-full rounded-[8px]', className)}
+    {...props}
+  />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+  React.ComponentRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      'flex h-full w-full items-center justify-center rounded-[8px] bg-muted',
+      className
+    )}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarImage, AvatarFallback };