app/backend/InputOutputHandler.tsx

@@ -5,7 +5,6 @@ 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 = () => {
@@ -14,7 +13,6 @@ 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)
@@ -201,26 +199,13 @@ 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
@@ -228,7 +213,6 @@ const InputOutputBackend: React.FC = () => {
         onResendClick={handleResendClick}
         onEditClick={handleEditClick}
         onCopyClick={handleCopyClick}
-        isClicked={copyClicked}
       />
       <InputFrontend
         message={inputMessage}

app/components/ConversationFrontend.tsx

@@ -10,11 +10,10 @@ interface ConversationProps {
   onResendClick: () => void;
   onEditClick: () => void;
   onCopyClick: () => void;
-  isClicked:boolean
 }
 
 const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>(
-  ({ messages, onResendClick, onEditClick, onCopyClick, isClicked}, ref: ForwardedRef<HTMLDivElement>) => {
+  ({ messages, onResendClick, onEditClick, onCopyClick }, ref: ForwardedRef<HTMLDivElement>) => {
     const endOfMessagesRef = useRef<HTMLDivElement>(null);
 
     // Auto-scroll to the bottom of the conversation whenever a new message is added
@@ -24,11 +23,6 @@ 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}>
@@ -39,8 +33,8 @@ const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>
             }
             return (
               <div
-              key={index}
+                key={index}
-              className={isUserMessage ? 'user-message' : 'ai-message'}
+                className={isUserMessage ? 'user-message' : 'ai-message'}
               >
                 <p> {message.content}</p>
               </div>
@@ -58,7 +52,6 @@ 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>