From 2d1139e3d2a2f1aa54b5cdb417d0e8532e2d08ab Mon Sep 17 00:00:00 2001
From: Jing Hua <tohjinghua123@gmail.com>
Date: Sat, 25 Mar 2023 14:17:39 +0800
Subject: [PATCH] feat: message copy button

fixes #94, fixes #20
---
 .../ChatContent/Message/MessageContent.tsx    | 29 +++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/src/components/Chat/ChatContent/Message/MessageContent.tsx b/src/components/Chat/ChatContent/Message/MessageContent.tsx
index c5e8ddb..ebe1f80 100644
--- a/src/components/Chat/ChatContent/Message/MessageContent.tsx
+++ b/src/components/Chat/ChatContent/Message/MessageContent.tsx
@@ -19,6 +19,7 @@ import TickIcon from '@icon/TickIcon';
 import CrossIcon from '@icon/CrossIcon';
 import RefreshIcon from '@icon/RefreshIcon';
 import DownChevronArrow from '@icon/DownChevronArrow';
+import CopyIcon from '@icon/CopyIcon';
 
 import useSubmit from '@hooks/useSubmit';
 
@@ -126,6 +127,10 @@ const ContentView = React.memo(
       handleSubmit();
     };
 
+    const handleCopy = () => {
+      navigator.clipboard.writeText(content);
+    };
+
     return (
       <>
         <div className='markdown prose w-full break-words dark:prose-invert dark share-gpt-message'>
@@ -167,6 +172,7 @@ const ContentView = React.memo(
                 <DownButton onClick={handleMoveDown} />
               )}
 
+              <CopyButton onClick={handleCopy} />
               <EditButton setIsEdit={setIsEdit} />
               <DeleteButton setIsDelete={setIsDelete} />
             </>
@@ -279,6 +285,7 @@ const UpButton = ({
     />
   );
 };
+
 const RefreshButton = ({
   onClick,
 }: {
@@ -286,6 +293,28 @@ const RefreshButton = ({
 }) => {
   return <MessageButton icon={<RefreshIcon />} onClick={onClick} />;
 };
+
+const CopyButton = ({
+  onClick,
+}: {
+  onClick: React.MouseEventHandler<HTMLButtonElement>;
+}) => {
+  const [isCopied, setIsCopied] = useState<boolean>(false);
+
+  return (
+    <MessageButton
+      icon={isCopied ? <TickIcon /> : <CopyIcon />}
+      onClick={(e) => {
+        onClick(e);
+        setIsCopied(true);
+        window.setTimeout(() => {
+          setIsCopied(false);
+        }, 3000);
+      }}
+    />
+  );
+};
+
 const EditView = ({
   content,
   setIsEdit,