feat: adjust vertical and horizontal message spacing (#2954)

BREAKING CHANGE: remove props endOfGroup, firstOfGroup and groupedByUser
from MessageProps as their purpose is unknown and message grouping
should be done by Message prop groupStyles

Author: MartinCupela

examples/vite/src/stream-imports-layout.scss

@@ -30,8 +30,8 @@
 //@use 'stream-chat-react/dist/scss/v2/MessageActionsBox/MessageActionsBox-layout';
 //@use 'stream-chat-react/dist/scss/v2/MessageBouncePrompt/MessageBouncePrompt-layout';
 //@use 'stream-chat-react/dist/scss/v2/MessageInput/MessageInput-layout'; // X
-@use 'stream-chat-react/dist/scss/v2/MessageList/MessageList-layout';
-@use 'stream-chat-react/dist/scss/v2/MessageList/VirtualizedMessageList-layout';
+//@use 'stream-chat-react/dist/scss/v2/MessageList/MessageList-layout';
+//@use 'stream-chat-react/dist/scss/v2/MessageList/VirtualizedMessageList-layout';
 // @use 'stream-chat-react/dist/scss/v2/MessageReactions/MessageReactions-layout';
 @use 'stream-chat-react/dist/scss/v2/MessageReactions/MessageReactionsSelector-layout';
 //@use 'stream-chat-react/dist/scss/v2/Modal/Modal-layout';

examples/vite/src/stream-imports-theme.scss

@@ -24,8 +24,8 @@
 //@use 'stream-chat-react/dist/scss/v2/Message/Message-theme';
 //@use 'stream-chat-react/dist/scss/v2/MessageActionsBox/MessageActionsBox-theme';
 //@use 'stream-chat-react/dist/scss/v2/MessageBouncePrompt/MessageBouncePrompt-theme';
-@use 'stream-chat-react/dist/scss/v2/MessageList/MessageList-theme';
-@use 'stream-chat-react/dist/scss/v2/MessageList/VirtualizedMessageList-theme';
+//@use 'stream-chat-react/dist/scss/v2/MessageList/MessageList-theme';
+//@use 'stream-chat-react/dist/scss/v2/MessageList/VirtualizedMessageList-theme';
 // @use 'stream-chat-react/dist/scss/v2/MessageReactions/MessageReactions-theme';
 @use 'stream-chat-react/dist/scss/v2/MessageReactions/MessageReactionsSelector-theme';
 //@use 'stream-chat-react/dist/scss/v2/Modal/Modal-theme';

package.json

@@ -232,7 +232,7 @@
     "prettier-fix": "yarn prettier --write",
     "fix-staged": "lint-staged --config .lintstagedrc.fix.json --concurrent 1",
     "start": "tsc -p tsconfig.lib.json -w",
-    "start:css": "sass --watch src/styling:dist/css src/plugins/Emojis/styling:dist/css",
+    "start:css": "sass --watch src/styling:dist/css",
     "prepare": "husky install",
     "preversion": "yarn install",
     "test": "jest",

src/components/MediaRecorder/AudioRecorder/styling/AudioRecorder.scss

@@ -4,7 +4,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  max-width: 768px;
+  max-width: var(--str-chat__message-composer-max-width);
   width: 100%;
   border-radius: var(--radius-3xl);
   border: 1px solid var(--border-core-default);

src/components/Message/Message.tsx

@@ -63,7 +63,6 @@ type MessageWithContextProps = Omit<MessageProps, MessagePropsToOmit> &
 const MessageWithContext = (props: MessageWithContextProps) => {
   const {
     canPin,
-    groupedByUser,
     Message: propMessage,
     message,
     messageActions = Object.keys(MESSAGE_ACTIONS),
@@ -166,8 +165,7 @@ const MessageWithContext = (props: MessageWithContextProps) => {
 
   return (
     <MessageProvider value={messageContextValue}>
-      <MessageUIComponent groupedByUser={groupedByUser} />
-      {/* TODO - remove prop in next major release, maintains VML backwards compatibility */}
+      <MessageUIComponent />
     </MessageProvider>
   );
 };
@@ -263,10 +261,7 @@ export const Message = (props: MessageProps) => {
       closeReactionSelectorOnClick={closeReactionSelectorOnClick}
       deliveredTo={props.deliveredTo}
       disableQuotedMessages={props.disableQuotedMessages}
-      endOfGroup={props.endOfGroup}
-      firstOfGroup={props.firstOfGroup}
       formatDate={props.formatDate}
-      groupedByUser={props.groupedByUser}
       groupStyles={props.groupStyles}
       handleAction={handleAction}
       handleDelete={handleDelete}

src/components/Message/MessageSimple.tsx

@@ -61,6 +61,7 @@ const MessageSimpleWithContext = (props: MessageSimpleWithContextProps) => {
     onUserClick,
     onUserHover,
     renderText,
+    showAvatar = 'incoming',
     threadList,
   } = props;
   const { client } = useChatContext('MessageSimple');
@@ -152,6 +153,12 @@ const MessageSimpleWithContext = (props: MessageSimpleWithContextProps) => {
       'str-chat__message--highlighted': highlighted,
       'str-chat__message--is-emoji-only': textHasEmojisOnly,
       'str-chat__message--pinned': message.pinned,
+      'str-chat__message--with-avatar': (() => {
+        if (!message.user) return false;
+        if (showAvatar === 'incoming') return !isMyMessage();
+        if (showAvatar === 'outgoing') return isMyMessage();
+        return showAvatar;
+      })(),
       'str-chat__message--with-reactions': hasReactions,
       'str-chat__message-send-can-be-retried':
         message?.status === 'failed' && message?.error?.status !== 403,

src/components/Message/styling/Message.scss

@@ -87,8 +87,28 @@
   --str-chat__message-with-attachment-max-width: calc(var(--str-chat__spacing-px) * 300);
 }
 
+/* Make spaces between message groups */
+.str-chat__li--top {
+  padding-block-start: var(--spacing-xs);
+  padding-block-end: var(--spacing-xxxs);
+}
+
+.str-chat__li--bottom  {
+  padding-block-start: var(--spacing-xxxs);
+  padding-block-end: var(--spacing-xs);
+}
+
+.str-chat__li--middle  {
+  padding-block: var(--spacing-xxxs);
+}
+
+.str-chat__li--single {
+  padding-block: var(--spacing-xs);
+}
+
 .str-chat__message {
   --str-chat-message-options-size: calc(3 * var(--str-chat__message-options-button-size));
+  padding-inline: var(--str-chat__message-composer-padding);
 
   &.str-chat__message-without-touch-support {
     --str-chat-message-options-size: calc(
@@ -214,12 +234,45 @@
 
   .str-chat__message-reminder {
     grid-area: message-reminder;
-    padding-block: var(--str-chat__spacing-2) var(--str-chat__spacing-0_5);
+    padding-block: var(--spacing-xxs);
     margin: 0;
     @include utils.component-layer-overrides('message-reminder');
     font: var(--str-chat__caption-medium-text);
   }
 
+  @mixin message-grid-no-avatar {
+    grid-template-areas:
+      'pin-indicator'
+      'message-reminder'
+      'message'
+      'translation-notice'
+      'custom-metadata'
+      'metadata';
+    grid-template-columns: 1fr;
+  }
+
+  @mixin message-grid-other-with-avatar {
+    grid-template-areas:
+      '. pin-indicator'
+      '. message-reminder'
+      'avatar message'
+      'avatar translation-notice'
+      'avatar custom-metadata'
+      'avatar metadata';
+    grid-template-columns: auto 1fr;
+  }
+
+  @mixin message-grid-me-with-avatar {
+    grid-template-areas:
+      'pin-indicator .'
+      'message-reminder .'
+      'message avatar'
+      'translation-notice avatar'
+      'custom-metadata avatar'
+      'metadata avatar';
+    grid-template-columns: 1fr auto;
+  }
+
   .str-chat__message-pin-indicator {
     grid-area: pin-indicator;
     padding-block: var(--spacing-xxs);
@@ -238,16 +291,17 @@
   }
 
   &.str-chat__message--other {
-    grid-template-areas:
-      '. message-reminder'
-      'avatar message'
-      'avatar translation-notice'
-      'avatar custom-metadata'
-      'avatar metadata';
     column-gap: var(--str-chat__spacing-2);
-    grid-template-columns: auto 1fr;
     justify-items: flex-start;
 
+    &.str-chat__message--with-avatar {
+      @include message-grid-other-with-avatar;
+    }
+
+    &:not(.str-chat__message--with-avatar) {
+      @include message-grid-no-avatar;
+    }
+
     .str-chat__message-inner {
       .str-chat__message-reactions-host {
         justify-self: flex-start;
@@ -268,36 +322,25 @@
   }
 
   &.str-chat__message--pinned.str-chat__message--other {
-    grid-template-areas:
-      '. pin-indicator'
-      '. message-reminder'
-      'avatar message'
-      'avatar translation-notice'
-      'avatar custom-metadata'
-      'avatar metadata';
+    @include message-grid-other-with-avatar;
   }
 
   &.str-chat__message--pinned.str-chat__message--me {
-    grid-template-areas:
-      'pin-indicator .'
-      'message-reminder .'
-      'message avatar'
-      'translation-notice avatar'
-      'custom-metadata avatar'
-      'metadata avatar';
+    @include message-grid-me-with-avatar;
   }
 
   &.str-chat__message--me {
-    grid-template-areas:
-      'message-reminder .'
-      'message avatar'
-      'translation-notice avatar'
-      'custom-metadata avatar'
-      'metadata avatar';
     column-gap: var(--str-chat__spacing-2);
-    grid-template-columns: 1fr auto;
     justify-items: flex-end;
 
+    &.str-chat__message--with-avatar {
+      @include message-grid-me-with-avatar;
+    }
+
+    &:not(.str-chat__message--with-avatar) {
+      @include message-grid-no-avatar;
+    }
+
     .str-chat__message-inner {
       .str-chat__message-reactions-host {
         justify-self: flex-end;
@@ -315,6 +358,7 @@
         }
       }
     }
+
   }
 
   &.str-chat__message--deleted {
@@ -335,7 +379,7 @@
     align-self: end;
   }
 
-  &.str-chat__message--me .str-chat__avatar:has(~ .str-chat__message-inner) {
+  &:not(.str-chat__message--with-avatar) .str-chat__avatar {
     display: none;
   }
 
@@ -660,36 +704,17 @@
 .str-chat__li--middle,
 .str-chat__li--top {
   .str-chat__message {
-    // space below the message within a group
-    padding-block-end: var(--spacing-xxs);
-
     .str-chat__message-metadata {
       display: none;
     }
 
-    // > selector added to not hide sender of inline replies
-    > .str-chat__message-sender-avatar {
+    // Hide sender avatar in middle/top of group (only show on last message in group)
+    > .str-chat__avatar {
       visibility: hidden;
     }
   }
 }
 
-.str-chat__li--top,
-.str-chat__li--single {
-  .str-chat__message {
-    // space above the message group
-    padding-block-start: var(--spacing-xs);
-  }
-}
-
-.str-chat__li--bottom,
-.str-chat__li--single {
-  .str-chat__message {
-    // space below the message group
-    padding-block-end: var(--spacing-xs);
-  }
-}
-
 .str-chat__li--single,
 .str-chat__li--bottom {
   .str-chat__message--other {
@@ -729,7 +754,7 @@
 // Avatar display in message list
 .str-chat__li--top,
 .str-chat__li--middle {
-  .str-chat__message > .str-chat__avatar {
+  .str-chat__message.str-chat__message--with-avatar > .str-chat__avatar {
     visibility: hidden;
     pointer-events: none;
   }

src/components/Message/types.ts

@@ -26,10 +26,6 @@ export type MessageProps = {
   deliveredTo?: UserResponse[];
   /** If true, disables the ability for users to quote messages, defaults to false */
   disableQuotedMessages?: boolean;
-  /** When true, the message is the last one in a group sent by a specific user (only used in the `VirtualizedMessageList`) */
-  endOfGroup?: boolean;
-  /** When true, the message is the first one in a group sent by a specific user (only used in the `VirtualizedMessageList`) */
-  firstOfGroup?: boolean;
   /** Override the default formatting of the date. This is a function that has access to the original date object, returns a string  */
   formatDate?: (date: Date) => string;
   /** Function that returns the notification text to be displayed when a delete message request fails */
@@ -50,8 +46,6 @@ export type MessageProps = {
   getMuteUserSuccessNotification?: (user: UserResponse) => string;
   /** Function that returns the notification text to be displayed when a pin message request fails */
   getPinMessageErrorNotification?: (message: LocalMessage) => string;
-  /** If true, group messages sent by each user (only used in the `VirtualizedMessageList`) */
-  groupedByUser?: boolean;
   /** A list of styles to apply to this message, i.e. top, bottom, single */
   groupStyles?: GroupStyle[];
   /** Whether to highlight and focus the message on load */
@@ -88,6 +82,14 @@ export type MessageProps = {
   reactionDetailsSort?: ReactionSort;
   /** A list of users that have read this Message if the message is the last one and was posted by my user */
   readBy?: UserResponse[];
+  /**
+   * When set, the message uses the grid layout with an avatar column and shows the sender avatar.
+   * - `true`: show for incoming and outgoing messages
+   * - `'incoming'`: show only for incoming (other users') messages
+   * - `'outgoing'`: show only for own (outgoing) messages
+   * - `false` or omitted: no avatar column
+   */
+  showAvatar?: boolean | 'incoming' | 'outgoing';
   /** Custom function to render message text content, defaults to the renderText function: [utils](https://github.com/GetStream/stream-chat-react/blob/master/src/utils.ts) */
   renderText?: (
     text?: string,

src/components/Message/utils.tsx

@@ -272,7 +272,6 @@ export const areMessagePropsEqual = (
   const { message: nextMessage, Message: nextMessageUI } = nextProps;
 
   if (prevMessageUI !== nextMessageUI) return false;
-  if (prevProps.endOfGroup !== nextProps.endOfGroup) return false;
 
   if (nextProps.showDetailedReactions !== prevProps.showDetailedReactions) {
     return false;

src/components/MessageInput/styling/MessageComposer.scss

@@ -36,6 +36,7 @@
   --str-chat__cooldown-border-inline-end: 0;
   --str-chat__cooldown-box-shadow: none;
   --str-chat__message-composer-max-width: 768px;
+  --str-chat__message-composer-padding: var(--spacing-md);
 
   .str-chat__message-composer-container {
     width: 100%;
@@ -44,7 +45,7 @@
     align-items: center;
     gap: var(--spacing-xs);
     justify-content: center;
-    padding: var(--spacing-xs);
+    padding: var(--str-chat__message-composer-padding);
     min-width: 0;
   }