snapshot of https://github.com/RocketChat/Rocket.Chat.git (develop, 2026-09-16; blobs > 131072B omitted)

apps/meteor/client/components/message/header/MessageRoles.stories.tsx

@@ -0,0 +1,22 @@
+import { Box } from '@rocket.chat/fuselage';
+import type { StoryObj, Meta } from '@storybook/react';
+
+import MessageRoles from './MessageRoles';
+
+export default {
+	component: MessageRoles,
+	decorators: [(fn) => <Box>{fn()}</Box>], // TODO: workaround for missing Fuselage default stylesheet
+} satisfies Meta<typeof MessageRoles>;
+
+export const AdministratorExample: StoryObj<typeof MessageRoles> = {
+	args: {
+		roles: ['admin', 'user'],
+	},
+};
+
+export const BotExample: StoryObj<typeof MessageRoles> = {
+	args: {
+		roles: ['user'],
+		isBot: true,
+	},
+};

apps/meteor/client/components/message/header/MessageRoles.tsx

@@ -0,0 +1,22 @@
+import { MessageRole, MessageRoles as FuselageMessageRoles } from '@rocket.chat/fuselage';
+import { useTranslation } from 'react-i18next';
+
+export type MessageRolesProps = {
+	roles: Array<string>;
+	isBot?: boolean;
+};
+
+const MessageRoles = ({ roles, isBot }: MessageRolesProps) => {
+	const { t } = useTranslation();
+
+	return (
+		<FuselageMessageRoles>
+			{roles.map((role, index) => (
+				<MessageRole key={index}>{role}</MessageRole>
+			))}
+			{isBot && <MessageRole>{t('Bot')}</MessageRole>}
+		</FuselageMessageRoles>
+	);
+};
+
+export default MessageRoles;

apps/meteor/client/components/message/header/hooks/useMessageRoles.ts

@@ -0,0 +1,30 @@
+import type { IRole, IRoom, IUser } from '@rocket.chat/core-typings';
+import { useCallback } from 'react';
+import { useShallow } from 'zustand/shallow';
+
+import type { RoomRoles } from '../../../../hooks/useRoomRolesQuery';
+import { useRoomRolesQuery } from '../../../../hooks/useRoomRolesQuery';
+import type { UserRoles } from '../../../../hooks/useUserRolesQuery';
+import { useUserRolesQuery } from '../../../../hooks/useUserRolesQuery';
+import { Roles } from '../../../../stores';
+
+export const useMessageRoles = (userId: IUser['_id'] | undefined, roomId: IRoom['_id'], shouldLoadRoles: boolean): Array<string> => {
+	const { data: userRoles } = useUserRolesQuery({
+		select: useCallback((records: UserRoles[]) => records.find((record) => record.uid === userId)?.roles ?? [], [userId]),
+		enabled: shouldLoadRoles && !!userId,
+	});
+
+	const { data: roomRoles } = useRoomRolesQuery(roomId, {
+		select: useCallback((records: RoomRoles[]) => records.find((record) => record.u._id === userId)?.roles ?? [], [userId]),
+		enabled: shouldLoadRoles && !!userId,
+	});
+
+	const predicate = useCallback(
+		(record: IRole): boolean => {
+			return !!record.description && [...(userRoles ?? []), ...(roomRoles ?? [])].includes(record._id);
+		},
+		[roomRoles, userRoles],
+	);
+
+	return Roles.use(useShallow((state) => state.filter(predicate).map(({ description }) => description)));
+};