stream-chat-react 12.15.7 → 12.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -20469,7 +20469,6 @@ __export(src_exports, {
20469
20469
  LoadingIndicator: () => LoadingIndicator,
20470
20470
  LoadingIndicatorIcon: () => LoadingIndicatorIcon,
20471
20471
  MAX_MESSAGE_REACTIONS_TO_FETCH: () => MAX_MESSAGE_REACTIONS_TO_FETCH,
20472
- MAX_QUERY_CHANNELS_LIMIT: () => MAX_QUERY_CHANNELS_LIMIT,
20473
20472
  MESSAGE_ACTIONS: () => MESSAGE_ACTIONS,
20474
20473
  MML: () => MML,
20475
20474
  MediaContainer: () => MediaContainer,
@@ -21603,10 +21602,9 @@ var DownloadButton = ({ assetUrl }) => /* @__PURE__ */ import_react22.default.cr
21603
21602
  var import_react23 = __toESM(require("react"));
21604
21603
 
21605
21604
  // src/constants/limits.ts
21606
- var DEFAULT_INITIAL_CHANNEL_PAGE_SIZE = 25;
21607
- var DEFAULT_NEXT_CHANNEL_PAGE_SIZE = 100;
21608
- var DEFAULT_JUMP_TO_PAGE_SIZE = 100;
21609
- var DEFAULT_THREAD_PAGE_SIZE = 50;
21605
+ var DEFAULT_NEXT_CHANNEL_PAGE_SIZE = 25;
21606
+ var DEFAULT_JUMP_TO_PAGE_SIZE = 25;
21607
+ var DEFAULT_THREAD_PAGE_SIZE = 25;
21610
21608
  var DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD = 250;
21611
21609
  var DEFAULT_UPLOAD_SIZE_LIMIT_BYTES = 100 * 1024 * 1024;
21612
21610
  var DEFAULT_HIGHLIGHT_DURATION = 500;
@@ -23565,19 +23563,16 @@ var ModalGallery = (props) => {
23565
23563
  }),
23566
23564
  [images, t2]
23567
23565
  );
23568
- return (
23569
- // @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)
23570
- /* @__PURE__ */ import_react39.default.createElement(
23571
- import_react_image_gallery.default,
23572
- {
23573
- items: formattedArray,
23574
- renderItem,
23575
- showIndex: true,
23576
- showPlayButton: false,
23577
- showThumbnails: false,
23578
- startIndex: index3
23579
- }
23580
- )
23566
+ return /* @__PURE__ */ import_react39.default.createElement(
23567
+ import_react_image_gallery.default,
23568
+ {
23569
+ items: formattedArray,
23570
+ renderItem,
23571
+ showIndex: true,
23572
+ showPlayButton: false,
23573
+ showThumbnails: false,
23574
+ startIndex: index3
23575
+ }
23581
23576
  );
23582
23577
  };
23583
23578
 
@@ -40282,8 +40277,7 @@ ReactTextareaAutocomplete.propTypes = {
40282
40277
  // src/components/Channel/Channel.tsx
40283
40278
  var import_react259 = __toESM(require("react"));
40284
40279
  var import_lodash22 = __toESM(require("lodash.debounce"));
40285
- var import_lodash23 = __toESM(require("lodash.defaultsdeep"));
40286
- var import_lodash24 = __toESM(require("lodash.throttle"));
40280
+ var import_lodash23 = __toESM(require("lodash.throttle"));
40287
40281
  var import_nanoid12 = require("nanoid");
40288
40282
  var import_clsx65 = __toESM(require("clsx"));
40289
40283
 
@@ -46241,11 +46235,93 @@ var useMobileNavigation = (channelListRef, navOpen, closeMobileNav) => {
46241
46235
 
46242
46236
  // src/components/ChannelList/hooks/usePaginatedChannels.ts
46243
46237
  var import_react88 = require("react");
46244
- var import_lodash8 = __toESM(require("lodash.uniqby"));
46238
+ var import_lodash7 = __toESM(require("lodash.uniqby"));
46239
+ var RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS = 5e3;
46240
+ var MIN_RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS = 2e3;
46241
+ var usePaginatedChannels = (client, filters, sort, options, activeChannelHandler, recoveryThrottleIntervalMs = RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS, customQueryChannels) => {
46242
+ const {
46243
+ channelsQueryState: { error, setError, setQueryInProgress }
46244
+ } = useChatContext("usePaginatedChannels");
46245
+ const [channels, setChannels] = (0, import_react88.useState)([]);
46246
+ const [hasNextPage, setHasNextPage] = (0, import_react88.useState)(true);
46247
+ const lastRecoveryTimestamp = (0, import_react88.useRef)(void 0);
46248
+ 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;
46249
+ const filterString = (0, import_react88.useMemo)(() => JSON.stringify(filters), [filters]);
46250
+ const sortString = (0, import_react88.useMemo)(() => JSON.stringify(sort), [sort]);
46251
+ const queryChannels = async (queryType = "load-more") => {
46252
+ setError(null);
46253
+ if (queryType === "reload") {
46254
+ setChannels([]);
46255
+ }
46256
+ setQueryInProgress(queryType);
46257
+ try {
46258
+ if (customQueryChannels) {
46259
+ await customQueryChannels({
46260
+ currentChannels: channels,
46261
+ queryType,
46262
+ setChannels,
46263
+ setHasNextPage
46264
+ });
46265
+ } else {
46266
+ const offset = queryType === "reload" ? 0 : channels.length;
46267
+ const newOptions = {
46268
+ offset,
46269
+ ...options
46270
+ };
46271
+ const channelQueryResponse = await client.queryChannels(
46272
+ filters,
46273
+ sort || {},
46274
+ newOptions
46275
+ );
46276
+ const newChannels = queryType === "reload" ? channelQueryResponse : (0, import_lodash7.default)([...channels, ...channelQueryResponse], "cid");
46277
+ setChannels(newChannels);
46278
+ setHasNextPage(channelQueryResponse.length >= (newOptions.limit ?? 1));
46279
+ if (!offset && activeChannelHandler) {
46280
+ activeChannelHandler(newChannels, setChannels);
46281
+ }
46282
+ }
46283
+ } catch (err) {
46284
+ console.warn(err);
46285
+ setError(err);
46286
+ }
46287
+ setQueryInProgress(null);
46288
+ };
46289
+ const throttleRecover = (0, import_react88.useCallback)(() => {
46290
+ const now = Date.now();
46291
+ const isFirstRecovery = !lastRecoveryTimestamp.current;
46292
+ const timeElapsedSinceLastRecoveryMs = lastRecoveryTimestamp.current ? now - lastRecoveryTimestamp.current : 0;
46293
+ if (!isFirstRecovery && timeElapsedSinceLastRecoveryMs < recoveryThrottleInterval && !error) {
46294
+ return;
46295
+ }
46296
+ lastRecoveryTimestamp.current = now;
46297
+ queryChannels("reload");
46298
+ }, [error, queryChannels, recoveryThrottleInterval]);
46299
+ const loadNextPage = () => {
46300
+ queryChannels();
46301
+ };
46302
+ (0, import_react88.useEffect)(() => {
46303
+ if (client.recoverStateOnReconnect) return;
46304
+ const { unsubscribe } = client.on("connection.recovered", throttleRecover);
46305
+ return () => {
46306
+ unsubscribe();
46307
+ };
46308
+ }, [client, throttleRecover]);
46309
+ (0, import_react88.useEffect)(() => {
46310
+ queryChannels("reload");
46311
+ }, [filterString, sortString]);
46312
+ return {
46313
+ channels,
46314
+ hasNextPage,
46315
+ loadNextPage,
46316
+ setChannels
46317
+ };
46318
+ };
46319
+
46320
+ // src/components/ChannelList/hooks/useChannelListShape.ts
46321
+ var import_react89 = require("react");
46245
46322
 
46246
46323
  // src/components/ChannelList/utils.ts
46247
- var import_lodash7 = __toESM(require("lodash.uniqby"));
46248
- var MAX_QUERY_CHANNELS_LIMIT = 30;
46324
+ var import_lodash8 = __toESM(require("lodash.uniqby"));
46249
46325
  var moveChannelUp = ({
46250
46326
  activeChannel,
46251
46327
  channels,
@@ -46254,7 +46330,7 @@ var moveChannelUp = ({
46254
46330
  const channelIndex = channels.findIndex((channel2) => channel2.cid === cid);
46255
46331
  if (!activeChannel && channelIndex <= 0) return channels;
46256
46332
  const channel = activeChannel || channels[channelIndex];
46257
- return (0, import_lodash7.default)([channel, ...channels], "cid");
46333
+ return (0, import_lodash8.default)([channel, ...channels], "cid");
46258
46334
  };
46259
46335
  function findLastPinnedChannelIndex({
46260
46336
  channels
@@ -46344,92 +46420,7 @@ var isChannelArchived = (channel) => {
46344
46420
  return typeof membership.archived_at === "string";
46345
46421
  };
46346
46422
 
46347
- // src/components/ChannelList/hooks/usePaginatedChannels.ts
46348
- var RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS = 5e3;
46349
- var MIN_RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS = 2e3;
46350
- var usePaginatedChannels = (client, filters, sort, options, activeChannelHandler, recoveryThrottleIntervalMs = RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS, customQueryChannels) => {
46351
- const {
46352
- channelsQueryState: { error, setError, setQueryInProgress }
46353
- } = useChatContext("usePaginatedChannels");
46354
- const [channels, setChannels] = (0, import_react88.useState)([]);
46355
- const [hasNextPage, setHasNextPage] = (0, import_react88.useState)(true);
46356
- const lastRecoveryTimestamp = (0, import_react88.useRef)(void 0);
46357
- 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;
46358
- const filterString = (0, import_react88.useMemo)(() => JSON.stringify(filters), [filters]);
46359
- const sortString = (0, import_react88.useMemo)(() => JSON.stringify(sort), [sort]);
46360
- const queryChannels = async (queryType = "load-more") => {
46361
- setError(null);
46362
- if (queryType === "reload") {
46363
- setChannels([]);
46364
- }
46365
- setQueryInProgress(queryType);
46366
- try {
46367
- if (customQueryChannels) {
46368
- await customQueryChannels({
46369
- currentChannels: channels,
46370
- queryType,
46371
- setChannels,
46372
- setHasNextPage
46373
- });
46374
- } else {
46375
- const offset = queryType === "reload" ? 0 : channels.length;
46376
- const newOptions = {
46377
- limit: options?.limit ?? MAX_QUERY_CHANNELS_LIMIT,
46378
- message_limit: options?.message_limit ?? DEFAULT_INITIAL_CHANNEL_PAGE_SIZE,
46379
- offset,
46380
- ...options
46381
- };
46382
- const channelQueryResponse = await client.queryChannels(
46383
- filters,
46384
- sort || {},
46385
- newOptions
46386
- );
46387
- const newChannels = queryType === "reload" ? channelQueryResponse : (0, import_lodash8.default)([...channels, ...channelQueryResponse], "cid");
46388
- setChannels(newChannels);
46389
- setHasNextPage(channelQueryResponse.length >= newOptions.limit);
46390
- if (!offset && activeChannelHandler) {
46391
- activeChannelHandler(newChannels, setChannels);
46392
- }
46393
- }
46394
- } catch (err) {
46395
- console.warn(err);
46396
- setError(err);
46397
- }
46398
- setQueryInProgress(null);
46399
- };
46400
- const throttleRecover = (0, import_react88.useCallback)(() => {
46401
- const now = Date.now();
46402
- const isFirstRecovery = !lastRecoveryTimestamp.current;
46403
- const timeElapsedSinceLastRecoveryMs = lastRecoveryTimestamp.current ? now - lastRecoveryTimestamp.current : 0;
46404
- if (!isFirstRecovery && timeElapsedSinceLastRecoveryMs < recoveryThrottleInterval && !error) {
46405
- return;
46406
- }
46407
- lastRecoveryTimestamp.current = now;
46408
- queryChannels("reload");
46409
- }, [error, queryChannels, recoveryThrottleInterval]);
46410
- const loadNextPage = () => {
46411
- queryChannels();
46412
- };
46413
- (0, import_react88.useEffect)(() => {
46414
- if (client.recoverStateOnReconnect) return;
46415
- const { unsubscribe } = client.on("connection.recovered", throttleRecover);
46416
- return () => {
46417
- unsubscribe();
46418
- };
46419
- }, [client, throttleRecover]);
46420
- (0, import_react88.useEffect)(() => {
46421
- queryChannels("reload");
46422
- }, [filterString, sortString]);
46423
- return {
46424
- channels,
46425
- hasNextPage,
46426
- loadNextPage,
46427
- setChannels
46428
- };
46429
- };
46430
-
46431
46423
  // src/components/ChannelList/hooks/useChannelListShape.ts
46432
- var import_react89 = require("react");
46433
46424
  var shared = ({
46434
46425
  customHandler,
46435
46426
  event,
@@ -47756,7 +47747,7 @@ var UnMemoizedChannelList = (props) => {
47756
47747
  searchControllerStateSelector
47757
47748
  );
47758
47749
  const activeChannelHandler = async (channels2, setChannels2) => {
47759
- if (!channels2.length || channels2.length > (options?.limit || MAX_QUERY_CHANNELS_LIMIT)) {
47750
+ if (!channels2.length) {
47760
47751
  return;
47761
47752
  }
47762
47753
  if (customActiveChannel) {
@@ -48565,6 +48556,9 @@ var ChannelPreview = (props) => {
48565
48556
  const [lastMessage, setLastMessage] = (0, import_react119.useState)(
48566
48557
  channel.state.messages[channel.state.messages.length - 1]
48567
48558
  );
48559
+ const [latestMessagePreview, setLatestMessagePreview] = (0, import_react119.useState)(
48560
+ () => getLatestMessagePreview2(channel, t2, userLanguage, isMessageAIGenerated)
48561
+ );
48568
48562
  const [unread, setUnread] = (0, import_react119.useState)(0);
48569
48563
  const { messageDeliveryStatus } = useMessageDeliveryStatus({
48570
48564
  channel,
@@ -48603,10 +48597,16 @@ var ChannelPreview = (props) => {
48603
48597
  );
48604
48598
  (0, import_react119.useEffect)(() => {
48605
48599
  refreshUnreadCount();
48600
+ setLatestMessagePreview(
48601
+ getLatestMessagePreview2(channel, t2, userLanguage, isMessageAIGenerated)
48602
+ );
48606
48603
  const handleEvent = () => {
48607
48604
  setLastMessage(
48608
48605
  channel.state.latestMessages[channel.state.latestMessages.length - 1]
48609
48606
  );
48607
+ setLatestMessagePreview(
48608
+ getLatestMessagePreview2(channel, t2, userLanguage, isMessageAIGenerated)
48609
+ );
48610
48610
  refreshUnreadCount();
48611
48611
  };
48612
48612
  channel.on("message.new", handleEvent);
@@ -48621,14 +48621,17 @@ var ChannelPreview = (props) => {
48621
48621
  channel.off("message.undeleted", handleEvent);
48622
48622
  channel.off("channel.truncated", handleEvent);
48623
48623
  };
48624
- }, [channel, refreshUnreadCount, channelUpdateCount]);
48625
- if (!Preview) return null;
48626
- const latestMessagePreview = getLatestMessagePreview2(
48624
+ }, [
48627
48625
  channel,
48626
+ client,
48627
+ refreshUnreadCount,
48628
+ channelUpdateCount,
48629
+ getLatestMessagePreview2,
48628
48630
  t2,
48629
48631
  userLanguage,
48630
48632
  isMessageAIGenerated
48631
- );
48633
+ ]);
48634
+ if (!Preview) return null;
48632
48635
  return /* @__PURE__ */ import_react119.default.createElement(
48633
48636
  Preview,
48634
48637
  {
@@ -56834,7 +56837,7 @@ var ChannelInner = (props) => {
56834
56837
  acceptedFiles,
56835
56838
  activeUnreadHandler,
56836
56839
  channel,
56837
- channelQueryOptions: propChannelQueryOptions,
56840
+ channelQueryOptions,
56838
56841
  children,
56839
56842
  doDeleteMessageRequest,
56840
56843
  doMarkReadRequest,
@@ -56853,12 +56856,6 @@ var ChannelInner = (props) => {
56853
56856
  optionalMessageInputProps = {},
56854
56857
  skipMessageDataMemoization
56855
56858
  } = props;
56856
- const channelQueryOptions = (0, import_react259.useMemo)(
56857
- () => (0, import_lodash23.default)(propChannelQueryOptions, {
56858
- messages: { limit: DEFAULT_INITIAL_CHANNEL_PAGE_SIZE }
56859
- }),
56860
- [propChannelQueryOptions]
56861
- );
56862
56859
  const { client, customClasses, latestMessageDatesByChannels, mutes, searchController } = useChatContext("Channel");
56863
56860
  const { t: t2 } = useTranslationContext("Channel");
56864
56861
  const chatContainerClass = getChatContainerClass(customClasses?.chatContainer);
@@ -56890,7 +56887,7 @@ var ChannelInner = (props) => {
56890
56887
  null
56891
56888
  );
56892
56889
  const channelCapabilitiesArray = channel.data?.own_capabilities;
56893
- const throttledCopyStateFromChannel = (0, import_lodash24.default)(
56890
+ const throttledCopyStateFromChannel = (0, import_lodash23.default)(
56894
56891
  () => dispatch({ channel, type: "copyStateFromChannelOnEvent" }),
56895
56892
  500,
56896
56893
  {
@@ -56899,14 +56896,14 @@ var ChannelInner = (props) => {
56899
56896
  }
56900
56897
  );
56901
56898
  const setChannelUnreadUiState = (0, import_react259.useMemo)(
56902
- () => (0, import_lodash24.default)(_setChannelUnreadUiState, 200, {
56899
+ () => (0, import_lodash23.default)(_setChannelUnreadUiState, 200, {
56903
56900
  leading: true,
56904
56901
  trailing: false
56905
56902
  }),
56906
56903
  []
56907
56904
  );
56908
56905
  const markRead = (0, import_react259.useMemo)(
56909
- () => (0, import_lodash24.default)(
56906
+ () => (0, import_lodash23.default)(
56910
56907
  async (options) => {
56911
56908
  const { updateChannelUiUnreadState = true } = options ?? {};
56912
56909
  if (channel.disconnected || !channelConfig?.read_events) {
@@ -57810,7 +57807,7 @@ var useChat = ({
57810
57807
  };
57811
57808
  (0, import_react262.useEffect)(() => {
57812
57809
  if (!client) return;
57813
- const version = "12.15.7";
57810
+ const version = "12.16.0";
57814
57811
  const userAgent = client.getUserAgent();
57815
57812
  if (!userAgent.includes("stream-chat-react")) {
57816
57813
  client.setUserAgent(`stream-chat-react-${version}-${userAgent}`);
@@ -58329,7 +58326,6 @@ var Window = import_react272.default.memo(UnMemoizedWindow);
58329
58326
  LoadingIndicator,
58330
58327
  LoadingIndicatorIcon,
58331
58328
  MAX_MESSAGE_REACTIONS_TO_FETCH,
58332
- MAX_QUERY_CHANNELS_LIMIT,
58333
58329
  MESSAGE_ACTIONS,
58334
58330
  MML,
58335
58331
  MediaContainer,