🔧 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
This commit is contained in:
Yuichi Oneda 2024-11-16 07:18:56 -08:00 committed by GitHub
parent d9ed161104
commit b5232afcc7
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 9 additions and 3 deletions

View file

@ -97,7 +97,8 @@ const DisplayMessage = ({ text, isCreatedByUser, message, showCursor }: TDisplay
isSubmitting ? 'submitting' : '', isSubmitting ? 'submitting' : '',
showCursorState && !!text.length ? 'result-streaming' : '', showCursorState && !!text.length ? 'result-streaming' : '',
'markdown prose message-content dark:prose-invert light w-full break-words', '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} {content}

View file

@ -45,7 +45,8 @@ const TextPart = memo(({ text, isCreatedByUser, messageId, showCursor }: TextPar
isSubmitting ? 'submitting' : '', isSubmitting ? 'submitting' : '',
showCursorState && !!text.length ? 'result-streaming' : '', showCursorState && !!text.length ? 'result-streaming' : '',
'markdown prose message-content dark:prose-invert light w-full break-words', '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} {content}

View file

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