mirror of
https://github.com/alkimake/paperclip.git
synced 2026-06-19 12:10:37 +09:00
Fix chat comment alignment, avatars, and layout polish
- Agent messages: avatar outside left (matching feed items alignment), always shown, consistently uses icon avatar instead of initials - User messages: avatar outside right, action bar moved below the gray bubble, gray darkened to bg-muted - System events: right-aligned when actor is the current user - Run messages: use agent icon avatar consistently - Pass actorType/actorId in event metadata for current-user detection Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
dotta
parent
9131cc0355
commit
94652c6079
2 changed files with 204 additions and 163 deletions
|
|
@ -360,45 +360,47 @@ function IssueChatUserMessage() {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<MessagePrimitive.Root id={anchorId}>
|
<MessagePrimitive.Root id={anchorId}>
|
||||||
<div className="flex justify-end">
|
<div className="group flex items-end justify-end gap-2">
|
||||||
<div
|
<div className="flex max-w-[85%] flex-col items-end">
|
||||||
className={cn(
|
<div
|
||||||
"group relative max-w-[85%] min-w-0 overflow-hidden rounded-2xl px-4 py-2.5",
|
className={cn(
|
||||||
queued
|
"min-w-0 overflow-hidden rounded-2xl px-4 py-2.5",
|
||||||
? "bg-amber-50/80 dark:bg-amber-500/10"
|
queued
|
||||||
: "bg-muted/60",
|
? "bg-amber-50/80 dark:bg-amber-500/10"
|
||||||
pending && "opacity-80",
|
: "bg-muted",
|
||||||
)}
|
pending && "opacity-80",
|
||||||
>
|
)}
|
||||||
{queued ? (
|
>
|
||||||
<div className="mb-1.5 flex items-center gap-2">
|
{queued ? (
|
||||||
<span className="inline-flex items-center rounded-full border border-amber-400/60 bg-amber-100/70 px-2 py-0.5 text-[10px] font-medium uppercase tracking-[0.14em] text-amber-800 dark:border-amber-400/40 dark:bg-amber-500/20 dark:text-amber-200">
|
<div className="mb-1.5 flex items-center gap-2">
|
||||||
Queued
|
<span className="inline-flex items-center rounded-full border border-amber-400/60 bg-amber-100/70 px-2 py-0.5 text-[10px] font-medium uppercase tracking-[0.14em] text-amber-800 dark:border-amber-400/40 dark:bg-amber-500/20 dark:text-amber-200">
|
||||||
</span>
|
Queued
|
||||||
{queueTargetRunId && onInterruptQueued ? (
|
</span>
|
||||||
<Button
|
{queueTargetRunId && onInterruptQueued ? (
|
||||||
size="sm"
|
<Button
|
||||||
variant="outline"
|
size="sm"
|
||||||
className="h-6 border-red-300 px-2 text-[11px] text-red-700 hover:bg-red-50 hover:text-red-800 dark:border-red-500/40 dark:text-red-300 dark:hover:bg-red-500/10"
|
variant="outline"
|
||||||
disabled={interruptingQueuedRunId === queueTargetRunId}
|
className="h-6 border-red-300 px-2 text-[11px] text-red-700 hover:bg-red-50 hover:text-red-800 dark:border-red-500/40 dark:text-red-300 dark:hover:bg-red-500/10"
|
||||||
onClick={() => void onInterruptQueued(queueTargetRunId)}
|
disabled={interruptingQueuedRunId === queueTargetRunId}
|
||||||
>
|
onClick={() => void onInterruptQueued(queueTargetRunId)}
|
||||||
{interruptingQueuedRunId === queueTargetRunId ? "Interrupting..." : "Interrupt"}
|
>
|
||||||
</Button>
|
{interruptingQueuedRunId === queueTargetRunId ? "Interrupting..." : "Interrupt"}
|
||||||
) : null}
|
</Button>
|
||||||
</div>
|
) : null}
|
||||||
) : null}
|
</div>
|
||||||
{pending ? <div className="mb-1 text-xs text-muted-foreground">Sending...</div> : null}
|
) : null}
|
||||||
|
{pending ? <div className="mb-1 text-xs text-muted-foreground">Sending...</div> : null}
|
||||||
|
|
||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
<MessagePrimitive.Parts
|
<MessagePrimitive.Parts
|
||||||
components={{
|
components={{
|
||||||
Text: ({ text }) => <IssueChatTextPart text={text} />,
|
Text: ({ text }) => <IssueChatTextPart text={text} />,
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="mt-1 flex items-center justify-end gap-1.5 opacity-0 transition-opacity group-hover:opacity-100">
|
<div className="mt-1 flex items-center justify-end gap-1.5 px-1 opacity-0 transition-opacity group-hover:opacity-100">
|
||||||
<Tooltip>
|
<Tooltip>
|
||||||
<TooltipTrigger asChild>
|
<TooltipTrigger asChild>
|
||||||
<a
|
<a
|
||||||
|
|
@ -432,6 +434,10 @@ function IssueChatUserMessage() {
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<Avatar size="sm" className="mb-6 shrink-0">
|
||||||
|
<AvatarFallback>You</AvatarFallback>
|
||||||
|
</Avatar>
|
||||||
</div>
|
</div>
|
||||||
</MessagePrimitive.Root>
|
</MessagePrimitive.Root>
|
||||||
);
|
);
|
||||||
|
|
@ -453,9 +459,11 @@ function IssueChatAssistantMessage() {
|
||||||
: typeof custom.runAgentName === "string"
|
: typeof custom.runAgentName === "string"
|
||||||
? custom.runAgentName
|
? custom.runAgentName
|
||||||
: "Agent";
|
: "Agent";
|
||||||
|
const authorAgentId = typeof custom.authorAgentId === "string" ? custom.authorAgentId : null;
|
||||||
const runId = typeof custom.runId === "string" ? custom.runId : null;
|
const runId = typeof custom.runId === "string" ? custom.runId : null;
|
||||||
const runAgentId = typeof custom.runAgentId === "string" ? custom.runAgentId : null;
|
const runAgentId = typeof custom.runAgentId === "string" ? custom.runAgentId : null;
|
||||||
const runAgentIcon = runAgentId ? agentMap?.get(runAgentId)?.icon : undefined;
|
const agentId = authorAgentId ?? runAgentId;
|
||||||
|
const agentIcon = agentId ? agentMap?.get(agentId)?.icon : undefined;
|
||||||
const commentId = typeof custom.commentId === "string" ? custom.commentId : null;
|
const commentId = typeof custom.commentId === "string" ? custom.commentId : null;
|
||||||
const notices = Array.isArray(custom.notices)
|
const notices = Array.isArray(custom.notices)
|
||||||
? custom.notices.filter((notice): notice is string => typeof notice === "string" && notice.length > 0)
|
? custom.notices.filter((notice): notice is string => typeof notice === "string" && notice.length > 0)
|
||||||
|
|
@ -476,97 +484,98 @@ function IssueChatAssistantMessage() {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<MessagePrimitive.Root id={anchorId}>
|
<MessagePrimitive.Root id={anchorId}>
|
||||||
<div className="min-w-0 overflow-hidden rounded-sm p-3">
|
<div className="flex items-start gap-2.5 py-1.5">
|
||||||
<div className="mb-2 flex items-center justify-between gap-3">
|
<Avatar size="sm" className="mt-0.5 shrink-0">
|
||||||
<div className="flex items-center gap-2">
|
{agentIcon ? (
|
||||||
{runAgentId ? (
|
<AvatarFallback><AgentIcon icon={agentIcon} className="h-3.5 w-3.5" /></AvatarFallback>
|
||||||
<Avatar size="sm">
|
) : (
|
||||||
{runAgentIcon ? (
|
<AvatarFallback>{initialsForName(authorName)}</AvatarFallback>
|
||||||
<AvatarFallback><AgentIcon icon={runAgentIcon} className="h-3.5 w-3.5" /></AvatarFallback>
|
)}
|
||||||
) : (
|
</Avatar>
|
||||||
<AvatarFallback>{initialsForName(authorName)}</AvatarFallback>
|
|
||||||
)}
|
|
||||||
</Avatar>
|
|
||||||
) : null}
|
|
||||||
<span className="text-sm font-medium text-foreground">{authorName}</span>
|
|
||||||
{isRunning ? (
|
|
||||||
<span className="inline-flex items-center gap-1 rounded-full border border-cyan-400/40 bg-cyan-500/10 px-2 py-0.5 text-[10px] font-medium uppercase tracking-[0.14em] text-cyan-700 dark:text-cyan-200">
|
|
||||||
<Loader2 className="h-3 w-3 animate-spin" />
|
|
||||||
Running
|
|
||||||
</span>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-1 text-xs text-muted-foreground">
|
|
||||||
<a href={anchorId ? `#${anchorId}` : undefined} className="hover:text-foreground hover:underline">
|
|
||||||
{message.createdAt ? formatShortDate(message.createdAt) : ""}
|
|
||||||
</a>
|
|
||||||
{runHref ? (
|
|
||||||
<DropdownMenu>
|
|
||||||
<DropdownMenuTrigger asChild>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="icon-xs"
|
|
||||||
className="text-muted-foreground hover:text-foreground"
|
|
||||||
title="More actions"
|
|
||||||
aria-label="More actions"
|
|
||||||
>
|
|
||||||
<MoreHorizontal className="h-3.5 w-3.5" />
|
|
||||||
</Button>
|
|
||||||
</DropdownMenuTrigger>
|
|
||||||
<DropdownMenuContent align="end">
|
|
||||||
<DropdownMenuItem asChild>
|
|
||||||
<Link to={runHref}>View run</Link>
|
|
||||||
</DropdownMenuItem>
|
|
||||||
</DropdownMenuContent>
|
|
||||||
</DropdownMenu>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-3">
|
<div className="min-w-0 flex-1">
|
||||||
<MessagePrimitive.Parts
|
<div className="mb-1.5 flex items-center justify-between gap-3">
|
||||||
components={{
|
<div className="flex items-center gap-2">
|
||||||
Text: ({ text }) => <IssueChatTextPart text={text} />,
|
<span className="text-sm font-medium text-foreground">{authorName}</span>
|
||||||
ChainOfThought: IssueChatChainOfThought,
|
{isRunning ? (
|
||||||
}}
|
<span className="inline-flex items-center gap-1 rounded-full border border-cyan-400/40 bg-cyan-500/10 px-2 py-0.5 text-[10px] font-medium uppercase tracking-[0.14em] text-cyan-700 dark:text-cyan-200">
|
||||||
/>
|
<Loader2 className="h-3 w-3 animate-spin" />
|
||||||
{message.content.length === 0 && waitingText ? (
|
Running
|
||||||
<div className="rounded-sm bg-accent/20 px-3 py-2 text-sm text-muted-foreground">
|
</span>
|
||||||
{waitingText}
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
) : null}
|
<div className="flex items-center gap-1 text-xs text-muted-foreground">
|
||||||
{notices.length > 0 ? (
|
<a href={anchorId ? `#${anchorId}` : undefined} className="hover:text-foreground hover:underline">
|
||||||
<div className="space-y-2">
|
{message.createdAt ? formatShortDate(message.createdAt) : ""}
|
||||||
{notices.map((notice, index) => (
|
</a>
|
||||||
<div
|
{runHref ? (
|
||||||
key={`${message.id}:notice:${index}`}
|
<DropdownMenu>
|
||||||
className="rounded-sm border border-border/60 bg-accent/20 px-3 py-2 text-sm text-muted-foreground"
|
<DropdownMenuTrigger asChild>
|
||||||
>
|
<Button
|
||||||
{notice}
|
variant="ghost"
|
||||||
</div>
|
size="icon-xs"
|
||||||
))}
|
className="text-muted-foreground hover:text-foreground"
|
||||||
|
title="More actions"
|
||||||
|
aria-label="More actions"
|
||||||
|
>
|
||||||
|
<MoreHorizontal className="h-3.5 w-3.5" />
|
||||||
|
</Button>
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent align="end">
|
||||||
|
<DropdownMenuItem asChild>
|
||||||
|
<Link to={runHref}>View run</Link>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
) : null}
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mt-2 flex items-center gap-1">
|
<div className="space-y-3">
|
||||||
<ActionBarPrimitive.Copy
|
<MessagePrimitive.Parts
|
||||||
copiedDuration={2000}
|
components={{
|
||||||
className="group inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground data-[copied=true]:text-foreground"
|
Text: ({ text }) => <IssueChatTextPart text={text} />,
|
||||||
title="Copy message"
|
ChainOfThought: IssueChatChainOfThought,
|
||||||
aria-label="Copy message"
|
}}
|
||||||
>
|
|
||||||
<Copy className="h-3.5 w-3.5 group-data-[copied=true]:hidden" />
|
|
||||||
<Check className="hidden h-3.5 w-3.5 group-data-[copied=true]:block" />
|
|
||||||
</ActionBarPrimitive.Copy>
|
|
||||||
{commentId && onVote ? (
|
|
||||||
<IssueChatFeedbackButtons
|
|
||||||
activeVote={activeVote}
|
|
||||||
sharingPreference={feedbackDataSharingPreference}
|
|
||||||
termsUrl={feedbackTermsUrl ?? null}
|
|
||||||
onVote={handleVote}
|
|
||||||
/>
|
/>
|
||||||
) : null}
|
{message.content.length === 0 && waitingText ? (
|
||||||
|
<div className="rounded-sm bg-accent/20 px-3 py-2 text-sm text-muted-foreground">
|
||||||
|
{waitingText}
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
{notices.length > 0 ? (
|
||||||
|
<div className="space-y-2">
|
||||||
|
{notices.map((notice, index) => (
|
||||||
|
<div
|
||||||
|
key={`${message.id}:notice:${index}`}
|
||||||
|
className="rounded-sm border border-border/60 bg-accent/20 px-3 py-2 text-sm text-muted-foreground"
|
||||||
|
>
|
||||||
|
{notice}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-2 flex items-center gap-1">
|
||||||
|
<ActionBarPrimitive.Copy
|
||||||
|
copiedDuration={2000}
|
||||||
|
className="group inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground data-[copied=true]:text-foreground"
|
||||||
|
title="Copy message"
|
||||||
|
aria-label="Copy message"
|
||||||
|
>
|
||||||
|
<Copy className="h-3.5 w-3.5 group-data-[copied=true]:hidden" />
|
||||||
|
<Check className="hidden h-3.5 w-3.5 group-data-[copied=true]:block" />
|
||||||
|
</ActionBarPrimitive.Copy>
|
||||||
|
{commentId && onVote ? (
|
||||||
|
<IssueChatFeedbackButtons
|
||||||
|
activeVote={activeVote}
|
||||||
|
sharingPreference={feedbackDataSharingPreference}
|
||||||
|
termsUrl={feedbackTermsUrl ?? null}
|
||||||
|
onVote={handleVote}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</MessagePrimitive.Root>
|
</MessagePrimitive.Root>
|
||||||
|
|
@ -803,6 +812,8 @@ function IssueChatSystemMessage() {
|
||||||
const runAgentName = typeof custom.runAgentName === "string" ? custom.runAgentName : null;
|
const runAgentName = typeof custom.runAgentName === "string" ? custom.runAgentName : null;
|
||||||
const runStatus = typeof custom.runStatus === "string" ? custom.runStatus : null;
|
const runStatus = typeof custom.runStatus === "string" ? custom.runStatus : null;
|
||||||
const actorName = typeof custom.actorName === "string" ? custom.actorName : null;
|
const actorName = typeof custom.actorName === "string" ? custom.actorName : null;
|
||||||
|
const actorType = typeof custom.actorType === "string" ? custom.actorType : null;
|
||||||
|
const actorId = typeof custom.actorId === "string" ? custom.actorId : null;
|
||||||
const statusChange = typeof custom.statusChange === "object" && custom.statusChange
|
const statusChange = typeof custom.statusChange === "object" && custom.statusChange
|
||||||
? custom.statusChange as { from: string | null; to: string | null }
|
? custom.statusChange as { from: string | null; to: string | null }
|
||||||
: null;
|
: null;
|
||||||
|
|
@ -814,50 +825,73 @@ function IssueChatSystemMessage() {
|
||||||
: null;
|
: null;
|
||||||
|
|
||||||
if (custom.kind === "event" && actorName) {
|
if (custom.kind === "event" && actorName) {
|
||||||
|
const isCurrentUser = actorType === "user" && !!currentUserId && actorId === currentUserId;
|
||||||
|
const isAgent = actorType === "agent";
|
||||||
|
const agentIcon = isAgent && actorId ? agentMap?.get(actorId)?.icon : undefined;
|
||||||
|
|
||||||
|
const eventContent = (
|
||||||
|
<div className="min-w-0 space-y-1.5">
|
||||||
|
<div className={cn("flex flex-wrap items-baseline gap-x-1.5 gap-y-1 text-sm", isCurrentUser && "justify-end")}>
|
||||||
|
<span className="font-medium text-foreground">{actorName}</span>
|
||||||
|
<span className="text-muted-foreground">updated this task</span>
|
||||||
|
<a
|
||||||
|
href={anchorId ? `#${anchorId}` : undefined}
|
||||||
|
className="text-sm text-muted-foreground transition-colors hover:text-foreground hover:underline"
|
||||||
|
>
|
||||||
|
{timeAgo(message.createdAt)}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{statusChange ? (
|
||||||
|
<div className={cn("flex flex-wrap items-center gap-2 text-sm", isCurrentUser && "justify-end")}>
|
||||||
|
<span className="text-[10px] font-medium uppercase tracking-[0.14em] text-muted-foreground">
|
||||||
|
Status
|
||||||
|
</span>
|
||||||
|
<span className="text-muted-foreground">{humanizeValue(statusChange.from)}</span>
|
||||||
|
<ArrowRight className="h-3.5 w-3.5 text-muted-foreground" />
|
||||||
|
<span className="font-medium text-foreground">{humanizeValue(statusChange.to)}</span>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{assigneeChange ? (
|
||||||
|
<div className={cn("flex flex-wrap items-center gap-2 text-sm", isCurrentUser && "justify-end")}>
|
||||||
|
<span className="text-[10px] font-medium uppercase tracking-[0.14em] text-muted-foreground">
|
||||||
|
Assignee
|
||||||
|
</span>
|
||||||
|
<span className="text-muted-foreground">
|
||||||
|
{formatTimelineAssigneeLabel(assigneeChange.from, agentMap, currentUserId)}
|
||||||
|
</span>
|
||||||
|
<ArrowRight className="h-3.5 w-3.5 text-muted-foreground" />
|
||||||
|
<span className="font-medium text-foreground">
|
||||||
|
{formatTimelineAssigneeLabel(assigneeChange.to, agentMap, currentUserId)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
if (isCurrentUser) {
|
||||||
|
return (
|
||||||
|
<MessagePrimitive.Root id={anchorId}>
|
||||||
|
<div className="flex items-start justify-end gap-2.5 py-1.5">
|
||||||
|
{eventContent}
|
||||||
|
</div>
|
||||||
|
</MessagePrimitive.Root>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<MessagePrimitive.Root id={anchorId}>
|
<MessagePrimitive.Root id={anchorId}>
|
||||||
<div className="flex items-start gap-2.5 py-1.5">
|
<div className="flex items-start gap-2.5 py-1.5">
|
||||||
<Avatar size="sm" className="mt-0.5">
|
<Avatar size="sm" className="mt-0.5">
|
||||||
<AvatarFallback>{initialsForName(actorName)}</AvatarFallback>
|
{agentIcon ? (
|
||||||
|
<AvatarFallback><AgentIcon icon={agentIcon} className="h-3.5 w-3.5" /></AvatarFallback>
|
||||||
|
) : (
|
||||||
|
<AvatarFallback>{initialsForName(actorName)}</AvatarFallback>
|
||||||
|
)}
|
||||||
</Avatar>
|
</Avatar>
|
||||||
|
<div className="flex-1">
|
||||||
<div className="min-w-0 flex-1 space-y-1.5">
|
{eventContent}
|
||||||
<div className="flex flex-wrap items-baseline gap-x-1.5 gap-y-1 text-sm">
|
|
||||||
<span className="font-medium text-foreground">{actorName}</span>
|
|
||||||
<span className="text-muted-foreground">updated this task</span>
|
|
||||||
<a
|
|
||||||
href={anchorId ? `#${anchorId}` : undefined}
|
|
||||||
className="text-sm text-muted-foreground transition-colors hover:text-foreground hover:underline"
|
|
||||||
>
|
|
||||||
{timeAgo(message.createdAt)}
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{statusChange ? (
|
|
||||||
<div className="flex flex-wrap items-center gap-2 text-sm">
|
|
||||||
<span className="w-14 text-[10px] font-medium uppercase tracking-[0.14em] text-muted-foreground">
|
|
||||||
Status
|
|
||||||
</span>
|
|
||||||
<span className="text-muted-foreground">{humanizeValue(statusChange.from)}</span>
|
|
||||||
<ArrowRight className="h-3.5 w-3.5 text-muted-foreground" />
|
|
||||||
<span className="font-medium text-foreground">{humanizeValue(statusChange.to)}</span>
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
|
|
||||||
{assigneeChange ? (
|
|
||||||
<div className="flex flex-wrap items-center gap-2 text-sm">
|
|
||||||
<span className="w-14 text-[10px] font-medium uppercase tracking-[0.14em] text-muted-foreground">
|
|
||||||
Assignee
|
|
||||||
</span>
|
|
||||||
<span className="text-muted-foreground">
|
|
||||||
{formatTimelineAssigneeLabel(assigneeChange.from, agentMap, currentUserId)}
|
|
||||||
</span>
|
|
||||||
<ArrowRight className="h-3.5 w-3.5 text-muted-foreground" />
|
|
||||||
<span className="font-medium text-foreground">
|
|
||||||
{formatTimelineAssigneeLabel(assigneeChange.to, agentMap, currentUserId)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</MessagePrimitive.Root>
|
</MessagePrimitive.Root>
|
||||||
|
|
@ -865,12 +899,17 @@ function IssueChatSystemMessage() {
|
||||||
}
|
}
|
||||||
|
|
||||||
const displayedRunAgentName = runAgentName ?? (runAgentId ? agentMap?.get(runAgentId)?.name ?? runAgentId.slice(0, 8) : null);
|
const displayedRunAgentName = runAgentName ?? (runAgentId ? agentMap?.get(runAgentId)?.name ?? runAgentId.slice(0, 8) : null);
|
||||||
|
const runAgentIcon = runAgentId ? agentMap?.get(runAgentId)?.icon : undefined;
|
||||||
if (custom.kind === "run" && runId && runAgentId && displayedRunAgentName && runStatus) {
|
if (custom.kind === "run" && runId && runAgentId && displayedRunAgentName && runStatus) {
|
||||||
return (
|
return (
|
||||||
<MessagePrimitive.Root id={anchorId}>
|
<MessagePrimitive.Root id={anchorId}>
|
||||||
<div className="flex items-center gap-2.5 py-1.5">
|
<div className="flex items-center gap-2.5 py-1.5">
|
||||||
<Avatar size="sm">
|
<Avatar size="sm">
|
||||||
<AvatarFallback>{initialsForName(displayedRunAgentName)}</AvatarFallback>
|
{runAgentIcon ? (
|
||||||
|
<AvatarFallback><AgentIcon icon={runAgentIcon} className="h-3.5 w-3.5" /></AvatarFallback>
|
||||||
|
) : (
|
||||||
|
<AvatarFallback>{initialsForName(displayedRunAgentName)}</AvatarFallback>
|
||||||
|
)}
|
||||||
</Avatar>
|
</Avatar>
|
||||||
|
|
||||||
<div className="min-w-0 flex-1">
|
<div className="min-w-0 flex-1">
|
||||||
|
|
|
||||||
|
|
@ -235,6 +235,8 @@ function createTimelineEventMessage(args: {
|
||||||
anchorId: `activity-${event.id}`,
|
anchorId: `activity-${event.id}`,
|
||||||
eventId: event.id,
|
eventId: event.id,
|
||||||
actorName,
|
actorName,
|
||||||
|
actorType: event.actorType,
|
||||||
|
actorId: event.actorId,
|
||||||
statusChange: event.statusChange ?? null,
|
statusChange: event.statusChange ?? null,
|
||||||
assigneeChange: event.assigneeChange ?? null,
|
assigneeChange: event.assigneeChange ?? null,
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue