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

package/README.md

@@ -90,7 +90,7 @@ For components that implement significant logic, it's helpful to split the compo
 
 ### Customizing Styles
 
-The preferred method for overriding the pre-defined styles in the library is to two step process. First, import our bundled CSS into the file where you instantiate your chat application. Second, locate any Stream styles you want to override using either the browser inspector or by viewing the library code. You can then add selectors to your local CSS file to override our defaults. For example:
+The preferred method for overriding the pre-defined styles in the library is to two-step process. First, import our bundled CSS into the file where you instantiate your chat application. Second, locate any Stream styles you want to override using either the browser inspector or by viewing the library code. You can then add selectors to your local CSS file to override our defaults. For example:
 
 ```js
 import 'stream-chat-react/dist/css/v2/index.css';
@@ -110,3 +110,13 @@ We recently closed a [$38 million Series B funding round](https://techcrunch.com
 Our APIs are used by more than a billion end-users, and by working at Stream, you have the chance to make a huge impact on a team of very strong engineers.
 
 Check out our current openings and apply via [Stream's website](https://getstream.io/team/#jobs).
+
+## Acknowledgements
+
+### Lamejs
+
+This project uses `lamejs` library under the LGPL license to convert the recorded audio to mp3 format.
+The library source code is dynamically imported and used only if audio recording is enabled.
+
+You can obtain the source code for `lamejs` from the [lamejs repository](https://github.com/gideonstele/lamejs) that is a fork of [the original JS library](https://github.com/zhuker/lamejs).
+You can find the source code for LAME at https://lame.sourceforge.net  and its license at: https://lame.sourceforge.net/license.txt

package/dist/components/Attachment/components/WaveProgressBar.d.ts

@@ -9,6 +9,8 @@ type WaveProgressBarProps = {
     amplitudesCount?: number;
     /** Progress expressed in fractional number value btw 0 and 100. */
     progress?: number;
+    relativeAmplitudeBarWidth?: number;
+    relativeAmplitudeGap?: number;
 };
-export declare const WaveProgressBar: ({ amplitudesCount, progress, seek, waveformData, }: WaveProgressBarProps) => React.JSX.Element | null;
+export declare const WaveProgressBar: ({ amplitudesCount, progress, relativeAmplitudeBarWidth, relativeAmplitudeGap, seek, waveformData, }: WaveProgressBarProps) => React.JSX.Element | null;
 export {};

package/dist/components/Attachment/components/WaveProgressBar.js

@@ -1,10 +1,13 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import throttle from 'lodash.throttle';
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import clsx from 'clsx';
 import { resampleWaveformData } from '../audioSampling';
-export const WaveProgressBar = ({ amplitudesCount = 40, progress = 0, seek, waveformData, }) => {
+export const WaveProgressBar = ({ amplitudesCount = 40, progress = 0, relativeAmplitudeBarWidth = 2, relativeAmplitudeGap = 1, seek, waveformData, }) => {
     const [progressIndicator, setProgressIndicator] = useState(null);
     const isDragging = useRef(false);
-    const rootRef = useRef(null);
+    const [root, setRoot] = useState(null);
+    const [trackAxisX, setTrackAxisX] = useState();
+    const lastRootWidth = useRef();
     const handleDragStart = (e) => {
         e.preventDefault();
         if (!progressIndicator)
@@ -25,22 +28,54 @@ export const WaveProgressBar = ({ amplitudesCount = 40, progress = 0, seek, wave
         isDragging.current = false;
         progressIndicator.style.removeProperty('cursor');
     }, [progressIndicator]);
-    const resampledWaveformData = useMemo(() => resampleWaveformData(waveformData, amplitudesCount), [
-        amplitudesCount,
-        waveformData,
-    ]);
+    const getTrackAxisX = useMemo(() => throttle((rootWidth) => {
+        if (rootWidth === lastRootWidth.current)
+            return;
+        lastRootWidth.current = rootWidth;
+        const possibleAmpCount = Math.floor(rootWidth / (relativeAmplitudeGap + relativeAmplitudeBarWidth));
+        const tooManyAmplitudesToRender = possibleAmpCount < amplitudesCount;
+        const barCount = tooManyAmplitudesToRender ? possibleAmpCount : amplitudesCount;
+        const amplitudeBarWidthToGapRatio = relativeAmplitudeBarWidth / (relativeAmplitudeBarWidth + relativeAmplitudeGap);
+        const barWidth = barCount && (rootWidth / barCount) * amplitudeBarWidthToGapRatio;
+        setTrackAxisX({
+            barCount,
+            barWidth,
+            gap: barWidth * (relativeAmplitudeGap / relativeAmplitudeBarWidth),
+        });
+    }, 1), [relativeAmplitudeBarWidth, relativeAmplitudeGap, amplitudesCount]);
+    const resampledWaveformData = useMemo(() => (trackAxisX ? resampleWaveformData(waveformData, trackAxisX.barCount) : []), [trackAxisX, waveformData]);
     useEffect(() => {
         document.addEventListener('pointerup', handleDragStop);
         return () => {
             document.removeEventListener('pointerup', handleDragStop);
         };
     }, [handleDragStop]);
-    if (!waveformData.length)
+    useEffect(() => {
+        if (!root || typeof ResizeObserver === 'undefined')
+            return;
+        const observer = new ResizeObserver(([entry]) => {
+            getTrackAxisX(entry.contentRect.width);
+        });
+        observer.observe(root);
+        return () => {
+            observer.disconnect();
+        };
+    }, [getTrackAxisX, root]);
+    useLayoutEffect(() => {
+        if (!root)
+            return;
+        const { width: rootWidth } = root.getBoundingClientRect();
+        getTrackAxisX(rootWidth);
+    }, [getTrackAxisX, root]);
+    if (!waveformData.length || trackAxisX?.barCount === 0)
         return null;
-    return (React.createElement("div", { className: 'str-chat__wave-progress-bar__track', "data-testid": 'wave-progress-bar-track', onClick: seek, onPointerDown: handleDragStart, onPointerMove: handleDrag, onPointerUp: handleDragStop, ref: rootRef, role: 'progressbar' },
+    return (React.createElement("div", { className: 'str-chat__wave-progress-bar__track', "data-testid": 'wave-progress-bar-track', onClick: seek, onPointerDown: handleDragStart, onPointerMove: handleDrag, onPointerUp: handleDragStop, ref: setRoot, role: 'progressbar', style: {
+            '--str-chat__voice-recording-amplitude-bar-gap-width': trackAxisX?.gap + 'px',
+        } },
         resampledWaveformData.map((amplitude, i) => (React.createElement("div", { className: clsx('str-chat__wave-progress-bar__amplitude-bar', {
                 ['str-chat__wave-progress-bar__amplitude-bar--active']: progress > (i / resampledWaveformData.length) * 100,
             }), "data-testid": 'amplitude-bar', key: `amplitude-${i}`, style: {
+                '--str-chat__voice-recording-amplitude-bar-width': trackAxisX?.barWidth + 'px',
                 '--str-chat__wave-progress-bar__amplitude-bar-height': amplitude
                     ? amplitude * 100 + '%'
                     : '0%',

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();
@@ -68,7 +60,11 @@ const ChannelInner = (props) => {
     const [state, dispatch] = useReducer(channelReducer, 
     // channel.initialized === false if client.channel().query() was not called, e.g. ChannelList is not used
     // => Channel will call channel.watch() in useLayoutEffect => state.loading is used to signal the watch() call state
-    { ...initialState, loading: !channel.initialized });
+    {
+        ...initialState,
+        hasMore: channel.state.messagePagination.hasPrev,
+        loading: !channel.initialized,
+    });
     const isMounted = useIsMounted();
     const originalTitle = useRef('');
     const lastRead = useRef();
@@ -184,7 +180,6 @@ const ChannelInner = (props) => {
     useLayoutEffect(() => {
         let errored = false;
         let done = false;
-        let channelInitializedExternally = true;
         (async () => {
             if (!channel.initialized && initializeOnMount) {
                 try {
@@ -210,7 +205,6 @@ const ChannelInner = (props) => {
                     await getChannel({ channel, client, members, options: channelQueryOptions });
                     const config = channel.getConfig();
                     setChannelConfig(config);
-                    channelInitializedExternally = false;
                 }
                 catch (e) {
                     dispatch({ error: e, type: 'setError' });
@@ -222,8 +216,7 @@ const ChannelInner = (props) => {
             if (!errored) {
                 dispatch({
                     channel,
-                    hasMore: channelInitializedExternally ||
-                        hasMoreMessagesProbably(channel.state.messages.length, channelQueryOptions.messages.limit),
+                    hasMore: channel.state.messagePagination.hasPrev,
                     type: 'initStateFromChannel',
                 });
                 if (client.user?.id && channel.state.read[client.user.id]) {
@@ -283,7 +276,7 @@ const ChannelInner = (props) => {
         dispatch({ hasMore, messages, type: 'loadMoreFinished' });
     }, 2000, { leading: true, trailing: true }), []);
     const loadMore = async (limit = DEFAULT_NEXT_CHANNEL_PAGE_SIZE) => {
-        if (!online.current || !window.navigator.onLine || !state.hasMore)
+        if (!online.current || !window.navigator.onLine || !channel.state.messagePagination.hasPrev)
             return 0;
         // prevent duplicate loading events...
         const oldestMessage = state?.messages?.[0];
@@ -305,12 +298,11 @@ const ChannelInner = (props) => {
             dispatch({ loadingMore: false, type: 'setLoadingMore' });
             return 0;
         }
-        const hasMoreMessages = queryResponse.messages.length === perPage;
-        loadMoreFinished(hasMoreMessages, channel.state.messages);
+        loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
         return queryResponse.messages.length;
     };
     const loadMoreNewer = async (limit = DEFAULT_NEXT_CHANNEL_PAGE_SIZE) => {
-        if (!online.current || !window.navigator.onLine || !state.hasMoreNewer)
+        if (!online.current || !window.navigator.onLine || !channel.state.messagePagination.hasNext)
             return 0;
         const newestMessage = state?.messages?.[state?.messages?.length - 1];
         if (state.loadingMore || state.loadingMoreNewer)
@@ -330,9 +322,8 @@ const ChannelInner = (props) => {
             dispatch({ loadingMoreNewer: false, type: 'setLoadingMoreNewer' });
             return 0;
         }
-        const hasMoreNewerMessages = channel.state.messages !== channel.state.latestMessages;
         dispatch({
-            hasMoreNewer: hasMoreNewerMessages,
+            hasMoreNewer: channel.state.messagePagination.hasNext,
             messages: channel.state.messages,
             type: 'loadMoreNewerFinished',
         });
@@ -342,15 +333,9 @@ const ChannelInner = (props) => {
     const jumpToMessage = useCallback(async (messageId, messageLimit = DEFAULT_JUMP_TO_PAGE_SIZE, highlightDuration = DEFAULT_HIGHLIGHT_DURATION) => {
         dispatch({ loadingMore: true, type: 'setLoadingMore' });
         await channel.state.loadMessageIntoState(messageId, undefined, messageLimit);
-        /**
-         * if the message we are jumping to has less than half of the page size older messages,
-         * we have jumped to the beginning of the channel.
-         */
-        const indexOfMessage = channel.state.messages.findIndex((message) => message.id === messageId);
-        const hasMoreMessages = indexOfMessage >= Math.floor(messageLimit / 2);
-        loadMoreFinished(hasMoreMessages, channel.state.messages);
+        loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
         dispatch({
-            hasMoreNewer: channel.state.messages !== channel.state.latestMessages,
+            hasMoreNewer: channel.state.messagePagination.hasNext,
             highlightedMessageId: messageId,
             type: 'jumpToMessageFinished',
         });
@@ -364,9 +349,7 @@ const ChannelInner = (props) => {
     }, [channel, loadMoreFinished]);
     const jumpToLatestMessage = useCallback(async () => {
         await channel.state.loadMessageIntoState('latest');
-        // FIXME: we cannot rely on constant value 25 as the page size can be customized by integrators
-        const hasMoreOlder = channel.state.messages.length >= 25;
-        loadMoreFinished(hasMoreOlder, channel.state.messages);
+        loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
         dispatch({
             type: 'jumpToLatestMessage',
         });
@@ -377,7 +360,6 @@ const ChannelInner = (props) => {
         let lastReadMessageId = channelUnreadUiState?.last_read_message_id;
         let firstUnreadMessageId = channelUnreadUiState?.first_unread_message_id;
         let isInCurrentMessageSet = false;
-        let hasMoreMessages = true;
         if (firstUnreadMessageId) {
             const result = findInMsgSetById(firstUnreadMessageId, channel.state.messages);
             isInCurrentMessageSet = result.index !== -1;
@@ -409,27 +391,25 @@ const ChannelInner = (props) => {
                 }
                 catch (e) {
                     addNotification(t('Failed to jump to the first unread message'), 'error');
-                    loadMoreFinished(hasMoreMessages, channel.state.messages);
+                    loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
                     return;
                 }
                 const firstMessageWithCreationDate = messages.find((msg) => msg.created_at);
                 if (!firstMessageWithCreationDate) {
                     addNotification(t('Failed to jump to the first unread message'), 'error');
-                    loadMoreFinished(hasMoreMessages, channel.state.messages);
+                    loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
                     return;
                 }
                 const firstMessageTimestamp = new Date(firstMessageWithCreationDate.created_at).getTime();
                 if (lastReadTimestamp < firstMessageTimestamp) {
                     // whole channel is unread
                     firstUnreadMessageId = firstMessageWithCreationDate.id;
-                    hasMoreMessages = false;
                 }
                 else {
                     const result = findInMsgSetByDate(channelUnreadUiState.last_read, messages);
                     lastReadMessageId = result.target?.id;
-                    hasMoreMessages = result.index >= Math.floor(queryMessageLimit / 2);
                 }
-                loadMoreFinished(hasMoreMessages, channel.state.messages);
+                loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
             }
         }
         if (!firstUnreadMessageId && !lastReadMessageId) {
@@ -446,14 +426,13 @@ const ChannelInner = (props) => {
                  * we have arrived to the oldest page of the channel
                  */
                 const indexOfTarget = channel.state.messages.findIndex((message) => message.id === targetId);
-                hasMoreMessages = indexOfTarget >= Math.floor(queryMessageLimit / 2);
-                loadMoreFinished(hasMoreMessages, channel.state.messages);
+                loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
                 firstUnreadMessageId =
                     firstUnreadMessageId ?? channel.state.messages[indexOfTarget + 1]?.id;
             }
             catch (e) {
                 addNotification(t('Failed to jump to the first unread message'), 'error');
-                loadMoreFinished(hasMoreMessages, channel.state.messages);
+                loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
                 return;
             }
         }
@@ -468,7 +447,7 @@ const ChannelInner = (props) => {
                 last_read_message_id: lastReadMessageId,
             });
         dispatch({
-            hasMoreNewer: channel.state.messages !== channel.state.latestMessages,
+            hasMoreNewer: channel.state.messagePagination.hasNext,
             highlightedMessageId: firstUnreadMessageId,
             type: 'jumpToMessageFinished',
         });
@@ -578,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);
     };
@@ -735,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,
@@ -745,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,
@@ -756,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,
@@ -764,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,
@@ -782,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,
     });
@@ -806,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/Channel/channelState.js

@@ -102,6 +102,7 @@ export const channelReducer = (state, action) => {
             return {
                 ...state,
                 thread: message,
+                threadHasMore: true,
                 threadMessages: message.id ? { ...channel.state.threads }[message.id] || [] : [],
                 threadSuppressAutoscroll: false,
             };

package/dist/components/Channel/hooks/useCreateChannelStateContext.js

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { isDate, isDayOrMoment } from '../../../context/TranslationContext';
+import { isDate, isDayOrMoment } from '../../../i18n';
 export const useCreateChannelStateContext = (value) => {
     const { acceptedFiles, channel, channelCapabilitiesArray = [], channelConfig, debounceURLEnrichmentMs, dragAndDropWindow, enrichURLForPreview, giphyVersion, error, findURLFn, hasMore, hasMoreNewer, imageAttachmentSizeHandler, suppressAutoscroll, highlightedMessageId, loading, loadingMore, maxNumberOfFiles, members, messages = [], multipleUploads, mutes, notifications, onLinkPreviewDismissed, pinnedMessages, quotedMessage, read = {}, shouldGenerateVideoThumbnail, skipMessageDataMemoization, thread, threadHasMore, threadLoadingMore, threadMessages = [], channelUnreadUiState, videoAttachmentSizeHandler, watcherCount, watcher_count, watchers, } = value;
     const channelId = channel.cid;

package/dist/components/ChannelList/ChannelList.js

@@ -117,7 +117,7 @@ const UnMemoizedChannelList = (props) => {
             channel: item,
             // forces the update of preview component on channel update
             channelUpdateCount,
-            key: item.id,
+            key: item.cid,
             Preview,
             setActiveChannel,
             watchers,

package/dist/components/Chat/Chat.d.ts

@@ -1,7 +1,7 @@
 import React, { PropsWithChildren } from 'react';
 import { CustomClasses } from '../../context/ChatContext';
-import { SupportedTranslations } from '../../context/TranslationContext';
 import type { StreamChat } from 'stream-chat';
+import type { SupportedTranslations } from '../../i18n/types';
 import type { Streami18n } from '../../i18n/Streami18n';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 export type ChatProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {

package/dist/components/Chat/hooks/useChat.d.ts

@@ -1,5 +1,5 @@
-import { SupportedTranslations, TranslationContextValue } from '../../../context/TranslationContext';
-import { Streami18n } from '../../../i18n';
+import { TranslationContextValue } from '../../../context/TranslationContext';
+import { Streami18n, SupportedTranslations } from '../../../i18n';
 import type { AppSettingsAPIResponse, Channel, Mute, StreamChat } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 export type UseChatParams<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {

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

@@ -1,6 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { defaultDateTimeParser, isLanguageSupported, } from '../../../context/TranslationContext';
-import { Streami18n } from '../../../i18n';
+import { defaultDateTimeParser, isLanguageSupported, Streami18n, } from '../../../i18n';
 import { version } from '../../../version';
 export const useChat = ({ client, defaultLanguage = 'en', i18nInstance, initialNavOpen, }) => {
     const [translators, setTranslators] = useState({
@@ -24,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/Chat/hooks/useCreateChatClient.d.ts

@@ -1,9 +1,11 @@
-import { DefaultGenerics, ExtendableGenerics, OwnUserResponse, StreamChat, TokenOrProvider, UserResponse } from 'stream-chat';
+import { StreamChat } from 'stream-chat';
+import type { DefaultGenerics, ExtendableGenerics, OwnUserResponse, StreamChatOptions, TokenOrProvider, UserResponse } from 'stream-chat';
 /**
  * React hook to create, connect and return `StreamChat` client.
  */
-export declare const useCreateChatClient: <SCG extends ExtendableGenerics = DefaultGenerics>({ apiKey, tokenOrProvider, userData, }: {
+export declare const useCreateChatClient: <SCG extends ExtendableGenerics = DefaultGenerics>({ apiKey, options, tokenOrProvider, userData, }: {
     apiKey: string;
     tokenOrProvider: TokenOrProvider;
     userData: OwnUserResponse<SCG> | UserResponse<SCG>;
+    options?: StreamChatOptions;
 }) => StreamChat<SCG> | null;

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

@@ -1,16 +1,17 @@
 import { useEffect, useState } from 'react';
-import { StreamChat, } from 'stream-chat';
+import { StreamChat } from 'stream-chat';
 /**
  * React hook to create, connect and return `StreamChat` client.
  */
-export const useCreateChatClient = ({ apiKey, tokenOrProvider, userData, }) => {
+export const useCreateChatClient = ({ apiKey, options, tokenOrProvider, userData, }) => {
     const [chatClient, setChatClient] = useState(null);
     const [cachedUserData, setCachedUserData] = useState(userData);
     if (userData.id !== cachedUserData.id) {
         setCachedUserData(userData);
     }
+    const [cachedOptions] = useState(options);
     useEffect(() => {
-        const client = new StreamChat(apiKey);
+        const client = new StreamChat(apiKey, undefined, cachedOptions);
         let didUserConnectInterrupt = false;
         const connectionPromise = client.connectUser(cachedUserData, tokenOrProvider).then(() => {
             if (!didUserConnectInterrupt)
@@ -25,6 +26,6 @@ export const useCreateChatClient = ({ apiKey, tokenOrProvider, userData, }) => {
                 console.log(`Connection for user "${cachedUserData.id}" has been closed`);
             });
         };
-    }, [apiKey, cachedUserData, tokenOrProvider]);
+    }, [apiKey, cachedUserData, cachedOptions, tokenOrProvider]);
     return chatClient;
 };