feat:Add custom Markdown components to better display Markdown elements, especially code blocks.

frontend/package.json

@@ -22,13 +22,15 @@
     "chakra-react-select": "^4.7.6",
     "form-data": "4.0.0",
     "framer-motion": "10.16.16",
+    "highlight.js": "^11.10.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "7.49.3",
     "react-icons": "5.0.1",
     "react-markdown": "^9.0.1",
     "react-query": "3.39.3",
     "reactflow": "^11.11.1",
+    "rehype-highlight": "^7.0.0",
     "uuid": "^10.0.0",
     "zustand": "4.5.0"
   },

frontend/src/components/Markdown/CopyButton.tsx

@@ -0,0 +1,47 @@
+import { FiCopy, FiCheck } from "react-icons/fi";
+import { useState } from "react";
+import { IconButton, useToast } from "@chakra-ui/react";
+
+const CopyButton = ({ id }: { id: string }) => {
+  const [copied, setCopied] = useState(false);
+  const toast = useToast();
+
+  const onCopy = async () => {
+    try {
+      setCopied(true);
+      const text = document.getElementById(id)?.innerText || "";
+      await navigator.clipboard.writeText(text);
+      toast({
+        title: "Copied to clipboard!",
+        status: "success",
+        duration: 1000,
+        isClosable: true,
+      });
+      setTimeout(() => {
+        setCopied(false);
+      }, 1000);
+    } catch (error) {
+      console.error("Failed to copy text: ", error);
+    }
+  };
+
+  return (
+    <IconButton
+      aria-label={copied ? "Copied" : "Copy"}
+      icon={copied ? <FiCheck size={16} /> : <FiCopy size={16} />}
+      onClick={onCopy}
+      variant="outline"
+      borderRadius="md"
+      size="sm"
+      colorScheme={copied ? "green" : "gray"}
+      transition="all 0.2s"
+      _hover={{
+        bg: "gray.200",
+        dark: { bg: "gray.800" },
+      }}
+      position="relative"
+    />
+  );
+};
+
+export default CopyButton;