79 lines
1.9 KiB
TypeScript
79 lines
1.9 KiB
TypeScript
|
import React from 'react';
|
||
|
|
import { cn } from '../../lib/utils';
|
||
|
|
import {
|
||
|
|
AGENT_ICON_VISUALS,
|
||
|
|
resolveAgentIconKey,
|
||
|
|
type AgentIconKey,
|
||
|
|
type AgentIconSource,
|
||
|
|
} from '../../domain/agentIcon';
|
||
|
|
|
||
|
|
export type { AgentIconKey, AgentIconSource };
|
||
|
|
|
||
|
|
export const AgentIconBadge: React.FC<{
|
||
|
|
agent: AgentIconSource | 'add-more';
|
||
|
|
size?: 'xs' | 'sm' | 'md' | 'lg';
|
||
|
|
variant?: 'plain' | 'badge';
|
||
|
|
className?: string;
|
||
|
|
}> = ({ agent, size = 'md', variant = 'badge', className }) => {
|
||
|
|
const iconKey = resolveAgentIconKey(agent);
|
||
|
|
const visual = AGENT_ICON_VISUALS[iconKey];
|
||
|
|
const badgeSize =
|
||
|
|
size === 'xs'
|
||
|
|
? 'h-4 w-4 rounded-sm'
|
||
|
|
: size === 'sm'
|
||
|
|
? 'h-7 w-7 rounded-lg'
|
||
|
|
: size === 'lg'
|
||
|
|
? 'h-10 w-10 rounded-xl'
|
||
|
|
: 'h-8 w-8 rounded-lg';
|
||
|
|
const imageSize =
|
||
|
|
size === 'xs'
|
||
|
|
? 'h-3.5 w-3.5'
|
||
|
|
: size === 'sm'
|
||
|
|
? 'h-3.5 w-3.5'
|
||
|
|
: size === 'lg'
|
||
|
|
? 'h-5 w-5'
|
||
|
|
: 'h-4 w-4';
|
||
|
|
|
||
|
|
if (variant === 'plain') {
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
aria-hidden="true"
|
||
|
|
className={cn('shrink-0', imageSize, className)}
|
||
|
|
style={{
|
||
|
|
maskImage: `url(${visual.src})`,
|
||
|
|
WebkitMaskImage: `url(${visual.src})`,
|
||
|
|
maskSize: 'contain',
|
||
|
|
WebkitMaskSize: 'contain',
|
||
|
|
maskRepeat: 'no-repeat',
|
||
|
|
WebkitMaskRepeat: 'no-repeat',
|
||
|
|
maskPosition: 'center',
|
||
|
|
WebkitMaskPosition: 'center',
|
||
|
|
backgroundColor: 'currentColor',
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
data-agent-badge=""
|
||
|
|
className={cn(
|
||
|
|
'flex shrink-0 items-center justify-center overflow-hidden border',
|
||
|
|
badgeSize,
|
||
|
|
visual.badgeClassName,
|
||
|
|
className,
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
<img
|
||
|
|
src={visual.src}
|
||
|
|
alt=""
|
||
|
|
aria-hidden="true"
|
||
|
|
draggable={false}
|
||
|
|
className={cn(imageSize, visual.imageClassName)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default AgentIconBadge;
|