Skip to content
51 linesCodeBlameRaw
1import { AgentAvatar } from "../agent-avatar";
2import { WithPresence } from "../presence";
3
4import { cn } from "../../lib/cn";
5import { Avatar } from "../ui/avatar";
6
7/**
8 * A member's face: a person's avatar, or, on an old message from an agent
9 * that no longer exists (or one from g1t), a plain tile with the agent
10 * marker (components/ui/avatar.tsx). With `presence`, a person's carries
11 * their dot (active, away, notifications paused; components/presence.tsx),
12 * cut out of `ring`, the colour behind it, which also rings the marker.
13 */
14export function MemberAvatar({
15 member,
16 size = 20,
17 presence = false,
18 ring,
19}: {
20 member: { kind: "user" | "agent"; id?: string; name: string; avatar: string | null };
21 size?: number;
22 presence?: boolean;
23 ring?: string;
24}) {
25 if (member.kind === "agent") return <AgentAvatar agent={member} size={size} ring={ring} />;
26 const avatar = <Avatar name={member.name} image={member.avatar} size={size} />;
27 if (!presence) return avatar;
28 return (
29 <WithPresence person={{ id: member.id, username: member.name }} size={size} ring={ring}>
30 {avatar}
31 </WithPresence>
32 );
33}
34
35/**
36 * AGENT beside the name an old message from an agent was posted under;
37 * DELETED AGENT, in the quiet colours, when chat says it was deleted.
38 */
39export function AgentPill({ className, deleted = false }: { className?: string; deleted?: boolean }) {
40 return (
41 <span
42 className={cn(
43 "inline-flex h-4 shrink-0 items-center rounded-[4px] bg-accent/15 px-1 text-[0.5625rem] font-semibold tracking-[0.06em] text-accent uppercase",
44 deleted && "bg-raised text-muted",
45 className,
46 )}
47 >
48 {deleted ? "Deleted agent" : "Agent"}
49 </span>
50 );
51}