-
Notifications
You must be signed in to change notification settings - Fork 2.5k
Enhancement: Extension name tooltips for tool banners #3250
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Enhancement: Extension name tooltips for tool banners #3250
Conversation
efdda3b to
02de8a2
Compare
| return `capturing window "${truncate(getStringValue(args.window_title))}"`; | ||
| } | ||
| return 'capturing screen'; | ||
| return `capturing screen`; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nit: unnecessary backtick quotes
| {extensionTooltip ? ( | ||
| <TooltipWrapper tooltipContent={extensionTooltip} side="top" align="start"> | ||
| <span className="ml-[10px] cursor-pointer hover:opacity-80"> | ||
| {(() => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You could avoid duplication by extracting the inner part like:
const toolLabel = (
<span className="ml-[10px]">
{(() => {
const description = getToolDescription();
if (description) {
return description;
}
// Fallback tool name formatting
return snakeToTitleCase(toolCall.name.substring(toolCall.name.lastIndexOf('__') + 2));
})()}
</span>
);
return (
<ToolCallExpandable
...
{extensionTooltip ? (
<TooltipWrapper ... >{toolLabel}</TooltipWrapper>
) : (
{toolLabel}
)
...
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@jamadeo have addressed this in the latest version of the code! Please take a look.
Implements extension name tooltips on tool banners, combining the best of both the original feature and the latest main branch improvements: Features: - Extension name tooltips (e.g., "memory extension") appear on hover for tools that belong to extensions (identified by __ separator in tool names) - Enhanced loading indicators with LoaderCircle animation and improved layout - DRY code implementation that eliminates duplication in tool label rendering Implementation: - Add TooltipWrapper import for tooltip functionality - Add getExtensionTooltip() helper to extract extension names from tool names - Add getToolLabelContent() helper to eliminate code duplication - Use conditional styling with cn() utility for tooltip-specific classes - Preserve all main branch UI improvements (LoaderCircle, layout structure) - Conditionally wrap tool labels with TooltipWrapper when extension detected The tooltip appears with "top" positioning and "start" alignment, providing contextual information about which extension provides each tool without cluttering the interface.
02de8a2 to
8c510a3
Compare
jamadeo
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks great! Thanks for doing this.
Signed-off-by: Soroosh <soroosh.sarabadani@gmail.com>
Signed-off-by: Kyle Santiago <kyle@privkey.io>
Signed-off-by: Kyle Santiago <kyle@privkey.io>
Signed-off-by: Kyle Santiago <kyle@privkey.io>
Signed-off-by: Adam Tarantino <tarantino.adam@hey.com>
Add Extension Name Tooltips to Tool Banners
Overview
Adds hover tooltips to tool banners showing extension names (e.g., "developer extension") without cluttering the UI. This builds on the clean tool descriptions from #3231 by providing extension information on demand through tooltips.
Features
developer__shell→ "developer extension")__separator show no tooltipScreenshot
Implementation
ui/desktop/src/components/ToolCallWithResponse.tsxgetExtensionTooltip()helper functionTooltipWrappercomponent withalign="start"Testing
Provides extension information on demand while maintaining a clean interface.