stream-chat-react 12.0.0-rc.1 → 12.0.0-rc.10

package/README.md

@@ -90,7 +90,7 @@ For components that implement significant logic, it's helpful to split the compo
 
 ### Customizing Styles
 
-The preferred method for overriding the pre-defined styles in the library is to two step process. First, import our bundled CSS into the file where you instantiate your chat application. Second, locate any Stream styles you want to override using either the browser inspector or by viewing the library code. You can then add selectors to your local CSS file to override our defaults. For example:
+The preferred method for overriding the pre-defined styles in the library is to two-step process. First, import our bundled CSS into the file where you instantiate your chat application. Second, locate any Stream styles you want to override using either the browser inspector or by viewing the library code. You can then add selectors to your local CSS file to override our defaults. For example:
 
 ```js
 import 'stream-chat-react/dist/css/v2/index.css';
@@ -110,3 +110,13 @@ We recently closed a [$38 million Series B funding round](https://techcrunch.com
 Our APIs are used by more than a billion end-users, and by working at Stream, you have the chance to make a huge impact on a team of very strong engineers.
 
 Check out our current openings and apply via [Stream's website](https://getstream.io/team/#jobs).
+
+## Acknowledgements
+
+### Lamejs
+
+This project uses `lamejs` library under the LGPL license to convert the recorded audio to mp3 format.
+The library source code is dynamically imported and used only if audio recording is enabled.
+
+You can obtain the source code for `lamejs` from the [lamejs repository](https://github.com/gideonstele/lamejs) that is a fork of [the original JS library](https://github.com/zhuker/lamejs).
+You can find the source code for LAME at https://lame.sourceforge.net  and its license at: https://lame.sourceforge.net/license.txt

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

@@ -9,6 +9,8 @@ type WaveProgressBarProps = {
     amplitudesCount?: number;
     /** Progress expressed in fractional number value btw 0 and 100. */
     progress?: number;
+    relativeAmplitudeBarWidth?: number;
+    relativeAmplitudeGap?: number;
 };
-export declare const WaveProgressBar: ({ amplitudesCount, progress, seek, waveformData, }: WaveProgressBarProps) => React.JSX.Element | null;
+export declare const WaveProgressBar: ({ amplitudesCount, progress, relativeAmplitudeBarWidth, relativeAmplitudeGap, seek, waveformData, }: WaveProgressBarProps) => React.JSX.Element | null;
 export {};

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

@@ -1,10 +1,13 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import throttle from 'lodash.throttle';
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import clsx from 'clsx';
 import { resampleWaveformData } from '../audioSampling';
-export const WaveProgressBar = ({ amplitudesCount = 40, progress = 0, seek, waveformData, }) => {
+export const WaveProgressBar = ({ amplitudesCount = 40, progress = 0, relativeAmplitudeBarWidth = 2, relativeAmplitudeGap = 1, seek, waveformData, }) => {
     const [progressIndicator, setProgressIndicator] = useState(null);
     const isDragging = useRef(false);
-    const rootRef = useRef(null);
+    const [root, setRoot] = useState(null);
+    const [trackAxisX, setTrackAxisX] = useState();
+    const lastRootWidth = useRef();
     const handleDragStart = (e) => {
         e.preventDefault();
         if (!progressIndicator)
@@ -25,22 +28,54 @@ export const WaveProgressBar = ({ amplitudesCount = 40, progress = 0, seek, wave
         isDragging.current = false;
         progressIndicator.style.removeProperty('cursor');
     }, [progressIndicator]);
-    const resampledWaveformData = useMemo(() => resampleWaveformData(waveformData, amplitudesCount), [
-        amplitudesCount,
-        waveformData,
-    ]);
+    const getTrackAxisX = useMemo(() => throttle((rootWidth) => {
+        if (rootWidth === lastRootWidth.current)
+            return;
+        lastRootWidth.current = rootWidth;
+        const possibleAmpCount = Math.floor(rootWidth / (relativeAmplitudeGap + relativeAmplitudeBarWidth));
+        const tooManyAmplitudesToRender = possibleAmpCount < amplitudesCount;
+        const barCount = tooManyAmplitudesToRender ? possibleAmpCount : amplitudesCount;
+        const amplitudeBarWidthToGapRatio = relativeAmplitudeBarWidth / (relativeAmplitudeBarWidth + relativeAmplitudeGap);
+        const barWidth = barCount && (rootWidth / barCount) * amplitudeBarWidthToGapRatio;
+        setTrackAxisX({
+            barCount,
+            barWidth,
+            gap: barWidth * (relativeAmplitudeGap / relativeAmplitudeBarWidth),
+        });
+    }, 1), [relativeAmplitudeBarWidth, relativeAmplitudeGap, amplitudesCount]);
+    const resampledWaveformData = useMemo(() => (trackAxisX ? resampleWaveformData(waveformData, trackAxisX.barCount) : []), [trackAxisX, waveformData]);
     useEffect(() => {
         document.addEventListener('pointerup', handleDragStop);
         return () => {
             document.removeEventListener('pointerup', handleDragStop);
         };
     }, [handleDragStop]);
-    if (!waveformData.length)
+    useEffect(() => {
+        if (!root || typeof ResizeObserver === 'undefined')
+            return;
+        const observer = new ResizeObserver(([entry]) => {
+            getTrackAxisX(entry.contentRect.width);
+        });
+        observer.observe(root);
+        return () => {
+            observer.disconnect();
+        };
+    }, [getTrackAxisX, root]);
+    useLayoutEffect(() => {
+        if (!root)
+            return;
+        const { width: rootWidth } = root.getBoundingClientRect();
+        getTrackAxisX(rootWidth);
+    }, [getTrackAxisX, root]);
+    if (!waveformData.length || trackAxisX?.barCount === 0)
         return null;
-    return (React.createElement("div", { className: 'str-chat__wave-progress-bar__track', "data-testid": 'wave-progress-bar-track', onClick: seek, onPointerDown: handleDragStart, onPointerMove: handleDrag, onPointerUp: handleDragStop, ref: rootRef, role: 'progressbar' },
+    return (React.createElement("div", { className: 'str-chat__wave-progress-bar__track', "data-testid": 'wave-progress-bar-track', onClick: seek, onPointerDown: handleDragStart, onPointerMove: handleDrag, onPointerUp: handleDragStop, ref: setRoot, role: 'progressbar', style: {
+            '--str-chat__voice-recording-amplitude-bar-gap-width': trackAxisX?.gap + 'px',
+        } },
         resampledWaveformData.map((amplitude, i) => (React.createElement("div", { className: clsx('str-chat__wave-progress-bar__amplitude-bar', {
                 ['str-chat__wave-progress-bar__amplitude-bar--active']: progress > (i / resampledWaveformData.length) * 100,
             }), "data-testid": 'amplitude-bar', key: `amplitude-${i}`, style: {
+                '--str-chat__voice-recording-amplitude-bar-width': trackAxisX?.barWidth + 'px',
                 '--str-chat__wave-progress-bar__amplitude-bar-height': amplitude
                     ? amplitude * 100 + '%'
                     : '0%',

package/dist/components/Channel/Channel.js

@@ -68,7 +68,11 @@ const ChannelInner = (props) => {
     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
-    { ...initialState, loading: !channel.initialized });
+    {
+        ...initialState,
+        hasMore: channel.state.messagePagination.hasPrev,
+        loading: !channel.initialized,
+    });
     const isMounted = useIsMounted();
     const originalTitle = useRef('');
     const lastRead = useRef();
@@ -184,7 +188,6 @@ const ChannelInner = (props) => {
     useLayoutEffect(() => {
         let errored = false;
         let done = false;
-        let channelInitializedExternally = true;
         (async () => {
             if (!channel.initialized && initializeOnMount) {
                 try {
@@ -210,7 +213,6 @@ const ChannelInner = (props) => {
                     await getChannel({ channel, client, members, options: channelQueryOptions });
                     const config = channel.getConfig();
                     setChannelConfig(config);
-                    channelInitializedExternally = false;
                 }
                 catch (e) {
                     dispatch({ error: e, type: 'setError' });
@@ -222,8 +224,7 @@ const ChannelInner = (props) => {
             if (!errored) {
                 dispatch({
                     channel,
-                    hasMore: channelInitializedExternally ||
-                        hasMoreMessagesProbably(channel.state.messages.length, channelQueryOptions.messages.limit),
+                    hasMore: channel.state.messagePagination.hasPrev,
                     type: 'initStateFromChannel',
                 });
                 if (client.user?.id && channel.state.read[client.user.id]) {
@@ -283,7 +284,7 @@ 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 || !state.hasMore)
+        if (!online.current || !window.navigator.onLine || !channel.state.messagePagination.hasPrev)
             return 0;
         // prevent duplicate loading events...
         const oldestMessage = state?.messages?.[0];
@@ -305,12 +306,11 @@ const ChannelInner = (props) => {
             dispatch({ loadingMore: false, type: 'setLoadingMore' });
             return 0;
         }
-        const hasMoreMessages = queryResponse.messages.length === perPage;
-        loadMoreFinished(hasMoreMessages, channel.state.messages);
+        loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
         return queryResponse.messages.length;
     };
     const loadMoreNewer = async (limit = DEFAULT_NEXT_CHANNEL_PAGE_SIZE) => {
-        if (!online.current || !window.navigator.onLine || !state.hasMoreNewer)
+        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)
@@ -330,9 +330,8 @@ const ChannelInner = (props) => {
             dispatch({ loadingMoreNewer: false, type: 'setLoadingMoreNewer' });
             return 0;
         }
-        const hasMoreNewerMessages = channel.state.messages !== channel.state.latestMessages;
         dispatch({
-            hasMoreNewer: hasMoreNewerMessages,
+            hasMoreNewer: channel.state.messagePagination.hasNext,
             messages: channel.state.messages,
             type: 'loadMoreNewerFinished',
         });
@@ -342,15 +341,9 @@ const ChannelInner = (props) => {
     const jumpToMessage = useCallback(async (messageId, messageLimit = DEFAULT_JUMP_TO_PAGE_SIZE, highlightDuration = DEFAULT_HIGHLIGHT_DURATION) => {
         dispatch({ loadingMore: true, type: 'setLoadingMore' });
         await channel.state.loadMessageIntoState(messageId, undefined, messageLimit);
-        /**
-         * if the message we are jumping to has less than half of the page size older messages,
-         * we have jumped to the beginning of the channel.
-         */
-        const indexOfMessage = channel.state.messages.findIndex((message) => message.id === messageId);
-        const hasMoreMessages = indexOfMessage >= Math.floor(messageLimit / 2);
-        loadMoreFinished(hasMoreMessages, channel.state.messages);
+        loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
         dispatch({
-            hasMoreNewer: channel.state.messages !== channel.state.latestMessages,
+            hasMoreNewer: channel.state.messagePagination.hasNext,
             highlightedMessageId: messageId,
             type: 'jumpToMessageFinished',
         });
@@ -364,9 +357,7 @@ const ChannelInner = (props) => {
     }, [channel, loadMoreFinished]);
     const jumpToLatestMessage = useCallback(async () => {
         await channel.state.loadMessageIntoState('latest');
-        // FIXME: we cannot rely on constant value 25 as the page size can be customized by integrators
-        const hasMoreOlder = channel.state.messages.length >= 25;
-        loadMoreFinished(hasMoreOlder, channel.state.messages);
+        loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
         dispatch({
             type: 'jumpToLatestMessage',
         });
@@ -377,7 +368,6 @@ const ChannelInner = (props) => {
         let lastReadMessageId = channelUnreadUiState?.last_read_message_id;
         let firstUnreadMessageId = channelUnreadUiState?.first_unread_message_id;
         let isInCurrentMessageSet = false;
-        let hasMoreMessages = true;
         if (firstUnreadMessageId) {
             const result = findInMsgSetById(firstUnreadMessageId, channel.state.messages);
             isInCurrentMessageSet = result.index !== -1;
@@ -409,27 +399,25 @@ const ChannelInner = (props) => {
                 }
                 catch (e) {
                     addNotification(t('Failed to jump to the first unread message'), 'error');
-                    loadMoreFinished(hasMoreMessages, channel.state.messages);
+                    loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
                     return;
                 }
                 const firstMessageWithCreationDate = messages.find((msg) => msg.created_at);
                 if (!firstMessageWithCreationDate) {
                     addNotification(t('Failed to jump to the first unread message'), 'error');
-                    loadMoreFinished(hasMoreMessages, channel.state.messages);
+                    loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
                     return;
                 }
                 const firstMessageTimestamp = new Date(firstMessageWithCreationDate.created_at).getTime();
                 if (lastReadTimestamp < firstMessageTimestamp) {
                     // whole channel is unread
                     firstUnreadMessageId = firstMessageWithCreationDate.id;
-                    hasMoreMessages = false;
                 }
                 else {
                     const result = findInMsgSetByDate(channelUnreadUiState.last_read, messages);
                     lastReadMessageId = result.target?.id;
-                    hasMoreMessages = result.index >= Math.floor(queryMessageLimit / 2);
                 }
-                loadMoreFinished(hasMoreMessages, channel.state.messages);
+                loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
             }
         }
         if (!firstUnreadMessageId && !lastReadMessageId) {
@@ -446,14 +434,13 @@ const ChannelInner = (props) => {
                  * we have arrived to the oldest page of the channel
                  */
                 const indexOfTarget = channel.state.messages.findIndex((message) => message.id === targetId);
-                hasMoreMessages = indexOfTarget >= Math.floor(queryMessageLimit / 2);
-                loadMoreFinished(hasMoreMessages, channel.state.messages);
+                loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
                 firstUnreadMessageId =
                     firstUnreadMessageId ?? channel.state.messages[indexOfTarget + 1]?.id;
             }
             catch (e) {
                 addNotification(t('Failed to jump to the first unread message'), 'error');
-                loadMoreFinished(hasMoreMessages, channel.state.messages);
+                loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
                 return;
             }
         }
@@ -468,7 +455,7 @@ const ChannelInner = (props) => {
                 last_read_message_id: lastReadMessageId,
             });
         dispatch({
-            hasMoreNewer: channel.state.messages !== channel.state.latestMessages,
+            hasMoreNewer: channel.state.messagePagination.hasNext,
             highlightedMessageId: firstUnreadMessageId,
             type: 'jumpToMessageFinished',
         });

package/dist/components/Channel/channelState.js

@@ -102,6 +102,7 @@ export const channelReducer = (state, action) => {
             return {
                 ...state,
                 thread: message,
+                threadHasMore: true,
                 threadMessages: message.id ? { ...channel.state.threads }[message.id] || [] : [],
                 threadSuppressAutoscroll: false,
             };

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

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { isDate, isDayOrMoment } from '../../../context/TranslationContext';
+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 channelId = channel.cid;

package/dist/components/ChannelList/ChannelList.js

@@ -117,7 +117,7 @@ const UnMemoizedChannelList = (props) => {
             channel: item,
             // forces the update of preview component on channel update
             channelUpdateCount,
-            key: item.id,
+            key: item.cid,
             Preview,
             setActiveChannel,
             watchers,

package/dist/components/Chat/Chat.d.ts

@@ -1,7 +1,7 @@
 import React, { PropsWithChildren } from 'react';
 import { CustomClasses } from '../../context/ChatContext';
-import { SupportedTranslations } from '../../context/TranslationContext';
 import type { StreamChat } from 'stream-chat';
+import type { SupportedTranslations } from '../../i18n/types';
 import type { Streami18n } from '../../i18n/Streami18n';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 export type ChatProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {

package/dist/components/Chat/hooks/useChat.d.ts

@@ -1,5 +1,5 @@
-import { SupportedTranslations, TranslationContextValue } from '../../../context/TranslationContext';
-import { Streami18n } from '../../../i18n';
+import { TranslationContextValue } from '../../../context/TranslationContext';
+import { Streami18n, SupportedTranslations } from '../../../i18n';
 import type { AppSettingsAPIResponse, Channel, Mute, StreamChat } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 export type UseChatParams<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {

package/dist/components/Chat/hooks/useChat.js

@@ -1,6 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { defaultDateTimeParser, isLanguageSupported, } from '../../../context/TranslationContext';
-import { Streami18n } from '../../../i18n';
+import { defaultDateTimeParser, isLanguageSupported, Streami18n, } from '../../../i18n';
 import { version } from '../../../version';
 export const useChat = ({ client, defaultLanguage = 'en', i18nInstance, initialNavOpen, }) => {
     const [translators, setTranslators] = useState({

package/dist/components/Chat/hooks/useCreateChatClient.d.ts

@@ -1,9 +1,11 @@
-import { DefaultGenerics, ExtendableGenerics, OwnUserResponse, StreamChat, TokenOrProvider, UserResponse } from 'stream-chat';
+import { StreamChat } from 'stream-chat';
+import type { DefaultGenerics, ExtendableGenerics, OwnUserResponse, StreamChatOptions, TokenOrProvider, UserResponse } from 'stream-chat';
 /**
  * React hook to create, connect and return `StreamChat` client.
  */
-export declare const useCreateChatClient: <SCG extends ExtendableGenerics = DefaultGenerics>({ apiKey, tokenOrProvider, userData, }: {
+export declare const useCreateChatClient: <SCG extends ExtendableGenerics = DefaultGenerics>({ apiKey, options, tokenOrProvider, userData, }: {
     apiKey: string;
     tokenOrProvider: TokenOrProvider;
     userData: OwnUserResponse<SCG> | UserResponse<SCG>;
+    options?: StreamChatOptions;
 }) => StreamChat<SCG> | null;

package/dist/components/Chat/hooks/useCreateChatClient.js

@@ -1,16 +1,17 @@
 import { useEffect, useState } from 'react';
-import { StreamChat, } from 'stream-chat';
+import { StreamChat } from 'stream-chat';
 /**
  * React hook to create, connect and return `StreamChat` client.
  */
-export const useCreateChatClient = ({ apiKey, tokenOrProvider, userData, }) => {
+export const useCreateChatClient = ({ apiKey, options, tokenOrProvider, userData, }) => {
     const [chatClient, setChatClient] = useState(null);
     const [cachedUserData, setCachedUserData] = useState(userData);
     if (userData.id !== cachedUserData.id) {
         setCachedUserData(userData);
     }
+    const [cachedOptions] = useState(options);
     useEffect(() => {
-        const client = new StreamChat(apiKey);
+        const client = new StreamChat(apiKey, undefined, cachedOptions);
         let didUserConnectInterrupt = false;
         const connectionPromise = client.connectUser(cachedUserData, tokenOrProvider).then(() => {
             if (!didUserConnectInterrupt)
@@ -25,6 +26,6 @@ export const useCreateChatClient = ({ apiKey, tokenOrProvider, userData, }) => {
                 console.log(`Connection for user "${cachedUserData.id}" has been closed`);
             });
         };
-    }, [apiKey, cachedUserData, tokenOrProvider]);
+    }, [apiKey, cachedUserData, cachedOptions, tokenOrProvider]);
     return chatClient;
 };

package/dist/components/DateSeparator/DateSeparator.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TimestampFormatterOptions } from '../../i18n/utils';
+import type { TimestampFormatterOptions } from '../../i18n/types';
 export type DateSeparatorProps = TimestampFormatterOptions & {
     /** The date to format */
     date: Date;

package/dist/components/DateSeparator/DateSeparator.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { useTranslationContext } from '../../context/TranslationContext';
 import { getDateString } from '../../i18n/utils';
 const UnMemoizedDateSeparator = (props) => {
-    const { calendar = true, date: messageCreatedAt, formatDate, position = 'right', unread, ...restTimestampFormatterOptions } = props;
+    const { calendar, date: messageCreatedAt, formatDate, position = 'right', unread, ...restTimestampFormatterOptions } = props;
     const { t, tDateTimeParser } = useTranslationContext('DateSeparator');
     const formattedDate = getDateString({
         calendar,

package/dist/components/EventComponent/EventComponent.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { AvatarProps } from '../Avatar';
 import type { StreamMessage } from '../../context/ChannelStateContext';
 import type { DefaultStreamChatGenerics } from '../../types/types';
-import { TimestampFormatterOptions } from '../../i18n/utils';
+import type { TimestampFormatterOptions } from '../../i18n/types';
 export type EventComponentProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = TimestampFormatterOptions & {
     /** Message object */
     message: StreamMessage<StreamChatGenerics>;

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 = 'dddd L', Avatar = DefaultAvatar, message } = props;
+    const { calendar, calendarFormats, format, Avatar = DefaultAvatar, message } = props;
     const { t, tDateTimeParser } = useTranslationContext('EventComponent');
     const { created_at = '', event, text, type } = message;
     const getDateOptions = { messageCreatedAt: created_at.toString(), tDateTimeParser };

package/dist/components/InfiniteScrollPaginator/InfiniteScroll.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useLayoutEffect, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { deprecationAndReplacementWarning } from '../../utils/deprecationWarning';
 import { DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD } from '../../constants/limits';
 /**
@@ -17,6 +17,8 @@ export const InfiniteScroll = (props) => {
     const hasNextPageFlag = hasNextPage || hasMoreNewer;
     const hasPreviousPageFlag = hasPreviousPage || hasMore;
     const scrollComponent = useRef();
+    const previousOffset = useRef();
+    const previousReverseOffset = useRef();
     const scrollListenerRef = useRef();
     scrollListenerRef.current = () => {
         const element = scrollComponent.current;
@@ -32,7 +34,11 @@ export const InfiniteScroll = (props) => {
         }
         if (isLoading)
             return;
-        // FIXME: this triggers loadMore call when a user types messages in thread and the scroll container container expands
+        if (previousOffset.current === offset && previousReverseOffset.current === reverseOffset)
+            return;
+        previousOffset.current = offset;
+        previousReverseOffset.current = reverseOffset;
+        // FIXME: this triggers loadMore call when a user types messages in thread and the scroll container expands
         if (reverseOffset < Number(threshold) &&
             typeof loadPreviousPageFn === 'function' &&
             hasPreviousPageFlag) {
@@ -51,7 +57,7 @@ export const InfiniteScroll = (props) => {
         ], 'InfiniteScroll');
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    useLayoutEffect(() => {
+    useEffect(() => {
         const scrollElement = scrollComponent.current?.parentNode;
         if (!scrollElement)
             return;

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

@@ -29,6 +29,9 @@ export const AudioRecordingInProgress = () => {
         if (!recorder?.mediaRecorder)
             return;
         const { mediaRecorder } = recorder;
+        if (mediaRecorder.state === 'recording') {
+            startCounter();
+        }
         mediaRecorder.addEventListener('start', startCounter);
         mediaRecorder.addEventListener('resume', startCounter);
         mediaRecorder.addEventListener('stop', stopCounter);

package/dist/components/MediaRecorder/classes/MediaRecorderController.d.ts

@@ -1,26 +1,25 @@
 import { AmplitudeRecorder, AmplitudeRecorderConfig } from './AmplitudeRecorder';
 import { BrowserPermission } from './BrowserPermission';
 import { BehaviorSubject, Subject } from '../observable';
+import { TranscoderConfig } from '../transcode';
 import { RecordedMediaType } from '../../ReactFileUtilities';
 import { TranslationContextValue } from '../../../context';
 import type { LocalVoiceRecordingAttachment } from '../../MessageInput';
 import type { DefaultStreamChatGenerics } from '../../../types';
-export declare const POSSIBLE_TRANSCODING_MIME_TYPES: readonly ["audio/wav", "audio/mp3"];
 export declare const DEFAULT_MEDIA_RECORDER_CONFIG: MediaRecorderConfig;
 export declare const DEFAULT_AUDIO_TRANSCODER_CONFIG: TranscoderConfig;
-type SupportedTranscodeMimeTypes = typeof POSSIBLE_TRANSCODING_MIME_TYPES[number];
-export type TranscoderConfig = {
-    sampleRate: number;
-    targetMimeType: SupportedTranscodeMimeTypes;
-};
 type MediaRecorderConfig = Omit<MediaRecorderOptions, 'mimeType'> & Required<Pick<MediaRecorderOptions, 'mimeType'>>;
 export type AudioRecorderConfig = {
     amplitudeRecorderConfig: AmplitudeRecorderConfig;
     mediaRecorderConfig: MediaRecorderOptions;
     transcoderConfig: TranscoderConfig;
 };
+type PartialValues<T> = {
+    [P in keyof T]?: Partial<T[P]>;
+};
+export type CustomAudioRecordingConfig = PartialValues<AudioRecorderConfig>;
 export type AudioRecorderOptions = {
-    config?: Partial<AudioRecorderConfig>;
+    config?: CustomAudioRecordingConfig;
     generateRecordingTitle?: (mimeType: string) => string;
     t?: TranslationContextValue['t'];
 };

package/dist/components/MediaRecorder/classes/MediaRecorderController.js

@@ -15,7 +15,6 @@ const RECORDED_MIME_TYPE_BY_BROWSER = {
         safari: 'audio/mp4;codecs=mp4a.40.2',
     },
 };
-export const POSSIBLE_TRANSCODING_MIME_TYPES = ['audio/wav', 'audio/mp3'];
 export const DEFAULT_MEDIA_RECORDER_CONFIG = {
     mimeType: isSafari()
         ? RECORDED_MIME_TYPE_BY_BROWSER.audio.safari
@@ -23,7 +22,6 @@ export const DEFAULT_MEDIA_RECORDER_CONFIG = {
 };
 export const DEFAULT_AUDIO_TRANSCODER_CONFIG = {
     sampleRate: 16000,
-    targetMimeType: 'audio/mp3',
 };
 const disposeOfMediaStream = (stream) => {
     if (!stream?.active)
@@ -245,9 +243,6 @@ export class MediaRecorderController {
         this.amplitudeRecorderConfig = mergeDeepUndefined({ ...config?.amplitudeRecorderConfig }, DEFAULT_AMPLITUDE_RECORDER_CONFIG);
         this.mediaRecorderConfig = mergeDeepUndefined({ ...config?.mediaRecorderConfig }, DEFAULT_MEDIA_RECORDER_CONFIG);
         this.transcoderConfig = mergeDeepUndefined({ ...config?.transcoderConfig }, DEFAULT_AUDIO_TRANSCODER_CONFIG);
-        if (!POSSIBLE_TRANSCODING_MIME_TYPES.includes(this.transcoderConfig.targetMimeType)) {
-            this.transcoderConfig.targetMimeType = DEFAULT_AUDIO_TRANSCODER_CONFIG.targetMimeType;
-        }
         const mediaType = getRecordedMediaTypeFromMimeType(this.mediaRecorderConfig.mimeType);
         if (!mediaType) {
             throw new Error(`Unsupported media type (supported audio or video only). Provided mimeType: ${this.mediaRecorderConfig.mimeType}`);

package/dist/components/MediaRecorder/hooks/index.d.ts

@@ -1 +1 @@
-export type { CustomAudioRecordingConfig, RecordingController } from './useMediaRecorder';
+export type { RecordingController } from './useMediaRecorder';

package/dist/components/MediaRecorder/hooks/useMediaRecorder.d.ts

@@ -1,8 +1,7 @@
 import { MessageInputContextValue } from '../../../context';
-import { AudioRecorderConfig, MediaRecorderController, MediaRecordingState } from '../classes';
+import { CustomAudioRecordingConfig, MediaRecorderController, MediaRecordingState } from '../classes';
 import type { LocalVoiceRecordingAttachment } from '../../MessageInput';
 import type { DefaultStreamChatGenerics } from '../../../types';
-export type CustomAudioRecordingConfig = Partial<AudioRecorderConfig>;
 export type RecordingController<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
     completeRecording: () => void;
     permissionState?: PermissionState;

package/dist/components/MediaRecorder/hooks/useMediaRecorder.js

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslationContext } from '../../../context';
-import { MediaRecorderController } from '../classes';
+import { MediaRecorderController, } from '../classes';
 export const useMediaRecorder = ({ asyncMessagesMultiSendEnabled, enabled, generateRecordingTitle, handleSubmit, recordingConfig, uploadAttachment, }) => {
     const { t } = useTranslationContext('useMediaRecorder');
     const [recording, setRecording] = useState();

package/dist/components/MediaRecorder/index.d.ts

@@ -3,3 +3,4 @@ export * from './AudioRecorder';
 export * from './hooks';
 export { MediaRecordingState } from './classes/MediaRecorderController';
 export { RecordingPermission } from './classes/BrowserPermission';
+export type { CustomAudioRecordingConfig } from './classes';

package/dist/components/MediaRecorder/transcode/index.d.ts

@@ -1,7 +1,8 @@
-type TranscodeParams = {
-    blob: Blob;
+export type TranscoderConfig = {
     sampleRate: number;
-    targetMimeType: string;
+    encoder?: (file: File, sampleRate: number) => Promise<Blob>;
+};
+export type TranscodeParams = TranscoderConfig & {
+    blob: Blob;
 };
-export declare const transcode: ({ blob, sampleRate, targetMimeType }: TranscodeParams) => Promise<Blob>;
-export {};
+export declare const transcode: ({ blob, encoder, sampleRate, }: TranscodeParams) => Promise<Blob>;

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

@@ -1,17 +1,7 @@
 import { encodeToWaw } from './wav';
-import { encodeToMp3 } from './mp3';
 import { createFileFromBlobs, getExtensionFromMimeType } from '../../ReactFileUtilities';
-export const transcode = ({ blob, sampleRate, targetMimeType }) => {
-    const file = createFileFromBlobs({
-        blobsArray: [blob],
-        fileName: `audio_recording_${new Date().toISOString()}.${getExtensionFromMimeType(blob.type)}`,
-        mimeType: blob.type,
-    });
-    if (targetMimeType.match('audio/wav')) {
-        return encodeToWaw(file, sampleRate);
-    }
-    if (targetMimeType.match('audio/mp3')) {
-        return encodeToMp3(file, sampleRate);
-    }
-    return Promise.resolve(blob);
-};
+export const transcode = ({ blob, encoder = encodeToWaw, sampleRate, }) => encoder(createFileFromBlobs({
+    blobsArray: [blob],
+    fileName: `audio_recording_${new Date().toISOString()}.${getExtensionFromMimeType(blob.type)}`,
+    mimeType: blob.type,
+}), sampleRate);

package/dist/components/Message/MessageSimple.js

@@ -92,7 +92,7 @@ const MessageSimpleWithContext = (props) => {
             showMetadata && (React.createElement("div", { className: 'str-chat__message-metadata' },
                 React.createElement(MessageStatus, null),
                 !isMyMessage() && !!message.user && (React.createElement("span", { className: 'str-chat__message-simple-name' }, message.user.name || message.user.id)),
-                React.createElement(MessageTimestamp, { calendar: true, customClass: 'str-chat__message-simple-timestamp' }),
+                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 }))))));
 };

package/dist/components/Message/MessageStatus.js

@@ -26,9 +26,10 @@ const UnMemoizedMessageStatus = (props) => {
     const sending = message.status === 'sending';
     const delivered = message.status === 'received' && message.id === lastReceivedId && !threadList;
     const deliveredAndRead = !!(readBy?.length && !threadList && !justReadByMe);
-    const [lastReadUser] = deliveredAndRead
+    const readersWithoutOwnUser = deliveredAndRead
         ? readBy.filter((item) => item.id !== client.user?.id)
         : [];
+    const [lastReadUser] = readersWithoutOwnUser;
     return (React.createElement("span", { className: rootClassName, "data-testid": clsx({
             'message-status-read-by': deliveredAndRead,
             'message-status-received': delivered && !deliveredAndRead,
@@ -47,6 +48,6 @@ const UnMemoizedMessageStatus = (props) => {
             (MessageReadStatus ? (React.createElement(MessageReadStatus, null)) : (React.createElement(React.Fragment, null,
                 React.createElement(PopperTooltip, { offset: [0, 5], referenceElement: referenceElement, visible: tooltipVisible }, getReadByTooltipText(readBy, t, client, tooltipUserNameMapper)),
                 React.createElement(Avatar, { className: 'str-chat__avatar--message-status', image: lastReadUser.image, name: lastReadUser.name || lastReadUser.id, user: lastReadUser }),
-                readBy.length > 2 && (React.createElement("span", { className: `str-chat__message-${messageType}-status-number`, "data-testid": 'message-status-read-by-many' }, readBy.length - 1)))))));
+                readersWithoutOwnUser.length > 1 && (React.createElement("span", { className: `str-chat__message-${messageType}-status-number`, "data-testid": 'message-status-read-by-many' }, readersWithoutOwnUser.length)))))));
 };
 export const MessageStatus = React.memo(UnMemoizedMessageStatus);