fix(chat): horizontal & vertical scrollbar issues

Author: SisIvanova

src/components/chat/chat.ts

@@ -368,16 +368,18 @@ export default class IgcChatComponent extends EventEmitterMixin<
     return html`
       <div part="chat-container">
         ${this.renderHeader()}
-        ${this.messages.length === 0
-          ? html`<div part="empty-state">
-              <slot name="empty-state"> </slot>
-            </div>`
-          : html`<igc-chat-message-list part="chat-messages">
-            </igc-chat-message-list>`}
-        ${hasSuggestions &&
-        this._chatState.suggestionsPosition === 'below-messages'
-          ? this.renderSuggestions()
-          : nothing}
+        <div part="chat-wrapper">
+          ${this.messages.length === 0
+            ? html`<div part="empty-state">
+                <slot name="empty-state"> </slot>
+              </div>`
+            : html`<igc-chat-message-list part="chat-messages">
+              </igc-chat-message-list>`}
+          ${hasSuggestions &&
+          this._chatState.suggestionsPosition === 'below-messages'
+            ? this.renderSuggestions()
+            : nothing}
+        </div>
         <igc-chat-input> </igc-chat-input>
         ${hasSuggestions &&
         this._chatState.suggestionsPosition === 'below-input'

src/components/chat/themes/chat.base.scss

@@ -21,7 +21,15 @@ $inline-inset: rem(16px);
   height: 100%;
 }
 
-[part='chat-messages'],
+[part='chat-wrapper'] {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden auto;
+  width: 100%;
+  flex: 1;
+  align-items: center;
+}
+
 [part='empty-state'],
 [part='suggestions-container'] {
   max-width: calc(rem(760px) + $inline-inset * 2);
@@ -65,3 +73,12 @@ igc-list {
   min-height: fit-content;
   padding-block-end: rem(24px);
 }
+
+igc-list-header,
+igc-list-item {
+  max-width: rem(576px);
+}
+
+igc-list-item {
+  cursor: pointer;
+}

src/components/chat/themes/input.base.scss

@@ -36,6 +36,7 @@
         width: 0;
         aspect-ratio: 1;
         inset: 0;
+        opacity: 0;
     }
 }
 

src/components/chat/themes/message-list.base.scss

@@ -1,17 +1,21 @@
 @use 'styles/common/component';
 @use 'styles/utilities' as *;
 
+$inline-inset: rem(16px);
+
 :host {
     display: block;
-    overflow-y: auto;
-    flex: 1;
+    width: 100%;
+    max-width: calc(rem(760px) + $inline-inset * 2);
+    padding-inline: $inline-inset;
     padding-block: rem(16px) rem(24px);
 }
 
 [part='message-list'] {
     display: flex;
     flex-direction: column;
     gap: rem(24px);
+    width: 100%;
 }
 
 [part='typing-indicator'] {

src/components/chat/themes/message.base.scss

@@ -30,4 +30,17 @@
     margin: 0;
     padding: 0;
   }
+
+  a {
+    overflow-wrap: anywhere;
+    word-break: break-word;
+    color: color(primary, 500);
+  }
 }
+
+pre, code {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  overflow-x: auto;
+}
+

src/components/chat/themes/shared/chat.bootstrap.scss

@@ -0,0 +1,9 @@
+@use 'styles/utilities' as *;
+
+igc-list {
+    border: none;
+}
+
+igc-list-item {
+    background: initial;
+}

src/components/chat/themes/shared/chat.indigo.scss

@@ -14,8 +14,6 @@ $theme: $indigo;
     };
 }
 
-[part='suggestions-container'] {
-    igc-chip {
-      --ig-size: 2;
-    }
+igc-list {
+  --ig-size: 2;
 }

src/components/chat/themes/themes.ts

@@ -13,14 +13,15 @@ import { styles as indigoLight } from './light/chat.indigo.css.js';
 import { styles as materialLight } from './light/chat.material.css.js';
 // Shared Styles
 import { styles as shared } from './light/chat.shared.css.js';
+import { styles as bootstrap } from './shared/chat.bootstrap.css.js';
 import { styles as indigo } from './shared/chat.indigo.css.js';
 
 const light = {
   shared: css`
     ${shared}
   `,
   bootstrap: css`
-    ${bootstrapLight}
+    ${bootstrap} ${bootstrapLight}
   `,
   material: css`
     ${materialLight}
@@ -38,7 +39,7 @@ const dark = {
     ${shared}
   `,
   bootstrap: css`
-    ${bootstrapDark}
+    ${bootstrap} ${bootstrapDark}
   `,
   material: css`
     ${materialDark}

src/components/chat/types.ts

@@ -240,4 +240,4 @@ export const thumbDownIcon =
 export const regenerateIcon =
   '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M480-160q-134 0-227-93t-93-227q0-134 93-227t227-93q69 0 132 28.5T720-690v-110h80v280H520v-80h168q-32-56-87.5-88T480-720q-100 0-170 70t-70 170q0 100 70 170t170 70q77 0 139-44t87-116h84q-28 106-114 173t-196 67Z"/></svg>';
 export const starIcon =
-  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="25"><path d="M6.586 4.768c.135-.358.65-.358.785 0l.558 1.481a.41.41 0 0 0 .093.145c.043.043.095.077.154.098l1.508.548a.41.41 0 0 1 0 .771l-1.508.548a.42.42 0 0 0-.175.121.41.41 0 0 0-.072.122l-.558 1.481c-.135.358-.65.358-.785 0l-.558-1.481c-.042-.113-.133-.201-.247-.243l-1.508-.548a.41.41 0 0 1 0-.771l1.508-.548c.115-.042.205-.13.247-.243l.558-1.481zM12.21 8.05c.271-.734 1.31-.734 1.581 0l1.124 3.037a.84.84 0 0 0 .498.498l3.037 1.124c.734.271.734 1.31 0 1.581l-3.037 1.124a.84.84 0 0 0-.498.498l-1.124 3.037c-.271.734-1.309.734-1.581 0l-1.124-3.037a.84.84 0 0 0-.498-.498L7.55 14.291c-.734-.271-.734-1.31 0-1.581l3.037-1.124a.84.84 0 0 0 .498-.498L12.21 8.05zm-5.576 8.705c.126-.34.607-.34.733 0l.31.838a.39.39 0 0 0 .231.231l.838.31c.34.126.34.607 0 .733l-.838.31a.39.39 0 0 0-.231.231l-.31.838c-.126.34-.607.34-.733 0l-.31-.838a.39.39 0 0 0-.231-.231l-.838-.31c-.34-.126-.34-.607 0-.733l.838-.31a.39.39 0 0 0 .231-.231l.31-.838zm11.732-11c-.126-.34-.607-.34-.733 0l-.31.838a.39.39 0 0 1-.231.231l-.838.31c-.34.126-.34.607 0 .733l.838.31a.39.39 0 0 1 .231.231l.31.838c.126.34.607.34.733 0l.31-.838a.39.39 0 0 1 .231-.231l.838-.31c.34-.126.34-.607 0-.733l-.838-.31a.39.39 0 0 1-.231-.231l-.31-.838z"/></svg>';
+  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25"><path d="M6.58624 4.76825C6.72103 4.41058 7.23629 4.41058 7.37112 4.76825L7.92907 6.24921C7.94973 6.30414 7.98177 6.35321 8.02248 6.39423C8.06524 6.43719 8.11758 6.47089 8.17626 6.49213L9.6841 7.04022C10.0484 7.17255 10.0484 7.67865 9.6841 7.81097L8.17626 8.35907C8.10738 8.38422 8.04729 8.42621 8.00109 8.48016C7.97045 8.51605 7.94595 8.55707 7.92907 8.60199L7.37112 10.0829C7.23629 10.4409 6.72103 10.4409 6.58624 10.0829L6.02828 8.60199C5.98589 8.48944 5.89559 8.40082 5.78106 8.35907L4.27322 7.81097C3.90893 7.67865 3.90893 7.17255 4.27322 7.04022L5.78106 6.49213C5.89559 6.45062 5.98589 6.36176 6.02828 6.24921L6.58624 4.76825Z" /><path d="M12.2095 8.05023C12.481 7.31659 13.519 7.31659 13.7905 8.05023L14.9144 11.0876C14.9997 11.3183 15.1816 11.5002 15.4123 11.5856L18.4496 12.7094C19.1835 12.9809 19.1835 14.019 18.4496 14.2905L15.4123 15.4142C15.1816 15.4997 14.9997 15.6816 14.9144 15.9123L13.7905 18.9496C13.519 19.6833 12.481 19.6833 12.2095 18.9496L11.0856 15.9123C11.0002 15.6816 10.8183 15.4997 10.5876 15.4142L7.55038 14.2905C6.81652 14.019 6.81652 12.9809 7.55038 12.7094L10.5876 11.5856C10.8183 11.5002 11.0002 11.3183 11.0856 11.0876L12.2095 8.05023Z" /><path d="M6.63354 16.7551C6.75942 16.415 7.24056 16.415 7.36645 16.7551L7.67638 17.5927C7.71597 17.6996 7.80029 17.7839 7.90725 17.8234L8.74487 18.1335C9.08504 18.2595 9.08504 18.7404 8.74487 18.8664L7.90725 19.1765C7.85857 19.1945 7.8146 19.2216 7.7774 19.256C7.73281 19.2973 7.69796 19.3488 7.67638 19.4072L7.36645 20.2448C7.24056 20.5849 6.75942 20.5849 6.63354 20.2448L6.3236 19.4072C6.3055 19.3583 6.27807 19.3141 6.2434 19.2768C6.2022 19.2326 6.15081 19.1979 6.09274 19.1765L5.25512 18.8664C4.91494 18.7404 4.91494 18.2595 5.25512 18.1335L6.09274 17.8234C6.1997 17.7839 6.28402 17.6996 6.3236 17.5927L6.63354 16.7551Z" /><path d="M18.3664 5.75507C18.2406 5.41498 17.7594 5.41498 17.6335 5.75507L17.3236 6.59271C17.284 6.69965 17.1997 6.78387 17.0928 6.82343L16.2551 7.13348C15.915 7.25946 15.915 7.74042 16.2551 7.86639L17.0928 8.17645C17.1997 8.216 17.284 8.30023 17.3236 8.40717L17.6335 9.24481C17.7594 9.5849 18.2406 9.5849 18.3664 9.24481L18.6764 8.40717C18.716 8.30023 18.8003 8.216 18.9072 8.17645L19.7449 7.86639C20.085 7.74042 20.085 7.25946 19.7449 7.13348L18.9072 6.82343C18.8003 6.78387 18.716 6.69965 18.6764 6.59271L18.3664 5.75507Z" /></svg>';