add markdown formatting

package.json

@@ -8,6 +8,7 @@
     "build": "parcel build"
   },
   "devDependencies": {
+    "@parcel/transformer-sass": "^2.8.3",
     "@types/downloadjs": "^1.4.3",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
@@ -40,6 +41,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.8.0",
+    "react-markdown": "^8.0.6",
     "typescript": "4.9.5"
   }
 }

src/components/App.tsx

@@ -46,6 +46,7 @@ export function App() {
         <MantineProvider
           withGlobalStyles
           withNormalizeCSS
+          withCSSVariables
           theme={{
             colorScheme,
             primaryColor: "teal",

src/components/Layout.tsx

@@ -68,6 +68,7 @@ export function Layout() {
 
   return (
     <AppShell
+      className={`${colorScheme}-theme`}
       navbarOffsetBreakpoint="sm"
       navbar={
         <Navbar width={{ md: 300 }} hiddenBreakpoint="md" hidden={!opened}>
@@ -101,7 +102,7 @@ export function Layout() {
                   size="sm"
                   color={theme.colors.gray[6]}
                   className="app-region-no-drag"
-                  sx={{ position: "absolute", right: 16 }}
+                  sx={{ position: "fixed", right: 16 }}
                 />
               </MediaQuery>
             </Box>
@@ -253,7 +254,7 @@ export function Layout() {
           size="sm"
           color={theme.colors.gray[6]}
           className="app-region-no-drag"
-          sx={{ position: "absolute", top: 16, right: 16, zIndex: 100 }}
+          sx={{ position: "fixed", top: 16, right: 16, zIndex: 100 }}
         />
       </MediaQuery>
       <Outlet />

src/components/MessageItem.tsx

@@ -1,15 +1,9 @@
-import {
-  ActionIcon,
-  Box,
-  Card,
-  Flex,
-  Text,
-  ThemeIcon,
-  Tooltip,
-} from "@mantine/core";
+import { ActionIcon, Box, Card, Flex, ThemeIcon, Tooltip } from "@mantine/core";
 import { useClipboard } from "@mantine/hooks";
 import { IconCopy, IconUser } from "@tabler/icons-react";
+import ReactMarkdown from "react-markdown";
 import { Message } from "../db";
+import "../styles/markdown.scss";
 import { CreatePromptModal } from "./CreatePromptModal";
 import { LogoIcon } from "./Logo";
 
@@ -28,9 +22,9 @@ export function MessageItem({ message }: { message: Message }) {
             </ThemeIcon>
           )}
           {message.role === "assistant" && <LogoIcon style={{ height: 32 }} />}
-          <Text size="md" sx={{ flex: 1, whiteSpace: "pre-wrap" }}>
-            {message.content}
-          </Text>
+          <Box sx={{ flex: 1 }} className="markdown">
+            <ReactMarkdown children={message.content} />
+          </Box>
           <Box>
             <CreatePromptModal content={message.content} />
             <Tooltip

src/styles/markdown.scss

@@ -0,0 +1,32 @@
+.markdown {
+  pre, p, ul, ol, blockquote {
+    &:first-child {
+      margin-top: 0;
+    }
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  pre {
+    padding: 8px 12px;
+    border-radius: 8px;
+  }
+}
+
+.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);
+    }
+  }
+}