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

package/dist/scss/Attachment.scss

@@ -2,13 +2,20 @@
   max-width: 450px;
 }
 
+.str-chat__message-attachment--video:not(.str-chat__message-attachment--card) {
+  width: 300px;
+}
+
 .str-chat__player-wrapper {
   position: relative;
   padding-top: 56.25%; /* Player ratio: 100 / (1280 / 720) */
-  .react-player {
+  .react-player,
+  .str-chat__video-angular {
     position: absolute;
     top: 0;
     left: 0;
+    width: 100%;
+    height: 100%;
   }
 }
 
@@ -87,6 +94,50 @@
         background: var(--white);
       }
 
+      .str-chat__message-attachment-file--item-text {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: center;
+        row-gap: 2px;
+        width: 100%;
+        min-width: 0;
+
+        .str-chat__message-attachment-file--item-first-row {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          column-gap: 8px;
+          width: 100%;
+
+          .str-chat__message-attachment-file--item-name {
+            font-weight: var(--font-weight-bold);
+            color: var(--black);
+
+            white-space: nowrap;
+            overflow-y: visible;
+            // Not every browser support clip overflow, so hidden is defined as a fallback
+            overflow-x: hidden;
+            overflow-x: clip;
+            text-overflow: ellipsis;
+            min-width: 0;
+          }
+
+          .str-chat__message-attachment-file--item-download {
+            display: flex;
+
+            svg {
+              width: 24px;
+              height: 16px;
+
+              path {
+                fill: var(--black);
+              }
+            }
+          }
+        }
+      }
+
       img,
       svg {
         margin-right: var(--xs-m);
@@ -99,27 +150,6 @@
         text-overflow: ellipsis;
       }
 
-      a {
-        font-weight: var(--font-weight-bold);
-        color: var(--black);
-        opacity: 0.8;
-
-        text-decoration: none;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        width: 100%;
-
-        &::after {
-          content: '';
-          position: absolute;
-          top: 0;
-          right: 0;
-          bottom: 0;
-          left: 0;
-        }
-      }
-
       span {
         line-height: 14px;
         font-size: var(--sm-font);

package/dist/scss/Audio.scss

@@ -88,7 +88,7 @@
       > div {
         height: 4px;
         border-radius: var(--border-radius-sm);
-        width: 0%;
+        width: 0;
         background: var(--primary-color);
         transition: width 0.5s linear;
       }

package/dist/scss/Avatar.scss

@@ -32,7 +32,7 @@
   }
 
   &-image--loaded {
-    background-color: none;
+    background-color: transparent;
   }
 
   &-fallback {

package/dist/scss/ChannelList.scss

@@ -1,7 +1,6 @@
 .str-chat__channel-list {
   flex: 1;
   overflow-y: auto;
-  max-width: 300px;
   background: var(--blue-alice);
   box-shadow: 1px 0 0 0 var(--black5);
   display: flex;
@@ -15,6 +14,11 @@
     padding: var(--xs-p) var(--sm-p);
     border-bottom: 1px solid var(--black10);
   }
+
+  // Empty channel list for theme-v2
+  .str-chat__channel-list-empty {
+    display: none;
+  }
 }
 
 .dark.str-chat {

package/dist/scss/ChannelPreview.scss

@@ -21,6 +21,31 @@
     box-shadow: 0 1px 5px 0 var(--border);
   }
 
+  .str-chat__channel-preview-messenger--right {
+    width: 100%;
+    overflow: hidden;
+
+    .str-chat__channel-preview-end-first-row {
+      display: flex;
+      align-items: center;
+      width: 100%;
+
+      .str-chat__channel-preview-messenger--name {
+        width: 100%;
+      }
+
+      .str-chat__channel-preview-unread-badge {
+        padding: 8px;
+        font-size: 0.75rem;
+        line-height: 0.44rem;
+        border-radius: var(--border-radius-round);
+        color: var(--unread-badge-color);
+        background-color: var(--accent_red);
+        font-weight: 700;
+      }
+    }
+  }
+
   &--last-message p {
     font-size: var(--sm-font);
     margin: 0;

package/dist/scss/ChannelSearch.scss

@@ -1,4 +1,6 @@
 .str-chat__channel-search {
+  --channel-search-input-height: 30px;
+
   padding: var(--md-p) var(--md-p) 0;
   display: flex;
   align-items: center;
@@ -10,7 +12,7 @@
     background: var(--grey-whisper);
     border: 1px solid transparent;
     outline: none;
-    height: 30px;
+    height: var(--channel-search-input-height);
     border-radius: var(--border-radius);
     color: var(--black);
     font-size: var(--md-font);
@@ -67,8 +69,8 @@
   &-container.popup {
     border-radius: var(--border-radius-md);
     background: var(--white-smoke);
-    left: 300px;
-    top: 20px;
+    left: 0;
+    top: calc(var(--channel-search-input-height) + 40px);
     box-shadow: 0 7px 9px 0 var(--border), 0 1px 0 0 var(--border);
     border: 1px solid var(--border);
 

package/dist/scss/Gallery.scss

@@ -37,25 +37,6 @@
   }
 }
 
-.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,
@@ -82,7 +63,6 @@
         background-repeat: no-repeat;
         cursor: -moz-zoom-in;
         cursor: -webkit-zoom-in;
-        cursor: zoom-in;
         cursor: pointer;
         border: none;
 

package/dist/scss/ImageCarousel.scss

@@ -0,0 +1,39 @@
+.str-chat__message {
+  .str-chat__attachment-list-angular-host {
+    .str-chat__modal--open {
+      .str-chat__modal__inner {
+        height: 80%;
+        width: 80%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+      }
+    }
+  }
+}
+
+.str-chat__image-carousel {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 0;
+  min-width: 0;
+  max-width: 100%;
+  max-height: 100%;
+
+  .str-chat__image-carousel-stepper {
+    padding: 8px;
+    border: none;
+    cursor: pointer;
+    background: transparent;
+  }
+
+  .str-chat__image-carousel-image {
+    object-fit: cover;
+    min-height: 0;
+    max-height: 100%;
+    min-width: 0;
+    max-width: 100%;
+  }
+}

package/dist/scss/LoadingChannels.scss

@@ -50,7 +50,7 @@
     animation: pulsate 1s linear 0s infinite alternate;
 
     &:nth-of-type(2) {
-      animation: pulsate 1s linear 0.3334 infinite alternate;
+      animation: pulsate 1s linear 0.3334s infinite alternate;
     }
 
     &:last-of-type {

package/dist/scss/Message.scss

@@ -71,13 +71,15 @@
       &-attachment--img,
       &-attachment-card,
       .str-chat__gallery {
-        border-radius: var(--border-radius) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
+        border-radius: var(--border-radius) var(--border-radius) var(--border-radius)
+          calc(var(--border-radius-sm) / 2);
       }
 
       &.str-chat__message--has-text.str-chat__message--has-attachment {
         .str-chat__message-attachment--img,
         .str-chat__message-attachment-card {
-          border-radius: var(--border-radius) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
+          border-radius: var(--border-radius) var(--border-radius) var(--border-radius)
+            calc(var(--border-radius-sm) / 2);
         }
       }
 
@@ -86,24 +88,28 @@
         .str-chat__message {
           &-attachment--img,
           &-attachment-card {
-            border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
+            border-radius: var(--border-radius) var(--border-radius)
+              calc(var(--border-radius-sm) / 2) var(--border-radius);
           }
         }
 
         &.str-chat__message--has-text.str-chat__message--has-attachment {
           .str-chat__message-attachment--img,
           .str-chat__message-attachment-card {
-            border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
+            border-radius: var(--border-radius) var(--border-radius)
+              calc(var(--border-radius-sm) / 2) var(--border-radius);
           }
         }
 
         .str-chat__gallery {
-          border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
+          border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2)
+            var(--border-radius);
         }
 
         &.str-chat__message--has-text {
           .str-chat__gallery {
-            border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
+            border-radius: var(--border-radius) var(--border-radius)
+              calc(var(--border-radius-sm) / 2) var(--border-radius);
           }
         }
       }
@@ -117,14 +123,16 @@
       &-attachment--img,
       &-attachment-card,
       .str-chat__gallery {
-        border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
+        border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius)
+          calc(var(--border-radius-sm) / 2);
       }
 
       &.str-chat__message--has-text.str-chat__message--has-attachment {
         .str-chat__message-attachment--img,
         .str-chat__message-attachment-card,
         .str-chat__gallery {
-          border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
+          border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius)
+            calc(var(--border-radius-sm) / 2);
         }
       }
 
@@ -133,7 +141,8 @@
           &-attachment--img,
           &-attachment-card,
           .str-chat__gallery {
-            border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2) calc(var(--border-radius-sm) / 2) var(--border-radius);
+            border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2)
+              calc(var(--border-radius-sm) / 2) var(--border-radius);
           }
         }
 
@@ -155,14 +164,16 @@
       &-attachment--img,
       &-attachment-card,
       .str-chat__gallery {
-        border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
+        border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius)
+          calc(var(--border-radius-sm) / 2);
       }
 
       &.str-chat__message--has-text.str-chat__message--has-attachment {
         .str-chat__message-attachment--img,
         .str-chat__message-attachment-card,
         .str-chat__gallery {
-          border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
+          border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius)
+            calc(var(--border-radius-sm) / 2);
         }
       }
 
@@ -171,7 +182,8 @@
           &-attachment--img,
           &-attachment-card,
           .str-chat__gallery {
-            border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2) calc(var(--border-radius-sm) / 2) var(--border-radius);
+            border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2)
+              calc(var(--border-radius-sm) / 2) var(--border-radius);
           }
         }
 
@@ -203,14 +215,16 @@
     .str-chat__message {
       &-text {
         &-inner {
-          border-radius: var(--border-radius) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
+          border-radius: var(--border-radius) var(--border-radius) var(--border-radius)
+            calc(var(--border-radius-sm) / 2);
         }
       }
 
       &--me {
         .str-chat__message-text {
           &-inner {
-            border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
+            border-radius: var(--border-radius) var(--border-radius)
+              calc(var(--border-radius-sm) / 2) var(--border-radius);
           }
         }
       }
@@ -221,10 +235,12 @@
     .str-chat__message {
       &-text {
         &-inner {
-          border-radius: var(--border-radius) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
+          border-radius: var(--border-radius) var(--border-radius) var(--border-radius)
+            calc(var(--border-radius-sm) / 2);
 
           &--has-attachment {
-            border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
+            border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius)
+              var(--border-radius) calc(var(--border-radius-sm) / 2);
           }
         }
       }
@@ -232,10 +248,12 @@
       &--me {
         .str-chat__message-text {
           &-inner {
-            border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
+            border-radius: var(--border-radius) var(--border-radius)
+              calc(var(--border-radius-sm) / 2) var(--border-radius);
 
             &--has-attachment {
-              border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2) calc(var(--border-radius-sm) / 2) var(--border-radius);
+              border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2)
+                calc(var(--border-radius-sm) / 2) var(--border-radius);
             }
           }
         }
@@ -248,14 +266,16 @@
     .str-chat__message {
       &-text {
         &-inner {
-          border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
+          border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius)
+            calc(var(--border-radius-sm) / 2);
         }
       }
 
       &--me {
         .str-chat__message-text {
           &-inner {
-            border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2) calc(var(--border-radius-sm) / 2) var(--border-radius);
+            border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2)
+              calc(var(--border-radius-sm) / 2) var(--border-radius);
 
             &--has-attachment {
               margin: 0;
@@ -266,7 +286,8 @@
         .str-chat__message-attachment-card {
           margin: 0;
           padding: 0;
-          border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2) calc(var(--border-radius-sm) / 2) var(--border-radius);
+          border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2)
+            calc(var(--border-radius-sm) / 2) var(--border-radius);
         }
       }
     }
@@ -387,7 +408,8 @@
       }
 
       &--has-attachment {
-        border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
+        border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius)
+          calc(var(--border-radius-sm) / 2);
       }
 
       /* if text consists of just one emoji */
@@ -440,7 +462,7 @@
 
   /* me */
   &--me {
-    display: inline-flex;
+    display: flex;
     margin: var(--xxs-m) 0;
     justify-content: flex-end;
 
@@ -477,7 +499,8 @@
         background: var(--grey-whisper);
         border-color: transparent;
         text-align: right;
-        border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
+        border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2)
+          var(--border-radius);
         margin-right: 0; /* set spacing when unfocused */
 
         &--focused {
@@ -488,7 +511,8 @@
         }
 
         &--has-attachment {
-          border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2) calc(var(--border-radius-sm) / 2) var(--border-radius);
+          border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2)
+            calc(var(--border-radius-sm) / 2) var(--border-radius);
         }
 
         &--is-emoji {
@@ -692,13 +716,13 @@
         }
 
         &--thread,
+        &--options,
         &--reactions {
           display: none;
         }
 
         &--options {
           position: relative;
-          display: none;
 
           > button {
             cursor: pointer;
@@ -716,12 +740,17 @@
     }
 
     &:hover {
-      .str-chat__message-simple__actions__action--thread {
+      .str-chat__message-simple__actions__action--thread,
+      .str-chat__message-simple__actions__action--reactions,
+      .str-chat__message-simple__actions__action--options {
         display: flex;
       }
 
-      .str-chat__message-simple__actions__action--reactions {
-        display: flex;
+      .str-chat__message-simple__actions__action--options {
+        button {
+          display: flex;
+          align-items: center;
+        }
       }
     }
 
@@ -786,7 +815,6 @@
       color: var(--white);
     }
 
-
     &--me {
       .str-chat__message-simple-reply-button {
         display: flex;
@@ -807,6 +835,7 @@
 
       .str-chat__message-simple__actions {
         justify-content: flex-end;
+        flex-direction: row-reverse;
       }
 
       .str-chat__message-attachment--image {
@@ -824,39 +853,6 @@
         order: -1;
       }
     }
-
-    &:hover {
-      .str-chat__message-simple__actions__action--options {
-        display: flex;
-
-        button {
-          display: flex;
-          align-items: center;
-        }
-      }
-
-      .str-chat__message-simple__actions__action--reactions {
-        display: flex;
-      }
-
-      .str-chat__message-simple__actions__action--thread {
-        display: flex;
-      }
-
-      @media screen and (max-width: 960px) {
-        .str-chat__message-simple__actions__action--options {
-          display: none;
-        }
-
-        .str-chat__message-simple__actions__action--reactions {
-          display: none;
-        }
-
-        .str-chat__message-simple__actions__action--thread {
-          display: none;
-        }
-      }
-    }
   }
 }
 
@@ -887,6 +883,17 @@
     color: var(--overlay-dark);
   }
 
+  &-angular {
+    svg {
+      width: 20px;
+      height: 20px;
+
+      path {
+        fill: var(--primary-color);
+      }
+    }
+  }
+
   > .str-chat__avatar,
   > .str-chat-angular__avatar-host .str-chat__avatar {
     align-self: flex-end;
@@ -955,7 +962,8 @@
       &:first-of-type {
         border-bottom: 1px solid var(--grey-gainsboro);
         border-top: 1px solid var(--grey-gainsboro);
-        border-radius: var(--border-radius) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
+        border-radius: var(--border-radius) var(--border-radius) var(--border-radius)
+          calc(var(--border-radius-sm) / 2);
       }
     }
   }
@@ -966,7 +974,8 @@
 
   &--me {
     .str-chat__message-attachment-card {
-      border-radius: var(--border-radius) var(--border-radius-sm) var(--border-radius-sm) var(--border-radius-sm);
+      border-radius: var(--border-radius) var(--border-radius-sm) var(--border-radius-sm)
+        var(--border-radius-sm);
     }
 
     .str-chat__message-attachment--file {
@@ -976,7 +985,8 @@
         border-radius: 0 0 calc(var(--border-radius-sm) / 2) var(--border-radius);
 
         &:first-of-type:not(.str-chat-angular__message-attachment-file-single) {
-          border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
+          border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2)
+            var(--border-radius);
         }
       }
     }
@@ -993,12 +1003,11 @@
       .str-chat__message-actions-box {
         right: unset;
         left: 100%;
-        border-radius: var(--border-radius) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
+        border-radius: var(--border-radius) var(--border-radius) var(--border-radius)
+          calc(var(--border-radius-sm) / 2);
       }
     }
   }
-
-
 }
 
 .livestream.str-chat {
@@ -1151,19 +1160,22 @@
       &--reverse {
         right: 100%;
         left: unset;
-        border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
+        border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2)
+          var(--border-radius);
       }
     }
 
     .str-chat__message-actions-box--mine {
       right: 100%;
       left: unset;
-      border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
+      border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2)
+        var(--border-radius);
 
       &.str-chat__message-actions-box--reverse {
         left: 100%;
         right: unset;
-        border-radius: var(--border-radius) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
+        border-radius: var(--border-radius) var(--border-radius) var(--border-radius)
+          calc(var(--border-radius-sm) / 2);
       }
     }
   }
@@ -1256,17 +1268,3 @@
     }
   }
 }
-
-.str-chat__message-simple.mobile-press {
-  .str-chat__message-simple__actions__action--options {
-    display: flex;
-  }
-
-  .str-chat__message-simple__actions__action--reactions {
-    display: flex;
-  }
-
-  .str-chat__message-simple__actions__action--thread {
-    display: flex;
-  }
-}