File size: 1,369 Bytes
f56a29b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | /**
* Agent Avatar Component
* Displays agent avatar and name in chat messages
*/
import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
interface AgentAvatarProps {
avatar: string; // Image URL or emoji
color: string; // Theme color (hex)
name: string; // Agent display name
size?: 'sm' | 'md' | 'lg';
}
// Check if string is a URL
function isUrl(str: string): boolean {
return str.startsWith('http') || str.startsWith('/') || str.startsWith('data:');
}
export default function AgentAvatar({ avatar, color, name, size = 'md' }: AgentAvatarProps) {
const sizeClasses = {
sm: 'size-6',
md: 'size-8',
lg: 'size-10',
};
return (
<div className="flex items-center gap-2 mb-2">
<Avatar className={sizeClasses[size]} style={{ borderColor: color, borderWidth: 2 }}>
{isUrl(avatar) ? (
<>
<AvatarImage src={avatar} alt={name} />
<AvatarFallback style={{ backgroundColor: `${color}20`, color }}>
{name.charAt(0)}
</AvatarFallback>
</>
) : (
<AvatarFallback style={{ backgroundColor: `${color}20`, color }}>
{avatar || name.charAt(0)}
</AvatarFallback>
)}
</Avatar>
<span className="text-sm font-semibold" style={{ color }}>
{name}
</span>
</div>
);
}
|