copy feedback

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}