User message should not render as Markdown

components/Chat/ChatMessage.tsx

@@ -19,6 +19,11 @@ 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]">
+          {message.role === "user" ? (
+            <div className="prose dark:prose-invert whitespace-pre">
+              {message.content}
+            </div>
+          ) : (
             <ReactMarkdown
               remarkPlugins={[remarkGfm]}
               components={{
@@ -33,18 +38,16 @@ export const ChatMessage: FC<Props> = ({ message, lightMode }) => {
                       {...props}
                     />
                   ) : (
-                  <code
+                    <code className={className} {...props}>
-                    className={className}
-                    {...props}
-                  >
                       {children}
                     </code>
                   );
-              }
+                },
               }}
             >
               {message.content}
             </ReactMarkdown>
+          )}
         </div>
       </div>
     </div>