Refine assistant message copy button state and UX

shivamhwp · shivamhwp · commit ccea1f9f0ffb · 2026-03-19T21:07:08.000+05:30
- make `MessageCopyButton` configurable with disabled state, titles, style props, and copy/error callbacks
- show assistant copy action in timeline metadata, disable it while streaming, and add toast feedback
- extract and test copy-visibility logic for streaming/empty assistant messages
diff --git a/apps/web/src/components/chat/MessageCopyButton.tsx b/apps/web/src/components/chat/MessageCopyButton.tsx
@@ -2,19 +2,63 @@ import { memo } from "react";
 import { CopyIcon, CheckIcon } from "lucide-react";
 import { Button } from "../ui/button";
 import { useCopyToClipboard } from "~/hooks/useCopyToClipboard";
+import { cn } from "~/lib/utils";
 
-export const MessageCopyButton = memo(function MessageCopyButton({ text }: { text: string }) {
-  const { copyToClipboard, isCopied } = useCopyToClipboard();
+type CopyCallbacks = {
+  onCopy?: () => void;
+  onError?: (error: Error) => void;
+};
+
+export const MessageCopyButton = memo(function MessageCopyButton({
+  text,
+  label,
+  title = "Copy message",
+  disabled = false,
+  disabledTitle,
+  size = "xs",
+  variant = "outline",
+  className,
+  onCopy,
+  onError,
+}: {
+  text: string;
+  label?: string;
+  title?: string;
+  disabled?: boolean;
+  disabledTitle?: string;
+  size?: "xs" | "icon-xs";
+  variant?: "outline" | "ghost";
+  className?: string;
+  onCopy?: () => void;
+  onError?: (error: Error) => void;
+}) {
+  const { copyToClipboard, isCopied } = useCopyToClipboard<CopyCallbacks>({
+    onCopy: (callbacks) => {
+      callbacks.onCopy?.();
+    },
+    onError: (error, callbacks) => {
+      callbacks.onError?.(error);
+    },
+  });
+  const buttonTitle = disabled ? (disabledTitle ?? title) : isCopied ? "Copied" : title;
+  const copyCallbacks = {
+    ...(onCopy ? { onCopy } : {}),
+    ...(onError ? { onError } : {}),
+  };
 
   return (
     <Button
       type="button"
-      size="xs"
-      variant="outline"
-      onClick={() => copyToClipboard(text)}
-      title="Copy message"
+      size={size}
+      variant={variant}
+      className={cn(className)}
+      disabled={disabled}
+      onClick={() => copyToClipboard(text, copyCallbacks)}
+      title={buttonTitle}
+      aria-label={buttonTitle}
     >
       {isCopied ? <CheckIcon className="size-3 text-success" /> : <CopyIcon className="size-3" />}
+      {label ? <span>{label}</span> : null}
     </Button>
   );
 });
diff --git a/apps/web/src/components/chat/MessagesTimeline.logic.test.ts b/apps/web/src/components/chat/MessagesTimeline.logic.test.ts
@@ -1,5 +1,9 @@
 import { describe, expect, it } from "vitest";
-import { computeMessageDurationStart, normalizeCompactToolLabel } from "./MessagesTimeline.logic";
+import {
+  computeMessageDurationStart,
+  normalizeCompactToolLabel,
+  resolveAssistantMessageCopyState,
+} from "./MessagesTimeline.logic";
 
 describe("computeMessageDurationStart", () => {
   it("returns message createdAt when there is no preceding user message", () => {
@@ -143,3 +147,57 @@ describe("normalizeCompactToolLabel", () => {
     expect(normalizeCompactToolLabel("Read file completed")).toBe("Read file");
   });
 });
+
+describe("resolveAssistantMessageCopyState", () => {
+  it("returns enabled copy state for completed assistant messages", () => {
+    expect(
+      resolveAssistantMessageCopyState({
+        text: "Ship it",
+        streaming: false,
+      }),
+    ).toEqual({
+      disabled: false,
+      text: "Ship it",
+      visible: true,
+    });
+  });
+
+  it("keeps copy visible but disabled for streaming assistant messages", () => {
+    expect(
+      resolveAssistantMessageCopyState({
+        text: "Still streaming",
+        streaming: true,
+      }),
+    ).toEqual({
+      disabled: true,
+      text: "Still streaming",
+      visible: true,
+    });
+  });
+
+  it("hides copy for empty completed assistant messages", () => {
+    expect(
+      resolveAssistantMessageCopyState({
+        text: "   ",
+        streaming: false,
+      }),
+    ).toEqual({
+      disabled: false,
+      text: null,
+      visible: false,
+    });
+  });
+
+  it("keeps copy visible while an empty assistant message is streaming", () => {
+    expect(
+      resolveAssistantMessageCopyState({
+        text: null,
+        streaming: true,
+      }),
+    ).toEqual({
+      disabled: true,
+      text: null,
+      visible: true,
+    });
+  });
+});
diff --git a/apps/web/src/components/chat/MessagesTimeline.logic.ts b/apps/web/src/components/chat/MessagesTimeline.logic.ts
@@ -27,3 +27,18 @@ export function computeMessageDurationStart(
 export function normalizeCompactToolLabel(value: string): string {
   return value.replace(/\s+(?:complete|completed)\s*$/i, "").trim();
 }
+
+export function resolveAssistantMessageCopyState({
+  text,
+  streaming,
+}: {
+  text: string | null;
+  streaming: boolean;
+}) {
+  const hasText = text !== null && text.trim().length > 0;
+  return {
+    disabled: streaming,
+    text: hasText ? text : null,
+    visible: streaming || hasText,
+  };
+}
diff --git a/apps/web/src/components/chat/MessagesTimeline.test.tsx b/apps/web/src/components/chat/MessagesTimeline.test.tsx
@@ -96,4 +96,64 @@ describe("MessagesTimeline", () => {
     expect(markup).toContain("lucide-terminal");
     expect(markup).toContain("yoo what&#x27;s ");
   });
+
+  it("shows assistant copy disabled while streaming and enabled once complete", async () => {
+    const { MessagesTimeline } = await import("./MessagesTimeline");
+    const markup = renderToStaticMarkup(
+      <MessagesTimeline
+        hasMessages
+        isWorking={false}
+        activeTurnInProgress={false}
+        activeTurnStartedAt={null}
+        scrollContainer={null}
+        timelineEntries={[
+          {
+            id: "entry-assistant-complete",
+            kind: "message",
+            createdAt: "2026-03-17T19:12:28.000Z",
+            message: {
+              id: MessageId.makeUnsafe("message-assistant-complete"),
+              role: "assistant",
+              text: "Completed response",
+              createdAt: "2026-03-17T19:12:28.000Z",
+              completedAt: "2026-03-17T19:12:30.000Z",
+              streaming: false,
+            },
+          },
+          {
+            id: "entry-assistant-streaming",
+            kind: "message",
+            createdAt: "2026-03-17T19:12:31.000Z",
+            message: {
+              id: MessageId.makeUnsafe("message-assistant-streaming"),
+              role: "assistant",
+              text: "Partial response",
+              createdAt: "2026-03-17T19:12:31.000Z",
+              streaming: true,
+            },
+          },
+        ]}
+        completionDividerBeforeEntryId={null}
+        completionSummary={null}
+        turnDiffSummaryByAssistantMessageId={new Map()}
+        nowIso="2026-03-17T19:12:35.000Z"
+        expandedWorkGroups={{}}
+        onToggleWorkGroup={() => {}}
+        onOpenTurnDiff={() => {}}
+        revertTurnCountByUserMessageId={new Map()}
+        onRevertUserMessage={() => {}}
+        isRevertingCheckpoint={false}
+        onImageExpand={() => {}}
+        markdownCwd={undefined}
+        resolvedTheme="light"
+        timestampFormat="locale"
+        workspaceRoot={undefined}
+      />,
+    );
+
+    expect((markup.match(/title="Copy assistant response"/g) ?? []).length).toBe(1);
+    expect((markup.match(/title="Copy available when response completes"/g) ?? []).length).toBe(1);
+    expect((markup.match(/disabled=""/g) ?? []).length).toBe(1);
+    expect(markup).not.toContain(">Copy<");
+  });
 });
diff --git a/apps/web/src/components/chat/MessagesTimeline.tsx b/apps/web/src/components/chat/MessagesTimeline.tsx
@@ -41,7 +41,11 @@ import { ProposedPlanCard } from "./ProposedPlanCard";
 import { ChangedFilesTree } from "./ChangedFilesTree";
 import { DiffStatLabel, hasNonZeroStat } from "./DiffStatLabel";
 import { MessageCopyButton } from "./MessageCopyButton";
-import { computeMessageDurationStart, normalizeCompactToolLabel } from "./MessagesTimeline.logic";
+import {
+  computeMessageDurationStart,
+  normalizeCompactToolLabel,
+  resolveAssistantMessageCopyState,
+} from "./MessagesTimeline.logic";
 import { TerminalContextInlineChip } from "./TerminalContextInlineChip";
 import {
   deriveDisplayedUserMessageState,
@@ -50,6 +54,7 @@ import {
 import { cn } from "~/lib/utils";
 import { type TimestampFormat } from "../../appSettings";
 import { formatTimestamp } from "../../timestampFormat";
+import { toastManager } from "../ui/toast";
 import {
   buildInlineTerminalContextText,
   formatInlineTerminalContextLabel,
@@ -437,6 +442,10 @@ export const MessagesTimeline = memo(function MessagesTimeline({
         row.message.role === "assistant" &&
         (() => {
           const messageText = row.message.text || (row.message.streaming ? "" : "(empty response)");
+          const assistantCopyState = resolveAssistantMessageCopyState({
+            text: row.message.text ?? null,
+            streaming: row.message.streaming,
+          });
           return (
             <>
               {row.showCompletionDivider && (
@@ -510,15 +519,43 @@ export const MessagesTimeline = memo(function MessagesTimeline({
                     </div>
                   );
                 })()}
-                <p className="mt-1.5 text-[10px] text-muted-foreground/30">
-                  {formatMessageMeta(
-                    row.message.createdAt,
-                    row.message.streaming
-                      ? formatElapsed(row.durationStart, nowIso)
-                      : formatElapsed(row.durationStart, row.message.completedAt),
-                    timestampFormat,
-                  )}
-                </p>
+                <div className="mt-1.5 flex items-center justify-between gap-2">
+                  <div className="flex items-center gap-1.5">
+                    {assistantCopyState.visible ? (
+                      <MessageCopyButton
+                        text={assistantCopyState.text ?? ""}
+                        title="Copy assistant response"
+                        disabled={assistantCopyState.disabled}
+                        disabledTitle="Copy available when response completes"
+                        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={() => {
+                          toastManager.add({
+                            type: "success",
+                            title: "Assistant response copied",
+                          });
+                        }}
+                        onError={(error) => {
+                          toastManager.add({
+                            type: "error",
+                            title: "Failed to copy assistant response",
+                            description: error.message,
+                          });
+                        }}
+                      />
+                    ) : null}
+                  </div>
+                  <p className="text-[10px] text-muted-foreground/30">
+                    {formatMessageMeta(
+                      row.message.createdAt,
+                      row.message.streaming
+                        ? formatElapsed(row.durationStart, nowIso)
+                        : formatElapsed(row.durationStart, row.message.completedAt),
+                      timestampFormat,
+                    )}
+                  </p>
+                </div>
               </div>
             </>
           );
