🔧 Fix: Excessive Line Spacing in Markdown-rendered User Messages (#4718)

* fix: Excessive Line Spacing in User-Created Messages

* fix: Add whitespace-pre-wrap if user message is not markdown

Author: ohneda

client/src/components/Chat/Messages/Content/MessageContent.tsx

@@ -97,7 +97,8 @@ const DisplayMessage = ({ text, isCreatedByUser, message, showCursor }: TDisplay
           isSubmitting ? 'submitting' : '',
           showCursorState && !!text.length ? 'result-streaming' : '',
           'markdown prose message-content dark:prose-invert light w-full break-words',
-          isCreatedByUser ? 'whitespace-pre-wrap dark:text-gray-20' : 'dark:text-gray-100',
+          isCreatedByUser && !enableUserMsgMarkdown && 'whitespace-pre-wrap',
+          isCreatedByUser ? 'dark:text-gray-20' : 'dark:text-gray-100',
         )}
       >
         {content}

client/src/components/Chat/Messages/Content/Parts/Text.tsx

@@ -45,7 +45,8 @@ const TextPart = memo(({ text, isCreatedByUser, messageId, showCursor }: TextPar
         isSubmitting ? 'submitting' : '',
         showCursorState && !!text.length ? 'result-streaming' : '',
         'markdown prose message-content dark:prose-invert light w-full break-words',
-        isCreatedByUser ? 'whitespace-pre-wrap dark:text-gray-20' : 'dark:text-gray-70',
+        isCreatedByUser && !enableUserMsgMarkdown && 'whitespace-pre-wrap',
+        isCreatedByUser ? 'dark:text-gray-20' : 'dark:text-gray-70',
       )}
     >
       {content}

client/src/components/Chat/Messages/Content/SearchContent.tsx

@@ -1,12 +1,15 @@
 import { Suspense } from 'react';
+import { useRecoilValue } from 'recoil';
 import type { TMessage, TMessageContentParts } from 'librechat-data-provider';
 import { UnfinishedMessage } from './MessageContent';
 import { DelayedRender } from '~/components/ui';
 import MarkdownLite from './MarkdownLite';
 import { cn } from '~/utils';
+import store from '~/store';
 import Part from './Part';
 
 const SearchContent = ({ message }: { message: TMessage }) => {
+  const enableUserMsgMarkdown = useRecoilValue(store.enableUserMsgMarkdown);
   const { messageId } = message;
   if (Array.isArray(message.content) && message.content.length > 0) {
     return (
@@ -43,7 +46,8 @@ const SearchContent = ({ message }: { message: TMessage }) => {
     <div
       className={cn(
         'markdown prose dark:prose-invert light w-full break-words',
-        message.isCreatedByUser ? 'whitespace-pre-wrap dark:text-gray-20' : 'dark:text-gray-70',
+        message.isCreatedByUser && !enableUserMsgMarkdown && 'whitespace-pre-wrap',
+        message.isCreatedByUser ? 'dark:text-gray-20' : 'dark:text-gray-70',
       )}
       dir="auto"
     >