improve on markdwon, but image from bot is comming as code block

src/frontend/package-lock.json

@@ -42,6 +42,9 @@
                 "tailwindcss": "^3.2.6",
                 "typescript": "^4.9.5",
                 "web-vitals": "^2.1.4"
+            },
+            "devDependencies": {
+                "@tailwindcss/typography": "^0.5.9"
             }
         },
         "node_modules/@adobe/css-tools": {
@@ -3941,6 +3944,34 @@
                 "tailwindcss": ">=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1"
             }
         },
+        "node_modules/@tailwindcss/typography": {
+            "version": "0.5.9",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.9.tgz",
+            "integrity": "sha512-t8Sg3DyynFysV9f4JDOVISGsjazNb48AeIYQwcL+Bsq5uf4RYL75C1giZ43KISjeDGBaTN3Kxh7Xj/vRSMJUUg==",
+            "dev": true,
+            "dependencies": {
+                "lodash.castarray": "^4.4.0",
+                "lodash.isplainobject": "^4.0.6",
+                "lodash.merge": "^4.6.2",
+                "postcss-selector-parser": "6.0.10"
+            },
+            "peerDependencies": {
+                "tailwindcss": ">=3.0.0 || insiders"
+            }
+        },
+        "node_modules/@tailwindcss/typography/node_modules/postcss-selector-parser": {
+            "version": "6.0.10",
+            "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+            "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+            "dev": true,
+            "dependencies": {
+                "cssesc": "^3.0.0",
+                "util-deprecate": "^1.0.2"
+            },
+            "engines": {
+                "node": ">=4"
+            }
+        },
         "node_modules/@testing-library/dom": {
             "version": "8.20.0",
             "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.20.0.tgz",
@@ -12591,6 +12622,12 @@
             "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
             "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
         },
+        "node_modules/lodash.castarray": {
+            "version": "4.4.0",
+            "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
+            "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
+            "dev": true
+        },
         "node_modules/lodash.debounce": {
             "version": "4.0.8",
             "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -12606,6 +12643,12 @@
             "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
             "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ=="
         },
+        "node_modules/lodash.isplainobject": {
+            "version": "4.0.6",
+            "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+            "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+            "dev": true
+        },
         "node_modules/lodash.memoize": {
             "version": "4.1.2",
             "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",

src/frontend/package.json

@@ -62,5 +62,8 @@
             "last 1 safari version"
         ]
     },
-    "proxy": "http://127.0.0.1:7860"
+    "proxy": "http://127.0.0.1:7860",
+    "devDependencies": {
+        "@tailwindcss/typography": "^0.5.9"
+    }
 }

src/frontend/src/modals/chatModal/chatMessage/index.tsx

@@ -1,5 +1,5 @@
 import { ChatBubbleOvalLeftEllipsisIcon } from "@heroicons/react/24/outline";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { ChatMessageType } from "../../../types/chat";
 import { classNames } from "../../../utils";
 import AiIcon from "../../../assets/Gooey Ring-5s-271px.svg";
@@ -10,12 +10,18 @@ var Convert = require("ansi-to-html");
 var convert = new Convert({ newline: true });
 
 export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
+  const [message,setMessage] = useState("");
+  useEffect(() => {
+    setMessage(chat.message)
+  },[chat.message])
 	const [hidden, setHidden] = useState(true);
 	return (
 		<div
 			className={classNames(
 				"w-full py-2 pl-2 flex",
-        chat.isSend ? "bg-white dark:bg-gray-800 " : "bg-gray-200  dark:bg-gray-700"
+				chat.isSend
+					? "bg-white dark:bg-gray-800 "
+					: "bg-gray-200  dark:bg-gray-700"
 			)}
 		>
 			<div
@@ -50,8 +56,10 @@ export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
 						)}
 						{chat.thought && chat.thought !== "" && !hidden && <br></br>}
 						<div className="w-full px-4 pb-3 pt-3 pr-8">
-              <span className="dark:text-white">
+							<div className="dark:text-white">
-              <ReactMarkdown>{chat.message}</ReactMarkdown>
+                <div>
+                <ReactMarkdown className="markdown prose">{message}</ReactMarkdown>
+                </div>
 								{chat.files && (
 									<div className="my-2 w-full">
 										{chat.files.map((file, index) => {
@@ -67,14 +75,14 @@ export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
 										})}
 									</div>
 								)}
-              </span>
+							</div>
 						</div>
 					</div>
 				</div>
 			) : (
 				<div className="w-full flex items-center">
 					<div className="text-start inline-block px-3 text-sm text-gray-600 dark:text-white">
-            <ReactMarkdown>{chat.message}</ReactMarkdown>
+						<ReactMarkdown className="markdown prose">{message}</ReactMarkdown>
 					</div>
 				</div>
 			)}

src/frontend/tailwind.config.js

@@ -73,6 +73,6 @@ module.exports = {
         }
       }
     })
-    }),require('@tailwindcss/line-clamp')
+    }),require('@tailwindcss/line-clamp'),require('@tailwindcss/typography'),
   ],
 };