diff --git a/ui/src/components/task-chat/TaskChatBubble.tsx b/ui/src/components/task-chat/TaskChatBubble.tsx index 152d14100af..db353504ab9 100644 --- a/ui/src/components/task-chat/TaskChatBubble.tsx +++ b/ui/src/components/task-chat/TaskChatBubble.tsx @@ -1,26 +1,26 @@ import { cn } from "@/lib/utils"; import { MarkdownBody } from "@/components/MarkdownBody"; +import { Avatar, AvatarFallback } from "@/components/ui/avatar"; +import { AgentIcon } from "@/components/AgentIconPicker"; import type { TaskChatMessageItem } from "./task-chat-model"; interface TaskChatBubbleProps { item: TaskChatMessageItem; } -/** Brand agent-gradient count (mirrors AgentCapsule's token pairs in index.css). */ -const GRADIENT_COUNT = 10; - -function capsuleGradient(index: number | undefined): string { - const n = Math.trunc(index ?? 1); - const idx = ((((n - 1) % GRADIENT_COUNT) + GRADIENT_COUNT) % GRADIENT_COUNT) + 1; - return `linear-gradient(to bottom, var(--agent-${idx}a), var(--agent-${idx}b))`; +function initialsForName(name: string) { + const parts = name.trim().split(/\s+/); + if (parts.length >= 2) { + return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase(); + } + return name.slice(0, 2).toUpperCase(); } /** * Author-typed message row — the primary legibility signal. Human messages sit * right in a solid accent bubble; agent messages sit left in a neutral card - * bubble with a capsule-avatar author header (textless vertical brand-gradient - * capsule + name · mode chip, per the v3/v6 prototype decisions); system - * notices are centered and recede. + * bubble with an avatar author header (the agent's assigned icon + name · mode + * chip); system notices are centered and recede. */ export function TaskChatBubble({ item }: TaskChatBubbleProps) { if (item.author === "system") { @@ -36,12 +36,15 @@ export function TaskChatBubble({ item }: TaskChatBubbleProps) {
{!isHuman && item.authorName ? ( -