From fa7209783850bb47d3cf70cb6ac4b2131246f4d9 Mon Sep 17 00:00:00 2001
From: "dayuan.jiang" <jdy.toh@gmail.com>
Date: Wed, 26 Mar 2025 10:32:33 +0000
Subject: [PATCH] refactor: replace Tooltip components with ButtonWithTooltip
 in ChatInput

---
 components/button-with-tooltip.tsx | 34 +++++++++++++++
 components/chat-input.tsx          | 69 +++++++++++-------------------
 2 files changed, 58 insertions(+), 45 deletions(-)
 create mode 100644 components/button-with-tooltip.tsx

diff --git a/components/button-with-tooltip.tsx b/components/button-with-tooltip.tsx
new file mode 100644
index 0000000..bb8f53d
--- /dev/null
+++ b/components/button-with-tooltip.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import { Button, buttonVariants } from "@/components/ui/button";
+import {
+    Tooltip,
+    TooltipContent,
+    TooltipProvider,
+    TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { type VariantProps } from "class-variance-authority";
+
+interface ButtonWithTooltipProps
+    extends React.ComponentProps<"button">,
+        VariantProps<typeof buttonVariants> {
+    tooltipContent: string;
+    children: React.ReactNode;
+    asChild?: boolean;
+}
+
+export function ButtonWithTooltip({
+    tooltipContent,
+    children,
+    ...buttonProps
+}: ButtonWithTooltipProps) {
+    return (
+        <TooltipProvider>
+            <Tooltip>
+                <TooltipTrigger asChild>
+                    <Button {...buttonProps}>{children}</Button>
+                </TooltipTrigger>
+                <TooltipContent>{tooltipContent}</TooltipContent>
+            </Tooltip>
+        </TooltipProvider>
+    );
+}
diff --git a/components/chat-input.tsx b/components/chat-input.tsx
index 08bfcb1..4be3980 100644
--- a/components/chat-input.tsx
+++ b/components/chat-input.tsx
@@ -12,12 +12,7 @@ import {
     X,
     History,
 } from "lucide-react";
-import {
-    Tooltip,
-    TooltipContent,
-    TooltipProvider,
-    TooltipTrigger,
-} from "@/components/ui/tooltip";
+import { ButtonWithTooltip } from "@/components/button-with-tooltip";
 import Image from "next/image";
 
 import { useDiagram } from "@/contexts/diagram-context";
@@ -207,23 +202,15 @@ export function ChatInput({
 
             <div className="flex items-center gap-2">
                 <div className="mr-auto">
-                    <TooltipProvider>
-                        <Tooltip>
-                            <TooltipTrigger asChild>
-                                <Button
-                                    type="button"
-                                    variant="ghost"
-                                    size="icon"
-                                    onClick={() => setShowClearDialog(true)}
-                                >
-                                    <RotateCcw className="mr-2 h-4 w-4" />
-                                </Button>
-                            </TooltipTrigger>
-                            <TooltipContent>
-                                Clear current conversation and diagram
-                            </TooltipContent>
-                        </Tooltip>
-                    </TooltipProvider>
+                    <ButtonWithTooltip
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        onClick={() => setShowClearDialog(true)}
+                        tooltipContent="Clear current conversation and diagram"
+                    >
+                        <RotateCcw className="mr-2 h-4 w-4" />
+                    </ButtonWithTooltip>
 
                     {/* Warning Modal */}
                     <ResetWarningModal
@@ -239,28 +226,20 @@ export function ChatInput({
                 </div>
                 <div className="flex gap-2">
                     {/* History Button */}
-                    <TooltipProvider>
-                        <Tooltip>
-                            <TooltipTrigger asChild>
-                                <Button
-                                    type="button"
-                                    variant="outline"
-                                    size="icon"
-                                    onClick={() => setShowHistory(true)}
-                                    disabled={
-                                        status === "streaming" ||
-                                        diagramHistory.length === 0
-                                    }
-                                    title="Diagram History"
-                                >
-                                    <History className="h-4 w-4" />
-                                </Button>
-                            </TooltipTrigger>
-                            <TooltipContent>
-                                View diagram history
-                            </TooltipContent>
-                        </Tooltip>
-                    </TooltipProvider>
+                    <ButtonWithTooltip
+                        type="button"
+                        variant="outline"
+                        size="icon"
+                        onClick={() => setShowHistory(true)}
+                        disabled={
+                            status === "streaming" ||
+                            diagramHistory.length === 0
+                        }
+                        title="Diagram History"
+                        tooltipContent="View diagram history"
+                    >
+                        <History className="h-4 w-4" />
+                    </ButtonWithTooltip>
 
                     <Button
                         type="button"