refactor(chat): remove containers when they are empty

Author: teodosiah

src/components/chat/chat-input.ts

@@ -327,7 +327,10 @@ export default class IgcChatInputComponent extends LitElement {
   protected override render() {
     return html`
       <div part="input-container" class="${this.dragClass}">
-        ${this.renderAttachmentsArea()}
+        ${this._chatState?.inputAttachments &&
+        this._chatState?.inputAttachments.length > 0
+          ? this.renderAttachmentsArea()
+          : nothing}
 
         <div part="input-wrapper">
           ${this._chatState?.options?.templates?.textInputTemplate

src/components/chat/chat.spec.ts

@@ -201,11 +201,6 @@ describe('Chat', () => {
                       <slot name="empty-state">
                       </slot>
                     </div>
-                    <div aria-label="Suggestions" part="suggestions-container" role="list">
-                        <slot name="suggestions-header" part="suggestions-header"> </slot>
-                        <slot name="suggestions" part="suggestions">
-                        </slot>
-                    </div>
                     <igc-chat-input>
                     </igc-chat-input>
                 </div>`
@@ -215,8 +210,6 @@ describe('Chat', () => {
 
       expect(inputArea).shadowDom.to.equal(
         `<div part="input-container">
-                    <div aria-label="Attachments" part="attachments" role="list">
-                    </div>
                     <div part="input-wrapper">
                         <igc-textarea
                         part="text-input"
@@ -496,8 +489,6 @@ describe('Chat', () => {
 
       expect(inputArea).shadowDom.to.equal(
         `<div part="input-container">
-                    <div aria-label="Attachments" part="attachments" role="list">
-                    </div>
                     <div part="input-wrapper">
                         <igc-textarea
                         part="text-input"

src/components/chat/chat.ts

@@ -1,5 +1,5 @@
 import { ContextProvider } from '@lit/context';
-import { html, LitElement, type TemplateResult } from 'lit';
+import { html, LitElement, nothing, type TemplateResult } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { addThemingController } from '../../theming/theming-controller.js';
 import IgcButtonComponent from '../button/button.js';
@@ -293,7 +293,10 @@ export default class IgcChatComponent extends EventEmitterMixin<
               <slot name="empty-state"> </slot>
             </div>`
           : html`<igc-chat-message-list> </igc-chat-message-list>`}
-        ${this.renderSuggestions()}
+        ${this._chatState.options?.suggestions &&
+        this._chatState.options?.suggestions?.length > 0
+          ? this.renderSuggestions()
+          : nothing}
         <igc-chat-input></igc-chat-input>
       </div>
     `;