Skip to content

Feature: Add copy button to answer UI #2131

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Nov 13, 2024
Merged

Feature: Add copy button to answer UI #2131

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
b88ad05
add-copy-button
jeannotdamoiseaux Nov 8, 2024
9f978ee
Update ptBR/translation.json
jeannotdamoiseaux Nov 13, 2024
d074522
Update fr/translation.json
jeannotdamoiseaux Nov 13, 2024
f73c0b6
Update es/translation.json
jeannotdamoiseaux Nov 13, 2024
60df442
Update da/translation.json
jeannotdamoiseaux Nov 13, 2024
6ec3021
Update nl/translation.json
jeannotdamoiseaux Nov 13, 2024
073d87c
Update ja/translation.json
jeannotdamoiseaux Nov 13, 2024
62a5e6c
Update app/frontend/src/locales/en/translation.json
pamelafox Nov 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 22 additions & 1 deletion app/frontend/src/components/Answer/Answer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -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" }}
Expand Down
4 changes: 3 additions & 1 deletion app/frontend/src/locales/da/translation.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,9 @@
"showSupportingContent": "Vis understøttende indhold",
"speakAnswer": "Afspil svar",
"info": "Info",
"save": "Gem"
"save": "Gem",
"copy": "Kopier svar",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@EMjetrot Can you review these two strings, "Kopier svar" for "Copy", and "Kopieret!" for copied?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@pamelafox - "Kopier svar" is correct, but I would perhaps just say "Kopier" and remove "svar" (eng: answer), since we also don't say "Gem svar", but only "Gem" (eng: save). "Kopieret!" is also correct.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In that case, we'd need to apply this change across all translations for consistency. Personally, I find "Copy answer" a bit more descriptive than just "Copy", but I understand the simplicity of the shorter version as well.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So I checked chatgpt.com as they've got a similar copy button and they only use "Copy", so that's an argument for "Copy".

I think we can safely shorten the romance/european languages based on our own knowledge and what chatgpt.com is using, and I've asked @bnodir to comment about the Japense change since that's where I feel the least confident.

"copied": "Kopieret!"
},
"headerTexts": {
"thoughtProcess": "Tankeproces",
Expand Down
4 changes: 3 additions & 1 deletion app/frontend/src/locales/en/translation.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,9 @@
"showSupportingContent": "Show supporting content",
"speakAnswer": "Speak answer",
"info": "Info",
"save": "Save"
"save": "Save",
"copy": "Copy answer",
"copied": "Copied!"
},

"headerTexts":{
Expand Down
4 changes: 3 additions & 1 deletion app/frontend/src/locales/es/translation.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,9 @@
"showSupportingContent": "Mostrar contenido de soporte",
"speakAnswer": "Hablar respuesta",
"info": "Información",
"save": "Guardar"
"save": "Guardar",
"copy": "Copiar respuesta",
"copied": "¡Copiado!"
},

"headerTexts":{
Expand Down
4 changes: 3 additions & 1 deletion app/frontend/src/locales/fr/translation.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,9 @@
"showSupportingContent": "Montrer le contenu de soutien",
"speakAnswer": "Parler réponse",
"info": "Info",
"save": "Sauvegarder"
"save": "Sauvegarder",
"copy": "Copier la réponse",
"copied": "Copié!"
},

"headerTexts":{
Expand Down
4 changes: 3 additions & 1 deletion app/frontend/src/locales/ja/translation.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,9 @@
"showSupportingContent": "サポート内容の表示",
"speakAnswer": "音声による回答",
"info": "情報",
"save": "保存"
"save": "保存",
"copy": "回答をコピー",
"copied": "コピーしました！"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

},

"headerTexts":{
Expand Down
4 changes: 3 additions & 1 deletion app/frontend/src/locales/nl/translation.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,9 @@
"showSupportingContent": "Ondersteunende inhoud tonen",
"speakAnswer": "Antwoord uitspreken",
"info": "Info",
"save": "Opslaan"
"save": "Opslaan",
"copy": "Kopieer antwoord",
"copied": "Gekopieerd!"
},

"headerTexts": {
Expand Down
4 changes: 3 additions & 1 deletion app/frontend/src/locales/ptBR/translation.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,9 @@
"showSupportingContent": "Mostrar conteúdo de suporte",
"speakAnswer": "Falar a resposta",
"info": "Info",
"save": "Save"
"save": "Save",
"copy": "Copiar resposta",
"copied": "Copiado!"
},

"headerTexts":{
Expand Down