stream-chat-react 12.0.0-rc.12 → 12.0.0-rc.13

package/dist/components/ChatView/ChatView.js

@@ -3,6 +3,7 @@ import { ThreadProvider, useStateStore } from '../Threads';
 import { Icon } from '../Threads/icons';
 import { UnreadCountBadge } from '../Threads/UnreadCountBadge';
 import { useChatContext } from '../../context';
+import clsx from 'clsx';
 const availableChatViews = ['channels', 'threads'];
 const ChatViewContext = createContext({
     activeChatView: 'channels',
@@ -10,9 +11,10 @@ const ChatViewContext = createContext({
 });
 export const ChatView = ({ children }) => {
     const [activeChatView, setActiveChatView] = useState('channels');
+    const { theme } = useChatContext();
     const value = useMemo(() => ({ activeChatView, setActiveChatView }), [activeChatView]);
     return (React.createElement(ChatViewContext.Provider, { value: value },
-        React.createElement("div", { className: 'str-chat str-chat__chat-view' }, children)));
+        React.createElement("div", { className: clsx('str-chat', theme, 'str-chat__chat-view') }, children)));
 };
 const ChannelsView = ({ children }) => {
     const { activeChatView } = useContext(ChatViewContext);

package/dist/index.browser.cjs

@@ -33736,7 +33736,7 @@ var import_lodash10 = __toESM(require("lodash.debounce"));
 var import_lodash11 = __toESM(require("lodash.defaultsdeep"));
 var import_lodash12 = __toESM(require("lodash.throttle"));
 var import_nanoid8 = require("nanoid");
-var import_clsx37 = __toESM(require("clsx"));
+var import_clsx38 = __toESM(require("clsx"));
 
 // src/components/Channel/channelState.ts
 var channelReducer = (state, action) => {
@@ -38758,7 +38758,7 @@ var import_react82 = __toESM(require("react"));
 
 // src/components/Threads/ThreadList/ThreadListItemUI.tsx
 var import_react81 = __toESM(require("react"));
-var import_clsx17 = __toESM(require("clsx"));
+var import_clsx18 = __toESM(require("clsx"));
 
 // src/components/Message/Timestamp.tsx
 var import_react77 = __toESM(require("react"));
@@ -38806,6 +38806,7 @@ var UnreadCountBadge = ({
 
 // src/components/ChatView/ChatView.tsx
 var import_react79 = __toESM(require("react"));
+var import_clsx17 = __toESM(require("clsx"));
 var ChatViewContext = (0, import_react79.createContext)({
   activeChatView: "channels",
   setActiveChatView: () => void 0
@@ -38814,8 +38815,9 @@ var ChatView = ({ children }) => {
   const [activeChatView, setActiveChatView] = (0, import_react79.useState)(
     "channels"
   );
+  const { theme } = useChatContext();
   const value = (0, import_react79.useMemo)(() => ({ activeChatView, setActiveChatView }), [activeChatView]);
-  return /* @__PURE__ */ import_react79.default.createElement(ChatViewContext.Provider, { value }, /* @__PURE__ */ import_react79.default.createElement("div", { className: "str-chat str-chat__chat-view" }, children));
+  return /* @__PURE__ */ import_react79.default.createElement(ChatViewContext.Provider, { value }, /* @__PURE__ */ import_react79.default.createElement("div", { className: (0, import_clsx17.default)("str-chat", theme, "str-chat__chat-view") }, children));
 };
 var ChannelsView = ({ children }) => {
   const { activeChatView } = (0, import_react79.useContext)(ChatViewContext);
@@ -38928,12 +38930,12 @@ var getTitleFromMessage = ({
   }
   const messageBelongsToCurrentUser = message?.user?.id === currentUserId;
   if (message?.deleted_at && message.parent_id)
-    return (0, import_clsx17.default)(messageBelongsToCurrentUser && "You:", "This reply was deleted.");
+    return (0, import_clsx18.default)(messageBelongsToCurrentUser && "You:", "This reply was deleted.");
   if (message?.deleted_at && !message.parent_id)
-    return (0, import_clsx17.default)(messageBelongsToCurrentUser && "You:", "The source message was deleted.");
+    return (0, import_clsx18.default)(messageBelongsToCurrentUser && "You:", "The source message was deleted.");
   if (attachment?.type === "voiceRecording")
-    return (0, import_clsx17.default)(attachmentIcon, messageBelongsToCurrentUser && "You:", "Voice message");
-  return (0, import_clsx17.default)(
+    return (0, import_clsx18.default)(attachmentIcon, messageBelongsToCurrentUser && "You:", "Voice message");
+  return (0, import_clsx18.default)(
     attachmentIcon,
     messageBelongsToCurrentUser && "You:",
     message?.text || attachment?.fallback || "N/A"
@@ -39328,7 +39330,7 @@ async function fetchMessageReactions(client, messageId, reactionType, sort) {
 
 // src/components/Message/MessageSimple.tsx
 var import_react142 = __toESM(require("react"));
-var import_clsx32 = __toESM(require("clsx"));
+var import_clsx33 = __toESM(require("clsx"));
 
 // src/components/Message/icons.tsx
 var import_react88 = __toESM(require("react"));
@@ -39506,11 +39508,11 @@ var import_react96 = __toESM(require("react"));
 
 // src/components/MessageActions/MessageActions.tsx
 var import_react95 = __toESM(require("react"));
-var import_clsx19 = __toESM(require("clsx"));
+var import_clsx20 = __toESM(require("clsx"));
 
 // src/components/MessageActions/MessageActionsBox.tsx
 var import_react93 = __toESM(require("react"));
-var import_clsx18 = __toESM(require("clsx"));
+var import_clsx19 = __toESM(require("clsx"));
 
 // src/components/MessageActions/CustomMessageActionsList.tsx
 var import_react92 = __toESM(require("react"));
@@ -39567,7 +39569,7 @@ var UnMemoizedMessageActionsBox = import_react93.default.forwardRef(
         textarea.focus();
       }
     };
-    const rootClassName2 = (0, import_clsx18.default)("str-chat__message-actions-box", {
+    const rootClassName2 = (0, import_clsx19.default)("str-chat__message-actions-box", {
       "str-chat__message-actions-box--open": open
     });
     const buttonClassName = "str-chat__message-actions-list-item str-chat__message-actions-list-item-button";
@@ -39813,7 +39815,7 @@ var MessageActions = (props) => {
 };
 var MessageActionsWrapper = (props) => {
   const { children, customWrapperClass, inline, setActionsBoxOpen } = props;
-  const defaultWrapperClass = (0, import_clsx19.default)(
+  const defaultWrapperClass = (0, import_clsx20.default)(
     "str-chat__message-simple__actions__action",
     "str-chat__message-simple__actions__action--options",
     "str-chat__message-actions-container"
@@ -39914,7 +39916,7 @@ var MessageRepliesCountButton = import_react97.default.memo(
 
 // src/components/Message/MessageStatus.tsx
 var import_react100 = __toESM(require("react"));
-var import_clsx20 = __toESM(require("clsx"));
+var import_clsx21 = __toESM(require("clsx"));
 
 // src/components/Tooltip/Tooltip.tsx
 var import_react98 = __toESM(require("react"));
@@ -40011,7 +40013,7 @@ var UnMemoizedMessageStatus = (props) => {
     "span",
     {
       className: rootClassName2,
-      "data-testid": (0, import_clsx20.default)({
+      "data-testid": (0, import_clsx21.default)({
         "message-status-read-by": deliveredAndRead,
         "message-status-received": delivered && !deliveredAndRead,
         "message-status-sending": sending
@@ -40067,12 +40069,12 @@ var UnMemoizedMessageStatus = (props) => {
 var MessageStatus = import_react100.default.memo(UnMemoizedMessageStatus);
 
 // src/components/Message/MessageText.tsx
-var import_clsx22 = __toESM(require("clsx"));
+var import_clsx23 = __toESM(require("clsx"));
 var import_react103 = __toESM(require("react"));
 
 // src/components/Message/QuotedMessage.tsx
 var import_react101 = __toESM(require("react"));
-var import_clsx21 = __toESM(require("clsx"));
+var import_clsx22 = __toESM(require("clsx"));
 var QuotedMessage = () => {
   const {
     Attachment: Attachment2 = Attachment,
@@ -40091,7 +40093,7 @@ var QuotedMessage = () => {
   return /* @__PURE__ */ import_react101.default.createElement(import_react101.default.Fragment, null, /* @__PURE__ */ import_react101.default.createElement(
     "div",
     {
-      className: (0, import_clsx21.default)("str-chat__quoted-message-preview", { mine: isMyMessage() }),
+      className: (0, import_clsx22.default)("str-chat__quoted-message-preview", { mine: isMyMessage() }),
       "data-testid": "quoted-message",
       onClickCapture: (e2) => {
         e2.stopPropagation();
@@ -40159,7 +40161,7 @@ var UnMemoizedMessageTextComponent = (props) => {
   return /* @__PURE__ */ import_react103.default.createElement("div", { className: wrapperClass, tabIndex: 0 }, /* @__PURE__ */ import_react103.default.createElement(
     "div",
     {
-      className: (0, import_clsx22.default)(innerClass, {
+      className: (0, import_clsx23.default)(innerClass, {
         [`str-chat__message-${theme}-text-inner--has-attachment`]: hasAttachment,
         [` str-chat__message-${theme}-text-inner--is-emoji`]: isOnlyEmojis(message.text) && !message.quoted_message
       }),
@@ -40437,12 +40439,12 @@ var import_react112 = __toESM(require("react"));
 var import_react109 = __toESM(require("react"));
 
 // src/components/MediaRecorder/AudioRecorder/RecordingTimer.tsx
-var import_clsx23 = __toESM(require("clsx"));
+var import_clsx24 = __toESM(require("clsx"));
 var import_react108 = __toESM(require("react"));
 var RecordingTimer = ({ durationSeconds }) => /* @__PURE__ */ import_react108.default.createElement(
   "div",
   {
-    className: (0, import_clsx23.default)("str-chat__recording-timer", {
+    className: (0, import_clsx24.default)("str-chat__recording-timer", {
       "str-chat__recording-timer--hours": durationSeconds >= 3600
     })
   },
@@ -40717,7 +40719,7 @@ var FileAttachmentPreview = ({
 };
 
 // src/components/MessageInput/AttachmentPreviewList/ImageAttachmentPreview.tsx
-var import_clsx24 = __toESM(require("clsx"));
+var import_clsx25 = __toESM(require("clsx"));
 var import_react116 = __toESM(require("react"));
 var ImageAttachmentPreview = ({
   attachment,
@@ -40733,7 +40735,7 @@ var ImageAttachmentPreview = ({
   return /* @__PURE__ */ import_react116.default.createElement(
     "div",
     {
-      className: (0, import_clsx24.default)("str-chat__attachment-preview-image", {
+      className: (0, import_clsx25.default)("str-chat__attachment-preview-image", {
         "str-chat__attachment-preview-image--error": previewError
       }),
       "data-testid": "attachment-preview-image"
@@ -41149,7 +41151,7 @@ var import_react128 = __toESM(require("react"));
 
 // src/components/MessageInput/MessageInputFlat.tsx
 var import_react127 = __toESM(require("react"));
-var import_clsx26 = __toESM(require("clsx"));
+var import_clsx27 = __toESM(require("clsx"));
 var import_react_dropzone2 = require("react-dropzone");
 var import_nanoid5 = require("nanoid");
 
@@ -41212,7 +41214,7 @@ var QuotedMessagePreview = ({
 };
 
 // src/components/MessageInput/LinkPreviewList.tsx
-var import_clsx25 = __toESM(require("clsx"));
+var import_clsx26 = __toESM(require("clsx"));
 var import_react125 = __toESM(require("react"));
 var LinkPreviewList = ({ linkPreviews }) => {
   const { quotedMessage } = useChannelStateContext();
@@ -41229,7 +41231,7 @@ var LinkPreviewCard = ({ linkPreview }) => {
   return /* @__PURE__ */ import_react125.default.createElement(
     "div",
     {
-      className: (0, import_clsx25.default)("str-chat__link-preview-card", {
+      className: (0, import_clsx26.default)("str-chat__link-preview-card", {
         "str-chat__link-preview-card--loading": linkPreview.state === "loading" /* LOADING */
       }),
       "data-testid": "link-preview-card"
@@ -41418,7 +41420,7 @@ var MessageInputFlat = () => {
   ), findAndEnqueueURLsToEnrich && /* @__PURE__ */ import_react127.default.createElement(LinkPreviewList2, { linkPreviews: Array.from(linkPreviews.values()) }), isDragActive && /* @__PURE__ */ import_react127.default.createElement(
     "div",
     {
-      className: (0, import_clsx26.default)("str-chat__dropzone-container", {
+      className: (0, import_clsx27.default)("str-chat__dropzone-container", {
         "str-chat__dropzone-container--not-accepted": isDragReject
       })
     },
@@ -41543,7 +41545,7 @@ var MML3 = (props) => {
 
 // src/components/Reactions/ReactionSelector.tsx
 var import_react135 = __toESM(require("react"));
-var import_clsx27 = __toESM(require("clsx"));
+var import_clsx28 = __toESM(require("clsx"));
 
 // src/components/Reactions/utils/utils.ts
 var isMutableRef = (ref) => {
@@ -41720,7 +41722,7 @@ var UnMemoizedReactionSelector = import_react135.default.forwardRef(
     return /* @__PURE__ */ import_react135.default.createElement(
       "div",
       {
-        className: (0, import_clsx27.default)("str-chat__reaction-selector str-chat__message-reaction-selector", {
+        className: (0, import_clsx28.default)("str-chat__reaction-selector str-chat__message-reaction-selector", {
           "str-chat__reaction-selector--reverse": reverse
         }),
         "data-testid": "reaction-selector",
@@ -41746,7 +41748,7 @@ var UnMemoizedReactionSelector = import_react135.default.forwardRef(
           "button",
           {
             "aria-label": `Select Reaction: ${reactionName || reactionType}`,
-            className: (0, import_clsx27.default)(
+            className: (0, import_clsx28.default)(
               "str-chat__message-reactions-list-item str-chat__message-reactions-option",
               {
                 "str-chat__message-reactions-option-selected": iHaveReactedWithReaction(
@@ -41788,7 +41790,7 @@ var ReactionSelector = import_react135.default.memo(
 
 // src/components/Reactions/ReactionsList.tsx
 var import_react139 = __toESM(require("react"));
-var import_clsx29 = __toESM(require("clsx"));
+var import_clsx30 = __toESM(require("clsx"));
 
 // src/components/Reactions/hooks/useProcessReactions.tsx
 var import_react136 = require("react");
@@ -41886,7 +41888,7 @@ var useProcessReactions = (params) => {
 
 // src/components/Reactions/ReactionsListModal.tsx
 var import_react138 = __toESM(require("react"));
-var import_clsx28 = __toESM(require("clsx"));
+var import_clsx29 = __toESM(require("clsx"));
 
 // src/components/Reactions/hooks/useFetchReactions.ts
 var import_react137 = require("react");
@@ -41970,13 +41972,13 @@ function ReactionsListModal({
     Modal,
     {
       ...modalProps,
-      className: (0, import_clsx28.default)("str-chat__message-reactions-details-modal", modalProps.className)
+      className: (0, import_clsx29.default)("str-chat__message-reactions-details-modal", modalProps.className)
     },
     /* @__PURE__ */ import_react138.default.createElement("div", { className: "str-chat__message-reactions-details", "data-testid": "reactions-list-modal" }, /* @__PURE__ */ import_react138.default.createElement("div", { className: "str-chat__message-reactions-details-reaction-types" }, reactions.map(
       ({ EmojiComponent, reactionCount, reactionType }) => EmojiComponent && /* @__PURE__ */ import_react138.default.createElement(
         "div",
         {
-          className: (0, import_clsx28.default)("str-chat__message-reactions-details-reaction-type", {
+          className: (0, import_clsx29.default)("str-chat__message-reactions-details-reaction-type", {
             "str-chat__message-reactions-details-reaction-type--selected": selectedReactionType === reactionType
           }),
           "data-testid": `reaction-details-selector-${reactionType}`,
@@ -42032,7 +42034,7 @@ var UnMemoizedReactionsList = (props) => {
     "div",
     {
       "aria-label": t2("aria/Reaction list"),
-      className: (0, import_clsx29.default)("str-chat__reaction-list str-chat__message-reactions-container", {
+      className: (0, import_clsx30.default)("str-chat__reaction-list str-chat__message-reactions-container", {
         // we are stuck with both classes as both are used in CSS
         "str-chat__reaction-list--reverse": reverse
       }),
@@ -42043,7 +42045,7 @@ var UnMemoizedReactionsList = (props) => {
       ({ EmojiComponent, isOwnReaction, reactionCount, reactionType }) => EmojiComponent && /* @__PURE__ */ import_react139.default.createElement(
         "li",
         {
-          className: (0, import_clsx29.default)("str-chat__message-reaction", {
+          className: (0, import_clsx30.default)("str-chat__message-reaction", {
             "str-chat__message-reaction-own": isOwnReaction
           }),
           key: reactionType
@@ -42086,7 +42088,7 @@ var ReactionsList = import_react139.default.memo(UnMemoizedReactionsList);
 
 // src/components/Reactions/SimpleReactionsList.tsx
 var import_react140 = __toESM(require("react"));
-var import_clsx30 = __toESM(require("clsx"));
+var import_clsx31 = __toESM(require("clsx"));
 var WithTooltip = ({
   children,
   onMouseEnter,
@@ -42120,7 +42122,7 @@ var UnMemoizedSimpleReactionsList = (props) => {
         return EmojiComponent && /* @__PURE__ */ import_react140.default.createElement(
           "li",
           {
-            className: (0, import_clsx30.default)("str-chat__simple-reactions-list-item", {
+            className: (0, import_clsx31.default)("str-chat__simple-reactions-list-item", {
               "str-chat__message-reaction-own": isOwnReaction
             }),
             key: reactionType,
@@ -42140,7 +42142,7 @@ var SimpleReactionsList = import_react140.default.memo(
 
 // src/components/Message/MessageEditedTimestamp.tsx
 var import_react141 = __toESM(require("react"));
-var import_clsx31 = __toESM(require("clsx"));
+var import_clsx32 = __toESM(require("clsx"));
 function MessageEditedTimestamp({
   message: propMessage,
   open,
@@ -42158,7 +42160,7 @@ function MessageEditedTimestamp({
   return /* @__PURE__ */ import_react141.default.createElement(
     "div",
     {
-      className: (0, import_clsx31.default)(
+      className: (0, import_clsx32.default)(
         "str-chat__message-edited-timestamp",
         open ? "str-chat__message-edited-timestamp--open" : "str-chat__message-edited-timestamp--collapsed"
       ),
@@ -42233,7 +42235,7 @@ var MessageSimpleWithContext = (props) => {
   } else if (isEdited) {
     handleClick = () => setEditedTimestampOpen((prev) => !prev);
   }
-  const rootClassName2 = (0, import_clsx32.default)(
+  const rootClassName2 = (0, import_clsx33.default)(
     "str-chat__message str-chat__message-simple",
     `str-chat__message--${message.type}`,
     `str-chat__message--${message.status}`,
@@ -42280,7 +42282,7 @@ var MessageSimpleWithContext = (props) => {
   ), /* @__PURE__ */ import_react142.default.createElement(
     "div",
     {
-      className: (0, import_clsx32.default)("str-chat__message-inner", {
+      className: (0, import_clsx33.default)("str-chat__message-inner", {
         "str-chat__simple-message--error-failed": allowRetry || isBounced
       }),
       "data-testid": "message-inner",
@@ -42539,7 +42541,7 @@ var GiphyPreviewMessage = (props) => {
 };
 
 // src/components/MessageList/MessageList.tsx
-var import_clsx34 = __toESM(require("clsx"));
+var import_clsx35 = __toESM(require("clsx"));
 var import_react166 = __toESM(require("react"));
 
 // src/components/MessageList/hooks/MessageList/useEnrichedMessages.ts
@@ -43390,7 +43392,7 @@ var InfiniteScroll = (props) => {
 
 // src/components/TypingIndicator/TypingIndicator.tsx
 var import_react161 = __toESM(require("react"));
-var import_clsx33 = __toESM(require("clsx"));
+var import_clsx34 = __toESM(require("clsx"));
 var useJoinTypingUsers = (names) => {
   const { t: t2 } = useTranslationContext();
   if (!names.length) return null;
@@ -43430,7 +43432,7 @@ var UnMemoizedTypingIndicator = (props) => {
   return /* @__PURE__ */ import_react161.default.createElement(
     "div",
     {
-      className: (0, import_clsx33.default)("str-chat__typing-indicator", {
+      className: (0, import_clsx34.default)("str-chat__typing-indicator", {
         "str-chat__typing-indicator--typing": isTypingActive
       }),
       "data-testid": "typing-indicator"
@@ -43802,7 +43804,7 @@ var MessageListWithContext = (props) => {
   return /* @__PURE__ */ import_react166.default.createElement(MessageListContextProvider, { value: { listElement, scrollToBottom } }, /* @__PURE__ */ import_react166.default.createElement(MessageListMainPanel, null, !threadList && showUnreadMessagesNotification && /* @__PURE__ */ import_react166.default.createElement(UnreadMessagesNotification2, { unreadCount: channelUnreadUiState?.unread_messages }), /* @__PURE__ */ import_react166.default.createElement(
     "div",
     {
-      className: (0, import_clsx34.default)(messageListClass, customClasses?.threadList),
+      className: (0, import_clsx35.default)(messageListClass, customClasses?.threadList),
       onScroll,
       ref: setListElement,
       tabIndex: 0
@@ -43869,7 +43871,7 @@ var MessageList = (props) => {
 
 // src/components/MessageList/ScrollToBottomButton.tsx
 var import_react167 = __toESM(require("react"));
-var import_clsx35 = __toESM(require("clsx"));
+var import_clsx36 = __toESM(require("clsx"));
 var UnMemoizedScrollToBottomButton = (props) => {
   const { isMessageListScrolledToBottom, onClick, threadList } = props;
   const { channel: activeChannel, client } = useChatContext();
@@ -43921,7 +43923,7 @@ var UnMemoizedScrollToBottomButton = (props) => {
     countUnread > 0 && /* @__PURE__ */ import_react167.default.createElement(
       "div",
       {
-        className: (0, import_clsx35.default)(
+        className: (0, import_clsx36.default)(
           "str-chat__message-notification",
           "str-chat__jump-to-latest-unread-count"
         ),
@@ -44141,7 +44143,7 @@ var useUnreadMessagesNotificationVirtualized = ({
 };
 
 // src/components/MessageList/VirtualizedMessageListComponents.tsx
-var import_clsx36 = __toESM(require("clsx"));
+var import_clsx37 = __toESM(require("clsx"));
 var import_lodash9 = __toESM(require("lodash.throttle"));
 var import_react175 = __toESM(require("react"));
 var PREPEND_OFFSET = 10 ** 7;
@@ -44171,7 +44173,7 @@ var Item3 = ({
     "div",
     {
       ...props,
-      className: context?.customClasses?.virtualMessage || (0, import_clsx36.default)("str-chat__virtual-list-message-wrapper str-chat__li", {
+      className: context?.customClasses?.virtualMessage || (0, import_clsx37.default)("str-chat__virtual-list-message-wrapper str-chat__li", {
         [`str-chat__li--${groupStyles}`]: groupStyles
       })
     }
@@ -44799,7 +44801,7 @@ var UnMemoizedChannel = (props) => {
     customClasses
   });
   const channel = propsChannel || contextChannel;
-  const className = (0, import_clsx37.default)(chatClass, theme, channelClass);
+  const className = (0, import_clsx38.default)(chatClass, theme, channelClass);
   if (channelsQueryState.queryInProgress === "reload" && LoadingIndicator2) {
     return /* @__PURE__ */ import_react177.default.createElement("div", { className }, /* @__PURE__ */ import_react177.default.createElement(LoadingIndicator2, null));
   }
@@ -45611,7 +45613,7 @@ var ChannelInner = (props) => {
   const typingContextValue = useCreateTypingContext({
     typing
   });
-  const className = (0, import_clsx37.default)(chatClass, theme, channelClass);
+  const className = (0, import_clsx38.default)(chatClass, theme, channelClass);
   if (state.error) {
     return /* @__PURE__ */ import_react177.default.createElement("div", { className }, /* @__PURE__ */ import_react177.default.createElement(LoadingErrorIndicator2, { error: state.error }));
   }
@@ -45621,7 +45623,7 @@ var ChannelInner = (props) => {
   if (!channel.watch) {
     return /* @__PURE__ */ import_react177.default.createElement("div", { className }, /* @__PURE__ */ import_react177.default.createElement("div", null, t2("Channel Missing")));
   }
-  return /* @__PURE__ */ import_react177.default.createElement("div", { className: (0, import_clsx37.default)(className, windowsEmojiClass) }, /* @__PURE__ */ import_react177.default.createElement(ChannelStateProvider, { value: channelStateContextValue }, /* @__PURE__ */ import_react177.default.createElement(ChannelActionProvider, { value: channelActionContextValue }, /* @__PURE__ */ import_react177.default.createElement(WithComponents, { overrides: componentContextValue }, /* @__PURE__ */ import_react177.default.createElement(TypingProvider, { value: typingContextValue }, /* @__PURE__ */ import_react177.default.createElement("div", { className: `${chatContainerClass}` }, dragAndDropWindow && /* @__PURE__ */ import_react177.default.createElement(DropzoneProvider, { ...optionalMessageInputProps }, children), !dragAndDropWindow && /* @__PURE__ */ import_react177.default.createElement(import_react177.default.Fragment, null, children)))))));
+  return /* @__PURE__ */ import_react177.default.createElement("div", { className: (0, import_clsx38.default)(className, windowsEmojiClass) }, /* @__PURE__ */ import_react177.default.createElement(ChannelStateProvider, { value: channelStateContextValue }, /* @__PURE__ */ import_react177.default.createElement(ChannelActionProvider, { value: channelActionContextValue }, /* @__PURE__ */ import_react177.default.createElement(WithComponents, { overrides: componentContextValue }, /* @__PURE__ */ import_react177.default.createElement(TypingProvider, { value: typingContextValue }, /* @__PURE__ */ import_react177.default.createElement("div", { className: `${chatContainerClass}` }, dragAndDropWindow && /* @__PURE__ */ import_react177.default.createElement(DropzoneProvider, { ...optionalMessageInputProps }, children), !dragAndDropWindow && /* @__PURE__ */ import_react177.default.createElement(import_react177.default.Fragment, null, children)))))));
 };
 var Channel = import_react177.default.memo(UnMemoizedChannel);
 
@@ -45760,7 +45762,7 @@ var ChannelHeader = import_react181.default.memo(UnMemoizedChannelHeader);
 
 // src/components/ChannelList/ChannelList.tsx
 var import_react208 = __toESM(require("react"));
-var import_clsx42 = __toESM(require("clsx"));
+var import_clsx43 = __toESM(require("clsx"));
 
 // src/components/ChannelList/ChannelListMessenger.tsx
 var import_react182 = __toESM(require("react"));
@@ -46185,7 +46187,7 @@ var import_react199 = __toESM(require("react"));
 
 // src/components/ChannelPreview/ChannelPreviewMessenger.tsx
 var import_react196 = __toESM(require("react"));
-var import_clsx38 = __toESM(require("clsx"));
+var import_clsx39 = __toESM(require("clsx"));
 var UnMemoizedChannelPreviewMessenger = (props) => {
   const {
     active,
@@ -46217,7 +46219,7 @@ var UnMemoizedChannelPreviewMessenger = (props) => {
     {
       "aria-label": `Select Channel: ${displayTitle || ""}`,
       "aria-selected": active,
-      className: (0, import_clsx38.default)(
+      className: (0, import_clsx39.default)(
         `str-chat__channel-preview-messenger str-chat__channel-preview`,
         active && "str-chat__channel-preview-messenger--active",
         unread && unread >= 1 && "str-chat__channel-preview-messenger--unread",
@@ -46395,7 +46397,7 @@ var ChannelPreview = (props) => {
 };
 
 // src/components/ChannelSearch/ChannelSearch.tsx
-var import_clsx41 = __toESM(require("clsx"));
+var import_clsx42 = __toESM(require("clsx"));
 var import_react205 = __toESM(require("react"));
 
 // src/components/ChannelSearch/hooks/useChannelSearch.ts
@@ -46595,7 +46597,7 @@ var useChannelSearch = ({
 
 // src/components/ChannelSearch/SearchBar.tsx
 var import_react203 = __toESM(require("react"));
-var import_clsx39 = __toESM(require("clsx"));
+var import_clsx40 = __toESM(require("clsx"));
 
 // src/components/ChannelSearch/icons.tsx
 var import_react201 = __toESM(require("react"));
@@ -46691,7 +46693,7 @@ var SearchBarButton = ({
 }) => /* @__PURE__ */ import_react203.default.createElement(
   "button",
   {
-    className: (0, import_clsx39.default)("str-chat__channel-search-bar-button", className),
+    className: (0, import_clsx40.default)("str-chat__channel-search-bar-button", className),
     "data-testid": "search-bar-button",
     onClick
   },
@@ -46769,7 +46771,7 @@ var SearchBar = (props) => {
   ) : null, /* @__PURE__ */ import_react203.default.createElement(
     "div",
     {
-      className: (0, import_clsx39.default)(
+      className: (0, import_clsx40.default)(
         "str-chat__channel-search-input--wrapper",
         inputProps.query && "str-chat__channel-search-input--wrapper-active"
       )
@@ -46791,7 +46793,7 @@ var SearchBar = (props) => {
 
 // src/components/ChannelSearch/SearchResults.tsx
 var import_react204 = __toESM(require("react"));
-var import_clsx40 = __toESM(require("clsx"));
+var import_clsx41 = __toESM(require("clsx"));
 var DefaultSearchEmpty = () => {
   const { t: t2 } = useTranslationContext("SearchResults");
   return /* @__PURE__ */ import_react204.default.createElement("div", { "aria-live": "polite", className: "str-chat__channel-search-container-empty" }, /* @__PURE__ */ import_react204.default.createElement(SearchIcon, null), t2("No results found"));
@@ -46827,7 +46829,7 @@ var DefaultSearchResultsList = (props) => {
 var DefaultSearchResultItem = (props) => {
   const { focusedUser, index: index3, result, selectResult } = props;
   const focused = focusedUser === index3;
-  const className = (0, import_clsx40.default)(
+  const className = (0, import_clsx41.default)(
     "str-chat__channel-search-result",
     focused && "str-chat__channel-search-result--focused"
   );
@@ -46873,7 +46875,7 @@ var ResultsContainer = ({
     "div",
     {
       "aria-label": t2("aria/Channel search results"),
-      className: (0, import_clsx40.default)(`str-chat__channel-search-result-list`, popupResults ? "popup" : "inline")
+      className: (0, import_clsx41.default)(`str-chat__channel-search-result-list`, popupResults ? "popup" : "inline")
     },
     children
   );
@@ -46980,7 +46982,7 @@ var UnMemoizedChannelSearch = (props) => {
   return /* @__PURE__ */ import_react205.default.createElement(
     "div",
     {
-      className: (0, import_clsx41.default)(
+      className: (0, import_clsx42.default)(
         "str-chat__channel-search",
         popupResults ? "str-chat__channel-search--popup" : "str-chat__channel-search--inline",
         {
@@ -47235,7 +47237,7 @@ var UnMemoizedChannelList = (props) => {
     return /* @__PURE__ */ import_react208.default.createElement(ChannelPreview, { ...previewProps });
   };
   const baseClass = "str-chat__channel-list";
-  const className = (0, import_clsx42.default)(
+  const className = (0, import_clsx43.default)(
     customClasses?.chat ?? "str-chat",
     theme,
     customClasses?.channelList ?? `${baseClass} ${baseClass}-react`,
@@ -47519,7 +47521,7 @@ var useCreateChatClient = ({
 
 // src/components/Thread/Thread.tsx
 var import_react218 = __toESM(require("react"));
-var import_clsx43 = __toESM(require("clsx"));
+var import_clsx44 = __toESM(require("clsx"));
 
 // src/components/Thread/ThreadHeader.tsx
 var import_react215 = __toESM(require("react"));
@@ -47660,7 +47662,7 @@ var ThreadInner = (props) => {
   };
   const messageAsThread = thread ?? parentMessage;
   if (!messageAsThread) return null;
-  const threadClass = customClasses?.thread || (0, import_clsx43.default)("str-chat__thread-container str-chat__thread", {
+  const threadClass = customClasses?.thread || (0, import_clsx44.default)("str-chat__thread-container str-chat__thread", {
     "str-chat__thread--virtualized": virtualized
   });
   const head = /* @__PURE__ */ import_react218.default.createElement(
@@ -47698,14 +47700,14 @@ var ThreadInner = (props) => {
 
 // src/components/Window/Window.tsx
 var import_react219 = __toESM(require("react"));
-var import_clsx44 = __toESM(require("clsx"));
+var import_clsx45 = __toESM(require("clsx"));
 var UnMemoizedWindow = (props) => {
   const { children, thread: propThread } = props;
   const { thread: contextThread } = useChannelStateContext("Window");
   return /* @__PURE__ */ import_react219.default.createElement(
     "div",
     {
-      className: (0, import_clsx44.default)("str-chat__main-panel", {
+      className: (0, import_clsx45.default)("str-chat__main-panel", {
         "str-chat__main-panel--thread-open": contextThread || propThread
       })
     },