diff --git a/src/v2/styles/AIStateIndicator/AIStateIndicator-layout.scss b/src/v2/styles/AIStateIndicator/AIStateIndicator-layout.scss new file mode 100644 index 0000000..652615f --- /dev/null +++ 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 new file mode 100644 index 0000000..9a28209 --- /dev/null +++ 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 index d2b321e..ee24cb4 100644 --- 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; -} \ No newline at end of file +} diff --git a/src/v2/styles/MessageInput/MessageInput-theme.scss b/src/v2/styles/MessageInput/MessageInput-theme.scss index cc371fd..ae5c425 100644 --- 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; } } -} \ No newline at end of file +} diff --git a/src/v2/styles/_icons.scss b/src/v2/styles/_icons.scss index 0ebafd2..778175c 100644 --- 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 index 2242fa0..df37fb0 100755 --- 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 index 27390bb..973b246 100644 --- 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';