stream-chat-angular 5.3.0 → 5.3.1

package/src/assets/styles/scss/Avatar/Avatar-layout.scss

@@ -1,30 +1,67 @@
 .str-chat {
-  /* The size of the avatar, only available in Angular v5+ */
   --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 32);
 
+  .str-chat__avatar--autocomplete-item,
   .stream-chat__avatar--autocomplete-item {
     --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 30);
   }
 
+  .str-chat__avatar--channel-header,
   .stream-chat__avatar--channel-header {
     --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 40);
   }
 
+  .str-chat__avatar--channel-preview,
   .stream-chat__avatar--channel-preview {
     --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 49);
   }
 
+  .str-chat__avatar--quoted-message-sender,
   .stream-chat__avatar--quoted-message-sender {
     --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 20);
   }
 
+  .str-chat__avatar--reaction,
   .stream-chat__avatar--reaction {
     --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 30);
   }
+
+  .str-chat__avatar--message-status,
+  .stream-chat__avatar--message-status {
+    --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 15);
+  }
 }
 
 .str-chat__avatar {
   position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--str-chat__avatar-size);
+  line-height: var(--str-chat__avatar-size);
+  width: var(--str-chat__avatar-size);
+  min-width: var(--str-chat__avatar-size);
+
+  &.str-chat__avatar--one-letter,
+  &.stream-chat__avatar--one-letter {
+    font-size: calc(var(--str-chat__avatar-size) * 0.5);
+  }
+
+  &.str-chat__avatar--no-letters {
+    --str-chat-icon-width: calc(var(--str-chat__avatar-size) * 0.33);
+    --str-chat-icon-height: calc(var(--str-chat__avatar-size) * 0.33);
+  }
+
+  &.str-chat__avatar--multiple-letters,
+  &.stream-chat__avatar--multiple-letters {
+    font-size: calc(var(--str-chat__avatar-size) * 0.3);
+  }
+
+  .str-chat__avatar-image {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+  }
 
   .str-chat__avatar-fallback {
     text-align: center;
@@ -46,24 +83,3 @@
   width: calc(var(--str-chat__spacing-px) * 49);
   height: calc(var(--str-chat__spacing-px) * 49);
 }
-
-.str-chat-angular__avatar {
-  height: var(--str-chat__avatar-size);
-  line-height: var(--str-chat__avatar-size);
-  width: var(--str-chat__avatar-size);
-
-  &.stream-chat__avatar--one-letter {
-    font-size: calc(var(--str-chat__avatar-size) * 0.5);
-  }
-
-  &.stream-chat__avatar--multiple-letters {
-    font-size: calc(var(--str-chat__avatar-size) * 0.3);
-  }
-
-  .str-chat__avatar-image {
-    height: 100%;
-    width: 100%;
-    object-fit: cover;;
-  }
-  
-}

package/src/assets/styles/scss/Avatar/Avatar-theme.scss

@@ -38,6 +38,11 @@
     display: block;
   }
 
+  &.str-chat__avatar--no-letters {
+    --str-chat-icon-color: var(--str-chat__avatar-color);
+    @include utils.component-layer-overrides('avatar');
+  }
+
   .str-chat__avatar-fallback {
     @include utils.component-layer-overrides('avatar');
     text-transform: uppercase;

package/src/assets/styles/scss/Channel/Channel-layout.scss

@@ -17,10 +17,6 @@
       width: 100%;
       min-width: 0;
     }
-
-    .str-chat__main-panel--hideOnThread {
-      display: none;
-    }
   }
 }
 

package/src/assets/styles/scss/ChannelList/ChannelList-layout.scss

@@ -34,11 +34,6 @@
       @include utils.flex-row-center;
     }
   }
-
-  // This is displayed only in theme-v1
-  .str-chat__down-main {
-    display: none;
-  }
 }
 
 .str-chat__channel-list-react {
@@ -53,3 +48,14 @@
     }
   }
 }
+
+.str-chat-angular__channel-list {
+  .str-chat__channel-list-messenger__main {
+    display: flex;
+    flex-direction: column;
+
+    stream-paginated-list {
+      min-height: 0;
+    }
+  }
+}

package/src/assets/styles/scss/ChannelSearch/ChannelSearch-layout.scss

@@ -113,6 +113,7 @@
 
       .channel-search__result-text,
       .str-chat__channel-search-result--display-name {
+        @include utils.ellipsis-text;
         @include utils.prevent-glitch-text-overflow;
       }
     }

package/src/assets/styles/scss/ChatView/ChatView-layout.scss

@@ -0,0 +1,43 @@
+.str-chat__chat-view {
+  display: flex;
+  width: 100%;
+  height: 100%;
+
+  &__selector {
+    display: flex;
+    flex-direction: column;
+    padding-inline: 8px;
+    padding-block: 16px;
+    gap: 20px;
+
+    &-button {
+      --str-chat-icon-height: 20px;
+      --str-chat-icon-width: 20px;
+      --str-chat-unread-count-badge-absolute-offset-vertical: 25%;
+
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding-inline: 10px;
+      padding-block: 10px;
+      border-radius: 8px;
+      gap: 4px;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 1;
+      box-sizing: border-box;
+      cursor: pointer;
+      position: relative;
+    }
+  }
+
+  &__channels {
+    display: flex;
+    flex-grow: 1;
+  }
+
+  &__threads {
+    display: flex;
+    flex-grow: 1;
+  }
+}

package/src/assets/styles/scss/ChatView/ChatView-theme.scss

@@ -0,0 +1,32 @@
+/* Only available in React SDK. */
+.str-chat {
+  --str-chat-selector-background-color: var(--str-chat__secondary-background-color);
+  --str-chat-selector-border-color: var(--str-chat__surface-color);
+
+  --str-chat-selector-button-color-default: var(--str-chat__text-low-emphasis-color);
+  --str-chat-selector-button-color-selected: var(--str-chat__text-color);
+  --str-chat-selector-button-background-color-default: transparent;
+  --str-chat-selector-button-background-color-selected: var(--str-chat__surface-color);
+}
+
+.str-chat__chat-view {
+  &__selector {
+    border-right: 1px solid var(--str-chat-selector-border-color);
+    background-color: var(--str-chat-selector-background-color);
+
+    &-button {
+      --str-chat-icon-color: var(--str-chat-selector-button-color-default);
+      
+      border: none;
+      background: var(--str-chat-selector-button-background-color-default);
+      color: var(--str-chat-selector-button-color-default);
+
+
+      &[aria-selected='true'] {
+        --str-chat-icon-color: var(--str-chat-selector-button-color-selected);
+        color: var(--str-chat-selector-button-color-selected);
+        background: var(--str-chat-selector-button-background-color-selected);
+      }
+    }
+  }
+}

package/src/assets/styles/scss/Dialog/Dialog-layout.scss

@@ -0,0 +1,8 @@
+.str-chat__dialog-overlay {
+  inset: 0;
+  overflow: hidden;
+  position: absolute;
+  height: var(--str-chat__dialog-overlay-height);
+  width: 100%;
+  z-index: 2;
+}

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

@@ -350,6 +350,14 @@
   }
 }
 
+// Message options display - third mode: they appear, when explicitly marked as active
+.str-chat__message-inner {
+  .str-chat__message-options.str-chat__message-options--active {
+    display: flex;
+  }
+}
+
+
 .str-chat__message-inner {
   .str-chat__message-options {
     display: none;

package/src/assets/styles/scss/MessageList/MessageList-layout.scss

@@ -52,12 +52,6 @@
   }
 }
 
-.str-chat__thread {
-  .str-chat__main-panel-inner {
-    height: auto;
-  }
-}
-
 .str-chat__main-panel {
   .str-chat__ul {
     .str-chat__li:first-of-type {

package/src/assets/styles/scss/MessageList/VirtualizedMessageList-layout.scss

@@ -55,15 +55,3 @@
     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/src/assets/styles/scss/MessageReactions/MessageReactionsSelector-layout.scss

@@ -68,3 +68,19 @@
     inset-inline-start: 0;
   }
 }
+
+// the React SDK positions the reaction selector with popperjs
+.str-chat-react__message-reaction-selector {
+  position: static;
+  inset-block-end: unset;
+
+  ul {
+    margin: 0;
+  }
+}
+
+.str-chat__message--me, .str-chat__message--other {
+  .str-chat-react__message-reaction-selector {
+    inset-inline-start: unset;
+  }
+}

package/src/assets/styles/scss/Thread/Thread-layout.scss

@@ -1,5 +1,6 @@
 @use '../utils';
 
+// FIXME: figure out why does this "container" exist when __thread is completely valid
 .str-chat__thread-container {
   height: 100%;
   display: flex;
@@ -40,15 +41,23 @@
       }
     }
   }
+}
 
-  .str-chat__thread-list {
+.str-chat__thread {
+  .str-chat__main-panel-inner {
     height: auto;
   }
 }
 
-.str-chat__main-panel--hideOnThread + .str-chat__thread-container {
-  // occupy the whole space by previously occupied by the main message list container
-  flex: 1;
+.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);
+    }
+  }
 }
 
 .str-chat__parent-message-li {

package/src/assets/styles/scss/ThreadList/ThreadList-layout.scss

@@ -0,0 +1,152 @@
+.str-chat__thread-list-container {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+.str-chat__unseen-threads-banner {
+  font-size: 16px;
+  font-weight: 400;
+
+  margin: 8px;
+  padding: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  &__button {
+    --str-chat-icon-width: 16px;
+    --str-chat-icon-heigh: 22px;
+
+    all: unset;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+  }
+}
+
+.str-chat__thread-list {
+  .str-chat__thread-list-item {
+    align-items: stretch;
+    box-sizing: border-box;
+    padding-block: 14px;
+    padding-inline: 8px;
+    gap: 6px;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    cursor: pointer;
+
+    .str-chat__thread-list-item__channel {
+      --str-chat-icon-height: 14px;
+      --str-chat-icon-width: 14px;
+
+      display: flex;
+      gap: 5px;
+
+      .str-chat__icon {
+        margin-top: 2px;
+        flex-shrink: 0;
+      }
+    }
+
+    .str-chat__thread-list-item__thread-status-symbol {
+      font-size: 14px;
+      line-height: 1;
+    }
+
+    .str-chat__thread-list-item__channel-text {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 1;
+    }
+
+    .str-chat__thread-list-item__parent-message {
+      display: flex;
+      gap: 3px;
+      justify-content: space-between;
+      align-items: center;
+      height: 15px;
+    }
+
+    .str-chat__thread-list-item__parent-message-text {
+      font-size: 12px;
+      font-weight: 400;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    .str-chat__thread-list-item__latest-reply {
+      --str-chat__avatar-size: 49px;
+
+      display: flex;
+      align-items: center;
+      gap: 5px;
+    }
+
+    .str-chat__thread-list-item__latest-reply-details {
+      display: flex;
+      flex-direction: column;
+      flex-grow: 1;
+      gap: 4px;
+      width: 0;
+    }
+
+    .str-chat__thread-list-item__latest-reply-created-by {
+      font-weight: 500;
+      font-size: 16px;
+      text-align: left;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow-x: hidden;
+    }
+
+    .str-chat__thread-list-item__latest-reply-text-and-timestamp {
+      display: flex;
+      font-size: 14px;
+      font-weight: 400;
+      justify-content: space-between;
+      align-items: baseline;
+      line-height: 16px;
+    }
+
+    .str-chat__thread-list-item__latest-reply-text {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    .str-chat__thread-list-item__latest-reply-timestamp {
+      white-space: nowrap;
+    }
+  }
+
+  .str-chat__thread-list-loading-indicator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-block: 14px;
+    padding-inline: 8px;
+  }
+}
+
+.str-chat__thread-list-empty-placeholder {
+  --str-chat-icon-height: 95px;
+  --str-chat-icon-width: 95px;
+
+  font-size: 20px;
+  font-weight: 500;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  gap: 16px;
+}

package/src/assets/styles/scss/ThreadList/ThreadList-theme.scss

@@ -0,0 +1,75 @@
+/* Only available in React SDK. */
+.str-chat {
+  --str-chat-thread-list-border-color: var(--str-chat__surface-color);
+  --str-chat-thread-list-container-background-color: var(--str-chat__secondary-background-color);
+
+  --str-chat-unseen-threads-banner-background-color: var(--str-chat__text-color);
+  --str-chat-unseen-threads-banner-color: var(--str-chat__opaque-surface-text-color);
+
+  --str-chat-thread-list-item-background-color-default: var(--str-chat__secondary-background-color);
+  --str-chat-thread-list-item-background-color-selected: var(--str-chat__surface-color);
+
+  --str-chat-thread-list-item-text-color: var(--str-chat__text-color);
+  --str-chat-thread-list-item-text-low-emphasis-color: var(--str-chat__text-low-emphasis-color);
+
+  --str-chat-thread-list-empty-placeholder-background-color: var(
+    --str-chat__secondary-background-color
+  );
+  --str-chat-thread-list-empty-placeholder-color: var(--str-chat__text-low-emphasis-color);
+}
+
+.str-chat__thread-list-container {
+  background-color: var(--str-chat-thread-list-container-background-color);
+}
+
+.str-chat__unseen-threads-banner {
+  border-radius: 16px;
+  background: var(--str-chat-unseen-threads-banner-background-color);
+  color: var(--str-chat-unseen-threads-banner-color);
+
+  &__button {
+    --str-chat-icon-color: var(--str-chat-unseen-threads-banner-color);
+  }
+}
+
+.str-chat__thread-list {
+  
+  border-right: 1px solid var(--str-chat-thread-list-border-color);
+  
+  .str-chat__thread-list-item {
+    --str-chat-icon-color: var(--str-chat-thread-list-item-text-color);
+    
+    border: none;
+    background-color: var(--str-chat-thread-list-item-background-color-default);
+    color: var(--str-chat-thread-list-item-text-color);
+
+    &[aria-selected='true'] {
+      background-color: var(--str-chat-thread-list-item-background-color-selected);
+
+      .str-chat__thread-list-item__parent-message-text,
+      .str-chat__thread-list-item__latest-reply-text-and-timestamp {
+        color: inherit;
+      }
+    }
+
+    .str-chat__thread-list-item__parent-message-text {
+      color: var(--str-chat-thread-list-item-text-low-emphasis-color);
+    }
+
+    .str-chat__thread-list-item__latest-reply {
+      --str-chat__avatar-background-color: var(--str-chat__secondary-surface-color);
+      --str-chat__avatar-color: var(--str-chat__text-low-emphasis-color);
+    }
+
+    .str-chat__thread-list-item__latest-reply-text-and-timestamp {
+      color: var(--str-chat-thread-list-item-text-low-emphasis-color);
+    }
+  }
+}
+
+.str-chat__thread-list-empty-placeholder {
+  --str-chat-icon-color: var(--str-chat-thread-list-empty-placeholder-color);
+
+  background-color: var(--str-chat-thread-list-empty-placeholder-background-color);
+  color: var(--str-chat-thread-list-empty-placeholder-color);
+}

package/src/assets/styles/scss/UnreadCountBadge/UnreadCountBadge-layout.scss

@@ -0,0 +1,49 @@
+.str-chat {
+  --str-chat-unread-count-badge-absolute-offset-vertical: 50%;
+  --str-chat-unread-count-badge-absolute-offset-horizontal: 50%;
+}
+
+.str-chat__unread-count-badge-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.str-chat__unread-count-badge {
+  font-size: 12px;
+  min-width: 22px;
+  min-height: 22px;
+  line-height: 8px;
+  font-weight: 700;
+  padding: 7px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-variant-numeric: tabular-nums;
+
+  &--top-right {
+    position: absolute;
+    translate: var(--str-chat-unread-count-badge-absolute-offset-horizontal)
+      calc(var(--str-chat-unread-count-badge-absolute-offset-vertical) * -1);
+  }
+
+  &--bottom-left {
+    position: absolute;
+    translate: calc(var(--str-chat-unread-count-badge-absolute-offset-horizontal) * -1)
+      var(--str-chat-unread-count-badge-absolute-offset-vertical);
+  }
+
+  &--bottom-right {
+    position: absolute;
+    translate: var(--str-chat-unread-count-badge-absolute-offset-horizontal)
+      var(--str-chat-unread-count-badge-absolute-offset-vertical);
+  }
+
+  &--top-left {
+    position: absolute;
+    translate: calc(var(--str-chat-unread-count-badge-absolute-offset-horizontal) * -1)
+      calc(var(--str-chat-unread-count-badge-absolute-offset-vertical) * -1);
+  }
+}

package/src/assets/styles/scss/UnreadCountBadge/UnreadCountBadge-theme.scss

@@ -0,0 +1,11 @@
+/* Only available in React SDK. */
+.str-chat {
+  --str-chat-unread-count-badge-color: var(--str-chat__on-unread-badge-color);
+  --str-chat-unread-count-badge-background-color: var(--str-chat__danger-color);
+}
+
+.str-chat__unread-count-badge {
+  background-color: var(--str-chat-unread-count-badge-background-color);
+  color: var(--str-chat-unread-count-badge-color);
+  border-radius: 9999px;
+}

package/src/assets/styles/scss/_base.scss

@@ -42,6 +42,10 @@ stream-icon-placeholder {
   .str-chat__loading-indicator {
     margin: auto;
   }
+
+  .str-chat__load-more-button__button {
+    margin-inline: auto;
+  }
 }
 
 stream-paginated-list {

package/src/assets/styles/scss/_emoji-replacement.scss

@@ -21,7 +21,8 @@ $emoji-flag-unicode-range: U+1F1E6-1F1FF;
 
 .str-chat--windows-flags {
   // TODO: consider adding the rule for reactions (list & selector) if we ever decide to make them use native emojis
-  .str-chat__textarea__textarea,
+  .str-chat__textarea__textarea, // class name from theme v1
+  .str-chat__message-textarea,
   .str-chat__message-text-inner *,
   .str-chat__emoji-item--entity,
   .emoji-mart-emoji-native * {
@@ -32,7 +33,8 @@ $emoji-flag-unicode-range: U+1F1E6-1F1FF;
 
 @-moz-document url-prefix('') {
   .str-chat--windows-flags {
-    .str-chat__textarea__textarea,
+    .str-chat__textarea__textarea, // class name from theme v1
+    .str-chat__message-textarea,
     .str-chat__message-text-inner *,
     .str-chat__emoji-item--entity,
     .emoji-mart-emoji-native * {

package/src/assets/styles/scss/index.layout.scss

@@ -15,6 +15,7 @@
 @use 'ChannelSearch/ChannelSearch-layout';
 @use 'common/CTAButton/CTAButton-layout';
 @use 'common/CircleFAButton/CircleFAButton-layout';
+@use 'Dialog/Dialog-layout';
 @use 'EditMessageForm/EditMessageForm-layout';
 @use 'ImageCarousel/ImageCarousel-layout';
 @use 'Icon/Icon-layout';
@@ -35,3 +36,6 @@
 @use 'Thread/Thread-layout';
 @use 'Tooltip/Tooltip-layout';
 @use 'TypingIndicator/TypingIndicator-layout';
+@use 'ThreadList/ThreadList-layout';
+@use 'ChatView/ChatView-layout';
+@use 'UnreadCountBadge/UnreadCountBadge-layout';

package/src/assets/styles/scss/index.scss

@@ -37,3 +37,6 @@
 @use 'Thread/Thread-theme';
 @use 'Tooltip/Tooltip-theme';
 @use 'TypingIndicator/TypingIndicator-theme';
+@use 'ThreadList/ThreadList-theme';
+@use 'ChatView/ChatView-theme';
+@use 'UnreadCountBadge/UnreadCountBadge-theme';

package/src/assets/version.ts

@@ -1 +1 @@
-export const version = '5.3.0';
+export const version = '5.3.1';