stream-chat-react 12.15.7 → 12.16.0

package/dist/index.browser.cjs

@@ -17659,7 +17659,6 @@ __export(src_exports, {
   LoadingIndicator: () => LoadingIndicator,
   LoadingIndicatorIcon: () => LoadingIndicatorIcon,
   MAX_MESSAGE_REACTIONS_TO_FETCH: () => MAX_MESSAGE_REACTIONS_TO_FETCH,
-  MAX_QUERY_CHANNELS_LIMIT: () => MAX_QUERY_CHANNELS_LIMIT,
   MESSAGE_ACTIONS: () => MESSAGE_ACTIONS,
   MML: () => MML3,
   MediaContainer: () => MediaContainer,
@@ -18793,10 +18792,9 @@ var DownloadButton = ({ assetUrl }) => /* @__PURE__ */ import_react22.default.cr
 var import_react23 = __toESM(require("react"));
 
 // src/constants/limits.ts
-var DEFAULT_INITIAL_CHANNEL_PAGE_SIZE = 25;
-var DEFAULT_NEXT_CHANNEL_PAGE_SIZE = 100;
-var DEFAULT_JUMP_TO_PAGE_SIZE = 100;
-var DEFAULT_THREAD_PAGE_SIZE = 50;
+var DEFAULT_NEXT_CHANNEL_PAGE_SIZE = 25;
+var DEFAULT_JUMP_TO_PAGE_SIZE = 25;
+var DEFAULT_THREAD_PAGE_SIZE = 25;
 var DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD = 250;
 var DEFAULT_UPLOAD_SIZE_LIMIT_BYTES = 100 * 1024 * 1024;
 var DEFAULT_HIGHLIGHT_DURATION = 500;
@@ -20755,19 +20753,16 @@ var ModalGallery = (props) => {
     }),
     [images, t2]
   );
-  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)
-    /* @__PURE__ */ import_react39.default.createElement(
-      import_react_image_gallery.default,
-      {
-        items: formattedArray,
-        renderItem,
-        showIndex: true,
-        showPlayButton: false,
-        showThumbnails: false,
-        startIndex: index3
-      }
-    )
+  return /* @__PURE__ */ import_react39.default.createElement(
+    import_react_image_gallery.default,
+    {
+      items: formattedArray,
+      renderItem,
+      showIndex: true,
+      showPlayButton: false,
+      showThumbnails: false,
+      startIndex: index3
+    }
   );
 };
 
@@ -35602,8 +35597,7 @@ ReactTextareaAutocomplete.propTypes = {
 // src/components/Channel/Channel.tsx
 var import_react260 = __toESM(require("react"));
 var import_lodash22 = __toESM(require("lodash.debounce"));
-var import_lodash23 = __toESM(require("lodash.defaultsdeep"));
-var import_lodash24 = __toESM(require("lodash.throttle"));
+var import_lodash23 = __toESM(require("lodash.throttle"));
 var import_nanoid12 = require("nanoid");
 var import_clsx65 = __toESM(require("clsx"));
 
@@ -41561,11 +41555,93 @@ var useMobileNavigation = (channelListRef, navOpen, closeMobileNav) => {
 
 // src/components/ChannelList/hooks/usePaginatedChannels.ts
 var import_react88 = require("react");
-var import_lodash8 = __toESM(require("lodash.uniqby"));
+var import_lodash7 = __toESM(require("lodash.uniqby"));
+var RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS = 5e3;
+var MIN_RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS = 2e3;
+var usePaginatedChannels = (client, filters, sort, options, activeChannelHandler, recoveryThrottleIntervalMs = RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS, customQueryChannels) => {
+  const {
+    channelsQueryState: { error, setError, setQueryInProgress }
+  } = useChatContext("usePaginatedChannels");
+  const [channels, setChannels] = (0, import_react88.useState)([]);
+  const [hasNextPage, setHasNextPage] = (0, import_react88.useState)(true);
+  const lastRecoveryTimestamp = (0, import_react88.useRef)(void 0);
+  const recoveryThrottleInterval = recoveryThrottleIntervalMs < MIN_RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS ? MIN_RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS : recoveryThrottleIntervalMs ?? RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS;
+  const filterString = (0, import_react88.useMemo)(() => JSON.stringify(filters), [filters]);
+  const sortString = (0, import_react88.useMemo)(() => JSON.stringify(sort), [sort]);
+  const queryChannels = async (queryType = "load-more") => {
+    setError(null);
+    if (queryType === "reload") {
+      setChannels([]);
+    }
+    setQueryInProgress(queryType);
+    try {
+      if (customQueryChannels) {
+        await customQueryChannels({
+          currentChannels: channels,
+          queryType,
+          setChannels,
+          setHasNextPage
+        });
+      } else {
+        const offset = queryType === "reload" ? 0 : channels.length;
+        const newOptions = {
+          offset,
+          ...options
+        };
+        const channelQueryResponse = await client.queryChannels(
+          filters,
+          sort || {},
+          newOptions
+        );
+        const newChannels = queryType === "reload" ? channelQueryResponse : (0, import_lodash7.default)([...channels, ...channelQueryResponse], "cid");
+        setChannels(newChannels);
+        setHasNextPage(channelQueryResponse.length >= (newOptions.limit ?? 1));
+        if (!offset && activeChannelHandler) {
+          activeChannelHandler(newChannels, setChannels);
+        }
+      }
+    } catch (err) {
+      console.warn(err);
+      setError(err);
+    }
+    setQueryInProgress(null);
+  };
+  const throttleRecover = (0, import_react88.useCallback)(() => {
+    const now = Date.now();
+    const isFirstRecovery = !lastRecoveryTimestamp.current;
+    const timeElapsedSinceLastRecoveryMs = lastRecoveryTimestamp.current ? now - lastRecoveryTimestamp.current : 0;
+    if (!isFirstRecovery && timeElapsedSinceLastRecoveryMs < recoveryThrottleInterval && !error) {
+      return;
+    }
+    lastRecoveryTimestamp.current = now;
+    queryChannels("reload");
+  }, [error, queryChannels, recoveryThrottleInterval]);
+  const loadNextPage = () => {
+    queryChannels();
+  };
+  (0, import_react88.useEffect)(() => {
+    if (client.recoverStateOnReconnect) return;
+    const { unsubscribe } = client.on("connection.recovered", throttleRecover);
+    return () => {
+      unsubscribe();
+    };
+  }, [client, throttleRecover]);
+  (0, import_react88.useEffect)(() => {
+    queryChannels("reload");
+  }, [filterString, sortString]);
+  return {
+    channels,
+    hasNextPage,
+    loadNextPage,
+    setChannels
+  };
+};
+
+// src/components/ChannelList/hooks/useChannelListShape.ts
+var import_react89 = require("react");
 
 // src/components/ChannelList/utils.ts
-var import_lodash7 = __toESM(require("lodash.uniqby"));
-var MAX_QUERY_CHANNELS_LIMIT = 30;
+var import_lodash8 = __toESM(require("lodash.uniqby"));
 var moveChannelUp = ({
   activeChannel,
   channels,
@@ -41574,7 +41650,7 @@ var moveChannelUp = ({
   const channelIndex = channels.findIndex((channel2) => channel2.cid === cid);
   if (!activeChannel && channelIndex <= 0) return channels;
   const channel = activeChannel || channels[channelIndex];
-  return (0, import_lodash7.default)([channel, ...channels], "cid");
+  return (0, import_lodash8.default)([channel, ...channels], "cid");
 };
 function findLastPinnedChannelIndex({
   channels
@@ -41664,92 +41740,7 @@ var isChannelArchived = (channel) => {
   return typeof membership.archived_at === "string";
 };
 
-// src/components/ChannelList/hooks/usePaginatedChannels.ts
-var RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS = 5e3;
-var MIN_RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS = 2e3;
-var usePaginatedChannels = (client, filters, sort, options, activeChannelHandler, recoveryThrottleIntervalMs = RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS, customQueryChannels) => {
-  const {
-    channelsQueryState: { error, setError, setQueryInProgress }
-  } = useChatContext("usePaginatedChannels");
-  const [channels, setChannels] = (0, import_react88.useState)([]);
-  const [hasNextPage, setHasNextPage] = (0, import_react88.useState)(true);
-  const lastRecoveryTimestamp = (0, import_react88.useRef)(void 0);
-  const recoveryThrottleInterval = recoveryThrottleIntervalMs < MIN_RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS ? MIN_RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS : recoveryThrottleIntervalMs ?? RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS;
-  const filterString = (0, import_react88.useMemo)(() => JSON.stringify(filters), [filters]);
-  const sortString = (0, import_react88.useMemo)(() => JSON.stringify(sort), [sort]);
-  const queryChannels = async (queryType = "load-more") => {
-    setError(null);
-    if (queryType === "reload") {
-      setChannels([]);
-    }
-    setQueryInProgress(queryType);
-    try {
-      if (customQueryChannels) {
-        await customQueryChannels({
-          currentChannels: channels,
-          queryType,
-          setChannels,
-          setHasNextPage
-        });
-      } 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
-        };
-        const channelQueryResponse = await client.queryChannels(
-          filters,
-          sort || {},
-          newOptions
-        );
-        const newChannels = queryType === "reload" ? channelQueryResponse : (0, import_lodash8.default)([...channels, ...channelQueryResponse], "cid");
-        setChannels(newChannels);
-        setHasNextPage(channelQueryResponse.length >= newOptions.limit);
-        if (!offset && activeChannelHandler) {
-          activeChannelHandler(newChannels, setChannels);
-        }
-      }
-    } catch (err) {
-      console.warn(err);
-      setError(err);
-    }
-    setQueryInProgress(null);
-  };
-  const throttleRecover = (0, import_react88.useCallback)(() => {
-    const now = Date.now();
-    const isFirstRecovery = !lastRecoveryTimestamp.current;
-    const timeElapsedSinceLastRecoveryMs = lastRecoveryTimestamp.current ? now - lastRecoveryTimestamp.current : 0;
-    if (!isFirstRecovery && timeElapsedSinceLastRecoveryMs < recoveryThrottleInterval && !error) {
-      return;
-    }
-    lastRecoveryTimestamp.current = now;
-    queryChannels("reload");
-  }, [error, queryChannels, recoveryThrottleInterval]);
-  const loadNextPage = () => {
-    queryChannels();
-  };
-  (0, import_react88.useEffect)(() => {
-    if (client.recoverStateOnReconnect) return;
-    const { unsubscribe } = client.on("connection.recovered", throttleRecover);
-    return () => {
-      unsubscribe();
-    };
-  }, [client, throttleRecover]);
-  (0, import_react88.useEffect)(() => {
-    queryChannels("reload");
-  }, [filterString, sortString]);
-  return {
-    channels,
-    hasNextPage,
-    loadNextPage,
-    setChannels
-  };
-};
-
 // src/components/ChannelList/hooks/useChannelListShape.ts
-var import_react89 = require("react");
 var shared = ({
   customHandler,
   event,
@@ -43076,7 +43067,7 @@ var UnMemoizedChannelList = (props) => {
     searchControllerStateSelector
   );
   const activeChannelHandler = async (channels2, setChannels2) => {
-    if (!channels2.length || channels2.length > (options?.limit || MAX_QUERY_CHANNELS_LIMIT)) {
+    if (!channels2.length) {
       return;
     }
     if (customActiveChannel) {
@@ -43885,6 +43876,9 @@ var ChannelPreview = (props) => {
   const [lastMessage, setLastMessage] = (0, import_react119.useState)(
     channel.state.messages[channel.state.messages.length - 1]
   );
+  const [latestMessagePreview, setLatestMessagePreview] = (0, import_react119.useState)(
+    () => getLatestMessagePreview2(channel, t2, userLanguage, isMessageAIGenerated)
+  );
   const [unread, setUnread] = (0, import_react119.useState)(0);
   const { messageDeliveryStatus } = useMessageDeliveryStatus({
     channel,
@@ -43923,10 +43917,16 @@ var ChannelPreview = (props) => {
   );
   (0, import_react119.useEffect)(() => {
     refreshUnreadCount();
+    setLatestMessagePreview(
+      getLatestMessagePreview2(channel, t2, userLanguage, isMessageAIGenerated)
+    );
     const handleEvent = () => {
       setLastMessage(
         channel.state.latestMessages[channel.state.latestMessages.length - 1]
       );
+      setLatestMessagePreview(
+        getLatestMessagePreview2(channel, t2, userLanguage, isMessageAIGenerated)
+      );
       refreshUnreadCount();
     };
     channel.on("message.new", handleEvent);
@@ -43941,14 +43941,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,
     t2,
     userLanguage,
     isMessageAIGenerated
-  );
+  ]);
+  if (!Preview) return null;
   return /* @__PURE__ */ import_react119.default.createElement(
     Preview,
     {
@@ -52154,7 +52157,7 @@ var ChannelInner = (props) => {
     acceptedFiles,
     activeUnreadHandler,
     channel,
-    channelQueryOptions: propChannelQueryOptions,
+    channelQueryOptions,
     children,
     doDeleteMessageRequest,
     doMarkReadRequest,
@@ -52173,12 +52176,6 @@ var ChannelInner = (props) => {
     optionalMessageInputProps = {},
     skipMessageDataMemoization
   } = props;
-  const channelQueryOptions = (0, import_react260.useMemo)(
-    () => (0, import_lodash23.default)(propChannelQueryOptions, {
-      messages: { limit: DEFAULT_INITIAL_CHANNEL_PAGE_SIZE }
-    }),
-    [propChannelQueryOptions]
-  );
   const { client, customClasses, latestMessageDatesByChannels, mutes, searchController } = useChatContext("Channel");
   const { t: t2 } = useTranslationContext("Channel");
   const chatContainerClass = getChatContainerClass(customClasses?.chatContainer);
@@ -52210,7 +52207,7 @@ var ChannelInner = (props) => {
     null
   );
   const channelCapabilitiesArray = channel.data?.own_capabilities;
-  const throttledCopyStateFromChannel = (0, import_lodash24.default)(
+  const throttledCopyStateFromChannel = (0, import_lodash23.default)(
     () => dispatch({ channel, type: "copyStateFromChannelOnEvent" }),
     500,
     {
@@ -52219,14 +52216,14 @@ var ChannelInner = (props) => {
     }
   );
   const setChannelUnreadUiState = (0, import_react260.useMemo)(
-    () => (0, import_lodash24.default)(_setChannelUnreadUiState, 200, {
+    () => (0, import_lodash23.default)(_setChannelUnreadUiState, 200, {
       leading: true,
       trailing: false
     }),
     []
   );
   const markRead = (0, import_react260.useMemo)(
-    () => (0, import_lodash24.default)(
+    () => (0, import_lodash23.default)(
       async (options) => {
         const { updateChannelUiUnreadState = true } = options ?? {};
         if (channel.disconnected || !channelConfig?.read_events) {
@@ -53130,7 +53127,7 @@ var useChat = ({
   };
   (0, import_react263.useEffect)(() => {
     if (!client) return;
-    const version = "12.15.7";
+    const version = "12.16.0";
     const userAgent = client.getUserAgent();
     if (!userAgent.includes("stream-chat-react")) {
       client.setUserAgent(`stream-chat-react-${version}-${userAgent}`);