stream-chat-react 9.5.0 → 10.0.0-theming-v2.3

package/dist/components/MessageInput/icons.js

@@ -1,5 +1,28 @@
-import React from 'react';
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useId } from 'react';
 import { useTranslationContext } from '../../context/TranslationContext';
+import { useChatContext } from '../../context/ChatContext';
 export var EmojiIconLarge = function () {
     var t = useTranslationContext('EmojiIconLarge').t;
     return (React.createElement("svg", { height: '28', width: '28', xmlns: 'http://www.w3.org/2000/svg' },
@@ -14,6 +37,10 @@ export var EmojiIconSmall = function () {
         React.createElement("g", { clipRule: 'evenodd', fillRule: 'evenodd' },
             React.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
+export var EmojiPickerIcon = function () { return (React.createElement("svg", { preserveAspectRatio: 'xMinYMin', viewBox: '0 0 28 28', width: '100%', xmlns: 'http://www.w3.org/2000/svg' },
+    React.createElement("g", { clipRule: 'evenodd', fillRule: 'evenodd' },
+        React.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' })))); };
 export var FileUploadIcon = function () {
     var t = useTranslationContext('FileUploadIcon').t;
     return (React.createElement("svg", { height: '14', width: '14', xmlns: 'http://www.w3.org/2000/svg' },
@@ -26,11 +53,44 @@ export var FileUploadIconFlat = function () {
         React.createElement("title", null, t('Attach files')),
         React.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' })));
 };
-export var SendButton = function (_a) {
-    var sendMessage = _a.sendMessage;
+export var LoadingIndicatorIcon = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? 20 : _b;
+    var id = useId();
+    return (React.createElement("div", { className: 'str-chat__loading-indicator' },
+        React.createElement("svg", { "data-testid": 'loading-indicator', height: size, viewBox: '0 0 30 30', width: size, xmlns: 'http://www.w3.org/2000/svg' },
+            React.createElement("defs", null,
+                React.createElement("linearGradient", { id: "".concat(id, "-linear-gradient"), x1: '50%', x2: '50%', y1: '0%', y2: '100%' },
+                    React.createElement("stop", { offset: '0%', stopColor: '#FFF', stopOpacity: '0' }),
+                    React.createElement("stop", { "data-testid": 'stop-color', offset: '100%', stopOpacity: '1' }))),
+            React.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
+export var UploadIcon = function () { return (React.createElement("svg", { "data-testid": 'attach', fill: 'none', height: '24', viewBox: '0 0 24 24', width: '24', xmlns: 'http://www.w3.org/2000/svg' },
+    React.createElement("g", { clipPath: 'url(#clip0_10878_5)' },
+        React.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.createElement("defs", null,
+        React.createElement("clipPath", { id: 'clip0_10878_5' },
+            React.createElement("rect", { fill: 'white', height: '24', width: '24' }))))); };
+export var CloseIcon = function () { return (React.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.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' }))); };
+export var RetryIcon = function () { return (React.createElement("svg", { "data-testid": 'retry', fill: 'none', height: '24', viewBox: '0 0 24 24', width: '24', xmlns: 'http://www.w3.org/2000/svg' },
+    React.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' }))); };
+export var DownloadIcon = function () { return (React.createElement("svg", { "data-testid": 'download', fill: 'none', height: '24', viewBox: '0 0 24 24', width: '24', xmlns: 'http://www.w3.org/2000/svg' },
+    React.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' }))); };
+export var SendIconV1 = function () {
     var t = useTranslationContext('SendButton').t;
-    return (React.createElement("button", { "aria-label": 'Send', className: 'str-chat__send-button', onClick: sendMessage },
-        React.createElement("svg", { height: '17', viewBox: '0 0 18 17', width: '18', xmlns: 'http://www.w3.org/2000/svg' },
-            React.createElement("title", null, t('Send')),
-            React.createElement("path", { d: 'M0 17.015l17.333-8.508L0 0v6.617l12.417 1.89L0 10.397z', fill: '#006cff', fillRule: 'evenodd' }))));
+    return (React.createElement("svg", { height: '17', viewBox: '0 0 18 17', width: '18', xmlns: 'http://www.w3.org/2000/svg' },
+        React.createElement("title", null, t('Send')),
+        React.createElement("path", { d: 'M0 17.015l17.333-8.508L0 0v6.617l12.417 1.89L0 10.397z', fill: '#006cff', fillRule: 'evenodd' })));
+};
+export var SendIconV2 = function () {
+    var t = useTranslationContext('SendButton').t;
+    return (React.createElement("svg", { "data-testid": 'send', fill: 'none', height: '24', viewBox: '0 0 24 24', width: '24', xmlns: 'http://www.w3.org/2000/svg' },
+        React.createElement("title", null, t('Send')),
+        React.createElement("path", { d: 'M4.00952 22L24 12L4.00952 2L4 9.77778L18.2857 12L4 14.2222L4.00952 22Z', fill: 'black' })));
+};
+export var SendButton = function (_a) {
+    var sendMessage = _a.sendMessage, rest = __rest(_a, ["sendMessage"]);
+    var themeVersion = useChatContext('SendButton').themeVersion;
+    return (React.createElement("button", __assign({ "aria-label": 'Send', className: 'str-chat__send-button', "data-testid": 'send-button', onClick: sendMessage, type: 'button' }, rest), themeVersion === '2' ? React.createElement(SendIconV2, null) : React.createElement(SendIconV1, null)));
 };

package/dist/components/MessageList/CustomNotification.js

@@ -3,6 +3,6 @@ var UnMemoizedCustomNotification = function (props) {
     var active = props.active, children = props.children, type = props.type;
     if (!active)
         return null;
-    return (React.createElement("div", { "aria-live": 'polite', className: "str-chat__custom-notification notification-" + type, "data-testid": 'custom-notification' }, children));
+    return (React.createElement("div", { "aria-live": 'polite', className: "str-chat__custom-notification notification-".concat(type, " str-chat__notification"), "data-testid": 'custom-notification' }, children));
 };
 export var CustomNotification = React.memo(UnMemoizedCustomNotification);

package/dist/components/MessageList/MessageList.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { ChannelActionContextValue } from '../../context/ChannelActionContext';
 import { InfiniteScrollProps } from '../InfiniteScrollPaginator/InfiniteScroll';
 import type { GroupStyle } from './utils';
@@ -12,6 +13,8 @@ export declare type MessageListProps<StreamChatGenerics extends DefaultStreamCha
     groupStyles?: (message: StreamMessage<StreamChatGenerics>, previousMessage: StreamMessage<StreamChatGenerics>, nextMessage: StreamMessage<StreamChatGenerics>, noGroupByUser: boolean) => GroupStyle;
     /** Whether or not the list has more items to load */
     hasMore?: boolean;
+    /** Element to be rendered at the top of the thread message list. By default, these are the Message and ThreadStart components */
+    head?: React.ReactElement;
     /** Position to render HeaderComponent */
     headerPosition?: number;
     /** Hides the MessageDeleted components from the list, defaults to `false` */

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

@@ -1 +1 @@
-{"version":3,"file":"MessageList.d.ts","sourceRoot":"","sources":["../../../src/components/MessageList/MessageList.tsx"],"names":[],"mappings":"AASA,OAAO,EACL,yBAAyB,EAE1B,MAAM,oCAAoC,CAAC;AAQ5C,OAAO,EAAkB,mBAAmB,EAAE,MAAM,2CAA2C,CAAC;AAKhG,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAErD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAEvE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AA6LnE,aAAK,qBAAqB,GACtB,6BAA6B,GAC7B,8BAA8B,GAC9B,sBAAsB,GACtB,uBAAuB,GACvB,YAAY,GACZ,mCAAmC,GACnC,iCAAiC,GACjC,mCAAmC,GACnC,8BAA8B,GAC9B,gCAAgC,GAChC,gCAAgC,GAChC,SAAS,GACT,gBAAgB,GAChB,mBAAmB,GACnB,iBAAiB,GACjB,iBAAiB,GACjB,aAAa,GACb,aAAa,GACb,YAAY,GACZ,gBAAgB,GAChB,YAAY,GACZ,kBAAkB,GAClB,YAAY,CAAC;AAEjB,oBAAY,gBAAgB,CAC1B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,EAAE,qBAAqB,CAAC,CAAC,GAAG;IAC3E,8FAA8F;IAC9F,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,6DAA6D;IAC7D,WAAW,CAAC,EAAE,CACZ,OAAO,EAAE,aAAa,CAAC,kBAAkB,CAAC,EAC1C,eAAe,EAAE,aAAa,CAAC,kBAAkB,CAAC,EAClD,WAAW,EAAE,aAAa,CAAC,kBAAkB,CAAC,EAC9C,aAAa,EAAE,OAAO,KACnB,UAAU,CAAC;IAChB,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yCAAyC;IACzC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,6EAA6E;IAC7E,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,qIAAqI;IACrI,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,mLAAmL;IACnL,2BAA2B,CAAC,EAAE,mBAAmB,CAAC;IAClD,iHAAiH;IACjH,mBAAmB,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1C,8DAA8D;IAC9D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,+DAA+D;IAC/D,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,4LAA4L;IAC5L,QAAQ,CAAC,EAAE,yBAAyB,CAAC,UAAU,CAAC,GAAG,CAAC,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;IACzE,6LAA6L;IAC7L,aAAa,CAAC,EAAE,yBAAyB,CAAC,eAAe,CAAC,GAAG,CAAC,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;IACnF,gDAAgD;IAChD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yKAAyK;IACzK,QAAQ,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,EAAE,CAAC;IAC/C,qDAAqD;IACrD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,qHAAqH;IACrH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,6GAA6G;IAC7G,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,uDAAuD;IACvD,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,gJA2BvB,CAAC"}
+{"version":3,"file":"MessageList.d.ts","sourceRoot":"","sources":["../../../src/components/MessageList/MessageList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,OAAO,EACL,yBAAyB,EAE1B,MAAM,oCAAoC,CAAC;AAQ5C,OAAO,EAAkB,mBAAmB,EAAE,MAAM,2CAA2C,CAAC;AAMhG,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAErD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAEvE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAuMnE,aAAK,qBAAqB,GACtB,6BAA6B,GAC7B,8BAA8B,GAC9B,sBAAsB,GACtB,uBAAuB,GACvB,YAAY,GACZ,mCAAmC,GACnC,iCAAiC,GACjC,mCAAmC,GACnC,8BAA8B,GAC9B,gCAAgC,GAChC,gCAAgC,GAChC,SAAS,GACT,gBAAgB,GAChB,mBAAmB,GACnB,iBAAiB,GACjB,iBAAiB,GACjB,aAAa,GACb,aAAa,GACb,YAAY,GACZ,gBAAgB,GAChB,YAAY,GACZ,kBAAkB,GAClB,YAAY,CAAC;AAEjB,oBAAY,gBAAgB,CAC1B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,EAAE,qBAAqB,CAAC,CAAC,GAAG;IAC3E,8FAA8F;IAC9F,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,6DAA6D;IAC7D,WAAW,CAAC,EAAE,CACZ,OAAO,EAAE,aAAa,CAAC,kBAAkB,CAAC,EAC1C,eAAe,EAAE,aAAa,CAAC,kBAAkB,CAAC,EAClD,WAAW,EAAE,aAAa,CAAC,kBAAkB,CAAC,EAC9C,aAAa,EAAE,OAAO,KACnB,UAAU,CAAC;IAChB,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iIAAiI;IACjI,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,yCAAyC;IACzC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,6EAA6E;IAC7E,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,qIAAqI;IACrI,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,mLAAmL;IACnL,2BAA2B,CAAC,EAAE,mBAAmB,CAAC;IAClD,iHAAiH;IACjH,mBAAmB,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1C,8DAA8D;IAC9D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,+DAA+D;IAC/D,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,4LAA4L;IAC5L,QAAQ,CAAC,EAAE,yBAAyB,CAAC,UAAU,CAAC,GAAG,CAAC,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;IACzE,6LAA6L;IAC7L,aAAa,CAAC,EAAE,yBAAyB,CAAC,eAAe,CAAC,GAAG,CAAC,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;IACnF,gDAAgD;IAChD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yKAAyK;IACzK,QAAQ,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,EAAE,CAAC;IAC/C,qDAAqD;IACrD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,qHAAqH;IACrH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,6GAA6G;IAC7G,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,uDAAuD;IACvD,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,gJA2BvB,CAAC"}

package/dist/components/MessageList/MessageList.js

@@ -71,6 +71,7 @@ import { InfiniteScroll } from '../InfiniteScrollPaginator/InfiniteScroll';
 import { LoadingIndicator as DefaultLoadingIndicator } from '../Loading';
 import { defaultPinPermissions, MESSAGE_ACTIONS } from '../Message/utils';
 import { TypingIndicator as DefaultTypingIndicator } from '../TypingIndicator';
+import { MessageListMainPanel } from './MessageListMainPanel';
 var MessageListWithContext = function (props) {
     var channel = props.channel, _a = props.disableDateSeparator, disableDateSeparator = _a === void 0 ? false : _a, groupStyles = props.groupStyles, _b = props.hideDeletedMessages, hideDeletedMessages = _b === void 0 ? false : _b, _c = props.hideNewMessageSeparator, hideNewMessageSeparator = _c === void 0 ? false : _c, _d = props.messageActions, messageActions = _d === void 0 ? Object.keys(MESSAGE_ACTIONS) : _d, _e = props.messages, messages = _e === void 0 ? [] : _e, notifications = props.notifications, _f = props.noGroupByUser, noGroupByUser = _f === void 0 ? false : _f, _g = props.pinPermissions, pinPermissions = _g === void 0 ? defaultPinPermissions : _g, // @deprecated in favor of `channelCapabilities` - TODO: remove in next major release
     _h = props.returnAllReadData, // @deprecated in favor of `channelCapabilities` - TODO: remove in next major release
@@ -78,16 +79,15 @@ var MessageListWithContext = function (props) {
     var _p = React.useState(null), listElement = _p[0], setListElement = _p[1];
     var _q = React.useState(null), ulElement = _q[0], setUlElement = _q[1];
     var customClasses = useChatContext('MessageList').customClasses;
-    var _r = useComponentContext('MessageList'), _s = _r.EmptyStateIndicator, EmptyStateIndicator = _s === void 0 ? DefaultEmptyStateIndicator : _s, _t = _r.MessageListNotifications, MessageListNotifications = _t === void 0 ? DefaultMessageListNotifications : _t, _u = _r.MessageNotification, MessageNotification = _u === void 0 ? DefaultMessageNotification : _u, _v = _r.TypingIndicator, TypingIndicator = _v === void 0 ? DefaultTypingIndicator : _v;
-    var _w = useScrollLocationLogic({
+    var _r = useComponentContext('MessageList'), _s = _r.EmptyStateIndicator, EmptyStateIndicator = _s === void 0 ? DefaultEmptyStateIndicator : _s, _t = _r.LoadingIndicator, LoadingIndicator = _t === void 0 ? DefaultLoadingIndicator : _t, _u = _r.MessageListNotifications, MessageListNotifications = _u === void 0 ? DefaultMessageListNotifications : _u, _v = _r.MessageNotification, MessageNotification = _v === void 0 ? DefaultMessageNotification : _v, _w = _r.TypingIndicator, TypingIndicator = _w === void 0 ? DefaultTypingIndicator : _w;
+    var _x = useScrollLocationLogic({
         hasMoreNewer: hasMoreNewer,
         listElement: listElement,
         messages: messages,
         scrolledUpThreshold: props.scrolledUpThreshold,
         suppressAutoscroll: suppressAutoscroll,
-        ulElement: ulElement,
-    }), hasNewMessages = _w.hasNewMessages, onMessageLoadCaptured = _w.onMessageLoadCaptured, onScroll = _w.onScroll, scrollToBottom = _w.scrollToBottom, wrapperRect = _w.wrapperRect;
-    var _x = useEnrichedMessages({
+    }), hasNewMessages = _x.hasNewMessages, isMessageListScrolledToBottom = _x.isMessageListScrolledToBottom, onMessageLoadCaptured = _x.onMessageLoadCaptured, onScroll = _x.onScroll, scrollToBottom = _x.scrollToBottom, wrapperRect = _x.wrapperRect;
+    var _y = useEnrichedMessages({
         channel: channel,
         disableDateSeparator: disableDateSeparator,
         groupStyles: groupStyles,
@@ -96,7 +96,7 @@ var MessageListWithContext = function (props) {
         hideNewMessageSeparator: hideNewMessageSeparator,
         messages: messages,
         noGroupByUser: noGroupByUser,
-    }), messageGroupStyles = _x.messageGroupStyles, enrichedMessages = _x.messages;
+    }), messageGroupStyles = _y.messageGroupStyles, enrichedMessages = _y.messages;
     var elements = useMessageListElements({
         enrichedMessages: enrichedMessages,
         internalMessageProps: {
@@ -131,9 +131,10 @@ var MessageListWithContext = function (props) {
         returnAllReadData: returnAllReadData,
         threadList: threadList,
     });
-    var _y = useComponentContext('useInternalInfiniteScrollProps').LoadingIndicator, LoadingIndicator = _y === void 0 ? DefaultLoadingIndicator : _y;
     var messageListClass = (customClasses === null || customClasses === void 0 ? void 0 : customClasses.messageList) || 'str-chat__list';
-    var threadListClass = threadList ? (customClasses === null || customClasses === void 0 ? void 0 : customClasses.threadList) || 'str-chat__list--thread' : '';
+    var threadListClass = threadList
+        ? (customClasses === null || customClasses === void 0 ? void 0 : customClasses.threadList) || 'str-chat__list--thread str-chat__thread-list'
+        : '';
     var loadMore = React.useCallback(function () {
         if (loadMoreCallback) {
             loadMoreCallback(messageLimit);
@@ -162,16 +163,18 @@ var MessageListWithContext = function (props) {
     }); }, [scrollToBottom, hasMoreNewer]);
     React.useLayoutEffect(function () {
         if (highlightedMessageId) {
-            var element = ulElement === null || ulElement === void 0 ? void 0 : ulElement.querySelector("[data-message-id='" + highlightedMessageId + "']");
+            var element = ulElement === null || ulElement === void 0 ? void 0 : ulElement.querySelector("[data-message-id='".concat(highlightedMessageId, "']"));
             element === null || element === void 0 ? void 0 : element.scrollIntoView({ block: 'center' });
         }
     }, [highlightedMessageId]);
+    var showEmptyStateIndicator = elements.length === 0 && !threadList;
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: messageListClass + " " + threadListClass, onScroll: onScroll, ref: setListElement, tabIndex: 0 }, !elements.length ? (React.createElement(EmptyStateIndicator, { listType: 'message' })) : (React.createElement(InfiniteScroll, __assign({ className: 'str-chat__reverse-infinite-scroll', "data-testid": 'reverse-infinite-scroll', hasMore: props.hasMore, hasMoreNewer: props.hasMoreNewer, isLoading: props.loadingMore, loader: React.createElement("div", { className: 'str-chat__list__loading', key: 'loadingindicator' }, props.loadingMore && React.createElement(LoadingIndicator, { size: 20 })), loadMore: loadMore, loadMoreNewer: loadMoreNewer }, props.internalInfiniteScrollProps),
-            React.createElement("ul", { className: 'str-chat__ul', ref: setUlElement }, elements),
-            React.createElement(TypingIndicator, { threadList: threadList }),
-            React.createElement("div", { key: 'bottom' })))),
-        React.createElement(MessageListNotifications, { hasNewMessages: hasNewMessages, isNotAtLatestMessageSet: hasMoreNewer, MessageNotification: MessageNotification, notifications: notifications, scrollToBottom: scrollToBottomFromNotification })));
+        React.createElement(MessageListMainPanel, null,
+            React.createElement("div", { className: "".concat(messageListClass, " ").concat(threadListClass), onScroll: onScroll, ref: setListElement, tabIndex: 0 }, showEmptyStateIndicator ? (React.createElement(EmptyStateIndicator, { key: 'empty-state-indicator', listType: threadList ? 'thread' : 'message' })) : (React.createElement(InfiniteScroll, __assign({ className: 'str-chat__reverse-infinite-scroll  str-chat__message-list-scroll', "data-testid": 'reverse-infinite-scroll', hasMore: props.hasMore, hasMoreNewer: props.hasMoreNewer, head: props.head, isLoading: props.loadingMore, loader: React.createElement("div", { className: 'str-chat__list__loading', key: 'loading-indicator' }, props.loadingMore && React.createElement(LoadingIndicator, { size: 20 })), loadMore: loadMore, loadMoreNewer: loadMoreNewer }, props.internalInfiniteScrollProps),
+                React.createElement("ul", { className: 'str-chat__ul', ref: setUlElement }, elements),
+                React.createElement(TypingIndicator, { threadList: threadList }),
+                React.createElement("div", { key: 'bottom' }))))),
+        React.createElement(MessageListNotifications, { hasNewMessages: hasNewMessages, isMessageListScrolledToBottom: isMessageListScrolledToBottom, isNotAtLatestMessageSet: hasMoreNewer, MessageNotification: MessageNotification, notifications: notifications, scrollToBottom: scrollToBottomFromNotification, threadList: threadList })));
 };
 /**
  * The MessageList component renders a list of Messages.

package/dist/components/MessageList/MessageListMainPanel.d.ts

@@ -0,0 +1,3 @@
+import type { PropsWithChildrenOnly } from '../../types/types';
+export declare const MessageListMainPanel: ({ children }: PropsWithChildrenOnly) => JSX.Element;
+//# sourceMappingURL=MessageListMainPanel.d.ts.map

package/dist/components/MessageList/MessageListMainPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageListMainPanel.d.ts","sourceRoot":"","sources":["../../../src/components/MessageList/MessageListMainPanel.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAE/D,eAAO,MAAM,oBAAoB,iBAAkB,qBAAqB,gBAMvE,CAAC"}

package/dist/components/MessageList/MessageListMainPanel.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { useChatContext } from '../../context/ChatContext';
+export var MessageListMainPanel = function (_a) {
+    var children = _a.children;
+    var themeVersion = useChatContext('MessageListMainPanel').themeVersion;
+    if (themeVersion === '2')
+        return React.createElement("div", { className: 'str-chat__main-panel-inner' }, children);
+    return React.createElement(React.Fragment, null, children);
+};

package/dist/components/MessageList/MessageListNotifications.d.ts

@@ -3,10 +3,12 @@ import type { MessageNotificationProps } from './MessageNotification';
 import type { ChannelNotifications } from '../../context/ChannelStateContext';
 export declare type MessageListNotificationsProps = {
     hasNewMessages: boolean;
+    isMessageListScrolledToBottom: boolean;
     isNotAtLatestMessageSet: boolean;
     MessageNotification: React.ComponentType<MessageNotificationProps>;
     notifications: ChannelNotifications;
     scrollToBottom: () => void;
+    threadList?: boolean;
 };
 export declare const MessageListNotifications: (props: MessageListNotificationsProps) => JSX.Element;
 //# sourceMappingURL=MessageListNotifications.d.ts.map

package/dist/components/MessageList/MessageListNotifications.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageListNotifications.d.ts","sourceRoot":"","sources":["../../../src/components/MessageList/MessageListNotifications.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAEtE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AAE9E,oBAAY,6BAA6B,GAAG;IAC1C,cAAc,EAAE,OAAO,CAAC;IACxB,uBAAuB,EAAE,OAAO,CAAC;IACjC,mBAAmB,EAAE,KAAK,CAAC,aAAa,CAAC,wBAAwB,CAAC,CAAC;IACnE,aAAa,EAAE,oBAAoB,CAAC;IACpC,cAAc,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,wBAAwB,UAAW,6BAA6B,gBA2B5E,CAAC"}
+{"version":3,"file":"MessageListNotifications.d.ts","sourceRoot":"","sources":["../../../src/components/MessageList/MessageListNotifications.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAEtE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AAE9E,oBAAY,6BAA6B,GAAG;IAC1C,cAAc,EAAE,OAAO,CAAC;IACxB,6BAA6B,EAAE,OAAO,CAAC;IACvC,uBAAuB,EAAE,OAAO,CAAC;IACjC,mBAAmB,EAAE,KAAK,CAAC,aAAa,CAAC,wBAAwB,CAAC,CAAC;IACnE,aAAa,EAAE,oBAAoB,CAAC;IACpC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,wBAAwB,UAAW,6BAA6B,gBA+B5E,CAAC"}

package/dist/components/MessageList/MessageListNotifications.js

@@ -3,10 +3,10 @@ import { ConnectionStatus } from './ConnectionStatus';
 import { CustomNotification } from './CustomNotification';
 import { useTranslationContext } from '../../context/TranslationContext';
 export var MessageListNotifications = function (props) {
-    var hasNewMessages = props.hasNewMessages, isNotAtLatestMessageSet = props.isNotAtLatestMessageSet, MessageNotification = props.MessageNotification, notifications = props.notifications, scrollToBottom = props.scrollToBottom;
+    var hasNewMessages = props.hasNewMessages, isMessageListScrolledToBottom = props.isMessageListScrolledToBottom, isNotAtLatestMessageSet = props.isNotAtLatestMessageSet, MessageNotification = props.MessageNotification, notifications = props.notifications, scrollToBottom = props.scrollToBottom, threadList = props.threadList;
     var t = useTranslationContext('MessageListNotifications').t;
     return (React.createElement("div", { className: 'str-chat__list-notifications' },
         notifications.map(function (notification) { return (React.createElement(CustomNotification, { active: true, key: notification.id, type: notification.type }, notification.text)); }),
         React.createElement(ConnectionStatus, null),
-        React.createElement(MessageNotification, { onClick: scrollToBottom, showNotification: hasNewMessages || isNotAtLatestMessageSet }, isNotAtLatestMessageSet ? t('Latest Messages') : t('New Messages!'))));
+        React.createElement(MessageNotification, { isMessageListScrolledToBottom: isMessageListScrolledToBottom, onClick: scrollToBottom, showNotification: hasNewMessages || isNotAtLatestMessageSet, threadList: threadList }, isNotAtLatestMessageSet ? t('Latest Messages') : t('New Messages!'))));
 };

package/dist/components/MessageList/MessageNotification.d.ts

@@ -1,10 +1,13 @@
-import React from 'react';
-export declare type MessageNotificationProps = {
+import React, { PropsWithChildren } from 'react';
+export declare type MessageNotificationProps = PropsWithChildren<{
     /** button click event handler */
     onClick: React.MouseEventHandler;
-    /** Whether or not to show notification */
-    showNotification: boolean;
-    children?: React.ReactNode;
-};
+    /** signals whether the message list is considered (below a threshold) to be scrolled to the bottom. Prop used only by [ScrollToBottomButton](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageList/ScrollToBottomButton.tsx) */
+    isMessageListScrolledToBottom?: boolean;
+    /** Whether or not to show notification. Prop used only by [MessageNotification](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageList/MessageNotification.tsx)  */
+    showNotification?: boolean;
+    /** informs the component whether it is rendered inside a thread message list */
+    threadList?: boolean;
+}>;
 export declare const MessageNotification: (props: MessageNotificationProps) => JSX.Element | null;
 //# sourceMappingURL=MessageNotification.d.ts.map

package/dist/components/MessageList/MessageNotification.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageNotification.d.ts","sourceRoot":"","sources":["../../../src/components/MessageList/MessageNotification.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,oBAAY,wBAAwB,GAAG;IACrC,iCAAiC;IACjC,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC,0CAA0C;IAC1C,gBAAgB,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAmBF,eAAO,MAAM,mBAAmB,UAjBc,wBAAwB,uBAmB7B,CAAC"}
+{"version":3,"file":"MessageNotification.d.ts","sourceRoot":"","sources":["../../../src/components/MessageList/MessageNotification.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEjD,oBAAY,wBAAwB,GAAG,iBAAiB,CAAC;IACvD,iCAAiC;IACjC,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC,gQAAgQ;IAChQ,6BAA6B,CAAC,EAAE,OAAO,CAAC;IACxC,mMAAmM;IACnM,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gFAAgF;IAChF,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC,CAAC;AAmBH,eAAO,MAAM,mBAAmB,UAjBc,wBAAwB,uBAmB7B,CAAC"}

package/dist/components/MessageList/MessageNotification.js

@@ -3,6 +3,6 @@ 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.createElement("button", { "aria-live": 'polite', className: 'str-chat__message-notification', "data-testid": 'message-notification', onClick: onClick }, children));
+    return (React.createElement("button", { "aria-live": 'polite', className: "str-chat__message-notification", "data-testid": 'message-notification', onClick: onClick }, children));
 };
 export var MessageNotification = React.memo(UnMemoizedMessageNotification);

package/dist/components/MessageList/ScrollToBottomButton.d.ts

@@ -0,0 +1,3 @@
+import type { MessageNotificationProps } from './MessageNotification';
+export declare const ScrollToBottomButton: (props: Pick<MessageNotificationProps, 'isMessageListScrolledToBottom' | 'onClick' | 'threadList'>) => JSX.Element | null;
+//# sourceMappingURL=ScrollToBottomButton.d.ts.map

package/dist/components/MessageList/ScrollToBottomButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollToBottomButton.d.ts","sourceRoot":"","sources":["../../../src/components/MessageList/ScrollToBottomButton.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAsFtE,eAAO,MAAM,oBAAoB,UAnFxB,KAAK,wBAAwB,EAAE,+BAA+B,GAAG,SAAS,GAAG,YAAY,CAAC,uBAqFzD,CAAC"}

package/dist/components/MessageList/ScrollToBottomButton.js

@@ -0,0 +1,53 @@
+import React, { useEffect, useState } from 'react';
+import clsx from 'clsx';
+import { ArrowDown } from './icons';
+import { useChannelStateContext, useChatContext } from '../../context';
+var UnMemoizedScrollToBottomButton = function (props) {
+    var isMessageListScrolledToBottom = props.isMessageListScrolledToBottom, onClick = props.onClick, threadList = props.threadList;
+    var _a = useChatContext(), activeChannel = _a.channel, client = _a.client;
+    var thread = useChannelStateContext().thread;
+    var _b = useState((activeChannel === null || activeChannel === void 0 ? void 0 : activeChannel.countUnread()) || 0), countUnread = _b[0], setCountUnread = _b[1];
+    var _c = useState((thread === null || thread === void 0 ? void 0 : thread.reply_count) || 0), replyCount = _c[0], setReplyCount = _c[1];
+    var observedEvent = threadList ? 'message.updated' : 'message.new';
+    useEffect(function () {
+        var handleEvent = function (event) {
+            var _a, _b, _c, _d, _e;
+            var newMessageInAnotherChannel = event.cid !== (activeChannel === null || activeChannel === void 0 ? void 0 : activeChannel.cid);
+            var newMessageIsMine = ((_a = event.user) === null || _a === void 0 ? void 0 : _a.id) === ((_b = client.user) === null || _b === void 0 ? void 0 : _b.id);
+            var isThreadOpen = !!thread;
+            var newMessageIsReply = !!((_c = event.message) === null || _c === void 0 ? void 0 : _c.parent_id);
+            var dontIncreaseMainListCounterOnNewReply = isThreadOpen && !threadList && newMessageIsReply;
+            if (isMessageListScrolledToBottom ||
+                newMessageInAnotherChannel ||
+                newMessageIsMine ||
+                dontIncreaseMainListCounterOnNewReply) {
+                return;
+            }
+            if (event.type === 'message.new') {
+                // cannot rely on channel.countUnread because active channel is automatically marked read
+                setCountUnread(function (prev) { return prev + 1; });
+            }
+            else if (((_d = event.message) === null || _d === void 0 ? void 0 : _d.id) === (thread === null || thread === void 0 ? void 0 : thread.id)) {
+                var newReplyCount_1 = ((_e = event.message) === null || _e === void 0 ? void 0 : _e.reply_count) || 0;
+                setCountUnread(function () { return newReplyCount_1 - replyCount; });
+            }
+        };
+        client.on(observedEvent, handleEvent);
+        return function () {
+            client.off(observedEvent, handleEvent);
+        };
+    }, [activeChannel, isMessageListScrolledToBottom, observedEvent, replyCount, thread]);
+    useEffect(function () {
+        if (isMessageListScrolledToBottom) {
+            setCountUnread(0);
+            setReplyCount((thread === null || thread === void 0 ? void 0 : thread.reply_count) || 0);
+        }
+    }, [isMessageListScrolledToBottom, thread]);
+    if (isMessageListScrolledToBottom)
+        return null;
+    return (React.createElement("div", { className: 'str-chat__jump-to-latest-message' },
+        React.createElement("button", { "aria-live": 'polite', className: "\n        str-chat__message-notification-right\n        str-chat__message-notification-scroll-to-latest\n        str-chat__circle-fab\n      ", "data-testid": 'message-notification', onClick: onClick },
+            React.createElement(ArrowDown, null),
+            countUnread > 0 && (React.createElement("div", { className: clsx('str-chat__message-notification', 'str-chat__message-notification-scroll-to-latest-unread-count', 'str-chat__jump-to-latest-unread-count'), "data-testid": 'unread-message-notification-counter' }, countUnread)))));
+};
+export var ScrollToBottomButton = React.memo(UnMemoizedScrollToBottomButton);

package/dist/components/MessageList/VirtualizedMessageList.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ScrollSeekConfiguration, ScrollSeekPlaceholderProps, VirtuosoProps } from 'react-virtuoso';
+import { GroupStyle } from './utils';
 import { MessageProps, MessageUIComponentProps } from '../Message';
 import { ChannelActionContextValue } from '../../context/ChannelActionContext';
 import { StreamMessage } from '../../context/ChannelStateContext';
@@ -15,10 +16,14 @@ export declare type VirtualizedMessageListProps<StreamChatGenerics extends Defau
     defaultItemHeight?: number;
     /** Disables the injection of date separator components in MessageList, defaults to `true` */
     disableDateSeparator?: boolean;
+    /** Callback function to set group styles for each message */
+    groupStyles?: (message: StreamMessage<StreamChatGenerics>, previousMessage: StreamMessage<StreamChatGenerics>, nextMessage: StreamMessage<StreamChatGenerics>, noGroupByUser: boolean) => GroupStyle;
     /** Whether or not the list has more items to load */
     hasMore?: boolean;
     /** Whether or not the list has newer items to load */
     hasMoreNewer?: boolean;
+    /** Element to be rendered at the top of the thread message list. By default, these are the Message and ThreadStart components */
+    head?: React.ReactElement;
     /** Hides the `MessageDeleted` components from the list, defaults to `false` */
     hideDeletedMessages?: boolean;
     /** Hides the `DateSeparator` component when new messages are received in a channel that's watched but not active, defaults to false */

package/dist/components/MessageList/VirtualizedMessageList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VirtualizedMessageList.d.ts","sourceRoot":"","sources":["../../../src/components/MessageList/VirtualizedMessageList.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"VirtualizedMessageList.d.ts","sourceRoot":"","sources":["../../../src/components/MessageList/VirtualizedMessageList.tsx"],"names":[],"mappings":"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"}

package/dist/components/MessageList/VirtualizedMessageList.js

@@ -45,6 +45,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
+import clsx from 'clsx';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Virtuoso, } from 'react-virtuoso';
 import { GiphyPreviewMessage as DefaultGiphyPreviewMessage } from './GiphyPreviewMessage';
@@ -54,7 +55,8 @@ import { usePrependedMessagesCount } from './hooks/usePrependMessagesCount';
 import { useShouldForceScrollToBottom } from './hooks/useShouldForceScrollToBottom';
 import { MessageNotification as DefaultMessageNotification } from './MessageNotification';
 import { MessageListNotifications as DefaultMessageListNotifications } from './MessageListNotifications';
-import { processMessages } from './utils';
+import { MessageListMainPanel } from './MessageListMainPanel';
+import { getGroupStyles, processMessages } from './utils';
 import { CUSTOM_MESSAGE_TYPE } from '../../constants/messageTypes';
 import { DateSeparator as DefaultDateSeparator } from '../DateSeparator/DateSeparator';
 import { EmptyStateIndicator as DefaultEmptyStateIndicator } from '../EmptyStateIndicator/EmptyStateIndicator';
@@ -97,11 +99,11 @@ function calculateInitialTopMostItemIndex(messages, highlightedMessageId) {
     return messages.length - 1;
 }
 var VirtualizedMessageListWithContext = function (props) {
-    var additionalVirtuosoProps = props.additionalVirtuosoProps, channel = props.channel, closeReactionSelectorOnClick = props.closeReactionSelectorOnClick, customMessageRenderer = props.customMessageRenderer, defaultItemHeight = props.defaultItemHeight, _a = props.disableDateSeparator, disableDateSeparator = _a === void 0 ? true : _a, hasMore = props.hasMore, hasMoreNewer = props.hasMoreNewer, _b = props.hideDeletedMessages, hideDeletedMessages = _b === void 0 ? false : _b, _c = props.hideNewMessageSeparator, hideNewMessageSeparator = _c === void 0 ? false : _c, highlightedMessageId = props.highlightedMessageId, jumpToLatestMessage = props.jumpToLatestMessage, loadingMore = props.loadingMore, loadMore = props.loadMore, loadMoreNewer = props.loadMoreNewer, propMessage = props.Message, _d = props.messageLimit, messageLimit = _d === void 0 ? 100 : _d, messages = props.messages, notifications = props.notifications, 
+    var additionalVirtuosoProps = props.additionalVirtuosoProps, channel = props.channel, closeReactionSelectorOnClick = props.closeReactionSelectorOnClick, customMessageRenderer = props.customMessageRenderer, defaultItemHeight = props.defaultItemHeight, _a = props.disableDateSeparator, disableDateSeparator = _a === void 0 ? true : _a, groupStyles = props.groupStyles, hasMore = props.hasMore, hasMoreNewer = props.hasMoreNewer, head = props.head, _b = props.hideDeletedMessages, hideDeletedMessages = _b === void 0 ? false : _b, _c = props.hideNewMessageSeparator, hideNewMessageSeparator = _c === void 0 ? false : _c, highlightedMessageId = props.highlightedMessageId, jumpToLatestMessage = props.jumpToLatestMessage, loadingMore = props.loadingMore, loadMore = props.loadMore, loadMoreNewer = props.loadMoreNewer, propMessage = props.Message, _d = props.messageLimit, messageLimit = _d === void 0 ? 100 : _d, messages = props.messages, notifications = props.notifications, 
     // TODO: refactor to scrollSeekPlaceHolderConfiguration and components.ScrollSeekPlaceholder, like the Virtuoso Component
     _e = props.overscan, 
     // TODO: refactor to scrollSeekPlaceHolderConfiguration and components.ScrollSeekPlaceholder, like the Virtuoso Component
-    overscan = _e === void 0 ? 0 : _e, scrollSeekPlaceHolder = props.scrollSeekPlaceHolder, _f = props.scrollToLatestMessageOnFocus, scrollToLatestMessageOnFocus = _f === void 0 ? false : _f, _g = props.separateGiphyPreview, separateGiphyPreview = _g === void 0 ? false : _g, _h = props.shouldGroupByUser, shouldGroupByUser = _h === void 0 ? false : _h, _j = props.stickToBottomScrollBehavior, stickToBottomScrollBehavior = _j === void 0 ? 'smooth' : _j, suppressAutoscroll = props.suppressAutoscroll;
+    overscan = _e === void 0 ? 0 : _e, scrollSeekPlaceHolder = props.scrollSeekPlaceHolder, _f = props.scrollToLatestMessageOnFocus, scrollToLatestMessageOnFocus = _f === void 0 ? false : _f, _g = props.separateGiphyPreview, separateGiphyPreview = _g === void 0 ? false : _g, _h = props.shouldGroupByUser, shouldGroupByUser = _h === void 0 ? false : _h, _j = props.stickToBottomScrollBehavior, stickToBottomScrollBehavior = _j === void 0 ? 'smooth' : _j, suppressAutoscroll = props.suppressAutoscroll, threadList = props.threadList;
     // Stops errors generated from react-virtuoso to bubble up
     // to Sentry or other tracking tools.
     useCaptureResizeObserverExceededError();
@@ -138,8 +140,17 @@ var VirtualizedMessageListWithContext = function (props) {
         messages === null || messages === void 0 ? void 0 : messages.length,
         client.userID,
     ]);
+    var groupStylesFn = groupStyles || getGroupStyles;
+    var messageGroupStyles = useMemo(function () {
+        return processedMessages.reduce(function (acc, message, i) {
+            var style = groupStylesFn(message, processedMessages[i - 1], processedMessages[i + 1], !shouldGroupByUser);
+            if (style)
+                acc[message.id] = style;
+            return acc;
+        }, {});
+    }, [processedMessages.length, shouldGroupByUser]);
     var virtuoso = useRef(null);
-    var _x = useNewMessageNotification(processedMessages, client.userID, hasMoreNewer), atBottom = _x.atBottom, newMessagesNotification = _x.newMessagesNotification, setNewMessagesNotification = _x.setNewMessagesNotification;
+    var _x = useNewMessageNotification(processedMessages, client.userID, hasMoreNewer), atBottom = _x.atBottom, isMessageListScrolledToBottom = _x.isMessageListScrolledToBottom, newMessagesNotification = _x.newMessagesNotification, setIsMessageListScrolledToBottom = _x.setIsMessageListScrolledToBottom, setNewMessagesNotification = _x.setNewMessagesNotification;
     var scrollToBottom = useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
             switch (_a.label) {
@@ -240,14 +251,28 @@ var VirtualizedMessageListWithContext = function (props) {
     var Item = useMemo(function () {
         // using 'display: inline-block'
         // traps CSS margins of the item elements, preventing incorrect item measurements
-        var Item = function (props) { return (React.createElement("div", __assign({}, props, { className: (customClasses === null || customClasses === void 0 ? void 0 : customClasses.virtualMessage) || 'str-chat__virtual-list-message-wrapper' }))); };
+        var Item = function (props) {
+            var _a;
+            var streamMessageIndex = props['data-item-index'] + numItemsPrepended - PREPEND_OFFSET;
+            var message = processedMessages[streamMessageIndex];
+            var groupStyles = messageGroupStyles[message.id] || '';
+            return (React.createElement("div", __assign({}, props, { className: (customClasses === null || customClasses === void 0 ? void 0 : customClasses.virtualMessage) ||
+                    clsx('str-chat__virtual-list-message-wrapper str-chat__li', (_a = {},
+                        _a["str-chat__li--".concat(groupStyles)] = groupStyles,
+                        _a)) })));
+        };
         return Item;
-    }, [customClasses === null || customClasses === void 0 ? void 0 : customClasses.virtualMessage]);
+    }, [
+        customClasses === null || customClasses === void 0 ? void 0 : customClasses.virtualMessage,
+        Object.keys(messageGroupStyles),
+        numItemsPrepended,
+        processedMessages.length,
+    ]);
     var virtuosoComponents = useMemo(function () {
-        var EmptyPlaceholder = function () { return (React.createElement(React.Fragment, null, EmptyStateIndicator && React.createElement(EmptyStateIndicator, { listType: 'message' }))); };
+        var EmptyPlaceholder = function () { return (React.createElement(React.Fragment, null, EmptyStateIndicator && (React.createElement(EmptyStateIndicator, { listType: threadList ? 'thread' : 'message' })))); };
         var Header = function () {
             return loadingMore ? (React.createElement("div", { className: 'str-chat__virtual-list__loading' },
-                React.createElement(LoadingIndicator, { size: 20 }))) : (React.createElement(React.Fragment, null));
+                React.createElement(LoadingIndicator, { size: 20 }))) : (head || null);
         };
         var Footer = function () {
             return TypingIndicator ? React.createElement(TypingIndicator, { avatarSize: 24 }) : React.createElement(React.Fragment, null);
@@ -258,9 +283,10 @@ var VirtualizedMessageListWithContext = function (props) {
             Header: Header,
             Item: Item,
         };
-    }, [loadingMore]);
+    }, [loadingMore, head, Item]);
     var atBottomStateChange = function (isAtBottom) {
         atBottom.current = isAtBottom;
+        setIsMessageListScrolledToBottom(isAtBottom);
         if (isAtBottom && newMessagesNotification) {
             setNewMessagesNotification(false);
         }
@@ -287,11 +313,12 @@ var VirtualizedMessageListWithContext = function (props) {
     if (!processedMessages)
         return null;
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: (customClasses === null || customClasses === void 0 ? void 0 : customClasses.virtualizedMessageList) || 'str-chat__virtual-list' },
-            React.createElement(Virtuoso, __assign({ atBottomStateChange: atBottomStateChange, components: virtuosoComponents, computeItemKey: function (index) {
-                    return processedMessages[numItemsPrepended + index - PREPEND_OFFSET].id;
-                }, endReached: endReached, firstItemIndex: PREPEND_OFFSET - numItemsPrepended, followOutput: followOutput, increaseViewportBy: { bottom: 200, top: 0 }, initialTopMostItemIndex: calculateInitialTopMostItemIndex(processedMessages, highlightedMessageId), itemContent: function (i) { return messageRenderer(processedMessages, i); }, itemSize: fractionalItemSize, key: messageSetKey, overscan: overscan, ref: virtuoso, startReached: startReached, style: { overflowX: 'hidden' }, totalCount: processedMessages.length }, additionalVirtuosoProps, (scrollSeekPlaceHolder ? { scrollSeek: scrollSeekPlaceHolder } : {}), (defaultItemHeight ? { defaultItemHeight: defaultItemHeight } : {})))),
-        React.createElement(MessageListNotifications, { hasNewMessages: newMessagesNotification, isNotAtLatestMessageSet: hasMoreNewer, MessageNotification: MessageNotification, notifications: notifications, scrollToBottom: scrollToBottom }),
+        React.createElement(MessageListMainPanel, null,
+            React.createElement("div", { className: (customClasses === null || customClasses === void 0 ? void 0 : customClasses.virtualizedMessageList) || 'str-chat__virtual-list' },
+                React.createElement(Virtuoso, __assign({ atBottomStateChange: atBottomStateChange, atBottomThreshold: 200, className: 'str-chat__message-list-scroll', components: virtuosoComponents, computeItemKey: function (index) {
+                        return processedMessages[numItemsPrepended + index - PREPEND_OFFSET].id;
+                    }, endReached: endReached, firstItemIndex: PREPEND_OFFSET - numItemsPrepended, followOutput: followOutput, increaseViewportBy: { bottom: 200, top: 0 }, initialTopMostItemIndex: calculateInitialTopMostItemIndex(processedMessages, highlightedMessageId), itemContent: function (i) { return messageRenderer(processedMessages, i); }, itemSize: fractionalItemSize, key: messageSetKey, overscan: overscan, ref: virtuoso, startReached: startReached, style: { overflowX: 'hidden' }, totalCount: processedMessages.length }, additionalVirtuosoProps, (scrollSeekPlaceHolder ? { scrollSeek: scrollSeekPlaceHolder } : {}), (defaultItemHeight ? { defaultItemHeight: defaultItemHeight } : {}))))),
+        React.createElement(MessageListNotifications, { hasNewMessages: newMessagesNotification, isMessageListScrolledToBottom: isMessageListScrolledToBottom, isNotAtLatestMessageSet: hasMoreNewer, MessageNotification: MessageNotification, notifications: notifications, scrollToBottom: scrollToBottom, threadList: threadList }),
         giphyPreviewMessage && React.createElement(GiphyPreviewMessage, { message: giphyPreviewMessage })));
 };
 /**

package/dist/components/MessageList/hooks/useMessageListElements.d.ts

@@ -17,6 +17,6 @@ declare type UseMessageListElementsProps<StreamChatGenerics extends DefaultStrea
         user: UserResponse<StreamChatGenerics>;
     }>;
 };
-export declare const useMessageListElements: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: UseMessageListElementsProps<StreamChatGenerics>) => JSX.Element[];
+export declare const useMessageListElements: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: UseMessageListElementsProps<StreamChatGenerics>) => React.ReactNode[];
 export {};
 //# sourceMappingURL=useMessageListElements.d.ts.map

package/dist/components/MessageList/hooks/useMessageListElements.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useMessageListElements.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageList/hooks/useMessageListElements.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAGvC,OAAO,EAAmB,UAAU,EAAE,MAAM,UAAU,CAAC;AAWvD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAExD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AAE1E,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAEtE,aAAK,kBAAkB,GACnB,SAAS,GACT,aAAa,GACb,gBAAgB,GAChB,gBAAgB,GAChB,SAAS,GACT,QAAQ,GACR,YAAY,CAAC;AAEjB,aAAK,2BAA2B,CAC9B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,gBAAgB,EAAE,aAAa,CAAC,kBAAkB,CAAC,EAAE,CAAC;IACtD,oBAAoB,EAAE,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,EAAE,kBAAkB,CAAC,CAAC;IACjF,kBAAkB,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IAC/C,qBAAqB,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,aAAa,EAAE,KAAK,CAAC,KAAK,IAAI,CAAC;IACnF,iBAAiB,EAAE,OAAO,CAAC;IAC3B,UAAU,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,SAAS,EAAE,IAAI,CAAC;QAAC,IAAI,EAAE,YAAY,CAAC,kBAAkB,CAAC,CAAA;KAAE,CAAC,CAAC;CACpF,CAAC;AAEF,eAAO,MAAM,sBAAsB,6JAyGlC,CAAC"}
+{"version":3,"file":"useMessageListElements.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageList/hooks/useMessageListElements.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAGvC,OAAO,EAAmB,UAAU,EAAE,MAAM,UAAU,CAAC;AAWvD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAExD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AAE1E,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAEtE,aAAK,kBAAkB,GACnB,SAAS,GACT,aAAa,GACb,gBAAgB,GAChB,gBAAgB,GAChB,SAAS,GACT,QAAQ,GACR,YAAY,CAAC;AAEjB,aAAK,2BAA2B,CAC9B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,gBAAgB,EAAE,aAAa,CAAC,kBAAkB,CAAC,EAAE,CAAC;IACtD,oBAAoB,EAAE,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,EAAE,kBAAkB,CAAC,CAAC;IACjF,kBAAkB,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IAC/C,qBAAqB,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,aAAa,EAAE,KAAK,CAAC,KAAK,IAAI,CAAC;IACnF,iBAAiB,EAAE,OAAO,CAAC;IAC3B,UAAU,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,SAAS,EAAE,IAAI,CAAC;QAAC,IAAI,EAAE,YAAY,CAAC,kBAAkB,CAAC,CAAA;KAAE,CAAC,CAAC;CACpF,CAAC;AAEF,eAAO,MAAM,sBAAsB,iKA2GlC,CAAC"}

package/dist/components/MessageList/hooks/useMessageListElements.js

@@ -32,13 +32,13 @@ export var useMessageListElements = function (props) {
         userID: client.userID,
     });
     var lastReceivedId = useMemo(function () { return getLastReceived(enrichedMessages); }, [enrichedMessages]);
-    return useMemo(function () {
+    var elements = useMemo(function () {
         return enrichedMessages.map(function (message) {
             var _a;
             if (message.customType === CUSTOM_MESSAGE_TYPE.date &&
                 message.date &&
                 isDate(message.date)) {
-                return (React.createElement("li", { key: message.date.toISOString() + "-i" },
+                return (React.createElement("li", { key: "".concat(message.date.toISOString(), "-i") },
                     React.createElement(DateSeparator, { date: message.date, formatDate: internalMessageProps.formatDate, unread: message.unread })));
             }
             if (message.customType === CUSTOM_MESSAGE_TYPE.intro && HeaderComponent) {
@@ -52,7 +52,7 @@ export var useMessageListElements = function (props) {
                     React.createElement(MessageSystem, { message: message })));
             }
             var groupStyles = messageGroupStyles[message.id] || '';
-            var messageClass = (customClasses === null || customClasses === void 0 ? void 0 : customClasses.message) || "str-chat__li str-chat__li--" + groupStyles;
+            var messageClass = (customClasses === null || customClasses === void 0 ? void 0 : customClasses.message) || "str-chat__li str-chat__li--".concat(groupStyles);
             return (React.createElement("li", { className: messageClass, "data-message-id": message.id, "data-testid": messageClass, key: message.id || message.created_at, onLoadCapture: onMessageLoadCaptured },
                 React.createElement(Message, __assign({ groupStyles: [groupStyles], lastReceivedId: lastReceivedId, message: message, readBy: readData[message.id] || [], threadList: threadList }, internalMessageProps))));
         });
@@ -65,4 +65,5 @@ export var useMessageListElements = function (props) {
         readData,
         threadList,
     ]);
+    return elements;
 };

package/dist/components/MessageList/hooks/useMessageListScrollManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useMessageListScrollManager.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageList/hooks/useMessageListScrollManager.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AAE1E,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAEtE,oBAAY,iBAAiB,GAAG;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,oBAAY,iCAAiC,CAC3C,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,QAAQ,EAAE,aAAa,CAAC,kBAAkB,CAAC,EAAE,CAAC;IAC9C,UAAU,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,uBAAuB,EAAE,MAAM,iBAAiB,CAAC;IACjD,mBAAmB,EAAE,MAAM,CAAC;IAC5B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,eAAe,EAAE,MAAM,IAAI,CAAC;CAC7B,CAAC;AAEF,wBAAgB,2BAA2B,CACzC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,EAChF,MAAM,EAAE,iCAAiC,CAAC,kBAAkB,CAAC,oBAiErC,MAAM,UAG/B"}
+{"version":3,"file":"useMessageListScrollManager.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageList/hooks/useMessageListScrollManager.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AAE1E,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAEtE,oBAAY,iBAAiB,GAAG;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,oBAAY,iCAAiC,CAC3C,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,QAAQ,EAAE,aAAa,CAAC,kBAAkB,CAAC,EAAE,CAAC;IAC9C,UAAU,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,uBAAuB,EAAE,MAAM,iBAAiB,CAAC;IACjD,mBAAmB,EAAE,MAAM,CAAC;IAC5B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,eAAe,EAAE,MAAM,IAAI,CAAC;CAC7B,CAAC;AAEF,wBAAgB,2BAA2B,CACzC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,EAChF,MAAM,EAAE,iCAAiC,CAAC,kBAAkB,CAAC,oBAkErC,MAAM,UAG/B"}