From e1e1f036a75470c1108ca93759cc02c7d9a9b2de Mon Sep 17 00:00:00 2001
From: pablodanswer <pablo@danswer.ai>
Date: Mon, 3 Jun 2024 18:20:46 -0700
Subject: [PATCH] Remove React Markdown for human messages (#1562)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Remove React Markdown for human messages

* Update globals.css

* add formatting

* formatting

---------

Co-authored-by: “Pablo <“pablo@danswer.ai”>
---
 web/src/app/chat/message/Messages.tsx | 17 ++---------------
 web/src/app/globals.css               |  5 +++++
 2 files changed, 7 insertions(+), 15 deletions(-)

diff --git a/web/src/app/chat/message/Messages.tsx b/web/src/app/chat/message/Messages.tsx
index b80c5b5bf..b188c128e 100644
--- a/web/src/app/chat/message/Messages.tsx
+++ b/web/src/app/chat/message/Messages.tsx
@@ -518,22 +518,9 @@ export const HumanMessage = ({
                   </div>
                 </div>
               ) : typeof content === "string" ? (
-                <ReactMarkdown
-                  className="prose max-w-full"
-                  components={{
-                    a: ({ node, ...props }) => (
-                      <a
-                        {...props}
-                        className="text-blue-500 hover:text-blue-700"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                      />
-                    ),
-                  }}
-                  remarkPlugins={[remarkGfm]}
-                >
+                <div className="flex flex-col preserve-lines prose max-w-full">
                   {content}
-                </ReactMarkdown>
+                </div>
               ) : (
                 content
               )}
diff --git a/web/src/app/globals.css b/web/src/app/globals.css
index 37d92f36a..c810e82cf 100644
--- a/web/src/app/globals.css
+++ b/web/src/app/globals.css
@@ -43,3 +43,8 @@
   width: 8px; /* Vertical scrollbar width */
   height: 8px; /* Horizontal scrollbar height */
 }
+
+/* Used to create alternatie to React Markdown */
+.preserve-lines {
+  white-space: pre-wrap; /* Preserves whitespace and wraps text */
+}