Extract reusable copy and tooltip action UI components

- Add new CopyActionButton and TooltipIconButton primitives with shared clipboard/tooltip behavior
- Replace bespoke copy, zoom, and profile icon buttons with the new reusable actions
- Introduce CompactDropdownTrigger and migrate compact dropdown trigger call sites
- Add Button pressEffect control and update toolbar/menu copy logic to use the shared component

Author: EricTsai83

src/components/chat-message.test.tsx

@@ -94,7 +94,7 @@ describe("MessageBubble", () => {
 
     const footer = screen.getByTestId("message-usage-footer");
     expect(footer).toHaveClass("min-h-8");
-    expect(footer.querySelector(".absolute")).toBeNull();
+    expect(screen.getByTestId("message-nerd-stats").querySelector(".absolute")).toBeNull();
     expect(footer.querySelector(".items-center")).not.toBeNull();
     expect(screen.getByTestId("message-nerd-stats")).toHaveTextContent("TTFT 1.23 sec");
     expect(screen.queryByText(/Generation time/)).not.toBeInTheDocument();
@@ -239,6 +239,12 @@ describe("MessageBubble", () => {
     expect(screen.getByText("source-citations.ts")).toBeInTheDocument();
   });
 
+  test("renders the completed assistant copy action with its initial accessible label", () => {
+    render(<MessageBubble message={makeAssistantMessage()} activeMessageStream={null} />);
+
+    expect(screen.getByTestId("message-copy-button")).toHaveAccessibleName("Copy reply");
+  });
+
   test("opens a configured local editor directly from the code source", async () => {
     const source = repositorySource();
     writeLocalEditorConfig(source.repositoryId, {

src/components/chat-message.tsx

@@ -1,14 +1,15 @@
 import { memo, isValidElement, useCallback, useMemo, useState, type ReactNode } from "react";
 import type { AllowedTags, Components } from "streamdown";
 import type { Doc } from "../../convex/_generated/dataModel";
-import { Message, MessageContent, MessageActions, MessageAction } from "@/components/ai-elements/message";
+import { Message, MessageContent, MessageActions } from "@/components/ai-elements/message";
 import { Reasoning, ReasoningContent, ReasoningTrigger } from "@/components/ai-elements/reasoning";
 import { Shimmer } from "@/components/ai-elements/shimmer";
 import { LocalEditorSetupDialog } from "@/components/local-editor-setup-dialog";
 import { ToolCallTrace } from "@/components/tool-call-trace";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { CopyActionButton } from "@/components/ui/copy-action-button";
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { Markdown } from "@/components/markdown";
 import { useClipboard } from "@/hooks/use-clipboard";
@@ -845,32 +846,18 @@ function computeReasoningDurationSeconds(
   return undefined;
 }
 
-/**
- * Copy button for assistant messages. Shows a checkmark briefly after
- * clicking to confirm the copy succeeded.
- *
- * Delegates to {@link useClipboard} so the timer cleanup (auto-reset
- * after 1.5s), unmount guard, and `navigator.clipboard` availability
- * check all match the rest of the app's copy affordances rather than
- * being re-derived here. The hook swallows clipboard failures and
- * leaves `copied` false on rejection — the affordance stays idle when
- * the browser blocks the write (insecure context, permissions policy)
- * instead of falsely confirming a successful copy.
- */
 function CopyMessageAction({ content }: { content: string }) {
-  const { copied, copy } = useClipboard({ resetAfterMs: 1500 });
-  const handleCopy = useCallback(() => {
-    void copy(content);
-  }, [copy, content]);
   return (
-    <MessageAction
-      tooltip={copied ? "Copied" : "Copy reply"}
+    <CopyActionButton
+      text={content}
+      idleLabel="Copy reply"
+      copiedLabel="Copied"
+      idleAriaLabel="Copy reply"
       size="sm"
-      onClick={handleCopy}
+      copyIcon={<CopyIcon size={16} />}
+      copiedIcon={<CheckIcon size={16} weight="bold" />}
       data-testid="message-copy-button"
-    >
-      {copied ? <CheckIcon size={16} weight="bold" /> : <CopyIcon size={16} />}
-    </MessageAction>
+    />
   );
 }
 

src/components/compact-model-settings-menu.tsx

@@ -4,7 +4,7 @@ import {
   resolveReasoningPickerState,
   type ReasoningPickerState,
 } from "@/components/ai-elements/reasoning-effort-options";
-import { Button } from "@/components/ui/button";
+import { CompactDropdownTrigger } from "@/components/ui/compact-dropdown-trigger";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -59,18 +59,15 @@ export function CompactModelSettingsMenu({
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button
-          type="button"
-          variant="ghost"
-          size="sm"
+        <CompactDropdownTrigger
+          icon={<SlidersHorizontalIcon size={14} weight="bold" />}
+          label={triggerLabel}
+          caret={null}
           disabled={modelPicker.disabled}
           aria-label="Model settings"
           data-testid="compact-model-settings-trigger"
-          className="h-8 max-w-full shrink-0 gap-1.5 px-2 text-xs text-muted-foreground hover:text-foreground active:scale-100 focus-visible:bg-muted focus-visible:ring-0 focus-visible:ring-offset-0 data-[state=open]:bg-muted data-[state=open]:text-foreground"
-        >
-          <SlidersHorizontalIcon size={14} weight="bold" />
-          <span className="truncate">{triggerLabel}</span>
-        </Button>
+          className="max-w-full hover:text-foreground focus-visible:bg-muted focus-visible:ring-0 focus-visible:ring-offset-0 data-[state=open]:bg-muted data-[state=open]:text-foreground"
+        />
       </DropdownMenuTrigger>
       <DropdownMenuContent align="start" className="w-56 p-1" data-testid="compact-model-settings-menu">
         <DropdownMenuLabel>Model</DropdownMenuLabel>

src/components/library-ask-panel.tsx

@@ -1,7 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState, type FormEvent, type ReactNode } from "react";
 import {
   BookOpenIcon,
-  CaretDownIcon,
   FileHtmlIcon,
   FilePlusIcon,
   GitDiffIcon,
@@ -39,6 +38,7 @@ import {
 import { LibraryAskThreadTabs } from "@/components/library-ask-thread-tabs";
 import { type PromptInputModelPickerValue } from "@/components/ai-elements/prompt-input-model-picker";
 import { Button } from "@/components/ui/button";
+import { CompactDropdownTrigger } from "@/components/ui/compact-dropdown-trigger";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -1058,23 +1058,13 @@ function LibraryAskComposerTools({ tools }: { tools: LibraryAskComposerToolsStat
     >
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
-          <button
-            type="button"
-            className={[
-              "inline-flex h-8 w-auto min-w-0 max-w-32 shrink-0 items-center justify-start gap-1.5 rounded-none border-none bg-transparent px-2 py-0 text-xs font-medium text-muted-foreground shadow-none transition-colors",
-              "hover:bg-accent hover:text-foreground",
-              "focus-visible:bg-transparent focus-visible:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-              "aria-expanded:bg-accent aria-expanded:text-foreground",
-              "disabled:pointer-events-none disabled:opacity-50",
-              "[&_svg]:shrink-0",
-            ].join(" ")}
+          <CompactDropdownTrigger
+            icon={<SparkleIcon size={13} weight="bold" />}
+            label="Draft"
+            className="max-w-32"
             disabled={tools.draftMenuDisabledReason !== undefined}
             title={tools.draftMenuDisabledReason}
-          >
-            <SparkleIcon size={13} weight="bold" />
-            <span className="truncate leading-none">Draft</span>
-            <CaretDownIcon size={11} weight="bold" />
-          </button>
+          />
         </DropdownMenuTrigger>
         <DropdownMenuContent align="start" className="w-56">
           <DropdownMenuItem onSelect={tools.openCreateDraft}>

src/components/library-editor.tsx

@@ -1,15 +1,15 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useAction, useQuery } from "convex/react";
 import { CheckIcon, CopySimpleIcon, MinusIcon, PlusIcon, SlidersHorizontalIcon, XIcon } from "@phosphor-icons/react";
 import { toast } from "sonner";
 import { api } from "../../convex/_generated/api";
 import { Markdown, type MermaidRepairRequest } from "@/components/markdown";
 import { Button } from "@/components/ui/button";
+import { CopyActionButton } from "@/components/ui/copy-action-button";
 import { FloatingExpandableToolbar } from "@/components/ui/floating-expandable-toolbar";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Skeleton } from "@/components/ui/skeleton";
-import { useAsyncCallback } from "@/hooks/use-async-callback";
 import { useLocalStorageEnum } from "@/hooks/use-persisted-state";
 import { toUserErrorMessage } from "@/lib/errors";
 import type { ArtifactId } from "@/lib/types";
@@ -78,34 +78,6 @@ export function LibraryEditor({ artifactId, className }: { artifactId: ArtifactI
     setToolbarExpanded(false);
   }, [artifactId]);
 
-  const [copied, setCopied] = useState(false);
-  const copiedResetTimer = useRef<number | null>(null);
-
-  const clearCopiedResetTimer = useCallback(() => {
-    if (copiedResetTimer.current === null) return;
-    window.clearTimeout(copiedResetTimer.current);
-    copiedResetTimer.current = null;
-  }, []);
-
-  useEffect(() => clearCopiedResetTimer, [clearCopiedResetTimer]);
-
-  const [, runCopy] = useAsyncCallback(async () => {
-    if (!artifact) return;
-    const copySource = selectedVersion !== null && selectedVersion !== artifact.version ? historicalVersion : artifact;
-    if (!copySource) return;
-    try {
-      await navigator.clipboard.writeText(copySource.contentMarkdown);
-      clearCopiedResetTimer();
-      setCopied(true);
-      copiedResetTimer.current = window.setTimeout(() => {
-        copiedResetTimer.current = null;
-        setCopied(false);
-      }, 1600);
-    } catch {
-      // Browsers without clipboard API support — leave the affordance idle.
-    }
-  });
-
   const [fontSize, setFontSize] = useLocalStorageEnum("systify.library.fontSize", FONT_SIZE_STEPS, DEFAULT_FONT_SIZE);
   const handleRepairMermaid = useCallback(
     async ({ chart, error }: MermaidRepairRequest) => {
@@ -155,6 +127,7 @@ export function LibraryEditor({ artifactId, className }: { artifactId: ArtifactI
   const versionIsLoading = displayedArtifact === undefined;
   const versionIsMissing = displayedArtifact === null;
   const copyIsDisabled = versionIsLoading || versionIsMissing;
+  const copyMarkdown = () => displayedArtifact?.contentMarkdown;
 
   return (
     <div className={cn("relative flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden", className)}>
@@ -169,8 +142,7 @@ export function LibraryEditor({ artifactId, className }: { artifactId: ArtifactI
         fontSize={fontSize}
         onFontSizeChange={setFontSize}
         copyIsDisabled={copyIsDisabled}
-        copied={copied}
-        onCopy={() => void runCopy()}
+        copyText={copyMarkdown}
       />
 
       <ScrollArea className="min-h-0 flex-1">
@@ -231,8 +203,7 @@ function ReaderToolbar({
   fontSize,
   onFontSizeChange,
   copyIsDisabled,
-  copied,
-  onCopy,
+  copyText,
 }: {
   expanded: boolean;
   onExpandedChange: (next: boolean | ((previous: boolean) => boolean)) => void;
@@ -250,8 +221,7 @@ function ReaderToolbar({
   fontSize: FontSize;
   onFontSizeChange: (next: FontSize) => void;
   copyIsDisabled: boolean;
-  copied: boolean;
-  onCopy: () => void;
+  copyText: () => string | null | undefined;
 }) {
   return (
     <FloatingExpandableToolbar
@@ -262,6 +232,7 @@ function ReaderToolbar({
       collapseLabel="Collapse reader tools"
       expandIcon={<SlidersHorizontalIcon size={13} weight="bold" />}
       collapseIcon={<XIcon size={12} weight="bold" />}
+      className="absolute top-3 right-4 z-10 max-w-[calc(100%-2rem)]"
       data-testid="reader-toolbar"
     >
       <ArtifactVersionSelect
@@ -272,19 +243,21 @@ function ReaderToolbar({
       />
       {showFontSizeControl ? <FontSizeControl value={fontSize} onChange={onFontSizeChange} /> : null}
       <ReaderToolbarSeparator />
-      <Button
-        type="button"
-        variant="ghost"
+      <CopyActionButton
+        text={copyText}
+        idleLabel="Copy"
+        copiedLabel="Copied"
+        idleAriaLabel="Copy markdown"
+        showLabel
+        tooltip={false}
+        copyIcon={<CopySimpleIcon size={13} weight="bold" />}
+        copiedIcon={<CheckIcon size={13} weight="bold" />}
+        resetAfterMs={1600}
         size="sm"
-        className="h-6 w-14 shrink-0 gap-1 px-1.5 text-[11px] active:scale-100"
-        onClick={onCopy}
+        className="h-6 w-14 shrink-0 gap-1 px-1.5 text-[11px]"
         disabled={copyIsDisabled}
-        aria-label="Copy markdown"
         tabIndex={expanded ? undefined : -1}
-      >
-        {copied ? <CheckIcon size={13} weight="bold" /> : <CopySimpleIcon size={13} weight="bold" />}
-        {copied ? "Copied" : "Copy"}
-      </Button>
+      />
       <ReaderToolbarSeparator className="mr-1" />
     </FloatingExpandableToolbar>
   );
@@ -380,7 +353,8 @@ function FontSizeControl({ value, onChange }: { value: FontSize; onChange: (next
         type="button"
         variant="ghost"
         size="sm"
-        className="h-6 w-6 px-0 active:scale-100"
+        pressEffect="none"
+        className="h-6 w-6 px-0"
         disabled={atMin}
         onClick={() => stepTo(-1)}
         aria-label="Decrease text size"
@@ -391,7 +365,8 @@ function FontSizeControl({ value, onChange }: { value: FontSize; onChange: (next
         type="button"
         variant="ghost"
         size="sm"
-        className="h-6 w-6 px-0 active:scale-100"
+        pressEffect="none"
+        className="h-6 w-6 px-0"
         disabled={atMax}
         onClick={() => stepTo(1)}
         aria-label="Increase text size"

src/components/mermaid-diagram.tsx

@@ -16,6 +16,7 @@ import {
 import { createPortal } from "react-dom";
 import { Button } from "@/components/ui/button";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { TooltipIconButton } from "@/components/ui/tooltip-icon-button";
 import { cn } from "@/lib/utils";
 
 export interface MermaidRepairRequest {
@@ -305,9 +306,9 @@ function SvgViewer({
               </div>
               <div className="flex shrink-0 items-center gap-2">
                 <ViewerToolbar actionsRef={fullscreenActionsRef} />
-                <ToolbarButton label="Close diagram" onClick={() => setIsFullscreen(false)}>
+                <TooltipIconButton label="Close diagram" onClick={() => setIsFullscreen(false)} className="size-8 p-0">
                   <X className="size-4" />
-                </ToolbarButton>
+                </TooltipIconButton>
               </div>
             </div>
             <ZoomableViewport actionsRef={fullscreenActionsRef} className="min-h-0 flex-1" interactive wheelZoomEnabled>
@@ -327,9 +328,13 @@ function SvgViewer({
     <>
       <div className="border-b border-border bg-background/70 px-3 py-2">
         <div className="flex items-center justify-end">
-          <ToolbarButton label="View diagram fullscreen" onClick={() => setIsFullscreen(true)}>
+          <TooltipIconButton
+            label="View diagram fullscreen"
+            onClick={() => setIsFullscreen(true)}
+            className="size-8 p-0"
+          >
             <Maximize2 className="size-4" />
-          </ToolbarButton>
+          </TooltipIconButton>
         </div>
       </div>
       <ZoomableViewport actionsRef={inlineActionsRef} className="min-h-48" interactive={false} wheelZoomEnabled={false}>
@@ -343,34 +348,19 @@ function SvgViewer({
 function ViewerToolbar({ actionsRef }: { actionsRef: RefObject<ZoomActions | null> }) {
   return (
     <>
-      <ToolbarButton label="Zoom in" onClick={() => actionsRef.current?.zoomIn()}>
+      <TooltipIconButton label="Zoom in" onClick={() => actionsRef.current?.zoomIn()} className="size-8 p-0">
         <ZoomIn className="size-4" />
-      </ToolbarButton>
-      <ToolbarButton label="Zoom out" onClick={() => actionsRef.current?.zoomOut()}>
+      </TooltipIconButton>
+      <TooltipIconButton label="Zoom out" onClick={() => actionsRef.current?.zoomOut()} className="size-8 p-0">
         <ZoomOut className="size-4" />
-      </ToolbarButton>
-      <ToolbarButton label="Reset diagram view" onClick={() => actionsRef.current?.reset()}>
+      </TooltipIconButton>
+      <TooltipIconButton label="Reset diagram view" onClick={() => actionsRef.current?.reset()} className="size-8 p-0">
         <RotateCcw className="size-4" />
-      </ToolbarButton>
+      </TooltipIconButton>
     </>
   );
 }
 
-function ToolbarButton({ label, onClick, children }: { label: string; onClick: () => void; children: ReactNode }) {
-  return (
-    <TooltipProvider delayDuration={150}>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button aria-label={label} className="size-8 p-0" onClick={onClick} size="icon" type="button" variant="ghost">
-            {children}
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent>{label}</TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
-  );
-}
-
 function ZoomableViewport({
   children,
   actionsRef,