stream-chat-react 10.0.0-theming-v2.1 → 10.0.0

package/dist/scss/Attachment.scss

@@ -2,8 +2,10 @@
   max-width: 450px;
 }
 
+$video-width: 300px;
+
 .str-chat__message-attachment--video:not(.str-chat__message-attachment--card) {
-  width: 300px;
+  width: $video-width;
 }
 
 .str-chat__player-wrapper {
@@ -19,6 +21,24 @@
   }
 }
 
+.str-chat__message-attachment-dynamic-size {
+  $max-height: 300px;
+
+  max-height: $max-height;
+
+  .str-chat__player-wrapper {
+    padding-top: 0;
+    position: static;
+
+    .str-chat__video-angular {
+      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;
+    }
+  }
+}
+
 /* border radius for attachments */
 .str-chat__message .str-chat__player-wrapper .react-player {
   border-radius: var(--border-radius) var(--border-radius) var(--border-radius) 0;
@@ -176,7 +196,6 @@
       height: inherit;
       width: auto;
       max-height: inherit;
-      max-width: 100%;
       display: block;
       object-fit: cover;
       overflow: hidden;
@@ -204,6 +223,30 @@
   }
 }
 
+.str-chat__message-attachment:not(.str-chat__message-attachment-dynamic-size) {
+  .str-chat__message-attachment--image {
+    img {
+      max-width: 100%;
+    }
+  }
+}
+
+.str-chat__message-attachment-dynamic-size {
+  &.str-chat__message-attachment--svg-image {
+    img {
+      object-fit: contain;
+    }
+  }
+
+  &.str-chat__message-attachment--image {
+    width: auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+  }
+}
+
 .str-chat__message-attachment-card__giphy-logo {
   height: 20px;
   width: auto;

package/dist/scss/Gallery.scss

@@ -1,3 +1,5 @@
+$image-size: 150px;
+
 .str-chat__gallery {
   display: inline-flex;
   flex-wrap: wrap;
@@ -6,8 +8,8 @@
 
   &-image {
     /* flex: 1; x */
-    width: 150px;
-    height: 150px;
+    width: $image-size;
+    height: $image-size;
     background: var(--white);
     margin-bottom: 1px;
     margin-right: 1px;
@@ -23,7 +25,9 @@
 
     img {
       width: inherit;
+      // CDN resize requires max-height/height and max-width to be set on this element
       height: inherit;
+      max-width: $image-size;
       object-fit: cover;
     }
   }
@@ -46,14 +50,16 @@
       margin: 4px 0;
 
       &-image {
-        width: 150px;
-        height: 150px;
+        width: $image-size;
+        height: $image-size;
       }
 
       &-placeholder {
         position: relative;
-        width: 150px;
-        height: 150px;
+        width: $image-size;
+        // CDN resize requires max-height/height and max-width to be set on this element
+        max-width: $image-size;
+        height: $image-size;
         color: var(--white);
         display: flex;
         align-items: center;

package/dist/scss/ImageCarousel.scss

@@ -13,6 +13,12 @@
   }
 }
 
+.stream-chat-angular__image-modal-host {
+  .str-chat__modal__inner {
+    max-width: 80%;
+  }
+}
+
 .str-chat__image-carousel {
   display: flex;
   justify-content: center;

package/dist/scss/Message.scss

@@ -462,7 +462,7 @@
 
   /* me */
   &--me {
-    display: flex;
+    display: inline-flex;
     margin: var(--xxs-m) 0;
     justify-content: flex-end;
 
@@ -531,7 +531,8 @@
       &-attachment {
         &--img {
           width: 100%;
-          max-width: 480px;
+          // CDN resize requires max-width to be set on this element
+          max-width: inherit;
           display: block;
           height: inherit;
           object-fit: cover;
@@ -685,6 +686,11 @@
   .str-chat__message-attachment-file--item:hover {
     background: transparent;
   }
+
+  // Disable pointer events so that clicking inside quoted message text or attachments doesn't interfere with jump to message
+  .quoted-message-inner {
+    pointer-events: none;
+  }
 }
 
 .str-chat {

package/dist/scss/MessageInput.scss

@@ -242,6 +242,7 @@
 .str-chat__user-item {
   padding: var(--xs-p) var(--sm-p);
   display: flex;
+  align-items: center;
 
   &--highlight {
     font-weight: var(--font-weight-bold);

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

@@ -4,7 +4,7 @@
   /* The margin applied to every attachment in the attachment list */
   --str-chat__attachment-margin: var(--str-chat__spacing-0_5);
 
-  /* The maximum allowed width of attachments */
+  /* 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 */
@@ -16,8 +16,8 @@
   /* The height of GIFs */
   --str-chat__gif-height: calc(var(--str-chat__spacing-px) * 200);
 
-  /* The height of videos */
-  --str-chat__video-height: calc(var(--str-chat__spacing-px) * 300);
+  /* 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 {
@@ -25,6 +25,8 @@
     var(--str-chat__message-max-width) - calc(2 * var(--str-chat__attachment-margin))
   );
 
+  --str-chat__video-height: var(--str-chat__attachment-max-width);
+
   --str-chat__scraped-image-height: calc(var(--str-chat__attachment-max-width) * calc(1 / 1.91));
 
   --str-chat__scraped-video-height: calc(var(--str-chat__attachment-max-width) * calc(9 / 16));
@@ -102,6 +104,7 @@
   // Images uploaded from files
   .str-chat__message-attachment--image:not(.str-chat__message-attachment--card) {
     img {
+      // 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;
@@ -126,14 +129,25 @@
       .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);
       }
     }
   }
 
-  .str-chat__message-attachment--video:not(.str-chat__message-attachment--card) {
+  .str-chat__message-attachment--video:not(.str-chat__message-attachment--card):not(.str-chat__message-attachment-dynamic-size) {
     height: var(--str-chat__video-height);
   }
 
+  .str-chat__message-attachment--video.str-chat__message-attachment-dynamic-size:not(.str-chat__message-attachment--card) {
+    max-height: var(--str-chat__video-height);
+
+    .str-chat__video-angular {
+      // CDN resize requires max-height to be present on this element
+      max-height: var(--str-chat__video-height);
+    }
+  }
+
   .str-chat__message-attachment-card--video .str-chat__message-attachment-card--header {
     height: var(--str-chat__scraped-video-height);
   }
@@ -143,55 +157,66 @@
     margin: var(--str-chat__attachment-margin);
   }
 
-  .str-chat__gallery {
-    display: grid;
-    grid-template-columns: 50% 50%;
-    overflow: hidden;
-    gap: var(--str-chat__spacing-0_5);
-    max-width: var(--str-chat__attachment-max-width);
-    height: var(--str-chat__attachment-max-width);
+  .str-chat__message-attachment--gallery {
+    $max-width: var(--str-chat__attachment-max-width);
     margin: var(--str-chat__attachment-margin);
 
-    &.str-chat__gallery-two-rows {
-      grid-template-rows: 50% 50%;
-    }
-
-    .str-chat__gallery-image {
-      padding: 0;
-      margin: 0;
-
-      img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-        cursor: zoom-in;
+    .str-chat__gallery {
+      display: grid;
+      grid-template-columns: 50% 50%;
+      overflow: hidden;
+      // Safari needs this
+      width: fit-content;
+      gap: var(--str-chat__spacing-0_5);
+      max-width: $max-width;
+      // CDN resize requires height/max-height to be present on the img element, this rule ensures that
+      height: var(--str-chat__attachment-max-width);
+
+      &.str-chat__gallery-two-rows {
+        grid-template-rows: 50% 50%;
       }
-    }
 
-    .str-chat__gallery-placeholder {
-      position: relative;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background-size: cover;
-      background-position: top left;
-      background-repeat: no-repeat;
-      margin: 0;
-      cursor: zoom-in;
+      .str-chat__gallery-image {
+        padding: 0;
+        margin: 0;
+
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          cursor: zoom-in;
+          // CDN resize requires max-width to be present on this element
+          max-width: $max-width;
+        }
+      }
 
-      p {
+      .str-chat__gallery-placeholder {
         position: relative;
-        z-index: 1;
-      }
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-size: cover;
+        background-position: top left;
+        background-repeat: no-repeat;
+        margin: 0;
+        cursor: zoom-in;
+        // CDN resize requires max-width to be present on this element
+        max-width: $max-width;
 
-      &::after {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: 0;
+        p {
+          position: relative;
+          z-index: 1;
+        }
+
+        &::after {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          z-index: 0;
+        }
       }
     }
   }
@@ -203,6 +228,7 @@
 
     img {
       object-fit: contain;
+      // CDN resize requires max-width and height/max-height to be present on this element
       max-width: calc(var(--str-chat__attachment-max-width) - #{$padding});
       max-height: calc(var(--str-chat__attachment-max-width) - #{$padding});
     }

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

@@ -47,6 +47,7 @@
   column-gap: var(--str-chat__spacing-2);
 
   .str-chat__user-item--name {
+    @include utils.ellipsis-text;
     width: 100%;
   }
 }
@@ -57,6 +58,7 @@
   column-gap: var(--str-chat__spacing-2);
 
   .str-chat__emoji-item--name {
+    @include utils.ellipsis-text;
     width: 100%;
   }
 }

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

@@ -119,6 +119,7 @@
       align-items: start;
       justify-content: flex-end;
       flex-direction: row-reverse;
+      width: calc(3 * var(--str-chat__message-options-button-size));
 
       .str-chat__message-actions-box-button,
       .str-chat__message-reply-in-thread-button,
@@ -178,26 +179,10 @@
     column-gap: var(--str-chat__spacing-0_5);
     position: relative;
 
-    .str-chat__message-status-tooltip-container {
-      display: flex;
-      justify-content: center;
-    }
-
     svg {
       width: calc(var(--str-chat__spacing-px) * 15);
       height: calc(var(--str-chat__spacing-px) * 15);
     }
-
-    .str-chat__tooltip {
-      word-break: normal;
-      display: none;
-    }
-
-    &:hover {
-      .str-chat__tooltip {
-        display: flex;
-      }
-    }
   }
 
   .str-chat__message-replies-count-button-wrapper {
@@ -273,16 +258,20 @@
 
 .str-chat__message--other .str-chat__message-inner {
   margin-inline-end: calc(var(--str-chat__message-options-button-size) * 3);
+}
 
-  &:hover {
+.str-chat__li:hover {
+  .str-chat__message--other .str-chat__message-inner {
     margin-inline-end: 0;
   }
 }
 
 .str-chat__message--me .str-chat__message-inner {
   margin-inline-start: calc(var(--str-chat__message-options-button-size) * 3);
+}
 
-  &:hover {
+.str-chat__li:hover {
+  .str-chat__message--me .str-chat__message-inner {
     margin-inline-start: 0;
   }
 }

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

@@ -18,6 +18,7 @@
       justify-content: center;
       align-items: center;
       padding: var(--str-chat__spacing-1_5);
+      position: relative;
 
       button {
         @include utils.button-reset;
@@ -31,16 +32,6 @@
         align-items: center;
         justify-content: center;
       }
-
-      .str-chat__tooltip {
-        display: none;
-      }
-
-      &:hover {
-        .str-chat__tooltip {
-          display: flex;
-        }
-      }
     }
 
     // Only in theme-v1

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

@@ -3,28 +3,7 @@
 .str-chat__tooltip {
   display: flex;
   padding: var(--str-chat__spacing-2);
-}
-
-.str-chat__tooltip:not(.str-chat__tooltip-angular) {
-  $size: 10px;
-
-  min-width: calc(var(--str-chat__spacing-px) * 100px);
-  max-width: calc(var(--str-chat__spacing-px) * 150px);
-  word-break: break-all;
-  position: absolute;
-  bottom: calc(100% + calc(0.8 * #{$size}));
-
-  &::after {
-    content: '';
-    position: absolute;
-    bottom: calc(-1 * calc(#{$size} / 2));
-    inset-inline-start: calc(50% - calc(#{$size} / 2));
-    width: $size;
-    height: $size;
-    transform: rotate(45deg);
-  }
-}
-
-.str-chat__tooltip-angular {
+  z-index: 1;
   word-break: normal;
+  max-width: calc(var(--str-chat__spacing-px) * 150);
 }

package/dist/version.d.ts

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

package/dist/version.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../src/version.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,wBAAwB,CAAC"}
+{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../src/version.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,WAAW,CAAC"}

package/dist/version.js

@@ -1 +1 @@
-export var version = '10.0.0-theming-v2.1';
+export var version = '10.0.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stream-chat-react",
-  "version": "10.0.0-theming-v2.1",
+  "version": "10.0.0",
   "description": "React components to create chat conversations or livestream style chat",
   "author": "GetStream",
   "homepage": "https://getstream.io/chat/",
@@ -30,7 +30,7 @@
   "dependencies": {
     "@braintree/sanitize-url": "6.0.0",
     "@popperjs/core": "^2.11.5",
-    "@stream-io/stream-chat-css": "3.0.0-theming2.4",
+    "@stream-io/stream-chat-css": "3.0.0",
     "clsx": "^1.1.1",
     "dayjs": "^1.10.4",
     "emoji-mart": "3.0.1",
@@ -39,7 +39,6 @@
     "isomorphic-ws": "^4.0.1",
     "linkifyjs": "^2.1.9",
     "lodash.debounce": "^4.0.8",
-    "lodash.isequal": "^4.5.0",
     "lodash.throttle": "^4.1.1",
     "lodash.uniqby": "^4.7.0",
     "mdast-util-find-and-replace": "^2.2.1",
@@ -65,7 +64,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.7.3"
+    "stream-chat": "^7.1.0"
   },
   "files": [
     "dist",
@@ -102,10 +101,9 @@
     "@types/dotenv": "^8.2.0",
     "@types/emoji-mart": "^3.0.9",
     "@types/linkifyjs": "^2.1.3",
-    "@types/lodash.debounce": "^4.0.6",
-    "@types/lodash.isequal": "^4.5.5",
-    "@types/lodash.throttle": "^4.1.6",
-    "@types/lodash.uniqby": "^4.7.6",
+    "@types/lodash.debounce": "^4.0.7",
+    "@types/lodash.throttle": "^4.1.7",
+    "@types/lodash.uniqby": "^4.7.7",
     "@types/mdast": "^3.0.10",
     "@types/moment": "^2.13.0",
     "@types/react": "^18.0.8",
@@ -170,7 +168,7 @@
     "rollup-plugin-visualizer": "^4.2.0",
     "semantic-release": "^19.0.2",
     "semantic-release-cli": "^5.4.4",
-    "stream-chat": "^6.7.3",
+    "stream-chat": "^7.1.0",
     "style-loader": "^2.0.0",
     "ts-jest": "^26.5.1",
     "tslib": "2.3.0",