add copy button for code

src/components/App.tsx

@@ -93,6 +93,17 @@ export function App() {
                   },
                 },
               },
+              Code: {
+                styles: (theme) => ({
+                  root: {
+                    fontSize: theme.fontSizes.sm,
+                    backgroundColor:
+                      theme.colorScheme == "dark"
+                        ? theme.colors.dark[7]
+                        : theme.colors.gray[1],
+                  },
+                }),
+              },
             },
           }}
         >

src/components/MessageItem.tsx

@@ -2,6 +2,8 @@ import {
   ActionIcon,
   Box,
   Card,
+  Code,
+  CopyButton,
   Flex,
   Table,
   Text,
@@ -41,9 +43,38 @@ export function MessageItem({ message }: { message: Message }) {
               children={message.content}
               remarkPlugins={[remarkGfm]}
               components={{
-                table: (props) => (
+                table: ({ node, ...props }) => (
                   <Table verticalSpacing="sm" highlightOnHover {...props} />
                 ),
+                code: ({ node, inline, ...props }) =>
+                  inline ? (
+                    <Code {...props} />
+                  ) : (
+                    <Box sx={{ position: "relative" }}>
+                      <Code block {...props} />
+                      <CopyButton
+                        value={
+                          typeof props.children === "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.5} size={20} />
+                            </ActionIcon>
+                          </Tooltip>
+                        )}
+                      </CopyButton>
+                    </Box>
+                  ),
               }}
             />
             {message.role === "assistant" && (

src/styles/markdown.scss

@@ -7,11 +7,6 @@
       margin-bottom: 0;
     }
   }
-  pre {
-    overflow-x: auto;
-    padding: 8px 12px;
-    border-radius: 8px;
-  }
   ul {
     padding-left: 20px;
   }
@@ -19,21 +14,3 @@
     padding-left: 4px;
   }
 }
-
-.dark-theme {
-  .markdown {
-    pre {
-      background-color: var(--mantine-color-dark-7);
-        color: var(--mantine-color-white);
-    }
-  }
-}
-
-.light-theme {
-  .markdown {
-    pre {
-      background-color: var(--mantine-color-gray-1);
-      color: var(--mantine-color-dark-4);
-    }
-  }
-}