From 24cb6d40139c408ae9df521099c26bd2f8ae34b0 Mon Sep 17 00:00:00 2001
From: Daniel Avila <messagedaniel@protonmail.com>
Date: Thu, 6 Apr 2023 18:58:56 -0400
Subject: [PATCH] fix: formatting for user messages

---
 client/src/components/Messages/Message.jsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Messages/Message.jsx b/client/src/components/Messages/Message.jsx
index 6306761751..2ca41b5550 100644
--- a/client/src/components/Messages/Message.jsx
+++ b/client/src/components/Messages/Message.jsx
@@ -9,6 +9,7 @@ import SiblingSwitch from './SiblingSwitch';
 import { fetchById } from '~/utils/fetchers';
 import getIcon from '~/utils/getIcon';
 import { useMessageHandler } from '~/utils/handleSubmit';
+import { cn } from '~/utils/';
 
 import store from '~/store';
 
@@ -137,8 +138,8 @@ export default function Message({
             )}
             <div className="flex flex-grow flex-col gap-3">
               {error ? (
-                <div className="flex flex min-h-[20px] flex-grow flex-col items-start gap-4 gap-2  text-red-500">
-                  <div className="rounded-md border border-red-500 bg-red-500/10 py-2 px-3 text-sm text-gray-600 dark:text-gray-100">
+                <div className="flex flex min-h-[20px] flex-grow flex-col items-start gap-2 gap-4  text-red-500">
+                  <div className="rounded-md border border-red-500 bg-red-500/10 px-3 py-2 text-sm text-gray-600 dark:text-gray-100">
                     {`An error occurred. Please try again in a few moments.\n\nError message: ${text}`}
                   </div>
                 </div>
@@ -171,7 +172,12 @@ export default function Message({
                   </div>
                 </div>
               ) : (
-                <div className="flex min-h-[20px] flex-grow flex-col items-start gap-4 ">
+                <div
+                  className={cn(
+                    'flex min-h-[20px] flex-grow flex-col items-start gap-4 ',
+                    isCreatedByUser ? 'whitespace-pre-wrap' : ''
+                  )}
+                >
                   {/* <div className={`${blinker ? 'result-streaming' : ''} markdown prose dark:prose-invert light w-full break-words`}> */}
                   <div className="markdown prose dark:prose-invert light w-full break-words">
                     {!isCreatedByUser ? (