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/index.css

@@ -12,4 +12,4 @@ body {
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
-}
+}

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,74 +10,82 @@ var Convert = require("ansi-to-html");
 var convert = new Convert({ newline: true });
 
 export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
-  const [hidden, setHidden] = useState(true);
+  const [message,setMessage] = useState("");
-  return (
+  useEffect(() => {
-    <div
+    setMessage(chat.message)
-      className={classNames(
+  },[chat.message])
-        "w-full py-2 pl-2 flex",
+	const [hidden, setHidden] = useState(true);
-        chat.isSend ? "bg-white dark:bg-gray-800 " : "bg-gray-200  dark:bg-gray-700"
+	return (
-      )}
+		<div
-    >
+			className={classNames(
-      <div
+				"w-full py-2 pl-2 flex",
-        className={classNames(
+				chat.isSend
-          "rounded-full w-8 h-8 flex items-center my-3 justify-center",
+					? "bg-white dark:bg-gray-800 "
-          chat.isSend ? "bg-gray-900" : "bg-gray-200"
+					: "bg-gray-200  dark:bg-gray-700"
-        )}
+			)}
-      >
+		>
-        {!chat.isSend && <img className="scale-150" src={AiIcon} />}
+			<div
-        {chat.isSend && <UserIcon className="w-6 h-6 -mb-1 text-gray-200" />}
+				className={classNames(
-      </div>
+					"rounded-full w-8 h-8 flex items-center my-3 justify-center",
-      {!chat.isSend ? (
+					chat.isSend ? "bg-gray-900" : "bg-gray-200"
-        <div className="w-full text-start flex items-center">
+				)}
-          <div className="w-full relative text-start inline-block text-gray-600 text-sm font-normal">
+			>
-            {hidden && chat.thought && chat.thought !== "" && (
+				{!chat.isSend && <img className="scale-150" src={AiIcon} />}
-              <div
+				{chat.isSend && <UserIcon className="w-6 h-6 -mb-1 text-gray-200" />}
-                onClick={() => setHidden((prev) => !prev)}
+			</div>
-                className="absolute -top-1 -left-2 cursor-pointer"
+			{!chat.isSend ? (
-              >
+				<div className="w-full text-start flex items-center">
-                <ChatBubbleOvalLeftEllipsisIcon className="w-5 h-5 animate-bounce dark:text-white" />
+					<div className="w-full relative text-start inline-block text-gray-600 text-sm font-normal">
-              </div>
+						{hidden && chat.thought && chat.thought !== "" && (
-            )}
+							<div
-            {chat.thought && chat.thought !== "" && !hidden && (
+								onClick={() => setHidden((prev) => !prev)}
-              <div
+								className="absolute -top-1 -left-2 cursor-pointer"
-                onClick={() => setHidden((prev) => !prev)}
+							>
-                className=" text-start inline-block rounded-md  h-full border border-gray-300
+								<ChatBubbleOvalLeftEllipsisIcon className="w-5 h-5 animate-bounce dark:text-white" />
+							</div>
+						)}
+						{chat.thought && chat.thought !== "" && !hidden && (
+							<div
+								onClick={() => setHidden((prev) => !prev)}
+								className=" text-start inline-block rounded-md  h-full border border-gray-300
 								bg-gray-100 w-[95%] pb-3 pt-3 px-2 ml-3 cursor-pointer scrollbar-hide overflow-scroll"
-                dangerouslySetInnerHTML={{
+								dangerouslySetInnerHTML={{
-                  __html: convert.toHtml(chat.thought),
+									__html: convert.toHtml(chat.thought),
-                }}
+								}}
-              ></div>
+							></div>
-            )}
+						)}
-            {chat.thought && chat.thought !== "" && !hidden && <br></br>}
+						{chat.thought && chat.thought !== "" && !hidden && <br></br>}
-            <div className="w-full px-4 pb-3 pt-3 pr-8">
+						<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>
-                {chat.files && (
+                <ReactMarkdown className="markdown prose">{message}</ReactMarkdown>
-                  <div className="my-2 w-full">
+                </div>
-                    {chat.files.map((file, index) => {
+								{chat.files && (
-                      return (
+									<div className="my-2 w-full">
-                        <div key={index} className="my-2 w-full">
+										{chat.files.map((file, index) => {
-                          <FileCard
+											return (
-                            fileName={"Generated File"}
+												<div key={index} className="my-2 w-full">
-                            fileType={file.data_type}
+													<FileCard
-                            content={file.data}
+														fileName={"Generated File"}
-                          />
+														fileType={file.data_type}
-                        </div>
+														content={file.data}
-                      );
+													/>
-                    })}
+												</div>
-                  </div>
+											);
-                )}
+										})}
-              </span>
+									</div>
-            </div>
+								)}
-          </div>
+							</div>
-        </div>
+						</div>
-      ) : (
+					</div>
-        <div className="w-full flex items-center">
+				</div>
-          <div className="text-start inline-block px-3 text-sm text-gray-600 dark:text-white">
+			) : (
-            <ReactMarkdown>{chat.message}</ReactMarkdown>
+				<div className="w-full flex items-center">
-          </div>
+					<div className="text-start inline-block px-3 text-sm text-gray-600 dark:text-white">
-        </div>
+						<ReactMarkdown className="markdown prose">{message}</ReactMarkdown>
-      )}
+					</div>
-    </div>
+				</div>
-  );
+			)}
+		</div>
+	);
 }

src/frontend/tailwind.config.js

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