app/backend/InputOutputHandler.tsx

@@ -5,6 +5,7 @@ import InputFrontend from "../components/InputFrontend";
 import VoiceSend from "./voice_backend"
 import { AudioRecorder } from "./AudioRecorder";
 import axios from "axios";
+import { resolve } from "path";
 
 
 const InputOutputBackend: React.FC = () => {
@@ -13,6 +14,7 @@ const InputOutputBackend: React.FC = () => {
     content: string
   }
 
+  const [copyClicked, setCopyClicked] = useState(false)
   const [accessToken, setAccessToken] = useState("")
   const postWorkerRef = useRef<Worker | null>(null)
   const getWorkerRef = useRef<Worker | null>(null)
@@ -199,13 +201,26 @@ const InputOutputBackend: React.FC = () => {
   }
 
   const handleCopyClick = async () => {
+    setCopyClicked(false)
     try {
       await navigator.clipboard.writeText(messages[messages.length - 1]['content']);
+      fadeCopyText()
     } catch (err) {
       console.error('Failed to copy: ', err);
     }
   }
 
+  const wait = (time: number) => {
+    return new Promise(resolve => setTimeout(resolve, time));
+  }
+
+  const fadeCopyText = async () => {
+    setCopyClicked(true)
+    await wait(1000)
+    setCopyClicked(false)
+  }
+  
+
   return (
     <div>
       <ConversationFrontend
@@ -213,6 +228,7 @@ const InputOutputBackend: React.FC = () => {
         onResendClick={handleResendClick}
         onEditClick={handleEditClick}
         onCopyClick={handleCopyClick}
+        isClicked={copyClicked}
       />
       <InputFrontend
         message={inputMessage}

app/components/ConversationFrontend.tsx

@@ -10,10 +10,11 @@ interface ConversationProps {
   onResendClick: () => void;
   onEditClick: () => void;
   onCopyClick: () => void;
+  isClicked:boolean
 }
 
 const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>(
-  ({ messages, onResendClick, onEditClick, onCopyClick }, ref: ForwardedRef<HTMLDivElement>) => {
+  ({ messages, onResendClick, onEditClick, onCopyClick, isClicked}, ref: ForwardedRef<HTMLDivElement>) => {
     const endOfMessagesRef = useRef<HTMLDivElement>(null);
 
     // Auto-scroll to the bottom of the conversation whenever a new message is added
@@ -23,6 +24,11 @@ const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>
       }
     }, [messages]); // Triggers the effect whenever the 'messages' array changes
 
+    useEffect(() => {
+      console.log(isClicked);
+      
+    },[isClicked])
+  
     return (
       <div className="output">
         <div className="conversation resize" id="conversation" ref={ref}>
@@ -52,6 +58,7 @@ const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>
             <button type="button" onClick={onCopyClick}>
               <img src="/img/copy.svg" alt="copy" />
             </button>
+            <p style={{opacity:isClicked?"1":"0", transition:"all 0.3s ease-in-out"}}>Copied!</p>
           </div>
         </div>
       </div>