feat: render messages as markdown

src/components/Message/Message.tsx

@@ -1,4 +1,8 @@
-import Typography from '@mui/material/Typography'
+import { HTMLAttributes } from 'react'
+import Box from '@mui/material/Box'
+import Typography, { TypographyProps } from '@mui/material/Typography'
+import Link, { LinkProps } from '@mui/material/Link'
+import Markdown from 'react-markdown'
 
 import { Message as IMessage, isMessageReceived } from 'models/chat'
 
@@ -7,6 +11,31 @@ export interface MessageProps {
   userId: string
 }
 
+const typographyFactory =
+  (overrides: TypographyProps) => (args: HTMLAttributes<HTMLElement>) => {
+    return <Typography {...args} {...overrides} />
+  }
+
+const linkFactory =
+  (overrides: LinkProps) => (args: HTMLAttributes<HTMLElement>) => {
+    return <Link {...args} {...overrides} />
+  }
+
+const componentMap = {
+  h1: typographyFactory({ variant: 'h1' }),
+  h2: typographyFactory({ variant: 'h2' }),
+  h3: typographyFactory({ variant: 'h3' }),
+  h4: typographyFactory({ variant: 'h4' }),
+  h5: typographyFactory({ variant: 'h5' }),
+  h6: typographyFactory({ variant: 'h6' }),
+  p: typographyFactory({ variant: 'body1' }),
+  a: linkFactory({
+    variant: 'body1',
+    underline: 'always',
+    color: 'primary.light',
+  }),
+}
+
 export const Message = ({ message, userId }: MessageProps) => {
   let backgroundColor: string
 
@@ -20,8 +49,7 @@ export const Message = ({ message, userId }: MessageProps) => {
 
   return (
     <div className="Message block">
-      <Typography
+      <Box
-        variant="body1"
         sx={{
           backgroundColor,
           margin: 0.5,
@@ -32,8 +60,10 @@ export const Message = ({ message, userId }: MessageProps) => {
           wordBreak: 'break-all',
         }}
       >
-        {message.text}
+        <Markdown components={componentMap} linkTarget="_blank">
-      </Typography>
+          {message.text}
+        </Markdown>
+      </Box>
     </div>
   )
 }