stream-chat-react 10.1.2 → 10.2.0

package/dist/scss/Attachment.scss

@@ -1,16 +1,30 @@
-.str-chat__attachment {
-  max-width: 450px;
+@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)
+  );
 }
 
-$video-width: 300px;
+.str-chat__attachment,
+.str-chat__message-attachment {
+  --attachment-max-width: 450px;
+  --video-width: 300px;
+
+  max-width: var(--attachment-max-width);
+}
 
-.str-chat__message-attachment--video:not(.str-chat__message-attachment--card) {
-  width: $video-width;
+.str-chat__message-attachment.str-chat__message-attachment--video:not(.str-chat__message-attachment--card) {
+  --attachment-max-width: var(--video-width);
+  width: var(--video-width);
 }
 
 .str-chat__player-wrapper {
   position: relative;
   padding-top: 56.25%; /* Player ratio: 100 / (1280 / 720) */
+  display: flex;
+  flex-direction: column;
+
   .react-player,
   .str-chat__video-angular {
     position: absolute;
@@ -18,23 +32,33 @@ $video-width: 300px;
     left: 0;
     width: 100%;
     height: 100%;
+    min-height: 0;
+    max-height: 100%;
   }
 }
 
 .str-chat__message-attachment-dynamic-size {
-  $max-height: 300px;
+  --video-max-height: 300px;
 
-  max-height: $max-height;
+  max-height: var(--video-max-height);
 
   .str-chat__player-wrapper {
+    @include clamped-height-from-original-image-dimensions(
+      '--video-max-height',
+      '--attachment-max-width'
+    );
     padding-top: 0;
     position: static;
+    // CDN resize requires to have max-height/height and max-width set on this element - React
+    max-height: var(--video-max-height);
+    max-width: var(--attachment-max-width);
 
-    .str-chat__video-angular {
+    .str-chat__video-angular,
+    .react-player {
       position: static;
-      // CDN resize requires to have max-height/height and max-width set on this element
-      max-height: $max-height;
-      max-width: $video-width;
+      // CDN resize requires to have max-height/height and max-width set on this element - Angular
+      max-height: var(--video-max-height);
+      max-width: var(--attachment-max-width);
     }
   }
 }
@@ -52,8 +76,8 @@ $video-width: 300px;
 
 .str-chat__message {
   &-attachment {
+    --attachment-max-width: 375px;
     width: 100%;
-    max-width: 375px;
 
     border-radius: var(--border-radius);
     padding: var(--xs-m) auto var(--xs-m) 0;
@@ -77,7 +101,7 @@ $video-width: 300px;
 
 .str-chat__message-team.thread-list {
   .str-chat__message-attachment {
-    max-width: 200px;
+    --attachment-max-width: 200px;
   }
 }
 
@@ -185,9 +209,9 @@ $video-width: 300px;
   }
 
   &--image {
-    height: auto;
-    max-height: 300px;
-    max-width: 100%;
+    --image-max-height: 300px;
+    max-height: var(--image-max-height);
+    max-width: var(--attachment-max-width);
     border-radius: 0;
 
     &:hover {
@@ -195,7 +219,10 @@ $video-width: 300px;
     }
 
     img {
-      height: inherit;
+      @include clamped-height-from-original-image-dimensions(
+        '--image-max-height',
+        '--attachment-max-width'
+      );
       width: auto;
       max-height: inherit;
       display: block;

package/dist/scss/Audio.scss

@@ -67,6 +67,7 @@
       margin: 0;
       padding: 0;
       line-height: 1;
+      font-size: var(--md-font);
     }
 
     &--subtitle {

package/dist/scss/Message.scss

@@ -8,6 +8,24 @@
    */
   .str-chat__message-inner {
     min-width: 0;
+
+    .str-chat__translation-notice {
+      button {
+        cursor: pointer;
+        padding: 0.25rem 0;
+        margin: 0;
+        font-size: 14px;
+        line-height: 16px;
+        color: var(--lighten-grey);
+        border: none;
+        background: none;
+
+        &:active,
+        &:hover {
+          background: var(--grey-whisper);
+        }
+      }
+    }
   }
 
   .quoted-message {
@@ -417,11 +435,11 @@
   }
 
   &-attachment {
+    --attachment-max-width: 480px;
+
     &--img {
       width: 100%;
-      max-width: 480px;
       display: block;
-      height: inherit;
       cursor: -moz-zoom-in;
       cursor: -webkit-zoom-in;
       cursor: zoom-in;
@@ -525,7 +543,6 @@
           // CDN resize requires max-width to be set on this element
           max-width: inherit;
           display: block;
-          height: inherit;
           object-fit: cover;
           border: none;
         }
@@ -831,8 +848,8 @@
         flex-direction: row-reverse;
       }
 
-      .str-chat__message-attachment--image {
-        max-width: 460px;
+      .str-chat__message-attachment {
+        --attachment-max-width: 460px;
       }
 
       &-text-inner {
@@ -1180,20 +1197,20 @@
 }
 
 @media screen and (max-width: 375px) {
-  .str-chat__message .str-chat__message-attachment--img {
-    max-width: 235px;
+  .str-chat__message .str-chat__message-attachment {
+    --attachment-max-width: 235px;
   }
 }
 
 @media screen and (max-width: 414px) {
-  .str-chat__message .str-chat__message-attachment--img {
-    max-width: 274px;
+  .str-chat__message .str-chat__message-attachment {
+    --attachment-max-width: 235px;
   }
 }
 
 @media only screen and (device-width: 375px) and (-webkit-device-pixel-ratio: 3) {
-  .str-chat__message .str-chat__message-attachment--img {
-    max-width: 240px;
+  .str-chat__message .str-chat__message-attachment {
+    --attachment-max-width: 235px;
   }
 }
 

package/dist/scss/v2/AttachmentList/AttachmentList-layout.scss

@@ -4,31 +4,23 @@
   /* The margin applied to every attachment in the attachment list */
   --str-chat__attachment-margin: var(--str-chat__spacing-0_5);
 
-  /* The maximum allowed width and height of attachments, in case of gallery images this is the maximum size of the whole gallery (not just for a single image inside the gallery). In case of Angular, there are some [constraints](https://getstream.io/chat/docs/sdk/angular/components/AttachmentListComponent/#maximum-size) for the acceptable values you can provide for this variable. */
-  --str-chat__attachment-max-width: unset;
-
-  /* The height of scraped images, the default value is optimized for 1.91:1 aspect ratio */
-  --str-chat__scraped-image-height: unset;
-
-  /* The height of scraped videos, the default value is optimized for 16:9 aspect ratio */
-  --str-chat__scraped-video-height: unset;
-
   /* The height of GIFs */
   --str-chat__gif-height: calc(var(--str-chat__spacing-px) * 200);
-
-  /* The height of videos, the default value is the mase as `--str-chat__attachment-max-width`. In Angular SDK this is the maximum height, the video can be smaller based on the aspect ratio */
-  --str-chat__video-height: unset;
 }
 
 .str-chat__attachment-list {
+  /* The maximum allowed width and height of attachments, in case of gallery images this is the maximum size of the whole gallery (not just for a single image inside the gallery). There are some constraints for the acceptable values you can provide for this variable, [Angular documentation](https://getstream.io/chat/docs/sdk/angular/components/AttachmentListComponent/#maximum-size), [React documentation](https://getstream.io/chat/docs/sdk/react/message-components/attachment/#image-and-video-sizing). */
   --str-chat__attachment-max-width: calc(
     var(--str-chat__message-max-width) - calc(2 * var(--str-chat__attachment-margin))
   );
 
+  /* The maximum height of videos, the default value is the mase as `--str-chat__attachment-max-width`. The rendered video can be smaller based on the aspect ratio */
   --str-chat__video-height: var(--str-chat__attachment-max-width);
 
+  /* The height of scraped images, the default value is optimized for 1.91:1 aspect ratio */
   --str-chat__scraped-image-height: calc(var(--str-chat__attachment-max-width) * calc(1 / 1.91));
 
+  /* The height of scraped videos, the default value is optimized for 16:9 aspect ratio */
   --str-chat__scraped-video-height: calc(var(--str-chat__attachment-max-width) * calc(9 / 16));
 
   display: flex;
@@ -104,12 +96,16 @@
   // Images uploaded from files
   .str-chat__message-attachment--image:not(.str-chat__message-attachment--card) {
     img {
+      @include utils.clamped-height-from-original-image-dimensions(
+        '--str-chat__attachment-max-width',
+        '--str-chat__attachment-max-width'
+      );
+
       // CDN resize requires max-width and height/max-height to be present on this element
       max-width: var(--str-chat__attachment-max-width);
       max-height: var(--str-chat__attachment-max-width);
       object-fit: cover;
       width: 100%;
-      height: 100%;
       cursor: zoom-in;
     }
   }
@@ -117,20 +113,27 @@
   // Video files: uploaded from files and scraped
   .str-chat__message-attachment--video:not(.str-chat__message-attachment--card),
   .str-chat__message-attachment-card--video .str-chat__message-attachment-card--header {
-    max-width: var(--str-chat__attachment-max-width);
+    $maxWidth: var(--str-chat__attachment-max-width);
+    max-width: $maxWidth;
     display: flex;
 
     .str-chat__player-wrapper {
       height: 100%;
       width: 100%;
       min-width: 0;
+      // CDN resize requires max-width to be present on this element - React
+      max-width: $maxWidth;
+      display: flex;
+      flex-direction: column;
 
       .react-player,
       .str-chat__video-angular {
         height: 100%;
         width: 100%;
-        // CDN resize requires max-width to be present on this element
-        max-width: var(--str-chat__attachment-max-width);
+        // CDN resize requires max-width to be present on this element - Angular
+        max-width: $maxWidth;
+        max-height: 100%;
+        min-height: 0;
       }
     }
   }
@@ -140,11 +143,22 @@
   }
 
   .str-chat__message-attachment--video.str-chat__message-attachment-dynamic-size:not(.str-chat__message-attachment--card) {
-    max-height: var(--str-chat__video-height);
+    $maxHeight: var(--str-chat__video-height);
+
+    max-height: $maxHeight;
+
+    .str-chat__player-wrapper {
+      @include utils.clamped-height-from-original-image-dimensions(
+        '--str-chat__video-height',
+        '--str-chat__attachment-max-width'
+      );
+      // CDN resize requires max-height to be present on this element - React
+      max-height: $maxHeight;
+    }
 
     .str-chat__video-angular {
-      // CDN resize requires max-height to be present on this element
-      max-height: var(--str-chat__video-height);
+      // CDN resize requires max-height to be present on this element - Angular
+      max-height: $maxHeight;
     }
   }
 

package/dist/scss/v2/Message/Message-layout.scss

@@ -71,6 +71,7 @@
     grid-template-areas:
       'avatar message'
       '. replies'
+      '. translation-notice'
       '. metadata';
     column-gap: var(--str-chat__spacing-2);
     grid-template-columns: auto 1fr;
@@ -81,6 +82,7 @@
     grid-template-areas:
       'message'
       'replies'
+      'translation-notice'
       'metadata';
     justify-items: end;
 
@@ -166,6 +168,16 @@
     }
   }
 
+  .str-chat__translation-notice {
+    grid-area: translation-notice;
+
+    button {
+      cursor: pointer;
+      padding: var(--str-chat__spacing-1) 0;
+      margin: 0;
+    }
+  }
+
   .str-chat__message-metadata {
     grid-area: metadata;
     display: flex;

package/dist/scss/v2/Message/Message-theme.scss

@@ -165,6 +165,12 @@
 
   /* Box shadow applied to a date separator */
   --str-chat__date-separator-box-shadow: none;
+
+  /* The text color of the translation notice that is displayed if a message is translated with auto-translation */
+  --str-chat__translation-notice-color: var(--str-chat__text-low-emphasis-color);
+
+  /* The hover color of the translation notice that is displayed if a message is translated with auto-translation */
+  --str-chat__translation-notice-active-background-color: var(--str-chat__tertiary-surface-color);
 }
 
 .str-chat__message--system {
@@ -237,6 +243,20 @@
     }
   }
 
+  .str-chat__translation-notice {
+    button {
+      font: var(--str-chat__body2-text);
+      color: var(--str-chat__translation-notice-color);
+      border: none;
+      background: none;
+
+      &:active,
+      &:hover {
+        background: var(--str-chat__translation-notice-active-background-color);
+      }
+    }
+  }
+
   .str-chat__message-metadata {
     color: var(--str-chat__message-secondary-color);
     font: var(--str-chat__caption-text);

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

@@ -32,12 +32,9 @@
 
     .str-chat__thread-start {
       text-align: start;
+      padding-top: var(--str-chat__spacing-3);
     }
   }
-
-  .str-chat__parent-message-li .str-chat__thread-start {
-    padding-top: var(--str-chat__spacing-3);
-  }
 }
 
 .str-chat__jump-to-latest-message {

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 });
+};