Msg Clipboard to checkmark (optimistic UX) (danny-avila#247)

* revert unintended package-lock.json change

* used default checkmark which is included in project

---------

Co-authored-by: Danny Avila <[email protected]>

Author: techwithanirudh

client/package-lock.json

@@ -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>
   );

client/src/components/Messages/HoverButtons.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