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

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

10
client/src/components/Nav/SettingsTabs/General/General.tsx
View file

@ -1,9 +1,10 @@
import { useRecoilState } from 'recoil';
import Cookies from 'js-cookie';
import React, { useContext, useCallback, useRef } from 'react';
import React, { useContext, useCallback } from 'react';
import type { TDangerButtonProps } from '~/common';
import { ThemeContext, useLocalize } from '~/hooks';
import UserMsgMarkdownSwitch from './UserMsgMarkdownSwitch';
import HideSidePanelSwitch from './HideSidePanelSwitch';
import { ThemeContext, useLocalize } from '~/hooks';
import AutoScrollSwitch from './AutoScrollSwitch';
import ArchivedChats from './ArchivedChats';
import { Dropdown } from '~/components/ui';
@ -123,8 +124,6 @@ function General() {
const [langcode, setLangcode] = useRecoilState(store.lang);
const contentRef = useRef(null);
const changeTheme = useCallback(
(value: string) => {
setTheme(value);
@ -156,6 +155,9 @@ function General() {
<div className="border-b border-border-medium pb-3 last-of-type:border-b-0">
<LangSelector langcode={langcode} onChange={changeLang} />
</div>
<div className="border-b border-border-medium pb-3 last-of-type:border-b-0">
<UserMsgMarkdownSwitch />
</div>
<div className="border-b border-border-medium pb-3 last-of-type:border-b-0">
<AutoScrollSwitch />
</div>

35
client/src/components/Nav/SettingsTabs/General/UserMsgMarkdownSwitch.tsx Normal file
View file

@ -0,0 +1,35 @@
import { useRecoilState } from 'recoil';
import { Switch } from '~/components/ui';
import { useLocalize } from '~/hooks';
import store from '~/store';
export default function UserMsgMarkdownSwitch({
onCheckedChange,
}: {
onCheckedChange?: (value: boolean) => void;
}) {
const localize = useLocalize();
const [enableUserMsgMarkdown, setEnableUserMsgMarkdown] = useRecoilState<boolean>(
store.enableUserMsgMarkdown,
);
const handleCheckedChange = (value: boolean) => {
setEnableUserMsgMarkdown(value);
if (onCheckedChange) {
onCheckedChange(value);
}
};
return (
<div className="flex items-center justify-between">
<div> {localize('com_nav_user_msg_markdown')} </div>
<Switch
id="enableUserMsgMarkdown"
checked={enableUserMsgMarkdown}
onCheckedChange={handleCheckedChange}
className="ml-4 mt-2 ring-ring-primary"
data-testid="enableUserMsgMarkdown"
/>
</div>
);
}