stream-chat-react 9.3.0 → 10.0.0-theming-v2.1

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

@@ -2,14 +2,11 @@ export * from './FixedHeightMessage';
 export * from './hooks';
 export * from './icons';
 export * from './Message';
-export * from './MessageCommerce';
 export * from './MessageDeleted';
-export * from './MessageLivestream';
 export * from './MessageOptions';
 export * from './MessageRepliesCountButton';
 export * from './MessageSimple';
 export * from './MessageStatus';
-export * from './MessageTeam';
 export * from './MessageText';
 export * from './MessageTimestamp';
 export * from './types';

package/dist/components/Message/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Message/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Message/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}

package/dist/components/Message/index.js

@@ -2,14 +2,11 @@ export * from './FixedHeightMessage';
 export * from './hooks';
 export * from './icons';
 export * from './Message';
-export * from './MessageCommerce';
 export * from './MessageDeleted';
-export * from './MessageLivestream';
 export * from './MessageOptions';
 export * from './MessageRepliesCountButton';
 export * from './MessageSimple';
 export * from './MessageStatus';
-export * from './MessageTeam';
 export * from './MessageText';
 export * from './MessageTimestamp';
 export * from './types';

package/dist/components/Message/utils.js

@@ -1,7 +1,11 @@
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
 import deepequal from 'react-fast-compare';
 /**
@@ -108,7 +112,7 @@ export var getMessageActions = function (actions, _a) {
         messageActions = Object.keys(MESSAGE_ACTIONS);
     }
     else if (actions && actions.length > 0) {
-        messageActions = __spreadArray([], actions);
+        messageActions = __spreadArray([], actions, true);
     }
     else {
         return [];
@@ -251,7 +255,7 @@ export var getReadByTooltipText = function (users, t, client, tooltipUserNameMap
     var slicedArr = otherUsers.slice(0, 5);
     var restLength = otherUsers.length - slicedArr.length;
     if (slicedArr.length === 1) {
-        outStr = slicedArr[0] + " ";
+        outStr = "".concat(slicedArr[0], " ");
     }
     else if (slicedArr.length === 2) {
         // joins all with "and" but =no commas

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

@@ -1 +1 @@
-{"version":3,"file":"MessageActions.d.ts","sourceRoot":"","sources":["../../../src/components/MessageActions/MessageActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8D,MAAM,OAAO,CAAC;AAQnF,OAAO,EAAE,mBAAmB,EAAqB,MAAM,8BAA8B,CAAC;AAEtF,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,aAAK,yBAAyB,GAC1B,mBAAmB,GACnB,cAAc,GACd,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,SAAS,CAAC;AAEd,oBAAY,mBAAmB,CAC7B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,OAAO,CAAC,IAAI,CAAC,mBAAmB,CAAC,kBAAkB,CAAC,EAAE,yBAAyB,CAAC,CAAC,GAAG;IACtF,WAAW,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACtC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IACpD,IAAI,CAAC,EAAE,MAAM,OAAO,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,cAAc,0JAwG1B,CAAC;AAEF,oBAAY,0BAA0B,GAAG;IACvC,iBAAiB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACjE,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC"}
+{"version":3,"file":"MessageActions.d.ts","sourceRoot":"","sources":["../../../src/components/MessageActions/MessageActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8D,MAAM,OAAO,CAAC;AAQnF,OAAO,EAAE,mBAAmB,EAAqB,MAAM,8BAA8B,CAAC;AAEtF,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,aAAK,yBAAyB,GAC1B,mBAAmB,GACnB,cAAc,GACd,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,SAAS,CAAC;AAEd,oBAAY,mBAAmB,CAC7B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,OAAO,CAAC,IAAI,CAAC,mBAAmB,CAAC,kBAAkB,CAAC,EAAE,yBAAyB,CAAC,CAAC,GAAG;IACtF,WAAW,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACtC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IACpD,IAAI,CAAC,EAAE,MAAM,OAAO,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,cAAc,0JAyG1B,CAAC;AAEF,oBAAY,0BAA0B,GAAG;IACvC,iBAAiB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACjE,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC"}

package/dist/components/MessageActions/MessageActions.js

@@ -59,12 +59,12 @@ export var MessageActions = function (props) {
         return null;
     return (React.createElement(MessageActionsWrapper, { customWrapperClass: customWrapperClass, inline: inline, setActionsBoxOpen: setActionsBoxOpen },
         React.createElement(MessageActionsBox, { getMessageActions: getMessageActions, handleDelete: handleDelete, handleEdit: setEditingState, handleFlag: handleFlag, handleMute: handleMute, handlePin: handlePin, isUserMuted: isMuted, mine: mine ? mine() : isMyMessage(), open: actionsBoxOpen }),
-        React.createElement("button", { "aria-expanded": actionsBoxOpen, "aria-haspopup": 'true', "aria-label": 'Open Message Actions Menu' },
-            React.createElement(ActionsIcon, null))));
+        React.createElement("button", { "aria-expanded": actionsBoxOpen, "aria-haspopup": 'true', "aria-label": 'Open Message Actions Menu', className: 'str-chat__message-actions-box-button' },
+            React.createElement(ActionsIcon, { className: 'str-chat__message-action-icon' }))));
 };
 var MessageActionsWrapper = function (props) {
     var children = props.children, customWrapperClass = props.customWrapperClass, inline = props.inline, setActionsBoxOpen = props.setActionsBoxOpen;
-    var defaultWrapperClass = 'str-chat__message-simple__actions__action str-chat__message-simple__actions__action--options';
+    var defaultWrapperClass = "\n  str-chat__message-simple__actions__action\n  str-chat__message-simple__actions__action--options\n  str-chat__message-actions-container";
     var wrapperClass = customWrapperClass || defaultWrapperClass;
     var onClickOptionsAction = function (event) {
         event.stopPropagation();

package/dist/components/MessageActions/MessageActionsBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageActionsBox.d.ts","sourceRoot":"","sources":["../../../src/components/MessageActions/MessageActionsBox.tsx"],"names":[],"mappings":"AAKA,OAAO,EACL,oBAAoB,EACpB,mBAAmB,EAEpB,MAAM,8BAA8B,CAAC;AAGtC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAEvE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,oBAAY,wBAAwB,CAClC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,oBAAoB,EAAE,oBAAoB,CAAC,kBAAkB,CAAC,CAAC;IAC/D,OAAO,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;CAC5C,CAAC;AA+BF,aAAK,+BAA+B,GAChC,mBAAmB,GACnB,cAAc,GACd,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,WAAW,CAAC;AAEhB,oBAAY,sBAAsB,CAChC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,IAAI,CAAC,mBAAmB,CAAC,kBAAkB,CAAC,EAAE,+BAA+B,CAAC,GAAG;IACnF,WAAW,EAAE,MAAM,OAAO,CAAC;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;CACf,CAAC;AA8IF;;GAEG;AACH,eAAO,MAAM,iBAAiB,sJAES,CAAC"}
+{"version":3,"file":"MessageActionsBox.d.ts","sourceRoot":"","sources":["../../../src/components/MessageActions/MessageActionsBox.tsx"],"names":[],"mappings":"AAMA,OAAO,EACL,oBAAoB,EACpB,mBAAmB,EAEpB,MAAM,8BAA8B,CAAC;AAGtC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAEvE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,oBAAY,wBAAwB,CAClC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,oBAAoB,EAAE,oBAAoB,CAAC,kBAAkB,CAAC,CAAC;IAC/D,OAAO,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;CAC5C,CAAC;AA+BF,aAAK,+BAA+B,GAChC,mBAAmB,GACnB,cAAc,GACd,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,WAAW,CAAC;AAEhB,oBAAY,sBAAsB,CAChC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,IAAI,CAAC,mBAAmB,CAAC,kBAAkB,CAAC,EAAE,+BAA+B,CAAC,GAAG;IACnF,WAAW,EAAE,MAAM,OAAO,CAAC;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;CACf,CAAC;AA8IF;;GAEG;AACH,eAAO,MAAM,iBAAiB,sJAES,CAAC"}

package/dist/components/MessageActions/MessageActionsBox.js

@@ -1,4 +1,5 @@
 import React, { useCallback, useState } from 'react';
+import clsx from 'clsx';
 import { MESSAGE_ACTIONS } from '../Message/utils';
 import { useChannelActionContext } from '../../context/ChannelActionContext';
 import { useMessageContext, } from '../../context/MessageContext';
@@ -43,15 +44,21 @@ var UnMemoizedMessageActionsBox = function (props) {
             textarea.focus();
         }
     };
-    return (React.createElement("div", { className: "str-chat__message-actions-box\n        " + (open ? 'str-chat__message-actions-box--open' : '') + "\n        " + (mine ? 'str-chat__message-actions-box--mine' : '') + "\n        " + (reverse ? 'str-chat__message-actions-box--reverse' : '') + "\n      ", "data-testid": 'message-actions-box', ref: checkIfReverse },
+    var rootClassName = clsx('str-chat__message-actions-box', {
+        'str-chat__message-actions-box--mine': mine,
+        'str-chat__message-actions-box--open': open,
+        'str-chat__message-actions-box--reverse': reverse,
+    });
+    var buttonClassName = 'str-chat__message-actions-list-item str-chat__message-actions-list-item-button';
+    return (React.createElement("div", { className: rootClassName, "data-testid": 'message-actions-box', ref: checkIfReverse },
         React.createElement("div", { "aria-label": 'Message Options', className: 'str-chat__message-actions-list', role: 'listbox' },
             customMessageActions && (React.createElement(CustomMessageActionsList, { customMessageActions: customMessageActions, message: message })),
-            messageActions.indexOf(MESSAGE_ACTIONS.quote) > -1 && (React.createElement("button", { "aria-selected": 'false', className: 'str-chat__message-actions-list-item', onClick: handleQuote, role: 'option' }, t('Reply'))),
-            messageActions.indexOf(MESSAGE_ACTIONS.pin) > -1 && !message.parent_id && (React.createElement("button", { "aria-selected": 'false', className: 'str-chat__message-actions-list-item', onClick: handlePin, role: 'option' }, !message.pinned ? t('Pin') : t('Unpin'))),
-            messageActions.indexOf(MESSAGE_ACTIONS.flag) > -1 && (React.createElement("button", { "aria-selected": 'false', className: 'str-chat__message-actions-list-item', onClick: handleFlag, role: 'option' }, t('Flag'))),
-            messageActions.indexOf(MESSAGE_ACTIONS.mute) > -1 && (React.createElement("button", { "aria-selected": 'false', className: 'str-chat__message-actions-list-item', onClick: handleMute, role: 'option' }, isUserMuted() ? t('Unmute') : t('Mute'))),
-            messageActions.indexOf(MESSAGE_ACTIONS.edit) > -1 && (React.createElement("button", { "aria-selected": 'false', className: 'str-chat__message-actions-list-item', onClick: handleEdit, role: 'option' }, t('Edit Message'))),
-            messageActions.indexOf(MESSAGE_ACTIONS.delete) > -1 && (React.createElement("button", { "aria-selected": 'false', className: 'str-chat__message-actions-list-item', onClick: handleDelete, role: 'option' }, t('Delete'))))));
+            messageActions.indexOf(MESSAGE_ACTIONS.quote) > -1 && (React.createElement("button", { "aria-selected": 'false', className: buttonClassName, onClick: handleQuote, role: 'option' }, t('Reply'))),
+            messageActions.indexOf(MESSAGE_ACTIONS.pin) > -1 && !message.parent_id && (React.createElement("button", { "aria-selected": 'false', className: buttonClassName, onClick: handlePin, role: 'option' }, !message.pinned ? t('Pin') : t('Unpin'))),
+            messageActions.indexOf(MESSAGE_ACTIONS.flag) > -1 && (React.createElement("button", { "aria-selected": 'false', className: buttonClassName, onClick: handleFlag, role: 'option' }, t('Flag'))),
+            messageActions.indexOf(MESSAGE_ACTIONS.mute) > -1 && (React.createElement("button", { "aria-selected": 'false', className: buttonClassName, onClick: handleMute, role: 'option' }, isUserMuted() ? t('Unmute') : t('Mute'))),
+            messageActions.indexOf(MESSAGE_ACTIONS.edit) > -1 && (React.createElement("button", { "aria-selected": 'false', className: buttonClassName, onClick: handleEdit, role: 'option' }, t('Edit Message'))),
+            messageActions.indexOf(MESSAGE_ACTIONS.delete) > -1 && (React.createElement("button", { "aria-selected": 'false', className: buttonClassName, onClick: handleDelete, role: 'option' }, t('Delete'))))));
 };
 /**
  * A popup box that displays the available actions on a message, such as edit, delete, pin, etc.

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

@@ -0,0 +1,2 @@
+export declare const AttachmentPreviewList: () => JSX.Element;
+//# sourceMappingURL=AttachmentPreviewList.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AttachmentPreviewList.d.ts","sourceRoot":"","sources":["../../../src/components/MessageInput/AttachmentPreviewList.tsx"],"names":[],"mappings":"AAQA,eAAO,MAAM,qBAAqB,mBAkBjC,CAAC"}

package/dist/components/MessageInput/AttachmentPreviewList.js

@@ -0,0 +1,60 @@
+import React, { useCallback } from 'react';
+import { FileIcon } from 'react-file-utils';
+import { useMessageInputContext } from '../../context/MessageInputContext';
+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;
+    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' },
+            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 ImagePreviewItem = function (_a) {
+    var _b;
+    var id = _a.id;
+    var _c = useMessageInputContext('ImagePreviewItem'), imageUploads = _c.imageUploads, removeImage = _c.removeImage, uploadImage = _c.uploadImage;
+    var handleRemove = useCallback(function (e) {
+        e.stopPropagation();
+        removeImage(id);
+    }, [removeImage, id]);
+    var handleRetry = useCallback(function () { return uploadImage(id); }, [uploadImage, id]);
+    var image = imageUploads[id];
+    var state = useFileState(image);
+    // do not display scraped attachments
+    if (!image || image.og_scrape_url)
+        return null;
+    return (React.createElement("div", { className: 'str-chat__attachment-preview-image', "data-testid": 'attachment-preview-image' },
+        React.createElement("button", { className: 'str-chat__attachment-preview-delete', "data-testid": 'image-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-image', "data-testid": 'image-preview-item-retry-button', onClick: handleRetry },
+            React.createElement(RetryIcon, null))),
+        state.uploading && (React.createElement("div", { className: 'str-chat__attachment-preview-image-loading' },
+            React.createElement(LoadingIndicatorIcon, { size: 17 }))),
+        (image.previewUri || image.url) && (React.createElement("img", { alt: image.file.name, className: 'str-chat__attachment-preview-thumbnail', src: (_b = image.previewUri) !== null && _b !== void 0 ? _b : image.url }))));
+};
+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();
+        removeFile(id);
+    }, [removeFile, id]);
+    var handleRetry = useCallback(function () { return uploadFile(id); }, [uploadFile, id]);
+    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 }))));
+};

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

@@ -1 +1 @@
-{"version":3,"file":"EditMessageForm.d.ts","sourceRoot":"","sources":["../../../src/components/MessageInput/EditMessageForm.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,aAAa,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAElF,eAAO,MAAM,eAAe,8IAqF3B,CAAC"}
+{"version":3,"file":"EditMessageForm.d.ts","sourceRoot":"","sources":["../../../src/components/MessageInput/EditMessageForm.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,aAAa,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAElF,eAAO,MAAM,eAAe,8IA8G3B,CAAC"}

package/dist/components/MessageInput/EditMessageForm.js

@@ -5,15 +5,14 @@ import { EmojiIconSmall as DefaultEmojiIcon, FileUploadIcon as DefaultFileUpload
 import { UploadsPreview } from './UploadsPreview';
 import { ChatAutoComplete } from '../ChatAutoComplete/ChatAutoComplete';
 import { Tooltip } from '../Tooltip/Tooltip';
-import { useChannelStateContext } from '../../context/ChannelStateContext';
-import { useTranslationContext } from '../../context/TranslationContext';
-import { useMessageInputContext } from '../../context/MessageInputContext';
-import { useComponentContext } from '../../context/ComponentContext';
+import { MessageInputFlat } from './MessageInputFlat';
+import { useChannelStateContext, useChatContext, useComponentContext, useMessageInputContext, useTranslationContext, } from '../../context';
 export var EditMessageForm = function () {
     var _a = useChannelStateContext('EditMessageForm'), acceptedFiles = _a.acceptedFiles, multipleUploads = _a.multipleUploads;
     var t = useTranslationContext('EditMessageForm').t;
     var _b = useMessageInputContext('EditMessageForm'), clearEditingState = _b.clearEditingState, closeEmojiPicker = _b.closeEmojiPicker, emojiPickerIsOpen = _b.emojiPickerIsOpen, handleSubmit = _b.handleSubmit, isUploadEnabled = _b.isUploadEnabled, maxFilesLeft = _b.maxFilesLeft, openEmojiPicker = _b.openEmojiPicker, uploadNewFiles = _b.uploadNewFiles;
     var _c = useComponentContext('EditMessageForm'), _d = _c.EmojiIcon, EmojiIcon = _d === void 0 ? DefaultEmojiIcon : _d, _e = _c.FileUploadIcon, FileUploadIcon = _e === void 0 ? DefaultFileUploadIcon : _e;
+    var themeVersion = useChatContext('EditMessageForm').themeVersion;
     useEffect(function () {
         var onKeyDown = function (event) {
             if (event.key === 'Escape')
@@ -22,6 +21,12 @@ export var EditMessageForm = function () {
         document.addEventListener('keydown', onKeyDown);
         return function () { return document.removeEventListener('keydown', onKeyDown); };
     }, [clearEditingState]);
+    if (themeVersion === '2')
+        return (React.createElement("form", { className: 'str-chat__edit-message-form', onSubmit: handleSubmit },
+            React.createElement(MessageInputFlat, null),
+            React.createElement("div", { className: 'str-chat__edit-message-form-options' },
+                React.createElement("button", { className: 'str-chat__edit-message-cancel', "data-testid": 'cancel-button', onClick: clearEditingState }, t('Cancel')),
+                React.createElement("button", { className: 'str-chat__edit-message-send', "data-testid": 'send-button', type: 'submit' }, t('Send')))));
     return (React.createElement("div", { className: 'str-chat__edit-message-form' },
         React.createElement(ImageDropzone, { accept: acceptedFiles, disabled: !isUploadEnabled || maxFilesLeft === 0, handleFiles: uploadNewFiles, maxNumberOfFiles: maxFilesLeft, multiple: multipleUploads },
             React.createElement("form", { onSubmit: handleSubmit },
@@ -40,6 +45,6 @@ export var EditMessageForm = function () {
                                 React.createElement("span", { className: 'str-chat__input-fileupload' },
                                     React.createElement(FileUploadIcon, null)))))),
                     React.createElement("div", null,
-                        React.createElement("button", { onClick: clearEditingState }, t('Cancel')),
-                        React.createElement("button", { type: 'submit' }, t('Send'))))))));
+                        React.createElement("button", { className: 'str-chat__edit-message-cancel', onClick: clearEditingState }, t('Cancel')),
+                        React.createElement("button", { className: 'str-chat__edit-message-send', type: 'submit' }, t('Send'))))))));
 };

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

@@ -2,5 +2,5 @@ import type { DefaultStreamChatGenerics } from '../../types/types';
 export declare type MessageInputEmojiPickerProps = {
     small?: boolean;
 };
-export declare const EmojiPicker: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: MessageInputEmojiPickerProps) => JSX.Element | null;
+export declare const EmojiPicker: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ small, }: MessageInputEmojiPickerProps) => JSX.Element | null;
 //# sourceMappingURL=EmojiPicker.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"EmojiPicker.d.ts","sourceRoot":"","sources":["../../../src/components/MessageInput/EmojiPicker.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AASnE,oBAAY,4BAA4B,GAAG;IACzC,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,WAAW,4FAGf,4BAA4B,uBAqCpC,CAAC"}
+{"version":3,"file":"EmojiPicker.d.ts","sourceRoot":"","sources":["../../../src/components/MessageInput/EmojiPicker.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAKnE,oBAAY,4BAA4B,GAAG;IACzC,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,WAAW,iGAIrB,4BAA4B,uBAuC9B,CAAC"}

package/dist/components/MessageInput/EmojiPicker.js

@@ -1,26 +1,23 @@
 import React, { Suspense } from 'react';
+import clsx from 'clsx';
 import { useEmojiContext } from '../../context/EmojiContext';
 import { useTranslationContext } from '../../context/TranslationContext';
 import { useMessageInputContext } from '../../context/MessageInputContext';
 var filterEmoji = function (emoji) {
-    if (emoji.name === 'White Smiling Face' || emoji.name === 'White Frowning Face') {
-        return false;
-    }
-    return true;
+    return !(emoji.name === 'White Smiling Face' || emoji.name === 'White Frowning Face');
 };
-export var EmojiPicker = function (props) {
-    var small = props.small;
-    var _a = useEmojiContext('EmojiPicker'), emojiConfig = _a.emojiConfig, EmojiPickerComponent = _a.EmojiPicker;
+export var EmojiPicker = function (_a) {
+    var small = _a.small;
+    var _b = useEmojiContext('EmojiPicker'), emojiConfig = _b.emojiConfig, EmojiPickerComponent = _b.EmojiPicker;
     var t = useTranslationContext('EmojiPicker').t;
-    var messageInput = useMessageInputContext('EmojiPicker');
+    var _c = useMessageInputContext('EmojiPicker'), emojiPickerIsOpen = _c.emojiPickerIsOpen, emojiPickerRef = _c.emojiPickerRef, onSelectEmoji = _c.onSelectEmoji;
     var emojiData = (emojiConfig || {}).emojiData;
-    if (messageInput.emojiPickerIsOpen && emojiData) {
-        var className = small
-            ? 'str-chat__small-message-input-emojipicker'
-            : 'str-chat__input--emojipicker';
-        return (React.createElement("div", { className: className, ref: messageInput.emojiPickerRef },
-            React.createElement(Suspense, { fallback: null },
-                React.createElement(EmojiPickerComponent, { color: '#006CFF', data: emojiData, emoji: 'point_up', emojisToShowFilter: filterEmoji, native: true, onSelect: messageInput.onSelectEmoji, set: 'facebook', showPreview: false, showSkinTones: false, title: t('Pick your emoji'), useButton: true }))));
-    }
-    return null;
+    if (!emojiPickerIsOpen || !emojiData)
+        return null;
+    return (React.createElement("div", { className: clsx('str-chat__emoji-picker-container', {
+            'str-chat__input--emojipicker': !small,
+            'str-chat__small-message-input-emojipicker': small,
+        }), ref: emojiPickerRef },
+        React.createElement(Suspense, { fallback: null },
+            React.createElement(EmojiPickerComponent, { color: '#006CFF', data: emojiData, emoji: 'point_up', emojisToShowFilter: filterEmoji, native: true, onSelect: onSelectEmoji, set: 'facebook', showPreview: false, showSkinTones: false, title: t('Pick your emoji'), useButton: true }))));
 };

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

@@ -3,7 +3,7 @@ import type { Message } from 'stream-chat';
 import { FileUpload, ImageUpload } from './hooks/useMessageInputState';
 import { StreamMessage } from '../../context/ChannelStateContext';
 import type { Channel, SendFileAPIResponse } from 'stream-chat';
-import type { SearchQueryParams } from '../ChannelSearch/ChannelSearch';
+import type { SearchQueryParams } from '../ChannelSearch/hooks/useChannelSearch';
 import type { MessageToSend } from '../../context/ChannelActionContext';
 import type { CustomTrigger, DefaultStreamChatGenerics } from '../../types/types';
 export declare type MessageInputProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, V extends CustomTrigger = CustomTrigger> = {

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":"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"}
+{"version":3,"file":"MessageInput.d.ts","sourceRoot":"","sources":["../../../src/components/MessageInput/MessageInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAC1D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAO3C,OAAO,EAAE,UAAU,EAAE,WAAW,EAAwB,MAAM,8BAA8B,CAAC;AAE7F,OAAO,EAAE,aAAa,EAA0B,MAAM,mCAAmC,CAAC;AAI1F,OAAO,KAAK,EAAE,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAEhE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,yCAAyC,CAAC;AACjF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AAExE,OAAO,KAAK,EAAE,aAAa,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAElF,oBAAY,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,uFAAuF;IACvF,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,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,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,+DAA+D;IAC/D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,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,KACrD,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,0BAA0B,CAAC,EAAE,OAAO,CAAC;CACtC,CAAC;AAqDF;;GAEG;AACH,eAAO,MAAM,YAAY,6LAAsE,CAAC"}

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":"AAwBA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,eAAO,MAAM,gBAAgB,qGAyH5B,CAAC"}
+{"version":3,"file":"MessageInputFlat.d.ts","sourceRoot":"","sources":["../../../src/components/MessageInput/MessageInputFlat.tsx"],"names":[],"mappings":"AAmCA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,eAAO,MAAM,gBAAgB,qGA8B5B,CAAC"}

package/dist/components/MessageInput/MessageInputFlat.js

@@ -1,9 +1,26 @@
-import React, { useEffect } from 'react';
-import { FileUploadButton, ImageDropzone } from 'react-file-utils';
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React, { useEffect, useMemo, useState } from 'react';
+import { FileUploadButton, ImageDropzone, UploadButton } from 'react-file-utils';
+import clsx from 'clsx';
+import { usePopper } from 'react-popper';
+import { useDropzone } from 'react-dropzone';
+import zipObject from 'lodash/zipObject';
+import { nanoid } from 'nanoid';
 import { EmojiPicker } from './EmojiPicker';
 import { CooldownTimer as DefaultCooldownTimer } from './hooks/useCooldownTimer';
-import { EmojiIconLarge as DefaultEmojiIcon, FileUploadIconFlat as DefaultFileUploadIcon, SendButton as DefaultSendButton, } from './icons';
-import { QuotedMessagePreview as DefaultQuotedMessagePreview } from './QuotedMessagePreview';
+import { EmojiIconLarge as DefaultEmojiIcon, EmojiPickerIcon as DefaultEmojiPickerIcon, FileUploadIconFlat as DefaultFileUploadIcon, SendButton as DefaultSendButton, UploadIcon as DefaultUploadIcon, } from './icons';
+import { QuotedMessagePreview as DefaultQuotedMessagePreview, QuotedMessagePreviewHeader, } from './QuotedMessagePreview';
+import { AttachmentPreviewList } from './AttachmentPreviewList';
 import { UploadsPreview } from './UploadsPreview';
 import { ChatAutoComplete } from '../ChatAutoComplete/ChatAutoComplete';
 import { Tooltip } from '../Tooltip/Tooltip';
@@ -14,12 +31,9 @@ import { useTranslationContext } from '../../context/TranslationContext';
 import { useMessageInputContext } from '../../context/MessageInputContext';
 import { useComponentContext } from '../../context/ComponentContext';
 export var MessageInputFlat = function () {
-    var _a = useChannelStateContext('MessageInputFlat'), acceptedFiles = _a.acceptedFiles, multipleUploads = _a.multipleUploads, quotedMessage = _a.quotedMessage;
+    var quotedMessage = useChannelStateContext('MessageInputFlat').quotedMessage;
     var setQuotedMessage = useChannelActionContext('MessageInputFlat').setQuotedMessage;
-    var t = useTranslationContext('MessageInputFlat').t;
-    var channel = useChatContext('MessageInputFlat').channel;
-    var _b = useMessageInputContext('MessageInputFlat'), closeEmojiPicker = _b.closeEmojiPicker, cooldownRemaining = _b.cooldownRemaining, emojiPickerIsOpen = _b.emojiPickerIsOpen, handleSubmit = _b.handleSubmit, isUploadEnabled = _b.isUploadEnabled, maxFilesLeft = _b.maxFilesLeft, numberOfUploads = _b.numberOfUploads, openEmojiPicker = _b.openEmojiPicker, setCooldownRemaining = _b.setCooldownRemaining, uploadNewFiles = _b.uploadNewFiles;
-    var _c = useComponentContext('MessageInputFlat'), _d = _c.CooldownTimer, CooldownTimer = _d === void 0 ? DefaultCooldownTimer : _d, _e = _c.EmojiIcon, EmojiIcon = _e === void 0 ? DefaultEmojiIcon : _e, _f = _c.FileUploadIcon, FileUploadIcon = _f === void 0 ? DefaultFileUploadIcon : _f, _g = _c.QuotedMessagePreview, QuotedMessagePreview = _g === void 0 ? DefaultQuotedMessagePreview : _g, _h = _c.SendButton, SendButton = _h === void 0 ? DefaultSendButton : _h;
+    var _a = useChatContext('MessageInputFlat'), channel = _a.channel, themeVersion = _a.themeVersion;
     useEffect(function () {
         var handleQuotedMessageUpdate = function (e) {
             var _a;
@@ -38,7 +52,18 @@ export var MessageInputFlat = function () {
             channel === null || channel === void 0 ? void 0 : channel.off('message.updated', handleQuotedMessageUpdate);
         };
     }, [channel, quotedMessage]);
-    return (React.createElement("div", { className: "str-chat__input-flat " + (SendButton ? 'str-chat__input-flat--send-button-active' : '') + " " + (quotedMessage && !quotedMessage.parent_id ? 'str-chat__input-flat-quoted' : '') + "\n      " + (numberOfUploads ? 'str-chat__input-flat-has-attachments' : '') + "\n      " },
+    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'), closeEmojiPicker = _b.closeEmojiPicker, cooldownRemaining = _b.cooldownRemaining, emojiPickerIsOpen = _b.emojiPickerIsOpen, handleSubmit = _b.handleSubmit, isUploadEnabled = _b.isUploadEnabled, maxFilesLeft = _b.maxFilesLeft, numberOfUploads = _b.numberOfUploads, openEmojiPicker = _b.openEmojiPicker, setCooldownRemaining = _b.setCooldownRemaining, uploadNewFiles = _b.uploadNewFiles;
+    var _c = useComponentContext('MessageInputFlat'), _d = _c.CooldownTimer, CooldownTimer = _d === void 0 ? DefaultCooldownTimer : _d, _e = _c.EmojiIcon, EmojiIcon = _e === void 0 ? DefaultEmojiIcon : _e, _f = _c.FileUploadIcon, FileUploadIcon = _f === void 0 ? DefaultFileUploadIcon : _f, _g = _c.QuotedMessagePreview, QuotedMessagePreview = _g === void 0 ? DefaultQuotedMessagePreview : _g, _h = _c.SendButton, SendButton = _h === void 0 ? DefaultSendButton : _h;
+    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' },
@@ -61,3 +86,52 @@ export var MessageInputFlat = function () {
                                 React.createElement(FileUploadIcon, null)))))),
                 !cooldownRemaining && 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'), closeEmojiPicker = _c.closeEmojiPicker, cooldownRemaining = _c.cooldownRemaining, emojiPickerIsOpen = _c.emojiPickerIsOpen, handleSubmit = _c.handleSubmit, isUploadEnabled = _c.isUploadEnabled, maxFilesLeft = _c.maxFilesLeft, message = _c.message, numberOfUploads = _c.numberOfUploads, openEmojiPicker = _c.openEmojiPicker, setCooldownRemaining = _c.setCooldownRemaining, text = _c.text, uploadNewFiles = _c.uploadNewFiles;
+    var _d = useComponentContext('MessageInputV2'), _e = _d.CooldownTimer, CooldownTimer = _e === void 0 ? DefaultCooldownTimer : _e, _f = _d.EmojiIcon, EmojiIcon = _f === void 0 ? DefaultEmojiPickerIcon : _f, _g = _d.FileUploadIcon, FileUploadIcon = _g === void 0 ? DefaultUploadIcon : _g, _h = _d.QuotedMessagePreview, QuotedMessagePreview = _h === void 0 ? DefaultQuotedMessagePreview : _h, _j = _d.SendButton, SendButton = _j === void 0 ? DefaultSendButton : _j;
+    var _k = useState(null), referenceElement = _k[0], setReferenceElement = _k[1];
+    var _l = useState(null), popperElement = _l[0], setPopperElement = _l[1];
+    var _m = usePopper(referenceElement, popperElement, {
+        placement: 'top-end',
+    }), attributes = _m.attributes, styles = _m.styles;
+    var id = useMemo(function () { return nanoid(); }, []);
+    var accept = useMemo(function () {
+        return zipObject(acceptedFiles, Array.from({ length: acceptedFiles.length }, function () { return []; }));
+    }, [acceptedFiles]);
+    var _o = useDropzone({
+        accept: accept,
+        disabled: !isUploadEnabled || maxFilesLeft === 0,
+        multiple: multipleUploads,
+        noClick: true,
+        onDrop: uploadNewFiles,
+    }), getRootProps = _o.getRootProps, isDragActive = _o.isDragActive, isDragReject = _o.isDragReject;
+    // 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;
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", __assign({}, getRootProps({ className: 'str-chat__message-input' })),
+            isDragActive && (React.createElement("div", { className: clsx('str-chat__dropzone-container', {
+                    'str-chat__dropzone-container--not-accepted': isDragReject,
+                }) },
+                !isDragReject && React.createElement("p", null, t('Drag your files here')),
+                isDragReject && React.createElement("p", null, t('Some of the files will not be accepted')))),
+            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": '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 && React.createElement(AttachmentPreviewList, null),
+                    React.createElement("div", { className: 'str-chat__message-textarea-with-emoji-picker' },
+                        React.createElement(ChatAutoComplete, null),
+                        React.createElement("div", { className: 'str-chat__message-textarea-emoji-picker' },
+                            emojiPickerIsOpen && (React.createElement("div", __assign({ className: 'str-chat__message-textarea-emoji-picker-container', style: styles.popper }, attributes.popper, { ref: setPopperElement }),
+                                React.createElement(EmojiPicker, null))),
+                            React.createElement("button", { "aria-label": 'Emoji picker', className: 'str-chat__emoji-picker-button', onClick: emojiPickerIsOpen ? closeEmojiPicker : openEmojiPicker, ref: setReferenceElement, type: 'button' },
+                                React.createElement(EmojiIcon, null))))),
+                !message && (React.createElement(React.Fragment, null, cooldownRemaining ? (React.createElement(CooldownTimer, { cooldownInterval: cooldownRemaining, setCooldownRemaining: setCooldownRemaining })) : (React.createElement(SendButton, { disabled: !numberOfUploads && !text.length, sendMessage: handleSubmit }))))))));
+};

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

@@ -1,3 +1,12 @@
 import type { CustomTrigger, DefaultStreamChatGenerics } from '../../types/types';
+/**
+ * @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
+ * and markup.
+ * In case you need to change styling in places where `MessageInputSmall` has been used previously ([`Thread`](../Thread/Thread.tsx))
+ * please do so by updating the CSS or by overriding the component itself.
+ *
+ * **Will be removed with the complete transition to the theming V2.**
+ */
 export declare const MessageInputSmall: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, V extends CustomTrigger = CustomTrigger>() => JSX.Element;
 //# sourceMappingURL=MessageInputSmall.d.ts.map

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":"AAyBA,OAAO,KAAK,EAAE,aAAa,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAElF,eAAO,MAAM,iBAAiB,8IA4H7B,CAAC"}
+{"version":3,"file":"MessageInputSmall.d.ts","sourceRoot":"","sources":["../../../src/components/MessageInput/MessageInputSmall.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAE,aAAa,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAElF;;;;;;;;GAQG;AACH,eAAO,MAAM,iBAAiB,8IA4H7B,CAAC"}

package/dist/components/MessageInput/MessageInputSmall.js

@@ -13,6 +13,15 @@ import { useTranslationContext } from '../../context/TranslationContext';
 import { useMessageInputContext } from '../../context/MessageInputContext';
 import { useComponentContext } from '../../context/ComponentContext';
 import { QuotedMessagePreview as DefaultQuotedMessagePreview } from './QuotedMessagePreview';
+/**
+ * @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
+ * and markup.
+ * In case you need to change styling in places where `MessageInputSmall` has been used previously ([`Thread`](../Thread/Thread.tsx))
+ * please do so by updating the CSS or by overriding the component itself.
+ *
+ * **Will be removed with the complete transition to the theming V2.**
+ */
 export var MessageInputSmall = function () {
     var _a = useChannelStateContext('MessageInputSmall'), acceptedFiles = _a.acceptedFiles, multipleUploads = _a.multipleUploads, quotedMessage = _a.quotedMessage;
     var setQuotedMessage = useChannelActionContext('MessageInputSmall').setQuotedMessage;
@@ -40,7 +49,7 @@ export var MessageInputSmall = function () {
     }, [channel, quotedMessage]);
     return (React.createElement("div", { className: 'str-chat__small-message-input__wrapper' },
         React.createElement(ImageDropzone, { accept: acceptedFiles, disabled: !isUploadEnabled || maxFilesLeft === 0 || !!cooldownRemaining, handleFiles: uploadNewFiles, maxNumberOfFiles: maxFilesLeft, multiple: multipleUploads },
-            React.createElement("div", { className: "str-chat__small-message-input " + (SendButton ? 'str-chat__small-message-input--send-button-active' : '') + " " + (quotedMessage && quotedMessage.parent_id ? 'str-chat__input-flat-quoted' : '') + " " + (numberOfUploads ? 'str-chat__small-message-input-has-attachments' : '') + " " },
+            React.createElement("div", { className: "str-chat__small-message-input ".concat(SendButton ? 'str-chat__small-message-input--send-button-active' : '', " ").concat(quotedMessage && quotedMessage.parent_id ? 'str-chat__input-flat-quoted' : '', " ").concat(numberOfUploads ? 'str-chat__small-message-input-has-attachments' : '', " ") },
                 quotedMessage && quotedMessage.parent_id && (React.createElement(QuotedMessagePreview, { quotedMessage: quotedMessage })),
                 isUploadEnabled && React.createElement(UploadsPreview, null),
                 React.createElement("div", { className: 'str-chat__small-message-input--textarea-wrapper' },

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

@@ -1,7 +1,8 @@
 import type { StreamMessage } from '../../context/ChannelStateContext';
 import type { DefaultStreamChatGenerics } from '../../types/types';
+export declare const QuotedMessagePreviewHeader: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>() => JSX.Element;
 export declare type QuotedMessagePreviewProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
     quotedMessage: StreamMessage<StreamChatGenerics>;
 };
-export declare const QuotedMessagePreview: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: QuotedMessagePreviewProps<StreamChatGenerics>) => JSX.Element | null;
+export declare const QuotedMessagePreview: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ quotedMessage, }: QuotedMessagePreviewProps<StreamChatGenerics>) => JSX.Element | null;
 //# sourceMappingURL=QuotedMessagePreview.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"QuotedMessagePreview.d.ts","sourceRoot":"","sources":["../../../src/components/MessageInput/QuotedMessagePreview.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAEvE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AA2BnE,oBAAY,yBAAyB,CACnC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,aAAa,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;CAClD,CAAC;AAEF,eAAO,MAAM,oBAAoB,gKA2ChC,CAAC"}
+{"version":3,"file":"QuotedMessagePreview.d.ts","sourceRoot":"","sources":["../../../src/components/MessageInput/QuotedMessagePreview.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AACvE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,eAAO,MAAM,0BAA0B,qGAoBtC,CAAC;AAEF,oBAAY,yBAAyB,CACnC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,aAAa,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;CAClD,CAAC;AAEF,eAAO,MAAM,oBAAoB,6KA+ChC,CAAC"}