stream-chat-react 8.0.0 → 8.1.2
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/browser.full-bundle.js +1841 -640
- package/dist/browser.full-bundle.js.map +1 -1
- package/dist/browser.full-bundle.min.js +4 -4
- package/dist/browser.full-bundle.min.js.map +1 -1
- package/dist/components/Attachment/AttachmentActions.d.ts +0 -1
- package/dist/components/Attachment/AttachmentActions.d.ts.map +1 -1
- package/dist/components/Attachment/Audio.d.ts +0 -1
- package/dist/components/Attachment/Audio.d.ts.map +1 -1
- package/dist/components/Attachment/FileAttachment.d.ts +0 -1
- package/dist/components/Attachment/FileAttachment.d.ts.map +1 -1
- package/dist/components/AutoCompleteTextarea/Item.d.ts.map +1 -1
- package/dist/components/AutoCompleteTextarea/Item.js +2 -1
- package/dist/components/AutoCompleteTextarea/List.d.ts.map +1 -1
- package/dist/components/AutoCompleteTextarea/Textarea.d.ts.map +1 -1
- package/dist/components/AutoCompleteTextarea/Textarea.js +1 -1
- package/dist/components/Channel/Channel.d.ts.map +1 -1
- package/dist/components/Channel/Channel.js +107 -32
- package/dist/components/Channel/channelState.d.ts +17 -0
- package/dist/components/Channel/channelState.d.ts.map +1 -1
- package/dist/components/Channel/channelState.js +24 -2
- package/dist/components/Channel/hooks/useCreateChannelStateContext.d.ts.map +1 -1
- package/dist/components/Channel/hooks/useCreateChannelStateContext.js +7 -1
- package/dist/components/Channel/hooks/useIsMounted.d.ts +0 -1
- package/dist/components/Channel/hooks/useIsMounted.d.ts.map +1 -1
- package/dist/components/Channel/utils.d.ts +5 -0
- package/dist/components/Channel/utils.d.ts.map +1 -0
- package/dist/components/Channel/utils.js +19 -0
- package/dist/components/ChannelHeader/icons.d.ts +0 -1
- package/dist/components/ChannelHeader/icons.d.ts.map +1 -1
- package/dist/components/ChannelHeader/icons.js +1 -1
- package/dist/components/ChannelList/ChannelList.d.ts +2 -3
- package/dist/components/ChannelList/ChannelList.d.ts.map +1 -1
- package/dist/components/ChannelList/ChannelList.js +1 -0
- package/dist/components/ChannelList/hooks/useChannelDeletedListener.d.ts +0 -1
- package/dist/components/ChannelList/hooks/useChannelDeletedListener.d.ts.map +1 -1
- package/dist/components/ChannelList/hooks/useChannelHiddenListener.d.ts +0 -1
- package/dist/components/ChannelList/hooks/useChannelHiddenListener.d.ts.map +1 -1
- package/dist/components/ChannelList/hooks/useChannelTruncatedListener.d.ts +0 -1
- package/dist/components/ChannelList/hooks/useChannelTruncatedListener.d.ts.map +1 -1
- package/dist/components/ChannelList/hooks/useChannelUpdatedListener.d.ts +0 -1
- package/dist/components/ChannelList/hooks/useChannelUpdatedListener.d.ts.map +1 -1
- package/dist/components/ChannelList/hooks/useChannelVisibleListener.d.ts +0 -1
- package/dist/components/ChannelList/hooks/useChannelVisibleListener.d.ts.map +1 -1
- package/dist/components/ChannelList/hooks/useMessageNewListener.d.ts +0 -1
- package/dist/components/ChannelList/hooks/useMessageNewListener.d.ts.map +1 -1
- package/dist/components/ChannelList/hooks/useNotificationAddedToChannelListener.d.ts +0 -1
- package/dist/components/ChannelList/hooks/useNotificationAddedToChannelListener.d.ts.map +1 -1
- package/dist/components/ChannelList/hooks/useNotificationMessageNewListener.d.ts +0 -1
- package/dist/components/ChannelList/hooks/useNotificationMessageNewListener.d.ts.map +1 -1
- package/dist/components/ChannelList/hooks/useNotificationRemovedFromChannelListener.d.ts +0 -1
- package/dist/components/ChannelList/hooks/useNotificationRemovedFromChannelListener.d.ts.map +1 -1
- package/dist/components/ChannelList/hooks/usePaginatedChannels.d.ts +0 -1
- package/dist/components/ChannelList/hooks/usePaginatedChannels.d.ts.map +1 -1
- package/dist/components/ChannelList/hooks/useUserPresenceChangedListener.d.ts +0 -1
- package/dist/components/ChannelList/hooks/useUserPresenceChangedListener.d.ts.map +1 -1
- package/dist/components/ChannelPreview/ChannelPreview.d.ts.map +1 -1
- package/dist/components/ChannelPreview/ChannelPreview.js +6 -10
- package/dist/components/ChannelPreview/ChannelPreviewMessenger.d.ts +0 -1
- package/dist/components/ChannelPreview/ChannelPreviewMessenger.d.ts.map +1 -1
- package/dist/components/ChannelPreview/utils.d.ts +0 -1
- package/dist/components/ChannelPreview/utils.d.ts.map +1 -1
- package/dist/components/Chat/Chat.d.ts.map +1 -1
- package/dist/components/Chat/Chat.js +2 -1
- package/dist/components/Chat/hooks/useChat.d.ts +1 -1
- package/dist/components/Chat/hooks/useChat.d.ts.map +1 -1
- package/dist/components/Chat/hooks/useChat.js +12 -7
- package/dist/components/Chat/hooks/useCreateChatContext.d.ts.map +1 -1
- package/dist/components/Chat/hooks/useCreateChatContext.js +2 -1
- package/dist/components/ChatDown/ChatDown.d.ts +5 -5
- package/dist/components/ChatDown/ChatDown.d.ts.map +1 -1
- package/dist/components/ChatDown/ChatDown.js +4 -4
- package/dist/components/ChatDown/icons.d.ts +2 -0
- package/dist/components/ChatDown/icons.d.ts.map +1 -0
- package/dist/components/ChatDown/icons.js +7 -0
- package/dist/components/DateSeparator/DateSeparator.d.ts +0 -1
- package/dist/components/DateSeparator/DateSeparator.d.ts.map +1 -1
- package/dist/components/Gallery/Gallery.d.ts +0 -1
- package/dist/components/Gallery/Gallery.d.ts.map +1 -1
- package/dist/components/Gallery/Gallery.js +11 -8
- package/dist/components/InfiniteScrollPaginator/InfiniteScroll.d.ts +2 -2
- package/dist/components/InfiniteScrollPaginator/InfiniteScroll.d.ts.map +1 -1
- package/dist/components/InfiniteScrollPaginator/InfiniteScroll.js +16 -45
- package/dist/components/InfiniteScrollPaginator/index.d.ts +0 -2
- package/dist/components/InfiniteScrollPaginator/index.d.ts.map +1 -1
- package/dist/components/InfiniteScrollPaginator/index.js +0 -2
- package/dist/components/Message/FixedHeightMessage.d.ts +0 -1
- package/dist/components/Message/FixedHeightMessage.d.ts.map +1 -1
- package/dist/components/Message/Message.d.ts +0 -1
- package/dist/components/Message/Message.d.ts.map +1 -1
- package/dist/components/Message/Message.js +8 -7
- package/dist/components/Message/MessageCommerce.d.ts +0 -1
- package/dist/components/Message/MessageCommerce.d.ts.map +1 -1
- package/dist/components/Message/MessageCommerce.js +2 -1
- package/dist/components/Message/MessageDeleted.d.ts +0 -1
- package/dist/components/Message/MessageDeleted.d.ts.map +1 -1
- package/dist/components/Message/MessageLivestream.d.ts.map +1 -1
- package/dist/components/Message/MessageLivestream.js +2 -1
- package/dist/components/Message/MessageRepliesCountButton.d.ts.map +1 -1
- package/dist/components/Message/MessageRepliesCountButton.js +10 -24
- package/dist/components/Message/MessageSimple.d.ts +0 -1
- package/dist/components/Message/MessageSimple.d.ts.map +1 -1
- package/dist/components/Message/MessageSimple.js +4 -3
- package/dist/components/Message/MessageTeam.d.ts +0 -1
- package/dist/components/Message/MessageTeam.d.ts.map +1 -1
- package/dist/components/Message/MessageText.d.ts +0 -1
- package/dist/components/Message/MessageText.d.ts.map +1 -1
- package/dist/components/Message/MessageTimestamp.d.ts +0 -1
- package/dist/components/Message/MessageTimestamp.d.ts.map +1 -1
- package/dist/components/Message/QuotedMessage.d.ts +0 -1
- package/dist/components/Message/QuotedMessage.d.ts.map +1 -1
- package/dist/components/Message/QuotedMessage.js +3 -1
- package/dist/components/Message/hooks/useEditHandler.d.ts +0 -1
- package/dist/components/Message/hooks/useEditHandler.d.ts.map +1 -1
- package/dist/components/Message/hooks/useUserHandler.d.ts +0 -1
- package/dist/components/Message/hooks/useUserHandler.d.ts.map +1 -1
- package/dist/components/Message/icons.d.ts +0 -1
- package/dist/components/Message/icons.d.ts.map +1 -1
- package/dist/components/Message/types.d.ts +2 -1
- package/dist/components/Message/types.d.ts.map +1 -1
- package/dist/components/Message/utils.d.ts.map +1 -1
- package/dist/components/Message/utils.js +3 -0
- package/dist/components/MessageActions/MessageActionsBox.d.ts +0 -1
- package/dist/components/MessageActions/MessageActionsBox.d.ts.map +1 -1
- package/dist/components/MessageInput/EditMessageForm.d.ts +0 -1
- package/dist/components/MessageInput/EditMessageForm.d.ts.map +1 -1
- package/dist/components/MessageInput/EmojiPicker.d.ts +0 -1
- package/dist/components/MessageInput/EmojiPicker.d.ts.map +1 -1
- package/dist/components/MessageInput/MessageInputFlat.d.ts +0 -1
- package/dist/components/MessageInput/MessageInputFlat.d.ts.map +1 -1
- package/dist/components/MessageInput/MessageInputFlat.js +25 -3
- package/dist/components/MessageInput/MessageInputSmall.d.ts +0 -1
- package/dist/components/MessageInput/MessageInputSmall.d.ts.map +1 -1
- package/dist/components/MessageInput/MessageInputSmall.js +26 -4
- package/dist/components/MessageInput/QuotedMessagePreview.d.ts +0 -1
- package/dist/components/MessageInput/QuotedMessagePreview.d.ts.map +1 -1
- package/dist/components/MessageInput/UploadsPreview.d.ts +0 -1
- package/dist/components/MessageInput/UploadsPreview.d.ts.map +1 -1
- package/dist/components/MessageInput/hooks/useAttachments.d.ts +0 -1
- package/dist/components/MessageInput/hooks/useAttachments.d.ts.map +1 -1
- package/dist/components/MessageInput/hooks/useCooldownTimer.d.ts.map +1 -1
- package/dist/components/MessageInput/hooks/useCooldownTimer.js +19 -29
- package/dist/components/MessageInput/hooks/useEmojiPicker.d.ts +0 -1
- package/dist/components/MessageInput/hooks/useEmojiPicker.d.ts.map +1 -1
- package/dist/components/MessageInput/hooks/useFileUploads.d.ts +0 -1
- package/dist/components/MessageInput/hooks/useFileUploads.d.ts.map +1 -1
- package/dist/components/MessageInput/hooks/useMessageInputText.d.ts +0 -1
- package/dist/components/MessageInput/hooks/useMessageInputText.d.ts.map +1 -1
- package/dist/components/MessageInput/hooks/useSubmitHandler.d.ts +0 -1
- package/dist/components/MessageInput/hooks/useSubmitHandler.d.ts.map +1 -1
- package/dist/components/MessageList/GiphyPreviewMessage.d.ts +0 -1
- package/dist/components/MessageList/GiphyPreviewMessage.d.ts.map +1 -1
- package/dist/components/MessageList/MessageList.d.ts +8 -3
- package/dist/components/MessageList/MessageList.d.ts.map +1 -1
- package/dist/components/MessageList/MessageList.js +90 -24
- package/dist/components/MessageList/MessageListNotifications.d.ts +1 -0
- package/dist/components/MessageList/MessageListNotifications.d.ts.map +1 -1
- package/dist/components/MessageList/MessageListNotifications.js +2 -2
- package/dist/components/MessageList/VirtualizedMessageList.d.ts +11 -1
- package/dist/components/MessageList/VirtualizedMessageList.d.ts.map +1 -1
- package/dist/components/MessageList/VirtualizedMessageList.js +118 -20
- package/dist/components/MessageList/hooks/index.d.ts +0 -1
- package/dist/components/MessageList/hooks/index.d.ts.map +1 -1
- package/dist/components/MessageList/hooks/index.js +0 -1
- package/dist/components/MessageList/hooks/useEnrichedMessages.d.ts +0 -1
- package/dist/components/MessageList/hooks/useEnrichedMessages.d.ts.map +1 -1
- package/dist/components/MessageList/hooks/useEnrichedMessages.js +4 -4
- package/dist/components/MessageList/hooks/useGiphyPreview.d.ts +0 -1
- package/dist/components/MessageList/hooks/useGiphyPreview.d.ts.map +1 -1
- package/dist/components/MessageList/hooks/useMessageListElements.d.ts.map +1 -1
- package/dist/components/MessageList/hooks/useMessageListElements.js +6 -3
- package/dist/components/MessageList/hooks/useNewMessageNotification.d.ts +1 -2
- package/dist/components/MessageList/hooks/useNewMessageNotification.d.ts.map +1 -1
- package/dist/components/MessageList/hooks/useNewMessageNotification.js +6 -2
- package/dist/components/MessageList/hooks/usePrependMessagesCount.d.ts.map +1 -1
- package/dist/components/MessageList/hooks/usePrependMessagesCount.js +2 -0
- package/dist/components/MessageList/hooks/useScrollLocationLogic.d.ts +2 -0
- package/dist/components/MessageList/hooks/useScrollLocationLogic.d.ts.map +1 -1
- package/dist/components/MessageList/hooks/useScrollLocationLogic.js +9 -5
- package/dist/components/MessageList/utils.d.ts +25 -6
- package/dist/components/MessageList/utils.d.ts.map +1 -1
- package/dist/components/MessageList/utils.js +57 -35
- package/dist/components/Reactions/ReactionsList.d.ts +0 -1
- package/dist/components/Reactions/ReactionsList.d.ts.map +1 -1
- package/dist/components/Reactions/utils/utils.d.ts +0 -1
- package/dist/components/Reactions/utils/utils.d.ts.map +1 -1
- package/dist/components/Thread/Thread.d.ts +2 -0
- package/dist/components/Thread/Thread.d.ts.map +1 -1
- package/dist/components/Thread/Thread.js +6 -10
- package/dist/constants/messageTypes.d.ts +5 -0
- package/dist/constants/messageTypes.d.ts.map +1 -0
- package/dist/constants/messageTypes.js +4 -0
- package/dist/context/ChannelActionContext.d.ts +3 -0
- package/dist/context/ChannelActionContext.d.ts.map +1 -1
- package/dist/context/ChannelStateContext.d.ts +5 -1
- package/dist/context/ChannelStateContext.d.ts.map +1 -1
- package/dist/context/ChatContext.d.ts +3 -0
- package/dist/context/ChatContext.d.ts.map +1 -1
- package/dist/context/MessageContext.d.ts +2 -0
- package/dist/context/MessageContext.d.ts.map +1 -1
- package/dist/context/utils/getDisplayName.d.ts +0 -1
- package/dist/context/utils/getDisplayName.d.ts.map +1 -1
- package/dist/css/index.css +1 -1
- package/dist/i18n/Streami18n.d.ts +5 -4
- package/dist/i18n/Streami18n.d.ts.map +1 -1
- package/dist/i18n/Streami18n.js +5 -5
- package/dist/i18n/de.json +29 -28
- package/dist/i18n/en.json +3 -2
- package/dist/i18n/es.json +4 -2
- package/dist/i18n/fr.json +4 -2
- package/dist/i18n/hi.json +3 -2
- package/dist/i18n/it.json +4 -2
- package/dist/i18n/ja.json +3 -2
- package/dist/i18n/ko.json +3 -2
- package/dist/i18n/nl.json +3 -2
- package/dist/i18n/pt.json +22 -20
- package/dist/i18n/ru.json +5 -2
- package/dist/i18n/tr.json +3 -2
- package/dist/index.cjs.js +552 -316
- package/dist/index.cjs.js.map +1 -1
- package/dist/scss/ActionsBox.scss +2 -2
- package/dist/scss/Attachment.scss +5 -0
- package/dist/scss/Avatar.scss +1 -1
- package/dist/scss/ChannelHeader.scss +8 -13
- package/dist/scss/ChannelList.scss +6 -0
- package/dist/scss/ChannelSearch.scss +12 -1
- package/dist/scss/Gallery.scss +19 -0
- package/dist/scss/Message.scss +110 -93
- package/dist/scss/MessageInput.scss +8 -2
- package/dist/scss/MessageInputFlat.scss +24 -0
- package/dist/scss/MessageList.scss +7 -0
- package/dist/scss/MessageNotification.scss +6 -18
- package/dist/scss/ReactionList.scss +2 -1
- package/dist/scss/ReactionSelector.scss +2 -1
- package/dist/scss/SimpleReactionsList.scss +2 -1
- package/dist/scss/SmallMessageInput.scss +34 -0
- package/dist/scss/Thread.scss +25 -5
- package/dist/scss/VirtualMessage.scss +6 -0
- package/dist/scss/_base.scss +4 -0
- package/dist/scss/_variables.scss +4 -5
- package/dist/stories/connected-user.stories.d.ts +4 -0
- package/dist/stories/connected-user.stories.d.ts.map +1 -0
- package/dist/stories/connected-user.stories.js +53 -0
- package/dist/stories/hello.stories.d.ts +3 -0
- package/dist/stories/hello.stories.d.ts.map +1 -0
- package/dist/stories/hello.stories.js +23 -0
- package/dist/stories/jump-to-message.stories.d.ts +4 -0
- package/dist/stories/jump-to-message.stories.d.ts.map +1 -0
- package/dist/stories/jump-to-message.stories.js +81 -0
- package/dist/stories/mark-read.stories.d.ts +4 -0
- package/dist/stories/mark-read.stories.d.ts.map +1 -0
- package/dist/stories/mark-read.stories.js +75 -0
- package/dist/stories/utils.d.ts +26 -0
- package/dist/stories/utils.d.ts.map +1 -0
- package/dist/stories/utils.js +38 -0
- package/dist/types/types.d.ts +17 -1
- package/dist/types/types.d.ts.map +1 -1
- package/dist/version.d.ts +1 -1
- package/dist/version.js +1 -1
- package/package.json +28 -15
- package/dist/assets/str-chat__alert.svg +0 -1
- package/dist/assets/str-chat__connection-error.svg +0 -13
- package/dist/assets/str-chat__file-file.svg +0 -20
- package/dist/assets/str-chat__icon-chevron-down.svg +0 -1
- package/dist/assets/str-chat__icon-search.svg +0 -1
- package/dist/assets/str-chat__icon-send.svg +0 -1
- package/dist/assets/str-chat__icon-sprite.png +0 -0
- package/dist/assets/str-chat__icon-sprite@1x.png +0 -0
- package/dist/assets/str-chat__icon-sprite@2x.png +0 -0
- package/dist/assets/str-chat__icon-sprite@3x.png +0 -0
- package/dist/assets/str-chat__loading-indicator.svg +0 -23
- package/dist/assets/str-chat__reactions-sprite@1x.png +0 -0
- package/dist/assets/str-chat__reactions-sprite@2x.png +0 -0
- package/dist/assets/str-chat__reactions-sprite@3x.png +0 -0
- package/dist/components/InfiniteScrollPaginator/InfiniteScrollPaginator.d.ts +0 -18
- package/dist/components/InfiniteScrollPaginator/InfiniteScrollPaginator.d.ts.map +0 -1
- package/dist/components/InfiniteScrollPaginator/InfiniteScrollPaginator.js +0 -8
- package/dist/components/InfiniteScrollPaginator/ReverseInfiniteScroll.d.ts +0 -4
- package/dist/components/InfiniteScrollPaginator/ReverseInfiniteScroll.d.ts.map +0 -1
- package/dist/components/InfiniteScrollPaginator/ReverseInfiniteScroll.js +0 -14
- package/dist/components/MessageList/hooks/useCallLoadMore.d.ts +0 -3
- package/dist/components/MessageList/hooks/useCallLoadMore.d.ts.map +0 -1
- package/dist/components/MessageList/hooks/useCallLoadMore.js +0 -8
|
@@ -9,7 +9,43 @@ var __assign = (this && this.__assign) || function () {
|
|
|
9
9
|
};
|
|
10
10
|
return __assign.apply(this, arguments);
|
|
11
11
|
};
|
|
12
|
-
|
|
12
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
13
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
14
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
15
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
16
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
17
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
18
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
19
|
+
});
|
|
20
|
+
};
|
|
21
|
+
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
22
|
+
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
23
|
+
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
24
|
+
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
25
|
+
function step(op) {
|
|
26
|
+
if (f) throw new TypeError("Generator is already executing.");
|
|
27
|
+
while (_) try {
|
|
28
|
+
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
29
|
+
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
30
|
+
switch (op[0]) {
|
|
31
|
+
case 0: case 1: t = op; break;
|
|
32
|
+
case 4: _.label++; return { value: op[1], done: false };
|
|
33
|
+
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
34
|
+
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
35
|
+
default:
|
|
36
|
+
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
37
|
+
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
38
|
+
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
39
|
+
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
40
|
+
if (t[2]) _.ops.pop();
|
|
41
|
+
_.trys.pop(); continue;
|
|
42
|
+
}
|
|
43
|
+
op = body.call(thisArg, _);
|
|
44
|
+
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
45
|
+
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
46
|
+
}
|
|
47
|
+
};
|
|
48
|
+
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
13
49
|
import { Virtuoso, } from 'react-virtuoso';
|
|
14
50
|
import { GiphyPreviewMessage as DefaultGiphyPreviewMessage } from './GiphyPreviewMessage';
|
|
15
51
|
import { useGiphyPreview } from './hooks/useGiphyPreview';
|
|
@@ -19,6 +55,7 @@ import { useShouldForceScrollToBottom } from './hooks/useShouldForceScrollToBott
|
|
|
19
55
|
import { MessageNotification as DefaultMessageNotification } from './MessageNotification';
|
|
20
56
|
import { MessageListNotifications as DefaultMessageListNotifications } from './MessageListNotifications';
|
|
21
57
|
import { processMessages } from './utils';
|
|
58
|
+
import { CUSTOM_MESSAGE_TYPE } from '../../constants/messageTypes';
|
|
22
59
|
import { DateSeparator as DefaultDateSeparator } from '../DateSeparator/DateSeparator';
|
|
23
60
|
import { EmptyStateIndicator as DefaultEmptyStateIndicator } from '../EmptyStateIndicator/EmptyStateIndicator';
|
|
24
61
|
import { EventComponent } from '../EventComponent/EventComponent';
|
|
@@ -47,10 +84,24 @@ function useCaptureResizeObserverExceededError() {
|
|
|
47
84
|
function fractionalItemSize(element) {
|
|
48
85
|
return element.getBoundingClientRect().height;
|
|
49
86
|
}
|
|
87
|
+
function findMessageIndex(messages, id) {
|
|
88
|
+
return messages.findIndex(function (message) { return message.id === id; });
|
|
89
|
+
}
|
|
90
|
+
function calculateInitialTopMostItemIndex(messages, highlightedMessageId) {
|
|
91
|
+
if (highlightedMessageId) {
|
|
92
|
+
var index = findMessageIndex(messages, highlightedMessageId);
|
|
93
|
+
if (index !== -1) {
|
|
94
|
+
return { align: 'center', index: index };
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
return messages.length - 1;
|
|
98
|
+
}
|
|
50
99
|
var VirtualizedMessageListWithContext = function (props) {
|
|
51
|
-
var additionalVirtuosoProps = props.additionalVirtuosoProps, channel = props.channel, closeReactionSelectorOnClick = props.closeReactionSelectorOnClick, customMessageRenderer = props.customMessageRenderer, defaultItemHeight = props.defaultItemHeight, _a = props.disableDateSeparator, disableDateSeparator = _a === void 0 ? true : _a, hasMore = props.hasMore, _b = props.hideDeletedMessages, hideDeletedMessages = _b === void 0 ? false : _b, _c = props.hideNewMessageSeparator, hideNewMessageSeparator = _c === void 0 ? false : _c, loadingMore = props.loadingMore, loadMore = props.loadMore, propMessage = props.Message, _d = props.messageLimit, messageLimit = _d === void 0 ? 100 : _d, messages = props.messages, notifications = props.notifications,
|
|
100
|
+
var additionalVirtuosoProps = props.additionalVirtuosoProps, channel = props.channel, closeReactionSelectorOnClick = props.closeReactionSelectorOnClick, customMessageRenderer = props.customMessageRenderer, defaultItemHeight = props.defaultItemHeight, _a = props.disableDateSeparator, disableDateSeparator = _a === void 0 ? true : _a, hasMore = props.hasMore, hasMoreNewer = props.hasMoreNewer, _b = props.hideDeletedMessages, hideDeletedMessages = _b === void 0 ? false : _b, _c = props.hideNewMessageSeparator, hideNewMessageSeparator = _c === void 0 ? false : _c, highlightedMessageId = props.highlightedMessageId, jumpToLatestMessage = props.jumpToLatestMessage, loadingMore = props.loadingMore, loadMore = props.loadMore, loadMoreNewer = props.loadMoreNewer, propMessage = props.Message, _d = props.messageLimit, messageLimit = _d === void 0 ? 100 : _d, messages = props.messages, notifications = props.notifications,
|
|
101
|
+
// TODO: refactor to scrollSeekPlaceHolderConfiguration and components.ScrollSeekPlaceholder, like the Virtuoso Component
|
|
102
|
+
_e = props.overscan,
|
|
52
103
|
// TODO: refactor to scrollSeekPlaceHolderConfiguration and components.ScrollSeekPlaceholder, like the Virtuoso Component
|
|
53
|
-
scrollSeekPlaceHolder = props.scrollSeekPlaceHolder, _f = props.scrollToLatestMessageOnFocus, scrollToLatestMessageOnFocus = _f === void 0 ? false : _f, _g = props.separateGiphyPreview, separateGiphyPreview = _g === void 0 ? false : _g, _h = props.shouldGroupByUser, shouldGroupByUser = _h === void 0 ? false : _h, _j = props.stickToBottomScrollBehavior, stickToBottomScrollBehavior = _j === void 0 ? 'smooth' : _j;
|
|
104
|
+
overscan = _e === void 0 ? 0 : _e, scrollSeekPlaceHolder = props.scrollSeekPlaceHolder, _f = props.scrollToLatestMessageOnFocus, scrollToLatestMessageOnFocus = _f === void 0 ? false : _f, _g = props.separateGiphyPreview, separateGiphyPreview = _g === void 0 ? false : _g, _h = props.shouldGroupByUser, shouldGroupByUser = _h === void 0 ? false : _h, _j = props.stickToBottomScrollBehavior, stickToBottomScrollBehavior = _j === void 0 ? 'smooth' : _j, suppressAutoscroll = props.suppressAutoscroll;
|
|
54
105
|
// Stops errors generated from react-virtuoso to bubble up
|
|
55
106
|
// to Sentry or other tracking tools.
|
|
56
107
|
useCaptureResizeObserverExceededError();
|
|
@@ -70,12 +121,11 @@ var VirtualizedMessageListWithContext = function (props) {
|
|
|
70
121
|
return messages;
|
|
71
122
|
}
|
|
72
123
|
return processMessages({
|
|
73
|
-
|
|
124
|
+
enableDateSeparator: !disableDateSeparator,
|
|
74
125
|
hideDeletedMessages: hideDeletedMessages,
|
|
75
126
|
hideNewMessageSeparator: hideNewMessageSeparator,
|
|
76
127
|
lastRead: lastRead,
|
|
77
128
|
messages: messages,
|
|
78
|
-
separateGiphyPreview: separateGiphyPreview,
|
|
79
129
|
setGiphyPreviewMessage: setGiphyPreviewMessage,
|
|
80
130
|
userId: client.userID || '',
|
|
81
131
|
});
|
|
@@ -89,13 +139,32 @@ var VirtualizedMessageListWithContext = function (props) {
|
|
|
89
139
|
client.userID,
|
|
90
140
|
]);
|
|
91
141
|
var virtuoso = useRef(null);
|
|
92
|
-
var _x = useNewMessageNotification(processedMessages, client.userID), atBottom = _x.atBottom, newMessagesNotification = _x.newMessagesNotification, setNewMessagesNotification = _x.setNewMessagesNotification;
|
|
93
|
-
var scrollToBottom = useCallback(function () {
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
142
|
+
var _x = useNewMessageNotification(processedMessages, client.userID, hasMoreNewer), atBottom = _x.atBottom, newMessagesNotification = _x.newMessagesNotification, setNewMessagesNotification = _x.setNewMessagesNotification;
|
|
143
|
+
var scrollToBottom = useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
144
|
+
return __generator(this, function (_a) {
|
|
145
|
+
switch (_a.label) {
|
|
146
|
+
case 0:
|
|
147
|
+
if (!hasMoreNewer) return [3 /*break*/, 2];
|
|
148
|
+
return [4 /*yield*/, jumpToLatestMessage()];
|
|
149
|
+
case 1:
|
|
150
|
+
_a.sent();
|
|
151
|
+
return [2 /*return*/];
|
|
152
|
+
case 2:
|
|
153
|
+
if (virtuoso.current) {
|
|
154
|
+
virtuoso.current.scrollToIndex(processedMessages.length - 1);
|
|
155
|
+
}
|
|
156
|
+
setNewMessagesNotification(false);
|
|
157
|
+
return [2 /*return*/];
|
|
158
|
+
}
|
|
159
|
+
});
|
|
160
|
+
}); }, [
|
|
161
|
+
virtuoso,
|
|
162
|
+
processedMessages,
|
|
163
|
+
setNewMessagesNotification,
|
|
164
|
+
processedMessages.length,
|
|
165
|
+
hasMoreNewer,
|
|
166
|
+
jumpToLatestMessage,
|
|
167
|
+
]);
|
|
99
168
|
var _y = React.useState(false), newMessagesReceivedInBackground = _y[0], setNewMessagesReceivedInBackground = _y[1];
|
|
100
169
|
var resetNewMessagesReceivedInBackground = useCallback(function () {
|
|
101
170
|
setNewMessagesReceivedInBackground(false);
|
|
@@ -121,8 +190,24 @@ var VirtualizedMessageListWithContext = function (props) {
|
|
|
121
190
|
};
|
|
122
191
|
}, [scrollToBottomIfConfigured]);
|
|
123
192
|
var numItemsPrepended = usePrependedMessagesCount(processedMessages);
|
|
193
|
+
/**
|
|
194
|
+
* Logic to update the key of the virtuoso component when the list jumps to a new location.
|
|
195
|
+
*/
|
|
196
|
+
var _z = useState(+new Date()), messageSetKey = _z[0], setMessageSetKey = _z[1];
|
|
197
|
+
var firstMessageId = useRef();
|
|
198
|
+
useEffect(function () {
|
|
199
|
+
var _a;
|
|
200
|
+
var continuousSet = messages && messages.find(function (message) { return message.id === firstMessageId.current; });
|
|
201
|
+
if (!continuousSet) {
|
|
202
|
+
setMessageSetKey(+new Date());
|
|
203
|
+
}
|
|
204
|
+
firstMessageId.current = (_a = messages === null || messages === void 0 ? void 0 : messages[0]) === null || _a === void 0 ? void 0 : _a.id;
|
|
205
|
+
}, [messages]);
|
|
124
206
|
var shouldForceScrollToBottom = useShouldForceScrollToBottom(processedMessages, client.userID);
|
|
125
207
|
var followOutput = function (isAtBottom) {
|
|
208
|
+
if (hasMoreNewer || suppressAutoscroll) {
|
|
209
|
+
return false;
|
|
210
|
+
}
|
|
126
211
|
if (shouldForceScrollToBottom()) {
|
|
127
212
|
return isAtBottom ? stickToBottomScrollBehavior : 'auto';
|
|
128
213
|
}
|
|
@@ -137,7 +222,7 @@ var VirtualizedMessageListWithContext = function (props) {
|
|
|
137
222
|
return customMessageRenderer(messageList, streamMessageIndex);
|
|
138
223
|
}
|
|
139
224
|
var message = messageList[streamMessageIndex];
|
|
140
|
-
if (message.customType ===
|
|
225
|
+
if (message.customType === CUSTOM_MESSAGE_TYPE.date && message.date && isDate(message.date)) {
|
|
141
226
|
return React.createElement(DateSeparator, { date: message.date, unread: message.unread });
|
|
142
227
|
}
|
|
143
228
|
if (!message)
|
|
@@ -182,13 +267,26 @@ var VirtualizedMessageListWithContext = function (props) {
|
|
|
182
267
|
loadMore(messageLimit);
|
|
183
268
|
}
|
|
184
269
|
};
|
|
270
|
+
var endReached = function () {
|
|
271
|
+
if (hasMoreNewer && loadMoreNewer) {
|
|
272
|
+
loadMoreNewer(messageLimit);
|
|
273
|
+
}
|
|
274
|
+
};
|
|
275
|
+
useEffect(function () {
|
|
276
|
+
var _a;
|
|
277
|
+
if (highlightedMessageId) {
|
|
278
|
+
var index = findMessageIndex(processedMessages, highlightedMessageId);
|
|
279
|
+
if (index !== -1) {
|
|
280
|
+
(_a = virtuoso.current) === null || _a === void 0 ? void 0 : _a.scrollToIndex({ align: 'center', index: index });
|
|
281
|
+
}
|
|
282
|
+
}
|
|
283
|
+
}, [highlightedMessageId]);
|
|
185
284
|
if (!processedMessages)
|
|
186
285
|
return null;
|
|
187
|
-
var virtualizedMessageListClass = (customClasses === null || customClasses === void 0 ? void 0 : customClasses.virtualizedMessageList) || 'str-chat__virtual-list';
|
|
188
286
|
return (React.createElement(React.Fragment, null,
|
|
189
|
-
React.createElement("div", { className:
|
|
190
|
-
React.createElement(Virtuoso, __assign({ atBottomStateChange: atBottomStateChange, components: virtuosoComponents, firstItemIndex: PREPEND_OFFSET - numItemsPrepended, followOutput: followOutput, increaseViewportBy: { bottom: 200, top: 0 }, initialTopMostItemIndex: processedMessages
|
|
191
|
-
React.createElement(MessageListNotifications, { hasNewMessages: newMessagesNotification, MessageNotification: MessageNotification, notifications: notifications, scrollToBottom: scrollToBottom }),
|
|
287
|
+
React.createElement("div", { className: (customClasses === null || customClasses === void 0 ? void 0 : customClasses.virtualizedMessageList) || 'str-chat__virtual-list' },
|
|
288
|
+
React.createElement(Virtuoso, __assign({ atBottomStateChange: atBottomStateChange, components: virtuosoComponents, endReached: endReached, firstItemIndex: PREPEND_OFFSET - numItemsPrepended, followOutput: followOutput, increaseViewportBy: { bottom: 200, top: 0 }, initialTopMostItemIndex: calculateInitialTopMostItemIndex(processedMessages, highlightedMessageId), itemContent: function (i) { return messageRenderer(processedMessages, i); }, itemSize: fractionalItemSize, key: messageSetKey, overscan: overscan, ref: virtuoso, startReached: startReached, style: { overflowX: 'hidden' }, totalCount: processedMessages.length }, additionalVirtuosoProps, (scrollSeekPlaceHolder ? { scrollSeek: scrollSeekPlaceHolder } : {}), (defaultItemHeight ? { defaultItemHeight: defaultItemHeight } : {})))),
|
|
289
|
+
React.createElement(MessageListNotifications, { hasNewMessages: newMessagesNotification, isNotAtLatestMessageSet: hasMoreNewer, MessageNotification: MessageNotification, notifications: notifications, scrollToBottom: scrollToBottom }),
|
|
192
290
|
giphyPreviewMessage && React.createElement(GiphyPreviewMessage, { message: giphyPreviewMessage })));
|
|
193
291
|
};
|
|
194
292
|
/**
|
|
@@ -198,8 +296,8 @@ var VirtualizedMessageListWithContext = function (props) {
|
|
|
198
296
|
* **Note**: It works well when there are thousands of messages in a channel, it has a shortcoming though - the message UI should have a fixed height.
|
|
199
297
|
*/
|
|
200
298
|
export function VirtualizedMessageList(props) {
|
|
201
|
-
var
|
|
202
|
-
var
|
|
299
|
+
var _a = useChannelActionContext('VirtualizedMessageList'), jumpToLatestMessage = _a.jumpToLatestMessage, loadMore = _a.loadMore, loadMoreNewer = _a.loadMoreNewer;
|
|
300
|
+
var _b = useChannelStateContext('VirtualizedMessageList'), channel = _b.channel, hasMore = _b.hasMore, hasMoreNewer = _b.hasMoreNewer, highlightedMessageId = _b.highlightedMessageId, loadingMore = _b.loadingMore, loadingMoreNewer = _b.loadingMoreNewer, contextMessages = _b.messages, notifications = _b.notifications, suppressAutoscroll = _b.suppressAutoscroll;
|
|
203
301
|
var messages = props.messages || contextMessages;
|
|
204
|
-
return (React.createElement(VirtualizedMessageListWithContext, __assign({ channel: channel, hasMore: !!hasMore, loadingMore: !!loadingMore, loadMore: loadMore, messages: messages, notifications: notifications }, props)));
|
|
302
|
+
return (React.createElement(VirtualizedMessageListWithContext, __assign({ channel: channel, hasMore: !!hasMore, hasMoreNewer: !!hasMoreNewer, highlightedMessageId: highlightedMessageId, jumpToLatestMessage: jumpToLatestMessage, loadingMore: !!loadingMore, loadingMoreNewer: !!loadingMoreNewer, loadMore: loadMore, loadMoreNewer: loadMoreNewer, messages: messages, notifications: notifications, suppressAutoscroll: suppressAutoscroll }, props)));
|
|
205
303
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageList/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageList/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,0BAA0B,CAAC;AACzC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,0BAA0B,CAAC;AACzC,cAAc,gCAAgC,CAAC"}
|
|
@@ -9,7 +9,6 @@ export declare const useEnrichedMessages: <StreamChatGenerics extends DefaultStr
|
|
|
9
9
|
hideNewMessageSeparator: boolean;
|
|
10
10
|
messages: StreamMessage<StreamChatGenerics>[];
|
|
11
11
|
noGroupByUser: boolean;
|
|
12
|
-
threadList: boolean;
|
|
13
12
|
groupStyles?: ((message: StreamMessage<StreamChatGenerics>, previousMessage: StreamMessage<StreamChatGenerics>, nextMessage: StreamMessage<StreamChatGenerics>, noGroupByUser: boolean) => GroupStyle) | undefined;
|
|
14
13
|
headerPosition?: number | undefined;
|
|
15
14
|
}) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useEnrichedMessages.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageList/hooks/useEnrichedMessages.ts"],"names":[],"mappings":"AAEA,OAAO,EAAkB,UAAU,EAAgC,MAAM,UAAU,CAAC;AAKpF,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AAE1E,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAEtE,eAAO,MAAM,mBAAmB;;0BAIR,OAAO;yBACR,OAAO;6BACH,OAAO;;mBAEjB,OAAO;
|
|
1
|
+
{"version":3,"file":"useEnrichedMessages.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageList/hooks/useEnrichedMessages.ts"],"names":[],"mappings":"AAEA,OAAO,EAAkB,UAAU,EAAgC,MAAM,UAAU,CAAC;AAKpF,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AAE1E,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAEtE,eAAO,MAAM,mBAAmB;;0BAIR,OAAO;yBACR,OAAO;6BACH,OAAO;;mBAEjB,OAAO;mLAKL,OAAO,KACnB,UAAU;;;;;CAsDhB,CAAC"}
|
|
@@ -3,19 +3,19 @@ import { getGroupStyles, insertIntro, processMessages } from '../utils';
|
|
|
3
3
|
import { useChatContext } from '../../../context/ChatContext';
|
|
4
4
|
import { useComponentContext } from '../../../context/ComponentContext';
|
|
5
5
|
export var useEnrichedMessages = function (args) {
|
|
6
|
-
var channel = args.channel, disableDateSeparator = args.disableDateSeparator, groupStyles = args.groupStyles, headerPosition = args.headerPosition, hideDeletedMessages = args.hideDeletedMessages, hideNewMessageSeparator = args.hideNewMessageSeparator, messages = args.messages, noGroupByUser = args.noGroupByUser
|
|
6
|
+
var channel = args.channel, disableDateSeparator = args.disableDateSeparator, groupStyles = args.groupStyles, headerPosition = args.headerPosition, hideDeletedMessages = args.hideDeletedMessages, hideNewMessageSeparator = args.hideNewMessageSeparator, messages = args.messages, noGroupByUser = args.noGroupByUser;
|
|
7
7
|
var client = useChatContext('useEnrichedMessages').client;
|
|
8
8
|
var HeaderComponent = useComponentContext('useEnrichedMessages').HeaderComponent;
|
|
9
9
|
var lastRead = useMemo(function () { var _a; return (_a = channel.lastRead) === null || _a === void 0 ? void 0 : _a.call(channel); }, [channel]);
|
|
10
|
-
var
|
|
10
|
+
var enableDateSeparator = !disableDateSeparator;
|
|
11
|
+
var messagesWithDates = !enableDateSeparator && !hideDeletedMessages && hideNewMessageSeparator
|
|
11
12
|
? messages
|
|
12
13
|
: processMessages({
|
|
13
|
-
|
|
14
|
+
enableDateSeparator: enableDateSeparator,
|
|
14
15
|
hideDeletedMessages: hideDeletedMessages,
|
|
15
16
|
hideNewMessageSeparator: hideNewMessageSeparator,
|
|
16
17
|
lastRead: lastRead,
|
|
17
18
|
messages: messages,
|
|
18
|
-
threadList: threadList,
|
|
19
19
|
userId: client.userID || '',
|
|
20
20
|
});
|
|
21
21
|
if (HeaderComponent) {
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import type { StreamMessage } from '../../../context/ChannelStateContext';
|
|
3
2
|
import type { DefaultStreamChatGenerics } from '../../../types/types';
|
|
4
3
|
export declare const useGiphyPreview: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(separateGiphyPreview: boolean) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useGiphyPreview.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageList/hooks/useGiphyPreview.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useGiphyPreview.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageList/hooks/useGiphyPreview.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AAE1E,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAEtE,eAAO,MAAM,eAAe,2GAGJ,OAAO;;;CAsB9B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useMessageListElements.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageList/hooks/useMessageListElements.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAGvC,OAAO,EAAmB,UAAU,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"useMessageListElements.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageList/hooks/useMessageListElements.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAGvC,OAAO,EAAmB,UAAU,EAAE,MAAM,UAAU,CAAC;AAWvD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAExD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AAE1E,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAEtE,aAAK,kBAAkB,GACnB,SAAS,GACT,aAAa,GACb,gBAAgB,GAChB,gBAAgB,GAChB,SAAS,GACT,QAAQ,GACR,YAAY,CAAC;AAEjB,aAAK,2BAA2B,CAC9B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,gBAAgB,EAAE,aAAa,CAAC,kBAAkB,CAAC,EAAE,CAAC;IACtD,oBAAoB,EAAE,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,EAAE,kBAAkB,CAAC,CAAC;IACjF,kBAAkB,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IAC/C,qBAAqB,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,aAAa,EAAE,KAAK,CAAC,KAAK,IAAI,CAAC;IACnF,iBAAiB,EAAE,OAAO,CAAC;IAC3B,UAAU,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,SAAS,EAAE,IAAI,CAAC;QAAC,IAAI,EAAE,YAAY,CAAC,kBAAkB,CAAC,CAAA;KAAE,CAAC,CAAC;CACpF,CAAC;AAEF,eAAO,MAAM,sBAAsB,6JAyGlC,CAAC"}
|
|
@@ -13,6 +13,7 @@ var __assign = (this && this.__assign) || function () {
|
|
|
13
13
|
import React, { useMemo } from 'react';
|
|
14
14
|
import { useLastReadData } from './useLastReadData';
|
|
15
15
|
import { getLastReceived } from '../utils';
|
|
16
|
+
import { CUSTOM_MESSAGE_TYPE } from '../../../constants/messageTypes';
|
|
16
17
|
import { DateSeparator as DefaultDateSeparator } from '../../DateSeparator/DateSeparator';
|
|
17
18
|
import { EventComponent } from '../../EventComponent/EventComponent';
|
|
18
19
|
import { Message } from '../../Message';
|
|
@@ -34,11 +35,13 @@ export var useMessageListElements = function (props) {
|
|
|
34
35
|
return useMemo(function () {
|
|
35
36
|
return enrichedMessages.map(function (message) {
|
|
36
37
|
var _a;
|
|
37
|
-
if (message.customType ===
|
|
38
|
+
if (message.customType === CUSTOM_MESSAGE_TYPE.date &&
|
|
39
|
+
message.date &&
|
|
40
|
+
isDate(message.date)) {
|
|
38
41
|
return (React.createElement("li", { key: message.date.toISOString() + "-i" },
|
|
39
42
|
React.createElement(DateSeparator, { date: message.date, formatDate: internalMessageProps.formatDate, unread: message.unread })));
|
|
40
43
|
}
|
|
41
|
-
if (message.customType ===
|
|
44
|
+
if (message.customType === CUSTOM_MESSAGE_TYPE.intro && HeaderComponent) {
|
|
42
45
|
return (React.createElement("li", { key: 'intro' },
|
|
43
46
|
React.createElement(HeaderComponent, null)));
|
|
44
47
|
}
|
|
@@ -50,7 +53,7 @@ export var useMessageListElements = function (props) {
|
|
|
50
53
|
}
|
|
51
54
|
var groupStyles = messageGroupStyles[message.id] || '';
|
|
52
55
|
var messageClass = (customClasses === null || customClasses === void 0 ? void 0 : customClasses.message) || "str-chat__li str-chat__li--" + groupStyles;
|
|
53
|
-
return (React.createElement("li", { className: messageClass, "data-testid": messageClass, key: message.id || message.created_at, onLoadCapture: onMessageLoadCaptured },
|
|
56
|
+
return (React.createElement("li", { className: messageClass, "data-message-id": message.id, "data-testid": messageClass, key: message.id || message.created_at, onLoadCapture: onMessageLoadCaptured },
|
|
54
57
|
React.createElement(Message, __assign({ groupStyles: [groupStyles], lastReceivedId: lastReceivedId, message: message, readBy: readData[message.id] || [], threadList: threadList }, internalMessageProps))));
|
|
55
58
|
});
|
|
56
59
|
}, [
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import type { StreamMessage } from '../../../context/ChannelStateContext';
|
|
3
2
|
import type { DefaultStreamChatGenerics } from '../../../types/types';
|
|
4
|
-
export declare function useNewMessageNotification<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(messages: StreamMessage<StreamChatGenerics>[], currentUserId?:
|
|
3
|
+
export declare function useNewMessageNotification<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(messages: StreamMessage<StreamChatGenerics>[], currentUserId: string | undefined, hasMoreNewer?: boolean): {
|
|
5
4
|
atBottom: import("react").MutableRefObject<boolean>;
|
|
6
5
|
newMessagesNotification: boolean;
|
|
7
6
|
setNewMessagesNotification: import("react").Dispatch<import("react").SetStateAction<boolean>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useNewMessageNotification.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageList/hooks/useNewMessageNotification.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useNewMessageNotification.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageList/hooks/useNewMessageNotification.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AAE1E,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAEtE,wBAAgB,yBAAyB,CACvC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,EAEhF,QAAQ,EAAE,aAAa,CAAC,kBAAkB,CAAC,EAAE,EAC7C,aAAa,EAAE,MAAM,GAAG,SAAS,EACjC,YAAY,CAAC,EAAE,OAAO;;;;EAsCvB"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useEffect, useRef, useState } from 'react';
|
|
2
|
-
export function useNewMessageNotification(messages, currentUserId) {
|
|
2
|
+
export function useNewMessageNotification(messages, currentUserId, hasMoreNewer) {
|
|
3
3
|
var _a = useState(false), newMessagesNotification = _a[0], setNewMessagesNotification = _a[1];
|
|
4
4
|
/**
|
|
5
5
|
* use the flag to avoid the initial "new messages" quick blink
|
|
@@ -9,6 +9,10 @@ export function useNewMessageNotification(messages, currentUserId) {
|
|
|
9
9
|
var atBottom = useRef(false);
|
|
10
10
|
useEffect(function () {
|
|
11
11
|
var _a;
|
|
12
|
+
if (hasMoreNewer) {
|
|
13
|
+
setNewMessagesNotification(true);
|
|
14
|
+
return;
|
|
15
|
+
}
|
|
12
16
|
/* handle scrolling behavior for new messages */
|
|
13
17
|
if (!(messages === null || messages === void 0 ? void 0 : messages.length))
|
|
14
18
|
return;
|
|
@@ -27,6 +31,6 @@ export function useNewMessageNotification(messages, currentUserId) {
|
|
|
27
31
|
setNewMessagesNotification(true);
|
|
28
32
|
}
|
|
29
33
|
didMount.current = true;
|
|
30
|
-
}, [currentUserId, messages]);
|
|
34
|
+
}, [currentUserId, messages, hasMoreNewer]);
|
|
31
35
|
return { atBottom: atBottom, newMessagesNotification: newMessagesNotification, setNewMessagesNotification: setNewMessagesNotification };
|
|
32
36
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePrependMessagesCount.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageList/hooks/usePrependMessagesCount.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AAE1E,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAEtE,wBAAgB,yBAAyB,CACvC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,EAChF,QAAQ,EAAE,aAAa,CAAC,kBAAkB,CAAC,EAAE,
|
|
1
|
+
{"version":3,"file":"usePrependMessagesCount.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageList/hooks/usePrependMessagesCount.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AAE1E,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAEtE,wBAAgB,yBAAyB,CACvC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,EAChF,QAAQ,EAAE,aAAa,CAAC,kBAAkB,CAAC,EAAE,UAqC9C"}
|
|
@@ -25,6 +25,8 @@ export function usePrependedMessagesCount(messages) {
|
|
|
25
25
|
return i;
|
|
26
26
|
}
|
|
27
27
|
}
|
|
28
|
+
// if no match has found, we have jumped
|
|
29
|
+
firstMessageId.current = currentFirstMessageId;
|
|
28
30
|
return 0;
|
|
29
31
|
// TODO: there's a bug here, the messages prop is the same array instance (something mutates it)
|
|
30
32
|
// that's why the second dependency is necessary
|
|
@@ -2,6 +2,8 @@ import React from 'react';
|
|
|
2
2
|
import type { StreamMessage } from '../../../context/ChannelStateContext';
|
|
3
3
|
import type { DefaultStreamChatGenerics } from '../../../types/types';
|
|
4
4
|
export declare type UseScrollLocationLogicParams<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
|
|
5
|
+
hasMoreNewer: boolean;
|
|
6
|
+
suppressAutoscroll: boolean;
|
|
5
7
|
currentUserId?: string;
|
|
6
8
|
messages?: StreamMessage<StreamChatGenerics>[];
|
|
7
9
|
scrolledUpThreshold?: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useScrollLocationLogic.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageList/hooks/useScrollLocationLogic.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAI9E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AAE1E,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAEtE,oBAAY,4BAA4B,CACtC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,EAAE,CAAC;IAC/C,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;
|
|
1
|
+
{"version":3,"file":"useScrollLocationLogic.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageList/hooks/useScrollLocationLogic.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAI9E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AAE1E,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAEtE,oBAAY,4BAA4B,CACtC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,YAAY,EAAE,OAAO,CAAC;IACtB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,EAAE,CAAC;IAC/C,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;sBAuDvB,aAAa,CAAC,cAAc,CAAC;;;CAqCxC,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { useCallback, useLayoutEffect, useRef, useState } from 'react';
|
|
2
2
|
import { useMessageListScrollManager } from './useMessageListScrollManager';
|
|
3
3
|
export var useScrollLocationLogic = function (params) {
|
|
4
|
-
var _a = params.messages, messages = _a === void 0 ? [] : _a, _b = params.scrolledUpThreshold, scrolledUpThreshold = _b === void 0 ? 200 : _b;
|
|
4
|
+
var _a = params.messages, messages = _a === void 0 ? [] : _a, _b = params.scrolledUpThreshold, scrolledUpThreshold = _b === void 0 ? 200 : _b, hasMoreNewer = params.hasMoreNewer, suppressAutoscroll = params.suppressAutoscroll;
|
|
5
5
|
var _c = useState(false), hasNewMessages = _c[0], setHasNewMessages = _c[1];
|
|
6
6
|
var _d = useState(), wrapperRect = _d[0], setWrapperRect = _d[1];
|
|
7
7
|
var closeToBottom = useRef(false);
|
|
@@ -9,8 +9,9 @@ export var useScrollLocationLogic = function (params) {
|
|
|
9
9
|
var listRef = useRef(null);
|
|
10
10
|
var scrollToBottom = useCallback(function () {
|
|
11
11
|
var _a, _b;
|
|
12
|
-
if (!((_a = listRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo))
|
|
12
|
+
if (!((_a = listRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo) || hasMoreNewer || suppressAutoscroll) {
|
|
13
13
|
return;
|
|
14
|
+
}
|
|
14
15
|
(_b = listRef.current) === null || _b === void 0 ? void 0 : _b.scrollTo({
|
|
15
16
|
top: listRef.current.scrollHeight,
|
|
16
17
|
});
|
|
@@ -22,16 +23,19 @@ export var useScrollLocationLogic = function (params) {
|
|
|
22
23
|
top: listRef.current.scrollHeight,
|
|
23
24
|
});
|
|
24
25
|
}, 200);
|
|
25
|
-
}, [listRef]);
|
|
26
|
+
}, [listRef, hasMoreNewer, suppressAutoscroll]);
|
|
26
27
|
useLayoutEffect(function () {
|
|
27
28
|
if (listRef === null || listRef === void 0 ? void 0 : listRef.current) {
|
|
28
29
|
setWrapperRect(listRef.current.getBoundingClientRect());
|
|
29
30
|
scrollToBottom();
|
|
30
31
|
}
|
|
31
|
-
}, [listRef]);
|
|
32
|
+
}, [listRef, hasMoreNewer]);
|
|
32
33
|
var updateScrollTop = useMessageListScrollManager({
|
|
33
34
|
messages: messages,
|
|
34
|
-
onScrollBy: function (scrollBy) {
|
|
35
|
+
onScrollBy: function (scrollBy) {
|
|
36
|
+
var _a;
|
|
37
|
+
(_a = listRef.current) === null || _a === void 0 ? void 0 : _a.scrollBy({ top: scrollBy });
|
|
38
|
+
},
|
|
35
39
|
scrollContainerMeasures: function () {
|
|
36
40
|
var _a, _b;
|
|
37
41
|
return ({
|
|
@@ -1,19 +1,38 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import type { UserResponse } from 'stream-chat';
|
|
3
2
|
import type { DefaultStreamChatGenerics } from '../../types/types';
|
|
4
3
|
import type { StreamMessage } from '../../context/ChannelStateContext';
|
|
5
4
|
declare type ProcessMessagesParams<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
|
|
6
|
-
disableDateSeparator: boolean;
|
|
7
|
-
hideDeletedMessages: boolean;
|
|
8
|
-
hideNewMessageSeparator: boolean;
|
|
9
5
|
messages: StreamMessage<StreamChatGenerics>[];
|
|
10
6
|
userId: string;
|
|
7
|
+
/** Enable date separator */
|
|
8
|
+
enableDateSeparator?: boolean;
|
|
9
|
+
/** Enable deleted messages to be filtered out of resulting message list */
|
|
10
|
+
hideDeletedMessages?: boolean;
|
|
11
|
+
/** Disable date separator display for unread incoming messages */
|
|
12
|
+
hideNewMessageSeparator?: boolean;
|
|
13
|
+
/** Sets the treshold after everything is considered unread */
|
|
11
14
|
lastRead?: Date | null;
|
|
12
|
-
|
|
15
|
+
/** Signals whether to separate giphy preview as well as used to set the giphy preview state */
|
|
13
16
|
setGiphyPreviewMessage?: React.Dispatch<React.SetStateAction<StreamMessage<StreamChatGenerics> | undefined>>;
|
|
14
|
-
threadList?: boolean;
|
|
15
17
|
};
|
|
18
|
+
/**
|
|
19
|
+
* processMessages - Transform the input message list according to config parameters
|
|
20
|
+
*
|
|
21
|
+
* Inserts date separators btw. messages created on different dates or before unread incoming messages. By default:
|
|
22
|
+
* - enabled in main message list
|
|
23
|
+
* - disabled in virtualized message list
|
|
24
|
+
* - disabled in thread
|
|
25
|
+
*
|
|
26
|
+
* Allows to filter out deleted messages, contolled by hideDeletedMessages param. This is disabled by default.
|
|
27
|
+
*
|
|
28
|
+
* Sets Giphy preview message for VirtualizedMessageList
|
|
29
|
+
*
|
|
30
|
+
* The only required params are messages and userId, the rest are config params:
|
|
31
|
+
*
|
|
32
|
+
* @return {StreamMessage<StreamChatGenerics>[]} Transformed list of messages
|
|
33
|
+
*/
|
|
16
34
|
export declare const processMessages: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(params: ProcessMessagesParams<StreamChatGenerics>) => StreamMessage<StreamChatGenerics>[];
|
|
35
|
+
export declare const makeDateMessageId: (date?: string | Date | undefined) => string;
|
|
17
36
|
export declare const getLastReceived: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(messages: StreamMessage<StreamChatGenerics>[]) => string | null;
|
|
18
37
|
export declare const getReadStates: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(messages: StreamMessage<StreamChatGenerics>[], read: Record<string, {
|
|
19
38
|
last_read: Date;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/MessageList/utils.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/MessageList/utils.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAEvE,aAAK,qBAAqB,CACxB,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,QAAQ,EAAE,aAAa,CAAC,kBAAkB,CAAC,EAAE,CAAC;IAC9C,MAAM,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,2EAA2E;IAC3E,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,kEAAkE;IAClE,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACvB,+FAA+F;IAC/F,sBAAsB,CAAC,EAAE,KAAK,CAAC,QAAQ,CACrC,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,kBAAkB,CAAC,GAAG,SAAS,CAAC,CACpE,CAAC;CACH,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,eAAe,8KAuF3B,CAAC;AAEF,eAAO,MAAM,iBAAiB,8CAQ7B,CAAC;AAGF,eAAO,MAAM,eAAe,oJAY3B,CAAC;AAEF,eAAO,MAAM,aAAa;eAIU,IAAI;;mCACnB,OAAO,uDAqC3B,CAAC;AAEF,eAAO,MAAM,WAAW,+MAoDvB,CAAC;AAEF,oBAAY,UAAU,GAAG,EAAE,GAAG,QAAQ,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAErE,eAAO,MAAM,cAAc,oPAMV,OAAO,KACrB,UAuCF,CAAC"}
|