stream-chat-react 6.13.0 → 8.1.0

package/dist/scss/Attachment.scss

@@ -33,6 +33,11 @@
     padding: 0;
   }
 
+  /** Let giphies stretch their containers */
+  &-attachment--giphy {
+    max-width: unset;
+  }
+
   &--me {
     .str-chat__message-attachment {
       padding-left: 0;
@@ -161,7 +166,7 @@
   }
 
   &--media {
-    width: 300px;
+    max-width: 300px;
   }
 
   &-card {

package/dist/scss/Avatar.scss

@@ -59,7 +59,7 @@
     > .str-chat-angular__avatar-host {
       @extend %order;
 
-      > .str-chat__avatar {
+      .str-chat__avatar {
         @extend %margin;
       }
     }

package/dist/scss/ChannelHeader.scss

@@ -133,7 +133,7 @@
     .str-chat {
       &__header-livestream {
         position: relative;
-        z-index: 1;
+        z-index: 2;
         border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
         background: var(--white-snow);
         box-shadow: 0 7px 9px 0 var(--border), 0 1px 0 0 var(--border);
@@ -263,16 +263,18 @@
 .str-chat__header-hamburger {
   width: 30px;
   height: 38px;
-  padding: var(--xs-p) var(--xs-p) var(--xs-p) 0;
+  padding: var(--xxs-p);
   margin-right: var(--xs-m);
   display: none;
-  flex-direction: column;
-  justify-content: space-around;
+  align-items: center;
+  justify-content: center;
   cursor: pointer;
+  border: none;
+  background: transparent;
 
   &:hover {
-    .str-chat__header-hamburger--line {
-      background: var(--primary-color);
+    svg path {
+      fill: var(--primary-color);
     }
   }
 
@@ -280,10 +282,3 @@
     display: flex;
   }
 }
-
-.str-chat__header-hamburger--line {
-  width: 100%;
-  height: 2px;
-  background: var(--primary-color);
-  border-radius: var(--border-radius-sm);
-}

package/dist/scss/Gallery.scss

@@ -37,6 +37,25 @@
   }
 }
 
+.stream-chat-angular__image-modal {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &-stepper {
+    padding: 10px;
+    border: none;
+    cursor: pointer;
+    background: transparent;
+  }
+
+  &-image {
+    object-fit: cover;
+    max-width: 90%;
+    max-height: 90%;
+  }
+}
+
 .livestream.str-chat,
 .messaging.str-chat,
 .commerce.str-chat,

package/dist/scss/Message.scss

@@ -6,6 +6,8 @@
     display: flex;
     align-items: flex-end;
     margin-bottom: var(--xxs-m);
+    /** clicking on the quoted message navigates to its original location in the message list*/
+    cursor: pointer;
 
     &-inner {
       display: flex;
@@ -293,6 +295,7 @@
   position: relative;
   margin: calc(var(--xxs-m) / 2) 0;
   width: 100%;
+  transition: background-color 0.5s ease-out;
 
   &--system {
     text-align: center;
@@ -370,13 +373,16 @@
       border: 1px solid var(--border);
       margin-left: 0; /* set spacing when unfocused */
 
+      // Fixes emoji display in Chrome https://bugs.chromium.org/p/chromium/issues/detail?id=596223
+      .str-chat__emoji-display-fix {
+        display: inline-block;
+        width: 1.25em;
+      }
+
       p {
-        /* Make sure really long urls and words don't break out.
-        ** https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/ */
-        overflow-wrap: break-word;
+        /* Make sure really long urls and words don't break out.*/
         word-wrap: break-word;
-        overflow: hidden;
-        text-overflow: ellipsis;
+        word-break: break-word;
 
         /* Adds a hyphen where the word breaks, if supported (No Blink) */
         -ms-hyphens: auto;
@@ -537,6 +543,11 @@
     margin-top: var(--md-m);
   }
 
+  &--highlighted {
+    transition: background-color 0.1s ease-out;
+    background-color: var(--highlight);
+  }
+
   &-link {
     color: var(--primary-color);
     font-weight: var(--font-weight-bold);
@@ -547,13 +558,6 @@
     font-weight: var(--font-weight-bold);
   }
 
-  &-url-link {
-    max-width: 150px;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-  }
-
   &--inner {
     display: flex;
     flex-direction: column;
@@ -747,6 +751,8 @@
       flex: initial;
       text-align: left;
       max-width: 460px;
+      word-wrap: break-word;
+      word-break: break-word;
 
       &.str-chat__message-simple-text-inner--is-emoji {
         background: transparent;
@@ -764,6 +770,12 @@
         color: var(--primary-color);
         font-weight: var(--font-weight-bold);
         text-decoration: none;
+
+        &:active,
+        &:focus,
+        &:hover {
+          text-decoration: underline;
+        }
       }
 
       blockquote {
@@ -1189,7 +1201,6 @@
   // fixes the overall overflow/flex issues together with the rule above
   .mml-wrap {
     display: block;
-    max-width: none;
     // the max-width should match that to .str-chat__message-XXXX-text-inner
     max-width: 345px;
 

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;

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/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%;
@@ -224,6 +223,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 {

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/_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;AAyFvD,eAAO,MAAM,KAAK,mBAUjB,CAAC;AAEF,eAAO,MAAM,KAAK,mBAUjB,CAAC"}

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

@@ -0,0 +1,81 @@
+/* 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, MessageList, useChannelStateContext, Window, } from '../index';
+import { apiKey } 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);
+// 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();
+var ConnectedUser = function (_a) {
+    var token = _a.token, userId = _a.userId;
+    var _b = useState(false), connected = _b[0], setConnected = _b[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(React.Fragment, null,
+        React.createElement("h3", null,
+            "User: ",
+            userId),
+        React.createElement(Chat, { client: chatClient },
+            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(ConnectedUser, { 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(ConnectedUser, { 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"}