Add highlight color when code is copied

Added highlight when clicking copy for the syntax code #4
jared-yu-hcltech · Sep 13, 2024 · 456737e · 456737e
1 parent 3047dfb
commit 456737e
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/client/src/routes/chatPage/ChatPage.jsx b/client/src/routes/chatPage/ChatPage.jsx
@@ -16,6 +16,7 @@ const ChatPage = () => {
   const chatId = path.split("/").pop();
 
   const [currentModel, setCurrentModel] = useState('gpt-4o');
+  const [copied, setCopied] = useState(false);
 
   const { isPending, error, data } = useQuery({
     queryKey: ["chat", chatId],
@@ -29,6 +30,8 @@ const ChatPage = () => {
 
   const handleCopy = (text) => {
     navigator.clipboard.writeText(text).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000); // Reset after 2 seconds
     });
   };
 
@@ -62,7 +65,12 @@ const ChatPage = () => {
           >
             {codeString}
           </SyntaxHighlighter>
-          <button className="copy-button" onClick={() => handleCopy(codeString)}>Copy</button>
+          <button
+            className={`copy-button ${copied ? 'copied' : ''}`}
+            onClick={() => handleCopy(codeString)}
+          >
+            Copy
+          </button>
         </div>
       ) : (
         <code className={className} {...props}>
@@ -124,4 +132,4 @@ const ChatPage = () => {
   );
 };
 
-export default ChatPage;
+export default ChatPage;
diff --git a/client/src/routes/chatPage/chatPage.css b/client/src/routes/chatPage/chatPage.css
@@ -76,8 +76,14 @@
   border-radius: 4px;
   font-size: 14px;
   display: none;
+  transition: background-color 0.3s ease;
 }
 
 .custom-code-block-wrapper:hover .copy-button {
   display: block;
 }
+
+.copy-button.copied {
+  background-color: #007bff;
+  color: white;
+}