From 56a99e34a473c8dbfba26ce6815d33ede67c8062 Mon Sep 17 00:00:00 2001
From: FanisNgv <fanisnigamad@yandex.ru>
Date: Fri, 13 Sep 2024 13:47:15 +0300
Subject: [PATCH] markdown displaying

---
 frontend/package-lock.json                   |  1 +
 frontend/src/app/_components/MessageList.tsx | 10 ++++++++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 2afab5b..5d34f0f 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -5321,6 +5321,7 @@
       "version": "9.0.1",
       "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-9.0.1.tgz",
       "integrity": "sha512-186Gw/vF1uRkydbsOIkcGXw7aHq0sZOCRFFjGrr7b9+nVZg4UfA4enXCaxm4fUzecU38sWfrNDitGhshuU7rdg==",
+      "license": "MIT",
       "dependencies": {
         "@types/hast": "^3.0.0",
         "devlop": "^1.0.0",
diff --git a/frontend/src/app/_components/MessageList.tsx b/frontend/src/app/_components/MessageList.tsx
index 0711455..1c22ca0 100644
--- a/frontend/src/app/_components/MessageList.tsx
+++ b/frontend/src/app/_components/MessageList.tsx
@@ -1,6 +1,6 @@
 import { motion, AnimatePresence } from 'framer-motion';
 import { ScrollArea } from "@/components/ui/scroll-area"
-
+import ReactMarkdown from 'react-markdown';
 
 type Message = {
     id: number;
@@ -29,7 +29,13 @@ export default function MessageList({ messages }: MessageListProps) {
                             <div className={`inline-block px-2 py-3 rounded-lg max-w-[70%] break-words ${
                                 msg.sender === 'user' ? 'bg-[#5d76f7] text-white text-left' : 'bg-gray-300 text-black text-justify'
                             }`}>
-                                {msg.text}
+                                {msg.sender === 'user' ? (
+                                    msg.text
+                                ) : (
+                                    <ReactMarkdown className="markdown-content">
+                                        {msg.text}
+                                    </ReactMarkdown>
+                                )}
                             </div>
                         </motion.div>
                     )