refactor: simplify TokenUsagePill component by removing unused token metadata and adjusting styles in TextSelectionToolbar
This commit is contained in:
parent
6913079254
commit
6dbf04d5f8
|
|
@ -33,8 +33,6 @@ export const TokenUsagePill: React.FC<TokenUsagePillProps> = ({ metadata, childr
|
|||
metadata.contextTokens ??
|
||||
null
|
||||
|
||||
const hasReasoningTokens = metadata.reasoningTokens != null && metadata.reasoningTokens > 0
|
||||
const hasCachedInputTokens = metadata.cachedInputTokens != null && metadata.cachedInputTokens > 0
|
||||
const hasBillingMultiplier =
|
||||
metadata.billingMultiplier != null && metadata.billingMultiplier !== 1
|
||||
const hasDuration = metadata.duration != null
|
||||
|
|
@ -73,43 +71,11 @@ export const TokenUsagePill: React.FC<TokenUsagePillProps> = ({ metadata, childr
|
|||
{metadata.billedTokens != null && (
|
||||
<div className="flex justify-between gap-2">
|
||||
<span className="text-text-secondary">Billed:</span>
|
||||
<span className="font-mono text-accent">
|
||||
<span className="font-mono">
|
||||
{formatTokenCountString(metadata.billedTokens)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{metadata.contextTokens != null && (
|
||||
<div className="flex justify-between gap-2">
|
||||
<span className="text-text-secondary">Context:</span>
|
||||
<span className="font-mono text-text">
|
||||
{formatTokenCountString(metadata.contextTokens)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{metadata.outputTokens != null && (
|
||||
<div className="flex justify-between gap-2">
|
||||
<span className="text-text-secondary">Output:</span>
|
||||
<span className="font-mono text-text">
|
||||
{formatTokenCountString(metadata.outputTokens)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{hasReasoningTokens && (
|
||||
<div className="flex justify-between gap-2">
|
||||
<span className="text-text-secondary">Reasoning:</span>
|
||||
<span className="font-mono text-text">
|
||||
{formatTokenCountString(metadata.reasoningTokens!)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{hasCachedInputTokens && (
|
||||
<div className="flex justify-between gap-2">
|
||||
<span className="text-text-secondary">Cached:</span>
|
||||
<span className="font-mono text-text">
|
||||
{formatTokenCountString(metadata.cachedInputTokens!)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{(hasDuration || hasBillingMultiplier) && (
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -119,7 +119,7 @@ export function TextSelectionToolbar({
|
|||
left: position.left,
|
||||
...styles.toolbar,
|
||||
}}
|
||||
className="pointer-events-auto fixed z-[70] rounded-full border border-border/50 bg-material-ultra-thick px-1.5 py-1 backdrop-blur-background"
|
||||
className="pointer-events-auto fixed z-[70] rounded-xl border border-border/50 bg-material-ultra-thick p-px backdrop-blur-background"
|
||||
onMouseDown={handleMouseDown}
|
||||
layout="position"
|
||||
initial={{ opacity: 0, y: 4, scale: 0.95 }}
|
||||
|
|
@ -127,10 +127,7 @@ export function TextSelectionToolbar({
|
|||
transition={Spring.presets.smooth}
|
||||
>
|
||||
{/* Inner glow layer */}
|
||||
<div
|
||||
className="pointer-events-none absolute inset-0 rounded-full"
|
||||
style={styles.innerGlow}
|
||||
/>
|
||||
<div className="pointer-events-none absolute inset-0 rounded-xl" style={styles.innerGlow} />
|
||||
<div className="relative flex items-center gap-1 text-[0.85rem] font-medium text-text">
|
||||
<ToolbarButton
|
||||
iconClassName={copied ? "i-mgc-check-cute-re" : "i-mgc-copy-cute-re"}
|
||||
|
|
@ -168,7 +165,7 @@ function ToolbarButton({ iconClassName, label, onClick, active }: ToolbarButtonP
|
|||
type="button"
|
||||
onClick={onClick}
|
||||
className={cn(
|
||||
"flex items-center gap-1.5 rounded-full px-3 py-1.5 text-sm transition-all duration-200",
|
||||
"flex items-center gap-1.5 rounded-xl px-3 py-1.5 text-sm transition-all duration-200",
|
||||
active
|
||||
? "bg-fill/80 text-text shadow-sm"
|
||||
: "text-text-secondary hover:bg-fill/60 hover:text-text active:scale-95",
|
||||
|
|
|
|||
Loading…
Reference in New Issue