stream-chat-react 7.0.0 → 8.1.1

package/dist/scss/MessageInputFlat.scss

@@ -43,6 +43,8 @@
           display: flex;
           text-align: start;
           align-items: flex-end;
+          word-break: break-all;
+          word-wrap: break-word;
 
           .str-chat__message-attachment {
             margin: 0;
@@ -108,6 +110,10 @@
 
   .str-chat__textarea {
     flex: 1;
+
+    &.str-chat-angular__textarea {
+      position: relative;
+    }
   }
 
   .str-chat__textarea > textarea {
@@ -133,6 +139,13 @@
     background: var(--white);
   }
 
+  .str-chat-angular__cooldown {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    left: 25px;
+  }
+
   &-emojiselect {
     position: absolute;
     top: calc(100% - 45px);
@@ -142,6 +155,13 @@
     padding: 0;
     background-color: transparent;
 
+    &.str-chat-angular__emojiselect {
+      max-width: 28px;
+      top: 50%;
+      transform: translateY(-50%);
+      cursor: initial;
+    }
+
     svg {
       fill: var(--black);
       opacity: 0.5;
@@ -269,6 +289,10 @@
         fill: var(--white);
       }
     }
+
+    &-quoted .quoted-message-preview-content {
+      background: var(--black20);
+    }
   }
 
   &.commerce {

package/dist/scss/MessageList.scss

@@ -49,6 +49,7 @@
   padding: var(--xs-p);
   font-family: var(--second-font);
   text-align: center;
+  margin-top: var(--xs-m);
 
   &.notification-success {
     background: var(--faded-green);
@@ -61,6 +62,12 @@
     border: 1px solid var(--red);
     color: var(--red);
   }
+
+  &.notification-info {
+    background: var(--faded-blue);
+    border: 1px solid var(--blue);
+    color: var(--blue);
+  }
 }
 
 .str-chat__connection-issue {

package/dist/scss/MessageNotification.scss

@@ -15,35 +15,23 @@
     align-self: flex-end;
   }
 
-  &-scroll-down {
+  &-scroll-to-latest {
     cursor: pointer;
-    display: block;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     width: 42px;
     height: 42px;
-    background-size: 14px auto;
     border-radius: 50%;
     background: var(--white);
+    color: var(--primary-color);
     box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
 
-    &::before {
-      position: absolute;
-      top: calc(50% - 8px);
-      left: calc(50% - 6px);
-      transform: rotate(-45deg);
-      display: block;
-      width: 12px;
-      height: 12px;
-      content: '';
-      border: 2px solid var(--primary-color);
-      border-width: 0 0 2px 2px;
-    }
-
     &-unread-count {
       font-size: 10px;
-      position: relative;
       left: 50%;
       transform: translateX(-50%);
-      bottom: 18px;
+      bottom: 30px;
     }
   }
 }

package/dist/scss/ReactionList.scss

@@ -46,7 +46,8 @@
       }
     }
 
-    .emoji-mart-emoji {
+    .emoji-mart-emoji,
+    .str-chat__emoji {
       display: flex;
     }
 

package/dist/scss/ReactionSelector.scss

@@ -143,7 +143,8 @@ button.str-chat__message-reactions-list-item {
     }
   }
 
-  .emoji-mart-emoji:hover {
+  .emoji-mart-emoji:hover,
+  .str-chat__emoji:hover {
     transition: 0.1s;
     transform: scale(1.2);
     cursor: pointer;

package/dist/scss/SimpleReactionsList.scss

@@ -45,7 +45,8 @@
       line-height: 1;
     }
 
-    .emoji-mart-emoji {
+    .emoji-mart-emoji,
+    .str-chat__emoji {
       &:hover {
         transition: transform 0.2s ease-in-out;
         transform: scale(1.2);

package/dist/scss/SmallMessageInput.scss

@@ -36,6 +36,20 @@
     background-color: transparent;
   }
 
+  .str-chat-angular__emojiselect {
+    width: auto;
+    height: auto;
+    left: 15px;
+    max-width: 20px;
+  }
+
+  .str-chat-angular__cooldown {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 15px;
+  }
+
   .rfu-file-upload-button {
     bottom: 9px;
     right: 26px;
@@ -72,6 +86,12 @@
     transform-origin: 100% 100%;
   }
 
+  &-has-attachments {
+    .str-chat__send-button {
+      display: block;
+    }
+  }
+
   &--send-button {
     background: none;
     border: none;
@@ -95,11 +115,25 @@
     font-size: var(--sm-font);
     padding: 10px 44px 8px 8px;
 
+    &.str-chat__angular-textarea {
+      padding: 10px 35px 8px;
+    }
+
     &:focus {
       height: 36px;
     }
   }
 
+  .str-chat-angular__textarea {
+    position: relative;
+
+    + .str-chat__fileupload-wrapper {
+      .rfu-file-upload-button {
+        right: 15px;
+      }
+    }
+  }
+
   .str-chat__emojisearch {
     bottom: 100%;
   }

package/dist/scss/Thread.scss

@@ -3,7 +3,6 @@
   flex: 1 0 300px;
   min-width: 300px;
   max-width: 300px;
-  overflow-y: hidden;
   font-family: var(--second-font);
   overflow: hidden;
   max-height: 100%;
@@ -62,11 +61,18 @@
     .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--file {
-      border-radius: var(--border-radius-md);
-      border-bottom: 1px solid var(--grey-whisper);
+    .str-chat__message-attachment.str-chat__message-attachment {
+      &--file {
+        border-radius: var(--border-radius-md);
+        border-bottom: 1px solid var(--grey-whisper);
+      }
+
+      &--media {
+        width: 100%;
+      }
     }
 
     .quoted-message {
@@ -207,7 +213,8 @@
         background: var(--white5);
 
         &-header {
-          background: var(--black80);
+          background: var(--dark-grey);
+
           box-shadow: 0 7px 9px 0 var(--black5), 0 1px 0 0 var(--black5);
           color: var(--white);
         }
@@ -224,6 +231,11 @@
       }
     }
   }
+
+  /** Quoted message preview in thread should not be squeezed to less than 100% for better readability */
+  .str-chat__input-flat-quoted .quoted-message-preview-content {
+    max-width: 100%;
+  }
 }
 
 .team {
@@ -304,3 +316,11 @@
     }
   }
 }
+
+.dark.str-chat.messaging {
+  .str-chat__thread-list {
+    .quoted-message-inner {
+      background: var(--dark-grey);
+    }
+  }
+}

package/dist/scss/VirtualMessage.scss

@@ -73,6 +73,7 @@
         display: flex;
         align-items: flex-end;
         margin-bottom: var(--xxs-m);
+        cursor: pointer;
 
         &-inner {
           display: flex;
@@ -197,6 +198,11 @@
   position: relative;
   cursor: pointer;
 
+  button {
+    border: none;
+    background: transparent;
+  }
+
   svg {
     fill: var(--black);
     opacity: 0.5;

package/dist/scss/_base.scss

@@ -49,6 +49,10 @@
   font-family: var(--second-font);
   color: var(--black);
 
+  &.dark {
+    color: var(--white);
+  }
+
   &.messaging,
   &.commerce {
     background-color: var(--grey-gainsboro);

package/dist/scss/_variables.scss

@@ -18,7 +18,7 @@ $border-color: #00000014;
 
 $black: #000000;
 $white: #ffffff;
-$grey: #f0f0f0;
+$grey: #7a7a7a;
 $darken-grey: #343434;
 $lighten-black: #808080;
 $lighten-grey: #858585;
@@ -54,6 +54,8 @@ $border-radius: 16px;
   --magenta: #{$primary-color};
   --red: #ff0000;
   --faded-red: #d0021b1a;
+  --blue: #026afa;
+  --faded-blue: #cfe3ff;
 
   --dt-bg-team: #{$dt-bg-team};
 
@@ -64,7 +66,7 @@ $border-radius: 16px;
   --lighten-grey: #{$lighten-grey};
 
   --light-grey: #ebebeb;
-  --grey: #{$lighten-black};
+  --grey: #{$grey};
   --dark-grey: #{$darken-grey};
 
   --green: #28ca42;
@@ -136,12 +138,10 @@ $border-radius: 16px;
 
   --bg-gradient-end: #f7f7f7;
   --bg-gradient-start: #fcfcfc;
-  --black: #000000;
   --blue-alice: #e9f2ff;
   --border: #00000014; // 14 = 8% opacity; top: x=0, y=-1; bottom: x=0, y=1
   --button-background: #ffffff;
   --button-text: #005fff;
-  --grey: #7a7a7a;
   --grey-gainsboro: #dbdbdb;
   --grey-whisper: #ecebeb;
   --highlight: #fbf4dd;
@@ -151,7 +151,6 @@ $border-radius: 16px;
   --shadow-icon: #00000040; // 40 = 25% opacity; x=0, y=0, radius=4
   --targetedMessageBackground: #fbf4dd; // dark mode = #302D22
   --transparent: transparent;
-  --white: #ffffff;
   --white-smoke: #f2f2f2;
   --white-snow: #fcfcfc;
 

package/dist/stories/connected-user.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=connected-user.stories.d.ts.map

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

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

package/dist/stories/connected-user.stories.js

@@ -0,0 +1,55 @@
+/* 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';
+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: 'Hello world!',
+                });
+            } }, "Add message")));
+};
+// 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 }),
+        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/hello.stories.d.ts

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

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

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

package/dist/stories/hello.stories.js

@@ -0,0 +1,47 @@
+/* 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';
+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;
+if (!channelId || typeof channelId !== 'string') {
+    throw new Error('expected ADD_MESSAGE_CHANNEL');
+}
+// Sort in reverse order to avoid auto-selecting unread channel
+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))));
+};

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

@@ -0,0 +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;
+//# sourceMappingURL=jump-to-message.stories.d.ts.map

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

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

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

@@ -0,0 +1,111 @@
+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, useState } from 'react';
+import { StreamChat } from 'stream-chat';
+import { Channel, Chat, MessageList, useChannelActionContext, VirtualizedMessageList, Window, } from '../index';
+import '@stream-io/stream-chat-css/dist/css/index.css';
+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;
+    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) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, chatClient.search({
+                            id: { $eq: channelId },
+                        }, 'Message 29', { limit: 1, offset: 0 })];
+                    case 1:
+                        results = _a.sent();
+                        jumpToMessage(results.results[0].message.id);
+                        return [2 /*return*/];
+                }
+            });
+        }); } }, "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))))));
+};

package/dist/stories/mark-read.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=mark-read.stories.d.ts.map

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

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