diff --git a/ui/src/components/AgentBubbleActionRow.tsx b/ui/src/components/AgentBubbleActionRow.tsx index 6ca8df5d58d..fa599b9ddb2 100644 --- a/ui/src/components/AgentBubbleActionRow.tsx +++ b/ui/src/components/AgentBubbleActionRow.tsx @@ -5,7 +5,7 @@ import type { } from "@paperclipai/shared"; import { cn, formatShortDate } from "../lib/utils"; import { timeAgo } from "../lib/timeAgo"; -import { copyTextToClipboard } from "../lib/clipboard"; +import { useCopyAction, useCopyToast } from "../lib/use-copy-action"; import { Button } from "@/components/ui/button"; import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"; import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"; @@ -24,7 +24,7 @@ import { DropdownMenuItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; -import { Check, Copy, MoreHorizontal, ThumbsDown, ThumbsUp } from "lucide-react"; +import { Check, Copy, MoreHorizontal, ThumbsDown, ThumbsUp, X } from "lucide-react"; const WEEK_MS = 7 * 24 * 60 * 60 * 1000; @@ -48,24 +48,26 @@ export function agentBubbleDateLabel(date: Date | string | undefined): string { * re-declaring the same button markup on each surface. */ export function BubbleCopyButton({ copyText }: { copyText: string }) { - const [copied, setCopied] = useState(false); + const { copied, failed, copy } = useCopyAction(2000); + const label = failed ? "Couldn’t copy message" : "Copy message"; return ( ); } @@ -109,6 +111,8 @@ export function AgentBubbleActionRow({ menuItems?: ReactNode; className?: string; }) { + // The menu closes on click, so its copy confirmation has to outlive it. + const copyWithToast = useCopyToast(); return (