feat(chat): expose header slots & remove header component

Author: teodosiah

src/components/chat/chat-header.ts

@@ -1,9 +1,9 @@
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
+import IgcButtonComponent from '../button/button.js';
 import { registerComponent } from '../common/definitions/register.js';
 import type { Constructor } from '../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
-import IgcChatHeaderComponent from './chat-header.js';
 import IgcChatInputComponent from './chat-input.js';
 import IgcChatMessageListComponent from './chat-message-list.js';
 import { styles } from './themes/chat.base.css.js';
@@ -37,9 +37,9 @@ export default class IgcChatComponent extends EventEmitterMixin<
   public static register() {
     registerComponent(
       IgcChatComponent,
-      IgcChatHeaderComponent,
       IgcChatInputComponent,
-      IgcChatMessageListComponent
+      IgcChatMessageListComponent,
+      IgcButtonComponent
     );
   }
 
@@ -186,7 +186,15 @@ export default class IgcChatComponent extends EventEmitterMixin<
   protected override render() {
     return html`
       <div class="chat-container">
-        <igc-chat-header .text=${this.headerText}></igc-chat-header>
+        <div class="header" part="header">
+          <div class="info">
+            <slot name="prefix" part="prefix"></slot>
+            <slot name="title" part="title">${this.headerText}</slot>
+          </div>
+          <slot name="actions" class="actions">
+            <igc-button variant="flat">⋯</igcbutton>
+          </slot>
+        </div>
         <igc-chat-message-list
           .messages=${this.messages}
           .user=${this.user}

src/components/chat/chat.ts

@@ -15,4 +15,63 @@
     display: flex;
     flex-direction: column;
     height: 100%;
+  }
+  
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px;
+  }
+
+  .info {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    object-fit: cover;
+  }
+
+  .avatar-container {
+    position: relative;
+  }
+
+  .status-indicator {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background-color: #30D158;
+    border: 2px solid white;
+  }
+
+  .actions {
+    display: flex;
+    gap: 16px;
+  }
+
+  .action-button {
+    background: none;
+    border: none;
+    color: #0A84FF;
+    cursor: pointer;
+    font-size: 1.2rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    transition: white 0.2s;
+  }
+
+  .action-button:hover {
+    background-color: #E5E5EA;
   }