stream-chat-react 12.0.0-rc.10 → 12.0.0-rc.12

package/dist/components/Avatar/Avatar.js

@@ -1,5 +1,6 @@
 import clsx from 'clsx';
 import React, { useEffect, useState } from 'react';
+import { Icon } from '../Threads/icons';
 import { getWholeChar } from '../../utils';
 /**
  * A round avatar image with fallback to username's first letter
@@ -15,6 +16,9 @@ export const Avatar = (props) => {
     const showImage = image && !error;
     return (React.createElement("div", { className: clsx(`str-chat__avatar str-chat__message-sender-avatar`, className, {
             ['str-chat__avatar--multiple-letters']: initials.length > 1,
+            ['str-chat__avatar--no-letters']: !initials.length,
             ['str-chat__avatar--one-letter']: initials.length === 1,
-        }), "data-testid": 'avatar', onClick: onClick, onMouseOver: onMouseOver, title: name }, showImage ? (React.createElement("img", { alt: initials, className: clsx(`str-chat__avatar-image`), "data-testid": 'avatar-img', onError: () => setError(true), src: image })) : (React.createElement("div", { className: 'str-chat__avatar-fallback', "data-testid": 'avatar-fallback' }, initials))));
+        }), "data-testid": 'avatar', onClick: onClick, onMouseOver: onMouseOver, role: 'button', title: name }, showImage ? (React.createElement("img", { alt: initials, className: 'str-chat__avatar-image', "data-testid": 'avatar-img', onError: () => setError(true), src: image })) : (React.createElement(React.Fragment, null,
+        !!initials.length && (React.createElement("div", { className: clsx('str-chat__avatar-fallback'), "data-testid": 'avatar-fallback' }, initials)),
+        !initials.length && React.createElement(Icon.User, null)))));
 };

package/dist/components/Channel/Channel.d.ts

@@ -2,11 +2,10 @@ import React, { PropsWithChildren } from 'react';
 import { ChannelQueryOptions, EventAPIResponse, Message, MessageResponse, Channel as StreamChannel, StreamChat, UpdatedMessage } from 'stream-chat';
 import { OnMentionAction } from './hooks/useMentionsHandlers';
 import { LoadingErrorIndicatorProps } from '../Loading';
-import { StreamMessage } from '../../context/ChannelStateContext';
-import { ComponentContextValue } from '../../context/ComponentContext';
+import { ComponentContextValue, StreamMessage } from '../../context';
 import type { UnreadMessagesNotificationProps } from '../MessageList';
-import type { MessageProps } from '../Message/types';
-import type { MessageInputProps } from '../MessageInput/MessageInput';
+import type { MessageProps } from '../Message';
+import type { MessageInputProps } from '../MessageInput';
 import type { ChannelUnreadUiState, CustomTrigger, DefaultStreamChatGenerics, GiphyVersions, ImageAttachmentSizeHandler, SendMessageOptions, UpdateMessageOptions, VideoAttachmentSizeHandler } from '../../types/types';
 import type { URLEnrichmentConfig } from '../MessageInput/hooks/useLinkPreviews';
 import { ReactionOptions } from '../Reactions';

package/dist/components/Channel/Channel.js

@@ -10,26 +10,17 @@ import { useCreateTypingContext } from './hooks/useCreateTypingContext';
 import { useEditMessageHandler } from './hooks/useEditMessageHandler';
 import { useIsMounted } from './hooks/useIsMounted';
 import { useMentionsHandlers } from './hooks/useMentionsHandlers';
-import { Attachment as DefaultAttachment } from '../Attachment/Attachment';
 import { LoadingErrorIndicator as DefaultLoadingErrorIndicator, } from '../Loading';
 import { LoadingChannel as DefaultLoadingIndicator } from './LoadingChannel';
-import { MessageSimple } from '../Message/MessageSimple';
 import { DropzoneProvider } from '../MessageInput/DropzoneProvider';
-import { ChannelActionProvider, } from '../../context/ChannelActionContext';
-import { ChannelStateProvider, } from '../../context/ChannelStateContext';
-import { ComponentProvider } from '../../context/ComponentContext';
-import { useChatContext } from '../../context/ChatContext';
-import { useTranslationContext } from '../../context/TranslationContext';
-import { TypingProvider } from '../../context/TypingContext';
+import { ChannelActionProvider, ChannelStateProvider, TypingProvider, useChatContext, useTranslationContext, WithComponents, } from '../../context';
 import { DEFAULT_HIGHLIGHT_DURATION, DEFAULT_INITIAL_CHANNEL_PAGE_SIZE, DEFAULT_JUMP_TO_PAGE_SIZE, DEFAULT_NEXT_CHANNEL_PAGE_SIZE, DEFAULT_THREAD_PAGE_SIZE, } from '../../constants/limits';
-import { hasMoreMessagesProbably, UnreadMessagesSeparator } from '../MessageList';
+import { hasMoreMessagesProbably } from '../MessageList';
 import { useChannelContainerClasses } from './hooks/useChannelContainerClasses';
 import { findInMsgSetByDate, findInMsgSetById, makeAddNotifications } from './utils';
 import { getChannel } from '../../utils';
 import { getImageAttachmentConfiguration, getVideoAttachmentConfiguration, } from '../Attachment/attachment-sizing';
-import { defaultReactionOptions } from '../Reactions';
-import { EventComponent } from '../EventComponent';
-import { DateSeparator } from '../DateSeparator';
+import { useThreadContext } from '../Threads';
 const isUserResponseArray = (output) => output[0]?.id != null;
 const UnMemoizedChannel = (props) => {
     const { channel: propsChannel, EmptyPlaceholder = null, LoadingErrorIndicator, LoadingIndicator = DefaultLoadingIndicator, } = props;
@@ -60,6 +51,7 @@ const ChannelInner = (props) => {
     const { client, customClasses, latestMessageDatesByChannels, mutes, theme, } = useChatContext('Channel');
     const { t } = useTranslationContext('Channel');
     const { channelClass, chatClass, chatContainerClass, windowsEmojiClass, } = useChannelContainerClasses({ customClasses });
+    const thread = useThreadContext();
     const [channelConfig, setChannelConfig] = useState(channel.getConfig());
     const [notifications, setNotifications] = useState([]);
     const [quotedMessage, setQuotedMessage] = useState();
@@ -565,25 +557,37 @@ const ChannelInner = (props) => {
                     errorStatusCode: parsedError.status || undefined,
                     status: 'failed',
                 });
+                thread?.upsertReplyLocally({
+                    // @ts-expect-error
+                    message: {
+                        ...message,
+                        error: parsedError,
+                        errorStatusCode: parsedError.status || undefined,
+                        status: 'failed',
+                    },
+                });
             }
         }
     };
     const sendMessage = async ({ attachments = [], mentioned_users = [], parent, text = '', }, customMessageData, options) => {
         channel.state.filterErrorMessages();
         const messagePreview = {
-            __html: text,
             attachments,
             created_at: new Date(),
             html: text,
             id: customMessageData?.id ?? `${client.userID}-${nanoid()}`,
             mentioned_users,
+            parent_id: parent?.id,
             reactions: [],
             status: 'sending',
             text,
             type: 'regular',
             user: client.user,
-            ...(parent?.id ? { parent_id: parent.id } : null),
         };
+        thread?.upsertReplyLocally({
+            // @ts-expect-error
+            message: messagePreview,
+        });
         updateMessage(messagePreview);
         await doSendMessage(messagePreview, customMessageData, options);
     };
@@ -722,8 +726,9 @@ const ChannelInner = (props) => {
         jumpToLatestMessage,
         setChannelUnreadUiState,
     ]);
+    // @ts-expect-error
     const componentContextValue = useMemo(() => ({
-        Attachment: props.Attachment || DefaultAttachment,
+        Attachment: props.Attachment,
         AttachmentPreviewList: props.AttachmentPreviewList,
         AudioRecorder: props.AudioRecorder,
         AutocompleteSuggestionItem: props.AutocompleteSuggestionItem,
@@ -732,7 +737,7 @@ const ChannelInner = (props) => {
         BaseImage: props.BaseImage,
         CooldownTimer: props.CooldownTimer,
         CustomMessageActionsList: props.CustomMessageActionsList,
-        DateSeparator: props.DateSeparator || DateSeparator,
+        DateSeparator: props.DateSeparator,
         EditMessageInput: props.EditMessageInput,
         EmojiPicker: props.EmojiPicker,
         emojiSearchIndex: props.emojiSearchIndex,
@@ -743,7 +748,7 @@ const ChannelInner = (props) => {
         Input: props.Input,
         LinkPreviewList: props.LinkPreviewList,
         LoadingIndicator: props.LoadingIndicator,
-        Message: props.Message || MessageSimple,
+        Message: props.Message,
         MessageBouncePrompt: props.MessageBouncePrompt,
         MessageDeleted: props.MessageDeleted,
         MessageListNotifications: props.MessageListNotifications,
@@ -751,13 +756,13 @@ const ChannelInner = (props) => {
         MessageOptions: props.MessageOptions,
         MessageRepliesCountButton: props.MessageRepliesCountButton,
         MessageStatus: props.MessageStatus,
-        MessageSystem: props.MessageSystem || EventComponent,
+        MessageSystem: props.MessageSystem,
         MessageTimestamp: props.MessageTimestamp,
         ModalGallery: props.ModalGallery,
         PinIndicator: props.PinIndicator,
         QuotedMessage: props.QuotedMessage,
         QuotedMessagePreview: props.QuotedMessagePreview,
-        reactionOptions: props.reactionOptions ?? defaultReactionOptions,
+        reactionOptions: props.reactionOptions,
         ReactionSelector: props.ReactionSelector,
         ReactionsList: props.ReactionsList,
         SendButton: props.SendButton,
@@ -769,11 +774,58 @@ const ChannelInner = (props) => {
         TriggerProvider: props.TriggerProvider,
         TypingIndicator: props.TypingIndicator,
         UnreadMessagesNotification: props.UnreadMessagesNotification,
-        UnreadMessagesSeparator: props.UnreadMessagesSeparator || UnreadMessagesSeparator,
+        UnreadMessagesSeparator: props.UnreadMessagesSeparator,
         VirtualMessage: props.VirtualMessage,
-    }), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [props.reactionOptions]);
+    }), [
+        props.Attachment,
+        props.AttachmentPreviewList,
+        props.AudioRecorder,
+        props.AutocompleteSuggestionItem,
+        props.AutocompleteSuggestionList,
+        props.Avatar,
+        props.BaseImage,
+        props.CooldownTimer,
+        props.CustomMessageActionsList,
+        props.DateSeparator,
+        props.EditMessageInput,
+        props.EmojiPicker,
+        props.EmptyStateIndicator,
+        props.FileUploadIcon,
+        props.GiphyPreviewMessage,
+        props.HeaderComponent,
+        props.Input,
+        props.LinkPreviewList,
+        props.LoadingIndicator,
+        props.Message,
+        props.MessageBouncePrompt,
+        props.MessageDeleted,
+        props.MessageListNotifications,
+        props.MessageNotification,
+        props.MessageOptions,
+        props.MessageRepliesCountButton,
+        props.MessageStatus,
+        props.MessageSystem,
+        props.MessageTimestamp,
+        props.ModalGallery,
+        props.PinIndicator,
+        props.QuotedMessage,
+        props.QuotedMessagePreview,
+        props.ReactionSelector,
+        props.ReactionsList,
+        props.SendButton,
+        props.StartRecordingAudioButton,
+        props.ThreadHead,
+        props.ThreadHeader,
+        props.ThreadStart,
+        props.Timestamp,
+        props.TriggerProvider,
+        props.TypingIndicator,
+        props.UnreadMessagesNotification,
+        props.UnreadMessagesSeparator,
+        props.VirtualMessage,
+        props.emojiSearchIndex,
+        props.reactionOptions,
+    ]);
     const typingContextValue = useCreateTypingContext({
         typing,
     });
@@ -793,7 +845,7 @@ const ChannelInner = (props) => {
     return (React.createElement("div", { className: clsx(className, windowsEmojiClass) },
         React.createElement(ChannelStateProvider, { value: channelStateContextValue },
             React.createElement(ChannelActionProvider, { value: channelActionContextValue },
-                React.createElement(ComponentProvider, { value: componentContextValue },
+                React.createElement(WithComponents, { overrides: componentContextValue },
                     React.createElement(TypingProvider, { value: typingContextValue },
                         React.createElement("div", { className: `${chatContainerClass}` },
                             dragAndDropWindow && (React.createElement(DropzoneProvider, { ...optionalMessageInputProps }, children)),

package/dist/components/Chat/hooks/useChat.js

@@ -23,13 +23,17 @@ export const useChat = ({ client, defaultLanguage = 'en', i18nInstance, initialN
         return appSettings.current;
     };
     useEffect(() => {
-        if (client) {
-            const userAgent = client.getUserAgent();
-            if (!userAgent.includes('stream-chat-react')) {
-                // result looks like: 'stream-chat-react-2.3.2-stream-chat-javascript-client-browser-2.2.2'
-                client.setUserAgent(`stream-chat-react-${version}-${userAgent}`);
-            }
+        if (!client)
+            return;
+        const userAgent = client.getUserAgent();
+        if (!userAgent.includes('stream-chat-react')) {
+            // result looks like: 'stream-chat-react-2.3.2-stream-chat-javascript-client-browser-2.2.2'
+            client.setUserAgent(`stream-chat-react-${version}-${userAgent}`);
         }
+        client.threads.registerSubscriptions();
+        return () => {
+            client.threads.unregisterSubscriptions();
+        };
     }, [client]);
     useEffect(() => {
         setMutes(clientMutes);

package/dist/components/ChatView/ChatView.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { PropsWithChildren } from 'react';
+import type { Thread } from 'stream-chat';
+export declare const ChatView: {
+    ({ children }: PropsWithChildren): React.JSX.Element;
+    Channels: ({ children }: PropsWithChildren) => React.JSX.Element | null;
+    Threads: ({ children }: PropsWithChildren) => React.JSX.Element | null;
+    ThreadAdapter: ({ children }: PropsWithChildren) => React.JSX.Element;
+    Selector: () => React.JSX.Element;
+};
+export type ThreadsViewContextValue = {
+    activeThread: Thread | undefined;
+    setActiveThread: (cv: ThreadsViewContextValue['activeThread']) => void;
+};
+export declare const useThreadsViewContext: () => ThreadsViewContextValue;
+export declare const useActiveThread: ({ activeThread }: {
+    activeThread?: Thread;
+}) => void;

package/dist/components/ChatView/ChatView.js

@@ -0,0 +1,100 @@
+import React, { createContext, useContext, useEffect, useMemo, useState } from 'react';
+import { ThreadProvider, useStateStore } from '../Threads';
+import { Icon } from '../Threads/icons';
+import { UnreadCountBadge } from '../Threads/UnreadCountBadge';
+import { useChatContext } from '../../context';
+const availableChatViews = ['channels', 'threads'];
+const ChatViewContext = createContext({
+    activeChatView: 'channels',
+    setActiveChatView: () => undefined,
+});
+export const ChatView = ({ children }) => {
+    const [activeChatView, setActiveChatView] = useState('channels');
+    const value = useMemo(() => ({ activeChatView, setActiveChatView }), [activeChatView]);
+    return (React.createElement(ChatViewContext.Provider, { value: value },
+        React.createElement("div", { className: 'str-chat str-chat__chat-view' }, children)));
+};
+const ChannelsView = ({ children }) => {
+    const { activeChatView } = useContext(ChatViewContext);
+    if (activeChatView !== 'channels')
+        return null;
+    return React.createElement("div", { className: 'str-chat__chat-view__channels' }, children);
+};
+const ThreadsViewContext = createContext({
+    activeThread: undefined,
+    setActiveThread: () => undefined,
+});
+export const useThreadsViewContext = () => useContext(ThreadsViewContext);
+const ThreadsView = ({ children }) => {
+    const { activeChatView } = useContext(ChatViewContext);
+    const [activeThread, setActiveThread] = useState(undefined);
+    const value = useMemo(() => ({ activeThread, setActiveThread }), [activeThread]);
+    if (activeChatView !== 'threads')
+        return null;
+    return (React.createElement(ThreadsViewContext.Provider, { value: value },
+        React.createElement("div", { className: 'str-chat__chat-view__threads' }, children)));
+};
+// thread business logic that's impossible to keep within client but encapsulated for ease of use
+export const useActiveThread = ({ activeThread }) => {
+    useEffect(() => {
+        if (!activeThread)
+            return;
+        const handleVisibilityChange = () => {
+            if (document.visibilityState === 'visible' && document.hasFocus()) {
+                activeThread.activate();
+            }
+            if (document.visibilityState === 'hidden' || !document.hasFocus()) {
+                activeThread.deactivate();
+            }
+        };
+        handleVisibilityChange();
+        window.addEventListener('focus', handleVisibilityChange);
+        window.addEventListener('blur', handleVisibilityChange);
+        return () => {
+            activeThread.deactivate();
+            window.addEventListener('blur', handleVisibilityChange);
+            window.removeEventListener('focus', handleVisibilityChange);
+        };
+    }, [activeThread]);
+};
+// ThreadList under View.Threads context, will access setting function and on item click will set activeThread
+// which can be accessed for the ease of use by ThreadAdapter which forwards it to required ThreadProvider
+// ThreadList can easily live without this context and click handler can be overriden, ThreadAdapter is then no longer needed
+/**
+ * // this setup still works
+ * const MyCustomComponent = () => {
+ *  const [activeThread, setActiveThread] = useState();
+ *
+ *  return <>
+ *    // simplified
+ *    <ThreadList onItemPointerDown={setActiveThread} />
+ *    <ThreadProvider thread={activeThread}>
+ *      <Thread />
+ *    </ThreadProvider>
+ *  </>
+ * }
+ *
+ */
+const ThreadAdapter = ({ children }) => {
+    const { activeThread } = useThreadsViewContext();
+    useActiveThread({ activeThread });
+    return React.createElement(ThreadProvider, { thread: activeThread }, children);
+};
+const selector = (nextValue) => [nextValue.unreadThreadCount];
+const ChatViewSelector = () => {
+    const { client } = useChatContext();
+    const [unreadThreadCount] = useStateStore(client.threads.state, selector);
+    const { activeChatView, setActiveChatView } = useContext(ChatViewContext);
+    return (React.createElement("div", { className: 'str-chat__chat-view__selector' },
+        React.createElement("button", { "aria-selected": activeChatView === 'channels', className: 'str-chat__chat-view__selector-button', onPointerDown: () => setActiveChatView('channels'), role: 'tab' },
+            React.createElement(Icon.MessageBubbleEmpty, null),
+            React.createElement("div", { className: 'str-chat__chat-view__selector-button-text' }, "Channels")),
+        React.createElement("button", { "aria-selected": activeChatView === 'threads', className: 'str-chat__chat-view__selector-button', onPointerDown: () => setActiveChatView('threads'), role: 'tab' },
+            React.createElement(UnreadCountBadge, { count: unreadThreadCount, position: 'top-right' },
+                React.createElement(Icon.MessageBubble, null)),
+            React.createElement("div", { className: 'str-chat__chat-view__selector-button-text' }, "Threads"))));
+};
+ChatView.Channels = ChannelsView;
+ChatView.Threads = ThreadsView;
+ChatView.ThreadAdapter = ThreadAdapter;
+ChatView.Selector = ChatViewSelector;

package/dist/components/ChatView/index.d.ts

@@ -0,0 +1 @@
+export * from './ChatView';

package/dist/components/ChatView/index.js

@@ -0,0 +1 @@
+export * from './ChatView';

package/dist/components/Message/Message.js

@@ -2,13 +2,14 @@ import React, { useCallback, useMemo, useRef } from 'react';
 import { useActionHandler, useDeleteHandler, useEditHandler, useFlagHandler, useMarkUnreadHandler, useMentionsHandler, useMuteHandler, useOpenThreadHandler, usePinHandler, useReactionClick, useReactionHandler, useReactionsFetcher, useRetryHandler, useUserHandler, useUserRole, } from './hooks';
 import { areMessagePropsEqual, getMessageActions, MESSAGE_ACTIONS } from './utils';
 import { MessageProvider, useChannelActionContext, useChannelStateContext, useChatContext, useComponentContext, } from '../../context';
+import { MessageSimple as DefaultMessage } from './MessageSimple';
 const MessageWithContext = (props) => {
     const { canPin, groupedByUser, Message: propMessage, message, messageActions = Object.keys(MESSAGE_ACTIONS), onUserClick: propOnUserClick, onUserHover: propOnUserHover, userRoles, } = props;
     const { client } = useChatContext('Message');
     const { read } = useChannelStateContext('Message');
     const { Message: contextMessage } = useComponentContext('Message');
     const actionsEnabled = message.type === 'regular' && message.status === 'received';
-    const MessageUIComponent = propMessage || contextMessage;
+    const MessageUIComponent = propMessage ?? contextMessage ?? DefaultMessage;
     const { clearEdit, editing, setEdit } = useEditHandler();
     const { onUserClick, onUserHover } = useUserHandler(message, {
         onUserClickHandler: propOnUserClick,

package/dist/components/Message/MessageOptions.js

@@ -1,16 +1,15 @@
 import React from 'react';
 import { ActionsIcon as DefaultActionsIcon, ReactionIcon as DefaultReactionIcon, ThreadIcon as DefaultThreadIcon, } from './icons';
-import { MESSAGE_ACTIONS, showMessageActionsBox } from './utils';
+import { MESSAGE_ACTIONS } from './utils';
 import { MessageActions } from '../MessageActions';
 import { useMessageContext } from '../../context/MessageContext';
 import { useTranslationContext } from '../../context';
 const UnMemoizedMessageOptions = (props) => {
     const { ActionsIcon = DefaultActionsIcon, displayReplies = true, handleOpenThread: propHandleOpenThread, messageWrapperRef, ReactionIcon = DefaultReactionIcon, theme = 'simple', ThreadIcon = DefaultThreadIcon, } = props;
-    const { customMessageActions, getMessageActions, handleOpenThread: contextHandleOpenThread, initialMessage, message, onReactionListClick, showDetailedReactions, threadList, } = useMessageContext('MessageOptions');
+    const { getMessageActions, handleOpenThread: contextHandleOpenThread, initialMessage, message, onReactionListClick, showDetailedReactions, threadList, } = useMessageContext('MessageOptions');
     const { t } = useTranslationContext('MessageOptions');
     const handleOpenThread = propHandleOpenThread || contextHandleOpenThread;
     const messageActions = getMessageActions();
-    const showActionsBox = showMessageActionsBox(messageActions, threadList) || !!customMessageActions;
     const shouldShowReactions = messageActions.indexOf(MESSAGE_ACTIONS.react) > -1;
     const shouldShowReplies = messageActions.indexOf(MESSAGE_ACTIONS.reply) > -1 && displayReplies && !threadList;
     if (!message.type ||
@@ -24,7 +23,7 @@ const UnMemoizedMessageOptions = (props) => {
     }
     const rootClassName = `str-chat__message-${theme}__actions str-chat__message-options`;
     return (React.createElement("div", { className: rootClassName, "data-testid": 'message-options' },
-        showActionsBox && (React.createElement(MessageActions, { ActionsIcon: ActionsIcon, messageWrapperRef: messageWrapperRef })),
+        React.createElement(MessageActions, { ActionsIcon: ActionsIcon, messageWrapperRef: messageWrapperRef }),
         shouldShowReplies && (React.createElement("button", { "aria-label": t('aria/Open Thread'), className: `str-chat__message-${theme}__actions__action str-chat__message-${theme}__actions__action--thread str-chat__message-reply-in-thread-button`, "data-testid": 'thread-action', onClick: handleOpenThread },
             React.createElement(ThreadIcon, { className: 'str-chat__message-action-icon' }))),
         shouldShowReactions && (React.createElement("button", { "aria-expanded": showDetailedReactions, "aria-label": t('aria/Open Reaction Selector'), className: `str-chat__message-${theme}__actions__action str-chat__message-${theme}__actions__action--reactions str-chat__message-reactions-button`, "data-testid": 'message-reaction-action', onClick: onReactionListClick },

package/dist/components/Message/MessageSimple.js

@@ -10,6 +10,7 @@ import { MessageText } from './MessageText';
 import { MessageTimestamp as DefaultMessageTimestamp } from './MessageTimestamp';
 import { areMessageUIPropsEqual, isMessageBounced, isMessageEdited, messageHasAttachments, messageHasReactions, } from './utils';
 import { Avatar as DefaultAvatar } from '../Avatar';
+import { Attachment as DefaultAttachment } from '../Attachment';
 import { CUSTOM_MESSAGE_TYPE } from '../../constants/messageTypes';
 import { EditMessageForm as DefaultEditMessageForm, MessageInput } from '../MessageInput';
 import { MML } from '../MML';
@@ -25,7 +26,7 @@ const MessageSimpleWithContext = (props) => {
     const { t } = useTranslationContext('MessageSimple');
     const [isBounceDialogOpen, setIsBounceDialogOpen] = useState(false);
     const [isEditedTimestampOpen, setEditedTimestampOpen] = useState(false);
-    const { Attachment, Avatar = DefaultAvatar, EditMessageInput = DefaultEditMessageForm, MessageDeleted = DefaultMessageDeleted, MessageBouncePrompt = DefaultMessageBouncePrompt, MessageOptions = DefaultMessageOptions, MessageRepliesCountButton = DefaultMessageRepliesCountButton, MessageStatus = DefaultMessageStatus, MessageTimestamp = DefaultMessageTimestamp, ReactionSelector = DefaultReactionSelector, ReactionsList = DefaultReactionList, PinIndicator, } = useComponentContext('MessageSimple');
+    const { Attachment = DefaultAttachment, Avatar = DefaultAvatar, EditMessageInput = DefaultEditMessageForm, MessageDeleted = DefaultMessageDeleted, MessageBouncePrompt = DefaultMessageBouncePrompt, MessageOptions = DefaultMessageOptions, MessageRepliesCountButton = DefaultMessageRepliesCountButton, MessageStatus = DefaultMessageStatus, MessageTimestamp = DefaultMessageTimestamp, ReactionSelector = DefaultReactionSelector, ReactionsList = DefaultReactionList, PinIndicator, } = useComponentContext('MessageSimple');
     const hasAttachment = messageHasAttachments(message);
     const hasReactions = messageHasReactions(message);
     if (message.customType === CUSTOM_MESSAGE_TYPE.date) {

package/dist/components/Message/QuotedMessage.js

@@ -5,8 +5,9 @@ import { useComponentContext } from '../../context/ComponentContext';
 import { useMessageContext } from '../../context/MessageContext';
 import { useTranslationContext } from '../../context/TranslationContext';
 import { useChannelActionContext } from '../../context/ChannelActionContext';
+import { Attachment as DefaultAttachment } from '../Attachment';
 export const QuotedMessage = () => {
-    const { Attachment, Avatar: ContextAvatar } = useComponentContext('QuotedMessage');
+    const { Attachment = DefaultAttachment, Avatar: ContextAvatar, } = useComponentContext('QuotedMessage');
     const { isMyMessage, message } = useMessageContext('QuotedMessage');
     const { t, userLanguage } = useTranslationContext('QuotedMessage');
     const { jumpToMessage } = useChannelActionContext('QuotedMessage');

package/dist/components/Message/hooks/useReactionHandler.js

@@ -3,9 +3,11 @@ import throttle from 'lodash.throttle';
 import { useChannelActionContext } from '../../../context/ChannelActionContext';
 import { useChannelStateContext } from '../../../context/ChannelStateContext';
 import { useChatContext } from '../../../context/ChatContext';
+import { useThreadContext } from '../../Threads';
 export const reactionHandlerWarning = `Reaction handler was called, but it is missing one of its required arguments.
 Make sure the ChannelAction and ChannelState contexts are properly set and the hook is initialized with a valid message.`;
 export const useReactionHandler = (message) => {
+    const thread = useThreadContext();
     const { updateMessage } = useChannelActionContext('useReactionHandler');
     const { channel, channelCapabilities } = useChannelStateContext('useReactionHandler');
     const { client } = useChatContext('useReactionHandler');
@@ -64,14 +66,19 @@ export const useReactionHandler = (message) => {
         const tempMessage = createMessagePreview(add, newReaction, message);
         try {
             updateMessage(tempMessage);
+            // @ts-expect-error
+            thread?.upsertReplyLocally({ message: tempMessage });
             const messageResponse = add
                 ? await channel.sendReaction(id, { type })
                 : await channel.deleteReaction(id, type);
+            // seems useless as we're expecting WS event to come in and replace this anyway
             updateMessage(messageResponse.message);
         }
         catch (error) {
             // revert to the original message if the API call fails
             updateMessage(message);
+            // @ts-expect-error
+            thread?.upsertReplyLocally({ message });
         }
     }, 1000);
     return async (reactionType, event) => {

package/dist/components/Message/utils.d.ts

@@ -2,7 +2,7 @@ import type { TFunction } from 'i18next';
 import type { MessageResponse, Mute, StreamChat, UserResponse } from 'stream-chat';
 import type { PinPermissions } from './hooks';
 import type { MessageProps } from './types';
-import type { MessageContextValue, StreamMessage } from '../../context';
+import type { ComponentContextValue, CustomMessageActions, MessageContextValue, StreamMessage } from '../../context';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 /**
  * Following function validates a function which returns notification message.
@@ -39,7 +39,16 @@ export type Capabilities = {
 };
 export declare const getMessageActions: (actions: MessageActionsArray | boolean, { canDelete, canEdit, canFlag, canMarkUnread, canMute, canPin, canQuote, canReact, canReply, }: Capabilities) => MessageActionsArray<string>;
 export declare const ACTIONS_NOT_WORKING_IN_THREAD: string[];
+/**
+ * @deprecated use `shouldRenderMessageActions` instead
+ */
 export declare const showMessageActionsBox: (actions: MessageActionsArray<string>, inThread?: boolean | undefined) => boolean;
+export declare const shouldRenderMessageActions: <SCG extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ customMessageActions, CustomMessageActionsList, inThread, messageActions, }: {
+    messageActions: MessageActionsArray;
+    customMessageActions?: CustomMessageActions<SCG>;
+    CustomMessageActionsList?: ComponentContextValue<SCG>['CustomMessageActionsList'];
+    inThread?: boolean;
+}) => boolean;
 export declare const areMessagePropsEqual: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(prevProps: MessageProps<StreamChatGenerics> & {
     mutes?: Mute<StreamChatGenerics>[];
     showDetailedReactions?: boolean;

package/dist/components/Message/utils.js

@@ -140,22 +140,31 @@ export const getMessageActions = (actions, { canDelete, canEdit, canFlag, canMar
 };
 export const ACTIONS_NOT_WORKING_IN_THREAD = [
     MESSAGE_ACTIONS.pin,
-    MESSAGE_ACTIONS.react,
     MESSAGE_ACTIONS.reply,
     MESSAGE_ACTIONS.markUnread,
 ];
-export const showMessageActionsBox = (actions, inThread) => {
-    if (actions.length === 0) {
+/**
+ * @deprecated use `shouldRenderMessageActions` instead
+ */
+export const showMessageActionsBox = (actions, inThread) => shouldRenderMessageActions({ inThread, messageActions: actions });
+export const shouldRenderMessageActions = ({ customMessageActions, CustomMessageActionsList, inThread, messageActions, }) => {
+    if (typeof CustomMessageActionsList !== 'undefined' ||
+        typeof customMessageActions !== 'undefined')
+        return true;
+    if (!messageActions.length)
         return false;
-    }
     if (inThread &&
-        actions.filter((action) => !ACTIONS_NOT_WORKING_IN_THREAD.includes(action)).length === 0) {
+        messageActions.filter((action) => !ACTIONS_NOT_WORKING_IN_THREAD.includes(action)).length === 0) {
         return false;
     }
-    if (actions.length === 1 && (actions.includes('react') || actions.includes('reply'))) {
+    if (messageActions.length === 1 &&
+        (messageActions.includes(MESSAGE_ACTIONS.react) ||
+            messageActions.includes(MESSAGE_ACTIONS.reply))) {
         return false;
     }
-    if (actions.length === 2 && actions.includes('react') && actions.includes('reply')) {
+    if (messageActions.length === 2 &&
+        messageActions.includes(MESSAGE_ACTIONS.react) &&
+        messageActions.includes(MESSAGE_ACTIONS.reply)) {
         return false;
     }
     return true;

package/dist/components/MessageActions/MessageActions.js

@@ -1,15 +1,17 @@
 import React, { useCallback, useEffect, useRef, useState, } from 'react';
+import clsx from 'clsx';
 import { MessageActionsBox } from './MessageActionsBox';
 import { ActionsIcon as DefaultActionsIcon } from '../Message/icons';
-import { isUserMuted } from '../Message/utils';
+import { isUserMuted, shouldRenderMessageActions } from '../Message/utils';
 import { useChatContext } from '../../context/ChatContext';
 import { useMessageContext } from '../../context/MessageContext';
 import { useMessageActionsBoxPopper } from './hooks';
-import { useTranslationContext } from '../../context';
+import { useComponentContext, useTranslationContext } from '../../context';
 export const MessageActions = (props) => {
     const { ActionsIcon = DefaultActionsIcon, customWrapperClass = '', getMessageActions: propGetMessageActions, handleDelete: propHandleDelete, handleFlag: propHandleFlag, handleMarkUnread: propHandleMarkUnread, handleMute: propHandleMute, handlePin: propHandlePin, inline, message: propMessage, messageWrapperRef, mine, } = props;
     const { mutes } = useChatContext('MessageActions');
-    const { customMessageActions, getMessageActions: contextGetMessageActions, handleDelete: contextHandleDelete, handleFlag: contextHandleFlag, handleMarkUnread: contextHandleMarkUnread, handleMute: contextHandleMute, handlePin: contextHandlePin, isMyMessage, message: contextMessage, setEditingState, } = useMessageContext('MessageActions');
+    const { customMessageActions, getMessageActions: contextGetMessageActions, handleDelete: contextHandleDelete, handleFlag: contextHandleFlag, handleMarkUnread: contextHandleMarkUnread, handleMute: contextHandleMute, handlePin: contextHandlePin, isMyMessage, message: contextMessage, setEditingState, threadList, } = useMessageContext('MessageActions');
+    const { CustomMessageActionsList } = useComponentContext('MessageActions');
     const { t } = useTranslationContext('MessageActions');
     const getMessageActions = propGetMessageActions || contextGetMessageActions;
     const handleDelete = propHandleDelete || contextHandleDelete;
@@ -21,13 +23,19 @@ export const MessageActions = (props) => {
     const isMine = mine ? mine() : isMyMessage();
     const [actionsBoxOpen, setActionsBoxOpen] = useState(false);
     const isMuted = useCallback(() => isUserMuted(message, mutes), [message, mutes]);
+    const messageActions = getMessageActions();
+    const renderMessageActions = shouldRenderMessageActions({
+        customMessageActions,
+        CustomMessageActionsList,
+        inThread: threadList,
+        messageActions,
+    });
     const hideOptions = useCallback((event) => {
         if (event instanceof KeyboardEvent && event.key !== 'Escape') {
             return;
         }
         setActionsBoxOpen(false);
     }, []);
-    const messageActions = getMessageActions();
     const messageDeletedAt = !!message?.deleted_at;
     useEffect(() => {
         if (messageWrapperRef?.current) {
@@ -55,7 +63,7 @@ export const MessageActions = (props) => {
         placement: isMine ? 'top-end' : 'top-start',
         referenceElement: actionsBoxButtonRef.current,
     });
-    if (!messageActions.length && !customMessageActions)
+    if (!renderMessageActions)
         return null;
     return (React.createElement(MessageActionsWrapper, { customWrapperClass: customWrapperClass, inline: inline, setActionsBoxOpen: setActionsBoxOpen },
         React.createElement(MessageActionsBox, { ...attributes.popper, getMessageActions: getMessageActions, handleDelete: handleDelete, handleEdit: setEditingState, handleFlag: handleFlag, handleMarkUnread: handleMarkUnread, handleMute: handleMute, handlePin: handlePin, isUserMuted: isMuted, mine: isMine, open: actionsBoxOpen, ref: popperElementRef, style: styles.popper }),
@@ -64,10 +72,7 @@ export const MessageActions = (props) => {
 };
 const MessageActionsWrapper = (props) => {
     const { children, customWrapperClass, inline, setActionsBoxOpen } = props;
-    const defaultWrapperClass = `
-  str-chat__message-simple__actions__action
-  str-chat__message-simple__actions__action--options
-  str-chat__message-actions-container`;
+    const defaultWrapperClass = clsx('str-chat__message-simple__actions__action', 'str-chat__message-simple__actions__action--options', 'str-chat__message-actions-container');
     const wrapperClass = customWrapperClass || defaultWrapperClass;
     const onClickOptionsAction = (event) => {
         event.stopPropagation();