stream-chat-react 11.15.2 → 11.16.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/dist/{Window-847d5d88.js → Window-9d319da4.js} +63 -37
  2. package/dist/browser.full-bundle.js +64 -38
  3. package/dist/browser.full-bundle.js.map +1 -1
  4. package/dist/browser.full-bundle.min.js +4 -4
  5. package/dist/browser.full-bundle.min.js.map +1 -1
  6. package/dist/components/Attachment/hooks/useAudioController.d.ts.map +1 -1
  7. package/dist/components/Attachment/hooks/useAudioController.js +1 -0
  8. package/dist/components/AutoCompleteTextarea/Textarea.d.ts.map +1 -1
  9. package/dist/components/AutoCompleteTextarea/Textarea.js +2 -0
  10. package/dist/components/Emojis/index.cjs.js +1 -1
  11. package/dist/components/MediaRecorder/AudioRecorder/AudioRecorder.d.ts.map +1 -1
  12. package/dist/components/MediaRecorder/AudioRecorder/AudioRecorder.js +11 -6
  13. package/dist/components/MediaRecorder/AudioRecorder/AudioRecordingInProgress.d.ts.map +1 -1
  14. package/dist/components/MediaRecorder/AudioRecorder/AudioRecordingInProgress.js +7 -7
  15. package/dist/components/MediaRecorder/AudioRecorder/AudioRecordingPreview.d.ts.map +1 -1
  16. package/dist/components/MediaRecorder/AudioRecorder/AudioRecordingPreview.js +1 -1
  17. package/dist/components/Message/hooks/useReactionHandler.d.ts.map +1 -1
  18. package/dist/components/Message/hooks/useReactionHandler.js +14 -7
  19. package/dist/components/Message/utils.d.ts.map +1 -1
  20. package/dist/components/Message/utils.js +4 -1
  21. package/dist/components/MessageInput/icons.d.ts.map +1 -1
  22. package/dist/components/MessageInput/icons.js +2 -2
  23. package/dist/components/MessageList/utils.js +2 -2
  24. package/dist/components/Reactions/ReactionSelector.d.ts +7 -2
  25. package/dist/components/Reactions/ReactionSelector.d.ts.map +1 -1
  26. package/dist/components/Reactions/ReactionSelector.js +4 -3
  27. package/dist/components/Reactions/ReactionsList.d.ts +7 -2
  28. package/dist/components/Reactions/ReactionsList.d.ts.map +1 -1
  29. package/dist/components/Reactions/SimpleReactionsList.d.ts +8 -5
  30. package/dist/components/Reactions/SimpleReactionsList.d.ts.map +1 -1
  31. package/dist/components/Reactions/hooks/useProcessReactions.d.ts +1 -1
  32. package/dist/components/Reactions/hooks/useProcessReactions.d.ts.map +1 -1
  33. package/dist/components/Reactions/hooks/useProcessReactions.js +16 -9
  34. package/dist/components/Reactions/types.d.ts +3 -0
  35. package/dist/components/Reactions/types.d.ts.map +1 -1
  36. package/dist/index.cjs.js +2 -2
  37. package/dist/version.d.ts +1 -1
  38. package/dist/version.js +1 -1
  39. package/package.json +3 -3
package/dist/{Window-847d5d88.js → Window-9d319da4.js} RENAMED
@@ -1549,6 +1549,7 @@ var useAudioController = function (_a) {
1549
1549
  return;
1550
1550
  try {
1551
1551
  audioRef.current.pause();
1552
+ setIsPlaying(false);
1552
1553
  }
1553
1554
  catch (e) {
1554
1555
  registerError(new Error(t('Failed to play the recording')));
@@ -33470,6 +33471,8 @@ class ReactTextareaAutocomplete extends React__default["default"].Component {
33470
33471
  if (!this.textareaRef) return;
33471
33472
  const trigger = this.state.currentTrigger;
33472
33473
  if (!trigger || !this.state.data) {
33474
+ // https://legacy.reactjs.org/docs/legacy-event-pooling.html
33475
+ event.persist();
33473
33476
  // trigger a submit
33474
33477
  await this._replaceWord();
33475
33478
  if (this.textareaRef) {
@@ -36853,7 +36856,10 @@ var areMessageUIPropsEqual = function (prevProps, nextProps) {
36853
36856
  }
36854
36857
  return areMessagesEqual(prevMessage, nextMessage);
36855
36858
  };
36856
- 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; }); };
36859
+ 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) {
36860
+ var count = _a.count;
36861
+ return count > 0;
36862
+ }); };
36857
36863
  var messageHasAttachments = function (message) { return !!(message === null || message === void 0 ? void 0 : message.attachments) && !!message.attachments.length; };
36858
36864
  var getImages = function (message) {
36859
36865
  if (!(message === null || message === void 0 ? void 0 : message.attachments)) {
@@ -39336,9 +39342,9 @@ var MicIcon = function () { return (React__default["default"].createElement("svg
39336
39342
  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' }))); };
39337
39343
  var BinIcon = function () { return (React__default["default"].createElement("svg", { fill: 'currentColor', viewBox: '0 0 32 32', xmlns: 'http://www.w3.org/2000/svg' },
39338
39344
  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' }))); };
39339
- var PauseIcon = function () { return (React__default["default"].createElement("svg", { fill: 'currentColor', viewBox: '0 0 16 20', xmlns: 'http://www.w3.org/2000/svg' },
39345
+ 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' },
39340
39346
  React__default["default"].createElement("path", { d: 'M0 19.3333H5.33333V0.666626H0V19.3333ZM10.6667 0.666626V19.3333H16V0.666626H10.6667Z' }))); };
39341
- var PlayIcon = function () { return (React__default["default"].createElement("svg", { fill: 'currentColor', viewBox: '0 0 14 18', xmlns: 'http://www.w3.org/2000/svg' },
39347
+ 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' },
39342
39348
  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' }))); };
39343
39349
  var CheckSignIcon = function () { return (React__default["default"].createElement("svg", { fill: 'currentColor', viewBox: '0 0 18 14', xmlns: 'http://www.w3.org/2000/svg' },
39344
39350
  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 +39386,7 @@ var AudioRecordingPreview = function (_a) {
39380
39386
  return (React__default["default"].createElement(React__default["default"].Fragment, null,
39381
39387
  React__default["default"].createElement("audio", { ref: audioRef },
39382
39388
  React__default["default"].createElement("source", { src: props.src, type: mimeType })),
39383
- 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)),
39389
+ 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)),
39384
39390
  React__default["default"].createElement(RecordingTimer, { durationSeconds: displayedDuration }),
39385
39391
  React__default["default"].createElement("div", { className: 'str-chat__wave-progress-bar__track-container' },
39386
39392
  React__default["default"].createElement(WaveProgressBar, { progress: progress, seek: seek, waveformData: waveformData || [] }))));
@@ -39430,11 +39436,12 @@ var AudioRecordingWaveform = function (_a) {
39430
39436
  }, [recorder]);
39431
39437
  if (!recorder)
39432
39438
  return null;
39433
- 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: {
39434
- '--str-chat__wave-progress-bar__amplitude-bar-height': amplitude
39435
- ? amplitude * 100 + '%'
39436
- : '0%',
39437
- } })); })));
39439
+ return (React__default["default"].createElement("div", { className: 'str-chat__waveform-box-container' },
39440
+ 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: {
39441
+ '--str-chat__wave-progress-bar__amplitude-bar-height': amplitude
39442
+ ? amplitude * 100 + '%'
39443
+ : '0%',
39444
+ } })); }))));
39438
39445
  };
39439
39446
  var AudioRecordingInProgress = function () {
39440
39447
  var _a = useTimeElapsed(), secondsElapsed = _a.secondsElapsed, startCounter = _a.startCounter, stopCounter = _a.stopCounter;
@@ -39456,8 +39463,7 @@ var AudioRecordingInProgress = function () {
39456
39463
  }, [recorder, startCounter, stopCounter]);
39457
39464
  return (React__default["default"].createElement(React__default["default"].Fragment, null,
39458
39465
  React__default["default"].createElement(RecordingTimer, { durationSeconds: secondsElapsed }),
39459
- React__default["default"].createElement("div", { className: 'str-chat__waveform-box-container' },
39460
- React__default["default"].createElement(AudioRecordingWaveform, null))));
39466
+ React__default["default"].createElement(AudioRecordingWaveform, null)));
39461
39467
  };
39462
39468
 
39463
39469
  var Subscription = /** @class */ (function () {
@@ -52450,18 +52456,23 @@ var AudioRecorder = function () {
52450
52456
  var _a, _b;
52451
52457
  var _c = useMessageInputContext().recordingController, completeRecording = _c.completeRecording, recorder = _c.recorder, recording = _c.recording, recordingState = _c.recordingState;
52452
52458
  var isUploadingFile = ((_a = recording === null || recording === void 0 ? void 0 : recording.$internal) === null || _a === void 0 ? void 0 : _a.uploadState) === 'uploading';
52459
+ var state = React.useMemo(function () { return ({
52460
+ paused: recordingState === exports.MediaRecordingState.PAUSED,
52461
+ recording: recordingState === exports.MediaRecordingState.RECORDING,
52462
+ stopped: recordingState === exports.MediaRecordingState.STOPPED,
52463
+ }); }, [recordingState]);
52453
52464
  if (!recorder)
52454
52465
  return null;
52455
52466
  return (React__default["default"].createElement("div", { className: 'str-chat__audio_recorder-container' },
52456
52467
  React__default["default"].createElement("div", { className: 'str-chat__audio_recorder', "data-testid": 'audio-recorder' },
52457
- React__default["default"].createElement("button", { className: 'str-chat__audio_recorder__cancel-button', disabled: isUploadingFile, onClick: recorder.cancel },
52468
+ React__default["default"].createElement("button", { className: 'str-chat__audio_recorder__cancel-button', "data-testid": 'cancel-recording-audio-button', disabled: isUploadingFile, onClick: recorder.cancel },
52458
52469
  React__default["default"].createElement(BinIcon, null)),
52459
- (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)),
52460
- recordingState === exports.MediaRecordingState.PAUSED && (React__default["default"].createElement("button", { className: 'str-chat__audio_recorder__resume-recording-button', onClick: recorder.resume },
52470
+ 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,
52471
+ state.paused && (React__default["default"].createElement("button", { className: 'str-chat__audio_recorder__resume-recording-button', onClick: recorder.resume },
52461
52472
  React__default["default"].createElement(MicIcon, null))),
52462
- recordingState === exports.MediaRecordingState.RECORDING && (React__default["default"].createElement("button", { className: 'str-chat__audio_recorder__pause-recording-button', onClick: recorder.pause },
52473
+ state.recording && (React__default["default"].createElement("button", { className: 'str-chat__audio_recorder__pause-recording-button', "data-testid": 'pause-recording-audio-button', onClick: recorder.pause },
52463
52474
  React__default["default"].createElement(PauseIcon, null))),
52464
- 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 },
52475
+ 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 },
52465
52476
  React__default["default"].createElement(CheckSignIcon, null))))));
52466
52477
  };
52467
52478
 
@@ -54467,7 +54478,7 @@ var getImageDimensions = function (source) {
54467
54478
 
54468
54479
  var UnMemoizedReactionSelector = React__default["default"].forwardRef(function (props, ref) {
54469
54480
  var _a;
54470
- 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;
54481
+ 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;
54471
54482
  var _d = useComponentContext('ReactionSelector'), contextAvatar = _d.Avatar, contextReactionOptions = _d.reactionOptions;
54472
54483
  var _e = useMessageContext('ReactionSelector'), contextHandleReaction = _e.handleReaction, message = _e.message;
54473
54484
  var reactionOptions = propReactionOptions !== null && propReactionOptions !== void 0 ? propReactionOptions : contextReactionOptions;
@@ -54475,7 +54486,7 @@ var UnMemoizedReactionSelector = React__default["default"].forwardRef(function (
54475
54486
  var handleReaction = propHandleReaction || contextHandleReaction;
54476
54487
  var latestReactions = propLatestReactions || (message === null || message === void 0 ? void 0 : message.latest_reactions) || [];
54477
54488
  var ownReactions = propOwnReactions || (message === null || message === void 0 ? void 0 : message.own_reactions) || [];
54478
- var reactionCounts = propReactionCounts || (message === null || message === void 0 ? void 0 : message.reaction_counts) || {};
54489
+ var reactionGroups = propReactionGroups || (message === null || message === void 0 ? void 0 : message.reaction_groups) || {};
54479
54490
  var _f = React.useState(null), tooltipReactionType = _f[0], setTooltipReactionType = _f[1];
54480
54491
  var _g = React.useState(null), tooltipPositions = _g[0], setTooltipPositions = _g[1];
54481
54492
  var targetRef = React.useRef(null);
@@ -54535,9 +54546,10 @@ var UnMemoizedReactionSelector = React__default["default"].forwardRef(function (
54535
54546
  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 :
54536
54547
  _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 ? ', ' : ''))); }))),
54537
54548
  React__default["default"].createElement("ul", { className: 'str-chat__message-reactions-list str-chat__message-reactions-options' }, reactionOptions.map(function (_a) {
54549
+ var _b, _c;
54538
54550
  var Component = _a.Component, reactionName = _a.name, reactionType = _a.type;
54539
54551
  var latestUser = getLatestUserForReactionType(reactionType);
54540
- var count = reactionCounts && reactionCounts[reactionType];
54552
+ var count = (_c = (_b = reactionGroups[reactionType]) === null || _b === void 0 ? void 0 : _b.count) !== null && _c !== void 0 ? _c : 0;
54541
54553
  return (React__default["default"].createElement("li", { key: reactionType },
54542
54554
  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', {
54543
54555
  'str-chat__message-reactions-option-selected': iHaveReactedWithReaction(reactionType),
@@ -54554,18 +54566,21 @@ var UnMemoizedReactionSelector = React__default["default"].forwardRef(function (
54554
54566
  var ReactionSelector = React__default["default"].memo(UnMemoizedReactionSelector);
54555
54567
 
54556
54568
  var defaultReactionsSort = function (a, b) {
54569
+ if (a.firstReactionAt && b.firstReactionAt) {
54570
+ return +a.firstReactionAt - +b.firstReactionAt;
54571
+ }
54557
54572
  return a.reactionType.localeCompare(b.reactionType, 'en');
54558
54573
  };
54559
54574
  var useProcessReactions = function (params) {
54560
54575
  var _a;
54561
- var propOwnReactions = params.own_reactions, propReactionCounts = params.reaction_counts, propReactionOptions = params.reactionOptions, propReactions = params.reactions, propSortReactions = params.sortReactions;
54576
+ var propOwnReactions = params.own_reactions, propReactionGroups = params.reaction_groups, propReactionOptions = params.reactionOptions, propReactions = params.reactions, propSortReactions = params.sortReactions;
54562
54577
  var _b = useMessageContext('useProcessReactions'), message = _b.message, contextSortReactions = _b.sortReactions;
54563
54578
  var contextReactionOptions = useComponentContext('useProcessReactions').reactionOptions;
54564
54579
  var reactionOptions = propReactionOptions !== null && propReactionOptions !== void 0 ? propReactionOptions : contextReactionOptions;
54565
54580
  var sortReactions = (_a = propSortReactions !== null && propSortReactions !== void 0 ? propSortReactions : contextSortReactions) !== null && _a !== void 0 ? _a : defaultReactionsSort;
54566
54581
  var latestReactions = propReactions || message.latest_reactions;
54567
54582
  var ownReactions = propOwnReactions || (message === null || message === void 0 ? void 0 : message.own_reactions);
54568
- var reactionCounts = propReactionCounts || message.reaction_counts;
54583
+ var reactionGroups = propReactionGroups || (message === null || message === void 0 ? void 0 : message.reaction_groups);
54569
54584
  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]);
54570
54585
  var getEmojiByReactionType = React.useCallback(function (reactionType) { var _a, _b; return (_b = (_a = reactionOptions.find(function (_a) {
54571
54586
  var type = _a.type;
@@ -54586,21 +54601,25 @@ var useProcessReactions = function (params) {
54586
54601
  })) !== null && _a !== void 0 ? _a : [];
54587
54602
  }, [latestReactions]);
54588
54603
  var existingReactions = React.useMemo(function () {
54589
- if (!reactionCounts) {
54604
+ if (!reactionGroups) {
54590
54605
  return [];
54591
54606
  }
54592
- var unsortedReactions = Object.entries(reactionCounts).flatMap(function (_a) {
54593
- var reactionType = _a[0], reactionCount = _a[1];
54594
- if (reactionCount === 0 || !isSupportedReaction(reactionType)) {
54607
+ var unsortedReactions = Object.entries(reactionGroups).flatMap(function (_a) {
54608
+ var reactionType = _a[0], _b = _a[1], count = _b.count, first_reaction_at = _b.first_reaction_at, last_reaction_at = _b.last_reaction_at;
54609
+ if (count === 0 || !isSupportedReaction(reactionType)) {
54595
54610
  return [];
54596
54611
  }
54612
+ var latestReactedUserNames = getLatestReactedUserNames(reactionType);
54597
54613
  return [
54598
54614
  {
54599
54615
  EmojiComponent: getEmojiByReactionType(reactionType),
54616
+ firstReactionAt: first_reaction_at ? new Date(first_reaction_at) : null,
54600
54617
  isOwnReaction: isOwnReaction(reactionType),
54601
- latestReactedUserNames: getLatestReactedUserNames(reactionType),
54602
- reactionCount: reactionCount,
54618
+ lastReactionAt: last_reaction_at ? new Date(last_reaction_at) : null,
54619
+ latestReactedUserNames: latestReactedUserNames,
54620
+ reactionCount: count,
54603
54621
  reactionType: reactionType,
54622
+ unlistedReactedUserCount: count - latestReactedUserNames.length,
54604
54623
  },
54605
54624
  ];
54606
54625
  });
@@ -54610,7 +54629,7 @@ var useProcessReactions = function (params) {
54610
54629
  getLatestReactedUserNames,
54611
54630
  isOwnReaction,
54612
54631
  isSupportedReaction,
54613
- reactionCounts,
54632
+ reactionGroups,
54614
54633
  sortReactions,
54615
54634
  ]);
54616
54635
  var hasReactions = existingReactions.length > 0;
@@ -55064,25 +55083,32 @@ var useReactionHandler = function (message) {
55064
55083
  var client = useChatContext('useReactionHandler').client;
55065
55084
  var createMessagePreview = React.useCallback(function (add, reaction, message) {
55066
55085
  var _a, _b;
55067
- var newReactionCounts = (message === null || message === void 0 ? void 0 : message.reaction_counts) || {};
55086
+ var newReactionGroups = (message === null || message === void 0 ? void 0 : message.reaction_groups) || {};
55068
55087
  var reactionType = reaction.type;
55069
- var hasReaction = !!newReactionCounts[reactionType];
55088
+ var hasReaction = !!newReactionGroups[reactionType];
55070
55089
  if (add) {
55071
- newReactionCounts[reactionType] = hasReaction ? newReactionCounts[reactionType] + 1 : 1;
55090
+ var timestamp = new Date().toISOString();
55091
+ newReactionGroups[reactionType] = hasReaction
55092
+ ? exports.__assign(exports.__assign({}, newReactionGroups[reactionType]), { count: newReactionGroups[reactionType].count + 1 }) : {
55093
+ count: 1,
55094
+ first_reaction_at: timestamp,
55095
+ last_reaction_at: timestamp,
55096
+ sum_scores: 1,
55097
+ };
55072
55098
  }
55073
55099
  else {
55074
- if (hasReaction && newReactionCounts[reactionType] > 1) {
55075
- newReactionCounts[reactionType]--;
55100
+ if (hasReaction && newReactionGroups[reactionType].count > 1) {
55101
+ newReactionGroups[reactionType] = exports.__assign(exports.__assign({}, newReactionGroups[reactionType]), { count: newReactionGroups[reactionType].count - 1 });
55076
55102
  }
55077
55103
  else {
55078
- delete newReactionCounts[reactionType];
55104
+ delete newReactionGroups[reactionType];
55079
55105
  }
55080
55106
  }
55081
55107
  var newReactions = add
55082
55108
  ? __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); });
55083
55109
  var newOwnReactions = add
55084
55110
  ? __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; });
55085
- return exports.__assign(exports.__assign({}, message), { latest_reactions: newReactions || message.latest_reactions, own_reactions: newOwnReactions, reaction_counts: newReactionCounts, reaction_scores: newReactionCounts });
55111
+ return exports.__assign(exports.__assign({}, message), { latest_reactions: newReactions || message.latest_reactions, own_reactions: newOwnReactions, reaction_groups: newReactionGroups });
55086
55112
  },
55087
55113
  // eslint-disable-next-line react-hooks/exhaustive-deps
55088
55114
  [client.user, client.userID]);
@@ -55891,7 +55917,7 @@ var getGroupStyles = function (message, previousMessage, nextMessage, noGroupByU
55891
55917
  ((_c = message.user) === null || _c === void 0 ? void 0 : _c.id) !== ((_d = previousMessage.user) === null || _d === void 0 ? void 0 : _d.id) ||
55892
55918
  previousMessage.type === 'error' ||
55893
55919
  previousMessage.deleted_at ||
55894
- (message.reaction_counts && Object.keys(message.reaction_counts).length > 0) ||
55920
+ (message.reaction_groups && Object.keys(message.reaction_groups).length > 0) ||
55895
55921
  isMessageEdited(previousMessage);
55896
55922
  var isBottomMessage = !nextMessage ||
55897
55923
  nextMessage.customType === CUSTOM_MESSAGE_TYPE.date ||
@@ -55901,7 +55927,7 @@ var getGroupStyles = function (message, previousMessage, nextMessage, noGroupByU
55901
55927
  ((_f = message.user) === null || _f === void 0 ? void 0 : _f.id) !== ((_g = nextMessage.user) === null || _g === void 0 ? void 0 : _g.id) ||
55902
55928
  nextMessage.type === 'error' ||
55903
55929
  nextMessage.deleted_at ||
55904
- (nextMessage.reaction_counts && Object.keys(nextMessage.reaction_counts).length > 0) ||
55930
+ (nextMessage.reaction_groups && Object.keys(nextMessage.reaction_groups).length > 0) ||
55905
55931
  isMessageEdited(message);
55906
55932
  if (!isTopMessage && !isBottomMessage) {
55907
55933
  if (message.deleted_at || message.type === 'error')
package/dist/browser.full-bundle.js CHANGED
@@ -10564,6 +10564,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, ReactDOM, streamC
10564
10564
  return;
10565
10565
  try {
10566
10566
  audioRef.current.pause();
10567
+ setIsPlaying(false);
10567
10568
  }
10568
10569
  catch (e) {
10569
10570
  registerError(new Error(t('Failed to play the recording')));
@@ -45103,6 +45104,8 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, ReactDOM, streamC
45103
45104
  if (!this.textareaRef) return;
45104
45105
  const trigger = this.state.currentTrigger;
45105
45106
  if (!trigger || !this.state.data) {
45107
+ // https://legacy.reactjs.org/docs/legacy-event-pooling.html
45108
+ event.persist();
45106
45109
  // trigger a submit
45107
45110
  await this._replaceWord();
45108
45111
  if (this.textareaRef) {
@@ -48862,7 +48865,10 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, ReactDOM, streamC
48862
48865
  }
48863
48866
  return areMessagesEqual(prevMessage, nextMessage);
48864
48867
  };
48865
- 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; }); };
48868
+ 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) {
48869
+ var count = _a.count;
48870
+ return count > 0;
48871
+ }); };
48866
48872
  var messageHasAttachments = function (message) { return !!(message === null || message === void 0 ? void 0 : message.attachments) && !!message.attachments.length; };
48867
48873
  var getImages = function (message) {
48868
48874
  if (!(message === null || message === void 0 ? void 0 : message.attachments)) {
@@ -51381,9 +51387,9 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, ReactDOM, streamC
51381
51387
  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' }))); };
51382
51388
  var BinIcon = function () { return (React__default["default"].createElement("svg", { fill: 'currentColor', viewBox: '0 0 32 32', xmlns: 'http://www.w3.org/2000/svg' },
51383
51389
  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' }))); };
51384
- var PauseIcon = function () { return (React__default["default"].createElement("svg", { fill: 'currentColor', viewBox: '0 0 16 20', xmlns: 'http://www.w3.org/2000/svg' },
51390
+ 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' },
51385
51391
  React__default["default"].createElement("path", { d: 'M0 19.3333H5.33333V0.666626H0V19.3333ZM10.6667 0.666626V19.3333H16V0.666626H10.6667Z' }))); };
51386
- var PlayIcon = function () { return (React__default["default"].createElement("svg", { fill: 'currentColor', viewBox: '0 0 14 18', xmlns: 'http://www.w3.org/2000/svg' },
51392
+ 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' },
51387
51393
  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' }))); };
51388
51394
  var CheckSignIcon = function () { return (React__default["default"].createElement("svg", { fill: 'currentColor', viewBox: '0 0 18 14', xmlns: 'http://www.w3.org/2000/svg' },
51389
51395
  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 +51431,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, ReactDOM, streamC
51425
51431
  return (React__default["default"].createElement(React__default["default"].Fragment, null,
51426
51432
  React__default["default"].createElement("audio", { ref: audioRef },
51427
51433
  React__default["default"].createElement("source", { src: props.src, type: mimeType })),
51428
- 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)),
51434
+ 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)),
51429
51435
  React__default["default"].createElement(RecordingTimer, { durationSeconds: displayedDuration }),
51430
51436
  React__default["default"].createElement("div", { className: 'str-chat__wave-progress-bar__track-container' },
51431
51437
  React__default["default"].createElement(WaveProgressBar, { progress: progress, seek: seek, waveformData: waveformData || [] }))));
@@ -51475,11 +51481,12 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, ReactDOM, streamC
51475
51481
  }, [recorder]);
51476
51482
  if (!recorder)
51477
51483
  return null;
51478
- 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: {
51479
- '--str-chat__wave-progress-bar__amplitude-bar-height': amplitude
51480
- ? amplitude * 100 + '%'
51481
- : '0%',
51482
- } })); })));
51484
+ return (React__default["default"].createElement("div", { className: 'str-chat__waveform-box-container' },
51485
+ 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: {
51486
+ '--str-chat__wave-progress-bar__amplitude-bar-height': amplitude
51487
+ ? amplitude * 100 + '%'
51488
+ : '0%',
51489
+ } })); }))));
51483
51490
  };
51484
51491
  var AudioRecordingInProgress = function () {
51485
51492
  var _a = useTimeElapsed(), secondsElapsed = _a.secondsElapsed, startCounter = _a.startCounter, stopCounter = _a.stopCounter;
@@ -51501,8 +51508,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, ReactDOM, streamC
51501
51508
  }, [recorder, startCounter, stopCounter]);
51502
51509
  return (React__default["default"].createElement(React__default["default"].Fragment, null,
51503
51510
  React__default["default"].createElement(RecordingTimer, { durationSeconds: secondsElapsed }),
51504
- React__default["default"].createElement("div", { className: 'str-chat__waveform-box-container' },
51505
- React__default["default"].createElement(AudioRecordingWaveform, null))));
51511
+ React__default["default"].createElement(AudioRecordingWaveform, null)));
51506
51512
  };
51507
51513
 
51508
51514
  window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var Subscription = /** @class */ (function () {
@@ -64500,18 +64506,23 @@ bitsperframe: %d
64500
64506
  var _a, _b;
64501
64507
  var _c = useMessageInputContext().recordingController, completeRecording = _c.completeRecording, recorder = _c.recorder, recording = _c.recording, recordingState = _c.recordingState;
64502
64508
  var isUploadingFile = ((_a = recording === null || recording === void 0 ? void 0 : recording.$internal) === null || _a === void 0 ? void 0 : _a.uploadState) === 'uploading';
64509
+ var state = React$2.useMemo(function () { return ({
64510
+ paused: recordingState === exports.MediaRecordingState.PAUSED,
64511
+ recording: recordingState === exports.MediaRecordingState.RECORDING,
64512
+ stopped: recordingState === exports.MediaRecordingState.STOPPED,
64513
+ }); }, [recordingState]);
64503
64514
  if (!recorder)
64504
64515
  return null;
64505
64516
  return (React__default["default"].createElement("div", { className: 'str-chat__audio_recorder-container' },
64506
64517
  React__default["default"].createElement("div", { className: 'str-chat__audio_recorder', "data-testid": 'audio-recorder' },
64507
- React__default["default"].createElement("button", { className: 'str-chat__audio_recorder__cancel-button', disabled: isUploadingFile, onClick: recorder.cancel },
64518
+ React__default["default"].createElement("button", { className: 'str-chat__audio_recorder__cancel-button', "data-testid": 'cancel-recording-audio-button', disabled: isUploadingFile, onClick: recorder.cancel },
64508
64519
  React__default["default"].createElement(BinIcon, null)),
64509
- (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)),
64510
- recordingState === exports.MediaRecordingState.PAUSED && (React__default["default"].createElement("button", { className: 'str-chat__audio_recorder__resume-recording-button', onClick: recorder.resume },
64520
+ 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,
64521
+ state.paused && (React__default["default"].createElement("button", { className: 'str-chat__audio_recorder__resume-recording-button', onClick: recorder.resume },
64511
64522
  React__default["default"].createElement(MicIcon, null))),
64512
- recordingState === exports.MediaRecordingState.RECORDING && (React__default["default"].createElement("button", { className: 'str-chat__audio_recorder__pause-recording-button', onClick: recorder.pause },
64523
+ state.recording && (React__default["default"].createElement("button", { className: 'str-chat__audio_recorder__pause-recording-button', "data-testid": 'pause-recording-audio-button', onClick: recorder.pause },
64513
64524
  React__default["default"].createElement(PauseIcon, null))),
64514
- 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 },
64525
+ 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 },
64515
64526
  React__default["default"].createElement(CheckSignIcon, null))))));
64516
64527
  };
64517
64528
 
@@ -66588,7 +66599,7 @@ bitsperframe: %d
66588
66599
 
66589
66600
  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) {
66590
66601
  var _a;
66591
- 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;
66602
+ 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;
66592
66603
  var _d = useComponentContext('ReactionSelector'), contextAvatar = _d.Avatar, contextReactionOptions = _d.reactionOptions;
66593
66604
  var _e = useMessageContext('ReactionSelector'), contextHandleReaction = _e.handleReaction, message = _e.message;
66594
66605
  var reactionOptions = propReactionOptions !== null && propReactionOptions !== void 0 ? propReactionOptions : contextReactionOptions;
@@ -66596,7 +66607,7 @@ bitsperframe: %d
66596
66607
  var handleReaction = propHandleReaction || contextHandleReaction;
66597
66608
  var latestReactions = propLatestReactions || (message === null || message === void 0 ? void 0 : message.latest_reactions) || [];
66598
66609
  var ownReactions = propOwnReactions || (message === null || message === void 0 ? void 0 : message.own_reactions) || [];
66599
- var reactionCounts = propReactionCounts || (message === null || message === void 0 ? void 0 : message.reaction_counts) || {};
66610
+ var reactionGroups = propReactionGroups || (message === null || message === void 0 ? void 0 : message.reaction_groups) || {};
66600
66611
  var _f = React$2.useState(null), tooltipReactionType = _f[0], setTooltipReactionType = _f[1];
66601
66612
  var _g = React$2.useState(null), tooltipPositions = _g[0], setTooltipPositions = _g[1];
66602
66613
  var targetRef = React$2.useRef(null);
@@ -66656,9 +66667,10 @@ bitsperframe: %d
66656
66667
  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 :
66657
66668
  _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 ? ', ' : ''))); }))),
66658
66669
  React__default["default"].createElement("ul", { className: 'str-chat__message-reactions-list str-chat__message-reactions-options' }, reactionOptions.map(function (_a) {
66670
+ var _b, _c;
66659
66671
  var Component = _a.Component, reactionName = _a.name, reactionType = _a.type;
66660
66672
  var latestUser = getLatestUserForReactionType(reactionType);
66661
- var count = reactionCounts && reactionCounts[reactionType];
66673
+ var count = (_c = (_b = reactionGroups[reactionType]) === null || _b === void 0 ? void 0 : _b.count) !== null && _c !== void 0 ? _c : 0;
66662
66674
  return (React__default["default"].createElement("li", { key: reactionType },
66663
66675
  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', {
66664
66676
  'str-chat__message-reactions-option-selected': iHaveReactedWithReaction(reactionType),
@@ -66675,18 +66687,21 @@ bitsperframe: %d
66675
66687
  var ReactionSelector = React__default["default"].memo(UnMemoizedReactionSelector);
66676
66688
 
66677
66689
  window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var defaultReactionsSort = function (a, b) {
66690
+ if (a.firstReactionAt && b.firstReactionAt) {
66691
+ return +a.firstReactionAt - +b.firstReactionAt;
66692
+ }
66678
66693
  return a.reactionType.localeCompare(b.reactionType, 'en');
66679
66694
  };
66680
66695
  var useProcessReactions = function (params) {
66681
66696
  var _a;
66682
- var propOwnReactions = params.own_reactions, propReactionCounts = params.reaction_counts, propReactionOptions = params.reactionOptions, propReactions = params.reactions, propSortReactions = params.sortReactions;
66697
+ var propOwnReactions = params.own_reactions, propReactionGroups = params.reaction_groups, propReactionOptions = params.reactionOptions, propReactions = params.reactions, propSortReactions = params.sortReactions;
66683
66698
  var _b = useMessageContext('useProcessReactions'), message = _b.message, contextSortReactions = _b.sortReactions;
66684
66699
  var contextReactionOptions = useComponentContext('useProcessReactions').reactionOptions;
66685
66700
  var reactionOptions = propReactionOptions !== null && propReactionOptions !== void 0 ? propReactionOptions : contextReactionOptions;
66686
66701
  var sortReactions = (_a = propSortReactions !== null && propSortReactions !== void 0 ? propSortReactions : contextSortReactions) !== null && _a !== void 0 ? _a : defaultReactionsSort;
66687
66702
  var latestReactions = propReactions || message.latest_reactions;
66688
66703
  var ownReactions = propOwnReactions || (message === null || message === void 0 ? void 0 : message.own_reactions);
66689
- var reactionCounts = propReactionCounts || message.reaction_counts;
66704
+ var reactionGroups = propReactionGroups || (message === null || message === void 0 ? void 0 : message.reaction_groups);
66690
66705
  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]);
66691
66706
  var getEmojiByReactionType = React$2.useCallback(function (reactionType) { var _a, _b; return (_b = (_a = reactionOptions.find(function (_a) {
66692
66707
  var type = _a.type;
@@ -66707,21 +66722,25 @@ bitsperframe: %d
66707
66722
  })) !== null && _a !== void 0 ? _a : [];
66708
66723
  }, [latestReactions]);
66709
66724
  var existingReactions = React$2.useMemo(function () {
66710
- if (!reactionCounts) {
66725
+ if (!reactionGroups) {
66711
66726
  return [];
66712
66727
  }
66713
- var unsortedReactions = Object.entries(reactionCounts).flatMap(function (_a) {
66714
- var reactionType = _a[0], reactionCount = _a[1];
66715
- if (reactionCount === 0 || !isSupportedReaction(reactionType)) {
66728
+ var unsortedReactions = Object.entries(reactionGroups).flatMap(function (_a) {
66729
+ var reactionType = _a[0], _b = _a[1], count = _b.count, first_reaction_at = _b.first_reaction_at, last_reaction_at = _b.last_reaction_at;
66730
+ if (count === 0 || !isSupportedReaction(reactionType)) {
66716
66731
  return [];
66717
66732
  }
66733
+ var latestReactedUserNames = getLatestReactedUserNames(reactionType);
66718
66734
  return [
66719
66735
  {
66720
66736
  EmojiComponent: getEmojiByReactionType(reactionType),
66737
+ firstReactionAt: first_reaction_at ? new Date(first_reaction_at) : null,
66721
66738
  isOwnReaction: isOwnReaction(reactionType),
66722
- latestReactedUserNames: getLatestReactedUserNames(reactionType),
66723
- reactionCount: reactionCount,
66739
+ lastReactionAt: last_reaction_at ? new Date(last_reaction_at) : null,
66740
+ latestReactedUserNames: latestReactedUserNames,
66741
+ reactionCount: count,
66724
66742
  reactionType: reactionType,
66743
+ unlistedReactedUserCount: count - latestReactedUserNames.length,
66725
66744
  },
66726
66745
  ];
66727
66746
  });
@@ -66731,7 +66750,7 @@ bitsperframe: %d
66731
66750
  getLatestReactedUserNames,
66732
66751
  isOwnReaction,
66733
66752
  isSupportedReaction,
66734
- reactionCounts,
66753
+ reactionGroups,
66735
66754
  sortReactions,
66736
66755
  ]);
66737
66756
  var hasReactions = existingReactions.length > 0;
@@ -67185,25 +67204,32 @@ bitsperframe: %d
67185
67204
  var client = useChatContext('useReactionHandler').client;
67186
67205
  var createMessagePreview = React$2.useCallback(function (add, reaction, message) {
67187
67206
  var _a, _b;
67188
- var newReactionCounts = (message === null || message === void 0 ? void 0 : message.reaction_counts) || {};
67207
+ var newReactionGroups = (message === null || message === void 0 ? void 0 : message.reaction_groups) || {};
67189
67208
  var reactionType = reaction.type;
67190
- var hasReaction = !!newReactionCounts[reactionType];
67209
+ var hasReaction = !!newReactionGroups[reactionType];
67191
67210
  if (add) {
67192
- newReactionCounts[reactionType] = hasReaction ? newReactionCounts[reactionType] + 1 : 1;
67211
+ var timestamp = new Date().toISOString();
67212
+ newReactionGroups[reactionType] = hasReaction
67213
+ ? __assign(__assign({}, newReactionGroups[reactionType]), { count: newReactionGroups[reactionType].count + 1 }) : {
67214
+ count: 1,
67215
+ first_reaction_at: timestamp,
67216
+ last_reaction_at: timestamp,
67217
+ sum_scores: 1,
67218
+ };
67193
67219
  }
67194
67220
  else {
67195
- if (hasReaction && newReactionCounts[reactionType] > 1) {
67196
- newReactionCounts[reactionType]--;
67221
+ if (hasReaction && newReactionGroups[reactionType].count > 1) {
67222
+ newReactionGroups[reactionType] = __assign(__assign({}, newReactionGroups[reactionType]), { count: newReactionGroups[reactionType].count - 1 });
67197
67223
  }
67198
67224
  else {
67199
- delete newReactionCounts[reactionType];
67225
+ delete newReactionGroups[reactionType];
67200
67226
  }
67201
67227
  }
67202
67228
  var newReactions = add
67203
67229
  ? __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); });
67204
67230
  var newOwnReactions = add
67205
67231
  ? __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; });
67206
- return __assign(__assign({}, message), { latest_reactions: newReactions || message.latest_reactions, own_reactions: newOwnReactions, reaction_counts: newReactionCounts, reaction_scores: newReactionCounts });
67232
+ return __assign(__assign({}, message), { latest_reactions: newReactions || message.latest_reactions, own_reactions: newOwnReactions, reaction_groups: newReactionGroups });
67207
67233
  },
67208
67234
  // eslint-disable-next-line react-hooks/exhaustive-deps
67209
67235
  [client.user, client.userID]);
@@ -68022,7 +68048,7 @@ bitsperframe: %d
68022
68048
  ((_c = message.user) === null || _c === void 0 ? void 0 : _c.id) !== ((_d = previousMessage.user) === null || _d === void 0 ? void 0 : _d.id) ||
68023
68049
  previousMessage.type === 'error' ||
68024
68050
  previousMessage.deleted_at ||
68025
- (message.reaction_counts && Object.keys(message.reaction_counts).length > 0) ||
68051
+ (message.reaction_groups && Object.keys(message.reaction_groups).length > 0) ||
68026
68052
  isMessageEdited(previousMessage);
68027
68053
  var isBottomMessage = !nextMessage ||
68028
68054
  nextMessage.customType === CUSTOM_MESSAGE_TYPE.date ||
@@ -68032,7 +68058,7 @@ bitsperframe: %d
68032
68058
  ((_f = message.user) === null || _f === void 0 ? void 0 : _f.id) !== ((_g = nextMessage.user) === null || _g === void 0 ? void 0 : _g.id) ||
68033
68059
  nextMessage.type === 'error' ||
68034
68060
  nextMessage.deleted_at ||
68035
- (nextMessage.reaction_counts && Object.keys(nextMessage.reaction_counts).length > 0) ||
68061
+ (nextMessage.reaction_groups && Object.keys(nextMessage.reaction_groups).length > 0) ||
68036
68062
  isMessageEdited(message);
68037
68063
  if (!isTopMessage && !isBottomMessage) {
68038
68064
  if (message.deleted_at || message.type === 'error')
@@ -73280,7 +73306,7 @@ bitsperframe: %d
73280
73306
 
73281
73307
  window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
73282
73308
 
73283
- window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var version$1 = '11.15.2';
73309
+ window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var version$1 = '11.16.1';
73284
73310
 
73285
73311
  window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var useChat = function (_a) {
73286
73312
  var _b, _c;