feat: enhance token display in MessageInfoDropdown with improved visual separation

This commit is contained in:
Anish Sarkar 2026-05-20 15:29:41 +05:30
parent 8c9be9796a
commit 39c29d651f

View file

@ -14,6 +14,7 @@ import {
ClipboardPaste, ClipboardPaste,
CopyIcon, CopyIcon,
DownloadIcon, DownloadIcon,
Dot,
ExternalLink, ExternalLink,
Globe, Globe,
MessageCircleReply, MessageCircleReply,
@ -330,9 +331,14 @@ const MessageInfoDropdown: FC<{ chatTurnId: string | null | undefined }> = ({ ch
{icon} {icon}
{name} {name}
</span> </span>
<span className="text-xs text-muted-foreground"> <span className="flex items-center text-xs text-muted-foreground">
{counts.total_tokens.toLocaleString()} tokens <span>{counts.total_tokens.toLocaleString()} tokens</span>
{costMicros && costMicros > 0 ? ` · ${formatTurnCost(costMicros)}` : ""} {costMicros && costMicros > 0 ? (
<>
<Dot className="size-4 shrink-0" aria-hidden="true" />
<span>{formatTurnCost(costMicros)}</span>
</>
) : null}
</span> </span>
</ActionBarMorePrimitive.Item> </ActionBarMorePrimitive.Item>
); );
@ -342,11 +348,14 @@ const MessageInfoDropdown: FC<{ chatTurnId: string | null | undefined }> = ({ ch
className="focus:bg-accent focus:text-accent-foreground relative flex cursor-default flex-col items-start gap-0.5 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none" className="focus:bg-accent focus:text-accent-foreground relative flex cursor-default flex-col items-start gap-0.5 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none"
onSelect={(e) => e.preventDefault()} onSelect={(e) => e.preventDefault()}
> >
<span className="text-xs text-muted-foreground"> <span className="flex items-center text-xs text-muted-foreground">
{usage.total_tokens.toLocaleString()} tokens <span>{usage.total_tokens.toLocaleString()} tokens</span>
{usage.cost_micros && usage.cost_micros > 0 {usage.cost_micros && usage.cost_micros > 0 ? (
? ` · ${formatTurnCost(usage.cost_micros)}` <>
: ""} <Dot className="size-4 shrink-0" aria-hidden="true" />
<span>{formatTurnCost(usage.cost_micros)}</span>
</>
) : null}
</span> </span>
</ActionBarMorePrimitive.Item> </ActionBarMorePrimitive.Item>
)} )}