stream-chat-react 11.15.2 → 11.16.0

package/dist/components/Attachment/hooks/useAudioController.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAudioController.d.ts","sourceRoot":"","sources":["../../../../src/components/Attachment/hooks/useAudioController.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,gBAAgB,iBAAkB,gBAAgB,GAAG,IAAI,mBACR,CAAC;AAM/D,MAAM,MAAM,MAAM,GAAG,CAAC,MAAM,EAAE;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,aAAa,EAAE,cAAc,CAAA;CAAE,KAAK,IAAI,CAAC;AAE1F,KAAK,qBAAqB,GAAG;IAC3B,iCAAiC;IACjC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oJAAoJ;IACpJ,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uGAAuG;IACvG,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,kBAAkB,mDAI5B,qBAAqB;;;;;;;;;;;CA8HvB,CAAC"}
+{"version":3,"file":"useAudioController.d.ts","sourceRoot":"","sources":["../../../../src/components/Attachment/hooks/useAudioController.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,gBAAgB,iBAAkB,gBAAgB,GAAG,IAAI,mBACR,CAAC;AAM/D,MAAM,MAAM,MAAM,GAAG,CAAC,MAAM,EAAE;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,aAAa,EAAE,cAAc,CAAA;CAAE,KAAK,IAAI,CAAC;AAE1F,KAAK,qBAAqB,GAAG;IAC3B,iCAAiC;IACjC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oJAAoJ;IACpJ,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uGAAuG;IACvG,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,kBAAkB,mDAI5B,qBAAqB;;;;;;;;;;;CA+HvB,CAAC"}

package/dist/components/Attachment/hooks/useAudioController.js

@@ -50,6 +50,7 @@ export var useAudioController = function (_a) {
                             return;
                         try {
                             audioRef.current.pause();
+                            setIsPlaying(false);
                         }
                         catch (e) {
                             registerError(new Error(t('Failed to play the recording')));

package/dist/components/Emojis/index.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Window = require('../../Window-847d5d88.js');
+var Window = require('../../Window-996f3be8.js');
 var React = require('react');
 var Picker = require('@emoji-mart/react');
 require('dayjs');

package/dist/components/MediaRecorder/AudioRecorder/AudioRecorder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AudioRecorder.d.ts","sourceRoot":"","sources":["../../../../src/components/MediaRecorder/AudioRecorder/AudioRecorder.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,eAAO,MAAM,aAAa,gCAoEzB,CAAC"}
+{"version":3,"file":"AudioRecorder.d.ts","sourceRoot":"","sources":["../../../../src/components/MediaRecorder/AudioRecorder/AudioRecorder.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAcvC,eAAO,MAAM,aAAa,gCA+EzB,CAAC"}

package/dist/components/MediaRecorder/AudioRecorder/AudioRecorder.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { AudioRecordingPreview } from './AudioRecordingPreview';
 import { AudioRecordingInProgress } from './AudioRecordingInProgress';
 import { MediaRecordingState } from '../classes';
@@ -8,17 +8,22 @@ export 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 = useMemo(function () { return ({
+        paused: recordingState === MediaRecordingState.PAUSED,
+        recording: recordingState === MediaRecordingState.RECORDING,
+        stopped: recordingState === MediaRecordingState.STOPPED,
+    }); }, [recordingState]);
     if (!recorder)
         return null;
     return (React.createElement("div", { className: 'str-chat__audio_recorder-container' },
         React.createElement("div", { className: 'str-chat__audio_recorder', "data-testid": 'audio-recorder' },
-            React.createElement("button", { className: 'str-chat__audio_recorder__cancel-button', disabled: isUploadingFile, onClick: recorder.cancel },
+            React.createElement("button", { className: 'str-chat__audio_recorder__cancel-button', "data-testid": 'cancel-recording-audio-button', disabled: isUploadingFile, onClick: recorder.cancel },
                 React.createElement(BinIcon, null)),
-            (recording === null || recording === void 0 ? void 0 : recording.asset_url) ? (React.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.createElement(AudioRecordingInProgress, null)),
-            recordingState === MediaRecordingState.PAUSED && (React.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.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.createElement(AudioRecordingInProgress, null)) : null,
+            state.paused && (React.createElement("button", { className: 'str-chat__audio_recorder__resume-recording-button', onClick: recorder.resume },
                 React.createElement(MicIcon, null))),
-            recordingState === MediaRecordingState.RECORDING && (React.createElement("button", { className: 'str-chat__audio_recorder__pause-recording-button', onClick: recorder.pause },
+            state.recording && (React.createElement("button", { className: 'str-chat__audio_recorder__pause-recording-button', "data-testid": 'pause-recording-audio-button', onClick: recorder.pause },
                 React.createElement(PauseIcon, null))),
-            recordingState === MediaRecordingState.STOPPED ? (React.createElement("button", { className: 'str-chat__audio_recorder__complete-button', "data-testid": 'audio-recorder-complete-button', disabled: isUploadingFile, onClick: completeRecording }, isUploadingFile ? React.createElement(LoadingIndicatorIcon, null) : React.createElement(SendIconV2, null))) : (React.createElement("button", { className: 'str-chat__audio_recorder__stop-button', "data-testid": 'audio-recorder-stop-button', onClick: recorder.stop },
+            state.stopped ? (React.createElement("button", { className: 'str-chat__audio_recorder__complete-button', "data-testid": 'audio-recorder-complete-button', disabled: isUploadingFile, onClick: completeRecording }, isUploadingFile ? React.createElement(LoadingIndicatorIcon, null) : React.createElement(SendIconV2, null))) : (React.createElement("button", { className: 'str-chat__audio_recorder__stop-button', "data-testid": 'audio-recorder-stop-button', onClick: recorder.stop },
                 React.createElement(CheckSignIcon, null))))));
 };

package/dist/components/MediaRecorder/AudioRecorder/AudioRecordingInProgress.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AudioRecordingInProgress.d.ts","sourceRoot":"","sources":["../../../../src/components/MediaRecorder/AudioRecorder/AudioRecordingInProgress.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AA4CnD,eAAO,MAAM,wBAAwB,yBA8BpC,CAAC"}
+{"version":3,"file":"AudioRecordingInProgress.d.ts","sourceRoot":"","sources":["../../../../src/components/MediaRecorder/AudioRecorder/AudioRecordingInProgress.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AA8CnD,eAAO,MAAM,wBAAwB,yBA6BpC,CAAC"}

package/dist/components/MediaRecorder/AudioRecorder/AudioRecordingInProgress.js

@@ -16,11 +16,12 @@ var AudioRecordingWaveform = function (_a) {
     }, [recorder]);
     if (!recorder)
         return null;
-    return (React.createElement("div", { className: 'str-chat__audio_recorder__waveform-box' }, amplitudes.slice(-maxDataPointsDrawn).map(function (amplitude, i) { return (React.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.createElement("div", { className: 'str-chat__waveform-box-container' },
+        React.createElement("div", { className: 'str-chat__audio_recorder__waveform-box' }, amplitudes.slice(-maxDataPointsDrawn).map(function (amplitude, i) { return (React.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%',
+            } })); }))));
 };
 export var AudioRecordingInProgress = function () {
     var _a = useTimeElapsed(), secondsElapsed = _a.secondsElapsed, startCounter = _a.startCounter, stopCounter = _a.stopCounter;
@@ -42,6 +43,5 @@ export var AudioRecordingInProgress = function () {
     }, [recorder, startCounter, stopCounter]);
     return (React.createElement(React.Fragment, null,
         React.createElement(RecordingTimer, { durationSeconds: secondsElapsed }),
-        React.createElement("div", { className: 'str-chat__waveform-box-container' },
-            React.createElement(AudioRecordingWaveform, null))));
+        React.createElement(AudioRecordingWaveform, null)));
 };

package/dist/components/MediaRecorder/AudioRecorder/AudioRecordingPreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AudioRecordingPreview.d.ts","sourceRoot":"","sources":["../../../../src/components/MediaRecorder/AudioRecorder/AudioRecordingPreview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,MAAM,yBAAyB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,GAAG;IACtE,eAAe,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,qBAAqB,0DAK/B,yBAAyB,sBAsB3B,CAAC"}
+{"version":3,"file":"AudioRecordingPreview.d.ts","sourceRoot":"","sources":["../../../../src/components/MediaRecorder/AudioRecorder/AudioRecordingPreview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,MAAM,yBAAyB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,GAAG;IACtE,eAAe,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,qBAAqB,0DAK/B,yBAAyB,sBA0B3B,CAAC"}

package/dist/components/MediaRecorder/AudioRecorder/AudioRecordingPreview.js

@@ -14,7 +14,7 @@ export var AudioRecordingPreview = function (_a) {
     return (React.createElement(React.Fragment, null,
         React.createElement("audio", { ref: audioRef },
             React.createElement("source", { src: props.src, type: mimeType })),
-        React.createElement("button", { className: 'str-chat__audio_recorder__toggle-playback-button', onClick: togglePlay }, isPlaying ? React.createElement(PauseIcon, null) : React.createElement(PlayIcon, null)),
+        React.createElement("button", { className: 'str-chat__audio_recorder__toggle-playback-button', "data-testid": 'audio-recording-preview-toggle-play-btn', onClick: togglePlay }, isPlaying ? React.createElement(PauseIcon, null) : React.createElement(PlayIcon, null)),
         React.createElement(RecordingTimer, { durationSeconds: displayedDuration }),
         React.createElement("div", { className: 'str-chat__wave-progress-bar__track-container' },
             React.createElement(WaveProgressBar, { progress: progress, seek: seek, waveformData: waveformData || [] }))));

package/dist/components/Message/hooks/useReactionHandler.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useReactionHandler.d.ts","sourceRoot":"","sources":["../../../../src/components/Message/hooks/useReactionHandler.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAA4C,MAAM,OAAO,CAAC;AAInF,OAAO,EAAE,aAAa,EAA0B,MAAM,sCAAsC,CAAC;AAG7F,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAIlD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAEtE,eAAO,MAAM,sBAAsB,4MACsF,CAAC;AAE1H,eAAO,MAAM,kBAAkB,gKAiFD,MAAM,UAAU,MAAM,kBAAkB,kBAmCrE,CAAC;AAEF,eAAO,MAAM,gBAAgB,oKAIL,UAAU,cAAc,GAAG,IAAI,CAAC,sBAClC,UAAU,cAAc,GAAG,IAAI,CAAC,iCACrB,OAAO;;;;CAyFvC,CAAC"}
+{"version":3,"file":"useReactionHandler.d.ts","sourceRoot":"","sources":["../../../../src/components/Message/hooks/useReactionHandler.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAA4C,MAAM,OAAO,CAAC;AAInF,OAAO,EAAE,aAAa,EAA0B,MAAM,sCAAsC,CAAC;AAG7F,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAIlD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAEtE,eAAO,MAAM,sBAAsB,4MACsF,CAAC;AAE1H,eAAO,MAAM,kBAAkB,gKA2FD,MAAM,UAAU,MAAM,kBAAkB,kBAmCrE,CAAC;AAEF,eAAO,MAAM,gBAAgB,oKAIL,UAAU,cAAc,GAAG,IAAI,CAAC,sBAClC,UAAU,cAAc,GAAG,IAAI,CAAC,iCACrB,OAAO;;;;CAyFvC,CAAC"}

package/dist/components/Message/hooks/useReactionHandler.js

@@ -11,25 +11,32 @@ export var useReactionHandler = function (message) {
     var client = useChatContext('useReactionHandler').client;
     var createMessagePreview = 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]);

package/dist/components/Message/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Message/utils.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AACnF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC5C,OAAO,KAAK,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACxE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE;;;GAGG;AACH,eAAO,MAAM,qBAAqB,8CACV,OAAO,2BAiB9B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,2LAUvB,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;CAU3B,CAAC;AAEF,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,KAAK,CAChE,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,CAAC,CAC9E,CAAC;AAGF,eAAO,MAAM,qBAAqB,EAAE,cAwDnC,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,iBAAiB,YACnB,mBAAmB,GAAG,OAAO,kGAWnC,YAAY,gCAmDhB,CAAC;AAEF,eAAO,MAAM,6BAA6B,UAKzC,CAAC;AAEF,eAAO,MAAM,qBAAqB,oDAErB,OAAO,GAAG,SAAS,YAsB/B,CAAC;AAmBF,eAAO,MAAM,oBAAoB;;;;;;aAsChC,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;aA+BlC,CAAC;AAEF,eAAO,MAAM,mBAAmB,wJAI6C,CAAC;AAE9E,eAAO,MAAM,qBAAqB,wJAIyB,CAAC;AAE5D,eAAO,MAAM,SAAS,yMASrB,CAAC;AAEF,eAAO,MAAM,sBAAsB,yMASlC,CAAC;AAEF,MAAM,WAAW,qBAAqB;IACpC,CAAC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,EAC/E,IAAI,EAAE,YAAY,CAAC,kBAAkB,CAAC,GACrC,MAAM,CAAC;CACX;AAED;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,EAAE,qBAAsD,CAAC;AAEvF,eAAO,MAAM,oBAAoB,mIAI5B,SAAS,iEAEW,qBAAqB,WAiD7C,CAAC;AAEF,eAAO,MAAM,YAAY,UAAW,MAAM,YAOzC,CAAC;AAEF,eAAO,MAAM,gBAAgB,gLAM4C,CAAC;AAE1E,eAAO,MAAM,eAAe,4KAIU,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Message/utils.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AACnF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC5C,OAAO,KAAK,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACxE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE;;;GAGG;AACH,eAAO,MAAM,qBAAqB,8CACV,OAAO,2BAiB9B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,2LAUvB,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;CAU3B,CAAC;AAEF,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,KAAK,CAChE,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,CAAC,CAC9E,CAAC;AAGF,eAAO,MAAM,qBAAqB,EAAE,cAwDnC,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,iBAAiB,YACnB,mBAAmB,GAAG,OAAO,kGAWnC,YAAY,gCAmDhB,CAAC;AAEF,eAAO,MAAM,6BAA6B,UAKzC,CAAC;AAEF,eAAO,MAAM,qBAAqB,oDAErB,OAAO,GAAG,SAAS,YAsB/B,CAAC;AAmBF,eAAO,MAAM,oBAAoB;;;;;;aAsChC,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;aA+BlC,CAAC;AAEF,eAAO,MAAM,mBAAmB,wJAIiD,CAAC;AAElF,eAAO,MAAM,qBAAqB,wJAIyB,CAAC;AAE5D,eAAO,MAAM,SAAS,yMASrB,CAAC;AAEF,eAAO,MAAM,sBAAsB,yMASlC,CAAC;AAEF,MAAM,WAAW,qBAAqB;IACpC,CAAC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,EAC/E,IAAI,EAAE,YAAY,CAAC,kBAAkB,CAAC,GACrC,MAAM,CAAC;CACX;AAED;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,EAAE,qBAAsD,CAAC;AAEvF,eAAO,MAAM,oBAAoB,mIAI5B,SAAS,iEAEW,qBAAqB,WAiD7C,CAAC;AAEF,eAAO,MAAM,YAAY,UAAW,MAAM,YAOzC,CAAC;AAEF,eAAO,MAAM,gBAAgB,gLAM4C,CAAC;AAE1E,eAAO,MAAM,eAAe,4KAIU,CAAC"}

package/dist/components/Message/utils.js

@@ -222,7 +222,10 @@ export var areMessageUIPropsEqual = function (prevProps, nextProps) {
     }
     return areMessagesEqual(prevMessage, nextMessage);
 };
-export 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; }); };
+export 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;
+}); };
 export var messageHasAttachments = function (message) { return !!(message === null || message === void 0 ? void 0 : message.attachments) && !!message.attachments.length; };
 export var getImages = function (message) {
     if (!(message === null || message === void 0 ? void 0 : message.attachments)) {

package/dist/components/MessageInput/icons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/MessageInput/icons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAKvC,eAAO,MAAM,cAAc,yBAW1B,CAAC;AAEF,eAAO,MAAM,cAAc,yBAW1B,CAAC;AAGF,eAAO,MAAM,eAAe,yBAW3B,CAAC;AAEF,eAAO,MAAM,cAAc,yBAY1B,CAAC;AAEF,eAAO,MAAM,kBAAkB,yBAY9B,CAAC;AAEF,eAAO,MAAM,oBAAoB;;uBA0BhC,CAAC;AAGF,eAAO,MAAM,UAAU,yBAqBtB,CAAC;AAEF,eAAO,MAAM,SAAS,yBAcrB,CAAC;AAEF,eAAO,MAAM,SAAS,yBAcrB,CAAC;AAEF,eAAO,MAAM,YAAY,yBAcxB,CAAC;AAEF,eAAO,MAAM,QAAQ,yBASpB,CAAC;AAEF,eAAO,MAAM,UAAU,yBAYtB,CAAC;AAEF,eAAO,MAAM,UAAU,yBAetB,CAAC;AAEF,eAAO,MAAM,OAAO,yBAKnB,CAAC;AAEF,eAAO,MAAM,OAAO,yBAInB,CAAC;AAEF,eAAO,MAAM,SAAS,yBAIrB,CAAC;AAEF,eAAO,MAAM,QAAQ,yBAIpB,CAAC;AAEF,eAAO,MAAM,aAAa,yBAIzB,CAAC"}
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/MessageInput/icons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAKvC,eAAO,MAAM,cAAc,yBAW1B,CAAC;AAEF,eAAO,MAAM,cAAc,yBAW1B,CAAC;AAGF,eAAO,MAAM,eAAe,yBAW3B,CAAC;AAEF,eAAO,MAAM,cAAc,yBAY1B,CAAC;AAEF,eAAO,MAAM,kBAAkB,yBAY9B,CAAC;AAEF,eAAO,MAAM,oBAAoB;;uBA0BhC,CAAC;AAGF,eAAO,MAAM,UAAU,yBAqBtB,CAAC;AAEF,eAAO,MAAM,SAAS,yBAcrB,CAAC;AAEF,eAAO,MAAM,SAAS,yBAcrB,CAAC;AAEF,eAAO,MAAM,YAAY,yBAcxB,CAAC;AAEF,eAAO,MAAM,QAAQ,yBASpB,CAAC;AAEF,eAAO,MAAM,UAAU,yBAYtB,CAAC;AAEF,eAAO,MAAM,UAAU,yBAetB,CAAC;AAEF,eAAO,MAAM,OAAO,yBAKnB,CAAC;AAEF,eAAO,MAAM,OAAO,yBAInB,CAAC;AAEF,eAAO,MAAM,SAAS,yBASrB,CAAC;AAEF,eAAO,MAAM,QAAQ,yBASpB,CAAC;AAEF,eAAO,MAAM,aAAa,yBAIzB,CAAC"}

package/dist/components/MessageInput/icons.js

@@ -74,9 +74,9 @@ export var MicIcon = function () { return (React.createElement("svg", { fill: 'c
     React.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' }))); };
 export var BinIcon = function () { return (React.createElement("svg", { fill: 'currentColor', viewBox: '0 0 32 32', xmlns: 'http://www.w3.org/2000/svg' },
     React.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' }))); };
-export var PauseIcon = function () { return (React.createElement("svg", { fill: 'currentColor', viewBox: '0 0 16 20', xmlns: 'http://www.w3.org/2000/svg' },
+export var PauseIcon = function () { return (React.createElement("svg", { "data-testid": 'str-chat__pause-icon', fill: 'currentColor', viewBox: '0 0 16 20', xmlns: 'http://www.w3.org/2000/svg' },
     React.createElement("path", { d: 'M0 19.3333H5.33333V0.666626H0V19.3333ZM10.6667 0.666626V19.3333H16V0.666626H10.6667Z' }))); };
-export var PlayIcon = function () { return (React.createElement("svg", { fill: 'currentColor', viewBox: '0 0 14 18', xmlns: 'http://www.w3.org/2000/svg' },
+export var PlayIcon = function () { return (React.createElement("svg", { "data-testid": 'str-chat__play-icon', fill: 'currentColor', viewBox: '0 0 14 18', xmlns: 'http://www.w3.org/2000/svg' },
     React.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' }))); };
 export var CheckSignIcon = function () { return (React.createElement("svg", { fill: 'currentColor', viewBox: '0 0 18 14', xmlns: 'http://www.w3.org/2000/svg' },
     React.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' }))); };

package/dist/components/MessageList/utils.js

@@ -188,7 +188,7 @@ export var getGroupStyles = function (message, previousMessage, nextMessage, noG
         ((_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 ||
@@ -198,7 +198,7 @@ export var getGroupStyles = function (message, previousMessage, nextMessage, noG
         ((_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/components/Reactions/ReactionSelector.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { AvatarProps } from '../Avatar';
-import type { ReactionResponse } from 'stream-chat';
+import type { ReactionGroupResponse, ReactionResponse } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import type { ReactionOptions } from './reactionOptions';
 export type ReactionSelectorProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
@@ -14,8 +14,13 @@ export type ReactionSelectorProps<StreamChatGenerics extends DefaultStreamChatGe
     latest_reactions?: ReactionResponse<StreamChatGenerics>[];
     /** An array of the own reaction objects to distinguish own reactions visually */
     own_reactions?: ReactionResponse<StreamChatGenerics>[];
-    /** An object that keeps track of the count of each type of reaction on a message */
+    /**
+     * An object that keeps track of the count of each type of reaction on a message
+     * @deprecated This override value is no longer taken into account. Use `reaction_groups` to override reaction counts instead.
+     * */
     reaction_counts?: Record<string, number>;
+    /** An object containing summary for each reaction type on a message */
+    reaction_groups?: Record<string, ReactionGroupResponse>;
     /** A list of the currently supported reactions on a message */
     reactionOptions?: ReactionOptions;
     /** If true, adds a CSS class that reverses the horizontal positioning of the selector */

package/dist/components/Reactions/ReactionSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReactionSelector.d.ts","sourceRoot":"","sources":["../../../src/components/Reactions/ReactionSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAKxE,OAAO,EAAE,WAAW,EAA2B,MAAM,WAAW,CAAC;AAKjE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAEpD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEzD,MAAM,MAAM,qBAAqB,CAC/B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,+LAA+L;IAC/L,MAAM,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;IACxC,yDAAyD;IACzD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,6GAA6G;IAC7G,cAAc,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,kBAAkB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1F,8DAA8D;IAC9D,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,EAAE,CAAC;IAC1D,iFAAiF;IACjF,aAAa,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,EAAE,CAAC;IACvD,oFAAoF;IACpF,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzC,+DAA+D;IAC/D,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,yFAAyF;IACzF,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAkLF;;GAEG;AACH,eAAO,MAAM,gBAAgB,gIAES,CAAC"}
+{"version":3,"file":"ReactionSelector.d.ts","sourceRoot":"","sources":["../../../src/components/Reactions/ReactionSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAKxE,OAAO,EAAE,WAAW,EAA2B,MAAM,WAAW,CAAC;AAKjE,OAAO,KAAK,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE3E,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEzD,MAAM,MAAM,qBAAqB,CAC/B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,+LAA+L;IAC/L,MAAM,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;IACxC,yDAAyD;IACzD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,6GAA6G;IAC7G,cAAc,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,kBAAkB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1F,8DAA8D;IAC9D,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,EAAE,CAAC;IAC1D,iFAAiF;IACjF,aAAa,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,EAAE,CAAC;IACvD;;;SAGK;IACL,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzC,uEAAuE;IACvE,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,qBAAqB,CAAC,CAAC;IACxD,+DAA+D;IAC/D,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,yFAAyF;IACzF,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAkLF;;GAEG;AACH,eAAO,MAAM,gBAAgB,gIAES,CAAC"}

package/dist/components/Reactions/ReactionSelector.js

@@ -6,7 +6,7 @@ import { useComponentContext } from '../../context/ComponentContext';
 import { useMessageContext } from '../../context/MessageContext';
 var UnMemoizedReactionSelector = React.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;
@@ -14,7 +14,7 @@ var UnMemoizedReactionSelector = React.forwardRef(function (props, ref) {
     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 = useState(null), tooltipReactionType = _f[0], setTooltipReactionType = _f[1];
     var _g = useState(null), tooltipPositions = _g[0], setTooltipPositions = _g[1];
     var targetRef = useRef(null);
@@ -74,9 +74,10 @@ var UnMemoizedReactionSelector = React.forwardRef(function (props, ref) {
             React.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.createElement("span", { className: 'latest-user-username', key: "key-".concat(i, "-").concat(user) }, "".concat(user).concat(i < users.length - 1 ? ', ' : ''))); }))),
         React.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.createElement("li", { key: reactionType },
                 React.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),

package/dist/components/Reactions/ReactionsList.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ReactionResponse } from 'stream-chat';
+import type { ReactionGroupResponse, ReactionResponse } from 'stream-chat';
 import type { ReactEventHandler } from '../Message/types';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import type { ReactionOptions } from './reactionOptions';
@@ -10,8 +10,13 @@ export type ReactionsListProps<StreamChatGenerics extends DefaultStreamChatGener
     onClick?: ReactEventHandler;
     /** An array of the own reaction objects to distinguish own reactions visually */
     own_reactions?: ReactionResponse<StreamChatGenerics>[];
-    /** An object that keeps track of the count of each type of reaction on a message */
+    /**
+     * An object that keeps track of the count of each type of reaction on a message
+     * @deprecated This override value is no longer taken into account. Use `reaction_groups` to override reaction counts instead.
+     * */
     reaction_counts?: Record<string, number>;
+    /** An object containing summary for each reaction type on a message */
+    reaction_groups?: Record<string, ReactionGroupResponse>;
     /** A list of the currently supported reactions on a message */
     reactionOptions?: ReactionOptions;
     /** An array of the reaction objects to display in the list */

package/dist/components/Reactions/ReactionsList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReactionsList.d.ts","sourceRoot":"","sources":["../../../src/components/Reactions/ReactionsList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAIpD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,KAAK,EAAE,yBAAyB,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAE9E,OAAO,EAAE,mBAAmB,EAAyB,MAAM,eAAe,CAAC;AAG3E,MAAM,MAAM,kBAAkB,CAC5B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,OAAO,CAAC,IAAI,CAAC,mBAAmB,CAAC,kBAAkB,CAAC,EAAE,sBAAsB,CAAC,CAAC,GAAG;IACnF,sHAAsH;IACtH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,iFAAiF;IACjF,aAAa,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,EAAE,CAAC;IACvD,oFAAoF;IACpF,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzC,+DAA+D;IAC/D,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,8DAA8D;IAC9D,SAAS,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,EAAE,CAAC;IACnD,4EAA4E;IAC5E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4FAA4F;IAC5F,mBAAmB,CAAC,EAAE,yBAAyB,CAAC;IAChD,4EAA4E;IAC5E,aAAa,CAAC,EAAE,mBAAmB,CAAC;CACrC,CAAC;AAgFF;;GAEG;AACH,eAAO,MAAM,aAAa,+JAAwE,CAAC"}
+{"version":3,"file":"ReactionsList.d.ts","sourceRoot":"","sources":["../../../src/components/Reactions/ReactionsList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,KAAK,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAI3E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,KAAK,EAAE,yBAAyB,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAE9E,OAAO,EAAE,mBAAmB,EAAyB,MAAM,eAAe,CAAC;AAG3E,MAAM,MAAM,kBAAkB,CAC5B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,OAAO,CAAC,IAAI,CAAC,mBAAmB,CAAC,kBAAkB,CAAC,EAAE,sBAAsB,CAAC,CAAC,GAAG;IACnF,sHAAsH;IACtH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,iFAAiF;IACjF,aAAa,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,EAAE,CAAC;IACvD;;;SAGK;IACL,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzC,uEAAuE;IACvE,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,qBAAqB,CAAC,CAAC;IACxD,+DAA+D;IAC/D,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,8DAA8D;IAC9D,SAAS,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,EAAE,CAAC;IACnD,4EAA4E;IAC5E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4FAA4F;IAC5F,mBAAmB,CAAC,EAAE,yBAAyB,CAAC;IAChD,4EAA4E;IAC5E,aAAa,CAAC,EAAE,mBAAmB,CAAC;CACrC,CAAC;AAgFF;;GAEG;AACH,eAAO,MAAM,aAAa,+JAAwE,CAAC"}

package/dist/components/Reactions/SimpleReactionsList.d.ts

@@ -1,15 +1,18 @@
 import React from 'react';
-import type { ReactionResponse } from 'stream-chat';
+import type { ReactionGroupResponse, ReactionResponse } from 'stream-chat';
 import { MessageContextValue } from '../../context/MessageContext';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import type { ReactionOptions } from './reactionOptions';
 export type SimpleReactionsListProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Partial<Pick<MessageContextValue, 'handleFetchReactions' | 'handleReaction'>> & {
     /** An array of the own reaction objects to distinguish own reactions visually */
     own_reactions?: ReactionResponse<StreamChatGenerics>[];
-    /** An object that keeps track of the count of each type of reaction on a message */
-    reaction_counts?: {
-        [key: string]: number;
-    };
+    /**
+     * An object that keeps track of the count of each type of reaction on a message
+     * @deprecated This override value is no longer taken into account. Use `reaction_groups` to override reaction counts instead.
+     * */
+    reaction_counts?: Record<string, number>;
+    /** An object containing summary for each reaction type on a message */
+    reaction_groups?: Record<string, ReactionGroupResponse>;
     /** A list of the currently supported reactions on a message */
     reactionOptions?: ReactionOptions;
     /** An array of the reaction objects to display in the list */

package/dist/components/Reactions/SimpleReactionsList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SimpleReactionsList.d.ts","sourceRoot":"","sources":["../../../src/components/Reactions/SimpleReactionsList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAG3D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAGpD,OAAO,EAAE,mBAAmB,EAAqB,MAAM,8BAA8B,CAAC;AAKtF,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAoCzD,MAAM,MAAM,wBAAwB,CAClC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,OAAO,CAAC,IAAI,CAAC,mBAAmB,EAAE,sBAAsB,GAAG,gBAAgB,CAAC,CAAC,GAAG;IAClF,iFAAiF;IACjF,aAAa,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,EAAE,CAAC;IACvD,oFAAoF;IACpF,eAAe,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAC5C,+DAA+D;IAC/D,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,8DAA8D;IAC9D,SAAS,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,EAAE,CAAC;CACpD,CAAC;AAyEF,eAAO,MAAM,mBAAmB,qKAES,CAAC"}
+{"version":3,"file":"SimpleReactionsList.d.ts","sourceRoot":"","sources":["../../../src/components/Reactions/SimpleReactionsList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAG3D,OAAO,KAAK,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAG3E,OAAO,EAAE,mBAAmB,EAAqB,MAAM,8BAA8B,CAAC;AAKtF,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAoCzD,MAAM,MAAM,wBAAwB,CAClC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,OAAO,CAAC,IAAI,CAAC,mBAAmB,EAAE,sBAAsB,GAAG,gBAAgB,CAAC,CAAC,GAAG;IAClF,iFAAiF;IACjF,aAAa,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,EAAE,CAAC;IACvD;;;SAGK;IACL,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzC,uEAAuE;IACvE,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,qBAAqB,CAAC,CAAC;IACxD,+DAA+D;IAC/D,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,8DAA8D;IAC9D,SAAS,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,EAAE,CAAC;CACpD,CAAC;AAyEF,eAAO,MAAM,mBAAmB,qKAES,CAAC"}

package/dist/components/Reactions/hooks/useProcessReactions.d.ts

@@ -1,7 +1,7 @@
 import type { ReactionsListProps } from '../ReactionsList';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 import type { ReactionsComparator, ReactionSummary } from '../types';
-type SharedReactionListProps = 'own_reactions' | 'reaction_counts' | 'reactionOptions' | 'reactions';
+type SharedReactionListProps = 'own_reactions' | 'reaction_counts' | 'reaction_groups' | 'reactionOptions' | 'reactions';
 type UseProcessReactionsParams = Pick<ReactionsListProps, SharedReactionListProps> & {
     sortReactions?: ReactionsComparator;
 };

package/dist/components/Reactions/hooks/useProcessReactions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useProcessReactions.d.ts","sourceRoot":"","sources":["../../../../src/components/Reactions/hooks/useProcessReactions.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AACtE,OAAO,KAAK,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAErE,KAAK,uBAAuB,GACxB,eAAe,GACf,iBAAiB,GACjB,iBAAiB,GACjB,WAAW,CAAC;AAEhB,KAAK,yBAAyB,GAAG,IAAI,CAAC,kBAAkB,EAAE,uBAAuB,CAAC,GAAG;IACnF,aAAa,CAAC,EAAE,mBAAmB,CAAC;CACrC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,mBACiB,CAAC;AAErD,eAAO,MAAM,mBAAmB,6FAGtB,yBAAyB;;;;CAiGlC,CAAC"}
+{"version":3,"file":"useProcessReactions.d.ts","sourceRoot":"","sources":["../../../../src/components/Reactions/hooks/useProcessReactions.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AACtE,OAAO,KAAK,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAErE,KAAK,uBAAuB,GACxB,eAAe,GACf,iBAAiB,GACjB,iBAAiB,GACjB,iBAAiB,GACjB,WAAW,CAAC;AAEhB,KAAK,yBAAyB,GAAG,IAAI,CAAC,kBAAkB,EAAE,uBAAuB,CAAC,GAAG;IACnF,aAAa,CAAC,EAAE,mBAAmB,CAAC;CACrC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,mBAMlC,CAAC;AAEF,eAAO,MAAM,mBAAmB,6FAGtB,yBAAyB;;;;CAsGlC,CAAC"}

package/dist/components/Reactions/hooks/useProcessReactions.js

@@ -1,18 +1,21 @@
 import { useCallback, useMemo } from 'react';
 import { useComponentContext, useMessageContext } from '../../../context';
 export var defaultReactionsSort = function (a, b) {
+    if (a.firstReactionAt && b.firstReactionAt) {
+        return +a.firstReactionAt - +b.firstReactionAt;
+    }
     return a.reactionType.localeCompare(b.reactionType, 'en');
 };
 export 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 = 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 = useCallback(function (reactionType) { var _a, _b; return (_b = (_a = reactionOptions.find(function (_a) {
         var type = _a.type;
@@ -33,21 +36,25 @@ export var useProcessReactions = function (params) {
         })) !== null && _a !== void 0 ? _a : [];
     }, [latestReactions]);
     var existingReactions = 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,
                 },
             ];
         });
@@ -57,7 +64,7 @@ export var useProcessReactions = function (params) {
         getLatestReactedUserNames,
         isOwnReaction,
         isSupportedReaction,
-        reactionCounts,
+        reactionGroups,
         sortReactions,
     ]);
     var hasReactions = existingReactions.length > 0;

package/dist/components/Reactions/types.d.ts

@@ -2,10 +2,13 @@ import type { ComponentType } from 'react';
 import type { ReactionResponse } from 'stream-chat';
 export interface ReactionSummary {
     EmojiComponent: ComponentType | null;
+    firstReactionAt: Date | null;
     isOwnReaction: boolean;
+    lastReactionAt: Date | null;
     latestReactedUserNames: string[];
     reactionCount: number;
     reactionType: string;
+    unlistedReactedUserCount: number;
 }
 export type ReactionsComparator = (a: ReactionSummary, b: ReactionSummary) => number;
 export type ReactionDetailsComparator = (a: ReactionResponse, b: ReactionResponse) => number;

package/dist/components/Reactions/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Reactions/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAEpD,MAAM,WAAW,eAAe;IAC9B,cAAc,EAAE,aAAa,GAAG,IAAI,CAAC;IACrC,aAAa,EAAE,OAAO,CAAC;IACvB,sBAAsB,EAAE,MAAM,EAAE,CAAC;IACjC,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,MAAM,mBAAmB,GAAG,CAAC,CAAC,EAAE,eAAe,EAAE,CAAC,EAAE,eAAe,KAAK,MAAM,CAAC;AAErF,MAAM,MAAM,yBAAyB,GAAG,CAAC,CAAC,EAAE,gBAAgB,EAAE,CAAC,EAAE,gBAAgB,KAAK,MAAM,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Reactions/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAEpD,MAAM,WAAW,eAAe;IAC9B,cAAc,EAAE,aAAa,GAAG,IAAI,CAAC;IACrC,eAAe,EAAE,IAAI,GAAG,IAAI,CAAC;IAC7B,aAAa,EAAE,OAAO,CAAC;IACvB,cAAc,EAAE,IAAI,GAAG,IAAI,CAAC;IAC5B,sBAAsB,EAAE,MAAM,EAAE,CAAC;IACjC,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,wBAAwB,EAAE,MAAM,CAAC;CAClC;AAED,MAAM,MAAM,mBAAmB,GAAG,CAAC,CAAC,EAAE,eAAe,EAAE,CAAC,EAAE,eAAe,KAAK,MAAM,CAAC;AAErF,MAAM,MAAM,yBAAyB,GAAG,CAAC,CAAC,EAAE,gBAAgB,EAAE,CAAC,EAAE,gBAAgB,KAAK,MAAM,CAAC"}

package/dist/index.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Window = require('./Window-847d5d88.js');
+var Window = require('./Window-996f3be8.js');
 var React = require('react');
 var streamChat = require('stream-chat');
 var throttle = require('lodash.throttle');
@@ -1344,7 +1344,7 @@ function VirtualizedMessageList(props) {
     return (React__default["default"].createElement(VirtualizedMessageListWithContext, Window.__assign({ channel: channel, channelUnreadUiState: channelUnreadUiState, hasMore: !!hasMore, hasMoreNewer: !!hasMoreNewer, highlightedMessageId: highlightedMessageId, jumpToLatestMessage: jumpToLatestMessage, loadingMore: !!loadingMore, loadingMoreNewer: !!loadingMoreNewer, loadMore: loadMore, loadMoreNewer: loadMoreNewer, messages: messages, notifications: notifications, read: read, suppressAutoscroll: suppressAutoscroll }, props)));
 }
 
-var version = '11.15.2';
+var version = '11.16.0';
 
 var useChat = function (_a) {
     var _b, _c;

package/dist/version.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "11.15.2";
+export declare const version = "11.16.0";
 //# sourceMappingURL=version.d.ts.map

package/dist/version.js

@@ -1 +1 @@
-export var version = '11.15.2';
+export var version = '11.16.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stream-chat-react",
-  "version": "11.15.2",
+  "version": "11.16.0",
   "description": "React components to create chat conversations or livestream style chat",
   "author": "GetStream",
   "homepage": "https://getstream.io/chat/",
@@ -104,7 +104,7 @@
     "emoji-mart": "^5.4.0",
     "react": "^18.0.0 || ^17.0.0 || ^16.8.0",
     "react-dom": "^18.0.0 || ^17.0.0 || ^16.8.0",
-    "stream-chat": "^8.21.0"
+    "stream-chat": "^8.30.0"
   },
   "peerDependenciesMeta": {
     "emoji-mart": {
@@ -226,7 +226,7 @@
     "rollup-plugin-url": "^3.0.1",
     "rollup-plugin-visualizer": "^4.2.0",
     "semantic-release": "^19.0.5",
-    "stream-chat": "^8.25.1",
+    "stream-chat": "^8.30.0",
     "style-loader": "^2.0.0",
     "ts-jest": "^28.0.8",
     "typescript": "^4.7.4",