stream-chat-react 11.14.0 → 11.15.0

package/dist/components/MessageInput/AttachmentPreviewList.js

@@ -1,17 +1,66 @@
 import clsx from 'clsx';
 import React, { useCallback, useState } from 'react';
+import { CloseIcon, DownloadIcon, LoadingIndicatorIcon, RetryIcon } from './icons';
+import { isAudioAttachment, isMediaAttachment, isVoiceRecordingAttachment, PlayButton, } from '../Attachment';
 import { BaseImage as DefaultBaseImage } from '../Gallery';
+import { useAudioController } from '../Attachment/hooks/useAudioController';
+import { RecordingTimer } from '../MediaRecorder';
 import { FileIcon } from '../ReactFileUtilities';
 import { useComponentContext, useMessageInputContext } from '../../context';
-import { useFileState } from './hooks/useFileState';
-import { CloseIcon, DownloadIcon, LoadingIndicatorIcon, RetryIcon } from './icons';
 export var AttachmentPreviewList = function () {
-    var _a = useMessageInputContext('AttachmentPreviewList'), fileOrder = _a.fileOrder, imageOrder = _a.imageOrder;
+    var _a = useMessageInputContext('AttachmentPreviewList'), attachments = _a.attachments, fileOrder = _a.fileOrder, imageOrder = _a.imageOrder, removeAttachment = _a.removeAttachment, uploadAttachment = _a.uploadAttachment;
     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(function (attachment) {
+                var _a, _b;
+                if (isVoiceRecordingAttachment(attachment)) {
+                    return (React.createElement(VoiceRecordingPreview, { attachment: attachment, handleRetry: uploadAttachment, key: ((_a = attachment.$internal) === null || _a === void 0 ? void 0 : _a.id) || attachment.asset_url, mimeType: attachment.mime_type, removeAttachment: removeAttachment }));
+                }
+                else if (isAudioAttachment(attachment) || isMediaAttachment(attachment)) {
+                    // unnecessary to pass handleRetry as video and audio if among attachments is already uploaded
+                    // - user looking at the edit message input
+                    return (React.createElement(FilePreview, { attachment: attachment, handleRetry: uploadAttachment, key: ((_b = attachment.$internal) === null || _b === void 0 ? void 0 : _b.id) || attachment.asset_url, removeAttachment: removeAttachment }));
+                }
+                return null;
+            }),
             imageOrder.map(function (id) { return (React.createElement(ImagePreviewItem, { id: id, key: id })); }),
             fileOrder.map(function (id) { return (React.createElement(FilePreviewItem, { id: id, key: id })); }))));
 };
+var VoiceRecordingPreview = function (_a) {
+    var _b, _c, _d;
+    var attachment = _a.attachment, handleRetry = _a.handleRetry, mimeType = _a.mimeType, removeAttachment = _a.removeAttachment;
+    var _e = useAudioController({ mimeType: mimeType }), audioRef = _e.audioRef, isPlaying = _e.isPlaying, secondsElapsed = _e.secondsElapsed, togglePlay = _e.togglePlay;
+    return (React.createElement("div", { className: 'str-chat__attachment-preview-voice-recording', "data-testid": 'attachment-preview-voice-recording' },
+        React.createElement("audio", { ref: audioRef },
+            React.createElement("source", { "data-testid": 'audio-source', src: attachment.asset_url, type: attachment.mime_type })),
+        React.createElement(PlayButton, { isPlaying: isPlaying, onClick: togglePlay }),
+        React.createElement("button", { className: 'str-chat__attachment-preview-delete', "data-testid": 'file-preview-item-delete-button', disabled: ((_b = attachment.$internal) === null || _b === void 0 ? void 0 : _b.uploadState) === 'uploading', onClick: function () { var _a; return ((_a = attachment.$internal) === null || _a === void 0 ? void 0 : _a.id) && removeAttachment(attachment.$internal.id); } },
+            React.createElement(CloseIcon, null)),
+        ((_c = attachment.$internal) === null || _c === void 0 ? void 0 : _c.uploadState) === 'failed' && !!handleRetry && (React.createElement("button", { className: 'str-chat__attachment-preview-error str-chat__attachment-preview-error-file', "data-testid": 'file-preview-item-retry-button', onClick: function () { return handleRetry(attachment); } },
+            React.createElement(RetryIcon, null))),
+        React.createElement("div", { className: 'str-chat__attachment-preview-metadata' },
+            React.createElement("div", { className: 'str-chat__attachment-preview-file-name', title: attachment.title }, attachment.title),
+            typeof attachment.duration !== 'undefined' && (React.createElement(RecordingTimer, { durationSeconds: secondsElapsed || attachment.duration })),
+            ((_d = attachment.$internal) === null || _d === void 0 ? void 0 : _d.uploadState) === 'uploading' && React.createElement(LoadingIndicatorIcon, { size: 17 })),
+        React.createElement("div", { className: 'str-chat__attachment-preview-file-icon' },
+            React.createElement(FileIcon, { filename: attachment.title, mimeType: attachment.mime_type, version: '2' }))));
+};
+var FilePreview = function (_a) {
+    var _b, _c, _d, _e;
+    var attachment = _a.attachment, handleRetry = _a.handleRetry, removeAttachment = _a.removeAttachment;
+    return (React.createElement("div", { className: 'str-chat__attachment-preview-file', "data-testid": 'attachment-preview-file' },
+        React.createElement("div", { className: 'str-chat__attachment-preview-file-icon' },
+            React.createElement(FileIcon, { filename: attachment.title, mimeType: attachment.mime_type, version: '2' })),
+        React.createElement("button", { className: 'str-chat__attachment-preview-delete', "data-testid": 'file-preview-item-delete-button', disabled: ((_b = attachment.$internal) === null || _b === void 0 ? void 0 : _b.uploadState) === 'uploading', onClick: function () { var _a, _b; return ((_a = attachment.$internal) === null || _a === void 0 ? void 0 : _a.id) && removeAttachment((_b = attachment.$internal) === null || _b === void 0 ? void 0 : _b.id); } },
+            React.createElement(CloseIcon, null)),
+        ((_c = attachment.$internal) === null || _c === void 0 ? void 0 : _c.uploadState) === 'failed' && !!handleRetry && (React.createElement("button", { className: 'str-chat__attachment-preview-error str-chat__attachment-preview-error-file', "data-testid": 'file-preview-item-retry-button', onClick: function () { return handleRetry(attachment); } },
+            React.createElement(RetryIcon, null))),
+        React.createElement("div", { className: 'str-chat__attachment-preview-file-end' },
+            React.createElement("div", { className: 'str-chat__attachment-preview-file-name', title: attachment.title }, attachment.title),
+            ((_d = attachment.$internal) === null || _d === void 0 ? void 0 : _d.uploadState) === 'finished' && (React.createElement("a", { className: 'str-chat__attachment-preview-file-download', download: true, href: attachment.asset_url, rel: 'noreferrer', target: '_blank' },
+                React.createElement(DownloadIcon, null))),
+            ((_e = attachment.$internal) === null || _e === void 0 ? void 0 : _e.uploadState) === 'uploading' && React.createElement(LoadingIndicatorIcon, { size: 17 }))));
+};
 export var ImagePreviewItem = function (_a) {
     var _b;
     var id = _a.id;
@@ -42,25 +91,22 @@ export var ImagePreviewItem = function (_a) {
 var FilePreviewItem = function (_a) {
     var id = _a.id;
     var _b = useMessageInputContext('FilePreviewItem'), fileUploads = _b.fileUploads, removeFile = _b.removeFile, uploadFile = _b.uploadFile;
-    var handleRemove = useCallback(function (e) {
-        e.stopPropagation();
+    var handleRemove = useCallback(function (id) {
         removeFile(id);
-    }, [removeFile, id]);
-    var handleRetry = useCallback(function () { return uploadFile(id); }, [uploadFile, id]);
+    }, [removeFile]);
+    var handleRetry = useCallback(function (attachment) { return attachment.$internal && uploadFile(attachment.$internal.id); }, [uploadFile]);
     var file = fileUploads[id];
-    var state = useFileState(file);
     if (!file)
         return null;
-    return (React.createElement("div", { className: 'str-chat__attachment-preview-file', "data-testid": 'attachment-preview-file' },
-        React.createElement("div", { className: 'str-chat__attachment-preview-file-icon' },
-            React.createElement(FileIcon, { filename: file.file.name, mimeType: file.file.type, version: '2' })),
-        React.createElement("button", { className: 'str-chat__attachment-preview-delete', "data-testid": 'file-preview-item-delete-button', disabled: state.uploading, onClick: handleRemove },
-            React.createElement(CloseIcon, null)),
-        state.failed && (React.createElement("button", { className: 'str-chat__attachment-preview-error str-chat__attachment-preview-error-file', "data-testid": 'file-preview-item-retry-button', onClick: handleRetry },
-            React.createElement(RetryIcon, null))),
-        React.createElement("div", { className: 'str-chat__attachment-preview-file-end' },
-            React.createElement("div", { className: 'str-chat__attachment-preview-file-name' }, file.file.name),
-            state.finished && (React.createElement("a", { className: 'str-chat__attachment-preview-file-download', download: true, href: file.url, rel: 'noreferrer', target: '_blank' },
-                React.createElement(DownloadIcon, null))),
-            state.uploading && React.createElement(LoadingIndicatorIcon, { size: 17 }))));
+    var attachment = {
+        $internal: {
+            file: file.file,
+            id: id,
+            uploadState: file.state,
+        },
+        asset_url: file.url,
+        mime_type: file.file.type,
+        title: file.file.name,
+    };
+    return (React.createElement(FilePreview, { attachment: attachment, handleRetry: handleRetry, removeAttachment: handleRemove }));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"CooldownTimer.d.ts","sourceRoot":"","sources":["../../../src/components/MessageInput/CooldownTimer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,gBAAgB,EAAE,MAAM,CAAC;IACzB,oBAAoB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC,CAAC;CAChF,CAAC;AACF,eAAO,MAAM,aAAa,yBAA0B,kBAAkB,sBAwBrE,CAAC"}
+{"version":3,"file":"CooldownTimer.d.ts","sourceRoot":"","sources":["../../../src/components/MessageInput/CooldownTimer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,kBAAkB,GAAG;IAC/B,gBAAgB,EAAE,MAAM,CAAC;IACzB,oBAAoB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC,CAAC;CAChF,CAAC;AACF,eAAO,MAAM,aAAa,yBAA0B,kBAAkB,sBAQrE,CAAC"}

package/dist/components/MessageInput/CooldownTimer.js

@@ -1,20 +1,7 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
+import { useTimer } from './hooks/useTimer';
 export var CooldownTimer = function (_a) {
     var cooldownInterval = _a.cooldownInterval;
-    var _b = useState(), seconds = _b[0], setSeconds = _b[1];
-    useEffect(function () {
-        var countdownTimeout;
-        if (typeof seconds === 'number' && seconds > 0) {
-            countdownTimeout = setTimeout(function () {
-                setSeconds(seconds - 1);
-            }, 1000);
-        }
-        return function () {
-            clearTimeout(countdownTimeout);
-        };
-    }, [seconds]);
-    useEffect(function () {
-        setSeconds(cooldownInterval !== null && cooldownInterval !== void 0 ? cooldownInterval : 0);
-    }, [cooldownInterval]);
-    return (React.createElement("div", { className: 'str-chat__message-input-cooldown', "data-testid": 'cooldown-timer' }, seconds));
+    var secondsLeft = useTimer({ startFrom: cooldownInterval });
+    return (React.createElement("div", { className: 'str-chat__message-input-cooldown', "data-testid": 'cooldown-timer' }, secondsLeft));
 };

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

@@ -7,6 +7,7 @@ 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;
     name: string;
@@ -22,6 +23,15 @@ export interface EmojiSearchIndex<T extends UnknownType = UnknownType> {
 export type MessageInputProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, V extends CustomTrigger = CustomTrigger> = {
     /** Additional props to be passed to the underlying `AutoCompleteTextarea` component, [available props](https://www.npmjs.com/package/react-textarea-autosize) */
     additionalTextareaProps?: React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+    /**
+     * When enabled, recorded messages won’t be sent immediately.
+     * Instead, they will “stack up” with other attachments in the message composer allowing the user to send multiple attachments as part of the same message.
+     */
+    asyncMessagesMultiSendEnabled?: boolean;
+    /** Allows to configure the audio recording parameters for voice messages. */
+    audioRecordingConfig?: CustomAudioRecordingConfig;
+    /** Controls whether the users will be provided with the UI to record voice messages. */
+    audioRecordingEnabled?: boolean;
     /** Function to clear the editing state while editing a message */
     clearEditingState?: () => void;
     /** If true, disables the text input */

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

@@ -1 +1 @@
-{"version":3,"file":"MessageInput.d.ts","sourceRoot":"","sources":["../../../src/components/MessageInput/MessageInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAOjD,OAAO,EAAE,aAAa,EAA0B,MAAM,mCAAmC,CAAC;AAC1F,OAAO,EAAE,qBAAqB,EAAuB,MAAM,gCAAgC,CAAC;AAG5F,OAAO,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAEzE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,yCAAyC,CAAC;AACjF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AACxE,OAAO,KAAK,EACV,aAAa,EACb,yBAAyB,EACzB,kBAAkB,EAClB,WAAW,EACZ,MAAM,mBAAmB,CAAC;AAC3B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEvD,MAAM,MAAM,sBAAsB,GAAG;IACnC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,KAAK,CAAC;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACjC,SAAS,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW;IACnE,MAAM,EAAE,CACN,KAAK,EAAE,MAAM,KACV,WAAW,CAAC,KAAK,CAAC,sBAAsB,GAAG,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,sBAAsB,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC;CAChG;AAED,MAAM,MAAM,iBAAiB,CAC3B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,EAChF,CAAC,SAAS,aAAa,GAAG,aAAa,IACrC;IACF,iKAAiK;IACjK,uBAAuB,CAAC,EAAE,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,CAAC;IAC5E,kEAAkE;IAClE,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gGAAgG;IAChG,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,2DAA2D;IAC3D,mBAAmB,CAAC,EAAE,CACpB,IAAI,EAAE,UAAU,CAAC,MAAM,CAAC,EACxB,OAAO,EAAE,OAAO,CAAC,kBAAkB,CAAC,KACjC,OAAO,CAAC,mBAAmB,CAAC,CAAC;IAClC,4DAA4D;IAC5D,oBAAoB,CAAC,EAAE,CACrB,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,EACzB,OAAO,EAAE,OAAO,CAAC,kBAAkB,CAAC,KACjC,OAAO,CAAC,mBAAmB,CAAC,CAAC;IAClC,iNAAiN;IACjN,gBAAgB,CAAC,EAAE,qBAAqB,CAAC,kBAAkB,CAAC,CAAC;IAC7D,gFAAgF;IAChF,YAAY,CAAC,EAAE,CACb,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,CAAC,UAAU,GAAG,WAAW,CAAC,CAAC,MAAM,CAAC,GAAG;QAAE,EAAE,CAAC,EAAE,MAAM,CAAA;KAAE,KACvD,IAAI,CAAC;IACV,yDAAyD;IACzD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,iKAAiK;IACjK,eAAe,CAAC,EAAE,MAAM,MAAM,GAAG,MAAM,EAAE,CAAC;IAC1C,+DAA+D;IAC/D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,iDAAiD;IACjD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,gPAAgP;IAChP,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,kBAAkB,EAAE,CAAC,CAAC,CAAC,CAAC;IACtE,gFAAgF;IAChF,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,yIAAyI;IACzI,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,kFAAkF;IAClF,kBAAkB,CAAC,EAAE,iBAAiB,CAAC,kBAAkB,CAAC,CAAC,aAAa,CAAC,CAAC;IAC1E,iEAAiE;IACjE,OAAO,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAC5C,4GAA4G;IAC5G,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sDAAsD;IACtD,qBAAqB,CAAC,EAAE,CACtB,OAAO,EAAE,aAAa,CAAC,kBAAkB,CAAC,EAC1C,UAAU,EAAE,MAAM,EAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,EACxD,OAAO,CAAC,EAAE,kBAAkB,KACzB,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAC1B,2DAA2D;IAC3D,MAAM,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAC3C,8DAA8D;IAC9D,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,uKAAuK;IACvK;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,OAAO,CAAC;IACjD,kDAAkD;IAClD,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;IAC1C,0BAA0B,CAAC,EAAE,OAAO,CAAC;CACtC,CAAC;AA4DF;;GAEG;AACH,eAAO,MAAM,YAAY,mMAAsE,CAAC"}
+{"version":3,"file":"MessageInput.d.ts","sourceRoot":"","sources":["../../../src/components/MessageInput/MessageInput.tsx"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"MessageInputFlat.d.ts","sourceRoot":"","sources":["../../../src/components/MessageInput/MessageInputFlat.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAC;AA8BlD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAGnE,eAAO,MAAM,gBAAgB,2GA+B5B,CAAC"}
+{"version":3,"file":"MessageInputFlat.d.ts","sourceRoot":"","sources":["../../../src/components/MessageInput/MessageInputFlat.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAsCzE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,eAAO,MAAM,gBAAgB,2GA+B5B,CAAC"}

package/dist/components/MessageInput/MessageInputFlat.js

@@ -1,23 +1,26 @@
 import { __assign } from "tslib";
-import React, { useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { FileUploadButton, ImageDropzone, UploadButton } from '../ReactFileUtilities';
 import clsx from 'clsx';
 import { useDropzone } from 'react-dropzone';
 import { nanoid } from 'nanoid';
-import { FileUploadIconFlat as DefaultFileUploadIcon, SendButton as DefaultSendButton, UploadIcon as DefaultUploadIcon, } from './icons';
+import { FileUploadIconFlat as DefaultFileUploadIcon, 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';
 import { useChannelStateContext } from '../../context/ChannelStateContext';
 import { useTranslationContext } from '../../context/TranslationContext';
 import { useMessageInputContext } from '../../context/MessageInputContext';
 import { useComponentContext } from '../../context/ComponentContext';
-import { CooldownTimer as DefaultCooldownTimer } from './CooldownTimer';
 export var MessageInputFlat = function () {
     var quotedMessage = useChannelStateContext('MessageInputFlat').quotedMessage;
     var setQuotedMessage = useChannelActionContext('MessageInputFlat').setQuotedMessage;
@@ -74,8 +77,12 @@ var MessageInputV1 = function () {
 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'), 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, setCooldownRemaining = _c.setCooldownRemaining, text = _c.text, uploadNewFiles = _c.uploadNewFiles;
-    var _d = useComponentContext('MessageInputV2'), _e = _d.AttachmentPreviewList, AttachmentPreviewList = _e === void 0 ? DefaultAttachmentPreviewList : _e, _f = _d.CooldownTimer, CooldownTimer = _f === void 0 ? DefaultCooldownTimer : _f, _g = _d.FileUploadIcon, FileUploadIcon = _g === void 0 ? DefaultUploadIcon : _g, _h = _d.LinkPreviewList, LinkPreviewList = _h === void 0 ? DefaultLinkPreviewList : _h, _j = _d.QuotedMessagePreview, QuotedMessagePreview = _j === void 0 ? DefaultQuotedMessagePreview : _j, _k = _d.SendButton, SendButton = _k === void 0 ? DefaultSendButton : _k, EmojiPicker = _d.EmojiPicker;
+    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) {
@@ -84,18 +91,25 @@ var MessageInputV2 = function () {
             return mediaTypeMap;
         }, {});
     }, [acceptedFiles]);
-    var _l = useDropzone({
+    var _q = useDropzone({
         accept: accept,
         disabled: !isUploadEnabled || maxFilesLeft === 0,
         multiple: multipleUploads,
         noClick: true,
         onDrop: uploadNewFiles,
-    }), getRootProps = _l.getRootProps, isDragActive = _l.isDragActive, isDragReject = _l.isDragReject;
+    }), 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;
     return (React.createElement(React.Fragment, null,
         React.createElement("div", __assign({}, getRootProps({ className: 'str-chat__message-input' })),
+            recordingEnabled &&
+                recordingController.permissionState === 'denied' &&
+                showRecordingPermissionDeniedNotification && (React.createElement(RecordingPermissionDeniedNotification, { onClose: closePermissionDeniedNotification, permissionName: RecordingPermission.MIC })),
             findAndEnqueueURLsToEnrich && (React.createElement(LinkPreviewList, { linkPreviews: Array.from(linkPreviews.values()) })),
             isDragActive && (React.createElement("div", { className: clsx('str-chat__dropzone-container', {
                     'str-chat__dropzone-container--not-accepted': isDragReject,
@@ -110,9 +124,17 @@ var MessageInputV2 = function () {
                         React.createElement(FileUploadIcon, null))),
                 React.createElement("div", { className: 'str-chat__message-textarea-container' },
                     displayQuotedMessage && React.createElement(QuotedMessagePreview, { quotedMessage: quotedMessage }),
-                    isUploadEnabled && !!numberOfUploads && React.createElement(AttachmentPreviewList, null),
+                    isUploadEnabled && !!(numberOfUploads || attachments.length) && (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(SendButton, { disabled: !numberOfUploads && !text.length, sendMessage: handleSubmit }))))))));
+                !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 }),
+                    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();
+                            setShowRecordingPermissionDeniedNotification(true);
+                        } }))))))))));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"MessageInputSmall.d.ts","sourceRoot":"","sources":["../../../src/components/MessageInput/MessageInputSmall.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAuBzC,OAAO,KAAK,EAAE,aAAa,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAGlF;;;;;;;;GAQG;AACH,eAAO,MAAM,iBAAiB,oJAmH7B,CAAC"}
+{"version":3,"file":"MessageInputSmall.d.ts","sourceRoot":"","sources":["../../../src/components/MessageInput/MessageInputSmall.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAqBzC,OAAO,KAAK,EAAE,aAAa,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAElF;;;;;;;;GAQG;AACH,eAAO,MAAM,iBAAiB,oJAmH7B,CAAC"}

package/dist/components/MessageInput/MessageInputSmall.js

@@ -1,7 +1,9 @@
 import React, { useEffect } from 'react';
 import { FileUploadButton, ImageDropzone } from '../ReactFileUtilities';
-import { FileUploadIconFlat as DefaultFileUploadIcon, SendButton as DefaultSendButton, EmojiIconSmall, } from './icons';
+import { FileUploadIconFlat as DefaultFileUploadIcon, EmojiIconSmall } from './icons';
 import { UploadsPreview } from './UploadsPreview';
+import { CooldownTimer as DefaultCooldownTimer } from './CooldownTimer';
+import { SendButton as DefaultSendButton } from './SendButton';
 import { ChatAutoComplete } from '../ChatAutoComplete/ChatAutoComplete';
 import { Tooltip } from '../Tooltip/Tooltip';
 import { useChatContext } from '../../context/ChatContext';
@@ -11,7 +13,6 @@ import { useTranslationContext } from '../../context/TranslationContext';
 import { useMessageInputContext } from '../../context/MessageInputContext';
 import { useComponentContext } from '../../context/ComponentContext';
 import { QuotedMessagePreview as DefaultQuotedMessagePreview } from './QuotedMessagePreview';
-import { CooldownTimer as DefaultCooldownTimer } from './CooldownTimer';
 /**
  * @deprecated This component has beend deprecated in favor of [`MessageInputFlat`](./MessageInputFlat.tsx) from which
  * `MessageInputSmall` "inherited" most of the code with only slight modification to classNames

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Message } from 'stream-chat';
+import type { DefaultStreamChatGenerics } from '../../types/types';
+export type SendButtonProps<StreamChatGenerics extends DefaultStreamChatGenerics = 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.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SendButton.d.ts","sourceRoot":"","sources":["../../../src/components/MessageInput/SendButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAGtC,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,MAAM,MAAM,eAAe,CACzB,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,WAAW,EAAE,CACX,KAAK,EAAE,KAAK,CAAC,kBAAkB,EAC/B,iBAAiB,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,KACrD,IAAI,CAAC;CACX,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;AACnC,eAAO,MAAM,UAAU,wKAoBtB,CAAC"}

package/dist/components/MessageInput/SendButton.js

@@ -0,0 +1,9 @@
+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)));
+};

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

@@ -1,12 +1,15 @@
-import type { FileLike } from '../../ReactFileUtilities';
-import type { MessageInputProps } from '../MessageInput';
 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: import("react").Dispatch<MessageInputReducerAction<StreamChatGenerics>>, textareaRef: React.MutableRefObject<HTMLTextAreaElement | undefined>) => {
     maxFilesLeft: number;
     numberOfUploads: number;
+    removeAttachment: (id: string) => void;
     removeFile: (id: string) => void;
     removeImage: (id: string) => void;
+    uploadAttachment: (att: LocalAttachment<StreamChatGenerics>) => Promise<LocalAttachment<StreamChatGenerics>>;
     uploadFile: (id: string) => void;
     uploadImage: (id: string) => Promise<void>;
     uploadNewFiles: (files: FileList | File[] | FileLike[]) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"useAttachments.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageInput/hooks/useAttachments.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAEzD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,KAAK,EAAE,yBAAyB,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAE3F,OAAO,KAAK,EAAE,aAAa,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAIrF,eAAO,MAAM,cAAc,6TAOZ,MAAM,gBAAgB,CAAC,mBAAmB,GAAG,SAAS,CAAC;;;;;;;4BA+B1D,QAAQ,GAAG,IAAI,EAAE,GAAG,QAAQ,EAAE;CAqCzC,CAAC"}
+{"version":3,"file":"useAttachments.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageInput/hooks/useAttachments.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,yBAAyB,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3F,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAChD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,KAAK,EAAE,aAAa,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAIrF,eAAO,MAAM,cAAc,6TAOZ,MAAM,gBAAgB,CAAC,mBAAmB,GAAG,SAAS,CAAC;;;2BA6DtC,MAAM;;;;;;4BA5B1B,QAAQ,GAAG,IAAI,EAAE,GAAG,QAAQ,EAAE;CAuIzC,CAAC"}

package/dist/components/MessageInput/hooks/useAttachments.js

@@ -1,13 +1,18 @@
+import { __assign, __awaiter, __generator, __rest } from "tslib";
 import { useCallback } from 'react';
 import { nanoid } from 'nanoid';
 import { useImageUploads } from './useImageUploads';
 import { useFileUploads } from './useFileUploads';
-import { useChannelStateContext } from '../../../context/ChannelStateContext';
+import { checkUploadPermissions } from './utils';
+import { useChannelActionContext, useChannelStateContext, useChatContext, useTranslationContext, } from '../../../context';
 var apiMaxNumberOfFiles = 10;
 export var useAttachments = function (props, state, dispatch, textareaRef) {
-    var noFiles = props.noFiles;
+    var doFileUploadRequest = props.doFileUploadRequest, errorHandler = props.errorHandler, noFiles = props.noFiles;
     var fileUploads = state.fileUploads, imageUploads = state.imageUploads;
-    var _a = useChannelStateContext('useAttachments'), maxNumberOfFiles = _a.maxNumberOfFiles, multipleUploads = _a.multipleUploads;
+    var getAppSettings = useChatContext('useAttachments').getAppSettings;
+    var t = useTranslationContext('useAttachments').t;
+    var addNotification = useChannelActionContext('useAttachments').addNotification;
+    var _a = useChannelStateContext('useAttachments'), channel = _a.channel, maxNumberOfFiles = _a.maxNumberOfFiles, multipleUploads = _a.multipleUploads;
     var _b = useFileUploads(props, state, dispatch), removeFile = _b.removeFile, uploadFile = _b.uploadFile;
     var _c = useImageUploads(props, state, dispatch), removeImage = _c.removeImage, uploadImage = _c.uploadImage;
     // Number of files that the user can still add. Should never be more than the amount allowed by the API.
@@ -50,11 +55,90 @@ export var useAttachments = function (props, state, dispatch, textareaRef) {
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [maxFilesLeft, noFiles]);
+    var removeAttachment = function (id) {
+        dispatch({ id: id, type: 'removeAttachment' });
+    };
+    var uploadAttachment = useCallback(function (att) { return __awaiter(void 0, void 0, void 0, function () {
+        var $internal, attachment, id, file, canUpload, notificationText, response, uploadedAttachment, error_1, finalError, failedAttachment;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    $internal = att.$internal, attachment = __rest(att, ["$internal"]);
+                    if (!($internal === null || $internal === void 0 ? void 0 : $internal.file))
+                        return [2 /*return*/, att];
+                    id = (_a = $internal === null || $internal === void 0 ? void 0 : $internal.id) !== null && _a !== void 0 ? _a : nanoid();
+                    file = $internal.file;
+                    return [4 /*yield*/, checkUploadPermissions({
+                            addNotification: addNotification,
+                            file: file,
+                            getAppSettings: getAppSettings,
+                            t: t,
+                            uploadType: 'file',
+                        })];
+                case 1:
+                    canUpload = _b.sent();
+                    if (!canUpload) {
+                        notificationText = t('Missing permissions to upload the attachment');
+                        console.error(new Error(notificationText));
+                        addNotification(notificationText, 'error');
+                        return [2 /*return*/, att];
+                    }
+                    dispatch({
+                        attachment: __assign(__assign({}, attachment), { $internal: __assign(__assign({}, $internal), { id: id, uploadState: 'uploading' }) }),
+                        type: 'upsertAttachment',
+                    });
+                    _b.label = 2;
+                case 2:
+                    _b.trys.push([2, 7, , 8]);
+                    response = void 0;
+                    if (!doFileUploadRequest) return [3 /*break*/, 4];
+                    return [4 /*yield*/, doFileUploadRequest(file, channel)];
+                case 3:
+                    response = _b.sent();
+                    return [3 /*break*/, 6];
+                case 4: return [4 /*yield*/, channel.sendFile(file)];
+                case 5:
+                    response = _b.sent();
+                    _b.label = 6;
+                case 6:
+                    uploadedAttachment = __assign(__assign({}, attachment), { $internal: __assign(__assign({}, $internal), { uploadState: 'finished' }), asset_url: response.file });
+                    dispatch({
+                        attachment: uploadedAttachment,
+                        type: 'upsertAttachment',
+                    });
+                    return [2 /*return*/, uploadedAttachment];
+                case 7:
+                    error_1 = _b.sent();
+                    finalError = { message: t('Error uploading attachment'), name: 'Error' };
+                    if (typeof error_1.message === 'string') {
+                        finalError = error_1;
+                    }
+                    else if (typeof error_1 === 'object') {
+                        finalError = Object.assign(finalError, error_1);
+                    }
+                    console.error(finalError);
+                    addNotification(finalError.message, 'error');
+                    failedAttachment = __assign(__assign({}, attachment), { $internal: __assign(__assign({}, $internal), { uploadState: 'failed' }) });
+                    dispatch({
+                        attachment: failedAttachment,
+                        type: 'upsertAttachment',
+                    });
+                    if (errorHandler) {
+                        errorHandler(finalError, 'upload-attachment', file);
+                    }
+                    return [2 /*return*/, failedAttachment];
+                case 8: return [2 /*return*/];
+            }
+        });
+    }); }, [addNotification, channel, doFileUploadRequest, dispatch, errorHandler, getAppSettings, t]);
     return {
         maxFilesLeft: maxFilesLeft,
         numberOfUploads: numberOfUploads,
+        removeAttachment: removeAttachment,
         removeFile: removeFile,
         removeImage: removeImage,
+        uploadAttachment: uploadAttachment,
         uploadFile: uploadFile,
         uploadImage: uploadImage,
         uploadNewFiles: uploadNewFiles,

package/dist/components/MessageInput/hooks/useCreateMessageInputContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCreateMessageInputContext.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageInput/hooks/useCreateMessageInputContext.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,sCAAsC,CAAC;AACrF,OAAO,KAAK,EAAE,aAAa,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAErF,eAAO,MAAM,4BAA4B,wOAoKxC,CAAC"}
+{"version":3,"file":"useCreateMessageInputContext.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageInput/hooks/useCreateMessageInputContext.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,sCAAsC,CAAC;AACrF,OAAO,KAAK,EAAE,aAAa,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAErF,eAAO,MAAM,4BAA4B,wOAmLxC,CAAC"}

package/dist/components/MessageInput/hooks/useCreateMessageInputContext.js

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 export var useCreateMessageInputContext = function (value) {
-    var additionalTextareaProps = value.additionalTextareaProps, attachments = value.attachments, autocompleteTriggers = value.autocompleteTriggers, cancelURLEnrichment = value.cancelURLEnrichment, clearEditingState = value.clearEditingState, closeCommandsList = value.closeCommandsList, closeMentionsList = value.closeMentionsList, cooldownInterval = value.cooldownInterval, cooldownRemaining = value.cooldownRemaining, disabled = value.disabled, disableMentions = value.disableMentions, dismissLinkPreview = value.dismissLinkPreview, doFileUploadRequest = value.doFileUploadRequest, doImageUploadRequest = value.doImageUploadRequest, emojiSearchIndex = value.emojiSearchIndex, errorHandler = value.errorHandler, fileOrder = value.fileOrder, fileUploads = value.fileUploads, findAndEnqueueURLsToEnrich = value.findAndEnqueueURLsToEnrich, focus = value.focus, grow = value.grow, handleChange = value.handleChange, handleSubmit = value.handleSubmit, hideSendButton = value.hideSendButton, imageOrder = value.imageOrder, imageUploads = value.imageUploads, insertText = value.insertText, isUploadEnabled = value.isUploadEnabled, linkPreviews = value.linkPreviews, maxFilesLeft = value.maxFilesLeft, maxRows = value.maxRows, mentionAllAppUsers = value.mentionAllAppUsers, mentioned_users = value.mentioned_users, mentionQueryParams = value.mentionQueryParams, message = value.message, noFiles = value.noFiles, numberOfUploads = value.numberOfUploads, onPaste = value.onPaste, onSelectUser = value.onSelectUser, openCommandsList = value.openCommandsList, openMentionsList = value.openMentionsList, overrideSubmitHandler = value.overrideSubmitHandler, parent = value.parent, publishTypingEvent = value.publishTypingEvent, removeFile = value.removeFile, removeImage = value.removeImage, setCooldownRemaining = value.setCooldownRemaining, setText = value.setText, shouldSubmit = value.shouldSubmit, showCommandsList = value.showCommandsList, showMentionsList = value.showMentionsList, text = value.text, textareaRef = value.textareaRef, uploadFile = value.uploadFile, uploadImage = value.uploadImage, uploadNewFiles = value.uploadNewFiles, useMentionsTransliteration = value.useMentionsTransliteration;
+    var additionalTextareaProps = value.additionalTextareaProps, asyncMessagesMultiSendEnabled = value.asyncMessagesMultiSendEnabled, attachments = value.attachments, audioRecordingEnabled = value.audioRecordingEnabled, autocompleteTriggers = value.autocompleteTriggers, cancelURLEnrichment = value.cancelURLEnrichment, clearEditingState = value.clearEditingState, closeCommandsList = value.closeCommandsList, closeMentionsList = value.closeMentionsList, cooldownInterval = value.cooldownInterval, cooldownRemaining = value.cooldownRemaining, disabled = value.disabled, disableMentions = value.disableMentions, dismissLinkPreview = value.dismissLinkPreview, doFileUploadRequest = value.doFileUploadRequest, doImageUploadRequest = value.doImageUploadRequest, emojiSearchIndex = value.emojiSearchIndex, errorHandler = value.errorHandler, fileOrder = value.fileOrder, fileUploads = value.fileUploads, findAndEnqueueURLsToEnrich = value.findAndEnqueueURLsToEnrich, focus = value.focus, grow = value.grow, handleChange = value.handleChange, handleSubmit = value.handleSubmit, hideSendButton = value.hideSendButton, imageOrder = value.imageOrder, imageUploads = value.imageUploads, insertText = value.insertText, isUploadEnabled = value.isUploadEnabled, linkPreviews = value.linkPreviews, maxFilesLeft = value.maxFilesLeft, maxRows = value.maxRows, mentionAllAppUsers = value.mentionAllAppUsers, mentioned_users = value.mentioned_users, mentionQueryParams = value.mentionQueryParams, message = value.message, noFiles = value.noFiles, numberOfUploads = value.numberOfUploads, onPaste = value.onPaste, onSelectUser = value.onSelectUser, openCommandsList = value.openCommandsList, openMentionsList = value.openMentionsList, overrideSubmitHandler = value.overrideSubmitHandler, parent = value.parent, publishTypingEvent = value.publishTypingEvent, recordingController = value.recordingController, removeAttachment = value.removeAttachment, removeFile = value.removeFile, removeImage = value.removeImage, setCooldownRemaining = value.setCooldownRemaining, setText = value.setText, shouldSubmit = value.shouldSubmit, showCommandsList = value.showCommandsList, showMentionsList = value.showMentionsList, text = value.text, textareaRef = value.textareaRef, uploadAttachment = value.uploadAttachment, uploadFile = value.uploadFile, uploadImage = value.uploadImage, uploadNewFiles = value.uploadNewFiles, useMentionsTransliteration = value.useMentionsTransliteration;
     var editing = message === null || message === void 0 ? void 0 : message.editing;
     var fileUploadsValue = Object.entries(fileUploads)
         // eslint-disable-next-line
@@ -21,7 +21,9 @@ export var useCreateMessageInputContext = function (value) {
     var parentId = parent === null || parent === void 0 ? void 0 : parent.id;
     var messageInputContext = useMemo(function () { return ({
         additionalTextareaProps: additionalTextareaProps,
+        asyncMessagesMultiSendEnabled: asyncMessagesMultiSendEnabled,
         attachments: attachments,
+        audioRecordingEnabled: audioRecordingEnabled,
         autocompleteTriggers: autocompleteTriggers,
         cancelURLEnrichment: cancelURLEnrichment,
         clearEditingState: clearEditingState,
@@ -64,6 +66,8 @@ export var useCreateMessageInputContext = function (value) {
         overrideSubmitHandler: overrideSubmitHandler,
         parent: parent,
         publishTypingEvent: publishTypingEvent,
+        recordingController: recordingController,
+        removeAttachment: removeAttachment,
         removeFile: removeFile,
         removeImage: removeImage,
         setCooldownRemaining: setCooldownRemaining,
@@ -73,6 +77,7 @@ export var useCreateMessageInputContext = function (value) {
         showMentionsList: showMentionsList,
         text: text,
         textareaRef: textareaRef,
+        uploadAttachment: uploadAttachment,
         uploadFile: uploadFile,
         uploadImage: uploadImage,
         uploadNewFiles: uploadNewFiles,
@@ -80,6 +85,8 @@ export var useCreateMessageInputContext = function (value) {
     }); }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [
+        asyncMessagesMultiSendEnabled,
+        audioRecordingEnabled,
         cancelURLEnrichment,
         cooldownInterval,
         cooldownRemaining,
@@ -88,6 +95,7 @@ export var useCreateMessageInputContext = function (value) {
         emojiSearchIndex,
         fileUploadsValue,
         findAndEnqueueURLsToEnrich,
+        handleSubmit,
         hideSendButton,
         imageUploadsValue,
         isUploadEnabled,
@@ -95,10 +103,12 @@ export var useCreateMessageInputContext = function (value) {
         mentionedUsersLength,
         parentId,
         publishTypingEvent,
+        recordingController,
+        removeAttachment,
         showCommandsList,
         showMentionsList,
         text,
-        handleSubmit,
+        uploadAttachment,
     ]);
     return messageInputContext;
 };