diff --git a/apps/meteor/client/views/admin/moderation/helpers/ContextMessage.tsx b/apps/meteor/client/views/admin/moderation/helpers/ContextMessage.tsx
index 2d5081c2f6931..20488c0ea529e 100644
--- a/apps/meteor/client/views/admin/moderation/helpers/ContextMessage.tsx
+++ b/apps/meteor/client/views/admin/moderation/helpers/ContextMessage.tsx
@@ -1,6 +1,20 @@
import type { IMessage, MessageReport, MessageAttachment } from '@rocket.chat/core-typings';
import { isE2EEMessage, isQuoteAttachment } from '@rocket.chat/core-typings';
-import { Message, MessageName, MessageToolbarItem, MessageToolbarWrapper, MessageUsername } from '@rocket.chat/fuselage';
+import {
+ Message,
+ MessageDivider,
+ MessageLeftContainer,
+ MessageContainer,
+ MessageHeader,
+ MessageTimestamp,
+ MessageRole,
+ MessageBody,
+ MessageName,
+ MessageToolbar,
+ MessageToolbarItem,
+ MessageToolbarWrapper,
+ MessageUsername,
+} from '@rocket.chat/fuselage';
import { UserAvatar } from '@rocket.chat/ui-avatar';
import { useUserDisplayName } from '@rocket.chat/ui-client';
import { useSetting } from '@rocket.chat/ui-contexts';
@@ -53,22 +67,22 @@ const ContextMessage = ({
return (
<>
- {formatDate(message._updatedAt)}
+ {formatDate(message._updatedAt)}
-
+
-
-
-
+
+
+
{displayName}
<>{useRealName && {`@${message.u.username}`}}
-
+
{formatTime(message._updatedAt !== message.ts ? message._updatedAt : message.ts)}
{message._updatedAt !== message.ts && ` (${t('edited')})`}
-
- {room.name || room.fname || 'DM'}
-
-
+
+ {room.name || room.fname || 'DM'}
+
+
{!!quotes?.length && }
{!message.blocks?.length && !!message.md?.length ? (
<>
@@ -83,13 +97,13 @@ const ContextMessage = ({
{!!attachments && }
{message.blocks && }
-
+
-
+
-
+
onRedirect(message._id)} />
deleteMessage()} />
-
+
diff --git a/apps/meteor/client/views/room/contextualBar/Discussions/components/DiscussionsListItem.tsx b/apps/meteor/client/views/room/contextualBar/Discussions/components/DiscussionsListItem.tsx
index 44c23193626b2..fa1342f782f1f 100644
--- a/apps/meteor/client/views/room/contextualBar/Discussions/components/DiscussionsListItem.tsx
+++ b/apps/meteor/client/views/room/contextualBar/Discussions/components/DiscussionsListItem.tsx
@@ -1,5 +1,19 @@
import type { IDiscussionMessage } from '@rocket.chat/core-typings';
-import { Box, Message } from '@rocket.chat/fuselage';
+import {
+ Box,
+ Message,
+ MessageLeftContainer,
+ MessageContainer,
+ MessageHeader,
+ MessageName,
+ MessageTimestamp,
+ MessageBody,
+ MessageBlock,
+ MessageMetrics,
+ MessageMetricsItem,
+ MessageMetricsItemLabel,
+ MessageMetricsItemIcon,
+} from '@rocket.chat/fuselage';
import { MessageAvatar } from '@rocket.chat/ui-avatar';
import type { ComponentProps, ReactElement, ReactNode } from 'react';
import { memo } from 'react';
@@ -36,37 +50,37 @@ const DiscussionListItem = ({
const { t } = useTranslation();
return (
-
+
: undefined} username={username} size='x36' />
-
-
-
- {name}
- {formatDate(ts)}
-
- {msg}
-
-
+
+
+
+ {name}
+ {formatDate(ts)}
+
+ {msg}
+
+
{!dcount && (
-
- {t('No_messages_yet')}
-
+
+ {t('No_messages_yet')}
+
)}
{!!dcount && (
-
-
- {dcount}
-
+
+
+ {dcount}
+
)}
{!!dcount && (
-
-
- {dlm ? formatDate(dlm) : undefined}
-
+
+
+ {dlm ? formatDate(dlm) : undefined}
+
)}
-
-
-
+
+
+
);
};
diff --git a/apps/meteor/client/views/room/contextualBar/Threads/components/ThreadListMessage.tsx b/apps/meteor/client/views/room/contextualBar/Threads/components/ThreadListMessage.tsx
index fa58c2da5687a..5d805ace858e6 100644
--- a/apps/meteor/client/views/room/contextualBar/Threads/components/ThreadListMessage.tsx
+++ b/apps/meteor/client/views/room/contextualBar/Threads/components/ThreadListMessage.tsx
@@ -1,5 +1,15 @@
import type { IMessage } from '@rocket.chat/core-typings';
-import { Message, Box } from '@rocket.chat/fuselage';
+import {
+ Message,
+ MessageLeftContainer,
+ MessageContainer,
+ MessageHeader,
+ MessageName,
+ MessageTimestamp,
+ MessageBody,
+ MessageContainerFixed,
+ Box,
+} from '@rocket.chat/fuselage';
import { MessageAvatar } from '@rocket.chat/ui-avatar';
import type { ComponentProps, ReactElement, ReactNode } from 'react';
import { memo } from 'react';
@@ -50,25 +60,25 @@ const ThreadListMessage = ({
return (
-
+
: undefined} username={username} size='x36' />
-
-
-
- {name}
- {formatDate(ts)}
-
- {msg}
+
+
+
+ {name}
+ {formatDate(ts)}
+
+ {msg}
-
-
+
+
{unread && (
)}
-
+
);
diff --git a/apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfList/VideoConfListItem.tsx b/apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfList/VideoConfListItem.tsx
index 0b76771b0861f..a152755947684 100644
--- a/apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfList/VideoConfListItem.tsx
+++ b/apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfList/VideoConfListItem.tsx
@@ -1,6 +1,21 @@
import type { VideoConference } from '@rocket.chat/core-typings';
import { css } from '@rocket.chat/css-in-js';
-import { Button, Message, Box, Palette, IconButton, ButtonGroup, AvatarStack } from '@rocket.chat/fuselage';
+import {
+ Button,
+ Message,
+ MessageLeftContainer,
+ MessageContainer,
+ MessageHeader,
+ MessageName,
+ MessageTimestamp,
+ MessageBody,
+ MessageBlock,
+ Box,
+ Palette,
+ IconButton,
+ ButtonGroup,
+ AvatarStack,
+} from '@rocket.chat/fuselage';
import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
import { UserAvatar } from '@rocket.chat/ui-avatar';
import { useUserDisplayName } from '@rocket.chat/ui-client';
@@ -65,15 +80,15 @@ const VideoConfListItem = ({
pb={8}
>
- {username && }
-
-
- {displayName}
- {formatDate(createdAt)}
-
-
+ {username && }
+
+
+ {displayName}
+ {formatDate(createdAt)}
+
+
-
+
-
+
+
);
diff --git a/apps/uikit-playground/src/Components/Preview/Display/Surface/MessageSurface.tsx b/apps/uikit-playground/src/Components/Preview/Display/Surface/MessageSurface.tsx
index 436a589da623f..2d1f8b1fad4da 100644
--- a/apps/uikit-playground/src/Components/Preview/Display/Surface/MessageSurface.tsx
+++ b/apps/uikit-playground/src/Components/Preview/Display/Surface/MessageSurface.tsx
@@ -1,32 +1,46 @@
-import { Message, Avatar } from '@rocket.chat/fuselage';
+import {
+ Message,
+ MessageLeftContainer,
+ MessageContainer,
+ MessageHeader,
+ MessageName,
+ MessageUsername,
+ MessageRole,
+ MessageTimestamp,
+ MessageBody,
+ MessageToolbarWrapper,
+ MessageToolbar,
+ MessageToolbarItem,
+ Avatar,
+} from '@rocket.chat/fuselage';
import type { ReactNode } from 'react';
const MessageSurface = ({ children }: { children: ReactNode }) => (
-
+
-
-
-
- Vivek Srivastava
- @vivek.srivastava
- Admin
- User
- Owner
- 12:00 PM
-
- {children}
-
-
-
-
-
-
-
-
+
+
+
+ Vivek Srivastava
+ @vivek.srivastava
+ Admin
+ User
+ Owner
+ 12:00 PM
+
+ {children}
+
+
+
+
+
+
+
+
);
diff --git a/packages/fuselage-ui-kit/src/stories/Message.stories.tsx b/packages/fuselage-ui-kit/src/stories/Message.stories.tsx
index fcd2b315a2a2b..f6303c2c86d7e 100644
--- a/packages/fuselage-ui-kit/src/stories/Message.stories.tsx
+++ b/packages/fuselage-ui-kit/src/stories/Message.stories.tsx
@@ -1,5 +1,20 @@
/* eslint-disable new-cap */
-import { Message, Avatar } from '@rocket.chat/fuselage';
+import {
+ Message,
+ MessageLeftContainer,
+ MessageContainer,
+ MessageHeader,
+ MessageNameContainer,
+ MessageName,
+ MessageUsername,
+ MessageRole,
+ MessageTimestamp,
+ MessageBody,
+ MessageToolbarWrapper,
+ MessageToolbar,
+ MessageToolbarItem,
+ Avatar,
+} from '@rocket.chat/fuselage';
import type * as UiKit from '@rocket.chat/ui-kit';
import { action } from '@storybook/addon-actions';
@@ -16,7 +31,7 @@ export default {
const createStory = (blocks: readonly UiKit.LayoutBlock[]) => {
const story = ({ blocks, errors }: { blocks: readonly UiKit.LayoutBlock[]; errors: Record }) => (
-
+
-
-
-
-
- Haylie George
- @haylie.george
-
- Admin
- User
- Owner
- 12:00 PM
-
-
+
+
+
+
+ Haylie George
+ @haylie.george
+
+ Admin
+ User
+ Owner
+ 12:00 PM
+
+
{
>
{UiKitMessage(blocks)}
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
);
story.args = {
diff --git a/packages/gazzodown/src/mentions/ChannelMentionElement.tsx b/packages/gazzodown/src/mentions/ChannelMentionElement.tsx
index cc8cc758b2d95..5db9e68f6a845 100644
--- a/packages/gazzodown/src/mentions/ChannelMentionElement.tsx
+++ b/packages/gazzodown/src/mentions/ChannelMentionElement.tsx
@@ -1,4 +1,4 @@
-import { Message } from '@rocket.chat/fuselage';
+import { MessageHighlight } from '@rocket.chat/fuselage';
import { useButtonPattern } from '@rocket.chat/fuselage-hooks';
import type { ReactElement } from 'react';
import { memo, useContext, useMemo } from 'react';
@@ -25,9 +25,9 @@ const ChannelMentionElement = ({ mention }: ChannelMentionElementProps): ReactEl
}
return (
-
+
{handleChannelMention(resolved.fname ?? mention, showMentionSymbol)}
-
+
);
};
diff --git a/packages/gazzodown/src/mentions/UserMentionElement.tsx b/packages/gazzodown/src/mentions/UserMentionElement.tsx
index e4336992cfc00..31094859885d7 100644
--- a/packages/gazzodown/src/mentions/UserMentionElement.tsx
+++ b/packages/gazzodown/src/mentions/UserMentionElement.tsx
@@ -1,4 +1,4 @@
-import { Message } from '@rocket.chat/fuselage';
+import { MessageHighlight } from '@rocket.chat/fuselage';
import { useButtonPattern } from '@rocket.chat/fuselage-hooks';
import type { ReactElement } from 'react';
import { memo, useContext, useMemo } from 'react';
@@ -24,17 +24,17 @@ const UserMentionElement = ({ mention }: UserMentionElementProps): ReactElement
if (mention === 'all') {
return (
-
+
{handleUserMention('all', showMentionSymbol)}
-
+
);
}
if (mention === 'here') {
return (
-
+
{handleUserMention('here', showMentionSymbol)}
-
+
);
}
@@ -43,7 +43,7 @@ const UserMentionElement = ({ mention }: UserMentionElementProps): ReactElement
}
return (
-
{handleUserMention((useRealName ? resolved.name : resolved.username) ?? mention, showMentionSymbol)}
-
+
);
};
diff --git a/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessage.stories.tsx b/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessage.stories.tsx
index ebe9768fc2191..3a253694cf347 100644
--- a/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessage.stories.tsx
+++ b/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessage.stories.tsx
@@ -1,4 +1,17 @@
-import { MessageDivider, Message, Avatar, Box } from '@rocket.chat/fuselage';
+import {
+ MessageDivider,
+ Message,
+ MessageLeftContainer,
+ MessageContainer,
+ MessageHeader,
+ MessageName,
+ MessageUsername,
+ MessageRole,
+ MessageTimestamp,
+ MessageBody,
+ Avatar,
+ Box,
+} from '@rocket.chat/fuselage';
import type { Meta, StoryFn } from '@storybook/react';
import { VideoConfMessage, VideoConfMessageIcon, VideoConfMessageRow, VideoConfMessageText } from '.';
@@ -19,22 +32,22 @@ export default {
May, 24, 2020
-
+
-
-
-
- Haylie George
- @haylie.george
- Admin
- User
- Owner
- 12:00 PM
-
-
+
+
+
+ Haylie George
+ @haylie.george
+ Admin
+ User
+ Owner
+ 12:00 PM
+
+
-
-
+
+
),