Merge branch 'main' into feat/search

# Conflicts:
#	src/v2/styles/_icons.scss

Author: MartinCupela

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/stream-chat-css",
-  "version": "5.4.0",
+  "version": "5.6.1",
   "main": "dist/css/index.css",
   "description": "Bundled CSS for Stream Chat web SDKs",
   "repository": "[email protected]:GetStream/stream-chat-css.git",

src/v2/styles/AIStateIndicator/AIStateIndicator-layout.scss

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

src/v2/styles/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);
+}

src/v2/styles/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);
       }
     }
   }

src/v2/styles/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');
 

src/v2/styles/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;

src/v2/styles/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;
-}
+}

src/v2/styles/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;
     }
   }
-}
+}

src/v2/styles/_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==');
   --str-chat__magnifier-glass-icon: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjEgMjEiIGZpbGw9ImN1cnJlbnRDb2xvciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNOSAwQzEzLjk2OCAwIDE4IDQuMDMyIDE4IDlDMTggMTMuOTY4IDEzLjk2OCAxOCA5IDE4QzQuMDMyIDE4IDAgMTMuOTY4IDAgOUMwIDQuMDMyIDQuMDMyIDAgOSAwWk05IDE2QzEyLjg2NyAxNiAxNiAxMi44NjcgMTYgOUMxNiA1LjEzMiAxMi44NjcgMiA5IDJDNS4xMzIgMiAyIDUuMTMyIDIgOUMyIDEyLjg2NyA1LjEzMiAxNiA5IDE2Wk0yMC4zMTQgMTguODk5TDE3LjQ4NSAxNi4wNzFMMTYuMDcxIDE3LjQ4NUwxOC44OTkgMjAuMzE0TDIwLjMxNCAxOC44OTlaIi8+Cjwvc3ZnPgo=');
   --str-chat__clear-icon: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMjAiIGZpbGw9ImN1cnJlbnRDb2xvciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wIDEwQzAgNC40NzcxNSA0LjQ3NzE1IDAgMTAgMEMxNS41MjI4IDAgMjAgNC40NzcxNSAyMCAxMEMyMCAxNS41MjI4IDE1LjUyMjggMjAgMTAgMjBDNC40NzcxNSAyMCAwIDE1LjUyMjggMCAxMFpNMTAgMkM1LjU4MTcyIDIgMiA1LjU4MTcyIDIgMTBDMiAxNC40MTgzIDUuNTgxNzIgMTggMTAgMThDMTQuNDE4MyAxOCAxOCAxNC40MTgzIDE4IDEwQzE4IDUuNTgxNzIgMTQuNDE4MyAyIDEwIDJaTTEzLjUzNTggNi40NjQ0NkMxMy4xNDUzIDYuMDczOTQgMTIuNTEyMSA2LjA3Mzk0IDEyLjEyMTYgNi40NjQ0NkwxMC4wMDAzIDguNTg1NzhMNy44Nzg5OCA2LjQ2NDQ2QzcuNDg4NDYgNi4wNzM5NCA2Ljg1NTI5IDYuMDczOTQgNi40NjQ3NyA2LjQ2NDQ2QzYuMDc0MjQgNi44NTQ5OSA2LjA3NDI0IDcuNDg4MTUgNi40NjQ3NyA3Ljg3ODY4TDguNTg2MDkgMTBMNi40NjQ3NyAxMi4xMjEzQzYuMDc0MjQgMTIuNTExOCA2LjA3NDI0IDEzLjE0NSA2LjQ2NDc3IDEzLjUzNTVDNi44NTUyOSAxMy45MjYxIDcuNDg4NDYgMTMuOTI2MSA3Ljg3ODk4IDEzLjUzNTVMMTAuMDAwMyAxMS40MTQyTDEyLjEyMTYgMTMuNTM1NUMxMi41MTIxIDEzLjkyNjEgMTMuMTQ1MyAxMy45MjYxIDEzLjUzNTggMTMuNTM1NUMxMy45MjY0IDEzLjE0NSAxMy45MjY0IDEyLjUxMTggMTMuNTM1OCAxMi4xMjEzTDExLjQxNDUgMTBMMTMuNTM1OCA3Ljg3ODY4QzEzLjkyNjQgNy40ODgxNSAxMy45MjY0IDYuODU0OTkgMTMuNTM1OCA2LjQ2NDQ2WiIvPgo8L3N2Zz4K');
 }

src/v2/styles/index.layout.scss

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