From d22999c37dbba66b59f49135bb500752bf967833 Mon Sep 17 00:00:00 2001
From: Adam Dougal <adamdougal@microsoft.com>
Date: Tue, 23 Jan 2024 12:08:50 +0100
Subject: [PATCH 1/2] 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
---
 code/app/frontend/src/components/Answer/Answer.tsx | 11 +++++++----
 code/app/frontend/src/pages/chat/Chat.tsx          |  1 +
 2 files changed, 8 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..f7705d7e6 100644
--- a/code/app/frontend/src/components/Answer/Answer.tsx
+++ b/code/app/frontend/src/components/Answer/Answer.tsx
@@ -14,11 +14,13 @@ 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;
@@ -57,15 +59,16 @@ export const Answer = ({
         const handleCopy = () => {
             alert("Please consider where you paste this content.");
         };
-        document.addEventListener("copy", handleCopy);
+        var messageBox = document.getElementById("message-" + index);
+        messageBox?.addEventListener("copy", handleCopy);
         return () => {
-            document.removeEventListener("copy", handleCopy);
+            messageBox?.removeEventListener("copy", handleCopy);
         };
     }, []);
 
     return (
         <>
-            <Stack className={styles.answerContainer}>
+            <Stack className={styles.answerContainer} id={"message-" + index}>
                 <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}

From 384833ad3bff87e766cf4b7993a55a0f73960dcd Mon Sep 17 00:00:00 2001
From: Adam Dougal <adamdougal@microsoft.com>
Date: Tue, 30 Jan 2024 15:32:35 +0000
Subject: [PATCH 2/2] Address review comments

---
 code/app/frontend/src/components/Answer/Answer.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

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