feat: styles for ai chatbot components (#320)

GetStream · Dec 4, 2024 · 711c4bb · 711c4bb
1 parent 7f592fb
commit 711c4bb
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 4 deletions.
diff --git a/src/v2/styles/AIStateIndicator/AIStateIndicator-layout.scss b/src/v2/styles/AIStateIndicator/AIStateIndicator-layout.scss
@@ -0,0 +1,3 @@
+.str-chat__ai-state-indicator-container {
+  padding: 0 8px;
+}
diff --git a/src/v2/styles/AIStateIndicator/AIStateIndicator-theme.scss b/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);
+}
diff --git a/src/v2/styles/MessageInput/MessageInput-layout.scss b/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;
-}
+}
diff --git a/src/v2/styles/MessageInput/MessageInput-theme.scss b/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;
     }
   }
-}
+}
diff --git a/src/v2/styles/_icons.scss b/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==');
 }
 
 @font-face {

diff --git a/src/v2/styles/index.layout.scss b/src/v2/styles/index.layout.scss
@@ -43,3 +43,4 @@
 @use 'ThreadList/ThreadList-layout';
 @use 'ChatView/ChatView-layout';
 @use 'UnreadCountBadge/UnreadCountBadge-layout';
+@use 'AIStateIndicator/AIStateIndicator-layout';
diff --git a/src/v2/styles/index.scss b/src/v2/styles/index.scss
@@ -44,3 +44,4 @@
 @use 'ThreadList/ThreadList-theme';
 @use 'ChatView/ChatView-theme';
 @use 'UnreadCountBadge/UnreadCountBadge-theme';
+@use 'AIStateIndicator/AIStateIndicator-theme';