feat(chat): add copy controls to chat messages (#296)

Author: SDSLeon

src/renderer/components/thread/ChatPane/parts/items/AssistantMessage.test.tsx

@@ -29,7 +29,7 @@ describe("AssistantMessage", () => {
 
     render(
       <AppProvider>
-        <AssistantMessage item={item} />
+        <AssistantMessage threadId="thread-1" item={item} />
       </AppProvider>,
     );
 
@@ -49,7 +49,7 @@ describe("AssistantMessage", () => {
 
     render(
       <AppProvider>
-        <AssistantMessage item={item} />
+        <AssistantMessage threadId="thread-1" item={item} />
       </AppProvider>,
     );
 

src/renderer/components/thread/ChatPane/parts/items/AssistantMessage.tsx

@@ -1,21 +1,49 @@
 import { memo, useDeferredValue, useMemo } from "react";
 import { Surface } from "@heroui/react";
+import { useLingui } from "@lingui/react/macro";
 import type { MessageItemPayload } from "@/shared/contracts";
 import { PixelLoader } from "@/renderer/components/common/PixelLoader";
+import { useAppStore } from "@/renderer/state/appStore";
 import {
   getRuntimeItemPayload,
   type RuntimeChatItem,
 } from "@/renderer/state/slices/runtimeEventSlice";
 import { chatMessageSurfaceClass } from "./chatMessageSurface";
+import { CopyTextButton } from "./CopyTextButton";
 import { ImageCard } from "./ImageView";
 import { imageViewSourceFromImageBlock } from "./imageViewSource";
 import { ItemMarkdown } from "./ItemMarkdown";
 
 interface AssistantMessageProps {
+  threadId: string;
   item: RuntimeChatItem;
 }
 
-export const AssistantMessage = memo(function AssistantMessage({ item }: AssistantMessageProps) {
+export const AssistantMessage = memo(function AssistantMessage({
+  threadId,
+  item,
+}: AssistantMessageProps) {
+  const { t } = useLingui();
+  // Matching Codex: the copy action only appears under a turn's *final* answer,
+  // i.e. the last assistant message before the next user message (or the end of
+  // the thread). Every turn keeps its button, not just the most recent one.
+  // Sub-agent messages (those nested under a tool call) are ignored so they
+  // neither qualify nor cancel a top-level answer's terminal status.
+  const isFinalAnswer = useAppStore((state) => {
+    if (item.parentItemId) return false;
+    const ids = state.runtimeItemIdsByThread[threadId];
+    const byId = state.runtimeItemsByIdByThread[threadId];
+    if (!ids || !byId) return false;
+    const index = ids.indexOf(item.id);
+    if (index < 0) return false;
+    for (let i = index + 1; i < ids.length; i += 1) {
+      const next = byId[ids[i]!];
+      if (!next || next.parentItemId) continue;
+      if (next.type === "user_message") return true;
+      if (next.type === "assistant_message") return false;
+    }
+    return true;
+  });
   const stream = item.streams.assistant_text ?? "";
   const payload = getRuntimeItemPayload<MessageItemPayload>(item, "assistant_message");
   const rawText =
@@ -38,6 +66,7 @@ export const AssistantMessage = memo(function AssistantMessage({ item }: Assista
         .filter((s): s is NonNullable<typeof s> => s !== null),
     [payload?.content],
   );
+  const showCopyButton = isFinalAnswer && !isStreaming && rawText.length > 0;
   return (
     <Surface variant="transparent" className={chatMessageSurfaceClass}>
       <div className="min-w-0 leading-snug">
@@ -55,6 +84,11 @@ export const AssistantMessage = memo(function AssistantMessage({ item }: Assista
           </div>
         ) : null}
       </div>
+      {showCopyButton ? (
+        <div className="poracode-message-action-strip mt-1 flex items-center gap-0.5 opacity-0 transition-opacity group-hover/checkpoint:opacity-100 focus-within:opacity-100">
+          <CopyTextButton text={rawText} label={t`Copy message`} />
+        </div>
+      ) : null}
     </Surface>
   );
 });

src/renderer/components/thread/ChatPane/parts/items/ChatItemRow.tsx

@@ -76,17 +76,21 @@ const SingleChatItemRow = memo(function SingleChatItemRow({
       return <SubAgentToolCall threadId={threadId} item={item} />;
     }
   }
-  return renderItem(item, checkpointRevert);
+  return renderItem(threadId, item, checkpointRevert);
 });
 
-function renderItem(item: RuntimeChatItem, checkpointRevert: CheckpointRevertRequest | null) {
+function renderItem(
+  threadId: string,
+  item: RuntimeChatItem,
+  checkpointRevert: CheckpointRevertRequest | null,
+) {
   switch (item.type) {
     case "user_message":
       return <UserMessage item={item} checkpointRevert={checkpointRevert} />;
     case "question_answer":
       return <QuestionAnswer item={item} checkpointRevert={checkpointRevert} />;
     case "assistant_message":
-      return <AssistantMessage item={item} />;
+      return <AssistantMessage threadId={threadId} item={item} />;
     case "reasoning":
       return <Reasoning item={item} />;
     case "plan":

src/renderer/components/thread/ChatPane/parts/items/CopyTextButton.tsx

@@ -0,0 +1,75 @@
+import { useLayoutEffect, useRef, useState } from "react";
+import { Tooltip, toast } from "@heroui/react";
+import { useLingui } from "@lingui/react/macro";
+import { Copy } from "lucide-react";
+import { friendlyError } from "@/shared/messages";
+
+interface CopyTextButtonProps {
+  text: string;
+  /** Idle tooltip / aria-label (already translated), e.g. t`Copy message`. */
+  label: string;
+}
+
+/**
+ * Small hover-strip icon button that copies `text` to the clipboard and flips
+ * its tooltip to "Copied" for a moment. Shared by the user/assistant message
+ * action strips and markdown code blocks.
+ */
+export function CopyTextButton({ text, label }: CopyTextButtonProps) {
+  const { t } = useLingui();
+  const [copyState, setCopyState] = useState<"idle" | "copied">("idle");
+  const [isTooltipOpen, setIsTooltipOpen] = useState(false);
+  const resetTimerRef = useRef<number | null>(null);
+  const labelResetTimerRef = useRef<number | null>(null);
+
+  useLayoutEffect(
+    () => () => {
+      if (resetTimerRef.current !== null) window.clearTimeout(resetTimerRef.current);
+      if (labelResetTimerRef.current !== null) window.clearTimeout(labelResetTimerRef.current);
+    },
+    [],
+  );
+
+  return (
+    <Tooltip delay={300} isOpen={isTooltipOpen} onOpenChange={setIsTooltipOpen}>
+      <Tooltip.Trigger>
+        <button
+          type="button"
+          aria-label={copyState === "copied" ? t`Copied` : label}
+          className="flex size-5 items-center justify-center rounded text-muted/70 transition-colors hover:bg-foreground/5 hover:text-foreground"
+          onClick={(event) => {
+            event.stopPropagation();
+            navigator.clipboard
+              .writeText(text)
+              .then(() => {
+                setCopyState("copied");
+                setIsTooltipOpen(true);
+                if (resetTimerRef.current !== null) {
+                  window.clearTimeout(resetTimerRef.current);
+                }
+                if (labelResetTimerRef.current !== null) {
+                  window.clearTimeout(labelResetTimerRef.current);
+                }
+                resetTimerRef.current = window.setTimeout(() => {
+                  setIsTooltipOpen(false);
+                  resetTimerRef.current = null;
+                  labelResetTimerRef.current = window.setTimeout(() => {
+                    setCopyState("idle");
+                    labelResetTimerRef.current = null;
+                  }, 200);
+                }, 1200);
+              })
+              .catch((error: unknown) => {
+                toast.danger(friendlyError(error));
+              });
+          }}
+        >
+          <Copy className="size-3" />
+        </button>
+      </Tooltip.Trigger>
+      <Tooltip.Content placement="top">
+        {copyState === "copied" ? t`Copied` : label}
+      </Tooltip.Content>
+    </Tooltip>
+  );
+}

src/renderer/components/thread/ChatPane/parts/items/ItemMarkdownInner.tsx

@@ -1,4 +1,5 @@
 import { Link } from "@heroui/react";
+import { useLingui } from "@lingui/react/macro";
 import { ExternalLink } from "lucide-react";
 import {
   Children,
@@ -19,6 +20,7 @@ import { openExternalWithFeedback } from "@/renderer/utils/openExternal";
 import { useChatPaneActions } from "../../chatPaneActionsContext";
 import { normalizeChatProjectPath } from "../../chatPathUtils";
 import { CodeBlock } from "./CodeBlock";
+import { CopyTextButton } from "./CopyTextButton";
 import { InlineFilePathChip } from "./InlineFilePathChip";
 import { InlineFolderPathChip } from "./InlineFolderPathChip";
 import { LC_SELECTOR_LANG, tryParseSelectorPayload } from "./SelectorBadge";
@@ -114,10 +116,18 @@ const MD_COMPONENTS: StreamdownComponents = {
       const language = normalizeHighlightLanguage(codeProps?.className);
       if (language) {
         const text = flattenMdChildren(codeProps?.children).replace(/\r?\n$/, "");
-        return <CodeBlock text={text} lang={language} className={markdownCodeBlockClass} />;
+        return (
+          <MdCodeBlockFrame text={text}>
+            <CodeBlock text={text} lang={language} className={markdownCodeBlockClass} />
+          </MdCodeBlockFrame>
+        );
       }
     }
-    return <pre>{markCodeChildAsBlock(children)}</pre>;
+    return (
+      <MdCodeBlockFrame text={flattenMdChildren(children).replace(/\r?\n$/, "")}>
+        <pre>{markCodeChildAsBlock(children)}</pre>
+      </MdCodeBlockFrame>
+    );
   },
   code({ className, children, ...rest }) {
     const isBlock =
@@ -183,6 +193,24 @@ const markdownCodeBlockClass =
   "not-prose my-2 min-w-0 overflow-x-hidden rounded bg-foreground/10 px-[0.5em] py-[0.25em] font-mono text-[0.875em] leading-snug text-foreground";
 const markdownImageClass = `not-prose my-2 rounded-lg border border-[color:var(--border)] bg-[var(--composer-surface)] ${chatInlineImageClass}`;
 
+/**
+ * Wraps a fenced code block with a copy button that reveals on hover of the
+ * code block itself (`group/codeblock`). Kept outside `CodeBlock` so
+ * command-output viewports (which reuse `CodeBlock`) are not affected.
+ */
+function MdCodeBlockFrame({ text, children }: { text: string; children?: ReactNode }) {
+  const { t } = useLingui();
+  if (text.length === 0) return <>{children}</>;
+  return (
+    <div className="group/codeblock relative">
+      {children}
+      <div className="absolute right-1 top-1 z-10 opacity-0 transition-opacity focus-within:opacity-100 group-hover/codeblock:opacity-100">
+        <CopyTextButton text={text} label={t`Copy code`} />
+      </div>
+    </div>
+  );
+}
+
 function MdCode(props: { className: string; isBlock?: boolean; children?: ReactNode }) {
   const actions = useChatPaneActions();
   const isBlock =

src/renderer/components/thread/ChatPane/parts/items/UserMessage.tsx

@@ -1,9 +1,8 @@
 import { memo, type ReactNode, useEffectEvent, useLayoutEffect, useRef, useState } from "react";
-import { Link, Surface, Tooltip, toast } from "@heroui/react";
+import { Link, Surface, Tooltip } from "@heroui/react";
 import { useLingui } from "@lingui/react/macro";
-import { ChevronDown, ChevronUp, Copy, Sparkles } from "lucide-react";
+import { ChevronDown, ChevronUp, Sparkles } from "lucide-react";
 import type { CanonicalContentBlock, MessageItemPayload } from "@/shared/contracts";
-import { friendlyError } from "@/shared/messages";
 import { AttachmentBar } from "@/renderer/components/composer/AttachmentBar";
 import { openAttachmentLightbox } from "@/renderer/components/composer/ImageLightbox";
 import type { Attachment } from "@/renderer/components/composer/useAttachments";
@@ -20,6 +19,7 @@ import { normalizeChatProjectPath } from "../../chatPathUtils";
 import { openUserMessageActions } from "../../userMessageActions";
 import { CheckpointRevertButton, type CheckpointRevertRequest } from "../CheckpointRevertControls";
 import { chatPromptSurfaceClass } from "./chatMessageSurface";
+import { CopyTextButton } from "./CopyTextButton";
 import { InlineFilePathChip } from "./InlineFilePathChip";
 import { ItemMarkdown } from "./ItemMarkdown";
 import { extractSelectorPayloads } from "./SelectorBadge";
@@ -270,72 +270,13 @@ export const UserMessage = memo(function UserMessage({ item, checkpointRevert }:
               onRequestRevert={checkpointRevert.onRequestRevert}
             />
           ) : null}
-          <CopyUserMessageButton text={rawText} />
+          <CopyTextButton text={rawText} label={t`Copy message`} />
         </div>
       ) : null}
     </Surface>
   );
 });
 
-function CopyUserMessageButton({ text }: { text: string }) {
-  const { t } = useLingui();
-  const [copyState, setCopyState] = useState<"idle" | "copied">("idle");
-  const [isTooltipOpen, setIsTooltipOpen] = useState(false);
-  const resetTimerRef = useRef<number | null>(null);
-  const labelResetTimerRef = useRef<number | null>(null);
-
-  useLayoutEffect(
-    () => () => {
-      if (resetTimerRef.current !== null) window.clearTimeout(resetTimerRef.current);
-      if (labelResetTimerRef.current !== null) window.clearTimeout(labelResetTimerRef.current);
-    },
-    [],
-  );
-
-  return (
-    <Tooltip delay={300} isOpen={isTooltipOpen} onOpenChange={setIsTooltipOpen}>
-      <Tooltip.Trigger>
-        <button
-          type="button"
-          aria-label={copyState === "copied" ? t`Copied` : t`Copy message`}
-          className="flex size-5 items-center justify-center rounded text-muted/70 transition-colors hover:bg-foreground/5 hover:text-foreground"
-          onClick={(event) => {
-            event.stopPropagation();
-            navigator.clipboard
-              .writeText(text)
-              .then(() => {
-                setCopyState("copied");
-                setIsTooltipOpen(true);
-                if (resetTimerRef.current !== null) {
-                  window.clearTimeout(resetTimerRef.current);
-                }
-                if (labelResetTimerRef.current !== null) {
-                  window.clearTimeout(labelResetTimerRef.current);
-                }
-                resetTimerRef.current = window.setTimeout(() => {
-                  setIsTooltipOpen(false);
-                  resetTimerRef.current = null;
-                  labelResetTimerRef.current = window.setTimeout(() => {
-                    setCopyState("idle");
-                    labelResetTimerRef.current = null;
-                  }, 200);
-                }, 1200);
-              })
-              .catch((error: unknown) => {
-                toast.danger(friendlyError(error));
-              });
-          }}
-        >
-          <Copy className="size-3" />
-        </button>
-      </Tooltip.Trigger>
-      <Tooltip.Content placement="top">
-        {copyState === "copied" ? t`Copied` : t`Copy message`}
-      </Tooltip.Content>
-    </Tooltip>
-  );
-}
-
 const LEADING_SLASH_COMMAND_RE = /^\/([A-Za-z][A-Za-z0-9_-]*)(\s+|$)/;
 
 function extractLeadingSlashCommand(text: string): { slashCommand: string | null; body: string } {

src/renderer/locales/de/messages.po

@@ -2370,8 +2370,8 @@ msgstr "Gespräch"
 
 #: src/mobile/UserMessageActionsSheet.tsx
 #: src/mobile/views/PortsView.tsx
+#: src/renderer/components/thread/ChatPane/parts/items/CopyTextButton.tsx
 #: src/renderer/components/thread/ChatPane/parts/items/ImageView.tsx
-#: src/renderer/components/thread/ChatPane/parts/items/UserMessage.tsx
 #: src/renderer/RendererCrashScreen.tsx
 msgid "Copied"
 msgstr "Kopiert"
@@ -2399,6 +2399,10 @@ msgstr "{0} Gerätecode {1} kopieren"
 msgid "Copy all Lightcode data into Poracode. Poracode restarts and keeps a complete backup of its current data."
 msgstr "Alle Lightcode-Daten in Poracode kopieren. Poracode wird neu gestartet und behält eine vollständige Sicherung seiner aktuellen Daten."
 
+#: src/renderer/components/thread/ChatPane/parts/items/ItemMarkdownInner.tsx
+msgid "Copy code"
+msgstr "Code kopieren"
+
 #: src/renderer/views/MainView/parts/RightPanel/parts/BrowserPanel/parts/BrowserToolbar.tsx
 msgid "Copy Current URL"
 msgstr "Aktuelle URL kopieren"
@@ -2429,6 +2433,7 @@ msgid "Copy image"
 msgstr "Bild kopieren"
 
 #: src/mobile/UserMessageActionsSheet.tsx
+#: src/renderer/components/thread/ChatPane/parts/items/AssistantMessage.tsx
 #: src/renderer/components/thread/ChatPane/parts/items/UserMessage.tsx
 msgid "Copy message"
 msgstr "Nachricht kopieren"