stream-chat-react 12.9.0 → 12.11.0

package/dist/components/Attachment/Attachment.js

@@ -24,8 +24,9 @@ export const ATTACHMENT_GROUPS_ORDER = [
  */
 export const Attachment = (props) => {
     const { attachments } = props;
+    const groupedAttachments = useMemo(() => renderGroupedAttachments(props), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    const groupedAttachments = useMemo(() => renderGroupedAttachments(props), [attachments]);
+    [attachments]);
     return (React.createElement("div", { className: 'str-chat__attachment-list' }, ATTACHMENT_GROUPS_ORDER.reduce((acc, groupName) => [...acc, ...groupedAttachments[groupName]], [])));
 };
 const renderGroupedAttachments = ({ attachments, ...rest }) => {

package/dist/components/Attachment/AttachmentContainer.d.ts

@@ -13,6 +13,6 @@ export declare const ImageContainer: <StreamChatGenerics extends DefaultStreamCh
 export declare const CardContainer: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: RenderAttachmentProps<StreamChatGenerics>) => React.JSX.Element;
 export declare const FileContainer: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ attachment, File, }: RenderAttachmentProps<StreamChatGenerics>) => React.JSX.Element | null;
 export declare const AudioContainer: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ attachment, Audio, }: RenderAttachmentProps<StreamChatGenerics>) => React.JSX.Element;
-export declare const VoiceRecordingContainer: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ attachment, VoiceRecording, isQuoted, }: RenderAttachmentProps<StreamChatGenerics>) => React.JSX.Element;
+export declare const VoiceRecordingContainer: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ attachment, isQuoted, VoiceRecording, }: RenderAttachmentProps<StreamChatGenerics>) => React.JSX.Element;
 export declare const MediaContainer: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: RenderAttachmentProps<StreamChatGenerics>) => React.JSX.Element;
 export declare const UnsupportedAttachmentContainer: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ attachment, UnsupportedAttachment, }: RenderAttachmentProps<StreamChatGenerics>) => React.JSX.Element;

package/dist/components/Attachment/AttachmentContainer.js

@@ -123,7 +123,7 @@ export const FileContainer = ({ attachment, File = DefaultFile, }) => {
 export const AudioContainer = ({ attachment, Audio = DefaultAudio, }) => (React.createElement(AttachmentWithinContainer, { attachment: attachment, componentType: 'audio' },
     React.createElement("div", { className: 'str-chat__attachment' },
         React.createElement(Audio, { og: attachment }))));
-export const VoiceRecordingContainer = ({ attachment, VoiceRecording = DefaultVoiceRecording, isQuoted, }) => (React.createElement(AttachmentWithinContainer, { attachment: attachment, componentType: 'voiceRecording' },
+export const VoiceRecordingContainer = ({ attachment, isQuoted, VoiceRecording = DefaultVoiceRecording, }) => (React.createElement(AttachmentWithinContainer, { attachment: attachment, componentType: 'voiceRecording' },
     React.createElement("div", { className: 'str-chat__attachment' },
         React.createElement(VoiceRecording, { attachment: attachment, isQuoted: isQuoted }))));
 export const MediaContainer = (props) => {
@@ -131,7 +131,7 @@ export const MediaContainer = (props) => {
     const componentType = 'media';
     const { shouldGenerateVideoThumbnail, videoAttachmentSizeHandler } = useChannelStateContext();
     const videoElement = useRef(null);
-    const [attachmentConfiguration, setAttachmentConfiguration,] = useState();
+    const [attachmentConfiguration, setAttachmentConfiguration] = useState();
     useLayoutEffect(() => {
         if (videoElement.current && videoAttachmentSizeHandler) {
             const config = videoAttachmentSizeHandler(attachment, videoElement.current, shouldGenerateVideoThumbnail);

package/dist/components/Attachment/Card.js

@@ -22,7 +22,7 @@ const UnableToRenderCard = ({ type }) => {
         React.createElement("div", { className: 'str-chat__message-attachment-card--content' },
             React.createElement("div", { className: 'str-chat__message-attachment-card--text' }, t('this content could not be displayed')))));
 };
-const SourceLink = ({ author_name, url }) => (React.createElement("div", { className: 'str-chat__message-attachment-card--source-link', "data-testid": 'card-source-link' },
+const SourceLink = ({ author_name, url, }) => (React.createElement("div", { className: 'str-chat__message-attachment-card--source-link', "data-testid": 'card-source-link' },
     React.createElement(SafeAnchor, { className: 'str-chat__message-attachment-card--url', href: url, rel: 'noopener noreferrer', target: '_blank' }, author_name || getHostFromURL(url))));
 const CardHeader = (props) => {
     const { asset_url, dimensions, image, image_url, thumb_url, title, type } = props;
@@ -40,7 +40,7 @@ const CardContent = (props) => {
     const url = title_link || og_scrape_url;
     return (React.createElement("div", { className: 'str-chat__message-attachment-card--content' }, type === 'audio' ? (React.createElement(CardAudio, { og: props })) : (React.createElement("div", { className: 'str-chat__message-attachment-card--flex' },
         url && React.createElement(SourceLink, { author_name: author_name, url: url }),
-        title && React.createElement("div", { className: 'str-chat__message-attachment-card--title' }, title),
+        title && (React.createElement("div", { className: 'str-chat__message-attachment-card--title' }, title)),
         text && React.createElement("div", { className: 'str-chat__message-attachment-card--text' }, text)))));
 };
 export const CardAudio = ({ og: { asset_url, author_name, mime_type, og_scrape_url, text, title, title_link }, }) => {
@@ -60,7 +60,7 @@ export const CardAudio = ({ og: { asset_url, author_name, mime_type, og_scrape_u
                 React.createElement(ProgressBar, { onClick: seek, progress: progress })))),
         React.createElement("div", { className: 'str-chat__message-attachment-audio-widget--second-row' },
             url && React.createElement(SourceLink, { author_name: author_name, url: url }),
-            title && React.createElement("div", { className: 'str-chat__message-attachment-audio-widget--title' }, title),
+            title && (React.createElement("div", { className: 'str-chat__message-attachment-audio-widget--title' }, title)),
             text && (React.createElement("div", { className: 'str-chat__message-attachment-audio-widget--description' }, text)))));
 };
 const UnMemoizedCard = (props) => {

package/dist/components/Attachment/VoiceRecording.d.ts

@@ -5,7 +5,7 @@ export type VoiceRecordingPlayerProps<StreamChatGenerics extends DefaultStreamCh
     /** An array of fractional numeric values of playback speed to override the defaults (1.0, 1.5, 2.0) */
     playbackRates?: number[];
 };
-export declare const VoiceRecordingPlayer: ({ attachment, playbackRates }: VoiceRecordingPlayerProps) => React.JSX.Element | null;
+export declare const VoiceRecordingPlayer: ({ attachment, playbackRates, }: VoiceRecordingPlayerProps) => React.JSX.Element | null;
 export type QuotedVoiceRecordingProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Pick<VoiceRecordingProps<StreamChatGenerics>, 'attachment'>;
 export declare const QuotedVoiceRecording: ({ attachment }: QuotedVoiceRecordingProps) => React.JSX.Element;
 export type VoiceRecordingProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {

package/dist/components/Attachment/VoiceRecording.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import { FileSizeIndicator, PlaybackRateButton, PlayButton, WaveProgressBar } from './components';
+import { FileSizeIndicator, PlaybackRateButton, PlayButton, WaveProgressBar, } from './components';
 import { useAudioController } from './hooks/useAudioController';
 import { displayDuration } from './utils';
 import { FileIcon } from '../ReactFileUtilities';
 import { useTranslationContext } from '../../context';
 const rootClassName = 'str-chat__message-attachment__voice-recording-widget';
-export const VoiceRecordingPlayer = ({ attachment, playbackRates }) => {
+export const VoiceRecordingPlayer = ({ attachment, playbackRates, }) => {
     const { t } = useTranslationContext('VoiceRecordingPlayer');
     const { asset_url, duration = 0, mime_type, title = t('Voice message'), waveform_data, } = attachment;
     const { audioRef, increasePlaybackRate, isPlaying, playbackRate, progress, secondsElapsed, seek, togglePlay, } = useAudioController({

package/dist/components/Attachment/attachment-sizing.js

@@ -43,7 +43,8 @@ const getSizingRestrictions = (url, htmlElement) => {
     const originalWidth = Number(urlParams.get('ow')) || 1;
     const cssSizeRestriction = getCSSSizeRestrictions(htmlElement);
     let resizeDimensions;
-    if ((cssSizeRestriction.maxHeight || cssSizeRestriction.height) && cssSizeRestriction.maxWidth) {
+    if ((cssSizeRestriction.maxHeight || cssSizeRestriction.height) &&
+        cssSizeRestriction.maxWidth) {
         resizeDimensions = getResizeDimensions(originalHeight, originalWidth, 
         /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
         cssSizeRestriction.maxHeight || cssSizeRestriction.height, cssSizeRestriction.maxWidth);

package/dist/components/Attachment/components/FileSizeIndicator.d.ts

@@ -8,5 +8,5 @@ type FileSizeIndicatorProps = {
      */
     maximumFractionDigits?: number;
 };
-export declare const FileSizeIndicator: ({ fileSize, maximumFractionDigits }: FileSizeIndicatorProps) => React.JSX.Element | null;
+export declare const FileSizeIndicator: ({ fileSize, maximumFractionDigits, }: FileSizeIndicatorProps) => React.JSX.Element | null;
 export {};

package/dist/components/Attachment/components/FileSizeIndicator.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { prettifyFileSize } from '../../MessageInput/hooks/utils';
-export const FileSizeIndicator = ({ fileSize, maximumFractionDigits }) => {
+export const FileSizeIndicator = ({ fileSize, maximumFractionDigits, }) => {
     if (!(fileSize && Number.isFinite(Number(fileSize))))
         return null;
     return (React.createElement("span", { className: 'str-chat__message-attachment-file--item-size', "data-testid": 'file-size-indicator' }, prettifyFileSize(fileSize, maximumFractionDigits)));

package/dist/components/Attachment/components/WaveProgressBar.js

@@ -7,7 +7,7 @@ export const WaveProgressBar = ({ amplitudesCount = 40, progress = 0, relativeAm
     const isDragging = useRef(false);
     const [root, setRoot] = useState(null);
     const [trackAxisX, setTrackAxisX] = useState();
-    const lastRootWidth = useRef();
+    const lastRootWidth = useRef(undefined);
     const handleDragStart = (e) => {
         e.preventDefault();
         if (!progressIndicator)

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

@@ -13,7 +13,7 @@ type AudioControllerParams = {
     playbackRates?: number[];
 };
 export declare const useAudioController: ({ durationSeconds, mimeType, playbackRates, }?: AudioControllerParams) => {
-    audioRef: import("react").MutableRefObject<HTMLAudioElement | null>;
+    audioRef: import("react").RefObject<HTMLAudioElement | null>;
     canPlayRecord: boolean;
     increasePlaybackRate: () => void;
     isPlaying: boolean;

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

@@ -13,7 +13,7 @@ export const useAudioController = ({ durationSeconds, mimeType, playbackRates =
     const [canPlayRecord, setCanPlayRecord] = useState(true);
     const [secondsElapsed, setSecondsElapsed] = useState(0);
     const [playbackRateIndex, setPlaybackRateIndex] = useState(0);
-    const playTimeout = useRef();
+    const playTimeout = useRef(undefined);
     const audioRef = useRef(null);
     const registerError = useCallback((e) => {
         logError(e);
@@ -116,7 +116,9 @@ export const useAudioController = ({ durationSeconds, mimeType, playbackRates =
         isPlaying,
         playbackError,
         playbackRate: playbackRates[playbackRateIndex],
-        progress: audioRef.current && secondsElapsed ? (secondsElapsed / audioRef.current.duration) * 100 : 0,
+        progress: audioRef.current && secondsElapsed
+            ? (secondsElapsed / audioRef.current.duration) * 100
+            : 0,
         secondsElapsed,
         seek,
         togglePlay,

package/dist/components/Attachment/utils.d.ts

@@ -4,7 +4,7 @@ import type { ATTACHMENT_GROUPS_ORDER, AttachmentProps } from './Attachment';
 import type { DefaultStreamChatGenerics, UnknownType } from '../../types/types';
 import type { LocalAttachment, LocalAudioAttachment, LocalFileAttachment, LocalImageAttachment, LocalVideoAttachment, LocalVoiceRecordingAttachment, VoiceRecordingAttachment } from '../MessageInput';
 export declare const SUPPORTED_VIDEO_FORMATS: string[];
-export type AttachmentComponentType = typeof ATTACHMENT_GROUPS_ORDER[number];
+export type AttachmentComponentType = (typeof ATTACHMENT_GROUPS_ORDER)[number];
 export type GroupedRenderedAttachment = Record<AttachmentComponentType, ReactNode[]>;
 export type GalleryAttachment<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
     images: Attachment<StreamChatGenerics>[];

package/dist/components/Attachment/utils.js

@@ -1,4 +1,9 @@
-export const SUPPORTED_VIDEO_FORMATS = ['video/mp4', 'video/ogg', 'video/webm', 'video/quicktime'];
+export const SUPPORTED_VIDEO_FORMATS = [
+    'video/mp4',
+    'video/ogg',
+    'video/webm',
+    'video/quicktime',
+];
 export const isLocalAttachment = (attachment) => !!attachment.localMetadata?.id;
 export const isScrapedContent = (attachment) => attachment.og_scrape_url || attachment.title_link;
 export const isUploadedImage = (attachment) => attachment.type === 'image' && !isScrapedContent(attachment);
@@ -13,14 +18,18 @@ export const isFileAttachment = (attachment) => attachment.type === 'file' ||
         SUPPORTED_VIDEO_FORMATS.indexOf(attachment.mime_type) === -1 &&
         attachment.type !== 'video');
 export const isLocalFileAttachment = (attachment) => isFileAttachment(attachment) && isLocalAttachment(attachment);
-export const isMediaAttachment = (attachment) => (attachment.mime_type && SUPPORTED_VIDEO_FORMATS.indexOf(attachment.mime_type) !== -1) ||
+export const isMediaAttachment = (attachment) => (attachment.mime_type &&
+    SUPPORTED_VIDEO_FORMATS.indexOf(attachment.mime_type) !== -1) ||
     attachment.type === 'video';
 export const isLocalMediaAttachment = (attachment) => isMediaAttachment(attachment) && isLocalAttachment(attachment);
 export const isSvgAttachment = (attachment) => {
     const filename = attachment.fallback || '';
     return filename.toLowerCase().endsWith('.svg');
 };
-export const divMod = (num, divisor) => [Math.floor(num / divisor), num % divisor];
+export const divMod = (num, divisor) => [
+    Math.floor(num / divisor),
+    num % divisor,
+];
 export const displayDuration = (totalSeconds) => {
     if (!totalSeconds || totalSeconds < 0)
         return '00:00';

package/dist/components/AutoCompleteTextarea/List.js

@@ -19,7 +19,7 @@ export const List = ({ className, component, currentTrigger, dropdownScroll, get
         }
         return item.key;
     };
-    const findItemIndex = useCallback((item) => values.findIndex((value) => (value.id ? value.id === item.id : value.name === item.name)), [values]);
+    const findItemIndex = useCallback((item) => values.findIndex((value) => value.id ? value.id === item.id : value.name === item.name), [values]);
     const modifyText = (value) => {
         if (!value)
             return;
@@ -57,7 +57,8 @@ export const List = ({ className, component, currentTrigger, dropdownScroll, get
                 return newIndex;
             });
         }
-        if ((event.key === 'Enter' || event.key === 'Tab') && selectedItemIndex !== undefined) {
+        if ((event.key === 'Enter' || event.key === 'Tab') &&
+            selectedItemIndex !== undefined) {
             handleClick(event, values[selectedItemIndex]);
         }
         return null;

package/dist/components/AutoCompleteTextarea/Textarea.js

@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Textarea from 'react-textarea-autosize';
 import getCaretCoordinates from 'textarea-caret';
-import { isValidElementType } from 'react-is';
 import clsx from 'clsx';
 import { List as DefaultSuggestionList } from './List';
 import { DEFAULT_CARET_POSITION, defaultScrollToItem, errorMessage, triggerPropsCheck, } from './utils';
@@ -112,7 +111,7 @@ export class ReactTextareaAutocomplete extends React.Component {
         };
         this._onSelect = (newToken) => {
             const { closeCommandsList, closeMentionsList, onChange, showCommandsList, showMentionsList, } = this.props;
-            const { currentTrigger: stateTrigger, selectionEnd, value: textareaValue } = this.state;
+            const { currentTrigger: stateTrigger, selectionEnd, value: textareaValue, } = this.state;
             const currentTrigger = showCommandsList ? '/' : showMentionsList ? '@' : stateTrigger;
             if (!currentTrigger)
                 return;
@@ -242,9 +241,6 @@ export class ReactTextareaAutocomplete extends React.Component {
                 if (!Array.isArray(data)) {
                     throw new Error('Trigger provider has to provide an array!');
                 }
-                if (!isValidElementType(component)) {
-                    throw new Error('Component should be defined!');
-                }
                 // throw away if we resolved old trigger
                 if (currentTrigger !== this.state.currentTrigger)
                     return;
@@ -317,7 +313,6 @@ export class ReactTextareaAutocomplete extends React.Component {
                 'trigger',
                 'value',
             ];
-            // eslint-disable-next-line
             for (const prop in props) {
                 if (notSafe.includes(prop))
                     delete props[prop];
@@ -354,7 +349,8 @@ export class ReactTextareaAutocomplete extends React.Component {
                 const regex = new RegExp(`(?!^|\\W)?[${triggerTokens}]${triggerNorWhitespace}\\s?${triggerNorWhitespace}$`, 'g');
                 const tokenMatch = value.slice(0, selectionEnd).match(regex);
                 lastToken = tokenMatch && tokenMatch[tokenMatch.length - 1].trim();
-                currentTrigger = (lastToken && Object.keys(trigger).find((a) => a === lastToken[0])) || null;
+                currentTrigger =
+                    (lastToken && Object.keys(trigger).find((a) => a === lastToken[0])) || null;
             }
             /*
              if we lost the trigger token or there is no following character we want to close

package/dist/components/AutoCompleteTextarea/utils.js

@@ -1,4 +1,3 @@
-import { isValidElementType } from 'react-is';
 export const DEFAULT_CARET_POSITION = 'next';
 export function defaultScrollToItem(container, item) {
     if (!item)
@@ -7,10 +6,10 @@ export function defaultScrollToItem(container, item) {
     const containerHight = parseInt(getComputedStyle(container).getPropertyValue('height'), 10) - itemHeight;
     const actualScrollTop = container.scrollTop;
     const itemOffsetTop = item.offsetTop;
-    if (itemOffsetTop < actualScrollTop + containerHight && actualScrollTop < itemOffsetTop) {
+    if (itemOffsetTop < actualScrollTop + containerHight &&
+        actualScrollTop < itemOffsetTop) {
         return;
     }
-    // eslint-disable-next-line
     container.scrollTop = itemOffsetTop;
 }
 export const errorMessage = (message) => console.error(`RTA: dataProvider fails: ${message}
@@ -26,10 +25,7 @@ export const triggerPropsCheck = ({ trigger }) => {
         }
         // $FlowFixMe
         const triggerSetting = settings;
-        const { callback, component, dataProvider, output } = triggerSetting;
-        if (!isValidElementType(component)) {
-            return Error('Invalid prop trigger: component should be defined.');
-        }
+        const { callback, dataProvider, output } = triggerSetting;
         if (!dataProvider || typeof dataProvider !== 'function') {
             return Error('Invalid prop trigger: dataProvider should be defined.');
         }

package/dist/components/Avatar/ChannelAvatar.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { Avatar, GroupAvatar } from './index';
 export const ChannelAvatar = ({ groupChannelDisplayInfo, image, name, user, ...sharedProps }) => {
     if (groupChannelDisplayInfo) {
-        return React.createElement(GroupAvatar, { groupChannelDisplayInfo: groupChannelDisplayInfo, ...sharedProps });
+        return (React.createElement(GroupAvatar, { groupChannelDisplayInfo: groupChannelDisplayInfo, ...sharedProps }));
     }
     return React.createElement(Avatar, { image: image, name: name, user: user, ...sharedProps });
 };

package/dist/components/Channel/Channel.d.ts

@@ -6,7 +6,7 @@ import { ComponentContextValue, StreamMessage } from '../../context';
 import type { MessageInputProps } from '../MessageInput';
 import type { ChannelUnreadUiState, CustomTrigger, DefaultStreamChatGenerics, GiphyVersions, ImageAttachmentSizeHandler, SendMessageOptions, UpdateMessageOptions, VideoAttachmentSizeHandler } from '../../types/types';
 import type { URLEnrichmentConfig } from '../MessageInput/hooks/useLinkPreviews';
-type ChannelPropsForwardedToComponentContext<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Pick<ComponentContextValue<StreamChatGenerics>, 'Attachment' | 'AttachmentPreviewList' | 'AttachmentSelector' | 'AttachmentSelectorInitiationButtonContents' | 'AudioRecorder' | 'AutocompleteSuggestionItem' | 'AutocompleteSuggestionList' | 'Avatar' | 'BaseImage' | 'CooldownTimer' | 'CustomMessageActionsList' | 'DateSeparator' | 'EditMessageInput' | 'EmojiPicker' | 'emojiSearchIndex' | 'EmptyStateIndicator' | 'FileUploadIcon' | 'GiphyPreviewMessage' | 'HeaderComponent' | 'Input' | 'LinkPreviewList' | 'LoadingIndicator' | 'Message' | 'MessageActions' | 'MessageBouncePrompt' | 'MessageDeleted' | 'MessageListNotifications' | 'MessageListMainPanel' | 'MessageNotification' | 'MessageOptions' | 'MessageRepliesCountButton' | 'MessageStatus' | 'MessageSystem' | 'MessageTimestamp' | 'ModalGallery' | 'PinIndicator' | 'PollActions' | 'PollContent' | 'PollCreationDialog' | 'PollHeader' | 'PollOptionSelector' | 'QuotedMessage' | 'QuotedMessagePreview' | 'QuotedPoll' | 'reactionOptions' | 'ReactionSelector' | 'ReactionsList' | 'SendButton' | 'StartRecordingAudioButton' | 'ThreadHead' | 'ThreadHeader' | 'ThreadStart' | 'Timestamp' | 'TriggerProvider' | 'TypingIndicator' | 'UnreadMessagesNotification' | 'UnreadMessagesSeparator' | 'VirtualMessage' | 'StopAIGenerationButton' | 'StreamedMessageText'>;
+type ChannelPropsForwardedToComponentContext<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Pick<ComponentContextValue<StreamChatGenerics>, 'Attachment' | 'AttachmentPreviewList' | 'AttachmentSelector' | 'AttachmentSelectorInitiationButtonContents' | 'AudioRecorder' | 'AutocompleteSuggestionItem' | 'AutocompleteSuggestionList' | 'Avatar' | 'BaseImage' | 'CooldownTimer' | 'CustomMessageActionsList' | 'DateSeparator' | 'EditMessageInput' | 'EmojiPicker' | 'emojiSearchIndex' | 'EmptyStateIndicator' | 'FileUploadIcon' | 'GiphyPreviewMessage' | 'HeaderComponent' | 'Input' | 'LinkPreviewList' | 'LoadingIndicator' | 'Message' | 'MessageActions' | 'MessageBouncePrompt' | 'MessageDeleted' | 'MessageListNotifications' | 'MessageListMainPanel' | 'MessageNotification' | 'MessageOptions' | 'MessageRepliesCountButton' | 'MessageStatus' | 'MessageSystem' | 'MessageTimestamp' | 'ModalGallery' | 'PinIndicator' | 'PollActions' | 'PollContent' | 'PollCreationDialog' | 'PollHeader' | 'PollOptionSelector' | 'QuotedMessage' | 'QuotedMessagePreview' | 'QuotedPoll' | 'reactionOptions' | 'ReactionSelector' | 'ReactionsList' | 'ReactionsListModal' | 'SendButton' | 'StartRecordingAudioButton' | 'ThreadHead' | 'ThreadHeader' | 'ThreadStart' | 'Timestamp' | 'TriggerProvider' | 'TypingIndicator' | 'UnreadMessagesNotification' | 'UnreadMessagesSeparator' | 'VirtualMessage' | 'StopAIGenerationButton' | 'StreamedMessageText'>;
 export type ChannelProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, V extends CustomTrigger = CustomTrigger> = ChannelPropsForwardedToComponentContext<StreamChatGenerics> & {
     /** List of accepted file types */
     acceptedFiles?: string[];

package/dist/components/Channel/Channel.js

@@ -4,7 +4,7 @@ import defaultsDeep from 'lodash.defaultsdeep';
 import throttle from 'lodash.throttle';
 import { nanoid } from 'nanoid';
 import clsx from 'clsx';
-import { channelReducer, initialState } from './channelState';
+import { initialState, makeChannelReducer } from './channelState';
 import { useCreateChannelStateContext } from './hooks/useCreateChannelStateContext';
 import { useCreateTypingContext } from './hooks/useCreateTypingContext';
 import { useEditMessageHandler } from './hooks/useEditMessageHandler';
@@ -53,7 +53,7 @@ const ChannelInner = (props) => {
     const channelQueryOptions = useMemo(() => defaultsDeep(propChannelQueryOptions, {
         messages: { limit: DEFAULT_INITIAL_CHANNEL_PAGE_SIZE },
     }), [propChannelQueryOptions]);
-    const { client, customClasses, latestMessageDatesByChannels, mutes, } = useChatContext('Channel');
+    const { client, customClasses, latestMessageDatesByChannels, mutes } = useChatContext('Channel');
     const { t } = useTranslationContext('Channel');
     const chatContainerClass = getChatContainerClass(customClasses?.chatContainer);
     const windowsEmojiClass = useImageFlagEmojisOnWindowsClass();
@@ -63,6 +63,7 @@ const ChannelInner = (props) => {
     const [quotedMessage, setQuotedMessage] = useState();
     const [channelUnreadUiState, _setChannelUnreadUiState] = useState();
     const notificationTimeouts = useRef([]);
+    const channelReducer = useMemo(() => makeChannelReducer(), []);
     const [state, dispatch] = useReducer(channelReducer, 
     // channel.initialized === false if client.channel().query() was not called, e.g. ChannelList is not used
     // => Channel will call channel.watch() in useLayoutEffect => state.loading is used to signal the watch() call state
@@ -73,7 +74,7 @@ const ChannelInner = (props) => {
     });
     const isMounted = useIsMounted();
     const originalTitle = useRef('');
-    const lastRead = useRef();
+    const lastRead = useRef(undefined);
     const online = useRef(true);
     const channelCapabilitiesArray = channel.data?.own_capabilities;
     const throttledCopyStateFromChannel = throttle(() => dispatch({ channel, type: 'copyStateFromChannelOnEvent' }), 500, {
@@ -114,7 +115,14 @@ const ChannelInner = (props) => {
         catch (e) {
             console.error(t('Failed to mark channel as read'));
         }
-    }, 500, { leading: true, trailing: false }), [activeUnreadHandler, channel, channelConfig, doMarkReadRequest, setChannelUnreadUiState, t]);
+    }, 500, { leading: true, trailing: false }), [
+        activeUnreadHandler,
+        channel,
+        channelConfig,
+        doMarkReadRequest,
+        setChannelUnreadUiState,
+        t,
+    ]);
     const handleEvent = async (event) => {
         if (event.message) {
             dispatch({
@@ -134,7 +142,9 @@ const ChannelInner = (props) => {
         if (event.type === 'message.new') {
             const mainChannelUpdated = !event.message?.parent_id || event.message?.show_in_channel;
             if (mainChannelUpdated) {
-                if (document.hidden && channelConfig?.read_events && !channel.muteStatus().muted) {
+                if (document.hidden &&
+                    channelConfig?.read_events &&
+                    !channel.muteStatus().muted) {
                     const unread = channel.countUnread(lastRead.current);
                     if (activeUnreadHandler) {
                         activeUnreadHandler(unread, originalTitle.current);
@@ -282,11 +292,15 @@ const ChannelInner = (props) => {
         dispatch({ hasMore, messages, type: 'loadMoreFinished' });
     }, 2000, { leading: true, trailing: true }), []);
     const loadMore = async (limit = DEFAULT_NEXT_CHANNEL_PAGE_SIZE) => {
-        if (!online.current || !window.navigator.onLine || !channel.state.messagePagination.hasPrev)
+        if (!online.current ||
+            !window.navigator.onLine ||
+            !channel.state.messagePagination.hasPrev)
             return 0;
         // prevent duplicate loading events...
         const oldestMessage = state?.messages?.[0];
-        if (state.loadingMore || state.loadingMoreNewer || oldestMessage?.status !== 'received') {
+        if (state.loadingMore ||
+            state.loadingMoreNewer ||
+            oldestMessage?.status !== 'received') {
             return 0;
         }
         dispatch({ loadingMore: true, type: 'setLoadingMore' });
@@ -308,7 +322,9 @@ const ChannelInner = (props) => {
         return queryResponse.messages.length;
     };
     const loadMoreNewer = async (limit = DEFAULT_NEXT_CHANNEL_PAGE_SIZE) => {
-        if (!online.current || !window.navigator.onLine || !channel.state.messagePagination.hasNext)
+        if (!online.current ||
+            !window.navigator.onLine ||
+            !channel.state.messagePagination.hasNext)
             return 0;
         const newestMessage = state?.messages?.[state?.messages?.length - 1];
         if (state.loadingMore || state.loadingMoreNewer)
@@ -538,9 +554,7 @@ const ChannelInner = (props) => {
         catch (error) {
             // error response isn't usable so needs to be stringified then parsed
             const stringError = JSON.stringify(error);
-            const parsedError = (stringError
-                ? JSON.parse(stringError)
-                : {});
+            const parsedError = (stringError ? JSON.parse(stringError) : {});
             // Handle the case where the message already exists
             // (typically, when retrying to send a message).
             // If the message already exists, we can assume it was sent successfully,
@@ -564,7 +578,7 @@ const ChannelInner = (props) => {
                     status: 'failed',
                 });
                 thread?.upsertReplyLocally({
-                    // @ts-expect-error
+                    // @ts-expect-error message type mismatch
                     message: {
                         ...message,
                         error: parsedError,
@@ -591,7 +605,7 @@ const ChannelInner = (props) => {
             user: client.user,
         };
         thread?.upsertReplyLocally({
-            // @ts-expect-error
+            // @ts-expect-error message type mismatch
             message: messagePreview,
         });
         updateMessage(messagePreview);
@@ -732,7 +746,7 @@ const ChannelInner = (props) => {
         jumpToLatestMessage,
         setChannelUnreadUiState,
     ]);
-    // @ts-expect-error
+    // @ts-expect-error message type mismatch
     const componentContextValue = useMemo(() => ({
         Attachment: props.Attachment,
         AttachmentPreviewList: props.AttachmentPreviewList,
@@ -780,6 +794,7 @@ const ChannelInner = (props) => {
         reactionOptions: props.reactionOptions,
         ReactionSelector: props.ReactionSelector,
         ReactionsList: props.ReactionsList,
+        ReactionsListModal: props.ReactionsListModal,
         SendButton: props.SendButton,
         StartRecordingAudioButton: props.StartRecordingAudioButton,
         StopAIGenerationButton: props.StopAIGenerationButton,
@@ -838,6 +853,7 @@ const ChannelInner = (props) => {
         props.QuotedPoll,
         props.ReactionSelector,
         props.ReactionsList,
+        props.ReactionsListModal,
         props.SendButton,
         props.StartRecordingAudioButton,
         props.ThreadHead,

package/dist/components/Channel/channelState.d.ts

@@ -1,4 +1,3 @@
-import type { Reducer } from 'react';
 import type { Channel, MessageResponse, ChannelState as StreamChannelState } from 'stream-chat';
 import type { ChannelState, StreamMessage } from '../../context/ChannelStateContext';
 import type { DefaultStreamChatGenerics } from '../../types/types';
@@ -61,8 +60,7 @@ export type ChannelStateReducerAction<StreamChatGenerics extends DefaultStreamCh
 } | {
     type: 'jumpToLatestMessage';
 };
-export type ChannelStateReducer<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Reducer<ChannelState<StreamChatGenerics>, ChannelStateReducerAction<StreamChatGenerics>>;
-export declare const channelReducer: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(state: ChannelState<StreamChatGenerics>, action: ChannelStateReducerAction<StreamChatGenerics>) => ChannelState<StreamChatGenerics>;
+export declare const makeChannelReducer: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>() => (state: ChannelState<StreamChatGenerics>, action: ChannelStateReducerAction<StreamChatGenerics>) => ChannelState<StreamChatGenerics>;
 export declare const initialState: {
     error: null;
     hasMore: boolean;

package/dist/components/Channel/channelState.js

@@ -1,4 +1,4 @@
-export const channelReducer = (state, action) => {
+export const makeChannelReducer = () => (state, action) => {
     switch (action.type) {
         case 'closeThread': {
             return {
@@ -103,7 +103,9 @@ export const channelReducer = (state, action) => {
                 ...state,
                 thread: message,
                 threadHasMore: true,
-                threadMessages: message.id ? { ...channel.state.threads }[message.id] || [] : [],
+                threadMessages: message.id
+                    ? { ...channel.state.threads }[message.id] || []
+                    : [],
                 threadSuppressAutoscroll: false,
             };
         }
@@ -144,8 +146,12 @@ export const channelReducer = (state, action) => {
                 return state;
             return {
                 ...state,
-                thread: message?.id === state.thread.id ? channel.state.formatMessage(message) : state.thread,
-                threadMessages: state.thread?.id ? { ...channel.state.threads }[state.thread.id] || [] : [],
+                thread: message?.id === state.thread.id
+                    ? channel.state.formatMessage(message)
+                    : state.thread,
+                threadMessages: state.thread?.id
+                    ? { ...channel.state.threads }[state.thread.id] || []
+                    : [],
             };
         }
         default:

package/dist/components/Channel/hooks/useCreateChannelStateContext.js

@@ -1,14 +1,16 @@
 import { useMemo } from 'react';
 import { isDate, isDayOrMoment } from '../../../i18n';
 export const useCreateChannelStateContext = (value) => {
-    const { acceptedFiles, channel, channelCapabilitiesArray = [], channelConfig, debounceURLEnrichmentMs, dragAndDropWindow, enrichURLForPreview, giphyVersion, error, findURLFn, hasMore, hasMoreNewer, imageAttachmentSizeHandler, suppressAutoscroll, highlightedMessageId, loading, loadingMore, maxNumberOfFiles, members, messages = [], multipleUploads, mutes, notifications, onLinkPreviewDismissed, pinnedMessages, quotedMessage, read = {}, shouldGenerateVideoThumbnail, skipMessageDataMemoization, thread, threadHasMore, threadLoadingMore, threadMessages = [], channelUnreadUiState, videoAttachmentSizeHandler, watcherCount, watcher_count, watchers, } = value;
+    const { acceptedFiles, channel, channelCapabilitiesArray = [], channelConfig, channelUnreadUiState, debounceURLEnrichmentMs, dragAndDropWindow, enrichURLForPreview, error, findURLFn, giphyVersion, hasMore, hasMoreNewer, highlightedMessageId, imageAttachmentSizeHandler, loading, loadingMore, maxNumberOfFiles, members, messages = [], multipleUploads, mutes, notifications, onLinkPreviewDismissed, pinnedMessages, quotedMessage, read = {}, shouldGenerateVideoThumbnail, skipMessageDataMemoization, suppressAutoscroll, thread, threadHasMore, threadLoadingMore, threadMessages = [], videoAttachmentSizeHandler, watcher_count, watcherCount, watchers, } = value;
     const channelId = channel.cid;
     const lastRead = channel.initialized && channel.lastRead()?.getTime();
     const membersLength = Object.keys(members || []).length;
     const notificationsLength = notifications.length;
     const readUsers = Object.values(read);
     const readUsersLength = readUsers.length;
-    const readUsersLastReads = readUsers.map(({ last_read }) => last_read.toISOString()).join();
+    const readUsersLastReads = readUsers
+        .map(({ last_read }) => last_read.toISOString())
+        .join();
     const threadMessagesLength = threadMessages?.length;
     const channelCapabilities = {};
     channelCapabilitiesArray.forEach((capability) => {
@@ -17,7 +19,7 @@ export const useCreateChannelStateContext = (value) => {
     const memoizedMessageData = skipMessageDataMemoization
         ? messages
         : messages
-            .map(({ deleted_at, latest_reactions, pinned, reply_count, status, updated_at, user }) => `${deleted_at}${latest_reactions ? latest_reactions.map(({ type }) => type).join() : ''}${pinned}${reply_count}${status}${updated_at && (isDayOrMoment(updated_at) || isDate(updated_at))
+            .map(({ deleted_at, latest_reactions, pinned, reply_count, status, updated_at, user, }) => `${deleted_at}${latest_reactions ? latest_reactions.map(({ type }) => type).join() : ''}${pinned}${reply_count}${status}${updated_at && (isDayOrMoment(updated_at) || isDate(updated_at))
             ? updated_at.toISOString()
             : updated_at || ''}${user?.updated_at}`)
             .join();

package/dist/components/Channel/hooks/useIsMounted.d.ts

@@ -1,2 +1,2 @@
 /// <reference types="react" />
-export declare const useIsMounted: () => import("react").MutableRefObject<boolean>;
+export declare const useIsMounted: () => import("react").RefObject<boolean>;

package/dist/components/Channel/hooks/useMentionsHandlers.js

@@ -1,6 +1,7 @@
 import { useCallback } from 'react';
 export const useMentionsHandlers = (onMentionsHover, onMentionsClick) => useCallback((event, mentioned_users) => {
-    if ((!onMentionsHover && !onMentionsClick) || !(event.target instanceof HTMLElement)) {
+    if ((!onMentionsHover && !onMentionsClick) ||
+        !(event.target instanceof HTMLElement)) {
         return;
     }
     const target = event.target;
@@ -13,7 +14,9 @@ export const useMentionsHandlers = (onMentionsHover, onMentionsClick) => useCall
             event.type === 'mouseover') {
             onMentionsHover(event, user);
         }
-        if (onMentionsClick && event.type === 'click' && typeof onMentionsClick === 'function') {
+        if (onMentionsClick &&
+            event.type === 'click' &&
+            typeof onMentionsClick === 'function') {
             onMentionsClick(event, user);
         }
     }

package/dist/components/Channel/utils.js

@@ -57,7 +57,8 @@ export const findInMsgSetByDate = (targetDate, msgSet, exact = false) => {
         else
             right = middle - 1;
     }
-    if (!exact || new Date(msgSet[left].created_at).getTime() === targetTimestamp) {
+    if (!exact ||
+        new Date(msgSet[left].created_at).getTime() === targetTimestamp) {
         return { index: left, target: msgSet[left] };
     }
     return { index: -1 };

package/dist/components/ChannelHeader/ChannelHeader.js

@@ -9,7 +9,7 @@ import { useTranslationContext } from '../../context/TranslationContext';
  * The ChannelHeader component renders some basic information about a Channel.
  */
 export const ChannelHeader = (props) => {
-    const { Avatar = DefaultAvatar, MenuIcon = DefaultMenuIcon, image: overrideImage, live, title: overrideTitle, } = props;
+    const { Avatar = DefaultAvatar, image: overrideImage, live, MenuIcon = DefaultMenuIcon, title: overrideTitle, } = props;
     const { channel, watcher_count } = useChannelStateContext('ChannelHeader');
     const { openMobileNav } = useChatContext('ChannelHeader');
     const { t } = useTranslationContext('ChannelHeader');