style(agent): distinguish chat participants

This commit is contained in:
yu
2026-07-20 11:18:55 +08:00
parent b7d0fe10bc
commit c81bb8b651
3 changed files with 22 additions and 9 deletions
@@ -48,14 +48,25 @@ export function AgentChatMessage({ item, theme, user, onRejectTool, onApproveToo
return (
<div className={`flex items-start gap-3 ${isUser ? "justify-end" : "justify-start"}`}>
{!isUser ? <AgentAvatar theme={theme} /> : null}
<div className={`min-w-0 max-w-[82%] text-sm leading-6 ${isUser ? "text-right" : "text-left"}`} style={{ color }}>
<div
className={isUser ? "min-w-0 max-w-[82%] rounded-xl rounded-br-sm border px-3.5 py-2.5 text-left text-sm leading-6" : "min-w-0 flex-1 text-left text-sm leading-6"}
style={
isUser
? {
color,
background: `color-mix(in srgb, ${theme.node.text} 7%, ${theme.toolbar.panel})`,
borderColor: `color-mix(in srgb, ${theme.node.text} 14%, transparent)`,
}
: { color }
}
>
{isUser ? (
<div className="whitespace-pre-wrap break-words text-left">{item.text}</div>
<div className="whitespace-pre-wrap break-words">{item.text}</div>
) : (
<Streamdown animated isAnimating={!!item.streamId}>{item.text}</Streamdown>
)}
{item.attachments?.length ? <AgentMessageAttachments attachments={item.attachments} /> : null}
{item.meta ? <div className="mt-1 text-[11px] opacity-45">{item.meta}</div> : null}
{item.meta ? <div className={`mt-1 text-[11px] opacity-45 ${isUser ? "text-right" : ""}`}>{item.meta}</div> : null}
</div>
{isUser ? <AgentUserAvatar user={user} theme={theme} /> : null}
</div>