From d756eff04f8357e9ffe74ba709ccae23aee6c6b1 Mon Sep 17 00:00:00 2001 From: Anton Arnautov Date: Thu, 5 Feb 2026 19:58:37 +0100 Subject: [PATCH 1/4] Initial commit --- examples/vite/src/stream-imports-layout.scss | 2 +- examples/vite/src/stream-imports-theme.scss | 2 +- src/components/Message/styling/Message.scss | 90 ++++++++++++++++--- src/components/Reactions/ReactionsList.tsx | 69 +++++++------- .../Reactions/styling/ReactionList.scss | 65 ++++++++++++++ src/styling/index.scss | 1 + 6 files changed, 183 insertions(+), 46 deletions(-) create mode 100644 src/components/Reactions/styling/ReactionList.scss diff --git a/examples/vite/src/stream-imports-layout.scss b/examples/vite/src/stream-imports-layout.scss index 9b13ffc4f..ce93ed832 100644 --- a/examples/vite/src/stream-imports-layout.scss +++ b/examples/vite/src/stream-imports-layout.scss @@ -32,7 +32,7 @@ //@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/MessageReactions/MessageReactions-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'; @use 'stream-chat-react/dist/scss/v2/Notification/MessageNotification-layout'; diff --git a/examples/vite/src/stream-imports-theme.scss b/examples/vite/src/stream-imports-theme.scss index a41570fe1..ff14d30dc 100644 --- a/examples/vite/src/stream-imports-theme.scss +++ b/examples/vite/src/stream-imports-theme.scss @@ -28,7 +28,7 @@ @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/MessageReactions/MessageReactions-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'; @use 'stream-chat-react/dist/scss/v2/Notification/MessageNotification-theme'; diff --git a/src/components/Message/styling/Message.scss b/src/components/Message/styling/Message.scss index 46501179f..e686e8cc5 100644 --- a/src/components/Message/styling/Message.scss +++ b/src/components/Message/styling/Message.scss @@ -17,7 +17,9 @@ --str-chat__message-status-color: var(--str-chat__primary-color); --str-chat__message-replies-count-color: var(--str-chat__primary-color); --str-chat__message-background-color: transparent; - --str-chat__message-highlighted-background-color: var(--str-chat__message-highlight-color); + --str-chat__message-highlighted-background-color: var( + --str-chat__message-highlight-color + ); --str-chat__message-border-block-start: none; --str-chat__message-border-block-end: none; --str-chat__message-border-inline-start: none; @@ -26,7 +28,9 @@ --str-chat__message-active-background-color: transparent; --str-chat__message-options-color: var(--str-chat__text-low-emphasis-color); - --str-chat__message-options-hover-background-color: var(--str-chat__tertiary-surface-color); + --str-chat__message-options-hover-background-color: var( + --str-chat__tertiary-surface-color + ); --str-chat__message-options-border-radius: var(--str-chat__border-radius-circle); --str-chat__message-options-active-color: var(--str-chat__primary-color); @@ -35,7 +39,9 @@ --str-chat__message-bubble-background-color: var(--chat-bg-incoming); --str-chat__own-message-bubble-color: var(--chat-text-message); --str-chat__own-message-bubble-background-color: var(--chat-bg-outgoing); - --str-chat__quoted-message-bubble-background-color: var(--str-chat__secondary-background-color); + --str-chat__quoted-message-bubble-background-color: var( + --str-chat__secondary-background-color + ); --str-chat__message-bubble-border-block-start: none; --str-chat__message-bubble-border-block-end: none; --str-chat__message-bubble-border-inline-start: none; @@ -80,7 +86,9 @@ --str-chat__date-separator-box-shadow: none; --str-chat__translation-notice-color: var(--str-chat__text-low-emphasis-color); - --str-chat__translation-notice-active-background-color: var(--str-chat__tertiary-surface-color); + --str-chat__translation-notice-active-background-color: var( + --str-chat__tertiary-surface-color + ); --str-chat__message-reminder-color: var(--str-chat__primary-color); --str-chat__message-reminder-background-color: var(--str-chat__grey50); @@ -113,7 +121,9 @@ --str-chat-message-options-size: calc(3 * var(--str-chat__message-options-button-size)); &.str-chat__message-without-touch-support { - --str-chat-message-options-size: calc(1 * var(--str-chat__message-options-button-size)); + --str-chat-message-options-size: calc( + 1 * var(--str-chat__message-options-button-size) + ); } .str-chat__message-bubble { @@ -130,7 +140,6 @@ } } - .str-chat__message.str-chat__message--has-attachment { --str-chat__message-max-width: var(--str-chat__message-with-attachment-max-width); @@ -183,7 +192,7 @@ font: var(--str-chat__caption-medium-text); } - &.str-chat__message--other { + &.str-chat__message--other { grid-template-areas: '. message-reminder' 'avatar message' @@ -210,6 +219,10 @@ > .str-chat__message-sender-avatar { display: none; } + + .str-chat__message-inner .str-chat__message-reactions-host { + right: 0; + } } &.str-chat__message--deleted { @@ -234,7 +247,7 @@ grid-area: message; display: grid; grid-template-areas: - 'reactions reactions' + 'reactions .' 'message-bubble options'; grid-template-columns: auto 1fr; column-gap: var(--str-chat__spacing-2); @@ -242,7 +255,7 @@ .str-chat__message-options { grid-area: options; - align-items: flex-start; + align-items: center; justify-content: flex-end; flex-direction: row-reverse; width: var(--str-chat-message-options-size); @@ -286,10 +299,43 @@ } .str-chat__message-reactions-host { + display: flex; grid-area: reactions; + min-width: 100%; + z-index: 1; + position: absolute; + + &:has(.str-chat__message-reactions--top) { + bottom: calc(100% - var(--spacing-xs)); + } + + &:has(.str-chat__message-reactions--bottom) { + top: calc(100% + var(--spacing-xxs)); + } + + &:has(.str-chat__message-reactions--end) { + justify-content: flex-end; + } + + &:has(.str-chat__message-reactions--start) { + justify-content: flex-start; + } + } + + &: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; grid-area: message-bubble; position: relative; min-width: 0; @@ -314,13 +360,20 @@ &.str-chat__message--me .str-chat__message-inner { grid-template-areas: 'reminder reminder' - 'reactions reactions' + '. reactions' 'options message-bubble'; grid-template-columns: 1fr auto; .str-chat__message-options { flex-direction: row; } + + &:has(.str-chat__message-reactions--bottom) { + grid-template-areas: + 'reminder reminder' + 'options message-bubble' + '. reactions'; + } } .str-chat__translation-notice { @@ -517,11 +570,19 @@ } // Message options display - default mode: they appear when .str-chat__li is hovered -.str-chat__ul:not(.str-chat__message-options-in-bubble, .str-chat__message-with-touch-support), -.str-chat__virtual-list:not(.str-chat__message-options-in-bubble, .str-chat__message-with-touch-support) { +.str-chat__ul:not( + .str-chat__message-options-in-bubble, + .str-chat__message-with-touch-support + ), +.str-chat__virtual-list:not( + .str-chat__message-options-in-bubble, + .str-chat__message-with-touch-support + ) { /* This rule won't be applied in browsers that don't support :has() */ .str-chat__li:hover:not(:has(.str-chat__reaction-list:hover, .str-chat__modal--open)), - .str-chat__li:focus-within:not(:has(.str-chat__reaction-list:focus-within, .str-chat__modal--open)), + .str-chat__li:focus-within:not( + :has(.str-chat__reaction-list:focus-within, .str-chat__modal--open) + ), .str-chat__li:has(.str-chat__message-options--active) { .str-chat__message-options { display: flex; @@ -598,7 +659,8 @@ } } -.str-chat__message--other .str-chat__message-inner:not(:has(.str-chat__message-options--active)) { +.str-chat__message--other + .str-chat__message-inner:not(:has(.str-chat__message-options--active)) { margin-inline-end: var(--str-chat-message-options-size); } diff --git a/src/components/Reactions/ReactionsList.tsx b/src/components/Reactions/ReactionsList.tsx index cb122c85a..124d8c4dc 100644 --- a/src/components/Reactions/ReactionsList.tsx +++ b/src/components/Reactions/ReactionsList.tsx @@ -1,3 +1,4 @@ +/* eslint-disable sort-keys */ import React, { useState } from 'react'; import clsx from 'clsx'; @@ -5,7 +6,11 @@ import type { ReactionsListModalProps } from './ReactionsListModal'; import { ReactionsListModal as DefaultReactionsListModal } from './ReactionsListModal'; import { useProcessReactions } from './hooks/useProcessReactions'; import type { MessageContextValue } from '../../context'; -import { useComponentContext, useTranslationContext } from '../../context'; +import { + useComponentContext, + useMessageContext, + useTranslationContext, +} from '../../context'; import { MAX_MESSAGE_REACTIONS_TO_FETCH } from '../Message/hooks'; @@ -44,17 +49,28 @@ export type ReactionsListProps = Partial< sortReactionDetails?: ReactionDetailsComparator; /** Comparator function to sort reactions, defaults to chronological order */ sortReactions?: ReactionsComparator; + + /** + * Positioning of the reactions list relative to the message. Position is flipped by default for the messages of other users. + */ + horizontalPosition?: 'start' | 'end' | null; + verticalPosition?: 'top' | 'bottom' | null; }; const UnMemoizedReactionsList = (props: ReactionsListProps) => { + const { isMyMessage } = useMessageContext(); + const messageBelongsToCurrentUser = isMyMessage(); + const { handleFetchReactions, + horizontalPosition = messageBelongsToCurrentUser ? 'start' : 'end', // eslint-disable-next-line @typescript-eslint/no-unused-vars reactionDetailsSort, - reverse = false, sortReactionDetails, + verticalPosition = 'top', ...rest } = props; + const { existingReactions, hasReactions, totalReactionCount } = useProcessReactions(rest); const [selectedReactionType, setSelectedReactionType] = useState( @@ -77,47 +93,40 @@ const UnMemoizedReactionsList = (props: ReactionsListProps) => { <>
-
    +
      {existingReactions.map( - ({ EmojiComponent, isOwnReaction, reactionCount, reactionType }) => + ({ EmojiComponent, reactionCount, reactionType }) => EmojiComponent && (
    • - + {reactionCount} +
      • ), )} -
    • - {totalReactionCount} -
    + + {totalReactionCount} +
{selectedReactionType !== null && ( Date: Fri, 6 Feb 2026 11:50:39 +0100 Subject: [PATCH 2/4] Adjustments & limitation removal --- examples/vite/src/App.tsx | 24 ++++++++++++++++++++- src/components/Message/styling/Message.scss | 12 +++++------ 2 files changed, 28 insertions(+), 8 deletions(-) diff --git a/examples/vite/src/App.tsx b/examples/vite/src/App.tsx index 128c58d9f..9b7c910ed 100644 --- a/examples/vite/src/App.tsx +++ b/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) => { + const { isMyMessage } = useMessageContext(); + const messageBelongsToCurrentUser = isMyMessage(); + + return ( + + ); +}; + const App = () => { const { userId, tokenProvider } = useUser(); @@ -141,7 +157,13 @@ const App = () => { if (!chatClient) return <>Loading...; return ( - + diff --git a/src/components/Message/styling/Message.scss b/src/components/Message/styling/Message.scss index e686e8cc5..a77779586 100644 --- a/src/components/Message/styling/Message.scss +++ b/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,12 +322,9 @@ } &: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 .'; @@ -336,6 +332,7 @@ .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); } From 02bd9bb6eb8db62023d192eb4861e46bc54db06f Mon Sep 17 00:00:00 2001 From: Anton Arnautov Date: Fri, 6 Feb 2026 17:11:22 +0100 Subject: [PATCH 3/4] Another set of adjustments with demo --- examples/vite/src/App.tsx | 162 +++++++++++++----- src/components/Message/styling/Message.scss | 15 +- src/components/Reactions/ReactionsList.tsx | 39 +++-- .../Reactions/styling/ReactionList.scss | 69 ++++---- 4 files changed, 181 insertions(+), 104 deletions(-) diff --git a/examples/vite/src/App.tsx b/examples/vite/src/App.tsx index 9b7c910ed..10c7d6af7 100644 --- a/examples/vite/src/App.tsx +++ b/examples/vite/src/App.tsx @@ -1,4 +1,12 @@ -import { type PropsWithChildren, useCallback, useEffect, useMemo } from 'react'; +import { + createContext, + type PropsWithChildren, + useCallback, + useContext, + useEffect, + useMemo, + useState, +} from 'react'; import { ChannelFilters, ChannelOptions, @@ -85,19 +93,44 @@ const useUser = () => { const CustomMessageReactions = (props: React.ComponentProps) => { const { isMyMessage } = useMessageContext(); const messageBelongsToCurrentUser = isMyMessage(); + const { visualStyle, verticalPosition, horizontalPosition } = useContext(TempCtx); return ( ); }; +type TempCtxValue = { + visualStyle: 'clustered' | 'segmented'; + verticalPosition: 'top' | 'bottom'; + horizontalPosition: 'start' | 'end'; +}; +const TempCtx = createContext({ + visualStyle: 'clustered', + verticalPosition: 'top', + horizontalPosition: 'start', +}); + const App = () => { const { userId, tokenProvider } = useUser(); + const [tempCtxValue, setTempCtxValue] = useState({ + visualStyle: 'clustered', + verticalPosition: 'top', + horizontalPosition: 'start', + }); + const chatClient = useCreateChatClient({ apiKey, tokenOrProvider: tokenProvider, @@ -157,49 +190,86 @@ const App = () => { if (!chatClient) return <>Loading...; return ( - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + +
+ + + +
+ + + + + + + + + + + + + + + + + + ); }; diff --git a/src/components/Message/styling/Message.scss b/src/components/Message/styling/Message.scss index a77779586..012393bbb 100644 --- a/src/components/Message/styling/Message.scss +++ b/src/components/Message/styling/Message.scss @@ -111,8 +111,8 @@ .str-chat__message-bubble { background-color: transparent; overflow: visible; - font-size: 64px; - line-height: 64px; + font-size: var(--size-64); + line-height: 1; } } } @@ -196,10 +196,10 @@ grid-template-areas: '. message-reminder' 'avatar message' - '. replies' - '. translation-notice' - '. custom-metadata' - '. metadata'; + 'avatar replies' + 'avatar translation-notice' + 'avatar custom-metadata' + 'avatar metadata'; column-gap: var(--str-chat__spacing-2); grid-template-columns: auto 1fr; justify-items: flex-start; @@ -238,7 +238,7 @@ grid-template-columns: auto; } - .str-chat__message-sender-avatar { + .str-chat__avatar:has(~ .str-chat__message-inner) { grid-area: avatar; align-self: end; } @@ -322,6 +322,7 @@ } &:has(.str-chat__message-reactions--top) { + // maybe remove later } &:has(.str-chat__message-reactions--bottom) { diff --git a/src/components/Reactions/ReactionsList.tsx b/src/components/Reactions/ReactionsList.tsx index 124d8c4dc..a397f6d79 100644 --- a/src/components/Reactions/ReactionsList.tsx +++ b/src/components/Reactions/ReactionsList.tsx @@ -1,4 +1,3 @@ -/* eslint-disable sort-keys */ import React, { useState } from 'react'; import clsx from 'clsx'; @@ -55,6 +54,7 @@ export type ReactionsListProps = Partial< */ horizontalPosition?: 'start' | 'end' | null; verticalPosition?: 'top' | 'bottom' | null; + visualStyle?: 'clustered' | 'segmented' | null; }; const UnMemoizedReactionsList = (props: ReactionsListProps) => { @@ -68,6 +68,7 @@ const UnMemoizedReactionsList = (props: ReactionsListProps) => { reactionDetailsSort, sortReactionDetails, verticalPosition = 'top', + visualStyle = 'clustered', ...rest } = props; @@ -79,12 +80,13 @@ const UnMemoizedReactionsList = (props: ReactionsListProps) => { const { t } = useTranslationContext('ReactionsList'); const { ReactionsListModal = DefaultReactionsListModal } = useComponentContext(); - const handleReactionButtonClick = (reactionType: string) => { + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const handleReactionButtonClick = (reactionType: ReactionType) => { if (totalReactionCount > MAX_MESSAGE_REACTIONS_TO_FETCH) { return; } - setSelectedReactionType(reactionType as ReactionType); + setSelectedReactionType(reactionType); }; if (!hasReactions) return null; @@ -98,8 +100,8 @@ const UnMemoizedReactionsList = (props: ReactionsListProps) => { typeof horizontalPosition === 'string', [`str-chat__message-reactions--${verticalPosition}`]: typeof verticalPosition === 'string', - 'str-chat__message-reactions--clustered': true, - 'str-chat__message-reactions--segmented': false, + [`str-chat__message-reactions--${visualStyle}`]: + typeof visualStyle === 'string', })} role='figure' > @@ -107,26 +109,27 @@ const UnMemoizedReactionsList = (props: ReactionsListProps) => { {existingReactions.map( ({ EmojiComponent, reactionCount, reactionType }) => EmojiComponent && ( -
  • +
  • - - {reactionCount} - + {visualStyle === 'segmented' && ( + + {reactionCount} + + )}
    • ), )} - - {totalReactionCount} - + {visualStyle === 'clustered' && ( + + {totalReactionCount} + + )} {selectedReactionType !== null && ( Date: Mon, 9 Feb 2026 13:18:00 +0100 Subject: [PATCH 4/4] Post-review adjustments --- examples/vite/src/App.tsx | 21 +++------- src/components/Message/styling/Message.scss | 31 +++++++------- src/components/Reactions/ReactionsList.tsx | 42 +++++++++---------- .../Reactions/styling/ReactionList.scss | 27 ++++++++---- 4 files changed, 61 insertions(+), 60 deletions(-) diff --git a/examples/vite/src/App.tsx b/examples/vite/src/App.tsx index 10c7d6af7..3f1cd2b6e 100644 --- a/examples/vite/src/App.tsx +++ b/examples/vite/src/App.tsx @@ -91,20 +91,12 @@ const useUser = () => { }; const CustomMessageReactions = (props: React.ComponentProps) => { - const { isMyMessage } = useMessageContext(); - const messageBelongsToCurrentUser = isMyMessage(); - const { visualStyle, verticalPosition, horizontalPosition } = useContext(TempCtx); + const { visualStyle, verticalPosition, flipHorizontalPosition } = useContext(TempCtx); return ( @@ -114,12 +106,12 @@ const CustomMessageReactions = (props: React.ComponentProps({ visualStyle: 'clustered', verticalPosition: 'top', - horizontalPosition: 'start', + flipHorizontalPosition: false, }); const App = () => { @@ -128,7 +120,7 @@ const App = () => { const [tempCtxValue, setTempCtxValue] = useState({ visualStyle: 'clustered', verticalPosition: 'top', - horizontalPosition: 'start', + flipHorizontalPosition: false, }); const chatClient = useCreateChatClient({ @@ -239,8 +231,7 @@ const App = () => { onClick={() => setTempCtxValue((prev) => ({ ...prev, - horizontalPosition: - prev.horizontalPosition === 'start' ? 'end' : 'start', + flipHorizontalPosition: !prev.flipHorizontalPosition, })) } > diff --git a/src/components/Message/styling/Message.scss b/src/components/Message/styling/Message.scss index 012393bbb..992855ec7 100644 --- a/src/components/Message/styling/Message.scss +++ b/src/components/Message/styling/Message.scss @@ -203,6 +203,16 @@ column-gap: var(--str-chat__spacing-2); grid-template-columns: auto 1fr; justify-items: flex-start; + + .str-chat__message-inner { + .str-chat__message-reactions-host { + justify-content: flex-start; + + &:has(.str-chat__message-reactions--flipped-horizontally) { + justify-content: flex-end; + } + } + } } &.str-chat__message--me { @@ -215,13 +225,14 @@ 'metadata'; justify-items: end; - // > selector added to not hide sender of inline replies - > .str-chat__message-sender-avatar { - display: none; - } + .str-chat__message-inner { + .str-chat__message-reactions-host { + justify-content: flex-end; - .str-chat__message-inner .str-chat__message-reactions-host { - right: 0; + &:has(.str-chat__message-reactions--flipped-horizontally) { + justify-content: flex-start; + } + } } } @@ -311,14 +322,6 @@ &:has(.str-chat__message-reactions--bottom) { padding-block: var(--spacing-xxs); } - - &:has(.str-chat__message-reactions--end) { - justify-content: flex-end; - } - - &:has(.str-chat__message-reactions--start) { - justify-content: flex-start; - } } &:has(.str-chat__message-reactions--top) { diff --git a/src/components/Reactions/ReactionsList.tsx b/src/components/Reactions/ReactionsList.tsx index a397f6d79..9944e6d5f 100644 --- a/src/components/Reactions/ReactionsList.tsx +++ b/src/components/Reactions/ReactionsList.tsx @@ -5,11 +5,7 @@ import type { ReactionsListModalProps } from './ReactionsListModal'; import { ReactionsListModal as DefaultReactionsListModal } from './ReactionsListModal'; import { useProcessReactions } from './hooks/useProcessReactions'; import type { MessageContextValue } from '../../context'; -import { - useComponentContext, - useMessageContext, - useTranslationContext, -} from '../../context'; +import { useComponentContext, useTranslationContext } from '../../context'; import { MAX_MESSAGE_REACTIONS_TO_FETCH } from '../Message/hooks'; @@ -52,18 +48,15 @@ export type ReactionsListProps = Partial< /** * Positioning of the reactions list relative to the message. Position is flipped by default for the messages of other users. */ - horizontalPosition?: 'start' | 'end' | null; + flipHorizontalPosition?: boolean; verticalPosition?: 'top' | 'bottom' | null; visualStyle?: 'clustered' | 'segmented' | null; }; const UnMemoizedReactionsList = (props: ReactionsListProps) => { - const { isMyMessage } = useMessageContext(); - const messageBelongsToCurrentUser = isMyMessage(); - const { + flipHorizontalPosition = false, handleFetchReactions, - horizontalPosition = messageBelongsToCurrentUser ? 'start' : 'end', // eslint-disable-next-line @typescript-eslint/no-unused-vars reactionDetailsSort, sortReactionDetails, @@ -80,7 +73,6 @@ const UnMemoizedReactionsList = (props: ReactionsListProps) => { const { t } = useTranslationContext('ReactionsList'); const { ReactionsListModal = DefaultReactionsListModal } = useComponentContext(); - // eslint-disable-next-line @typescript-eslint/no-unused-vars const handleReactionButtonClick = (reactionType: ReactionType) => { if (totalReactionCount > MAX_MESSAGE_REACTIONS_TO_FETCH) { return; @@ -96,8 +88,7 @@ const UnMemoizedReactionsList = (props: ReactionsListProps) => {
    { ({ EmojiComponent, reactionCount, reactionType }) => EmojiComponent && (
  • - - - - {visualStyle === 'segmented' && ( - - {reactionCount} +
    • ), )} diff --git a/src/components/Reactions/styling/ReactionList.scss b/src/components/Reactions/styling/ReactionList.scss index b7e3427ec..ba30a428c 100644 --- a/src/components/Reactions/styling/ReactionList.scss +++ b/src/components/Reactions/styling/ReactionList.scss @@ -1,3 +1,5 @@ +@use '../../../styling/utils' as utils; + .str-chat__message-reactions { user-select: none; display: flex; @@ -11,6 +13,7 @@ font-weight: var(--typography-font-weight-bold); line-height: 1; + .str-chat__message-reactions__list { list-style: none; margin: 0; @@ -22,14 +25,21 @@ .str-chat__message-reactions__list-item { display: flex; - .str-chat__message-reactions__item-icon { - // FIXME: ridiculous hack so that the emoji block is in a square container (1/1 ratio) - font-size: 13px; - line-height: 16px; - font-family: system-ui, sans-serif; - font-style: normal; - letter-spacing: 0; + .str-chat__message-reactions__list-item-button { + @include utils.unset-button; display: flex; + cursor: pointer; + font-weight: inherit; + + .str-chat__message-reactions__item-icon { + // FIXME: ridiculous hack so that the emoji block is in a square container (1/1 ratio) + font-size: 13px; + line-height: 16px; + font-family: system-ui, sans-serif; + font-style: normal; + letter-spacing: 0; + display: flex; + } } } } @@ -52,7 +62,8 @@ &.str-chat__message-reactions--segmented { .str-chat__message-reactions__list { - .str-chat__message-reactions__list-item { + display: flex; + .str-chat__message-reactions__list-item-button { display: flex; padding: var(--spacing-xxs) var(--spacing-xs); justify-content: center;