Processed markdown

trustgraph-ai · Sep 15, 2024 · 280169f · 280169f
1 parent 30676c2
commit 280169f
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 3 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "@mui/icons-material": "^6.0.1",
     "@mui/material": "^6.1.0",
     "@redux-devtools/extension": "^3.3.0",
+    "mui-markdown": "^1.2.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-use-websocket": "^4.8.1",

diff --git a/src/control-panel/ChatMessage.tsx b/src/control-panel/ChatMessage.tsx
@@ -5,6 +5,7 @@ import Grid from '@mui/material/Grid2';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import Typography from '@mui/material/Typography';
+import { MuiMarkdown } from 'mui-markdown';
 
 import { Message } from '../state/MessageStore';
 
@@ -25,7 +26,9 @@ const MessageCard : React.FC<{
               {message.role}
             </Typography>
             <Typography variant="body2">
-              {message.text}
+                <MuiMarkdown>
+                    {message.text}
+                </MuiMarkdown>
             </Typography>
           </CardContent>
         </Card>
@@ -42,8 +45,8 @@ const ChatMessage : React.FC<MessageProps> =
                 <Grid size={10}>
                     <MessageCard
                         message={message}
-                        bg="text.primary"
-                        fg="white"
+                        bg="#f0f8ff"
+                        fg="text.primary"
                     />
                 </Grid>
                 <Grid size={2}>