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.
- package/dist/components/AutoCompleteTextarea/Textarea.d.ts +23 -24
- package/dist/components/Channel/Channel.js +2 -6
- package/dist/components/ChannelList/ChannelList.js +2 -3
- package/dist/components/ChannelList/hooks/usePaginatedChannels.js +1 -5
- package/dist/components/ChannelList/utils.d.ts +1 -2
- package/dist/components/ChannelList/utils.js +0 -1
- package/dist/components/Chat/hooks/useChat.js +1 -1
- package/dist/components/Gallery/ModalGallery.js +1 -3
- package/dist/components/Message/renderText/renderText.d.ts +2 -2
- package/dist/constants/limits.d.ts +3 -4
- package/dist/constants/limits.js +3 -4
- package/dist/experimental/index.browser.cjs +1 -1
- package/dist/experimental/index.browser.cjs.map +2 -2
- package/dist/experimental/index.node.cjs +1 -1
- package/dist/experimental/index.node.cjs.map +2 -2
- package/dist/index.browser.cjs +106 -121
- package/dist/index.browser.cjs.map +4 -4
- package/dist/index.node.cjs +106 -122
- package/dist/index.node.cjs.map +4 -4
- package/package.json +4 -5
package/dist/index.node.cjs
CHANGED
|
@@ -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
|
|
21607
|
-
var
|
|
21608
|
-
var
|
|
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
|
-
|
|
23570
|
-
|
|
23571
|
-
|
|
23572
|
-
|
|
23573
|
-
|
|
23574
|
-
|
|
23575
|
-
|
|
23576
|
-
|
|
23577
|
-
|
|
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.
|
|
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
|
|
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
|
|
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,
|
|
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
|
|
47750
|
+
if (!channels2.length) {
|
|
47760
47751
|
return;
|
|
47761
47752
|
}
|
|
47762
47753
|
if (customActiveChannel) {
|
|
@@ -56846,7 +56837,7 @@ var ChannelInner = (props) => {
|
|
|
56846
56837
|
acceptedFiles,
|
|
56847
56838
|
activeUnreadHandler,
|
|
56848
56839
|
channel,
|
|
56849
|
-
channelQueryOptions
|
|
56840
|
+
channelQueryOptions,
|
|
56850
56841
|
children,
|
|
56851
56842
|
doDeleteMessageRequest,
|
|
56852
56843
|
doMarkReadRequest,
|
|
@@ -56865,12 +56856,6 @@ var ChannelInner = (props) => {
|
|
|
56865
56856
|
optionalMessageInputProps = {},
|
|
56866
56857
|
skipMessageDataMemoization
|
|
56867
56858
|
} = props;
|
|
56868
|
-
const channelQueryOptions = (0, import_react259.useMemo)(
|
|
56869
|
-
() => (0, import_lodash23.default)(propChannelQueryOptions, {
|
|
56870
|
-
messages: { limit: DEFAULT_INITIAL_CHANNEL_PAGE_SIZE }
|
|
56871
|
-
}),
|
|
56872
|
-
[propChannelQueryOptions]
|
|
56873
|
-
);
|
|
56874
56859
|
const { client, customClasses, latestMessageDatesByChannels, mutes, searchController } = useChatContext("Channel");
|
|
56875
56860
|
const { t: t2 } = useTranslationContext("Channel");
|
|
56876
56861
|
const chatContainerClass = getChatContainerClass(customClasses?.chatContainer);
|
|
@@ -56902,7 +56887,7 @@ var ChannelInner = (props) => {
|
|
|
56902
56887
|
null
|
|
56903
56888
|
);
|
|
56904
56889
|
const channelCapabilitiesArray = channel.data?.own_capabilities;
|
|
56905
|
-
const throttledCopyStateFromChannel = (0,
|
|
56890
|
+
const throttledCopyStateFromChannel = (0, import_lodash23.default)(
|
|
56906
56891
|
() => dispatch({ channel, type: "copyStateFromChannelOnEvent" }),
|
|
56907
56892
|
500,
|
|
56908
56893
|
{
|
|
@@ -56911,14 +56896,14 @@ var ChannelInner = (props) => {
|
|
|
56911
56896
|
}
|
|
56912
56897
|
);
|
|
56913
56898
|
const setChannelUnreadUiState = (0, import_react259.useMemo)(
|
|
56914
|
-
() => (0,
|
|
56899
|
+
() => (0, import_lodash23.default)(_setChannelUnreadUiState, 200, {
|
|
56915
56900
|
leading: true,
|
|
56916
56901
|
trailing: false
|
|
56917
56902
|
}),
|
|
56918
56903
|
[]
|
|
56919
56904
|
);
|
|
56920
56905
|
const markRead = (0, import_react259.useMemo)(
|
|
56921
|
-
() => (0,
|
|
56906
|
+
() => (0, import_lodash23.default)(
|
|
56922
56907
|
async (options) => {
|
|
56923
56908
|
const { updateChannelUiUnreadState = true } = options ?? {};
|
|
56924
56909
|
if (channel.disconnected || !channelConfig?.read_events) {
|
|
@@ -57822,7 +57807,7 @@ var useChat = ({
|
|
|
57822
57807
|
};
|
|
57823
57808
|
(0, import_react262.useEffect)(() => {
|
|
57824
57809
|
if (!client) return;
|
|
57825
|
-
const version = "12.
|
|
57810
|
+
const version = "12.16.0";
|
|
57826
57811
|
const userAgent = client.getUserAgent();
|
|
57827
57812
|
if (!userAgent.includes("stream-chat-react")) {
|
|
57828
57813
|
client.setUserAgent(`stream-chat-react-${version}-${userAgent}`);
|
|
@@ -58341,7 +58326,6 @@ var Window = import_react272.default.memo(UnMemoizedWindow);
|
|
|
58341
58326
|
LoadingIndicator,
|
|
58342
58327
|
LoadingIndicatorIcon,
|
|
58343
58328
|
MAX_MESSAGE_REACTIONS_TO_FETCH,
|
|
58344
|
-
MAX_QUERY_CHANNELS_LIMIT,
|
|
58345
58329
|
MESSAGE_ACTIONS,
|
|
58346
58330
|
MML,
|
|
58347
58331
|
MediaContainer,
|