File size: 3,345 Bytes
3b6afc0 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 |
import * as Tabs from '@radix-ui/react-tabs';
import { CheckIcon } from 'lucide-react';
import { ThemeContext } from '~/hooks/ThemeContext';
import React, { useState, useContext, useCallback } from 'react';
import { useClearConversationsMutation } from '@librechat/data-provider';
import { useRecoilValue } from 'recoil';
import store from '~/store';
import { localize } from '~/localization/Translation';
export const ThemeSelector = ({
theme,
onChange,
}: {
theme: string;
onChange: (value: string) => void;
}) => {
const lang = useRecoilValue(store.lang);
return (
<div className="flex items-center justify-between">
<div>{localize(lang, 'com_nav_theme')}</div>
<select
className="w-24 rounded border border-black/10 bg-transparent text-sm dark:border-white/20 dark:bg-gray-900"
onChange={(e) => onChange(e.target.value)}
value={theme}
>
<option value="system">{localize(lang, 'com_nav_theme_system')}</option>
<option value="dark">{localize(lang, 'com_nav_theme_dark')}</option>
<option value="light">{localize(lang, 'com_nav_theme_light')}</option>
</select>
</div>
);
};
export const ClearChatsButton = ({
confirmClear,
showText = true,
onClick,
}: {
confirmClear: boolean;
showText: boolean;
onClick: () => void;
}) => {
const lang = useRecoilValue(store.lang);
return (
<div className="flex items-center justify-between">
{showText && <div>{localize(lang, 'com_nav_clear_all_chats')}</div>}
<button
className="btn relative bg-red-600 text-white hover:bg-red-800"
type="button"
id="clearConvosBtn"
onClick={onClick}
>
{confirmClear ? (
<div className="flex w-full items-center justify-center gap-2" id="clearConvosTxt">
<CheckIcon className="h-5 w-5" /> {localize(lang, 'com_nav_confirm_clear')}
</div>
) : (
<div className="flex w-full items-center justify-center gap-2" id="clearConvosTxt">
{localize(lang, 'com_nav_clear')}
</div>
)}
</button>
</div>
);
};
function General() {
const { theme, setTheme } = useContext(ThemeContext);
const clearConvosMutation = useClearConversationsMutation();
const [confirmClear, setConfirmClear] = useState(false);
const clearConvos = useCallback(() => {
if (confirmClear) {
console.log('Clearing conversations...');
clearConvosMutation.mutate({});
setConfirmClear(false);
} else {
setConfirmClear(true);
}
}, [confirmClear, clearConvosMutation]);
const changeTheme = useCallback(
(value: string) => {
setTheme(value);
},
[setTheme],
);
return (
<Tabs.Content value="general" role="tabpanel" className="w-full md:min-h-[300px]">
<div className="flex flex-col gap-3 text-sm text-gray-600 dark:text-gray-300">
<div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-700">
<ThemeSelector theme={theme} onChange={changeTheme} />
</div>
<div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-700">
<ClearChatsButton confirmClear={confirmClear} onClick={clearConvos} showText={true} />
</div>
</div>
</Tabs.Content>
);
}
export default React.memo(General);
|