stream-chat-react 8.1.1 → 8.1.3

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,9 +1,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import '@stream-io/stream-chat-css/dist/css/index.css';
 import React from 'react';
-import { StreamChat } from 'stream-chat';
-import { Channel, ChannelHeader, ChannelList, MessageList, useChannelStateContext, Window, } from '../index';
-import { apiKey, ConnectedUser } from './utils';
+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') {
     throw new Error('expected ADD_MESSAGE_CHANNEL');
@@ -20,16 +19,16 @@ var Controls = function () {
 };
 // Sort in reverse order to avoid auto-selecting unread channel
 var sort = { last_updated: 1 };
-var chatClient = StreamChat.getInstance(apiKey);
 var WrappedConnectedUser = function (_a) {
     var token = _a.token, userId = _a.userId;
-    return (React.createElement(ConnectedUser, { client: chatClient, token: token, userId: userId },
-        React.createElement(ChannelList, { filters: { members: { $in: [userId] } }, sort: sort }),
+    return (React.createElement(ConnectedUser, { token: token, userId: userId },
+        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/hello.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hello.stories.d.ts","sourceRoot":"","sources":["../../src/stories/hello.stories.tsx"],"names":[],"mappings":"AACA,OAAO,+CAA+C,CAAC;AA+BvD,eAAO,MAAM,UAAU,mBAmCtB,CAAC"}
+{"version":3,"file":"hello.stories.d.ts","sourceRoot":"","sources":["../../src/stories/hello.stories.tsx"],"names":[],"mappings":"AACA,OAAO,+CAA+C,CAAC;AA2BvD,eAAO,MAAM,UAAU,mBAYtB,CAAC"}

package/dist/stories/hello.stories.js

@@ -1,9 +1,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import '@stream-io/stream-chat-css/dist/css/index.css';
-import React, { useEffect, useState } from 'react';
-import { StreamChat } from 'stream-chat';
-import { Channel, ChannelHeader, ChannelList, Chat, MessageInput, MessageList, Thread, Window, } from '../index';
-import { apiKey } from './utils';
+import React from 'react';
+import { Channel, ChannelHeader, ChannelList, MessageInput, MessageList, Thread, Window, } from '../index';
+import { ConnectedUser } from './utils';
 var channelId = import.meta.env.E2E_ADD_MESSAGE_CHANNEL;
 var userId = import.meta.env.E2E_TEST_USER_1;
 var token = import.meta.env.E2E_TEST_USER_1_TOKEN;
@@ -14,34 +13,11 @@ if (!channelId || typeof channelId !== 'string') {
 var sort = { last_updated: 1 };
 var filters = { members: { $in: [userId] }, type: 'messaging' };
 var options = { limit: 10, presence: true, state: true };
-var chatClient = StreamChat.getInstance(apiKey);
-var sharedPromise = Promise.resolve();
-export var BasicSetup = function () {
-    var _a = useState(false), connected = _a[0], setConnected = _a[1];
-    useEffect(function () {
-        sharedPromise.then(function () { return chatClient.connectUser({ id: userId }, token); });
-        var handleConnectionChange = function (_a) {
-            var _b = _a.online, online = _b === void 0 ? false : _b;
-            setConnected(online);
-        };
-        chatClient.on('connection.changed', handleConnectionChange);
-        return function () {
-            chatClient.off('connection.changed', handleConnectionChange);
-            sharedPromise = chatClient.disconnectUser();
-        };
-    }, []);
-    if (!connected) {
-        return React.createElement("p", null,
-            "Connecting ",
-            userId,
-            "...");
-    }
-    return (React.createElement(Chat, { client: chatClient },
-        React.createElement(ChannelList, { filters: filters, options: options, showChannelSearch: true, sort: sort }),
-        React.createElement(Channel, null,
-            React.createElement(Window, null,
-                React.createElement(ChannelHeader, null),
-                React.createElement(MessageList, null),
-                React.createElement(MessageInput, { focus: true })),
-            React.createElement(Thread, null))));
-};
+export var BasicSetup = function () { return (React.createElement(ConnectedUser, { token: token, userId: userId },
+    React.createElement(ChannelList, { filters: filters, options: options, showChannelSearch: true, sort: sort }),
+    React.createElement(Channel, null,
+        React.createElement(Window, null,
+            React.createElement(ChannelHeader, null),
+            React.createElement(MessageList, null),
+            React.createElement(MessageInput, { focus: true })),
+        React.createElement(Thread, null)))); };

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

@@ -1,4 +1,4 @@
 import '@stream-io/stream-chat-css/dist/css/index.css';
-export declare const JumpInRegularMessageList: () => JSX.Element | null;
-export declare const JumpInVirtualizedMessageList: () => JSX.Element | null;
+export declare const JumpInRegularMessageList: () => JSX.Element;
+export declare const JumpInVirtualizedMessageList: () => JSX.Element;
 //# sourceMappingURL=jump-to-message.stories.d.ts.map

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;AA2EvD,eAAO,MAAM,wBAAwB,0BAkBpC,CAAC;AAEF,eAAO,MAAM,4BAA4B,0BAoBxC,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

@@ -35,20 +35,18 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import React, { useEffect, useState } from 'react';
-import { StreamChat } from 'stream-chat';
-import { Channel, Chat, MessageList, useChannelActionContext, VirtualizedMessageList, Window, } from '../index';
+import React from 'react';
+import { Channel, ChannelList, MessageList, useChannelActionContext, useChatContext, VirtualizedMessageList, Window, } from '../index';
 import '@stream-io/stream-chat-css/dist/css/index.css';
+import { ConnectedUser } from './utils';
 void MessageList;
 void VirtualizedMessageList;
-var apiKey = import.meta.env.E2E_APP_KEY;
 var userId = import.meta.env.E2E_TEST_USER_1;
 var userToken = import.meta.env.E2E_TEST_USER_1_TOKEN;
 var channelId = import.meta.env.E2E_JUMP_TO_MESSAGE_CHANNEL;
-var chatClient = StreamChat.getInstance(apiKey);
-chatClient.connectUser({ id: userId }, userToken);
 var JumpToMessage = function () {
     var jumpToMessage = useChannelActionContext().jumpToMessage;
+    var chatClient = useChatContext().client;
     return (React.createElement("button", { "data-testid": 'jump-to-message', onClick: function () { return __awaiter(void 0, void 0, void 0, function () {
             var results;
             return __generator(this, function (_a) {
@@ -64,48 +62,17 @@ var JumpToMessage = function () {
             });
         }); } }, "Jump to message '29'"));
 };
-var StyleFix = function () { return (React.createElement("style", null, "\n    .str-chat {\n      height: 700px\n    }\n  ")); };
-var useTheJumpChannel = function () {
-    var _a = useState(null), channel = _a[0], setChannel = _a[1];
-    useEffect(function () {
-        (function () { return __awaiter(void 0, void 0, void 0, function () {
-            var channels;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0: return [4 /*yield*/, chatClient.queryChannels({ id: { $eq: channelId } })];
-                    case 1:
-                        channels = _a.sent();
-                        setChannel(channels[0]);
-                        return [2 /*return*/];
-                }
-            });
-        }); })();
-    }, []);
-    return channel;
-};
-export var JumpInRegularMessageList = function () {
-    var channel = useTheJumpChannel();
-    if (!channel) {
-        return null;
-    }
-    return (React.createElement("div", null,
-        React.createElement(StyleFix, null),
-        React.createElement(Chat, { client: chatClient },
-            React.createElement(Channel, { channel: channel },
-                React.createElement(JumpToMessage, null),
-                React.createElement(Window, null,
-                    React.createElement(MessageList, null))))));
-};
-export var JumpInVirtualizedMessageList = function () {
-    var channel = useTheJumpChannel();
-    if (!channel) {
-        return null;
-    }
-    return (React.createElement("div", null,
-        React.createElement(StyleFix, null),
-        React.createElement(Chat, { client: chatClient },
-            React.createElement(Channel, { channel: channel },
-                React.createElement(JumpToMessage, null),
-                React.createElement(Window, null,
-                    React.createElement(VirtualizedMessageList, null))))));
-};
+export var JumpInRegularMessageList = function () { return (React.createElement("div", null,
+    React.createElement(ConnectedUser, { token: userToken, userId: userId },
+        React.createElement(ChannelList, { filters: { id: { $eq: channelId } } }),
+        React.createElement(Channel, null,
+            React.createElement(JumpToMessage, null),
+            React.createElement(Window, null,
+                React.createElement(MessageList, null)))))); };
+export var JumpInVirtualizedMessageList = function () { return (React.createElement("div", null,
+    React.createElement(ConnectedUser, { token: userToken, userId: userId },
+        React.createElement(ChannelList, { filters: { id: { $eq: channelId } } }),
+        React.createElement(Channel, null,
+            React.createElement(JumpToMessage, null),
+            React.createElement(Window, null,
+                React.createElement(VirtualizedMessageList, 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;AA6FvD,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,21 +1,9 @@
-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 { StreamChat } from 'stream-chat';
 import { v4 as uuid } from 'uuid';
-import { Channel, ChannelHeader, ChannelList, ChannelPreview, MessageList, useChannelStateContext, Window, } from '../index';
-import { apiKey, ConnectedUser } from './utils';
+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') {
     throw new Error('expected ADD_MESSAGE_CHANNEL');
@@ -32,21 +20,10 @@ var Controls = function () {
 };
 // Sort in reverse order to avoid auto-selecting unread channel
 var sort = { last_updated: 1 };
-var chatClient = StreamChat.getInstance(apiKey);
-var Custom = 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: Custom }))); };
 var WrappedConnectedUser = function (_a) {
     var token = _a.token, userId = _a.userId;
-    return (React.createElement(ConnectedUser, { client: chatClient, token: token, userId: userId },
-        React.createElement(ChannelList, { filters: { members: { $in: [userId] }, name: { $autocomplete: 'mr-channel' } }, Preview: CustomPreview, setActiveChannelOnMount: false, sort: sort }),
+    return (React.createElement(ConnectedUser, { token: token, userId: userId },
+        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/stories/utils.d.ts

@@ -1,5 +1,5 @@
 import { PropsWithChildren } from 'react';
-import type { StreamChat } from 'stream-chat';
+import { DefaultGenerics } from 'stream-chat';
 export declare const apiKey: string;
 declare type LocalAttachmentType = Record<string, unknown>;
 declare type LocalChannelType = Record<string, unknown>;
@@ -20,8 +20,7 @@ export declare type StreamChatGenerics = {
 export declare type ConnectedUserProps = PropsWithChildren<{
     token: string;
     userId: string;
-    client?: StreamChat;
 }>;
-export declare const ConnectedUser: ({ children, client, token, userId }: ConnectedUserProps) => JSX.Element;
+export declare const ConnectedUser: <SCG extends DefaultGenerics = StreamChatGenerics>({ children, token, userId, }: ConnectedUserProps) => JSX.Element;
 export {};
 //# sourceMappingURL=utils.d.ts.map

package/dist/stories/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/stories/utils.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,iBAAiB,EAAuB,MAAM,OAAO,CAAC;AAEtE,OAAO,KAAK,EAAS,UAAU,EAAE,MAAM,aAAa,CAAC;AAMrD,eAAO,MAAM,MAAM,QAAS,CAAC;AAE7B,aAAK,mBAAmB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AACnD,aAAK,gBAAgB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAChD,aAAK,gBAAgB,GAAG,MAAM,CAAC;AAC/B,aAAK,cAAc,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAC9C,aAAK,gBAAgB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAChD,aAAK,iBAAiB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AACjD,aAAK,aAAa,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAE7C,oBAAY,kBAAkB,GAAG;IAC/B,cAAc,EAAE,mBAAmB,CAAC;IACpC,WAAW,EAAE,gBAAgB,CAAC;IAC9B,WAAW,EAAE,gBAAgB,CAAC;IAC9B,SAAS,EAAE,cAAc,CAAC;IAC1B,WAAW,EAAE,gBAAgB,CAAC;IAC9B,YAAY,EAAE,iBAAiB,CAAC;IAChC,QAAQ,EAAE,aAAa,CAAC;CACzB,CAAC;AAMF,oBAAY,kBAAkB,GAAG,iBAAiB,CAAC;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB,CAAC,CAAC;AAEH,eAAO,MAAM,aAAa,wCAAyC,kBAAkB,gBA4BpF,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/stories/utils.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,iBAAiB,EAAuB,MAAM,OAAO,CAAC;AAEtE,OAAO,EAAE,eAAe,EAAqB,MAAM,aAAa,CAAC;AAMjE,eAAO,MAAM,MAAM,QAAS,CAAC;AAE7B,aAAK,mBAAmB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AACnD,aAAK,gBAAgB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAChD,aAAK,gBAAgB,GAAG,MAAM,CAAC;AAC/B,aAAK,cAAc,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAC9C,aAAK,gBAAgB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAChD,aAAK,iBAAiB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AACjD,aAAK,aAAa,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAE7C,oBAAY,kBAAkB,GAAG;IAC/B,cAAc,EAAE,mBAAmB,CAAC;IACpC,WAAW,EAAE,gBAAgB,CAAC;IAC9B,WAAW,EAAE,gBAAgB,CAAC;IAC9B,SAAS,EAAE,cAAc,CAAC;IAC1B,WAAW,EAAE,gBAAgB,CAAC;IAC9B,YAAY,EAAE,iBAAiB,CAAC;IAChC,QAAQ,EAAE,aAAa,CAAC;CACzB,CAAC;AAEF,oBAAY,kBAAkB,GAAG,iBAAiB,CAAC;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC,CAAC;AAEH,eAAO,MAAM,aAAa,mFAIvB,kBAAkB,gBA+BpB,CAAC"}

package/dist/stories/utils.js

@@ -1,32 +1,32 @@
 import React, { useEffect, useState } from 'react';
 import { Chat } from '../';
+import { StreamChat } from 'stream-chat';
 var appKey = import.meta.env.E2E_APP_KEY;
 if (!appKey || typeof appKey !== 'string') {
     throw new Error('expected APP_KEY');
 }
 export var apiKey = appKey;
-// wait for disconnect to happen since there's only one shared
-// client and two separate Chat components using it to prevent crashes
-var sharedPromise = Promise.resolve();
 export var ConnectedUser = function (_a) {
-    var children = _a.children, client = _a.client, token = _a.token, userId = _a.userId;
-    var _b = useState(false), connected = _b[0], setConnected = _b[1];
+    var children = _a.children, token = _a.token, userId = _a.userId;
+    var _b = useState(null), client = _b[0], setClient = _b[1];
     useEffect(function () {
-        sharedPromise.then(function () { return client === null || client === void 0 ? void 0 : client.connectUser({ id: userId }, token); });
+        var c = new StreamChat(apiKey);
         var handleConnectionChange = function (_a) {
             var _b = _a.online, online = _b === void 0 ? false : _b;
-            setConnected(online);
+            if (!online)
+                console.log('connection lost');
+            setClient(c);
         };
-        client === null || client === void 0 ? void 0 : client.on('connection.changed', handleConnectionChange);
+        c.on('connection.changed', handleConnectionChange);
+        c.connectUser({ id: userId }, token);
         return function () {
-            var _a;
-            client === null || client === void 0 ? void 0 : client.off('connection.changed', handleConnectionChange);
-            sharedPromise = (_a = client === null || client === void 0 ? void 0 : client.disconnectUser()) !== null && _a !== void 0 ? _a : Promise.resolve();
+            c.off('connection.changed', handleConnectionChange);
+            c.disconnectUser().then(function () { return console.log('connection closed'); });
         };
-    }, []);
-    if (!connected || !client) {
+    }, [userId, token]);
+    if (!client) {
         return React.createElement("p", null,
-            "Connecting ",
+            "Waiting for connection to be established with user: ",
             userId,
             "...");
     }

package/dist/version.d.ts

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

package/dist/version.js

@@ -1 +1 @@
-export var version = '8.1.1';
+export var version = '8.1.3';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stream-chat-react",
-  "version": "8.1.1",
+  "version": "8.1.3",
   "description": "React components to create chat conversations or livestream style chat",
   "author": "GetStream",
   "homepage": "https://getstream.io/chat/",
@@ -56,7 +56,7 @@
   },
   "optionalDependencies": {
     "@stream-io/transliterate": "^1.5.5",
-    "mml-react": "^0.4.2"
+    "mml-react": "^0.4.5"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^16.8.0",
@@ -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",
@@ -89,6 +89,7 @@
     "@rollup/plugin-replace": "^2.3.4",
     "@rollup/plugin-typescript": "8.2.1",
     "@semantic-release/changelog": "^6.0.1",
+    "@semantic-release/git": "^10.0.1",
     "@stream-io/rollup-plugin-node-builtins": "^2.1.5",
     "@testing-library/jest-dom": "5.11.6",
     "@testing-library/react": "^11.2.2",
@@ -182,7 +183,7 @@
   },
   "scripts": {
     "analyze": "yarn build -- --stats && webpack-bundle-analyzer build/bundle-stats.json",
-    "build": "rm -rf dist && mkdir -p dist/assets assets && yarn --silent copy-version && yarn build-translations && yarn types && yarn bundle",
+    "build": "rm -rf dist && mkdir -p dist/assets && yarn --silent copy-version && yarn build-translations && yarn types && yarn bundle",
     "bundle": "rollup -c",
     "bundle-size": "BUNDLE_SIZE=true yarn bundle",
     "build-translations": "i18next",
@@ -202,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/assets/str-chat__alert.svg

@@ -1 +0,0 @@
-<svg width="14" height="14" xmlns="http://www.w3.org/2000/svg"><path d="M7 0a7 7 0 1 0 0 14A7 7 0 0 0 7 0zm.875 10.938a.438.438 0 0 1-.438.437h-.875a.438.438 0 0 1-.437-.438v-.874c0-.242.196-.438.438-.438h.875c.241 0 .437.196.437.438v.874zm0-2.626a.438.438 0 0 1-.438.438h-.875a.438.438 0 0 1-.437-.438v-5.25c0-.241.196-.437.438-.437h.875c.241 0 .437.196.437.438v5.25z" fill="#EA152F" fill-rule="evenodd"/></svg>

package/dist/assets/str-chat__connection-error.svg

@@ -1,13 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="78px" height="78px" viewBox="0 0 78 78" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 52.6 (67491) - http://www.bohemiancoding.com/sketch -->
-    <title>Combined Shape</title>
-    <desc>Created with Sketch.</desc>
-    <g id="Interactions" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Connection-Error-_-Connectivity" transform="translate(-270.000000, -30.000000)" fill="#CF1F25">
-            <g id="109-network-connection" transform="translate(270.000000, 30.000000)">
-                <path d="M66.4609744,11.414231 C81.6225232,26.5757798 81.6225232,51.157545 66.4609744,66.3188467 C51.2994256,81.4803954 26.7176604,81.4803954 11.5563587,66.3188467 C-3.60519004,51.1572979 -3.60519004,26.5755327 11.5563587,11.414231 C26.7179075,-3.74731776 51.2996727,-3.74731776 66.4609744,11.414231 Z M54.7853215,45.8823776 L54.7853215,40.5882574 C54.7853215,39.613638 53.9952341,38.8235506 53.0206147,38.8235506 L44.9576695,38.8235506 L41.428256,42.3529641 L51.255555,42.3529641 L51.255555,45.8823776 L54.7853215,45.8823776 Z M40.6659027,43.1153174 L37.8988425,45.8823776 L40.6659027,45.8823776 L40.6659027,43.1153174 Z M51.1764962,56.4702653 L58.2353232,56.4702653 C59.2099355,56.4702653 60.00003,55.6801708 60.00003,54.7055585 L60.00003,51.176145 C60.00003,50.2015327 59.2099355,49.4114382 58.2353232,49.4114382 L51.1764962,49.4114382 C50.2018839,49.4114382 49.4117894,50.2015327 49.4117894,51.176145 L49.4117894,54.7055585 C49.4117894,55.6801708 50.2018839,56.4702653 51.1764962,56.4702653 Z M35.2941353,56.4702653 L42.3529624,56.4702653 C43.3275746,56.4702653 44.1176691,55.6801708 44.1176691,54.7055585 L44.1176691,51.176145 C44.1176691,50.2015327 43.3275746,49.4114382 42.3529624,49.4114382 L35.2941353,49.4114382 C34.319523,49.4114382 33.5294285,50.2015327 33.5294285,51.176145 L33.5294285,54.7055585 C33.5294285,55.6801708 34.319523,56.4702653 35.2941353,56.4702653 Z M56.6964989,19.0874231 C56.007381,18.3985134 54.8903216,18.3985134 54.2012036,19.087423 L45.882376,27.4062507 L45.882376,19.4117761 C45.882376,18.4371568 45.0922885,17.6470693 44.1176692,17.6470693 L33.5294286,17.6470693 C32.5548092,17.6470694 31.7647218,18.4371568 31.7647218,19.4117761 L31.7647218,30.0000167 C31.7647219,30.9746363 32.5548092,31.7647237 33.5294285,31.7647237 L41.5239031,31.7647237 L34.4650761,38.8235508 L24.7058947,38.8235508 C23.7312753,38.8235508 22.9411879,39.6136382 22.9411879,40.5882575 L22.9411879,45.8823778 L26.4706014,45.8823778 L26.4706014,42.3529643 L30.9356624,42.3529643 L23.8768354,49.4117914 L19.4117743,49.4117914 C18.4371549,49.4117914 17.6470675,50.2018788 17.6470675,51.1764981 L17.6470675,54.7059117 C17.6504049,54.9674302 17.7129076,55.2248042 17.8298886,55.4587302 L16.4456526,56.8429662 C15.7446193,57.5200453 15.7252005,58.6372282 16.4022825,59.3382615 C17.0793616,60.0392948 18.1965445,60.0587136 18.8975778,59.3816316 C18.9122847,59.3674273 18.9267436,59.3529684 18.940948,59.3382615 L56.6964963,21.5830662 C57.3856425,20.8939094 57.3856425,19.7765747 56.6964963,19.0874179 Z" id="Combined-Shape"></path>
-            </g>
-        </g>
-    </g>
-</svg>

package/dist/assets/str-chat__file-file.svg

@@ -1,20 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="25px" height="30px" viewBox="0 0 25 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 52.6 (67491) - http://www.bohemiancoding.com/sketch -->
-    <title>file icon</title>
-    <desc>Created with Sketch.</desc>
-    <g id="Team-Chat" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="LIGHT_02-Team-Chat" transform="translate(-399.000000, -2328.000000)">
-            <g id="Channel-Conversations" transform="translate(300.000000, 0.000000)">
-                <g id="ConversationMessageView" transform="translate(40.000000, 2239.000000)">
-                    <g id="MessageContent_file" transform="translate(49.000000, 83.000000)">
-                        <g id="file-icon" transform="translate(10.000000, 6.000000)">
-                            <path d="M0,1.99161703 C0,0.891677316 0.889763236,0 2.00359486,0 L22.9964051,0 C24.10296,0 25,0.89784041 25,1.99161703 L25,28.008383 C25,29.1083227 24.1102368,30 22.9964051,30 L2.00359486,30 C0.897039974,30 0,29.1021596 0,28.008383 L0,1.99161703 Z" id="placeholder" fill="#D1D1D1"></path>
-                            <path d="M5,5 L20,5 L20,7 L5,7 L5,5 Z M5,9 L20,9 L20,11 L5,11 L5,9 Z M5,13 L20,13 L20,15 L5,15 L5,13 Z M5,17 L12,17 L12,19 L5,19 L5,17 Z" id="lines" fill="#FFFFFF"></path>
-                        </g>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

package/dist/assets/str-chat__icon-chevron-down.svg

@@ -1 +0,0 @@
-<svg width="8" height="5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="b" d="M.667.667L4 4 7.333.667z"/><filter x="-7.5%" y="-15%" width="115%" height="160%" filterUnits="objectBoundingBox" id="a"><feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/><feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.685858243 0" in="shadowOffsetOuter1"/></filter></defs><g fill="none" fill-rule="evenodd"><use fill="#000" filter="url(#a)" xlink:href="#b"/><use fill-opacity=".7" fill="#FFF" xlink:href="#b"/></g></svg>