From 0f346a808ecaa3f55a95455df3683361cd5cb4b5 Mon Sep 17 00:00:00 2001
From: Xiangxuan Liu <xiangxuan.liu@rightcapital.com>
Date: Sun, 19 Mar 2023 19:37:38 +0800
Subject: [PATCH] User message should not render as Markdown

---
 components/Chat/ChatMessage.tsx | 55 +++++++++++++++++----------------
 1 file changed, 29 insertions(+), 26 deletions(-)

diff --git a/components/Chat/ChatMessage.tsx b/components/Chat/ChatMessage.tsx
index 319f7df..271d752 100644
--- a/components/Chat/ChatMessage.tsx
+++ b/components/Chat/ChatMessage.tsx
@@ -19,32 +19,35 @@ export const ChatMessage: FC<Props> = ({ message, lightMode }) => {
         <div className="mr-1 sm:mr-2 font-bold min-w-[40px]">{message.role === "assistant" ? "AI:" : "You:"}</div>
 
         <div className="prose dark:prose-invert mt-[-2px]">
-          <ReactMarkdown
-            remarkPlugins={[remarkGfm]}
-            components={{
-              code({ node, inline, className, children, ...props }) {
-                const match = /language-(\w+)/.exec(className || "");
-                return !inline && match ? (
-                  <CodeBlock
-                    key={Math.random()}
-                    language={match[1]}
-                    value={String(children).replace(/\n$/, "")}
-                    lightMode={lightMode}
-                    {...props}
-                  />
-                ) : (
-                  <code
-                    className={className}
-                    {...props}
-                  >
-                    {children}
-                  </code>
-                );
-              }
-            }}
-          >
-            {message.content}
-          </ReactMarkdown>
+          {message.role === "user" ? (
+            <div className="prose dark:prose-invert whitespace-pre">
+              {message.content}
+            </div>
+          ) : (
+            <ReactMarkdown
+              remarkPlugins={[remarkGfm]}
+              components={{
+                code({ node, inline, className, children, ...props }) {
+                  const match = /language-(\w+)/.exec(className || "");
+                  return !inline && match ? (
+                    <CodeBlock
+                      key={Math.random()}
+                      language={match[1]}
+                      value={String(children).replace(/\n$/, "")}
+                      lightMode={lightMode}
+                      {...props}
+                    />
+                  ) : (
+                    <code className={className} {...props}>
+                      {children}
+                    </code>
+                  );
+                },
+              }}
+            >
+              {message.content}
+            </ReactMarkdown>
+          )}
         </div>
       </div>
     </div>