Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-18 09:20:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

🖋️ 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

31
client/src/components/Chat/Messages/Content/Parts/Text.tsx
View file

@ -1,7 +1,10 @@
import { memo, useMemo } from 'react';
import { useChatContext } from '~/Providers';
import { memo, useMemo, ReactElement } from 'react';
import { useRecoilValue } from 'recoil';
import MarkdownLite from '~/components/Chat/Messages/Content/MarkdownLite';
import Markdown from '~/components/Chat/Messages/Content/Markdown';
import { useChatContext } from '~/Providers';
import { cn } from '~/utils';
import store from '~/store';
type TextPartProps = {
text: string;
@ -10,14 +13,32 @@ type TextPartProps = {
showCursor: boolean;
};
type ContentType =
| ReactElement<React.ComponentProps<typeof Markdown>>
| ReactElement<React.ComponentProps<typeof MarkdownLite>>
| ReactElement;
const TextPart = memo(({ text, isCreatedByUser, messageId, showCursor }: TextPartProps) => {
const { isSubmitting, latestMessage } = useChatContext();
const enableUserMsgMarkdown = useRecoilValue(store.enableUserMsgMarkdown);
const showCursorState = useMemo(() => showCursor && isSubmitting, [showCursor, isSubmitting]);
const isLatestMessage = useMemo(
() => messageId === latestMessage?.messageId,
[messageId, latestMessage?.messageId],
);
const content: ContentType = useMemo(() => {
if (!isCreatedByUser) {
return (
<Markdown content={text} showCursor={showCursorState} isLatestMessage={isLatestMessage} />
);
} else if (enableUserMsgMarkdown) {
return <MarkdownLite content={text} />;
} else {
return <>{text}</>;
}
}, [isCreatedByUser, enableUserMsgMarkdown, text, showCursorState, isLatestMessage]);
return (
<div
className={cn(
@ -27,11 +48,7 @@ const TextPart = memo(({ text, isCreatedByUser, messageId, showCursor }: TextPar
isCreatedByUser ? 'whitespace-pre-wrap dark:text-gray-20' : 'dark:text-gray-70',
)}
>
{!isCreatedByUser ? (
<Markdown content={text} showCursor={showCursorState} isLatestMessage={isLatestMessage} />
) : (
<>{text}</>
)}
{content}
</div>
);
});