stream-chat-angular 5.11.2 → 5.12.0

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

@@ -0,0 +1,3 @@
+.str-chat__ai-state-indicator-container {
+  padding: 0 8px;
+}

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

@@ -0,0 +1,7 @@
+.str-chat__ai-state-indicator-container {
+  background-color: var(--str-chat__grey300);
+}
+
+.str-chat__ai-state-indicator-text {
+  color: var(--str-chat__text-color);
+}

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

@@ -87,3 +87,51 @@
   width: calc(var(--str-chat__spacing-px) * 49);
   height: calc(var(--str-chat__spacing-px) * 49);
 }
+
+
+.str-chat__avatar-group {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(2, 1fr);
+  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);
+  overflow: hidden;
+
+  &.str-chat__avatar-group--three-part {
+    .str-chat__avatar:nth-child(1) {
+      grid-area: 1 / 1 / 3 / 2;
+    }
+
+    .str-chat__avatar:nth-child(2) {
+      grid-area: 1 / 2 / 2 / 3;
+    }
+
+    .str-chat__avatar:nth-child(3) {
+      grid-area: 2 / 2 / 3 / 3;
+    }
+  }
+
+  .str-chat__avatar {
+    height: 100%;
+    line-height: 100%;
+    width: 100%;
+    min-width: 100%;
+
+    .str-chat__avatar-fallback, img {
+      border-radius: 0;
+    }
+
+    &.str-chat__avatar--single .str-chat__avatar-fallback {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: calc(var(--str-chat__avatar-size) * 0.5);
+    }
+
+    .str-chat__avatar-fallback {
+      font-size: calc(var(--str-chat__avatar-size) * 0.33);
+    }
+  }
+}

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

@@ -57,3 +57,8 @@
 .str-chat__loading-channels-avatar {
   border-radius: var(--str-chat__avatar-border-radius);
 }
+
+
+.str-chat__avatar-group {
+  border-radius: var(--str-chat__avatar-border-radius);
+}

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

@@ -25,6 +25,28 @@
   }
 }
 
+.str-chat__channel-preview-container {
+  position: relative;
+
+  .str-chat__channel-preview__action-buttons {
+    position: absolute;
+    right: var(--str-chat__spacing-2);
+    bottom: var(--str-chat__spacing-3);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 1px;
+
+    .str-chat__channel-preview__action-button {
+
+      --str-chat-icon-height: 13px;
+      cursor: pointer;
+      padding-block: 2px;
+      padding-inline: 4px;
+    }
+  }
+}
+
 .str-chat__channel-preview {
   @include channel-preview-layout;
   cursor: pointer;
@@ -78,6 +100,8 @@
       p {
         @include utils.ellipsis-text;
         margin: 0;
+        // 40px is the width of the two action buttons
+        max-width: calc(100% - 40px);
       }
     }
   }

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

@@ -64,6 +64,24 @@
   --str-chat__channel-preview-message-time-color: var(--str-chat__message-secondary-color);
 }
 
+.str-chat__channel-preview-container {
+  .str-chat__channel-preview__action-buttons {
+    .str-chat__channel-preview__action-button {
+      --str-chat-icon-color: var(--str-chat__text-low-emphasis-color);
+      border: none;
+      background-color: transparent;
+    }
+
+    .str-chat__channel-preview__action-button--pin.str-chat__channel-preview__action-button--active {
+      --str-chat-icon-color: var(--str-chat__unread-badge-color);
+    }
+
+    .str-chat__channel-preview__action-button--archive.str-chat__channel-preview__action-button--active {
+      --str-chat-icon-color: var(--str-chat__text-color);
+    }
+  }
+}
+
 .str-chat__channel-preview {
   @include utils.component-layer-overrides('channel-preview');
 

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

@@ -23,6 +23,9 @@
     var(--str-chat__quoted-message-inside-message-input-max-width) +
       calc(var(--str-chat__spacing-px) * 50)
   );
+
+  /* The maximum number of lines displayed for quoted messages, set to "none" to turn off clamping */
+  --str-chat__quoted-message-line-clamp: 5;
 }
 
 .str-chat__message {
@@ -59,12 +62,21 @@
   }
 }
 
+.str-chat__quoted-message-text-value {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: var(--str-chat__quoted-message-line-clamp);
+  line-clamp: var(--str-chat__quoted-message-line-clamp);
+  -webkit-box-orient: vertical;
+}
+
 .str-chat__message,
 .str-chat__quoted-message-preview {
   @mixin chat-bubble-spacing {
     padding: var(--str-chat__spacing-2) var(--str-chat__spacing-4);
 
     p {
+      white-space: pre-line;
       margin: 0;
     }
   }
@@ -165,10 +177,6 @@
         .str-chat__message-text-inner {
           @include utils.prevent-glitch-text-overflow;
         }
-
-        p {
-          white-space: pre-line;
-        }
       }
     }
   }
@@ -357,7 +365,6 @@
   }
 }
 
-
 .str-chat__message-inner {
   .str-chat__message-options {
     display: none;

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

@@ -129,6 +129,12 @@
     width: 100%;
   }
 
+  .str-chat__stop-ai-generation-button {
+    width: calc(var(--str-chat__spacing-px) * 30);
+    height: calc(var(--str-chat__spacing-px) * 28);
+    cursor: pointer;
+  }
+
   .str-chat__send-button {
     --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 32);
     @include utils.flex-row-center;
@@ -240,4 +246,4 @@
 .str-chat__attachment-selector-actions-menu {
   min-width: 300px;
   padding-block: 0.5rem;
-}
+}

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

@@ -168,10 +168,10 @@
 
   /* Box shadow applied to the cooldown timer */
   --str-chat__cooldown-box-shadow: none;
-  
+
   /* Color applied to an icon in a button that opens attachment selector */
   --str-chat__attachment-selector-button-icon-color: var(--str-chat__text-low-emphasis-color);
-  
+
   /* Color applied to an icon in a button that opens attachment selector when hovered over */
   --str-chat__attachment-selector-button-icon-color-hover: var(--str-chat__primary-color);
 
@@ -221,6 +221,12 @@
     }
   }
 
+  .str-chat__stop-ai-generation-button {
+    background-image: var(--str-chat__circle-stop-icon);
+    background-color: transparent;
+    border-width: 0;
+  }
+
   .str-chat__send-button {
     --str-chat-icon-color: var(--str-chat__message-send-color);
     @include utils.component-layer-overrides('message-send');
@@ -342,4 +348,4 @@
       mask: var(--str-chat__poll-icon) no-repeat center / contain;
     }
   }
-}
+}

package/src/assets/styles/scss/_icons.scss

@@ -9,6 +9,7 @@
   --str-chat__folder-icon: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMTYiIGZpbGw9ImN1cnJlbnRDb2xvciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xOCAySDEwTDggMEgyQzAuOSAwIDAuMDA5OTk5OTkgMC45IDAuMDA5OTk5OTkgMkwwIDE0QzAgMTUuMSAwLjkgMTYgMiAxNkgxOEMxOS4xIDE2IDIwIDE1LjEgMjAgMTRWNEMyMCAyLjkgMTkuMSAyIDE4IDJaTTE4IDE0SDJWNEgxOFYxNFoiIC8+Cjwvc3ZnPgo=');
   --str-chat__poll-icon: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTggMTgiIGZpbGw9ImN1cnJlbnRDb2xvciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xNiAwSDJDMC45IDAgMCAwLjkgMCAyVjE2QzAgMTcuMSAwLjkgMTggMiAxOEgxNkMxNy4xIDE4IDE4IDE3LjEgMTggMTZWMkMxOCAwLjkgMTcuMSAwIDE2IDBaTTE2IDE2SDJWMkgxNlYxNlpNNCA3SDZWMTRINFY3Wk04IDRIMTBWMTRIOFY0Wk0xMiAxMEgxNFYxNEgxMlYxMFoiLz4KPC9zdmc+');
   --str-chat__handle-icon: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYgNiIgZmlsbD0iY3VycmVuQ29sb3IiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8cGF0aCBkPSJNMTYgMEgwVjJIMTZWMFpNMCA2SDE2VjRIMFY2WiIvPgo8L3N2Zz4K');
+  --str-chat__circle-stop-icon: url('data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjMyIiB2aWV3Qm94PSI0IDQgMjggMjgiIHdpZHRoPSIzMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE2LjQ1NTEgMjcuMjQ0MUMyMi42MzA5IDI3LjI0NDEgMjcuNzQ0MSAyMi4xMTk4IDI3Ljc0NDEgMTUuOTU1MUMyNy43NDQxIDkuNzc5MyAyMi42MTk4IDQuNjY2MDIgMTYuNDQ0IDQuNjY2MDJDMTAuMjc5MyA0LjY2NjAyIDUuMTY2MDIgOS43NzkzIDUuMTY2MDIgMTUuOTU1MUM1LjE2NjAyIDIyLjExOTggMTAuMjkwNCAyNy4yNDQxIDE2LjQ1NTEgMjcuMjQ0MVpNMTYuNDU1MSAyNS4zNjI2QzExLjIzMTEgMjUuMzYyNiA3LjA1ODU5IDIxLjE3OSA3LjA1ODU5IDE1Ljk1NTFDNy4wNTg1OSAxMC43MzExIDExLjIyMDEgNi41NDc1MyAxNi40NDQgNi41NDc1M0MyMS42NjggNi41NDc1MyAyNS44NTE2IDEwLjczMTEgMjUuODYyNiAxNS45NTUxQzI1Ljg3MzcgMjEuMTc5IDIxLjY3OSAyNS4zNjI2IDE2LjQ1NTEgMjUuMzYyNlpNMTMuNTIyMSAxOS45ODM3SDE5LjM2NTlDMjAuMDYzMiAxOS45ODM3IDIwLjQ3MjcgMTkuNTc0MiAyMC40NzI3IDE4Ljg5OTFWMTMuMDExMUMyMC40NzI3IDEyLjMyNDkgMjAuMDYzMiAxMS45MjY0IDE5LjM2NTkgMTEuOTI2NEgxMy41MjIxQzEyLjgzNTkgMTEuOTI2NCAxMi40MTU0IDEyLjMyNDkgMTIuNDE1NCAxMy4wMTExVjE4Ljg5OTFDMTIuNDE1NCAxOS41NzQyIDEyLjgzNTkgMTkuOTgzNyAxMy41MjIxIDE5Ljk4MzdaIiBmaWxsPSIjMDA1ZmZmIi8+Cjwvc3ZnPg==');
 }
 
 @font-face {

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

@@ -43,3 +43,4 @@
 @use 'ThreadList/ThreadList-layout';
 @use 'ChatView/ChatView-layout';
 @use 'UnreadCountBadge/UnreadCountBadge-layout';
+@use 'AIStateIndicator/AIStateIndicator-layout';

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

@@ -44,3 +44,4 @@
 @use 'ThreadList/ThreadList-theme';
 @use 'ChatView/ChatView-theme';
 @use 'UnreadCountBadge/UnreadCountBadge-theme';
+@use 'AIStateIndicator/AIStateIndicator-theme';

package/src/assets/version.ts

@@ -1 +1 @@
-export const version = '5.11.2';
+export const version = '5.12.0';