Merge pull request #68 from OctopBP/feature/code-highlight

Replace `Code` with `Prism`

Author: Supernova3339

package-lock.json

@@ -25,10 +25,11 @@
   "dependencies": {
     "@emotion/react": "^11.10.6",
     "@emotion/server": "^11.10.0",
-    "@mantine/core": "^6.0.1",
-    "@mantine/hooks": "^6.0.1",
-    "@mantine/next": "^6.0.1",
-    "@mantine/notifications": "^6.0.1",
+    "@mantine/core": "^6.0.17",
+    "@mantine/hooks": "^6.0.17",
+    "@mantine/next": "^6.0.17",
+    "@mantine/notifications": "^6.0.17",
+    "@mantine/prism": "^6.0.17",
     "@tabler/icons-react": "^2.9.0",
     "@tanstack/react-location": "^3.7.4",
     "@types/node": "18.15.0",
@@ -46,6 +47,8 @@
     "next": "13.2.4",
     "openai": "^3.2.1",
     "openai-ext": "^1.2.6",
+    "prism-react-renderer": "^1.3.1",
+    "prismjs": "^1.29.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.8.0",

package.json

@@ -10,7 +10,7 @@ import {
   ThemeIcon,
   Tooltip,
 } from "@mantine/core";
-import { useClipboard } from "@mantine/hooks";
+import { Prism } from "@mantine/prism";
 import { IconCopy, IconUser } from "@tabler/icons-react";
 import { useMemo } from "react";
 import ReactMarkdown from "react-markdown";
@@ -20,9 +20,9 @@ import "../styles/markdown.scss";
 import { CreatePromptModal } from "./CreatePromptModal";
 import { LogoIcon } from "./Logo";
 import { ScrollIntoView } from "./ScrollIntoView";
+import "../utils/prisma-setup";
 
 export function MessageItem({ message }: { message: Message }) {
-  const clipboard = useClipboard({ timeout: 500 });
   const wordCount = useMemo(() => {
     var matches = message.content.match(/[\w\d\’\'-\(\)]+/gi);
     return matches ? matches.length : 0;
@@ -46,29 +46,21 @@ export function MessageItem({ message }: { message: Message }) {
                 table: ({ node, ...props }) => (
                   <Table verticalSpacing="sm" highlightOnHover {...props} />
                 ),
-                code: ({ node, inline, ...props }) =>
-                  inline ? (
+                code: ({ node, inline, className, lang, ...props }) => {
+                  const languageMatch = /language-(\w+)/.exec(className || "");
+                  const language = languageMatch ? languageMatch[1] : undefined;
+
+                  return inline ? (
                     <Code {...props} />
                   ) : (
                     <Box sx={{ position: "relative" }}>
-                      <Code block {...props} />
-                      <CopyButton value={String(props.children)}>
-                        {({ copied, copy }) => (
-                          <Tooltip
-                            label={copied ? "Copied" : "Copy"}
-                            position="left"
-                          >
-                            <ActionIcon
-                              sx={{ position: "absolute", top: 4, right: 4 }}
-                              onClick={copy}
-                            >
-                              <IconCopy opacity={0.4} size={20} />
-                            </ActionIcon>
-                          </Tooltip>
-                        )}
-                      </CopyButton>
+                      <Prism
+                        language={language as any}
+                        children={`${props.children as string}`}
+                      />
                     </Box>
-                  ),
+                  );
+                },
               }}
             />
             {message.role === "assistant" && (