Feature: Add copy button to answer UI (#2131)

* add-copy-button

* Update ptBR/translation.json

Co-authored-by: Pamela Fox <[email protected]>

* Update fr/translation.json

Co-authored-by: Pamela Fox <[email protected]>

* Update es/translation.json

Co-authored-by: Pamela Fox <[email protected]>

* Update da/translation.json

* Update nl/translation.json

* Update ja/translation.json

* Update app/frontend/src/locales/en/translation.json

---------

Co-authored-by: Pamela Fox <[email protected]>

Author: jeannotdamoiseaux

app/frontend/src/components/Answer/Answer.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import { Stack, IconButton } from "@fluentui/react";
 import { useTranslation } from "react-i18next";
 import DOMPurify from "dompurify";
@@ -46,13 +46,34 @@ export const Answer = ({
     const parsedAnswer = useMemo(() => parseAnswerToHtml(answer, isStreaming, onCitationClicked), [answer]);
     const { t } = useTranslation();
     const sanitizedAnswerHtml = DOMPurify.sanitize(parsedAnswer.answerHtml);
+    const [copied, setCopied] = useState(false);
+
+    const handleCopy = () => {
+        // Single replace to remove all HTML tags to remove the citations
+        const textToCopy = sanitizedAnswerHtml.replace(/<a [^>]*><sup>\d+<\/sup><\/a>|<[^>]+>/g, "");
+
+        navigator.clipboard
+            .writeText(textToCopy)
+            .then(() => {
+                setCopied(true);
+                setTimeout(() => setCopied(false), 2000);
+            })
+            .catch(err => console.error("Failed to copy text: ", err));
+    };
 
     return (
         <Stack className={`${styles.answerContainer} ${isSelected && styles.selected}`} verticalAlign="space-between">
             <Stack.Item>
                 <Stack horizontal horizontalAlign="space-between">
                     <AnswerIcon />
                     <div>
+                        <IconButton
+                            style={{ color: "black" }}
+                            iconProps={{ iconName: copied ? "CheckMark" : "Copy" }}
+                            title={copied ? t("tooltips.copied") : t("tooltips.copy")}
+                            ariaLabel={copied ? t("tooltips.copied") : t("tooltips.copy")}
+                            onClick={handleCopy}
+                        />
                         <IconButton
                             style={{ color: "black" }}
                             iconProps={{ iconName: "Lightbulb" }}

app/frontend/src/locales/da/translation.json

@@ -59,7 +59,9 @@
         "showSupportingContent": "Vis understøttende indhold",
         "speakAnswer": "Afspil svar",
         "info": "Info",
-        "save": "Gem"
+        "save": "Gem",
+        "copy": "Kopier",
+        "copied": "Kopieret!"
     },
     "headerTexts": {
         "thoughtProcess": "Tankeproces",

app/frontend/src/locales/en/translation.json

@@ -61,7 +61,9 @@
         "showSupportingContent": "Show supporting content",
         "speakAnswer": "Speak answer",
         "info": "Info",
-        "save": "Save"
+        "save": "Save",
+        "copy": "Copy",
+        "copied": "Copied!"
     },
 
     "headerTexts":{

app/frontend/src/locales/es/translation.json

@@ -61,7 +61,9 @@
         "showSupportingContent": "Mostrar contenido de soporte",
         "speakAnswer": "Hablar respuesta",
         "info": "Información",
-        "save": "Guardar"
+        "save": "Guardar",
+        "copy": "Copiar",
+        "copied": "¡Copiado!"
     },
 
     "headerTexts":{

app/frontend/src/locales/fr/translation.json

@@ -61,7 +61,9 @@
         "showSupportingContent": "Montrer le contenu de soutien",
         "speakAnswer": "Parler réponse",
         "info": "Info",
-        "save": "Sauvegarder"
+        "save": "Sauvegarder",
+        "copy": "Copier",
+        "copied": "Copié!"
     },
 
     "headerTexts":{

app/frontend/src/locales/ja/translation.json

@@ -61,7 +61,9 @@
         "showSupportingContent": "サポート内容の表示",
         "speakAnswer": "音声による回答",
         "info": "情報",
-        "save": "保存"
+        "save": "保存",
+        "copy": "コピー",
+        "copied": "コピーしました！"
     },
 
     "headerTexts":{

app/frontend/src/locales/nl/translation.json

@@ -61,7 +61,9 @@
         "showSupportingContent": "Ondersteunende inhoud tonen",
         "speakAnswer": "Antwoord uitspreken",
         "info": "Info",
-        "save": "Opslaan"
+        "save": "Opslaan",
+        "copy": "Kopieer",
+        "copied": "Gekopieerd!"
     },
 
     "headerTexts": {

app/frontend/src/locales/ptBR/translation.json

@@ -61,7 +61,9 @@
         "showSupportingContent": "Mostrar conteúdo de suporte",
         "speakAnswer": "Falar a resposta",
         "info": "Info",
-        "save": "Save"
+        "save": "Save",
+        "copy": "Copiar",
+        "copied": "Copiado!"
     },
 
     "headerTexts":{