diff --git a/site/src/pages/AgentsPage/components/AgentChatInput.tsx b/site/src/pages/AgentsPage/components/AgentChatInput.tsx index 95bc30e904..44f235e774 100644 --- a/site/src/pages/AgentsPage/components/AgentChatInput.tsx +++ b/site/src/pages/AgentsPage/components/AgentChatInput.tsx @@ -223,57 +223,75 @@ const ContextUsageIndicator: FC<{ usage: AgentContextUsage | null }> = ({ ? `Context usage ${percentLabel}. ${formatTokenCount(usedTokens)} of ${formatTokenCount(contextLimitTokens)} tokens used.` : "Context usage"; + const triggerButton = ( + + ); + + const tooltipContent = ( +
+ {hasPercent + ? `${percentLabel} – ${formatTokenCountCompact(usedTokens)} / ${formatTokenCountCompact(contextLimitTokens)} context used` + : "Context usage unavailable"} + {hasPercent && + usage?.compressionThreshold !== undefined && + usage.compressionThreshold > 0 && ( +
+ Compacts at {usage.compressionThreshold}% +
+ )} +
+ ); + + // On mobile viewports, Radix Tooltip only opens on hover which + // doesn't exist on touch devices. Use a Popover instead so a tap + // toggles the context-usage info. + if (isMobileViewport()) { + return ( + + {triggerButton} + + {tooltipContent} + + + ); + } + return ( - - - - -
- {hasPercent - ? `${percentLabel} – ${formatTokenCountCompact(usedTokens)} / ${formatTokenCountCompact(contextLimitTokens)} context used` - : "Context usage unavailable"} - {hasPercent && - usage?.compressionThreshold !== undefined && - usage.compressionThreshold > 0 && ( -
- Compacts at {usage.compressionThreshold}% -
- )} -
-
+ {triggerButton} + {tooltipContent}
); };