stream-chat-react 11.15.2 → 11.16.0

package/dist/{Window-847d5d88.js → Window-996f3be8.js}

@@ -1549,6 +1549,7 @@ var useAudioController = function (_a) {
                             return;
                         try {
                             audioRef.current.pause();
+                            setIsPlaying(false);
                         }
                         catch (e) {
                             registerError(new Error(t('Failed to play the recording')));
@@ -36853,7 +36854,10 @@ var areMessageUIPropsEqual = function (prevProps, nextProps) {
     }
     return areMessagesEqual(prevMessage, nextMessage);
 };
-var messageHasReactions = function (message) { var _a; return Object.values((_a = message === null || message === void 0 ? void 0 : message.reaction_counts) !== null && _a !== void 0 ? _a : {}).some(function (count) { return count > 0; }); };
+var messageHasReactions = function (message) { var _a; return Object.values((_a = message === null || message === void 0 ? void 0 : message.reaction_groups) !== null && _a !== void 0 ? _a : {}).some(function (_a) {
+    var count = _a.count;
+    return count > 0;
+}); };
 var messageHasAttachments = function (message) { return !!(message === null || message === void 0 ? void 0 : message.attachments) && !!message.attachments.length; };
 var getImages = function (message) {
     if (!(message === null || message === void 0 ? void 0 : message.attachments)) {
@@ -39336,9 +39340,9 @@ var MicIcon = function () { return (React__default["default"].createElement("svg
     React__default["default"].createElement("path", { d: 'M12 9.5C12 12.26 9.76 14.5 7 14.5C4.24 14.5 2 12.26 2 9.5H0C0 13.03 2.61 15.93 6 16.42V19.5H8V16.42C11.39 15.93 14 13.03 14 9.5H12Z' }))); };
 var BinIcon = function () { return (React__default["default"].createElement("svg", { fill: 'currentColor', viewBox: '0 0 32 32', xmlns: 'http://www.w3.org/2000/svg' },
     React__default["default"].createElement("path", { d: 'M8.00033 25.3333C8.00033 26.8 9.20033 28 10.667 28H21.3337C22.8003 28 24.0003 26.8 24.0003 25.3333V12C24.0003 10.5333 22.8003 9.33333 21.3337 9.33333H10.667C9.20033 9.33333 8.00033 10.5333 8.00033 12V25.3333ZM24.0003 5.33333H20.667L19.7203 4.38667C19.4803 4.14667 19.1337 4 18.787 4H13.2137C12.867 4 12.5203 4.14667 12.2803 4.38667L11.3337 5.33333H8.00033C7.26699 5.33333 6.66699 5.93333 6.66699 6.66667C6.66699 7.4 7.26699 8 8.00033 8H24.0003C24.7337 8 25.3337 7.4 25.3337 6.66667C25.3337 5.93333 24.7337 5.33333 24.0003 5.33333Z' }))); };
-var PauseIcon = function () { return (React__default["default"].createElement("svg", { fill: 'currentColor', viewBox: '0 0 16 20', xmlns: 'http://www.w3.org/2000/svg' },
+var PauseIcon = function () { return (React__default["default"].createElement("svg", { "data-testid": 'str-chat__pause-icon', fill: 'currentColor', viewBox: '0 0 16 20', xmlns: 'http://www.w3.org/2000/svg' },
     React__default["default"].createElement("path", { d: 'M0 19.3333H5.33333V0.666626H0V19.3333ZM10.6667 0.666626V19.3333H16V0.666626H10.6667Z' }))); };
-var PlayIcon = function () { return (React__default["default"].createElement("svg", { fill: 'currentColor', viewBox: '0 0 14 18', xmlns: 'http://www.w3.org/2000/svg' },
+var PlayIcon = function () { return (React__default["default"].createElement("svg", { "data-testid": 'str-chat__play-icon', fill: 'currentColor', viewBox: '0 0 14 18', xmlns: 'http://www.w3.org/2000/svg' },
     React__default["default"].createElement("path", { d: 'M0.236328 2.09338V15.9067C0.236328 16.9601 1.39633 17.6001 2.28966 17.0267L13.143 10.1201C13.9697 9.60005 13.9697 8.40005 13.143 7.86672L2.28966 0.973385C1.39633 0.400051 0.236328 1.04005 0.236328 2.09338Z' }))); };
 var CheckSignIcon = function () { return (React__default["default"].createElement("svg", { fill: 'currentColor', viewBox: '0 0 18 14', xmlns: 'http://www.w3.org/2000/svg' },
     React__default["default"].createElement("path", { d: 'M5.79457 10.875L2.32457 7.40502C1.93457 7.01502 1.30457 7.01502 0.91457 7.40502C0.52457 7.79502 0.52457 8.42502 0.91457 8.81502L5.09457 12.995C5.48457 13.385 6.11457 13.385 6.50457 12.995L17.0846 2.41502C17.4746 2.02502 17.4746 1.39502 17.0846 1.00502C16.6946 0.615024 16.0646 0.615024 15.6746 1.00502L5.79457 10.875Z' }))); };
@@ -39380,7 +39384,7 @@ var AudioRecordingPreview = function (_a) {
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement("audio", { ref: audioRef },
             React__default["default"].createElement("source", { src: props.src, type: mimeType })),
-        React__default["default"].createElement("button", { className: 'str-chat__audio_recorder__toggle-playback-button', onClick: togglePlay }, isPlaying ? React__default["default"].createElement(PauseIcon, null) : React__default["default"].createElement(PlayIcon, null)),
+        React__default["default"].createElement("button", { className: 'str-chat__audio_recorder__toggle-playback-button', "data-testid": 'audio-recording-preview-toggle-play-btn', onClick: togglePlay }, isPlaying ? React__default["default"].createElement(PauseIcon, null) : React__default["default"].createElement(PlayIcon, null)),
         React__default["default"].createElement(RecordingTimer, { durationSeconds: displayedDuration }),
         React__default["default"].createElement("div", { className: 'str-chat__wave-progress-bar__track-container' },
             React__default["default"].createElement(WaveProgressBar, { progress: progress, seek: seek, waveformData: waveformData || [] }))));
@@ -39430,11 +39434,12 @@ var AudioRecordingWaveform = function (_a) {
     }, [recorder]);
     if (!recorder)
         return null;
-    return (React__default["default"].createElement("div", { className: 'str-chat__audio_recorder__waveform-box' }, amplitudes.slice(-maxDataPointsDrawn).map(function (amplitude, i) { return (React__default["default"].createElement("div", { className: 'str-chat__wave-progress-bar__amplitude-bar', key: "amplitude-".concat(i, "-voice-recording"), style: {
-            '--str-chat__wave-progress-bar__amplitude-bar-height': amplitude
-                ? amplitude * 100 + '%'
-                : '0%',
-        } })); })));
+    return (React__default["default"].createElement("div", { className: 'str-chat__waveform-box-container' },
+        React__default["default"].createElement("div", { className: 'str-chat__audio_recorder__waveform-box' }, amplitudes.slice(-maxDataPointsDrawn).map(function (amplitude, i) { return (React__default["default"].createElement("div", { className: 'str-chat__wave-progress-bar__amplitude-bar', key: "amplitude-".concat(i, "-voice-recording"), style: {
+                '--str-chat__wave-progress-bar__amplitude-bar-height': amplitude
+                    ? amplitude * 100 + '%'
+                    : '0%',
+            } })); }))));
 };
 var AudioRecordingInProgress = function () {
     var _a = useTimeElapsed(), secondsElapsed = _a.secondsElapsed, startCounter = _a.startCounter, stopCounter = _a.stopCounter;
@@ -39456,8 +39461,7 @@ var AudioRecordingInProgress = function () {
     }, [recorder, startCounter, stopCounter]);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(RecordingTimer, { durationSeconds: secondsElapsed }),
-        React__default["default"].createElement("div", { className: 'str-chat__waveform-box-container' },
-            React__default["default"].createElement(AudioRecordingWaveform, null))));
+        React__default["default"].createElement(AudioRecordingWaveform, null)));
 };
 
 var Subscription = /** @class */ (function () {
@@ -52450,18 +52454,23 @@ var AudioRecorder = function () {
     var _a, _b;
     var _c = useMessageInputContext().recordingController, completeRecording = _c.completeRecording, recorder = _c.recorder, recording = _c.recording, recordingState = _c.recordingState;
     var isUploadingFile = ((_a = recording === null || recording === void 0 ? void 0 : recording.$internal) === null || _a === void 0 ? void 0 : _a.uploadState) === 'uploading';
+    var state = React.useMemo(function () { return ({
+        paused: recordingState === exports.MediaRecordingState.PAUSED,
+        recording: recordingState === exports.MediaRecordingState.RECORDING,
+        stopped: recordingState === exports.MediaRecordingState.STOPPED,
+    }); }, [recordingState]);
     if (!recorder)
         return null;
     return (React__default["default"].createElement("div", { className: 'str-chat__audio_recorder-container' },
         React__default["default"].createElement("div", { className: 'str-chat__audio_recorder', "data-testid": 'audio-recorder' },
-            React__default["default"].createElement("button", { className: 'str-chat__audio_recorder__cancel-button', disabled: isUploadingFile, onClick: recorder.cancel },
+            React__default["default"].createElement("button", { className: 'str-chat__audio_recorder__cancel-button', "data-testid": 'cancel-recording-audio-button', disabled: isUploadingFile, onClick: recorder.cancel },
                 React__default["default"].createElement(BinIcon, null)),
-            (recording === null || recording === void 0 ? void 0 : recording.asset_url) ? (React__default["default"].createElement(AudioRecordingPreview, { durationSeconds: (_b = recording.duration) !== null && _b !== void 0 ? _b : 0, mimeType: recording.mime_type, src: recording.asset_url, waveformData: recording.waveform_data })) : (React__default["default"].createElement(AudioRecordingInProgress, null)),
-            recordingState === exports.MediaRecordingState.PAUSED && (React__default["default"].createElement("button", { className: 'str-chat__audio_recorder__resume-recording-button', onClick: recorder.resume },
+            state.stopped && (recording === null || recording === void 0 ? void 0 : recording.asset_url) ? (React__default["default"].createElement(AudioRecordingPreview, { durationSeconds: (_b = recording.duration) !== null && _b !== void 0 ? _b : 0, mimeType: recording.mime_type, src: recording.asset_url, waveformData: recording.waveform_data })) : state.paused || state.recording ? (React__default["default"].createElement(AudioRecordingInProgress, null)) : null,
+            state.paused && (React__default["default"].createElement("button", { className: 'str-chat__audio_recorder__resume-recording-button', onClick: recorder.resume },
                 React__default["default"].createElement(MicIcon, null))),
-            recordingState === exports.MediaRecordingState.RECORDING && (React__default["default"].createElement("button", { className: 'str-chat__audio_recorder__pause-recording-button', onClick: recorder.pause },
+            state.recording && (React__default["default"].createElement("button", { className: 'str-chat__audio_recorder__pause-recording-button', "data-testid": 'pause-recording-audio-button', onClick: recorder.pause },
                 React__default["default"].createElement(PauseIcon, null))),
-            recordingState === exports.MediaRecordingState.STOPPED ? (React__default["default"].createElement("button", { className: 'str-chat__audio_recorder__complete-button', "data-testid": 'audio-recorder-complete-button', disabled: isUploadingFile, onClick: completeRecording }, isUploadingFile ? React__default["default"].createElement(LoadingIndicatorIcon, null) : React__default["default"].createElement(SendIconV2, null))) : (React__default["default"].createElement("button", { className: 'str-chat__audio_recorder__stop-button', "data-testid": 'audio-recorder-stop-button', onClick: recorder.stop },
+            state.stopped ? (React__default["default"].createElement("button", { className: 'str-chat__audio_recorder__complete-button', "data-testid": 'audio-recorder-complete-button', disabled: isUploadingFile, onClick: completeRecording }, isUploadingFile ? React__default["default"].createElement(LoadingIndicatorIcon, null) : React__default["default"].createElement(SendIconV2, null))) : (React__default["default"].createElement("button", { className: 'str-chat__audio_recorder__stop-button', "data-testid": 'audio-recorder-stop-button', onClick: recorder.stop },
                 React__default["default"].createElement(CheckSignIcon, null))))));
 };
 
@@ -54467,7 +54476,7 @@ var getImageDimensions = function (source) {
 
 var UnMemoizedReactionSelector = React__default["default"].forwardRef(function (props, ref) {
     var _a;
-    var propAvatar = props.Avatar, _b = props.detailedView, detailedView = _b === void 0 ? true : _b, propHandleReaction = props.handleReaction, propLatestReactions = props.latest_reactions, propOwnReactions = props.own_reactions, propReactionCounts = props.reaction_counts, propReactionOptions = props.reactionOptions, _c = props.reverse, reverse = _c === void 0 ? false : _c;
+    var propAvatar = props.Avatar, _b = props.detailedView, detailedView = _b === void 0 ? true : _b, propHandleReaction = props.handleReaction, propLatestReactions = props.latest_reactions, propOwnReactions = props.own_reactions, propReactionGroups = props.reaction_groups, propReactionOptions = props.reactionOptions, _c = props.reverse, reverse = _c === void 0 ? false : _c;
     var _d = useComponentContext('ReactionSelector'), contextAvatar = _d.Avatar, contextReactionOptions = _d.reactionOptions;
     var _e = useMessageContext('ReactionSelector'), contextHandleReaction = _e.handleReaction, message = _e.message;
     var reactionOptions = propReactionOptions !== null && propReactionOptions !== void 0 ? propReactionOptions : contextReactionOptions;
@@ -54475,7 +54484,7 @@ var UnMemoizedReactionSelector = React__default["default"].forwardRef(function (
     var handleReaction = propHandleReaction || contextHandleReaction;
     var latestReactions = propLatestReactions || (message === null || message === void 0 ? void 0 : message.latest_reactions) || [];
     var ownReactions = propOwnReactions || (message === null || message === void 0 ? void 0 : message.own_reactions) || [];
-    var reactionCounts = propReactionCounts || (message === null || message === void 0 ? void 0 : message.reaction_counts) || {};
+    var reactionGroups = propReactionGroups || (message === null || message === void 0 ? void 0 : message.reaction_groups) || {};
     var _f = React.useState(null), tooltipReactionType = _f[0], setTooltipReactionType = _f[1];
     var _g = React.useState(null), tooltipPositions = _g[0], setTooltipPositions = _g[1];
     var targetRef = React.useRef(null);
@@ -54535,9 +54544,10 @@ var UnMemoizedReactionSelector = React__default["default"].forwardRef(function (
             React__default["default"].createElement("div", { className: 'arrow', style: { left: tooltipPositions === null || tooltipPositions === void 0 ? void 0 : tooltipPositions.arrow } }), (_a = getUsersPerReactionType(tooltipReactionType)) === null || _a === void 0 ? void 0 :
             _a.map(function (user, i, users) { return (React__default["default"].createElement("span", { className: 'latest-user-username', key: "key-".concat(i, "-").concat(user) }, "".concat(user).concat(i < users.length - 1 ? ', ' : ''))); }))),
         React__default["default"].createElement("ul", { className: 'str-chat__message-reactions-list str-chat__message-reactions-options' }, reactionOptions.map(function (_a) {
+            var _b, _c;
             var Component = _a.Component, reactionName = _a.name, reactionType = _a.type;
             var latestUser = getLatestUserForReactionType(reactionType);
-            var count = reactionCounts && reactionCounts[reactionType];
+            var count = (_c = (_b = reactionGroups[reactionType]) === null || _b === void 0 ? void 0 : _b.count) !== null && _c !== void 0 ? _c : 0;
             return (React__default["default"].createElement("li", { key: reactionType },
                 React__default["default"].createElement("button", { "aria-label": "Select Reaction: ".concat(reactionName || reactionType), className: clsx('str-chat__message-reactions-list-item str-chat__message-reactions-option', {
                         'str-chat__message-reactions-option-selected': iHaveReactedWithReaction(reactionType),
@@ -54554,18 +54564,21 @@ var UnMemoizedReactionSelector = React__default["default"].forwardRef(function (
 var ReactionSelector = React__default["default"].memo(UnMemoizedReactionSelector);
 
 var defaultReactionsSort = function (a, b) {
+    if (a.firstReactionAt && b.firstReactionAt) {
+        return +a.firstReactionAt - +b.firstReactionAt;
+    }
     return a.reactionType.localeCompare(b.reactionType, 'en');
 };
 var useProcessReactions = function (params) {
     var _a;
-    var propOwnReactions = params.own_reactions, propReactionCounts = params.reaction_counts, propReactionOptions = params.reactionOptions, propReactions = params.reactions, propSortReactions = params.sortReactions;
+    var propOwnReactions = params.own_reactions, propReactionGroups = params.reaction_groups, propReactionOptions = params.reactionOptions, propReactions = params.reactions, propSortReactions = params.sortReactions;
     var _b = useMessageContext('useProcessReactions'), message = _b.message, contextSortReactions = _b.sortReactions;
     var contextReactionOptions = useComponentContext('useProcessReactions').reactionOptions;
     var reactionOptions = propReactionOptions !== null && propReactionOptions !== void 0 ? propReactionOptions : contextReactionOptions;
     var sortReactions = (_a = propSortReactions !== null && propSortReactions !== void 0 ? propSortReactions : contextSortReactions) !== null && _a !== void 0 ? _a : defaultReactionsSort;
     var latestReactions = propReactions || message.latest_reactions;
     var ownReactions = propOwnReactions || (message === null || message === void 0 ? void 0 : message.own_reactions);
-    var reactionCounts = propReactionCounts || message.reaction_counts;
+    var reactionGroups = propReactionGroups || (message === null || message === void 0 ? void 0 : message.reaction_groups);
     var isOwnReaction = React.useCallback(function (reactionType) { var _a; return (_a = ownReactions === null || ownReactions === void 0 ? void 0 : ownReactions.some(function (reaction) { return reaction.type === reactionType; })) !== null && _a !== void 0 ? _a : false; }, [ownReactions]);
     var getEmojiByReactionType = React.useCallback(function (reactionType) { var _a, _b; return (_b = (_a = reactionOptions.find(function (_a) {
         var type = _a.type;
@@ -54586,21 +54599,25 @@ var useProcessReactions = function (params) {
         })) !== null && _a !== void 0 ? _a : [];
     }, [latestReactions]);
     var existingReactions = React.useMemo(function () {
-        if (!reactionCounts) {
+        if (!reactionGroups) {
             return [];
         }
-        var unsortedReactions = Object.entries(reactionCounts).flatMap(function (_a) {
-            var reactionType = _a[0], reactionCount = _a[1];
-            if (reactionCount === 0 || !isSupportedReaction(reactionType)) {
+        var unsortedReactions = Object.entries(reactionGroups).flatMap(function (_a) {
+            var reactionType = _a[0], _b = _a[1], count = _b.count, first_reaction_at = _b.first_reaction_at, last_reaction_at = _b.last_reaction_at;
+            if (count === 0 || !isSupportedReaction(reactionType)) {
                 return [];
             }
+            var latestReactedUserNames = getLatestReactedUserNames(reactionType);
             return [
                 {
                     EmojiComponent: getEmojiByReactionType(reactionType),
+                    firstReactionAt: first_reaction_at ? new Date(first_reaction_at) : null,
                     isOwnReaction: isOwnReaction(reactionType),
-                    latestReactedUserNames: getLatestReactedUserNames(reactionType),
-                    reactionCount: reactionCount,
+                    lastReactionAt: last_reaction_at ? new Date(last_reaction_at) : null,
+                    latestReactedUserNames: latestReactedUserNames,
+                    reactionCount: count,
                     reactionType: reactionType,
+                    unlistedReactedUserCount: count - latestReactedUserNames.length,
                 },
             ];
         });
@@ -54610,7 +54627,7 @@ var useProcessReactions = function (params) {
         getLatestReactedUserNames,
         isOwnReaction,
         isSupportedReaction,
-        reactionCounts,
+        reactionGroups,
         sortReactions,
     ]);
     var hasReactions = existingReactions.length > 0;
@@ -55064,25 +55081,32 @@ var useReactionHandler = function (message) {
     var client = useChatContext('useReactionHandler').client;
     var createMessagePreview = React.useCallback(function (add, reaction, message) {
         var _a, _b;
-        var newReactionCounts = (message === null || message === void 0 ? void 0 : message.reaction_counts) || {};
+        var newReactionGroups = (message === null || message === void 0 ? void 0 : message.reaction_groups) || {};
         var reactionType = reaction.type;
-        var hasReaction = !!newReactionCounts[reactionType];
+        var hasReaction = !!newReactionGroups[reactionType];
         if (add) {
-            newReactionCounts[reactionType] = hasReaction ? newReactionCounts[reactionType] + 1 : 1;
+            var timestamp = new Date().toISOString();
+            newReactionGroups[reactionType] = hasReaction
+                ? exports.__assign(exports.__assign({}, newReactionGroups[reactionType]), { count: newReactionGroups[reactionType].count + 1 }) : {
+                count: 1,
+                first_reaction_at: timestamp,
+                last_reaction_at: timestamp,
+                sum_scores: 1,
+            };
         }
         else {
-            if (hasReaction && newReactionCounts[reactionType] > 1) {
-                newReactionCounts[reactionType]--;
+            if (hasReaction && newReactionGroups[reactionType].count > 1) {
+                newReactionGroups[reactionType] = exports.__assign(exports.__assign({}, newReactionGroups[reactionType]), { count: newReactionGroups[reactionType].count - 1 });
             }
             else {
-                delete newReactionCounts[reactionType];
+                delete newReactionGroups[reactionType];
             }
         }
         var newReactions = add
             ? __spreadArray([reaction], ((message === null || message === void 0 ? void 0 : message.latest_reactions) || []), true) : (_a = message.latest_reactions) === null || _a === void 0 ? void 0 : _a.filter(function (item) { return !(item.type === reaction.type && item.user_id === reaction.user_id); });
         var newOwnReactions = add
             ? __spreadArray([reaction], ((message === null || message === void 0 ? void 0 : message.own_reactions) || []), true) : (_b = message === null || message === void 0 ? void 0 : message.own_reactions) === null || _b === void 0 ? void 0 : _b.filter(function (item) { return item.type !== reaction.type; });
-        return exports.__assign(exports.__assign({}, message), { latest_reactions: newReactions || message.latest_reactions, own_reactions: newOwnReactions, reaction_counts: newReactionCounts, reaction_scores: newReactionCounts });
+        return exports.__assign(exports.__assign({}, message), { latest_reactions: newReactions || message.latest_reactions, own_reactions: newOwnReactions, reaction_groups: newReactionGroups });
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [client.user, client.userID]);
@@ -55891,7 +55915,7 @@ var getGroupStyles = function (message, previousMessage, nextMessage, noGroupByU
         ((_c = message.user) === null || _c === void 0 ? void 0 : _c.id) !== ((_d = previousMessage.user) === null || _d === void 0 ? void 0 : _d.id) ||
         previousMessage.type === 'error' ||
         previousMessage.deleted_at ||
-        (message.reaction_counts && Object.keys(message.reaction_counts).length > 0) ||
+        (message.reaction_groups && Object.keys(message.reaction_groups).length > 0) ||
         isMessageEdited(previousMessage);
     var isBottomMessage = !nextMessage ||
         nextMessage.customType === CUSTOM_MESSAGE_TYPE.date ||
@@ -55901,7 +55925,7 @@ var getGroupStyles = function (message, previousMessage, nextMessage, noGroupByU
         ((_f = message.user) === null || _f === void 0 ? void 0 : _f.id) !== ((_g = nextMessage.user) === null || _g === void 0 ? void 0 : _g.id) ||
         nextMessage.type === 'error' ||
         nextMessage.deleted_at ||
-        (nextMessage.reaction_counts && Object.keys(nextMessage.reaction_counts).length > 0) ||
+        (nextMessage.reaction_groups && Object.keys(nextMessage.reaction_groups).length > 0) ||
         isMessageEdited(message);
     if (!isTopMessage && !isBottomMessage) {
         if (message.deleted_at || message.type === 'error')

package/dist/browser.full-bundle.js

@@ -10564,6 +10564,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, ReactDOM, streamC
                                 return;
                             try {
                                 audioRef.current.pause();
+                                setIsPlaying(false);
                             }
                             catch (e) {
                                 registerError(new Error(t('Failed to play the recording')));
@@ -48862,7 +48863,10 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, ReactDOM, streamC
         }
         return areMessagesEqual(prevMessage, nextMessage);
     };
-    var messageHasReactions = function (message) { var _a; return Object.values((_a = message === null || message === void 0 ? void 0 : message.reaction_counts) !== null && _a !== void 0 ? _a : {}).some(function (count) { return count > 0; }); };
+    var messageHasReactions = function (message) { var _a; return Object.values((_a = message === null || message === void 0 ? void 0 : message.reaction_groups) !== null && _a !== void 0 ? _a : {}).some(function (_a) {
+        var count = _a.count;
+        return count > 0;
+    }); };
     var messageHasAttachments = function (message) { return !!(message === null || message === void 0 ? void 0 : message.attachments) && !!message.attachments.length; };
     var getImages = function (message) {
         if (!(message === null || message === void 0 ? void 0 : message.attachments)) {
@@ -51381,9 +51385,9 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, ReactDOM, streamC
         React__default["default"].createElement("path", { d: 'M12 9.5C12 12.26 9.76 14.5 7 14.5C4.24 14.5 2 12.26 2 9.5H0C0 13.03 2.61 15.93 6 16.42V19.5H8V16.42C11.39 15.93 14 13.03 14 9.5H12Z' }))); };
     var BinIcon = function () { return (React__default["default"].createElement("svg", { fill: 'currentColor', viewBox: '0 0 32 32', xmlns: 'http://www.w3.org/2000/svg' },
         React__default["default"].createElement("path", { d: 'M8.00033 25.3333C8.00033 26.8 9.20033 28 10.667 28H21.3337C22.8003 28 24.0003 26.8 24.0003 25.3333V12C24.0003 10.5333 22.8003 9.33333 21.3337 9.33333H10.667C9.20033 9.33333 8.00033 10.5333 8.00033 12V25.3333ZM24.0003 5.33333H20.667L19.7203 4.38667C19.4803 4.14667 19.1337 4 18.787 4H13.2137C12.867 4 12.5203 4.14667 12.2803 4.38667L11.3337 5.33333H8.00033C7.26699 5.33333 6.66699 5.93333 6.66699 6.66667C6.66699 7.4 7.26699 8 8.00033 8H24.0003C24.7337 8 25.3337 7.4 25.3337 6.66667C25.3337 5.93333 24.7337 5.33333 24.0003 5.33333Z' }))); };
-    var PauseIcon = function () { return (React__default["default"].createElement("svg", { fill: 'currentColor', viewBox: '0 0 16 20', xmlns: 'http://www.w3.org/2000/svg' },
+    var PauseIcon = function () { return (React__default["default"].createElement("svg", { "data-testid": 'str-chat__pause-icon', fill: 'currentColor', viewBox: '0 0 16 20', xmlns: 'http://www.w3.org/2000/svg' },
         React__default["default"].createElement("path", { d: 'M0 19.3333H5.33333V0.666626H0V19.3333ZM10.6667 0.666626V19.3333H16V0.666626H10.6667Z' }))); };
-    var PlayIcon = function () { return (React__default["default"].createElement("svg", { fill: 'currentColor', viewBox: '0 0 14 18', xmlns: 'http://www.w3.org/2000/svg' },
+    var PlayIcon = function () { return (React__default["default"].createElement("svg", { "data-testid": 'str-chat__play-icon', fill: 'currentColor', viewBox: '0 0 14 18', xmlns: 'http://www.w3.org/2000/svg' },
         React__default["default"].createElement("path", { d: 'M0.236328 2.09338V15.9067C0.236328 16.9601 1.39633 17.6001 2.28966 17.0267L13.143 10.1201C13.9697 9.60005 13.9697 8.40005 13.143 7.86672L2.28966 0.973385C1.39633 0.400051 0.236328 1.04005 0.236328 2.09338Z' }))); };
     var CheckSignIcon = function () { return (React__default["default"].createElement("svg", { fill: 'currentColor', viewBox: '0 0 18 14', xmlns: 'http://www.w3.org/2000/svg' },
         React__default["default"].createElement("path", { d: 'M5.79457 10.875L2.32457 7.40502C1.93457 7.01502 1.30457 7.01502 0.91457 7.40502C0.52457 7.79502 0.52457 8.42502 0.91457 8.81502L5.09457 12.995C5.48457 13.385 6.11457 13.385 6.50457 12.995L17.0846 2.41502C17.4746 2.02502 17.4746 1.39502 17.0846 1.00502C16.6946 0.615024 16.0646 0.615024 15.6746 1.00502L5.79457 10.875Z' }))); };
@@ -51425,7 +51429,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, ReactDOM, streamC
         return (React__default["default"].createElement(React__default["default"].Fragment, null,
             React__default["default"].createElement("audio", { ref: audioRef },
                 React__default["default"].createElement("source", { src: props.src, type: mimeType })),
-            React__default["default"].createElement("button", { className: 'str-chat__audio_recorder__toggle-playback-button', onClick: togglePlay }, isPlaying ? React__default["default"].createElement(PauseIcon, null) : React__default["default"].createElement(PlayIcon, null)),
+            React__default["default"].createElement("button", { className: 'str-chat__audio_recorder__toggle-playback-button', "data-testid": 'audio-recording-preview-toggle-play-btn', onClick: togglePlay }, isPlaying ? React__default["default"].createElement(PauseIcon, null) : React__default["default"].createElement(PlayIcon, null)),
             React__default["default"].createElement(RecordingTimer, { durationSeconds: displayedDuration }),
             React__default["default"].createElement("div", { className: 'str-chat__wave-progress-bar__track-container' },
                 React__default["default"].createElement(WaveProgressBar, { progress: progress, seek: seek, waveformData: waveformData || [] }))));
@@ -51475,11 +51479,12 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, ReactDOM, streamC
         }, [recorder]);
         if (!recorder)
             return null;
-        return (React__default["default"].createElement("div", { className: 'str-chat__audio_recorder__waveform-box' }, amplitudes.slice(-maxDataPointsDrawn).map(function (amplitude, i) { return (React__default["default"].createElement("div", { className: 'str-chat__wave-progress-bar__amplitude-bar', key: "amplitude-".concat(i, "-voice-recording"), style: {
-                '--str-chat__wave-progress-bar__amplitude-bar-height': amplitude
-                    ? amplitude * 100 + '%'
-                    : '0%',
-            } })); })));
+        return (React__default["default"].createElement("div", { className: 'str-chat__waveform-box-container' },
+            React__default["default"].createElement("div", { className: 'str-chat__audio_recorder__waveform-box' }, amplitudes.slice(-maxDataPointsDrawn).map(function (amplitude, i) { return (React__default["default"].createElement("div", { className: 'str-chat__wave-progress-bar__amplitude-bar', key: "amplitude-".concat(i, "-voice-recording"), style: {
+                    '--str-chat__wave-progress-bar__amplitude-bar-height': amplitude
+                        ? amplitude * 100 + '%'
+                        : '0%',
+                } })); }))));
     };
     var AudioRecordingInProgress = function () {
         var _a = useTimeElapsed(), secondsElapsed = _a.secondsElapsed, startCounter = _a.startCounter, stopCounter = _a.stopCounter;
@@ -51501,8 +51506,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, ReactDOM, streamC
         }, [recorder, startCounter, stopCounter]);
         return (React__default["default"].createElement(React__default["default"].Fragment, null,
             React__default["default"].createElement(RecordingTimer, { durationSeconds: secondsElapsed }),
-            React__default["default"].createElement("div", { className: 'str-chat__waveform-box-container' },
-                React__default["default"].createElement(AudioRecordingWaveform, null))));
+            React__default["default"].createElement(AudioRecordingWaveform, null)));
     };
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var Subscription = /** @class */ (function () {
@@ -64500,18 +64504,23 @@ bitsperframe:             %d
         var _a, _b;
         var _c = useMessageInputContext().recordingController, completeRecording = _c.completeRecording, recorder = _c.recorder, recording = _c.recording, recordingState = _c.recordingState;
         var isUploadingFile = ((_a = recording === null || recording === void 0 ? void 0 : recording.$internal) === null || _a === void 0 ? void 0 : _a.uploadState) === 'uploading';
+        var state = React$2.useMemo(function () { return ({
+            paused: recordingState === exports.MediaRecordingState.PAUSED,
+            recording: recordingState === exports.MediaRecordingState.RECORDING,
+            stopped: recordingState === exports.MediaRecordingState.STOPPED,
+        }); }, [recordingState]);
         if (!recorder)
             return null;
         return (React__default["default"].createElement("div", { className: 'str-chat__audio_recorder-container' },
             React__default["default"].createElement("div", { className: 'str-chat__audio_recorder', "data-testid": 'audio-recorder' },
-                React__default["default"].createElement("button", { className: 'str-chat__audio_recorder__cancel-button', disabled: isUploadingFile, onClick: recorder.cancel },
+                React__default["default"].createElement("button", { className: 'str-chat__audio_recorder__cancel-button', "data-testid": 'cancel-recording-audio-button', disabled: isUploadingFile, onClick: recorder.cancel },
                     React__default["default"].createElement(BinIcon, null)),
-                (recording === null || recording === void 0 ? void 0 : recording.asset_url) ? (React__default["default"].createElement(AudioRecordingPreview, { durationSeconds: (_b = recording.duration) !== null && _b !== void 0 ? _b : 0, mimeType: recording.mime_type, src: recording.asset_url, waveformData: recording.waveform_data })) : (React__default["default"].createElement(AudioRecordingInProgress, null)),
-                recordingState === exports.MediaRecordingState.PAUSED && (React__default["default"].createElement("button", { className: 'str-chat__audio_recorder__resume-recording-button', onClick: recorder.resume },
+                state.stopped && (recording === null || recording === void 0 ? void 0 : recording.asset_url) ? (React__default["default"].createElement(AudioRecordingPreview, { durationSeconds: (_b = recording.duration) !== null && _b !== void 0 ? _b : 0, mimeType: recording.mime_type, src: recording.asset_url, waveformData: recording.waveform_data })) : state.paused || state.recording ? (React__default["default"].createElement(AudioRecordingInProgress, null)) : null,
+                state.paused && (React__default["default"].createElement("button", { className: 'str-chat__audio_recorder__resume-recording-button', onClick: recorder.resume },
                     React__default["default"].createElement(MicIcon, null))),
-                recordingState === exports.MediaRecordingState.RECORDING && (React__default["default"].createElement("button", { className: 'str-chat__audio_recorder__pause-recording-button', onClick: recorder.pause },
+                state.recording && (React__default["default"].createElement("button", { className: 'str-chat__audio_recorder__pause-recording-button', "data-testid": 'pause-recording-audio-button', onClick: recorder.pause },
                     React__default["default"].createElement(PauseIcon, null))),
-                recordingState === exports.MediaRecordingState.STOPPED ? (React__default["default"].createElement("button", { className: 'str-chat__audio_recorder__complete-button', "data-testid": 'audio-recorder-complete-button', disabled: isUploadingFile, onClick: completeRecording }, isUploadingFile ? React__default["default"].createElement(LoadingIndicatorIcon, null) : React__default["default"].createElement(SendIconV2, null))) : (React__default["default"].createElement("button", { className: 'str-chat__audio_recorder__stop-button', "data-testid": 'audio-recorder-stop-button', onClick: recorder.stop },
+                state.stopped ? (React__default["default"].createElement("button", { className: 'str-chat__audio_recorder__complete-button', "data-testid": 'audio-recorder-complete-button', disabled: isUploadingFile, onClick: completeRecording }, isUploadingFile ? React__default["default"].createElement(LoadingIndicatorIcon, null) : React__default["default"].createElement(SendIconV2, null))) : (React__default["default"].createElement("button", { className: 'str-chat__audio_recorder__stop-button', "data-testid": 'audio-recorder-stop-button', onClick: recorder.stop },
                     React__default["default"].createElement(CheckSignIcon, null))))));
     };
 
@@ -66588,7 +66597,7 @@ bitsperframe:             %d
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var UnMemoizedReactionSelector = React__default["default"].forwardRef(function (props, ref) {
         var _a;
-        var propAvatar = props.Avatar, _b = props.detailedView, detailedView = _b === void 0 ? true : _b, propHandleReaction = props.handleReaction, propLatestReactions = props.latest_reactions, propOwnReactions = props.own_reactions, propReactionCounts = props.reaction_counts, propReactionOptions = props.reactionOptions, _c = props.reverse, reverse = _c === void 0 ? false : _c;
+        var propAvatar = props.Avatar, _b = props.detailedView, detailedView = _b === void 0 ? true : _b, propHandleReaction = props.handleReaction, propLatestReactions = props.latest_reactions, propOwnReactions = props.own_reactions, propReactionGroups = props.reaction_groups, propReactionOptions = props.reactionOptions, _c = props.reverse, reverse = _c === void 0 ? false : _c;
         var _d = useComponentContext('ReactionSelector'), contextAvatar = _d.Avatar, contextReactionOptions = _d.reactionOptions;
         var _e = useMessageContext('ReactionSelector'), contextHandleReaction = _e.handleReaction, message = _e.message;
         var reactionOptions = propReactionOptions !== null && propReactionOptions !== void 0 ? propReactionOptions : contextReactionOptions;
@@ -66596,7 +66605,7 @@ bitsperframe:             %d
         var handleReaction = propHandleReaction || contextHandleReaction;
         var latestReactions = propLatestReactions || (message === null || message === void 0 ? void 0 : message.latest_reactions) || [];
         var ownReactions = propOwnReactions || (message === null || message === void 0 ? void 0 : message.own_reactions) || [];
-        var reactionCounts = propReactionCounts || (message === null || message === void 0 ? void 0 : message.reaction_counts) || {};
+        var reactionGroups = propReactionGroups || (message === null || message === void 0 ? void 0 : message.reaction_groups) || {};
         var _f = React$2.useState(null), tooltipReactionType = _f[0], setTooltipReactionType = _f[1];
         var _g = React$2.useState(null), tooltipPositions = _g[0], setTooltipPositions = _g[1];
         var targetRef = React$2.useRef(null);
@@ -66656,9 +66665,10 @@ bitsperframe:             %d
                 React__default["default"].createElement("div", { className: 'arrow', style: { left: tooltipPositions === null || tooltipPositions === void 0 ? void 0 : tooltipPositions.arrow } }), (_a = getUsersPerReactionType(tooltipReactionType)) === null || _a === void 0 ? void 0 :
                 _a.map(function (user, i, users) { return (React__default["default"].createElement("span", { className: 'latest-user-username', key: "key-".concat(i, "-").concat(user) }, "".concat(user).concat(i < users.length - 1 ? ', ' : ''))); }))),
             React__default["default"].createElement("ul", { className: 'str-chat__message-reactions-list str-chat__message-reactions-options' }, reactionOptions.map(function (_a) {
+                var _b, _c;
                 var Component = _a.Component, reactionName = _a.name, reactionType = _a.type;
                 var latestUser = getLatestUserForReactionType(reactionType);
-                var count = reactionCounts && reactionCounts[reactionType];
+                var count = (_c = (_b = reactionGroups[reactionType]) === null || _b === void 0 ? void 0 : _b.count) !== null && _c !== void 0 ? _c : 0;
                 return (React__default["default"].createElement("li", { key: reactionType },
                     React__default["default"].createElement("button", { "aria-label": "Select Reaction: ".concat(reactionName || reactionType), className: clsx('str-chat__message-reactions-list-item str-chat__message-reactions-option', {
                             'str-chat__message-reactions-option-selected': iHaveReactedWithReaction(reactionType),
@@ -66675,18 +66685,21 @@ bitsperframe:             %d
     var ReactionSelector = React__default["default"].memo(UnMemoizedReactionSelector);
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var defaultReactionsSort = function (a, b) {
+        if (a.firstReactionAt && b.firstReactionAt) {
+            return +a.firstReactionAt - +b.firstReactionAt;
+        }
         return a.reactionType.localeCompare(b.reactionType, 'en');
     };
     var useProcessReactions = function (params) {
         var _a;
-        var propOwnReactions = params.own_reactions, propReactionCounts = params.reaction_counts, propReactionOptions = params.reactionOptions, propReactions = params.reactions, propSortReactions = params.sortReactions;
+        var propOwnReactions = params.own_reactions, propReactionGroups = params.reaction_groups, propReactionOptions = params.reactionOptions, propReactions = params.reactions, propSortReactions = params.sortReactions;
         var _b = useMessageContext('useProcessReactions'), message = _b.message, contextSortReactions = _b.sortReactions;
         var contextReactionOptions = useComponentContext('useProcessReactions').reactionOptions;
         var reactionOptions = propReactionOptions !== null && propReactionOptions !== void 0 ? propReactionOptions : contextReactionOptions;
         var sortReactions = (_a = propSortReactions !== null && propSortReactions !== void 0 ? propSortReactions : contextSortReactions) !== null && _a !== void 0 ? _a : defaultReactionsSort;
         var latestReactions = propReactions || message.latest_reactions;
         var ownReactions = propOwnReactions || (message === null || message === void 0 ? void 0 : message.own_reactions);
-        var reactionCounts = propReactionCounts || message.reaction_counts;
+        var reactionGroups = propReactionGroups || (message === null || message === void 0 ? void 0 : message.reaction_groups);
         var isOwnReaction = React$2.useCallback(function (reactionType) { var _a; return (_a = ownReactions === null || ownReactions === void 0 ? void 0 : ownReactions.some(function (reaction) { return reaction.type === reactionType; })) !== null && _a !== void 0 ? _a : false; }, [ownReactions]);
         var getEmojiByReactionType = React$2.useCallback(function (reactionType) { var _a, _b; return (_b = (_a = reactionOptions.find(function (_a) {
             var type = _a.type;
@@ -66707,21 +66720,25 @@ bitsperframe:             %d
             })) !== null && _a !== void 0 ? _a : [];
         }, [latestReactions]);
         var existingReactions = React$2.useMemo(function () {
-            if (!reactionCounts) {
+            if (!reactionGroups) {
                 return [];
             }
-            var unsortedReactions = Object.entries(reactionCounts).flatMap(function (_a) {
-                var reactionType = _a[0], reactionCount = _a[1];
-                if (reactionCount === 0 || !isSupportedReaction(reactionType)) {
+            var unsortedReactions = Object.entries(reactionGroups).flatMap(function (_a) {
+                var reactionType = _a[0], _b = _a[1], count = _b.count, first_reaction_at = _b.first_reaction_at, last_reaction_at = _b.last_reaction_at;
+                if (count === 0 || !isSupportedReaction(reactionType)) {
                     return [];
                 }
+                var latestReactedUserNames = getLatestReactedUserNames(reactionType);
                 return [
                     {
                         EmojiComponent: getEmojiByReactionType(reactionType),
+                        firstReactionAt: first_reaction_at ? new Date(first_reaction_at) : null,
                         isOwnReaction: isOwnReaction(reactionType),
-                        latestReactedUserNames: getLatestReactedUserNames(reactionType),
-                        reactionCount: reactionCount,
+                        lastReactionAt: last_reaction_at ? new Date(last_reaction_at) : null,
+                        latestReactedUserNames: latestReactedUserNames,
+                        reactionCount: count,
                         reactionType: reactionType,
+                        unlistedReactedUserCount: count - latestReactedUserNames.length,
                     },
                 ];
             });
@@ -66731,7 +66748,7 @@ bitsperframe:             %d
             getLatestReactedUserNames,
             isOwnReaction,
             isSupportedReaction,
-            reactionCounts,
+            reactionGroups,
             sortReactions,
         ]);
         var hasReactions = existingReactions.length > 0;
@@ -67185,25 +67202,32 @@ bitsperframe:             %d
         var client = useChatContext('useReactionHandler').client;
         var createMessagePreview = React$2.useCallback(function (add, reaction, message) {
             var _a, _b;
-            var newReactionCounts = (message === null || message === void 0 ? void 0 : message.reaction_counts) || {};
+            var newReactionGroups = (message === null || message === void 0 ? void 0 : message.reaction_groups) || {};
             var reactionType = reaction.type;
-            var hasReaction = !!newReactionCounts[reactionType];
+            var hasReaction = !!newReactionGroups[reactionType];
             if (add) {
-                newReactionCounts[reactionType] = hasReaction ? newReactionCounts[reactionType] + 1 : 1;
+                var timestamp = new Date().toISOString();
+                newReactionGroups[reactionType] = hasReaction
+                    ? __assign(__assign({}, newReactionGroups[reactionType]), { count: newReactionGroups[reactionType].count + 1 }) : {
+                    count: 1,
+                    first_reaction_at: timestamp,
+                    last_reaction_at: timestamp,
+                    sum_scores: 1,
+                };
             }
             else {
-                if (hasReaction && newReactionCounts[reactionType] > 1) {
-                    newReactionCounts[reactionType]--;
+                if (hasReaction && newReactionGroups[reactionType].count > 1) {
+                    newReactionGroups[reactionType] = __assign(__assign({}, newReactionGroups[reactionType]), { count: newReactionGroups[reactionType].count - 1 });
                 }
                 else {
-                    delete newReactionCounts[reactionType];
+                    delete newReactionGroups[reactionType];
                 }
             }
             var newReactions = add
                 ? __spreadArray([reaction], ((message === null || message === void 0 ? void 0 : message.latest_reactions) || []), true) : (_a = message.latest_reactions) === null || _a === void 0 ? void 0 : _a.filter(function (item) { return !(item.type === reaction.type && item.user_id === reaction.user_id); });
             var newOwnReactions = add
                 ? __spreadArray([reaction], ((message === null || message === void 0 ? void 0 : message.own_reactions) || []), true) : (_b = message === null || message === void 0 ? void 0 : message.own_reactions) === null || _b === void 0 ? void 0 : _b.filter(function (item) { return item.type !== reaction.type; });
-            return __assign(__assign({}, message), { latest_reactions: newReactions || message.latest_reactions, own_reactions: newOwnReactions, reaction_counts: newReactionCounts, reaction_scores: newReactionCounts });
+            return __assign(__assign({}, message), { latest_reactions: newReactions || message.latest_reactions, own_reactions: newOwnReactions, reaction_groups: newReactionGroups });
         }, 
         // eslint-disable-next-line react-hooks/exhaustive-deps
         [client.user, client.userID]);
@@ -68022,7 +68046,7 @@ bitsperframe:             %d
             ((_c = message.user) === null || _c === void 0 ? void 0 : _c.id) !== ((_d = previousMessage.user) === null || _d === void 0 ? void 0 : _d.id) ||
             previousMessage.type === 'error' ||
             previousMessage.deleted_at ||
-            (message.reaction_counts && Object.keys(message.reaction_counts).length > 0) ||
+            (message.reaction_groups && Object.keys(message.reaction_groups).length > 0) ||
             isMessageEdited(previousMessage);
         var isBottomMessage = !nextMessage ||
             nextMessage.customType === CUSTOM_MESSAGE_TYPE.date ||
@@ -68032,7 +68056,7 @@ bitsperframe:             %d
             ((_f = message.user) === null || _f === void 0 ? void 0 : _f.id) !== ((_g = nextMessage.user) === null || _g === void 0 ? void 0 : _g.id) ||
             nextMessage.type === 'error' ||
             nextMessage.deleted_at ||
-            (nextMessage.reaction_counts && Object.keys(nextMessage.reaction_counts).length > 0) ||
+            (nextMessage.reaction_groups && Object.keys(nextMessage.reaction_groups).length > 0) ||
             isMessageEdited(message);
         if (!isTopMessage && !isBottomMessage) {
             if (message.deleted_at || message.type === 'error')
@@ -73280,7 +73304,7 @@ bitsperframe:             %d
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
 
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var version$1 = '11.15.2';
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var version$1 = '11.16.0';
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var useChat = function (_a) {
         var _b, _c;