Copy button

Author: brendan-kellam

packages/web/src/app/[domain]/components/copyIconButton.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { CheckCircle2, Copy } from "lucide-react";
+import { useCallback, useState } from "react";
+
+interface CopyIconButtonProps {
+    onCopy: () => boolean;
+    className?: string;
+}
+
+export const CopyIconButton = ({ onCopy, className }: CopyIconButtonProps) => {
+    const [copied, setCopied] = useState(false);
+
+    const onClick = useCallback(() => {
+        const success = onCopy();
+        if (success) {
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        }
+    }, [onCopy]);
+
+    return (
+        <Button
+            variant="ghost"
+            size="sm"
+            className={cn("h-6 w-6 text-muted-foreground", className)}
+            onClick={onClick}
+            aria-label="Copy to clipboard"
+        >
+            {copied ? (
+                <CheckCircle2 className="h-3 w-3 text-green-500" />
+            ) : (
+                <Copy className="h-3 w-3" />
+            )}
+        </Button>
+    )
+}

packages/web/src/app/[domain]/components/pathHeader.tsx

@@ -4,7 +4,7 @@ import { cn, getCodeHostInfoForRepo } from "@/lib/utils";
 import { LaptopIcon } from "@radix-ui/react-icons";
 import Image from "next/image";
 import { useBrowseNavigation } from "../browse/hooks/useBrowseNavigation";
-import { Copy, CheckCircle2, ChevronRight, MoreHorizontal } from "lucide-react";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
 import { useCallback, useState, useMemo, useRef, useEffect } from "react";
 import { useToast } from "@/components/hooks/use-toast";
 import {
@@ -14,6 +14,7 @@ import {
     DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { VscodeFileIcon } from "@/app/components/vscodeFileIcon";
+import { CopyIconButton } from "./copyIconButton";
 
 interface FileHeaderProps {
     path: string;
@@ -65,7 +66,6 @@ export const PathHeader = ({
 
     const { navigateToPath } = useBrowseNavigation();
     const { toast } = useToast();
-    const [copied, setCopied] = useState(false);
     const containerRef = useRef<HTMLDivElement>(null);
     const breadcrumbsRef = useRef<HTMLDivElement>(null);
     const [visibleSegmentCount, setVisibleSegmentCount] = useState<number | null>(null);
@@ -175,9 +175,8 @@ export const PathHeader = ({
 
     const onCopyPath = useCallback(() => {
         navigator.clipboard.writeText(path);
-        setCopied(true);
         toast({ description: "✅ Copied to clipboard" });
-        setTimeout(() => setCopied(false), 1500);
+        return true;
     }, [path, toast]);
 
     const onBreadcrumbClick = useCallback((segment: BreadcrumbSegment) => {
@@ -296,18 +295,10 @@ export const PathHeader = ({
                         </div>
                     ))}
                 </div>
-                <button
-                    className="ml-2 p-1 rounded transition-colors flex-shrink-0"
-                    onClick={onCopyPath}
-                    aria-label="Copy file path"
-                    type="button"
-                >
-                    {copied ? (
-                        <CheckCircle2 className="h-4 w-4 text-green-500" />
-                    ) : (
-                        <Copy className="h-4 w-4 text-muted-foreground" />
-                    )}
-                </button>
+                <CopyIconButton
+                    onCopy={onCopyPath}
+                    className="ml-2"
+                />
             </div>
         </div>
     )

packages/web/src/features/chat/components/chatThread/answerCard.tsx

@@ -3,12 +3,15 @@
 import { useExtractTOCItems } from "../../useTOCItems";
 import { TableOfContents } from "./tableOfContents";
 import { Button } from "@/components/ui/button";
-import { Copy, TableOfContentsIcon, ThumbsDown, ThumbsUp } from "lucide-react";
+import { TableOfContentsIcon, ThumbsDown, ThumbsUp } from "lucide-react";
 import { Separator } from "@/components/ui/separator";
 import { MarkdownRenderer } from "./markdownRenderer";
-import { forwardRef, useImperativeHandle, useRef, useState } from "react";
+import { forwardRef, useCallback, useImperativeHandle, useRef, useState } from "react";
 import { Toggle } from "@/components/ui/toggle";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { CopyIconButton } from "@/app/[domain]/components/copyIconButton";
+import { useToast } from "@/components/hooks/use-toast";
+import { convertLLMOutputToPortableMarkdown } from "../../utils";
 
 interface AnswerCardProps {
     answerText: string;
@@ -21,12 +24,22 @@ export const AnswerCard = forwardRef<HTMLDivElement, AnswerCardProps>(({
     const markdownRendererRef = useRef<HTMLDivElement>(null);
     const { tocItems, activeId } = useExtractTOCItems({ target: markdownRendererRef.current });
     const [isTOCButtonToggled, setIsTOCButtonToggled] = useState(false);
+    const { toast } = useToast();
 
     useImperativeHandle(
         forwardedRef,
         () => markdownRendererRef.current as HTMLDivElement
     );
 
+    const onCopyAnswer = useCallback(() => {
+        const markdownText = convertLLMOutputToPortableMarkdown(answerText);
+        navigator.clipboard.writeText(markdownText);
+        toast({
+            description: "✅ Copied to clipboard",
+        });
+        return true;
+    }, [answerText, toast]);
+
     return (
         <div className="flex flex-row w-full relative scroll-mt-16">
             {(isTOCButtonToggled && tocItems.length > 0) && (
@@ -43,13 +56,10 @@ export const AnswerCard = forwardRef<HTMLDivElement, AnswerCardProps>(({
                         <div className="flex items-center gap-2">
                             <Tooltip>
                                 <TooltipTrigger asChild>
-                                    <Button
-                                        variant="ghost"
-                                        size="sm"
+                                    <CopyIconButton
+                                        onCopy={onCopyAnswer}
                                         className="h-6 w-6 text-muted-foreground"
-                                    >
-                                        <Copy className="h-3 w-3" />
-                                    </Button>
+                                    />
                                 </TooltipTrigger>
                                 <TooltipContent
                                     side="bottom"

packages/web/src/features/chat/utils.ts

@@ -1,7 +1,7 @@
 import { env } from "@/env.mjs"
 import { CreateUIMessage, UIMessagePart } from "ai"
 import { Descendant, Editor, Point, Range, Transforms } from "slate"
-import { FILE_REFERENCE_PREFIX } from "./constants"
+import { FILE_REFERENCE_PREFIX, FILE_REFERENCE_REGEX } from "./constants"
 import { CustomEditor, CustomText, FileReference, FileSource, MentionData, MentionElement, ModelProviderInfo, ParagraphElement, SBChatMessage, SBChatMessagePart, SBChatMessageToolTypes, Source } from "./types"
 
 export const insertMention = (editor: CustomEditor, data: MentionData, target?: Range | null) => {
@@ -305,6 +305,28 @@ export const createFileReference = ({ fileName, startLine, endLine }: { fileName
     }
 }
 
+/**
+ * Converts LLM text that includes references (e.g., @file:...) into a portable
+ * Markdown format. Practically, this means converting references into Markdown
+ * links.
+ */
+export const convertLLMOutputToPortableMarkdown = (text: string): string => {
+    return text.replace(FILE_REFERENCE_REGEX, (_, fileName, startLine, endLine) => {
+        const displayName = fileName.split('/').pop() || fileName;
+        
+        let linkText = displayName;
+        if (startLine) {
+            if (endLine && startLine !== endLine) {
+                linkText += `:${startLine}-${endLine}`;
+            } else {
+                linkText += `:${startLine}`;
+            }
+        }
+        
+        return `[${linkText}](${fileName})`;
+    });
+}
+
 // Groups message parts into groups based on step-start delimiters.
 export const groupMessageIntoSteps = (parts: SBChatMessagePart[]) => {
     if (!parts || parts.length === 0) {