From 5560546b4f1bea186759ba73bf50059f22e1b128 Mon Sep 17 00:00:00 2001
From: Koshik Debanath <48962097+kowshik24@users.noreply.github.com>
Date: Sun, 30 Mar 2025 16:06:34 +0600
Subject: [PATCH] Add ability to copy references from Web App

Related to #1021

Add a "Copy References" button to the references pane in the web app.

* **ReferencePanel Component**
  - Import `Clipboard` icon and `Button` component.
  - Add a "Copy References" button to the `ReferencePanel` component.
  - Implement functionality to copy all references (notes, online, and code) as a markdown bullet list.
  - Update the `TeaserReferencesSection` component to include the "Copy References" button.

* **ChatMessage Component**
  - Import `Clipboard` icon.
  - Add a "Copy References" button to the `ChatMessage` component.
  - Implement functionality to copy all references (notes, online, and code) as a markdown bullet list.
---
 .../components/chatMessage/chatMessage.tsx    | 29 ++++++++++++++++++-
 .../referencePanel/referencePanel.tsx         | 27 ++++++++++++++++-
 2 files changed, 54 insertions(+), 2 deletions(-)

diff --git a/src/interface/web/app/components/chatMessage/chatMessage.tsx b/src/interface/web/app/components/chatMessage/chatMessage.tsx
index 5d87f7ea2..8882ef233 100644
--- a/src/interface/web/app/components/chatMessage/chatMessage.tsx
+++ b/src/interface/web/app/components/chatMessage/chatMessage.tsx
@@ -31,11 +31,12 @@ import {
     Shapes,
     Trash,
     Toolbox,
+    Clipboard,
 } from "@phosphor-icons/react";
 
 import DOMPurify from "dompurify";
 import { InlineLoading } from "../loading/loading";
-import { convertColorToTextClass } from "@/app/common/colorUtils";
+import { convertColorToTextClass } from "@/app.common/colorUtils";
 import { AgentData } from "@/app/components/agentCard/agentCard";
 
 import renderMathInElement from "katex/contrib/auto-render";
@@ -678,6 +679,22 @@ const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>((props, ref) =>
         props.chatMessage.codeContext,
     );
 
+    const copyReferencesToClipboard = () => {
+        const allReferencesMarkdown = [
+            ...allReferences.notesReferenceCardData.map(
+                (note) => `- [${note.title}](#)`,
+            ),
+            ...allReferences.onlineReferenceCardData.map(
+                (online) => `- [${online.title}](${online.link})`,
+            ),
+            ...allReferences.codeReferenceCardData.map(
+                (code) => `- [Code Reference](#)`,
+            ),
+        ].join("\n");
+
+        navigator.clipboard.writeText(allReferencesMarkdown);
+    };
+
     return (
         <div
             ref={ref}
@@ -808,6 +825,16 @@ const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>((props, ref) =>
                                     />
                                 )}
                             </button>
+                            <button
+                                title="Copy References"
+                                className={`${styles.copyButton}`}
+                                onClick={copyReferencesToClipboard}
+                            >
+                                <Clipboard
+                                    alt="Copy References"
+                                    className="hsl(var(--muted-foreground)) hover:text-green-500"
+                                />
+                            </button>
                             {props.chatMessage.by === "khoj" &&
                                 (props.chatMessage.intent ? (
                                     <FeedbackButtons
diff --git a/src/interface/web/app/components/referencePanel/referencePanel.tsx b/src/interface/web/app/components/referencePanel/referencePanel.tsx
index 8711809f7..c8e73885f 100644
--- a/src/interface/web/app/components/referencePanel/referencePanel.tsx
+++ b/src/interface/web/app/components/referencePanel/referencePanel.tsx
@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from "react";
 
-import { ArrowCircleDown, ArrowRight, Code, Note } from "@phosphor-icons/react";
+import { ArrowCircleDown, ArrowRight, Code, Note, Clipboard } from "@phosphor-icons/react";
 
 import markdownIt from "markdown-it";
 const md = new markdownIt({
@@ -32,6 +32,7 @@ import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover
 import DOMPurify from "dompurify";
 import { getIconFromFilename } from "@/app/common/iconUtils";
 import Link from "next/link";
+import { Button } from "@/components/ui/button";
 
 interface NotesContextReferenceData {
     title: string;
@@ -606,6 +607,22 @@ export default function ReferencePanel(props: ReferencePanelDataProps) {
                   .slice(0, numTeaserSlots - codeDataToShow.length - notesDataToShow.length)
             : [];
 
+    const copyReferencesToClipboard = () => {
+        const allReferences = [
+            ...props.notesReferenceCardData.map(
+                (note) => `- [${note.title}](#)`,
+            ),
+            ...props.onlineReferenceCardData.map(
+                (online) => `- [${online.title}](${online.link})`,
+            ),
+            ...props.codeReferenceCardData.map(
+                (code) => `- [Code Reference](#)`,
+            ),
+        ].join("\n");
+
+        navigator.clipboard.writeText(allReferences);
+    };
+
     return (
         <Sheet>
             <SheetTrigger className="text-balance w-auto justify-start overflow-hidden break-words p-0 bg-transparent border-none text-gray-400 align-middle items-center m-0 inline-flex">
@@ -642,6 +659,14 @@ export default function ReferencePanel(props: ReferencePanelDataProps) {
                 <SheetHeader>
                     <SheetTitle>References</SheetTitle>
                     <SheetDescription>View all references for this response</SheetDescription>
+                    <Button
+                        variant="outline"
+                        onClick={copyReferencesToClipboard}
+                        className="mt-4"
+                    >
+                        <Clipboard className="mr-2" />
+                        Copy References
+                    </Button>
                 </SheetHeader>
                 <div className="flex flex-wrap gap-2 w-auto mt-2">
                     {props.codeReferenceCardData.map((code, index) => {