diff --git a/.changeset/wet-beers-end.md b/.changeset/wet-beers-end.md
new file mode 100644
index 0000000000000..b63ca6038c1fa
--- /dev/null
+++ b/.changeset/wet-beers-end.md
@@ -0,0 +1,5 @@
+---
+'@rocket.chat/meteor': minor
+---
+
+Standardizes the display of username with `@` before
diff --git a/apps/meteor/client/components/UserAutoCompleteMultiple/UserAutoCompleteMultipleOption.tsx b/apps/meteor/client/components/UserAutoCompleteMultiple/UserAutoCompleteMultipleOption.tsx
index 709c2b5df0181..9a82c5eba53d5 100644
--- a/apps/meteor/client/components/UserAutoCompleteMultiple/UserAutoCompleteMultipleOption.tsx
+++ b/apps/meteor/client/components/UserAutoCompleteMultiple/UserAutoCompleteMultipleOption.tsx
@@ -24,7 +24,7 @@ const UserAutoCompleteMultipleOption = ({ label, ...props }: UserAutoCompleteMul
return (
<>
- {name} {!_federated && ({username})}
+ {name} {!_federated && @{username}}
>
);
}, [_federated, name, useRealName, username]);
diff --git a/apps/meteor/client/views/room/composer/ComposerBoxPopupUser.tsx b/apps/meteor/client/views/room/composer/ComposerBoxPopupUser.tsx
index d01c4e07c120c..a823b14dd7b26 100644
--- a/apps/meteor/client/views/room/composer/ComposerBoxPopupUser.tsx
+++ b/apps/meteor/client/views/room/composer/ComposerBoxPopupUser.tsx
@@ -1,7 +1,9 @@
import { OptionAvatar, OptionColumn, OptionContent, OptionInput } from '@rocket.chat/fuselage';
import { UserAvatar } from '@rocket.chat/ui-avatar';
+import { useSetting } from '@rocket.chat/ui-contexts';
import { useTranslation } from 'react-i18next';
+import { getUserDisplayNames } from '../../../../lib/getUserDisplayNames';
import ReactiveUserStatus from '../../../components/UserStatus/ReactiveUserStatus';
export type ComposerBoxPopupUserProps = {
@@ -19,6 +21,9 @@ export type ComposerBoxPopupUserProps = {
function ComposerBoxPopupUser({ _id, system, username, name, nickname, outside, suggestion, variant }: ComposerBoxPopupUserProps) {
const { t } = useTranslation();
+ const useRealName = useSetting('UI_Use_Real_Name', false);
+
+ const [nameOrUsername, displayUsername] = getUserDisplayNames(name, username, useRealName);
return (
<>
@@ -31,15 +36,15 @@ function ComposerBoxPopupUser({ _id, system, username, name, nickname, outside,
- {name ?? username} {name && name !== username && username}
- {nickname && ({nickname})}
+ {nameOrUsername} {displayUsername && `@${displayUsername}`}
+ {nickname && ({nickname})}
>
)}
{system && (
- {username} {name}
+ @{username} {name}
)}
diff --git a/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembersItem.tsx b/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembersItem.tsx
index 26e09d4ef4621..ef1448d50ff64 100644
--- a/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembersItem.tsx
+++ b/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembersItem.tsx
@@ -67,7 +67,7 @@ const RoomMembersItem = ({
{federated ? : }
- {nameOrUsername} {displayUsername && ({displayUsername})}
+ {nameOrUsername} {displayUsername && @{displayUsername}}
{subscription?.status === 'INVITED' && (
diff --git a/apps/meteor/tests/e2e/message-mentions.spec.ts b/apps/meteor/tests/e2e/message-mentions.spec.ts
index 87ca04206bad3..d03c62edd4f5b 100644
--- a/apps/meteor/tests/e2e/message-mentions.spec.ts
+++ b/apps/meteor/tests/e2e/message-mentions.spec.ts
@@ -111,8 +111,8 @@ test.describe.serial('message-mentions', () => {
await poHomeChannel.navbar.openChat('general');
await poHomeChannel.composer.inputMessage.type('@');
- await expect(poHomeChannel.content.messagePopupUsers.locator('role=listitem >> text="all"')).toBeVisible();
- await expect(poHomeChannel.content.messagePopupUsers.locator('role=listitem >> text="here"')).toBeVisible();
+ await expect(poHomeChannel.content.messagePopupUsers.locator('role=listitem >> text="@all"')).toBeVisible();
+ await expect(poHomeChannel.content.messagePopupUsers.locator('role=listitem >> text="@here"')).toBeVisible();
});
test.describe('users not in channel', () => {