diff --git a/apps/meteor/client/views/room/MessageList/components/MessageHeader.tsx b/apps/meteor/client/views/room/MessageList/components/MessageHeader.tsx index ba981d48659..d286edfe180 100644 --- a/apps/meteor/client/views/room/MessageList/components/MessageHeader.tsx +++ b/apps/meteor/client/views/room/MessageList/components/MessageHeader.tsx @@ -40,11 +40,16 @@ const MessageHeader: FC<{ message: IMessage }> = ({ message }) => { title={!showUsername && !usernameAndRealNameAreSame ? `@${user.username}` : undefined} data-username={user.username} onClick={user.username !== undefined ? openUserCard(user.username) : undefined} + style={{ cursor: 'pointer' }} > {getUserDisplayName(user.name, user.username, showRealName)} {showUsername && ( - + @{user.username} )} diff --git a/apps/meteor/client/views/room/MessageList/components/MessageSystem.tsx b/apps/meteor/client/views/room/MessageList/components/MessageSystem.tsx index 86066be3c0b..2a108955618 100644 --- a/apps/meteor/client/views/room/MessageList/components/MessageSystem.tsx +++ b/apps/meteor/client/views/room/MessageList/components/MessageSystem.tsx @@ -7,6 +7,7 @@ import { MessageSystemName, MessageSystemTimestamp, MessageSystemBlock, + MessageUsername, } from '@rocket.chat/fuselage'; import React, { FC, memo } from 'react'; @@ -15,14 +16,23 @@ import Attachments from '../../../../components/Message/Attachments'; import MessageActions from '../../../../components/Message/MessageActions'; import UserAvatar from '../../../../components/avatar/UserAvatar'; import { TranslationKey, useTranslation } from '../../../../contexts/TranslationContext'; +import { useUserData } from '../../../../hooks/useUserData'; +import { getUserDisplayName } from '../../../../lib/getUserDisplayName'; +import { UserPresence } from '../../../../lib/presence'; import { useMessageActions, useMessageRunActionLink } from '../../contexts/MessageContext'; -import { useMessageListShowRealName } from '../contexts/MessageListContext'; +import { useMessageListShowRealName, useMessageListShowUsername } from '../contexts/MessageListContext'; export const MessageSystem: FC<{ message: IMessage }> = ({ message }) => { const t = useTranslation(); - const { formatters } = useMessageActions(); + const { + actions: { openUserCard }, + formatters, + } = useMessageActions(); const runActionLink = useMessageRunActionLink(); - const showUsername = useMessageListShowRealName(); + const showRealName = useMessageListShowRealName(); + const user: UserPresence = { ...message.u, roles: [], ...useUserData(message.u._id) }; + const usernameAndRealNameAreSame = !user.name || user.username === user.name; + const showUsername = useMessageListShowUsername() && showRealName && !usernameAndRealNameAreSame; const messageType = MessageTypes.getType(message); @@ -33,7 +43,18 @@ export const MessageSystem: FC<{ message: IMessage }> = ({ message }) => { - {(showUsername && message.u.name) || message.u.username} + + {getUserDisplayName(user.name, user.username, showRealName)} + + {showUsername && ( + + @{user.username} + + )} {messageType && (