Revert "Update AssistantMessage.tsx"

This reverts commit fa13641.
IndrajeetPatil · Oct 11, 2024 · 957926f · 957926f
1 parent fa13641
commit 957926f
Showing 1 changed file with 64 additions and 66 deletions.
diff --git a/frontend/components/messages/AssistantMessage.tsx b/frontend/components/messages/AssistantMessage.tsx
@@ -5,6 +5,7 @@ import {
   vs,
   vscDarkPlus,
 } from "react-syntax-highlighter/dist/esm/styles/prism";
+
 import FileCopyIcon from "@mui/icons-material/FileCopy";
 import SmartToyIcon from "@mui/icons-material/SmartToy";
 import {
@@ -16,71 +17,6 @@ import {
   useTheme,
 } from "@mui/material";
 
-const CodeBlock: React.FC<{
-  inline?: boolean;
-  className?: string;
-  children?: React.ReactNode;
-}> = ({ inline, className, children }) => {
-  const [codeCopied, setCodeCopied] = useState<string | null>(null);
-  const theme = useTheme();
-
-  const match = /language-(\w+)/.exec(className ?? "");
-  const codeContent = String(children).replace(/\n$/, "");
-
-  const handleCodeCopy = (code: string) => {
-    navigator.clipboard.writeText(code);
-    setCodeCopied(code);
-    setTimeout(() => setCodeCopied(null), 2000);
-  };
-
-  if (!inline && match) {
-    return (
-      <Box position="relative" sx={{ mt: 2 }}>
-        <SyntaxHighlighter
-          style={theme.palette.mode === "dark" ? vscDarkPlus : vs}
-          language={match[1]}
-          PreTag="div"
-        >
-          {codeContent}
-        </SyntaxHighlighter>
-        <Tooltip title={codeCopied === codeContent ? "Copied!" : "Copy code"}>
-          <IconButton
-            onClick={() => handleCodeCopy(codeContent)}
-            sx={{
-              position: "absolute",
-              top: 4,
-              right: 4,
-              backgroundColor:
-                theme.palette.mode === "dark" ? "#4caf50" : "#ff9800",
-              color: theme.palette.common.white,
-              fontSize: 18,
-              "&:hover": {
-                backgroundColor:
-                  theme.palette.mode === "dark" ? "#45a049" : "#e65100",
-              },
-            }}
-          >
-            <FileCopyIcon fontSize="small" />
-          </IconButton>
-        </Tooltip>
-      </Box>
-    );
-  }
-
-  return (
-    <code
-      style={{
-        backgroundColor: theme.palette.mode === "dark" ? "#2d2d2d" : "#f5f5f5",
-        borderRadius: "4px",
-        padding: "0 4px",
-        color: theme.palette.mode === "dark" ? "#e0e0e0" : "inherit",
-      }}
-    >
-      {children}
-    </code>
-  );
-};
-
 interface AssistantMessageProps {
   content: string;
   isFirstMessage: boolean;
@@ -91,6 +27,7 @@ const AssistantMessage: React.FC<AssistantMessageProps> = ({
   isFirstMessage,
 }) => {
   const [copied, setCopied] = useState(false);
+  const [codeCopied, setCodeCopied] = useState<string | null>(null);
   const theme = useTheme();
 
   const handleCopy = (text: string) => {
@@ -99,8 +36,69 @@ const AssistantMessage: React.FC<AssistantMessageProps> = ({
     setTimeout(() => setCopied(false), 2000);
   };
 
+  const handleCodeCopy = (code: string) => {
+    navigator.clipboard.writeText(code);
+    setCodeCopied(code);
+    setTimeout(() => setCodeCopied(null), 2000);
+  };
+
   const renderers = {
-    code: CodeBlock,
+    code({
+      inline,
+      className,
+      children,
+    }: {
+      inline?: boolean;
+      className?: string;
+      children?: React.ReactNode;
+    }): React.JSX.Element {
+      const match = /language-(\w+)/.exec(className ?? "");
+      const codeContent = String(children).replace(/\n$/, "");
+
+      return !inline && match ? (
+        <Box position="relative" sx={{ mt: 2 }}>
+          <SyntaxHighlighter
+            style={theme.palette.mode === "dark" ? vscDarkPlus : vs}
+            language={match[1]}
+            PreTag="div"
+          >
+            {codeContent}
+          </SyntaxHighlighter>
+          <Tooltip title={codeCopied === codeContent ? "Copied!" : "Copy code"}>
+            <IconButton
+              onClick={() => handleCodeCopy(codeContent)}
+              sx={{
+                position: "absolute",
+                top: 4,
+                right: 4,
+                backgroundColor:
+                  theme.palette.mode === "dark" ? "#4caf50" : "#ff9800",
+                color: theme.palette.common.white,
+                fontSize: 18,
+                "&:hover": {
+                  backgroundColor:
+                    theme.palette.mode === "dark" ? "#45a049" : "#e65100",
+                },
+              }}
+            >
+              <FileCopyIcon fontSize="small" />
+            </IconButton>
+          </Tooltip>
+        </Box>
+      ) : (
+        <code
+          style={{
+            backgroundColor:
+              theme.palette.mode === "dark" ? "#2d2d2d" : "#f5f5f5",
+            borderRadius: "4px",
+            padding: "0 4px",
+            color: theme.palette.mode === "dark" ? "#e0e0e0" : "inherit",
+          }}
+        >
+          {children}
+        </code>
+      );
+    },
   };
 
   return (