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