stream-chat-react 12.11.1 → 12.13.0

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

@@ -1,8 +1,8 @@
 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 { ComponentContextValue, StreamMessage } from '../../context';
+import type { ChannelQueryOptions, EventAPIResponse, Message, MessageResponse, Channel as StreamChannel, StreamChat, UpdatedMessage } from 'stream-chat';
 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';

package/dist/components/Channel/Channel.js

@@ -14,14 +14,15 @@ import { LoadingErrorIndicator as DefaultLoadingErrorIndicator, } from '../Loadi
 import { LoadingChannel as DefaultLoadingIndicator } from './LoadingChannel';
 import { DropzoneProvider } from '../MessageInput/DropzoneProvider';
 import { ChannelActionProvider, ChannelStateProvider, TypingProvider, useChatContext, useTranslationContext, WithComponents, } from '../../context';
+import { CHANNEL_CONTAINER_ID } from './constants';
 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 } from '../MessageList';
 import { getChatContainerClass, useChannelContainerClasses, useImageFlagEmojisOnWindowsClass, } from './hooks/useChannelContainerClasses';
 import { findInMsgSetByDate, findInMsgSetById, makeAddNotifications } from './utils';
+import { useThreadContext } from '../Threads';
 import { getChannel } from '../../utils';
 import { getImageAttachmentConfiguration, getVideoAttachmentConfiguration, } from '../Attachment/attachment-sizing';
-import { useThreadContext } from '../Threads';
-import { CHANNEL_CONTAINER_ID } from './constants';
+import { useSearchFocusedMessage } from '../../experimental/Search/hooks';
 const isUserResponseArray = (output) => output[0]?.id != null;
 const ChannelContainer = ({ children, className: additionalClassName, ...props }) => {
     const { customClasses, theme } = useChatContext('Channel');
@@ -53,7 +54,7 @@ const ChannelInner = (props) => {
     const channelQueryOptions = useMemo(() => defaultsDeep(propChannelQueryOptions, {
         messages: { limit: DEFAULT_INITIAL_CHANNEL_PAGE_SIZE },
     }), [propChannelQueryOptions]);
-    const { client, customClasses, latestMessageDatesByChannels, mutes } = useChatContext('Channel');
+    const { client, customClasses, latestMessageDatesByChannels, mutes, searchController } = useChatContext('Channel');
     const { t } = useTranslationContext('Channel');
     const chatContainerClass = getChatContainerClass(customClasses?.chatContainer);
     const windowsEmojiClass = useImageFlagEmojisOnWindowsClass();
@@ -72,10 +73,12 @@ const ChannelInner = (props) => {
         hasMore: channel.state.messagePagination.hasPrev,
         loading: !channel.initialized,
     });
+    const jumpToMessageFromSearch = useSearchFocusedMessage();
     const isMounted = useIsMounted();
     const originalTitle = useRef('');
     const lastRead = useRef(undefined);
     const online = useRef(true);
+    const clearHighlightedMessageTimeoutId = useRef(null);
     const channelCapabilitiesArray = channel.data?.own_capabilities;
     const throttledCopyStateFromChannel = throttle(() => dispatch({ channel, type: 'copyStateFromChannelOnEvent' }), 500, {
         leading: true,
@@ -282,6 +285,28 @@ const ChannelInner = (props) => {
         if (message)
             dispatch({ message, type: 'setThread' });
     }, [state.messages, state.thread]);
+    const handleHighlightedMessageChange = useCallback(({ highlightDuration, highlightedMessageId, }) => {
+        dispatch({
+            channel,
+            highlightedMessageId,
+            type: 'jumpToMessageFinished',
+        });
+        if (clearHighlightedMessageTimeoutId.current) {
+            clearTimeout(clearHighlightedMessageTimeoutId.current);
+        }
+        clearHighlightedMessageTimeoutId.current = setTimeout(() => {
+            if (searchController._internalState.getLatestValue().focusedMessage) {
+                searchController._internalState.partialNext({ focusedMessage: undefined });
+            }
+            clearHighlightedMessageTimeoutId.current = null;
+            dispatch({ type: 'clearHighlightedMessage' });
+        }, highlightDuration ?? DEFAULT_HIGHLIGHT_DURATION);
+    }, [channel, searchController]);
+    useEffect(() => {
+        if (!jumpToMessageFromSearch?.id)
+            return;
+        handleHighlightedMessageChange({ highlightedMessageId: jumpToMessageFromSearch.id });
+    }, [jumpToMessageFromSearch, handleHighlightedMessageChange]);
     /** MESSAGE */
     // Adds a temporary notification to message list, will be removed after 5 seconds
     const addNotification = useMemo(() => makeAddNotifications(setNotifications, notificationTimeouts.current), []);
@@ -351,24 +376,15 @@ const ChannelInner = (props) => {
         });
         return queryResponse.messages.length;
     };
-    const clearHighlightedMessageTimeoutId = useRef(null);
     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);
         loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
-        dispatch({
-            hasMoreNewer: channel.state.messagePagination.hasNext,
+        handleHighlightedMessageChange({
+            highlightDuration,
             highlightedMessageId: messageId,
-            type: 'jumpToMessageFinished',
         });
-        if (clearHighlightedMessageTimeoutId.current) {
-            clearTimeout(clearHighlightedMessageTimeoutId.current);
-        }
-        clearHighlightedMessageTimeoutId.current = setTimeout(() => {
-            clearHighlightedMessageTimeoutId.current = null;
-            dispatch({ type: 'clearHighlightedMessage' });
-        }, highlightDuration);
-    }, [channel, loadMoreFinished]);
+    }, [channel, handleHighlightedMessageChange, loadMoreFinished]);
     const jumpToLatestMessage = useCallback(async () => {
         await channel.state.loadMessageIntoState('latest');
         loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
@@ -468,19 +484,18 @@ const ChannelInner = (props) => {
                 first_unread_message_id: firstUnreadMessageId,
                 last_read_message_id: lastReadMessageId,
             });
-        dispatch({
-            hasMoreNewer: channel.state.messagePagination.hasNext,
+        handleHighlightedMessageChange({
+            highlightDuration,
             highlightedMessageId: firstUnreadMessageId,
-            type: 'jumpToMessageFinished',
         });
-        if (clearHighlightedMessageTimeoutId.current) {
-            clearTimeout(clearHighlightedMessageTimeoutId.current);
-        }
-        clearHighlightedMessageTimeoutId.current = setTimeout(() => {
-            clearHighlightedMessageTimeoutId.current = null;
-            dispatch({ type: 'clearHighlightedMessage' });
-        }, highlightDuration);
-    }, [addNotification, channel, loadMoreFinished, t, channelUnreadUiState]);
+    }, [
+        addNotification,
+        channel,
+        handleHighlightedMessageChange,
+        loadMoreFinished,
+        t,
+        channelUnreadUiState,
+    ]);
     const deleteMessage = useCallback(async (message) => {
         if (!message?.id) {
             throw new Error('Cannot delete a message - missing message ID.');

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

@@ -13,7 +13,7 @@ export type ChannelStateReducerAction<StreamChatGenerics extends DefaultStreamCh
     channel: Channel<StreamChatGenerics>;
     type: 'copyStateFromChannelOnEvent';
 } | {
-    hasMoreNewer: boolean;
+    channel: Channel<StreamChatGenerics>;
     highlightedMessageId: string;
     type: 'jumpToMessageFinished';
 } | {

package/dist/components/Channel/channelState.js

@@ -59,8 +59,9 @@ export const makeChannelReducer = () => (state, action) => {
         case 'jumpToMessageFinished': {
             return {
                 ...state,
-                hasMoreNewer: action.hasMoreNewer,
+                hasMoreNewer: action.channel.state.messagePagination.hasNext,
                 highlightedMessageId: action.highlightedMessageId,
+                messages: action.channel.state.messages,
             };
         }
         case 'clearHighlightedMessage': {

package/dist/components/ChannelList/ChannelList.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { ChannelListMessengerProps } from './ChannelListMessenger';
 import { CustomQueryChannelsFn } from './hooks/usePaginatedChannels';
 import { ChannelPreviewUIComponentProps } from '../ChannelPreview/ChannelPreview';
@@ -35,7 +35,7 @@ export type ChannelListProps<StreamChatGenerics extends DefaultStreamChatGeneric
     /** An object containing channel query filters */
     filters?: ChannelFilters<StreamChatGenerics>;
     /** Custom function that generates the message preview in ChannelPreview component */
-    getLatestMessagePreview?: (channel: Channel<StreamChatGenerics>, t: TranslationContextValue['t'], userLanguage: TranslationContextValue['userLanguage'], isMessageAIGenerated?: ChatContextValue['isMessageAIGenerated']) => string | JSX.Element;
+    getLatestMessagePreview?: (channel: Channel<StreamChatGenerics>, t: TranslationContextValue['t'], userLanguage: TranslationContextValue['userLanguage'], isMessageAIGenerated?: ChatContextValue['isMessageAIGenerated']) => ReactNode;
     /** Custom UI component to display the container for the queried channels, defaults to and accepts same props as: [ChannelListMessenger](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelList/ChannelListMessenger.tsx) */
     List?: React.ComponentType<ChannelListMessengerProps<StreamChatGenerics>>;
     /** Custom UI component to display the loading error indicator, defaults to component that renders null */

package/dist/components/ChannelList/ChannelList.js

@@ -4,6 +4,7 @@ import { ChannelListMessenger } from './ChannelListMessenger';
 import { useConnectionRecoveredListener } from './hooks/useConnectionRecoveredListener';
 import { useMobileNavigation } from './hooks/useMobileNavigation';
 import { usePaginatedChannels, } from './hooks/usePaginatedChannels';
+import { useChannelListShape, usePrepareShapeHandlers, } from './hooks/useChannelListShape';
 import { MAX_QUERY_CHANNELS_LIMIT, moveChannelUpwards } from './utils';
 import { Avatar as DefaultAvatar } from '../Avatar';
 import { ChannelPreview, } from '../ChannelPreview/ChannelPreview';
@@ -12,18 +13,24 @@ import { EmptyStateIndicator as DefaultEmptyStateIndicator, } from '../EmptyStat
 import { LoadingChannels } from '../Loading/LoadingChannels';
 import { LoadMorePaginator } from '../LoadMore/LoadMorePaginator';
 import { NullComponent } from '../UtilityComponents';
-import { ChannelListContextProvider } from '../../context';
+import { ChannelListContextProvider, useComponentContext, } from '../../context';
 import { useChatContext } from '../../context/ChatContext';
-import { useChannelListShape, usePrepareShapeHandlers, } from './hooks/useChannelListShape';
+import { useStateStore } from '../../store';
 const DEFAULT_FILTERS = {};
 const DEFAULT_OPTIONS = {};
 const DEFAULT_SORT = {};
+const searchControllerStateSelector = (nextValue) => ({
+    searchIsActive: nextValue.isActive,
+});
 const UnMemoizedChannelList = (props) => {
     const { additionalChannelSearchProps, allowNewMessagesFromUnfilteredChannels = true, Avatar = DefaultAvatar, channelRenderFilterFn, ChannelSearch = DefaultChannelSearch, customActiveChannel, customQueryChannels, EmptyStateIndicator = DefaultEmptyStateIndicator, filters = {}, getLatestMessagePreview, List = ChannelListMessenger, LoadingErrorIndicator = NullComponent, LoadingIndicator = LoadingChannels, lockChannelOrder = false, onAddedToChannel, onChannelDeleted, onChannelHidden, onChannelTruncated, onChannelUpdated, onChannelVisible, onMessageNew, onMessageNewHandler, onRemovedFromChannel, options, Paginator = LoadMorePaginator, Preview, recoveryThrottleIntervalMs, renderChannels, sendChannelsToList = false, setActiveChannelOnMount = true, showChannelSearch = false, sort = DEFAULT_SORT, watchers = {}, } = props;
-    const { channel, channelsQueryState, client, closeMobileNav, customClasses, navOpen = false, setActiveChannel, theme, useImageFlagEmojisOnWindows, } = useChatContext('ChannelList');
+    const { channel, channelsQueryState, client, closeMobileNav, customClasses, navOpen = false, searchController, setActiveChannel, theme, useImageFlagEmojisOnWindows, } = useChatContext('ChannelList');
+    const { Search } = useComponentContext(); // FIXME: us component context to retrieve ChannelPreview UI components too
     const channelListRef = useRef(null);
     const [channelUpdateCount, setChannelUpdateCount] = useState(0);
     const [searchActive, setSearchActive] = useState(false);
+    // Indicator relevant when Search component that relies on SearchController is used
+    const { searchIsActive } = useStateStore(searchController.state, searchControllerStateSelector);
     /**
      * Set a channel with id {customActiveChannel} as active and move it to the top of the list.
      * If customActiveChannel prop is absent, then set the first channel in list as active channel.
@@ -65,13 +72,11 @@ const UnMemoizedChannelList = (props) => {
     const onSearch = useCallback((event) => {
         setSearchActive(!!event.target.value);
         additionalChannelSearchProps?.onSearch?.(event);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, [additionalChannelSearchProps]);
     const onSearchExit = useCallback(() => {
         setSearchActive(false);
         additionalChannelSearchProps?.onSearchExit?.();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, [additionalChannelSearchProps]);
     const { channels, hasNextPage, loadNextPage, setChannels } = usePaginatedChannels(client, filters || DEFAULT_FILTERS, sort || DEFAULT_SORT, options || DEFAULT_OPTIONS, activeChannelHandler, recoveryThrottleIntervalMs, customQueryChannels);
     const loadedChannels = channelRenderFilterFn
         ? channelRenderFilterFn(channels)
@@ -132,10 +137,11 @@ const UnMemoizedChannelList = (props) => {
         'str-chat--windows-flags': useImageFlagEmojisOnWindows && navigator.userAgent.match(/Win/),
         [`${baseClass}--open`]: navOpen,
     });
-    const showChannelList = !searchActive || additionalChannelSearchProps?.popupResults;
+    const showChannelList = (!searchActive && !searchIsActive) || additionalChannelSearchProps?.popupResults;
     return (React.createElement(ChannelListContextProvider, { value: { channels, setChannels } },
         React.createElement("div", { className: className, ref: channelListRef },
-            showChannelSearch && (React.createElement(ChannelSearch, { onSearch: onSearch, onSearchExit: onSearchExit, setChannels: setChannels, ...additionalChannelSearchProps })),
+            showChannelSearch &&
+                (Search ? (React.createElement(Search, { directMessagingChannelType: additionalChannelSearchProps?.channelType, disabled: additionalChannelSearchProps?.disabled, exitSearchOnInputBlur: additionalChannelSearchProps?.clearSearchOnClickOutside, placeholder: additionalChannelSearchProps?.placeholder })) : (React.createElement(ChannelSearch, { onSearch: onSearch, onSearchExit: onSearchExit, setChannels: setChannels, ...additionalChannelSearchProps }))),
             showChannelList && (React.createElement(List, { error: channelsQueryState.error, loadedChannels: sendChannelsToList ? loadedChannels : undefined, loading: !!channelsQueryState.queryInProgress &&
                     ['reload', 'uninitialized'].includes(channelsQueryState.queryInProgress), LoadingErrorIndicator: LoadingErrorIndicator, LoadingIndicator: LoadingIndicator, setChannels: setChannels }, !loadedChannels?.length ? (React.createElement(EmptyStateIndicator, { listType: 'channel' })) : (React.createElement(Paginator, { hasNextPage: hasNextPage, isLoading: channelsQueryState.queryInProgress === 'load-more', loadNextPage: loadNextPage }, renderChannels
                 ? renderChannels(loadedChannels, renderChannel)

package/dist/components/ChannelPreview/ChannelPreview.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { ChatContextValue } from '../../context/ChatContext';
 import { MessageDeliveryStatus } from './hooks/useMessageDeliveryStatus';
 import type { Channel } from 'stream-chat';
@@ -8,8 +8,6 @@ import type { StreamMessage } from '../../context/ChannelStateContext';
 import type { TranslationContextValue } from '../../context/TranslationContext';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 export type ChannelPreviewUIComponentProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = ChannelPreviewProps<StreamChatGenerics> & {
-    /** If the component's channel is the active (selected) Channel */
-    active?: boolean;
     /** Image of Channel to display */
     displayImage?: string;
     /** Title of Channel to display */
@@ -19,9 +17,9 @@ export type ChannelPreviewUIComponentProps<StreamChatGenerics extends DefaultStr
     /** The last message received in a channel */
     lastMessage?: StreamMessage<StreamChatGenerics>;
     /** @deprecated Use latestMessagePreview prop instead. */
-    latestMessage?: string | JSX.Element;
+    latestMessage?: ReactNode;
     /** Latest message preview to display, will be a string or JSX element supporting markdown. */
-    latestMessagePreview?: string | JSX.Element;
+    latestMessagePreview?: ReactNode;
     /** Status describing whether own message has been delivered or read by another. If the last message is not an own message, then the status is undefined. */
     messageDeliveryStatus?: MessageDeliveryStatus;
     /** Number of unread Messages */
@@ -30,6 +28,8 @@ export type ChannelPreviewUIComponentProps<StreamChatGenerics extends DefaultStr
 export type ChannelPreviewProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
     /** Comes from either the `channelRenderFilterFn` or `usePaginatedChannels` call from [ChannelList](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelList/ChannelList.tsx) */
     channel: Channel<StreamChatGenerics>;
+    /** If the component's channel is the active (selected) Channel */
+    active?: boolean;
     /** Current selected channel object */
     activeChannel?: Channel<StreamChatGenerics>;
     /** UI component to display an avatar, defaults to [Avatar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/Avatar.tsx) component and accepts the same props as: [ChannelAvatar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/ChannelAvatar.tsx) */
@@ -39,7 +39,7 @@ export type ChannelPreviewProps<StreamChatGenerics extends DefaultStreamChatGene
     /** Custom class for the channel preview root */
     className?: string;
     /** Custom function that generates the message preview in ChannelPreview component */
-    getLatestMessagePreview?: (channel: Channel<StreamChatGenerics>, t: TranslationContextValue['t'], userLanguage: TranslationContextValue['userLanguage']) => string | JSX.Element;
+    getLatestMessagePreview?: (channel: Channel<StreamChatGenerics>, t: TranslationContextValue['t'], userLanguage: TranslationContextValue['userLanguage']) => ReactNode;
     key?: string;
     /** Custom ChannelPreview click handler function */
     onSelect?: (event: React.MouseEvent) => void;

package/dist/components/ChannelPreview/ChannelPreview.js

@@ -8,7 +8,7 @@ import { useChatContext } from '../../context/ChatContext';
 import { useTranslationContext } from '../../context/TranslationContext';
 import { useMessageDeliveryStatus, } from './hooks/useMessageDeliveryStatus';
 export const ChannelPreview = (props) => {
-    const { channel, channelUpdateCount, getLatestMessagePreview = defaultGetLatestMessagePreview, Preview = ChannelPreviewMessenger, } = props;
+    const { active, channel, channelUpdateCount, getLatestMessagePreview = defaultGetLatestMessagePreview, Preview = ChannelPreviewMessenger, } = props;
     const { channel: activeChannel, client, isMessageAIGenerated, setActiveChannel, } = useChatContext('ChannelPreview');
     const { t, userLanguage } = useTranslationContext('ChannelPreview');
     const { displayImage, displayTitle, groupChannelDisplayInfo } = useChannelPreviewInfo({
@@ -20,7 +20,7 @@ export const ChannelPreview = (props) => {
         channel,
         lastMessage,
     });
-    const isActive = activeChannel?.cid === channel.cid;
+    const isActive = typeof active === 'undefined' ? activeChannel?.cid === channel.cid : active;
     const { muted } = useIsChannelMuted(channel);
     useEffect(() => {
         const handleEvent = (event) => {
@@ -31,8 +31,7 @@ export const ChannelPreview = (props) => {
         };
         client.on('notification.mark_read', handleEvent);
         return () => client.off('notification.mark_read', handleEvent);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, [channel, client]);
     useEffect(() => {
         const handleEvent = (event) => {
             if (channel.cid !== event.cid)

package/dist/components/ChannelPreview/ChannelPreviewMessenger.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { DefaultStreamChatGenerics } from '../../types/types';
 import type { ChannelPreviewUIComponentProps } from './ChannelPreview';
+import type { DefaultStreamChatGenerics } from '../../types/types';
 /**
  * Used as preview component for channel item in [ChannelList](#channellist) component.
  * Its best suited for messenger type chat.

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

@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import type { Channel, UserResponse } from 'stream-chat';
 import type { TranslationContextValue } from '../../context/TranslationContext';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import { ChatContextValue } from '../../context';
 export declare const renderPreviewText: (text: string) => React.JSX.Element;
-export declare const getLatestMessagePreview: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(channel: Channel<StreamChatGenerics>, t: TranslationContextValue['t'], userLanguage?: TranslationContextValue['userLanguage'], isMessageAIGenerated?: ChatContextValue<StreamChatGenerics>['isMessageAIGenerated']) => string | JSX.Element;
+export declare const getLatestMessagePreview: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(channel: Channel<StreamChatGenerics>, t: TranslationContextValue['t'], userLanguage?: TranslationContextValue['userLanguage'], isMessageAIGenerated?: ChatContextValue<StreamChatGenerics>['isMessageAIGenerated']) => ReactNode;
 export type GroupChannelDisplayInfo = {
     image?: string;
     name?: string;

package/dist/components/ChannelSearch/SearchBar.js

@@ -33,25 +33,24 @@ export const SearchBar = (props) => {
     useEffect(() => {
         if (!props.inputRef.current)
             return;
+        const input = props.inputRef.current;
         const handleFocus = () => {
             activateSearch();
         };
         const handleBlur = (e) => {
             e.stopPropagation(); // handle blur/focus state with React state
         };
-        props.inputRef.current.addEventListener('focus', handleFocus);
-        props.inputRef.current.addEventListener('blur', handleBlur);
+        input.addEventListener('focus', handleFocus);
+        input.addEventListener('blur', handleBlur);
         return () => {
-            props.inputRef.current?.removeEventListener('focus', handleFocus);
-            props.inputRef.current?.addEventListener('blur', handleBlur);
+            input.removeEventListener('focus', handleFocus);
+            input.removeEventListener('blur', handleBlur);
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, [activateSearch, props.inputRef]);
     const handleClearClick = useCallback(() => {
         exitSearch();
         inputProps.inputRef.current?.focus();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, [exitSearch, inputProps.inputRef]);
     const closeAppMenu = useCallback(() => setMenuIsOpen(false), []);
     return (React.createElement("div", { className: 'str-chat__channel-search-bar', "data-testid": 'search-bar', ref: searchBarRef },
         inputIsFocused ? (React.createElement(SearchBarButton, { className: 'str-chat__channel-search-bar-button--exit-search', onClick: exitSearch },

package/dist/components/ChannelSearch/SearchResults.js

@@ -60,14 +60,15 @@ export const SearchResults = (props) => {
         }
         if (event.key === 'Enter') {
             event.preventDefault();
-            if (focusedResult !== undefined) {
-                selectResult(results[focusedResult]);
-                return setFocusedResult(undefined);
-            }
+            setFocusedResult((prevFocused) => {
+                if (typeof prevFocused !== 'undefined') {
+                    selectResult(results[prevFocused]);
+                    return undefined;
+                }
+                return prevFocused;
+            });
         }
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [focusedResult]);
+    }, [results, selectResult]);
     useEffect(() => {
         document.addEventListener('keydown', handleKeyDown, false);
         return () => document.removeEventListener('keydown', handleKeyDown);

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

@@ -1,10 +1,11 @@
 import React, { PropsWithChildren } from 'react';
-import { CustomClasses } from '../../context/ChatContext';
 import type { StreamChat } from 'stream-chat';
+import { SearchController } from 'stream-chat';
+import { CustomClasses } from '../../context/ChatContext';
+import type { MessageContextValue } from '../../context';
 import type { SupportedTranslations } from '../../i18n/types';
 import type { Streami18n } from '../../i18n/Streami18n';
 import type { DefaultStreamChatGenerics } from '../../types/types';
-import type { MessageContextValue } from '../../context';
 export type ChatProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
     /** The StreamChat client object */
     client: StreamChat<StreamChatGenerics>;
@@ -16,6 +17,8 @@ export type ChatProps<StreamChatGenerics extends DefaultStreamChatGenerics = Def
     i18nInstance?: Streami18n;
     /** Initial status of mobile navigation */
     initialNavOpen?: boolean;
+    /** Instance of SearchController class that allows to control all the search operations. */
+    searchController?: SearchController<StreamChatGenerics>;
     /** Used for injecting className/s to the Channel and ChannelList components */
     theme?: string;
     /**

package/dist/components/Chat/Chat.js

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useMemo } from 'react';
+import { ChannelSearchSource, MessageSearchSource, SearchController, UserSearchSource, } from 'stream-chat';
 import { useChat } from './hooks/useChat';
 import { useCreateChatContext } from './hooks/useCreateChatContext';
 import { useChannelsQueryState } from './hooks/useChannelsQueryState';
@@ -9,9 +10,17 @@ import { TranslationProvider } from '../../context/TranslationContext';
  * as it provides the ChatContext.
  */
 export const Chat = (props) => {
-    const { children, client, customClasses, defaultLanguage, i18nInstance, initialNavOpen = true, isMessageAIGenerated, theme = 'messaging light', useImageFlagEmojisOnWindows = false, } = props;
+    const { children, client, customClasses, defaultLanguage, i18nInstance, initialNavOpen = true, isMessageAIGenerated, searchController: customChannelSearchController, theme = 'messaging light', useImageFlagEmojisOnWindows = false, } = props;
     const { channel, closeMobileNav, getAppSettings, latestMessageDatesByChannels, mutes, navOpen, openMobileNav, setActiveChannel, translators, } = useChat({ client, defaultLanguage, i18nInstance, initialNavOpen });
     const channelsQueryState = useChannelsQueryState();
+    const searchController = useMemo(() => customChannelSearchController ??
+        new SearchController({
+            sources: [
+                new ChannelSearchSource(client),
+                new UserSearchSource(client),
+                new MessageSearchSource(client),
+            ],
+        }), [client, customChannelSearchController]);
     const chatContextValue = useCreateChatContext({
         channel,
         channelsQueryState,
@@ -24,6 +33,7 @@ export const Chat = (props) => {
         mutes,
         navOpen,
         openMobileNav,
+        searchController,
         setActiveChannel,
         theme,
         useImageFlagEmojisOnWindows,

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

@@ -28,7 +28,7 @@ export const useChat = ({ client, defaultLanguage = 'en', i18nInstance, initialN
         if (!userAgent.includes('stream-chat-react')) {
             // result looks like: 'stream-chat-react-2.3.2-stream-chat-javascript-client-browser-2.2.2'
             // the upper-case text between double underscores is replaced with the actual semantic version of the library
-            client.setUserAgent(`stream-chat-react-12.11.1-${userAgent}`);
+            client.setUserAgent(`stream-chat-react-12.13.0-${userAgent}`);
         }
         client.threads.registerSubscriptions();
         client.polls.registerSubscriptions();

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

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 export const useCreateChatContext = (value) => {
-    const { channel, channelsQueryState, client, closeMobileNav, customClasses, getAppSettings, isMessageAIGenerated, latestMessageDatesByChannels, mutes, navOpen, openMobileNav, setActiveChannel, theme, useImageFlagEmojisOnWindows, } = value;
+    const { channel, channelsQueryState, client, closeMobileNav, customClasses, getAppSettings, isMessageAIGenerated, latestMessageDatesByChannels, mutes, navOpen, openMobileNav, searchController, setActiveChannel, theme, useImageFlagEmojisOnWindows, } = value;
     const channelCid = channel?.cid;
     const channelsQueryError = channelsQueryState.error;
     const channelsQueryInProgress = channelsQueryState.queryInProgress;
@@ -19,6 +19,7 @@ export const useCreateChatContext = (value) => {
         mutes,
         navOpen,
         openMobileNav,
+        searchController,
         setActiveChannel,
         theme,
         useImageFlagEmojisOnWindows,
@@ -30,6 +31,7 @@ export const useCreateChatContext = (value) => {
         channelsQueryInProgress,
         clientValues,
         getAppSettings,
+        searchController,
         mutedUsersLength,
         navOpen,
         isMessageAIGenerated,

package/dist/components/InfiniteScrollPaginator/InfiniteScroll.d.ts

@@ -34,7 +34,7 @@ export type InfiniteScrollProps = PaginatorProps & {
 /**
  * This component serves a single purpose - load more items on scroll inside the MessageList component
  * It is not a general purpose infinite scroll controller, because:
- * 1. It is re-rendered whenever isLoading, hasNext, hasPrev changes. This can lead to scrollListener to have stale data.
+ * 1. It is re-rendered whenever queryInProgress, hasNext, hasPrev changes. This can lead to scrollListener to have stale data.
  * 2. It pretends to invoke scrollListener on resize event even though this event is emitted only on window resize. It should
  * rather use ResizeObserver. But then again, it ResizeObserver would invoke a stale version of scrollListener.
  *

package/dist/components/InfiniteScrollPaginator/InfiniteScroll.js

@@ -13,7 +13,7 @@ const mousewheelListener = (event) => {
 /**
  * This component serves a single purpose - load more items on scroll inside the MessageList component
  * It is not a general purpose infinite scroll controller, because:
- * 1. It is re-rendered whenever isLoading, hasNext, hasPrev changes. This can lead to scrollListener to have stale data.
+ * 1. It is re-rendered whenever queryInProgress, hasNext, hasPrev changes. This can lead to scrollListener to have stale data.
  * 2. It pretends to invoke scrollListener on resize event even though this event is emitted only on window resize. It should
  * rather use ResizeObserver. But then again, it ResizeObserver would invoke a stale version of scrollListener.
  *

package/dist/components/InfiniteScrollPaginator/InfiniteScrollPaginator.d.ts

@@ -1,6 +1,7 @@
 import React, { PropsWithChildren } from 'react';
 export type InfiniteScrollPaginatorProps = React.ComponentProps<'div'> & {
     listenToScroll?: (distanceFromBottom: number, distanceFromTop: number, threshold: number) => void;
+    loadNextDebounceMs?: number;
     loadNextOnScrollToBottom?: () => void;
     loadNextOnScrollToTop?: () => void;
     /** Offset from when to start the loadNextPage call */

package/dist/components/InfiniteScrollPaginator/InfiniteScrollPaginator.js

@@ -12,7 +12,7 @@ const mousewheelListener = (event) => {
     }
 };
 export const InfiniteScrollPaginator = (props) => {
-    const { children, className, listenToScroll, loadNextOnScrollToBottom, loadNextOnScrollToTop, threshold = DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD, useCapture = false, ...componentProps } = props;
+    const { children, className, listenToScroll, loadNextDebounceMs = 500, loadNextOnScrollToBottom, loadNextOnScrollToTop, threshold = DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD, useCapture = false, ...componentProps } = props;
     const rootRef = useRef(null);
     const childRef = useRef(null);
     const scrollListener = useMemo(() => debounce(() => {
@@ -32,7 +32,13 @@ export const InfiniteScrollPaginator = (props) => {
         if (distanceFromBottom < Number(threshold)) {
             loadNextOnScrollToBottom?.();
         }
-    }, 500), [listenToScroll, loadNextOnScrollToBottom, loadNextOnScrollToTop, threshold]);
+    }, loadNextDebounceMs), [
+        listenToScroll,
+        loadNextDebounceMs,
+        loadNextOnScrollToBottom,
+        loadNextOnScrollToTop,
+        threshold,
+    ]);
     useEffect(() => {
         const scrollElement = rootRef.current;
         if (!scrollElement)

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

@@ -6,7 +6,12 @@ import { RecordedMediaType } from '../../ReactFileUtilities';
 import { TranslationContextValue } from '../../../context';
 import type { LocalVoiceRecordingAttachment } from '../../MessageInput';
 import type { DefaultStreamChatGenerics } from '../../../types';
-export declare const DEFAULT_MEDIA_RECORDER_CONFIG: MediaRecorderConfig;
+export declare const RECORDED_MIME_TYPE_BY_BROWSER: {
+    readonly audio: {
+        readonly others: "audio/webm";
+        readonly safari: "audio/mp4;codecs=mp4a.40.2";
+    };
+};
 export declare const DEFAULT_AUDIO_TRANSCODER_CONFIG: TranscoderConfig;
 type MediaRecorderConfig = Omit<MediaRecorderOptions, 'mimeType'> & Required<Pick<MediaRecorderOptions, 'mimeType'>>;
 export type AudioRecorderConfig = {

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

@@ -7,19 +7,13 @@ import { transcode } from '../transcode';
 import { resampleWaveformData } from '../../Attachment';
 import { createFileFromBlobs, getExtensionFromMimeType, getRecordedMediaTypeFromMimeType, } from '../../ReactFileUtilities';
 import { defaultTranslatorFunction } from '../../../i18n';
-import { isSafari } from '../../../utils/browsers';
 import { mergeDeepUndefined } from '../../../utils/mergeDeep';
-const RECORDED_MIME_TYPE_BY_BROWSER = {
+export const RECORDED_MIME_TYPE_BY_BROWSER = {
     audio: {
         others: 'audio/webm',
         safari: 'audio/mp4;codecs=mp4a.40.2',
     },
 };
-export const DEFAULT_MEDIA_RECORDER_CONFIG = {
-    mimeType: isSafari()
-        ? RECORDED_MIME_TYPE_BY_BROWSER.audio.safari
-        : RECORDED_MIME_TYPE_BY_BROWSER.audio.others,
-};
 export const DEFAULT_AUDIO_TRANSCODER_CONFIG = {
     sampleRate: 16000,
 };
@@ -241,7 +235,11 @@ export class MediaRecorderController {
         };
         this.t = t || defaultTranslatorFunction;
         this.amplitudeRecorderConfig = mergeDeepUndefined({ ...config?.amplitudeRecorderConfig }, DEFAULT_AMPLITUDE_RECORDER_CONFIG);
-        this.mediaRecorderConfig = mergeDeepUndefined({ ...config?.mediaRecorderConfig }, DEFAULT_MEDIA_RECORDER_CONFIG);
+        this.mediaRecorderConfig = mergeDeepUndefined({ ...config?.mediaRecorderConfig }, {
+            mimeType: MediaRecorder.isTypeSupported('audio/webm')
+                ? RECORDED_MIME_TYPE_BY_BROWSER.audio.others
+                : RECORDED_MIME_TYPE_BY_BROWSER.audio.safari,
+        });
         this.transcoderConfig = mergeDeepUndefined({ ...config?.transcoderConfig }, DEFAULT_AUDIO_TRANSCODER_CONFIG);
         const mediaType = getRecordedMediaTypeFromMimeType(this.mediaRecorderConfig.mimeType);
         if (!mediaType) {

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

@@ -1,3 +1,5 @@
 import React from 'react';
+import type { MessageContextValue } from '../../context/MessageContext';
+export type QuotedMessageProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Pick<MessageContextValue<StreamChatGenerics>, 'renderText'>;
 import type { DefaultStreamChatGenerics } from '../../types/types';
-export declare const QuotedMessage: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>() => React.JSX.Element | null;
+export declare const QuotedMessage: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ renderText: propsRenderText, }: QuotedMessageProps) => React.JSX.Element | null;