stream-chat-react 12.15.7 → 12.16.0

package/dist/components/AutoCompleteTextarea/Textarea.d.ts

@@ -83,32 +83,31 @@ export class ReactTextareaAutocomplete extends React.Component<any, any, any> {
 }
 export namespace ReactTextareaAutocomplete {
     namespace propTypes {
-        export let className: PropTypes.Requireable<string>;
-        export let closeOnClickOutside: PropTypes.Requireable<boolean>;
-        export let containerClassName: PropTypes.Requireable<string>;
-        export let containerStyle: PropTypes.Requireable<object>;
-        export let disableMentions: PropTypes.Requireable<boolean>;
-        export let dropdownClassName: PropTypes.Requireable<string>;
-        export let dropdownStyle: PropTypes.Requireable<object>;
-        export let itemClassName: PropTypes.Requireable<string>;
-        export let itemStyle: PropTypes.Requireable<object>;
-        export let listClassName: PropTypes.Requireable<string>;
-        export let listStyle: PropTypes.Requireable<object>;
-        export let loaderClassName: PropTypes.Requireable<string>;
-        export let loaderStyle: PropTypes.Requireable<object>;
-        export let loadingComponent: PropTypes.Requireable<PropTypes.ReactComponentLike>;
-        export let minChar: PropTypes.Requireable<number>;
-        export let onBlur: PropTypes.Requireable<(...args: any[]) => any>;
-        export let onCaretPositionChange: PropTypes.Requireable<(...args: any[]) => any>;
-        export let onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        export let onSelect: PropTypes.Requireable<(...args: any[]) => any>;
-        export let shouldSubmit: PropTypes.Requireable<(...args: any[]) => any>;
-        export let style: PropTypes.Requireable<object>;
-        export let SuggestionList: PropTypes.Requireable<PropTypes.ReactComponentLike>;
+        export let className: any;
+        export let closeOnClickOutside: any;
+        export let containerClassName: any;
+        export let containerStyle: any;
+        export let disableMentions: any;
+        export let dropdownClassName: any;
+        export let dropdownStyle: any;
+        export let itemClassName: any;
+        export let itemStyle: any;
+        export let listClassName: any;
+        export let listStyle: any;
+        export let loaderClassName: any;
+        export let loaderStyle: any;
+        export let loadingComponent: any;
+        export let minChar: any;
+        export let onBlur: any;
+        export let onCaretPositionChange: any;
+        export let onChange: any;
+        export let onSelect: any;
+        export let shouldSubmit: any;
+        export let style: any;
+        export let SuggestionList: any;
         export { triggerPropsCheck as trigger };
-        export let value: PropTypes.Requireable<string>;
+        export let value: any;
     }
 }
 import React from 'react';
-import PropTypes from 'prop-types';
 import { triggerPropsCheck } from './utils';

package/dist/components/Channel/Channel.js

@@ -1,6 +1,5 @@
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState, } from 'react';
 import debounce from 'lodash.debounce';
-import defaultsDeep from 'lodash.defaultsdeep';
 import throttle from 'lodash.throttle';
 import { nanoid } from 'nanoid';
 import clsx from 'clsx';
@@ -15,7 +14,7 @@ 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 { DEFAULT_HIGHLIGHT_DURATION, 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';
@@ -50,10 +49,7 @@ const UnMemoizedChannel = (props) => {
     return React.createElement(ChannelInner, { ...props, channel: channel, key: channel.cid });
 };
 const ChannelInner = (props) => {
-    const { acceptedFiles, activeUnreadHandler, channel, channelQueryOptions: propChannelQueryOptions, children, doDeleteMessageRequest, doMarkReadRequest, doSendMessageRequest, doUpdateMessageRequest, dragAndDropWindow = false, enrichURLForPreviewConfig, initializeOnMount = true, LoadingErrorIndicator = DefaultLoadingErrorIndicator, LoadingIndicator = DefaultLoadingIndicator, markReadOnMount = true, maxNumberOfFiles, multipleUploads = true, onMentionsClick, onMentionsHover, optionalMessageInputProps = {}, skipMessageDataMemoization, } = props;
-    const channelQueryOptions = useMemo(() => defaultsDeep(propChannelQueryOptions, {
-        messages: { limit: DEFAULT_INITIAL_CHANNEL_PAGE_SIZE },
-    }), [propChannelQueryOptions]);
+    const { acceptedFiles, activeUnreadHandler, channel, channelQueryOptions, children, doDeleteMessageRequest, doMarkReadRequest, doSendMessageRequest, doUpdateMessageRequest, dragAndDropWindow = false, enrichURLForPreviewConfig, initializeOnMount = true, LoadingErrorIndicator = DefaultLoadingErrorIndicator, LoadingIndicator = DefaultLoadingIndicator, markReadOnMount = true, maxNumberOfFiles, multipleUploads = true, onMentionsClick, onMentionsHover, optionalMessageInputProps = {}, skipMessageDataMemoization, } = props;
     const { client, customClasses, latestMessageDatesByChannels, mutes, searchController } = useChatContext('Channel');
     const { t } = useTranslationContext('Channel');
     const chatContainerClass = getChatContainerClass(customClasses?.chatContainer);

package/dist/components/ChannelList/ChannelList.js

@@ -5,7 +5,7 @@ import { useConnectionRecoveredListener } from './hooks/useConnectionRecoveredLi
 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 { moveChannelUpwards } from './utils';
 import { Avatar as DefaultAvatar } from '../Avatar';
 import { ChannelPreview, } from '../ChannelPreview/ChannelPreview';
 import { ChannelSearch as DefaultChannelSearch, } from '../ChannelSearch/ChannelSearch';
@@ -36,8 +36,7 @@ const UnMemoizedChannelList = (props) => {
      * If customActiveChannel prop is absent, then set the first channel in list as active channel.
      */
     const activeChannelHandler = async (channels, setChannels) => {
-        if (!channels.length ||
-            channels.length > (options?.limit || MAX_QUERY_CHANNELS_LIMIT)) {
+        if (!channels.length) {
             return;
         }
         if (customActiveChannel) {

package/dist/components/ChannelList/hooks/usePaginatedChannels.js

@@ -1,8 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import uniqBy from 'lodash.uniqby';
-import { MAX_QUERY_CHANNELS_LIMIT } from '../utils';
 import { useChatContext } from '../../../context/ChatContext';
-import { DEFAULT_INITIAL_CHANNEL_PAGE_SIZE } from '../../../constants/limits';
 const RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS = 5000;
 const MIN_RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS = 2000;
 export const usePaginatedChannels = (client, filters, sort, options, activeChannelHandler, recoveryThrottleIntervalMs = RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS, customQueryChannels) => {
@@ -35,8 +33,6 @@ export const usePaginatedChannels = (client, filters, sort, options, activeChann
             else {
                 const offset = queryType === 'reload' ? 0 : channels.length;
                 const newOptions = {
-                    limit: options?.limit ?? MAX_QUERY_CHANNELS_LIMIT,
-                    message_limit: options?.message_limit ?? DEFAULT_INITIAL_CHANNEL_PAGE_SIZE,
                     offset,
                     ...options,
                 };
@@ -45,7 +41,7 @@ export const usePaginatedChannels = (client, filters, sort, options, activeChann
                     ? channelQueryResponse
                     : uniqBy([...channels, ...channelQueryResponse], 'cid');
                 setChannels(newChannels);
-                setHasNextPage(channelQueryResponse.length >= newOptions.limit);
+                setHasNextPage(channelQueryResponse.length >= (newOptions.limit ?? 1));
                 // Set active channel only on load of first page
                 if (!offset && activeChannelHandler) {
                     activeChannelHandler(newChannels, setChannels);

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

@@ -1,7 +1,6 @@
 import type { Channel, ChannelSort, ChannelSortBase, ExtendableGenerics } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import type { ChannelListProps } from './ChannelList';
-export declare const MAX_QUERY_CHANNELS_LIMIT = 30;
 type MoveChannelUpParams<SCG extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
     channels: Array<Channel<SCG>>;
     cid: string;
@@ -40,7 +39,7 @@ export declare const extractSortValue: <SCG extends ExtendableGenerics>({ atInde
     atIndex: number;
     targetKey: keyof ChannelSortBase<SCG>;
     sort?: ChannelListProps<SCG>['sort'];
-}) => NonNullable<ChannelSortBase<SCG>["created_at" | "pinned_at" | "updated_at" | keyof SCG["channelType"] | "has_unread" | "last_message_at" | "last_updated" | "member_count" | "unread_count"]> | null;
+}) => NonNullable<ChannelSortBase<SCG>["created_at" | "pinned_at" | "updated_at" | "last_message_at" | "member_count" | keyof SCG["channelType"] | "has_unread" | "last_updated" | "unread_count"]> | null;
 /**
  * Returns `true` only if `archived` property is of type `boolean` within `filters` object.
  */

package/dist/components/ChannelList/utils.js

@@ -1,5 +1,4 @@
 import uniqBy from 'lodash.uniqby';
-export const MAX_QUERY_CHANNELS_LIMIT = 30;
 /**
  * @deprecated
  */

package/dist/components/ChannelPreview/ChannelPreview.js

@@ -15,6 +15,7 @@ export const ChannelPreview = (props) => {
         channel,
     });
     const [lastMessage, setLastMessage] = useState(channel.state.messages[channel.state.messages.length - 1]);
+    const [latestMessagePreview, setLatestMessagePreview] = useState(() => getLatestMessagePreview(channel, t, userLanguage, isMessageAIGenerated));
     const [unread, setUnread] = useState(0);
     const { messageDeliveryStatus } = useMessageDeliveryStatus({
         channel,
@@ -55,8 +56,10 @@ export const ChannelPreview = (props) => {
     }, 400), [channel, muted]);
     useEffect(() => {
         refreshUnreadCount();
+        setLatestMessagePreview(getLatestMessagePreview(channel, t, userLanguage, isMessageAIGenerated));
         const handleEvent = () => {
             setLastMessage(channel.state.latestMessages[channel.state.latestMessages.length - 1]);
+            setLatestMessagePreview(getLatestMessagePreview(channel, t, userLanguage, isMessageAIGenerated));
             refreshUnreadCount();
         };
         channel.on('message.new', handleEvent);
@@ -71,9 +74,17 @@ export const ChannelPreview = (props) => {
             channel.off('message.undeleted', handleEvent);
             channel.off('channel.truncated', handleEvent);
         };
-    }, [channel, refreshUnreadCount, channelUpdateCount]);
+    }, [
+        channel,
+        client,
+        refreshUnreadCount,
+        channelUpdateCount,
+        getLatestMessagePreview,
+        t,
+        userLanguage,
+        isMessageAIGenerated,
+    ]);
     if (!Preview)
         return null;
-    const latestMessagePreview = getLatestMessagePreview(channel, t, userLanguage, isMessageAIGenerated);
     return (React.createElement(Preview, { ...props, active: isActive, displayImage: displayImage, displayTitle: displayTitle, groupChannelDisplayInfo: groupChannelDisplayInfo, lastMessage: lastMessage, latestMessage: latestMessagePreview, latestMessagePreview: latestMessagePreview, messageDeliveryStatus: messageDeliveryStatus, setActiveChannel: setActiveChannel, unread: unread }));
 };

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

@@ -24,7 +24,7 @@ export const useChat = ({ client, defaultLanguage = 'en', i18nInstance, initialN
     useEffect(() => {
         if (!client)
             return;
-        const version = "12.15.7";
+        const version = "12.16.0";
         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'

package/dist/components/Gallery/ModalGallery.js

@@ -19,7 +19,5 @@ export const ModalGallery = (props) => {
             source: imageSrc,
         };
     }), [images, t]);
-    return (
-    // @ts-expect-error ignore the TS error as react-image-gallery was on @types/react@18 while stream-chat-react being upgraded to React 19 (https://github.com/xiaolin/react-image-gallery/issues/809)
-    React.createElement(ImageGallery, { items: formattedArray, renderItem: renderItem, showIndex: true, showPlayButton: false, showThumbnails: false, startIndex: index }));
+    return (React.createElement(ImageGallery, { items: formattedArray, renderItem: renderItem, showIndex: true, showPlayButton: false, showThumbnails: false, startIndex: index }));
 };

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

@@ -1,4 +1,4 @@
-import React, { ComponentType } from 'react';
+import { ComponentType, JSX } from 'react';
 import { MentionProps } from './componentRenderers';
 import type { Options } from 'react-markdown/lib';
 import type { UserResponse } from 'stream-chat';
@@ -16,4 +16,4 @@ export type RenderTextOptions<StreamChatGenerics extends DefaultStreamChatGeneri
     getRehypePlugins?: RenderTextPluginConfigurator;
     getRemarkPlugins?: RenderTextPluginConfigurator;
 };
-export declare const renderText: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(text?: string, mentionedUsers?: UserResponse<StreamChatGenerics>[], { allowedTagNames, customMarkDownRenderers, getRehypePlugins, getRemarkPlugins, }?: RenderTextOptions) => React.JSX.Element | null;
+export declare const renderText: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(text?: string, mentionedUsers?: UserResponse<StreamChatGenerics>[], { allowedTagNames, customMarkDownRenderers, getRehypePlugins, getRemarkPlugins, }?: RenderTextOptions) => JSX.Element | null;

package/dist/constants/limits.d.ts

@@ -1,7 +1,6 @@
-export declare const DEFAULT_INITIAL_CHANNEL_PAGE_SIZE = 25;
-export declare const DEFAULT_NEXT_CHANNEL_PAGE_SIZE = 100;
-export declare const DEFAULT_JUMP_TO_PAGE_SIZE = 100;
-export declare const DEFAULT_THREAD_PAGE_SIZE = 50;
+export declare const DEFAULT_NEXT_CHANNEL_PAGE_SIZE = 25;
+export declare const DEFAULT_JUMP_TO_PAGE_SIZE = 25;
+export declare const DEFAULT_THREAD_PAGE_SIZE = 25;
 export declare const DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD = 250;
 export declare const DEFAULT_UPLOAD_SIZE_LIMIT_BYTES: number;
 export declare const DEFAULT_HIGHLIGHT_DURATION = 500;

package/dist/constants/limits.js

@@ -1,7 +1,6 @@
-export const DEFAULT_INITIAL_CHANNEL_PAGE_SIZE = 25;
-export const DEFAULT_NEXT_CHANNEL_PAGE_SIZE = 100;
-export const DEFAULT_JUMP_TO_PAGE_SIZE = 100;
-export const DEFAULT_THREAD_PAGE_SIZE = 50;
+export const DEFAULT_NEXT_CHANNEL_PAGE_SIZE = 25;
+export const DEFAULT_JUMP_TO_PAGE_SIZE = 25;
+export const DEFAULT_THREAD_PAGE_SIZE = 25;
 export const DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD = 250;
 export const DEFAULT_UPLOAD_SIZE_LIMIT_BYTES = 100 * 1024 * 1024; // 100 MB
 export const DEFAULT_HIGHLIGHT_DURATION = 500;

package/dist/experimental/index.browser.cjs

@@ -513,7 +513,7 @@ var useMessageContext = (_componentName) => {
 };
 
 // src/constants/limits.ts
-var DEFAULT_JUMP_TO_PAGE_SIZE = 100;
+var DEFAULT_JUMP_TO_PAGE_SIZE = 25;
 var DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD = 250;
 var DEFAULT_UPLOAD_SIZE_LIMIT_BYTES = 100 * 1024 * 1024;
 
@@ -10733,6 +10733,9 @@ var ChannelPreview = (props) => {
   const [lastMessage, setLastMessage] = (0, import_react23.useState)(
     channel.state.messages[channel.state.messages.length - 1]
   );
+  const [latestMessagePreview, setLatestMessagePreview] = (0, import_react23.useState)(
+    () => getLatestMessagePreview2(channel, t, userLanguage, isMessageAIGenerated)
+  );
   const [unread, setUnread] = (0, import_react23.useState)(0);
   const { messageDeliveryStatus } = useMessageDeliveryStatus({
     channel,
@@ -10771,10 +10774,16 @@ var ChannelPreview = (props) => {
   );
   (0, import_react23.useEffect)(() => {
     refreshUnreadCount();
+    setLatestMessagePreview(
+      getLatestMessagePreview2(channel, t, userLanguage, isMessageAIGenerated)
+    );
     const handleEvent = () => {
       setLastMessage(
         channel.state.latestMessages[channel.state.latestMessages.length - 1]
       );
+      setLatestMessagePreview(
+        getLatestMessagePreview2(channel, t, userLanguage, isMessageAIGenerated)
+      );
       refreshUnreadCount();
     };
     channel.on("message.new", handleEvent);
@@ -10789,14 +10798,17 @@ var ChannelPreview = (props) => {
       channel.off("message.undeleted", handleEvent);
       channel.off("channel.truncated", handleEvent);
     };
-  }, [channel, refreshUnreadCount, channelUpdateCount]);
-  if (!Preview) return null;
-  const latestMessagePreview = getLatestMessagePreview2(
+  }, [
     channel,
+    client,
+    refreshUnreadCount,
+    channelUpdateCount,
+    getLatestMessagePreview2,
     t,
     userLanguage,
     isMessageAIGenerated
-  );
+  ]);
+  if (!Preview) return null;
   return /* @__PURE__ */ import_react23.default.createElement(
     Preview,
     {