Render chat conversations as markdown

main.wasp

@@ -63,6 +63,7 @@ app chatApp {
     ("node-fetch", "3.3.0"),
     ("react-hook-form", "^7.45.4"),
     ("stripe", "11.15.0"),
+    ("react-markdown", "9.0.0"),
   ],
 }
 

src/client/ChatPage.jsx

@@ -6,6 +6,7 @@ import logout from '@wasp/auth/logout';
 import { useState, Dispatch, SetStateAction } from 'react';
 // import { Chat, Conversation } from '@wasp/entities'
 import { Link } from '@wasp/router'
+import Markdown from 'react-markdown'
 
 import logo from './static/captn-logo.png'
 import createChat from '@wasp/actions/createChat'
@@ -53,9 +54,9 @@ const ConversationsList = ({ conversations }) => {
                     <span className="absolute inline-block" style={{"left": "-15px", "top": "6px", "height":" 45px", "width": "45px"}}>
                         {conversationLogo}
                     </span>
-                    <span className="text-base">
-                        {conversation.content}
-                    </span>
+                    <div className="chat-conversations text-base flex flex-col gap-2">
+                        <Markdown>{conversation.content}</Markdown>
+                    </div>
                 </div>
                 </div>
             </div>

src/client/Main.css

@@ -34,3 +34,8 @@ a {
 a:hover {
   color: rgb(99 102 241 / var(--tw-text-opacity));
 }
+
+.chat-conversations ol, .chat-conversations  ul, .chat-conversations  li{
+  list-style: auto;
+  margin:10px;
+}