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

package/dist/components/AutoCompleteTextarea/Textarea.d.ts

@@ -15,6 +15,18 @@ export class ReactTextareaAutocomplete extends React.Component<any, any, any> {
         value: any;
     } | null;
     constructor(props: any);
+    state: {
+        actualToken: string;
+        component: null;
+        currentTrigger: null;
+        data: null;
+        dataLoading: boolean;
+        left: null;
+        selectionEnd: number;
+        selectionStart: number;
+        top: null;
+        value: any;
+    };
     getSelectionPosition: () => {
         selectionEnd: number;
         selectionStart: number;
@@ -60,10 +72,12 @@ export class ReactTextareaAutocomplete extends React.Component<any, any, any> {
         getTextToReplace: ((item: any) => any) | null;
         selectionEnd: number;
         value: any;
-        values: any;
+        values: null;
     };
+    setDropdownRef: (element: any) => void;
+    dropdownRef: any;
     renderSuggestionListContainer(): JSX.Element | null;
-    dropdownRef: HTMLDivElement | null | undefined;
+    render(): JSX.Element;
     textareaRef: HTMLTextAreaElement | null | undefined;
 }
 export namespace ReactTextareaAutocomplete {

package/dist/components/AutoCompleteTextarea/Textarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../src/components/AutoCompleteTextarea/Textarea.jsx"],"names":[],"mappings":"AAiBA;IACE;;;;;;;MAOE;IAsWF;;OAEG;IACH;;;aAMC;IA7WD,wBA2BC;IAED;;;aAOE;IAEF,2BAOE;IAEF,8CAKE;IAEF,+BAIE;IAEF;;;;;;OAMG;IACH,8CAC6E;IAE7E,qCAME;IAEF,+BAcE;IAEF,qBAQE;IAEF,yBA6BE;IAEF,mCAqEE;IAEF,qEAuBE;IAEF,sEA2DE;IAEF,uDAQE;IAEF,mCA0CE;IAEF,6CAQE;IAYF;;OAEG;IACH,+BAQE;IAEF;;MA6CE;IAEF,mCAME;IAEF,iCA+EE;IAEF,iCASE;IAGF,yCAiBE;IAEF,6BAAmD;IAEnD,qCAiBE;IAEF;;;;;;;;MAoCE;IAEF,oDAyCC;IAlBS,+CAAsB;IAqDtB,oDAAsB;CAUjC"}
+{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../src/components/AutoCompleteTextarea/Textarea.jsx"],"names":[],"mappings":"AAkBA;IACE;;;;;;;MAOE;IAuWF;;OAEG;IACH;;;aAMC;IA9WD,wBA4BC;IAZC;;;;;;;;;;;MAWC;IAGH;;;aAOE;IAEF,2BAOE;IAEF,8CAKE;IAEF,+BAIE;IAEF;;;;;;OAMG;IACH,8CAC6E;IAE7E,qCAME;IAEF,+BAcE;IAEF,qBAQE;IAEF,yBA6BE;IAEF,mCAqEE;IAEF,qEAuBE;IAEF,sEA2DE;IAEF,uDAQE;IAEF,mCA0CE;IAEF,6CAQE;IAYF;;OAEG;IACH,+BAQE;IAEF;;MA6CE;IAEF,mCAME;IAEF,iCA+EE;IAEF,iCASE;IAGF,yCAiBE;IAEF,6BAAmD;IAEnD,qCAiBE;IAEF;;;;;;;;MAoCE;IAEF,uCAEE;IADA,iBAA0B;IAG5B,oDA2CC;IAED,sBA4CC;IATS,oDAAsB;CAUjC"}

package/dist/components/AutoCompleteTextarea/Textarea.js

@@ -29,6 +29,7 @@ import PropTypes from 'prop-types';
 import Textarea from 'react-textarea-autosize';
 import getCaretCoordinates from 'textarea-caret';
 import { isValidElementType } from 'react-is';
+import clsx from 'clsx';
 import { List as DefaultSuggestionList } from './List';
 import { DEFAULT_CARET_POSITION, defaultScrollToItem, errorMessage, triggerPropsCheck, } from './utils';
 import { CommandItem } from '../CommandItem/CommandItem';
@@ -158,7 +159,7 @@ var ReactTextareaAutocomplete = /** @class */ (function (_super) {
                     : textareaValue.slice(0, selectionEnd);
             var startOfTokenPosition = textToModify.lastIndexOf(currentTrigger);
             // we add space after emoji is selected if a caret position is next
-            var newTokenString = newToken.caretPosition === 'next' ? newToken.text + " " : newToken.text;
+            var newTokenString = newToken.caretPosition === 'next' ? "".concat(newToken.text, " ") : newToken.text;
             var newCaretPosition = computeCaretPosition(newToken.caretPosition, newTokenString, startOfTokenPosition);
             var modifiedText = textToModify.substring(0, startOfTokenPosition) + newTokenString;
             var valueToReplace = textareaValue.replace(textToModify, modifiedText);
@@ -213,7 +214,7 @@ var ReactTextareaAutocomplete = /** @class */ (function (_super) {
                 if (output) {
                     var textToReplace = output(item, currentTrigger);
                     if (!textToReplace || typeof textToReplace === 'number') {
-                        throw new Error("Output functor should return string or object in shape {text: string, caretPosition: string | number}.\nGot \"" + String(textToReplace) + "\". Check the implementation for trigger \"" + currentTrigger + "\" and its token \"" + actualToken + "\"\n\nSee https://github.com/webscopeio/react-textarea-autocomplete#trigger-type for more informations.\n");
+                        throw new Error("Output functor should return string or object in shape {text: string, caretPosition: string | number}.\nGot \"".concat(String(textToReplace), "\". Check the implementation for trigger \"").concat(currentTrigger, "\" and its token \"").concat(actualToken, "\"\n\nSee https://github.com/webscopeio/react-textarea-autocomplete#trigger-type for more informations.\n"));
                     }
                     if (typeof textToReplace === 'string') {
                         return {
@@ -222,10 +223,10 @@ var ReactTextareaAutocomplete = /** @class */ (function (_super) {
                         };
                     }
                     if (!textToReplace.text && currentTrigger !== ':') {
-                        throw new Error("Output \"text\" is not defined! Object should has shape {text: string, caretPosition: string | number}. Check the implementation for trigger \"" + currentTrigger + "\" and its token \"" + actualToken + "\"\n");
+                        throw new Error("Output \"text\" is not defined! Object should has shape {text: string, caretPosition: string | number}. Check the implementation for trigger \"".concat(currentTrigger, "\" and its token \"").concat(actualToken, "\"\n"));
                     }
                     if (!textToReplace.caretPosition) {
-                        throw new Error("Output \"caretPosition\" is not defined! Object should has shape {text: string, caretPosition: string | number}. Check the implementation for trigger \"" + currentTrigger + "\" and its token \"" + actualToken + "\"\n");
+                        throw new Error("Output \"caretPosition\" is not defined! Object should has shape {text: string, caretPosition: string | number}. Check the implementation for trigger \"".concat(currentTrigger, "\" and its token \"").concat(actualToken, "\"\n"));
                     }
                     return textToReplace;
                 }
@@ -234,7 +235,7 @@ var ReactTextareaAutocomplete = /** @class */ (function (_super) {
                 }
                 return {
                     caretPosition: DEFAULT_CARET_POSITION,
-                    text: "" + currentTrigger + item + currentTrigger,
+                    text: "".concat(currentTrigger).concat(item).concat(currentTrigger),
                 };
             };
         };
@@ -371,8 +372,8 @@ var ReactTextareaAutocomplete = /** @class */ (function (_super) {
             }
             else {
                 var triggerTokens = Object.keys(trigger).join().replace('/', '');
-                var triggerNorWhitespace = "[^\\s" + triggerTokens + "]*";
-                var regex = new RegExp("(?!^|\\W)?[" + triggerTokens + "]" + triggerNorWhitespace + "\\s?" + triggerNorWhitespace + "$", 'g');
+                var triggerNorWhitespace = "[^\\s".concat(triggerTokens, "]*");
+                var regex = new RegExp("(?!^|\\W)?[".concat(triggerTokens, "]").concat(triggerNorWhitespace, "\\s?").concat(triggerNorWhitespace, "$"), 'g');
                 var tokenMatch = value.slice(0, selectionEnd).match(regex);
                 lastToken = tokenMatch && tokenMatch[tokenMatch.length - 1].trim();
                 currentTrigger = (lastToken && Object.keys(trigger).find(function (a) { return a === lastToken[0]; })) || null;
@@ -485,6 +486,9 @@ var ReactTextareaAutocomplete = /** @class */ (function (_super) {
             }
             return triggerProps;
         };
+        _this.setDropdownRef = function (element) {
+            _this.dropdownRef = element;
+        };
         var _a = _this.props, loadingComponent = _a.loadingComponent, trigger = _a.trigger, value = _a.value;
         // TODO: it would be better to have the parent control state...
         // if (value) this.state.value = value;
@@ -520,16 +524,13 @@ var ReactTextareaAutocomplete = /** @class */ (function (_super) {
         }
     };
     ReactTextareaAutocomplete.prototype.renderSuggestionListContainer = function () {
-        var _this = this;
         var _a = this.props, disableMentions = _a.disableMentions, dropdownClassName = _a.dropdownClassName, dropdownStyle = _a.dropdownStyle, itemClassName = _a.itemClassName, itemStyle = _a.itemStyle, listClassName = _a.listClassName, SuggestionItem = _a.SuggestionItem, _b = _a.SuggestionList, SuggestionList = _b === void 0 ? DefaultSuggestionList : _b;
         var triggerProps = this.getTriggerProps();
         if (triggerProps.values &&
             triggerProps.currentTrigger &&
             !(disableMentions && triggerProps.currentTrigger === '@')) {
-            return (React.createElement("div", { className: "rta__autocomplete " + (dropdownClassName || ''), ref: function (ref) {
-                    _this.dropdownRef = ref;
-                }, style: dropdownStyle },
-                React.createElement(SuggestionList, __assign({ className: listClassName, dropdownScroll: this._dropdownScroll, itemClassName: itemClassName, itemStyle: itemStyle, onSelect: this._onSelect, SuggestionItem: SuggestionItem }, triggerProps))));
+            return (React.createElement("div", { className: clsx('rta__autocomplete', 'str-chat__suggestion-list-container', dropdownClassName), ref: this.setDropdownRef, style: dropdownStyle },
+                React.createElement(SuggestionList, __assign({ className: clsx('str-chat__suggestion-list', listClassName), dropdownScroll: this._dropdownScroll, itemClassName: clsx('str-chat__suggestion-list-item', itemClassName), itemStyle: itemStyle, onSelect: this._onSelect, SuggestionItem: SuggestionItem }, triggerProps))));
         }
         return null;
     };
@@ -543,11 +544,13 @@ var ReactTextareaAutocomplete = /** @class */ (function (_super) {
         // By setting defaultValue to undefined, avoid error:
         // ForwardRef(TextareaAutosize) contains a textarea with both value and defaultValue props.
         // Textarea elements must be either controlled or uncontrolled
-        return (React.createElement("div", { className: "rta " + (dataLoading === true ? 'rta--loading' : '') + " " + (containerClassName || ''), style: containerStyle },
+        return (React.createElement("div", { className: clsx('rta', containerClassName, {
+                'rta--loading': dataLoading,
+            }), style: containerStyle },
             this.renderSuggestionListContainer(),
-            React.createElement(Textarea, __assign({ "data-testid": 'message-input' }, this._cleanUpProps(), { className: "rta__textarea " + (className || ''), maxRows: maxRows, onBlur: this._onClickAndBlurHandler, onChange: this._changeHandler, onClick: this._onClickAndBlurHandler, onFocus: this.props.onFocus, onKeyDown: this._handleKeyDown, onScroll: this._onScrollHandler, onSelect: this._selectHandler, ref: function (ref) {
-                    if (_this.props.innerRef)
-                        _this.props.innerRef(ref);
+            React.createElement(Textarea, __assign({ "data-testid": 'message-input' }, this._cleanUpProps(), { className: clsx('rta__textarea', className), maxRows: maxRows, onBlur: this._onClickAndBlurHandler, onChange: this._changeHandler, onClick: this._onClickAndBlurHandler, onFocus: this.props.onFocus, onKeyDown: this._handleKeyDown, onScroll: this._onScrollHandler, onSelect: this._selectHandler, ref: function (ref) {
+                    var _a;
+                    (_a = _this.props) === null || _a === void 0 ? void 0 : _a.innerRef(ref);
                     _this.textareaRef = ref;
                 }, style: style, value: value }, this.props.additionalTextareaProps, { defaultValue: undefined }))));
     };

package/dist/components/AutoCompleteTextarea/utils.js

@@ -14,7 +14,7 @@ export function defaultScrollToItem(container, item) {
     container.scrollTop = itemOffsetTop;
 }
 export var errorMessage = function (message) {
-    return console.error("RTA: dataProvider fails: " + message + "\n    \nCheck the documentation or create issue if you think it's bug. https://github.com/webscopeio/react-textarea-autocomplete/issues");
+    return console.error("RTA: dataProvider fails: ".concat(message, "\n    \nCheck the documentation or create issue if you think it's bug. https://github.com/webscopeio/react-textarea-autocomplete/issues"));
 };
 export var triggerPropsCheck = function (_a) {
     var trigger = _a.trigger;

package/dist/components/Avatar/Avatar.js

@@ -13,16 +13,16 @@ export var Avatar = function (props) {
     }, [image]);
     var nameStr = (name === null || name === void 0 ? void 0 : name.toString()) || '';
     var initials = getWholeChar(nameStr, 0);
-    return (React.createElement("div", { className: "str-chat__avatar str-chat__avatar--" + shape, "data-testid": 'avatar', onClick: onClick, onMouseOver: onMouseOver, style: {
-            flexBasis: size + "px",
-            fontSize: size / 2 + "px",
-            height: size + "px",
-            lineHeight: size + "px",
-            width: size + "px",
-        }, title: name }, image && !error ? (React.createElement("img", { alt: initials, className: "str-chat__avatar-image" + (loaded ? ' str-chat__avatar-image--loaded' : ''), "data-testid": 'avatar-img', onError: function () { return setError(true); }, onLoad: function () { return setLoaded(true); }, src: image, style: {
-            flexBasis: size + "px",
-            height: size + "px",
+    return (React.createElement("div", { className: "str-chat__avatar str-chat__avatar--".concat(shape, " str-chat__message-sender-avatar"), "data-testid": 'avatar', onClick: onClick, onMouseOver: onMouseOver, style: {
+            flexBasis: "".concat(size, "px"),
+            fontSize: "".concat(size / 2, "px"),
+            height: "".concat(size, "px"),
+            lineHeight: "".concat(size, "px"),
+            width: "".concat(size, "px"),
+        }, title: name }, image && !error ? (React.createElement("img", { alt: initials, className: "str-chat__avatar-image".concat(loaded ? ' str-chat__avatar-image--loaded' : ''), "data-testid": 'avatar-img', onError: function () { return setError(true); }, onLoad: function () { return setLoaded(true); }, src: image, style: {
+            flexBasis: "".concat(size, "px"),
+            height: "".concat(size, "px"),
             objectFit: 'cover',
-            width: size + "px",
+            width: "".concat(size, "px"),
         } })) : (React.createElement("div", { className: 'str-chat__avatar-fallback', "data-testid": 'avatar-fallback' }, initials))));
 };

package/dist/components/Channel/Channel.d.ts

@@ -5,6 +5,7 @@ import { LoadingErrorIndicatorProps } from '../Loading';
 import { ComponentContextValue } from '../../context/ComponentContext';
 import { EmojiContextValue } from '../../context/EmojiContext';
 import type { Data as EmojiMartData } from 'emoji-mart';
+import type { MessageProps } from '../Message/types';
 import type { MessageInputProps } from '../MessageInput/MessageInput';
 import type { CustomTrigger, DefaultStreamChatGenerics, GiphyVersions } from '../../types/types';
 export declare type ChannelProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, V extends CustomTrigger = CustomTrigger> = {
@@ -86,6 +87,8 @@ export declare type ChannelProps<StreamChatGenerics extends DefaultStreamChatGen
     MessageSystem?: ComponentContextValue<StreamChatGenerics>['MessageSystem'];
     /** Custom UI component to display a timestamp on a message, defaults to and accepts same props as: [MessageTimestamp](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageTimestamp.tsx) */
     MessageTimestamp?: ComponentContextValue<StreamChatGenerics>['MessageTimestamp'];
+    /** Custom UI component for image viewing message's image attachments, defaults to and accepts the same props as [ModalGallery](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Gallery/ModalGallery.tsx) */
+    ModalGallery?: ComponentContextValue<StreamChatGenerics>['ModalGallery'];
     /** Whether to allow multiple attachment uploads */
     multipleUploads?: boolean;
     /** Custom action handler function to run on click of an @mention in a message */
@@ -108,6 +111,8 @@ export declare type ChannelProps<StreamChatGenerics extends DefaultStreamChatGen
     SendButton?: ComponentContextValue<StreamChatGenerics>['SendButton'];
     /** If true, skips the message data string comparison used to memoize the current channel messages (helpful for channels with 1000s of messages) */
     skipMessageDataMemoization?: boolean;
+    /** Custom UI component that displays thread's parent or other message at the top of the `MessageList`, defaults to and accepts same props as [MessageSimple](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageSimple.tsx) */
+    ThreadHead?: React.ComponentType<MessageProps<StreamChatGenerics>>;
     /** Custom UI component to display the header of a `Thread`, defaults to and accepts same props as: [DefaultThreadHeader](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Thread/Thread.tsx) */
     ThreadHeader?: ComponentContextValue<StreamChatGenerics>['ThreadHeader'];
     /** Custom UI component to display the start of a threaded `MessageList`, defaults to and accepts same props as: [DefaultThreadStart](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Thread/Thread.tsx) */
@@ -116,7 +121,7 @@ export declare type ChannelProps<StreamChatGenerics extends DefaultStreamChatGen
     TriggerProvider?: ComponentContextValue<StreamChatGenerics>['TriggerProvider'];
     /** Custom UI component for the typing indicator, defaults to and accepts same props as: [TypingIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/TypingIndicator/TypingIndicator.tsx) */
     TypingIndicator?: ComponentContextValue<StreamChatGenerics>['TypingIndicator'];
-    /** Custom UI component to display a message in the `VirtualizedMessageList`, defaults to and accepts same props as: [FixedHeightMessage](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/FixedHeightMessage.tsx) */
+    /** Custom UI component to display a message in the `VirtualizedMessageList`, does not have a default implementation */
     VirtualMessage?: ComponentContextValue<StreamChatGenerics>['VirtualMessage'];
 };
 /**
@@ -128,5 +133,5 @@ export declare type ChannelProps<StreamChatGenerics extends DefaultStreamChatGen
  * - [EmojiContext](https://getstream.io/chat/docs/sdk/react/contexts/emoji_context/)
  * - [TypingContext](https://getstream.io/chat/docs/sdk/react/contexts/typing_context/)
  */
-export declare const Channel: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, V extends CustomTrigger = CustomTrigger>(props: React.PropsWithChildren<ChannelProps<StreamChatGenerics, V>>) => JSX.Element | null;
+export declare const Channel: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, V extends CustomTrigger = CustomTrigger>(props: React.PropsWithChildren<ChannelProps<StreamChatGenerics, V>>) => JSX.Element;
 //# sourceMappingURL=Channel.d.ts.map

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

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

package/dist/components/Channel/Channel.js

@@ -69,7 +69,8 @@ import { useEditMessageHandler } from './hooks/useEditMessageHandler';
 import { useIsMounted } from './hooks/useIsMounted';
 import { useMentionsHandlers } from './hooks/useMentionsHandlers';
 import { Attachment as DefaultAttachment } from '../Attachment/Attachment';
-import { LoadingErrorIndicator as DefaultLoadingErrorIndicator, LoadingIndicator as DefaultLoadingIndicator, } from '../Loading';
+import { LoadingErrorIndicator as DefaultLoadingErrorIndicator, } from '../Loading';
+import { LoadingChannel as DefaultLoadingIndicator } from './LoadingChannel';
 import { MessageSimple } from '../Message/MessageSimple';
 import { DropzoneProvider } from '../MessageInput/DropzoneProvider';
 import { ChannelActionProvider, } from '../../context/ChannelActionContext';
@@ -79,32 +80,43 @@ import { useChatContext } from '../../context/ChatContext';
 import { EmojiProvider } from '../../context/EmojiContext';
 import { useTranslationContext } from '../../context/TranslationContext';
 import { TypingProvider } from '../../context/TypingContext';
+import { DEFAULT_INITIAL_CHANNEL_PAGE_SIZE, DEFAULT_NEXT_CHANNEL_PAGE_SIZE, DEFAULT_THREAD_PAGE_SIZE, } from '../../constants/limits';
+import { hasMoreMessagesProbably, hasNotMoreMessages } from '../MessageList/utils';
 import defaultEmojiData from '../../stream-emoji.json';
 import { makeAddNotifications } from './utils';
+import { useChannelContainerClasses } from './hooks/useChannelContainerClasses';
 var UnMemoizedChannel = function (props) {
-    var propsChannel = props.channel, _a = props.EmptyPlaceholder, EmptyPlaceholder = _a === void 0 ? null : _a, LoadingErrorIndicator = props.LoadingErrorIndicator, LoadingIndicator = props.LoadingIndicator;
-    var _b = useChatContext('Channel'), contextChannel = _b.channel, channelsQueryState = _b.channelsQueryState;
+    var propsChannel = props.channel, _a = props.EmptyPlaceholder, EmptyPlaceholder = _a === void 0 ? null : _a, LoadingErrorIndicator = props.LoadingErrorIndicator, _b = props.LoadingIndicator, LoadingIndicator = _b === void 0 ? DefaultLoadingIndicator : _b;
+    var _c = useChatContext('Channel'), contextChannel = _c.channel, channelsQueryState = _c.channelsQueryState, customClasses = _c.customClasses, theme = _c.theme;
+    var _d = useChannelContainerClasses({
+        customClasses: customClasses,
+    }), channelClass = _d.channelClass, chatClass = _d.chatClass;
     var channel = propsChannel || contextChannel;
     if (channelsQueryState.queryInProgress === 'reload' && LoadingIndicator) {
-        return React.createElement(LoadingIndicator, { size: 25 });
+        return (React.createElement("div", { className: "".concat(chatClass, " ").concat(channelClass, " str-chat__channel ").concat(theme) },
+            React.createElement(LoadingIndicator, null)));
     }
     if (channelsQueryState.error && LoadingErrorIndicator) {
-        return React.createElement(LoadingErrorIndicator, { error: channelsQueryState.error });
+        return (React.createElement("div", { className: "".concat(chatClass, " ").concat(channelClass, " str-chat__channel ").concat(theme) },
+            React.createElement(LoadingErrorIndicator, { error: channelsQueryState.error })));
     }
-    if (!(channel === null || channel === void 0 ? void 0 : channel.cid))
-        return EmptyPlaceholder;
+    if (!(channel === null || channel === void 0 ? void 0 : channel.cid)) {
+        return (React.createElement("div", { className: "".concat(chatClass, " ").concat(channelClass, " str-chat__channel ").concat(theme) }, EmptyPlaceholder));
+    }
+    // @ts-ignore
     return React.createElement(ChannelInner, __assign({}, props, { channel: channel, key: channel.cid }));
 };
 var ChannelInner = function (props) {
     var _a;
     var acceptedFiles = props.acceptedFiles, activeUnreadHandler = props.activeUnreadHandler, channel = props.channel, children = props.children, doMarkReadRequest = props.doMarkReadRequest, doSendMessageRequest = props.doSendMessageRequest, doUpdateMessageRequest = props.doUpdateMessageRequest, _b = props.dragAndDropWindow, dragAndDropWindow = _b === void 0 ? false : _b, _c = props.emojiData, emojiData = _c === void 0 ? defaultEmojiData : _c, _d = props.LoadingErrorIndicator, LoadingErrorIndicator = _d === void 0 ? DefaultLoadingErrorIndicator : _d, _e = props.LoadingIndicator, LoadingIndicator = _e === void 0 ? DefaultLoadingIndicator : _e, maxNumberOfFiles = props.maxNumberOfFiles, _f = props.multipleUploads, multipleUploads = _f === void 0 ? true : _f, onMentionsClick = props.onMentionsClick, onMentionsHover = props.onMentionsHover, _g = props.optionalMessageInputProps, optionalMessageInputProps = _g === void 0 ? {} : _g, skipMessageDataMemoization = props.skipMessageDataMemoization;
-    var _h = useChatContext('Channel'), client = _h.client, customClasses = _h.customClasses, latestMessageDatesByChannels = _h.latestMessageDatesByChannels, mutes = _h.mutes, theme = _h.theme, useImageFlagEmojisOnWindows = _h.useImageFlagEmojisOnWindows;
+    var _h = useChatContext('Channel'), client = _h.client, customClasses = _h.customClasses, latestMessageDatesByChannels = _h.latestMessageDatesByChannels, mutes = _h.mutes, theme = _h.theme;
     var t = useTranslationContext('Channel').t;
-    var _j = useState(channel.getConfig()), channelConfig = _j[0], setChannelConfig = _j[1];
-    var _k = useState([]), notifications = _k[0], setNotifications = _k[1];
-    var _l = useState(), quotedMessage = _l[0], setQuotedMessage = _l[1];
+    var _j = useChannelContainerClasses({ customClasses: customClasses }), channelClass = _j.channelClass, chatClass = _j.chatClass, chatContainerClass = _j.chatContainerClass, windowsEmojiClass = _j.windowsEmojiClass;
+    var _k = useState(channel.getConfig()), channelConfig = _k[0], setChannelConfig = _k[1];
+    var _l = useState([]), notifications = _l[0], setNotifications = _l[1];
+    var _m = useState(), quotedMessage = _m[0], setQuotedMessage = _m[1];
     var notificationTimeouts = [];
-    var _m = useReducer(channelReducer, __assign(__assign({}, initialState), { loading: !channel.initialized })), state = _m[0], dispatch = _m[1];
+    var _o = useReducer(channelReducer, __assign(__assign({}, initialState), { loading: !channel.initialized })), state = _o[0], dispatch = _o[1];
     var isMounted = useIsMounted();
     var originalTitle = useRef('');
     var lastRead = useRef(new Date());
@@ -171,7 +183,7 @@ var ChannelInner = function (props) {
                         activeUnreadHandler(unread, originalTitle.current);
                     }
                     else {
-                        document.title = "(" + unread + ") " + originalTitle.current;
+                        document.title = "(".concat(unread, ") ").concat(originalTitle.current);
                     }
                 }
             }
@@ -267,9 +279,9 @@ var ChannelInner = function (props) {
         trailing: true,
     });
     var loadMore = function (limit) {
-        if (limit === void 0) { limit = 100; }
+        if (limit === void 0) { limit = DEFAULT_NEXT_CHANNEL_PAGE_SIZE; }
         return __awaiter(void 0, void 0, void 0, function () {
-            var oldestMessage, oldestID, perPage, queryResponse, e_2, hasMoreMessages;
+            var oldestMessage, notHasMore, oldestID, perPage, queryResponse, e_2, hasMoreMessages;
             var _a;
             return __generator(this, function (_b) {
                 switch (_b.label) {
@@ -280,8 +292,8 @@ var ChannelInner = function (props) {
                         if (state.loadingMore || state.loadingMoreNewer || (oldestMessage === null || oldestMessage === void 0 ? void 0 : oldestMessage.status) !== 'received') {
                             return [2 /*return*/, 0];
                         }
-                        // initial state loads with up to 25 messages, so if less than 25 no need for additional query
-                        if (channel.state.messages.length < 25) {
+                        notHasMore = hasNotMoreMessages(channel.state.messages.length, DEFAULT_INITIAL_CHANNEL_PAGE_SIZE);
+                        if (notHasMore) {
                             loadMoreFinished(false, channel.state.messages);
                             return [2 /*return*/, channel.state.messages.length];
                         }
@@ -456,7 +468,7 @@ var ChannelInner = function (props) {
                 switch (_f.label) {
                     case 0:
                         channel.state.filterErrorMessages();
-                        messagePreview = __assign({ __html: text, attachments: attachments, created_at: new Date(), html: text, id: (_e = customMessageData === null || customMessageData === void 0 ? void 0 : customMessageData.id) !== null && _e !== void 0 ? _e : client.userID + "-" + nanoid(), mentioned_users: mentioned_users, reactions: [], status: 'sending', text: text, type: 'regular', user: client.user }, ((parent === null || parent === void 0 ? void 0 : parent.id) ? { parent_id: parent.id } : null));
+                        messagePreview = __assign({ __html: text, attachments: attachments, created_at: new Date(), html: text, id: (_e = customMessageData === null || customMessageData === void 0 ? void 0 : customMessageData.id) !== null && _e !== void 0 ? _e : "".concat(client.userID, "-").concat(nanoid()), mentioned_users: mentioned_users, reactions: [], status: 'sending', text: text, type: 'regular', user: client.user }, ((parent === null || parent === void 0 ? void 0 : parent.id) ? { parent_id: parent.id } : null));
                         updateMessage(messagePreview);
                         return [4 /*yield*/, doSendMessage(messagePreview, customMessageData)];
                     case 1:
@@ -510,44 +522,46 @@ var ChannelInner = function (props) {
             type: 'loadMoreThreadFinished',
         });
     }, 2000, { leading: true, trailing: true });
-    var loadMoreThread = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var parentID, oldMessages, oldestMessageID, limit, queryResponse, threadHasMoreMessages, newThreadMessages, e_4;
-        var _a;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
-                case 0:
-                    if (state.threadLoadingMore || !state.thread)
-                        return [2 /*return*/];
-                    dispatch({ type: 'startLoadingThread' });
-                    parentID = state.thread.id;
-                    if (!parentID) {
-                        return [2 /*return*/, dispatch({ type: 'closeThread' })];
-                    }
-                    oldMessages = channel.state.threads[parentID] || [];
-                    oldestMessageID = (_a = oldMessages[0]) === null || _a === void 0 ? void 0 : _a.id;
-                    limit = 50;
-                    _b.label = 1;
-                case 1:
-                    _b.trys.push([1, 3, , 4]);
-                    return [4 /*yield*/, channel.getReplies(parentID, {
-                            id_lt: oldestMessageID,
-                            limit: limit,
-                        })];
-                case 2:
-                    queryResponse = _b.sent();
-                    threadHasMoreMessages = queryResponse.messages.length === limit;
-                    newThreadMessages = channel.state.threads[parentID] || [];
-                    // next set loadingMore to false so we can start asking for more data
-                    loadMoreThreadFinished(threadHasMoreMessages, newThreadMessages);
-                    return [3 /*break*/, 4];
-                case 3:
-                    e_4 = _b.sent();
-                    loadMoreThreadFinished(false, oldMessages);
-                    return [3 /*break*/, 4];
-                case 4: return [2 /*return*/];
-            }
+    var loadMoreThread = function (limit) {
+        if (limit === void 0) { limit = DEFAULT_THREAD_PAGE_SIZE; }
+        return __awaiter(void 0, void 0, void 0, function () {
+            var parentID, oldMessages, oldestMessageID, queryResponse, threadHasMoreMessages, newThreadMessages, e_4;
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        if (state.threadLoadingMore || !state.thread)
+                            return [2 /*return*/];
+                        dispatch({ type: 'startLoadingThread' });
+                        parentID = state.thread.id;
+                        if (!parentID) {
+                            return [2 /*return*/, dispatch({ type: 'closeThread' })];
+                        }
+                        oldMessages = channel.state.threads[parentID] || [];
+                        oldestMessageID = (_a = oldMessages[0]) === null || _a === void 0 ? void 0 : _a.id;
+                        _b.label = 1;
+                    case 1:
+                        _b.trys.push([1, 3, , 4]);
+                        return [4 /*yield*/, channel.getReplies(parentID, {
+                                id_lt: oldestMessageID,
+                                limit: limit,
+                            })];
+                    case 2:
+                        queryResponse = _b.sent();
+                        threadHasMoreMessages = hasMoreMessagesProbably(queryResponse.messages.length, limit);
+                        newThreadMessages = channel.state.threads[parentID] || [];
+                        // next set loadingMore to false so we can start asking for more data
+                        loadMoreThreadFinished(threadHasMoreMessages, newThreadMessages);
+                        return [3 /*break*/, 4];
+                    case 3:
+                        e_4 = _b.sent();
+                        loadMoreThreadFinished(false, oldMessages);
+                        return [3 /*break*/, 4];
+                    case 4: return [2 /*return*/];
+                }
+            });
         });
-    }); };
+    };
     var onMentionsHoverOrClick = useMentionsHandlers(onMentionsHover, onMentionsClick);
     var editMessage = useEditMessageHandler(doUpdateMessageRequest);
     var typing = state.typing, restState = __rest(state, ["typing"]);
@@ -597,12 +611,14 @@ var ChannelInner = function (props) {
         MessageStatus: props.MessageStatus,
         MessageSystem: props.MessageSystem,
         MessageTimestamp: props.MessageTimestamp,
+        ModalGallery: props.ModalGallery,
         PinIndicator: props.PinIndicator,
         QuotedMessage: props.QuotedMessage,
         QuotedMessagePreview: props.QuotedMessagePreview,
         ReactionSelector: props.ReactionSelector,
         ReactionsList: props.ReactionsList,
         SendButton: props.SendButton,
+        ThreadHead: props.ThreadHead,
         ThreadHeader: props.ThreadHeader,
         ThreadStart: props.ThreadStart,
         TriggerProvider: props.TriggerProvider,
@@ -618,32 +634,26 @@ var ChannelInner = function (props) {
     var typingContextValue = useCreateTypingContext({
         typing: typing,
     });
-    var chatClass = (customClasses === null || customClasses === void 0 ? void 0 : customClasses.chat) || 'str-chat';
-    var chatContainerClass = (customClasses === null || customClasses === void 0 ? void 0 : customClasses.chatContainer) || 'str-chat__container';
-    var channelClass = (customClasses === null || customClasses === void 0 ? void 0 : customClasses.channel) || 'str-chat-channel';
-    var windowsEmojiClass = useImageFlagEmojisOnWindows && navigator.userAgent.match(/Win/)
-        ? 'str-chat--windows-flags'
-        : '';
     var OptionalMessageInputProvider = useMemo(function () { return (dragAndDropWindow ? DropzoneProvider : React.Fragment); }, [dragAndDropWindow]);
     if (state.error) {
-        return (React.createElement("div", { className: chatClass + " " + channelClass + " " + theme },
+        return (React.createElement("div", { className: "".concat(chatClass, " ").concat(channelClass, " str-chat__channel ").concat(theme) },
             React.createElement(LoadingErrorIndicator, { error: state.error })));
     }
     if (state.loading) {
-        return (React.createElement("div", { className: chatClass + " " + channelClass + " " + theme },
-            React.createElement(LoadingIndicator, { size: 25 })));
+        return (React.createElement("div", { className: "".concat(chatClass, " ").concat(channelClass, " str-chat__channel ").concat(theme) },
+            React.createElement(LoadingIndicator, null)));
     }
     if (!channel.watch) {
-        return (React.createElement("div", { className: chatClass + " " + channelClass + " " + theme },
+        return (React.createElement("div", { className: "".concat(chatClass, " ").concat(channelClass, " str-chat__channel ").concat(theme) },
             React.createElement("div", null, t('Channel Missing'))));
     }
-    return (React.createElement("div", { className: chatClass + " " + channelClass + " " + theme + " " + windowsEmojiClass },
+    return (React.createElement("div", { className: "".concat(chatClass, " ").concat(channelClass, " str-chat__channel ").concat(theme, " ").concat(windowsEmojiClass) },
         React.createElement(ChannelStateProvider, { value: channelStateContextValue },
             React.createElement(ChannelActionProvider, { value: channelActionContextValue },
                 React.createElement(ComponentProvider, { value: componentContextValue },
                     React.createElement(EmojiProvider, { value: emojiContextValue },
                         React.createElement(TypingProvider, { value: typingContextValue },
-                            React.createElement("div", { className: "" + chatContainerClass },
+                            React.createElement("div", { className: "".concat(chatContainerClass) },
                                 React.createElement(OptionalMessageInputProvider, __assign({}, optionalMessageInputProps), children)))))))));
 };
 /**

package/dist/components/Channel/LoadingChannel.d.ts

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

package/dist/components/Channel/LoadingChannel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingChannel.d.ts","sourceRoot":"","sources":["../../../src/components/Channel/LoadingChannel.tsx"],"names":[],"mappings":"AAgCA,eAAO,MAAM,cAAc,mBAU1B,CAAC"}

package/dist/components/Channel/LoadingChannel.js

@@ -0,0 +1,20 @@
+import React from 'react';
+var LoadingMessage = function () { return (React.createElement("div", { className: 'str-chat__loading-channel-message' },
+    React.createElement("div", { className: 'str-chat__loading-channel-message-avatar' }),
+    React.createElement("div", { className: 'str-chat__loading-channel-message-end' },
+        React.createElement("div", { className: 'str-chat__loading-channel-message-sender' }),
+        React.createElement("div", { className: 'str-chat__loading-channel-message-last-row' },
+            React.createElement("div", { className: 'str-chat__loading-channel-message-text' }),
+            React.createElement("div", { className: 'str-chat__loading-channel-message-date' }))))); };
+var LoadingMessageInput = function () { return (React.createElement("div", { className: 'str-chat__loading-channel-message-input-row' },
+    React.createElement("div", { className: 'str-chat__loading-channel-message-input' }),
+    React.createElement("div", { className: 'str-chat__loading-channel-message-send' }))); };
+var LoadingChannelHeader = function () { return (React.createElement("div", { className: 'str-chat__loading-channel-header' },
+    React.createElement("div", { className: 'str-chat__loading-channel-header-avatar' }),
+    React.createElement("div", { className: 'str-chat__loading-channel-header-end' },
+        React.createElement("div", { className: 'str-chat__loading-channel-header-name' }),
+        React.createElement("div", { className: 'str-chat__loading-channel-header-info' })))); };
+export var LoadingChannel = function () { return (React.createElement("div", { className: 'str-chat__loading-channel' },
+    React.createElement(LoadingChannelHeader, null),
+    React.createElement("div", { className: 'str-chat__loading-channel-message-list' }, Array.from(Array(3)).map(function (_, i) { return (React.createElement(LoadingMessage, { key: "loading-message-".concat(i) })); })),
+    React.createElement(LoadingMessageInput, null))); };

package/dist/components/Channel/channelState.d.ts

@@ -77,6 +77,7 @@ export declare const initialState: {
     threadHasMore: boolean;
     threadLoadingMore: boolean;
     threadMessages: never[];
+    threadSuppressAutoscroll: boolean;
     typing: {};
     watcherCount: number;
     watchers: {};

package/dist/components/Channel/channelState.d.ts.map

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