From aa0df8df38ec121feb2d22a5ee7d4d903d31037e Mon Sep 17 00:00:00 2001
From: Adam Dougal <adamdougal@users.noreply.github.com>
Date: Tue, 30 Jan 2024 19:18:26 +0000
Subject: [PATCH] Fix duplicate copy warning alert (#230)

* Fix duplicate copy warning alert

- It was being added to the whole page everytime an answer was returned
- This meant that if **any** content on the page was copied the alert was
  being shown multiple times based on how many answers there had been
- This change will mean the alert will now only be shown when an answer
  is copied and only once

Required by https://github.com/Azure-Samples/chat-with-your-data-solution-accelerator/issues/215

* Address review comments
---
 code/app/frontend/src/components/Answer/Answer.tsx | 13 +++++++++----
 code/app/frontend/src/pages/chat/Chat.tsx          |  1 +
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/code/app/frontend/src/components/Answer/Answer.tsx b/code/app/frontend/src/components/Answer/Answer.tsx
index 6f78a1c70..26222761a 100644
--- a/code/app/frontend/src/components/Answer/Answer.tsx
+++ b/code/app/frontend/src/components/Answer/Answer.tsx
@@ -14,15 +14,19 @@ import supersub from 'remark-supersub'
 interface Props {
     answer: AskResponse;
     onCitationClicked: (citedDocument: Citation) => void;
+    index: number;
 }
 
 export const Answer = ({
     answer,
-    onCitationClicked
+    onCitationClicked,
+    index,
 }: Props) => {
     const [isRefAccordionOpen, { toggle: toggleIsRefAccordionOpen }] = useBoolean(false);
     const filePathTruncationLimit = 50;
 
+    const messageBoxId = "message-" + index;
+
     const parsedAnswer = useMemo(() => parseAnswer(answer), [answer]);
     const [chevronIsExpanded, setChevronIsExpanded] = useState(isRefAccordionOpen);
 
@@ -57,15 +61,16 @@ export const Answer = ({
         const handleCopy = () => {
             alert("Please consider where you paste this content.");
         };
-        document.addEventListener("copy", handleCopy);
+        const messageBox = document.getElementById(messageBoxId);
+        messageBox?.addEventListener("copy", handleCopy);
         return () => {
-            document.removeEventListener("copy", handleCopy);
+            messageBox?.removeEventListener("copy", handleCopy);
         };
     }, []);
 
     return (
         <>
-            <Stack className={styles.answerContainer}>
+            <Stack className={styles.answerContainer} id={messageBoxId}>
                 <Stack.Item grow>
                     <ReactMarkdown
                         remarkPlugins={[remarkGfm, supersub]}
diff --git a/code/app/frontend/src/pages/chat/Chat.tsx b/code/app/frontend/src/pages/chat/Chat.tsx
index b25072741..eb0209936 100644
--- a/code/app/frontend/src/pages/chat/Chat.tsx
+++ b/code/app/frontend/src/pages/chat/Chat.tsx
@@ -302,6 +302,7 @@ const Chat = () => {
                               : [],
                         }}
                         onCitationClicked={(c) => onShowCitation(c)}
+                        index={index}
                       />
                     </div>
                   ) : null}