🖌️ feat: Optional Display Username in Messages, Send/Stop Button Style, Localization (#1592)

* 👤add: Username instead of 'You' when sending messages.

* 🌎: Added a new translation for 'You' and updated the existing translation for Spanish.

* fix: remove "!"

* Added: New setting Account for show username in messages
chore (StopButon and SendButon): Updated to new style of ChatGPT
chore Update and Added news translations: Spanish, English and Portuguese Brazilian

* fix: message component definition and imports order, remove unnecessary useEffect and localStorage set, fix localStorage key in store

* chore: update readme.md

* chore: optimize condition for messageLabel

* chore(Message.tsx): remove empty blocks

---------

Co-authored-by: Raí Santos <140329135+itzraiss@users.noreply.github.com>
This commit is contained in:
Danny Avila 2024-01-19 03:44:02 -05:00 committed by GitHub
parent 3df58532d9
commit f133bb98fe
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 223 additions and 115 deletions

View file

@ -1,9 +1,23 @@
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);
}
};
function Account() {
return (
<Tabs.Content
value={SettingsTabValues.ACCOUNT}
@ -14,6 +28,16 @@ function Account() {
<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>