🖌️ feat: Optional Display Username in Messages, Send/Stop Button Styl…

…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 <[email protected]>

README.md

@@ -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>

client/src/components/Chat/Input/SendButton.tsx

@@ -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"

client/src/components/Chat/Messages/Message.tsx

@@ -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,
@@ -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
@@ -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 */}

client/src/components/Nav/SettingsTabs/Account/Account.tsx

@@ -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>

client/src/localization/languages/Br.tsx

@@ -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',
@@ -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',

client/src/localization/languages/Eng.tsx

@@ -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',
@@ -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',