From fc9523bbb6db1e5487cd76e4ee228eac378024dc Mon Sep 17 00:00:00 2001
From: Harish Mohan Raj <harish@airt.ai>
Date: Fri, 3 Nov 2023 22:19:10 +0530
Subject: [PATCH] Render chat conversations as markdown

---
 main.wasp               | 1 +
 src/client/ChatPage.jsx | 7 ++++---
 src/client/Main.css     | 5 +++++
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/main.wasp b/main.wasp
index 501c809..b96ffd6 100644
--- a/main.wasp
+++ b/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"),
   ],
 }
 
diff --git a/src/client/ChatPage.jsx b/src/client/ChatPage.jsx
index 85d725d..896da8d 100644
--- a/src/client/ChatPage.jsx
+++ b/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>
diff --git a/src/client/Main.css b/src/client/Main.css
index 7b1004f..4ac89b3 100644
--- a/src/client/Main.css
+++ b/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;
+}