i/next-ai-draw-io
1
0
Fork 0
mirror of https://github.com/DayuanJiang/next-ai-draw-io.git synced 2026-01-03 06:42: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, 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> type="button"
<TooltipTrigger asChild> variant="ghost"
<Button size="icon"
type="button" onClick={() => setShowClearDialog(true)}
variant="ghost" tooltipContent="Clear current conversation and diagram"
size="icon" >
onClick={() => setShowClearDialog(true)} <RotateCcw className="mr-2 h-4 w-4" />
> </ButtonWithTooltip>
<RotateCcw className="mr-2 h-4 w-4" />
</Button>
</TooltipTrigger>
<TooltipContent>
Clear current conversation and diagram
</TooltipContent>
</Tooltip>
</TooltipProvider>
{/* Warning Modal */} {/* Warning Modal */}
<ResetWarningModal <ResetWarningModal
@@ -239,28 +226,20 @@ export function ChatInput({
</div> </div>
<div className="flex gap-2"> <div className="flex gap-2">
{/* History Button */} {/* History Button */}
<TooltipProvider> <ButtonWithTooltip
<Tooltip> type="button"
<TooltipTrigger asChild> variant="outline"
<Button size="icon"
type="button" onClick={() => setShowHistory(true)}
variant="outline" disabled={
size="icon" status === "streaming" ||
onClick={() => setShowHistory(true)} diagramHistory.length === 0
disabled={ }
status === "streaming" || title="Diagram History"
diagramHistory.length === 0 tooltipContent="View diagram history"
} >
title="Diagram History" <History className="h-4 w-4" />
> </ButtonWithTooltip>
<History className="h-4 w-4" />
</Button>
</TooltipTrigger>
<TooltipContent>
View diagram history
</TooltipContent>
</Tooltip>
</TooltipProvider>
<Button <Button
type="button" type="button"