stream-chat-react 9.0.0 → 9.1.1

package/dist/scss/Message.scss

@@ -888,7 +888,7 @@
   }
 
   > .str-chat__avatar,
-  > .str-chat-angular__avatar-host > .str-chat__avatar {
+  > .str-chat-angular__avatar-host .str-chat__avatar {
     align-self: flex-end;
     margin-right: 0;
   }

package/dist/scss/MessageActions.scss

@@ -110,3 +110,22 @@
     align-items: center;
   }
 }
+
+.str-chat__message-moderation-error-actions-box {
+  display: flex;
+  justify-content: flex-end;
+  padding-top: var(--xs-p);
+  padding-bottom: var(--xs-p);
+  gap: var(--xs-p);
+
+  button {
+    border: none;
+    background: none;
+    font-weight: var(--font-weight-semi-bold);
+    color: var(--secondary-button-text);
+
+    &.str-chat__message-moderation-error-actions-box--primary {
+      color: var(--button-text);
+    }
+  }
+}

package/dist/scss/MessageList.scss

@@ -3,16 +3,31 @@
   overflow-y: auto;
 }
 
+// conditionally showing the loading indicator displaces items when prepending.
+// a simple workaround is to make the loading indicator an overlay.
+%loading-indicator-container {
+  display: flex;
+  padding-top: var(--xs-p);
+  justify-content: center;
+  width: 100%;
+  position: absolute;
+}
+
 .str-chat-angular__message-list-host {
   @extend %scrollable;
 }
 
 .str-chat__list {
   @extend %scrollable;
+  position: relative;
   flex: 1;
   -webkit-overflow-scrolling: touch; /* enable smooth scrolling on ios */
   padding: 0;
 
+  &__loading {
+    @extend %loading-indicator-container;
+  }
+
   .str-chat__reverse-infinite-scroll {
     padding-top: 72px;
   }
@@ -177,14 +192,8 @@
   width: 100%;
   height: 100%;
 
-  // conditionally showing the header displaces items when prepending.
-  // a simple workaround is to make the loading indicator an overlay.
   &__loading {
-    display: flex;
-    padding-top: var(--xs-p);
-    justify-content: center;
-    width: 100%;
-    position: absolute;
+    @extend %loading-indicator-container;
   }
 
   p {

package/dist/scss/Modal.scss

@@ -15,7 +15,6 @@
   }
 
   &__inner {
-    max-width: 667px;
     background: var(--white);
     padding: var(--md-p);
     border-radius: var(--border-radius-md);
@@ -48,7 +47,7 @@
   }
 
   .str-chat__edit-message-form {
-    min-width: 300px;
+    width: var(--modal-edit-message-form-width);
   }
 
   .str-chat__input-emojiselect,

package/dist/scss/Thread.scss

@@ -61,7 +61,6 @@
     .str-chat__message:first-of-type .str-chat__message-inner {
       margin-left: unset;
       margin-right: unset;
-      width: 100%;
     }
 
     .str-chat__message-attachment.str-chat__message-attachment {

package/dist/scss/_variables.scss

@@ -142,6 +142,7 @@ $border-radius: 16px;
   --border: #00000014; // 14 = 8% opacity; top: x=0, y=-1; bottom: x=0, y=1
   --button-background: #ffffff;
   --button-text: #005fff;
+  --secondary-button-text: var(--grey);
   --grey-gainsboro: #dbdbdb;
   --grey-whisper: #ecebeb;
   --highlight: #fbf4dd;
@@ -155,4 +156,5 @@ $border-radius: 16px;
   --white-snow: #fcfcfc;
 
   --modal-overlay-color: rgba(0, 0, 0, 0.89);
+  --modal-edit-message-form-width: 47em;
 }

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

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

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

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

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

@@ -0,0 +1,54 @@
+import '@stream-io/stream-chat-css/dist/css/index.css';
+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,
+        React.createElement("button", { "data-testid": 'truncate', onClick: function () { return channel.truncate(); } }, "Truncate"),
+        React.createElement("button", { "data-testid": 'add-message', onClick: function () {
+                return channel.sendMessage({
+                    attachments: [
+                        {
+                            fallback: 'A.png',
+                            image_url: 'https://getstream.imgix.net/images/random_svg/A.png',
+                            type: 'image',
+                        },
+                        {
+                            fallback: 'B.png',
+                            image_url: 'https://getstream.imgix.net/images/random_svg/B.png',
+                            type: 'image',
+                        },
+                    ],
+                    text: 'chat: https://getstream.io/chat/\nactivity-feeds: https://getstream.io/activity-feeds/',
+                });
+            } }, "Add message")));
+};
+// Sort in reverse order to avoid auto-selecting unread channel
+var sort = { last_updated: 1 };
+var WrappedConnectedUser = function (_a) {
+    var token = _a.token, userId = _a.userId;
+    return (React.createElement(ConnectedUser, { token: token, userId: userId },
+        React.createElement(ChannelList, { filters: { id: { $eq: 'edit-message-channel' }, members: { $in: [userId] } }, 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))));
+};
+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 });
+};

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

@@ -1 +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"}
+{"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;AAsKvD,eAAO,MAAM,KAAK,mBAQjB,CAAC;AAEF,eAAO,MAAM,KAAK,mBAQjB,CAAC"}

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

@@ -111,10 +111,11 @@ var SetThreadOpen = function () {
     var openThread = useChannelActionContext().openThread;
     var messages = useChannelStateContext().messages;
     useEffect(function () {
-        if (messages) {
-            var lastMsg = messages.slice(-1)[0];
+        if (!messages)
+            return;
+        var lastMsg = messages.slice(-1)[0];
+        if (lastMsg)
             openThread(lastMsg, { preventDefault: function () { return null; } });
-        }
     }, [messages]);
     return null;
 };
@@ -136,6 +137,7 @@ var OtherUserControls = function () {
 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 }),

package/dist/types/types.d.ts

@@ -1,6 +1,6 @@
 import type { PropsWithChildren } from 'react';
 import type { LoadingIndicatorProps } from '../components/Loading/LoadingIndicator';
-import type { Event, ExtendableGenerics, LiteralStringForUnion, Mute } from 'stream-chat';
+import type { APIErrorResponse, 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 = {
@@ -37,6 +37,7 @@ export declare type DefaultStreamChatGenerics = ExtendableGenerics & {
 export declare type DefaultMessageType<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = UnknownType & {
     customType?: CustomMessageType;
     date?: string | Date;
+    error?: ErrorFromResponse<APIErrorResponse>;
     errorStatusCode?: number;
     event?: Event<StreamChatGenerics>;
     unread?: boolean;

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 = "9.0.0";
+export declare const version = "9.1.1";
 //# sourceMappingURL=version.d.ts.map

package/dist/version.js

@@ -1 +1 @@
-export var version = '9.0.0';
+export var version = '9.1.1';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stream-chat-react",
-  "version": "9.0.0",
+  "version": "9.1.1",
   "description": "React components to create chat conversations or livestream style chat",
   "author": "GetStream",
   "homepage": "https://getstream.io/chat/",
@@ -29,7 +29,8 @@
   ],
   "dependencies": {
     "@braintree/sanitize-url": "6.0.0",
-    "@stream-io/stream-chat-css": "^2.8.0",
+    "@juggle/resize-observer": "^3.3.1",
+    "@stream-io/stream-chat-css": "^2.10.0",
     "dayjs": "^1.10.4",
     "emoji-mart": "3.0.1",
     "emoji-regex": "^9.2.0",
@@ -45,7 +46,7 @@
     "pretty-bytes": "^5.4.1",
     "prop-types": "^15.7.2",
     "react-fast-compare": "^3.2.0",
-    "react-file-utils": "^1.1.11",
+    "react-file-utils": "^1.1.12",
     "react-image-gallery": "^1.2.7",
     "react-is": "^18.1.0",
     "react-markdown": "^5.0.3",
@@ -61,7 +62,7 @@
   "peerDependencies": {
     "react": "^18.0.0 || ^17.0.0 || ^16.8.0",
     "react-dom": "^18.0.0 || ^17.0.0 || ^16.8.0",
-    "stream-chat": "^6.5.0"
+    "stream-chat": "^6.6.0"
   },
   "files": [
     "dist",
@@ -80,7 +81,7 @@
     "@babel/preset-typescript": "^7.12.7",
     "@commitlint/cli": "^16.2.3",
     "@commitlint/config-conventional": "^16.2.1",
-    "@ladle/react": "^0.11.0",
+    "@ladle/react": "^0.16.0",
     "@playwright/test": "^1.22.0",
     "@rollup/plugin-babel": "^5.2.1",
     "@rollup/plugin-image": "^2.1.1",
@@ -165,7 +166,7 @@
     "rollup-plugin-visualizer": "^4.2.0",
     "semantic-release": "^19.0.2",
     "semantic-release-cli": "^5.4.4",
-    "stream-chat": "^6.5.0",
+    "stream-chat": "^6.6.0",
     "style-loader": "^2.0.0",
     "ts-jest": "^26.5.1",
     "tslib": "2.3.0",