stream-chat-react 7.0.0 → 8.1.1

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

@@ -0,0 +1,77 @@
+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';
+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,
+        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(),
+                });
+            } }, "Add message")));
+};
+// 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 }),
+        React.createElement(Channel, null,
+            React.createElement(Window, null,
+                React.createElement(ChannelHeader, null),
+                React.createElement(MessageList, 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(WrappedConnectedUser, { token: token, userId: userId });
+};
+export var User2 = function () {
+    var userId = import.meta.env.E2E_TEST_USER_2;
+    var token = import.meta.env.E2E_TEST_USER_2_TOKEN;
+    if (!userId || typeof userId !== 'string') {
+        throw new Error('expected TEST_USER_2');
+    }
+    if (!token || typeof token !== 'string') {
+        throw new Error('expected TEST_USER_2_TOKEN');
+    }
+    return React.createElement(WrappedConnectedUser, { token: token, userId: userId });
+};

package/dist/stories/utils.d.ts

@@ -0,0 +1,27 @@
+import { PropsWithChildren } from 'react';
+import type { StreamChat } from 'stream-chat';
+export declare const apiKey: string;
+declare type LocalAttachmentType = Record<string, unknown>;
+declare type LocalChannelType = Record<string, unknown>;
+declare type LocalCommandType = string;
+declare type LocalEventType = Record<string, unknown>;
+declare type LocalMessageType = Record<string, unknown>;
+declare type LocalReactionType = Record<string, unknown>;
+declare type LocalUserType = Record<string, unknown>;
+export declare type StreamChatGenerics = {
+    attachmentType: LocalAttachmentType;
+    channelType: LocalChannelType;
+    commandType: LocalCommandType;
+    eventType: LocalEventType;
+    messageType: LocalMessageType;
+    reactionType: LocalReactionType;
+    userType: LocalUserType;
+};
+export declare type ConnectedUserProps = PropsWithChildren<{
+    token: string;
+    userId: string;
+    client?: StreamChat;
+}>;
+export declare const ConnectedUser: ({ children, client, token, userId }: ConnectedUserProps) => JSX.Element;
+export {};
+//# sourceMappingURL=utils.d.ts.map

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

@@ -0,0 +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"}

package/dist/stories/utils.js

@@ -0,0 +1,38 @@
+import React, { useEffect, useState } from 'react';
+import { Chat } from '../';
+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];
+    useEffect(function () {
+        sharedPromise.then(function () { return client === null || client === void 0 ? void 0 : client.connectUser({ id: userId }, token); });
+        var handleConnectionChange = function (_a) {
+            var _b = _a.online, online = _b === void 0 ? false : _b;
+            setConnected(online);
+        };
+        client === null || client === void 0 ? void 0 : client.on('connection.changed', handleConnectionChange);
+        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();
+        };
+    }, []);
+    if (!connected || !client) {
+        return React.createElement("p", null,
+            "Connecting ",
+            userId,
+            "...");
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement("h3", null,
+            "User: ",
+            userId),
+        React.createElement(Chat, { client: client }, children)));
+};

package/dist/types/types.d.ts

@@ -1,4 +1,5 @@
-import type { Event, LiteralStringForUnion, Mute } from 'stream-chat';
+import type { LoadingIndicatorProps } from '../components/Loading/LoadingIndicator';
+import type { Event, ExtendableGenerics, LiteralStringForUnion, Mute } from 'stream-chat';
 export declare type UnknownType = Record<string, unknown>;
 export declare type CustomTrigger = {
     [key: string]: {
@@ -6,6 +7,7 @@ export declare type CustomTrigger = {
         data: UnknownType;
     };
 };
+export declare type CustomMessageType = 'channel.intro' | 'message.date';
 export declare type DefaultAttachmentType = UnknownType & {
     asset_url?: string;
     file_size?: number;
@@ -14,7 +16,6 @@ export declare type DefaultAttachmentType = UnknownType & {
         image_url?: string;
         thumb_url?: string;
     }>;
-    mime_type?: string;
 };
 export declare type DefaultChannelType = UnknownType & {
     frozen?: boolean;
@@ -22,21 +23,42 @@ export declare type DefaultChannelType = UnknownType & {
     member_count?: number;
     subtitle?: string;
 };
-export declare type DefaultCommandType = LiteralStringForUnion;
-export declare type DefaultEventType = UnknownType;
-export declare type DefaultMessageType = UnknownType & {
-    customType?: 'channel.intro' | 'message.date';
+export declare type DefaultStreamChatGenerics = ExtendableGenerics & {
+    attachmentType: DefaultAttachmentType;
+    channelType: DefaultChannelType;
+    commandType: LiteralStringForUnion;
+    eventType: UnknownType;
+    messageType: DefaultMessageType;
+    reactionType: UnknownType;
+    userType: DefaultUserType;
+};
+export declare type DefaultMessageType<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = UnknownType & {
+    customType?: CustomMessageType;
     date?: string | Date;
     errorStatusCode?: number;
-    event?: Event<DefaultAttachmentType, DefaultChannelType, DefaultCommandType, DefaultEventType, DefaultMessageType, DefaultReactionType, DefaultUserType>;
+    event?: Event<StreamChatGenerics>;
     unread?: boolean;
 };
-export declare type DefaultReactionType = UnknownType;
 export declare type DefaultUserTypeInternal = {
     image?: string;
     status?: string;
 };
-export declare type DefaultUserType<UserType extends DefaultUserTypeInternal = DefaultUserTypeInternal> = UnknownType & DefaultUserTypeInternal & {
-    mutes?: Array<Mute<UserType>>;
+export declare type DefaultUserType<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = UnknownType & DefaultUserTypeInternal & {
+    mutes?: Array<Mute<StreamChatGenerics>>;
+};
+export declare type GiphyVersions = 'original' | 'fixed_height' | 'fixed_height_still' | 'fixed_height_downsampled' | 'fixed_width' | 'fixed_width_still' | 'fixed_width_downsampled';
+export declare type PaginatorProps = {
+    /** callback to load the next page */
+    loadNextPage: () => void;
+    /** indicates if there is a next page to load */
+    hasNextPage?: boolean;
+    /** The loading indicator to use */
+    LoadingIndicator?: React.ComponentType<LoadingIndicatorProps>;
+    /** indicates if there there's currently any refreshing taking place */
+    refreshing?: boolean;
+    /** display the items in opposite order */
+    reverse?: boolean;
+    /** Offset from when to start the loadNextPage call */
+    threshold?: number;
 };
 //# 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":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,qBAAqB,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEtE,oBAAY,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAElD,oBAAY,aAAa,GAAG;IAC1B,CAAC,GAAG,EAAE,MAAM,GAAG;QACb,cAAc,EAAE,WAAW,CAAC;QAC5B,IAAI,EAAE,WAAW,CAAC;KACnB,CAAC;CACH,CAAC;AAEF,oBAAY,qBAAqB,GAAG,WAAW,GAAG;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,KAAK,CAAC;QACb,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC,CAAC;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,oBAAY,kBAAkB,GAAG,WAAW,GAAG;IAC7C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,oBAAY,kBAAkB,GAAG,qBAAqB,CAAC;AAEvD,oBAAY,gBAAgB,GAAG,WAAW,CAAC;AAE3C,oBAAY,kBAAkB,GAAG,WAAW,GAAG;IAC7C,UAAU,CAAC,EAAE,eAAe,GAAG,cAAc,CAAC;IAC9C,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,KAAK,CACX,qBAAqB,EACrB,kBAAkB,EAClB,kBAAkB,EAClB,gBAAgB,EAChB,kBAAkB,EAClB,mBAAmB,EACnB,eAAe,CAChB,CAAC;IACF,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,oBAAY,mBAAmB,GAAG,WAAW,CAAC;AAE9C,oBAAY,uBAAuB,GAAG;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,oBAAY,eAAe,CACzB,QAAQ,SAAS,uBAAuB,GAAG,uBAAuB,IAChE,WAAW,GACb,uBAAuB,GAAG;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;CAC/B,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,wCAAwC,CAAC;AACpF,OAAO,KAAK,EAAE,KAAK,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAE1F,oBAAY,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAElD,oBAAY,aAAa,GAAG;IAC1B,CAAC,GAAG,EAAE,MAAM,GAAG;QACb,cAAc,EAAE,WAAW,CAAC;QAC5B,IAAI,EAAE,WAAW,CAAC;KACnB,CAAC;CACH,CAAC;AAEF,oBAAY,iBAAiB,GAAG,eAAe,GAAG,cAAc,CAAC;AAEjE,oBAAY,qBAAqB,GAAG,WAAW,GAAG;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,KAAK,CAAC;QACb,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC,CAAC;CACJ,CAAC;AAEF,oBAAY,kBAAkB,GAAG,WAAW,GAAG;IAC7C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,oBAAY,yBAAyB,GAAG,kBAAkB,GAAG;IAC3D,cAAc,EAAE,qBAAqB,CAAC;IACtC,WAAW,EAAE,kBAAkB,CAAC;IAChC,WAAW,EAAE,qBAAqB,CAAC;IACnC,SAAS,EAAE,WAAW,CAAC;IACvB,WAAW,EAAE,kBAAkB,CAAC;IAChC,YAAY,EAAE,WAAW,CAAC;IAC1B,QAAQ,EAAE,eAAe,CAAC;CAC3B,CAAC;AAEF,oBAAY,kBAAkB,CAC5B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,WAAW,GAAG;IAChB,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,CAAC;IAClC,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,oBAAY,uBAAuB,GAAG;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,oBAAY,eAAe,CACzB,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,WAAW,GACb,uBAAuB,GAAG;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC;CACzC,CAAC;AAEJ,oBAAY,aAAa,GACrB,UAAU,GACV,cAAc,GACd,oBAAoB,GACpB,0BAA0B,GAC1B,aAAa,GACb,mBAAmB,GACnB,yBAAyB,CAAC;AAE9B,oBAAY,cAAc,GAAG;IAC3B,qCAAqC;IACrC,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,gDAAgD;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mCAAmC;IACnC,gBAAgB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;IAC9D,uEAAuE;IACvE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC"}

package/dist/utils.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { UserResponse } from 'stream-chat';
-import type { DefaultUserType } from './types/types';
+import type { DefaultStreamChatGenerics } from './types/types';
 export declare const isOnlyEmojis: (text?: string | undefined) => boolean;
 export declare const matchMarkdownLinks: (message: string) => (string | null)[];
 export declare const messageCodeBlocks: (message: string) => RegExpMatchArray;
@@ -8,16 +8,16 @@ export declare const markDownRenderers: {
     [nodeType: string]: React.ElementType;
 };
 export declare const emojiMarkdownPlugin: () => <T extends unknown>(markdownAST: T) => T;
-export declare const mentionsMarkdownPlugin: <Us extends DefaultUserType<Us> = DefaultUserType<import("./types/types").DefaultUserTypeInternal>>(mentioned_users: UserResponse<Us>[]) => () => <T extends unknown>(markdownAST: T) => T;
-export declare type MentionProps<Us extends DefaultUserType<Us> = DefaultUserType> = {
-    mentioned_user: UserResponse<Us>;
+export declare const mentionsMarkdownPlugin: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(mentioned_users: UserResponse<StreamChatGenerics>[]) => () => <T extends unknown>(markdownAST: T) => T;
+export declare type MentionProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
+    mentioned_user: UserResponse<StreamChatGenerics>;
 };
 export declare type RenderTextOptions = {
     customMarkDownRenderers?: {
         [nodeType: string]: React.ElementType;
     };
 };
-export declare const renderText: <Us extends DefaultUserType<Us> = DefaultUserType<import("./types/types").DefaultUserTypeInternal>>(text?: string | undefined, mentioned_users?: UserResponse<Us>[] | undefined, options?: RenderTextOptions) => JSX.Element | null;
+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;
 export declare const getWholeChar: (str: string, i: number) => string;

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,eAAe,EAAE,MAAM,eAAe,CAAC;AAErD,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,4LAiClC,CAAC;AAEF,oBAAY,YAAY,CAAC,EAAE,SAAS,eAAe,CAAC,EAAE,CAAC,GAAG,eAAe,IAAI;IAC3E,cAAc,EAAE,YAAY,CAAC,EAAE,CAAC,CAAC;CAClC,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,6LAGZ,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;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"}

package/dist/version.d.ts

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

package/dist/version.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stream-chat-react",
-  "version": "7.0.0",
+  "version": "8.1.1",
   "description": "React components to create chat conversations or livestream style chat",
   "author": "GetStream",
   "homepage": "https://getstream.io/chat/",
@@ -16,6 +16,7 @@
   "sideEffects": [
     "*.css"
   ],
+  "source": "src/index.tsx",
   "jsdelivr": "./dist/browser.full-bundle.min.js",
   "keywords": [
     "chat",
@@ -27,13 +28,12 @@
     "getstream.io"
   ],
   "dependencies": {
-    "@braintree/sanitize-url": "5.0.0",
-    "@stream-io/stream-chat-css": "^2.2.1",
-    "custom-event": "^1.0.1",
+    "@braintree/sanitize-url": "6.0.0",
+    "@stream-io/stream-chat-css": "^2.8.0",
     "dayjs": "^1.10.4",
     "emoji-mart": "3.0.1",
     "emoji-regex": "^9.2.0",
-    "i18next": "^19.8.4",
+    "i18next": "^21.6.14",
     "isomorphic-ws": "^4.0.1",
     "linkifyjs": "^2.1.9",
     "lodash.debounce": "^4.0.8",
@@ -50,7 +50,7 @@
     "react-markdown": "^5.0.3",
     "react-player": "^2.7.0",
     "react-textarea-autosize": "^8.3.0",
-    "react-virtuoso": "^2.3.1",
+    "react-virtuoso": "^2.8.2",
     "textarea-caret": "^3.1.0",
     "uuid": "^8.3.1"
   },
@@ -61,7 +61,7 @@
   "peerDependencies": {
     "react": "^17.0.0 || ^16.8.0",
     "react-dom": "^17.0.0 || ^16.8.0",
-    "stream-chat": "^5.0.0"
+    "stream-chat": "^6.5.0"
   },
   "files": [
     "dist",
@@ -78,17 +78,23 @@
     "@babel/preset-env": "^7.12.7",
     "@babel/preset-react": "^7.12.7",
     "@babel/preset-typescript": "^7.12.7",
+    "@commitlint/cli": "^16.2.3",
+    "@commitlint/config-conventional": "^16.2.1",
+    "@ladle/react": "^0.11.0",
+    "@playwright/test": "^1.20.0",
     "@rollup/plugin-babel": "^5.2.1",
     "@rollup/plugin-image": "^2.1.1",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^10.0.0",
     "@rollup/plugin-replace": "^2.3.4",
     "@rollup/plugin-typescript": "8.2.1",
+    "@semantic-release/changelog": "^6.0.1",
     "@stream-io/rollup-plugin-node-builtins": "^2.1.5",
     "@testing-library/jest-dom": "5.11.6",
     "@testing-library/react": "^11.2.2",
     "@testing-library/react-hooks": "^3.4.2",
     "@types/deep-equal": "^1.0.1",
+    "@types/dotenv": "^8.2.0",
     "@types/emoji-mart": "^3.0.8",
     "@types/linkifyjs": "^2.1.3",
     "@types/lodash.debounce": "^4.0.6",
@@ -96,6 +102,7 @@
     "@types/lodash.throttle": "^4.1.6",
     "@types/lodash.uniqby": "^4.7.6",
     "@types/moment": "^2.13.0",
+    "@types/react": "17.0.3",
     "@types/react-dom": "^17.0.0",
     "@types/react-image-gallery": "^1.0.5",
     "@types/react-is": "^17.0.0",
@@ -107,7 +114,6 @@
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.3.0",
     "babel-loader": "8.2.2",
-    "babel-plugin-i18next-extract": "^0.8.2",
     "babel-plugin-module-resolver": "^4.1.0",
     "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
     "codecov": "^3.8.1",
@@ -132,10 +138,12 @@
     "eslint-plugin-react": "^7.21.5",
     "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-sort-destructure-keys": "1.3.5",
+    "eslint-plugin-sort-keys-fix": "^1.1.2",
     "eslint-plugin-typescript-sort-keys": "1.5.0",
     "file-loader": "^6.2.0",
     "htmlparser2": "^5.0.1",
     "husky": "^4.3.0",
+    "i18next-parser": "^6.0.0",
     "jest": "^26.6.3",
     "jest-axe": "^5.0.1",
     "moment": "^2.29.1",
@@ -154,9 +162,9 @@
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-url": "^3.0.1",
     "rollup-plugin-visualizer": "^4.2.0",
-    "semantic-release": "^18.0.0",
+    "semantic-release": "^19.0.2",
     "semantic-release-cli": "^5.4.4",
-    "stream-chat": "^5.0.0",
+    "stream-chat": "^6.5.0",
     "style-loader": "^2.0.0",
     "ts-jest": "^26.5.1",
     "tslib": "2.3.0",
@@ -168,7 +176,8 @@
   },
   "husky": {
     "hooks": {
-      "pre-commit": "dotgit/hooks/pre-commit-format.sh && dotgit/hooks/pre-commit-reject-binaries.py"
+      "pre-commit": "dotgit/hooks/pre-commit-format.sh && dotgit/hooks/pre-commit-reject-binaries.py",
+      "commit-msg": "npx commitlint --edit $1"
     }
   },
   "scripts": {
@@ -176,9 +185,9 @@
     "build": "rm -rf dist && mkdir -p dist/assets assets && yarn --silent copy-version && yarn build-translations && yarn types && yarn bundle",
     "bundle": "rollup -c",
     "bundle-size": "BUNDLE_SIZE=true yarn bundle",
-    "build-translations": "rm -rf .tmpi18ncache || true && mkdir .tmpi18ncache && yarn run babel --config-file ./babel.i18next-extract.js --extensions '.ts','.tsx','.js','.jsx' 'src/**/*.{js,jsx,ts,tsx}' --out-dir '.tmpi18ncache/' && rm -rf .tmpi18ncache && prettier --write 'src/i18n/*.{js,jsx,ts,tsx,json}'",
-    "copy-version": "echo '\u001b[34mℹ\u001b[0m Copying Version to \u001b[34msrc/version.ts\u001b[0m' && PACKAGE_VERSION=$(node -pe 'require(`./package.json`).version') && PACKAGE_STRING=\"'$PACKAGE_VERSION'\" && echo 'export const version = '$PACKAGE_STRING';' > src/version.ts && echo '\u001b[32m✓\u001b[0m Done Copying Version'",
-    "coverage": "yarn test --collectCoverage && codecov",
+    "build-translations": "i18next",
+    "copy-version": "echo '\u001b[34mℹ\u001b[0m Copying Version to \u001b[34msrc/version.ts\u001b[0m' && PACKAGE_VERSION=$(node -pe 'require(`./package.json`).version') && PACKAGE_STRING=\"'$PACKAGE_VERSION'\" && echo 'export const version = '$PACKAGE_STRING';' > ./src/version.ts && echo '\u001b[32m✓\u001b[0m Done Copying Version'",
+    "coverage": "jest --collectCoverage && codecov",
     "eslint": "eslint '**/*.{js,md,ts,jsx,tsx}' --max-warnings 0",
     "lint": "prettier --list-different 'src/**/*.{js,ts,tsx,md,json}' .eslintrc.json .prettierrc babel.config.js && eslint 'src/**/*.{js,ts,tsx,md}' --max-warnings 0 && yarn validate-translations",
     "lint-fix": "prettier --write 'src/**/*.{js,ts,tsx,md,json}' .eslintrc.json .prettierrc babel.config.js && eslint --fix 'src/**/*.{js,ts,tsx,md}' --max-warnings 0",
@@ -190,7 +199,10 @@
     "test": "jest",
     "types": "tsc --strict",
     "validate-translations": "node scripts/validate-translations.js",
-    "semantic-release": "semantic-release"
+    "semantic-release": "semantic-release",
+    "browse-examples": "ladle serve",
+    "e2e": "playwright test",
+    "e2e-fixtures": "node e2e/fixtures.mjs"
   },
   "resolutions": {
     "ast-types": "^0.14.0"

package/dist/components/InfiniteScrollPaginator/InfiniteScrollPaginator.d.ts

@@ -1,18 +0,0 @@
-import React from 'react';
-import type { LoadingIndicatorProps } from '../Loading/LoadingIndicator';
-export declare type InfiniteScrollPaginatorProps = {
-    /** callback to load the next page */
-    loadNextPage: () => void;
-    /** indicates if there is a next page to load */
-    hasNextPage?: boolean;
-    /** The loading indicator to use */
-    LoadingIndicator?: React.ComponentType<LoadingIndicatorProps>;
-    /** indicates if there there's currently any refreshing taking place */
-    refreshing?: boolean;
-    /** display the items in opposite order */
-    reverse?: boolean;
-    /** Offset from when to start the loadNextPage call */
-    threshold?: number;
-};
-export declare const InfiniteScrollPaginator: React.FC<InfiniteScrollPaginatorProps>;
-//# sourceMappingURL=InfiniteScrollPaginator.d.ts.map

package/dist/components/InfiniteScrollPaginator/InfiniteScrollPaginator.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"InfiniteScrollPaginator.d.ts","sourceRoot":"","sources":["../../../src/components/InfiniteScrollPaginator/InfiniteScrollPaginator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AAEzE,oBAAY,4BAA4B,GAAG;IACzC,qCAAqC;IACrC,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,gDAAgD;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mCAAmC;IACnC,gBAAgB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;IAC9D,uEAAuE;IACvE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,4BAA4B,CA4B1E,CAAC"}

package/dist/components/InfiniteScrollPaginator/InfiniteScrollPaginator.js

@@ -1,8 +0,0 @@
-import React from 'react';
-import { LoadingIndicator as DefaultLoadingIndicator } from 'react-file-utils';
-import { InfiniteScroll } from './InfiniteScroll';
-export var InfiniteScrollPaginator = function (props) {
-    var children = props.children, hasNextPage = props.hasNextPage, _a = props.LoadingIndicator, LoadingIndicator = _a === void 0 ? DefaultLoadingIndicator : _a, loadNextPage = props.loadNextPage, refreshing = props.refreshing, reverse = props.reverse, threshold = props.threshold;
-    return (React.createElement(InfiniteScroll, { hasMore: hasNextPage, isLoading: refreshing, isReverse: reverse, loader: React.createElement("div", { className: 'str-chat__infinite-scroll-paginator', key: 'loadingindicator' },
-            React.createElement(LoadingIndicator, null)), loadMore: loadNextPage, threshold: threshold, useWindow: false }, children));
-};

package/dist/components/InfiniteScrollPaginator/ReverseInfiniteScroll.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { InfiniteScrollProps } from './InfiniteScroll';
-export declare const ReverseInfiniteScroll: React.FC<InfiniteScrollProps>;
-//# sourceMappingURL=ReverseInfiniteScroll.d.ts.map

package/dist/components/InfiniteScrollPaginator/ReverseInfiniteScroll.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ReverseInfiniteScroll.d.ts","sourceRoot":"","sources":["../../../src/components/InfiniteScrollPaginator/ReverseInfiniteScroll.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAkB,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAEvE,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAE/D,CAAC"}

package/dist/components/InfiniteScrollPaginator/ReverseInfiniteScroll.js

@@ -1,14 +0,0 @@
-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);
-};
-import React from 'react';
-import { InfiniteScroll } from './InfiniteScroll';
-export var ReverseInfiniteScroll = function (props) { return (React.createElement(InfiniteScroll, __assign({}, props, { isReverse: true }))); };

package/dist/components/MessageList/hooks/useCallLoadMore.d.ts

@@ -1,3 +0,0 @@
-import type { MessageListProps } from '../MessageList';
-export declare const useCallLoadMore: (loadMore: MessageListProps['loadMore'], limit: number) => () => void;
-//# sourceMappingURL=useCallLoadMore.d.ts.map

package/dist/components/MessageList/hooks/useCallLoadMore.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useCallLoadMore.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageList/hooks/useCallLoadMore.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAEvD,eAAO,MAAM,eAAe,aAAc,gBAAgB,CAAC,UAAU,CAAC,SAAS,MAAM,eAK9D,CAAC"}

package/dist/components/MessageList/hooks/useCallLoadMore.js

@@ -1,8 +0,0 @@
-import { useCallback } from 'react';
-export var useCallLoadMore = function (loadMore, limit) {
-    return useCallback(function () {
-        if (loadMore) {
-            loadMore(limit);
-        }
-    }, [limit, loadMore]);
-};