i/next-ai-draw-io
1
0
Fork 0
mirror of https://github.com/DayuanJiang/next-ai-draw-io.git synced 2026-01-02 22:32:27 +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>
);
}

69
components/chat-input.tsx
View File

@@ -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"