stream-chat-react 12.0.0-rc.1 → 12.0.0-rc.11

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/DateSeparator/DateSeparator.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TimestampFormatterOptions } from '../../i18n/utils';
+import type { TimestampFormatterOptions } from '../../i18n/types';
 export type DateSeparatorProps = TimestampFormatterOptions & {
     /** The date to format */
     date: Date;

package/dist/components/DateSeparator/DateSeparator.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { useTranslationContext } from '../../context/TranslationContext';
 import { getDateString } from '../../i18n/utils';
 const UnMemoizedDateSeparator = (props) => {
-    const { calendar = true, date: messageCreatedAt, formatDate, position = 'right', unread, ...restTimestampFormatterOptions } = props;
+    const { calendar, date: messageCreatedAt, formatDate, position = 'right', unread, ...restTimestampFormatterOptions } = props;
     const { t, tDateTimeParser } = useTranslationContext('DateSeparator');
     const formattedDate = getDateString({
         calendar,

package/dist/components/EventComponent/EventComponent.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { AvatarProps } from '../Avatar';
 import type { StreamMessage } from '../../context/ChannelStateContext';
 import type { DefaultStreamChatGenerics } from '../../types/types';
-import { TimestampFormatterOptions } from '../../i18n/utils';
+import type { TimestampFormatterOptions } from '../../i18n/types';
 export type EventComponentProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = TimestampFormatterOptions & {
     /** Message object */
     message: StreamMessage<StreamChatGenerics>;

package/dist/components/EventComponent/EventComponent.js

@@ -6,7 +6,7 @@ import { getDateString } from '../../i18n/utils';
  * Component to display system and channel event messages
  */
 const UnMemoizedEventComponent = (props) => {
-    const { calendar, calendarFormats, format = 'dddd L', Avatar = DefaultAvatar, message } = props;
+    const { calendar, calendarFormats, format, Avatar = DefaultAvatar, message } = props;
     const { t, tDateTimeParser } = useTranslationContext('EventComponent');
     const { created_at = '', event, text, type } = message;
     const getDateOptions = { messageCreatedAt: created_at.toString(), tDateTimeParser };

package/dist/components/InfiniteScrollPaginator/InfiniteScroll.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useLayoutEffect, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { deprecationAndReplacementWarning } from '../../utils/deprecationWarning';
 import { DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD } from '../../constants/limits';
 /**
@@ -17,6 +17,8 @@ export const InfiniteScroll = (props) => {
     const hasNextPageFlag = hasNextPage || hasMoreNewer;
     const hasPreviousPageFlag = hasPreviousPage || hasMore;
     const scrollComponent = useRef();
+    const previousOffset = useRef();
+    const previousReverseOffset = useRef();
     const scrollListenerRef = useRef();
     scrollListenerRef.current = () => {
         const element = scrollComponent.current;
@@ -32,7 +34,11 @@ export const InfiniteScroll = (props) => {
         }
         if (isLoading)
             return;
-        // FIXME: this triggers loadMore call when a user types messages in thread and the scroll container container expands
+        if (previousOffset.current === offset && previousReverseOffset.current === reverseOffset)
+            return;
+        previousOffset.current = offset;
+        previousReverseOffset.current = reverseOffset;
+        // FIXME: this triggers loadMore call when a user types messages in thread and the scroll container expands
         if (reverseOffset < Number(threshold) &&
             typeof loadPreviousPageFn === 'function' &&
             hasPreviousPageFlag) {
@@ -51,7 +57,7 @@ export const InfiniteScroll = (props) => {
         ], 'InfiniteScroll');
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    useLayoutEffect(() => {
+    useEffect(() => {
         const scrollElement = scrollComponent.current?.parentNode;
         if (!scrollElement)
             return;

package/dist/components/MediaRecorder/AudioRecorder/AudioRecordingInProgress.js

@@ -29,6 +29,9 @@ export const AudioRecordingInProgress = () => {
         if (!recorder?.mediaRecorder)
             return;
         const { mediaRecorder } = recorder;
+        if (mediaRecorder.state === 'recording') {
+            startCounter();
+        }
         mediaRecorder.addEventListener('start', startCounter);
         mediaRecorder.addEventListener('resume', startCounter);
         mediaRecorder.addEventListener('stop', stopCounter);

package/dist/components/MediaRecorder/classes/MediaRecorderController.d.ts

@@ -1,26 +1,25 @@
 import { AmplitudeRecorder, AmplitudeRecorderConfig } from './AmplitudeRecorder';
 import { BrowserPermission } from './BrowserPermission';
 import { BehaviorSubject, Subject } from '../observable';
+import { TranscoderConfig } from '../transcode';
 import { RecordedMediaType } from '../../ReactFileUtilities';
 import { TranslationContextValue } from '../../../context';
 import type { LocalVoiceRecordingAttachment } from '../../MessageInput';
 import type { DefaultStreamChatGenerics } from '../../../types';
-export declare const POSSIBLE_TRANSCODING_MIME_TYPES: readonly ["audio/wav", "audio/mp3"];
 export declare const DEFAULT_MEDIA_RECORDER_CONFIG: MediaRecorderConfig;
 export declare const DEFAULT_AUDIO_TRANSCODER_CONFIG: TranscoderConfig;
-type SupportedTranscodeMimeTypes = typeof POSSIBLE_TRANSCODING_MIME_TYPES[number];
-export type TranscoderConfig = {
-    sampleRate: number;
-    targetMimeType: SupportedTranscodeMimeTypes;
-};
 type MediaRecorderConfig = Omit<MediaRecorderOptions, 'mimeType'> & Required<Pick<MediaRecorderOptions, 'mimeType'>>;
 export type AudioRecorderConfig = {
     amplitudeRecorderConfig: AmplitudeRecorderConfig;
     mediaRecorderConfig: MediaRecorderOptions;
     transcoderConfig: TranscoderConfig;
 };
+type PartialValues<T> = {
+    [P in keyof T]?: Partial<T[P]>;
+};
+export type CustomAudioRecordingConfig = PartialValues<AudioRecorderConfig>;
 export type AudioRecorderOptions = {
-    config?: Partial<AudioRecorderConfig>;
+    config?: CustomAudioRecordingConfig;
     generateRecordingTitle?: (mimeType: string) => string;
     t?: TranslationContextValue['t'];
 };

package/dist/components/MediaRecorder/classes/MediaRecorderController.js

@@ -15,7 +15,6 @@ const RECORDED_MIME_TYPE_BY_BROWSER = {
         safari: 'audio/mp4;codecs=mp4a.40.2',
     },
 };
-export const POSSIBLE_TRANSCODING_MIME_TYPES = ['audio/wav', 'audio/mp3'];
 export const DEFAULT_MEDIA_RECORDER_CONFIG = {
     mimeType: isSafari()
         ? RECORDED_MIME_TYPE_BY_BROWSER.audio.safari
@@ -23,7 +22,6 @@ export const DEFAULT_MEDIA_RECORDER_CONFIG = {
 };
 export const DEFAULT_AUDIO_TRANSCODER_CONFIG = {
     sampleRate: 16000,
-    targetMimeType: 'audio/mp3',
 };
 const disposeOfMediaStream = (stream) => {
     if (!stream?.active)
@@ -245,9 +243,6 @@ export class MediaRecorderController {
         this.amplitudeRecorderConfig = mergeDeepUndefined({ ...config?.amplitudeRecorderConfig }, DEFAULT_AMPLITUDE_RECORDER_CONFIG);
         this.mediaRecorderConfig = mergeDeepUndefined({ ...config?.mediaRecorderConfig }, DEFAULT_MEDIA_RECORDER_CONFIG);
         this.transcoderConfig = mergeDeepUndefined({ ...config?.transcoderConfig }, DEFAULT_AUDIO_TRANSCODER_CONFIG);
-        if (!POSSIBLE_TRANSCODING_MIME_TYPES.includes(this.transcoderConfig.targetMimeType)) {
-            this.transcoderConfig.targetMimeType = DEFAULT_AUDIO_TRANSCODER_CONFIG.targetMimeType;
-        }
         const mediaType = getRecordedMediaTypeFromMimeType(this.mediaRecorderConfig.mimeType);
         if (!mediaType) {
             throw new Error(`Unsupported media type (supported audio or video only). Provided mimeType: ${this.mediaRecorderConfig.mimeType}`);

package/dist/components/MediaRecorder/hooks/index.d.ts

@@ -1 +1 @@
-export type { CustomAudioRecordingConfig, RecordingController } from './useMediaRecorder';
+export type { RecordingController } from './useMediaRecorder';

package/dist/components/MediaRecorder/hooks/useMediaRecorder.d.ts

@@ -1,8 +1,7 @@
 import { MessageInputContextValue } from '../../../context';
-import { AudioRecorderConfig, MediaRecorderController, MediaRecordingState } from '../classes';
+import { CustomAudioRecordingConfig, MediaRecorderController, MediaRecordingState } from '../classes';
 import type { LocalVoiceRecordingAttachment } from '../../MessageInput';
 import type { DefaultStreamChatGenerics } from '../../../types';
-export type CustomAudioRecordingConfig = Partial<AudioRecorderConfig>;
 export type RecordingController<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
     completeRecording: () => void;
     permissionState?: PermissionState;

package/dist/components/MediaRecorder/hooks/useMediaRecorder.js

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslationContext } from '../../../context';
-import { MediaRecorderController } from '../classes';
+import { MediaRecorderController, } from '../classes';
 export const useMediaRecorder = ({ asyncMessagesMultiSendEnabled, enabled, generateRecordingTitle, handleSubmit, recordingConfig, uploadAttachment, }) => {
     const { t } = useTranslationContext('useMediaRecorder');
     const [recording, setRecording] = useState();

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

@@ -3,3 +3,4 @@ export * from './AudioRecorder';
 export * from './hooks';
 export { MediaRecordingState } from './classes/MediaRecorderController';
 export { RecordingPermission } from './classes/BrowserPermission';
+export type { CustomAudioRecordingConfig } from './classes';

package/dist/components/MediaRecorder/transcode/index.d.ts

@@ -1,7 +1,8 @@
-type TranscodeParams = {
-    blob: Blob;
+export type TranscoderConfig = {
     sampleRate: number;
-    targetMimeType: string;
+    encoder?: (file: File, sampleRate: number) => Promise<Blob>;
+};
+export type TranscodeParams = TranscoderConfig & {
+    blob: Blob;
 };
-export declare const transcode: ({ blob, sampleRate, targetMimeType }: TranscodeParams) => Promise<Blob>;
-export {};
+export declare const transcode: ({ blob, encoder, sampleRate, }: TranscodeParams) => Promise<Blob>;

package/dist/components/MediaRecorder/transcode/index.js

@@ -1,17 +1,7 @@
 import { encodeToWaw } from './wav';
-import { encodeToMp3 } from './mp3';
 import { createFileFromBlobs, getExtensionFromMimeType } from '../../ReactFileUtilities';
-export const transcode = ({ blob, sampleRate, targetMimeType }) => {
-    const file = createFileFromBlobs({
-        blobsArray: [blob],
-        fileName: `audio_recording_${new Date().toISOString()}.${getExtensionFromMimeType(blob.type)}`,
-        mimeType: blob.type,
-    });
-    if (targetMimeType.match('audio/wav')) {
-        return encodeToWaw(file, sampleRate);
-    }
-    if (targetMimeType.match('audio/mp3')) {
-        return encodeToMp3(file, sampleRate);
-    }
-    return Promise.resolve(blob);
-};
+export const transcode = ({ blob, encoder = encodeToWaw, sampleRate, }) => encoder(createFileFromBlobs({
+    blobsArray: [blob],
+    fileName: `audio_recording_${new Date().toISOString()}.${getExtensionFromMimeType(blob.type)}`,
+    mimeType: blob.type,
+}), sampleRate);

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) {
@@ -92,7 +93,7 @@ const MessageSimpleWithContext = (props) => {
             showMetadata && (React.createElement("div", { className: 'str-chat__message-metadata' },
                 React.createElement(MessageStatus, null),
                 !isMyMessage() && !!message.user && (React.createElement("span", { className: 'str-chat__message-simple-name' }, message.user.name || message.user.id)),
-                React.createElement(MessageTimestamp, { calendar: true, customClass: 'str-chat__message-simple-timestamp' }),
+                React.createElement(MessageTimestamp, { customClass: 'str-chat__message-simple-timestamp' }),
                 isEdited && (React.createElement("span", { className: 'str-chat__mesage-simple-edited' }, t('Edited'))),
                 isEdited && React.createElement(MessageEditedTimestamp, { calendar: true, open: isEditedTimestampOpen }))))));
 };

package/dist/components/Message/MessageStatus.js

@@ -26,9 +26,10 @@ const UnMemoizedMessageStatus = (props) => {
     const sending = message.status === 'sending';
     const delivered = message.status === 'received' && message.id === lastReceivedId && !threadList;
     const deliveredAndRead = !!(readBy?.length && !threadList && !justReadByMe);
-    const [lastReadUser] = deliveredAndRead
+    const readersWithoutOwnUser = deliveredAndRead
         ? readBy.filter((item) => item.id !== client.user?.id)
         : [];
+    const [lastReadUser] = readersWithoutOwnUser;
     return (React.createElement("span", { className: rootClassName, "data-testid": clsx({
             'message-status-read-by': deliveredAndRead,
             'message-status-received': delivered && !deliveredAndRead,
@@ -47,6 +48,6 @@ const UnMemoizedMessageStatus = (props) => {
             (MessageReadStatus ? (React.createElement(MessageReadStatus, null)) : (React.createElement(React.Fragment, null,
                 React.createElement(PopperTooltip, { offset: [0, 5], referenceElement: referenceElement, visible: tooltipVisible }, getReadByTooltipText(readBy, t, client, tooltipUserNameMapper)),
                 React.createElement(Avatar, { className: 'str-chat__avatar--message-status', image: lastReadUser.image, name: lastReadUser.name || lastReadUser.id, user: lastReadUser }),
-                readBy.length > 2 && (React.createElement("span", { className: `str-chat__message-${messageType}-status-number`, "data-testid": 'message-status-read-by-many' }, readBy.length - 1)))))));
+                readersWithoutOwnUser.length > 1 && (React.createElement("span", { className: `str-chat__message-${messageType}-status-number`, "data-testid": 'message-status-read-by-many' }, readersWithoutOwnUser.length)))))));
 };
 export const MessageStatus = React.memo(UnMemoizedMessageStatus);

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

@@ -1,8 +1,7 @@
 import React from 'react';
 import type { StreamMessage } from '../../context/ChannelStateContext';
+import type { TimestampFormatterOptions } from '../../i18n/types';
 import type { DefaultStreamChatGenerics } from '../../types/types';
-import type { TimestampFormatterOptions } from '../../i18n/utils';
-export declare const defaultTimestampFormat = "h:mmA";
 export type MessageTimestampProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = TimestampFormatterOptions & {
     customClass?: string;
     message?: StreamMessage<StreamChatGenerics>;

package/dist/components/Message/MessageTimestamp.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { useMessageContext } from '../../context/MessageContext';
 import { Timestamp as DefaultTimestamp } from './Timestamp';
 import { useComponentContext } from '../../context';
-export const defaultTimestampFormat = 'h:mmA';
 const UnMemoizedMessageTimestamp = (props) => {
     const { message: propMessage, ...timestampProps } = props;
     const { message: contextMessage } = useMessageContext('MessageTimestamp');

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/Timestamp.d.ts

@@ -1,8 +1,7 @@
 import React from 'react';
-import { TimestampFormatterOptions } from '../../i18n/utils';
+import type { TimestampFormatterOptions } from '../../i18n/types';
 export interface TimestampProps extends TimestampFormatterOptions {
     customClass?: string;
     timestamp?: Date | string;
 }
-export declare const defaultTimestampFormat = "h:mmA";
 export declare function Timestamp(props: TimestampProps): React.JSX.Element | null;

package/dist/components/Message/Timestamp.js

@@ -1,10 +1,9 @@
 import React, { useMemo } from 'react';
 import { useMessageContext } from '../../context/MessageContext';
-import { isDate, useTranslationContext } from '../../context/TranslationContext';
-import { getDateString } from '../../i18n/utils';
-export const defaultTimestampFormat = 'h:mmA';
+import { useTranslationContext } from '../../context/TranslationContext';
+import { getDateString, isDate } from '../../i18n/utils';
 export function Timestamp(props) {
-    const { calendar, calendarFormats, customClass, format = defaultTimestampFormat, timestamp, } = props;
+    const { calendar, calendarFormats, customClass, format, timestamp } = props;
     const { formatDate } = useMessageContext('MessageTimestamp');
     const { t, tDateTimeParser } = useTranslationContext('MessageTimestamp');
     const normalizedTimestamp = timestamp && isDate(timestamp) ? timestamp.toISOString() : timestamp;
@@ -16,7 +15,7 @@ export function Timestamp(props) {
         messageCreatedAt: normalizedTimestamp,
         t,
         tDateTimeParser,
-        timestampTranslationKey: 'timestamp/Timestamp',
+        timestampTranslationKey: 'timestamp/MessageTimestamp',
     }), [calendar, calendarFormats, format, formatDate, normalizedTimestamp, t, tDateTimeParser]);
     if (!when) {
         return null;

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/renderText/rehypePlugins/mentionsMarkdownPlugin.d.ts

@@ -1,4 +1,4 @@
 import type { Nodes } from 'hast-util-find-and-replace/lib';
 import type { UserResponse } from 'stream-chat';
-import type { DefaultStreamChatGenerics } from '../../../../types/types';
+import type { DefaultStreamChatGenerics } from '../../../../types';
 export declare const mentionsMarkdownPlugin: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(mentioned_users: UserResponse<StreamChatGenerics>[]) => () => (tree: Nodes) => void;

package/dist/components/Message/renderText/remarkPlugins/htmlToTextPlugin.d.ts

@@ -1,2 +1,2 @@
-import type { Nodes } from 'react-markdown/lib';
+import type { Nodes } from 'hast-util-find-and-replace/lib';
 export declare const htmlToTextPlugin: () => (tree: Nodes) => void;

package/dist/components/Message/renderText/remarkPlugins/keepLineBreaksPlugin.d.ts

@@ -1,2 +1,2 @@
-import type { Nodes } from 'react-markdown/lib';
+import type { Nodes } from 'hast-util-find-and-replace/lib';
 export declare const keepLineBreaksPlugin: () => (tree: Nodes) => void;

package/dist/components/Message/renderText/remarkPlugins/keepLineBreaksPlugin.js

@@ -1,17 +1,13 @@
 import { visit } from 'unist-util-visit';
 import { u } from 'unist-builder';
 const visitor = (node, index, parent) => {
-    if (typeof index === 'undefined' || index === 0)
-        return;
-    if (typeof parent === 'undefined')
-        return;
-    if (!node.position)
+    if (!(index && parent && node.position))
         return;
     const prevSibling = parent.children.at(index - 1);
     if (!prevSibling?.position)
         return;
     if (node.position.start.line === prevSibling.position.start.line)
-        return false;
+        return;
     const ownStartLine = node.position.start.line;
     const prevEndLine = prevSibling.position.end.line;
     // the -1 is adjustment for the single line break into which multiple line breaks are converted

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

@@ -1,8 +1,8 @@
 import React, { ComponentType } from 'react';
 import { Options } from 'react-markdown';
-import { MentionProps } from './componentRenderers';
-import type { PluggableList } from 'react-markdown/lib';
+import type { PluggableList } from 'react-markdown/lib/react-markdown';
 import type { UserResponse } from 'stream-chat';
+import { MentionProps } from './componentRenderers';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 export type RenderTextPluginConfigurator = (defaultPlugins: PluggableList) => PluggableList;
 export declare const defaultAllowedTagNames: Array<keyof JSX.IntrinsicElements | 'emoji' | 'mention'>;