refactor(chat): header should be displayed only if it has content

Author: teodosiah

src/components/chat/chat-state.ts

@@ -322,6 +322,18 @@ export class ChatState {
     const [fileBaseType] = fileType.split('/');
     return this._acceptedTypesCache.wildcardTypes.has(fileBaseType);
   }
+
+  /**
+   * Checks if a slot is empty.
+   * @param name Slot name to check
+   * @returns True if the slot has content, false otherwise
+   */
+  public hasSlotContent(name: string): boolean {
+    return (
+      this._host.renderRoot.querySelector<HTMLSlotElement>(`slot[name=${name}]`)
+        ?.childNodes.length !== 0
+    );
+  }
   //#endregion
 }
 

src/components/chat/chat.spec.ts

@@ -187,16 +187,6 @@ describe('Chat', () => {
 
       expect(chat).shadowDom.to.equal(
         ` <div part="chat-container">
-                    <div part="header" part="header">
-                        <div part="info">
-                            <slot name="prefix" part="prefix">
-                            </slot>
-                            <slot name="title" part="title">
-                            </slot>
-                        </div>
-                        <slot part="actions" name="actions">
-                        </slot>
-                    </div>
                     <div part="empty-state">
                       <slot name="empty-state">
                       </slot>
@@ -401,13 +391,11 @@ describe('Chat', () => {
 
       expect(headerArea).dom.to.equal(
         `<div part="header" part="header"> 
-                    <div part="info">
-                        <slot name="prefix" part="prefix">
-                        </slot>
-                        <slot name="title" part="title">
-                            Chat
-                        </slot>
-                    </div>
+                      <slot name="prefix" part="prefix">
+                      </slot>
+                      <slot name="title" part="title">
+                          Chat
+                      </slot>
                     <slot part="actions" name="actions">
                     </slot>
                 </div>`

src/components/chat/chat.ts

@@ -1,6 +1,6 @@
 import { ContextProvider } from '@lit/context';
 import { html, LitElement, nothing, type TemplateResult } from 'lit';
-import { property, query } from 'lit/decorators.js';
+import { property, query, state } from 'lit/decorators.js';
 import { addThemingController } from '../../theming/theming-controller.js';
 import IgcButtonComponent from '../button/button.js';
 import { chatContext } from '../common/context.js';
@@ -157,6 +157,9 @@ export default class IgcChatComponent extends EventEmitterMixin<
     initialValue: this._chatState,
   });
 
+  @state()
+  private _hasContent = false;
+
   @query(IgcChatInputComponent.tagName)
   private _chatInput!: IgcChatInputComponent;
 
@@ -246,12 +249,10 @@ export default class IgcChatComponent extends EventEmitterMixin<
 
   private renderHeader() {
     return html` <div part="header">
-      <div part="info">
-        <slot name="prefix" part="prefix"></slot>
-        <slot name="title" part="title"
-          >${this._chatState.options?.headerText}</slot
-        >
-      </div>
+      <slot name="prefix" part="prefix"></slot>
+      <slot name="title" part="title"
+        >${this._chatState.options?.headerText}</slot
+      >
       <slot name="actions" part="actions"></slot>
     </div>`;
   }
@@ -284,10 +285,23 @@ export default class IgcChatComponent extends EventEmitterMixin<
     this._context.setValue(this._chatState, true);
   }
 
+  protected override createRenderRoot(): HTMLElement | DocumentFragment {
+    const root = super.createRenderRoot();
+    root.addEventListener('slotchange', () => {
+      this._hasContent =
+        this._chatState?.hasSlotContent('prefix') ||
+        this._chatState?.hasSlotContent('title') ||
+        this._chatState?.hasSlotContent('actions');
+    });
+    return root;
+  }
+
   protected override render() {
     return html`
       <div part="chat-container">
-        ${this.renderHeader()}
+        ${this._hasContent || this._chatState.options?.headerText
+          ? this.renderHeader()
+          : nothing}
         ${this.messages.length === 0
           ? html`<div part="empty-state">
               <slot name="empty-state"> </slot>