stream-chat-react 6.12.0 → 7.0.0

package/dist/index.cjs.js

@@ -10,7 +10,7 @@ var calendar = require('dayjs/plugin/calendar');
 var localizedFormat = require('dayjs/plugin/localizedFormat');
 var prettybytes = require('pretty-bytes');
 var reactFileUtils = require('react-file-utils');
-var Carousel = require('react-images');
+var ImageGallery = require('react-image-gallery');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var emojiRegex = require('emoji-regex');
@@ -84,7 +84,7 @@ var Dayjs__default = /*#__PURE__*/_interopDefaultLegacy(Dayjs);
 var calendar__default = /*#__PURE__*/_interopDefaultLegacy(calendar);
 var localizedFormat__default = /*#__PURE__*/_interopDefaultLegacy(localizedFormat);
 var prettybytes__default = /*#__PURE__*/_interopDefaultLegacy(prettybytes);
-var Carousel__default = /*#__PURE__*/_interopDefaultLegacy(Carousel);
+var ImageGallery__default = /*#__PURE__*/_interopDefaultLegacy(ImageGallery);
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
 var emojiRegex__default = /*#__PURE__*/_interopDefaultLegacy(emojiRegex);
@@ -251,9 +251,9 @@ var UnMemoizedAudio = function (props) {
             React__default['default'].createElement("audio", { ref: audioRef },
                 React__default['default'].createElement("source", { "data-testid": 'audio-source', src: asset_url, type: 'audio/mp3' })),
             React__default['default'].createElement("div", { className: 'str-chat__audio__image' },
-                React__default['default'].createElement("div", { className: 'str-chat__audio__image--overlay' }, !isPlaying ? (React__default['default'].createElement("div", { className: 'str-chat__audio__image--button', "data-testid": 'play-audio', onClick: function () { return setIsPlaying(true); } },
+                React__default['default'].createElement("div", { className: 'str-chat__audio__image--overlay' }, !isPlaying ? (React__default['default'].createElement("button", { className: 'str-chat__audio__image--button', "data-testid": 'play-audio', onClick: function () { return setIsPlaying(true); } },
                     React__default['default'].createElement("svg", { height: '40', viewBox: '0 0 64 64', width: '40', xmlns: 'http://www.w3.org/2000/svg' },
-                        React__default['default'].createElement("path", { d: 'M32 58c14.36 0 26-11.64 26-26S46.36 6 32 6 6 17.64 6 32s11.64 26 26 26zm0 6C14.327 64 0 49.673 0 32 0 14.327 14.327 0 32 0c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32zm13.237-28.412L26.135 45.625a3.27 3.27 0 0 1-4.426-1.4 3.319 3.319 0 0 1-.372-1.47L21 23.36c-.032-1.823 1.41-3.327 3.222-3.358a3.263 3.263 0 0 1 1.473.322l19.438 9.36a3.311 3.311 0 0 1 .103 5.905z', fillRule: 'nonzero' })))) : (React__default['default'].createElement("div", { className: 'str-chat__audio__image--button', "data-testid": 'pause-audio', onClick: function () { return setIsPlaying(false); } },
+                        React__default['default'].createElement("path", { d: 'M32 58c14.36 0 26-11.64 26-26S46.36 6 32 6 6 17.64 6 32s11.64 26 26 26zm0 6C14.327 64 0 49.673 0 32 0 14.327 14.327 0 32 0c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32zm13.237-28.412L26.135 45.625a3.27 3.27 0 0 1-4.426-1.4 3.319 3.319 0 0 1-.372-1.47L21 23.36c-.032-1.823 1.41-3.327 3.222-3.358a3.263 3.263 0 0 1 1.473.322l19.438 9.36a3.311 3.311 0 0 1 .103 5.905z', fillRule: 'nonzero' })))) : (React__default['default'].createElement("button", { className: 'str-chat__audio__image--button', "data-testid": 'pause-audio', onClick: function () { return setIsPlaying(false); } },
                     React__default['default'].createElement("svg", { height: '40', viewBox: '0 0 64 64', width: '40', xmlns: 'http://www.w3.org/2000/svg' },
                         React__default['default'].createElement("path", { d: 'M32 58.215c14.478 0 26.215-11.737 26.215-26.215S46.478 5.785 32 5.785 5.785 17.522 5.785 32 17.522 58.215 32 58.215zM32 64C14.327 64 0 49.673 0 32 0 14.327 14.327 0 32 0c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32zm-7.412-45.56h2.892a2.17 2.17 0 0 1 2.17 2.17v23.865a2.17 2.17 0 0 1-2.17 2.17h-2.892a2.17 2.17 0 0 1-2.17-2.17V20.61a2.17 2.17 0 0 1 2.17-2.17zm12.293 0h2.893a2.17 2.17 0 0 1 2.17 2.17v23.865a2.17 2.17 0 0 1-2.17 2.17h-2.893a2.17 2.17 0 0 1-2.17-2.17V20.61a2.17 2.17 0 0 1 2.17-2.17z', fillRule: 'nonzero' }))))),
                 image_url && React__default['default'].createElement("img", { alt: "" + description, src: image_url })),
@@ -274,12 +274,10 @@ var UnMemoizedSafeAnchor = function (props) {
     if (!href)
         return null;
     var sanitized = sanitizeUrl.sanitizeUrl(href);
-    return (React__default['default'].createElement("a", { className: className, download: download, href: sanitized, rel: rel, target: target }, children));
+    return (React__default['default'].createElement("a", { "aria-label": 'Attachment', className: className, download: download, href: sanitized, rel: rel, target: target }, children));
 };
 var SafeAnchor = React__default['default'].memo(UnMemoizedSafeAnchor);
 
-var img$1 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAkCAYAAAB/up84AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABVhJREFUeNrsW6GS20AMdToGBgEGAQYBBgEBBQYFgQcP5hMO9jP6CYWFBwsPBgYUGBQEFAQUGAQYBBgYGHjmutt5O6NupbXXcZJrx5rJXGyv11o96Ukr52avr6/BJG9HZmMBMpvNYnxt1JzNZNoRAYFxM2Z8rT6FuueMcaH6s1KfhBn3U42r1Jg1rrfq+Bt5xgf1Z64+uQFQndNzLc1Ydfwg6F2p6wd1PVXfU+b6Gc9vHGuh8+jrsXVN61Sq64XggNw95tlH9XmP6y3W2OI+qvN3db6mN7/zBFAb8L2aNMJxRsDQC6jIuEyN039LnAvV8QJKRRijZUHmT8iiLpEFDHKJaB1TGN732WuAokEIDQCwhwGjsMEIMNgp6qY9JlsTgyXquCFG1d54IsbOsKAVPLDBcQJjUxB0RJwAltGntNQ46GhzqPnb0y0954RG/1iLQ7SRCkR+guiPtW6GFRg5gAlCrFvbJEZ0ngDAUn0/Y77fDCJFXuiB/AmGDC3PLg0YWLRW5CcJWWPglNxDKS6C59AcZBs/sYxbOQBqHHkuZYCsGCds4SQJDDx3RK3RjUb9EfMUcLQ57BHS64MAIYtYkvEt+d4wCzqr++ipkoTtkihOI2chREfA5KiC0GOAaMig05zoWJPjgMk39jxcPphDR0mSDrtq438g51iq8omQlEnYJfHoiAFxYQGko6bCPSmZ5wS+TRx0Zc5R4CtmHbEVJT+0p1uOYdNE1SMfOKNO0zXWEmItptApsfYa1LV0UZUPIHSCmlRYJhfokNWhX5IcsmIWbEAMCQWerWirhZK57MghNQyzgke3QuQWPUv4EAac9wCuJjmkNmvUNEwiobX+DgdEWoQGgNDPGtTWWhRRWONX5JlnePCZhP1JUCOzPN1O0C2MohP7xuiko8Qy9INUDBg2YPJMlzP8pRv0qYeUdu+Cy+RAKIYmtVqojM5kkS0DwkXlLuY0ICzgAEOlAd8fPe+rYJdppz61TiZ5G4AgcScWz05RcUtAkOwyJMtI4FzNt3suCWKfwLUhdqRC0yA/enB1CZ4vBZ2fhIptJ4x/5PYVavyzQ39N0V8ddnsQ+m3sfX02hjo3bIVJ7d5PhqojZxYdC3NEdv9oQMQWFFjHHqpLEsc9BZyF23c9cG0ZOJjUIN15V1mY8OOAhW0E77yWaP2eoO9VBFG/d6yX6/xuHT2z3AsQ5ImnjrZBF6XcUiKAEl0RlJzZ7ZtnbxmqSgRqfxmyD9k6wNDGzuExecB3Z1/ukBOjQH73MZbspChFp9nQ/EYY9+LaaIYOqlo7JjwISX+LcBwbjAOz2ZKS7BpOcq0o0R2HvZAbHpHPJGc+dm00paQuedmOA4O0WD5fyQ4V08Ip4ATxhYl8CCh76/0QLVyehlBVFyCpYJTcKmPjHoY8XNE2VQ8dbIkdr4Z95npBwcNVahKzNEMBSYSyz46iLm8sLunreG5O+xYTsaMUHYu6bMn79sRCT2+8l6SMV2cCT5e3UspBXbbd9n3nDIN/Q1KP3JDfWLcd8kZwCVX12hjeOlmOIMe+L6FGjJLC4QS5rz6hg/tThjZiU0Pr/g7D65/uCUafKgaUJu0lHjvox/XsjXA+GAOQUogIXV8/v7GoKOGJfYuHxvHjt7t3rEMHD2+E5PoR+5GCLCS+8g6Z2xgGt6anuwGC99MSKAl6RrfUs/ofje+b1PcjlJBlMMk4gKBUe77AqKVP/T1Jj30IQPmCTdkm6NeKb5BkJzCGdCA8XuFGZIOWCBEh/mwGiZ/rFZXk3xHEdkjHb6MknVOhypJe+Sac03XlL4fe3r81mH518q9GyCS3kV8CDADlsrVaJhTLAgAAAABJRU5ErkJggg==";
-
 var getDisplayName = function (Component) {
     return Component.displayName || Component.name || 'Component';
 };
@@ -351,8 +349,7 @@ var UnMemoizedCard = function (props) {
             React__default['default'].createElement("div", { className: 'str-chat__message-attachment-card--flex' },
                 title && React__default['default'].createElement("div", { className: 'str-chat__message-attachment-card--title' }, title),
                 text && React__default['default'].createElement("div", { className: 'str-chat__message-attachment-card--text' }, text),
-                (title_link || og_scrape_url) && (React__default['default'].createElement(SafeAnchor, { className: 'str-chat__message-attachment-card--url', href: title_link || og_scrape_url, rel: 'noopener noreferrer', target: '_blank' }, trimUrl(title_link || og_scrape_url)))),
-            type === 'giphy' && (React__default['default'].createElement("img", { alt: 'giphy logo', className: 'str-chat__message-attachment-card__giphy-logo', "data-testid": 'card-giphy', src: img$1 })))));
+                (title_link || og_scrape_url) && (React__default['default'].createElement(SafeAnchor, { className: 'str-chat__message-attachment-card--url', href: title_link || og_scrape_url, rel: 'noopener noreferrer', target: '_blank' }, trimUrl(title_link || og_scrape_url)))))));
 };
 /**
  * Simple Card Layout for displaying links
@@ -369,19 +366,46 @@ var UnMemoizedFileAttachment = function (props) {
 };
 var FileAttachment = React__default['default'].memo(UnMemoizedFileAttachment);
 
-var ModalImage = function (props) {
-    var data = props.data;
-    return (React__default['default'].createElement("div", { className: 'str-chat__modal-image__wrapper', "data-testid": 'modal-image' },
-        React__default['default'].createElement("img", { className: 'str-chat__modal-image__image', src: data.source })));
+var Modal = function (props) {
+    var children = props.children, onClose = props.onClose, open = props.open;
+    var t = useTranslationContext('Modal').t;
+    var innerRef = React.useRef(null);
+    var closeRef = React.useRef(null);
+    var handleClick = function (event) {
+        var _a, _b;
+        if ((event.target instanceof HTMLDivElement &&
+            !((_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) &&
+            onClose) ||
+            (event.target instanceof HTMLButtonElement &&
+                ((_b = closeRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target)) &&
+                onClose)) {
+            onClose();
+        }
+    };
+    React.useEffect(function () {
+        if (!open)
+            return function () { return null; };
+        var handleEscKey = function (event) {
+            if (event instanceof KeyboardEvent && event.key === 'Escape' && onClose) {
+                onClose();
+            }
+        };
+        document.addEventListener('keypress', handleEscKey);
+        return function () { return document.removeEventListener('keypress', handleEscKey); };
+    }, [onClose, open]);
+    var openClasses = open ? 'str-chat__modal--open' : 'str-chat__modal--closed';
+    return (React__default['default'].createElement("div", { className: "str-chat__modal " + openClasses, onClick: handleClick },
+        React__default['default'].createElement("button", { className: 'str-chat__modal__close-button', ref: closeRef, title: 'Close' },
+            t('Close'),
+            React__default['default'].createElement("svg", { height: '10', width: '10', xmlns: 'http://www.w3.org/2000/svg' },
+                React__default['default'].createElement("path", { d: 'M9.916 1.027L8.973.084 5 4.058 1.027.084l-.943.943L4.058 5 .084 8.973l.943.943L5 5.942l3.973 3.974.943-.943L5.942 5z', fillRule: 'evenodd' }))),
+        React__default['default'].createElement("div", { className: 'str-chat__modal__inner', ref: innerRef }, children)));
 };
 
 var ModalComponent = function (props) {
     var images = props.images, index = props.index, modalIsOpen = props.modalIsOpen, toggleModal = props.toggleModal;
-    return (React__default['default'].createElement(Carousel.ModalGateway, null, modalIsOpen ? (React__default['default'].createElement(Carousel.Modal, { onClose: toggleModal },
-        React__default['default'].createElement(Carousel__default['default'], { components: {
-                // @ts-expect-error
-                View: ModalImage,
-            }, currentIndex: index, views: images }))) : null));
+    return (React__default['default'].createElement(Modal, { onClose: toggleModal, open: modalIsOpen },
+        React__default['default'].createElement(ImageGallery__default['default'], { items: images, showIndex: true, showPlayButton: false, showThumbnails: false, startIndex: index })));
 };
 
 var UnMemoizedGallery = function (props) {
@@ -400,14 +424,16 @@ var UnMemoizedGallery = function (props) {
     };
     var formattedArray = React.useMemo(function () {
         return images.map(function (image) { return ({
+            original: image.image_url || image.thumb_url || '',
+            originalAlt: 'User uploaded content',
             source: image.image_url || image.thumb_url || '',
         }); });
     }, [images]);
-    var renderImages = images.slice(0, 3).map(function (image, i) { return (React__default['default'].createElement("div", { className: 'str-chat__gallery-image', "data-testid": 'gallery-image', key: "gallery-image-" + i, onClick: function () { return toggleModal(i); } },
-        React__default['default'].createElement("img", { src: image.image_url || image.thumb_url }))); });
+    var renderImages = images.slice(0, 3).map(function (image, i) { return (React__default['default'].createElement("button", { className: 'str-chat__gallery-image', "data-testid": 'gallery-image', key: "gallery-image-" + i, onClick: function () { return toggleModal(i); } },
+        React__default['default'].createElement("img", { alt: 'User uploaded content', src: image.image_url || image.thumb_url }))); });
     return (React__default['default'].createElement("div", { className: "str-chat__gallery " + (images.length > 3 ? 'str-chat__gallery--square' : '') },
         renderImages,
-        images.length > 3 && (React__default['default'].createElement("div", { className: 'str-chat__gallery-placeholder', onClick: function () { return toggleModal(3); }, style: {
+        images.length > 3 && (React__default['default'].createElement("button", { className: 'str-chat__gallery-placeholder', onClick: function () { return toggleModal(3); }, style: {
                 backgroundImage: "url(" + images[3].image_url + ")",
             } },
             React__default['default'].createElement("p", null, t('{{ imageCount }} more', {
@@ -427,10 +453,12 @@ var ImageComponent = function (props) {
     var _a = React.useState(false), modalIsOpen = _a[0], setModalIsOpen = _a[1];
     var fallback = props.fallback, image_url = props.image_url, thumb_url = props.thumb_url;
     var imageSrc = sanitizeUrl.sanitizeUrl(image_url || thumb_url);
-    var formattedArray = [{ source: imageSrc }];
+    var formattedArray = [
+        { original: imageSrc, originalAlt: 'User uploaded content', source: imageSrc },
+    ];
     var toggleModal = function () { return setModalIsOpen(!modalIsOpen); };
     return (React__default['default'].createElement(React__default['default'].Fragment, null,
-        React__default['default'].createElement("img", { alt: fallback, className: 'str-chat__message-attachment--img', "data-testid": 'image-test', onClick: toggleModal, src: imageSrc }),
+        React__default['default'].createElement("img", { alt: fallback, className: 'str-chat__message-attachment--img', "data-testid": 'image-test', onClick: toggleModal, onKeyPress: toggleModal, src: imageSrc, tabIndex: 0 }),
         React__default['default'].createElement(ModalComponent, { images: formattedArray, index: 0, modalIsOpen: modalIsOpen, toggleModal: toggleModal })));
 };
 
@@ -603,14 +631,12 @@ var Item = /*#__PURE__*/React__default['default'].forwardRef(function Item(props
   return /*#__PURE__*/React__default['default'].createElement("li", {
     className: "rta__item ".concat(className || ''),
     style: style
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
+  }, /*#__PURE__*/React__default['default'].createElement("button", {
     className: "rta__entity ".concat(selected ? 'rta__entity--selected' : ''),
     onClick: onClickHandler,
     onFocus: selectItem,
     onMouseEnter: selectItem,
-    ref: innerRef,
-    role: "button",
-    tabIndex: 0
+    ref: innerRef
   }, /*#__PURE__*/React__default['default'].createElement(Component, {
     entity: item,
     selected: selected
@@ -687,6 +713,23 @@ var messageCodeBlocks = function (message) {
     var matches = message.match(codeRegex);
     return matches || [];
 };
+var detectHttp = /(http(s?):\/\/)?(www\.)?/;
+function formatUrlForDisplay(url) {
+    try {
+        return decodeURIComponent(url).replace(detectHttp, '');
+    }
+    catch (e) {
+        return url;
+    }
+}
+function encodeDecode(url) {
+    try {
+        return encodeURI(decodeURIComponent(url));
+    }
+    catch (error) {
+        return url;
+    }
+}
 var markDownRenderers = {
     // eslint-disable-next-line react/display-name
     link: function (props) {
@@ -751,7 +794,6 @@ var renderText = function (text, mentioned_users, options) {
     var newText = text;
     var markdownLinks = matchMarkdownLinks(newText);
     var codeBlocks = messageCodeBlocks(newText);
-    var detectHttp = /(http(s?):\/\/)?(www\.)?/;
     // extract all valid links/emails within text and replace it with proper markup
     uniqBy__default['default'](linkify__namespace.find(newText), 'value').forEach(function (_a) {
         var href = _a.href, type = _a.type, value = _a.value;
@@ -767,8 +809,12 @@ var renderText = function (text, mentioned_users, options) {
             });
         if (noParsingNeeded.length > 0 || linkIsInBlock)
             return;
-        var displayLink = type === 'email' ? value : value.replace(detectHttp, '');
-        newText = newText.replace(new RegExp(escapeRegExp(value), 'g'), "[" + displayLink + "](" + encodeURI(decodeURI(href)) + ")");
+        try {
+            var displayLink = type === 'email' ? value : formatUrlForDisplay(href);
+            newText = newText.replace(new RegExp(escapeRegExp(value), 'g'), "[" + displayLink + "](" + encodeDecode(href) + ")");
+        }
+        catch (e) {
+        }
     });
     var plugins = [emojiMarkdownPlugin];
     if (mentioned_users === null || mentioned_users === void 0 ? void 0 : mentioned_users.length) {
@@ -1028,7 +1074,6 @@ var List = function List(props) {
 
     if ((event.which === KEY_CODES.ENTER || event.which === KEY_CODES.TAB) && selectedItem !== undefined) {
       handleClick(event);
-      return setSelectedItem(undefined);
     }
 
     return null;
@@ -1537,13 +1582,6 @@ var ReactTextareaAutocomplete = /*#__PURE__*/function (_React$Component) {
       return data;
     });
 
-    _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "_createRegExp", function () {
-      var trigger = _this.props.trigger; // negative lookahead to match only the trigger + the actual token = "bladhwd:adawd:word test" => ":word"
-      // https://stackoverflow.com/a/8057827/2719917
-
-      _this.tokenRegExp = new RegExp("([".concat(Object.keys(trigger).join(''), "])(?:(?!\\1)[^\\s])*$"));
-    });
-
     _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "_closeAutocomplete", function () {
       _this.setState({
         currentTrigger: null,
@@ -1762,8 +1800,6 @@ var ReactTextareaAutocomplete = /*#__PURE__*/function (_React$Component) {
         _value = _this$props6.value; // TODO: it would be better to have the parent control state...
     // if (value) this.state.value = value;
 
-    _this._createRegExp();
-
     if (!loadingComponent) {
       throw new Error('RTA: loadingComponent is not defined');
     }
@@ -1818,40 +1854,12 @@ var ReactTextareaAutocomplete = /*#__PURE__*/function (_React$Component) {
       });
       Listeners.startListen();
     }
-  }, {
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      this._update(nextProps);
-    }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       Listeners.stopListen();
       Listeners.remove(this.state.listenerIndex);
     }
-  }, {
-    key: "_update",
-    value: // TODO: This is an anti pattern in react, should come up with a better way
-    function _update(_ref) {
-      var trigger = _ref.trigger,
-          value = _ref.value;
-      var oldValue = this.state.value;
-      var oldTrigger = this.props.trigger;
-      if (value !== oldValue || !oldValue) this.setState({
-        value: value
-      });
-      /**
-       * check if trigger chars are changed, if so, change the regexp accordingly
-       */
-
-      if (Object.keys(trigger).join('') !== Object.keys(oldTrigger).join('')) {
-        this._createRegExp();
-      }
-    }
-    /**
-     * Close autocomplete, also clean up trigger (to avoid slow promises)
-     */
-
   }, {
     key: "renderSuggestionListContainer",
     value: function renderSuggestionListContainer() {
@@ -1872,8 +1880,8 @@ var ReactTextareaAutocomplete = /*#__PURE__*/function (_React$Component) {
       if (triggerProps.values && triggerProps.currentTrigger && !(disableMentions && triggerProps.currentTrigger === '@')) {
         return /*#__PURE__*/React__default['default'].createElement("div", {
           className: "rta__autocomplete ".concat(dropdownClassName || ''),
-          ref: function ref(_ref2) {
-            _this3.dropdownRef = _ref2;
+          ref: function ref(_ref) {
+            _this3.dropdownRef = _ref;
           },
           style: dropdownStyle
         }, /*#__PURE__*/React__default['default'].createElement(SuggestionList, _extends__default['default']({
@@ -1915,14 +1923,34 @@ var ReactTextareaAutocomplete = /*#__PURE__*/function (_React$Component) {
         onFocus: this.props.onFocus,
         onScroll: this._onScrollHandler,
         onSelect: this._selectHandler,
-        ref: function ref(_ref3) {
-          if (_this4.props.innerRef) _this4.props.innerRef(_ref3);
-          _this4.textareaRef = _ref3;
+        ref: function ref(_ref2) {
+          if (_this4.props.innerRef) _this4.props.innerRef(_ref2);
+          _this4.textareaRef = _ref2;
         },
         style: style,
         value: value
       }, this.props.additionalTextareaProps)));
     }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value:
+    /**
+     * setup to emulate the UNSAFE_componentWillReceiveProps
+     */
+    function getDerivedStateFromProps(props, state) {
+      if (props.value !== state.propsValue || !state.value) {
+        return {
+          propsValue: props.value,
+          value: props.value
+        };
+      } else {
+        return null;
+      }
+    }
+    /**
+     * Close autocomplete, also clean up trigger (to avoid slow promises)
+     */
+
   }]);
 
   return ReactTextareaAutocomplete;
@@ -2325,7 +2353,7 @@ var useUserRole = function (message, onlySenderCanEdit, disableQuotedMessages) {
         (isMyMessage && channelCapabilities['delete-own-message']);
     var canFlag = !isMyMessage;
     var canMute = !isMyMessage && (channelConfig === null || channelConfig === void 0 ? void 0 : channelConfig.mutes);
-    var canQuote = !disableQuotedMessages;
+    var canQuote = !disableQuotedMessages && channelCapabilities['quote-message'];
     var canReact = (channelConfig === null || channelConfig === void 0 ? void 0 : channelConfig.reactions) !== false && channelCapabilities['send-reaction'];
     var canReply = (channelConfig === null || channelConfig === void 0 ? void 0 : channelConfig.replies) !== false && channelCapabilities['send-reply'];
     return {
@@ -2721,8 +2749,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", { key: customAction, onClick: function (event) { return customHandler(message, event); } },
-            React__default['default'].createElement("li", { className: 'str-chat__message-actions-list-item' }, 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));
     })));
 };
 var UnMemoizedMessageActionsBox = function (props) {
@@ -2749,32 +2776,26 @@ var UnMemoizedMessageActionsBox = function (props) {
     }, [messageListRect, mine, open]);
     var handleQuote = function () {
         setQuotedMessage(message);
-        var elements = document.getElementsByClassName('str-chat__textarea__textarea');
+        var elements = message.parent_id
+            ? document.querySelectorAll('.str-chat__thread .str-chat__textarea__textarea')
+            : document.getElementsByClassName('str-chat__textarea__textarea');
         var textarea = elements.item(0);
         if (textarea instanceof HTMLTextAreaElement) {
             textarea.focus();
         }
     };
     return (React__default['default'].createElement("div", { className: "str-chat__message-actions-box\n        " + (open ? 'str-chat__message-actions-box--open' : '') + "\n        " + (mine ? 'str-chat__message-actions-box--mine' : '') + "\n        " + (reverse ? 'str-chat__message-actions-box--reverse' : '') + "\n      ", "data-testid": 'message-actions-box', ref: checkIfReverse },
-        React__default['default'].createElement("ul", { className: 'str-chat__message-actions-list' },
+        React__default['default'].createElement("div", { "aria-label": 'Message Options', className: 'str-chat__message-actions-list', role: 'listbox' },
             customMessageActions && (React__default['default'].createElement(CustomMessageActionsList, { customMessageActions: customMessageActions, message: message })),
-            messageActions.indexOf(MESSAGE_ACTIONS.quote) > -1 &&
-                !message.parent_id &&
-                !message.quoted_message && (React__default['default'].createElement("button", { onClick: handleQuote },
-                React__default['default'].createElement("li", { className: 'str-chat__message-actions-list-item' }, t('Reply')))),
-            messageActions.indexOf(MESSAGE_ACTIONS.pin) > -1 && !message.parent_id && (React__default['default'].createElement("button", { onClick: handlePin },
-                React__default['default'].createElement("li", { className: 'str-chat__message-actions-list-item' }, !message.pinned ? t('Pin') : t('Unpin')))),
-            messageActions.indexOf(MESSAGE_ACTIONS.flag) > -1 && (React__default['default'].createElement("button", { onClick: handleFlag },
-                React__default['default'].createElement("li", { className: 'str-chat__message-actions-list-item' }, t('Flag')))),
-            messageActions.indexOf(MESSAGE_ACTIONS.mute) > -1 && (React__default['default'].createElement("button", { onClick: handleMute },
-                React__default['default'].createElement("li", { className: 'str-chat__message-actions-list-item' }, isUserMuted() ? t('Unmute') : t('Mute')))),
-            messageActions.indexOf(MESSAGE_ACTIONS.edit) > -1 && (React__default['default'].createElement("button", { onClick: handleEdit },
-                React__default['default'].createElement("li", { className: 'str-chat__message-actions-list-item' }, t('Edit Message')))),
-            messageActions.indexOf(MESSAGE_ACTIONS.delete) > -1 && (React__default['default'].createElement("button", { onClick: handleDelete },
-                React__default['default'].createElement("li", { className: 'str-chat__message-actions-list-item' }, t('Delete')))))));
+            messageActions.indexOf(MESSAGE_ACTIONS.quote) > -1 && !message.quoted_message && (React__default['default'].createElement("button", { "aria-selected": 'false', className: 'str-chat__message-actions-list-item', onClick: handleQuote, role: 'option' }, t('Reply'))),
+            messageActions.indexOf(MESSAGE_ACTIONS.pin) > -1 && !message.parent_id && (React__default['default'].createElement("button", { "aria-selected": 'false', className: 'str-chat__message-actions-list-item', onClick: handlePin, role: 'option' }, !message.pinned ? t('Pin') : t('Unpin'))),
+            messageActions.indexOf(MESSAGE_ACTIONS.flag) > -1 && (React__default['default'].createElement("button", { "aria-selected": 'false', className: 'str-chat__message-actions-list-item', onClick: handleFlag, role: 'option' }, t('Flag'))),
+            messageActions.indexOf(MESSAGE_ACTIONS.mute) > -1 && (React__default['default'].createElement("button", { "aria-selected": 'false', className: 'str-chat__message-actions-list-item', onClick: handleMute, role: 'option' }, isUserMuted() ? t('Unmute') : t('Mute'))),
+            messageActions.indexOf(MESSAGE_ACTIONS.edit) > -1 && (React__default['default'].createElement("button", { "aria-selected": 'false', className: 'str-chat__message-actions-list-item', onClick: handleEdit, role: 'option' }, t('Edit Message'))),
+            messageActions.indexOf(MESSAGE_ACTIONS.delete) > -1 && (React__default['default'].createElement("button", { "aria-selected": 'false', className: 'str-chat__message-actions-list-item', onClick: handleDelete, role: 'option' }, t('Delete'))))));
 };
 /**
- * A popup box that displays the available actions on a message, such edit, delete, pin, etc.
+ * A popup box that displays the available actions on a message, such as edit, delete, pin, etc.
  */
 var MessageActionsBox = React__default['default'].memo(UnMemoizedMessageActionsBox);
 
@@ -2816,7 +2837,8 @@ var MessageActions = function (props) {
         return null;
     return (React__default['default'].createElement(MessageActionsWrapper, { customWrapperClass: customWrapperClass, inline: inline, setActionsBoxOpen: setActionsBoxOpen },
         React__default['default'].createElement(MessageActionsBox, { getMessageActions: getMessageActions, handleDelete: handleDelete, handleEdit: setEditingState, handleFlag: handleFlag, handleMute: handleMute, handlePin: handlePin, isUserMuted: isMuted, mine: mine ? mine() : isMyMessage(), open: actionsBoxOpen }),
-        React__default['default'].createElement(ActionsIcon$1, null)));
+        React__default['default'].createElement("button", { "aria-expanded": actionsBoxOpen, "aria-haspopup": 'true', "aria-label": 'Open Message Actions Menu' },
+            React__default['default'].createElement(ActionsIcon$1, null))));
 };
 var MessageActionsWrapper = function (props) {
     var children = props.children, customWrapperClass = props.customWrapperClass, inline = props.inline, setActionsBoxOpen = props.setActionsBoxOpen;
@@ -2856,15 +2878,15 @@ var UnMemoizedMessageOptions = function (props) {
     if (isMyMessage() && displayLeft) {
         return (React__default['default'].createElement("div", { className: "str-chat__message-" + theme + "__actions", "data-testid": 'message-options-left' },
             showActionsBox && (React__default['default'].createElement(MessageActions, { ActionsIcon: ActionsIcon$1, messageWrapperRef: messageWrapperRef })),
-            shouldShowReplies && (React__default['default'].createElement("div", { className: "str-chat__message-" + theme + "__actions__action str-chat__message-" + theme + "__actions__action--thread", "data-testid": 'thread-action', onClick: handleOpenThread },
+            shouldShowReplies && (React__default['default'].createElement("button", { "aria-label": 'Open Thread', className: "str-chat__message-" + theme + "__actions__action str-chat__message-" + theme + "__actions__action--thread", "data-testid": 'thread-action', onClick: handleOpenThread },
                 React__default['default'].createElement(ThreadIcon$1, null))),
-            shouldShowReactions && (React__default['default'].createElement("div", { className: "str-chat__message-" + theme + "__actions__action str-chat__message-" + theme + "__actions__action--reactions", "data-testid": 'message-reaction-action', onClick: onReactionListClick },
+            shouldShowReactions && (React__default['default'].createElement("button", { "aria-label": 'Open Reaction Selector', className: "str-chat__message-" + theme + "__actions__action str-chat__message-" + theme + "__actions__action--reactions", "data-testid": 'message-reaction-action', onClick: onReactionListClick },
                 React__default['default'].createElement(ReactionIcon$1, null)))));
     }
     return (React__default['default'].createElement("div", { className: "str-chat__message-" + theme + "__actions", "data-testid": 'message-options' },
-        shouldShowReactions && (React__default['default'].createElement("div", { className: "str-chat__message-" + theme + "__actions__action str-chat__message-" + theme + "__actions__action--reactions", "data-testid": 'message-reaction-action', onClick: onReactionListClick },
+        shouldShowReactions && (React__default['default'].createElement("button", { "aria-label": 'Open Reaction Selector', className: "str-chat__message-" + theme + "__actions__action str-chat__message-" + theme + "__actions__action--reactions", "data-testid": 'message-reaction-action', onClick: onReactionListClick },
             React__default['default'].createElement(ReactionIcon$1, null))),
-        shouldShowReplies && (React__default['default'].createElement("div", { className: "str-chat__message-" + theme + "__actions__action str-chat__message-" + theme + "__actions__action--thread", "data-testid": 'thread-action', onClick: handleOpenThread },
+        shouldShowReplies && (React__default['default'].createElement("button", { "aria-label": 'Open Thread', className: "str-chat__message-" + theme + "__actions__action str-chat__message-" + theme + "__actions__action--thread", "data-testid": 'thread-action', onClick: handleOpenThread },
             React__default['default'].createElement(ThreadIcon$1, null))),
         showActionsBox && (React__default['default'].createElement(MessageActions, { ActionsIcon: ActionsIcon$1, messageWrapperRef: messageWrapperRef }))));
 };
@@ -3743,7 +3765,7 @@ var searchLocalUsers = function (params) {
                 var transliterate;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
-                        case 0: return [4 /*yield*/, Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('@sindresorhus/transliterate')); })];
+                        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();
@@ -4106,7 +4128,7 @@ var FileUploadIconFlat = function () {
 var SendButton = function (_a) {
     var sendMessage = _a.sendMessage;
     var t = useTranslationContext('SendButton').t;
-    return (React__default['default'].createElement("button", { className: 'str-chat__send-button', onClick: sendMessage },
+    return (React__default['default'].createElement("button", { "aria-label": 'Send', className: 'str-chat__send-button', onClick: sendMessage },
         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' }))));
@@ -4132,7 +4154,8 @@ var UploadsPreview = function () {
         }
     }, [device, numberOfUploads, text]);
     return (React__default['default'].createElement(React__default['default'].Fragment, null,
-        imageOrder.length > 0 && (React__default['default'].createElement(reactFileUtils.ImagePreviewer, { disabled: maxNumberOfFiles !== undefined && numberOfUploads >= maxNumberOfFiles, handleFiles: uploadNewFiles, handleRemove: removeImage, handleRetry: uploadImage, imageUploads: imagesToPreview, multiple: multipleUploads })),
+        imageOrder.length > 0 && (React__default['default'].createElement(reactFileUtils.ImagePreviewer, { disabled: !multipleUploads ||
+                (maxNumberOfFiles !== undefined && numberOfUploads >= maxNumberOfFiles), handleFiles: uploadNewFiles, handleRemove: removeImage, handleRetry: uploadImage, imageUploads: imagesToPreview, multiple: multipleUploads })),
         fileOrder.length > 0 && (React__default['default'].createElement(reactFileUtils.FilePreviewer, { handleFiles: uploadNewFiles, handleRemove: removeFile, handleRetry: uploadFile, uploads: filesToPreview }))));
 };
 
@@ -4142,32 +4165,34 @@ var UnMemoizedChatAutoComplete = function (props) {
     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 = 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 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, className: 'str-chat__textarea__textarea', closeCommandsList: messageInput.closeCommandsList, closeMentionsList: messageInput.closeMentionsList, containerClassName: 'str-chat__textarea', 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', keycodeSubmitKeys: messageInput.keycodeSubmitKeys, listClassName: 'str-chat__emojisearch__list', loadingComponent: LoadingIndicator, maxRows: messageInput.maxRows, minChar: 0, 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, showCommandsList: messageInput.showCommandsList, showMentionsList: messageInput.showMentionsList, SuggestionItem: SuggestionItem, SuggestionList: SuggestionList, trigger: messageInput.autocompleteTriggers || {}, value: props.value || messageInput.text }));
+    return (React__default['default'].createElement(ReactTextareaAutocomplete, { additionalTextareaProps: messageInput.additionalTextareaProps, "aria-label": cooldownRemaining ? t('Slow Mode ON') : placeholder, className: 'str-chat__textarea__textarea', closeCommandsList: messageInput.closeCommandsList, closeMentionsList: messageInput.closeMentionsList, containerClassName: 'str-chat__textarea', 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', keycodeSubmitKeys: messageInput.keycodeSubmitKeys, listClassName: 'str-chat__emojisearch__list', loadingComponent: LoadingIndicator, maxRows: messageInput.maxRows, minChar: 0, 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, 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);
 
 var EditMessageForm = function () {
     var _a = useChannelStateContext('EditMessageForm'), acceptedFiles = _a.acceptedFiles, multipleUploads = _a.multipleUploads;
     var t = useTranslationContext('EditMessageForm').t;
-    var _b = useMessageInputContext('EditMessageForm'), clearEditingState = _b.clearEditingState, handleSubmit = _b.handleSubmit, isUploadEnabled = _b.isUploadEnabled, maxFilesLeft = _b.maxFilesLeft, openEmojiPicker = _b.openEmojiPicker, uploadNewFiles = _b.uploadNewFiles;
+    var _b = useMessageInputContext('EditMessageForm'), clearEditingState = _b.clearEditingState, closeEmojiPicker = _b.closeEmojiPicker, emojiPickerIsOpen = _b.emojiPickerIsOpen, handleSubmit = _b.handleSubmit, isUploadEnabled = _b.isUploadEnabled, maxFilesLeft = _b.maxFilesLeft, openEmojiPicker = _b.openEmojiPicker, uploadNewFiles = _b.uploadNewFiles;
     var _c = useComponentContext('EditMessageForm'), _d = _c.EmojiIcon, EmojiIcon = _d === void 0 ? EmojiIconSmall : _d, _e = _c.FileUploadIcon, FileUploadIcon$1 = _e === void 0 ? FileUploadIcon : _e;
     React.useEffect(function () {
         var onKeyDown = function (event) {
@@ -4185,7 +4210,7 @@ var EditMessageForm = function () {
                 React__default['default'].createElement(ChatAutoComplete, null),
                 React__default['default'].createElement("div", { className: 'str-chat__message-team-form-footer' },
                     React__default['default'].createElement("div", { className: 'str-chat__edit-message-form-options' },
-                        React__default['default'].createElement("span", { className: 'str-chat__input-emojiselect', onClick: openEmojiPicker },
+                        React__default['default'].createElement("button", { "aria-label": 'Open Emoji Picker', className: 'str-chat__input-emojiselect', onClick: emojiPickerIsOpen ? closeEmojiPicker : openEmojiPicker },
                             React__default['default'].createElement(EmojiIcon, null)),
                         isUploadEnabled && (React__default['default'].createElement("div", { className: 'str-chat__fileupload-wrapper', "data-testid": 'fileinput' },
                             React__default['default'].createElement(Tooltip, null, maxFilesLeft
@@ -4472,7 +4497,7 @@ var useFileUploads = function (props, state, dispatch) {
 };
 
 var apiMaxNumberOfFiles = 10;
-var useAttachments = function (props, state, dispatch) {
+var useAttachments = function (props, state, dispatch, textareaRef) {
     var noFiles = props.noFiles;
     var fileUploads = state.fileUploads, imageUploads = state.imageUploads;
     var _a = useChannelStateContext('useAttachments'), maxNumberOfFiles = _a.maxNumberOfFiles, multipleUploads = _a.multipleUploads;
@@ -4493,6 +4518,7 @@ var useAttachments = function (props, state, dispatch) {
     var numberOfUploads = numberOfImages + numberOfFiles;
     var maxFilesLeft = maxFilesAllowed - numberOfUploads;
     var uploadNewFiles = React.useCallback(function (files) {
+        var _a;
         Array.from(files)
             .slice(0, maxFilesLeft)
             .forEach(function (file) {
@@ -4506,6 +4532,7 @@ var useAttachments = function (props, state, dispatch) {
                 dispatch({ file: file, id: id, state: 'uploading', type: 'setFileUpload' });
             }
         });
+        (_a = textareaRef === null || textareaRef === void 0 ? void 0 : textareaRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }, [maxFilesLeft, noFiles]);
     return {
         maxFilesLeft: maxFilesLeft,
@@ -4588,9 +4615,10 @@ var useMessageInputText = function (props, state, dispatch) {
     };
 };
 
-var useEmojiPicker = function (state, dispatch, insertText) {
+var useEmojiPicker = function (state, dispatch, insertText, textareaRef, closeEmojiPickerOnClick) {
     var emojiPickerRef = React.useRef(null);
     var closeEmojiPicker = React.useCallback(function (event) {
+        event.preventDefault();
         if (emojiPickerRef.current && !emojiPickerRef.current.contains(event.target)) {
             dispatch({
                 type: 'setEmojiPickerIsOpen',
@@ -4599,6 +4627,7 @@ var useEmojiPicker = function (state, dispatch, insertText) {
         }
     }, [emojiPickerRef]);
     var openEmojiPicker = React.useCallback(function (event) {
+        event.preventDefault();
         dispatch({
             type: 'setEmojiPickerIsOpen',
             value: true,
@@ -4634,9 +4663,17 @@ var useEmojiPicker = function (state, dispatch, insertText) {
             document.removeEventListener('keydown', handleEmojiEscape);
         };
     }, [closeEmojiPicker, state.emojiPickerIsOpen]);
-    var onSelectEmoji = React.useCallback(function (emoji) { return insertText(emoji.native); }, [
-        insertText,
-    ]);
+    var onSelectEmoji = React.useCallback(function (emoji) {
+        var _a;
+        insertText(emoji.native);
+        if (closeEmojiPickerOnClick) {
+            dispatch({
+                type: 'setEmojiPickerIsOpen',
+                value: false,
+            });
+        }
+        (_a = textareaRef === null || textareaRef === void 0 ? void 0 : textareaRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [insertText]);
     return {
         closeEmojiPicker: closeEmojiPicker,
         emojiPickerRef: emojiPickerRef,
@@ -4958,7 +4995,7 @@ var messageInputReducer = function (state, action) {
  * hook for MessageInput state
  */
 var useMessageInputState = function (props) {
-    var message = props.message;
+    var closeEmojiPickerOnClick = props.closeEmojiPickerOnClick, message = props.message;
     var _a = useChannelStateContext('useMessageInputState'), _b = _a.channelCapabilities, channelCapabilities = _b === void 0 ? {} : _b, channelConfig = _a.channelConfig;
     var _c = React.useReducer(messageInputReducer, message, initState), state = _c[0], dispatch = _c[1];
     var _d = useMessageInputText(props, state, dispatch), handleChange = _d.handleChange, insertText = _d.insertText, textareaRef = _d.textareaRef;
@@ -4974,14 +5011,14 @@ var useMessageInputState = function (props) {
     var closeCommandsList = function () { return setShowCommandsList(false); };
     var openMentionsList = function () {
         dispatch({
-            getNewText: function () { return '@'; },
+            getNewText: function (currentText) { return currentText + '@'; },
             type: 'setText',
         });
         setShowMentionsList(true);
     };
     var closeMentionsList = function () { return setShowMentionsList(false); };
-    var _g = useEmojiPicker(state, dispatch, insertText), closeEmojiPicker = _g.closeEmojiPicker, emojiPickerRef = _g.emojiPickerRef, handleEmojiKeyDown = _g.handleEmojiKeyDown, onSelectEmoji = _g.onSelectEmoji, openEmojiPicker = _g.openEmojiPicker;
-    var _h = useAttachments(props, state, dispatch), maxFilesLeft = _h.maxFilesLeft, numberOfUploads = _h.numberOfUploads, removeFile = _h.removeFile, removeImage = _h.removeImage, uploadFile = _h.uploadFile, uploadImage = _h.uploadImage, uploadNewFiles = _h.uploadNewFiles;
+    var _g = useEmojiPicker(state, dispatch, insertText, textareaRef, closeEmojiPickerOnClick), closeEmojiPicker = _g.closeEmojiPicker, emojiPickerRef = _g.emojiPickerRef, handleEmojiKeyDown = _g.handleEmojiKeyDown, onSelectEmoji = _g.onSelectEmoji, openEmojiPicker = _g.openEmojiPicker;
+    var _h = useAttachments(props, state, dispatch, textareaRef), maxFilesLeft = _h.maxFilesLeft, numberOfUploads = _h.numberOfUploads, removeFile = _h.removeFile, removeImage = _h.removeImage, uploadFile = _h.uploadFile, uploadImage = _h.uploadImage, uploadNewFiles = _h.uploadNewFiles;
     var handleSubmit = useSubmitHandler(props, state, dispatch, numberOfUploads).handleSubmit;
     var onPaste = usePasteHandler(uploadNewFiles, insertText).onPaste;
     var isUploadEnabled = (channelConfig === null || channelConfig === void 0 ? void 0 : channelConfig.uploads) !== false && channelCapabilities['upload-file'] !== false;
@@ -5004,15 +5041,16 @@ var QuotedMessagePreviewHeader = function () {
     var t = useTranslationContext('QuotedMessagePreview').t;
     return (React__default['default'].createElement("div", { className: 'quoted-message-preview-header' },
         React__default['default'].createElement("div", null, t('Reply to Message')),
-        React__default['default'].createElement("button", { className: 'str-chat__square-button', onClick: function () { return setQuotedMessage(undefined); } },
+        React__default['default'].createElement("button", { "aria-label": 'Cancel Reply', className: 'str-chat__square-button', onClick: function () { return setQuotedMessage(undefined); } },
             React__default['default'].createElement("svg", { height: '10', width: '10', xmlns: 'http://www.w3.org/2000/svg' },
                 React__default['default'].createElement("path", { d: 'M9.916 1.027L8.973.084 5 4.058 1.027.084l-.943.943L4.058 5 .084 8.973l.943.943L5 5.942l3.973 3.974.943-.943L5.942 5z', fillRule: 'evenodd' })))));
 };
 var QuotedMessagePreview = function (props) {
     var _a;
     var quotedMessage = props.quotedMessage;
-    var Attachment = useComponentContext('QuotedMessagePreview').Attachment;
+    var _b = useComponentContext('QuotedMessagePreview'), Attachment = _b.Attachment, ContextAvatar = _b.Avatar;
     var userLanguage = useTranslationContext('QuotedMessagePreview').userLanguage;
+    var Avatar$1 = ContextAvatar || Avatar;
     var quotedMessageText = ((_a = quotedMessage.i18n) === null || _a === void 0 ? void 0 : _a[userLanguage + "_text"]) ||
         quotedMessage.text;
     // @ts-expect-error
@@ -5025,7 +5063,7 @@ var QuotedMessagePreview = function (props) {
     return (React__default['default'].createElement("div", { className: 'quoted-message-preview' },
         React__default['default'].createElement(QuotedMessagePreviewHeader, null),
         React__default['default'].createElement("div", { className: 'quoted-message-preview-content' },
-            quotedMessage.user && (React__default['default'].createElement(Avatar, { image: quotedMessage.user.image, name: quotedMessage.user.name || quotedMessage.user.id, size: 20, user: quotedMessage.user })),
+            quotedMessage.user && (React__default['default'].createElement(Avatar$1, { image: quotedMessage.user.image, name: quotedMessage.user.name || quotedMessage.user.id, size: 20, user: quotedMessage.user })),
             React__default['default'].createElement("div", { className: 'quoted-message-preview-content-inner' },
                 quotedMessageAttachment && React__default['default'].createElement(Attachment, { attachments: [quotedMessageAttachment] }),
                 React__default['default'].createElement("div", null, quotedMessageText)))));
@@ -5034,17 +5072,17 @@ var QuotedMessagePreview = function (props) {
 var MessageInputFlat = function () {
     var _a = useChannelStateContext('MessageInputFlat'), acceptedFiles = _a.acceptedFiles, multipleUploads = _a.multipleUploads, quotedMessage = _a.quotedMessage;
     var t = useTranslationContext('MessageInputFlat').t;
-    var _b = useMessageInputContext('MessageInputFlat'), closeEmojiPicker = _b.closeEmojiPicker, cooldownInterval = _b.cooldownInterval, cooldownRemaining = _b.cooldownRemaining, emojiPickerIsOpen = _b.emojiPickerIsOpen, handleEmojiKeyDown = _b.handleEmojiKeyDown, handleSubmit = _b.handleSubmit, isUploadEnabled = _b.isUploadEnabled, maxFilesLeft = _b.maxFilesLeft, openEmojiPicker = _b.openEmojiPicker, setCooldownRemaining = _b.setCooldownRemaining, uploadNewFiles = _b.uploadNewFiles;
+    var _b = useMessageInputContext('MessageInputFlat'), closeEmojiPicker = _b.closeEmojiPicker, cooldownInterval = _b.cooldownInterval, cooldownRemaining = _b.cooldownRemaining, emojiPickerIsOpen = _b.emojiPickerIsOpen, handleSubmit = _b.handleSubmit, isUploadEnabled = _b.isUploadEnabled, maxFilesLeft = _b.maxFilesLeft, openEmojiPicker = _b.openEmojiPicker, setCooldownRemaining = _b.setCooldownRemaining, uploadNewFiles = _b.uploadNewFiles;
     var _c = useComponentContext('MessageInputFlat'), _d = _c.CooldownTimer, CooldownTimer$1 = _d === void 0 ? CooldownTimer : _d, _e = _c.EmojiIcon, EmojiIcon = _e === void 0 ? EmojiIconLarge : _e, _f = _c.FileUploadIcon, FileUploadIcon = _f === void 0 ? FileUploadIconFlat : _f, _g = _c.QuotedMessagePreview, QuotedMessagePreview$1 = _g === void 0 ? QuotedMessagePreview : _g, _h = _c.SendButton, SendButton$1 = _h === void 0 ? SendButton : _h;
-    return (React__default['default'].createElement("div", { className: "str-chat__input-flat " + (SendButton$1 ? 'str-chat__input-flat--send-button-active' : null) + " " + (quotedMessage ? 'str-chat__input-flat-quoted' : null) },
+    return (React__default['default'].createElement("div", { className: "str-chat__input-flat " + (SendButton$1 ? 'str-chat__input-flat--send-button-active' : null) + " " + (quotedMessage && !quotedMessage.parent_id ? 'str-chat__input-flat-quoted' : null) },
         React__default['default'].createElement(reactFileUtils.ImageDropzone, { accept: acceptedFiles, disabled: !isUploadEnabled || maxFilesLeft === 0 || !!cooldownRemaining, handleFiles: uploadNewFiles, maxNumberOfFiles: maxFilesLeft, multiple: multipleUploads },
-            quotedMessage && React__default['default'].createElement(QuotedMessagePreview$1, { quotedMessage: quotedMessage }),
+            quotedMessage && !quotedMessage.parent_id && (React__default['default'].createElement(QuotedMessagePreview$1, { quotedMessage: quotedMessage })),
             React__default['default'].createElement("div", { className: 'str-chat__input-flat-wrapper' },
                 React__default['default'].createElement("div", { className: 'str-chat__input-flat--textarea-wrapper' },
                     isUploadEnabled && React__default['default'].createElement(UploadsPreview, null),
                     React__default['default'].createElement("div", { className: 'str-chat__emojiselect-wrapper' },
                         React__default['default'].createElement(Tooltip, null, emojiPickerIsOpen ? t('Close emoji picker') : t('Open emoji picker')),
-                        React__default['default'].createElement("span", { className: 'str-chat__input-flat-emojiselect', onClick: emojiPickerIsOpen ? closeEmojiPicker : openEmojiPicker, onKeyDown: handleEmojiKeyDown, role: 'button', tabIndex: 0 }, cooldownRemaining ? (React__default['default'].createElement("div", { className: 'str-chat__input-flat-cooldown' },
+                        React__default['default'].createElement("button", { "aria-label": 'Emoji picker', className: 'str-chat__input-flat-emojiselect', onClick: emojiPickerIsOpen ? closeEmojiPicker : openEmojiPicker }, cooldownRemaining ? (React__default['default'].createElement("div", { className: 'str-chat__input-flat-cooldown' },
                             React__default['default'].createElement(CooldownTimer$1, { cooldownInterval: cooldownInterval, setCooldownRemaining: setCooldownRemaining }))) : (React__default['default'].createElement(EmojiIcon, null)))),
                     React__default['default'].createElement(EmojiPicker, null),
                     React__default['default'].createElement(ChatAutoComplete, null),
@@ -5180,13 +5218,14 @@ var UnMemoizedMessageInput = function (props) {
 var MessageInput = React__default['default'].memo(UnMemoizedMessageInput);
 
 var MessageInputSmall = function () {
-    var _a = useChannelStateContext('MessageInputSmall'), acceptedFiles = _a.acceptedFiles, multipleUploads = _a.multipleUploads;
+    var _a = useChannelStateContext('MessageInputSmall'), acceptedFiles = _a.acceptedFiles, multipleUploads = _a.multipleUploads, quotedMessage = _a.quotedMessage;
     var t = useTranslationContext('MessageInputSmall').t;
-    var _b = useMessageInputContext('MessageInputSmall'), closeEmojiPicker = _b.closeEmojiPicker, cooldownInterval = _b.cooldownInterval, cooldownRemaining = _b.cooldownRemaining, emojiPickerIsOpen = _b.emojiPickerIsOpen, handleEmojiKeyDown = _b.handleEmojiKeyDown, handleSubmit = _b.handleSubmit, isUploadEnabled = _b.isUploadEnabled, maxFilesLeft = _b.maxFilesLeft, openEmojiPicker = _b.openEmojiPicker, setCooldownRemaining = _b.setCooldownRemaining, uploadNewFiles = _b.uploadNewFiles;
-    var _c = useComponentContext('MessageInputSmall'), _d = _c.CooldownTimer, CooldownTimer$1 = _d === void 0 ? CooldownTimer : _d, _e = _c.EmojiIcon, EmojiIcon = _e === void 0 ? EmojiIconSmall : _e, _f = _c.FileUploadIcon, FileUploadIcon = _f === void 0 ? FileUploadIconFlat : _f, _g = _c.SendButton, SendButton$1 = _g === void 0 ? SendButton : _g;
+    var _b = useMessageInputContext('MessageInputSmall'), closeEmojiPicker = _b.closeEmojiPicker, cooldownInterval = _b.cooldownInterval, cooldownRemaining = _b.cooldownRemaining, emojiPickerIsOpen = _b.emojiPickerIsOpen, handleSubmit = _b.handleSubmit, isUploadEnabled = _b.isUploadEnabled, maxFilesLeft = _b.maxFilesLeft, openEmojiPicker = _b.openEmojiPicker, setCooldownRemaining = _b.setCooldownRemaining, uploadNewFiles = _b.uploadNewFiles;
+    var _c = useComponentContext('MessageInputSmall'), _d = _c.CooldownTimer, CooldownTimer$1 = _d === void 0 ? CooldownTimer : _d, _e = _c.EmojiIcon, EmojiIcon = _e === void 0 ? EmojiIconSmall : _e, _f = _c.FileUploadIcon, FileUploadIcon = _f === void 0 ? FileUploadIconFlat : _f, _g = _c.SendButton, SendButton$1 = _g === void 0 ? SendButton : _g, _h = _c.QuotedMessagePreview, QuotedMessagePreview$1 = _h === void 0 ? QuotedMessagePreview : _h;
     return (React__default['default'].createElement("div", { className: 'str-chat__small-message-input__wrapper' },
         React__default['default'].createElement(reactFileUtils.ImageDropzone, { accept: acceptedFiles, disabled: !isUploadEnabled || maxFilesLeft === 0 || !!cooldownRemaining, handleFiles: uploadNewFiles, maxNumberOfFiles: maxFilesLeft, multiple: multipleUploads },
-            React__default['default'].createElement("div", { className: "str-chat__small-message-input " + (SendButton$1 ? 'str-chat__small-message-input--send-button-active' : null) },
+            React__default['default'].createElement("div", { className: "str-chat__small-message-input " + (SendButton$1 ? 'str-chat__small-message-input--send-button-active' : null) + " " + (quotedMessage && quotedMessage.parent_id ? 'str-chat__input-flat-quoted' : null) },
+                quotedMessage && quotedMessage.parent_id && (React__default['default'].createElement(QuotedMessagePreview$1, { quotedMessage: quotedMessage })),
                 React__default['default'].createElement("div", { className: 'str-chat__small-message-input--textarea-wrapper' },
                     isUploadEnabled && React__default['default'].createElement(UploadsPreview, null),
                     React__default['default'].createElement(ChatAutoComplete, null),
@@ -5201,7 +5240,7 @@ var MessageInputSmall = function () {
                                     React__default['default'].createElement(FileUploadIcon, null))))),
                         React__default['default'].createElement("div", { className: 'str-chat__emojiselect-wrapper' },
                             React__default['default'].createElement(Tooltip, null, emojiPickerIsOpen ? t('Close emoji picker') : t('Open emoji picker')),
-                            React__default['default'].createElement("span", { className: 'str-chat__small-message-input-emojiselect', onClick: emojiPickerIsOpen ? closeEmojiPicker : openEmojiPicker, onKeyDown: handleEmojiKeyDown, role: 'button', tabIndex: 0 },
+                            React__default['default'].createElement("button", { "aria-label": 'Emoji picker', className: 'str-chat__small-message-input-emojiselect', onClick: emojiPickerIsOpen ? closeEmojiPicker : openEmojiPicker },
                                 React__default['default'].createElement(EmojiIcon, null))))),
                     React__default['default'].createElement(EmojiPicker, { small: true })),
                 !cooldownRemaining && React__default['default'].createElement(SendButton$1, { sendMessage: handleSubmit })))));
@@ -5228,38 +5267,6 @@ var MML = function (props) {
         React__default['default'].createElement(MMLReact, { className: "mml-align-" + align, Loading: null, onSubmit: actionHandler, source: source, Success: null, theme: (theme || '').replace(' ', '-') })));
 };
 
-var Modal = function (props) {
-    var children = props.children, onClose = props.onClose, open = props.open;
-    var t = useTranslationContext('Modal').t;
-    var innerRef = React.useRef(null);
-    var handleClick = function (event) {
-        var _a;
-        if (event.target instanceof HTMLDivElement &&
-            !((_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) &&
-            onClose) {
-            onClose();
-        }
-    };
-    React.useEffect(function () {
-        if (!open)
-            return function () { return null; };
-        var handleEscKey = function (event) {
-            if (event instanceof KeyboardEvent && event.key === 'Escape' && onClose) {
-                onClose();
-            }
-        };
-        document.addEventListener('keypress', handleEscKey);
-        return function () { return document.removeEventListener('keypress', handleEscKey); };
-    }, [onClose, open]);
-    var openClasses = open ? 'str-chat__modal--open' : 'str-chat__modal--closed';
-    return (React__default['default'].createElement("div", { className: "str-chat__modal " + openClasses, onClick: handleClick },
-        React__default['default'].createElement("div", { className: 'str-chat__modal__close-button' },
-            t('Close'),
-            React__default['default'].createElement("svg", { height: '10', width: '10', xmlns: 'http://www.w3.org/2000/svg' },
-                React__default['default'].createElement("path", { d: 'M9.916 1.027L8.973.084 5 4.058 1.027.084l-.943.943L4.058 5 .084 8.973l.943.943L5 5.942l3.973 3.974.943-.943L5.942 5z', fillRule: 'evenodd' }))),
-        React__default['default'].createElement("div", { className: 'str-chat__modal__inner', ref: innerRef }, children)));
-};
-
 var isMutableRef = function (ref) {
     if (ref) {
         return ref.current !== undefined;
@@ -5337,12 +5344,13 @@ var UnMemoizedReactionSelector = React__default['default'].forwardRef(function (
         React__default['default'].createElement("ul", { className: 'str-chat__message-reactions-list' }, reactionOptions.map(function (reactionOption) {
             var latestUser = getLatestUserForReactionType(reactionOption.id);
             var count = reactionCounts && reactionCounts[reactionOption.id];
-            return (React__default['default'].createElement("li", { className: 'str-chat__message-reactions-list-item', "data-text": reactionOption.id, key: "item-" + reactionOption.id, onClick: function (event) { return handleReaction(reactionOption.id, event); } },
-                !!count && detailedView && (React__default['default'].createElement(React__default['default'].Fragment, null,
-                    React__default['default'].createElement("div", { className: 'latest-user', onClick: hideTooltip, onMouseEnter: function (e) { return showTooltip(e, reactionOption.id); }, onMouseLeave: hideTooltip }, latestUser ? (React__default['default'].createElement(Avatar$1, { image: latestUser.image, name: latestUser.name, size: 20, user: latestUser })) : (React__default['default'].createElement("div", { className: 'latest-user-not-found' }))))),
-                React__default['default'].createElement(React.Suspense, { fallback: null },
-                    React__default['default'].createElement(Emoji, __assign({ data: emojiData, emoji: reactionOption, size: 20 }, (reactionsAreCustom ? additionalEmojiProps : emojiSetDef)))),
-                Boolean(count) && detailedView && (React__default['default'].createElement("span", { className: 'str-chat__message-reactions-list-item__count' }, count || ''))));
+            return (React__default['default'].createElement("li", { key: "item-" + reactionOption.id },
+                React__default['default'].createElement("button", { "aria-label": "Select Reaction: " + reactionOption.name, className: 'str-chat__message-reactions-list-item', "data-text": reactionOption.id, onClick: function (event) { return handleReaction(reactionOption.id, event); } },
+                    !!count && detailedView && (React__default['default'].createElement(React__default['default'].Fragment, null,
+                        React__default['default'].createElement("div", { className: 'latest-user', onClick: hideTooltip, onMouseEnter: function (e) { return showTooltip(e, reactionOption.id); }, onMouseLeave: hideTooltip }, latestUser ? (React__default['default'].createElement(Avatar$1, { image: latestUser.image, name: latestUser.name, size: 20, user: latestUser })) : (React__default['default'].createElement("div", { className: 'latest-user-not-found' }))))),
+                    React__default['default'].createElement(React.Suspense, { fallback: null },
+                        React__default['default'].createElement(Emoji, __assign({ data: emojiData, emoji: reactionOption, size: 20 }, (reactionsAreCustom ? additionalEmojiProps : emojiSetDef)))),
+                    Boolean(count) && detailedView && (React__default['default'].createElement("span", { className: 'str-chat__message-reactions-list-item__count' }, count || '')))));
         }))));
 });
 /**
@@ -5392,14 +5400,15 @@ var UnMemoizedReactionsList = function (props) {
     var supportedReactionsArePresent = messageReactionTypes.some(function (type) { return supportedReactionMap[type]; });
     if (!supportedReactionsArePresent)
         return null;
-    return (React__default['default'].createElement("div", { className: "str-chat__reaction-list " + (reverse ? 'str-chat__reaction-list--reverse' : ''), "data-testid": 'reaction-list', onClick: onClick || onReactionListClick },
+    return (React__default['default'].createElement("div", { "aria-label": 'Reaction list', className: "str-chat__reaction-list " + (reverse ? 'str-chat__reaction-list--reverse' : ''), "data-testid": 'reaction-list', onClick: onClick || onReactionListClick, onKeyPress: onClick || onReactionListClick, role: 'figure' },
         React__default['default'].createElement("ul", null,
             messageReactionTypes.map(function (reactionType) {
                 var emojiObject = getEmojiByReactionType(reactionType);
                 return emojiObject ? (React__default['default'].createElement("li", { key: emojiObject.id },
-                    React__default['default'].createElement(React.Suspense, { fallback: null },
-                        React__default['default'].createElement(Emoji, __assign({ data: emojiData, emoji: emojiObject, size: 16 }, (reactionsAreCustom ? additionalEmojiProps : emojiSetDef)))),
-                    "\u00A0")) : null;
+                    React__default['default'].createElement("button", { "aria-label": "Reactions: " + reactionType },
+                        React__default['default'].createElement(React.Suspense, { fallback: null },
+                            React__default['default'].createElement(Emoji, __assign({ data: emojiData, emoji: emojiObject, size: 16 }, (reactionsAreCustom ? additionalEmojiProps : emojiSetDef)))),
+                        "\u00A0"))) : null;
             }),
             React__default['default'].createElement("li", null,
                 React__default['default'].createElement("span", { className: 'str-chat__reaction-list--counter' }, getTotalReactionCount())))));
@@ -5468,7 +5477,7 @@ var UnMemoizedSimpleReactionsList = function (props) {
         messageReactionTypes.map(function (reactionType, i) {
             var _a;
             var emojiObject = getEmojiByReactionType(reactionType);
-            return emojiObject ? (React__default['default'].createElement("li", { className: 'str-chat__simple-reactions-list-item', key: emojiObject.id + "-" + i, onClick: function (event) { return handleReaction(reactionType, event); } },
+            return emojiObject ? (React__default['default'].createElement("li", { className: 'str-chat__simple-reactions-list-item', key: emojiObject.id + "-" + i, onClick: function (event) { return handleReaction(reactionType, event); }, onKeyPress: function (event) { return handleReaction(reactionType, event); } },
                 React__default['default'].createElement("span", { onMouseEnter: function () { return setTooltipReactionType(reactionType); } },
                     React__default['default'].createElement(React.Suspense, { fallback: null },
                         React__default['default'].createElement(Emoji, __assign({ data: emojiData, emoji: emojiObject, size: 13 }, (reactionsAreCustom ? additionalEmojiProps : emojiSetDef)))),
@@ -5504,6 +5513,8 @@ var MessageSimpleWithContext = function (props) {
             React__default['default'].createElement(MessageStatus$1, null),
             message.user && (React__default['default'].createElement(Avatar$1, { image: message.user.image, name: message.user.name || message.user.id, onClick: onUserClick, onMouseOver: onUserHover, user: message.user })),
             React__default['default'].createElement("div", { className: 'str-chat__message-inner', "data-testid": 'message-inner', onClick: message.status === 'failed' && message.errorStatusCode !== 403
+                    ? function () { return handleRetry(message); }
+                    : undefined, onKeyPress: message.status === 'failed' && message.errorStatusCode !== 403
                     ? function () { return handleRetry(message); }
                     : undefined },
                 React__default['default'].createElement(React__default['default'].Fragment, null,
@@ -5823,7 +5834,7 @@ var ChannelInner = function (props) {
                             return id;
                         })
                         : mentioned_users;
-                    messageData = __assign({ attachments: attachments, id: id, mentioned_users: mentions, parent_id: parent_id, quoted_message_id: quotedMessage === null || quotedMessage === void 0 ? void 0 : quotedMessage.id, text: text }, customMessageData);
+                    messageData = __assign({ attachments: attachments, id: id, mentioned_users: mentions, parent_id: parent_id, quoted_message_id: parent_id === (quotedMessage === null || quotedMessage === void 0 ? void 0 : quotedMessage.parent_id) ? quotedMessage === null || quotedMessage === void 0 ? void 0 : quotedMessage.id : undefined, text: text }, customMessageData);
                     _b.label = 1;
                 case 1:
                     _b.trys.push([1, 6, , 7]);
@@ -5842,7 +5853,7 @@ var ChannelInner = function (props) {
                     if (messageResponse === null || messageResponse === void 0 ? void 0 : messageResponse.message) {
                         updateMessage(__assign(__assign({}, messageResponse.message), { status: 'received' }));
                     }
-                    if (quotedMessage)
+                    if (quotedMessage && parent_id === (quotedMessage === null || quotedMessage === void 0 ? void 0 : quotedMessage.parent_id))
                         setQuotedMessage(undefined);
                     return [3 /*break*/, 7];
                 case 6:
@@ -5900,6 +5911,14 @@ var ChannelInner = function (props) {
     /** THREAD */
     var openThread = function (message, event) {
         event.preventDefault();
+        setQuotedMessage(function (current) {
+            if ((current === null || current === void 0 ? void 0 : current.parent_id) !== (message === null || message === void 0 ? void 0 : message.parent_id)) {
+                return undefined;
+            }
+            else {
+                return current;
+            }
+        });
         dispatch({ channel: channel, message: message, type: 'openThread' });
     };
     var closeThread = function (event) {
@@ -6069,7 +6088,7 @@ var UnMemoizedChannelHeader = function (props) {
     var _c = (channel === null || channel === void 0 ? void 0 : channel.data) || {}, channelImage = _c.image, member_count = _c.member_count, name = _c.name, subtitle = _c.subtitle;
     var image = propImage || channelImage;
     return (React__default['default'].createElement("div", { className: 'str-chat__header-livestream' },
-        React__default['default'].createElement("div", { className: 'str-chat__header-hamburger', onClick: openMobileNav },
+        React__default['default'].createElement("button", { "aria-label": 'Menu', className: 'str-chat__header-hamburger', onClick: openMobileNav },
             React__default['default'].createElement("span", { className: 'str-chat__header-hamburger--line' }),
             React__default['default'].createElement("span", { className: 'str-chat__header-hamburger--line' }),
             React__default['default'].createElement("span", { className: 'str-chat__header-hamburger--line' })),
@@ -6102,9 +6121,9 @@ var UnMemoizedChatDown = function (props) {
     return (React__default['default'].createElement("div", { className: 'str-chat__down' },
         React__default['default'].createElement(LoadingChannels, null),
         React__default['default'].createElement("div", { className: 'str-chat__down-main' },
-            React__default['default'].createElement("img", { "data-testid": 'chatdown-img', src: image || img }),
+            React__default['default'].createElement("img", { alt: 'Connection error', "data-testid": 'chatdown-img', src: image || img }),
             React__default['default'].createElement("h1", null, type),
-            React__default['default'].createElement("h3", null, text || t('Error connecting to chat, refresh the page to try again.')))));
+            React__default['default'].createElement("h3", { "aria-live": 'assertive' }, text || t('Error connecting to chat, refresh the page to try again.')))));
 };
 /**
  * A simple indicator that chat functionality isn't available, triggered when the Chat API is unavailable or your network isn't working.
@@ -6123,7 +6142,7 @@ var ChannelListMessenger = function (props) {
         return React__default['default'].createElement(LoadingIndicator, null);
     }
     return (React__default['default'].createElement("div", { className: 'str-chat__channel-list-messenger' },
-        React__default['default'].createElement("div", { className: 'str-chat__channel-list-messenger__main' }, children)));
+        React__default['default'].createElement("div", { "aria-label": 'Channel list', className: 'str-chat__channel-list-messenger__main', role: 'listbox' }, children)));
 };
 
 var useChannelDeletedListener = function (setChannels, customHandler) {
@@ -6200,10 +6219,11 @@ var useChannelUpdatedListener = function (setChannels, customHandler, forceUpdat
     React.useEffect(function () {
         var handleEvent = function (event) {
             setChannels(function (channels) {
+                var _a, _b, _c, _d, _e, _f;
                 var channelIndex = channels.findIndex(function (channel) { var _a; return channel.cid === ((_a = event.channel) === null || _a === void 0 ? void 0 : _a.cid); });
                 if (channelIndex > -1 && event.channel) {
                     var newChannels = channels;
-                    newChannels[channelIndex].data = event.channel;
+                    newChannels[channelIndex].data = __assign(__assign({}, event.channel), { hidden: (_b = (_a = event.channel) === null || _a === void 0 ? void 0 : _a.hidden) !== null && _b !== void 0 ? _b : (_c = newChannels[channelIndex].data) === null || _c === void 0 ? void 0 : _c.hidden, own_capabilities: (_e = (_d = event.channel) === null || _d === void 0 ? void 0 : _d.own_capabilities) !== null && _e !== void 0 ? _e : (_f = newChannels[channelIndex].data) === null || _f === void 0 ? void 0 : _f.own_capabilities });
                     return __spreadArray([], newChannels);
                 }
                 return channels;
@@ -6518,7 +6538,7 @@ var UnMemoizedChannelPreviewMessenger = function (props) {
             channelPreviewButton.current.blur();
         }
     };
-    return (React__default['default'].createElement("button", { className: "str-chat__channel-preview-messenger " + unreadClass + " " + activeClass, "data-testid": 'channel-preview-button', onClick: onSelectChannel, ref: channelPreviewButton },
+    return (React__default['default'].createElement("button", { "aria-label": "Select Channel: " + (displayTitle || ''), "aria-selected": active, className: "str-chat__channel-preview-messenger " + unreadClass + " " + activeClass, "data-testid": 'channel-preview-button', onClick: onSelectChannel, ref: channelPreviewButton, role: 'option' },
         React__default['default'].createElement("div", { className: 'str-chat__channel-preview-messenger--left' },
             React__default['default'].createElement(Avatar$1, { image: displayImage, name: avatarName, size: 40 })),
         React__default['default'].createElement("div", { className: 'str-chat__channel-preview-messenger--right' },
@@ -6661,20 +6681,20 @@ var isChannel = function (output) {
 
 var DefaultDropdownContainer = 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("div", null, results.map(function (result, index) { return (React__default['default'].createElement(SearchResultItem, { focusedUser: focusedUser, index: index, key: index, result: result, selectResult: 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;
+    var _a, _b;
     var focusedUser = props.focusedUser, index = props.index, result = props.result, selectResult = props.selectResult;
     var focused = focusedUser === index;
     if (isChannel(result)) {
         var channel_1 = result;
-        return (React__default['default'].createElement("div", { className: "str-chat__channel-search-result " + (focused ? 'focused' : ''), onClick: function () { return selectResult(channel_1); } },
+        return (React__default['default'].createElement("button", { "aria-label": "Select Channel: " + (((_a = channel_1.data) === null || _a === void 0 ? void 0 : _a.name) || ''), className: "str-chat__channel-search-result " + (focused ? 'focused' : ''), onClick: function () { return selectResult(channel_1); } },
             React__default['default'].createElement("div", { className: 'result-hashtag' }, "#"),
-            React__default['default'].createElement("p", { className: 'channel-search__result-text' }, (_a = channel_1.data) === null || _a === void 0 ? void 0 : _a.name)));
+            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("div", { className: "str-chat__channel-search-result " + (focused ? 'focused' : ''), onClick: function () { return selectResult(result); } },
+        return (React__default['default'].createElement("button", { "aria-label": "Select User Channel: " + (result.name || ''), className: "str-chat__channel-search-result " + (focused ? 'focused' : ''), onClick: function () { return selectResult(result); } },
             React__default['default'].createElement(Avatar, { image: result.image, user: result }),
             result.name || result.id));
     }
@@ -6720,7 +6740,7 @@ var SearchResults = function (props) {
         return (React__default['default'].createElement(ResultsContainer, null, SearchLoading ? (React__default['default'].createElement(SearchLoading, null)) : (React__default['default'].createElement("div", { className: 'str-chat__channel-search-container-searching' }, t('Searching...')))));
     }
     if (!results.length) {
-        return (React__default['default'].createElement(ResultsContainer, null, SearchEmpty ? (React__default['default'].createElement(SearchEmpty, null)) : (React__default['default'].createElement("div", { className: 'str-chat__channel-search-container-empty' }, t('No results found')))));
+        return (React__default['default'].createElement(ResultsContainer, null, SearchEmpty ? (React__default['default'].createElement(SearchEmpty, null)) : (React__default['default'].createElement("div", { "aria-live": 'polite', className: 'str-chat__channel-search-container-empty' }, t('No results found')))));
     }
     return (React__default['default'].createElement(ResultsContainer, null,
         SearchResultsHeader && React__default['default'].createElement(SearchResultsHeader, null),
@@ -6845,7 +6865,7 @@ var UnMemoizedEmptyStateIndicator = function (props) {
     var listType = props.listType;
     var t = useTranslationContext('EmptyStateIndicator').t;
     if (listType === 'channel')
-        return React__default['default'].createElement("p", null, t('You have no channels currently'));
+        return React__default['default'].createElement("p", { role: 'listitem' }, t('You have no channels currently'));
     if (listType === 'message')
         return null;
     return React__default['default'].createElement("p", null, "No items exist");
@@ -6855,7 +6875,7 @@ var EmptyStateIndicator = React__default['default'].memo(UnMemoizedEmptyStateInd
 var UnMemoizedLoadMoreButton = function (props) {
     var _a = props.children, children = _a === void 0 ? 'Load more' : _a, onClick = props.onClick, refreshing = props.refreshing;
     return (React__default['default'].createElement("div", { className: 'str-chat__load-more-button' },
-        React__default['default'].createElement("button", { className: 'str-chat__load-more-button__button', "data-testid": 'load-more-button', disabled: refreshing, onClick: onClick }, refreshing ? React__default['default'].createElement(reactFileUtils.LoadingIndicator, null) : children)));
+        React__default['default'].createElement("button", { "aria-label": 'Load More Channels', className: 'str-chat__load-more-button__button', "data-testid": 'load-more-button', disabled: refreshing, onClick: onClick }, refreshing ? React__default['default'].createElement(reactFileUtils.LoadingIndicator, null) : children)));
 };
 var LoadMoreButton = React__default['default'].memo(UnMemoizedLoadMoreButton);
 
@@ -7094,19 +7114,19 @@ Dayjs__default['default'].updateLocale('it', {
 Dayjs__default['default'].updateLocale('ja', {
     calendar: {
         lastDay: '[昨日] LT',
-        lastWeek: '[過去] dddd [で] LT',
+        lastWeek: 'dddd LT',
         nextDay: '[明日] LT',
-        nextWeek: 'dddd [で] LT',
-        sameDay: '[今日は] LT',
+        nextWeek: '[次の] dddd LT',
+        sameDay: '[今日] LT',
         sameElse: 'L',
     },
 });
 Dayjs__default['default'].updateLocale('ko', {
     calendar: {
         lastDay: '[어제] LT',
-        lastWeek: '[마지막] dddd [~에] LT',
+        lastWeek: '[지난] dddd LT',
         nextDay: '[내일] LT',
-        nextWeek: 'dddd [~에] LT',
+        nextWeek: 'dddd LT',
         sameDay: '[오늘] LT',
         sameElse: 'L',
     },
@@ -7599,7 +7619,7 @@ var Streami18n = /** @class */ (function () {
     return Streami18n;
 }());
 
-var version = '6.12.0';
+var version = '7.0.0';
 
 var useChat = function (_a) {
     var _b;
@@ -8334,7 +8354,7 @@ var UnMemoizedCustomNotification = function (props) {
     var active = props.active, children = props.children, type = props.type;
     if (!active)
         return null;
-    return (React__default['default'].createElement("div", { className: "str-chat__custom-notification notification-" + type, "data-testid": 'custom-notification' }, children));
+    return (React__default['default'].createElement("div", { "aria-live": 'polite', className: "str-chat__custom-notification notification-" + type, "data-testid": 'custom-notification' }, children));
 };
 var CustomNotification = React__default['default'].memo(UnMemoizedCustomNotification);
 
@@ -8786,7 +8806,7 @@ var UnMemoizedMessageNotification = function (props) {
     var children = props.children, onClick = props.onClick, _a = props.showNotification, showNotification = _a === void 0 ? true : _a;
     if (!showNotification)
         return null;
-    return (React__default['default'].createElement("button", { className: 'str-chat__message-notification', "data-testid": 'message-notification', onClick: onClick }, children));
+    return (React__default['default'].createElement("button", { "aria-live": 'polite', className: 'str-chat__message-notification', "data-testid": 'message-notification', onClick: onClick }, children));
 };
 var MessageNotification = React__default['default'].memo(UnMemoizedMessageNotification);
 
@@ -9119,12 +9139,8 @@ var VirtualizedMessageListWithContext = function (props) {
         var groupedByUser = shouldGroupByUser &&
             streamMessageIndex > 0 &&
             ((_a = message.user) === null || _a === void 0 ? void 0 : _a.id) === ((_b = messageList[streamMessageIndex - 1].user) === null || _b === void 0 ? void 0 : _b.id);
-        var firstOfGroup = shouldGroupByUser &&
-            streamMessageIndex > 0 &&
-            ((_c = message.user) === null || _c === void 0 ? void 0 : _c.id) !== ((_e = (_d = messageList[streamMessageIndex - 1]) === null || _d === void 0 ? void 0 : _d.user) === null || _e === void 0 ? void 0 : _e.id);
-        var endOfGroup = shouldGroupByUser &&
-            streamMessageIndex > 0 &&
-            ((_f = message.user) === null || _f === void 0 ? void 0 : _f.id) !== ((_h = (_g = messageList[streamMessageIndex + 1]) === null || _g === void 0 ? void 0 : _g.user) === null || _h === void 0 ? void 0 : _h.id);
+        var firstOfGroup = shouldGroupByUser && ((_c = message.user) === null || _c === void 0 ? void 0 : _c.id) !== ((_e = (_d = messageList[streamMessageIndex - 1]) === null || _d === void 0 ? void 0 : _d.user) === null || _e === void 0 ? void 0 : _e.id);
+        var endOfGroup = shouldGroupByUser && ((_f = message.user) === null || _f === void 0 ? void 0 : _f.id) !== ((_h = (_g = messageList[streamMessageIndex + 1]) === null || _g === void 0 ? void 0 : _g.user) === null || _h === void 0 ? void 0 : _h.id);
         return (React__default['default'].createElement(Message, { closeReactionSelectorOnClick: closeReactionSelectorOnClick, customMessageActions: props.customMessageActions, endOfGroup: endOfGroup, firstOfGroup: firstOfGroup, groupedByUser: groupedByUser, message: message, Message: MessageUIComponent, messageActions: props.messageActions }));
     }, [customMessageRenderer, shouldGroupByUser, numItemsPrepended]);
     var virtuosoComponents = React.useMemo(function () {
@@ -9205,7 +9221,7 @@ var DefaultThreadHeader = function (props) {
         React__default['default'].createElement("div", { className: 'str-chat__thread-header-details' },
             React__default['default'].createElement("strong", null, t('Thread')),
             React__default['default'].createElement("small", null, getReplyCount())),
-        React__default['default'].createElement("button", { className: 'str-chat__square-button', "data-testid": 'close-button', onClick: function (event) { return closeThread(event); } },
+        React__default['default'].createElement("button", { "aria-label": 'Close thread', className: 'str-chat__square-button', "data-testid": 'close-button', onClick: function (event) { return closeThread(event); } },
             React__default['default'].createElement("svg", { height: '10', width: '10', xmlns: 'http://www.w3.org/2000/svg' },
                 React__default['default'].createElement("path", { d: 'M9.916 1.027L8.973.084 5 4.058 1.027.084l-.943.943L4.058 5 .084 8.973l.943.943L5 5.942l3.973 3.974.943-.943L5.942 5z', fillRule: 'evenodd' })))));
 };
@@ -9253,10 +9269,7 @@ var ThreadInner = function (props) {
 var UnMemoizedWindow = function (props) {
     var children = props.children, _a = props.hideOnThread, hideOnThread = _a === void 0 ? false : _a;
     var thread = useChannelStateContext('Window').thread;
-    // If thread is active and window should hide on thread. Return null
-    if (thread && hideOnThread)
-        return null;
-    return React__default['default'].createElement("div", { className: "str-chat__main-panel" }, children);
+    return (React__default['default'].createElement("div", { className: "str-chat__main-panel   " + (hideOnThread && thread ? 'str-chat__main-panel--hideOnThread' : '') }, children));
 };
 /**
  * A UI component for conditionally displaying a Thread or Channel
@@ -9349,9 +9362,9 @@ exports.MessageText = MessageText;
 exports.MessageTimestamp = MessageTimestamp;
 exports.Modal = Modal;
 exports.ModalComponent = ModalComponent;
-exports.ModalImage = ModalImage;
 exports.PinIcon = PinIcon;
 exports.PinIndicator = PinIndicator;
+exports.QuotedMessagePreview = QuotedMessagePreview;
 exports.ReactionIcon = ReactionIcon;
 exports.ReactionSelector = ReactionSelector;
 exports.ReactionsList = ReactionsList;