diff --git a/frontend/src/assets/checkmark.svg b/frontend/src/assets/checkmark.svg new file mode 100644 index 0000000..682c29d --- /dev/null +++ b/frontend/src/assets/checkmark.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/assets/copy.svg b/frontend/src/assets/copy.svg index d0da885..846d285 100644 --- a/frontend/src/assets/copy.svg +++ b/frontend/src/assets/copy.svg @@ -1,3 +1,3 @@ - + diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx index 471970a..1901961 100644 --- a/frontend/src/conversation/ConversationBubble.tsx +++ b/frontend/src/conversation/ConversationBubble.tsx @@ -5,6 +5,7 @@ import Alert from './../assets/alert.svg'; import { ReactComponent as Like } from './../assets/like.svg'; import { ReactComponent as Dislike } from './../assets/dislike.svg'; import { ReactComponent as Copy } from './../assets/copy.svg'; +import { ReactComponent as Checkmark } from './../assets/checkmark.svg'; import ReactMarkdown from 'react-markdown'; import copy from 'copy-to-clipboard'; import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'; @@ -28,6 +29,17 @@ const ConversationBubble = forwardRef< ) { const [showFeedback, setShowFeedback] = useState(false); const [openSource, setOpenSource] = useState(null); + const [copied, setCopied] = useState(false); + + const handleCopyClick = (text: string) => { + copy(text); + setCopied(true); + // Reset copied to false after a few seconds + setTimeout(() => { + setCopied(false); + }, 2000); + }; + const List = ({ ordered, children, @@ -140,6 +152,22 @@ const ConversationBubble = forwardRef< +
+ {copied ? ( + + ) : ( + { + handleCopyClick(message); + }} + > + )} +
- copy(message)} - >