cf73f3481c
- Create ChatMessageIdentityBar with agent icon, name, timestamp, and streaming dot - Create ChatStreamingCursor with animate-cursor-blink and aria-hidden - Extend ChatMessage with agentName, agentIcon, agentRole, timestamp, isStreaming props - Wrap assistant messages in group div for hover actions (Plan 03) - Create agent-role-colors.ts with 11 distinct role colors (light + dark variants) - Create ChatMarkdownMessage prerequisite from phase-21 base - All 4 ChatMessageIdentityBar tests pass
38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
import { AgentIcon } from "./AgentIconPicker";
|
|
import { agentRoleColors, agentRoleColorDefault } from "../lib/agent-role-colors";
|
|
import type { AgentRole } from "@paperclipai/shared";
|
|
|
|
interface ChatMessageIdentityBarProps {
|
|
agentName: string;
|
|
agentIcon?: string | null;
|
|
agentRole?: AgentRole | null;
|
|
timestamp?: string;
|
|
isStreaming?: boolean;
|
|
}
|
|
|
|
export function ChatMessageIdentityBar({
|
|
agentName,
|
|
agentIcon,
|
|
agentRole,
|
|
timestamp,
|
|
isStreaming,
|
|
}: ChatMessageIdentityBarProps) {
|
|
const colorClass = agentRole
|
|
? (agentRoleColors[agentRole] ?? agentRoleColorDefault)
|
|
: agentRoleColorDefault;
|
|
|
|
return (
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<AgentIcon icon={agentIcon} className={`h-4 w-4 ${colorClass}`} />
|
|
<span className={`text-[13px] font-semibold ${colorClass}`}>{agentName}</span>
|
|
{isStreaming && (
|
|
<span className="h-1.5 w-1.5 rounded-full bg-cyan-400 animate-pulse" />
|
|
)}
|
|
{timestamp && (
|
|
<span className="text-[11px] text-muted-foreground">
|
|
{new Date(timestamp).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
|
|
</span>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|