mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-17 17:00:15 +01:00
911babd3e0
* BIG UI UPDATE * fix: search bar, dialog template, new chat icon, convo icon and delete/rename button * moved some color config and a lot of files * small text fixes and tailwind config refactor * Update localization and UI styles * Update styles and add user-select:none to Tooltip component * Update mobile.css styles for navigation mask and background color * Update component imports and styles * Update DeleteButton imports and references * Update UI components * Update tooltip delay duration * Fix styling and update text in various components * fixed assistant style * minor style fixes * revert: removed CreationHeader & CreationPanel * style: match new styling for SidePanel * style: match bg-gray-800 to ChatGPT (#212121) * style: remove slate for gray where applicable to match new light theme --------- Co-authored-by: Danny Avila <messagedaniel@protonmail.com>
47 lines
1.5 KiB
TypeScript
47 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
import { useRecoilState } from 'recoil';
|
|
import * as Tabs from '@radix-ui/react-tabs';
|
|
import { SettingsTabValues } from 'librechat-data-provider';
|
|
import { Switch } from '~/components/ui';
|
|
import { useLocalize } from '~/hooks';
|
|
import Avatar from './Avatar';
|
|
import store from '~/store';
|
|
|
|
function Account({ onCheckedChange }: { onCheckedChange?: (value: boolean) => void }) {
|
|
const [UsernameDisplay, setUsernameDisplay] = useRecoilState<boolean>(store.UsernameDisplay);
|
|
const localize = useLocalize();
|
|
|
|
const handleCheckedChange = (value: boolean) => {
|
|
setUsernameDisplay(value);
|
|
if (onCheckedChange) {
|
|
onCheckedChange(value);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Tabs.Content
|
|
value={SettingsTabValues.ACCOUNT}
|
|
role="tabpanel"
|
|
className="w-full md:min-h-[300px]"
|
|
>
|
|
<div className="flex flex-col gap-3 text-sm text-gray-600 dark:text-gray-50">
|
|
<div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-700">
|
|
<Avatar />
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<div> {localize('com_nav_user_name_display')} </div>
|
|
<Switch
|
|
id="UsernameDisplay"
|
|
checked={UsernameDisplay}
|
|
onCheckedChange={handleCheckedChange}
|
|
className="ml-4 mt-2"
|
|
data-testid="UsernameDisplay"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-700"></div>
|
|
</Tabs.Content>
|
|
);
|
|
}
|
|
|
|
export default React.memo(Account);
|