Adjustments & limitation removal

Author: arnautov-anton

examples/vite/src/App.tsx

@@ -27,6 +27,9 @@ import {
   MessageList,
   Window,
   WithComponents,
+  GroupAvatar,
+  ReactionsList,
+  useMessageContext,
 } from 'stream-chat-react';
 import { createTextComposerEmojiMiddleware, EmojiPicker } from 'stream-chat-react/emojis';
 import { init, SearchIndex } from 'emoji-mart';
@@ -79,6 +82,19 @@ const useUser = () => {
   return { userId: userId, tokenProvider };
 };
 
+const CustomMessageReactions = (props: React.ComponentProps<typeof ReactionsList>) => {
+  const { isMyMessage } = useMessageContext();
+  const messageBelongsToCurrentUser = isMyMessage();
+
+  return (
+    <ReactionsList
+      {...props}
+      horizontalPosition={messageBelongsToCurrentUser ? 'start' : 'end'}
+      verticalPosition='top'
+    />
+  );
+};
+
 const App = () => {
   const { userId, tokenProvider } = useUser();
 
@@ -141,7 +157,13 @@ const App = () => {
   if (!chatClient) return <>Loading...</>;
 
   return (
-    <WithComponents overrides={{ emojiSearchIndex: SearchIndex, EmojiPicker }}>
+    <WithComponents
+      overrides={{
+        emojiSearchIndex: SearchIndex,
+        EmojiPicker,
+        ReactionsList: CustomMessageReactions,
+      }}
+    >
       <Chat client={chatClient} isMessageAIGenerated={isMessageAIGenerated}>
         <ChatView>
           <ChatView.Selector />

src/components/Message/styling/Message.scss

@@ -255,7 +255,7 @@
 
     .str-chat__message-options {
       grid-area: options;
-      align-items: center;
+      align-items: flex-start;
       justify-content: flex-end;
       flex-direction: row-reverse;
       width: var(--str-chat-message-options-size);
@@ -303,14 +303,13 @@
       grid-area: reactions;
       min-width: 100%;
       z-index: 1;
-      position: absolute;
 
       &:has(.str-chat__message-reactions--top) {
-        bottom: calc(100% - var(--spacing-xs));
+        margin-bottom: calc(var(--spacing-xxs) * -1);
       }
 
       &:has(.str-chat__message-reactions--bottom) {
-        top: calc(100% + var(--spacing-xxs));
+        padding-block: var(--spacing-xxs);
       }
 
       &:has(.str-chat__message-reactions--end) {
@@ -323,19 +322,17 @@
     }
 
     &:has(.str-chat__message-reactions--top) {
-      margin-top: calc(26px - var(--spacing-xs));
     }
 
     &:has(.str-chat__message-reactions--bottom) {
-      margin-bottom: calc(26px + var(--spacing-xxs) * 2);
-
       grid-template-areas:
         'message-bubble options'
         'reactions .';
     }
 
     .str-chat__message-bubble {
       display: flex;
+      justify-self: flex-start;
       grid-area: message-bubble;
       position: relative;
       min-width: 0;
@@ -354,6 +351,7 @@
   }
 
   &.str-chat__message--me .str-chat__message-bubble {
+    justify-self: flex-end;
     background-color: var(--str-chat__own-message-bubble-background-color);
   }