igniteui-webcomponents 6.3.0-alpha.0 → 6.3.0-alpha.1

package/components/chat/chat-message-list.d.ts

@@ -6,10 +6,9 @@ import { LitElement } from 'lit';
  *
  * This component:
  * - Renders messages using the `<igc-chat-message>` component.
- * - Supports keyboard navigation between messages (Home, End, ArrowUp, ArrowDown).
  * - Manages focus highlighting on active messages.
  * - Automatically scrolls to the bottom when new messages arrive, unless auto-scroll is disabled.
- * - Displays a typing indicator if the chat state option `isComposing` is true.
+ * - Displays a typing indicator if the chat state option `isTyping` is true.
  *
  * Accessibility:
  * - Uses ARIA roles and properties for grouping and active descendant management.
@@ -21,37 +20,16 @@ export default class IgcChatMessageListComponent extends LitElement {
     static readonly tagName = "igc-chat-message-list";
     /** Styles applied to the component */
     static styles: import("lit").CSSResult[];
-    /**
-     * Consumed chat state context providing messages, options, and user data.
-     * @private
-     */
-    private _chatState?;
-    /**
-     * Currently active message id used for focus and keyboard navigation.
-     * @private
-     */
-    private _activeMessageId;
     /**
      * Registers this component and its dependencies.
      * Used internally for component setup.
      */
     static register(): void;
-    constructor();
-    /**
-     * Formats a date to a human-readable label.
-     * Returns 'Today', 'Yesterday', or localized date string.
-     * @param date - Date object to format
-     * @returns formatted string
-     * @private
-     */
-    private formatDate;
     /**
-     * Groups messages by their date labels.
-     * @param messages - Array of messages to group
-     * @returns Array of groups with date label and messages
+     * Consumed chat state context providing messages, options, and user data.
      * @private
      */
-    private groupMessagesByDate;
+    private _chatState?;
     /**
      * Scrolls the container to the bottom, typically called after new messages are rendered.
      * @private
@@ -62,26 +40,7 @@ export default class IgcChatMessageListComponent extends LitElement {
      * @param messageId - The id of the message to scroll to
      * @private
      */
-    private scrollToMessage;
-    /**
-     * Handles focus entering the message list container.
-     * Sets the active message to the last message for keyboard navigation.
-     * @private
-     */
-    private handleFocusIn;
-    /**
-     * Handles focus leaving the message list container.
-     * Clears the active message.
-     * @private
-     */
-    private handleFocusOut;
-    /**
-     * Handles keyboard navigation within the message list.
-     * Supports Home, End, ArrowUp, ArrowDown keys to move active message focus.
-     * @param e KeyboardEvent from user input
-     * @private
-     */
-    private navigateToMessage;
+    scrollToMessage(messageId: string): void;
     /**
      * Lifecycle: called when the component updates.
      * Scrolls to bottom unless auto-scroll is disabled.
@@ -93,7 +52,7 @@ export default class IgcChatMessageListComponent extends LitElement {
      */
     protected firstUpdated(): void;
     /**
-     * Renders the typing indicator template if composing.
+     * Renders the typing indicator template.
      * @protected
      */
     protected renderLoadingTemplate(): Generator<import("lit-html").TemplateResult<1>, void, unknown>;

package/components/chat/chat-message-list.js

@@ -6,10 +6,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { consume } from '@lit/context';
 import { html, LitElement, nothing } from 'lit';
-import { state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { chatContext } from '../common/context.js';
-import { addKeybindings, arrowDown, arrowUp, endKey, homeKey, } from '../common/controllers/key-bindings.js';
 import { registerComponent } from '../common/definitions/register.js';
 import IgcChatMessageComponent from './chat-message.js';
 import { styles } from './themes/message-list.base.css.js';
@@ -18,45 +16,6 @@ class IgcChatMessageListComponent extends LitElement {
     static register() {
         registerComponent(IgcChatMessageListComponent, IgcChatMessageComponent);
     }
-    constructor() {
-        super();
-        this._activeMessageId = '';
-        addKeybindings(this)
-            .set(homeKey, this.navigateToMessage)
-            .set(endKey, this.navigateToMessage)
-            .set(arrowUp, this.navigateToMessage)
-            .set(arrowDown, this.navigateToMessage);
-    }
-    formatDate(date) {
-        const today = new Date();
-        const yesterday = new Date(today);
-        yesterday.setDate(yesterday.getDate() - 1);
-        if (date.toDateString() === today.toDateString()) {
-            return 'Today';
-        }
-        if (date.toDateString() === yesterday.toDateString()) {
-            return 'Yesterday';
-        }
-        return date.toLocaleDateString('en-US', {
-            weekday: 'long',
-            month: 'short',
-            day: 'numeric',
-        });
-    }
-    groupMessagesByDate(messages) {
-        const grouped = {};
-        messages.forEach((message) => {
-            const dateStr = this.formatDate(message.timestamp);
-            if (!grouped[dateStr]) {
-                grouped[dateStr] = [];
-            }
-            grouped[dateStr].push(message);
-        });
-        return Object.keys(grouped).map((date) => ({
-            date,
-            messages: grouped[date],
-        }));
-    }
     scrollToBottom() {
         requestAnimationFrame(() => {
             const container = this.shadowRoot?.host;
@@ -69,47 +28,6 @@ class IgcChatMessageListComponent extends LitElement {
         const messageElement = this.shadowRoot?.querySelector(`#message-${messageId}`);
         messageElement?.scrollIntoView();
     }
-    handleFocusIn() {
-        if (!this._chatState?.messages || this._chatState.messages.length === 0) {
-            return;
-        }
-        const lastMessage = this._chatState.sortedMessagesIds?.pop() ?? '';
-        this._activeMessageId = lastMessage !== '' ? `message-${lastMessage}` : '';
-    }
-    handleFocusOut() {
-        this._activeMessageId = '';
-    }
-    navigateToMessage(e) {
-        if (!this._chatState?.messages || this._chatState.messages.length === 0) {
-            return;
-        }
-        const currentIndex = this._chatState?.sortedMessagesIds.findIndex((id) => `message-${id}` === this._activeMessageId);
-        let activeMessageId = '';
-        const key = e.key.toLowerCase();
-        switch (key) {
-            case 'home':
-                activeMessageId = this._chatState.sortedMessagesIds[0];
-                break;
-            case 'end':
-                activeMessageId =
-                    this._chatState.sortedMessagesIds[this._chatState.sortedMessagesIds.length - 1];
-                break;
-            case 'arrowup':
-                if (currentIndex > 0) {
-                    activeMessageId = this._chatState.sortedMessagesIds[currentIndex - 1];
-                }
-                break;
-            case 'arrowdown':
-                if (currentIndex < this._chatState?.messages.length - 1) {
-                    activeMessageId = this._chatState.sortedMessagesIds[currentIndex + 1];
-                }
-                break;
-            default:
-                return;
-        }
-        this._activeMessageId = `message-${activeMessageId}`;
-        this.scrollToMessage(activeMessageId);
-    }
     updated() {
         if (!this._chatState?.options?.disableAutoScroll) {
             this.scrollToBottom();
@@ -121,44 +39,40 @@ class IgcChatMessageListComponent extends LitElement {
         }
     }
     *renderLoadingTemplate() {
-        yield html `${this._chatState?.options?.templates?.composingIndicatorTemplate
-            ? this._chatState.options.templates.composingIndicatorTemplate
+        yield html `${this._chatState?.options?.templates?.typingIndicatorTemplate
+            ? this._chatState.options.templates.typingIndicatorTemplate
             : html `<div part="typing-indicator">
           <div part="typing-dot"></div>
           <div part="typing-dot"></div>
           <div part="typing-dot"></div>
+          <div part="typing-dot"></div>
         </div>`}`;
     }
     render() {
-        const groupedMessages = this.groupMessagesByDate(this._chatState?.messages ?? []);
+        const messages = this._chatState?.messages ?? [];
         return html `
       <div
         part="message-container"
-        aria-activedescendant=${this._activeMessageId}
         role="group"
         aria-label="Message list"
         tabindex="0"
-        @focusin=${this.handleFocusIn}
-        @focusout=${this.handleFocusOut}
       ></div>
         <div part="message-list">
-          ${repeat(groupedMessages, (group) => group.date, (group) => html `
-              ${repeat(group.messages, (message) => message.id, (message) => {
+           ${repeat(messages, (message) => message.id, (message) => {
             const messageId = `message-${message.id}`;
             return html `
-                    <igc-chat-message
-                      id=${messageId}
-                      role="option"
-                      part="message-item ${this._activeMessageId === messageId
-                ? 'active'
-                : ''}"
-                      .message=${message}
-                    >
-                    </igc-chat-message>
-                  `;
+                 <igc-chat-message
+                   id=${messageId}
+                   role="option"
+                   part="message-item"
+                   .message=${message}
+                   exportparts="message-container, message-text, message-attachments, message-actions,
+                   attachments-container, attachment, attachment-header, attachment-content, attachment-icon, file-name, actions: attachment-actions"
+                 >
+                 </igc-chat-message>
+               `;
         })}
-            `)}
-          ${this._chatState?.options?.isComposing
+          ${this._chatState?.options?.isTyping
             ? this.renderLoadingTemplate()
             : nothing}
         </div>
@@ -172,7 +86,4 @@ export default IgcChatMessageListComponent;
 __decorate([
     consume({ context: chatContext, subscribe: true })
 ], IgcChatMessageListComponent.prototype, "_chatState", void 0);
-__decorate([
-    state()
-], IgcChatMessageListComponent.prototype, "_activeMessageId", void 0);
 //# sourceMappingURL=chat-message-list.js.map

package/components/chat/chat-message-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"chat-message-list.js","sourceRoot":"","sources":["../../../src/components/chat/chat-message-list.ts"],"names":[],"mappings":"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","sourcesContent":["import { consume } from '@lit/context';\nimport { html, LitElement, nothing } from 'lit';\nimport { state } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { chatContext } from '../common/context.js';\nimport {\n  addKeybindings,\n  arrowDown,\n  arrowUp,\n  endKey,\n  homeKey,\n} from '../common/controllers/key-bindings.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport IgcChatMessageComponent from './chat-message.js';\nimport type { ChatState } from './chat-state.js';\nimport { styles } from './themes/message-list.base.css.js';\nimport { styles as shared } from './themes/shared/message-list.common.css.js';\nimport type { IgcMessage } from './types.js';\n\n/**\n * A chat message list component that displays a list of chat messages grouped by date.\n *\n * @element igc-chat-message-list\n *\n * This component:\n * - Renders messages using the `<igc-chat-message>` component.\n * - Supports keyboard navigation between messages (Home, End, ArrowUp, ArrowDown).\n * - Manages focus highlighting on active messages.\n * - Automatically scrolls to the bottom when new messages arrive, unless auto-scroll is disabled.\n * - Displays a typing indicator if the chat state option `isComposing` is true.\n *\n * Accessibility:\n * - Uses ARIA roles and properties for grouping and active descendant management.\n * - Message items have role=\"option\" for assistive technologies.\n *\n */\nexport default class IgcChatMessageListComponent extends LitElement {\n  /** Tag name of the custom element. */\n  public static readonly tagName = 'igc-chat-message-list';\n\n  /** Styles applied to the component */\n  public static override styles = [styles, shared];\n\n  /**\n   * Consumed chat state context providing messages, options, and user data.\n   * @private\n   */\n  @consume({ context: chatContext, subscribe: true })\n  private _chatState?: ChatState;\n\n  /**\n   * Currently active message id used for focus and keyboard navigation.\n   * @private\n   */\n  @state()\n  private _activeMessageId = '';\n\n  /**\n   * Registers this component and its dependencies.\n   * Used internally for component setup.\n   */\n  /* blazorSuppress */\n  public static register() {\n    registerComponent(IgcChatMessageListComponent, IgcChatMessageComponent);\n  }\n\n  constructor() {\n    super();\n    addKeybindings(this)\n      .set(homeKey, this.navigateToMessage)\n      .set(endKey, this.navigateToMessage)\n      .set(arrowUp, this.navigateToMessage)\n      .set(arrowDown, this.navigateToMessage);\n  }\n\n  /**\n   * Formats a date to a human-readable label.\n   * Returns 'Today', 'Yesterday', or localized date string.\n   * @param date - Date object to format\n   * @returns formatted string\n   * @private\n   */\n  private formatDate(date: Date): string {\n    const today = new Date();\n    const yesterday = new Date(today);\n    yesterday.setDate(yesterday.getDate() - 1);\n\n    if (date.toDateString() === today.toDateString()) {\n      return 'Today';\n    }\n\n    if (date.toDateString() === yesterday.toDateString()) {\n      return 'Yesterday';\n    }\n\n    return date.toLocaleDateString('en-US', {\n      weekday: 'long',\n      month: 'short',\n      day: 'numeric',\n    });\n  }\n\n  /**\n   * Groups messages by their date labels.\n   * @param messages - Array of messages to group\n   * @returns Array of groups with date label and messages\n   * @private\n   */\n  private groupMessagesByDate(\n    messages: IgcMessage[]\n  ): { date: string; messages: IgcMessage[] }[] {\n    const grouped: { [key: string]: IgcMessage[] } = {};\n\n    messages.forEach((message) => {\n      const dateStr = this.formatDate(message.timestamp);\n      if (!grouped[dateStr]) {\n        grouped[dateStr] = [];\n      }\n      grouped[dateStr].push(message);\n    });\n\n    return Object.keys(grouped).map((date) => ({\n      date,\n      messages: grouped[date],\n    }));\n  }\n\n  /**\n   * Scrolls the container to the bottom, typically called after new messages are rendered.\n   * @private\n   */\n  private scrollToBottom() {\n    requestAnimationFrame(() => {\n      const container = this.shadowRoot?.host as HTMLElement;\n      if (container) {\n        container.scrollTop = container.scrollHeight;\n      }\n    });\n  }\n\n  /**\n   * Scrolls the view to a specific message by id.\n   * @param messageId - The id of the message to scroll to\n   * @private\n   */\n  private scrollToMessage(messageId: string) {\n    const messageElement = this.shadowRoot?.querySelector(\n      `#message-${messageId}`\n    );\n    messageElement?.scrollIntoView();\n  }\n\n  /**\n   * Handles focus entering the message list container.\n   * Sets the active message to the last message for keyboard navigation.\n   * @private\n   */\n  private handleFocusIn() {\n    if (!this._chatState?.messages || this._chatState.messages.length === 0) {\n      return;\n    }\n    const lastMessage = this._chatState.sortedMessagesIds?.pop() ?? '';\n    this._activeMessageId = lastMessage !== '' ? `message-${lastMessage}` : '';\n  }\n\n  /**\n   * Handles focus leaving the message list container.\n   * Clears the active message.\n   * @private\n   */\n  private handleFocusOut() {\n    this._activeMessageId = '';\n  }\n\n  /**\n   * Handles keyboard navigation within the message list.\n   * Supports Home, End, ArrowUp, ArrowDown keys to move active message focus.\n   * @param e KeyboardEvent from user input\n   * @private\n   */\n  private navigateToMessage(e: KeyboardEvent) {\n    if (!this._chatState?.messages || this._chatState.messages.length === 0) {\n      return;\n    }\n\n    const currentIndex = this._chatState?.sortedMessagesIds.findIndex(\n      (id) => `message-${id}` === this._activeMessageId\n    );\n    let activeMessageId = '';\n    const key = e.key.toLowerCase();\n\n    switch (key) {\n      case 'home':\n        activeMessageId = this._chatState.sortedMessagesIds[0];\n        break;\n      case 'end':\n        activeMessageId =\n          this._chatState.sortedMessagesIds[\n            this._chatState.sortedMessagesIds.length - 1\n          ];\n        break;\n      case 'arrowup':\n        if (currentIndex > 0) {\n          activeMessageId = this._chatState.sortedMessagesIds[currentIndex - 1];\n        }\n        break;\n      case 'arrowdown':\n        if (currentIndex < this._chatState?.messages.length - 1) {\n          activeMessageId = this._chatState.sortedMessagesIds[currentIndex + 1];\n        }\n        break;\n      default:\n        return; // Ignore other keys\n    }\n\n    this._activeMessageId = `message-${activeMessageId}`;\n    this.scrollToMessage(activeMessageId);\n  }\n\n  /**\n   * Lifecycle: called when the component updates.\n   * Scrolls to bottom unless auto-scroll is disabled.\n   */\n  protected override updated() {\n    if (!this._chatState?.options?.disableAutoScroll) {\n      this.scrollToBottom();\n    }\n  }\n\n  /**\n   * Lifecycle: called after first render.\n   * Scrolls to bottom unless auto-scroll is disabled.\n   */\n  protected override firstUpdated() {\n    if (!this._chatState?.options?.disableAutoScroll) {\n      this.scrollToBottom();\n    }\n  }\n\n  /**\n   * Renders the typing indicator template if composing.\n   * @protected\n   */\n  protected *renderLoadingTemplate() {\n    yield html`${this._chatState?.options?.templates?.composingIndicatorTemplate\n      ? this._chatState.options.templates.composingIndicatorTemplate\n      : html`<div part=\"typing-indicator\">\n          <div part=\"typing-dot\"></div>\n          <div part=\"typing-dot\"></div>\n          <div part=\"typing-dot\"></div>\n        </div>`}`;\n  }\n\n  /**\n   * Main render method.\n   * Groups messages by date and renders each message.\n   * Shows the typing indicator if applicable.\n   */\n  protected override render() {\n    const groupedMessages = this.groupMessagesByDate(\n      this._chatState?.messages ?? []\n    );\n\n    return html`\n      <div\n        part=\"message-container\"\n        aria-activedescendant=${this._activeMessageId}\n        role=\"group\"\n        aria-label=\"Message list\"\n        tabindex=\"0\"\n        @focusin=${this.handleFocusIn}\n        @focusout=${this.handleFocusOut}\n      ></div>\n        <div part=\"message-list\">\n          ${repeat(\n            groupedMessages,\n            (group) => group.date,\n            (group) => html`\n              ${repeat(\n                group.messages,\n                (message) => message.id,\n                (message) => {\n                  const messageId = `message-${message.id}`;\n                  return html`\n                    <igc-chat-message\n                      id=${messageId}\n                      role=\"option\"\n                      part=\"message-item ${this._activeMessageId === messageId\n                        ? 'active'\n                        : ''}\"\n                      .message=${message}\n                    >\n                    </igc-chat-message>\n                  `;\n                }\n              )}\n            `\n          )}\n          ${\n            this._chatState?.options?.isComposing\n              ? this.renderLoadingTemplate()\n              : nothing\n          }\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-chat-message-list': IgcChatMessageListComponent;\n  }\n}\n"]}
+{"version":3,"file":"chat-message-list.js","sourceRoot":"","sources":["../../../src/components/chat/chat-message-list.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,uBAAuB,MAAM,mBAAmB,CAAC;AAExD,OAAO,EAAE,MAAM,EAAE,MAAM,mCAAmC,CAAC;AAC3D,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,4CAA4C,CAAC;AAkB9E,MAAqB,2BAA4B,SAAQ,UAAU;IAY1D,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,2BAA2B,EAAE,uBAAuB,CAAC,CAAC;IAC1E,CAAC;IAaO,cAAc;QACpB,qBAAqB,CAAC,GAAG,EAAE;YACzB,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,EAAE,IAAmB,CAAC;YACvD,IAAI,SAAS,EAAE,CAAC;gBACd,SAAS,CAAC,SAAS,GAAG,SAAS,CAAC,YAAY,CAAC;YAC/C,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAOM,eAAe,CAAC,SAAiB;QACtC,MAAM,cAAc,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CACnD,YAAY,SAAS,EAAE,CACxB,CAAC;QACF,cAAc,EAAE,cAAc,EAAE,CAAC;IACnC,CAAC;IAMkB,OAAO;QACxB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,OAAO,EAAE,iBAAiB,EAAE,CAAC;YACjD,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC;IACH,CAAC;IAMkB,YAAY;QAC7B,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,OAAO,EAAE,iBAAiB,EAAE,CAAC;YACjD,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC;IACH,CAAC;IAMS,CAAC,qBAAqB;QAC9B,MAAM,IAAI,CAAA,GAAG,IAAI,CAAC,UAAU,EAAE,OAAO,EAAE,SAAS,EAAE,uBAAuB;YACvE,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,SAAS,CAAC,uBAAuB;YAC3D,CAAC,CAAC,IAAI,CAAA;;;;;eAKG,EAAE,CAAC;IAChB,CAAC;IAOkB,MAAM;QACvB,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,EAAE,QAAQ,IAAI,EAAE,CAAC;QAEjD,OAAO,IAAI,CAAA;;;;;;;;aAQF,MAAM,CACN,QAAQ,EACR,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,EAAE,EACvB,CAAC,OAAO,EAAE,EAAE;YACV,MAAM,SAAS,GAAG,WAAW,OAAO,CAAC,EAAE,EAAE,CAAC;YAC1C,OAAO,IAAI,CAAA;;wBAEF,SAAS;;;8BAGH,OAAO;;;;;gBAKrB,CAAC;QACJ,CAAC,CACF;YAEA,IAAI,CAAC,UAAU,EAAE,OAAO,EAAE,QAAQ;YAChC,CAAC,CAAC,IAAI,CAAC,qBAAqB,EAAE;YAC9B,CAAC,CAAC,OACN;;;KAGL,CAAC;IACJ,CAAC;;AA3HsB,mCAAO,GAAG,uBAAuB,CAAC;AAGlC,kCAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;eAL9B,2BAA2B;AAqBtC;IADP,OAAO,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;+DACpB","sourcesContent":["import { consume } from '@lit/context';\nimport { html, LitElement, nothing } from 'lit';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { chatContext } from '../common/context.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport IgcChatMessageComponent from './chat-message.js';\nimport type { ChatState } from './chat-state.js';\nimport { styles } from './themes/message-list.base.css.js';\nimport { styles as shared } from './themes/shared/message-list.common.css.js';\n\n/**\n * A chat message list component that displays a list of chat messages grouped by date.\n *\n * @element igc-chat-message-list\n *\n * This component:\n * - Renders messages using the `<igc-chat-message>` component.\n * - Manages focus highlighting on active messages.\n * - Automatically scrolls to the bottom when new messages arrive, unless auto-scroll is disabled.\n * - Displays a typing indicator if the chat state option `isTyping` is true.\n *\n * Accessibility:\n * - Uses ARIA roles and properties for grouping and active descendant management.\n * - Message items have role=\"option\" for assistive technologies.\n *\n */\nexport default class IgcChatMessageListComponent extends LitElement {\n  /** Tag name of the custom element. */\n  public static readonly tagName = 'igc-chat-message-list';\n\n  /** Styles applied to the component */\n  public static override styles = [styles, shared];\n\n  /**\n   * Registers this component and its dependencies.\n   * Used internally for component setup.\n   */\n  /* blazorSuppress */\n  public static register() {\n    registerComponent(IgcChatMessageListComponent, IgcChatMessageComponent);\n  }\n\n  /**\n   * Consumed chat state context providing messages, options, and user data.\n   * @private\n   */\n  @consume({ context: chatContext, subscribe: true })\n  private _chatState?: ChatState;\n\n  /**\n   * Scrolls the container to the bottom, typically called after new messages are rendered.\n   * @private\n   */\n  private scrollToBottom() {\n    requestAnimationFrame(() => {\n      const container = this.shadowRoot?.host as HTMLElement;\n      if (container) {\n        container.scrollTop = container.scrollHeight;\n      }\n    });\n  }\n\n  /**\n   * Scrolls the view to a specific message by id.\n   * @param messageId - The id of the message to scroll to\n   * @private\n   */\n  public scrollToMessage(messageId: string) {\n    const messageElement = this.shadowRoot?.querySelector(\n      `#message-${messageId}`\n    );\n    messageElement?.scrollIntoView();\n  }\n\n  /**\n   * Lifecycle: called when the component updates.\n   * Scrolls to bottom unless auto-scroll is disabled.\n   */\n  protected override updated() {\n    if (!this._chatState?.options?.disableAutoScroll) {\n      this.scrollToBottom();\n    }\n  }\n\n  /**\n   * Lifecycle: called after first render.\n   * Scrolls to bottom unless auto-scroll is disabled.\n   */\n  protected override firstUpdated() {\n    if (!this._chatState?.options?.disableAutoScroll) {\n      this.scrollToBottom();\n    }\n  }\n\n  /**\n   * Renders the typing indicator template.\n   * @protected\n   */\n  protected *renderLoadingTemplate() {\n    yield html`${this._chatState?.options?.templates?.typingIndicatorTemplate\n      ? this._chatState.options.templates.typingIndicatorTemplate\n      : html`<div part=\"typing-indicator\">\n          <div part=\"typing-dot\"></div>\n          <div part=\"typing-dot\"></div>\n          <div part=\"typing-dot\"></div>\n          <div part=\"typing-dot\"></div>\n        </div>`}`;\n  }\n\n  /**\n   * Main render method.\n   * Groups messages by date and renders each message.\n   * Shows the typing indicator if applicable.\n   */\n  protected override render() {\n    const messages = this._chatState?.messages ?? [];\n\n    return html`\n      <div\n        part=\"message-container\"\n        role=\"group\"\n        aria-label=\"Message list\"\n        tabindex=\"0\"\n      ></div>\n        <div part=\"message-list\">\n           ${repeat(\n             messages,\n             (message) => message.id,\n             (message) => {\n               const messageId = `message-${message.id}`;\n               return html`\n                 <igc-chat-message\n                   id=${messageId}\n                   role=\"option\"\n                   part=\"message-item\"\n                   .message=${message}\n                   exportparts=\"message-container, message-text, message-attachments, message-actions,\n                   attachments-container, attachment, attachment-header, attachment-content, attachment-icon, file-name, actions: attachment-actions\"\n                 >\n                 </igc-chat-message>\n               `;\n             }\n           )}\n          ${\n            this._chatState?.options?.isTyping\n              ? this.renderLoadingTemplate()\n              : nothing\n          }\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-chat-message-list': IgcChatMessageListComponent;\n  }\n}\n"]}

package/components/chat/chat-message.d.ts

@@ -1,10 +1,12 @@
-import { LitElement } from 'lit';
+import { LitElement, nothing } from 'lit';
 import type { IgcMessage } from './types.js';
 /**
  * A chat message component for displaying individual messages in `<igc-chat>`.
  *
  * @element igc-chat-message
  *
+ * @fires igcMessageReact - Fired when a message is reacted to.
+ *
  * This component renders a single chat message including:
  * - Message text (sanitized)
  * - Attachments (if any)
@@ -17,38 +19,26 @@ import type { IgcMessage } from './types.js';
  * and can be rendered with a markdown renderer if provided.
  */
 export default class IgcChatMessageComponent extends LitElement {
-    /** Tag name of the custom element. */
     static readonly tagName = "igc-chat-message";
-    /** Styles applied to the component. */
     static styles: import("lit").CSSResult[];
+    static register(): void;
     /**
      * Injected chat state context. Provides message data, user info, and options.
-     * @private
      */
     private _chatState?;
-    /**
-     * Registers this component and its dependencies.
-     * This is used internally to set up the component definitions.
-     */
-    static register(): void;
     /**
      * The chat message to render.
      */
-    message: IgcMessage | undefined;
-    /**
-     * Sanitizes message text to prevent XSS or invalid HTML.
-     * @param text The raw message text
-     * @returns Sanitized text safe for HTML rendering
-     * @private
-     */
-    private sanitizeMessageText;
+    message?: IgcMessage;
+    constructor();
+    protected firstUpdated(): void;
     /**
      * Renders the chat message template.
      * - Applies 'sent' CSS class if the message sender matches current user.
      * - Uses markdown rendering if configured.
      * - Renders attachments and custom templates if provided.
      */
-    protected render(): import("lit-html").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult<1> | typeof nothing;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/components/chat/chat-message.js

@@ -5,46 +5,42 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { consume } from '@lit/context';
-import DOMPurify from 'dompurify';
-import { html, LitElement, nothing } from 'lit';
+import { adoptStyles, html, LitElement, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
+import { until } from 'lit/directives/until.js';
+import { addThemingController } from '../../theming/theming-controller.js';
 import IgcAvatarComponent from '../avatar/avatar.js';
 import { chatContext } from '../common/context.js';
 import { registerComponent } from '../common/definitions/register.js';
-import { renderMarkdown } from './markdown-util.js';
+import { partMap } from '../common/part-map.js';
+import IgcTooltipComponent from '../tooltip/tooltip.js';
 import IgcMessageAttachmentsComponent from './message-attachments.js';
 import { styles } from './themes/message.base.css.js';
-import { styles as shared } from './themes/shared/chat-message.common.css.js';
+import { all } from './themes/message.js';
+import { styles as shared } from './themes/shared/chat-message/chat-message.common.css.js';
 class IgcChatMessageComponent extends LitElement {
     static register() {
-        registerComponent(IgcChatMessageComponent, IgcMessageAttachmentsComponent, IgcAvatarComponent);
+        registerComponent(IgcChatMessageComponent, IgcMessageAttachmentsComponent, IgcAvatarComponent, IgcTooltipComponent);
     }
-    sanitizeMessageText(text) {
-        return DOMPurify.sanitize(text);
+    constructor() {
+        super();
+        addThemingController(this, all);
+    }
+    firstUpdated() {
+        adoptPageStyles(this);
     }
     render() {
-        const containerPart = `message-container ${this.message?.sender === this._chatState?.currentUserId ? 'sent' : ''}`;
-        const sanitizedMessageText = this.sanitizeMessageText(this.message?.text.trim() || '');
-        const renderer = this._chatState?.options?.markdownRenderer || renderMarkdown;
-        return html `
-      <div part=${containerPart}>
-        <div part="bubble">
-          ${this._chatState?.options?.templates?.messageTemplate && this.message
-            ? this._chatState.options.templates.messageTemplate(this.message)
-            : html `${sanitizedMessageText
-                ? html `<div>${renderer(sanitizedMessageText)}</div>`
-                : nothing}`}
-          ${this.message?.attachments && this.message?.attachments.length > 0
-            ? html `<igc-message-attachments .message=${this.message}>
-              </igc-message-attachments>`
-            : nothing}
-          ${this._chatState?.options?.templates?.messageActionsTemplate &&
-            this.message
-            ? this._chatState.options.templates.messageActionsTemplate(this.message)
-            : nothing}
-        </div>
-      </div>
-    `;
+        const parts = {
+            'message-container': true,
+            sent: this._chatState?.currentUserId === this.message?.sender,
+        };
+        return this.message && this._chatState?.chatRenderer
+            ? html `
+          <div part=${partMap(parts)}>
+            ${until(this._chatState.chatRenderer.render(this.message))}
+          </div>
+        `
+            : nothing;
     }
 }
 IgcChatMessageComponent.tagName = 'igc-chat-message';
@@ -56,4 +52,19 @@ __decorate([
 __decorate([
     property({ attribute: false })
 ], IgcChatMessageComponent.prototype, "message", void 0);
+function adoptPageStyles(message) {
+    const sheets = [];
+    for (const sheet of document.styleSheets) {
+        try {
+            const constructed = new CSSStyleSheet();
+            for (const rule of sheet.cssRules) {
+                constructed.insertRule(rule.cssText);
+            }
+            sheets.push(constructed);
+        }
+        catch { }
+    }
+    const ctor = message.constructor;
+    adoptStyles(message.shadowRoot, [...ctor.elementStyles, ...sheets]);
+}
 //# sourceMappingURL=chat-message.js.map

package/components/chat/chat-message.js.map

@@ -1 +1 @@
-{"version":3,"file":"chat-message.js","sourceRoot":"","sources":["../../../src/components/chat/chat-message.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,SAAS,MAAM,WAAW,CAAC;AAClC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,kBAAkB,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAEtE,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,8BAA8B,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,4CAA4C,CAAC;AAmB9E,MAAqB,uBAAwB,SAAQ,UAAU;IAmBtD,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CACf,uBAAuB,EACvB,8BAA8B,EAC9B,kBAAkB,CACnB,CAAC;IACJ,CAAC;IAcO,mBAAmB,CAAC,IAAY;QACtC,OAAO,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IAClC,CAAC;IAQkB,MAAM;QACvB,MAAM,aAAa,GAAG,qBAAqB,IAAI,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;QACnH,MAAM,oBAAoB,GAAG,IAAI,CAAC,mBAAmB,CACnD,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,CAChC,CAAC;QACF,MAAM,QAAQ,GACZ,IAAI,CAAC,UAAU,EAAE,OAAO,EAAE,gBAAgB,IAAI,cAAc,CAAC;QAE/D,OAAO,IAAI,CAAA;kBACG,aAAa;;YAEnB,IAAI,CAAC,UAAU,EAAE,OAAO,EAAE,SAAS,EAAE,eAAe,IAAI,IAAI,CAAC,OAAO;YACpE,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,SAAS,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC;YACjE,CAAC,CAAC,IAAI,CAAA,GAAG,oBAAoB;gBACzB,CAAC,CAAC,IAAI,CAAA,QAAQ,QAAQ,CAAC,oBAAoB,CAAC,QAAQ;gBACpD,CAAC,CAAC,OAAO,EAAE;YACf,IAAI,CAAC,OAAO,EAAE,WAAW,IAAI,IAAI,CAAC,OAAO,EAAE,WAAW,CAAC,MAAM,GAAG,CAAC;YACjE,CAAC,CAAC,IAAI,CAAA,qCAAqC,IAAI,CAAC,OAAO;yCAC1B;YAC7B,CAAC,CAAC,OAAO;YACT,IAAI,CAAC,UAAU,EAAE,OAAO,EAAE,SAAS,EAAE,sBAAsB;YAC7D,IAAI,CAAC,OAAO;YACV,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,SAAS,CAAC,sBAAsB,CACtD,IAAI,CAAC,OAAO,CACb;YACH,CAAC,CAAC,OAAO;;;KAGhB,CAAC;IACJ,CAAC;;AA5EsB,+BAAO,GAAG,kBAAkB,CAAC;AAG7B,8BAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;eAL9B,uBAAuB;AAYlC;IADP,OAAO,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;2DACpB;AAmBxB;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;wDACQ","sourcesContent":["import { consume } from '@lit/context';\nimport DOMPurify from 'dompurify';\nimport { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport IgcAvatarComponent from '../avatar/avatar.js';\nimport { chatContext } from '../common/context.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport type { ChatState } from './chat-state.js';\nimport { renderMarkdown } from './markdown-util.js';\nimport IgcMessageAttachmentsComponent from './message-attachments.js';\nimport { styles } from './themes/message.base.css.js';\nimport { styles as shared } from './themes/shared/chat-message.common.css.js';\nimport type { IgcMessage } from './types.js';\n\n/**\n * A chat message component for displaying individual messages in `<igc-chat>`.\n *\n * @element igc-chat-message\n *\n * This component renders a single chat message including:\n * - Message text (sanitized)\n * - Attachments (if any)\n * - Custom templates for message content and actions (if provided via chat options)\n *\n * It distinguishes sent messages from received messages by comparing\n * the message sender with the current user ID from chat state.\n *\n * The message text is sanitized with DOMPurify before rendering,\n * and can be rendered with a markdown renderer if provided.\n */\nexport default class IgcChatMessageComponent extends LitElement {\n  /** Tag name of the custom element. */\n  public static readonly tagName = 'igc-chat-message';\n\n  /** Styles applied to the component. */\n  public static override styles = [styles, shared];\n\n  /**\n   * Injected chat state context. Provides message data, user info, and options.\n   * @private\n   */\n  @consume({ context: chatContext, subscribe: true })\n  private _chatState?: ChatState;\n\n  /**\n   * Registers this component and its dependencies.\n   * This is used internally to set up the component definitions.\n   */\n  /* blazorSuppress */\n  public static register() {\n    registerComponent(\n      IgcChatMessageComponent,\n      IgcMessageAttachmentsComponent,\n      IgcAvatarComponent\n    );\n  }\n\n  /**\n   * The chat message to render.\n   */\n  @property({ attribute: false })\n  public message: IgcMessage | undefined;\n\n  /**\n   * Sanitizes message text to prevent XSS or invalid HTML.\n   * @param text The raw message text\n   * @returns Sanitized text safe for HTML rendering\n   * @private\n   */\n  private sanitizeMessageText(text: string): string {\n    return DOMPurify.sanitize(text);\n  }\n\n  /**\n   * Renders the chat message template.\n   * - Applies 'sent' CSS class if the message sender matches current user.\n   * - Uses markdown rendering if configured.\n   * - Renders attachments and custom templates if provided.\n   */\n  protected override render() {\n    const containerPart = `message-container ${this.message?.sender === this._chatState?.currentUserId ? 'sent' : ''}`;\n    const sanitizedMessageText = this.sanitizeMessageText(\n      this.message?.text.trim() || ''\n    );\n    const renderer =\n      this._chatState?.options?.markdownRenderer || renderMarkdown;\n\n    return html`\n      <div part=${containerPart}>\n        <div part=\"bubble\">\n          ${this._chatState?.options?.templates?.messageTemplate && this.message\n            ? this._chatState.options.templates.messageTemplate(this.message)\n            : html`${sanitizedMessageText\n                ? html`<div>${renderer(sanitizedMessageText)}</div>`\n                : nothing}`}\n          ${this.message?.attachments && this.message?.attachments.length > 0\n            ? html`<igc-message-attachments .message=${this.message}>\n              </igc-message-attachments>`\n            : nothing}\n          ${this._chatState?.options?.templates?.messageActionsTemplate &&\n          this.message\n            ? this._chatState.options.templates.messageActionsTemplate(\n                this.message\n              )\n            : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-chat-message': IgcChatMessageComponent;\n  }\n}\n"]}
+{"version":3,"file":"chat-message.js","sourceRoot":"","sources":["../../../src/components/chat/chat-message.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAC7D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,kBAAkB,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AAExD,OAAO,8BAA8B,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,yDAAyD,CAAC;AAqB3F,MAAqB,uBAAwB,SAAQ,UAAU;IAKtD,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CACf,uBAAuB,EACvB,8BAA8B,EAC9B,kBAAkB,EAClB,mBAAmB,CACpB,CAAC;IACJ,CAAC;IAcD;QACE,KAAK,EAAE,CAAC;QACR,oBAAoB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAClC,CAAC;IAEkB,YAAY;QAC7B,eAAe,CAAC,IAAI,CAAC,CAAC;IACxB,CAAC;IAQkB,MAAM;QACvB,MAAM,KAAK,GAAG;YACZ,mBAAmB,EAAE,IAAI;YACzB,IAAI,EAAE,IAAI,CAAC,UAAU,EAAE,aAAa,KAAK,IAAI,CAAC,OAAO,EAAE,MAAM;SAC9D,CAAC;QAEF,OAAO,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,UAAU,EAAE,YAAY;YAClD,CAAC,CAAC,IAAI,CAAA;sBACU,OAAO,CAAC,KAAK,CAAC;cACtB,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;;SAE7D;YACH,CAAC,CAAC,OAAO,CAAC;IACd,CAAC;;AArDsB,+BAAO,GAAG,kBAAkB,CAAC;AAC7B,8BAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;eAF9B,uBAAuB;AAkBlC;IADP,OAAO,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;2DACpB;AAMxB;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;wDACH;AAwC9B,SAAS,eAAe,CAAC,OAAgC;IACvD,MAAM,MAAM,GAAoB,EAAE,CAAC;IAEnC,KAAK,MAAM,KAAK,IAAI,QAAQ,CAAC,WAAW,EAAE,CAAC;QACzC,IAAI,CAAC;YACH,MAAM,WAAW,GAAG,IAAI,aAAa,EAAE,CAAC;YACxC,KAAK,MAAM,IAAI,IAAI,KAAK,CAAC,QAAQ,EAAE,CAAC;gBAClC,WAAW,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YACvC,CAAC;YACD,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC3B,CAAC;QAAC,MAAM,CAAC,CAAA,CAAC;IACZ,CAAC;IAED,MAAM,IAAI,GAAG,OAAO,CAAC,WAAgC,CAAC;IACtD,WAAW,CAAC,OAAO,CAAC,UAAW,EAAE,CAAC,GAAG,IAAI,CAAC,aAAa,EAAE,GAAG,MAAM,CAAC,CAAC,CAAC;AACvE,CAAC","sourcesContent":["import { consume } from '@lit/context';\nimport { adoptStyles, html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { until } from 'lit/directives/until.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport IgcAvatarComponent from '../avatar/avatar.js';\nimport { chatContext } from '../common/context.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { partMap } from '../common/part-map.js';\nimport IgcTooltipComponent from '../tooltip/tooltip.js';\nimport type { ChatState } from './chat-state.js';\nimport IgcMessageAttachmentsComponent from './message-attachments.js';\nimport { styles } from './themes/message.base.css.js';\nimport { all } from './themes/message.js';\nimport { styles as shared } from './themes/shared/chat-message/chat-message.common.css.js';\nimport type { IgcMessage } from './types.js';\n\n/**\n * A chat message component for displaying individual messages in `<igc-chat>`.\n *\n * @element igc-chat-message\n *\n * @fires igcMessageReact - Fired when a message is reacted to.\n *\n * This component renders a single chat message including:\n * - Message text (sanitized)\n * - Attachments (if any)\n * - Custom templates for message content and actions (if provided via chat options)\n *\n * It distinguishes sent messages from received messages by comparing\n * the message sender with the current user ID from chat state.\n *\n * The message text is sanitized with DOMPurify before rendering,\n * and can be rendered with a markdown renderer if provided.\n */\nexport default class IgcChatMessageComponent extends LitElement {\n  public static readonly tagName = 'igc-chat-message';\n  public static override styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(\n      IgcChatMessageComponent,\n      IgcMessageAttachmentsComponent,\n      IgcAvatarComponent,\n      IgcTooltipComponent\n    );\n  }\n\n  /**\n   * Injected chat state context. Provides message data, user info, and options.\n   */\n  @consume({ context: chatContext, subscribe: true })\n  private _chatState?: ChatState;\n\n  /**\n   * The chat message to render.\n   */\n  @property({ attribute: false })\n  public message?: IgcMessage;\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n  }\n\n  protected override firstUpdated(): void {\n    adoptPageStyles(this);\n  }\n\n  /**\n   * Renders the chat message template.\n   * - Applies 'sent' CSS class if the message sender matches current user.\n   * - Uses markdown rendering if configured.\n   * - Renders attachments and custom templates if provided.\n   */\n  protected override render() {\n    const parts = {\n      'message-container': true,\n      sent: this._chatState?.currentUserId === this.message?.sender,\n    };\n\n    return this.message && this._chatState?.chatRenderer\n      ? html`\n          <div part=${partMap(parts)}>\n            ${until(this._chatState.chatRenderer.render(this.message))}\n          </div>\n        `\n      : nothing;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-chat-message': IgcChatMessageComponent;\n  }\n}\n\n// REVIEW: Maybe put that behind a configuration flag as this is nasty.\nfunction adoptPageStyles(message: IgcChatMessageComponent): void {\n  const sheets: CSSStyleSheet[] = [];\n\n  for (const sheet of document.styleSheets) {\n    try {\n      const constructed = new CSSStyleSheet();\n      for (const rule of sheet.cssRules) {\n        constructed.insertRule(rule.cssText);\n      }\n      sheets.push(constructed);\n    } catch {}\n  }\n\n  const ctor = message.constructor as typeof LitElement;\n  adoptStyles(message.shadowRoot!, [...ctor.elementStyles, ...sheets]);\n}\n"]}

package/components/chat/chat-renderer.d.ts

@@ -0,0 +1,14 @@
+import type { ChatMessageRenderer, IgcChatTemplates, IgcMessage } from './types.js';
+export declare class DefaultChatRenderer implements ChatMessageRenderer {
+    private baseTextRenderer;
+    private defaultTemplates;
+    private cache;
+    templates: Required<IgcChatTemplates>;
+    constructor(baseTextRenderer: ChatMessageRenderer, // e.g. PlainTextRenderer, MarkdownMessageRenderer
+    defaultTemplates: Required<IgcChatTemplates>, userTemplates?: Partial<IgcChatTemplates>);
+    protected renderText(message: IgcMessage): Promise<unknown>;
+    render(message: IgcMessage, ctx?: {
+        templates?: Partial<IgcChatTemplates>;
+    }): Promise<unknown>;
+    clearCache(): void;
+}

package/components/chat/chat-renderer.js

@@ -0,0 +1,39 @@
+export class DefaultChatRenderer {
+    constructor(baseTextRenderer, defaultTemplates, userTemplates) {
+        this.baseTextRenderer = baseTextRenderer;
+        this.defaultTemplates = defaultTemplates;
+        this.cache = new Map();
+        this.templates = {
+            ...this.defaultTemplates,
+            ...(userTemplates ?? {}),
+        };
+    }
+    async renderText(message) {
+        const rendered = await this.baseTextRenderer.render(message);
+        return rendered;
+    }
+    async render(message, ctx) {
+        const templates = { ...ctx?.templates, ...this.templates };
+        if (!message.id) {
+            const textContent = await this.baseTextRenderer.render(message);
+            return templates.messageTemplate(message, { textContent, templates });
+        }
+        if (this.cache.has(message.id)) {
+            const cached = this.cache.get(message.id);
+            if (cached && cached.text === message.text) {
+                return cached.rendered;
+            }
+        }
+        const textContent = await this.baseTextRenderer.render(message);
+        const rendered = templates.messageTemplate(message, {
+            textContent,
+            templates,
+        });
+        this.cache.set(message.id, { text: message.text, rendered });
+        return rendered;
+    }
+    clearCache() {
+        this.cache.clear();
+    }
+}
+//# sourceMappingURL=chat-renderer.js.map

package/components/chat/chat-renderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-renderer.js","sourceRoot":"","sources":["../../../src/components/chat/chat-renderer.ts"],"names":[],"mappings":"AAMA,MAAM,OAAO,mBAAmB;IAI9B,YACU,gBAAqC,EACrC,gBAA4C,EACpD,aAAyC;QAFjC,qBAAgB,GAAhB,gBAAgB,CAAqB;QACrC,qBAAgB,GAAhB,gBAAgB,CAA4B;QAL9C,UAAK,GAAG,IAAI,GAAG,EAA+C,CAAC;QAQrE,IAAI,CAAC,SAAS,GAAG;YACf,GAAG,IAAI,CAAC,gBAAgB;YACxB,GAAG,CAAC,aAAa,IAAI,EAAE,CAAC;SACzB,CAAC;IACJ,CAAC;IAES,KAAK,CAAC,UAAU,CAAC,OAAmB;QAC5C,MAAM,QAAQ,GAAG,MAAM,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QAC7D,OAAO,QAAQ,CAAC;IAClB,CAAC;IAEM,KAAK,CAAC,MAAM,CACjB,OAAmB,EACnB,GAA+C;QAE/C,MAAM,SAAS,GAAG,EAAE,GAAG,GAAG,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;QAC3D,IAAI,CAAC,OAAO,CAAC,EAAE,EAAE,CAAC;YAEhB,MAAM,WAAW,GAAG,MAAM,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;YAChE,OAAO,SAAS,CAAC,eAAe,CAAC,OAAO,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC,CAAC;QACxE,CAAC;QAED,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC;YAC/B,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;YAC1C,IAAI,MAAM,IAAI,MAAM,CAAC,IAAI,KAAK,OAAO,CAAC,IAAI,EAAE,CAAC;gBAC3C,OAAO,MAAM,CAAC,QAAQ,CAAC;YACzB,CAAC;QACH,CAAC;QAGD,MAAM,WAAW,GAAG,MAAM,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QAChE,MAAM,QAAQ,GAAG,SAAS,CAAC,eAAe,CAAC,OAAO,EAAE;YAClD,WAAW;YACX,SAAS;SACV,CAAC,CAAC;QACH,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,CAAC,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC;QAE7D,OAAO,QAAQ,CAAC;IAClB,CAAC;IAEM,UAAU;QACf,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;IACrB,CAAC;CACF","sourcesContent":["import type {\n  ChatMessageRenderer,\n  IgcChatTemplates,\n  IgcMessage,\n} from './types.js';\n\nexport class DefaultChatRenderer implements ChatMessageRenderer {\n  private cache = new Map<string, { text: string; rendered: unknown }>();\n  public templates: Required<IgcChatTemplates>;\n\n  constructor(\n    private baseTextRenderer: ChatMessageRenderer, // e.g. PlainTextRenderer, MarkdownMessageRenderer\n    private defaultTemplates: Required<IgcChatTemplates>,\n    userTemplates?: Partial<IgcChatTemplates>\n  ) {\n    this.templates = {\n      ...this.defaultTemplates,\n      ...(userTemplates ?? {}),\n    };\n  }\n\n  protected async renderText(message: IgcMessage) {\n    const rendered = await this.baseTextRenderer.render(message);\n    return rendered;\n  }\n\n  public async render(\n    message: IgcMessage,\n    ctx?: { templates?: Partial<IgcChatTemplates> }\n  ): Promise<unknown> {\n    const templates = { ...ctx?.templates, ...this.templates };\n    if (!message.id) {\n      // No caching for messages without an ID\n      const textContent = await this.baseTextRenderer.render(message);\n      return templates.messageTemplate(message, { textContent, templates });\n    }\n\n    if (this.cache.has(message.id)) {\n      const cached = this.cache.get(message.id);\n      if (cached && cached.text === message.text) {\n        return cached.rendered;\n      }\n    }\n\n    // Cache miss or message text changed\n    const textContent = await this.baseTextRenderer.render(message);\n    const rendered = templates.messageTemplate(message, {\n      textContent,\n      templates,\n    });\n    this.cache.set(message.id, { text: message.text, rendered });\n\n    return rendered;\n  }\n\n  public clearCache() {\n    this.cache.clear();\n  }\n}\n"]}