Skip to content

Commit

Permalink
🖌️ feat: Optional Display Username in Messages, Send/Stop Button Styl…
Browse files Browse the repository at this point in the history 
…e, Localization (danny-avila#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>
  • Loading branch information
@danny-avila @itzraiss
danny-avila and itzraiss authored Jan 19, 2024
1 parent 3df5853 commit f133bb9
Show file tree
Hide file tree
Showing 8 changed files with 223 additions and 115 deletions.
4 changes: 4 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,10 @@ Please consult the breaking changes before updating.

## ⭐ Star History

<p align="center">
<a href="https://trendshift.io/repositories/4685" target="_blank"><img src="https://trendshift.io/api/badge/repositories/4685" alt="danny-avila%2FLibreChat | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a>
</p>

<a href="https://star-history.com/#danny-avila/LibreChat&Date">
<img alt="Star History Chart" src="https://api.star-history.com/svg?repos=danny-avila/LibreChat&type=Date&theme=dark" onerror="this.src='https://api.star-history.com/svg?repos=danny-avila/LibreChat&type=Date'" />
</a>
Expand Down
3 changes: 1 addition & 2 deletions client/src/components/Chat/Input/SendButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,7 @@ export default function SendButton({ text, disabled }) {
<button
disabled={!text || disabled}
className={cn(
'absolute rounded-lg rounded-md border border-black p-0.5 p-1 text-white transition-colors enabled:bg-black enabled:dark:bg-white disabled:bg-black disabled:text-gray-400 disabled:opacity-10 dark:border-white dark:bg-white dark:disabled:bg-white ',
'bottom-1.5 right-1.5 md:bottom-2.5 md:right-3 md:p-[2px]',
'absolute bottom-1.5 right-2 rounded-lg border border-black p-0.5 text-white transition-colors enabled:bg-black disabled:bg-black disabled:text-gray-400 disabled:opacity-10 dark:border-white dark:bg-white dark:hover:bg-gray-900 dark:disabled:bg-white dark:disabled:hover:bg-transparent md:bottom-3 md:right-3',
)}
data-testid="send-button"
type="submit"
Expand Down
27 changes: 19 additions & 8 deletions client/src/components/Chat/Messages/Message.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,20 @@
import { useRecoilValue } from 'recoil';
import { useAuthContext, useMessageHelpers, useLocalize } from '~/hooks';
import type { TMessageProps } from '~/common';
import { Plugin } from '~/components/Messages/Content';
import MessageContent from './Content/MessageContent';
import type { TMessageProps } from '~/common';
import SiblingSwitch from './SiblingSwitch';
import { useMessageHelpers } from '~/hooks';
// eslint-disable-next-line import/no-cycle
import MultiMessage from './MultiMessage';
import HoverButtons from './HoverButtons';
import SubRow from './SubRow';
import { cn } from '~/utils';
import store from '~/store';

export default function Message(props: TMessageProps) {
const { message, siblingIdx, siblingCount, setSiblingIdx, currentEditId, setCurrentEditId } =
props;
const UsernameDisplay = useRecoilValue<boolean>(store.UsernameDisplay);
const { user } = useAuthContext();
const localize = useLocalize();

const {
ask,
Expand All @@ -28,12 +31,22 @@ export default function Message(props: TMessageProps) {
regenerateMessage,
} = useMessageHelpers(props);

const { text, children, messageId = null, isCreatedByUser, error, unfinished } = message ?? {};
const { message, siblingIdx, siblingCount, setSiblingIdx, currentEditId, setCurrentEditId } =
props;

if (!message) {
return null;
}

const { text, children, messageId = null, isCreatedByUser, error, unfinished } = message ?? {};

let messageLabel = '';
if (isCreatedByUser) {
messageLabel = UsernameDisplay ? user?.name : localize('com_user_message');
} else {
messageLabel = message.sender;
}

return (
<>
<div
Expand All @@ -59,9 +72,7 @@ export default function Message(props: TMessageProps) {
<div
className={cn('relative flex w-full flex-col', isCreatedByUser ? '' : 'agent-turn')}
>
<div className="select-none font-semibold">
{isCreatedByUser ? 'You' : message.sender}
</div>
<div className="select-none font-semibold">{messageLabel}</div>
<div className="flex-col gap-1 md:gap-3">
<div className="flex max-w-full flex-grow flex-col gap-0">
{/* Legacy Plugins */}
Expand Down
26 changes: 25 additions & 1 deletion client/src/components/Nav/SettingsTabs/Account/Account.tsx
View file
Original file line number Diff line number Diff line change
@@ -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}
Expand All @@ -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>
Expand Down
2 changes: 2 additions & 0 deletions client/src/localization/languages/Br.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ export default {
com_ui_cancel: 'Cancelar',
com_ui_save: 'Salvar',
com_ui_save_submit: 'Salvar e Enviar',
com_user_message: 'Você',
com_ui_copy_to_clipboard: 'Copiar para a área de transferência',
com_ui_copied_to_clipboard: 'Copiado para a área de transferência',
com_ui_regenerate: 'Regenerar',
Expand Down Expand Up @@ -292,6 +293,7 @@ export default {
com_nav_theme_system: 'Sistema',
com_nav_theme_dark: 'Escuro',
com_nav_theme_light: 'Claro',
com_nav_user_name_display: 'Mostrar nome de usuário nas mensagens',
com_nav_clear_all_chats: 'Limpar todos os chats',
com_nav_confirm_clear: 'Confirmar Limpeza',
com_nav_close_sidebar: 'Fechar barra lateral',
Expand Down
2 changes: 2 additions & 0 deletions client/src/localization/languages/Eng.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ export default {
com_ui_cancel: 'Cancel',
com_ui_save: 'Save',
com_ui_save_submit: 'Save & Submit',
com_user_message: 'You',
com_ui_copy_to_clipboard: 'Copy to clipboard',
com_ui_copied_to_clipboard: 'Copied to clipboard',
com_ui_regenerate: 'Regenerate',
Expand Down Expand Up @@ -291,6 +292,7 @@ export default {
com_nav_theme_system: 'System',
com_nav_theme_dark: 'Dark',
com_nav_theme_light: 'Light',
com_nav_user_name_display: 'Display username in messages',
com_nav_clear_all_chats: 'Clear all chats',
com_nav_confirm_clear: 'Confirm Clear',
com_nav_close_sidebar: 'Close sidebar',
Expand Down
Loading

0 comments on commit f133bb9

Please sign in to comment.