AgentAvatar

Show an agent in lists, headers and chat. The avatar uses the agent icon when set, otherwise initials of displayName or name, tinted with the agent color.

Getting Started
$pnpm add @sinups/ai-kit @mantine/core @mantine/hooks @tabler/icons-react
Examples
Agents and sizes
Source

The component source as it ships in the package. Useful as a reference, or as a starting point if you want to fork a piece.

agents/AgentAvatar/AgentAvatar.tsx
import React, { memo } from 'react';
import { Avatar, type MantineSize } from '@mantine/core';
import type { AgentDefinition } from '../types';

export interface AgentAvatarProps {
  /** Agent to render, `icon` wins over initials of `displayName` or `name` */
  agent: Pick<AgentDefinition, 'name' | 'displayName' | 'color' | 'icon'>;
  /** Avatar size, `md` by default */
  size?: MantineSize | number;
  /** Class name added to the root element */
  className?: string;
  /** Inline styles added to the root element */
  style?: React.CSSProperties;
}

/** Colored avatar of an agent with its icon or initials */
export const AgentAvatar = memo(function AgentAvatar({
  agent,
  size = 'md',
  className,
  style,
}: AgentAvatarProps) {
  const label = agent.displayName || agent.name;
  return (
    <Avatar
      size={size}
      radius="md"
      variant="light"
      color={agent.color ?? 'gray'}
      name={agent.icon ? undefined : label.replace(/-/g, ' ')}
      aria-hidden
      className={className}
      style={style}
    >
      {agent.icon}
    </Avatar>
  );
});

AgentAvatar.displayName = 'AgentAvatar';
API reference
Prop
Type
Required
agent
Pick<AgentDefinition, 'name' | 'displayName' | 'color' | 'icon'>
Yes
Agent to render, `icon` wins over initials of `displayName` or `name`
size
MantineSize | number
No
Avatar size, `md` by default
className
string
No
Class name added to the root element
style
React.CSSProperties
No
Inline styles added to the root element