stream-chat-react 11.0.0-rc.3 → 11.0.0-rc.4

package/dist/index.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var icons = require('./icons-f45b355f.js');
+var icons = require('./icons-5ee8c22b.js');
 var React = require('react');
 var ReactPlayer = require('react-player');
 var prettybytes = require('pretty-bytes');
@@ -111,11 +111,12 @@ function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else i
 
 var UnMemoizedAttachmentActions = function (props) {
     var actionHandler = props.actionHandler, actions = props.actions, id = props.id, text = props.text;
+    var t = icons.useTranslationContext('UnMemoizedAttachmentActions').t;
     var handleActionClick = function (event, name, value) { return actionHandler === null || actionHandler === void 0 ? void 0 : actionHandler(name, value, event); };
     return (React__default["default"].createElement("div", { className: 'str-chat__message-attachment-actions' },
         React__default["default"].createElement("div", { className: 'str-chat__message-attachment-actions-form' },
             React__default["default"].createElement("span", null, text),
-            actions.map(function (action) { return (React__default["default"].createElement("button", { className: "str-chat__message-attachment-actions-button str-chat__message-attachment-actions-button--".concat(action.style), "data-testid": "".concat(action.name), "data-value": action.value, key: "".concat(id, "-").concat(action.value), onClick: function (event) { return handleActionClick(event, action.name, action.value); } }, action.text)); }))));
+            actions.map(function (action) { return (React__default["default"].createElement("button", { className: "str-chat__message-attachment-actions-button str-chat__message-attachment-actions-button--".concat(action.style), "data-testid": "".concat(action.name), "data-value": action.value, key: "".concat(id, "-").concat(action.value), onClick: function (event) { return handleActionClick(event, action.name, action.value); } }, action.text ? t(action.text) : null)); }))));
 };
 /**
  * A component for rendering the actions you can take on an attachment.
@@ -2796,6 +2797,7 @@ function noop() {}
 
 var ImageDropzone = function (_a) {
     var _b = _a.accept, acceptedFiles = _b === void 0 ? [] : _b, children = _a.children, disabled = _a.disabled, handleFiles = _a.handleFiles, maxNumberOfFiles = _a.maxNumberOfFiles, multiple = _a.multiple;
+    var t = icons.useTranslationContext('ImageDropzone').t;
     var handleDrop = React.useCallback(function (accepted) {
         if (!handleFiles) {
             return;
@@ -2830,7 +2832,7 @@ var ImageDropzone = function (_a) {
             React__default["default"].createElement("div", { className: 'rfu-dropzone__inner' },
                 React__default["default"].createElement("svg", { height: '41', viewBox: '0 0 41 41', width: '41', xmlns: 'http://www.w3.org/2000/svg' },
                     React__default["default"].createElement("path", { d: 'M40.517 28.002V3.997c0-2.197-1.808-3.992-4.005-3.992H12.507a4.004 4.004 0 0 0-3.992 3.993v24.004a4.004 4.004 0 0 0 3.992 3.993h24.005c2.197 0 4.005-1.795 4.005-3.993zm-22.002-7.997l4.062 5.42 5.937-7.423 7.998 10H12.507l6.008-7.997zM.517 8.003V36c0 2.198 1.795 4.005 3.993 4.005h27.997V36H4.51V8.002H.517z', fill: '#000', fillRule: 'nonzero' })),
-                React__default["default"].createElement("p", null, "Drag your files here to add to your post"))),
+                React__default["default"].createElement("p", null, t('Drag your files here to add to your post')))),
         children));
 };
 
@@ -3334,7 +3336,7 @@ var Item$1 = /*#__PURE__*/React__default["default"].forwardRef(function Item(pro
     style: style
   }, /*#__PURE__*/React__default["default"].createElement("a", {
     href: "",
-    onClick: onClickHandler,
+    onClick: handleClick,
     onFocus: handleSelect,
     onMouseEnter: handleSelect,
     ref: innerRef
@@ -25319,11 +25321,11 @@ var List = function List(_ref) {
   var SuggestionHeader = PropHeader || AutocompleteSuggestionHeader || DefaultSuggestionListHeader;
   var _useState = React.useState(undefined),
     _useState2 = _slicedToArray__default["default"](_useState, 2),
-    selectedItem = _useState2[0],
-    setSelectedItem = _useState2[1];
+    selectedItemIndex = _useState2[0],
+    setSelectedItemIndex = _useState2[1];
   var itemsRef = [];
   var isSelected = function isSelected(item) {
-    return selectedItem === values.findIndex(function (value) {
+    return selectedItemIndex === values.findIndex(function (value) {
       return getId(value) === getId(item);
     });
   };
@@ -25354,32 +25356,30 @@ var List = function List(_ref) {
   }, [modifyText, findItemIndex]);
   var selectItem = React.useCallback(function (item) {
     var index = findItemIndex(item);
-    setSelectedItem(index);
+    setSelectedItemIndex(index);
   }, [findItemIndex]);
   var handleKeyDown = React.useCallback(function (event) {
     if (event.key === 'ArrowUp') {
-      setSelectedItem(function (prevSelected) {
+      setSelectedItemIndex(function (prevSelected) {
         if (prevSelected === undefined) return 0;
-        var newID = prevSelected === 0 ? values.length - 1 : prevSelected - 1;
-        dropdownScroll(itemsRef[newID]);
-        return newID;
+        var newIndex = prevSelected === 0 ? values.length - 1 : prevSelected - 1;
+        dropdownScroll(itemsRef[newIndex]);
+        return newIndex;
       });
     }
     if (event.key === 'ArrowDown') {
-      setSelectedItem(function (prevSelected) {
+      setSelectedItemIndex(function (prevSelected) {
         if (prevSelected === undefined) return 0;
-        var newID = prevSelected === values.length - 1 ? 0 : prevSelected + 1;
-        dropdownScroll(itemsRef[newID]);
-        return newID;
+        var newIndex = prevSelected === values.length - 1 ? 0 : prevSelected + 1;
+        dropdownScroll(itemsRef[newIndex]);
+        return newIndex;
       });
     }
-    if ((event.key === 'Enter' || event.key === 'Tab') && selectedItem !== undefined) {
-      handleClick(event);
+    if ((event.key === 'Enter' || event.key === 'Tab') && selectedItemIndex !== undefined) {
+      handleClick(event, values[selectedItemIndex]);
     }
     return null;
-  }, [selectedItem, values] // eslint-disable-line
-  );
-
+  }, [selectedItemIndex, values]);
   React.useEffect(function () {
     document.addEventListener('keydown', handleKeyDown, false);
     return function () {
@@ -27442,9 +27442,7 @@ var useCommandTrigger = function () {
                 })
                     .map(function (commandData) {
                     var translatedCommandData = {
-                        name: t("".concat(commandData.name, "-command-name"), {
-                            defaultValue: commandData.name,
-                        }),
+                        name: commandData.name,
                     };
                     if (commandData.args)
                         translatedCommandData.args = t("".concat(commandData.name, "-command-args"), {
@@ -30011,7 +30009,7 @@ var UnMemoizedChannel = function (props) {
 };
 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, enrichURLForPreviewConfig = props.enrichURLForPreviewConfig, _c = props.initializeOnMount, initializeOnMount = _c === void 0 ? true : _c, _d = props.LoadingErrorIndicator, LoadingErrorIndicator$1 = _d === void 0 ? LoadingErrorIndicator : _d, _e = props.LoadingIndicator, LoadingIndicator = _e === void 0 ? LoadingChannel : _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 acceptedFiles = props.acceptedFiles, activeUnreadHandler = props.activeUnreadHandler, channel = props.channel, children = props.children, doDeleteMessageRequest = props.doDeleteMessageRequest, doMarkReadRequest = props.doMarkReadRequest, doSendMessageRequest = props.doSendMessageRequest, doUpdateMessageRequest = props.doUpdateMessageRequest, _b = props.dragAndDropWindow, dragAndDropWindow = _b === void 0 ? false : _b, enrichURLForPreviewConfig = props.enrichURLForPreviewConfig, _c = props.initializeOnMount, initializeOnMount = _c === void 0 ? true : _c, _d = props.LoadingErrorIndicator, LoadingErrorIndicator$1 = _d === void 0 ? LoadingErrorIndicator : _d, _e = props.LoadingIndicator, LoadingIndicator = _e === void 0 ? LoadingChannel : _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 = icons.useChatContext('Channel'), client = _h.client, customClasses = _h.customClasses, latestMessageDatesByChannels = _h.latestMessageDatesByChannels, mutes = _h.mutes, theme = _h.theme;
     var t = icons.useTranslationContext('Channel').t;
     var _j = useChannelContainerClasses({ customClasses: customClasses }), channelClass = _j.channelClass, chatClass = _j.chatClass, chatContainerClass = _j.chatContainerClass, windowsEmojiClass = _j.windowsEmojiClass;
@@ -30348,6 +30346,28 @@ var ChannelInner = function (props) {
             }
         });
     }); };
+    var deleteMessage = React.useCallback(function (message) { return icons.__awaiter(void 0, void 0, void 0, function () {
+        var deletedMessage, result;
+        return icons.__generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!(message === null || message === void 0 ? void 0 : message.id)) {
+                        throw new Error('Cannot delete a message - missing message ID.');
+                    }
+                    if (!doDeleteMessageRequest) return [3 /*break*/, 2];
+                    return [4 /*yield*/, doDeleteMessageRequest(message)];
+                case 1:
+                    deletedMessage = _a.sent();
+                    return [3 /*break*/, 4];
+                case 2: return [4 /*yield*/, client.deleteMessage(message.id)];
+                case 3:
+                    result = _a.sent();
+                    deletedMessage = result.message;
+                    _a.label = 4;
+                case 4: return [2 /*return*/, deletedMessage];
+            }
+        });
+    }); }, [client, doDeleteMessageRequest]);
     var updateMessage = function (updatedMessage) {
         // add the message to the local channel state
         channel.state.addMessageSorted(updatedMessage, true);
@@ -30531,6 +30551,7 @@ var ChannelInner = function (props) {
     var channelActionContextValue = React.useMemo(function () { return ({
         addNotification: addNotification,
         closeThread: closeThread,
+        deleteMessage: deleteMessage,
         dispatch: dispatch,
         editMessage: editMessage,
         jumpToLatestMessage: jumpToLatestMessage,
@@ -30549,6 +30570,7 @@ var ChannelInner = function (props) {
         updateMessage: updateMessage,
     }); }, [
         channel.cid,
+        deleteMessage,
         enrichURLForPreviewConfig === null || enrichURLForPreviewConfig === void 0 ? void 0 : enrichURLForPreviewConfig.findURLFn,
         enrichURLForPreviewConfig === null || enrichURLForPreviewConfig === void 0 ? void 0 : enrichURLForPreviewConfig.onLinkPreviewDismissed,
         loadMore,
@@ -31092,8 +31114,7 @@ var RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS = 5000;
 var MIN_RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS = 2000;
 var usePaginatedChannels = function (client, filters, sort, options, activeChannelHandler, recoveryThrottleIntervalMs) {
     if (recoveryThrottleIntervalMs === void 0) { recoveryThrottleIntervalMs = RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS; }
-    var _a = icons.useChatContext('usePaginatedChannels').channelsQueryState, error = _a.error, setError = _a.setError, setQueryInProgress = _a.setQueryInProgress;
-    var _b = React.useState([]), channels = _b[0], setChannels = _b[1];
+    var _a = icons.useChatContext('usePaginatedChannels'), channels = _a.channels, _b = _a.channelsQueryState, error = _b.error, setError = _b.setError, setQueryInProgress = _b.setQueryInProgress, setChannels = _a.setChannels;
     var _c = React.useState(true), hasNextPage = _c[0], setHasNextPage = _c[1];
     var lastRecoveryTimestamp = React.useRef();
     var recoveryThrottleInterval = recoveryThrottleIntervalMs < MIN_RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS
@@ -31173,6 +31194,7 @@ var usePaginatedChannels = function (client, filters, sort, options, activeChann
     React.useEffect(function () {
         queryChannels('reload');
     }, [filterString, sortString]);
+    // FIXME: state refactor (breaking change) is needed - do not forward `channels` and `setChannel`
     return {
         channels: channels,
         hasNextPage: hasNextPage,
@@ -31774,13 +31796,15 @@ var deprecationAndReplacementWarning = function (pairs, component) {
 };
 
 var UnMemoizedLoadMoreButton = function (_a) {
-    var _b = _a.children, children = _b === void 0 ? 'Load more' : _b, isLoading = _a.isLoading, onClick = _a.onClick, refreshing = _a.refreshing;
+    var children = _a.children, isLoading = _a.isLoading, onClick = _a.onClick, refreshing = _a.refreshing;
+    var t = icons.useTranslationContext('UnMemoizedLoadMoreButton').t;
+    var childrenOrDefaultString = children !== null && children !== void 0 ? children : t('Load more');
     var loading = typeof isLoading !== 'undefined' ? isLoading : refreshing;
     React.useEffect(function () {
         deprecationAndReplacementWarning([[{ refreshing: refreshing }, { isLoading: isLoading }]], 'LoadMoreButton');
     }, []);
     return (React__default["default"].createElement("div", { className: 'str-chat__load-more-button' },
-        React__default["default"].createElement("button", { "aria-label": 'Load More Channels', className: 'str-chat__load-more-button__button str-chat__cta-button', "data-testid": 'load-more-button', disabled: loading, onClick: onClick }, loading ? React__default["default"].createElement(LoadingIndicator, null) : children)));
+        React__default["default"].createElement("button", { "aria-label": 'Load More Channels', className: 'str-chat__load-more-button__button str-chat__cta-button', "data-testid": 'load-more-button', disabled: loading, onClick: onClick }, loading ? React__default["default"].createElement(LoadingIndicator, null) : childrenOrDefaultString)));
 };
 var LoadMoreButton = React__default["default"].memo(UnMemoizedLoadMoreButton);
 
@@ -31925,7 +31949,7 @@ var UnMemoizedChannelList = function (props) {
  */
 var ChannelList = React__default["default"].memo(UnMemoizedChannelList);
 
-var version = '11.0.0-rc.3';
+var version = '11.0.0-rc.4';
 
 var useChat = function (_a) {
     var _b, _c;
@@ -31935,10 +31959,11 @@ var useChat = function (_a) {
         tDateTimeParser: icons.defaultDateTimeParser,
         userLanguage: 'en',
     }), translators = _e[0], setTranslators = _e[1];
-    var _f = React.useState(), channel = _f[0], setChannel = _f[1];
-    var _g = React.useState([]), mutes = _g[0], setMutes = _g[1];
-    var _h = React.useState(initialNavOpen), navOpen = _h[0], setNavOpen = _h[1];
-    var _j = React.useState({}), latestMessageDatesByChannels = _j[0], setLatestMessageDatesByChannels = _j[1];
+    var _f = React.useState([]), channels = _f[0], setChannels = _f[1];
+    var _g = React.useState(), channel = _g[0], setChannel = _g[1];
+    var _h = React.useState([]), mutes = _h[0], setMutes = _h[1];
+    var _j = React.useState(initialNavOpen), navOpen = _j[0], setNavOpen = _j[1];
+    var _k = React.useState({}), latestMessageDatesByChannels = _k[0], setLatestMessageDatesByChannels = _k[1];
     var clientMutes = ((_b = client.user) === null || _b === void 0 ? void 0 : _b.mutes) || [];
     var closeMobileNav = function () { return setNavOpen(false); };
     var openMobileNav = function () { return setTimeout(function () { return setNavOpen(true); }, 100); };
@@ -32009,6 +32034,7 @@ var useChat = function (_a) {
     }, [(_c = client.user) === null || _c === void 0 ? void 0 : _c.id]);
     return {
         channel: channel,
+        channels: channels,
         closeMobileNav: closeMobileNav,
         getAppSettings: getAppSettings,
         latestMessageDatesByChannels: latestMessageDatesByChannels,
@@ -32016,13 +32042,14 @@ var useChat = function (_a) {
         navOpen: navOpen,
         openMobileNav: openMobileNav,
         setActiveChannel: setActiveChannel,
+        setChannels: setChannels,
         translators: translators,
     };
 };
 
 var useCreateChatContext = function (value) {
     var _a;
-    var channel = value.channel, channelsQueryState = value.channelsQueryState, client = value.client, closeMobileNav = value.closeMobileNav, customClasses = value.customClasses, getAppSettings = value.getAppSettings, latestMessageDatesByChannels = value.latestMessageDatesByChannels, mutes = value.mutes, navOpen = value.navOpen, openMobileNav = value.openMobileNav, setActiveChannel = value.setActiveChannel, theme = value.theme, themeVersion = value.themeVersion, useImageFlagEmojisOnWindows = value.useImageFlagEmojisOnWindows;
+    var channel = value.channel, channels = value.channels, channelsQueryState = value.channelsQueryState, client = value.client, closeMobileNav = value.closeMobileNav, customClasses = value.customClasses, getAppSettings = value.getAppSettings, latestMessageDatesByChannels = value.latestMessageDatesByChannels, mutes = value.mutes, navOpen = value.navOpen, openMobileNav = value.openMobileNav, setActiveChannel = value.setActiveChannel, setChannels = value.setChannels, theme = value.theme, themeVersion = value.themeVersion, useImageFlagEmojisOnWindows = value.useImageFlagEmojisOnWindows;
     var channelCid = channel === null || channel === void 0 ? void 0 : channel.cid;
     var channelsQueryError = channelsQueryState.error;
     var channelsQueryInProgress = channelsQueryState.queryInProgress;
@@ -32030,6 +32057,7 @@ var useCreateChatContext = function (value) {
     var mutedUsersLength = mutes.length;
     var chatContext = React.useMemo(function () { return ({
         channel: channel,
+        channels: channels,
         channelsQueryState: channelsQueryState,
         client: client,
         closeMobileNav: closeMobileNav,
@@ -32040,6 +32068,7 @@ var useCreateChatContext = function (value) {
         navOpen: navOpen,
         openMobileNav: openMobileNav,
         setActiveChannel: setActiveChannel,
+        setChannels: setChannels,
         theme: theme,
         themeVersion: themeVersion,
         useImageFlagEmojisOnWindows: useImageFlagEmojisOnWindows,
@@ -32047,10 +32076,12 @@ var useCreateChatContext = function (value) {
         channelCid,
         channelsQueryError,
         channelsQueryInProgress,
+        channels,
         clientValues,
         getAppSettings,
         mutedUsersLength,
         navOpen,
+        setChannels,
     ]);
     return chatContext;
 };
@@ -32109,7 +32140,7 @@ var useCustomStyles = function (customStyles) {
  */
 var Chat = function (props) {
     var children = props.children, client = props.client, customClasses = props.customClasses, customStyles = props.customStyles, _a = props.darkMode, darkMode = _a === void 0 ? false : _a, defaultLanguage = props.defaultLanguage, i18nInstance = props.i18nInstance, _b = props.initialNavOpen, initialNavOpen = _b === void 0 ? true : _b, _c = props.theme, theme = _c === void 0 ? 'messaging light' : _c, _d = props.useImageFlagEmojisOnWindows, useImageFlagEmojisOnWindows = _d === void 0 ? false : _d;
-    var _e = useChat({ client: client, defaultLanguage: defaultLanguage, i18nInstance: i18nInstance, initialNavOpen: initialNavOpen }), channel = _e.channel, closeMobileNav = _e.closeMobileNav, getAppSettings = _e.getAppSettings, latestMessageDatesByChannels = _e.latestMessageDatesByChannels, mutes = _e.mutes, navOpen = _e.navOpen, openMobileNav = _e.openMobileNav, setActiveChannel = _e.setActiveChannel, translators = _e.translators;
+    var _e = useChat({ client: client, defaultLanguage: defaultLanguage, i18nInstance: i18nInstance, initialNavOpen: initialNavOpen }), channel = _e.channel, channels = _e.channels, closeMobileNav = _e.closeMobileNav, getAppSettings = _e.getAppSettings, latestMessageDatesByChannels = _e.latestMessageDatesByChannels, mutes = _e.mutes, navOpen = _e.navOpen, openMobileNav = _e.openMobileNav, setActiveChannel = _e.setActiveChannel, setChannels = _e.setChannels, translators = _e.translators;
     var channelsQueryState = useChannelsQueryState();
     var themeVersion = typeof window !== 'undefined'
         ? (window
@@ -32120,6 +32151,7 @@ var Chat = function (props) {
     useCustomStyles(darkMode ? darkModeTheme : customStyles);
     var chatContextValue = useCreateChatContext({
         channel: channel,
+        channels: channels,
         channelsQueryState: channelsQueryState,
         client: client,
         closeMobileNav: closeMobileNav,
@@ -32130,6 +32162,7 @@ var Chat = function (props) {
         navOpen: navOpen,
         openMobileNav: openMobileNav,
         setActiveChannel: setActiveChannel,
+        setChannels: setChannels,
         theme: theme,
         themeVersion: themeVersion,
         useImageFlagEmojisOnWindows: useImageFlagEmojisOnWindows,
@@ -32327,11 +32360,11 @@ function useActionHandler(message) {
 var useDeleteHandler = function (message, notifications) {
     if (notifications === void 0) { notifications = {}; }
     var getErrorNotification = notifications.getErrorNotification, notify = notifications.notify;
-    var updateMessage = icons.useChannelActionContext('useDeleteHandler').updateMessage;
+    var _a = icons.useChannelActionContext('useDeleteHandler'), deleteMessage = _a.deleteMessage, updateMessage = _a.updateMessage;
     var client = icons.useChatContext('useDeleteHandler').client;
     var t = icons.useTranslationContext('useDeleteHandler').t;
     return function (event) { return icons.__awaiter(void 0, void 0, void 0, function () {
-        var data, errorMessage;
+        var deletedMessage, errorMessage;
         return icons.__generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -32342,10 +32375,10 @@ var useDeleteHandler = function (message, notifications) {
                     _a.label = 1;
                 case 1:
                     _a.trys.push([1, 3, , 4]);
-                    return [4 /*yield*/, client.deleteMessage(message.id)];
+                    return [4 /*yield*/, deleteMessage(message)];
                 case 2:
-                    data = _a.sent();
-                    updateMessage(data.message);
+                    deletedMessage = _a.sent();
+                    updateMessage(deletedMessage);
                     return [3 /*break*/, 4];
                 case 3:
                     _a.sent();

package/dist/version.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "11.0.0-rc.3";
+export declare const version = "11.0.0-rc.4";
 //# sourceMappingURL=version.d.ts.map

package/dist/version.js

@@ -1 +1 @@
-export var version = '11.0.0-rc.3';
+export var version = '11.0.0-rc.4';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stream-chat-react",
-  "version": "11.0.0-rc.3",
+  "version": "11.0.0-rc.4",
   "description": "React components to create chat conversations or livestream style chat",
   "author": "GetStream",
   "homepage": "https://getstream.io/chat/",
@@ -53,7 +53,7 @@
   "dependencies": {
     "@braintree/sanitize-url": "^6.0.4",
     "@popperjs/core": "^2.11.5",
-    "@stream-io/stream-chat-css": "^4.0.0-rc.4",
+    "@stream-io/stream-chat-css": "^4.0.0-rc.5",
     "clsx": "^2.0.0",
     "dayjs": "^1.10.4",
     "emoji-regex": "^9.2.0",