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

package/dist/components/MessageInput/MessageInput.js

@@ -1,4 +1,3 @@
-import { __assign } from "tslib";
 import React from 'react';
 import { DefaultTriggerProvider } from './DefaultTriggerProvider';
 import { MessageInputFlat } from './MessageInputFlat';
@@ -8,28 +7,32 @@ import { useMessageInputState } from './hooks/useMessageInputState';
 import { useChannelStateContext } from '../../context/ChannelStateContext';
 import { useComponentContext } from '../../context/ComponentContext';
 import { MessageInputContextProvider } from '../../context/MessageInputContext';
-var MessageInputProvider = function (props) {
-    var _a;
-    var cooldownTimerState = useCooldownTimer();
-    var messageInputState = useMessageInputState(props);
-    var emojiSearchIndex = useComponentContext('MessageInput').emojiSearchIndex;
-    var messageInputContextValue = useCreateMessageInputContext(__assign(__assign(__assign(__assign({}, cooldownTimerState), messageInputState), props), { emojiSearchIndex: (_a = props.emojiSearchIndex) !== null && _a !== void 0 ? _a : emojiSearchIndex }));
+const MessageInputProvider = (props) => {
+    const cooldownTimerState = useCooldownTimer();
+    const messageInputState = useMessageInputState(props);
+    const { emojiSearchIndex } = useComponentContext('MessageInput');
+    const messageInputContextValue = useCreateMessageInputContext({
+        ...cooldownTimerState,
+        ...messageInputState,
+        ...props,
+        emojiSearchIndex: props.emojiSearchIndex ?? emojiSearchIndex,
+    });
     return (React.createElement(MessageInputContextProvider, { value: messageInputContextValue }, props.children));
 };
-var UnMemoizedMessageInput = function (props) {
-    var PropInput = props.Input;
-    var dragAndDropWindow = useChannelStateContext().dragAndDropWindow;
-    var _a = useComponentContext('MessageInput'), ContextInput = _a.Input, _b = _a.TriggerProvider, TriggerProvider = _b === void 0 ? DefaultTriggerProvider : _b;
-    var Input = PropInput || ContextInput || MessageInputFlat;
+const UnMemoizedMessageInput = (props) => {
+    const { Input: PropInput } = props;
+    const { dragAndDropWindow } = useChannelStateContext();
+    const { Input: ContextInput, TriggerProvider = DefaultTriggerProvider } = useComponentContext('MessageInput');
+    const Input = PropInput || ContextInput || MessageInputFlat;
     if (dragAndDropWindow)
         return (React.createElement(React.Fragment, null,
             React.createElement(TriggerProvider, null,
                 React.createElement(Input, null))));
-    return (React.createElement(MessageInputProvider, __assign({}, props),
+    return (React.createElement(MessageInputProvider, { ...props },
         React.createElement(TriggerProvider, null,
             React.createElement(Input, null))));
 };
 /**
  * A high level component that has provides all functionality to the Input it renders.
  */
-export var MessageInput = React.memo(UnMemoizedMessageInput);
+export const MessageInput = React.memo(UnMemoizedMessageInput);

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

@@ -1,4 +1,3 @@
 import React from 'react';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 export declare const MessageInputFlat: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>() => React.JSX.Element;
-//# sourceMappingURL=MessageInputFlat.d.ts.map

package/dist/components/MessageInput/MessageInputFlat.js

@@ -1,19 +1,16 @@
-import { __assign } from "tslib";
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { FileUploadButton, ImageDropzone, UploadButton } from '../ReactFileUtilities';
+import { UploadButton } from '../ReactFileUtilities';
 import clsx from 'clsx';
 import { useDropzone } from 'react-dropzone';
 import { nanoid } from 'nanoid';
-import { FileUploadIconFlat as DefaultFileUploadIcon, UploadIcon as DefaultUploadIcon, } from './icons';
+import { UploadIcon as DefaultUploadIcon } from './icons';
 import { CooldownTimer as DefaultCooldownTimer } from './CooldownTimer';
 import { SendButton as DefaultSendButton } from './SendButton';
 import { AudioRecorder as DefaultAudioRecorder, RecordingPermissionDeniedNotification as DefaultRecordingPermissionDeniedNotification, StartRecordingAudioButton as DefaultStartRecordingAudioButton, RecordingPermission, } from '../MediaRecorder';
 import { QuotedMessagePreview as DefaultQuotedMessagePreview, QuotedMessagePreviewHeader, } from './QuotedMessagePreview';
 import { AttachmentPreviewList as DefaultAttachmentPreviewList } from './AttachmentPreviewList';
 import { LinkPreviewList as DefaultLinkPreviewList } from './LinkPreviewList';
-import { UploadsPreview } from './UploadsPreview';
 import { ChatAutoComplete } from '../ChatAutoComplete/ChatAutoComplete';
-import { Tooltip } from '../Tooltip/Tooltip';
 import { RecordingAttachmentType } from '../MediaRecorder/classes';
 import { useChatContext } from '../../context/ChatContext';
 import { useChannelActionContext } from '../../context/ChannelActionContext';
@@ -21,14 +18,35 @@ import { useChannelStateContext } from '../../context/ChannelStateContext';
 import { useTranslationContext } from '../../context/TranslationContext';
 import { useMessageInputContext } from '../../context/MessageInputContext';
 import { useComponentContext } from '../../context/ComponentContext';
-export var MessageInputFlat = function () {
-    var quotedMessage = useChannelStateContext('MessageInputFlat').quotedMessage;
-    var setQuotedMessage = useChannelActionContext('MessageInputFlat').setQuotedMessage;
-    var _a = useChatContext('MessageInputFlat'), channel = _a.channel, themeVersion = _a.themeVersion;
-    useEffect(function () {
-        var handleQuotedMessageUpdate = function (e) {
-            var _a;
-            if (((_a = e.message) === null || _a === void 0 ? void 0 : _a.id) !== (quotedMessage === null || quotedMessage === void 0 ? void 0 : quotedMessage.id))
+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 { 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');
+    const { channel } = useChatContext('MessageInputFlat');
+    const [showRecordingPermissionDeniedNotification, setShowRecordingPermissionDeniedNotification,] = useState(false);
+    const closePermissionDeniedNotification = useCallback(() => {
+        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 accept = useMemo(() => acceptedFiles.reduce((mediaTypeMap, mediaType) => {
+        mediaTypeMap[mediaType] ?? (mediaTypeMap[mediaType] = []);
+        return mediaTypeMap;
+    }, {}), [acceptedFiles]);
+    const { getRootProps, isDragActive, isDragReject } = useDropzone({
+        accept,
+        disabled: !isUploadEnabled || maxFilesLeft === 0,
+        multiple: multipleUploads,
+        noClick: true,
+        onDrop: uploadNewFiles,
+    });
+    useEffect(() => {
+        const handleQuotedMessageUpdate = (e) => {
+            if (e.message?.id !== quotedMessage?.id)
                 return;
             if (e.type === 'message.deleted') {
                 setQuotedMessage(undefined);
@@ -36,77 +54,23 @@ export var MessageInputFlat = function () {
             }
             setQuotedMessage(e.message);
         };
-        channel === null || channel === void 0 ? void 0 : channel.on('message.deleted', handleQuotedMessageUpdate);
-        channel === null || channel === void 0 ? void 0 : channel.on('message.updated', handleQuotedMessageUpdate);
-        return function () {
-            channel === null || channel === void 0 ? void 0 : channel.off('message.deleted', handleQuotedMessageUpdate);
-            channel === null || channel === void 0 ? void 0 : channel.off('message.updated', handleQuotedMessageUpdate);
+        channel?.on('message.deleted', handleQuotedMessageUpdate);
+        channel?.on('message.updated', handleQuotedMessageUpdate);
+        return () => {
+            channel?.off('message.deleted', handleQuotedMessageUpdate);
+            channel?.off('message.updated', handleQuotedMessageUpdate);
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [channel, quotedMessage]);
-    return themeVersion === '2' ? (React.createElement(MessageInputV2, null)) : (React.createElement(MessageInputV1, null));
-};
-var MessageInputV1 = function () {
-    var _a = useChannelStateContext('MessageInputFlat'), acceptedFiles = _a.acceptedFiles, multipleUploads = _a.multipleUploads, quotedMessage = _a.quotedMessage;
-    var t = useTranslationContext('MessageInputFlat').t;
-    var _b = useMessageInputContext('MessageInputFlat'), cooldownRemaining = _b.cooldownRemaining, handleSubmit = _b.handleSubmit, hideSendButton = _b.hideSendButton, isUploadEnabled = _b.isUploadEnabled, maxFilesLeft = _b.maxFilesLeft, numberOfUploads = _b.numberOfUploads, setCooldownRemaining = _b.setCooldownRemaining, uploadNewFiles = _b.uploadNewFiles;
-    var _c = useComponentContext('MessageInputFlat'), _d = _c.CooldownTimer, CooldownTimer = _d === void 0 ? DefaultCooldownTimer : _d, _e = _c.FileUploadIcon, FileUploadIcon = _e === void 0 ? DefaultFileUploadIcon : _e, _f = _c.QuotedMessagePreview, QuotedMessagePreview = _f === void 0 ? DefaultQuotedMessagePreview : _f, _g = _c.SendButton, SendButton = _g === void 0 ? DefaultSendButton : _g, _h = _c.AttachmentPreviewList, AttachmentPreviewList = _h === void 0 ? UploadsPreview : _h, EmojiPicker = _c.EmojiPicker;
-    return (React.createElement("div", { className: clsx('str-chat__input-flat', 'str-chat__message-input', {
-            'str-chat__input-flat--send-button-active': !!SendButton,
-            'str-chat__input-flat-has-attachments': numberOfUploads,
-            'str-chat__input-flat-quoted': quotedMessage && !quotedMessage.parent_id,
-        }) },
-        React.createElement(ImageDropzone, { accept: acceptedFiles, disabled: !isUploadEnabled || maxFilesLeft === 0 || !!cooldownRemaining, handleFiles: uploadNewFiles, maxNumberOfFiles: maxFilesLeft, multiple: multipleUploads },
-            quotedMessage && !quotedMessage.parent_id && (React.createElement(QuotedMessagePreview, { quotedMessage: quotedMessage })),
-            React.createElement("div", { className: 'str-chat__input-flat-wrapper' },
-                isUploadEnabled && React.createElement(AttachmentPreviewList, null),
-                React.createElement("div", { className: 'str-chat__input-flat--textarea-wrapper' },
-                    EmojiPicker && React.createElement(EmojiPicker, null),
-                    !!cooldownRemaining && (React.createElement("div", { className: 'str-chat__input-flat-cooldown' },
-                        React.createElement(CooldownTimer, { cooldownInterval: cooldownRemaining, setCooldownRemaining: setCooldownRemaining }))),
-                    React.createElement(ChatAutoComplete, null),
-                    isUploadEnabled && !cooldownRemaining && (React.createElement("div", { className: 'str-chat__fileupload-wrapper', "data-testid": 'fileinput' },
-                        React.createElement(Tooltip, null, maxFilesLeft
-                            ? t('Attach files')
-                            : t("You've reached the maximum number of files")),
-                        React.createElement(FileUploadButton, { accepts: acceptedFiles, disabled: maxFilesLeft === 0, handleFiles: uploadNewFiles, multiple: multipleUploads },
-                            React.createElement("span", { className: 'str-chat__input-flat-fileupload' },
-                                React.createElement(FileUploadIcon, null)))))),
-                !(cooldownRemaining || hideSendButton) && React.createElement(SendButton, { sendMessage: handleSubmit })))));
-};
-var MessageInputV2 = function () {
-    var _a = useChannelStateContext('MessageInputV2'), _b = _a.acceptedFiles, acceptedFiles = _b === void 0 ? [] : _b, multipleUploads = _a.multipleUploads, quotedMessage = _a.quotedMessage;
-    var t = useTranslationContext('MessageInputV2').t;
-    var _c = useMessageInputContext('MessageInputV2'), asyncMessagesMultiSendEnabled = _c.asyncMessagesMultiSendEnabled, attachments = _c.attachments, cooldownRemaining = _c.cooldownRemaining, findAndEnqueueURLsToEnrich = _c.findAndEnqueueURLsToEnrich, handleSubmit = _c.handleSubmit, hideSendButton = _c.hideSendButton, isUploadEnabled = _c.isUploadEnabled, linkPreviews = _c.linkPreviews, maxFilesLeft = _c.maxFilesLeft, message = _c.message, numberOfUploads = _c.numberOfUploads, recordingController = _c.recordingController, setCooldownRemaining = _c.setCooldownRemaining, text = _c.text, uploadNewFiles = _c.uploadNewFiles;
-    var _d = useComponentContext('MessageInputV2'), _e = _d.AudioRecorder, AudioRecorder = _e === void 0 ? DefaultAudioRecorder : _e, _f = _d.AttachmentPreviewList, AttachmentPreviewList = _f === void 0 ? DefaultAttachmentPreviewList : _f, _g = _d.CooldownTimer, CooldownTimer = _g === void 0 ? DefaultCooldownTimer : _g, _h = _d.FileUploadIcon, FileUploadIcon = _h === void 0 ? DefaultUploadIcon : _h, _j = _d.LinkPreviewList, LinkPreviewList = _j === void 0 ? DefaultLinkPreviewList : _j, _k = _d.QuotedMessagePreview, QuotedMessagePreview = _k === void 0 ? DefaultQuotedMessagePreview : _k, _l = _d.RecordingPermissionDeniedNotification, RecordingPermissionDeniedNotification = _l === void 0 ? DefaultRecordingPermissionDeniedNotification : _l, _m = _d.SendButton, SendButton = _m === void 0 ? DefaultSendButton : _m, _o = _d.StartRecordingAudioButton, StartRecordingAudioButton = _o === void 0 ? DefaultStartRecordingAudioButton : _o, EmojiPicker = _d.EmojiPicker;
-    var _p = useState(false), showRecordingPermissionDeniedNotification = _p[0], setShowRecordingPermissionDeniedNotification = _p[1];
-    var closePermissionDeniedNotification = useCallback(function () {
-        setShowRecordingPermissionDeniedNotification(false);
-    }, []);
-    var id = useMemo(function () { return nanoid(); }, []);
-    var accept = useMemo(function () {
-        return acceptedFiles.reduce(function (mediaTypeMap, mediaType) {
-            var _a;
-            (_a = mediaTypeMap[mediaType]) !== null && _a !== void 0 ? _a : (mediaTypeMap[mediaType] = []);
-            return mediaTypeMap;
-        }, {});
-    }, [acceptedFiles]);
-    var _q = useDropzone({
-        accept: accept,
-        disabled: !isUploadEnabled || maxFilesLeft === 0,
-        multiple: multipleUploads,
-        noClick: true,
-        onDrop: uploadNewFiles,
-    }), getRootProps = _q.getRootProps, isDragActive = _q.isDragActive, isDragReject = _q.isDragReject;
     if (recordingController.recordingState)
         return React.createElement(AudioRecorder, null);
     // TODO: "!message" condition is a temporary fix for shared
     // state when editing a message (fix shared state issue)
-    var displayQuotedMessage = !message && quotedMessage && !quotedMessage.parent_id;
-    var recordingEnabled = !!(recordingController.recorder && navigator.mediaDevices); // account for requirement on iOS as per this bug report: https://bugs.webkit.org/show_bug.cgi?id=252303
-    var isRecording = !!recordingController.recordingState;
+    const displayQuotedMessage = !message && quotedMessage && !quotedMessage.parent_id;
+    const recordingEnabled = !!(recordingController.recorder && navigator.mediaDevices); // account for requirement on iOS as per this bug report: https://bugs.webkit.org/show_bug.cgi?id=252303
+    const isRecording = !!recordingController.recordingState;
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", __assign({}, getRootProps({ className: 'str-chat__message-input' })),
+        React.createElement("div", { ...getRootProps({ className: 'str-chat__message-input' }) },
             recordingEnabled &&
                 recordingController.permissionState === 'denied' &&
                 showRecordingPermissionDeniedNotification && (React.createElement(RecordingPermissionDeniedNotification, { onClose: closePermissionDeniedNotification, permissionName: RecordingPermission.MIC })),
@@ -119,24 +83,25 @@ var MessageInputV2 = function () {
             displayQuotedMessage && React.createElement(QuotedMessagePreviewHeader, null),
             React.createElement("div", { className: 'str-chat__message-input-inner' },
                 React.createElement("div", { className: 'str-chat__file-input-container', "data-testid": 'file-upload-button' },
-                    React.createElement(UploadButton, { accept: acceptedFiles === null || acceptedFiles === void 0 ? void 0 : acceptedFiles.join(','), "aria-label": t('aria/File upload'), className: 'str-chat__file-input', "data-testid": 'file-input', disabled: !isUploadEnabled || maxFilesLeft === 0, id: id, multiple: multipleUploads, onFileChange: uploadNewFiles }),
+                    React.createElement(UploadButton, { accept: acceptedFiles?.join(','), "aria-label": t('aria/File upload'), className: 'str-chat__file-input', "data-testid": 'file-input', disabled: !isUploadEnabled || maxFilesLeft === 0, id: id, multiple: multipleUploads, onFileChange: uploadNewFiles }),
                     React.createElement("label", { className: 'str-chat__file-input-label', htmlFor: id },
                         React.createElement(FileUploadIcon, null))),
                 React.createElement("div", { className: 'str-chat__message-textarea-container' },
                     displayQuotedMessage && React.createElement(QuotedMessagePreview, { quotedMessage: quotedMessage }),
                     isUploadEnabled &&
-                        !!(numberOfUploads ||
+                        !!(numberOfUploads + failedUploadsCount ||
                             (attachments.length && attachments.length !== linkPreviews.size)) && 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, sendMessage: handleSubmit }),
+                    React.createElement(SendButton, { disabled: !numberOfUploads &&
+                            !text.length &&
+                            attachments.length - failedAttachmentsCount === 0, sendMessage: handleSubmit }),
                     recordingEnabled && (React.createElement(StartRecordingAudioButton, { disabled: isRecording ||
                             (!asyncMessagesMultiSendEnabled &&
-                                attachments.some(function (a) { return a.type === RecordingAttachmentType.VOICE_RECORDING; })), onClick: function () {
-                            var _a;
-                            (_a = recordingController.recorder) === null || _a === void 0 ? void 0 : _a.start();
+                                attachments.some((a) => a.type === RecordingAttachmentType.VOICE_RECORDING)), onClick: () => {
+                            recordingController.recorder?.start();
                             setShowRecordingPermissionDeniedNotification(true);
                         } }))))))))));
 };

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

@@ -6,4 +6,3 @@ export type QuotedMessagePreviewProps<StreamChatGenerics extends DefaultStreamCh
     quotedMessage: StreamMessage<StreamChatGenerics>;
 };
 export declare const QuotedMessagePreview: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ quotedMessage, }: QuotedMessagePreviewProps<StreamChatGenerics>) => React.JSX.Element | null;
-//# sourceMappingURL=QuotedMessagePreview.d.ts.map

package/dist/components/MessageInput/QuotedMessagePreview.js

@@ -4,39 +4,29 @@ import { CloseIcon } from './icons';
 import { useChannelActionContext } from '../../context/ChannelActionContext';
 import { useComponentContext } from '../../context/ComponentContext';
 import { useTranslationContext } from '../../context/TranslationContext';
-import { useChatContext } from '../../context/ChatContext';
-export var QuotedMessagePreviewHeader = function () {
-    var setQuotedMessage = useChannelActionContext('QuotedMessagePreview').setQuotedMessage;
-    var t = useTranslationContext('QuotedMessagePreview').t;
-    return (React.createElement("div", { className: 'quoted-message-preview-header str-chat__quoted-message-preview-header' },
+export const QuotedMessagePreviewHeader = () => {
+    const { setQuotedMessage } = useChannelActionContext('QuotedMessagePreview');
+    const { t } = useTranslationContext('QuotedMessagePreview');
+    return (React.createElement("div", { className: 'str-chat__quoted-message-preview-header' },
         React.createElement("div", { className: 'str-chat__quoted-message-reply-to-message' }, t('Reply to Message')),
-        React.createElement("button", { "aria-label": t('aria/Cancel Reply'), className: 'str-chat__square-button str-chat__quoted-message-remove', onClick: function () { return setQuotedMessage(undefined); } },
+        React.createElement("button", { "aria-label": t('aria/Cancel Reply'), className: 'str-chat__quoted-message-remove', onClick: () => setQuotedMessage(undefined) },
             React.createElement(CloseIcon, null))));
 };
-export var QuotedMessagePreview = function (_a) {
-    var _b;
-    var quotedMessage = _a.quotedMessage;
-    var _c = useComponentContext('QuotedMessagePreview'), Attachment = _c.Attachment, _d = _c.Avatar, Avatar = _d === void 0 ? DefaultAvatar : _d;
-    var userLanguage = useTranslationContext('QuotedMessagePreview').userLanguage;
-    var themeVersion = useChatContext('QuotedMessagePreview').themeVersion;
-    var quotedMessageText = ((_b = quotedMessage.i18n) === null || _b === void 0 ? void 0 : _b["".concat(userLanguage, "_text")]) ||
+export const QuotedMessagePreview = ({ quotedMessage, }) => {
+    const { Attachment, Avatar = DefaultAvatar } = useComponentContext('QuotedMessagePreview');
+    const { userLanguage } = useTranslationContext('QuotedMessagePreview');
+    const quotedMessageText = quotedMessage.i18n?.[`${userLanguage}_text`] ||
         quotedMessage.text;
-    var quotedMessageAttachment = useMemo(function () {
-        var _a;
-        var attachment = ((_a = quotedMessage.attachments) !== null && _a !== void 0 ? _a : [])[0];
+    const quotedMessageAttachment = useMemo(() => {
+        const [attachment] = quotedMessage.attachments ?? [];
         return attachment ? [attachment] : [];
     }, [quotedMessage.attachments]);
     if (!quotedMessageText && !quotedMessageAttachment)
         return null;
-    // TODO: remove div.quoted-message-preview-content when deprecating V1 theming
-    // move str-chat__quoted-message-preview to main div
-    return (React.createElement("div", { className: 'quoted-message-preview', "data-testid": 'quoted-message-preview' },
-        themeVersion === '1' && React.createElement(QuotedMessagePreviewHeader, null),
-        React.createElement("div", { className: 'quoted-message-preview-content str-chat__quoted-message-preview' },
-            quotedMessage.user && (React.createElement(Avatar, { image: quotedMessage.user.image, name: quotedMessage.user.name || quotedMessage.user.id, size: 20, user: quotedMessage.user })),
-            React.createElement("div", { className: 'quoted-message-preview-content-inner str-chat__quoted-message-bubble' },
-                !!quotedMessageAttachment.length && (React.createElement(Attachment, { attachments: quotedMessageAttachment, isQuoted: true })),
-                React.createElement("div", { className: 'str-chat__quoted-message-text', "data-testid": 'quoted-message-text' },
-                    themeVersion === '2' && React.createElement("p", null, quotedMessageText),
-                    themeVersion === '1' && React.createElement(React.Fragment, null, quotedMessageText))))));
+    return (React.createElement("div", { className: 'str-chat__quoted-message-preview', "data-testid": 'quoted-message-preview' },
+        quotedMessage.user && (React.createElement(Avatar, { className: 'str-chat__avatar--quoted-message-sender', image: quotedMessage.user.image, name: quotedMessage.user.name || quotedMessage.user.id, user: quotedMessage.user })),
+        React.createElement("div", { className: 'str-chat__quoted-message-bubble' },
+            !!quotedMessageAttachment.length && (React.createElement(Attachment, { attachments: quotedMessageAttachment, isQuoted: true })),
+            React.createElement("div", { className: 'str-chat__quoted-message-text', "data-testid": 'quoted-message-text' },
+                React.createElement("p", null, quotedMessageText)))));
 };

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

@@ -5,4 +5,3 @@ export type SendButtonProps<StreamChatGenerics extends DefaultStreamChatGenerics
     sendMessage: (event: React.BaseSyntheticEvent, customMessageData?: Partial<Message<StreamChatGenerics>>) => void;
 } & React.ComponentProps<'button'>;
 export declare const SendButton: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ sendMessage, ...rest }: SendButtonProps<StreamChatGenerics>) => React.JSX.Element;
-//# sourceMappingURL=SendButton.d.ts.map

package/dist/components/MessageInput/SendButton.js

@@ -1,9 +1,4 @@
-import { __assign, __rest } from "tslib";
 import React from 'react';
-import { useChatContext } from '../../context';
-import { SendIconV1, SendIconV2 } from './icons';
-export var SendButton = function (_a) {
-    var sendMessage = _a.sendMessage, rest = __rest(_a, ["sendMessage"]);
-    var themeVersion = useChatContext('SendButton').themeVersion;
-    return (React.createElement("button", __assign({ "aria-label": 'Send', className: 'str-chat__send-button', "data-testid": 'send-button', onClick: sendMessage, type: 'button' }, rest), themeVersion === '2' ? React.createElement(SendIconV2, null) : React.createElement(SendIconV1, null)));
-};
+import { SendIcon } from './icons';
+export const SendButton = ({ sendMessage, ...rest }) => (React.createElement("button", { "aria-label": 'Send', className: 'str-chat__send-button', "data-testid": 'send-button', onClick: sendMessage, type: 'button', ...rest },
+    React.createElement(SendIcon, null)));

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

@@ -1,3 +1,2 @@
 export * from './useCooldownTimer';
 export * from './useMessageInputState';
-//# sourceMappingURL=index.d.ts.map

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

@@ -4,7 +4,7 @@ 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: import("react").Dispatch<MessageInputReducerAction<StreamChatGenerics>>, textareaRef: React.MutableRefObject<HTMLTextAreaElement | undefined>) => {
+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;
@@ -14,6 +14,5 @@ export declare const useAttachments: <StreamChatGenerics extends DefaultStreamCh
     uploadFile: (id: string) => void;
     uploadImage: (id: string) => Promise<void>;
     uploadNewFiles: (files: FileList | File[] | FileLike[]) => void;
-    upsertAttachments: (attachments: (LocalAttachment<StreamChatGenerics> | Attachment<StreamChatGenerics>)[]) => void;
+    upsertAttachments: (attachments: (Attachment<StreamChatGenerics> | LocalAttachment<StreamChatGenerics>)[]) => void;
 };
-//# sourceMappingURL=useAttachments.d.ts.map