fix(canvas): 恢复 Agent 消息视觉标记
This commit is contained in:
1 parent
05f0c7a64b
commit
8311bbdf6c
2 files changed
+33
No files matched your search
@@ -22,6 +22,7 @@ import {
|
|||||||
ArrowUp,
|
ArrowUp,
|
||||||
AtSign,
|
AtSign,
|
||||||
Bookmark,
|
Bookmark,
|
||||||
|
BrainCircuit,
|
||||||
CheckCircle2,
|
CheckCircle2,
|
||||||
ChevronDown,
|
ChevronDown,
|
||||||
ChevronUp,
|
ChevronUp,
|
||||||
@@ -35,6 +36,7 @@ import {
|
|||||||
List,
|
List,
|
||||||
ListChecks,
|
ListChecks,
|
||||||
LoaderCircle,
|
LoaderCircle,
|
||||||
|
MessageCircle,
|
||||||
Palette,
|
Palette,
|
||||||
Pencil,
|
Pencil,
|
||||||
Plus,
|
Plus,
|
||||||
@@ -42,6 +44,7 @@ import {
|
|||||||
Shapes,
|
Shapes,
|
||||||
Share2,
|
Share2,
|
||||||
ShoppingBag,
|
ShoppingBag,
|
||||||
|
UserRound,
|
||||||
Sparkles,
|
Sparkles,
|
||||||
Square,
|
Square,
|
||||||
Wrench,
|
Wrench,
|
||||||
@@ -477,6 +480,11 @@ export function AgentChatMessage({
|
|||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<div className={`flex items-start gap-3 ${isUser ? "justify-end" : "justify-start"}`}>
|
<div className={`flex items-start gap-3 ${isUser ? "justify-end" : "justify-start"}`}>
|
||||||
|
{!isUser ? (
|
||||||
|
<span className="agent-message-icon agent-message-icon--assistant" aria-hidden="true">
|
||||||
|
<MessageCircle className="size-4" />
|
||||||
|
</span>
|
||||||
|
) : null}
|
||||||
<div className={`agent-message-body min-w-0 text-sm leading-6 ${isUser ? "agent-message-user max-w-[82%] px-4 py-3 text-right" : "max-w-full flex-1 text-left"}`} style={{ color }}>
|
<div className={`agent-message-body min-w-0 text-sm leading-6 ${isUser ? "agent-message-user max-w-[82%] px-4 py-3 text-right" : "max-w-full flex-1 text-left"}`} style={{ color }}>
|
||||||
{item.interjection ? (
|
{item.interjection ? (
|
||||||
<span
|
<span
|
||||||
@@ -498,6 +506,11 @@ export function AgentChatMessage({
|
|||||||
{item.attachments?.length ? <AgentMessageAttachments attachments={item.attachments} /> : null}
|
{item.attachments?.length ? <AgentMessageAttachments attachments={item.attachments} /> : null}
|
||||||
{item.meta ? <div className="mt-1 text-[var(--fs-label)] opacity-45">{item.meta}</div> : null}
|
{item.meta ? <div className="mt-1 text-[var(--fs-label)] opacity-45">{item.meta}</div> : null}
|
||||||
</div>
|
</div>
|
||||||
|
{isUser ? (
|
||||||
|
<span className="agent-message-icon agent-message-icon--user" aria-hidden="true">
|
||||||
|
<UserRound className="size-4" />
|
||||||
|
</span>
|
||||||
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -517,6 +530,9 @@ export function AgentReasoningFeed({ items, theme }: { items: CloudAgentChatMess
|
|||||||
<div className="agent-reasoning" style={{ "--agent-reasoning-accent": theme.accent.primary } as CSSProperties}>
|
<div className="agent-reasoning" style={{ "--agent-reasoning-accent": theme.accent.primary } as CSSProperties}>
|
||||||
<details className={`agent-reasoning-card${streaming ? " is-streaming" : ""}`}>
|
<details className={`agent-reasoning-card${streaming ? " is-streaming" : ""}`}>
|
||||||
<summary className="agent-reasoning-summary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current/20">
|
<summary className="agent-reasoning-summary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current/20">
|
||||||
|
<span className={`agent-reasoning-icon${streaming ? " is-live" : ""}`} aria-hidden="true">
|
||||||
|
<BrainCircuit className="size-4" />
|
||||||
|
</span>
|
||||||
<span className="agent-reasoning-copy">
|
<span className="agent-reasoning-copy">
|
||||||
<span className="agent-reasoning-title">{streaming ? "模型正在思考" : "模型思考"}</span>
|
<span className="agent-reasoning-title">{streaming ? "模型正在思考" : "模型思考"}</span>
|
||||||
<span className="agent-reasoning-subtitle">{streaming ? "实时整理 · 点击查看" : `${countLabel}点击查看`}</span>
|
<span className="agent-reasoning-subtitle">{streaming ? "实时整理 · 点击查看" : `${countLabel}点击查看`}</span>
|
||||||
|
|||||||
@@ -1791,6 +1791,23 @@
|
|||||||
background: color-mix(in srgb, var(--agent-reasoning-accent) 4%, transparent);
|
background: color-mix(in srgb, var(--agent-reasoning-accent) 4%, transparent);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 只留无底图标:与正文标记使用同一套轻量视觉语言。 */
|
||||||
|
.agent-reasoning-icon {
|
||||||
|
display: grid;
|
||||||
|
width: var(--agent-thought-icon, 16px);
|
||||||
|
height: var(--agent-thought-icon, 16px);
|
||||||
|
flex: 0 0 var(--agent-thought-icon, 16px);
|
||||||
|
place-items: center;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
background: transparent;
|
||||||
|
color: color-mix(in srgb, var(--agent-reasoning-accent) 82%, var(--foreground));
|
||||||
|
}
|
||||||
|
|
||||||
|
.agent-reasoning-icon.is-live {
|
||||||
|
animation: agent-reasoning-icon-pulse 1.8s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
.agent-reasoning-copy {
|
.agent-reasoning-copy {
|
||||||
display: flex;
|
display: flex;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
|
|||||||
Reference in new issue
Block a user