Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-21 10:50:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source 
* 👤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
Download patch file Download diff file Expand all files Collapse all files

3
client/src/components/Chat/Input/SendButton.tsx
View file

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

27
client/src/components/Chat/Messages/Message.tsx
View file

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