stream-chat-react 12.9.0 → 12.11.0

package/dist/components/Dialog/PromptDialog.d.ts

@@ -5,4 +5,4 @@ export type ConfirmationDialogProps = {
     className?: string;
     title?: string;
 };
-export declare const PromptDialog: ({ actions, className, prompt, title }: ConfirmationDialogProps) => React.JSX.Element;
+export declare const PromptDialog: ({ actions, className, prompt, title, }: ConfirmationDialogProps) => React.JSX.Element;

package/dist/components/Dialog/PromptDialog.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import clsx from 'clsx';
-export const PromptDialog = ({ actions, className, prompt, title }) => (React.createElement("div", { className: clsx('str-chat__dialog str-chat__dialog--prompt', className) },
+export const PromptDialog = ({ actions, className, prompt, title, }) => (React.createElement("div", { className: clsx('str-chat__dialog str-chat__dialog--prompt', className) },
     React.createElement("div", { className: 'str-chat__dialog__body' },
         title && React.createElement("div", { className: 'str-chat__dialog__title' }, title),
         React.createElement("div", { className: 'str-chat__dialog__prompt' }, prompt)),

package/dist/components/EventComponent/EventComponent.js

@@ -6,7 +6,7 @@ import { getDateString } from '../../i18n/utils';
  * Component to display system and channel event messages
  */
 const UnMemoizedEventComponent = (props) => {
-    const { calendar, calendarFormats, format, Avatar = DefaultAvatar, message } = props;
+    const { Avatar = DefaultAvatar, calendar, calendarFormats, format, message } = props;
     const { t, tDateTimeParser } = useTranslationContext('EventComponent');
     const { created_at = '', event, text, type } = message;
     const getDateOptions = { messageCreatedAt: created_at.toString(), tDateTimeParser };

package/dist/components/Gallery/BaseImage.d.ts

@@ -1,5 +1,3 @@
 import React from 'react';
 export type BaseImageProps = React.ComponentPropsWithRef<'img'>;
-export declare const BaseImage: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & {
-    ref?: ((instance: HTMLImageElement | null) => void) | React.RefObject<HTMLImageElement> | null | undefined;
-}, "ref"> & React.RefAttributes<HTMLImageElement>>;
+export declare const BaseImage: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;

package/dist/components/Gallery/Gallery.js

@@ -29,11 +29,19 @@ const UnMemoizedGallery = (props) => {
                 images[lastImageIndexInPreview].image_url ||
                 images[lastImageIndexInPreview].thumb_url})`,
             ...image.style,
-        }, ...(innerRefs?.current && { ref: (r) => (innerRefs.current[i] = r) }) },
+        }, ...(innerRefs?.current && {
+            ref: (r) => {
+                innerRefs.current[i] = r;
+            },
+        }) },
         React.createElement("p", null, t('{{ imageCount }} more', {
             imageCount: images.length - countImagesDisplayedInPreview,
         })))) : (React.createElement("button", { className: 'str-chat__gallery-image', "data-testid": 'gallery-image', key: `gallery-image-${i}`, onClick: () => toggleModal(i) },
-        React.createElement(BaseImage, { alt: image?.fallback || imageFallbackTitle, src: sanitizeUrl(image.previewUrl || image.image_url || image.thumb_url), style: image.style, title: image?.fallback || imageFallbackTitle, ...(innerRefs?.current && { ref: (r) => (innerRefs.current[i] = r) }) }))));
+        React.createElement(BaseImage, { alt: image?.fallback || imageFallbackTitle, src: sanitizeUrl(image.previewUrl || image.image_url || image.thumb_url), style: image.style, title: image?.fallback || imageFallbackTitle, ...(innerRefs?.current && {
+                ref: (r) => {
+                    innerRefs.current[i] = r;
+                },
+            }) }))));
     const className = clsx('str-chat__gallery', {
         'str-chat__gallery--square': images.length > lastImageIndexInPreview,
         'str-chat__gallery-two-rows': images.length > 2,

package/dist/components/Gallery/Image.js

@@ -8,7 +8,7 @@ import { useComponentContext } from '../../context';
  * A simple component that displays an image.
  */
 export const ImageComponent = (props) => {
-    const { dimensions = {}, fallback, image_url, thumb_url, innerRef, previewUrl, style } = props;
+    const { dimensions = {}, fallback, image_url, innerRef, previewUrl, style, thumb_url, } = props;
     const [modalIsOpen, setModalIsOpen] = useState(false);
     const { BaseImage = DefaultBaseImage, ModalGallery = DefaultModalGallery } = useComponentContext('ImageComponent');
     const imageSrc = sanitizeUrl(previewUrl || image_url || thumb_url);

package/dist/components/Gallery/ModalGallery.js

@@ -18,8 +18,8 @@ export const ModalGallery = (props) => {
             originalAlt: t('User uploaded content'),
             source: imageSrc,
         };
-    }), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [images]);
-    return (React.createElement(ImageGallery, { items: formattedArray, renderItem: renderItem, showIndex: true, showPlayButton: false, showThumbnails: false, startIndex: index }));
+    }), [images, t]);
+    return (
+    // @ts-expect-error ignore the TS error as react-image-gallery was on @types/react@18 while stream-chat-react being upgraded to React 19 (https://github.com/xiaolin/react-image-gallery/issues/809)
+    React.createElement(ImageGallery, { items: formattedArray, renderItem: renderItem, showIndex: true, showPlayButton: false, showThumbnails: false, startIndex: index }));
 };

package/dist/components/InfiniteScrollPaginator/InfiniteScroll.js

@@ -26,10 +26,10 @@ export const InfiniteScroll = (props) => {
     const loadPreviousPageFn = loadPreviousPage || loadMore;
     const hasNextPageFlag = hasNextPage || hasMoreNewer;
     const hasPreviousPageFlag = hasPreviousPage || hasMore;
-    const scrollComponent = useRef();
-    const previousOffset = useRef();
-    const previousReverseOffset = useRef();
-    const scrollListenerRef = useRef();
+    const scrollComponent = useRef(undefined);
+    const previousOffset = useRef(undefined);
+    const previousReverseOffset = useRef(undefined);
+    const scrollListenerRef = useRef(undefined);
     scrollListenerRef.current = () => {
         const element = scrollComponent.current;
         if (!element || element.offsetParent === null) {
@@ -44,7 +44,8 @@ export const InfiniteScroll = (props) => {
         }
         if (isLoading)
             return;
-        if (previousOffset.current === offset && previousReverseOffset.current === reverseOffset)
+        if (previousOffset.current === offset &&
+            previousReverseOffset.current === reverseOffset)
             return;
         previousOffset.current = offset;
         previousReverseOffset.current = reverseOffset;
@@ -54,7 +55,9 @@ export const InfiniteScroll = (props) => {
             hasPreviousPageFlag) {
             loadPreviousPageFn();
         }
-        if (offset < Number(threshold) && typeof loadNextPageFn === 'function' && hasNextPageFlag) {
+        if (offset < Number(threshold) &&
+            typeof loadNextPageFn === 'function' &&
+            hasNextPageFlag) {
             loadNextPageFn();
         }
     };

package/dist/components/InfiniteScrollPaginator/InfiniteScrollPaginator.js

@@ -12,7 +12,7 @@ const mousewheelListener = (event) => {
     }
 };
 export const InfiniteScrollPaginator = (props) => {
-    const { children, listenToScroll, loadNextOnScrollToBottom, loadNextOnScrollToTop, threshold = DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD, useCapture = false, className, ...componentProps } = props;
+    const { children, className, listenToScroll, loadNextOnScrollToBottom, loadNextOnScrollToTop, threshold = DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD, useCapture = false, ...componentProps } = props;
     const rootRef = useRef(null);
     const childRef = useRef(null);
     const scrollListener = useMemo(() => debounce(() => {

package/dist/components/LoadMore/LoadMorePaginator.js

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { LoadMoreButton as DefaultLoadMoreButton } from './LoadMoreButton';
+import { LoadMoreButton as DefaultLoadMoreButton, } from './LoadMoreButton';
 import { deprecationAndReplacementWarning } from '../../utils/deprecationWarning';
 export const UnMemoizedLoadMorePaginator = (props) => {
     const { children, hasNextPage, isLoading, LoadMoreButton = DefaultLoadMoreButton, loadNextPage, refreshing, reverse, } = props;

package/dist/components/MML/MML.js

@@ -1,6 +1,7 @@
 import React, { Suspense } from 'react';
 import { useChatContext } from '../../context/ChatContext';
 const MMLReact = React.lazy(async () => {
+    // eslint-disable-next-line import/no-extraneous-dependencies
     const mml = await import('mml-react');
     return { default: mml.MML };
 });

package/dist/components/MediaRecorder/transcode/wav.js

@@ -27,7 +27,7 @@ const WAV_HEADER_FLAGS = {
     RIFF: fourCharsToInt('RIFF'),
     WAVE: fourCharsToInt('WAVE'),
 };
-const writeWavHeader = ({ arrayBuffer, channelCount, sampleRate }) => {
+const writeWavHeader = ({ arrayBuffer, channelCount, sampleRate, }) => {
     const byteRate = sampleRate * channelCount * BYTES_PER_SAMPLE; // bytes/sec
     const blockAlign = channelCount * BYTES_PER_SAMPLE;
     const dataView = new DataView(arrayBuffer);
@@ -84,7 +84,9 @@ const writeWavAudioData = ({ arrayBuffer, dataByChannel }) => {
     dataByChannel.forEach((channelData, channelIndex) => {
         let writeOffset = WAV_HEADER_LENGTH_BYTES + channelCount * channelIndex;
         channelData.forEach((float32Value) => {
-            dataView.setInt16(writeOffset, float32Value < 0 ? Math.max(-1, float32Value) * 32768 : Math.min(1, float32Value) * 32767, true);
+            dataView.setInt16(writeOffset, float32Value < 0
+                ? Math.max(-1, float32Value) * 32768
+                : Math.min(1, float32Value) * 32767, true);
             writeOffset += channelCount * BYTES_PER_SAMPLE;
         });
     });
@@ -92,7 +94,8 @@ const writeWavAudioData = ({ arrayBuffer, dataByChannel }) => {
 export const encodeToWaw = async (file, sampleRate) => {
     const audioBuffer = await renderAudio(await toAudioBuffer(file), sampleRate);
     const numberOfSamples = audioBuffer.duration * sampleRate;
-    const fileSizeBytes = numberOfSamples * audioBuffer.numberOfChannels * BYTES_PER_SAMPLE + WAV_HEADER_LENGTH_BYTES;
+    const fileSizeBytes = numberOfSamples * audioBuffer.numberOfChannels * BYTES_PER_SAMPLE +
+        WAV_HEADER_LENGTH_BYTES;
     const arrayBuffer = new ArrayBuffer(fileSizeBytes);
     writeWavHeader({ arrayBuffer, channelCount: audioBuffer.numberOfChannels, sampleRate });
     writeWavAudioData({ arrayBuffer, dataByChannel: splitDataByChannel(audioBuffer) });

package/dist/components/Message/FixedHeightMessage.js

@@ -18,8 +18,8 @@ const selectColor = (number, dark) => {
 };
 const hashUserId = (userId) => {
     const hash = userId.split('').reduce((acc, c) => {
-        acc = (acc << 5) - acc + c.charCodeAt(0); // eslint-disable-line
-        return acc & acc; // eslint-disable-line no-bitwise
+        acc = (acc << 5) - acc + c.charCodeAt(0);
+        return acc & acc;
     }, 0);
     return Math.abs(hash) / 10 ** Math.ceil(Math.log10(Math.abs(hash) + 1));
 };
@@ -27,7 +27,7 @@ const getUserColor = (theme, userId) => selectColor(hashUserId(userId), theme.in
 const UnMemoizedFixedHeightMessage = (props) => {
     const { groupedByUser: propGroupedByUser, message: propMessage } = props;
     const { theme } = useChatContext('FixedHeightMessage');
-    const { groupedByUser: contextGroupedByUser, message: contextMessage, } = useMessageContext('FixedHeightMessage');
+    const { groupedByUser: contextGroupedByUser, message: contextMessage } = useMessageContext('FixedHeightMessage');
     const { MessageDeleted = DefaultMessageDeleted } = useComponentContext('FixedHeightMessage');
     const { userLanguage } = useTranslationContext('FixedHeightMessage');
     const groupedByUser = propGroupedByUser !== undefined ? propGroupedByUser : contextGroupedByUser;
@@ -35,11 +35,9 @@ const UnMemoizedFixedHeightMessage = (props) => {
     const handleAction = useActionHandler(message);
     const handleDelete = useDeleteHandler(message);
     const role = useUserRole(message);
-    const messageTextToRender = message?.i18n?.[`${userLanguage}_text`] || message?.text;
-    const renderedText = useMemo(() => renderText(messageTextToRender, message.mentioned_users), [
-        message.mentioned_users,
-        messageTextToRender,
-    ]);
+    const messageTextToRender = message?.i18n?.[`${userLanguage}_text`] ||
+        message?.text;
+    const renderedText = useMemo(() => renderText(messageTextToRender, message.mentioned_users), [message.mentioned_users, messageTextToRender]);
     const userId = message.user?.id || '';
     const userColor = useMemo(() => getUserColor(theme, userId), [userId, theme]);
     const messageActionsHandler = useCallback(() => getMessageActions(['delete'], { canDelete: role.canDelete }), [role]);

package/dist/components/Message/Message.js

@@ -21,7 +21,8 @@ const MessageWithContext = (props) => {
         read &&
         (!read[client.user.id] ||
             (message?.created_at &&
-                new Date(message.created_at).getTime() > read[client.user.id].last_read.getTime()))), [client, isMyMessage, message.created_at, read]);
+                new Date(message.created_at).getTime() >
+                    read[client.user.id].last_read.getTime()))), [client, isMyMessage, message.created_at, read]);
     const messageActionsHandler = useCallback(() => getMessageActions(messageActions, {
         canDelete,
         canEdit,

package/dist/components/Message/MessageEditedTimestamp.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import clsx from 'clsx';
-import { useComponentContext, useMessageContext, useTranslationContext } from '../../context';
+import { useComponentContext, useMessageContext, useTranslationContext, } from '../../context';
 import { Timestamp as DefaultTimestamp } from './Timestamp';
 import { isMessageEdited } from './utils';
 export function MessageEditedTimestamp({ message: propMessage, open, ...timestampProps }) {

package/dist/components/Message/MessageSimple.js

@@ -35,10 +35,7 @@ const MessageSimpleWithContext = (props) => {
     MessageActions = MessageOptions, MessageDeleted = DefaultMessageDeleted, MessageBouncePrompt = DefaultMessageBouncePrompt, MessageRepliesCountButton = DefaultMessageRepliesCountButton, MessageStatus = DefaultMessageStatus, MessageTimestamp = DefaultMessageTimestamp, ReactionsList = DefaultReactionList, StreamedMessageText = DefaultStreamedMessageText, PinIndicator, } = useComponentContext('MessageSimple');
     const hasAttachment = messageHasAttachments(message);
     const hasReactions = messageHasReactions(message);
-    const isAIGenerated = useMemo(() => isMessageAIGenerated?.(message), [
-        isMessageAIGenerated,
-        message,
-    ]);
+    const isAIGenerated = useMemo(() => isMessageAIGenerated?.(message), [isMessageAIGenerated, message]);
     if (message.customType === CUSTOM_MESSAGE_TYPE.date) {
         return null;
     }
@@ -98,7 +95,7 @@ const MessageSimpleWithContext = (props) => {
                 !isMyMessage() && !!message.user && (React.createElement("span", { className: 'str-chat__message-simple-name' }, message.user.name || message.user.id)),
                 React.createElement(MessageTimestamp, { customClass: 'str-chat__message-simple-timestamp' }),
                 isEdited && (React.createElement("span", { className: 'str-chat__mesage-simple-edited' }, t('Edited'))),
-                isEdited && React.createElement(MessageEditedTimestamp, { calendar: true, open: isEditedTimestampOpen }))))));
+                isEdited && (React.createElement(MessageEditedTimestamp, { calendar: true, open: isEditedTimestampOpen })))))));
 };
 const MemoizedMessageSimple = React.memo(MessageSimpleWithContext, areMessageUIPropsEqual);
 /**

package/dist/components/Message/MessageStatus.js

@@ -15,7 +15,7 @@ const UnMemoizedMessageStatus = (props) => {
     const { handleEnter, handleLeave, tooltipVisible } = useEnterLeaveHandlers();
     const { client } = useChatContext('MessageStatus');
     const { Avatar: contextAvatar } = useComponentContext('MessageStatus');
-    const { isMyMessage, lastReceivedId, message, readBy, threadList, } = useMessageContext('MessageStatus');
+    const { isMyMessage, lastReceivedId, message, readBy, threadList } = useMessageContext('MessageStatus');
     const { t } = useTranslationContext('MessageStatus');
     const [referenceElement, setReferenceElement] = useState(null);
     const Avatar = propAvatar || contextAvatar || DefaultAvatar;

package/dist/components/Message/MessageText.js

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import React, { useMemo } from 'react';
 import { QuotedMessage as DefaultQuotedMessage } from './QuotedMessage';
 import { isOnlyEmojis, messageHasAttachments } from './utils';
-import { useComponentContext, useMessageContext, useTranslationContext } from '../../context';
+import { useComponentContext, useMessageContext, useTranslationContext, } from '../../context';
 import { renderText as defaultRenderText } from './renderText';
 import { MessageErrorText } from './MessageErrorText';
 const UnMemoizedMessageTextComponent = (props) => {
@@ -13,14 +13,14 @@ const UnMemoizedMessageTextComponent = (props) => {
     const { userLanguage } = useTranslationContext('MessageText');
     const message = propMessage || contextMessage;
     const hasAttachment = messageHasAttachments(message);
-    const messageTextToRender = message.i18n?.[`${userLanguage}_text`] || message.text;
+    const messageTextToRender = message.i18n?.[`${userLanguage}_text`] ||
+        message.text;
+    const messageText = useMemo(() => renderText(messageTextToRender, message.mentioned_users), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    const messageText = useMemo(() => renderText(messageTextToRender, message.mentioned_users), [
-        message.mentioned_users,
-        messageTextToRender,
-    ]);
+    [message.mentioned_users, messageTextToRender]);
     const wrapperClass = customWrapperClass || 'str-chat__message-text';
-    const innerClass = customInnerClass || `str-chat__message-text-inner str-chat__message-${theme}-text-inner`;
+    const innerClass = customInnerClass ||
+        `str-chat__message-text-inner str-chat__message-${theme}-text-inner`;
     if (!messageTextToRender && !message.quoted_message)
         return null;
     return (React.createElement("div", { className: wrapperClass, tabIndex: 0 },

package/dist/components/Message/QuotedMessage.js

@@ -9,7 +9,7 @@ import { useMessageContext } from '../../context/MessageContext';
 import { useTranslationContext } from '../../context/TranslationContext';
 import { useChannelActionContext } from '../../context/ChannelActionContext';
 export const QuotedMessage = () => {
-    const { Attachment = DefaultAttachment, Avatar: ContextAvatar, } = useComponentContext('QuotedMessage');
+    const { Attachment = DefaultAttachment, Avatar: ContextAvatar } = useComponentContext('QuotedMessage');
     const { client } = useChatContext();
     const { isMyMessage, message } = useMessageContext('QuotedMessage');
     const { t, userLanguage } = useTranslationContext('QuotedMessage');
@@ -39,5 +39,5 @@ export const QuotedMessage = () => {
             React.createElement("div", { className: 'str-chat__quoted-message-bubble', "data-testid": 'quoted-message-contents' }, poll ? (React.createElement(Poll, { isQuoted: true, poll: poll })) : (React.createElement(React.Fragment, null,
                 quotedMessageAttachment && (React.createElement(Attachment, { attachments: [quotedMessageAttachment], isQuoted: true })),
                 React.createElement("div", { className: 'str-chat__quoted-message-bubble__text', "data-testid": 'quoted-message-text' }, quotedMessageText))))),
-        message.attachments?.length ? React.createElement(Attachment, { attachments: message.attachments }) : null));
+        message.attachments?.length ? (React.createElement(Attachment, { attachments: message.attachments })) : null));
 };

package/dist/components/Message/Timestamp.js

@@ -16,7 +16,15 @@ export function Timestamp(props) {
         t,
         tDateTimeParser,
         timestampTranslationKey: 'timestamp/MessageTimestamp',
-    }), [calendar, calendarFormats, format, formatDate, normalizedTimestamp, t, tDateTimeParser]);
+    }), [
+        calendar,
+        calendarFormats,
+        format,
+        formatDate,
+        normalizedTimestamp,
+        t,
+        tDateTimeParser,
+    ]);
     if (!when) {
         return null;
     }

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

@@ -1,5 +1,5 @@
 import { useChannelActionContext } from '../../../context/ChannelActionContext';
-import { useChannelStateContext } from '../../../context/ChannelStateContext';
+import { useChannelStateContext, } from '../../../context/ChannelStateContext';
 export const handleActionWarning = `Action handler was called, but it is missing one of its required arguments. 
 Make sure the ChannelAction and ChannelState contexts are properly set and the hook is initialized with a valid message.`;
 export function useActionHandler(message) {

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

@@ -17,7 +17,8 @@ export const useFlagHandler = (message, notifications = {}) => {
         }
         try {
             await client.flagMessage(message.id);
-            const successMessage = getSuccessNotification && validateAndGetMessage(getSuccessNotification, [message]);
+            const successMessage = getSuccessNotification &&
+                validateAndGetMessage(getSuccessNotification, [message]);
             notify(successMessage || t('Message has been successfully flagged'), 'success');
         }
         catch (e) {

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

@@ -14,7 +14,8 @@ export const useMarkUnreadHandler = (message, notifications = {}) => {
             await channel.markUnread({ message_id: message.id });
             if (!notify)
                 return;
-            const successMessage = getSuccessNotification && validateAndGetMessage(getSuccessNotification, [message]);
+            const successMessage = getSuccessNotification &&
+                validateAndGetMessage(getSuccessNotification, [message]);
             if (successMessage)
                 notify(successMessage, 'success');
         }

package/dist/components/Message/hooks/useMessageTextStreaming.d.ts

@@ -11,6 +11,6 @@ export type UseMessageTextStreamingProps<StreamChatGenerics extends DefaultStrea
  * @param {string} text - The text that we want to render in a typewriter fashion.
  * @returns {{ streamedMessageText: string }} - A substring of the text property, up until we've finished rendering the typewriter animation.
  */
-export declare const useMessageTextStreaming: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ streamingLetterIntervalMs, renderingLetterCount, text, }: UseMessageTextStreamingProps<StreamChatGenerics>) => {
+export declare const useMessageTextStreaming: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ renderingLetterCount, streamingLetterIntervalMs, text, }: UseMessageTextStreamingProps<StreamChatGenerics>) => {
     streamedMessageText: string;
 };

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

@@ -9,7 +9,7 @@ const DEFAULT_RENDERING_LETTER_COUNT = 2;
  * @param {string} text - The text that we want to render in a typewriter fashion.
  * @returns {{ streamedMessageText: string }} - A substring of the text property, up until we've finished rendering the typewriter animation.
  */
-export const useMessageTextStreaming = ({ streamingLetterIntervalMs = DEFAULT_LETTER_INTERVAL, renderingLetterCount = DEFAULT_RENDERING_LETTER_COUNT, text, }) => {
+export const useMessageTextStreaming = ({ renderingLetterCount = DEFAULT_RENDERING_LETTER_COUNT, streamingLetterIntervalMs = DEFAULT_LETTER_INTERVAL, text, }) => {
     const [streamedMessageText, setStreamedMessageText] = useState(text);
     const textCursor = useRef(text.length);
     useEffect(() => {

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

@@ -1,5 +1,5 @@
 import { isUserMuted, validateAndGetMessage } from '../utils';
-import { useChannelStateContext } from '../../../context/ChannelStateContext';
+import { useChannelStateContext, } from '../../../context/ChannelStateContext';
 import { useChatContext } from '../../../context/ChatContext';
 import { useTranslationContext } from '../../../context/TranslationContext';
 export const missingUseMuteHandlerParamsWarning = 'useMuteHandler was called but it is missing one or more necessary parameter.';
@@ -17,14 +17,16 @@ export const useMuteHandler = (message, notifications = {}) => {
         if (!isUserMuted(message, mutes)) {
             try {
                 await client.muteUser(message.user.id);
-                const successMessage = getSuccessNotification && validateAndGetMessage(getSuccessNotification, [message.user]);
+                const successMessage = getSuccessNotification &&
+                    validateAndGetMessage(getSuccessNotification, [message.user]);
                 notify(successMessage ||
                     t(`{{ user }} has been muted`, {
                         user: message.user.name || message.user.id,
                     }), 'success');
             }
             catch (e) {
-                const errorMessage = getErrorNotification && validateAndGetMessage(getErrorNotification, [message.user]);
+                const errorMessage = getErrorNotification &&
+                    validateAndGetMessage(getErrorNotification, [message.user]);
                 notify(errorMessage || t('Error muting a user ...'), 'error');
             }
         }
@@ -42,7 +44,8 @@ export const useMuteHandler = (message, notifications = {}) => {
                 }
             }
             catch (e) {
-                const errorMessage = (getErrorNotification && validateAndGetMessage(getErrorNotification, [message.user])) ||
+                const errorMessage = (getErrorNotification &&
+                    validateAndGetMessage(getErrorNotification, [message.user])) ||
                     t('Error unmuting a user ...');
                 if (typeof errorMessage === 'string') {
                     notify(errorMessage, 'error');

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

@@ -1,6 +1,6 @@
 import { defaultPinPermissions, validateAndGetMessage } from '../utils';
 import { useChannelActionContext } from '../../../context/ChannelActionContext';
-import { useChannelStateContext } from '../../../context/ChannelStateContext';
+import { useChannelStateContext, } from '../../../context/ChannelStateContext';
 import { useChatContext } from '../../../context/ChatContext';
 import { useTranslationContext } from '../../../context/TranslationContext';
 export const usePinHandler = (message, 

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

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 import throttle from 'lodash.throttle';
 import { useChannelActionContext } from '../../../context/ChannelActionContext';
-import { useChannelStateContext } from '../../../context/ChannelStateContext';
+import { useChannelStateContext, } from '../../../context/ChannelStateContext';
 import { useChatContext } from '../../../context/ChatContext';
 import { useThreadContext } from '../../Threads';
 export const reactionHandlerWarning = `Reaction handler was called, but it is missing one of its required arguments.
@@ -18,7 +18,10 @@ export const useReactionHandler = (message) => {
         if (add) {
             const timestamp = new Date().toISOString();
             newReactionGroups[reactionType] = hasReaction
-                ? { ...newReactionGroups[reactionType], count: newReactionGroups[reactionType].count + 1 }
+                ? {
+                    ...newReactionGroups[reactionType],
+                    count: newReactionGroups[reactionType].count + 1,
+                }
                 : {
                     count: 1,
                     first_reaction_at: timestamp,
@@ -66,7 +69,7 @@ export const useReactionHandler = (message) => {
         const tempMessage = createMessagePreview(add, newReaction, message);
         try {
             updateMessage(tempMessage);
-            // @ts-expect-error
+            // @ts-expect-error message type mismatch
             thread?.upsertReplyLocally({ message: tempMessage });
             const messageResponse = add
                 ? await channel.sendReaction(id, { type })
@@ -77,7 +80,7 @@ export const useReactionHandler = (message) => {
         catch (error) {
             // revert to the original message if the API call fails
             updateMessage(message);
-            // @ts-expect-error
+            // @ts-expect-error message type mismatch
             thread?.upsertReplyLocally({ message });
         }
     }, 1000);
@@ -93,7 +96,9 @@ export const useReactionHandler = (message) => {
             message.own_reactions.forEach((reaction) => {
                 // own user should only ever contain the current user id
                 // just in case we check to prevent bugs with message updates from breaking reactions
-                if (reaction.user && client.userID === reaction.user.id && reaction.type === reactionType) {
+                if (reaction.user &&
+                    client.userID === reaction.user.id &&
+                    reaction.type === reactionType) {
                     userExistingReaction = reaction;
                 }
                 else if (reaction.user && client.userID !== reaction.user.id) {

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

@@ -1,4 +1,4 @@
-import { useChannelActionContext } from '../../../context/ChannelActionContext';
+import { useChannelActionContext, } from '../../../context/ChannelActionContext';
 export const useRetryHandler = (customRetrySendMessage) => {
     const { retrySendMessage: contextRetrySendMessage } = useChannelActionContext('useRetryHandler');
     const retrySendMessage = customRetrySendMessage || contextRetrySendMessage;

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

@@ -1,4 +1,4 @@
-import { useChannelStateContext } from '../../../context/ChannelStateContext';
+import { useChannelStateContext, } from '../../../context/ChannelStateContext';
 import { useChatContext } from '../../../context/ChatContext';
 export const useUserRole = (message, onlySenderCanEdit, disableQuotedMessages) => {
     const { channel, channelCapabilities = {} } = useChannelStateContext('useUserRole');

package/dist/components/Message/renderText/renderText.js

@@ -50,7 +50,7 @@ function encodeDecode(url) {
         return url;
     }
 }
-const urlTransform = (uri) => (uri.startsWith('app://') ? uri : uriTransformer(uri));
+const urlTransform = (uri) => uri.startsWith('app://') ? uri : uriTransformer(uri);
 const getPluginsForward = (plugins) => plugins;
 export const markDownRenderers = {
     a: Anchor,
@@ -77,7 +77,7 @@ export const renderText = (text, mentionedUsers, { allowedTagNames = defaultAllo
                 const strippedText = text?.replace(detectHttp, '');
                 if (!strippedHref || !strippedText)
                     return false;
-                return strippedHref.includes(strippedText) || strippedText.includes(strippedHref);
+                return (strippedHref.includes(strippedText) || strippedText.includes(strippedHref));
             });
         if (noParsingNeeded.length > 0 || linkIsInBlock)
             return;

package/dist/components/Message/utils.js

@@ -9,8 +9,7 @@ export const validateAndGetMessage = (func, args) => {
         return null;
     // below is due to tests passing a single argument
     // rather than an array.
-    if (!(args instanceof Array)) {
-        // @ts-expect-error
+    if (!Array.isArray(args)) {
         args = [args];
     }
     const returnValue = func(...args);
@@ -154,7 +153,8 @@ export const shouldRenderMessageActions = ({ customMessageActions, CustomMessage
     if (!messageActions.length)
         return false;
     if (inThread &&
-        messageActions.filter((action) => !ACTIONS_NOT_WORKING_IN_THREAD.includes(action)).length === 0) {
+        messageActions.filter((action) => !ACTIONS_NOT_WORKING_IN_THREAD.includes(action))
+            .length === 0) {
         return false;
     }
     if (messageActions.length === 1 &&

package/dist/components/MessageActions/MessageActionsBox.js

@@ -4,8 +4,10 @@ import { MESSAGE_ACTIONS } from '../Message/utils';
 import { useChannelActionContext, useComponentContext, useMessageContext, useTranslationContext, } from '../../context';
 import { CustomMessageActionsList as DefaultCustomMessageActionsList } from './CustomMessageActionsList';
 const UnMemoizedMessageActionsBox = (props) => {
-    const { className, getMessageActions, handleDelete, handleEdit, handleFlag, handleMarkUnread, handleMute, handlePin, isUserMuted, mine, open, ...restDivProps } = props;
-    const { CustomMessageActionsList = DefaultCustomMessageActionsList, } = useComponentContext('MessageActionsBox');
+    const { className, getMessageActions, handleDelete, handleEdit, handleFlag, handleMarkUnread, handleMute, handlePin, isUserMuted, 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    mine, open, ...restDivProps } = props;
+    const { CustomMessageActionsList = DefaultCustomMessageActionsList } = useComponentContext('MessageActionsBox');
     const { setQuotedMessage } = useChannelActionContext('MessageActionsBox');
     const { customMessageActions, message, threadList } = useMessageContext('MessageActionsBox');
     const { t } = useTranslationContext('MessageActionsBox');
@@ -29,7 +31,9 @@ const UnMemoizedMessageActionsBox = (props) => {
             React.createElement(CustomMessageActionsList, { customMessageActions: customMessageActions, message: message }),
             messageActions.indexOf(MESSAGE_ACTIONS.quote) > -1 && (React.createElement("button", { "aria-selected": 'false', className: buttonClassName, onClick: handleQuote, role: 'option' }, t('Reply'))),
             messageActions.indexOf(MESSAGE_ACTIONS.pin) > -1 && !message.parent_id && (React.createElement("button", { "aria-selected": 'false', className: buttonClassName, onClick: handlePin, role: 'option' }, !message.pinned ? t('Pin') : t('Unpin'))),
-            messageActions.indexOf(MESSAGE_ACTIONS.markUnread) > -1 && !threadList && !!message.id && (React.createElement("button", { "aria-selected": 'false', className: buttonClassName, onClick: handleMarkUnread, role: 'option' }, t('Mark as unread'))),
+            messageActions.indexOf(MESSAGE_ACTIONS.markUnread) > -1 &&
+                !threadList &&
+                !!message.id && (React.createElement("button", { "aria-selected": 'false', className: buttonClassName, onClick: handleMarkUnread, role: 'option' }, t('Mark as unread'))),
             messageActions.indexOf(MESSAGE_ACTIONS.flag) > -1 && (React.createElement("button", { "aria-selected": 'false', className: buttonClassName, onClick: handleFlag, role: 'option' }, t('Flag'))),
             messageActions.indexOf(MESSAGE_ACTIONS.mute) > -1 && (React.createElement("button", { "aria-selected": 'false', className: buttonClassName, onClick: handleMute, role: 'option' }, isUserMuted() ? t('Unmute') : t('Mute'))),
             messageActions.indexOf(MESSAGE_ACTIONS.edit) > -1 && (React.createElement("button", { "aria-selected": 'false', className: buttonClassName, onClick: handleEdit, role: 'option' }, t('Edit Message'))),

package/dist/components/MessageActions/hooks/useMessageActionsBoxPopper.d.ts

@@ -11,7 +11,7 @@ export declare function useMessageActionsBoxPopper<T extends HTMLElement>({ open
             [key: string]: string;
         } | undefined;
     };
-    popperElementRef: import("react").RefObject<T>;
+    popperElementRef: import("react").RefObject<T | null>;
     styles: {
         [key: string]: import("react").CSSProperties;
     };

package/dist/components/MessageInput/AttachmentPreviewList/AttachmentPreviewList.js

@@ -6,7 +6,7 @@ import { ImageAttachmentPreview as DefaultImagePreview, } from './ImageAttachmen
 import { isLocalAttachment, isLocalAudioAttachment, isLocalFileAttachment, isLocalImageAttachment, isLocalMediaAttachment, isLocalVoiceRecordingAttachment, isScrapedContent, } from '../../Attachment';
 import { useMessageInputContext } from '../../../context';
 export const AttachmentPreviewList = ({ AudioAttachmentPreview = DefaultFilePreview, FileAttachmentPreview = DefaultFilePreview, ImageAttachmentPreview = DefaultImagePreview, UnsupportedAttachmentPreview = DefaultUnknownAttachmentPreview, VideoAttachmentPreview = DefaultFilePreview, VoiceRecordingPreview = DefaultVoiceRecordingPreview, }) => {
-    const { attachments, removeAttachments, uploadAttachment, } = useMessageInputContext('AttachmentPreviewList');
+    const { attachments, removeAttachments, uploadAttachment } = useMessageInputContext('AttachmentPreviewList');
     return (React.createElement("div", { className: 'str-chat__attachment-preview-list' },
         React.createElement("div", { className: 'str-chat__attachment-list-scroll-container', "data-testid": 'attachment-list-scroll-container' }, attachments.map((attachment) => {
             if (isScrapedContent(attachment))

package/dist/components/MessageInput/AttachmentPreviewList/FileAttachmentPreview.js

@@ -7,13 +7,15 @@ export const FileAttachmentPreview = ({ attachment, handleRetry, removeAttachmen
     return (React.createElement("div", { className: 'str-chat__attachment-preview-file', "data-testid": 'attachment-preview-file' },
         React.createElement("div", { className: 'str-chat__attachment-preview-file-icon' },
             React.createElement(FileIcon, { filename: attachment.title, mimeType: attachment.mime_type })),
-        React.createElement("button", { "aria-label": t('aria/Remove attachment'), className: 'str-chat__attachment-preview-delete', "data-testid": 'file-preview-item-delete-button', disabled: attachment.localMetadata?.uploadState === 'uploading', onClick: () => attachment.localMetadata?.id && removeAttachments([attachment.localMetadata?.id]) },
+        React.createElement("button", { "aria-label": t('aria/Remove attachment'), className: 'str-chat__attachment-preview-delete', "data-testid": 'file-preview-item-delete-button', disabled: attachment.localMetadata?.uploadState === 'uploading', onClick: () => attachment.localMetadata?.id &&
+                removeAttachments([attachment.localMetadata?.id]) },
             React.createElement(CloseIcon, null)),
         attachment.localMetadata?.uploadState === 'failed' && !!handleRetry && (React.createElement("button", { className: 'str-chat__attachment-preview-error str-chat__attachment-preview-error-file', "data-testid": 'file-preview-item-retry-button', onClick: () => handleRetry(attachment) },
             React.createElement(RetryIcon, null))),
         React.createElement("div", { className: 'str-chat__attachment-preview-file-end' },
             React.createElement("div", { className: 'str-chat__attachment-preview-file-name', title: attachment.title }, attachment.title),
-            attachment.localMetadata?.uploadState === 'finished' && !!attachment.asset_url && (React.createElement("a", { "aria-label": t('aria/Download attachment'), className: 'str-chat__attachment-preview-file-download', download: true, href: attachment.asset_url, rel: 'noreferrer', target: '_blank', title: t('Download attachment {{ name }}', { name: attachment.title }) },
+            attachment.localMetadata?.uploadState === 'finished' &&
+                !!attachment.asset_url && (React.createElement("a", { "aria-label": t('aria/Download attachment'), className: 'str-chat__attachment-preview-file-download', download: true, href: attachment.asset_url, rel: 'noreferrer', target: '_blank', title: t('Download attachment {{ name }}', { name: attachment.title }) },
                 React.createElement(DownloadIcon, null))),
             attachment.localMetadata?.uploadState === 'uploading' && (React.createElement(LoadingIndicatorIcon, { size: 17 })))));
 };