stream-chat-react 10.0.0-theming-v2.2 → 10.0.1

package/dist/index.cjs.js

@@ -28,7 +28,7 @@ require('dayjs/locale/tr');
 require('dayjs/locale/en');
 var ImageGallery = require('react-image-gallery');
 var reactFileUtils = require('react-file-utils');
-var _defineProperty$3 = require('@babel/runtime/helpers/defineProperty');
+var _defineProperty$2 = require('@babel/runtime/helpers/defineProperty');
 var _slicedToArray$2 = require('@babel/runtime/helpers/slicedToArray');
 var emojiRegex = require('emoji-regex');
 var linkify = require('linkifyjs');
@@ -54,6 +54,8 @@ var streamChat = require('stream-chat');
 var deepequal = require('react-fast-compare');
 var ReactDOM = require('react-dom');
 var reactVirtuoso = require('react-virtuoso');
+var nimbleEmoji = require('emoji-mart/dist/components/emoji/nimble-emoji');
+var nimblePicker = require('emoji-mart/dist/components/picker/nimble-picker');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -88,7 +90,7 @@ var updateLocale__default = /*#__PURE__*/_interopDefaultLegacy(updateLocale);
 var localeData__default = /*#__PURE__*/_interopDefaultLegacy(localeData);
 var relativeTime__default = /*#__PURE__*/_interopDefaultLegacy(relativeTime);
 var ImageGallery__default = /*#__PURE__*/_interopDefaultLegacy(ImageGallery);
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty$3);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty$2);
 var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray$2);
 var emojiRegex__default = /*#__PURE__*/_interopDefaultLegacy(emojiRegex);
 var linkify__namespace = /*#__PURE__*/_interopNamespace(linkify);
@@ -110,6 +112,8 @@ var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce$1);
 var throttle__default = /*#__PURE__*/_interopDefaultLegacy(throttle);
 var deepequal__default = /*#__PURE__*/_interopDefaultLegacy(deepequal);
 var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
+var nimbleEmoji__default = /*#__PURE__*/_interopDefaultLegacy(nimbleEmoji);
+var nimblePicker__default = /*#__PURE__*/_interopDefaultLegacy(nimblePicker);
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -243,7 +247,7 @@ var UnMemoizedAttachmentActions = function (props) {
     var handleActionClick = function (event, name, value) { return actionHandler === null || actionHandler === void 0 ? void 0 : actionHandler(name, value, event); };
     return (React__default["default"].createElement("div", { className: 'str-chat__message-attachment-actions' },
         React__default["default"].createElement("div", { className: 'str-chat__message-attachment-actions-form' },
-            React__default["default"].createElement("span", { key: 0 }, text),
+            React__default["default"].createElement("span", null, text),
             actions.map(function (action) { return (React__default["default"].createElement("button", { className: "str-chat__message-attachment-actions-button str-chat__message-attachment-actions-button--".concat(action.style), "data-testid": "".concat(action.name), "data-value": action.value, key: "".concat(id, "-").concat(action.value), onClick: function (event) { return handleActionClick(event, action.name, action.value); } }, action.text)); }))));
 };
 /**
@@ -514,32 +518,12 @@ var withComponentContext = function (Component) {
     return WithComponentContextComponent;
 };
 
-var DefaultEmoji = React__default["default"].lazy(function () { return __awaiter$1(void 0, void 0, void 0, function () {
-    var emoji;
-    return __generator$1(this, function (_a) {
-        switch (_a.label) {
-            case 0: return [4 /*yield*/, Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('emoji-mart/dist/components/emoji/nimble-emoji.js')); })];
-            case 1:
-                emoji = _a.sent();
-                return [2 /*return*/, { default: emoji.default }];
-        }
-    });
-}); });
-var DefaultEmojiPicker = React__default["default"].lazy(function () { return __awaiter$1(void 0, void 0, void 0, function () {
-    var emojiPicker;
-    return __generator$1(this, function (_a) {
-        switch (_a.label) {
-            case 0: return [4 /*yield*/, Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('emoji-mart/dist/components/picker/nimble-picker.js')); })];
-            case 1:
-                emojiPicker = _a.sent();
-                return [2 /*return*/, { default: emojiPicker.default }];
-        }
-    });
-}); });
+var DefaultEmoji$1 = React__default["default"].lazy(function () { return Promise.resolve().then(function () { return DefaultEmoji; }); });
+var DefaultEmojiPicker$1 = React__default["default"].lazy(function () { return Promise.resolve().then(function () { return DefaultEmojiPicker; }); });
 var EmojiContext = React__default["default"].createContext(undefined);
 var EmojiProvider = function (_a) {
     var children = _a.children, value = _a.value;
-    var _b = value.Emoji, Emoji = _b === void 0 ? DefaultEmoji : _b, emojiConfig = value.emojiConfig, _c = value.EmojiIndex, EmojiIndex = _c === void 0 ? DefaultEmojiIndex__default["default"] : _c, _d = value.EmojiPicker, EmojiPicker = _d === void 0 ? DefaultEmojiPicker : _d;
+    var _b = value.Emoji, Emoji = _b === void 0 ? DefaultEmoji$1 : _b, emojiConfig = value.emojiConfig, _c = value.EmojiIndex, EmojiIndex = _c === void 0 ? DefaultEmojiIndex__default["default"] : _c, _d = value.EmojiPicker, EmojiPicker = _d === void 0 ? DefaultEmojiPicker$1 : _d;
     var emojiContextValue = {
         Emoji: Emoji,
         emojiConfig: emojiConfig,
@@ -1744,7 +1728,7 @@ var AttachmentActionsContainer = function (_a) {
     var actionHandler = _a.actionHandler, attachment = _a.attachment, _c = _a.AttachmentActions, AttachmentActions$1 = _c === void 0 ? AttachmentActions : _c;
     if (!((_b = attachment.actions) === null || _b === void 0 ? void 0 : _b.length))
         return null;
-    return (React__default["default"].createElement(AttachmentActions$1, __assign({}, attachment, { actionHandler: function (event, name, value) { return actionHandler === null || actionHandler === void 0 ? void 0 : actionHandler(event, name, value); }, actions: attachment.actions, id: attachment.id || '', text: attachment.text || '' })));
+    return (React__default["default"].createElement(AttachmentActions$1, __assign({}, attachment, { actionHandler: actionHandler, actions: attachment.actions, id: attachment.id || '', text: attachment.text || '' })));
 };
 var GalleryContainer = function (_a) {
     var attachment = _a.attachment, _b = _a.Gallery, Gallery$1 = _b === void 0 ? Gallery : _b;
@@ -1768,7 +1752,7 @@ var CardContainer = function (props) {
     var componentType = 'card';
     if (attachment.actions && attachment.actions.length) {
         return (React__default["default"].createElement(AttachmentWithinContainer, { attachment: attachment, componentType: componentType },
-            React__default["default"].createElement("div", { className: 'str-chat__attachment', key: "key-image-".concat(attachment.id) },
+            React__default["default"].createElement("div", { className: 'str-chat__attachment' },
                 React__default["default"].createElement(Card$1, __assign({}, attachment)),
                 React__default["default"].createElement(AttachmentActionsContainer, __assign({}, props)))));
     }
@@ -3197,7 +3181,7 @@ var ReactTextareaAutocomplete = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "_defaultShouldSubmit", function (event) {
-      return event.key === 'Enter' && !event.shiftKey;
+      return event.key === 'Enter' && !event.shiftKey && !event.nativeEvent.isComposing;
     });
 
     _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "_handleKeyDown", function (event) {
@@ -4581,7 +4565,7 @@ var CustomMessageActionsList = function (props) {
     var customActionsArray = Object.keys(customMessageActions);
     return (React__default["default"].createElement(React__default["default"].Fragment, null, customActionsArray.map(function (customAction) {
         var customHandler = customMessageActions[customAction];
-        return (React__default["default"].createElement("button", { "aria-selected": 'false', className: 'str-chat__message-actions-list-item', key: customAction, onClick: function (event) { return customHandler(message, event); }, role: 'option' }, customAction));
+        return (React__default["default"].createElement("button", { "aria-selected": 'false', className: 'str-chat__message-actions-list-item str-chat__message-actions-list-item-button', key: customAction, onClick: function (event) { return customHandler(message, event); }, role: 'option' }, customAction));
     })));
 };
 var UnMemoizedMessageActionsBox = function (props) {
@@ -4749,876 +4733,183 @@ var UnMemoizedMessageRepliesCountButton = function (props) {
 };
 var MessageRepliesCountButton = React__default["default"].memo(UnMemoizedMessageRepliesCountButton);
 
-var Tooltip = function (props) {
-    var children = props.children, rest = __rest(props, ["children"]);
-    return (React__default["default"].createElement("div", __assign({ className: 'str-chat__tooltip' }, rest), children));
-};
+/**
+ * Simple ponyfill for Object.fromEntries
+ */
 
-// TODO: remove after fully deprecating V1 theming
-var TooltipContainer = function (_a) {
-    var children = _a.children;
-    var themeVersion = useChatContext('TooltipContainer').themeVersion;
-    return themeVersion === '2' ? (React__default["default"].createElement("div", { className: 'str-chat__message-status-tooltip-container' }, children)) : (React__default["default"].createElement(React__default["default"].Fragment, null, children));
-};
-var UnMemoizedMessageStatus = function (props) {
-    var _a;
-    var propAvatar = props.Avatar, _b = props.messageType, messageType = _b === void 0 ? 'simple' : _b, _c = props.tooltipUserNameMapper, tooltipUserNameMapper = _c === void 0 ? mapToUserNameOrId : _c;
-    var client = useChatContext('MessageStatus').client;
-    var contextAvatar = useComponentContext('MessageStatus').Avatar;
-    var _d = useMessageContext('MessageStatus'), isMyMessage = _d.isMyMessage, lastReceivedId = _d.lastReceivedId, message = _d.message, readBy = _d.readBy, threadList = _d.threadList;
-    var t = useTranslationContext('MessageStatus').t;
-    var themeVersion = useChatContext('MessageStatus').themeVersion;
-    var Avatar$1 = propAvatar || contextAvatar || Avatar;
-    if (!isMyMessage() || message.type === 'error') {
-        return null;
-    }
-    var justReadByMe = (readBy === null || readBy === void 0 ? void 0 : readBy.length) === 1 && readBy[0].id === ((_a = client.user) === null || _a === void 0 ? void 0 : _a.id);
-    var rootClassName = "str-chat__message-".concat(messageType, "-status str-chat__message-status");
-    if (message.status === 'sending') {
-        return (React__default["default"].createElement("span", { className: rootClassName, "data-testid": 'message-status-sending' },
-            React__default["default"].createElement(Tooltip, null, t('Sending...')),
-            React__default["default"].createElement(LoadingIndicator, null)));
-    }
-    if ((readBy === null || readBy === void 0 ? void 0 : readBy.length) && !threadList && !justReadByMe) {
-        var lastReadUser = readBy.filter(function (item) { var _a; return item.id !== ((_a = client.user) === null || _a === void 0 ? void 0 : _a.id); })[0];
-        return (React__default["default"].createElement("span", { className: rootClassName, "data-testid": 'message-status-read-by' },
-            React__default["default"].createElement(TooltipContainer, null,
-                React__default["default"].createElement(Tooltip, null, getReadByTooltipText(readBy, t, client, tooltipUserNameMapper)),
-                React__default["default"].createElement(Avatar$1, { image: lastReadUser.image, name: lastReadUser.name || lastReadUser.id, size: 15, user: lastReadUser })),
-            readBy.length > 2 && (React__default["default"].createElement("span", { className: "str-chat__message-".concat(messageType, "-status-number"), "data-testid": 'message-status-read-by-many' }, readBy.length - 1))));
-    }
-    if (message.status === 'received' && message.id === lastReceivedId && !threadList) {
-        return (React__default["default"].createElement("span", { className: rootClassName, "data-testid": 'message-status-received' },
-            React__default["default"].createElement(Tooltip, null, t('Delivered')),
-            themeVersion === '2' ? React__default["default"].createElement(MessageDeliveredIcon, null) : React__default["default"].createElement(DeliveredCheckIcon, null)));
-    }
-    return null;
+var fromEntries = function fromEntries(entries) {
+  return entries.reduce(function (acc, _ref) {
+    var key = _ref[0],
+        value = _ref[1];
+    acc[key] = value;
+    return acc;
+  }, {});
 };
-var MessageStatus = React__default["default"].memo(UnMemoizedMessageStatus);
+/**
+ * Small wrapper around `useLayoutEffect` to get rid of the warning on SSR envs
+ */
 
-var QuotedMessage = function () {
-    var _a, _b;
-    var _c = useComponentContext('QuotedMessage'), Attachment = _c.Attachment, ContextAvatar = _c.Avatar;
-    var _d = useMessageContext('QuotedMessage'), isMyMessage = _d.isMyMessage, message = _d.message;
-    var userLanguage = useTranslationContext('QuotedMessage').userLanguage;
-    var jumpToMessage = useChannelActionContext('QuotedMessage').jumpToMessage;
-    var Avatar$1 = ContextAvatar || Avatar;
-    var quoted_message = message.quoted_message;
-    if (!quoted_message)
-        return null;
-    var quotedMessageText = ((_a = quoted_message.i18n) === null || _a === void 0 ? void 0 : _a["".concat(userLanguage, "_text")]) ||
-        quoted_message.text;
-    // @ts-expect-error
-    var quotedMessageAttachment = quoted_message.attachments.length
-        ? // @ts-expect-error
-            quoted_message.attachments[0]
-        : null;
-    if (!quotedMessageText && !quotedMessageAttachment)
-        return null;
-    return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement("div", { className: clsx('str-chat__quoted-message-preview quoted-message', { mine: isMyMessage() }), onClickCapture: function (e) {
-                e.stopPropagation();
-                e.preventDefault();
-                jumpToMessage(quoted_message.id);
-            } },
-            quoted_message.user && (React__default["default"].createElement(Avatar$1, { image: quoted_message.user.image, name: quoted_message.user.name || quoted_message.user.id, size: 20, user: quoted_message.user })),
-            React__default["default"].createElement("div", { className: 'quoted-message-inner str-chat__quoted-message-bubble' },
-                quotedMessageAttachment && React__default["default"].createElement(Attachment, { attachments: [quotedMessageAttachment] }),
-                React__default["default"].createElement("div", null, quotedMessageText))),
-        ((_b = message.attachments) === null || _b === void 0 ? void 0 : _b.length) && message.quoted_message ? (React__default["default"].createElement(Attachment, { attachments: message.attachments })) : null));
-};
+var useIsomorphicLayoutEffect = typeof window !== 'undefined' && window.document && window.document.createElement ? React__namespace.useLayoutEffect : React__namespace.useEffect;
 
-var UnMemoizedMessageTextComponent = function (props) {
-    var _a;
-    var customInnerClass = props.customInnerClass, _b = props.customWrapperClass, customWrapperClass = _b === void 0 ? '' : _b, propMessage = props.message, _c = props.theme, theme = _c === void 0 ? 'simple' : _c;
-    var _d = useComponentContext('MessageText').QuotedMessage, QuotedMessage$1 = _d === void 0 ? QuotedMessage : _d;
-    var _e = useMessageContext('MessageText'), contextMessage = _e.message, onMentionsClickMessage = _e.onMentionsClickMessage, onMentionsHoverMessage = _e.onMentionsHoverMessage, _f = _e.renderText, renderText$1 = _f === void 0 ? renderText : _f, unsafeHTML = _e.unsafeHTML;
-    var _g = useTranslationContext('MessageText'), t = _g.t, userLanguage = _g.userLanguage;
-    var message = propMessage || contextMessage;
-    var hasAttachment = messageHasAttachments(message);
-    var messageTextToRender = ((_a = message.i18n) === null || _a === void 0 ? void 0 : _a["".concat(userLanguage, "_text")]) || message.text;
-    var messageText = React.useMemo(function () { return renderText$1(messageTextToRender, message.mentioned_users); }, [
-        message.mentioned_users,
-        messageTextToRender,
-    ]);
-    var wrapperClass = customWrapperClass || 'str-chat__message-text';
-    var innerClass = customInnerClass || "str-chat__message-text-inner str-chat__message-".concat(theme, "-text-inner");
-    if (!messageTextToRender && !message.quoted_message)
-        return null;
-    return (React__default["default"].createElement("div", { className: wrapperClass, tabIndex: 0 },
-        React__default["default"].createElement("div", { className: "\n          ".concat(innerClass, "\n          ").concat(hasAttachment ? " str-chat__message-".concat(theme, "-text-inner--has-attachment") : '', "\n          ").concat(isOnlyEmojis(message.text) && !message.quoted_message
-                ? " str-chat__message-".concat(theme, "-text-inner--is-emoji")
-                : '', "\n        ").trim(), "data-testid": 'message-text-inner-wrapper', onClick: onMentionsClickMessage, onMouseOver: onMentionsHoverMessage },
-            message.quoted_message && React__default["default"].createElement(QuotedMessage$1, null),
-            message.type === 'error' && (React__default["default"].createElement("div", { className: "str-chat__".concat(theme, "-message--error-message str-chat__message--error-message") }, t('Error · Unsent'))),
-            message.status === 'failed' && (React__default["default"].createElement("div", { className: "str-chat__".concat(theme, "-message--error-message str-chat__message--error-message") }, message.errorStatusCode !== 403
-                ? t('Message Failed · Click to try again')
-                : t('Message Failed · Unauthorized'))),
-            unsafeHTML && message.html ? (React__default["default"].createElement("div", { dangerouslySetInnerHTML: { __html: message.html } })) : (React__default["default"].createElement("div", null, messageText)))));
-};
-var MessageText = React__default["default"].memo(UnMemoizedMessageTextComponent);
+var top = 'top';
+var bottom = 'bottom';
+var right = 'right';
+var left = 'left';
+var auto = 'auto';
+var basePlacements = [top, bottom, right, left];
+var start = 'start';
+var end = 'end';
+var clippingParents = 'clippingParents';
+var viewport = 'viewport';
+var popper = 'popper';
+var reference = 'reference';
+var variationPlacements = /*#__PURE__*/basePlacements.reduce(function (acc, placement) {
+  return acc.concat([placement + "-" + start, placement + "-" + end]);
+}, []);
+var placements = /*#__PURE__*/[].concat(basePlacements, [auto]).reduce(function (acc, placement) {
+  return acc.concat([placement, placement + "-" + start, placement + "-" + end]);
+}, []); // modifiers that need to read the DOM
 
-var notValidDateWarning = 'MessageTimestamp was called without a message, or message has invalid created_at date.';
-var noParsingFunctionWarning = 'MessageTimestamp was called but there is no datetime parsing function available';
-function getDateString(_a) {
-    var calendar = _a.calendar, format = _a.format, formatDate = _a.formatDate, messageCreatedAt = _a.messageCreatedAt, tDateTimeParser = _a.tDateTimeParser;
-    if (!messageCreatedAt ||
-        (typeof messageCreatedAt === 'string' && !Date.parse(messageCreatedAt))) {
-        console.warn(notValidDateWarning);
-        return null;
-    }
-    if (typeof formatDate === 'function') {
-        return formatDate(new Date(messageCreatedAt));
-    }
-    if (!tDateTimeParser) {
-        console.warn(noParsingFunctionWarning);
-        return null;
-    }
-    var parsedTime = tDateTimeParser(messageCreatedAt);
-    if (isDayOrMoment(parsedTime)) {
-        /**
-         * parsedTime.calendar is guaranteed on the type but is only
-         * available when a user calls dayjs.extend(calendar)
-         */
-        return calendar && parsedTime.calendar ? parsedTime.calendar() : parsedTime.format(format);
-    }
-    if (isDate(parsedTime)) {
-        return parsedTime.toDateString();
-    }
-    if (isNumberOrString(parsedTime)) {
-        return parsedTime;
-    }
-    return null;
+var beforeRead = 'beforeRead';
+var read = 'read';
+var afterRead = 'afterRead'; // pure-logic modifiers
+
+var beforeMain = 'beforeMain';
+var main = 'main';
+var afterMain = 'afterMain'; // modifier with the purpose to write to the DOM (or write into a framework state)
+
+var beforeWrite = 'beforeWrite';
+var write = 'write';
+var afterWrite = 'afterWrite';
+var modifierPhases = [beforeRead, read, afterRead, beforeMain, main, afterMain, beforeWrite, write, afterWrite];
+
+function getNodeName(element) {
+  return element ? (element.nodeName || '').toLowerCase() : null;
 }
 
-var defaultTimestampFormat = 'h:mmA';
-var UnMemoizedMessageTimestamp = function (props) {
-    var _a = props.calendar, calendar = _a === void 0 ? false : _a, _b = props.customClass, customClass = _b === void 0 ? '' : _b, _c = props.format, format = _c === void 0 ? defaultTimestampFormat : _c, propMessage = props.message;
-    var _d = useMessageContext('MessageTimestamp'), formatDate = _d.formatDate, contextMessage = _d.message;
-    var tDateTimeParser = useTranslationContext('MessageTimestamp').tDateTimeParser;
-    var message = propMessage || contextMessage;
-    var messageCreatedAt = message.created_at && isDate(message.created_at)
-        ? message.created_at.toISOString()
-        : message.created_at;
-    var when = React.useMemo(function () { return getDateString({ calendar: calendar, format: format, formatDate: formatDate, messageCreatedAt: messageCreatedAt, tDateTimeParser: tDateTimeParser }); }, [formatDate, calendar, tDateTimeParser, format, messageCreatedAt]);
-    if (!when)
-        return null;
-    return (React__default["default"].createElement("time", { className: customClass, dateTime: messageCreatedAt, title: messageCreatedAt }, when));
-};
-var MessageTimestamp = React__default["default"].memo(UnMemoizedMessageTimestamp);
+function getWindow(node) {
+  if (node == null) {
+    return window;
+  }
 
-var CUSTOM_MESSAGE_TYPE = {
-    date: 'message.date',
-    intro: 'channel.intro',
-};
+  if (node.toString() !== '[object Window]') {
+    var ownerDocument = node.ownerDocument;
+    return ownerDocument ? ownerDocument.defaultView || window : window;
+  }
 
-var useCommandTrigger = function () {
-    var themeVersion = useChatContext('useCommandTrigger').themeVersion;
-    var channelConfig = useChannelStateContext('useCommandTrigger').channelConfig;
-    var commands = channelConfig === null || channelConfig === void 0 ? void 0 : channelConfig.commands;
-    return {
-        component: CommandItem,
-        dataProvider: function (query, text, onReady) {
-            if (text.indexOf('/') !== 0 || !commands) {
-                return [];
-            }
-            var selectedCommands = commands.filter(function (command) { var _a; return ((_a = command.name) === null || _a === void 0 ? void 0 : _a.indexOf(query)) !== -1; });
-            // sort alphabetically unless the you're matching the first char
-            selectedCommands.sort(function (a, b) {
-                var _a, _b;
-                var nameA = (_a = a.name) === null || _a === void 0 ? void 0 : _a.toLowerCase();
-                var nameB = (_b = b.name) === null || _b === void 0 ? void 0 : _b.toLowerCase();
-                if ((nameA === null || nameA === void 0 ? void 0 : nameA.indexOf(query)) === 0) {
-                    nameA = "0".concat(nameA);
-                }
-                if ((nameB === null || nameB === void 0 ? void 0 : nameB.indexOf(query)) === 0) {
-                    nameB = "0".concat(nameB);
-                }
-                // Should confirm possible null / undefined when TS is fully implemented
-                if (nameA != null && nameB != null) {
-                    if (nameA < nameB) {
-                        return -1;
-                    }
-                    if (nameA > nameB) {
-                        return 1;
-                    }
-                }
-                return 0;
-            });
-            var result = selectedCommands.slice(0, themeVersion === '2' ? 5 : 10);
-            if (onReady)
-                onReady(result.filter(function (result) {
-                    return result.name !== undefined;
-                }), query);
-            return result;
-        },
-        output: function (entity) { return ({
-            caretPosition: 'next',
-            key: entity.name,
-            text: "/".concat(entity.name),
-        }); },
-    };
-};
+  return node;
+}
 
-var UnMemoizedEmoticonItem = function (props) {
-    var entity = props.entity;
-    var hasEntity = Object.keys(entity).length;
-    var itemParts = entity === null || entity === void 0 ? void 0 : entity.itemNameParts;
-    var renderName = function () {
-        if (!hasEntity)
-            return null;
-        return (hasEntity &&
-            itemParts.parts.map(function (part, i) {
-                return part.toLowerCase() === itemParts.match.toLowerCase() ? (React__default["default"].createElement("span", { className: 'str-chat__emoji-item--highlight', key: "part-".concat(i) }, part)) : (React__default["default"].createElement("span", { className: 'str-chat__emoji-item--part', key: "part-".concat(i) }, part));
-            }));
-    };
-    return (React__default["default"].createElement("div", { className: 'str-chat__emoji-item' },
-        React__default["default"].createElement("span", { className: 'str-chat__emoji-item--entity' }, entity.native),
-        React__default["default"].createElement("span", { className: 'str-chat__emoji-item--name' }, renderName())));
-};
-var EmoticonItem = React__default["default"].memo(UnMemoizedEmoticonItem);
+function isElement(node) {
+  var OwnElement = getWindow(node).Element;
+  return node instanceof OwnElement || node instanceof Element;
+}
 
-var useEmojiTrigger = function (emojiIndex) {
-    var themeVersion = useChatContext('useEmojiTrigger').themeVersion;
-    return {
-        component: EmoticonItem,
-        dataProvider: function (query, _, onReady) {
-            if (query.length === 0 || query.charAt(0).match(/[^a-zA-Z0-9+-]/)) {
-                return [];
-            }
-            var emojis = (emojiIndex === null || emojiIndex === void 0 ? void 0 : emojiIndex.search(query)) || [];
-            // emojiIndex.search sometimes returns undefined values, so filter those out first
-            var result = emojis.filter(Boolean).slice(0, themeVersion === '2' ? 7 : 10);
-            if (onReady)
-                onReady(result, query);
-            return result;
-        },
-        output: function (entity) { return ({
-            caretPosition: 'next',
-            key: entity.id,
-            text: "".concat('native' in entity ? entity.native : ''),
-        }); },
-    };
-};
+function isHTMLElement(node) {
+  var OwnElement = getWindow(node).HTMLElement;
+  return node instanceof OwnElement || node instanceof HTMLElement;
+}
 
-var accentsMap = {
-    a: 'á|à|ã|â|À|Á|Ã|Â',
-    c: 'ç|Ç',
-    e: 'é|è|ê|É|È|Ê',
-    i: 'í|ì|î|Í|Ì|Î',
-    n: 'ñ|Ñ',
-    o: 'ó|ò|ô|ő|õ|Ó|Ò|Ô|Õ',
-    u: 'ú|ù|û|ü|Ú|Ù|Û|Ü',
-};
-var removeDiacritics = function (text) {
-    if (!text)
-        return '';
-    return Object.keys(accentsMap).reduce(function (acc, current) { return acc.replace(new RegExp(accentsMap[current], 'g'), current); }, text);
-};
-var calculateLevenshtein = function (query, name) {
-    if (query.length === 0)
-        return name.length;
-    if (name.length === 0)
-        return query.length;
-    var matrix = [];
-    var i;
-    for (i = 0; i <= name.length; i++) {
-        matrix[i] = [i];
-    }
-    var j;
-    for (j = 0; j <= query.length; j++) {
-        matrix[0][j] = j;
-    }
-    for (i = 1; i <= name.length; i++) {
-        for (j = 1; j <= query.length; j++) {
-            if (name.charAt(i - 1) === query.charAt(j - 1)) {
-                matrix[i][j] = matrix[i - 1][j - 1];
-            }
-            else {
-                matrix[i][j] = Math.min(matrix[i - 1][j - 1] + 1, // substitution
-                Math.min(matrix[i][j - 1] + 1, // insertion
-                matrix[i - 1][j] + 1)); // deletion
-            }
-        }
-    }
-    return matrix[name.length][query.length];
-};
-var searchLocalUsers = function (params) {
-    var ownUserId = params.ownUserId, query = params.query, text = params.text, useMentionsTransliteration = params.useMentionsTransliteration, users = params.users;
-    var matchingUsers = users.filter(function (user) {
-        if (user.id === ownUserId)
-            return false;
-        if (!query)
-            return true;
-        var updatedId = removeDiacritics(user.id).toLowerCase();
-        var updatedName = removeDiacritics(user.name).toLowerCase();
-        var updatedQuery = removeDiacritics(query).toLowerCase();
-        if (useMentionsTransliteration) {
-            (function () { return __awaiter$1(void 0, void 0, void 0, function () {
-                var transliterate;
-                return __generator$1(this, function (_a) {
-                    switch (_a.label) {
-                        case 0: return [4 /*yield*/, Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('@stream-io/transliterate')); })];
-                        case 1:
-                            transliterate = (_a.sent()).default;
-                            updatedName = transliterate(user.name || '').toLowerCase();
-                            updatedQuery = transliterate(query).toLowerCase();
-                            updatedId = transliterate(user.id).toLowerCase();
-                            return [2 /*return*/];
-                    }
-                });
-            }); })();
-        }
-        var maxDistance = 3;
-        var lastDigits = text.slice(-(maxDistance + 1)).includes('@');
-        if (updatedName) {
-            var levenshtein_1 = calculateLevenshtein(updatedQuery, updatedName);
-            if (updatedName.includes(updatedQuery) || (levenshtein_1 <= maxDistance && lastDigits)) {
-                return true;
-            }
-        }
-        var levenshtein = calculateLevenshtein(updatedQuery, updatedId);
-        return updatedId.includes(updatedQuery) || (levenshtein <= maxDistance && lastDigits);
+function isShadowRoot(node) {
+  // IE 11 has no ShadowRoot
+  if (typeof ShadowRoot === 'undefined') {
+    return false;
+  }
+
+  var OwnElement = getWindow(node).ShadowRoot;
+  return node instanceof OwnElement || node instanceof ShadowRoot;
+}
+
+// and applies them to the HTMLElements such as popper and arrow
+
+function applyStyles(_ref) {
+  var state = _ref.state;
+  Object.keys(state.elements).forEach(function (name) {
+    var style = state.styles[name] || {};
+    var attributes = state.attributes[name] || {};
+    var element = state.elements[name]; // arrow is optional + virtual elements
+
+    if (!isHTMLElement(element) || !getNodeName(element)) {
+      return;
+    } // Flow doesn't support to extend this property, but it's the most
+    // effective way to apply styles to an HTMLElement
+    // $FlowFixMe[cannot-write]
+
+
+    Object.assign(element.style, style);
+    Object.keys(attributes).forEach(function (name) {
+      var value = attributes[name];
+
+      if (value === false) {
+        element.removeAttribute(name);
+      } else {
+        element.setAttribute(name, value === true ? '' : value);
+      }
     });
-    return matchingUsers;
-};
-var checkUploadPermissions = function (params) { return __awaiter$1(void 0, void 0, void 0, function () {
-    var addNotification, file, getAppSettings, t, uploadType, appSettings, _a, allowed_file_extensions, allowed_mime_types, blocked_file_extensions, blocked_mime_types, sendErrorNotification, allowed, blocked, allowed, blocked;
-    var _b, _c;
-    return __generator$1(this, function (_d) {
-        switch (_d.label) {
-            case 0:
-                addNotification = params.addNotification, file = params.file, getAppSettings = params.getAppSettings, t = params.t, uploadType = params.uploadType;
-                appSettings = null;
-                return [4 /*yield*/, getAppSettings()];
-            case 1:
-                appSettings = _d.sent();
-                _a = (uploadType === 'image'
-                    ? (_b = appSettings === null || appSettings === void 0 ? void 0 : appSettings.app) === null || _b === void 0 ? void 0 : _b.image_upload_config
-                    : (_c = appSettings === null || appSettings === void 0 ? void 0 : appSettings.app) === null || _c === void 0 ? void 0 : _c.file_upload_config) || {}, allowed_file_extensions = _a.allowed_file_extensions, allowed_mime_types = _a.allowed_mime_types, blocked_file_extensions = _a.blocked_file_extensions, blocked_mime_types = _a.blocked_mime_types;
-                sendErrorNotification = function () {
-                    return addNotification(t("Upload type: \"{{ type }}\" is not allowed", { type: file.type || 'unknown type' }), 'error');
-                };
-                if (allowed_file_extensions === null || allowed_file_extensions === void 0 ? void 0 : allowed_file_extensions.length) {
-                    allowed = allowed_file_extensions.some(function (ext) {
-                        return file.name.toLowerCase().endsWith(ext.toLowerCase());
-                    });
-                    if (!allowed) {
-                        sendErrorNotification();
-                        return [2 /*return*/, false];
-                    }
-                }
-                if (blocked_file_extensions === null || blocked_file_extensions === void 0 ? void 0 : blocked_file_extensions.length) {
-                    blocked = blocked_file_extensions.some(function (ext) {
-                        return file.name.toLowerCase().endsWith(ext.toLowerCase());
-                    });
-                    if (blocked) {
-                        sendErrorNotification();
-                        return [2 /*return*/, false];
-                    }
-                }
-                if (allowed_mime_types === null || allowed_mime_types === void 0 ? void 0 : allowed_mime_types.length) {
-                    allowed = allowed_mime_types.some(function (type) { var _a; return type.toLowerCase() === ((_a = file.type) === null || _a === void 0 ? void 0 : _a.toLowerCase()); });
-                    if (!allowed) {
-                        sendErrorNotification();
-                        return [2 /*return*/, false];
-                    }
-                }
-                if (blocked_mime_types === null || blocked_mime_types === void 0 ? void 0 : blocked_mime_types.length) {
-                    blocked = blocked_mime_types.some(function (type) { var _a; return type.toLowerCase() === ((_a = file.type) === null || _a === void 0 ? void 0 : _a.toLowerCase()); });
-                    if (blocked) {
-                        sendErrorNotification();
-                        return [2 /*return*/, false];
-                    }
-                }
-                return [2 /*return*/, true];
-        }
+  });
+}
+
+function effect$2(_ref2) {
+  var state = _ref2.state;
+  var initialStyles = {
+    popper: {
+      position: state.options.strategy,
+      left: '0',
+      top: '0',
+      margin: '0'
+    },
+    arrow: {
+      position: 'absolute'
+    },
+    reference: {}
+  };
+  Object.assign(state.elements.popper.style, initialStyles.popper);
+  state.styles = initialStyles;
+
+  if (state.elements.arrow) {
+    Object.assign(state.elements.arrow.style, initialStyles.arrow);
+  }
+
+  return function () {
+    Object.keys(state.elements).forEach(function (name) {
+      var element = state.elements[name];
+      var attributes = state.attributes[name] || {};
+      var styleProperties = Object.keys(state.styles.hasOwnProperty(name) ? state.styles[name] : initialStyles[name]); // Set all values to an empty string to unset them
+
+      var style = styleProperties.reduce(function (style, property) {
+        style[property] = '';
+        return style;
+      }, {}); // arrow is optional + virtual elements
+
+      if (!isHTMLElement(element) || !getNodeName(element)) {
+        return;
+      }
+
+      Object.assign(element.style, style);
+      Object.keys(attributes).forEach(function (attribute) {
+        element.removeAttribute(attribute);
+      });
     });
-}); };
+  };
+} // eslint-disable-next-line import/no-unused-modules
 
-var useUserTrigger = function (params) {
-    var disableMentions = params.disableMentions, mentionAllAppUsers = params.mentionAllAppUsers, _a = params.mentionQueryParams, mentionQueryParams = _a === void 0 ? {} : _a, onSelectUser = params.onSelectUser, useMentionsTransliteration = params.useMentionsTransliteration;
-    var _b = React.useState(false), searching = _b[0], setSearching = _b[1];
-    var _c = useChatContext('useUserTrigger'), client = _c.client, mutes = _c.mutes, themeVersion = _c.themeVersion;
-    var channel = useChannelStateContext('useUserTrigger').channel;
-    var members = channel.state.members;
-    var watchers = channel.state.watchers;
-    var getMembersAndWatchers = React.useCallback(function () {
-        var memberUsers = members ? Object.values(members).map(function (_a) {
-            var user = _a.user;
-            return user;
-        }) : [];
-        var watcherUsers = watchers ? Object.values(watchers) : [];
-        var users = __spreadArray$1(__spreadArray$1([], memberUsers, true), watcherUsers, true);
-        // make sure we don't list users twice
-        var uniqueUsers = {};
-        users.forEach(function (user) {
-            if (user && !uniqueUsers[user.id]) {
-                uniqueUsers[user.id] = user;
-            }
-        });
-        return Object.values(uniqueUsers);
-    }, [members, watchers]);
-    var queryMembersThrottled = React.useCallback(throttle__default["default"](function (query, onReady) { return __awaiter$1(void 0, void 0, void 0, function () {
-        var response, users, error_1;
-        return __generator$1(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    _a.trys.push([0, 2, , 3]);
-                    return [4 /*yield*/, channel.queryMembers({
-                            name: { $autocomplete: query },
-                        })];
-                case 1:
-                    response = _a.sent();
-                    users = response.members.map(function (member) { return member.user; });
-                    if (onReady && users.length) {
-                        onReady(users);
-                    }
-                    else {
-                        onReady([]);
-                    }
-                    return [3 /*break*/, 3];
-                case 2:
-                    error_1 = _a.sent();
-                    console.log({ error: error_1 });
-                    return [3 /*break*/, 3];
-                case 3: return [2 /*return*/];
-            }
-        });
-    }); }, 200), [channel]);
-    var queryUsers = function (query, onReady) { return __awaiter$1(void 0, void 0, void 0, function () {
-        var users, error_2;
-        return __generator$1(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!query || searching)
-                        return [2 /*return*/];
-                    setSearching(true);
-                    _a.label = 1;
-                case 1:
-                    _a.trys.push([1, 3, , 4]);
-                    return [4 /*yield*/, client.queryUsers(__assign({ $or: [{ id: { $autocomplete: query } }, { name: { $autocomplete: query } }], id: { $ne: client.userID } }, mentionQueryParams.filters), __assign({ id: 1 }, mentionQueryParams.sort), __assign({ limit: 10 }, mentionQueryParams.options))];
-                case 2:
-                    users = (_a.sent()).users;
-                    if (onReady && users.length) {
-                        onReady(users);
-                    }
-                    else {
-                        onReady([]);
-                    }
-                    return [3 /*break*/, 4];
-                case 3:
-                    error_2 = _a.sent();
-                    console.log({ error: error_2 });
-                    return [3 /*break*/, 4];
-                case 4:
-                    setSearching(false);
-                    return [2 /*return*/];
-            }
-        });
-    }); };
-    var queryUsersThrottled = throttle__default["default"](queryUsers, 200);
-    return {
-        callback: function (item) { return onSelectUser(item); },
-        component: UserItem,
-        dataProvider: function (query, text, onReady) {
-            var _a, _b;
-            if (disableMentions)
-                return;
-            var filterMutes = function (data) {
-                if (text.includes('/unmute') && !mutes.length) {
-                    return [];
-                }
-                if (!mutes.length)
-                    return data;
-                if (text.includes('/unmute')) {
-                    return data.filter(function (suggestion) {
-                        return mutes.some(function (mute) { return mute.target.id === suggestion.id; });
-                    });
-                }
-                return data.filter(function (suggestion) { return mutes.every(function (mute) { return mute.target.id !== suggestion.id; }); });
-            };
-            if (mentionAllAppUsers) {
-                return queryUsersThrottled(query, function (data) {
-                    if (onReady)
-                        onReady(filterMutes(data), query);
-                });
-            }
-            /**
-             * By default, we return maximum 100 members via queryChannels api call.
-             * Thus it is safe to assume, that if number of members in channel.state is < 100,
-             * then all the members are already available on client side and we don't need to
-             * make any api call to queryMembers endpoint.
-             */
-            if (!query || Object.values(members || {}).length < 100) {
-                var users = getMembersAndWatchers();
-                var params_1 = {
-                    ownUserId: client.userID,
-                    query: query,
-                    text: text,
-                    useMentionsTransliteration: useMentionsTransliteration,
-                    users: users,
-                };
-                var matchingUsers = searchLocalUsers(params_1);
-                var usersToShow = (_b = (_a = mentionQueryParams.options) === null || _a === void 0 ? void 0 : _a.limit) !== null && _b !== void 0 ? _b : (themeVersion === '2' ? 7 : 10);
-                var data = matchingUsers.slice(0, usersToShow);
-                if (onReady)
-                    onReady(filterMutes(data), query);
-                return data;
-            }
-            return queryMembersThrottled(query, function (data) {
-                if (onReady)
-                    onReady(filterMutes(data), query);
-            });
-        },
-        output: function (entity) { return ({
-            caretPosition: 'next',
-            key: entity.id,
-            text: "@".concat(entity.name || entity.id),
-        }); },
-    };
-};
 
-var DefaultTriggerProvider = function (_a) {
-    var children = _a.children;
-    var currentValue = useMessageInputContext('DefaultTriggerProvider');
-    var defaultAutocompleteTriggers = {
-        '/': useCommandTrigger(),
-        ':': useEmojiTrigger(currentValue.emojiIndex),
-        '@': useUserTrigger({
-            disableMentions: currentValue.disableMentions,
-            mentionAllAppUsers: currentValue.mentionAllAppUsers,
-            mentionQueryParams: currentValue.mentionQueryParams,
-            onSelectUser: currentValue.onSelectUser,
-            useMentionsTransliteration: currentValue.useMentionsTransliteration,
-        }),
-    };
-    var newValue = __assign(__assign({}, currentValue), { autocompleteTriggers: defaultAutocompleteTriggers });
-    return React__default["default"].createElement(MessageInputContextProvider, { value: newValue }, children);
+var applyStyles$1 = {
+  name: 'applyStyles',
+  enabled: true,
+  phase: 'write',
+  fn: applyStyles,
+  effect: effect$2,
+  requires: ['computeStyles']
 };
 
-var filterEmoji = function (emoji) {
-    return !(emoji.name === 'White Smiling Face' || emoji.name === 'White Frowning Face');
-};
-var EmojiPicker = function (_a) {
-    var small = _a.small;
-    var _b = useEmojiContext('EmojiPicker'), emojiConfig = _b.emojiConfig, EmojiPickerComponent = _b.EmojiPicker;
-    var t = useTranslationContext('EmojiPicker').t;
-    var _c = useMessageInputContext('EmojiPicker'), emojiPickerIsOpen = _c.emojiPickerIsOpen, emojiPickerRef = _c.emojiPickerRef, onSelectEmoji = _c.onSelectEmoji;
-    var emojiData = (emojiConfig || {}).emojiData;
-    if (!emojiPickerIsOpen || !emojiData)
-        return null;
-    return (React__default["default"].createElement("div", { className: clsx('str-chat__emoji-picker-container', {
-            'str-chat__input--emojipicker': !small,
-            'str-chat__small-message-input-emojipicker': small,
-        }), ref: emojiPickerRef },
-        React__default["default"].createElement(React.Suspense, { fallback: null },
-            React__default["default"].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 }))));
-};
+function getBasePlacement(placement) {
+  return placement.split('-')[0];
+}
 
-var EmojiIconLarge = function () {
-    var t = useTranslationContext('EmojiIconLarge').t;
-    return (React__default["default"].createElement("svg", { height: '28', width: '28', xmlns: 'http://www.w3.org/2000/svg' },
-        React__default["default"].createElement("title", null, t('Open emoji picker')),
-        React__default["default"].createElement("g", { clipRule: 'evenodd', fillRule: 'evenodd' },
-            React__default["default"].createElement("path", { d: 'M14 4.4C8.6 4.4 4.4 8.6 4.4 14c0 5.4 4.2 9.6 9.6 9.6c5.4 0 9.6-4.2 9.6-9.6c0-5.4-4.2-9.6-9.6-9.6zM2 14c0-6.6 5.4-12 12-12s12 5.4 12 12s-5.4 12-12 12s-12-5.4-12-12zM12.8 11c0 1-.8 1.8-1.8 1.8s-1.8-.8-1.8-1.8s.8-1.8 1.8-1.8s1.8.8 1.8 1.8zM18.8 11c0 1-.8 1.8-1.8 1.8s-1.8-.8-1.8-1.8s.8-1.8 1.8-1.8s1.8.8 1.8 1.8zM8.6 15.4c.6-.4 1.2-.2 1.6.2c.6.8 1.6 1.8 3 2c1.2.4 2.8.2 4.8-2c.4-.4 1.2-.6 1.6 0c.4.4.6 1.2 0 1.6c-2.2 2.6-4.8 3.4-7 3c-2-.4-3.6-1.8-4.4-3c-.4-.6-.2-1.2.4-1.8z' }))));
-};
-var EmojiIconSmall = function () {
-    var t = useTranslationContext('EmojiIconSmall').t;
-    return (React__default["default"].createElement("svg", { height: '14', width: '14', xmlns: 'http://www.w3.org/2000/svg' },
-        React__default["default"].createElement("title", null, t('Open emoji picker')),
-        React__default["default"].createElement("g", { clipRule: 'evenodd', fillRule: 'evenodd' },
-            React__default["default"].createElement("path", { d: 'M6.7 1.42C3.73 1.42 1.42 3.73 1.42 6.7c0 2.97 2.31 5.28 5.28 5.28c2.97 0 5.28-2.31 5.28-5.28c0-2.97-2.31-5.28-5.28-5.28zM.1 6.7c0-3.63 2.97-6.6 6.6-6.6s6.6 2.97 6.6 6.6s-2.97 6.6-6.6 6.6s-6.6-2.97-6.6-6.6zM6.04 5.05c0 .55-.44.99-.99.99s-.99-.44-.99-.99s.44-.99.99-.99s.99.44.99.99zM9.34 5.05c0 .55-.44.99-.99.99s-.99-.44-.99-.99s.44-.99.99-.99s.99.44.99.99zM3.73 7.47c.33-.22.66-.11.88.11c.33.44.88.99 1.65 1.1c.66.22 1.54.11 2.64-1.1c.22-.22.66-.33.88 0c.22.22.33.66 0 .88c-1.21 1.43-2.64 1.87-3.85 1.65c-1.1-.22-1.98-.99-2.42-1.65c-.22-.33-.11-.66.22-.99z' }))));
-};
-// ThemingV2 icon
-var EmojiPickerIcon = function () { return (React__default["default"].createElement("svg", { preserveAspectRatio: 'xMinYMin', viewBox: '0 0 28 28', width: '100%', xmlns: 'http://www.w3.org/2000/svg' },
-    React__default["default"].createElement("g", { clipRule: 'evenodd', fillRule: 'evenodd' },
-        React__default["default"].createElement("path", { d: 'M14 4.4C8.6 4.4 4.4 8.6 4.4 14c0 5.4 4.2 9.6 9.6 9.6c5.4 0 9.6-4.2 9.6-9.6c0-5.4-4.2-9.6-9.6-9.6zM2 14c0-6.6 5.4-12 12-12s12 5.4 12 12s-5.4 12-12 12s-12-5.4-12-12zM12.8 11c0 1-.8 1.8-1.8 1.8s-1.8-.8-1.8-1.8s.8-1.8 1.8-1.8s1.8.8 1.8 1.8zM18.8 11c0 1-.8 1.8-1.8 1.8s-1.8-.8-1.8-1.8s.8-1.8 1.8-1.8s1.8.8 1.8 1.8zM8.6 15.4c.6-.4 1.2-.2 1.6.2c.6.8 1.6 1.8 3 2c1.2.4 2.8.2 4.8-2c.4-.4 1.2-.6 1.6 0c.4.4.6 1.2 0 1.6c-2.2 2.6-4.8 3.4-7 3c-2-.4-3.6-1.8-4.4-3c-.4-.6-.2-1.2.4-1.8z' })))); };
-var FileUploadIcon = function () {
-    var t = useTranslationContext('FileUploadIcon').t;
-    return (React__default["default"].createElement("svg", { height: '14', width: '14', xmlns: 'http://www.w3.org/2000/svg' },
-        React__default["default"].createElement("title", null, t('Attach files')),
-        React__default["default"].createElement("path", { d: 'M7 .5c3.59 0 6.5 2.91 6.5 6.5s-2.91 6.5-6.5 6.5S.5 10.59.5 7 3.41.5 7 .5zm0 12c3.031 0 5.5-2.469 5.5-5.5S10.031 1.5 7 1.5A5.506 5.506 0 0 0 1.5 7c0 3.034 2.469 5.5 5.5 5.5zM7.506 3v3.494H11v1.05H7.506V11h-1.05V7.544H3v-1.05h3.456V3h1.05z', fillRule: 'nonzero' })));
-};
-var FileUploadIconFlat = function () {
-    var t = useTranslationContext('FileUploadIconFlat').t;
-    return (React__default["default"].createElement("svg", { height: '14', width: '14', xmlns: 'http://www.w3.org/2000/svg' },
-        React__default["default"].createElement("title", null, t('Attach files')),
-        React__default["default"].createElement("path", { d: 'M1.667.333h10.666c.737 0 1.334.597 1.334 1.334v10.666c0 .737-.597 1.334-1.334 1.334H1.667a1.333 1.333 0 0 1-1.334-1.334V1.667C.333.93.93.333 1.667.333zm2 1.334a1.667 1.667 0 1 0 0 3.333 1.667 1.667 0 0 0 0-3.333zm-2 9.333v1.333h10.666v-4l-2-2-4 4-2-2L1.667 11z', fillRule: 'nonzero' })));
-};
-var LoadingIndicatorIcon = function (_a) {
-    var _b = _a.size, size = _b === void 0 ? 20 : _b;
-    var id = React.useId();
-    return (React__default["default"].createElement("div", { className: 'str-chat__loading-indicator' },
-        React__default["default"].createElement("svg", { "data-testid": 'loading-indicator', height: size, viewBox: '0 0 30 30', width: size, xmlns: 'http://www.w3.org/2000/svg' },
-            React__default["default"].createElement("defs", null,
-                React__default["default"].createElement("linearGradient", { id: "".concat(id, "-linear-gradient"), x1: '50%', x2: '50%', y1: '0%', y2: '100%' },
-                    React__default["default"].createElement("stop", { offset: '0%', stopColor: '#FFF', stopOpacity: '0' }),
-                    React__default["default"].createElement("stop", { "data-testid": 'stop-color', offset: '100%', stopOpacity: '1' }))),
-            React__default["default"].createElement("path", { d: 'M2.518 23.321l1.664-1.11A12.988 12.988 0 0 0 15 28c7.18 0 13-5.82 13-13S22.18 2 15 2V0c8.284 0 15 6.716 15 15 0 8.284-6.716 15-15 15-5.206 0-9.792-2.652-12.482-6.679z', fill: "url(#".concat(id, "-linear-gradient)"), fillRule: 'evenodd' }))));
-};
-// ThemingV2 icon
-var UploadIcon = function () { return (React__default["default"].createElement("svg", { "data-testid": 'attach', fill: 'none', height: '24', viewBox: '0 0 24 24', width: '24', xmlns: 'http://www.w3.org/2000/svg' },
-    React__default["default"].createElement("g", { clipPath: 'url(#clip0_10878_5)' },
-        React__default["default"].createElement("path", { d: 'M12.9997 6.99993L10.9997 6.99993L10.9997 10.9999L6.99972 10.9999L6.99972 12.9999L10.9997 12.9999L10.9997 16.9999L12.9997 16.9999L12.9997 12.9999L16.9997 12.9999L16.9997 10.9999L12.9997 10.9999L12.9997 6.99993ZM11.9997 1.99992C6.47972 1.99992 1.99972 6.47993 1.99972 11.9999C1.99972 17.5199 6.47972 21.9999 11.9997 21.9999C17.5197 21.9999 21.9997 17.5199 21.9997 11.9999C21.9997 6.47993 17.5197 1.99992 11.9997 1.99992ZM11.9997 19.9999C7.58972 19.9999 3.99972 16.4099 3.99972 11.9999C3.99972 7.58993 7.58972 3.99993 11.9997 3.99993C16.4097 3.99993 19.9997 7.58993 19.9997 11.9999C19.9997 16.4099 16.4097 19.9999 11.9997 19.9999Z', fill: 'black' })),
-    React__default["default"].createElement("defs", null,
-        React__default["default"].createElement("clipPath", { id: 'clip0_10878_5' },
-            React__default["default"].createElement("rect", { fill: 'white', height: '24', width: '24' }))))); };
-var CloseIcon$1 = function () { return (React__default["default"].createElement("svg", { "data-testid": 'close-no-outline', fill: 'none', height: '24', viewBox: '0 0 24 24', width: '24', xmlns: 'http://www.w3.org/2000/svg' },
-    React__default["default"].createElement("path", { d: 'M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z', fill: 'black' }))); };
-var RetryIcon = function () { return (React__default["default"].createElement("svg", { "data-testid": 'retry', fill: 'none', height: '24', viewBox: '0 0 24 24', width: '24', xmlns: 'http://www.w3.org/2000/svg' },
-    React__default["default"].createElement("path", { d: 'M17.6449 6.35C16.1949 4.9 14.2049 4 11.9949 4C7.57488 4 4.00488 7.58 4.00488 12C4.00488 16.42 7.57488 20 11.9949 20C15.7249 20 18.8349 17.45 19.7249 14H17.6449C16.8249 16.33 14.6049 18 11.9949 18C8.68488 18 5.99488 15.31 5.99488 12C5.99488 8.69 8.68488 6 11.9949 6C13.6549 6 15.1349 6.69 16.2149 7.78L12.9949 11H19.9949V4L17.6449 6.35Z', fill: 'black' }))); };
-var DownloadIcon = function () { return (React__default["default"].createElement("svg", { "data-testid": 'download', fill: 'none', height: '24', viewBox: '0 0 24 24', width: '24', xmlns: 'http://www.w3.org/2000/svg' },
-    React__default["default"].createElement("path", { d: 'M19.35 10.04C18.67 6.59 15.64 4 12 4C9.11 4 6.6 5.64 5.35 8.04C2.34 8.36 0 10.91 0 14C0 17.31 2.69 20 6 20H19C21.76 20 24 17.76 24 15C24 12.36 21.95 10.22 19.35 10.04ZM19 18H6C3.79 18 2 16.21 2 14C2 11.95 3.53 10.24 5.56 10.03L6.63 9.92L7.13 8.97C8.08 7.14 9.94 6 12 6C14.62 6 16.88 7.86 17.39 10.43L17.69 11.93L19.22 12.04C20.78 12.14 22 13.45 22 15C22 16.65 20.65 18 19 18ZM13.45 10H10.55V13H8L12 17L16 13H13.45V10Z', fill: 'black' }))); };
-var SendIconV1 = function () {
-    var t = useTranslationContext('SendButton').t;
-    return (React__default["default"].createElement("svg", { height: '17', viewBox: '0 0 18 17', width: '18', xmlns: 'http://www.w3.org/2000/svg' },
-        React__default["default"].createElement("title", null, t('Send')),
-        React__default["default"].createElement("path", { d: 'M0 17.015l17.333-8.508L0 0v6.617l12.417 1.89L0 10.397z', fill: '#006cff', fillRule: 'evenodd' })));
-};
-var SendIconV2 = function () {
-    var t = useTranslationContext('SendButton').t;
-    return (React__default["default"].createElement("svg", { "data-testid": 'send', fill: 'none', height: '24', viewBox: '0 0 24 24', width: '24', xmlns: 'http://www.w3.org/2000/svg' },
-        React__default["default"].createElement("title", null, t('Send')),
-        React__default["default"].createElement("path", { d: 'M4.00952 22L24 12L4.00952 2L4 9.77778L18.2857 12L4 14.2222L4.00952 22Z', fill: 'black' })));
-};
-var SendButton = function (_a) {
-    var sendMessage = _a.sendMessage, rest = __rest(_a, ["sendMessage"]);
-    var themeVersion = useChatContext('SendButton').themeVersion;
-    return (React__default["default"].createElement("button", __assign({ "aria-label": 'Send', className: 'str-chat__send-button', "data-testid": 'send-button', onClick: sendMessage, type: 'button' }, rest), themeVersion === '2' ? React__default["default"].createElement(SendIconV2, null) : React__default["default"].createElement(SendIconV1, null)));
-};
-
-/**
- * @deprecated This component has been deprecated in favor of `AttachmentPreviewList` as this component
- * utilises outdated components from the package [`react-file-utils`](https://github.com/GetStream/react-file-utils)
- * which will no longer receive updates for aforementioned components.
- *
- * **Will be removed with the complete transition to the theming V2.**
- */
-var UploadsPreview = function () {
-    var themeVersion = useChatContext('UploadsPreview').themeVersion;
-    var _a = useChannelStateContext('UploadsPreview'), _b = _a.maxNumberOfFiles, maxNumberOfFiles = _b === void 0 ? 0 : _b, multipleUploads = _a.multipleUploads;
-    var _c = useMessageInputContext('UploadsPreview'), fileOrder = _c.fileOrder, fileUploads = _c.fileUploads, imageOrder = _c.imageOrder, imageUploads = _c.imageUploads, _d = _c.numberOfUploads, numberOfUploads = _d === void 0 ? 0 : _d, removeFile = _c.removeFile, removeImage = _c.removeImage, uploadFile = _c.uploadFile, uploadImage = _c.uploadImage, uploadNewFiles = _c.uploadNewFiles;
-    var imagesToPreview = imageOrder
-        .map(function (id) { return imageUploads[id]; })
-        // filter OG scraped images
-        .filter(function (image) { return !image.og_scrape_url; });
-    var filesToPreview = fileOrder.map(function (id) { return fileUploads[id]; });
-    return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        imageOrder.length > 0 && (React__default["default"].createElement(reactFileUtils.ImagePreviewer, { disabled: !multipleUploads || numberOfUploads >= maxNumberOfFiles, handleFiles: uploadNewFiles, handleRemove: removeImage, handleRetry: uploadImage, imageUploads: imagesToPreview, multiple: multipleUploads })),
-        fileOrder.length > 0 && (React__default["default"].createElement(reactFileUtils.FilePreviewer, { fileIconProps: {
-                className: 'str-chat__file-icon',
-                version: themeVersion,
-            }, handleFiles: uploadNewFiles, handleRemove: removeFile, handleRetry: uploadFile, uploads: filesToPreview }))));
-};
-
-var UnMemoizedChatAutoComplete = function (props) {
-    var _a = useComponentContext('ChatAutoComplete'), SuggestionItem = _a.AutocompleteSuggestionItem, SuggestionList = _a.AutocompleteSuggestionList;
-    var t = useTranslationContext('ChatAutoComplete').t;
-    var messageInput = useMessageInputContext('ChatAutoComplete');
-    var cooldownRemaining = messageInput.cooldownRemaining, disabled = messageInput.disabled, emojiIndex = messageInput.emojiIndex, innerRef = messageInput.textareaRef;
-    var placeholder = props.placeholder || t('Type your message');
-    var emojiReplace = props.wordReplace
-        ? function (word) { var _a; return (_a = props.wordReplace) === null || _a === void 0 ? void 0 : _a.call(props, word, emojiIndex); }
-        : function (word) {
-            var found = (emojiIndex === null || emojiIndex === void 0 ? void 0 : emojiIndex.search(word)) || [];
-            var emoji = found
-                .filter(Boolean)
-                .slice(0, 10)
-                .find(function (_a) {
-                var emoticons = _a.emoticons;
-                return !!(emoticons === null || emoticons === void 0 ? void 0 : emoticons.includes(word));
-            });
-            if (!emoji || !('native' in emoji))
-                return null;
-            return emoji.native;
-        };
-    var updateInnerRef = React.useCallback(function (ref) {
-        if (innerRef) {
-            innerRef.current = ref;
-        }
-    }, [innerRef]);
-    return (React__default["default"].createElement(ReactTextareaAutocomplete, { additionalTextareaProps: messageInput.additionalTextareaProps, "aria-label": cooldownRemaining ? t('Slow Mode ON') : placeholder, className: 'str-chat__textarea__textarea str-chat__message-textarea', closeCommandsList: messageInput.closeCommandsList, closeMentionsList: messageInput.closeMentionsList, containerClassName: 'str-chat__textarea str-chat__message-textarea-react-host', disabled: disabled || !!cooldownRemaining, disableMentions: messageInput.disableMentions, dropdownClassName: 'str-chat__emojisearch', grow: messageInput.grow, handleSubmit: props.handleSubmit || messageInput.handleSubmit, innerRef: updateInnerRef, itemClassName: 'str-chat__emojisearch__item', listClassName: 'str-chat__emojisearch__list', loadingComponent: LoadingIndicator, maxRows: messageInput.maxRows, minChar: 0, onBlur: props.onBlur, onChange: props.onChange || messageInput.handleChange, onFocus: props.onFocus, onPaste: props.onPaste || messageInput.onPaste, placeholder: cooldownRemaining ? t('Slow Mode ON') : placeholder, replaceWord: emojiReplace, rows: props.rows || 1, shouldSubmit: messageInput.shouldSubmit, showCommandsList: messageInput.showCommandsList, showMentionsList: messageInput.showMentionsList, SuggestionItem: SuggestionItem, SuggestionList: SuggestionList, trigger: messageInput.autocompleteTriggers || {}, value: props.value || messageInput.text }));
-};
-var ChatAutoComplete = React__default["default"].memo(UnMemoizedChatAutoComplete);
-
-/**
- * Simple ponyfill for Object.fromEntries
- */
-
-var fromEntries = function fromEntries(entries) {
-  return entries.reduce(function (acc, _ref) {
-    var key = _ref[0],
-        value = _ref[1];
-    acc[key] = value;
-    return acc;
-  }, {});
-};
-/**
- * Small wrapper around `useLayoutEffect` to get rid of the warning on SSR envs
- */
-
-var useIsomorphicLayoutEffect = typeof window !== 'undefined' && window.document && window.document.createElement ? React__namespace.useLayoutEffect : React__namespace.useEffect;
-
-var top = 'top';
-var bottom = 'bottom';
-var right = 'right';
-var left = 'left';
-var auto = 'auto';
-var basePlacements = [top, bottom, right, left];
-var start = 'start';
-var end = 'end';
-var clippingParents = 'clippingParents';
-var viewport = 'viewport';
-var popper = 'popper';
-var reference = 'reference';
-var variationPlacements = /*#__PURE__*/basePlacements.reduce(function (acc, placement) {
-  return acc.concat([placement + "-" + start, placement + "-" + end]);
-}, []);
-var placements = /*#__PURE__*/[].concat(basePlacements, [auto]).reduce(function (acc, placement) {
-  return acc.concat([placement, placement + "-" + start, placement + "-" + end]);
-}, []); // modifiers that need to read the DOM
-
-var beforeRead = 'beforeRead';
-var read = 'read';
-var afterRead = 'afterRead'; // pure-logic modifiers
-
-var beforeMain = 'beforeMain';
-var main = 'main';
-var afterMain = 'afterMain'; // modifier with the purpose to write to the DOM (or write into a framework state)
-
-var beforeWrite = 'beforeWrite';
-var write = 'write';
-var afterWrite = 'afterWrite';
-var modifierPhases = [beforeRead, read, afterRead, beforeMain, main, afterMain, beforeWrite, write, afterWrite];
-
-function getNodeName(element) {
-  return element ? (element.nodeName || '').toLowerCase() : null;
-}
-
-function getWindow(node) {
-  if (node == null) {
-    return window;
-  }
-
-  if (node.toString() !== '[object Window]') {
-    var ownerDocument = node.ownerDocument;
-    return ownerDocument ? ownerDocument.defaultView || window : window;
-  }
-
-  return node;
-}
-
-function isElement(node) {
-  var OwnElement = getWindow(node).Element;
-  return node instanceof OwnElement || node instanceof Element;
-}
-
-function isHTMLElement(node) {
-  var OwnElement = getWindow(node).HTMLElement;
-  return node instanceof OwnElement || node instanceof HTMLElement;
-}
-
-function isShadowRoot(node) {
-  // IE 11 has no ShadowRoot
-  if (typeof ShadowRoot === 'undefined') {
-    return false;
-  }
-
-  var OwnElement = getWindow(node).ShadowRoot;
-  return node instanceof OwnElement || node instanceof ShadowRoot;
-}
-
-// and applies them to the HTMLElements such as popper and arrow
-
-function applyStyles(_ref) {
-  var state = _ref.state;
-  Object.keys(state.elements).forEach(function (name) {
-    var style = state.styles[name] || {};
-    var attributes = state.attributes[name] || {};
-    var element = state.elements[name]; // arrow is optional + virtual elements
-
-    if (!isHTMLElement(element) || !getNodeName(element)) {
-      return;
-    } // Flow doesn't support to extend this property, but it's the most
-    // effective way to apply styles to an HTMLElement
-    // $FlowFixMe[cannot-write]
-
-
-    Object.assign(element.style, style);
-    Object.keys(attributes).forEach(function (name) {
-      var value = attributes[name];
-
-      if (value === false) {
-        element.removeAttribute(name);
-      } else {
-        element.setAttribute(name, value === true ? '' : value);
-      }
-    });
-  });
-}
-
-function effect$2(_ref2) {
-  var state = _ref2.state;
-  var initialStyles = {
-    popper: {
-      position: state.options.strategy,
-      left: '0',
-      top: '0',
-      margin: '0'
-    },
-    arrow: {
-      position: 'absolute'
-    },
-    reference: {}
-  };
-  Object.assign(state.elements.popper.style, initialStyles.popper);
-  state.styles = initialStyles;
-
-  if (state.elements.arrow) {
-    Object.assign(state.elements.arrow.style, initialStyles.arrow);
-  }
-
-  return function () {
-    Object.keys(state.elements).forEach(function (name) {
-      var element = state.elements[name];
-      var attributes = state.attributes[name] || {};
-      var styleProperties = Object.keys(state.styles.hasOwnProperty(name) ? state.styles[name] : initialStyles[name]); // Set all values to an empty string to unset them
-
-      var style = styleProperties.reduce(function (style, property) {
-        style[property] = '';
-        return style;
-      }, {}); // arrow is optional + virtual elements
-
-      if (!isHTMLElement(element) || !getNodeName(element)) {
-        return;
-      }
-
-      Object.assign(element.style, style);
-      Object.keys(attributes).forEach(function (attribute) {
-        element.removeAttribute(attribute);
-      });
-    });
-  };
-} // eslint-disable-next-line import/no-unused-modules
-
-
-var applyStyles$1 = {
-  name: 'applyStyles',
-  enabled: true,
-  phase: 'write',
-  fn: applyStyles,
-  effect: effect$2,
-  requires: ['computeStyles']
-};
-
-function getBasePlacement(placement) {
-  return placement.split('-')[0];
-}
-
-var max = Math.max;
-var min = Math.min;
-var round = Math.round;
+var max = Math.max;
+var min = Math.min;
+var round = Math.round;
 
 function getBoundingClientRect(element, includeScale) {
   if (includeScale === void 0) {
@@ -7253,97 +6544,822 @@ var usePopper = function usePopper(referenceElement, popperElement, options) {
     options = {};
   }
 
-  var prevOptions = React__namespace.useRef(null);
-  var optionsWithDefaults = {
-    onFirstUpdate: options.onFirstUpdate,
-    placement: options.placement || 'bottom',
-    strategy: options.strategy || 'absolute',
-    modifiers: options.modifiers || EMPTY_MODIFIERS
-  };
+  var prevOptions = React__namespace.useRef(null);
+  var optionsWithDefaults = {
+    onFirstUpdate: options.onFirstUpdate,
+    placement: options.placement || 'bottom',
+    strategy: options.strategy || 'absolute',
+    modifiers: options.modifiers || EMPTY_MODIFIERS
+  };
+
+  var _React$useState = React__namespace.useState({
+    styles: {
+      popper: {
+        position: optionsWithDefaults.strategy,
+        left: '0',
+        top: '0'
+      },
+      arrow: {
+        position: 'absolute'
+      }
+    },
+    attributes: {}
+  }),
+      state = _React$useState[0],
+      setState = _React$useState[1];
+
+  var updateStateModifier = React__namespace.useMemo(function () {
+    return {
+      name: 'updateState',
+      enabled: true,
+      phase: 'write',
+      fn: function fn(_ref) {
+        var state = _ref.state;
+        var elements = Object.keys(state.elements);
+        ReactDOM__namespace.flushSync(function () {
+          setState({
+            styles: fromEntries(elements.map(function (element) {
+              return [element, state.styles[element] || {}];
+            })),
+            attributes: fromEntries(elements.map(function (element) {
+              return [element, state.attributes[element]];
+            }))
+          });
+        });
+      },
+      requires: ['computeStyles']
+    };
+  }, []);
+  var popperOptions = React__namespace.useMemo(function () {
+    var newOptions = {
+      onFirstUpdate: optionsWithDefaults.onFirstUpdate,
+      placement: optionsWithDefaults.placement,
+      strategy: optionsWithDefaults.strategy,
+      modifiers: [].concat(optionsWithDefaults.modifiers, [updateStateModifier, {
+        name: 'applyStyles',
+        enabled: false
+      }])
+    };
+
+    if (deepequal__default["default"](prevOptions.current, newOptions)) {
+      return prevOptions.current || newOptions;
+    } else {
+      prevOptions.current = newOptions;
+      return newOptions;
+    }
+  }, [optionsWithDefaults.onFirstUpdate, optionsWithDefaults.placement, optionsWithDefaults.strategy, optionsWithDefaults.modifiers, updateStateModifier]);
+  var popperInstanceRef = React__namespace.useRef();
+  useIsomorphicLayoutEffect(function () {
+    if (popperInstanceRef.current) {
+      popperInstanceRef.current.setOptions(popperOptions);
+    }
+  }, [popperOptions]);
+  useIsomorphicLayoutEffect(function () {
+    if (referenceElement == null || popperElement == null) {
+      return;
+    }
+
+    var createPopper$1 = options.createPopper || createPopper;
+    var popperInstance = createPopper$1(referenceElement, popperElement, popperOptions);
+    popperInstanceRef.current = popperInstance;
+    return function () {
+      popperInstance.destroy();
+      popperInstanceRef.current = null;
+    };
+  }, [referenceElement, popperElement, options.createPopper]);
+  return {
+    state: popperInstanceRef.current ? popperInstanceRef.current.state : null,
+    styles: state.styles,
+    attributes: state.attributes,
+    update: popperInstanceRef.current ? popperInstanceRef.current.update : null,
+    forceUpdate: popperInstanceRef.current ? popperInstanceRef.current.forceUpdate : null
+  };
+};
+
+var Tooltip = function (_a) {
+    var children = _a.children, rest = __rest(_a, ["children"]);
+    return (React__default["default"].createElement("div", __assign({ className: 'str-chat__tooltip' }, rest), children));
+};
+var PopperTooltip = function (_a) {
+    var children = _a.children, _b = _a.offset, offset = _b === void 0 ? [0, 10] : _b, referenceElement = _a.referenceElement, _c = _a.placement, placement = _c === void 0 ? 'top' : _c, _d = _a.visible, visible = _d === void 0 ? false : _d;
+    var _e = React.useState(null), popperElement = _e[0], setPopperElement = _e[1];
+    var _f = usePopper(referenceElement, popperElement, {
+        modifiers: [
+            {
+                name: 'offset',
+                options: {
+                    offset: offset,
+                },
+            },
+        ],
+        placement: placement,
+    }), attributes = _f.attributes, styles = _f.styles;
+    if (!visible)
+        return null;
+    return (React__default["default"].createElement("div", __assign({ className: 'str-chat__tooltip', ref: setPopperElement, style: styles.popper }, attributes.popper), children));
+};
+
+var useEnterLeaveHandlers = function (_a) {
+    var _b = _a === void 0 ? {} : _a, onMouseEnter = _b.onMouseEnter, onMouseLeave = _b.onMouseLeave;
+    var _c = React.useState(false), tooltipVisible = _c[0], setTooltipVisible = _c[1];
+    var handleEnter = React.useCallback(function (e) {
+        setTooltipVisible(true);
+        onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
+    }, [onMouseEnter]);
+    var handleLeave = React.useCallback(function (e) {
+        setTooltipVisible(false);
+        onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
+    }, [onMouseLeave]);
+    return { handleEnter: handleEnter, handleLeave: handleLeave, tooltipVisible: tooltipVisible };
+};
+
+var UnMemoizedMessageStatus = function (props) {
+    var _a;
+    var propAvatar = props.Avatar, _b = props.messageType, messageType = _b === void 0 ? 'simple' : _b, _c = props.tooltipUserNameMapper, tooltipUserNameMapper = _c === void 0 ? mapToUserNameOrId : _c;
+    var _d = useEnterLeaveHandlers(), handleEnter = _d.handleEnter, handleLeave = _d.handleLeave, tooltipVisible = _d.tooltipVisible;
+    var client = useChatContext('MessageStatus').client;
+    var contextAvatar = useComponentContext('MessageStatus').Avatar;
+    var _e = useMessageContext('MessageStatus'), isMyMessage = _e.isMyMessage, lastReceivedId = _e.lastReceivedId, message = _e.message, readBy = _e.readBy, threadList = _e.threadList;
+    var t = useTranslationContext('MessageStatus').t;
+    var themeVersion = useChatContext('MessageStatus').themeVersion;
+    var _f = React.useState(null), referenceElement = _f[0], setReferenceElement = _f[1];
+    var Avatar$1 = propAvatar || contextAvatar || Avatar;
+    if (!isMyMessage() || message.type === 'error')
+        return null;
+    var justReadByMe = (readBy === null || readBy === void 0 ? void 0 : readBy.length) === 1 && readBy[0].id === ((_a = client.user) === null || _a === void 0 ? void 0 : _a.id);
+    var rootClassName = "str-chat__message-".concat(messageType, "-status str-chat__message-status");
+    var sending = message.status === 'sending';
+    var delivered = message.status === 'received' && message.id === lastReceivedId && !threadList;
+    var deliveredAndRead = !!((readBy === null || readBy === void 0 ? void 0 : readBy.length) && !threadList && !justReadByMe);
+    var lastReadUser = (deliveredAndRead
+        ? readBy.filter(function (item) { var _a; return item.id !== ((_a = client.user) === null || _a === void 0 ? void 0 : _a.id); })
+        : [])[0];
+    return (React__default["default"].createElement("span", { className: rootClassName, "data-testid": clsx({
+            'message-status-read-by': deliveredAndRead,
+            'message-status-received': delivered && !deliveredAndRead,
+            'message-status-sending': sending,
+        }), onMouseEnter: handleEnter, onMouseLeave: handleLeave, ref: setReferenceElement },
+        sending && (React__default["default"].createElement(React__default["default"].Fragment, null,
+            themeVersion === '1' && React__default["default"].createElement(Tooltip, null, t('Sending...')),
+            themeVersion === '2' && (React__default["default"].createElement(PopperTooltip, { offset: [0, 5], referenceElement: referenceElement, visible: tooltipVisible }, t('Sending...'))),
+            React__default["default"].createElement(LoadingIndicator, null))),
+        delivered && !deliveredAndRead && (React__default["default"].createElement(React__default["default"].Fragment, null,
+            themeVersion === '1' && React__default["default"].createElement(Tooltip, null, t('Delivered')),
+            themeVersion === '2' && (React__default["default"].createElement(PopperTooltip, { offset: [0, 5], referenceElement: referenceElement, visible: tooltipVisible }, t('Delivered'))),
+            themeVersion === '2' ? React__default["default"].createElement(MessageDeliveredIcon, null) : React__default["default"].createElement(DeliveredCheckIcon, null))),
+        deliveredAndRead && (React__default["default"].createElement(React__default["default"].Fragment, null,
+            themeVersion === '1' && (React__default["default"].createElement(Tooltip, null, getReadByTooltipText(readBy, t, client, tooltipUserNameMapper))),
+            themeVersion === '2' && (React__default["default"].createElement(PopperTooltip, { offset: [0, 5], referenceElement: referenceElement, visible: tooltipVisible }, getReadByTooltipText(readBy, t, client, tooltipUserNameMapper))),
+            React__default["default"].createElement(Avatar$1, { image: lastReadUser.image, name: lastReadUser.name || lastReadUser.id, size: 15, user: lastReadUser }),
+            readBy.length > 2 && (React__default["default"].createElement("span", { className: "str-chat__message-".concat(messageType, "-status-number"), "data-testid": 'message-status-read-by-many' }, readBy.length - 1))))));
+};
+var MessageStatus = React__default["default"].memo(UnMemoizedMessageStatus);
+
+var QuotedMessage = function () {
+    var _a, _b;
+    var _c = useComponentContext('QuotedMessage'), Attachment = _c.Attachment, ContextAvatar = _c.Avatar;
+    var _d = useMessageContext('QuotedMessage'), isMyMessage = _d.isMyMessage, message = _d.message;
+    var userLanguage = useTranslationContext('QuotedMessage').userLanguage;
+    var jumpToMessage = useChannelActionContext('QuotedMessage').jumpToMessage;
+    var Avatar$1 = ContextAvatar || Avatar;
+    var quoted_message = message.quoted_message;
+    if (!quoted_message)
+        return null;
+    var quotedMessageText = ((_a = quoted_message.i18n) === null || _a === void 0 ? void 0 : _a["".concat(userLanguage, "_text")]) ||
+        quoted_message.text;
+    // @ts-expect-error
+    var quotedMessageAttachment = quoted_message.attachments.length
+        ? // @ts-expect-error
+            quoted_message.attachments[0]
+        : null;
+    if (!quotedMessageText && !quotedMessageAttachment)
+        return null;
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement("div", { className: clsx('str-chat__quoted-message-preview quoted-message', { mine: isMyMessage() }), onClickCapture: function (e) {
+                e.stopPropagation();
+                e.preventDefault();
+                jumpToMessage(quoted_message.id);
+            } },
+            quoted_message.user && (React__default["default"].createElement(Avatar$1, { image: quoted_message.user.image, name: quoted_message.user.name || quoted_message.user.id, size: 20, user: quoted_message.user })),
+            React__default["default"].createElement("div", { className: 'quoted-message-inner str-chat__quoted-message-bubble' },
+                quotedMessageAttachment && React__default["default"].createElement(Attachment, { attachments: [quotedMessageAttachment] }),
+                React__default["default"].createElement("div", null, quotedMessageText))),
+        ((_b = message.attachments) === null || _b === void 0 ? void 0 : _b.length) && message.quoted_message ? (React__default["default"].createElement(Attachment, { attachments: message.attachments })) : null));
+};
+
+var UnMemoizedMessageTextComponent = function (props) {
+    var _a;
+    var customInnerClass = props.customInnerClass, _b = props.customWrapperClass, customWrapperClass = _b === void 0 ? '' : _b, propMessage = props.message, _c = props.theme, theme = _c === void 0 ? 'simple' : _c;
+    var _d = useComponentContext('MessageText').QuotedMessage, QuotedMessage$1 = _d === void 0 ? QuotedMessage : _d;
+    var _e = useMessageContext('MessageText'), contextMessage = _e.message, onMentionsClickMessage = _e.onMentionsClickMessage, onMentionsHoverMessage = _e.onMentionsHoverMessage, _f = _e.renderText, renderText$1 = _f === void 0 ? renderText : _f, unsafeHTML = _e.unsafeHTML;
+    var _g = useTranslationContext('MessageText'), t = _g.t, userLanguage = _g.userLanguage;
+    var message = propMessage || contextMessage;
+    var hasAttachment = messageHasAttachments(message);
+    var messageTextToRender = ((_a = message.i18n) === null || _a === void 0 ? void 0 : _a["".concat(userLanguage, "_text")]) || message.text;
+    var messageText = React.useMemo(function () { return renderText$1(messageTextToRender, message.mentioned_users); }, [
+        message.mentioned_users,
+        messageTextToRender,
+    ]);
+    var wrapperClass = customWrapperClass || 'str-chat__message-text';
+    var innerClass = customInnerClass || "str-chat__message-text-inner str-chat__message-".concat(theme, "-text-inner");
+    if (!messageTextToRender && !message.quoted_message)
+        return null;
+    return (React__default["default"].createElement("div", { className: wrapperClass, tabIndex: 0 },
+        React__default["default"].createElement("div", { className: "\n          ".concat(innerClass, "\n          ").concat(hasAttachment ? " str-chat__message-".concat(theme, "-text-inner--has-attachment") : '', "\n          ").concat(isOnlyEmojis(message.text) && !message.quoted_message
+                ? " str-chat__message-".concat(theme, "-text-inner--is-emoji")
+                : '', "\n        ").trim(), "data-testid": 'message-text-inner-wrapper', onClick: onMentionsClickMessage, onMouseOver: onMentionsHoverMessage },
+            message.quoted_message && React__default["default"].createElement(QuotedMessage$1, null),
+            message.type === 'error' && (React__default["default"].createElement("div", { className: "str-chat__".concat(theme, "-message--error-message str-chat__message--error-message") }, t('Error · Unsent'))),
+            message.status === 'failed' && (React__default["default"].createElement("div", { className: "str-chat__".concat(theme, "-message--error-message str-chat__message--error-message") }, message.errorStatusCode !== 403
+                ? t('Message Failed · Click to try again')
+                : t('Message Failed · Unauthorized'))),
+            unsafeHTML && message.html ? (React__default["default"].createElement("div", { dangerouslySetInnerHTML: { __html: message.html } })) : (React__default["default"].createElement("div", null, messageText)))));
+};
+var MessageText = React__default["default"].memo(UnMemoizedMessageTextComponent);
+
+var notValidDateWarning = 'MessageTimestamp was called without a message, or message has invalid created_at date.';
+var noParsingFunctionWarning = 'MessageTimestamp was called but there is no datetime parsing function available';
+function getDateString(_a) {
+    var calendar = _a.calendar, format = _a.format, formatDate = _a.formatDate, messageCreatedAt = _a.messageCreatedAt, tDateTimeParser = _a.tDateTimeParser;
+    if (!messageCreatedAt ||
+        (typeof messageCreatedAt === 'string' && !Date.parse(messageCreatedAt))) {
+        console.warn(notValidDateWarning);
+        return null;
+    }
+    if (typeof formatDate === 'function') {
+        return formatDate(new Date(messageCreatedAt));
+    }
+    if (!tDateTimeParser) {
+        console.warn(noParsingFunctionWarning);
+        return null;
+    }
+    var parsedTime = tDateTimeParser(messageCreatedAt);
+    if (isDayOrMoment(parsedTime)) {
+        /**
+         * parsedTime.calendar is guaranteed on the type but is only
+         * available when a user calls dayjs.extend(calendar)
+         */
+        return calendar && parsedTime.calendar ? parsedTime.calendar() : parsedTime.format(format);
+    }
+    if (isDate(parsedTime)) {
+        return parsedTime.toDateString();
+    }
+    if (isNumberOrString(parsedTime)) {
+        return parsedTime;
+    }
+    return null;
+}
+
+var defaultTimestampFormat = 'h:mmA';
+var UnMemoizedMessageTimestamp = function (props) {
+    var _a = props.calendar, calendar = _a === void 0 ? false : _a, _b = props.customClass, customClass = _b === void 0 ? '' : _b, _c = props.format, format = _c === void 0 ? defaultTimestampFormat : _c, propMessage = props.message;
+    var _d = useMessageContext('MessageTimestamp'), formatDate = _d.formatDate, contextMessage = _d.message;
+    var tDateTimeParser = useTranslationContext('MessageTimestamp').tDateTimeParser;
+    var message = propMessage || contextMessage;
+    var messageCreatedAt = message.created_at && isDate(message.created_at)
+        ? message.created_at.toISOString()
+        : message.created_at;
+    var when = React.useMemo(function () { return getDateString({ calendar: calendar, format: format, formatDate: formatDate, messageCreatedAt: messageCreatedAt, tDateTimeParser: tDateTimeParser }); }, [formatDate, calendar, tDateTimeParser, format, messageCreatedAt]);
+    if (!when)
+        return null;
+    return (React__default["default"].createElement("time", { className: customClass, dateTime: messageCreatedAt, title: messageCreatedAt }, when));
+};
+var MessageTimestamp = React__default["default"].memo(UnMemoizedMessageTimestamp);
+
+var CUSTOM_MESSAGE_TYPE = {
+    date: 'message.date',
+    intro: 'channel.intro',
+};
+
+var useCommandTrigger = function () {
+    var themeVersion = useChatContext('useCommandTrigger').themeVersion;
+    var channelConfig = useChannelStateContext('useCommandTrigger').channelConfig;
+    var commands = channelConfig === null || channelConfig === void 0 ? void 0 : channelConfig.commands;
+    return {
+        component: CommandItem,
+        dataProvider: function (query, text, onReady) {
+            if (text.indexOf('/') !== 0 || !commands) {
+                return [];
+            }
+            var selectedCommands = commands.filter(function (command) { var _a; return ((_a = command.name) === null || _a === void 0 ? void 0 : _a.indexOf(query)) !== -1; });
+            // sort alphabetically unless the you're matching the first char
+            selectedCommands.sort(function (a, b) {
+                var _a, _b;
+                var nameA = (_a = a.name) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+                var nameB = (_b = b.name) === null || _b === void 0 ? void 0 : _b.toLowerCase();
+                if ((nameA === null || nameA === void 0 ? void 0 : nameA.indexOf(query)) === 0) {
+                    nameA = "0".concat(nameA);
+                }
+                if ((nameB === null || nameB === void 0 ? void 0 : nameB.indexOf(query)) === 0) {
+                    nameB = "0".concat(nameB);
+                }
+                // Should confirm possible null / undefined when TS is fully implemented
+                if (nameA != null && nameB != null) {
+                    if (nameA < nameB) {
+                        return -1;
+                    }
+                    if (nameA > nameB) {
+                        return 1;
+                    }
+                }
+                return 0;
+            });
+            var result = selectedCommands.slice(0, themeVersion === '2' ? 5 : 10);
+            if (onReady)
+                onReady(result.filter(function (result) {
+                    return result.name !== undefined;
+                }), query);
+            return result;
+        },
+        output: function (entity) { return ({
+            caretPosition: 'next',
+            key: entity.name,
+            text: "/".concat(entity.name),
+        }); },
+    };
+};
+
+var UnMemoizedEmoticonItem = function (props) {
+    var entity = props.entity;
+    var hasEntity = Object.keys(entity).length;
+    var itemParts = entity === null || entity === void 0 ? void 0 : entity.itemNameParts;
+    var renderName = function () {
+        if (!hasEntity)
+            return null;
+        return (hasEntity &&
+            itemParts.parts.map(function (part, i) {
+                return part.toLowerCase() === itemParts.match.toLowerCase() ? (React__default["default"].createElement("span", { className: 'str-chat__emoji-item--highlight', key: "part-".concat(i) }, part)) : (React__default["default"].createElement("span", { className: 'str-chat__emoji-item--part', key: "part-".concat(i) }, part));
+            }));
+    };
+    return (React__default["default"].createElement("div", { className: 'str-chat__emoji-item' },
+        React__default["default"].createElement("span", { className: 'str-chat__emoji-item--entity' }, entity.native),
+        React__default["default"].createElement("span", { className: 'str-chat__emoji-item--name' }, renderName())));
+};
+var EmoticonItem = React__default["default"].memo(UnMemoizedEmoticonItem);
+
+var useEmojiTrigger = function (emojiIndex) {
+    var themeVersion = useChatContext('useEmojiTrigger').themeVersion;
+    return {
+        component: EmoticonItem,
+        dataProvider: function (query, _, onReady) {
+            if (query.length === 0 || query.charAt(0).match(/[^a-zA-Z0-9+-]/)) {
+                return [];
+            }
+            var emojis = (emojiIndex === null || emojiIndex === void 0 ? void 0 : emojiIndex.search(query)) || [];
+            // emojiIndex.search sometimes returns undefined values, so filter those out first
+            var result = emojis.filter(Boolean).slice(0, themeVersion === '2' ? 7 : 10);
+            if (onReady)
+                onReady(result, query);
+            return result;
+        },
+        output: function (entity) { return ({
+            caretPosition: 'next',
+            key: entity.id,
+            text: "".concat('native' in entity ? entity.native : ''),
+        }); },
+    };
+};
+
+var accentsMap = {
+    a: 'á|à|ã|â|À|Á|Ã|Â',
+    c: 'ç|Ç',
+    e: 'é|è|ê|É|È|Ê',
+    i: 'í|ì|î|Í|Ì|Î',
+    n: 'ñ|Ñ',
+    o: 'ó|ò|ô|ő|õ|Ó|Ò|Ô|Õ',
+    u: 'ú|ù|û|ü|Ú|Ù|Û|Ü',
+};
+var removeDiacritics = function (text) {
+    if (!text)
+        return '';
+    return Object.keys(accentsMap).reduce(function (acc, current) { return acc.replace(new RegExp(accentsMap[current], 'g'), current); }, text);
+};
+var calculateLevenshtein = function (query, name) {
+    if (query.length === 0)
+        return name.length;
+    if (name.length === 0)
+        return query.length;
+    var matrix = [];
+    var i;
+    for (i = 0; i <= name.length; i++) {
+        matrix[i] = [i];
+    }
+    var j;
+    for (j = 0; j <= query.length; j++) {
+        matrix[0][j] = j;
+    }
+    for (i = 1; i <= name.length; i++) {
+        for (j = 1; j <= query.length; j++) {
+            if (name.charAt(i - 1) === query.charAt(j - 1)) {
+                matrix[i][j] = matrix[i - 1][j - 1];
+            }
+            else {
+                matrix[i][j] = Math.min(matrix[i - 1][j - 1] + 1, // substitution
+                Math.min(matrix[i][j - 1] + 1, // insertion
+                matrix[i - 1][j] + 1)); // deletion
+            }
+        }
+    }
+    return matrix[name.length][query.length];
+};
+var searchLocalUsers = function (params) {
+    var ownUserId = params.ownUserId, query = params.query, text = params.text, useMentionsTransliteration = params.useMentionsTransliteration, users = params.users;
+    var matchingUsers = users.filter(function (user) {
+        if (user.id === ownUserId)
+            return false;
+        if (!query)
+            return true;
+        var updatedId = removeDiacritics(user.id).toLowerCase();
+        var updatedName = removeDiacritics(user.name).toLowerCase();
+        var updatedQuery = removeDiacritics(query).toLowerCase();
+        if (useMentionsTransliteration) {
+            (function () { return __awaiter$1(void 0, void 0, void 0, function () {
+                var transliterate;
+                return __generator$1(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('@stream-io/transliterate')); })];
+                        case 1:
+                            transliterate = (_a.sent()).default;
+                            updatedName = transliterate(user.name || '').toLowerCase();
+                            updatedQuery = transliterate(query).toLowerCase();
+                            updatedId = transliterate(user.id).toLowerCase();
+                            return [2 /*return*/];
+                    }
+                });
+            }); })();
+        }
+        var maxDistance = 3;
+        var lastDigits = text.slice(-(maxDistance + 1)).includes('@');
+        if (updatedName) {
+            var levenshtein_1 = calculateLevenshtein(updatedQuery, updatedName);
+            if (updatedName.includes(updatedQuery) || (levenshtein_1 <= maxDistance && lastDigits)) {
+                return true;
+            }
+        }
+        var levenshtein = calculateLevenshtein(updatedQuery, updatedId);
+        return updatedId.includes(updatedQuery) || (levenshtein <= maxDistance && lastDigits);
+    });
+    return matchingUsers;
+};
+var checkUploadPermissions = function (params) { return __awaiter$1(void 0, void 0, void 0, function () {
+    var addNotification, file, getAppSettings, t, uploadType, appSettings, _a, allowed_file_extensions, allowed_mime_types, blocked_file_extensions, blocked_mime_types, sendErrorNotification, allowed, blocked, allowed, blocked;
+    var _b, _c;
+    return __generator$1(this, function (_d) {
+        switch (_d.label) {
+            case 0:
+                addNotification = params.addNotification, file = params.file, getAppSettings = params.getAppSettings, t = params.t, uploadType = params.uploadType;
+                appSettings = null;
+                return [4 /*yield*/, getAppSettings()];
+            case 1:
+                appSettings = _d.sent();
+                _a = (uploadType === 'image'
+                    ? (_b = appSettings === null || appSettings === void 0 ? void 0 : appSettings.app) === null || _b === void 0 ? void 0 : _b.image_upload_config
+                    : (_c = appSettings === null || appSettings === void 0 ? void 0 : appSettings.app) === null || _c === void 0 ? void 0 : _c.file_upload_config) || {}, allowed_file_extensions = _a.allowed_file_extensions, allowed_mime_types = _a.allowed_mime_types, blocked_file_extensions = _a.blocked_file_extensions, blocked_mime_types = _a.blocked_mime_types;
+                sendErrorNotification = function () {
+                    return addNotification(t("Upload type: \"{{ type }}\" is not allowed", { type: file.type || 'unknown type' }), 'error');
+                };
+                if (allowed_file_extensions === null || allowed_file_extensions === void 0 ? void 0 : allowed_file_extensions.length) {
+                    allowed = allowed_file_extensions.some(function (ext) {
+                        return file.name.toLowerCase().endsWith(ext.toLowerCase());
+                    });
+                    if (!allowed) {
+                        sendErrorNotification();
+                        return [2 /*return*/, false];
+                    }
+                }
+                if (blocked_file_extensions === null || blocked_file_extensions === void 0 ? void 0 : blocked_file_extensions.length) {
+                    blocked = blocked_file_extensions.some(function (ext) {
+                        return file.name.toLowerCase().endsWith(ext.toLowerCase());
+                    });
+                    if (blocked) {
+                        sendErrorNotification();
+                        return [2 /*return*/, false];
+                    }
+                }
+                if (allowed_mime_types === null || allowed_mime_types === void 0 ? void 0 : allowed_mime_types.length) {
+                    allowed = allowed_mime_types.some(function (type) { var _a; return type.toLowerCase() === ((_a = file.type) === null || _a === void 0 ? void 0 : _a.toLowerCase()); });
+                    if (!allowed) {
+                        sendErrorNotification();
+                        return [2 /*return*/, false];
+                    }
+                }
+                if (blocked_mime_types === null || blocked_mime_types === void 0 ? void 0 : blocked_mime_types.length) {
+                    blocked = blocked_mime_types.some(function (type) { var _a; return type.toLowerCase() === ((_a = file.type) === null || _a === void 0 ? void 0 : _a.toLowerCase()); });
+                    if (blocked) {
+                        sendErrorNotification();
+                        return [2 /*return*/, false];
+                    }
+                }
+                return [2 /*return*/, true];
+        }
+    });
+}); };
+
+var useUserTrigger = function (params) {
+    var disableMentions = params.disableMentions, mentionAllAppUsers = params.mentionAllAppUsers, _a = params.mentionQueryParams, mentionQueryParams = _a === void 0 ? {} : _a, onSelectUser = params.onSelectUser, useMentionsTransliteration = params.useMentionsTransliteration;
+    var _b = React.useState(false), searching = _b[0], setSearching = _b[1];
+    var _c = useChatContext('useUserTrigger'), client = _c.client, mutes = _c.mutes, themeVersion = _c.themeVersion;
+    var channel = useChannelStateContext('useUserTrigger').channel;
+    var members = channel.state.members;
+    var watchers = channel.state.watchers;
+    var getMembersAndWatchers = React.useCallback(function () {
+        var memberUsers = members ? Object.values(members).map(function (_a) {
+            var user = _a.user;
+            return user;
+        }) : [];
+        var watcherUsers = watchers ? Object.values(watchers) : [];
+        var users = __spreadArray$1(__spreadArray$1([], memberUsers, true), watcherUsers, true);
+        // make sure we don't list users twice
+        var uniqueUsers = {};
+        users.forEach(function (user) {
+            if (user && !uniqueUsers[user.id]) {
+                uniqueUsers[user.id] = user;
+            }
+        });
+        return Object.values(uniqueUsers);
+    }, [members, watchers]);
+    var queryMembersThrottled = React.useCallback(throttle__default["default"](function (query, onReady) { return __awaiter$1(void 0, void 0, void 0, function () {
+        var response, users, error_1;
+        return __generator$1(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 2, , 3]);
+                    return [4 /*yield*/, channel.queryMembers({
+                            name: { $autocomplete: query },
+                        })];
+                case 1:
+                    response = _a.sent();
+                    users = response.members.map(function (member) { return member.user; });
+                    if (onReady && users.length) {
+                        onReady(users);
+                    }
+                    else {
+                        onReady([]);
+                    }
+                    return [3 /*break*/, 3];
+                case 2:
+                    error_1 = _a.sent();
+                    console.log({ error: error_1 });
+                    return [3 /*break*/, 3];
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); }, 200), [channel]);
+    var queryUsers = function (query, onReady) { return __awaiter$1(void 0, void 0, void 0, function () {
+        var users, error_2;
+        return __generator$1(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!query || searching)
+                        return [2 /*return*/];
+                    setSearching(true);
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, client.queryUsers(__assign({ $or: [{ id: { $autocomplete: query } }, { name: { $autocomplete: query } }], id: { $ne: client.userID } }, mentionQueryParams.filters), __assign({ id: 1 }, mentionQueryParams.sort), __assign({ limit: 10 }, mentionQueryParams.options))];
+                case 2:
+                    users = (_a.sent()).users;
+                    if (onReady && users.length) {
+                        onReady(users);
+                    }
+                    else {
+                        onReady([]);
+                    }
+                    return [3 /*break*/, 4];
+                case 3:
+                    error_2 = _a.sent();
+                    console.log({ error: error_2 });
+                    return [3 /*break*/, 4];
+                case 4:
+                    setSearching(false);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var queryUsersThrottled = throttle__default["default"](queryUsers, 200);
+    return {
+        callback: function (item) { return onSelectUser(item); },
+        component: UserItem,
+        dataProvider: function (query, text, onReady) {
+            var _a, _b;
+            if (disableMentions)
+                return;
+            var filterMutes = function (data) {
+                if (text.includes('/unmute') && !mutes.length) {
+                    return [];
+                }
+                if (!mutes.length)
+                    return data;
+                if (text.includes('/unmute')) {
+                    return data.filter(function (suggestion) {
+                        return mutes.some(function (mute) { return mute.target.id === suggestion.id; });
+                    });
+                }
+                return data.filter(function (suggestion) { return mutes.every(function (mute) { return mute.target.id !== suggestion.id; }); });
+            };
+            if (mentionAllAppUsers) {
+                return queryUsersThrottled(query, function (data) {
+                    if (onReady)
+                        onReady(filterMutes(data), query);
+                });
+            }
+            /**
+             * By default, we return maximum 100 members via queryChannels api call.
+             * Thus it is safe to assume, that if number of members in channel.state is < 100,
+             * then all the members are already available on client side and we don't need to
+             * make any api call to queryMembers endpoint.
+             */
+            if (!query || Object.values(members || {}).length < 100) {
+                var users = getMembersAndWatchers();
+                var params_1 = {
+                    ownUserId: client.userID,
+                    query: query,
+                    text: text,
+                    useMentionsTransliteration: useMentionsTransliteration,
+                    users: users,
+                };
+                var matchingUsers = searchLocalUsers(params_1);
+                var usersToShow = (_b = (_a = mentionQueryParams.options) === null || _a === void 0 ? void 0 : _a.limit) !== null && _b !== void 0 ? _b : (themeVersion === '2' ? 7 : 10);
+                var data = matchingUsers.slice(0, usersToShow);
+                if (onReady)
+                    onReady(filterMutes(data), query);
+                return data;
+            }
+            return queryMembersThrottled(query, function (data) {
+                if (onReady)
+                    onReady(filterMutes(data), query);
+            });
+        },
+        output: function (entity) { return ({
+            caretPosition: 'next',
+            key: entity.id,
+            text: "@".concat(entity.name || entity.id),
+        }); },
+    };
+};
+
+var DefaultTriggerProvider = function (_a) {
+    var children = _a.children;
+    var currentValue = useMessageInputContext('DefaultTriggerProvider');
+    var defaultAutocompleteTriggers = {
+        '/': useCommandTrigger(),
+        ':': useEmojiTrigger(currentValue.emojiIndex),
+        '@': useUserTrigger({
+            disableMentions: currentValue.disableMentions,
+            mentionAllAppUsers: currentValue.mentionAllAppUsers,
+            mentionQueryParams: currentValue.mentionQueryParams,
+            onSelectUser: currentValue.onSelectUser,
+            useMentionsTransliteration: currentValue.useMentionsTransliteration,
+        }),
+    };
+    var newValue = __assign(__assign({}, currentValue), { autocompleteTriggers: defaultAutocompleteTriggers });
+    return React__default["default"].createElement(MessageInputContextProvider, { value: newValue }, children);
+};
 
-  var _React$useState = React__namespace.useState({
-    styles: {
-      popper: {
-        position: optionsWithDefaults.strategy,
-        left: '0',
-        top: '0'
-      },
-      arrow: {
-        position: 'absolute'
-      }
-    },
-    attributes: {}
-  }),
-      state = _React$useState[0],
-      setState = _React$useState[1];
+var filterEmoji = function (emoji) {
+    return !(emoji.name === 'White Smiling Face' || emoji.name === 'White Frowning Face');
+};
+var EmojiPicker = function (_a) {
+    var small = _a.small;
+    var _b = useEmojiContext('EmojiPicker'), emojiConfig = _b.emojiConfig, EmojiPickerComponent = _b.EmojiPicker;
+    var t = useTranslationContext('EmojiPicker').t;
+    var _c = useMessageInputContext('EmojiPicker'), emojiPickerIsOpen = _c.emojiPickerIsOpen, emojiPickerRef = _c.emojiPickerRef, onSelectEmoji = _c.onSelectEmoji;
+    var emojiData = (emojiConfig || {}).emojiData;
+    if (!emojiPickerIsOpen || !emojiData)
+        return null;
+    return (React__default["default"].createElement("div", { className: clsx('str-chat__emoji-picker-container', {
+            'str-chat__input--emojipicker': !small,
+            'str-chat__small-message-input-emojipicker': small,
+        }), ref: emojiPickerRef },
+        React__default["default"].createElement(React.Suspense, { fallback: null },
+            React__default["default"].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 }))));
+};
 
-  var updateStateModifier = React__namespace.useMemo(function () {
-    return {
-      name: 'updateState',
-      enabled: true,
-      phase: 'write',
-      fn: function fn(_ref) {
-        var state = _ref.state;
-        var elements = Object.keys(state.elements);
-        ReactDOM__namespace.flushSync(function () {
-          setState({
-            styles: fromEntries(elements.map(function (element) {
-              return [element, state.styles[element] || {}];
-            })),
-            attributes: fromEntries(elements.map(function (element) {
-              return [element, state.attributes[element]];
-            }))
-          });
-        });
-      },
-      requires: ['computeStyles']
-    };
-  }, []);
-  var popperOptions = React__namespace.useMemo(function () {
-    var newOptions = {
-      onFirstUpdate: optionsWithDefaults.onFirstUpdate,
-      placement: optionsWithDefaults.placement,
-      strategy: optionsWithDefaults.strategy,
-      modifiers: [].concat(optionsWithDefaults.modifiers, [updateStateModifier, {
-        name: 'applyStyles',
-        enabled: false
-      }])
-    };
+var EmojiIconLarge = function () {
+    var t = useTranslationContext('EmojiIconLarge').t;
+    return (React__default["default"].createElement("svg", { height: '28', width: '28', xmlns: 'http://www.w3.org/2000/svg' },
+        React__default["default"].createElement("title", null, t('Open emoji picker')),
+        React__default["default"].createElement("g", { clipRule: 'evenodd', fillRule: 'evenodd' },
+            React__default["default"].createElement("path", { d: 'M14 4.4C8.6 4.4 4.4 8.6 4.4 14c0 5.4 4.2 9.6 9.6 9.6c5.4 0 9.6-4.2 9.6-9.6c0-5.4-4.2-9.6-9.6-9.6zM2 14c0-6.6 5.4-12 12-12s12 5.4 12 12s-5.4 12-12 12s-12-5.4-12-12zM12.8 11c0 1-.8 1.8-1.8 1.8s-1.8-.8-1.8-1.8s.8-1.8 1.8-1.8s1.8.8 1.8 1.8zM18.8 11c0 1-.8 1.8-1.8 1.8s-1.8-.8-1.8-1.8s.8-1.8 1.8-1.8s1.8.8 1.8 1.8zM8.6 15.4c.6-.4 1.2-.2 1.6.2c.6.8 1.6 1.8 3 2c1.2.4 2.8.2 4.8-2c.4-.4 1.2-.6 1.6 0c.4.4.6 1.2 0 1.6c-2.2 2.6-4.8 3.4-7 3c-2-.4-3.6-1.8-4.4-3c-.4-.6-.2-1.2.4-1.8z' }))));
+};
+var EmojiIconSmall = function () {
+    var t = useTranslationContext('EmojiIconSmall').t;
+    return (React__default["default"].createElement("svg", { height: '14', width: '14', xmlns: 'http://www.w3.org/2000/svg' },
+        React__default["default"].createElement("title", null, t('Open emoji picker')),
+        React__default["default"].createElement("g", { clipRule: 'evenodd', fillRule: 'evenodd' },
+            React__default["default"].createElement("path", { d: 'M6.7 1.42C3.73 1.42 1.42 3.73 1.42 6.7c0 2.97 2.31 5.28 5.28 5.28c2.97 0 5.28-2.31 5.28-5.28c0-2.97-2.31-5.28-5.28-5.28zM.1 6.7c0-3.63 2.97-6.6 6.6-6.6s6.6 2.97 6.6 6.6s-2.97 6.6-6.6 6.6s-6.6-2.97-6.6-6.6zM6.04 5.05c0 .55-.44.99-.99.99s-.99-.44-.99-.99s.44-.99.99-.99s.99.44.99.99zM9.34 5.05c0 .55-.44.99-.99.99s-.99-.44-.99-.99s.44-.99.99-.99s.99.44.99.99zM3.73 7.47c.33-.22.66-.11.88.11c.33.44.88.99 1.65 1.1c.66.22 1.54.11 2.64-1.1c.22-.22.66-.33.88 0c.22.22.33.66 0 .88c-1.21 1.43-2.64 1.87-3.85 1.65c-1.1-.22-1.98-.99-2.42-1.65c-.22-.33-.11-.66.22-.99z' }))));
+};
+// ThemingV2 icon
+var EmojiPickerIcon = function () { return (React__default["default"].createElement("svg", { preserveAspectRatio: 'xMinYMin', viewBox: '0 0 28 28', width: '100%', xmlns: 'http://www.w3.org/2000/svg' },
+    React__default["default"].createElement("g", { clipRule: 'evenodd', fillRule: 'evenodd' },
+        React__default["default"].createElement("path", { d: 'M14 4.4C8.6 4.4 4.4 8.6 4.4 14c0 5.4 4.2 9.6 9.6 9.6c5.4 0 9.6-4.2 9.6-9.6c0-5.4-4.2-9.6-9.6-9.6zM2 14c0-6.6 5.4-12 12-12s12 5.4 12 12s-5.4 12-12 12s-12-5.4-12-12zM12.8 11c0 1-.8 1.8-1.8 1.8s-1.8-.8-1.8-1.8s.8-1.8 1.8-1.8s1.8.8 1.8 1.8zM18.8 11c0 1-.8 1.8-1.8 1.8s-1.8-.8-1.8-1.8s.8-1.8 1.8-1.8s1.8.8 1.8 1.8zM8.6 15.4c.6-.4 1.2-.2 1.6.2c.6.8 1.6 1.8 3 2c1.2.4 2.8.2 4.8-2c.4-.4 1.2-.6 1.6 0c.4.4.6 1.2 0 1.6c-2.2 2.6-4.8 3.4-7 3c-2-.4-3.6-1.8-4.4-3c-.4-.6-.2-1.2.4-1.8z' })))); };
+var FileUploadIcon = function () {
+    var t = useTranslationContext('FileUploadIcon').t;
+    return (React__default["default"].createElement("svg", { height: '14', width: '14', xmlns: 'http://www.w3.org/2000/svg' },
+        React__default["default"].createElement("title", null, t('Attach files')),
+        React__default["default"].createElement("path", { d: 'M7 .5c3.59 0 6.5 2.91 6.5 6.5s-2.91 6.5-6.5 6.5S.5 10.59.5 7 3.41.5 7 .5zm0 12c3.031 0 5.5-2.469 5.5-5.5S10.031 1.5 7 1.5A5.506 5.506 0 0 0 1.5 7c0 3.034 2.469 5.5 5.5 5.5zM7.506 3v3.494H11v1.05H7.506V11h-1.05V7.544H3v-1.05h3.456V3h1.05z', fillRule: 'nonzero' })));
+};
+var FileUploadIconFlat = function () {
+    var t = useTranslationContext('FileUploadIconFlat').t;
+    return (React__default["default"].createElement("svg", { height: '14', width: '14', xmlns: 'http://www.w3.org/2000/svg' },
+        React__default["default"].createElement("title", null, t('Attach files')),
+        React__default["default"].createElement("path", { d: 'M1.667.333h10.666c.737 0 1.334.597 1.334 1.334v10.666c0 .737-.597 1.334-1.334 1.334H1.667a1.333 1.333 0 0 1-1.334-1.334V1.667C.333.93.93.333 1.667.333zm2 1.334a1.667 1.667 0 1 0 0 3.333 1.667 1.667 0 0 0 0-3.333zm-2 9.333v1.333h10.666v-4l-2-2-4 4-2-2L1.667 11z', fillRule: 'nonzero' })));
+};
+var LoadingIndicatorIcon = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? 20 : _b;
+    var id = React.useMemo(function () { return nanoid.nanoid(); }, []);
+    return (React__default["default"].createElement("div", { className: 'str-chat__loading-indicator' },
+        React__default["default"].createElement("svg", { "data-testid": 'loading-indicator', height: size, viewBox: '0 0 30 30', width: size, xmlns: 'http://www.w3.org/2000/svg' },
+            React__default["default"].createElement("defs", null,
+                React__default["default"].createElement("linearGradient", { id: "".concat(id, "-linear-gradient"), x1: '50%', x2: '50%', y1: '0%', y2: '100%' },
+                    React__default["default"].createElement("stop", { offset: '0%', stopColor: '#FFF', stopOpacity: '0' }),
+                    React__default["default"].createElement("stop", { "data-testid": 'stop-color', offset: '100%', stopOpacity: '1' }))),
+            React__default["default"].createElement("path", { d: 'M2.518 23.321l1.664-1.11A12.988 12.988 0 0 0 15 28c7.18 0 13-5.82 13-13S22.18 2 15 2V0c8.284 0 15 6.716 15 15 0 8.284-6.716 15-15 15-5.206 0-9.792-2.652-12.482-6.679z', fill: "url(#".concat(id, "-linear-gradient)"), fillRule: 'evenodd' }))));
+};
+// ThemingV2 icon
+var UploadIcon = function () { return (React__default["default"].createElement("svg", { "data-testid": 'attach', fill: 'none', height: '24', viewBox: '0 0 24 24', width: '24', xmlns: 'http://www.w3.org/2000/svg' },
+    React__default["default"].createElement("g", { clipPath: 'url(#clip0_10878_5)' },
+        React__default["default"].createElement("path", { d: 'M12.9997 6.99993L10.9997 6.99993L10.9997 10.9999L6.99972 10.9999L6.99972 12.9999L10.9997 12.9999L10.9997 16.9999L12.9997 16.9999L12.9997 12.9999L16.9997 12.9999L16.9997 10.9999L12.9997 10.9999L12.9997 6.99993ZM11.9997 1.99992C6.47972 1.99992 1.99972 6.47993 1.99972 11.9999C1.99972 17.5199 6.47972 21.9999 11.9997 21.9999C17.5197 21.9999 21.9997 17.5199 21.9997 11.9999C21.9997 6.47993 17.5197 1.99992 11.9997 1.99992ZM11.9997 19.9999C7.58972 19.9999 3.99972 16.4099 3.99972 11.9999C3.99972 7.58993 7.58972 3.99993 11.9997 3.99993C16.4097 3.99993 19.9997 7.58993 19.9997 11.9999C19.9997 16.4099 16.4097 19.9999 11.9997 19.9999Z', fill: 'black' })),
+    React__default["default"].createElement("defs", null,
+        React__default["default"].createElement("clipPath", { id: 'clip0_10878_5' },
+            React__default["default"].createElement("rect", { fill: 'white', height: '24', width: '24' }))))); };
+var CloseIcon$1 = function () { return (React__default["default"].createElement("svg", { "data-testid": 'close-no-outline', fill: 'none', height: '24', viewBox: '0 0 24 24', width: '24', xmlns: 'http://www.w3.org/2000/svg' },
+    React__default["default"].createElement("path", { d: 'M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z', fill: 'black' }))); };
+var RetryIcon = function () { return (React__default["default"].createElement("svg", { "data-testid": 'retry', fill: 'none', height: '24', viewBox: '0 0 24 24', width: '24', xmlns: 'http://www.w3.org/2000/svg' },
+    React__default["default"].createElement("path", { d: 'M17.6449 6.35C16.1949 4.9 14.2049 4 11.9949 4C7.57488 4 4.00488 7.58 4.00488 12C4.00488 16.42 7.57488 20 11.9949 20C15.7249 20 18.8349 17.45 19.7249 14H17.6449C16.8249 16.33 14.6049 18 11.9949 18C8.68488 18 5.99488 15.31 5.99488 12C5.99488 8.69 8.68488 6 11.9949 6C13.6549 6 15.1349 6.69 16.2149 7.78L12.9949 11H19.9949V4L17.6449 6.35Z', fill: 'black' }))); };
+var DownloadIcon = function () { return (React__default["default"].createElement("svg", { "data-testid": 'download', fill: 'none', height: '24', viewBox: '0 0 24 24', width: '24', xmlns: 'http://www.w3.org/2000/svg' },
+    React__default["default"].createElement("path", { d: 'M19.35 10.04C18.67 6.59 15.64 4 12 4C9.11 4 6.6 5.64 5.35 8.04C2.34 8.36 0 10.91 0 14C0 17.31 2.69 20 6 20H19C21.76 20 24 17.76 24 15C24 12.36 21.95 10.22 19.35 10.04ZM19 18H6C3.79 18 2 16.21 2 14C2 11.95 3.53 10.24 5.56 10.03L6.63 9.92L7.13 8.97C8.08 7.14 9.94 6 12 6C14.62 6 16.88 7.86 17.39 10.43L17.69 11.93L19.22 12.04C20.78 12.14 22 13.45 22 15C22 16.65 20.65 18 19 18ZM13.45 10H10.55V13H8L12 17L16 13H13.45V10Z', fill: 'black' }))); };
+var SendIconV1 = function () {
+    var t = useTranslationContext('SendButton').t;
+    return (React__default["default"].createElement("svg", { height: '17', viewBox: '0 0 18 17', width: '18', xmlns: 'http://www.w3.org/2000/svg' },
+        React__default["default"].createElement("title", null, t('Send')),
+        React__default["default"].createElement("path", { d: 'M0 17.015l17.333-8.508L0 0v6.617l12.417 1.89L0 10.397z', fill: '#006cff', fillRule: 'evenodd' })));
+};
+var SendIconV2 = function () {
+    var t = useTranslationContext('SendButton').t;
+    return (React__default["default"].createElement("svg", { "data-testid": 'send', fill: 'none', height: '24', viewBox: '0 0 24 24', width: '24', xmlns: 'http://www.w3.org/2000/svg' },
+        React__default["default"].createElement("title", null, t('Send')),
+        React__default["default"].createElement("path", { d: 'M4.00952 22L24 12L4.00952 2L4 9.77778L18.2857 12L4 14.2222L4.00952 22Z', fill: 'black' })));
+};
+var SendButton = function (_a) {
+    var sendMessage = _a.sendMessage, rest = __rest(_a, ["sendMessage"]);
+    var themeVersion = useChatContext('SendButton').themeVersion;
+    return (React__default["default"].createElement("button", __assign({ "aria-label": 'Send', className: 'str-chat__send-button', "data-testid": 'send-button', onClick: sendMessage, type: 'button' }, rest), themeVersion === '2' ? React__default["default"].createElement(SendIconV2, null) : React__default["default"].createElement(SendIconV1, null)));
+};
 
-    if (deepequal__default["default"](prevOptions.current, newOptions)) {
-      return prevOptions.current || newOptions;
-    } else {
-      prevOptions.current = newOptions;
-      return newOptions;
-    }
-  }, [optionsWithDefaults.onFirstUpdate, optionsWithDefaults.placement, optionsWithDefaults.strategy, optionsWithDefaults.modifiers, updateStateModifier]);
-  var popperInstanceRef = React__namespace.useRef();
-  useIsomorphicLayoutEffect(function () {
-    if (popperInstanceRef.current) {
-      popperInstanceRef.current.setOptions(popperOptions);
-    }
-  }, [popperOptions]);
-  useIsomorphicLayoutEffect(function () {
-    if (referenceElement == null || popperElement == null) {
-      return;
-    }
+/**
+ * @deprecated This component has been deprecated in favor of `AttachmentPreviewList` as this component
+ * utilises outdated components from the package [`react-file-utils`](https://github.com/GetStream/react-file-utils)
+ * which will no longer receive updates for aforementioned components.
+ *
+ * **Will be removed with the complete transition to the theming V2.**
+ */
+var UploadsPreview = function () {
+    var themeVersion = useChatContext('UploadsPreview').themeVersion;
+    var _a = useChannelStateContext('UploadsPreview'), _b = _a.maxNumberOfFiles, maxNumberOfFiles = _b === void 0 ? 0 : _b, multipleUploads = _a.multipleUploads;
+    var _c = useMessageInputContext('UploadsPreview'), fileOrder = _c.fileOrder, fileUploads = _c.fileUploads, imageOrder = _c.imageOrder, imageUploads = _c.imageUploads, _d = _c.numberOfUploads, numberOfUploads = _d === void 0 ? 0 : _d, removeFile = _c.removeFile, removeImage = _c.removeImage, uploadFile = _c.uploadFile, uploadImage = _c.uploadImage, uploadNewFiles = _c.uploadNewFiles;
+    var imagesToPreview = imageOrder
+        .map(function (id) { return imageUploads[id]; })
+        // filter OG scraped images
+        .filter(function (image) { return !image.og_scrape_url; });
+    var filesToPreview = fileOrder.map(function (id) { return fileUploads[id]; });
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        imageOrder.length > 0 && (React__default["default"].createElement(reactFileUtils.ImagePreviewer, { disabled: !multipleUploads || numberOfUploads >= maxNumberOfFiles, handleFiles: uploadNewFiles, handleRemove: removeImage, handleRetry: uploadImage, imageUploads: imagesToPreview, multiple: multipleUploads })),
+        fileOrder.length > 0 && (React__default["default"].createElement(reactFileUtils.FilePreviewer, { fileIconProps: {
+                className: 'str-chat__file-icon',
+                version: themeVersion,
+            }, handleFiles: uploadNewFiles, handleRemove: removeFile, handleRetry: uploadFile, uploads: filesToPreview }))));
+};
 
-    var createPopper$1 = options.createPopper || createPopper;
-    var popperInstance = createPopper$1(referenceElement, popperElement, popperOptions);
-    popperInstanceRef.current = popperInstance;
-    return function () {
-      popperInstance.destroy();
-      popperInstanceRef.current = null;
-    };
-  }, [referenceElement, popperElement, options.createPopper]);
-  return {
-    state: popperInstanceRef.current ? popperInstanceRef.current.state : null,
-    styles: state.styles,
-    attributes: state.attributes,
-    update: popperInstanceRef.current ? popperInstanceRef.current.update : null,
-    forceUpdate: popperInstanceRef.current ? popperInstanceRef.current.forceUpdate : null
-  };
+var UnMemoizedChatAutoComplete = function (props) {
+    var _a = useComponentContext('ChatAutoComplete'), SuggestionItem = _a.AutocompleteSuggestionItem, SuggestionList = _a.AutocompleteSuggestionList;
+    var t = useTranslationContext('ChatAutoComplete').t;
+    var messageInput = useMessageInputContext('ChatAutoComplete');
+    var cooldownRemaining = messageInput.cooldownRemaining, disabled = messageInput.disabled, emojiIndex = messageInput.emojiIndex, innerRef = messageInput.textareaRef;
+    var placeholder = props.placeholder || t('Type your message');
+    var emojiReplace = props.wordReplace
+        ? function (word) { var _a; return (_a = props.wordReplace) === null || _a === void 0 ? void 0 : _a.call(props, word, emojiIndex); }
+        : function (word) {
+            var found = (emojiIndex === null || emojiIndex === void 0 ? void 0 : emojiIndex.search(word)) || [];
+            var emoji = found
+                .filter(Boolean)
+                .slice(0, 10)
+                .find(function (_a) {
+                var emoticons = _a.emoticons;
+                return !!(emoticons === null || emoticons === void 0 ? void 0 : emoticons.includes(word));
+            });
+            if (!emoji || !('native' in emoji))
+                return null;
+            return emoji.native;
+        };
+    var updateInnerRef = React.useCallback(function (ref) {
+        if (innerRef) {
+            innerRef.current = ref;
+        }
+    }, [innerRef]);
+    return (React__default["default"].createElement(ReactTextareaAutocomplete, { additionalTextareaProps: messageInput.additionalTextareaProps, "aria-label": cooldownRemaining ? t('Slow Mode ON') : placeholder, className: 'str-chat__textarea__textarea str-chat__message-textarea', closeCommandsList: messageInput.closeCommandsList, closeMentionsList: messageInput.closeMentionsList, containerClassName: 'str-chat__textarea str-chat__message-textarea-react-host', disabled: disabled || !!cooldownRemaining, disableMentions: messageInput.disableMentions, dropdownClassName: 'str-chat__emojisearch', grow: messageInput.grow, handleSubmit: props.handleSubmit || messageInput.handleSubmit, innerRef: updateInnerRef, itemClassName: 'str-chat__emojisearch__item', listClassName: 'str-chat__emojisearch__list', loadingComponent: LoadingIndicator, maxRows: messageInput.maxRows, minChar: 0, onBlur: props.onBlur, onChange: props.onChange || messageInput.handleChange, onFocus: props.onFocus, onPaste: props.onPaste || messageInput.onPaste, placeholder: cooldownRemaining ? t('Slow Mode ON') : placeholder, replaceWord: emojiReplace, rows: props.rows || 1, shouldSubmit: messageInput.shouldSubmit, showCommandsList: messageInput.showCommandsList, showMentionsList: messageInput.showMentionsList, SuggestionItem: SuggestionItem, SuggestionList: SuggestionList, trigger: messageInput.autocompleteTriggers || {}, value: props.value || messageInput.text }));
 };
+var ChatAutoComplete = React__default["default"].memo(UnMemoizedChatAutoComplete);
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -7566,7 +7582,7 @@ var FILES_TO_IGNORE = [
 function fromEvent(evt) {
     return __awaiter(this, void 0, void 0, function () {
         return __generator(this, function (_a) {
-            if (isObject$1(evt) && isDataTransfer(evt.dataTransfer)) {
+            if (isObject(evt) && isDataTransfer(evt.dataTransfer)) {
                 return [2 /*return*/, getDataTransferFiles(evt.dataTransfer, evt.type)];
             }
             else if (isChangeEvt(evt)) {
@@ -7580,12 +7596,12 @@ function fromEvent(evt) {
     });
 }
 function isDataTransfer(value) {
-    return isObject$1(value);
+    return isObject(value);
 }
 function isChangeEvt(value) {
-    return isObject$1(value) && isObject$1(value.target);
+    return isObject(value) && isObject(value.target);
 }
-function isObject$1(v) {
+function isObject(v) {
     return typeof v === 'object' && v !== null;
 }
 function getInputFiles(evt) {
@@ -7741,8 +7757,6 @@ function fromFileEntry(entry) {
     });
 }
 
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
-
 function unwrapExports (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
 }
@@ -7791,9 +7805,9 @@ function _arrayWithoutHoles$1(arr) { if (Array.isArray(arr)) return _arrayLikeTo
 
 function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-function _defineProperty$2(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _defineProperty$1(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 function _slicedToArray$1(arr, i) { return _arrayWithHoles$1(arr) || _iterableToArrayLimit$1(arr, i) || _unsupportedIterableToArray$1(arr, i) || _nonIterableRest$1(); }
 
@@ -8008,7 +8022,7 @@ function pickerOptionsFromAccept(accept) {
           mimeType = _ref5[0],
           ext = _ref5[1];
 
-      return _objectSpread$1(_objectSpread$1({}, agg), {}, _defineProperty$2({}, mimeType, ext));
+      return _objectSpread$1(_objectSpread$1({}, agg), {}, _defineProperty$1({}, mimeType, ext));
     }, {});
     return [{
       accept: acceptForPicker
@@ -8121,9 +8135,9 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-function _defineProperty$1(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
@@ -8955,7 +8969,7 @@ function useDropzone() {
           onDrop = _ref2.onDrop,
           rest = _objectWithoutProperties(_ref2, _excluded3);
 
-      return _objectSpread(_objectSpread(_defineProperty$1({
+      return _objectSpread(_objectSpread(_defineProperty({
         onKeyDown: composeKeyboardHandler(composeEventHandlers(onKeyDown, onKeyDownCb)),
         onFocus: composeKeyboardHandler(composeEventHandlers(onFocus, onFocusCb)),
         onBlur: composeKeyboardHandler(composeEventHandlers(onBlur, onBlurCb)),
@@ -8982,7 +8996,7 @@ function useDropzone() {
           onClick = _ref3.onClick,
           rest = _objectWithoutProperties(_ref3, _excluded4);
 
-      var inputProps = _defineProperty$1({
+      var inputProps = _defineProperty({
         accept: acceptAttr,
         multiple: multiple,
         type: "file",
@@ -9058,491 +9072,6 @@ function reducer(state, action) {
 
 function noop() {}
 
-/** Detect free variable `global` from Node.js. */
-var freeGlobal = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
-
-var _freeGlobal = freeGlobal;
-
-/** Detect free variable `self`. */
-var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
-
-/** Used as a reference to the global object. */
-var root = _freeGlobal || freeSelf || Function('return this')();
-
-var _root = root;
-
-/** Built-in value references. */
-var Symbol$1 = _root.Symbol;
-
-var _Symbol = Symbol$1;
-
-/** Used for built-in method references. */
-var objectProto$3 = Object.prototype;
-
-/** Used to check objects for own properties. */
-var hasOwnProperty$2 = objectProto$3.hasOwnProperty;
-
-/**
- * Used to resolve the
- * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
- * of values.
- */
-var nativeObjectToString$1 = objectProto$3.toString;
-
-/** Built-in value references. */
-var symToStringTag$1 = _Symbol ? _Symbol.toStringTag : undefined;
-
-/**
- * A specialized version of `baseGetTag` which ignores `Symbol.toStringTag` values.
- *
- * @private
- * @param {*} value The value to query.
- * @returns {string} Returns the raw `toStringTag`.
- */
-function getRawTag(value) {
-  var isOwn = hasOwnProperty$2.call(value, symToStringTag$1),
-      tag = value[symToStringTag$1];
-
-  try {
-    value[symToStringTag$1] = undefined;
-    var unmasked = true;
-  } catch (e) {}
-
-  var result = nativeObjectToString$1.call(value);
-  if (unmasked) {
-    if (isOwn) {
-      value[symToStringTag$1] = tag;
-    } else {
-      delete value[symToStringTag$1];
-    }
-  }
-  return result;
-}
-
-var _getRawTag = getRawTag;
-
-/** Used for built-in method references. */
-var objectProto$2 = Object.prototype;
-
-/**
- * Used to resolve the
- * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
- * of values.
- */
-var nativeObjectToString = objectProto$2.toString;
-
-/**
- * Converts `value` to a string using `Object.prototype.toString`.
- *
- * @private
- * @param {*} value The value to convert.
- * @returns {string} Returns the converted string.
- */
-function objectToString(value) {
-  return nativeObjectToString.call(value);
-}
-
-var _objectToString = objectToString;
-
-/** `Object#toString` result references. */
-var nullTag = '[object Null]',
-    undefinedTag = '[object Undefined]';
-
-/** Built-in value references. */
-var symToStringTag = _Symbol ? _Symbol.toStringTag : undefined;
-
-/**
- * The base implementation of `getTag` without fallbacks for buggy environments.
- *
- * @private
- * @param {*} value The value to query.
- * @returns {string} Returns the `toStringTag`.
- */
-function baseGetTag(value) {
-  if (value == null) {
-    return value === undefined ? undefinedTag : nullTag;
-  }
-  return (symToStringTag && symToStringTag in Object(value))
-    ? _getRawTag(value)
-    : _objectToString(value);
-}
-
-var _baseGetTag = baseGetTag;
-
-/**
- * Checks if `value` is the
- * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
- * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is an object, else `false`.
- * @example
- *
- * _.isObject({});
- * // => true
- *
- * _.isObject([1, 2, 3]);
- * // => true
- *
- * _.isObject(_.noop);
- * // => true
- *
- * _.isObject(null);
- * // => false
- */
-function isObject(value) {
-  var type = typeof value;
-  return value != null && (type == 'object' || type == 'function');
-}
-
-var isObject_1 = isObject;
-
-/** `Object#toString` result references. */
-var asyncTag = '[object AsyncFunction]',
-    funcTag = '[object Function]',
-    genTag = '[object GeneratorFunction]',
-    proxyTag = '[object Proxy]';
-
-/**
- * Checks if `value` is classified as a `Function` object.
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a function, else `false`.
- * @example
- *
- * _.isFunction(_);
- * // => true
- *
- * _.isFunction(/abc/);
- * // => false
- */
-function isFunction(value) {
-  if (!isObject_1(value)) {
-    return false;
-  }
-  // The use of `Object#toString` avoids issues with the `typeof` operator
-  // in Safari 9 which returns 'object' for typed arrays and other constructors.
-  var tag = _baseGetTag(value);
-  return tag == funcTag || tag == genTag || tag == asyncTag || tag == proxyTag;
-}
-
-var isFunction_1 = isFunction;
-
-/** Used to detect overreaching core-js shims. */
-var coreJsData = _root['__core-js_shared__'];
-
-var _coreJsData = coreJsData;
-
-/** Used to detect methods masquerading as native. */
-var maskSrcKey = (function() {
-  var uid = /[^.]+$/.exec(_coreJsData && _coreJsData.keys && _coreJsData.keys.IE_PROTO || '');
-  return uid ? ('Symbol(src)_1.' + uid) : '';
-}());
-
-/**
- * Checks if `func` has its source masked.
- *
- * @private
- * @param {Function} func The function to check.
- * @returns {boolean} Returns `true` if `func` is masked, else `false`.
- */
-function isMasked(func) {
-  return !!maskSrcKey && (maskSrcKey in func);
-}
-
-var _isMasked = isMasked;
-
-/** Used for built-in method references. */
-var funcProto$1 = Function.prototype;
-
-/** Used to resolve the decompiled source of functions. */
-var funcToString$1 = funcProto$1.toString;
-
-/**
- * Converts `func` to its source code.
- *
- * @private
- * @param {Function} func The function to convert.
- * @returns {string} Returns the source code.
- */
-function toSource(func) {
-  if (func != null) {
-    try {
-      return funcToString$1.call(func);
-    } catch (e) {}
-    try {
-      return (func + '');
-    } catch (e) {}
-  }
-  return '';
-}
-
-var _toSource = toSource;
-
-/**
- * Used to match `RegExp`
- * [syntax characters](http://ecma-international.org/ecma-262/7.0/#sec-patterns).
- */
-var reRegExpChar = /[\\^$.*+?()[\]{}|]/g;
-
-/** Used to detect host constructors (Safari). */
-var reIsHostCtor = /^\[object .+?Constructor\]$/;
-
-/** Used for built-in method references. */
-var funcProto = Function.prototype,
-    objectProto$1 = Object.prototype;
-
-/** Used to resolve the decompiled source of functions. */
-var funcToString = funcProto.toString;
-
-/** Used to check objects for own properties. */
-var hasOwnProperty$1 = objectProto$1.hasOwnProperty;
-
-/** Used to detect if a method is native. */
-var reIsNative = RegExp('^' +
-  funcToString.call(hasOwnProperty$1).replace(reRegExpChar, '\\$&')
-  .replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, '$1.*?') + '$'
-);
-
-/**
- * The base implementation of `_.isNative` without bad shim checks.
- *
- * @private
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a native function,
- *  else `false`.
- */
-function baseIsNative(value) {
-  if (!isObject_1(value) || _isMasked(value)) {
-    return false;
-  }
-  var pattern = isFunction_1(value) ? reIsNative : reIsHostCtor;
-  return pattern.test(_toSource(value));
-}
-
-var _baseIsNative = baseIsNative;
-
-/**
- * Gets the value at `key` of `object`.
- *
- * @private
- * @param {Object} [object] The object to query.
- * @param {string} key The key of the property to get.
- * @returns {*} Returns the property value.
- */
-function getValue(object, key) {
-  return object == null ? undefined : object[key];
-}
-
-var _getValue = getValue;
-
-/**
- * Gets the native function at `key` of `object`.
- *
- * @private
- * @param {Object} object The object to query.
- * @param {string} key The key of the method to get.
- * @returns {*} Returns the function if it's native, else `undefined`.
- */
-function getNative(object, key) {
-  var value = _getValue(object, key);
-  return _baseIsNative(value) ? value : undefined;
-}
-
-var _getNative = getNative;
-
-var defineProperty = (function() {
-  try {
-    var func = _getNative(Object, 'defineProperty');
-    func({}, '', {});
-    return func;
-  } catch (e) {}
-}());
-
-var _defineProperty = defineProperty;
-
-/**
- * The base implementation of `assignValue` and `assignMergeValue` without
- * value checks.
- *
- * @private
- * @param {Object} object The object to modify.
- * @param {string} key The key of the property to assign.
- * @param {*} value The value to assign.
- */
-function baseAssignValue(object, key, value) {
-  if (key == '__proto__' && _defineProperty) {
-    _defineProperty(object, key, {
-      'configurable': true,
-      'enumerable': true,
-      'value': value,
-      'writable': true
-    });
-  } else {
-    object[key] = value;
-  }
-}
-
-var _baseAssignValue = baseAssignValue;
-
-/**
- * Performs a
- * [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)
- * comparison between two values to determine if they are equivalent.
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to compare.
- * @param {*} other The other value to compare.
- * @returns {boolean} Returns `true` if the values are equivalent, else `false`.
- * @example
- *
- * var object = { 'a': 1 };
- * var other = { 'a': 1 };
- *
- * _.eq(object, object);
- * // => true
- *
- * _.eq(object, other);
- * // => false
- *
- * _.eq('a', 'a');
- * // => true
- *
- * _.eq('a', Object('a'));
- * // => false
- *
- * _.eq(NaN, NaN);
- * // => true
- */
-function eq(value, other) {
-  return value === other || (value !== value && other !== other);
-}
-
-var eq_1 = eq;
-
-/** Used for built-in method references. */
-var objectProto = Object.prototype;
-
-/** Used to check objects for own properties. */
-var hasOwnProperty = objectProto.hasOwnProperty;
-
-/**
- * Assigns `value` to `key` of `object` if the existing value is not equivalent
- * using [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)
- * for equality comparisons.
- *
- * @private
- * @param {Object} object The object to modify.
- * @param {string} key The key of the property to assign.
- * @param {*} value The value to assign.
- */
-function assignValue(object, key, value) {
-  var objValue = object[key];
-  if (!(hasOwnProperty.call(object, key) && eq_1(objValue, value)) ||
-      (value === undefined && !(key in object))) {
-    _baseAssignValue(object, key, value);
-  }
-}
-
-var _assignValue = assignValue;
-
-/**
- * This base implementation of `_.zipObject` which assigns values using `assignFunc`.
- *
- * @private
- * @param {Array} props The property identifiers.
- * @param {Array} values The property values.
- * @param {Function} assignFunc The function to assign values.
- * @returns {Object} Returns the new object.
- */
-function baseZipObject(props, values, assignFunc) {
-  var index = -1,
-      length = props.length,
-      valsLength = values.length,
-      result = {};
-
-  while (++index < length) {
-    var value = index < valsLength ? values[index] : undefined;
-    assignFunc(result, props[index], value);
-  }
-  return result;
-}
-
-var _baseZipObject = baseZipObject;
-
-/**
- * This method is like `_.fromPairs` except that it accepts two arrays,
- * one of property identifiers and one of corresponding values.
- *
- * @static
- * @memberOf _
- * @since 0.4.0
- * @category Array
- * @param {Array} [props=[]] The property identifiers.
- * @param {Array} [values=[]] The property values.
- * @returns {Object} Returns the new object.
- * @example
- *
- * _.zipObject(['a', 'b'], [1, 2]);
- * // => { 'a': 1, 'b': 2 }
- */
-function zipObject(props, values) {
-  return _baseZipObject(props || [], values || [], _assignValue);
-}
-
-var zipObject_1 = zipObject;
-
-var CooldownTimer = function (_a) {
-    var cooldownInterval = _a.cooldownInterval, setCooldownRemaining = _a.setCooldownRemaining;
-    var _b = React.useState(cooldownInterval), seconds = _b[0], setSeconds = _b[1];
-    React.useEffect(function () {
-        var countdownInterval = setInterval(function () {
-            if (seconds > 0) {
-                setSeconds(seconds - 1);
-            }
-            else {
-                setCooldownRemaining(0);
-            }
-        }, 1000);
-        return function () { return clearInterval(countdownInterval); };
-    });
-    return (React__default["default"].createElement("div", { className: 'str-chat__message-input-cooldown', "data-testid": 'cooldown-timer' }, seconds === 0 ? null : seconds));
-};
-var useCooldownTimer = function () {
-    var latestMessageDatesByChannels = useChatContext('useCooldownTimer').latestMessageDatesByChannels;
-    var channel = useChannelStateContext('useCooldownTimer').channel;
-    var _a = (channel.data ||
-        {}), cooldownInterval = _a.cooldown, own_capabilities = _a.own_capabilities;
-    var _b = React.useState(), cooldownRemaining = _b[0], setCooldownRemaining = _b[1];
-    var skipCooldown = !(own_capabilities === null || own_capabilities === void 0 ? void 0 : own_capabilities.includes('slow-mode'));
-    React.useEffect(function () {
-        var latestMessageDate = latestMessageDatesByChannels[channel.cid];
-        if (!cooldownInterval || !latestMessageDate) {
-            return;
-        }
-        var remainingCooldown = Math.round(cooldownInterval - (new Date().getTime() - latestMessageDate.getTime()) / 1000);
-        if (remainingCooldown > 0 && !skipCooldown) {
-            setCooldownRemaining(remainingCooldown);
-        }
-    }, [channel.id, cooldownInterval, latestMessageDatesByChannels[channel.cid]]);
-    return {
-        cooldownInterval: cooldownInterval || 0,
-        cooldownRemaining: cooldownRemaining,
-        setCooldownRemaining: setCooldownRemaining,
-    };
-};
-
 var QuotedMessagePreviewHeader = function () {
     var setQuotedMessage = useChannelActionContext('QuotedMessagePreview').setQuotedMessage;
     var t = useTranslationContext('QuotedMessagePreview').t;
@@ -9643,6 +9172,23 @@ var FilePreviewItem = function (_a) {
             state.uploading && React__default["default"].createElement(LoadingIndicatorIcon, { size: 17 }))));
 };
 
+var CooldownTimer = function (_a) {
+    var cooldownInterval = _a.cooldownInterval, setCooldownRemaining = _a.setCooldownRemaining;
+    var _b = React.useState(cooldownInterval), seconds = _b[0], setSeconds = _b[1];
+    React.useEffect(function () {
+        var countdownInterval = setInterval(function () {
+            if (seconds > 0) {
+                setSeconds(seconds - 1);
+            }
+            else {
+                setCooldownRemaining(0);
+            }
+        }, 1000);
+        return function () { return clearInterval(countdownInterval); };
+    });
+    return (React__default["default"].createElement("div", { className: 'str-chat__message-input-cooldown', "data-testid": 'cooldown-timer' }, seconds === 0 ? null : seconds));
+};
+
 var MessageInputFlat = function () {
     var quotedMessage = useChannelStateContext('MessageInputFlat').quotedMessage;
     var setQuotedMessage = useChannelActionContext('MessageInputFlat').setQuotedMessage;
@@ -9711,7 +9257,11 @@ var MessageInputV2 = function () {
     }), attributes = _m.attributes, styles = _m.styles;
     var id = React.useMemo(function () { return nanoid.nanoid(); }, []);
     var accept = React.useMemo(function () {
-        return zipObject_1(acceptedFiles, Array.from({ length: acceptedFiles.length }, function () { return []; }));
+        return acceptedFiles.reduce(function (mediaTypeMap, mediaType) {
+            var _a;
+            (_a = mediaTypeMap[mediaType]) !== null && _a !== void 0 ? _a : (mediaTypeMap[mediaType] = []);
+            return mediaTypeMap;
+        }, {});
     }, [acceptedFiles]);
     var _o = useDropzone({
         accept: accept,
@@ -9791,6 +9341,30 @@ var EditMessageForm = function () {
                         React__default["default"].createElement("button", { className: 'str-chat__edit-message-send', type: 'submit' }, t('Send'))))))));
 };
 
+var useCooldownTimer = function () {
+    var latestMessageDatesByChannels = useChatContext('useCooldownTimer').latestMessageDatesByChannels;
+    var channel = useChannelStateContext('useCooldownTimer').channel;
+    var _a = (channel.data ||
+        {}), cooldownInterval = _a.cooldown, own_capabilities = _a.own_capabilities;
+    var _b = React.useState(), cooldownRemaining = _b[0], setCooldownRemaining = _b[1];
+    var skipCooldown = !(own_capabilities === null || own_capabilities === void 0 ? void 0 : own_capabilities.includes('slow-mode'));
+    React.useEffect(function () {
+        var latestMessageDate = latestMessageDatesByChannels[channel.cid];
+        if (!cooldownInterval || !latestMessageDate) {
+            return;
+        }
+        var remainingCooldown = Math.round(cooldownInterval - (new Date().getTime() - latestMessageDate.getTime()) / 1000);
+        if (remainingCooldown > 0 && !skipCooldown) {
+            setCooldownRemaining(remainingCooldown);
+        }
+    }, [channel.id, cooldownInterval, latestMessageDatesByChannels[channel.cid]]);
+    return {
+        cooldownInterval: cooldownInterval || 0,
+        cooldownRemaining: cooldownRemaining,
+        setCooldownRemaining: setCooldownRemaining,
+    };
+};
+
 var useEmojiIndex = function () {
     var _a = useEmojiContext('useEmojiIndex'), emojiConfig = _a.emojiConfig, EmojiIndex = _a.EmojiIndex;
     var emojiData = (emojiConfig || {}).emojiData;
@@ -10893,8 +10467,19 @@ var useProcessReactions = function (params) {
             ? Object.values(reactionCounts).reduce(function (total, count) { return total + count; }, 0)
             : 0;
     }, [reactionCounts, supportedReactionsArePresent]);
+    var aggregatedUserNamesByType = React.useMemo(function () {
+        return latestReactions.reduce(function (typeMap, _a) {
+            var _b;
+            var type = _a.type, user = _a.user;
+            (_b = typeMap[type]) !== null && _b !== void 0 ? _b : (typeMap[type] = []);
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            typeMap[type].push((user === null || user === void 0 ? void 0 : user.name) || user.id);
+            return typeMap;
+        }, {});
+    }, [latestReactions]);
     return {
         additionalEmojiProps: reactionsAreCustom ? additionalEmojiProps : emojiSetDef,
+        aggregatedUserNamesByType: aggregatedUserNamesByType,
         emojiData: emojiData,
         getEmojiByReactionType: getEmojiByReactionType,
         iHaveReactedWithReaction: iHaveReactedWithReaction,
@@ -10906,11 +10491,23 @@ var useProcessReactions = function (params) {
     };
 };
 
+var ButtonWithTooltip = function (_a) {
+    var children = _a.children, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, rest = __rest(_a, ["children", "onMouseEnter", "onMouseLeave"]);
+    var _b = React.useState(null), referenceElement = _b[0], setReferenceElement = _b[1];
+    var _c = useEnterLeaveHandlers({
+        onMouseEnter: onMouseEnter,
+        onMouseLeave: onMouseLeave,
+    }), handleEnter = _c.handleEnter, handleLeave = _c.handleLeave, tooltipVisible = _c.tooltipVisible;
+    var themeVersion = useChatContext('ButtonWithTooltip').themeVersion;
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        themeVersion === '2' && (React__default["default"].createElement(PopperTooltip, { referenceElement: referenceElement, visible: tooltipVisible }, rest.title)),
+        React__default["default"].createElement("button", __assign({ onMouseEnter: handleEnter, onMouseLeave: handleLeave, ref: setReferenceElement }, rest), children)));
+};
 var UnMemoizedReactionsList = function (props) {
     var onClick = props.onClick, _a = props.reverse, reverse = _a === void 0 ? false : _a, rest = __rest(props, ["onClick", "reverse"]);
     var _b = useEmojiContext('ReactionsList'), Emoji = _b.Emoji, emojiConfig = _b.emojiConfig;
     var onReactionListClick = useMessageContext('ReactionsList').onReactionListClick;
-    var _c = useProcessReactions(__assign({ emojiConfig: emojiConfig }, rest)), additionalEmojiProps = _c.additionalEmojiProps, emojiData = _c.emojiData, getEmojiByReactionType = _c.getEmojiByReactionType, iHaveReactedWithReaction = _c.iHaveReactedWithReaction, latestReactions = _c.latestReactions, latestReactionTypes = _c.latestReactionTypes, reactionCounts = _c.reactionCounts, supportedReactionsArePresent = _c.supportedReactionsArePresent, totalReactionCount = _c.totalReactionCount;
+    var _c = useProcessReactions(__assign({ emojiConfig: emojiConfig }, rest)), additionalEmojiProps = _c.additionalEmojiProps, aggregatedUserNamesByType = _c.aggregatedUserNamesByType, emojiData = _c.emojiData, getEmojiByReactionType = _c.getEmojiByReactionType, iHaveReactedWithReaction = _c.iHaveReactedWithReaction, latestReactions = _c.latestReactions, latestReactionTypes = _c.latestReactionTypes, reactionCounts = _c.reactionCounts, supportedReactionsArePresent = _c.supportedReactionsArePresent, totalReactionCount = _c.totalReactionCount;
     if (!latestReactions.length)
         return null;
     if (!supportedReactionsArePresent)
@@ -10925,7 +10522,7 @@ var UnMemoizedReactionsList = function (props) {
                 return emojiObject ? (React__default["default"].createElement("li", { className: clsx('str-chat__message-reaction', {
                         'str-chat__message-reaction-own': isOwnReaction,
                     }), key: emojiObject.id },
-                    React__default["default"].createElement("button", { "aria-label": "Reactions: ".concat(reactionType) },
+                    React__default["default"].createElement(ButtonWithTooltip, { "aria-label": "Reactions: ".concat(reactionType), title: aggregatedUserNamesByType[reactionType].join(', '), type: 'button' },
                         React__default["default"].createElement(React.Suspense, { fallback: null },
                             React__default["default"].createElement("span", { className: 'str-chat__message-reaction-emoji' },
                                 React__default["default"].createElement(Emoji, __assign({ data: emojiData, emoji: emojiObject, size: 16 }, additionalEmojiProps)))),
@@ -11595,30 +11192,38 @@ var ChannelInner = function (props) {
             });
         });
     };
-    var jumpToMessage = function (messageId) { return __awaiter$1(void 0, void 0, void 0, function () {
-        var indexOfMessage, hasMoreMessages;
-        return __generator$1(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    dispatch({ loadingMore: true, type: 'setLoadingMore' });
-                    return [4 /*yield*/, channel.state.loadMessageIntoState(messageId)];
-                case 1:
-                    _a.sent();
-                    indexOfMessage = channel.state.messages.findIndex(function (message) { return message.id === messageId; });
-                    hasMoreMessages = indexOfMessage >= Math.floor(DEFAULT_INITIAL_CHANNEL_PAGE_SIZE / 2);
-                    loadMoreFinished(hasMoreMessages, channel.state.messages);
-                    dispatch({
-                        hasMoreNewer: channel.state.messages !== channel.state.latestMessages,
-                        highlightedMessageId: messageId,
-                        type: 'jumpToMessageFinished',
-                    });
-                    setTimeout(function () {
-                        dispatch({ type: 'clearHighlightedMessage' });
-                    }, 500);
-                    return [2 /*return*/];
-            }
-        });
-    }); };
+    var clearHighlightedMessageTimeoutId = React.useRef(null);
+    var jumpToMessage = function (messageId, messageLimit) {
+        if (messageLimit === void 0) { messageLimit = 100; }
+        return __awaiter$1(void 0, void 0, void 0, function () {
+            var indexOfMessage, hasMoreMessages;
+            return __generator$1(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        dispatch({ loadingMore: true, type: 'setLoadingMore' });
+                        return [4 /*yield*/, channel.state.loadMessageIntoState(messageId, undefined, messageLimit)];
+                    case 1:
+                        _a.sent();
+                        indexOfMessage = channel.state.messages.findIndex(function (message) { return message.id === messageId; });
+                        hasMoreMessages = indexOfMessage >= Math.floor(messageLimit / 2);
+                        loadMoreFinished(hasMoreMessages, channel.state.messages);
+                        dispatch({
+                            hasMoreNewer: channel.state.messages !== channel.state.latestMessages,
+                            highlightedMessageId: messageId,
+                            type: 'jumpToMessageFinished',
+                        });
+                        if (clearHighlightedMessageTimeoutId.current) {
+                            clearTimeout(clearHighlightedMessageTimeoutId.current);
+                        }
+                        clearHighlightedMessageTimeoutId.current = setTimeout(function () {
+                            clearHighlightedMessageTimeoutId.current = null;
+                            dispatch({ type: 'clearHighlightedMessage' });
+                        }, 500);
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
     var jumpToLatestMessage = function () { return __awaiter$1(void 0, void 0, void 0, function () {
         var hasMoreOlder;
         return __generator$1(this, function (_a) {
@@ -12517,149 +12122,34 @@ var ChannelPreview = function (props) {
     return (React__default["default"].createElement(Preview, __assign({}, props, { active: isActive, displayImage: displayImage, displayTitle: displayTitle, lastMessage: lastMessage, latestMessage: latestMessage, setActiveChannel: setActiveChannel, unread: unread })));
 };
 
-var SearchInput = function (props) {
-    var inputRef = props.inputRef, onSearch = props.onSearch, placeholder = props.placeholder, query = props.query;
-    var t = useTranslationContext('SearchInput').t;
-    return (React__default["default"].createElement("input", { className: 'str-chat__channel-search-input', "data-testid": 'search-input', onChange: onSearch, placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : t('Search'), ref: inputRef, type: 'text', value: query }));
-};
-
-var MenuIcon = function () { return (React__default["default"].createElement("svg", { "data-testid": 'menu-icon', fill: 'none', height: '24', viewBox: '0 0 24 24', width: '24', xmlns: 'http://www.w3.org/2000/svg' },
-    React__default["default"].createElement("path", { clipRule: 'evenodd', d: 'M3 8V6H21V8H3ZM3 13H21V11H3V13ZM3 18H21V16H3V18Z', fill: 'black', fillRule: 'evenodd' }))); };
-var ReturnIcon = function () { return (React__default["default"].createElement("svg", { "data-testid": 'return-icon', fill: 'none', height: '20', viewBox: '0 0 22 22', width: '20', xmlns: 'http://www.w3.org/2000/svg' },
-    React__default["default"].createElement("path", { d: 'M21.6668 9.66666V12.3333H5.6529L12.9932 19.6736L11.1076 21.5592L0.54834 11L11.1076 0.440765L12.9932 2.32638L5.6529 9.66666H21.6668Z', fill: '#080707' }))); };
-var XIcon = function () { return (React__default["default"].createElement("svg", { fill: 'none', height: '14', viewBox: '0 0 14 14', width: '14', xmlns: 'http://www.w3.org/2000/svg' },
-    React__default["default"].createElement("path", { d: 'M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z', fill: '#747881' }))); };
-var SearchIcon = function (_a) {
-    var className = _a.className;
-    return (React__default["default"].createElement("svg", { className: className, fill: 'none', height: '18', viewBox: '0 0 18 18', width: '18', xmlns: 'http://www.w3.org/2000/svg' },
-        React__default["default"].createElement("path", { d: 'M12.7549 11.255H11.9649L11.6849 10.985C12.6649 9.845 13.2549 8.365 13.2549 6.755C13.2549 3.165 10.3449 0.255005 6.75488 0.255005C3.16488 0.255005 0.254883 3.165 0.254883 6.755C0.254883 10.345 3.16488 13.255 6.75488 13.255C8.36488 13.255 9.84488 12.665 10.9849 11.685L11.2549 11.965V12.755L16.2549 17.745L17.7449 16.255L12.7549 11.255ZM6.75488 11.255C4.26488 11.255 2.25488 9.245 2.25488 6.755C2.25488 4.26501 4.26488 2.255 6.75488 2.255C9.24488 2.255 11.2549 4.26501 11.2549 6.755C11.2549 9.245 9.24488 11.255 6.75488 11.255Z', fill: '#747881' })));
-};
-
 var isChannel = function (output) { return output.cid != null; };
 
-var DefaultSearchEmpty = function () {
-    var t = useTranslationContext('SearchResults').t;
-    return (React__default["default"].createElement("div", { "aria-live": 'polite', className: 'str-chat__channel-search-container-empty' },
-        React__default["default"].createElement(SearchIcon, null),
-        t('No results found')));
-};
-var DefaultSearchResultsHeader = function (_a) {
-    var results = _a.results;
-    var t = useTranslationContext('SearchResultsHeader').t;
-    return (React__default["default"].createElement("div", { className: 'str-chat__channel-search-results-header', "data-testid": 'channel-search-results-header' }, t('searchResultsCount', {
-        count: results.length,
-    })));
-};
-var DefaultSearchResultsList = function (props) {
-    var focusedUser = props.focusedUser, results = props.results, _a = props.SearchResultItem, SearchResultItem = _a === void 0 ? DefaultSearchResultItem : _a, selectResult = props.selectResult;
-    return (React__default["default"].createElement(React__default["default"].Fragment, null, results.map(function (result, index) { return (React__default["default"].createElement(SearchResultItem, { focusedUser: focusedUser, index: index, key: index, result: result, selectResult: selectResult })); })));
-};
-var DefaultSearchResultItem = function (props) {
-    var _a, _b;
-    var focusedUser = props.focusedUser, index = props.index, result = props.result, selectResult = props.selectResult;
-    var focused = focusedUser === index;
-    var themeVersion = useChatContext().themeVersion;
-    var className = clsx('str-chat__channel-search-result', focused && 'str-chat__channel-search-result--focused focused');
-    if (isChannel(result)) {
-        var channel_1 = result;
-        return themeVersion === '2' ? (React__default["default"].createElement(ChannelPreview, { channel: channel_1, className: className, onSelect: function () { return selectResult(channel_1); } })) : (React__default["default"].createElement("button", { "aria-label": "Select Channel: ".concat(((_a = channel_1.data) === null || _a === void 0 ? void 0 : _a.name) || ''), className: className, "data-testid": 'channel-search-result-channel', onClick: function () { return selectResult(channel_1); }, role: 'option' },
-            React__default["default"].createElement("div", { className: 'result-hashtag' }, "#"),
-            React__default["default"].createElement("p", { className: 'channel-search__result-text' }, (_b = channel_1.data) === null || _b === void 0 ? void 0 : _b.name)));
-    }
-    else {
-        return (React__default["default"].createElement("button", { "aria-label": "Select User Channel: ".concat(result.name || ''), className: className, "data-testid": 'channel-search-result-user', onClick: function () { return selectResult(result); }, role: 'option' },
-            React__default["default"].createElement(Avatar, { image: result.image, name: result.name || result.id, size: themeVersion === '2' ? 40 : undefined, user: result }),
-            React__default["default"].createElement("div", { className: 'str-chat__channel-search-result--display-name' }, result.name || result.id)));
-    }
-};
-var ResultsContainer = function (_a) {
-    var children = _a.children, popupResults = _a.popupResults;
-    var containerStyle = popupResults ? 'popup' : 'inline';
-    return (React__default["default"].createElement("div", { "aria-label": 'Channel search results', className: "str-chat__channel-search-container str-chat__channel-search-result-list ".concat(containerStyle) }, children));
-};
-var SearchResults = function (props) {
-    var popupResults = props.popupResults, results = props.results, searching = props.searching, _a = props.SearchEmpty, SearchEmpty = _a === void 0 ? DefaultSearchEmpty : _a, _b = props.SearchResultsHeader, SearchResultsHeader = _b === void 0 ? DefaultSearchResultsHeader : _b, SearchLoading = props.SearchLoading, _c = props.SearchResultItem, SearchResultItem = _c === void 0 ? DefaultSearchResultItem : _c, _d = props.SearchResultsList, SearchResultsList = _d === void 0 ? DefaultSearchResultsList : _d, selectResult = props.selectResult;
-    var t = useTranslationContext('SearchResults').t;
-    var _e = React.useState(), focusedResult = _e[0], setFocusedResult = _e[1];
-    var handleKeyDown = React.useCallback(function (event) {
-        if (event.key === 'ArrowUp') {
-            setFocusedResult(function (prevFocused) {
-                if (prevFocused === undefined)
-                    return 0;
-                return prevFocused === 0 ? results.length - 1 : prevFocused - 1;
-            });
-        }
-        if (event.key === 'ArrowDown') {
-            setFocusedResult(function (prevFocused) {
-                if (prevFocused === undefined)
-                    return 0;
-                return prevFocused === results.length - 1 ? 0 : prevFocused + 1;
-            });
-        }
-        if (event.key === 'Enter') {
-            event.preventDefault();
-            if (focusedResult !== undefined) {
-                selectResult(results[focusedResult]);
-                return setFocusedResult(undefined);
-            }
-        }
-    }, [focusedResult]);
-    React.useEffect(function () {
-        document.addEventListener('keydown', handleKeyDown, false);
-        return function () { return document.removeEventListener('keydown', handleKeyDown); };
-    }, [handleKeyDown]);
-    if (searching) {
-        return (React__default["default"].createElement(ResultsContainer, { popupResults: popupResults }, SearchLoading ? (React__default["default"].createElement(SearchLoading, null)) : (React__default["default"].createElement("div", { className: 'str-chat__channel-search-container-searching', "data-testid": 'search-in-progress-indicator' }, t('Searching...')))));
-    }
-    if (!results.length) {
-        return (React__default["default"].createElement(ResultsContainer, { popupResults: popupResults },
-            React__default["default"].createElement(SearchEmpty, null)));
-    }
-    return (React__default["default"].createElement(ResultsContainer, { popupResults: popupResults },
-        React__default["default"].createElement(SearchResultsHeader, { results: results }),
-        React__default["default"].createElement(SearchResultsList, { focusedUser: focusedResult, results: results, SearchResultItem: SearchResultItem, selectResult: selectResult })));
-};
-
-var UnMemoizedChannelSearch = function (props) {
-    var clearState = props.clearState, SearchResultsList = props.SearchResultsList, inputRef = props.inputRef, onSearch = props.onSearch, placeholder = props.placeholder, _a = props.popupResults, popupResults = _a === void 0 ? false : _a, query = props.query, results = props.results, SearchEmpty = props.SearchEmpty, searching = props.searching, _b = props.SearchInput, SearchInput$1 = _b === void 0 ? SearchInput : _b, SearchLoading = props.SearchLoading, SearchResultItem = props.SearchResultItem, SearchResultsHeader = props.SearchResultsHeader, selectResult = props.selectResult;
-    return (React__default["default"].createElement("div", { className: 'str-chat__channel-search', "data-testid": 'channel-search' },
-        React__default["default"].createElement(SearchInput$1, { clearState: clearState, inputRef: inputRef, onSearch: onSearch, placeholder: placeholder, query: query }),
-        query && (React__default["default"].createElement(SearchResults, { popupResults: popupResults, results: results, SearchEmpty: SearchEmpty, searching: searching, SearchLoading: SearchLoading, SearchResultItem: SearchResultItem, SearchResultsHeader: SearchResultsHeader, SearchResultsList: SearchResultsList, selectResult: selectResult }))));
-};
-/**
- * The ChannelSearch component makes a query users call and displays the results in a list.
- * Clicking on a list item will navigate you into a channel with the selected user. It can be used
- * on its own or added to the ChannelList component by setting the `showChannelSearch` prop to true.
- */
-var ChannelSearch = React__default["default"].memo(UnMemoizedChannelSearch);
-
 var useChannelSearch = function (_a) {
-    var _b = _a.channelType, channelType = _b === void 0 ? 'messaging' : _b, _c = _a.clearSearchOnClickOutside, clearSearchOnClickOutside = _c === void 0 ? true : _c, _d = _a.enabled, enabled = _d === void 0 ? false : _d, onSelectResult = _a.onSelectResult, _e = _a.searchForChannels, searchForChannels = _e === void 0 ? false : _e, searchFunction = _a.searchFunction, searchQueryParams = _a.searchQueryParams, setChannels = _a.setChannels;
+    var _b = _a.channelType, channelType = _b === void 0 ? 'messaging' : _b, _c = _a.clearSearchOnClickOutside, clearSearchOnClickOutside = _c === void 0 ? true : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, onSearchCallback = _a.onSearch, onSearchExit = _a.onSearchExit, onSelectResult = _a.onSelectResult, _e = _a.searchForChannels, searchForChannels = _e === void 0 ? false : _e, searchFunction = _a.searchFunction, searchQueryParams = _a.searchQueryParams, setChannels = _a.setChannels;
     var _f = useChatContext('useChannelSearch'), client = _f.client, navOpen = _f.navOpen, setActiveChannel = _f.setActiveChannel, themeVersion = _f.themeVersion;
     var _g = React.useState(false), inputIsFocused = _g[0], setInputIsFocused = _g[1];
     var _h = React.useState(''), query = _h[0], setQuery = _h[1];
     var _j = React.useState([]), results = _j[0], setResults = _j[1];
-    var _k = React.useState(false), resultsOpen = _k[0], setResultsOpen = _k[1];
-    var _l = React.useState(false), searching = _l[0], setSearching = _l[1];
+    var _k = React.useState(false), searching = _k[0], setSearching = _k[1];
     var inputRef = React.useRef(null);
     var searchBarRef = React.useRef(null);
-    var clearState = function () {
+    var clearState = React.useCallback(function () {
         setQuery('');
         setResults([]);
-        setResultsOpen(false);
         setSearching(false);
-    };
-    var activateSearch = function () {
+    }, []);
+    var activateSearch = React.useCallback(function () {
         setInputIsFocused(true);
-    };
-    var exitSearch = function () {
+    }, []);
+    var exitSearch = React.useCallback(function () {
         var _a;
         setInputIsFocused(false);
         (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
         clearState();
-    };
+        onSearchExit === null || onSearchExit === void 0 ? void 0 : onSearchExit();
+    }, [clearState, onSearchExit]);
     React.useEffect(function () {
-        if (!enabled)
+        if (disabled)
             return;
         var clickListener = function (event) {
             var _a, _b;
@@ -12670,17 +12160,15 @@ var useChannelSearch = function (_a) {
                 : (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target);
             if (isInputClick)
                 return;
-            if ((navOpen && inputIsFocused) ||
-                (resultsOpen && clearSearchOnClickOutside) ||
-                (inputIsFocused && !query)) {
+            if ((inputIsFocused && (!query || navOpen)) || clearSearchOnClickOutside) {
                 exitSearch();
             }
         };
         document.addEventListener('click', clickListener);
         return function () { return document.removeEventListener('click', clickListener); };
-    }, [enabled, inputIsFocused, resultsOpen]);
+    }, [disabled, inputIsFocused]);
     React.useEffect(function () {
-        if (!(inputRef.current && enabled))
+        if (!inputRef.current || disabled)
             return;
         var handleKeyDown = function (event) {
             if (event.key === 'Escape')
@@ -12692,7 +12180,7 @@ var useChannelSearch = function (_a) {
             (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', handleKeyDown);
         };
     }, []);
-    var selectResult = function (result) { return __awaiter$1(void 0, void 0, void 0, function () {
+    var selectResult = React.useCallback(function (result) { return __awaiter$1(void 0, void 0, void 0, function () {
         var selectedChannel, newChannel;
         return __generator$1(this, function (_a) {
             switch (_a.label) {
@@ -12703,7 +12191,6 @@ var useChannelSearch = function (_a) {
                     return [4 /*yield*/, onSelectResult({
                             setQuery: setQuery,
                             setResults: setResults,
-                            setResultsOpen: setResultsOpen,
                             setSearching: setSearching,
                         }, result)];
                 case 1:
@@ -12725,13 +12212,13 @@ var useChannelSearch = function (_a) {
                 case 5:
                     setChannels(function (channels) { return uniqBy__default["default"](__spreadArray$1([selectedChannel], channels, true), 'cid'); });
                     if (clearSearchOnClickOutside) {
-                        clearState();
+                        exitSearch();
                     }
                     return [2 /*return*/];
             }
         });
-    }); };
-    var getChannels = function (text) { return __awaiter$1(void 0, void 0, void 0, function () {
+    }); }, [clearSearchOnClickOutside, client, exitSearch, onSelectResult]);
+    var getChannels = React.useCallback(function (text) { return __awaiter$1(void 0, void 0, void 0, function () {
         var userResponse, channelResponse, _a, channels, users_1, users, error_1;
         var _b, _c, _d, _e, _f, _g;
         return __generator$1(this, function (_h) {
@@ -12752,14 +12239,12 @@ var useChannelSearch = function (_a) {
                 case 3:
                     _a = _h.sent(), channels = _a[0], users_1 = _a[1].users;
                     setResults(__spreadArray$1(__spreadArray$1([], channels, true), users_1, true));
-                    setResultsOpen(true);
                     setSearching(false);
                     return [2 /*return*/];
                 case 4: return [4 /*yield*/, Promise.resolve(userResponse)];
                 case 5:
                     users = (_h.sent()).users;
                     setResults(users);
-                    setResultsOpen(true);
                     return [3 /*break*/, 7];
                 case 6:
                     error_1 = _h.sent();
@@ -12771,17 +12256,16 @@ var useChannelSearch = function (_a) {
                     return [2 /*return*/];
             }
         });
-    }); };
+    }); }, [client, searching]);
     var getChannelsThrottled = throttle__default["default"](getChannels, 200);
-    var onSearch = function (event) {
+    var onSearch = React.useCallback(function (event) {
         event.preventDefault();
-        if (!enabled)
+        if (disabled)
             return;
         if (searchFunction) {
             searchFunction({
                 setQuery: setQuery,
                 setResults: setResults,
-                setResultsOpen: setResultsOpen,
                 setSearching: setSearching,
             }, event);
         }
@@ -12789,7 +12273,8 @@ var useChannelSearch = function (_a) {
             setQuery(event.target.value);
             getChannelsThrottled(event.target.value);
         }
-    };
+        onSearchCallback === null || onSearchCallback === void 0 ? void 0 : onSearchCallback(event);
+    }, [disabled, getChannelsThrottled, searchFunction]);
     return {
         activateSearch: activateSearch,
         clearState: clearState,
@@ -12805,6 +12290,24 @@ var useChannelSearch = function (_a) {
     };
 };
 
+var MenuIcon = function () { return (React__default["default"].createElement("svg", { "data-testid": 'menu-icon', fill: 'none', height: '24', viewBox: '0 0 24 24', width: '24', xmlns: 'http://www.w3.org/2000/svg' },
+    React__default["default"].createElement("path", { clipRule: 'evenodd', d: 'M3 8V6H21V8H3ZM3 13H21V11H3V13ZM3 18H21V16H3V18Z', fill: 'black', fillRule: 'evenodd' }))); };
+var ReturnIcon = function () { return (React__default["default"].createElement("svg", { "data-testid": 'return-icon', fill: 'none', height: '20', viewBox: '0 0 22 22', width: '20', xmlns: 'http://www.w3.org/2000/svg' },
+    React__default["default"].createElement("path", { d: 'M21.6668 9.66666V12.3333H5.6529L12.9932 19.6736L11.1076 21.5592L0.54834 11L11.1076 0.440765L12.9932 2.32638L5.6529 9.66666H21.6668Z', fill: '#080707' }))); };
+var XIcon = function () { return (React__default["default"].createElement("svg", { fill: 'none', height: '14', viewBox: '0 0 14 14', width: '14', xmlns: 'http://www.w3.org/2000/svg' },
+    React__default["default"].createElement("path", { d: 'M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z', fill: '#747881' }))); };
+var SearchIcon = function (_a) {
+    var className = _a.className;
+    return (React__default["default"].createElement("svg", { className: className, fill: 'none', height: '18', viewBox: '0 0 18 18', width: '18', xmlns: 'http://www.w3.org/2000/svg' },
+        React__default["default"].createElement("path", { d: 'M12.7549 11.255H11.9649L11.6849 10.985C12.6649 9.845 13.2549 8.365 13.2549 6.755C13.2549 3.165 10.3449 0.255005 6.75488 0.255005C3.16488 0.255005 0.254883 3.165 0.254883 6.755C0.254883 10.345 3.16488 13.255 6.75488 13.255C8.36488 13.255 9.84488 12.665 10.9849 11.685L11.2549 11.965V12.755L16.2549 17.745L17.7449 16.255L12.7549 11.255ZM6.75488 11.255C4.26488 11.255 2.25488 9.245 2.25488 6.755C2.25488 4.26501 4.26488 2.255 6.75488 2.255C9.24488 2.255 11.2549 4.26501 11.2549 6.755C11.2549 9.245 9.24488 11.255 6.75488 11.255Z', fill: '#747881' })));
+};
+
+var SearchInput = function (props) {
+    var disabled = props.disabled, inputRef = props.inputRef, onSearch = props.onSearch, placeholder = props.placeholder, query = props.query;
+    var t = useTranslationContext('SearchInput').t;
+    return (React__default["default"].createElement("input", { className: 'str-chat__channel-search-input', "data-testid": 'search-input', disabled: disabled, onChange: onSearch, placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : t('Search'), ref: inputRef, type: 'text', value: query }));
+};
+
 var SearchBarButton = function (_a) {
     var children = _a.children, className = _a.className, onClick = _a.onClick;
     return (React__default["default"].createElement("button", { className: clsx('str-chat__channel-search-bar-button', className), "data-testid": 'search-bar-button', onClick: onClick }, children));
@@ -12856,7 +12359,7 @@ var SearchBar = function (props) {
     }, []);
     var handleClearClick = React.useCallback(function () {
         var _a;
-        inputProps.clearState();
+        exitSearch();
         (_a = inputProps.inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }, []);
     return (React__default["default"].createElement("div", { className: 'str-chat__channel-search-bar', "data-testid": 'search-bar', ref: searchBarRef },
@@ -12873,6 +12376,104 @@ var SearchBar = function (props) {
             React__default["default"].createElement(AppMenu, null)))));
 };
 
+var DefaultSearchEmpty = function () {
+    var t = useTranslationContext('SearchResults').t;
+    return (React__default["default"].createElement("div", { "aria-live": 'polite', className: 'str-chat__channel-search-container-empty' },
+        React__default["default"].createElement(SearchIcon, null),
+        t('No results found')));
+};
+var DefaultSearchResultsHeader = function (_a) {
+    var results = _a.results;
+    var t = useTranslationContext('SearchResultsHeader').t;
+    return (React__default["default"].createElement("div", { className: 'str-chat__channel-search-results-header', "data-testid": 'channel-search-results-header' }, t('searchResultsCount', {
+        count: results.length,
+    })));
+};
+var DefaultSearchResultsList = function (props) {
+    var focusedUser = props.focusedUser, results = props.results, _a = props.SearchResultItem, SearchResultItem = _a === void 0 ? DefaultSearchResultItem : _a, selectResult = props.selectResult;
+    return (React__default["default"].createElement(React__default["default"].Fragment, null, results.map(function (result, index) { return (React__default["default"].createElement(SearchResultItem, { focusedUser: focusedUser, index: index, key: index, result: result, selectResult: selectResult })); })));
+};
+var DefaultSearchResultItem = function (props) {
+    var _a, _b;
+    var focusedUser = props.focusedUser, index = props.index, result = props.result, selectResult = props.selectResult;
+    var focused = focusedUser === index;
+    var themeVersion = useChatContext().themeVersion;
+    var className = clsx('str-chat__channel-search-result', focused && 'str-chat__channel-search-result--focused focused');
+    if (isChannel(result)) {
+        var channel_1 = result;
+        return themeVersion === '2' ? (React__default["default"].createElement(ChannelPreview, { channel: channel_1, className: className, onSelect: function () { return selectResult(channel_1); } })) : (React__default["default"].createElement("button", { "aria-label": "Select Channel: ".concat(((_a = channel_1.data) === null || _a === void 0 ? void 0 : _a.name) || ''), className: className, "data-testid": 'channel-search-result-channel', onClick: function () { return selectResult(channel_1); }, role: 'option' },
+            React__default["default"].createElement("div", { className: 'result-hashtag' }, "#"),
+            React__default["default"].createElement("p", { className: 'channel-search__result-text' }, (_b = channel_1.data) === null || _b === void 0 ? void 0 : _b.name)));
+    }
+    else {
+        return (React__default["default"].createElement("button", { "aria-label": "Select User Channel: ".concat(result.name || ''), className: className, "data-testid": 'channel-search-result-user', onClick: function () { return selectResult(result); }, role: 'option' },
+            React__default["default"].createElement(Avatar, { image: result.image, name: result.name || result.id, size: themeVersion === '2' ? 40 : undefined, user: result }),
+            React__default["default"].createElement("div", { className: 'str-chat__channel-search-result--display-name' }, result.name || result.id)));
+    }
+};
+var ResultsContainer = function (_a) {
+    var children = _a.children, popupResults = _a.popupResults;
+    return (React__default["default"].createElement("div", { "aria-label": 'Channel search results', className: clsx("str-chat__channel-search-container str-chat__channel-search-result-list", popupResults ? 'popup' : 'inline') }, children));
+};
+var SearchResults = function (props) {
+    var popupResults = props.popupResults, results = props.results, searching = props.searching, _a = props.SearchEmpty, SearchEmpty = _a === void 0 ? DefaultSearchEmpty : _a, _b = props.SearchResultsHeader, SearchResultsHeader = _b === void 0 ? DefaultSearchResultsHeader : _b, SearchLoading = props.SearchLoading, _c = props.SearchResultItem, SearchResultItem = _c === void 0 ? DefaultSearchResultItem : _c, _d = props.SearchResultsList, SearchResultsList = _d === void 0 ? DefaultSearchResultsList : _d, selectResult = props.selectResult;
+    var t = useTranslationContext('SearchResults').t;
+    var _e = React.useState(), focusedResult = _e[0], setFocusedResult = _e[1];
+    var handleKeyDown = React.useCallback(function (event) {
+        if (event.key === 'ArrowUp') {
+            setFocusedResult(function (prevFocused) {
+                if (prevFocused === undefined)
+                    return 0;
+                return prevFocused === 0 ? results.length - 1 : prevFocused - 1;
+            });
+        }
+        if (event.key === 'ArrowDown') {
+            setFocusedResult(function (prevFocused) {
+                if (prevFocused === undefined)
+                    return 0;
+                return prevFocused === results.length - 1 ? 0 : prevFocused + 1;
+            });
+        }
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            if (focusedResult !== undefined) {
+                selectResult(results[focusedResult]);
+                return setFocusedResult(undefined);
+            }
+        }
+    }, [focusedResult]);
+    React.useEffect(function () {
+        document.addEventListener('keydown', handleKeyDown, false);
+        return function () { return document.removeEventListener('keydown', handleKeyDown); };
+    }, [handleKeyDown]);
+    if (searching) {
+        return (React__default["default"].createElement(ResultsContainer, { popupResults: popupResults }, SearchLoading ? (React__default["default"].createElement(SearchLoading, null)) : (React__default["default"].createElement("div", { className: 'str-chat__channel-search-container-searching', "data-testid": 'search-in-progress-indicator' }, t('Searching...')))));
+    }
+    if (!results.length) {
+        return (React__default["default"].createElement(ResultsContainer, { popupResults: popupResults },
+            React__default["default"].createElement(SearchEmpty, null)));
+    }
+    return (React__default["default"].createElement(ResultsContainer, { popupResults: popupResults },
+        React__default["default"].createElement(SearchResultsHeader, { results: results }),
+        React__default["default"].createElement(SearchResultsList, { focusedUser: focusedResult, results: results, SearchResultItem: SearchResultItem, selectResult: selectResult })));
+};
+
+var UnMemoizedChannelSearch = function (props) {
+    var AppMenu = props.AppMenu, ClearInputIcon = props.ClearInputIcon, ExitSearchIcon = props.ExitSearchIcon, MenuIcon = props.MenuIcon, placeholder = props.placeholder, _a = props.popupResults, popupResults = _a === void 0 ? false : _a, _b = props.SearchBar, SearchBar$1 = _b === void 0 ? SearchBar : _b, SearchEmpty = props.SearchEmpty, _c = props.SearchInput, SearchInput$1 = _c === void 0 ? SearchInput : _c, SearchLoading = props.SearchLoading, SearchInputIcon = props.SearchInputIcon, SearchResultItem = props.SearchResultItem, SearchResultsList = props.SearchResultsList, SearchResultsHeader = props.SearchResultsHeader, channelSearchParams = __rest(props, ["AppMenu", "ClearInputIcon", "ExitSearchIcon", "MenuIcon", "placeholder", "popupResults", "SearchBar", "SearchEmpty", "SearchInput", "SearchLoading", "SearchInputIcon", "SearchResultItem", "SearchResultsList", "SearchResultsHeader"]);
+    var themeVersion = useChatContext('ChannelSearch').themeVersion;
+    var _d = useChannelSearch(channelSearchParams), activateSearch = _d.activateSearch, clearState = _d.clearState, exitSearch = _d.exitSearch, inputIsFocused = _d.inputIsFocused, inputRef = _d.inputRef, onSearch = _d.onSearch, query = _d.query, results = _d.results, searchBarRef = _d.searchBarRef, searching = _d.searching, selectResult = _d.selectResult;
+    var showSearchBarV2 = themeVersion === '2';
+    return (React__default["default"].createElement("div", { className: 'str-chat__channel-search', "data-testid": 'channel-search' },
+        showSearchBarV2 ? (React__default["default"].createElement(SearchBar$1, { activateSearch: activateSearch, AppMenu: AppMenu, ClearInputIcon: ClearInputIcon, clearState: clearState, disabled: channelSearchParams.disabled, exitSearch: exitSearch, ExitSearchIcon: ExitSearchIcon, inputIsFocused: inputIsFocused, inputRef: inputRef, MenuIcon: MenuIcon, onSearch: onSearch, placeholder: placeholder, query: query, searchBarRef: searchBarRef, SearchInput: SearchInput$1, SearchInputIcon: SearchInputIcon })) : (React__default["default"].createElement(SearchInput$1, { clearState: clearState, disabled: channelSearchParams.disabled, inputRef: inputRef, onSearch: onSearch, placeholder: placeholder, query: query })),
+        query && (React__default["default"].createElement(SearchResults, { popupResults: popupResults, results: results, SearchEmpty: SearchEmpty, searching: searching, SearchLoading: SearchLoading, SearchResultItem: SearchResultItem, SearchResultsHeader: SearchResultsHeader, SearchResultsList: SearchResultsList, selectResult: selectResult }))));
+};
+/**
+ * The ChannelSearch component makes a query users call and displays the results in a list.
+ * Clicking on a list item will navigate you into a channel with the selected user. It can be used
+ * on its own or added to the ChannelList component by setting the `showChannelSearch` prop to true.
+ */
+var ChannelSearch = React__default["default"].memo(UnMemoizedChannelSearch);
+
 var ChatBubble = function () { return (React__default["default"].createElement("svg", { "data-testid": 'chat-bubble', fill: 'none', height: '96', viewBox: '0 0 136 136', width: '96', xmlns: 'http://www.w3.org/2000/svg' },
     React__default["default"].createElement("path", { d: 'M106 24.5H30C24.775 24.5 20.5 28.775 20.5 34V119.5L39.5 100.5H106C111.225 100.5 115.5 96.225 115.5 91V34C115.5 28.775 111.225 24.5 106 24.5ZM106 91H39.5L30 100.5V34H106V91Z', fill: '#B4B7BB' }))); };
 
@@ -12919,11 +12520,11 @@ var DEFAULT_FILTERS = {};
 var DEFAULT_OPTIONS = {};
 var DEFAULT_SORT = {};
 var UnMemoizedChannelList = function (props) {
-    var additionalChannelSearchProps = props.additionalChannelSearchProps, _a = props.Avatar, Avatar$1 = _a === void 0 ? Avatar : _a, allowNewMessagesFromUnfilteredChannels = props.allowNewMessagesFromUnfilteredChannels, channelRenderFilterFn = props.channelRenderFilterFn, _b = props.ChannelSearch, ChannelSearch$1 = _b === void 0 ? ChannelSearch : _b, customActiveChannel = props.customActiveChannel, _c = props.EmptyStateIndicator, EmptyStateIndicator$1 = _c === void 0 ? EmptyStateIndicator : _c, filters = props.filters, _d = props.LoadingErrorIndicator, LoadingErrorIndicator = _d === void 0 ? ChatDown : _d, _e = props.LoadingIndicator, LoadingIndicator = _e === void 0 ? LoadingChannels : _e, _f = props.List, List = _f === void 0 ? ChannelListMessenger : _f, lockChannelOrder = props.lockChannelOrder, onAddedToChannel = props.onAddedToChannel, onChannelDeleted = props.onChannelDeleted, onChannelHidden = props.onChannelHidden, onChannelTruncated = props.onChannelTruncated, onChannelUpdated = props.onChannelUpdated, onChannelVisible = props.onChannelVisible, onMessageNew = props.onMessageNew, onRemovedFromChannel = props.onRemovedFromChannel, options = props.options, _g = props.Paginator, Paginator = _g === void 0 ? LoadMorePaginator : _g, Preview = props.Preview, renderChannels = props.renderChannels, _h = props.SearchBar, SearchBar$1 = _h === void 0 ? SearchBar : _h, _j = props.sendChannelsToList, sendChannelsToList = _j === void 0 ? false : _j, _k = props.setActiveChannelOnMount, setActiveChannelOnMount = _k === void 0 ? true : _k, _l = props.showChannelSearch, showChannelSearch = _l === void 0 ? false : _l, _m = props.sort, sort = _m === void 0 ? DEFAULT_SORT : _m, _o = props.watchers, watchers = _o === void 0 ? {} : _o;
-    var _p = additionalChannelSearchProps || {}, AppMenu = _p.AppMenu, ClearInputIcon = _p.ClearInputIcon, ExitSearchIcon = _p.ExitSearchIcon, MenuIcon = _p.MenuIcon, placeholder = _p.placeholder, popupResults = _p.popupResults, SearchEmpty = _p.SearchEmpty, SearchInput = _p.SearchInput, SearchInputIcon = _p.SearchInputIcon, SearchLoading = _p.SearchLoading, SearchResultItem = _p.SearchResultItem, SearchResultsHeader = _p.SearchResultsHeader, SearchResultsList = _p.SearchResultsList, channelSearchParams = __rest(_p, ["AppMenu", "ClearInputIcon", "ExitSearchIcon", "MenuIcon", "placeholder", "popupResults", "SearchEmpty", "SearchInput", "SearchInputIcon", "SearchLoading", "SearchResultItem", "SearchResultsHeader", "SearchResultsList"]);
-    var _q = useChatContext('ChannelList'), channel = _q.channel, channelsQueryState = _q.channelsQueryState, client = _q.client, closeMobileNav = _q.closeMobileNav, customClasses = _q.customClasses, _r = _q.navOpen, navOpen = _r === void 0 ? false : _r, setActiveChannel = _q.setActiveChannel, theme = _q.theme, themeVersion = _q.themeVersion, useImageFlagEmojisOnWindows = _q.useImageFlagEmojisOnWindows;
+    var additionalChannelSearchProps = props.additionalChannelSearchProps, _a = props.Avatar, Avatar$1 = _a === void 0 ? Avatar : _a, allowNewMessagesFromUnfilteredChannels = props.allowNewMessagesFromUnfilteredChannels, channelRenderFilterFn = props.channelRenderFilterFn, _b = props.ChannelSearch, ChannelSearch$1 = _b === void 0 ? ChannelSearch : _b, customActiveChannel = props.customActiveChannel, _c = props.EmptyStateIndicator, EmptyStateIndicator$1 = _c === void 0 ? EmptyStateIndicator : _c, filters = props.filters, _d = props.LoadingErrorIndicator, LoadingErrorIndicator = _d === void 0 ? ChatDown : _d, _e = props.LoadingIndicator, LoadingIndicator = _e === void 0 ? LoadingChannels : _e, _f = props.List, List = _f === void 0 ? ChannelListMessenger : _f, lockChannelOrder = props.lockChannelOrder, onAddedToChannel = props.onAddedToChannel, onChannelDeleted = props.onChannelDeleted, onChannelHidden = props.onChannelHidden, onChannelTruncated = props.onChannelTruncated, onChannelUpdated = props.onChannelUpdated, onChannelVisible = props.onChannelVisible, onMessageNew = props.onMessageNew, onRemovedFromChannel = props.onRemovedFromChannel, options = props.options, _g = props.Paginator, Paginator = _g === void 0 ? LoadMorePaginator : _g, Preview = props.Preview, renderChannels = props.renderChannels, _h = props.sendChannelsToList, sendChannelsToList = _h === void 0 ? false : _h, _j = props.setActiveChannelOnMount, setActiveChannelOnMount = _j === void 0 ? true : _j, _k = props.showChannelSearch, showChannelSearch = _k === void 0 ? false : _k, _l = props.sort, sort = _l === void 0 ? DEFAULT_SORT : _l, _m = props.watchers, watchers = _m === void 0 ? {} : _m;
+    var _o = useChatContext('ChannelList'), channel = _o.channel, channelsQueryState = _o.channelsQueryState, client = _o.client, closeMobileNav = _o.closeMobileNav, customClasses = _o.customClasses, _p = _o.navOpen, navOpen = _p === void 0 ? false : _p, setActiveChannel = _o.setActiveChannel, theme = _o.theme, useImageFlagEmojisOnWindows = _o.useImageFlagEmojisOnWindows;
     var channelListRef = React.useRef(null);
-    var _s = React.useState(0), channelUpdateCount = _s[0], setChannelUpdateCount = _s[1];
+    var _q = React.useState(0), channelUpdateCount = _q[0], setChannelUpdateCount = _q[1];
+    var _r = React.useState(false), searchActive = _r[0], setSearchActive = _r[1];
     /**
      * Set a channel with id {customActiveChannel} as active and move it to the top of the list.
      * If customActiveChannel prop is absent, then set the first channel in list as active channel.
@@ -12968,9 +12569,22 @@ var UnMemoizedChannelList = function (props) {
      * force a re-render. Incrementing this dummy variable ensures the channel previews update.
      */
     var forceUpdate = function () { return setChannelUpdateCount(function (count) { return count + 1; }); };
-    var _t = usePaginatedChannels(client, filters || DEFAULT_FILTERS, sort || DEFAULT_SORT, options || DEFAULT_OPTIONS, activeChannelHandler), channels = _t.channels, hasNextPage = _t.hasNextPage, loadNextPage = _t.loadNextPage, setChannels = _t.setChannels;
-    var channelSearchController = useChannelSearch(__assign({ enabled: showChannelSearch, setChannels: setChannels }, channelSearchParams));
-    var activateSearch = channelSearchController.activateSearch, clearState = channelSearchController.clearState, exitSearch = channelSearchController.exitSearch, inputIsFocused = channelSearchController.inputIsFocused, inputRef = channelSearchController.inputRef, onSearch = channelSearchController.onSearch, query = channelSearchController.query, results = channelSearchController.results, searchBarRef = channelSearchController.searchBarRef, searching = channelSearchController.searching, selectResult = channelSearchController.selectResult;
+    var onSearch = React.useCallback(function (event) {
+        var _a;
+        if (!event.target.value) {
+            setSearchActive(false);
+        }
+        else {
+            setSearchActive(true);
+        }
+        (_a = additionalChannelSearchProps === null || additionalChannelSearchProps === void 0 ? void 0 : additionalChannelSearchProps.onSearch) === null || _a === void 0 ? void 0 : _a.call(additionalChannelSearchProps, event);
+    }, []);
+    var onSearchExit = React.useCallback(function () {
+        var _a;
+        setSearchActive(false);
+        (_a = additionalChannelSearchProps === null || additionalChannelSearchProps === void 0 ? void 0 : additionalChannelSearchProps.onSearchExit) === null || _a === void 0 ? void 0 : _a.call(additionalChannelSearchProps);
+    }, []);
+    var _s = usePaginatedChannels(client, filters || DEFAULT_FILTERS, sort || DEFAULT_SORT, options || DEFAULT_OPTIONS, activeChannelHandler), channels = _s.channels, hasNextPage = _s.hasNextPage, loadNextPage = _s.loadNextPage, setChannels = _s.setChannels;
     var loadedChannels = channelRenderFilterFn ? channelRenderFilterFn(channels) : channels;
     useMobileNavigation(channelListRef, navOpen, closeMobileNav);
     useMessageNewListener(setChannels, lockChannelOrder, allowNewMessagesFromUnfilteredChannels);
@@ -13015,12 +12629,11 @@ var UnMemoizedChannelList = function (props) {
         'str-chat--windows-flags': useImageFlagEmojisOnWindows && navigator.userAgent.match(/Win/),
         'str-chat-channel-list--open': navOpen,
     });
-    var showSearchV2 = themeVersion === '2' && !popupResults;
+    var showChannelList = !searchActive || (additionalChannelSearchProps === null || additionalChannelSearchProps === void 0 ? void 0 : additionalChannelSearchProps.popupResults);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement("div", { className: className, ref: channelListRef },
-            showChannelSearch &&
-                (showSearchV2 ? (React__default["default"].createElement(SearchBar$1, { activateSearch: activateSearch, AppMenu: AppMenu, ClearInputIcon: ClearInputIcon, clearState: clearState, exitSearch: exitSearch, ExitSearchIcon: ExitSearchIcon, inputIsFocused: inputIsFocused, inputRef: inputRef, MenuIcon: MenuIcon, onSearch: onSearch, placeholder: placeholder, query: query, searchBarRef: searchBarRef, SearchInputIcon: SearchInputIcon })) : (React__default["default"].createElement(ChannelSearch$1, __assign({ placeholder: placeholder, popupResults: popupResults, SearchEmpty: SearchEmpty, SearchInput: SearchInput, SearchLoading: SearchLoading, SearchResultItem: SearchResultItem, SearchResultsHeader: SearchResultsHeader, SearchResultsList: SearchResultsList }, channelSearchController)))),
-            query && showSearchV2 ? (React__default["default"].createElement(SearchResults, { results: results, SearchEmpty: SearchEmpty, searching: searching, SearchLoading: SearchLoading, SearchResultItem: SearchResultItem, SearchResultsHeader: SearchResultsHeader, SearchResultsList: SearchResultsList, selectResult: selectResult })) : (React__default["default"].createElement(List, { error: channelsQueryState.error, loadedChannels: sendChannelsToList ? loadedChannels : undefined, loading: channelsQueryState.queryInProgress === 'reload', LoadingErrorIndicator: LoadingErrorIndicator, LoadingIndicator: LoadingIndicator, setChannels: setChannels }, !(loadedChannels === null || loadedChannels === void 0 ? void 0 : loadedChannels.length) ? (React__default["default"].createElement(EmptyStateIndicator$1, { listType: 'channel' })) : (React__default["default"].createElement(Paginator, { hasNextPage: hasNextPage, loadNextPage: loadNextPage, refreshing: channelsQueryState.queryInProgress === 'load-more' }, renderChannels
+            showChannelSearch && (React__default["default"].createElement(ChannelSearch$1, __assign({ onSearch: onSearch, onSearchExit: onSearchExit, setChannels: setChannels }, additionalChannelSearchProps))),
+            showChannelList && (React__default["default"].createElement(List, { error: channelsQueryState.error, loadedChannels: sendChannelsToList ? loadedChannels : undefined, loading: channelsQueryState.queryInProgress === 'reload', LoadingErrorIndicator: LoadingErrorIndicator, LoadingIndicator: LoadingIndicator, setChannels: setChannels }, !(loadedChannels === null || loadedChannels === void 0 ? void 0 : loadedChannels.length) ? (React__default["default"].createElement(EmptyStateIndicator$1, { listType: 'channel' })) : (React__default["default"].createElement(Paginator, { hasNextPage: hasNextPage, loadNextPage: loadNextPage, refreshing: channelsQueryState.queryInProgress === 'load-more' }, renderChannels
                 ? renderChannels(loadedChannels, renderChannel)
                 : loadedChannels.map(function (channel) { return renderChannel(channel); }))))))));
 };
@@ -13029,7 +12642,7 @@ var UnMemoizedChannelList = function (props) {
  */
 var ChannelList = React__default["default"].memo(UnMemoizedChannelList);
 
-var version = '10.0.0-theming-v2.2';
+var version = '10.0.1';
 
 var useChat = function (_a) {
     var _b, _c;
@@ -15010,6 +14623,20 @@ var UnMemoizedWindow = function (props) {
  */
 var Window = React__default["default"].memo(UnMemoizedWindow);
 
+// @ts-expect-error
+
+var DefaultEmoji = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    'default': nimbleEmoji__default["default"]
+});
+
+// @ts-expect-error
+
+var DefaultEmojiPicker = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    'default': nimblePicker__default["default"]
+});
+
 exports.ATTACHMENT_GROUPS_ORDER = ATTACHMENT_GROUPS_ORDER;
 exports.ActionsIcon = ActionsIcon;
 exports.Attachment = Attachment;
@@ -15110,6 +14737,7 @@ exports.ModalGallery = ModalGallery;
 exports.PinIcon = PinIcon;
 exports.PinIndicator = PinIndicator;
 exports.PlayButton = PlayButton;
+exports.PopperTooltip = PopperTooltip;
 exports.ProgressBar = ProgressBar;
 exports.QuotedMessagePreview = QuotedMessagePreview;
 exports.QuotedMessagePreviewHeader = QuotedMessagePreviewHeader;