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.browser.cjs
CHANGED
|
@@ -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
|
|
18797
|
-
var
|
|
18798
|
-
var
|
|
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
|
-
|
|
20760
|
-
|
|
20761
|
-
|
|
20762
|
-
|
|
20763
|
-
|
|
20764
|
-
|
|
20765
|
-
|
|
20766
|
-
|
|
20767
|
-
|
|
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.
|
|
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
|
|
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
|
|
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,
|
|
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
|
|
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
|
|
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,
|
|
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,
|
|
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,
|
|
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.
|
|
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}`);
|