From bf31b1fea0e3caf21ad8f4cb5eda9f282b88f2db Mon Sep 17 00:00:00 2001
From: Anirudh <70373803+techwithanirudh@users.noreply.github.com>
Date: Sun, 14 May 2023 18:30:20 +0530
Subject: [PATCH] Msg Clipboard to checkmark (optimistic UX) (#247)

* revert unintended package-lock.json change

* used default checkmark which is included in project

---------

Co-authored-by: Danny Avila <110412045+danny-avila@users.noreply.github.com>
---
 client/package-lock.json                        | 2 +-
 client/src/components/Messages/HoverButtons.jsx | 8 +++++---
 client/src/components/Messages/Message.jsx      | 9 +++++++--
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/client/package-lock.json b/client/package-lock.json
index 3c1cf95a55..c8c0b27d82 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -20257,4 +20257,4 @@
       "version": "2.0.4"
     }
   }
-}
+}
\ No newline at end of file
diff --git a/client/src/components/Messages/HoverButtons.jsx b/client/src/components/Messages/HoverButtons.jsx
index 5754aa89f4..f280287e7e 100644
--- a/client/src/components/Messages/HoverButtons.jsx
+++ b/client/src/components/Messages/HoverButtons.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import Clipboard from '../svg/Clipboard';
+import CheckMark from '../svg/CheckMark';
 import EditIcon from '../svg/EditIcon';
 import RegenerateIcon from '../svg/RegenerateIcon';
 
@@ -13,6 +14,7 @@ export default function HoverButtons({
   regenerate
 }) {
   const { endpoint, jailbreak = false } = conversation;
+  const [isCopied, setIsCopied] = React.useState(false);
 
   const branchingSupported =
     // azureOpenAI, openAI, chatGPTBrowser support branching, so edit enabled
@@ -59,11 +61,11 @@ export default function HoverButtons({
 
       <button
         className="hover-button rounded-md p-1 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible"
-        onClick={copyToClipboard}
+        onClick={() => copyToClipboard(setIsCopied)}
         type="button"
-        title="copy to clipboard"
+        title={isCopied ? 'Copied to clipboard' : 'Copy to clipboard'}
       >
-        <Clipboard />
+        {isCopied ? <CheckMark /> : <Clipboard />}
       </button>
     </div>
   );
diff --git a/client/src/components/Messages/Message.jsx b/client/src/components/Messages/Message.jsx
index 3093749bde..70d8081c72 100644
--- a/client/src/components/Messages/Message.jsx
+++ b/client/src/components/Messages/Message.jsx
@@ -98,8 +98,13 @@ export default function Message({
     if (!isSubmitting && !message?.isCreatedByUser) regenerate(message);
   };
 
-  const copyToClipboard = () => {
+  const copyToClipboard = (setIsCopied) => {
+    setIsCopied(true);
     copy(message?.text);
+
+    setTimeout(() => {
+      setIsCopied(false);
+    }, 3000);
   };
 
   const clickSearchResult = async () => {
@@ -217,7 +222,7 @@ export default function Message({
               conversation={conversation}
               enterEdit={() => enterEdit()}
               regenerate={() => regenerateMessage()}
-              copyToClipboard={() => copyToClipboard()}
+              copyToClipboard={copyToClipboard}
             />
             <SubRow subclasses="switch-container">
               <SiblingSwitch