refactor(chat): Adopt page styles for input area renderers (#1945)

Setting 'adoptRootStyles' will also include the
renderers in the chat input area.

Deprecated the 'typingIndicator' renderer and
exposed a new 'typing-indicator' instead.

Author: rkaraivanov

src/components/chat/chat-input.ts

@@ -24,7 +24,7 @@ import type {
   ChatTemplateRenderer,
   IgcChatMessageAttachment,
 } from './types.js';
-import { getChatAcceptedFiles, getIconName } from './utils.js';
+import { adoptPageStyles, getChatAcceptedFiles, getIconName } from './utils.js';
 
 type DefaultInputRenderers = {
   input: ChatTemplateRenderer<ChatInputRenderContext>;
@@ -119,6 +119,12 @@ export default class IgcChatInputComponent extends LitElement {
     addThemingController(this, all);
   }
 
+  protected override firstUpdated(): void {
+    if (this._state.options?.adoptRootStyles) {
+      adoptPageStyles(this);
+    }
+  }
+
   /** @internal */
   public focusInput(): void {
     this._textInputElement.focus();

src/components/chat/chat-message.ts

@@ -19,7 +19,7 @@ import type {
   ChatTemplateRenderer,
   IgcChatMessage,
 } from './types.js';
-import { chatMessageAdoptPageStyles } from './utils.js';
+import { adoptPageStyles } from './utils.js';
 
 const LIKE_INACTIVE = 'thumb_up_inactive';
 const LIKE_ACTIVE = 'thumb_up_active';
@@ -89,7 +89,7 @@ export default class IgcChatMessageComponent extends LitElement {
 
   protected override firstUpdated(): void {
     if (this._state.options?.adoptRootStyles) {
-      chatMessageAdoptPageStyles(this);
+      adoptPageStyles(this);
     }
   }
 

src/components/chat/chat.ts

@@ -105,7 +105,8 @@ const Slots = setSlots(
   'suggestions',
   'suggestions-actions',
   'suggestion',
-  'empty-state'
+  'empty-state',
+  'typing-indicator'
 );
 
 /**
@@ -133,6 +134,7 @@ const Slots = setSlots(
  * @slot suggestions-actions - Slot for rendering additional actions.
  * @slot suggestion - Slot for rendering a single suggestion item.
  * @slot empty-state - Slot shown when there are no messages.
+ * @slot typing-indicator - Slot for the "is typing" indicator.
  *
  * @csspart chat-container - Styles the main chat container.
  * @csspart header - Styles the chat header container.
@@ -413,7 +415,9 @@ export default class IgcChatComponent extends EventEmitterMixin<
         ${this._state.options?.isTyping
           ? html`
               <div part="typing-indicator">
-                ${this._getRenderer('typingIndicator')(ctx)}
+                <slot name="typing-indicator"
+                  >${this._getRenderer('typingIndicator')(ctx)}</slot
+                >
               </div>
             `
           : nothing}

src/components/chat/types.ts

@@ -234,6 +234,8 @@ export interface ChatRenderers {
   messageHeader?: ChatTemplateRenderer<ChatMessageRenderContext>;
   /**
    * Custom renderer for the "is typing" indicator.
+   *
+   * @deprecated since 6.4.0. Use the `typing-indicator` slot.
    */
   typingIndicator?: ChatTemplateRenderer<ChatRenderContext>;
   /**

src/components/chat/utils.ts

@@ -1,6 +1,5 @@
 import { adoptStyles, type LitElement } from 'lit';
 import { last } from '../common/util.js';
-import type IgcChatMessageComponent from './chat-message.js';
 import type { IgcChatMessageAttachment } from './types.js';
 
 export type ChatAcceptedFileTypes = {
@@ -110,9 +109,7 @@ export function isImageAttachment(
   );
 }
 
-export function chatMessageAdoptPageStyles(
-  message: IgcChatMessageComponent
-): void {
+export function adoptPageStyles(element: LitElement): void {
   const sheets: CSSStyleSheet[] = [];
 
   for (const sheet of document.styleSheets) {
@@ -129,6 +126,6 @@ export function chatMessageAdoptPageStyles(
     } catch {}
   }
 
-  const ctor = message.constructor as typeof LitElement;
-  adoptStyles(message.shadowRoot!, [...ctor.elementStyles, ...sheets]);
+  const ctor = element.constructor as typeof LitElement;
+  adoptStyles(element.shadowRoot!, [...ctor.elementStyles, ...sheets]);
 }