Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-01-18 08:25:30 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

🖋️ feat: Add option to render User Messages as Markdown (#4170)

Browse source
This commit is contained in:
Danny Avila 2024-09-20 20:29:42 -04:00 • committed by GitHub
parent 42b7373ddc
commit be44caaab1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 94 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

23
client/src/components/Chat/Messages/Content/MessageContent.tsx
View file

@ -1,15 +1,18 @@
import { Fragment, Suspense, useMemo } from 'react';
import { useRecoilValue } from 'recoil';
import type { TMessage, TResPlugin } from 'librechat-data-provider';
import type { TMessageContentProps, TDisplayProps } from '~/common';
import Plugin from '~/components/Messages/Content/Plugin';
import Error from '~/components/Messages/Content/Error';
import { DelayedRender } from '~/components/ui';
import { useChatContext } from '~/Providers';
import MarkdownLite from './MarkdownLite';
import EditMessage from './EditMessage';
import { useLocalize } from '~/hooks';
import Container from './Container';
import Markdown from './Markdown';
import { cn } from '~/utils';
import store from '~/store';
export const ErrorMessage = ({
text,
@ -64,9 +67,9 @@ export const ErrorMessage = ({
);
};
// Display Message Component
const DisplayMessage = ({ text, isCreatedByUser, message, showCursor }: TDisplayProps) => {
const { isSubmitting, latestMessage } = useChatContext();
const enableUserMsgMarkdown = useRecoilValue(store.enableUserMsgMarkdown);
const showCursorState = useMemo(
() => showCursor === true && isSubmitting,
[showCursor, isSubmitting],
@ -75,6 +78,18 @@ const DisplayMessage = ({ text, isCreatedByUser, message, showCursor }: TDisplay
() => message.messageId === latestMessage?.messageId,
[message.messageId, latestMessage?.messageId],
);
let content: React.ReactElement;
if (!isCreatedByUser) {
content = (
<Markdown content={text} showCursor={showCursorState} isLatestMessage={isLatestMessage} />
);
} else if (enableUserMsgMarkdown) {
content = <MarkdownLite content={text} />;
} else {
content = <>{text}</>;
}
return (
<Container message={message}>
<div
@ -85,11 +100,7 @@ const DisplayMessage = ({ text, isCreatedByUser, message, showCursor }: TDisplay
isCreatedByUser ? 'whitespace-pre-wrap dark:text-gray-20' : 'dark:text-gray-100',
)}
>
{!isCreatedByUser ? (
<Markdown content={text} showCursor={showCursorState} isLatestMessage={isLatestMessage} />
) : (
<>{text}</>
)}
{content}
</div>
</Container>
);