feat(refactor): dynamic agent status ticker card across all execution rounds

This commit is contained in:
2026-05-21 17:24:12 -07:00
parent b3dd3714c3
commit 91a376ac0a

View File

@@ -1683,53 +1683,31 @@ export function ChatPanel({
<MessageBubble key={msg.id || i} msg={msg} /> <MessageBubble key={msg.id || i} msg={msg} />
))} ))}
{sending && messages[messages.length - 1]?.role !== "assistant" && ( {sending && (
<div <div
style={{ style={{
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
gap: 8, gap: 8,
padding: "6px 0", padding: "8px 12px",
margin: "6px 0",
background: "#faf8f5",
border: "1px dashed #e8e4dc",
borderRadius: 8,
fontSize: "0.75rem",
color: "#8c8580",
fontFamily: "var(--font-inter),ui-sans-serif,sans-serif",
}} }}
> >
<div <Loader2
style={{ style={{ width: 12, height: 12, color: "#3d5afe" }}
width: 24, className="animate-spin"
height: 24,
borderRadius: "50%",
background: "#1a1a1a",
display: "flex",
alignItems: "center",
justifyContent: "center",
flexShrink: 0,
}}
>
<span
style={{
color: "#fff",
fontSize: "0.6rem",
fontWeight: 700,
fontFamily: "var(--font-lora),serif",
}}
>
V
</span>
</div>
<div style={{ display: "flex", gap: 4 }}>
{[0, 1, 2].map((i) => (
<span
key={i}
style={{
width: 6,
height: 6,
borderRadius: "50%",
background: "#c0bab2",
animation: `vibn-bounce 1.2s ease infinite ${i * 0.2}s`,
display: "inline-block",
}}
/> />
))} <span style={{ fontStyle: "italic" }}>
</div> {messages[messages.length - 1]?.role !== "assistant"
? "Vibn AI is formulating plan..."
: "Vibn AI is executing tools & planning next steps..."}
</span>
</div> </div>
)} )}