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

package/README.md

@@ -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/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/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.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/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/MessageTimestamp.d.ts

@@ -2,7 +2,6 @@ import React from 'react';
 import type { StreamMessage } from '../../context/ChannelStateContext';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import type { TimestampFormatterOptions } from '../../i18n/utils';
-export declare const defaultTimestampFormat = "h:mmA";
 export type MessageTimestampProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = TimestampFormatterOptions & {
     customClass?: string;
     message?: StreamMessage<StreamChatGenerics>;

package/dist/components/Message/MessageTimestamp.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { useMessageContext } from '../../context/MessageContext';
 import { Timestamp as DefaultTimestamp } from './Timestamp';
 import { useComponentContext } from '../../context';
-export const defaultTimestampFormat = 'h:mmA';
 const UnMemoizedMessageTimestamp = (props) => {
     const { message: propMessage, ...timestampProps } = props;
     const { message: contextMessage } = useMessageContext('MessageTimestamp');

package/dist/components/Message/Timestamp.d.ts

@@ -4,5 +4,4 @@ export interface TimestampProps extends TimestampFormatterOptions {
     customClass?: string;
     timestamp?: Date | string;
 }
-export declare const defaultTimestampFormat = "h:mmA";
 export declare function Timestamp(props: TimestampProps): React.JSX.Element | null;

package/dist/components/Message/Timestamp.js

@@ -2,9 +2,8 @@ import React, { useMemo } from 'react';
 import { useMessageContext } from '../../context/MessageContext';
 import { isDate, useTranslationContext } from '../../context/TranslationContext';
 import { getDateString } from '../../i18n/utils';
-export const defaultTimestampFormat = 'h:mmA';
 export function Timestamp(props) {
-    const { calendar, calendarFormats, customClass, format = defaultTimestampFormat, timestamp, } = props;
+    const { calendar, calendarFormats, customClass, format, timestamp } = props;
     const { formatDate } = useMessageContext('MessageTimestamp');
     const { t, tDateTimeParser } = useTranslationContext('MessageTimestamp');
     const normalizedTimestamp = timestamp && isDate(timestamp) ? timestamp.toISOString() : timestamp;
@@ -16,7 +15,7 @@ export function Timestamp(props) {
         messageCreatedAt: normalizedTimestamp,
         t,
         tDateTimeParser,
-        timestampTranslationKey: 'timestamp/Timestamp',
+        timestampTranslationKey: 'timestamp/MessageTimestamp',
     }), [calendar, calendarFormats, format, formatDate, normalizedTimestamp, t, tDateTimeParser]);
     if (!when) {
         return null;

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

@@ -11,7 +11,7 @@ const visitor = (node, index, parent) => {
     if (!prevSibling?.position)
         return;
     if (node.position.start.line === prevSibling.position.start.line)
-        return false;
+        return;
     const ownStartLine = node.position.start.line;
     const prevEndLine = prevSibling.position.end.line;
     // the -1 is adjustment for the single line break into which multiple line breaks are converted

package/dist/components/Message/utils.js

@@ -212,6 +212,8 @@ export const areMessageUIPropsEqual = (prevProps, nextProps) => {
         return false;
     if (prevProps.readBy?.length !== nextProps.readBy?.length)
         return false;
+    if (prevProps.groupStyles !== nextProps.groupStyles)
+        return false;
     if (prevProps.showDetailedReactions !== nextProps.showDetailedReactions) {
         return false;
     }

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

@@ -2,37 +2,33 @@ import React from 'react';
 import { UnsupportedAttachmentPreview as DefaultUnknownAttachmentPreview, } from './UnsupportedAttachmentPreview';
 import { VoiceRecordingPreview as DefaultVoiceRecordingPreview, } from './VoiceRecordingPreview';
 import { FileAttachmentPreview as DefaultFilePreview, } from './FileAttachmentPreview';
-import { FileUploadPreviewAdapter, ImageUploadPreviewAdapter } from './UploadPreviewItem';
 import { ImageAttachmentPreview as DefaultImagePreview, } from './ImageAttachmentPreview';
 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, fileOrder, imageOrder, 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))
-                    return null;
-                if (isLocalVoiceRecordingAttachment(attachment)) {
-                    return (React.createElement(VoiceRecordingPreview, { attachment: attachment, handleRetry: uploadAttachment, key: attachment.localMetadata.id || attachment.asset_url, removeAttachments: removeAttachments }));
-                }
-                else if (isLocalAudioAttachment(attachment)) {
-                    return (React.createElement(AudioAttachmentPreview, { attachment: attachment, handleRetry: uploadAttachment, key: attachment.localMetadata.id || attachment.asset_url, removeAttachments: removeAttachments }));
-                }
-                else if (isLocalMediaAttachment(attachment)) {
-                    return (React.createElement(VideoAttachmentPreview, { attachment: attachment, handleRetry: uploadAttachment, key: attachment.localMetadata.id || attachment.asset_url, removeAttachments: removeAttachments }));
-                }
-                else if (isLocalImageAttachment(attachment)) {
-                    return (React.createElement(ImageAttachmentPreview, { attachment: attachment, handleRetry: uploadAttachment, key: attachment.localMetadata.id || attachment.image_url, removeAttachments: removeAttachments }));
-                }
-                else if (isLocalFileAttachment(attachment)) {
-                    return (React.createElement(FileAttachmentPreview, { attachment: attachment, handleRetry: uploadAttachment, key: attachment.localMetadata.id || attachment.asset_url, removeAttachments: removeAttachments }));
-                }
-                else if (isLocalAttachment(attachment)) {
-                    return (React.createElement(UnsupportedAttachmentPreview, { attachment: attachment, handleRetry: uploadAttachment, key: attachment.localMetadata.id, removeAttachments: removeAttachments }));
-                }
+        React.createElement("div", { className: 'str-chat__attachment-list-scroll-container', "data-testid": 'attachment-list-scroll-container' }, attachments.map((attachment) => {
+            if (isScrapedContent(attachment))
                 return null;
-            }),
-            imageOrder.map((id) => (React.createElement(ImageUploadPreviewAdapter, { id: id, key: id, Preview: ImageAttachmentPreview }))),
-            fileOrder.map((id) => (React.createElement(FileUploadPreviewAdapter, { id: id, key: id, Preview: FileAttachmentPreview }))))));
+            if (isLocalVoiceRecordingAttachment(attachment)) {
+                return (React.createElement(VoiceRecordingPreview, { attachment: attachment, handleRetry: uploadAttachment, key: attachment.localMetadata.id || attachment.asset_url, removeAttachments: removeAttachments }));
+            }
+            else if (isLocalAudioAttachment(attachment)) {
+                return (React.createElement(AudioAttachmentPreview, { attachment: attachment, handleRetry: uploadAttachment, key: attachment.localMetadata.id || attachment.asset_url, removeAttachments: removeAttachments }));
+            }
+            else if (isLocalMediaAttachment(attachment)) {
+                return (React.createElement(VideoAttachmentPreview, { attachment: attachment, handleRetry: uploadAttachment, key: attachment.localMetadata.id || attachment.asset_url, removeAttachments: removeAttachments }));
+            }
+            else if (isLocalImageAttachment(attachment)) {
+                return (React.createElement(ImageAttachmentPreview, { attachment: attachment, handleRetry: uploadAttachment, key: attachment.localMetadata.id || attachment.image_url, removeAttachments: removeAttachments }));
+            }
+            else if (isLocalFileAttachment(attachment)) {
+                return (React.createElement(FileAttachmentPreview, { attachment: attachment, handleRetry: uploadAttachment, key: attachment.localMetadata.id || attachment.asset_url, removeAttachments: removeAttachments }));
+            }
+            else if (isLocalAttachment(attachment)) {
+                return (React.createElement(UnsupportedAttachmentPreview, { attachment: attachment, handleRetry: uploadAttachment, key: attachment.localMetadata.id, removeAttachments: removeAttachments }));
+            }
+            return null;
+        }))));
 };

package/dist/components/MessageInput/AttachmentPreviewList/FileAttachmentPreview.d.ts

@@ -4,6 +4,7 @@ import { LocalAttachmentCast, LocalAttachmentUploadMetadata } from '../types';
 import type { DefaultStreamChatGenerics } from '../../../types';
 type FileLikeAttachment = {
     asset_url?: string;
+    file_size?: number;
     mime_type?: string;
     title?: string;
 };

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

@@ -13,7 +13,7 @@ export const FileAttachmentPreview = ({ attachment, handleRetry, removeAttachmen
             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", { className: 'str-chat__attachment-preview-file-download', download: true, href: attachment.asset_url, rel: 'noreferrer', target: '_blank' },
+            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 })))));
 };

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

@@ -9,6 +9,7 @@ export const ImageAttachmentPreview = ({ attachment, handleRetry, removeAttachme
     const [previewError, setPreviewError] = useState(false);
     const { id, uploadState } = attachment.localMetadata ?? {};
     const handleLoadError = useCallback(() => setPreviewError(true), []);
+    const assetUrl = attachment.image_url || attachment.localMetadata.previewUri;
     return (React.createElement("div", { className: clsx('str-chat__attachment-preview-image', {
             'str-chat__attachment-preview-image--error': previewError,
         }), "data-testid": 'attachment-preview-image' },
@@ -18,5 +19,5 @@ export const ImageAttachmentPreview = ({ attachment, handleRetry, removeAttachme
             React.createElement(RetryIcon, null))),
         uploadState === 'uploading' && (React.createElement("div", { className: 'str-chat__attachment-preview-image-loading' },
             React.createElement(LoadingIndicatorIcon, { size: 17 }))),
-        attachment.image_url && (React.createElement(BaseImage, { alt: attachment.title, className: 'str-chat__attachment-preview-thumbnail', onError: handleLoadError, src: attachment.image_url, title: attachment.title }))));
+        assetUrl && (React.createElement(BaseImage, { alt: attachment.fallback, className: 'str-chat__attachment-preview-thumbnail', onError: handleLoadError, src: assetUrl, title: attachment.fallback }))));
 };

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

@@ -2,11 +2,11 @@ import React from 'react';
 import { StreamMessage } from '../../context/ChannelStateContext';
 import { ComponentContextValue } from '../../context/ComponentContext';
 import type { Channel, Message, SendFileAPIResponse } from 'stream-chat';
+import type { BaseLocalAttachmentMetadata, LocalAttachmentUploadMetadata } from './types';
 import type { SearchQueryParams } from '../ChannelSearch/hooks/useChannelSearch';
 import type { MessageToSend } from '../../context/ChannelActionContext';
 import type { CustomTrigger, DefaultStreamChatGenerics, SendMessageOptions, UnknownType } from '../../types/types';
 import type { URLEnrichmentConfig } from './hooks/useLinkPreviews';
-import type { FileUpload, ImageUpload } from './types';
 import type { CustomAudioRecordingConfig } from '../MediaRecorder';
 export type EmojiSearchIndexResult = {
     id: string;
@@ -39,15 +39,13 @@ export type MessageInputProps<StreamChatGenerics extends DefaultStreamChatGeneri
     /** If true, the suggestion list will not display and autocomplete @mentions. Default: false. */
     disableMentions?: boolean;
     /** Function to override the default file upload request */
-    doFileUploadRequest?: (file: FileUpload['file'], channel: Channel<StreamChatGenerics>) => Promise<SendFileAPIResponse>;
+    doFileUploadRequest?: (file: LocalAttachmentUploadMetadata['file'], channel: Channel<StreamChatGenerics>) => Promise<SendFileAPIResponse>;
     /** Function to override the default image upload request */
-    doImageUploadRequest?: (file: ImageUpload['file'], channel: Channel<StreamChatGenerics>) => Promise<SendFileAPIResponse>;
+    doImageUploadRequest?: (file: LocalAttachmentUploadMetadata['file'], channel: Channel<StreamChatGenerics>) => Promise<SendFileAPIResponse>;
     /** Mechanism to be used with autocomplete and text replace features of the `MessageInput` component, see [emoji-mart `SearchIndex`](https://github.com/missive/emoji-mart#%EF%B8%8F%EF%B8%8F-headless-search) */
     emojiSearchIndex?: ComponentContextValue['emojiSearchIndex'];
     /** Custom error handler function to be called with a file/image upload fails */
-    errorHandler?: (error: Error, type: string, file: (FileUpload | ImageUpload)['file'] & {
-        id?: string;
-    }) => void;
+    errorHandler?: (error: Error, type: string, file: LocalAttachmentUploadMetadata['file'] & BaseLocalAttachmentMetadata) => void;
     /** If true, focuses the text input on component mount */
     focus?: boolean;
     /** Generates the default value for the underlying textarea element. The function's return value takes precedence before additionalTextareaProps.defaultValue. */

package/dist/components/MessageInput/MessageInputFlat.js

@@ -20,7 +20,7 @@ import { useMessageInputContext } from '../../context/MessageInputContext';
 import { useComponentContext } from '../../context/ComponentContext';
 export const MessageInputFlat = () => {
     const { t } = useTranslationContext('MessageInputFlat');
-    const { asyncMessagesMultiSendEnabled, attachments, cooldownRemaining, fileUploads, findAndEnqueueURLsToEnrich, handleSubmit, hideSendButton, imageUploads, isUploadEnabled, linkPreviews, maxFilesLeft, message, numberOfUploads, recordingController, setCooldownRemaining, text, uploadNewFiles, } = useMessageInputContext('MessageInputFlat');
+    const { asyncMessagesMultiSendEnabled, attachments, cooldownRemaining, findAndEnqueueURLsToEnrich, handleSubmit, hideSendButton, isUploadEnabled, linkPreviews, maxFilesLeft, message, numberOfUploads, recordingController, setCooldownRemaining, text, uploadNewFiles, } = useMessageInputContext('MessageInputFlat');
     const { AudioRecorder = DefaultAudioRecorder, AttachmentPreviewList = DefaultAttachmentPreviewList, CooldownTimer = DefaultCooldownTimer, FileUploadIcon = DefaultUploadIcon, LinkPreviewList = DefaultLinkPreviewList, QuotedMessagePreview = DefaultQuotedMessagePreview, RecordingPermissionDeniedNotification = DefaultRecordingPermissionDeniedNotification, SendButton = DefaultSendButton, StartRecordingAudioButton = DefaultStartRecordingAudioButton, EmojiPicker, } = useComponentContext('MessageInputFlat');
     const { acceptedFiles = [], multipleUploads, quotedMessage, } = useChannelStateContext('MessageInputFlat');
     const { setQuotedMessage } = useChannelActionContext('MessageInputFlat');
@@ -30,9 +30,7 @@ export const MessageInputFlat = () => {
         setShowRecordingPermissionDeniedNotification(false);
     }, []);
     const id = useMemo(() => nanoid(), []);
-    const failedAttachmentsCount = useMemo(() => attachments.filter((a) => a.localMetadata?.uploadState === 'failed').length, [attachments]);
-    const failedUploadsCount = useMemo(() => Object.values(fileUploads).filter((upload) => upload.state === 'failed').length +
-        Object.values(imageUploads).filter((upload) => upload.state === 'failed').length, [fileUploads, imageUploads]);
+    const failedUploadsCount = useMemo(() => attachments.filter((a) => a.localMetadata?.uploadState === 'failed').length, [attachments]);
     const accept = useMemo(() => acceptedFiles.reduce((mediaTypeMap, mediaType) => {
         mediaTypeMap[mediaType] ?? (mediaTypeMap[mediaType] = []);
         return mediaTypeMap;
@@ -89,15 +87,14 @@ export const MessageInputFlat = () => {
                 React.createElement("div", { className: 'str-chat__message-textarea-container' },
                     displayQuotedMessage && React.createElement(QuotedMessagePreview, { quotedMessage: quotedMessage }),
                     isUploadEnabled &&
-                        !!(numberOfUploads + failedUploadsCount ||
-                            (attachments.length && attachments.length !== linkPreviews.size)) && React.createElement(AttachmentPreviewList, null),
+                        !!(numberOfUploads + failedUploadsCount || attachments.length > 0) && (React.createElement(AttachmentPreviewList, null)),
                     React.createElement("div", { className: 'str-chat__message-textarea-with-emoji-picker' },
                         React.createElement(ChatAutoComplete, null),
                         EmojiPicker && React.createElement(EmojiPicker, null))),
                 !hideSendButton && (React.createElement(React.Fragment, null, cooldownRemaining ? (React.createElement(CooldownTimer, { cooldownInterval: cooldownRemaining, setCooldownRemaining: setCooldownRemaining })) : (React.createElement(React.Fragment, null,
                     React.createElement(SendButton, { disabled: !numberOfUploads &&
                             !text.length &&
-                            attachments.length - failedAttachmentsCount === 0, sendMessage: handleSubmit }),
+                            attachments.length - failedUploadsCount === 0, sendMessage: handleSubmit }),
                     recordingEnabled && (React.createElement(StartRecordingAudioButton, { disabled: isRecording ||
                             (!asyncMessagesMultiSendEnabled &&
                                 attachments.some((a) => a.type === RecordingAttachmentType.VOICE_RECORDING)), onClick: () => {

package/dist/components/MessageInput/hooks/useAttachments.d.ts

@@ -1,18 +1,14 @@
+import type { FileLike } from '../../ReactFileUtilities';
 import type { Attachment } from 'stream-chat';
 import type { MessageInputReducerAction, MessageInputState } from './useMessageInputState';
 import type { MessageInputProps } from '../MessageInput';
 import type { LocalAttachment } from '../types';
-import type { FileLike } from '../../ReactFileUtilities';
 import type { CustomTrigger, DefaultStreamChatGenerics } from '../../../types/types';
 export declare const useAttachments: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, V extends CustomTrigger = CustomTrigger>(props: MessageInputProps<StreamChatGenerics, V>, state: MessageInputState<StreamChatGenerics>, dispatch: React.Dispatch<MessageInputReducerAction<StreamChatGenerics>>, textareaRef: React.MutableRefObject<HTMLTextAreaElement | undefined>) => {
     maxFilesLeft: number;
     numberOfUploads: number;
     removeAttachments: (ids: string[]) => void;
-    removeFile: (id: string) => void;
-    removeImage: (id: string) => void;
     uploadAttachment: (att: LocalAttachment<StreamChatGenerics>) => Promise<LocalAttachment<StreamChatGenerics> | undefined>;
-    uploadFile: (id: string) => void;
-    uploadImage: (id: string) => Promise<void>;
     uploadNewFiles: (files: FileList | File[] | FileLike[]) => void;
     upsertAttachments: (attachments: (Attachment<StreamChatGenerics> | LocalAttachment<StreamChatGenerics>)[]) => void;
 };