fix: prevent focus on tool dialog contents (#1333)

* fix: ensure autofocus always hits dialog close button, if available * chore: remove tooltips from tool icons Signed-off-by: Ryan Hopper-Lowe <[email protected]> --------- Signed-off-by: Ryan Hopper-Lowe <[email protected]>
obot-platform · Jan 20, 2025 · 28be403 · 28be403
1 parent 369feb5
commit 28be403
Show file tree

Hide file tree

Showing 7 changed files with 13 additions and 37 deletions.
diff --git a/ui/admin/app/components/chat/Message.tsx b/ui/admin/app/components/chat/Message.tsx
@@ -183,7 +183,6 @@ export function PromptMessage({
 							name={prompt.name}
 							category={prompt.metadata.category}
 							icon={prompt.metadata.icon}
-							disableTooltip
 							className="h-5 w-5"
 						/>
 						{str}
@@ -221,7 +220,6 @@ export function PromptMessage({
 						icon={prompt.metadata.icon}
 						category={prompt.metadata.category}
 						name={prompt.name}
-						disableTooltip
 					/>
 
 					{getCtaText()}
@@ -237,7 +235,6 @@ export function PromptMessage({
 									icon={prompt.metadata?.icon}
 									category={prompt.metadata?.category}
 									name={prompt.name}
-									disableTooltip
 								/>
 							}
 						>
@@ -271,7 +268,6 @@ export function PromptMessage({
 							icon={prompt.metadata?.icon}
 							category={prompt.metadata?.category}
 							name={prompt.name}
-							disableTooltip
 						/>
 					}
 				>

diff --git a/ui/admin/app/components/tools/ToolIcon.tsx b/ui/admin/app/components/tools/ToolIcon.tsx
@@ -2,24 +2,17 @@ import { WrenchIcon } from "lucide-react";
 
 import { cn } from "~/lib/utils";
 
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipTrigger,
-} from "~/components/ui/tooltip";
-
 type ToolIconProps = {
 	name: string;
 	category?: string;
 	icon?: string;
 	className?: string;
-	disableTooltip?: boolean;
 };
 
 export function ToolIcon(props: ToolIconProps) {
-	const { name, category, icon, className, disableTooltip } = props;
+	const { name, icon, className } = props;
 
-	const content = icon ? (
+	return icon ? (
 		<img
 			alt={name}
 			src={icon}
@@ -31,18 +24,4 @@ export function ToolIcon(props: ToolIconProps) {
 	) : (
 		<WrenchIcon className={cn("mr-2 h-4 w-4", className)} />
 	);
-
-	if (disableTooltip) {
-		return content;
-	}
-
-	return (
-		<Tooltip>
-			<TooltipTrigger>{content}</TooltipTrigger>
-
-			<TooltipContent>
-				{[category, name].filter((x) => !!x).join(" - ")}
-			</TooltipContent>
-		</Tooltip>
-	);
 }
diff --git a/ui/admin/app/components/tools/ToolItem.tsx b/ui/admin/app/components/tools/ToolItem.tsx
@@ -62,7 +62,6 @@ export function ToolItem({
 								category={tool.metadata?.category}
 								name={tool.name}
 								className="mr-2 h-4 w-4"
-								disableTooltip
 							/>
 							{tool.name}
 						</span>

diff --git a/ui/admin/app/components/tools/ToolTooltip.tsx b/ui/admin/app/components/tools/ToolTooltip.tsx
@@ -38,7 +38,6 @@ export function ToolTooltip({
 						category={tool.metadata?.category}
 						name={tool.name}
 						className="mr-4 h-10 w-10"
-						disableTooltip
 					/>
 				) : (
 					<WrenchIcon className="mr-2 h-4 w-4" />

diff --git a/ui/admin/app/components/tools/toolGrid/BundleToolList.tsx b/ui/admin/app/components/tools/toolGrid/BundleToolList.tsx
@@ -67,7 +67,6 @@ export function BundleToolList({
 								<Separator className="mb-4" />
 								<div className="flex items-center gap-4">
 									<ToolIcon
-										disableTooltip
 										className="h-6 w-6"
 										name={bundle?.name ?? ""}
 										icon={bundle?.metadata?.icon}

diff --git a/ui/admin/app/components/tools/toolGrid/ToolCard.tsx b/ui/admin/app/components/tools/toolGrid/ToolCard.tsx
@@ -57,7 +57,6 @@ export function ToolCard({
 			<CardContent className="flex flex-col items-center gap-2 text-center">
 				<ToolIcon
 					className="h-16 w-16"
-					disableTooltip
 					name={tool?.name ?? ""}
 					icon={tool?.metadata?.icon}
 				/>

diff --git a/ui/admin/app/components/ui/dialog.tsx b/ui/admin/app/components/ui/dialog.tsx
@@ -61,13 +61,18 @@ const DialogContent = React.forwardRef<
 				)}
 				{...dialogProps}
 			>
+				<DialogPrimitive.Close
+					className={cn(
+						"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
+						{ hidden: hideCloseButton }
+					)}
+					disabled={hideCloseButton}
+				>
+					<Cross2Icon className="h-4 w-4" />
+					<span className="sr-only">Close</span>
+				</DialogPrimitive.Close>
+
 				{children}
-				{!hideCloseButton && (
-					<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-						<Cross2Icon className="h-4 w-4" />
-						<span className="sr-only">Close</span>
-					</DialogPrimitive.Close>
-				)}
 			</DialogPrimitive.Content>
 		</DialogPortal>
 	);