diff options
Diffstat (limited to 'packages/app/src/components/session-context-usage.tsx')
| -rw-r--r-- | packages/app/src/components/session-context-usage.tsx | 25 |
1 files changed, 12 insertions, 13 deletions
diff --git a/packages/app/src/components/session-context-usage.tsx b/packages/app/src/components/session-context-usage.tsx index 5474005c7..c8e6918ca 100644 --- a/packages/app/src/components/session-context-usage.tsx +++ b/packages/app/src/components/session-context-usage.tsx @@ -34,28 +34,27 @@ export function SessionContextUsage() { <Show when={context?.()}> {(ctx) => ( <Tooltip - openDelay={300} value={ - <div class="flex flex-col gap-1 p-2"> - <div class="flex justify-between gap-4"> - <span class="text-text-weaker">Tokens</span> - <span class="text-text-strong">{ctx().tokens}</span> + <div class="flex flex-col gap-1"> + <div class="flex gap-3"> + <span class="opacity-70 text-right flex-1">Tokens</span> + <span class="text-left flex-1">{ctx().tokens}</span> </div> - <div class="flex justify-between gap-4"> - <span class="text-text-weaker">Usage</span> - <span class="text-text-strong">{ctx().percentage ?? 0}%</span> + <div class="flex gap-3"> + <span class="opacity-70 text-right flex-1">Usage</span> + <span class="text-left flex-1">{ctx().percentage ?? 0}%</span> </div> - <div class="flex justify-between gap-4"> - <span class="text-text-weaker">Cost</span> - <span class="text-text-strong">{cost()}</span> + <div class="flex gap-3"> + <span class="opacity-70 text-right flex-1">Cost</span> + <span class="text-left flex-1">{cost()}</span> </div> </div> } placement="top" > - <div class="flex items-center gap-1"> - <span class="text-12-medium text-text-weak">{`${ctx().percentage ?? 0}%`}</span> + <div class="flex items-center gap-1.5"> <ProgressCircle size={16} strokeWidth={2} percentage={ctx().percentage ?? 0} /> + {/* <span class="text-12-medium text-text-weak">{`${ctx().percentage ?? 0}%`}</span> */} </div> </Tooltip> )} |