stream-chat-angular 3.0.0 → 3.2.0

package/src/assets/styles/scss/Message.scss

@@ -2,10 +2,20 @@
   display: block;
   position: relative;
 
+  /*
+  min-width in a flex context: While the default min-width value is 0, for flex items it is auto.
+  This can make block elements take up much more space than desired, resulting in overflow.
+   */
+  .str-chat__message-inner {
+    min-width: 0;
+  }
+
   .quoted-message {
     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;
@@ -61,15 +71,13 @@
       &-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);
         }
       }
 
@@ -78,28 +86,24 @@
         .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);
           }
         }
       }
@@ -113,16 +117,14 @@
       &-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);
         }
       }
 
@@ -131,8 +133,7 @@
           &-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);
           }
         }
 
@@ -154,16 +155,14 @@
       &-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);
         }
       }
 
@@ -172,8 +171,7 @@
           &-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);
           }
         }
 
@@ -205,16 +203,14 @@
     .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);
           }
         }
       }
@@ -225,12 +221,10 @@
     .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);
           }
         }
       }
@@ -238,12 +232,10 @@
       &--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);
             }
           }
         }
@@ -256,16 +248,14 @@
     .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;
@@ -276,8 +266,7 @@
         .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);
         }
       }
     }
@@ -293,6 +282,7 @@
   position: relative;
   margin: calc(var(--xxs-m) / 2) 0;
   width: 100%;
+  transition: background-color 0.5s ease-out;
 
   &--system {
     text-align: center;
@@ -377,12 +367,9 @@
       }
 
       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;
@@ -400,8 +387,7 @@
       }
 
       &--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 */
@@ -491,8 +477,7 @@
         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 {
@@ -503,8 +488,7 @@
         }
 
         &--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 {
@@ -543,6 +527,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);
@@ -553,13 +542,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;
@@ -619,7 +601,9 @@
               }
             }
           }
-        } /* __li*/
+        }
+
+        /* __li*/
       }
     }
   }
@@ -657,7 +641,6 @@
   /* error messages */
   &--error,
   &--failed {
-    margin: 0 0 var(--lg-m) var(--xl-m);
     font-size: var(--sm-font);
     padding: var(--xxs-p) 0;
 
@@ -753,6 +736,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;
@@ -770,6 +755,12 @@
         color: var(--primary-color);
         font-weight: var(--font-weight-bold);
         text-decoration: none;
+
+        &:active,
+        &:focus,
+        &:hover {
+          text-decoration: underline;
+        }
       }
 
       blockquote {
@@ -790,6 +781,12 @@
       }
     }
 
+    &--deleted-inner {
+      background: var(--dark-grey);
+      color: var(--white);
+    }
+
+
     &--me {
       .str-chat__message-simple-reply-button {
         display: flex;
@@ -958,8 +955,7 @@
       &: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);
       }
     }
   }
@@ -970,8 +966,7 @@
 
   &--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 {
@@ -981,8 +976,7 @@
         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);
         }
       }
     }
@@ -999,11 +993,12 @@
       .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 {
@@ -1033,14 +1028,19 @@
 }
 
 .dark.str-chat {
+  .str-chat__message,
   .str-chat__message-simple {
     &-text-inner {
-      background: var(--white-smoke);
+      background: var(--dark-grey);
       color: var(--white);
 
       &--is-emoji {
         background: transparent;
       }
+
+      .quoted-message-inner {
+        background: var(--dark-grey);
+      }
     }
 
     &__actions {
@@ -1058,17 +1058,22 @@
       background: transparent;
 
       &--content {
-        background: var(--white-smoke);
+        background: var(--dark-grey);
       }
 
       &--url {
         color: var(--grey-gainsboro);
       }
+
+      &--title {
+        color: var(--primary-color);
+      }
     }
 
     .str-chat__message-attachment--file {
       border-color: transparent;
-      background: var(--white-smoke);
+      background: var(--dark-grey);
+      color: var(--white10);
 
       a,
       span {
@@ -1086,25 +1091,35 @@
       }
     }
 
+    .str-chat__message-simple--deleted-inner,
+    .str-chat__message--deleted-inner {
+      background: var(--dark-grey);
+      color: var(--white);
+    }
+
     &--me {
-      .str-chat__message-simple {
-        &-text-inner {
-          background: var(--black);
+      .str-chat__message-text-inner {
+        background: var(--black40);
 
-          &--is-emoji {
-            background: transparent;
-          }
+        &--is-emoji {
+          background: transparent;
         }
+      }
 
-        .str-chat__message-attachment-card {
-          &--content {
-            background: var(--black);
-          }
+      .str-chat__message-attachment-card {
+        &--content {
+          background: var(--black40);
         }
+      }
 
-        .str-chat__message-attachment--file {
-          background: var(--overlay);
-        }
+      .str-chat__message-attachment--file {
+        background: var(--black40);
+      }
+
+      .str-chat__message-simple--deleted-inner,
+      .str-chat__message--deleted-inner {
+        background: var(--black40);
+        color: var(--white);
       }
     }
   }
@@ -1136,22 +1151,19 @@
       &--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);
       }
     }
   }
@@ -1195,7 +1207,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/src/assets/styles/scss/MessageInput.scss

@@ -82,6 +82,12 @@
   }
 }
 
+.dark .str-chat__textarea {
+  textarea::placeholder {
+    color: var(--white30);
+  }
+}
+
 .str-chat__textarea {
   height: auto;
   flex: 1;
@@ -104,7 +110,7 @@
       box-shadow: 0 0 0 2px var(--primary-color-faded);
     }
 
-    &:placeholder {
+    &::placeholder {
       color: var(--black50);
     }
   }
@@ -117,7 +123,7 @@
   position: absolute;
   background: var(--white95);
   box-shadow: 0 0 1px 0 var(--black30), 0 0 6px 0 var(--black10);
-  z-index: -1;
+  z-index: 10001;
   border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0;
   margin: 0 var(--xs-m);
   max-height: 360px;

package/src/assets/styles/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;
@@ -287,6 +289,10 @@
         fill: var(--white);
       }
     }
+
+    &-quoted .quoted-message-preview-content {
+      background: var(--black20);
+    }
   }
 
   &.commerce {

package/src/assets/styles/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/src/assets/styles/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/src/assets/styles/scss/VirtualMessage.scss

@@ -73,6 +73,7 @@
         display: flex;
         align-items: flex-end;
         margin-bottom: var(--xxs-m);
+        cursor: pointer;
 
         &-inner {
           display: flex;

package/src/assets/styles/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/src/assets/version.ts

@@ -1 +1 @@
-export const version = '3.0.0';
+export const version = '3.2.0';