i/next-ai-draw-io
1
0
Fork 0
mirror of https://github.com/DayuanJiang/next-ai-draw-io.git synced 2026-01-03 23:02:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: replace Tooltip components with ButtonWithTooltip in ChatInput

Browse Source
This commit is contained in:
dayuan.jiang
2025-03-26 10:32:33 +00:00
parent da98a184f9
commit fa72097838
2 changed files with 58 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
components/button-with-tooltip.tsx Normal file
View File

@@ -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>
);
}

35
components/chat-input.tsx
View File

@@ -12,12 +12,7 @@ import {
X, X,
History, History,
} from "lucide-react"; } from "lucide-react";
import { import { ButtonWithTooltip } from "@/components/button-with-tooltip";
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
import Image from "next/image"; import Image from "next/image";
import { useDiagram } from "@/contexts/diagram-context"; import { useDiagram } from "@/contexts/diagram-context";
@@ -207,23 +202,15 @@ export function ChatInput({
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div className="mr-auto"> <div className="mr-auto">
<TooltipProvider> <ButtonWithTooltip
<Tooltip>
<TooltipTrigger asChild>
<Button
type="button" type="button"
variant="ghost" variant="ghost"
size="icon" size="icon"
onClick={() => setShowClearDialog(true)} onClick={() => setShowClearDialog(true)}
tooltipContent="Clear current conversation and diagram"
> >
<RotateCcw className="mr-2 h-4 w-4" /> <RotateCcw className="mr-2 h-4 w-4" />
</Button> </ButtonWithTooltip>
</TooltipTrigger>
<TooltipContent>
Clear current conversation and diagram
</TooltipContent>
</Tooltip>
</TooltipProvider>
{/* Warning Modal */} {/* Warning Modal */}
<ResetWarningModal <ResetWarningModal
@@ -239,10 +226,7 @@ export function ChatInput({
</div> </div>
<div className="flex gap-2"> <div className="flex gap-2">
{/* History Button */} {/* History Button */}
<TooltipProvider> <ButtonWithTooltip
<Tooltip>
<TooltipTrigger asChild>
<Button
type="button" type="button"
variant="outline" variant="outline"
size="icon" size="icon"
@@ -252,15 +236,10 @@ export function ChatInput({
diagramHistory.length === 0 diagramHistory.length === 0
} }
title="Diagram History" title="Diagram History"
tooltipContent="View diagram history"
> >
<History className="h-4 w-4" /> <History className="h-4 w-4" />
</Button> </ButtonWithTooltip>
</TooltipTrigger>
<TooltipContent>
View diagram history
</TooltipContent>
</Tooltip>
</TooltipProvider>
<Button <Button
type="button" type="button"