anchored toast

Author: juliusmarminge

apps/web/src/components/chat/MessageCopyButton.tsx

@@ -1,43 +1,83 @@
-import { memo } from "react";
+import { memo, useRef } from "react";
 import { CopyIcon, CheckIcon } from "lucide-react";
 import { Button } from "../ui/button";
 import { useCopyToClipboard } from "~/hooks/useCopyToClipboard";
 import { cn } from "~/lib/utils";
+import { anchoredToastManager } from "../ui/toast";
+import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
+
+const ANCHORED_TOAST_TIMEOUT_MS = 1000;
+const onCopy = (ref: React.RefObject<HTMLButtonElement | null>) => {
+  if (ref.current) {
+    anchoredToastManager.add({
+      data: {
+        tooltipStyle: true,
+      },
+      positionerProps: {
+        anchor: ref.current,
+      },
+      timeout: ANCHORED_TOAST_TIMEOUT_MS,
+      title: "Copied!",
+    });
+  }
+};
+
+const onCopyError = (ref: React.RefObject<HTMLButtonElement | null>, error: Error) => {
+  if (ref.current) {
+    anchoredToastManager.add({
+      data: {
+        tooltipStyle: true,
+      },
+      positionerProps: {
+        anchor: ref.current,
+      },
+      timeout: ANCHORED_TOAST_TIMEOUT_MS,
+      title: "Failed to copy",
+      description: error.message,
+    });
+  }
+};
 
 export const MessageCopyButton = memo(function MessageCopyButton({
   text,
-  title = "Copy message",
   size = "xs",
   variant = "outline",
   className,
-  onCopy,
-  onError,
 }: {
   text: string;
   title?: string;
   size?: "xs" | "icon-xs";
   variant?: "outline" | "ghost";
   className?: string;
-  onCopy?: () => void;
-  onError?: (error: Error) => void;
 }) {
+  const ref = useRef<HTMLButtonElement>(null);
   const { copyToClipboard, isCopied } = useCopyToClipboard<void>({
-    ...(onCopy ? { onCopy: () => onCopy() } : {}),
-    ...(onError ? { onError: (error: Error) => onError(error) } : {}),
+    onCopy: () => onCopy(ref),
+    onError: (error: Error) => onCopyError(ref, error),
+    timeout: ANCHORED_TOAST_TIMEOUT_MS,
   });
-  const buttonTitle = isCopied ? "Copied" : title;
 
   return (
-    <Button
-      type="button"
-      size={size}
-      variant={variant}
-      className={cn(className)}
-      onClick={() => copyToClipboard(text, undefined)}
-      title={buttonTitle}
-      aria-label={buttonTitle}
-    >
-      {isCopied ? <CheckIcon className="size-3 text-success" /> : <CopyIcon className="size-3" />}
-    </Button>
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <Button
+            aria-label="Copy link"
+            disabled={isCopied}
+            onClick={() => copyToClipboard(text)}
+            ref={ref}
+            type="button"
+            size={size}
+            variant={variant}
+            className={cn(className)}
+          />
+        }
+      >
+        {isCopied ? <CheckIcon className="size-3 text-success" /> : <CopyIcon className="size-3" />}
+      </TooltipTrigger>
+      <TooltipPopup>
+        <p>Copy to clipboard</p>
+      </TooltipPopup>
+    </Tooltip>
   );
 });

apps/web/src/components/chat/MessagesTimeline.tsx

@@ -57,7 +57,7 @@ import {
 import { cn } from "~/lib/utils";
 import { type TimestampFormat } from "@t3tools/contracts/settings";
 import { formatTimestamp } from "../../timestampFormat";
-import { toastManager } from "../ui/toast";
+
 import {
   buildInlineTerminalContextText,
   formatInlineTerminalContextLabel,
@@ -66,21 +66,6 @@ import {
 
 const ALWAYS_UNVIRTUALIZED_TAIL_ROWS = 8;
 
-const handleAssistantCopySuccess = () => {
-  toastManager.add({
-    type: "success",
-    title: "Assistant response copied",
-  });
-};
-
-const handleAssistantCopyError = (error: Error) => {
-  toastManager.add({
-    type: "error",
-    title: "Failed to copy assistant response",
-    description: error.message,
-  });
-};
-
 interface MessagesTimelineProps {
   hasMessages: boolean;
   isWorking: boolean;
@@ -562,8 +547,6 @@ export const MessagesTimeline = memo(function MessagesTimeline({
                         size="icon-xs"
                         variant="outline"
                         className="border-border/50 bg-background/35 text-muted-foreground/45 shadow-none hover:border-border/70 hover:bg-background/55 hover:text-muted-foreground/70"
-                        onCopy={handleAssistantCopySuccess}
-                        onError={handleAssistantCopyError}
                       />
                     </div>
                   ) : null}