stream-chat-react 12.15.8 → 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.
@@ -17659,7 +17659,6 @@ __export(src_exports, {
17659
17659
  LoadingIndicator: () => LoadingIndicator,
17660
17660
  LoadingIndicatorIcon: () => LoadingIndicatorIcon,
17661
17661
  MAX_MESSAGE_REACTIONS_TO_FETCH: () => MAX_MESSAGE_REACTIONS_TO_FETCH,
17662
- MAX_QUERY_CHANNELS_LIMIT: () => MAX_QUERY_CHANNELS_LIMIT,
17663
17662
  MESSAGE_ACTIONS: () => MESSAGE_ACTIONS,
17664
17663
  MML: () => MML3,
17665
17664
  MediaContainer: () => MediaContainer,
@@ -18793,10 +18792,9 @@ var DownloadButton = ({ assetUrl }) => /* @__PURE__ */ import_react22.default.cr
18793
18792
  var import_react23 = __toESM(require("react"));
18794
18793
 
18795
18794
  // src/constants/limits.ts
18796
- var DEFAULT_INITIAL_CHANNEL_PAGE_SIZE = 25;
18797
- var DEFAULT_NEXT_CHANNEL_PAGE_SIZE = 100;
18798
- var DEFAULT_JUMP_TO_PAGE_SIZE = 100;
18799
- var DEFAULT_THREAD_PAGE_SIZE = 50;
18795
+ var DEFAULT_NEXT_CHANNEL_PAGE_SIZE = 25;
18796
+ var DEFAULT_JUMP_TO_PAGE_SIZE = 25;
18797
+ var DEFAULT_THREAD_PAGE_SIZE = 25;
18800
18798
  var DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD = 250;
18801
18799
  var DEFAULT_UPLOAD_SIZE_LIMIT_BYTES = 100 * 1024 * 1024;
18802
18800
  var DEFAULT_HIGHLIGHT_DURATION = 500;
@@ -20755,19 +20753,16 @@ var ModalGallery = (props) => {
20755
20753
  }),
20756
20754
  [images, t2]
20757
20755
  );
20758
- return (
20759
- // @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)
20760
- /* @__PURE__ */ import_react39.default.createElement(
20761
- import_react_image_gallery.default,
20762
- {
20763
- items: formattedArray,
20764
- renderItem,
20765
- showIndex: true,
20766
- showPlayButton: false,
20767
- showThumbnails: false,
20768
- startIndex: index3
20769
- }
20770
- )
20756
+ return /* @__PURE__ */ import_react39.default.createElement(
20757
+ import_react_image_gallery.default,
20758
+ {
20759
+ items: formattedArray,
20760
+ renderItem,
20761
+ showIndex: true,
20762
+ showPlayButton: false,
20763
+ showThumbnails: false,
20764
+ startIndex: index3
20765
+ }
20771
20766
  );
20772
20767
  };
20773
20768
 
@@ -35602,8 +35597,7 @@ ReactTextareaAutocomplete.propTypes = {
35602
35597
  // src/components/Channel/Channel.tsx
35603
35598
  var import_react260 = __toESM(require("react"));
35604
35599
  var import_lodash22 = __toESM(require("lodash.debounce"));
35605
- var import_lodash23 = __toESM(require("lodash.defaultsdeep"));
35606
- var import_lodash24 = __toESM(require("lodash.throttle"));
35600
+ var import_lodash23 = __toESM(require("lodash.throttle"));
35607
35601
  var import_nanoid12 = require("nanoid");
35608
35602
  var import_clsx65 = __toESM(require("clsx"));
35609
35603
 
@@ -41561,11 +41555,93 @@ var useMobileNavigation = (channelListRef, navOpen, closeMobileNav) => {
41561
41555
 
41562
41556
  // src/components/ChannelList/hooks/usePaginatedChannels.ts
41563
41557
  var import_react88 = require("react");
41564
- var import_lodash8 = __toESM(require("lodash.uniqby"));
41558
+ var import_lodash7 = __toESM(require("lodash.uniqby"));
41559
+ var RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS = 5e3;
41560
+ var MIN_RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS = 2e3;
41561
+ var usePaginatedChannels = (client, filters, sort, options, activeChannelHandler, recoveryThrottleIntervalMs = RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS, customQueryChannels) => {
41562
+ const {
41563
+ channelsQueryState: { error, setError, setQueryInProgress }
41564
+ } = useChatContext("usePaginatedChannels");
41565
+ const [channels, setChannels] = (0, import_react88.useState)([]);
41566
+ const [hasNextPage, setHasNextPage] = (0, import_react88.useState)(true);
41567
+ const lastRecoveryTimestamp = (0, import_react88.useRef)(void 0);
41568
+ 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;
41569
+ const filterString = (0, import_react88.useMemo)(() => JSON.stringify(filters), [filters]);
41570
+ const sortString = (0, import_react88.useMemo)(() => JSON.stringify(sort), [sort]);
41571
+ const queryChannels = async (queryType = "load-more") => {
41572
+ setError(null);
41573
+ if (queryType === "reload") {
41574
+ setChannels([]);
41575
+ }
41576
+ setQueryInProgress(queryType);
41577
+ try {
41578
+ if (customQueryChannels) {
41579
+ await customQueryChannels({
41580
+ currentChannels: channels,
41581
+ queryType,
41582
+ setChannels,
41583
+ setHasNextPage
41584
+ });
41585
+ } else {
41586
+ const offset = queryType === "reload" ? 0 : channels.length;
41587
+ const newOptions = {
41588
+ offset,
41589
+ ...options
41590
+ };
41591
+ const channelQueryResponse = await client.queryChannels(
41592
+ filters,
41593
+ sort || {},
41594
+ newOptions
41595
+ );
41596
+ const newChannels = queryType === "reload" ? channelQueryResponse : (0, import_lodash7.default)([...channels, ...channelQueryResponse], "cid");
41597
+ setChannels(newChannels);
41598
+ setHasNextPage(channelQueryResponse.length >= (newOptions.limit ?? 1));
41599
+ if (!offset && activeChannelHandler) {
41600
+ activeChannelHandler(newChannels, setChannels);
41601
+ }
41602
+ }
41603
+ } catch (err) {
41604
+ console.warn(err);
41605
+ setError(err);
41606
+ }
41607
+ setQueryInProgress(null);
41608
+ };
41609
+ const throttleRecover = (0, import_react88.useCallback)(() => {
41610
+ const now = Date.now();
41611
+ const isFirstRecovery = !lastRecoveryTimestamp.current;
41612
+ const timeElapsedSinceLastRecoveryMs = lastRecoveryTimestamp.current ? now - lastRecoveryTimestamp.current : 0;
41613
+ if (!isFirstRecovery && timeElapsedSinceLastRecoveryMs < recoveryThrottleInterval && !error) {
41614
+ return;
41615
+ }
41616
+ lastRecoveryTimestamp.current = now;
41617
+ queryChannels("reload");
41618
+ }, [error, queryChannels, recoveryThrottleInterval]);
41619
+ const loadNextPage = () => {
41620
+ queryChannels();
41621
+ };
41622
+ (0, import_react88.useEffect)(() => {
41623
+ if (client.recoverStateOnReconnect) return;
41624
+ const { unsubscribe } = client.on("connection.recovered", throttleRecover);
41625
+ return () => {
41626
+ unsubscribe();
41627
+ };
41628
+ }, [client, throttleRecover]);
41629
+ (0, import_react88.useEffect)(() => {
41630
+ queryChannels("reload");
41631
+ }, [filterString, sortString]);
41632
+ return {
41633
+ channels,
41634
+ hasNextPage,
41635
+ loadNextPage,
41636
+ setChannels
41637
+ };
41638
+ };
41639
+
41640
+ // src/components/ChannelList/hooks/useChannelListShape.ts
41641
+ var import_react89 = require("react");
41565
41642
 
41566
41643
  // src/components/ChannelList/utils.ts
41567
- var import_lodash7 = __toESM(require("lodash.uniqby"));
41568
- var MAX_QUERY_CHANNELS_LIMIT = 30;
41644
+ var import_lodash8 = __toESM(require("lodash.uniqby"));
41569
41645
  var moveChannelUp = ({
41570
41646
  activeChannel,
41571
41647
  channels,
@@ -41574,7 +41650,7 @@ var moveChannelUp = ({
41574
41650
  const channelIndex = channels.findIndex((channel2) => channel2.cid === cid);
41575
41651
  if (!activeChannel && channelIndex <= 0) return channels;
41576
41652
  const channel = activeChannel || channels[channelIndex];
41577
- return (0, import_lodash7.default)([channel, ...channels], "cid");
41653
+ return (0, import_lodash8.default)([channel, ...channels], "cid");
41578
41654
  };
41579
41655
  function findLastPinnedChannelIndex({
41580
41656
  channels
@@ -41664,92 +41740,7 @@ var isChannelArchived = (channel) => {
41664
41740
  return typeof membership.archived_at === "string";
41665
41741
  };
41666
41742
 
41667
- // src/components/ChannelList/hooks/usePaginatedChannels.ts
41668
- var RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS = 5e3;
41669
- var MIN_RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS = 2e3;
41670
- var usePaginatedChannels = (client, filters, sort, options, activeChannelHandler, recoveryThrottleIntervalMs = RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS, customQueryChannels) => {
41671
- const {
41672
- channelsQueryState: { error, setError, setQueryInProgress }
41673
- } = useChatContext("usePaginatedChannels");
41674
- const [channels, setChannels] = (0, import_react88.useState)([]);
41675
- const [hasNextPage, setHasNextPage] = (0, import_react88.useState)(true);
41676
- const lastRecoveryTimestamp = (0, import_react88.useRef)(void 0);
41677
- 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;
41678
- const filterString = (0, import_react88.useMemo)(() => JSON.stringify(filters), [filters]);
41679
- const sortString = (0, import_react88.useMemo)(() => JSON.stringify(sort), [sort]);
41680
- const queryChannels = async (queryType = "load-more") => {
41681
- setError(null);
41682
- if (queryType === "reload") {
41683
- setChannels([]);
41684
- }
41685
- setQueryInProgress(queryType);
41686
- try {
41687
- if (customQueryChannels) {
41688
- await customQueryChannels({
41689
- currentChannels: channels,
41690
- queryType,
41691
- setChannels,
41692
- setHasNextPage
41693
- });
41694
- } else {
41695
- const offset = queryType === "reload" ? 0 : channels.length;
41696
- const newOptions = {
41697
- limit: options?.limit ?? MAX_QUERY_CHANNELS_LIMIT,
41698
- message_limit: options?.message_limit ?? DEFAULT_INITIAL_CHANNEL_PAGE_SIZE,
41699
- offset,
41700
- ...options
41701
- };
41702
- const channelQueryResponse = await client.queryChannels(
41703
- filters,
41704
- sort || {},
41705
- newOptions
41706
- );
41707
- const newChannels = queryType === "reload" ? channelQueryResponse : (0, import_lodash8.default)([...channels, ...channelQueryResponse], "cid");
41708
- setChannels(newChannels);
41709
- setHasNextPage(channelQueryResponse.length >= newOptions.limit);
41710
- if (!offset && activeChannelHandler) {
41711
- activeChannelHandler(newChannels, setChannels);
41712
- }
41713
- }
41714
- } catch (err) {
41715
- console.warn(err);
41716
- setError(err);
41717
- }
41718
- setQueryInProgress(null);
41719
- };
41720
- const throttleRecover = (0, import_react88.useCallback)(() => {
41721
- const now = Date.now();
41722
- const isFirstRecovery = !lastRecoveryTimestamp.current;
41723
- const timeElapsedSinceLastRecoveryMs = lastRecoveryTimestamp.current ? now - lastRecoveryTimestamp.current : 0;
41724
- if (!isFirstRecovery && timeElapsedSinceLastRecoveryMs < recoveryThrottleInterval && !error) {
41725
- return;
41726
- }
41727
- lastRecoveryTimestamp.current = now;
41728
- queryChannels("reload");
41729
- }, [error, queryChannels, recoveryThrottleInterval]);
41730
- const loadNextPage = () => {
41731
- queryChannels();
41732
- };
41733
- (0, import_react88.useEffect)(() => {
41734
- if (client.recoverStateOnReconnect) return;
41735
- const { unsubscribe } = client.on("connection.recovered", throttleRecover);
41736
- return () => {
41737
- unsubscribe();
41738
- };
41739
- }, [client, throttleRecover]);
41740
- (0, import_react88.useEffect)(() => {
41741
- queryChannels("reload");
41742
- }, [filterString, sortString]);
41743
- return {
41744
- channels,
41745
- hasNextPage,
41746
- loadNextPage,
41747
- setChannels
41748
- };
41749
- };
41750
-
41751
41743
  // src/components/ChannelList/hooks/useChannelListShape.ts
41752
- var import_react89 = require("react");
41753
41744
  var shared = ({
41754
41745
  customHandler,
41755
41746
  event,
@@ -43076,7 +43067,7 @@ var UnMemoizedChannelList = (props) => {
43076
43067
  searchControllerStateSelector
43077
43068
  );
43078
43069
  const activeChannelHandler = async (channels2, setChannels2) => {
43079
- if (!channels2.length || channels2.length > (options?.limit || MAX_QUERY_CHANNELS_LIMIT)) {
43070
+ if (!channels2.length) {
43080
43071
  return;
43081
43072
  }
43082
43073
  if (customActiveChannel) {
@@ -52166,7 +52157,7 @@ var ChannelInner = (props) => {
52166
52157
  acceptedFiles,
52167
52158
  activeUnreadHandler,
52168
52159
  channel,
52169
- channelQueryOptions: propChannelQueryOptions,
52160
+ channelQueryOptions,
52170
52161
  children,
52171
52162
  doDeleteMessageRequest,
52172
52163
  doMarkReadRequest,
@@ -52185,12 +52176,6 @@ var ChannelInner = (props) => {
52185
52176
  optionalMessageInputProps = {},
52186
52177
  skipMessageDataMemoization
52187
52178
  } = props;
52188
- const channelQueryOptions = (0, import_react260.useMemo)(
52189
- () => (0, import_lodash23.default)(propChannelQueryOptions, {
52190
- messages: { limit: DEFAULT_INITIAL_CHANNEL_PAGE_SIZE }
52191
- }),
52192
- [propChannelQueryOptions]
52193
- );
52194
52179
  const { client, customClasses, latestMessageDatesByChannels, mutes, searchController } = useChatContext("Channel");
52195
52180
  const { t: t2 } = useTranslationContext("Channel");
52196
52181
  const chatContainerClass = getChatContainerClass(customClasses?.chatContainer);
@@ -52222,7 +52207,7 @@ var ChannelInner = (props) => {
52222
52207
  null
52223
52208
  );
52224
52209
  const channelCapabilitiesArray = channel.data?.own_capabilities;
52225
- const throttledCopyStateFromChannel = (0, import_lodash24.default)(
52210
+ const throttledCopyStateFromChannel = (0, import_lodash23.default)(
52226
52211
  () => dispatch({ channel, type: "copyStateFromChannelOnEvent" }),
52227
52212
  500,
52228
52213
  {
@@ -52231,14 +52216,14 @@ var ChannelInner = (props) => {
52231
52216
  }
52232
52217
  );
52233
52218
  const setChannelUnreadUiState = (0, import_react260.useMemo)(
52234
- () => (0, import_lodash24.default)(_setChannelUnreadUiState, 200, {
52219
+ () => (0, import_lodash23.default)(_setChannelUnreadUiState, 200, {
52235
52220
  leading: true,
52236
52221
  trailing: false
52237
52222
  }),
52238
52223
  []
52239
52224
  );
52240
52225
  const markRead = (0, import_react260.useMemo)(
52241
- () => (0, import_lodash24.default)(
52226
+ () => (0, import_lodash23.default)(
52242
52227
  async (options) => {
52243
52228
  const { updateChannelUiUnreadState = true } = options ?? {};
52244
52229
  if (channel.disconnected || !channelConfig?.read_events) {
@@ -53142,7 +53127,7 @@ var useChat = ({
53142
53127
  };
53143
53128
  (0, import_react263.useEffect)(() => {
53144
53129
  if (!client) return;
53145
- const version = "12.15.8";
53130
+ const version = "12.16.0";
53146
53131
  const userAgent = client.getUserAgent();
53147
53132
  if (!userAgent.includes("stream-chat-react")) {
53148
53133
  client.setUserAgent(`stream-chat-react-${version}-${userAgent}`);