stream-chat-react 8.1.3-beta.1 → 9.0.0

package/dist/stories/{connected-user.stories.d.ts → add-message.stories.d.ts}

@@ -1,4 +1,4 @@
 import '@stream-io/stream-chat-css/dist/css/index.css';
 export declare const User1: () => JSX.Element;
 export declare const User2: () => JSX.Element;
-//# sourceMappingURL=connected-user.stories.d.ts.map
+//# sourceMappingURL=add-message.stories.d.ts.map

package/dist/stories/add-message.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"add-message.stories.d.ts","sourceRoot":"","sources":["../../src/stories/add-message.stories.tsx"],"names":[],"mappings":"AACA,OAAO,+CAA+C,CAAC;AA8DvD,eAAO,MAAM,KAAK,mBAUjB,CAAC;AAEF,eAAO,MAAM,KAAK,mBAUjB,CAAC"}

package/dist/stories/{connected-user.stories.js → add-message.stories.js}

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import '@stream-io/stream-chat-css/dist/css/index.css';
 import React from 'react';
-import { Channel, ChannelHeader, ChannelList, MessageList, useChannelStateContext, Window, } from '../index';
+import { Channel, ChannelHeader, ChannelList, MessageList, Thread, useChannelStateContext, Window, } from '../index';
 import { ConnectedUser } from './utils';
 var channelId = import.meta.env.E2E_ADD_MESSAGE_CHANNEL;
 if (!channelId || typeof channelId !== 'string') {
@@ -22,12 +22,13 @@ var sort = { last_updated: 1 };
 var WrappedConnectedUser = function (_a) {
     var token = _a.token, userId = _a.userId;
     return (React.createElement(ConnectedUser, { token: token, userId: userId },
-        React.createElement(ChannelList, { filters: { members: { $in: [userId] } }, sort: sort }),
+        React.createElement(ChannelList, { filters: { id: { $eq: 'add-message' }, members: { $in: [userId] } }, setActiveChannelOnMount: false, sort: sort }),
         React.createElement(Channel, null,
             React.createElement(Window, null,
                 React.createElement(ChannelHeader, null),
                 React.createElement(MessageList, null),
-                React.createElement(Controls, null)))));
+                React.createElement(Controls, null)),
+            React.createElement(Thread, null))));
 };
 export var User1 = function () {
     var userId = import.meta.env.E2E_TEST_USER_1;

package/dist/stories/jump-to-message.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"jump-to-message.stories.d.ts","sourceRoot":"","sources":["../../src/stories/jump-to-message.stories.tsx"],"names":[],"mappings":"AAWA,OAAO,+CAA+C,CAAC;AA0CvD,eAAO,MAAM,wBAAwB,mBAapC,CAAC;AAEF,eAAO,MAAM,4BAA4B,mBAaxC,CAAC"}
+{"version":3,"file":"jump-to-message.stories.d.ts","sourceRoot":"","sources":["../../src/stories/jump-to-message.stories.tsx"],"names":[],"mappings":"AAWA,OAAO,+CAA+C,CAAC;AAkCvD,eAAO,MAAM,wBAAwB,mBAYpC,CAAC;AAEF,eAAO,MAAM,4BAA4B,mBAYxC,CAAC"}

package/dist/stories/jump-to-message.stories.js

@@ -62,9 +62,7 @@ var JumpToMessage = function () {
             });
         }); } }, "Jump to message '29'"));
 };
-var StyleFix = function () { return (React.createElement("style", null, "\n    .str-chat {\n      height: 700px\n    }\n  ")); };
 export var JumpInRegularMessageList = function () { return (React.createElement("div", null,
-    React.createElement(StyleFix, null),
     React.createElement(ConnectedUser, { token: userToken, userId: userId },
         React.createElement(ChannelList, { filters: { id: { $eq: channelId } } }),
         React.createElement(Channel, null,
@@ -72,7 +70,6 @@ export var JumpInRegularMessageList = function () { return (React.createElement(
             React.createElement(Window, null,
                 React.createElement(MessageList, null)))))); };
 export var JumpInVirtualizedMessageList = function () { return (React.createElement("div", null,
-    React.createElement(StyleFix, null),
     React.createElement(ConnectedUser, { token: userToken, userId: userId },
         React.createElement(ChannelList, { filters: { id: { $eq: channelId } } }),
         React.createElement(Channel, null,

package/dist/stories/mark-read.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mark-read.stories.d.ts","sourceRoot":"","sources":["../../src/stories/mark-read.stories.tsx"],"names":[],"mappings":"AACA,OAAO,+CAA+C,CAAC;AA2FvD,eAAO,MAAM,KAAK,mBAUjB,CAAC;AAEF,eAAO,MAAM,KAAK,mBAUjB,CAAC"}
+{"version":3,"file":"mark-read.stories.d.ts","sourceRoot":"","sources":["../../src/stories/mark-read.stories.tsx"],"names":[],"mappings":"AACA,OAAO,+CAA+C,CAAC;AA6DvD,eAAO,MAAM,KAAK,mBAUjB,CAAC;AAEF,eAAO,MAAM,KAAK,mBAUjB,CAAC"}

package/dist/stories/mark-read.stories.js

@@ -1,19 +1,8 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import '@stream-io/stream-chat-css/dist/css/index.css';
 import React from 'react';
-import { v4 as uuid } from 'uuid';
-import { Channel, ChannelHeader, ChannelList, ChannelPreview, MessageList, useChannelStateContext, Window, } from '../index';
+import { nanoid } from 'nanoid';
+import { Channel, ChannelHeader, ChannelList, MessageList, useChannelStateContext, Window, } from '../index';
 import { ConnectedUser } from './utils';
 var channelId = import.meta.env.E2E_ADD_MESSAGE_CHANNEL;
 if (!channelId || typeof channelId !== 'string') {
@@ -25,26 +14,16 @@ var Controls = function () {
         React.createElement("button", { "data-testid": 'truncate', onClick: function () { return channel.truncate(); } }, "Truncate"),
         React.createElement("button", { "data-testid": 'add-message', onClick: function () {
                 return channel.sendMessage({
-                    text: uuid(),
+                    text: nanoid(),
                 });
             } }, "Add message")));
 };
 // Sort in reverse order to avoid auto-selecting unread channel
 var sort = { last_updated: 1 };
-var CustomPreviewUI = function (_a) {
-    var _b, _c;
-    var activeChannel = _a.activeChannel, channel = _a.channel, displayTitle = _a.displayTitle, setActiveChannel = _a.setActiveChannel, unread = _a.unread, watchers = _a.watchers;
-    var avatarName = displayTitle || ((_c = (_b = channel.state.messages[channel.state.messages.length - 1]) === null || _b === void 0 ? void 0 : _b.user) === null || _c === void 0 ? void 0 : _c.id);
-    return (React.createElement("div", { "data-testid": "channel-" + channel.id, onClick: function () { return setActiveChannel === null || setActiveChannel === void 0 ? void 0 : setActiveChannel(channel, watchers); }, style: { background: channel.cid === (activeChannel === null || activeChannel === void 0 ? void 0 : activeChannel.cid) ? '#fff' : 'initial' } },
-        React.createElement("span", null, avatarName),
-        " || ",
-        React.createElement("span", { "data-testid": 'unread-count' }, unread)));
-};
-var CustomPreview = function (props) { return (React.createElement(ChannelPreview, __assign({}, props, { Preview: CustomPreviewUI }))); };
 var WrappedConnectedUser = function (_a) {
     var token = _a.token, userId = _a.userId;
     return (React.createElement(ConnectedUser, { token: token, userId: userId },
-        React.createElement(ChannelList, { filters: { members: { $in: [userId] }, name: { $autocomplete: 'mr-channel' } }, Preview: CustomPreview, setActiveChannelOnMount: false, sort: sort }),
+        React.createElement(ChannelList, { filters: { members: { $in: [userId] }, name: { $autocomplete: 'mr-channel' } }, setActiveChannelOnMount: false, sort: sort }),
         React.createElement(Channel, null,
             React.createElement(Window, null,
                 React.createElement(ChannelHeader, null),

package/dist/stories/navigate-long-message-lists.stories.d.ts

@@ -0,0 +1,4 @@
+import '@stream-io/stream-chat-css/dist/css/index.css';
+export declare const User1: () => JSX.Element;
+export declare const User2: () => JSX.Element;
+//# sourceMappingURL=navigate-long-message-lists.stories.d.ts.map

package/dist/stories/navigate-long-message-lists.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigate-long-message-lists.stories.d.ts","sourceRoot":"","sources":["../../src/stories/navigate-long-message-lists.stories.tsx"],"names":[],"mappings":"AACA,OAAO,+CAA+C,CAAC;AAgKvD,eAAO,MAAM,KAAK,mBAQjB,CAAC;AAEF,eAAO,MAAM,KAAK,mBAQjB,CAAC"}

package/dist/stories/navigate-long-message-lists.stories.js

@@ -0,0 +1,167 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import '@stream-io/stream-chat-css/dist/css/index.css';
+import React, { useEffect } from 'react';
+import { Channel, ChannelHeader, ChannelList, MessageList, Thread, useChannelActionContext, useChannelStateContext, useChatContext, Window, } from '../index';
+import { ConnectedUser } from './utils';
+var user1Id = import.meta.env.E2E_TEST_USER_1;
+var user1Token = import.meta.env.E2E_TEST_USER_1_TOKEN;
+var user2Id = import.meta.env.E2E_TEST_USER_2;
+var user2Token = import.meta.env.E2E_TEST_USER_2_TOKEN;
+var channelId = import.meta.env.E2E_LONG_MESSAGE_LISTS_CHANNEL;
+if (!channelId || typeof channelId !== 'string') {
+    throw new Error('expected ADD_MESSAGE_CHANNEL');
+}
+var OtherUserControlButtons = function () {
+    var client = useChatContext().client;
+    var _a = useChannelStateContext(), channel = _a.channel, threadMessages = _a.threadMessages;
+    var lastMessage = channel.state.messages.slice(-1)[0];
+    return (React.createElement(React.Fragment, null,
+        React.createElement("button", { "data-testid": 'receive-reply', onClick: function () {
+                return channel.sendMessage({
+                    parent_id: lastMessage.id,
+                    text: 'Reply back',
+                });
+            } }, "Receive reply"),
+        React.createElement("button", { "data-testid": 'delete-other-last-reply', onClick: function () { return __awaiter(void 0, void 0, void 0, function () {
+                var lastReply;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            lastReply = threadMessages === null || threadMessages === void 0 ? void 0 : threadMessages.slice(-1)[0];
+                            if (!lastReply) return [3 /*break*/, 2];
+                            return [4 /*yield*/, client.deleteMessage(lastReply.id, true)];
+                        case 1:
+                            _a.sent();
+                            _a.label = 2;
+                        case 2: return [2 /*return*/];
+                    }
+                });
+            }); } }, "Delete other user's last reply")));
+};
+// Sort in reverse order to avoid auto-selecting unread channel
+var sort = { last_updated: 1 };
+var Controls = function () {
+    var client = useChatContext().client;
+    var threadMessages = useChannelStateContext().threadMessages;
+    return (React.createElement("div", null,
+        React.createElement("button", { "data-testid": 'delete-last-reply', onClick: function () { return __awaiter(void 0, void 0, void 0, function () {
+                var lastReply;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            lastReply = threadMessages === null || threadMessages === void 0 ? void 0 : threadMessages.slice(-1)[0];
+                            if (!lastReply) return [3 /*break*/, 2];
+                            return [4 /*yield*/, client.deleteMessage(lastReply.id, true)];
+                        case 1:
+                            _a.sent();
+                            _a.label = 2;
+                        case 2: return [2 /*return*/];
+                    }
+                });
+            }); } }, "Delete last reply")));
+};
+var SetThreadOpen = function () {
+    var openThread = useChannelActionContext().openThread;
+    var messages = useChannelStateContext().messages;
+    useEffect(function () {
+        if (messages) {
+            var lastMsg = messages.slice(-1)[0];
+            openThread(lastMsg, { preventDefault: function () { return null; } });
+        }
+    }, [messages]);
+    return null;
+};
+var OtherUserControls = function () {
+    var theOtherUserCredentials = document.location.search.match('user1')
+        ? { token: user2Token, userId: user2Id }
+        : { token: user1Token, userId: user1Id };
+    return (React.createElement("div", { className: theOtherUserCredentials.userId },
+        React.createElement("style", null, "\n      ." + theOtherUserCredentials.userId + " .str-chat-channel {\n        max-height: 30px;\n        display: inline-block;\n      }\n      ." + theOtherUserCredentials.userId + " .str-chat__container {\n        height: 30px;\n      }\n\n      ." + theOtherUserCredentials.userId + " .messaging.str-chat .str-chat__thread {\n        display: none;\n      }\n      "),
+        React.createElement(ConnectedUser, __assign({}, theOtherUserCredentials),
+            React.createElement("div", { style: { display: 'none' } },
+                React.createElement(ChannelList, { customActiveChannel: channelId, filters: { id: { $eq: channelId }, members: { $in: [theOtherUserCredentials.userId] } }, setActiveChannelOnMount: true, sort: sort })),
+            React.createElement("div", { style: { height: '30px' } },
+                React.createElement(Channel, null,
+                    React.createElement(SetThreadOpen, null),
+                    React.createElement(OtherUserControlButtons, null),
+                    React.createElement(Thread, null))))));
+};
+var WrappedConnectedUser = function (_a) {
+    var token = _a.token, userId = _a.userId;
+    return (React.createElement("div", { style: { display: 'flex', flexDirection: 'column' } },
+        React.createElement("div", { className: userId },
+            React.createElement(ConnectedUser, { token: token, userId: userId },
+                React.createElement(ChannelList, { filters: { id: { $eq: channelId }, members: { $in: [userId] } }, setActiveChannelOnMount: false, sort: sort }),
+                React.createElement(Channel, null,
+                    React.createElement(Window, null,
+                        React.createElement(ChannelHeader, null),
+                        React.createElement(MessageList, null),
+                        React.createElement(Controls, null)),
+                    React.createElement(Thread, null)))),
+        React.createElement(OtherUserControls, null)));
+};
+export var User1 = function () {
+    if (!user1Id || typeof user1Id !== 'string') {
+        throw new Error('expected TEST_USER_1');
+    }
+    if (!user1Token || typeof user1Token !== 'string') {
+        throw new Error('expected TEST_USER_1_TOKEN');
+    }
+    return React.createElement(WrappedConnectedUser, { token: user1Token, userId: user1Id });
+};
+export var User2 = function () {
+    if (!user2Id || typeof user2Id !== 'string') {
+        throw new Error('expected TEST_USER_2');
+    }
+    if (!user2Token || typeof user2Token !== 'string') {
+        throw new Error('expected TEST_USER_2_TOKEN');
+    }
+    return React.createElement(WrappedConnectedUser, { token: user2Token, userId: user2Id });
+};

package/dist/utils.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { nanoid } from 'nanoid';
 import type { UserResponse } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from './types/types';
 export declare const isOnlyEmojis: (text?: string | undefined) => boolean;
@@ -19,6 +20,9 @@ export declare type RenderTextOptions = {
 };
 export declare const renderText: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(text?: string | undefined, mentioned_users?: UserResponse<StreamChatGenerics>[] | undefined, options?: RenderTextOptions) => JSX.Element | null;
 export declare function escapeRegExp(text: string): string;
-export declare function generateRandomId(): string;
+/**
+ * @deprecated will be removed in the next major release
+ */
+export declare const generateRandomId: typeof nanoid;
 export declare const getWholeChar: (str: string, i: number) => string;
 //# sourceMappingURL=utils.d.ts.map

package/dist/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AASjD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,eAAe,CAAC;AAE/D,eAAO,MAAM,YAAY,wCAOxB,CAAC;AAoBF,eAAO,MAAM,kBAAkB,YAAa,MAAM,sBAajD,CAAC;AAEF,eAAO,MAAM,iBAAiB,YAAa,MAAM,qBAIhD,CAAC;AAyBF,eAAO,MAAM,iBAAiB,EAAE;IAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,KAAK,CAAC,WAAW,CAAA;CAwBtE,CAAC;AAEF,eAAO,MAAM,mBAAmB,gDAe/B,CAAC;AAEF,eAAO,MAAM,sBAAsB,2LAmClC,CAAC;AAEF,oBAAY,YAAY,CACtB,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,cAAc,EAAE,YAAY,CAAC,kBAAkB,CAAC,CAAC;CAClD,CAAC;AAMF,oBAAY,iBAAiB,GAAG;IAC9B,uBAAuB,CAAC,EAAE;QACxB,CAAC,QAAQ,EAAE,MAAM,GAAG,KAAK,CAAC,WAAW,CAAC;KACvC,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,UAAU,4LAKZ,iBAAiB,uBAiE3B,CAAC;AAEF,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,UAExC;AAOD,wBAAgB,gBAAgB,WAG/B;AAGD,eAAO,MAAM,YAAY,QAAS,MAAM,KAAK,MAAM,WAgClD,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAGjD,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAOhC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,eAAe,CAAC;AAE/D,eAAO,MAAM,YAAY,wCAOxB,CAAC;AAoBF,eAAO,MAAM,kBAAkB,YAAa,MAAM,sBAajD,CAAC;AAEF,eAAO,MAAM,iBAAiB,YAAa,MAAM,qBAIhD,CAAC;AAyBF,eAAO,MAAM,iBAAiB,EAAE;IAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,KAAK,CAAC,WAAW,CAAA;CAwBtE,CAAC;AAEF,eAAO,MAAM,mBAAmB,gDAe/B,CAAC;AAEF,eAAO,MAAM,sBAAsB,2LAmClC,CAAC;AAEF,oBAAY,YAAY,CACtB,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,cAAc,EAAE,YAAY,CAAC,kBAAkB,CAAC,CAAC;CAClD,CAAC;AAMF,oBAAY,iBAAiB,GAAG;IAC9B,uBAAuB,CAAC,EAAE;QACxB,CAAC,QAAQ,EAAE,MAAM,GAAG,KAAK,CAAC,WAAW,CAAC;KACvC,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,UAAU,4LAKZ,iBAAiB,uBAiE3B,CAAC;AAEF,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,UAExC;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,eAAS,CAAC;AAGvC,eAAO,MAAM,YAAY,QAAS,MAAM,KAAK,MAAM,WAgClD,CAAC"}

package/dist/utils.js

@@ -12,6 +12,7 @@ var __assign = (this && this.__assign) || function () {
 import React from 'react';
 import emojiRegex from 'emoji-regex';
 import * as linkify from 'linkifyjs';
+import { nanoid } from 'nanoid';
 //@ts-expect-error
 import findAndReplace from 'mdast-util-find-and-replace';
 import RootReactMarkdown from 'react-markdown';
@@ -174,14 +175,10 @@ export var renderText = function (text, mentioned_users, options) {
 export function escapeRegExp(text) {
     return text.replace(/[-[\]{}()*+?.,\\^$|#]/g, '\\$&');
 }
-function S4() {
-    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
-}
-// https://stackoverflow.com/a/6860916/2570866
-export function generateRandomId() {
-    // prettier-ignore
-    return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
-}
+/**
+ * @deprecated will be removed in the next major release
+ */
+export var generateRandomId = nanoid;
 // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/charAt#getting_whole_characters
 export var getWholeChar = function (str, i) {
     var code = str.charCodeAt(i);

package/dist/version.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "8.1.3-beta.1";
+export declare const version = "9.0.0";
 //# sourceMappingURL=version.d.ts.map

package/dist/version.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../src/version.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,iBAAiB,CAAC"}
+{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../src/version.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,UAAU,CAAC"}

package/dist/version.js

@@ -1 +1 @@
-export var version = '8.1.3-beta.1';
+export var version = '9.0.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stream-chat-react",
-  "version": "8.1.3-beta.1",
+  "version": "9.0.0",
   "description": "React components to create chat conversations or livestream style chat",
   "author": "GetStream",
   "homepage": "https://getstream.io/chat/",
@@ -41,6 +41,7 @@
     "lodash.throttle": "^4.1.1",
     "lodash.uniqby": "^4.7.0",
     "mdast-util-find-and-replace": "1.1.1",
+    "nanoid": "^3.3.4",
     "pretty-bytes": "^5.4.1",
     "prop-types": "^15.7.2",
     "react-fast-compare": "^3.2.0",
@@ -51,8 +52,7 @@
     "react-player": "^2.7.0",
     "react-textarea-autosize": "^8.3.0",
     "react-virtuoso": "^2.10.2",
-    "textarea-caret": "^3.1.0",
-    "uuid": "^8.3.1"
+    "textarea-caret": "^3.1.0"
   },
   "optionalDependencies": {
     "@stream-io/transliterate": "^1.5.5",
@@ -81,7 +81,7 @@
     "@commitlint/cli": "^16.2.3",
     "@commitlint/config-conventional": "^16.2.1",
     "@ladle/react": "^0.11.0",
-    "@playwright/test": "^1.20.0",
+    "@playwright/test": "^1.22.0",
     "@rollup/plugin-babel": "^5.2.1",
     "@rollup/plugin-image": "^2.1.1",
     "@rollup/plugin-json": "^4.1.0",
@@ -203,7 +203,8 @@
     "semantic-release": "semantic-release",
     "browse-examples": "ladle serve",
     "e2e": "playwright test",
-    "e2e-fixtures": "node e2e/fixtures.mjs"
+    "e2e-fixtures": "node e2e/fixtures.mjs",
+    "e2e-container": "./e2e/scripts/run_in_container.sh"
   },
   "resolutions": {
     "ast-types": "^0.14.0"

package/dist/stories/connected-user.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"connected-user.stories.d.ts","sourceRoot":"","sources":["../../src/stories/connected-user.stories.tsx"],"names":[],"mappings":"AACA,OAAO,+CAA+C,CAAC;AAwDvD,eAAO,MAAM,KAAK,mBAUjB,CAAC;AAEF,eAAO,MAAM,KAAK,mBAUjB,CAAC"}