fix(Chat): Show suggestions below input (if configured) when there's no header. (#1908)

---------

Co-authored-by: sivanova <[email protected]>
Co-authored-by: Silvia Ivanova <[email protected]>

Author: gedinakova

src/components/chat/chat.spec.ts

@@ -312,9 +312,9 @@ describe('Chat', () => {
       await elementUpdated(chat);
 
       const { input, suggestionsContainer } = getChatDOM(chat);
-      expect(suggestionsContainer.getBoundingClientRect().top).lessThanOrEqual(
-        input.self.getBoundingClientRect().bottom
-      );
+      expect(
+        suggestionsContainer.getBoundingClientRect().top
+      ).greaterThanOrEqual(input.self.getBoundingClientRect().bottom);
     });
 
     it('should render typing indicator if `isTyping` is true', async () => {

src/components/chat/chat.ts

@@ -502,27 +502,29 @@ export default class IgcChatComponent extends EventEmitterMixin<
             : nothing}
         </div>
 
-        <igc-chat-input
-          exportparts="
-              input-container: input-area-container,
-              input-wrapper: input-container,
-              attachments: input-attachments-container,
-              attachment-wrapper: input-attachment-container,
-              attachment-name: input-attachment-name,
-              attachment-icon: input-attachment-icon,
-              text-input,
-              actions-container: input-actions-container,
-              input-actions-start,
-              input-actions-end,
-              file-upload-container,
-              file-upload,
-              send-button-container,
-              send-button"
-        >
-        </igc-chat-input>
-        ${this._state.suggestionsPosition === 'below-input'
-          ? suggestions
-          : nothing}
+        <div part="input-area-container">
+          <igc-chat-input
+            exportparts="
+                input-container: input-area-container,
+                input-wrapper: input-container,
+                attachments: input-attachments-container,
+                attachment-wrapper: input-attachment-container,
+                attachment-name: input-attachment-name,
+                attachment-icon: input-attachment-icon,
+                text-input,
+                actions-container: input-actions-container,
+                input-actions-start,
+                input-actions-end,
+                file-upload-container,
+                file-upload,
+                send-button-container,
+                send-button"
+          >
+          </igc-chat-input>
+          ${this._state.suggestionsPosition === 'below-input'
+            ? suggestions
+            : nothing}
+        </div>
       </div>
     `;
   }

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

@@ -25,20 +25,28 @@ $inline-inset: rem(24px);
     height: 100%;
 }
 
+[part='input-area-container'],
 [part='message-area-container'] {
     display: grid;
     grid-template-columns: subgrid;
     overflow: hidden auto;
     grid-column: 1 / -1;
     grid-template-rows: auto 1fr;
     align-items: start;
+}
+
+[part='message-area-container'] {
     grid-row: 2;
 
     &:has([part='empty-state']) {
         grid-template-rows: 1fr auto;
     }
 }
 
+[part='input-area-container'] {
+    grid-row: 3;
+}
+
 [part='message-list'],
 [part='empty-state'],
 [part='suggestions-container'] {
@@ -125,10 +133,6 @@ slot[name='prefix'] {
     margin-inline-end: rem(32px);
 }
 
-igc-chat-input {
-    grid-row: 3;
-}
-
 igc-list {
     --ig-size: 3;