stream-chat-react 10.1.1 → 10.2.0

package/dist/scss/v2/MessageList/VirtualizedMessageList-layout.scss

@@ -14,6 +14,15 @@
     @include utils.message-list-spacing;
   }
 
+  .str-chat__parent-message-li {
+    padding-block-end: var(--str-chat__spacing-4);
+
+    .str-chat__thread-start {
+      text-align: start;
+      padding-top: var(--str-chat__spacing-3);
+    }
+  }
+
   // conditionally showing the header displaces items when prepending.
   // a simple workaround is to make the loading indicator an overlay.
   &__loading {
@@ -42,3 +51,15 @@
     padding-block-end: var(--str-chat__spacing-0_5);
   }
 }
+
+
+.str-chat__thread--virtualized {
+  .str-chat__main-panel-inner {
+    height: 100%;
+
+    // the first message in virtualized thread has to be separated from the top by padding, not margin
+    .str-chat__virtual-list-message-wrapper:first-of-type {
+      padding-block-start: var(--str-chat__spacing-4);
+    }
+  }
+}

package/dist/scss/v2/MessageList/VirtualizedMessageList-theme.scss

@@ -29,4 +29,13 @@
 
 .str-chat__virtual-list {
   @include utils.component-layer-overrides('virtual-list');
+
+  .str-chat__parent-message-li {
+    border-block-end: 1px solid var(--str-chat__thread-head-start-border-block-end-color);
+
+    .str-chat__thread-start {
+      color: var(--str-chat__thread-head-start-color);
+      font: var(--str-chat__subtitle-text);
+    }
+  }
 }

package/dist/scss/v2/Notification/NotificationList-theme.scss

@@ -26,6 +26,6 @@
   --str-chat__notification-list-box-shadow: none;
 }
 
-.str-chat__list-notification-lists {
-  @include utils.component-layer-overrides('notification-list-list');
+.str-chat__list-notifications {
+  @include utils.component-layer-overrides('notification-list');
 }

package/dist/scss/v2/_utils.scss

@@ -186,3 +186,11 @@
 @mixin channel-preview-display-name-theme {
   font: var(--str-chat__subtitle-medium-text);
 }
+
+@mixin clamped-height-from-original-image-dimensions($max-height-css-var, $max-width-css-var) {
+  height: min(
+    var(#{$max-height-css-var}),
+    min(var(#{$max-width-css-var}, 1000000) / var(--original-width, 1000000), 1px) *
+      var(--original-height, 1000000)
+  );
+}

package/dist/stories/attachment-sizing.stories.d.ts

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

package/dist/stories/attachment-sizing.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"attachment-sizing.stories.d.ts","sourceRoot":"","sources":["../../src/stories/attachment-sizing.stories.tsx"],"names":[],"mappings":"AA2LA,eAAO,MAAM,KAAK,mBAQjB,CAAC"}

package/dist/stories/attachment-sizing.stories.js

@@ -0,0 +1,179 @@
+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 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_ATTACHMENT_SIZING_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, messages = _a.messages, 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"),
+        React.createElement("button", { "data-testid": 'add-other-user-message', onClick: function () {
+                return channel.sendMessage({
+                    text: "Other user's message",
+                });
+            } }, "Receive a message"),
+        React.createElement("button", { "data-testid": 'delete-other-last-message', onClick: function () { return __awaiter(void 0, void 0, void 0, function () {
+                var lastMessage;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            lastMessage = messages === null || messages === void 0 ? void 0 : messages.slice(-1)[0];
+                            if (!lastMessage) return [3 /*break*/, 2];
+                            return [4 /*yield*/, client.deleteMessage(lastMessage.id, true)];
+                        case 1:
+                            _a.sent();
+                            _a.label = 2;
+                        case 2: return [2 /*return*/];
+                    }
+                });
+            }); } }, "Delete other user's last message")));
+};
+// 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)
+            return;
+        var lastMsg = messages.slice(-1)[0];
+        if (lastMsg)
+            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      .".concat(theOtherUserCredentials.userId, " .str-chat-channel {\n        max-height: 30px;\n        display: inline-block;\n      }\n      .").concat(theOtherUserCredentials.userId, " .str-chat__container {\n        height: 30px;\n      }\n\n      .").concat(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("style", null, "\n\t \t.str-chat__thread .str-chat__message-data.str-chat__message-simple-data {\n\t\t\t visibility: hidden;\n\t\t}\n\t "),
+        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 });
+};

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

@@ -1 +1 @@
-{"version":3,"file":"edit-message.stories.d.ts","sourceRoot":"","sources":["../../src/stories/edit-message.stories.tsx"],"names":[],"mappings":"AAyEA,eAAO,MAAM,KAAK,mBAUjB,CAAC"}
+{"version":3,"file":"edit-message.stories.d.ts","sourceRoot":"","sources":["../../src/stories/edit-message.stories.tsx"],"names":[],"mappings":"AAoEA,eAAO,MAAM,KAAK,mBAUjB,CAAC"}

package/dist/stories/edit-message.stories.js

@@ -1,10 +1,6 @@
 import React from 'react';
 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');
-}
 var Controls = function () {
     var channel = useChannelStateContext().channel;
     return (React.createElement("div", null,

package/dist/stories/pin-message.stories.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"pin-message.stories.d.ts","sourceRoot":"","sources":["../../src/stories/pin-message.stories.tsx"],"names":[],"mappings":"AA6EA,eAAO,MAAM,KAAK,mBAUjB,CAAC"}

package/dist/stories/pin-message.stories.js

@@ -0,0 +1,98 @@
+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 };
+    }
+};
+import React from 'react';
+import { Channel, ChannelHeader, ChannelList, MessageList, Thread, useChannelStateContext, Window, } from '../index';
+import { ConnectedUser } from './utils';
+var PinnedMessagesList = function () {
+    var pinnedMessages = useChannelStateContext().pinnedMessages;
+    if (!(pinnedMessages === null || pinnedMessages === void 0 ? void 0 : pinnedMessages.length))
+        return null;
+    return (React.createElement("ul", { "data-testid": 'pinned-messages-list' }, pinnedMessages === null || pinnedMessages === void 0 ? void 0 : pinnedMessages.map(function (pm) { return (React.createElement("li", { key: pm.id }, pm.text)); })));
+};
+var Controls = function () {
+    var channel = useChannelStateContext().channel;
+    return (React.createElement("div", null,
+        React.createElement("button", { "data-testid": 'truncate', onClick: function () { return channel.truncate(); } }, "Truncate"),
+        React.createElement("button", { "data-testid": 'add-message', onClick: function () { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, channel.sendMessage({
+                                text: 'pin-message-0',
+                            })];
+                        case 1:
+                            _a.sent();
+                            return [4 /*yield*/, channel.sendMessage({
+                                    pinned: true,
+                                    pinned_at: new Date().toISOString(),
+                                    text: 'pin-message-1',
+                                })];
+                        case 2:
+                            _a.sent();
+                            return [4 /*yield*/, channel.sendMessage({
+                                    text: 'pin-message-2',
+                                })];
+                        case 3:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            }); } }, "Add message")));
+};
+var App = function (_a) {
+    var token = _a.token, userId = _a.userId;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ConnectedUser, { token: token, userId: userId },
+            React.createElement(ChannelList, { filters: { id: { $eq: 'pin-message-channel' }, members: { $in: [userId] } }, setActiveChannelOnMount: true }),
+            React.createElement(Channel, null,
+                React.createElement(PinnedMessagesList, null),
+                React.createElement(Window, null,
+                    React.createElement(ChannelHeader, null),
+                    React.createElement(MessageList, null)),
+                React.createElement(Thread, null),
+                React.createElement(Controls, null)))));
+};
+export var User1 = function () {
+    var userId = import.meta.env.E2E_TEST_USER_1;
+    var token = import.meta.env.E2E_TEST_USER_1_TOKEN;
+    if (!userId || typeof userId !== 'string') {
+        throw new Error('expected TEST_USER_1');
+    }
+    if (!token || typeof token !== 'string') {
+        throw new Error('expected TEST_USER_1_TOKEN');
+    }
+    return React.createElement(App, { token: token, userId: userId });
+};

package/dist/stories/utils.d.ts

@@ -1,6 +1,6 @@
 import { PropsWithChildren } from 'react';
 import { DefaultGenerics } from 'stream-chat';
-export declare const apiKey: string;
+export declare const streamAPIKey: string;
 declare type LocalAttachmentType = Record<string, unknown>;
 declare type LocalChannelType = Record<string, unknown>;
 declare type LocalCommandType = string;

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,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,gBAiCpB,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,EACL,eAAe,EAMhB,MAAM,aAAa,CAAC;AAMrB,eAAO,MAAM,YAAY,QAAS,CAAC;AAEnC,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;AAoCH,eAAO,MAAM,aAAa,mFAIvB,kBAAkB,gBAiBpB,CAAC"}

package/dist/stories/utils.js

@@ -1,35 +1,46 @@
 import React, { useEffect, useState } from 'react';
 import { Chat } from '../';
-import { StreamChat } from 'stream-chat';
+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;
-export var ConnectedUser = function (_a) {
-    var children = _a.children, token = _a.token, userId = _a.userId;
-    var _b = useState(null), client = _b[0], setClient = _b[1];
+export var streamAPIKey = appKey;
+var useClient = function (_a) {
+    var apiKey = _a.apiKey, tokenOrProvider = _a.tokenOrProvider, userData = _a.userData;
+    var _b = useState(null), chatClient = _b[0], setChatClient = _b[1];
     useEffect(function () {
-        var c = new StreamChat(apiKey);
-        var handleConnectionChange = function (_a) {
-            var _b = _a.online, online = _b === void 0 ? false : _b;
-            if (!online)
-                console.log('connection lost');
-            setClient(c);
-        };
-        c.on('connection.changed', handleConnectionChange);
-        c.connectUser({ id: userId }, token);
+        var client = new StreamChat(apiKey);
+        var didUserConnectInterrupt = false;
+        var connectionPromise = client.connectUser(userData, tokenOrProvider).then(function () {
+            if (!didUserConnectInterrupt)
+                setChatClient(client);
+        });
         return function () {
-            c.off('connection.changed', handleConnectionChange);
-            c.disconnectUser().then(function () { return console.log('connection closed'); });
+            didUserConnectInterrupt = true;
+            setChatClient(null);
+            connectionPromise
+                .then(function () { return client.disconnectUser(); })
+                .then(function () {
+                console.log('connection closed');
+            });
         };
-    }, [userId, token]);
-    if (!client) {
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [apiKey, userData.id, tokenOrProvider]);
+    return chatClient;
+};
+export var ConnectedUser = function (_a) {
+    var children = _a.children, token = _a.token, userId = _a.userId;
+    var client = useClient({
+        apiKey: streamAPIKey,
+        tokenOrProvider: token,
+        userData: { id: userId },
+    });
+    if (!client)
         return React.createElement("p", null,
             "Waiting for connection to be established with user: ",
             userId,
             "...");
-    }
     return (React.createElement(React.Fragment, null,
         React.createElement("h3", null,
             "User: ",

package/dist/types/types.d.ts

@@ -1,6 +1,6 @@
 import type { PropsWithChildren } from 'react';
 import type { LoadingIndicatorProps } from '../components/Loading/LoadingIndicator';
-import type { APIErrorResponse, ErrorFromResponse, Event, ExtendableGenerics, LiteralStringForUnion, Mute } from 'stream-chat';
+import type { APIErrorResponse, Attachment, ErrorFromResponse, Event, ExtendableGenerics, LiteralStringForUnion, Mute } from 'stream-chat';
 export declare type UnknownType = Record<string, unknown>;
 export declare type PropsWithChildrenOnly = PropsWithChildren<Record<never, never>>;
 export declare type CustomTrigger = {
@@ -71,4 +71,12 @@ export declare type Dimensions = {
     height?: string;
     width?: string;
 };
+export declare type ImageAttachmentConfiguration = {
+    url: string;
+};
+export declare type VideoAttachmentConfiguration = ImageAttachmentConfiguration & {
+    thumbUrl?: string;
+};
+export declare type ImageAttachmentSizeHandler = (attachment: Attachment, element: HTMLElement) => ImageAttachmentConfiguration;
+export declare type VideoAttachmentSizeHandler = (attachment: Attachment, element: HTMLElement, shouldGenerateVideoThumbnail: boolean) => VideoAttachmentConfiguration;
 //# sourceMappingURL=types.d.ts.map

package/dist/types/types.d.ts.map

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

package/dist/version.d.ts

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

package/dist/version.js

@@ -1 +1 @@
-export var version = '10.1.1';
+export var version = '10.2.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stream-chat-react",
-  "version": "10.1.1",
+  "version": "10.2.0",
   "description": "React components to create chat conversations or livestream style chat",
   "author": "GetStream",
   "homepage": "https://getstream.io/chat/",
@@ -30,7 +30,7 @@
   "dependencies": {
     "@braintree/sanitize-url": "6.0.0",
     "@popperjs/core": "^2.11.5",
-    "@stream-io/stream-chat-css": "3.1.1",
+    "@stream-io/stream-chat-css": "^3.5.4",
     "clsx": "^1.1.1",
     "dayjs": "^1.10.4",
     "emoji-mart": "3.0.1",
@@ -207,7 +207,7 @@
     "semantic-release": "semantic-release",
     "browse-examples": "ladle serve",
     "e2e": "playwright test",
-    "e2e-fixtures": "node e2e/fixtures.mjs",
+    "e2e-fixtures": "node e2e/fixtures/fixtures.mjs",
     "e2e-container": "./e2e/scripts/run_in_container.sh",
     "docs-copy-css-docs": "scripts/merge-stream-chat-css-docs.sh node_modules/@stream-io/stream-chat-css/docs",
     "docs-run": "yarn docs-copy-css-docs && npx stream-chat-docusaurus -s"

package/dist/components/MessageList/Center.d.ts

@@ -1,3 +0,0 @@
-import type { PropsWithChildrenOnly } from '../../types/types';
-export declare const Center: ({ children }: PropsWithChildrenOnly) => JSX.Element;
-//# sourceMappingURL=Center.d.ts.map

package/dist/components/MessageList/Center.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Center.d.ts","sourceRoot":"","sources":["../../../src/components/MessageList/Center.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAM/D,eAAO,MAAM,MAAM,iBAJqB,qBAAqB,gBAIgB,CAAC"}

package/dist/components/MessageList/Center.js

@@ -1,6 +0,0 @@
-import React from 'react';
-var UnMemoizedCenter = function (_a) {
-    var children = _a.children;
-    return (React.createElement("div", { className: 'str-chat__list__center' }, children));
-};
-export var Center = React.memo(UnMemoizedCenter);