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

package/components/chat/chat.js

@@ -7,140 +7,205 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { ContextProvider } from '@lit/context';
 import { html, LitElement, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
+import { cache } from 'lit/directives/cache.js';
+import { repeat } from 'lit/directives/repeat.js';
 import { addThemingController } from '../../theming/theming-controller.js';
 import IgcButtonComponent from '../button/button.js';
-import { chatContext } from '../common/context.js';
+import { chatContext, chatUserInputContext } from '../common/context.js';
 import { addSlotController, setSlots } from '../common/controllers/slot.js';
 import { watch } from '../common/decorators/watch.js';
 import { registerComponent } from '../common/definitions/register.js';
 import { IgcChatResourceStringEN } from '../common/i18n/chat.resources.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
+import { isEmpty } from '../common/util.js';
 import IgcIconComponent from '../icon/icon.js';
 import IgcListComponent from '../list/list.js';
 import IgcListHeaderComponent from '../list/list-header.js';
 import IgcListItemComponent from '../list/list-item.js';
 import IgcChatInputComponent from './chat-input.js';
-import IgcChatMessageListComponent from './chat-message-list.js';
-import { createChatState } from './chat-state.js';
+import IgcChatMessageComponent from './chat-message.js';
+import { ChatState } from './chat-state.js';
 import { styles } from './themes/chat.base.css.js';
 import { styles as shared } from './themes/shared/chat.common.css.js';
 import { all } from './themes/themes.js';
-const Slots = setSlots('prefix', 'title', 'actions', 'suggestions-header', 'suggestions', 'suggestions-actions', 'suggestions-header', 'suggestion', 'empty-state');
+const Slots = setSlots('prefix', 'title', 'actions', 'suggestions-header', 'suggestions', 'suggestions-actions', 'suggestion', 'empty-state');
 class IgcChatComponent extends EventEmitterMixin(LitElement) {
     static register() {
-        registerComponent(IgcChatComponent, IgcChatInputComponent, IgcChatMessageListComponent, IgcButtonComponent, IgcIconComponent, IgcListComponent, IgcListItemComponent, IgcListHeaderComponent);
+        registerComponent(IgcChatComponent, IgcChatInputComponent, IgcChatMessageComponent, IgcButtonComponent, IgcIconComponent, IgcListComponent, IgcListItemComponent, IgcListHeaderComponent);
     }
-    constructor() {
-        super();
-        this._chatState = createChatState(this);
-        this._slots = addSlotController(this, {
-            slots: Slots,
-        });
-        this._context = new ContextProvider(this, {
-            context: chatContext,
-            initialValue: this._chatState,
-        });
-        this.resourceStrings = IgcChatResourceStringEN;
-        addThemingController(this, all);
+    _updateContext() {
+        this._context.setValue(this._state, true);
+    }
+    _updateUserInputContext() {
+        this._userInputContext.setValue(this._state, true);
     }
     set messages(value) {
-        this._chatState.messages = value;
+        this._state.messages = value;
     }
     get messages() {
-        return this._chatState.messages;
+        return this._state.messages;
     }
     set draftMessage(value) {
-        if (this._chatState && value) {
-            this._chatState.inputValue = value.text;
-            this._chatState.inputAttachments = value.attachments || [];
+        if (this._state && value) {
+            this._state.inputValue = value.text;
+            this._state.inputAttachments = value.attachments || [];
             this.requestUpdate();
         }
     }
     get draftMessage() {
         return {
-            text: this._chatState?.inputValue,
-            attachments: this._chatState?.inputAttachments,
+            text: this._state.inputValue,
+            attachments: this._state.inputAttachments,
         };
     }
     set options(value) {
-        this._chatState.options = value;
+        this._state.options = value;
     }
     get options() {
-        return this._chatState.options;
+        return this._state.options;
+    }
+    constructor() {
+        super();
+        this._state = new ChatState(this, this._updateContext, this._updateUserInputContext);
+        this._slots = addSlotController(this, {
+            slots: Slots,
+        });
+        this._context = new ContextProvider(this, {
+            context: chatContext,
+            initialValue: this._state,
+        });
+        this._userInputContext = new ContextProvider(this, {
+            context: chatUserInputContext,
+            initialValue: this._state,
+        });
+        this.resourceStrings = IgcChatResourceStringEN;
+        addThemingController(this, all);
+    }
+    contextChanged() {
+        this._context.setValue(this._state, true);
     }
     scrollToMessage(messageId) {
-        const messageListComponent = this.shadowRoot?.querySelector('igc-chat-message-list');
-        if (!messageListComponent) {
-            return;
+        if (!isEmpty(this.messages)) {
+            const message = this.renderRoot.querySelector(`#message-${messageId}`);
+            message?.scrollIntoView({ block: 'end', inline: 'end' });
         }
-        const messageElement = messageListComponent.shadowRoot?.querySelector(`#message-${messageId}`);
-        if (!messageElement) {
-            return;
+    }
+    updateContextValue() {
+        this._context.setValue(this._state, true);
+    }
+    updated(properties) {
+        if (properties.has('messages') && !this._state.disableAutoScroll) {
+            this._scrollToBottom();
         }
-        messageElement.scrollIntoView({
-            behavior: 'smooth',
-            block: 'center',
-            inline: 'nearest',
-        });
     }
-    contextChanged() {
-        this._context.setValue(this._chatState, true);
+    _scrollToBottom() {
+        if (!isEmpty(this.messages)) {
+            const lastMessage = this.renderRoot
+                .querySelectorAll(IgcChatMessageComponent.tagName)
+                .item(this.messages.length - 1);
+            requestAnimationFrame(() => lastMessage.scrollIntoView({ block: 'end', inline: 'end' }));
+        }
     }
-    renderHeader() {
+    _renderHeader() {
         const hasContent = this._slots.hasAssignedElements('prefix') ||
             this._slots.hasAssignedElements('title') ||
-            this._slots.hasAssignedElements('actions');
-        return html ` <div part="header" ?hidden=${!hasContent}>
-      <slot name="prefix" part="prefix"></slot>
-      <slot name="title" part="title"
-        >${this._chatState.options?.headerText}</slot
-      >
-      <slot name="actions" part="actions"></slot>
-    </div>`;
-    }
-    renderSuggestionPrefix() {
-        const defaultPrefix = html `<igc-icon
-      name="star-icon"
-      collection="material"
-    ></igc-icon>`;
-        return html `<span slot="start">
-      ${this._chatState?.options?.templates?.suggestionPrefixTemplate
-            ? this._chatState.options.templates.suggestionPrefixTemplate
-            : defaultPrefix}
-    </span>`;
-    }
-    renderSuggestions() {
+            this._slots.hasAssignedElements('actions') ||
+            this._state.options?.headerText;
+        return html `
+      <div part="header" ?hidden=${!hasContent}>
+        <slot name="prefix" part="prefix"></slot>
+        <slot name="title" part="title"
+          >${this._state.options?.headerText}</slot
+        >
+        <slot name="actions" part="actions"></slot>
+      </div>
+    `;
+    }
+    _renderMessages() {
+        return html `
+      <div part="message-list" tabindex="0">
+        ${repeat(this._state.messages, (message) => message.id, (message) => {
+            return html `
+              <igc-chat-message
+                id=${`message-${message.id}`}
+                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._state.options?.isTyping
+            ? (this._state.options?.renderers?.typingIndicator?.({
+                param: undefined,
+                defaults: {
+                    typingIndicator: () => this._renderLoadingTemplate(),
+                },
+                options: this._state.options,
+            }) ?? this._renderLoadingTemplate())
+            : nothing}
+      </div>
+    `;
+    }
+    _renderLoadingTemplate() {
+        return 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>
+    `;
+    }
+    _renderSuggestionPrefix() {
+        return html `
+      <span slot="start">
+        <igc-icon name="auto_suggest"></igc-icon>
+      </span>
+    `;
+    }
+    _renderSuggestions() {
         const hasContent = this._slots.hasAssignedElements('suggestions-header');
-        return html `<div part="suggestions-container">
-      <igc-list role="list" aria-label="Suggestions">
-        <igc-list-header part="suggestions-header">
-          <span ?hidden=${hasContent}>
-            ${this.resourceStrings.suggestionsHeader}
-          </span>
-          <slot name="suggestions-header"></slot>
-        </igc-list-header>
-        <slot name="suggestions" part="suggestions">
-          ${this._chatState.options?.suggestions?.map((suggestion) => html `
-              <slot name="suggestion" part="suggestion" role="listitem">
-                <igc-list-item
-                  @click=${() => this._chatState?.handleSuggestionClick(suggestion)}
-                >
-                  ${this.renderSuggestionPrefix()}
-                  <span slot="title">${suggestion}</span>
-                </igc-list-item>
-              </slot>
-            `)}
-        </slot>
-        <slot name="suggestions-actions" part="suggestions-actions"></slot>
-      </igc-list>
-    </div>`;
+        const suggestions = this._state.options?.suggestions ?? [];
+        return html `
+      <div part="suggestions-container">
+        <igc-list>
+          <igc-list-header part="suggestions-header">
+            <span ?hidden=${hasContent}>
+              ${this.resourceStrings.suggestionsHeader}
+            </span>
+            <slot name="suggestions-header"></slot>
+          </igc-list-header>
+          <slot name="suggestions" part="suggestions">
+            ${suggestions.map((suggestion) => html `
+                <slot name="suggestion" part="suggestion">
+                  <igc-list-item
+                    @click=${() => this._state?.handleSuggestionClick(suggestion)}
+                  >
+                    ${this._renderSuggestionPrefix()}
+                    <span slot="title">${suggestion}</span>
+                  </igc-list-item>
+                </slot>
+              `)}
+          </slot>
+          <slot name="suggestions-actions" part="suggestions-actions"></slot>
+        </igc-list>
+      </div>
+    `;
     }
-    updateContextValue() {
-        this._context.setValue(this._chatState, true);
+    _renderEmptyState() {
+        return html `
+      <div part="empty-state">
+        <slot name="empty-state"></slot>
+      </div>
+    `;
     }
     render() {
-        const hasSuggestions = this._chatState.options?.suggestions &&
-            this._chatState.options.suggestions.length > 0;
+        const hasMessages = !isEmpty(this.messages);
+        const suggestions = isEmpty(this._state.options?.suggestions ?? [])
+            ? nothing
+            : this._renderSuggestions();
         return html `
       <div
         part="chat-container"
@@ -175,37 +240,17 @@ class IgcChatComponent extends EventEmitterMixin(LitElement) {
           attachment-actions
         "
       >
-        ${this.renderHeader()}
+        ${this._renderHeader()}
+
         <div part="chat-wrapper">
-          ${this.messages.length === 0
-            ? html `<div part="empty-state">
-                <slot name="empty-state"> </slot>
-              </div>`
-            : html ` <igc-chat-message-list
-                part="chat-messages"
-                exportparts="
-                  message-container,
-                  message-list,
-                  message-item,
-                  message,
-                  message-text,
-                  message-attachments,
-                  message-actions,
-                  typing-indicator,
-                  attachments-container,
-                  attachment,
-                  attachment-header,
-                  attachment-content,
-                  attachment-icon,
-                  file-name,
-                  actions: attachment-actions"
-              >
-              </igc-chat-message-list>`}
-          ${hasSuggestions &&
-            this._chatState.suggestionsPosition === 'below-messages'
-            ? this.renderSuggestions()
+          ${cache(hasMessages || this._state.options?.isTyping
+            ? this._renderMessages()
+            : this._renderEmptyState())}
+          ${this._state.suggestionsPosition === 'below-messages'
+            ? suggestions
             : nothing}
         </div>
+
         <igc-chat-input
           exportparts="
               input-container,
@@ -219,9 +264,8 @@ class IgcChatComponent extends EventEmitterMixin(LitElement) {
               send-button"
         >
         </igc-chat-input>
-        ${hasSuggestions &&
-            this._chatState.suggestionsPosition === 'below-input'
-            ? this.renderSuggestions()
+        ${this._state.suggestionsPosition === 'below-input'
+            ? suggestions
             : nothing}
       </div>
     `;

package/components/chat/chat.js.map

@@ -1 +1 @@
-{"version":3,"file":"chat.js","sourceRoot":"","sources":["../../../src/components/chat/chat.ts"],"names":[],"mappings":"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","sourcesContent":["import { ContextProvider } from '@lit/context';\nimport { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport IgcButtonComponent from '../button/button.js';\nimport { chatContext } from '../common/context.js';\nimport { addSlotController, setSlots } from '../common/controllers/slot.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { IgcChatResourceStringEN } from '../common/i18n/chat.resources.js';\nimport type { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport IgcIconComponent from '../icon/icon.js';\nimport IgcListComponent from '../list/list.js';\nimport IgcListHeaderComponent from '../list/list-header.js';\nimport IgcListItemComponent from '../list/list-item.js';\nimport IgcChatInputComponent from './chat-input.js';\nimport IgcChatMessageListComponent from './chat-message-list.js';\nimport { createChatState } from './chat-state.js';\nimport { styles } from './themes/chat.base.css.js';\nimport { styles as shared } from './themes/shared/chat.common.css.js';\nimport { all } from './themes/themes.js';\nimport type {\n  IgcChatOptions,\n  IgcMessage,\n  IgcMessageAttachment,\n} from './types.js';\n\n/**\n * Defines the custom events dispatched by the `<igc-chat>` component.\n */\nexport interface IgcChatComponentEventMap {\n  /**\n   * Dispatched when a new chat message is created (sent).\n   *\n   * @event igcMessageCreated\n   * @type {CustomEvent<IgcMessage>}\n   * @detail The message that was created.\n   */\n  igcMessageCreated: CustomEvent<IgcMessage>;\n\n  /**\n   * Dispatched when a new chat message is created (sent).\n   *\n   * @event igcMessageCreated\n   * @type {CustomEvent<IgcMessage>}\n   * @detail The message that was reacted to and the reaction.\n   */\n  igcMessageReact: CustomEvent<{ message: IgcMessage; reaction: string }>;\n\n  /**\n   * Dispatched when a chat message attachment is clicked.\n   *\n   * @event igcAttachmentClick\n   * @type {CustomEvent<IgcMessageAttachment>}\n   * @detail The attachment that was clicked.\n   */\n  igcAttachmentClick: CustomEvent<IgcMessageAttachment>;\n\n  /**\n   * Dispatched when an attachment is changed (e.g., updated or removed).\n   *\n   * @event igcAttachmentChange\n   * @type {CustomEvent<IgcMessageAttachment>}\n   * @detail The attachment that was changed.\n   */\n  igcAttachmentChange: CustomEvent<IgcMessageAttachment>;\n\n  /**\n   * Dispatched during an attachment drag operation.\n   *\n   * @event igcAttachmentDrag\n   * @type {CustomEvent<any>}\n   * @detail The drag event payload.\n   */\n  igcAttachmentDrag: CustomEvent<any>;\n\n  /**\n   * Dispatched when an attachment is dropped (e.g., in a drag-and-drop operation).\n   *\n   * @event igcAttachmentDrop\n   * @type {CustomEvent<any>}\n   * @detail The drop event payload.\n   */\n  igcAttachmentDrop: CustomEvent<any>;\n\n  /**\n   * Dispatched when the typing status changes (e.g., user starts or stops typing).\n   *\n   * @event igcTypingChange\n   * @type {CustomEvent<boolean>}\n   * @detail `true` if typing started, `false` if stopped.\n   */\n  igcTypingChange: CustomEvent<boolean>;\n\n  /**\n   * Dispatched when the chat input field gains focus.\n   *\n   * @event igcInputFocus\n   * @type {CustomEvent<any>}\n   * @detail Focus event payload.\n   */\n  igcInputFocus: CustomEvent<any>;\n\n  /**\n   * Dispatched when the chat input field loses focus.\n   *\n   * @event igcInputBlur\n   * @type {CustomEvent<any>}\n   * @detail Blur event payload.\n   */\n  igcInputBlur: CustomEvent<any>;\n\n  /**\n   * Dispatched when the content of the chat input changes.\n   *\n   * @event igcInputChange\n   * @type {CustomEvent<string>}\n   * @detail The current text value of the input.\n   */\n  igcInputChange: CustomEvent<string>;\n}\n\nconst Slots = setSlots(\n  'prefix',\n  'title',\n  'actions',\n  'suggestions-header',\n  'suggestions',\n  'suggestions-actions',\n  'suggestions-header',\n  'suggestion',\n  'empty-state'\n);\n\n/**\n * A chat UI component for displaying messages, attachments, and input interaction.\n *\n * This component is part of the Ignite UI Web Components suite.\n *\n * @element igc-chat\n * @slot prefix - Slot for injecting content (e.g., avatar or icon) before the chat title.\n * @slot title - Slot for overriding the chat title content.\n * @slot actions - Slot for injecting header actions (e.g., buttons, menus).\n * @slot suggestions-header - Slot for rendering a custom header for the suggestions list.\n * @slot suggestions - Slot for rendering a custom list of quick reply suggestions.\n * @slot suggestions-actions - Slot for rendering additional actions.\n * @slot suggestion - Slot for rendering a single suggestion item.\n * @slot empty-state - Slot shown when there are no messages.\n *\n * @csspart header - Styles the header container.\n * @csspart prefix - Styles the element before the title (e.g., avatar).\n * @csspart title - Styles the chat header title.\n * @csspart suggestions - Styles the suggestion container.\n * @csspart suggestion - Styles each suggestion item.\n */\nexport default class IgcChatComponent extends EventEmitterMixin<\n  IgcChatComponentEventMap,\n  Constructor<LitElement>\n>(LitElement) {\n  public static readonly tagName = 'igc-chat';\n\n  public static styles = [styles, shared];\n\n  /* blazorSuppress */\n  /**\n   * Registers the chat component and its child components.\n   * Should be called once before using the component.\n   *\n   * @example\n   * IgcChatComponent.register();\n   */\n  public static register() {\n    registerComponent(\n      IgcChatComponent,\n      IgcChatInputComponent,\n      IgcChatMessageListComponent,\n      IgcButtonComponent,\n      IgcIconComponent,\n      IgcListComponent,\n      IgcListItemComponent,\n      IgcListHeaderComponent\n    );\n  }\n\n  private readonly _chatState = createChatState(this);\n\n  private readonly _slots = addSlotController(this, {\n    slots: Slots,\n  });\n\n  private _context = new ContextProvider(this, {\n    context: chatContext,\n    initialValue: this._chatState,\n  });\n  constructor() {\n    super();\n    addThemingController(this, all);\n  }\n\n  /**\n   * The list of chat messages currently displayed.\n   * Use this property to set or update the message history.\n   */\n  @property({ attribute: false })\n  public set messages(value: IgcMessage[]) {\n    this._chatState.messages = value;\n  }\n\n  public get messages(): IgcMessage[] {\n    return this._chatState.messages;\n  }\n\n  /**\n   * The chat message currently being composed but not yet sent.\n   * Includes the draft text and any attachments.\n   */\n  @property({ attribute: false })\n  public set draftMessage(value: {\n    text: string;\n    attachments?: IgcMessageAttachment[];\n  }) {\n    if (this._chatState && value) {\n      this._chatState.inputValue = value.text;\n      this._chatState.inputAttachments = value.attachments || [];\n      this.requestUpdate();\n    }\n  }\n\n  public get draftMessage(): {\n    text: string;\n    attachments?: IgcMessageAttachment[];\n  } {\n    return {\n      text: this._chatState?.inputValue,\n      attachments: this._chatState?.inputAttachments,\n    };\n  }\n\n  /**\n   * Controls the chat behavior and appearance through a configuration object.\n   * Use this to toggle UI options, provide suggestions, templates, etc.\n   */\n  @property({ attribute: false })\n  public set options(value: IgcChatOptions) {\n    this._chatState.options = value;\n  }\n\n  public get options(): IgcChatOptions | undefined {\n    return this._chatState.options;\n  }\n\n  /** The resource strings. */\n  @property({ attribute: false })\n  public resourceStrings = IgcChatResourceStringEN;\n\n  /**\n   * Scrolls the view to a specific message by id.\n   * @param messageId - The id of the message to scroll to\n   */\n  public scrollToMessage(messageId: string) {\n    // Find the message list component\n    const messageListComponent = this.shadowRoot?.querySelector(\n      'igc-chat-message-list'\n    );\n    if (!messageListComponent) {\n      return;\n    }\n\n    // Look for the message element inside the message list's shadow DOM\n    const messageElement = messageListComponent.shadowRoot?.querySelector(\n      `#message-${messageId}`\n    );\n\n    if (!messageElement) {\n      return;\n    }\n\n    // Scroll the message into view with smooth behavior\n    messageElement.scrollIntoView({\n      behavior: 'smooth',\n      block: 'center',\n      inline: 'nearest',\n    });\n  }\n\n  @watch('messages')\n  @watch('draftMessage')\n  @watch('options')\n  protected contextChanged() {\n    this._context.setValue(this._chatState, true);\n  }\n\n  private renderHeader() {\n    const hasContent =\n      this._slots.hasAssignedElements('prefix') ||\n      this._slots.hasAssignedElements('title') ||\n      this._slots.hasAssignedElements('actions');\n    return html` <div part=\"header\" ?hidden=${!hasContent}>\n      <slot name=\"prefix\" part=\"prefix\"></slot>\n      <slot name=\"title\" part=\"title\"\n        >${this._chatState.options?.headerText}</slot\n      >\n      <slot name=\"actions\" part=\"actions\"></slot>\n    </div>`;\n  }\n\n  private renderSuggestionPrefix() {\n    const defaultPrefix = html`<igc-icon\n      name=\"star-icon\"\n      collection=\"material\"\n    ></igc-icon>`;\n    return html`<span slot=\"start\">\n      ${this._chatState?.options?.templates?.suggestionPrefixTemplate\n        ? this._chatState.options.templates.suggestionPrefixTemplate\n        : defaultPrefix}\n    </span>`;\n  }\n\n  private renderSuggestions() {\n    const hasContent = this._slots.hasAssignedElements('suggestions-header');\n    return html`<div part=\"suggestions-container\">\n      <igc-list role=\"list\" aria-label=\"Suggestions\">\n        <igc-list-header part=\"suggestions-header\">\n          <span ?hidden=${hasContent}>\n            ${this.resourceStrings.suggestionsHeader}\n          </span>\n          <slot name=\"suggestions-header\"></slot>\n        </igc-list-header>\n        <slot name=\"suggestions\" part=\"suggestions\">\n          ${this._chatState.options?.suggestions?.map(\n            (suggestion) => html`\n              <slot name=\"suggestion\" part=\"suggestion\" role=\"listitem\">\n                <igc-list-item\n                  @click=${() =>\n                    this._chatState?.handleSuggestionClick(suggestion)}\n                >\n                  ${this.renderSuggestionPrefix()}\n                  <span slot=\"title\">${suggestion}</span>\n                </igc-list-item>\n              </slot>\n            `\n          )}\n        </slot>\n        <slot name=\"suggestions-actions\" part=\"suggestions-actions\"></slot>\n      </igc-list>\n    </div>`;\n  }\n\n  /**\n   * Updates the context value to notify all consumers that the chat state has changed.\n   * This ensures that components consuming the chat context will re-render.\n   */\n  public updateContextValue() {\n    this._context.setValue(this._chatState, true);\n  }\n\n  protected override render() {\n    const hasSuggestions =\n      this._chatState.options?.suggestions &&\n      this._chatState.options.suggestions.length > 0;\n    return html`\n      <div\n        part=\"chat-container\"\n        exportparts=\"\n          chat-container,\n          header,\n          prefix,\n          title,\n          actions,\n          chat-wrapper,\n          chat-messages,\n          empty-state,\n          suggestions-container,\n          suggestions-header,\n          suggestions,\n          suggestions-actions,\n          suggestion,\n          message-container,\n          message-list,\n          message-item,\n          message,\n          message-text,\n          message-attachments,\n          message-actions,\n          typing-indicator,\n          attachments-container,\n          attachment,\n          attachment-header,\n          attachment-content,\n          attachment-icon,\n          file-name,\n          attachment-actions\n        \"\n      >\n        ${this.renderHeader()}\n        <div part=\"chat-wrapper\">\n          ${this.messages.length === 0\n            ? html`<div part=\"empty-state\">\n                <slot name=\"empty-state\"> </slot>\n              </div>`\n            : html` <igc-chat-message-list\n                part=\"chat-messages\"\n                exportparts=\"\n                  message-container,\n                  message-list,\n                  message-item,\n                  message,\n                  message-text,\n                  message-attachments,\n                  message-actions,\n                  typing-indicator,\n                  attachments-container,\n                  attachment,\n                  attachment-header,\n                  attachment-content,\n                  attachment-icon,\n                  file-name,\n                  actions: attachment-actions\"\n              >\n              </igc-chat-message-list>`}\n          ${hasSuggestions &&\n          this._chatState.suggestionsPosition === 'below-messages'\n            ? this.renderSuggestions()\n            : nothing}\n        </div>\n        <igc-chat-input\n          exportparts=\"\n              input-container,\n              input-wrapper,\n              attachments: input-attachments-container,\n              attachments-wrapper: input-attachment,\n              attachment-name: input-attachment-name,\n              text-input,\n              buttons-container: input-buttons-container,\n              upload-button,\n              send-button\"\n        >\n        </igc-chat-input>\n        ${hasSuggestions &&\n        this._chatState.suggestionsPosition === 'below-input'\n          ? this.renderSuggestions()\n          : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    /** The `<igc-chat>` custom element. */\n    'igc-chat': IgcChatComponent;\n  }\n}\n"]}
+{"version":3,"file":"chat.js","sourceRoot":"","sources":["../../../src/components/chat/chat.ts"],"names":[],"mappings":"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","sourcesContent":["import { ContextProvider } from '@lit/context';\nimport { html, LitElement, nothing, type PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { cache } from 'lit/directives/cache.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport IgcButtonComponent from '../button/button.js';\nimport { chatContext, chatUserInputContext } from '../common/context.js';\nimport { addSlotController, setSlots } from '../common/controllers/slot.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { IgcChatResourceStringEN } from '../common/i18n/chat.resources.js';\nimport type { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { isEmpty } from '../common/util.js';\nimport IgcIconComponent from '../icon/icon.js';\nimport IgcListComponent from '../list/list.js';\nimport IgcListHeaderComponent from '../list/list-header.js';\nimport IgcListItemComponent from '../list/list-item.js';\nimport IgcChatInputComponent from './chat-input.js';\nimport IgcChatMessageComponent from './chat-message.js';\nimport { ChatState } from './chat-state.js';\nimport { styles } from './themes/chat.base.css.js';\nimport { styles as shared } from './themes/shared/chat.common.css.js';\nimport { all } from './themes/themes.js';\nimport type {\n  IgcChatOptions,\n  IgcMessage,\n  IgcMessageAttachment,\n} from './types.js';\n\n/**\n * Defines the custom events dispatched by the `<igc-chat>` component.\n */\nexport interface IgcChatComponentEventMap {\n  /**\n   * Dispatched when a new chat message is created (sent).\n   */\n  igcMessageCreated: CustomEvent<IgcMessage>;\n\n  /**\n   * Dispatched when a message is reacted to.\n   */\n  igcMessageReact: CustomEvent<{ message: IgcMessage; reaction: string }>;\n\n  /**\n   * Dispatched when a chat message attachment is clicked.\n   */\n  igcAttachmentClick: CustomEvent<IgcMessageAttachment>;\n\n  /**\n   * Dispatched when an attachment is changed (e.g., updated or removed).\n   */\n  igcAttachmentChange: CustomEvent<IgcMessageAttachment>;\n\n  /**\n   * Dispatched during an attachment drag operation.\n   */\n  igcAttachmentDrag: CustomEvent<void>;\n\n  /**\n   * Dispatched when an attachment is dropped (e.g., in a drag-and-drop operation).\n   */\n  igcAttachmentDrop: CustomEvent<void>;\n\n  /**\n   * Dispatched when the typing status changes (e.g., user starts or stops typing).\n   */\n  igcTypingChange: CustomEvent<boolean>;\n\n  /**\n   * Dispatched when the chat input field gains focus.\n   */\n  igcInputFocus: CustomEvent<void>;\n\n  /**\n   * Dispatched when the chat input field loses focus.\n   */\n  igcInputBlur: CustomEvent<void>;\n\n  /**\n   * Dispatched when the content of the chat input changes.\n   */\n  igcInputChange: CustomEvent<string>;\n}\n\nconst Slots = setSlots(\n  'prefix',\n  'title',\n  'actions',\n  'suggestions-header',\n  'suggestions',\n  'suggestions-actions',\n  'suggestion',\n  'empty-state'\n);\n\n/**\n * A chat UI component for displaying messages, attachments, and input interaction.\n *\n * @element igc-chat\n *\n * @fires igcMessageCreated - Dispatched when a new chat message is created (sent).\n * @fires igcMessageReact - Dispatched when a message is reacted to.\n * @fires igcAttachmentClick - Dispatched when a chat message attachment is clicked.\n * @fires igcAttachmentChange - Dispatched when a message attachment is changed (e.g., updated or removed).\n * @fires igcAttachmentDrag - Dispatched during an attachment drag operation.\n * @fires igcAttachmentDrop - Dispatched when an attachment is dropped (e.g., in a drag-and-drop operation).\n * @fires igcTypingChange - Dispatched when the typing status changes (e.g., user starts or stops typing).\n * @fires igcInputFocus - Dispatched when the chat input field gains focus.\n * @fires igcInputBlur - Dispatched when the chat input field loses focus.\n * @fires igcInputChange - Dispatched when the content of the chat input changes.\n *\n * @slot prefix - Slot for injecting content (e.g., avatar or icon) before the chat title.\n * @slot title - Slot for overriding the chat title content.\n * @slot actions - Slot for injecting header actions (e.g., buttons, menus).\n * @slot suggestions-header - Slot for rendering a custom header for the suggestions list.\n * @slot suggestions - Slot for rendering a custom list of quick reply suggestions.\n * @slot suggestions-actions - Slot for rendering additional actions.\n * @slot suggestion - Slot for rendering a single suggestion item.\n * @slot empty-state - Slot shown when there are no messages.\n *\n * @csspart header - Styles the header container.\n * @csspart prefix - Styles the element before the title (e.g., avatar).\n * @csspart title - Styles the chat header title.\n * @csspart suggestions - Styles the suggestion container.\n * @csspart suggestion - Styles each suggestion item.\n */\nexport default class IgcChatComponent extends EventEmitterMixin<\n  IgcChatComponentEventMap,\n  Constructor<LitElement>\n>(LitElement) {\n  public static readonly tagName = 'igc-chat';\n\n  public static styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(\n      IgcChatComponent,\n      IgcChatInputComponent,\n      IgcChatMessageComponent,\n      IgcButtonComponent,\n      IgcIconComponent,\n      IgcListComponent,\n      IgcListItemComponent,\n      IgcListHeaderComponent\n    );\n  }\n\n  private readonly _state = new ChatState(\n    this,\n    this._updateContext,\n    this._updateUserInputContext\n  );\n\n  private readonly _slots = addSlotController(this, {\n    slots: Slots,\n  });\n\n  private readonly _context = new ContextProvider(this, {\n    context: chatContext,\n    initialValue: this._state,\n  });\n\n  private readonly _userInputContext = new ContextProvider(this, {\n    context: chatUserInputContext,\n    initialValue: this._state,\n  });\n\n  private _updateContext(): void {\n    this._context.setValue(this._state, true);\n  }\n\n  private _updateUserInputContext(): void {\n    this._userInputContext.setValue(this._state, true);\n  }\n\n  /**\n   * The list of chat messages currently displayed.\n   * Use this property to set or update the message history.\n   */\n  @property({ attribute: false })\n  public set messages(value: IgcMessage[]) {\n    this._state.messages = value;\n  }\n\n  public get messages(): IgcMessage[] {\n    return this._state.messages;\n  }\n\n  /**\n   * The chat message currently being composed but not yet sent.\n   * Includes the draft text and any attachments.\n   */\n  @property({ attribute: false })\n  public set draftMessage(value: {\n    text: string;\n    attachments?: IgcMessageAttachment[];\n  }) {\n    if (this._state && value) {\n      this._state.inputValue = value.text;\n      this._state.inputAttachments = value.attachments || [];\n      this.requestUpdate();\n    }\n  }\n\n  public get draftMessage(): {\n    text: string;\n    attachments?: IgcMessageAttachment[];\n  } {\n    return {\n      text: this._state.inputValue,\n      attachments: this._state.inputAttachments,\n    };\n  }\n\n  /**\n   * Controls the chat behavior and appearance through a configuration object.\n   * Use this to toggle UI options, provide suggestions, templates, etc.\n   */\n  @property({ attribute: false })\n  public set options(value: IgcChatOptions) {\n    this._state.options = value;\n  }\n\n  public get options(): IgcChatOptions | undefined {\n    return this._state.options;\n  }\n\n  /**\n   * The resource strings of the chat.\n   */\n  @property({ attribute: false })\n  public resourceStrings = IgcChatResourceStringEN;\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n  }\n\n  @watch('messages')\n  @watch('draftMessage')\n  @watch('options')\n  protected contextChanged() {\n    this._context.setValue(this._state, true);\n  }\n\n  // REVIEW: Maybe accept an `IgcMessage` type as well?\n  /**\n   * Scrolls the view to a specific message by id.\n   * @param messageId - The id of the message to scroll to\n   */\n  public scrollToMessage(messageId: string): void {\n    if (!isEmpty(this.messages)) {\n      const message = this.renderRoot.querySelector(`#message-${messageId}`);\n      message?.scrollIntoView({ block: 'end', inline: 'end' });\n    }\n  }\n\n  /**\n   * Updates the context value to notify all consumers that the chat state has changed.\n   * This ensures that components consuming the chat context will re-render.\n   */\n  public updateContextValue() {\n    this._context.setValue(this._state, true);\n  }\n\n  protected override updated(properties: PropertyValues<this>): void {\n    if (properties.has('messages') && !this._state.disableAutoScroll) {\n      this._scrollToBottom();\n    }\n  }\n\n  private _scrollToBottom(): void {\n    if (!isEmpty(this.messages)) {\n      const lastMessage = this.renderRoot\n        .querySelectorAll(IgcChatMessageComponent.tagName)\n        .item(this.messages.length - 1);\n\n      requestAnimationFrame(() =>\n        lastMessage.scrollIntoView({ block: 'end', inline: 'end' })\n      );\n    }\n  }\n\n  private _renderHeader() {\n    const hasContent =\n      this._slots.hasAssignedElements('prefix') ||\n      this._slots.hasAssignedElements('title') ||\n      this._slots.hasAssignedElements('actions') ||\n      this._state.options?.headerText;\n\n    return html`\n      <div part=\"header\" ?hidden=${!hasContent}>\n        <slot name=\"prefix\" part=\"prefix\"></slot>\n        <slot name=\"title\" part=\"title\"\n          >${this._state.options?.headerText}</slot\n        >\n        <slot name=\"actions\" part=\"actions\"></slot>\n      </div>\n    `;\n  }\n\n  private _renderMessages() {\n    return html`\n      <div part=\"message-list\" tabindex=\"0\">\n        ${repeat(\n          this._state.messages,\n          (message) => message.id,\n          (message) => {\n            return html`\n              <igc-chat-message\n                id=${`message-${message.id}`}\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        ${this._state.options?.isTyping\n          ? (this._state.options?.renderers?.typingIndicator?.({\n              param: undefined,\n              defaults: {\n                typingIndicator: () => this._renderLoadingTemplate(),\n              },\n              options: this._state.options,\n            }) ?? this._renderLoadingTemplate())\n          : nothing}\n      </div>\n    `;\n  }\n\n  private _renderLoadingTemplate() {\n    return html`\n      <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  private _renderSuggestionPrefix() {\n    return html`\n      <span slot=\"start\">\n        <igc-icon name=\"auto_suggest\"></igc-icon>\n      </span>\n    `;\n  }\n\n  private _renderSuggestions() {\n    const hasContent = this._slots.hasAssignedElements('suggestions-header');\n    const suggestions = this._state.options?.suggestions ?? [];\n\n    return html`\n      <div part=\"suggestions-container\">\n        <igc-list>\n          <igc-list-header part=\"suggestions-header\">\n            <span ?hidden=${hasContent}>\n              ${this.resourceStrings.suggestionsHeader}\n            </span>\n            <slot name=\"suggestions-header\"></slot>\n          </igc-list-header>\n          <slot name=\"suggestions\" part=\"suggestions\">\n            ${suggestions.map(\n              (suggestion) => html`\n                <slot name=\"suggestion\" part=\"suggestion\">\n                  <igc-list-item\n                    @click=${() =>\n                      this._state?.handleSuggestionClick(suggestion)}\n                  >\n                    ${this._renderSuggestionPrefix()}\n                    <span slot=\"title\">${suggestion}</span>\n                  </igc-list-item>\n                </slot>\n              `\n            )}\n          </slot>\n          <slot name=\"suggestions-actions\" part=\"suggestions-actions\"></slot>\n        </igc-list>\n      </div>\n    `;\n  }\n\n  private _renderEmptyState() {\n    return html`\n      <div part=\"empty-state\">\n        <slot name=\"empty-state\"></slot>\n      </div>\n    `;\n  }\n\n  protected override render() {\n    const hasMessages = !isEmpty(this.messages);\n    const suggestions = isEmpty(this._state.options?.suggestions ?? [])\n      ? nothing\n      : this._renderSuggestions();\n\n    return html`\n      <div\n        part=\"chat-container\"\n        exportparts=\"\n          chat-container,\n          header,\n          prefix,\n          title,\n          actions,\n          chat-wrapper,\n          chat-messages,\n          empty-state,\n          suggestions-container,\n          suggestions-header,\n          suggestions,\n          suggestions-actions,\n          suggestion,\n          message-container,\n          message-list,\n          message-item,\n          message,\n          message-text,\n          message-attachments,\n          message-actions,\n          typing-indicator,\n          attachments-container,\n          attachment,\n          attachment-header,\n          attachment-content,\n          attachment-icon,\n          file-name,\n          attachment-actions\n        \"\n      >\n        ${this._renderHeader()}\n\n        <div part=\"chat-wrapper\">\n          ${cache(\n            hasMessages || this._state.options?.isTyping\n              ? this._renderMessages()\n              : this._renderEmptyState()\n          )}\n          ${this._state.suggestionsPosition === 'below-messages'\n            ? suggestions\n            : nothing}\n        </div>\n\n        <igc-chat-input\n          exportparts=\"\n              input-container,\n              input-wrapper,\n              attachments: input-attachments-container,\n              attachments-wrapper: input-attachment,\n              attachment-name: input-attachment-name,\n              text-input,\n              buttons-container: input-buttons-container,\n              upload-button,\n              send-button\"\n        >\n        </igc-chat-input>\n        ${this._state.suggestionsPosition === 'below-input'\n          ? suggestions\n          : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-chat': IgcChatComponent;\n  }\n}\n"]}

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

@@ -0,0 +1,23 @@
+import type { IgcMessage } from '../types.js';
+/**
+ * Options to configure the MarkdownMessageRenderer.
+ */
+export interface MarkdownRendererOptions {
+    /**
+     * If true, disables syntax highlighting entirely.
+     */
+    noHighlighter?: boolean;
+    /**
+     * List of programming languages to support in syntax highlighting.
+     */
+    languages?: string[];
+    /**
+     * The theme used by the syntax highlighter (e.g., 'github-light').
+     */
+    theme?: string;
+    /**
+     * A custom HTML sanitization function. Defaults to DOMPurify.sanitize.
+     */
+    sanitizer?: (html: string) => string;
+}
+export declare function createMarkdownRenderer(options?: MarkdownRendererOptions): Promise<(message: IgcMessage) => Promise<unknown>>;

package/components/chat/extras/markdown-renderer.js

@@ -0,0 +1,44 @@
+import DOMPurify from 'dompurify';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { Marked } from 'marked';
+import markedShiki from 'marked-shiki';
+import { getSingletonHighlighter } from 'shiki';
+export async function createMarkdownRenderer(options) {
+    const sanitizer = options?.sanitizer ?? DOMPurify.sanitize;
+    const markedInstance = new Marked({
+        breaks: true,
+        gfm: true,
+        extensions: [
+            {
+                name: 'link',
+                renderer({ href, title, text }) {
+                    return `<a href="${href}" target="_blank" rel="noopener noreferrer" ${title ? `title="${title}"` : ''}>${text}</a>`;
+                },
+            },
+        ],
+    });
+    if (!options?.noHighlighter) {
+        const themes = [options?.theme ?? 'github-light'];
+        const langs = options?.languages
+            ? options.languages
+            : ['javascript', 'typescript', 'html', 'css'];
+        const shikiInstance = await getSingletonHighlighter({
+            themes,
+            langs,
+        });
+        markedInstance.use(markedShiki({
+            highlight(code, lang, _) {
+                return shikiInstance.codeToHtml(code, {
+                    lang,
+                    themes: { light: themes[0] },
+                });
+            },
+        }));
+    }
+    return async (message) => {
+        return message.text
+            ? unsafeHTML(sanitizer(await markedInstance.parse(message.text)))
+            : '';
+    };
+}
+//# sourceMappingURL=markdown-renderer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"markdown-renderer.js","sourceRoot":"","sources":["../../../../src/components/chat/extras/markdown-renderer.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,WAAW,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAChC,OAAO,WAAW,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,uBAAuB,EAAE,MAAM,OAAO,CAAC;AA4BhD,MAAM,CAAC,KAAK,UAAU,sBAAsB,CAC1C,OAAiC;IAEjC,MAAM,SAAS,GAAG,OAAO,EAAE,SAAS,IAAI,SAAS,CAAC,QAAQ,CAAC;IAE3D,MAAM,cAAc,GAAG,IAAI,MAAM,CAAC;QAChC,MAAM,EAAE,IAAI;QACZ,GAAG,EAAE,IAAI;QACT,UAAU,EAAE;YACV;gBACE,IAAI,EAAE,MAAM;gBACZ,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE;oBAC5B,OAAO,YAAY,IAAI,+CAA+C,KAAK,CAAC,CAAC,CAAC,UAAU,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,MAAM,CAAC;gBACtH,CAAC;aACF;SACF;KACF,CAAC,CAAC;IAEH,IAAI,CAAC,OAAO,EAAE,aAAa,EAAE,CAAC;QAC5B,MAAM,MAAM,GAAG,CAAC,OAAO,EAAE,KAAK,IAAI,cAAc,CAAC,CAAC;QAClD,MAAM,KAAK,GAAG,OAAO,EAAE,SAAS;YAC9B,CAAC,CAAC,OAAO,CAAC,SAAS;YACnB,CAAC,CAAC,CAAC,YAAY,EAAE,YAAY,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;QAEhD,MAAM,aAAa,GAAG,MAAM,uBAAuB,CAAC;YAClD,MAAM;YACN,KAAK;SACN,CAAC,CAAC;QAEH,cAAc,CAAC,GAAG,CAChB,WAAW,CAAC;YACV,SAAS,CAAC,IAAI,EAAE,IAAI,EAAE,CAAC;gBACrB,OAAO,aAAa,CAAC,UAAU,CAAC,IAAI,EAAE;oBACpC,IAAI;oBACJ,MAAM,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE;iBAC7B,CAAC,CAAC;YACL,CAAC;SACF,CAAC,CACH,CAAC;IACJ,CAAC;IAED,OAAO,KAAK,EAAE,OAAmB,EAAoB,EAAE;QACrD,OAAO,OAAO,CAAC,IAAI;YACjB,CAAC,CAAC,UAAU,CAAC,SAAS,CAAC,MAAM,cAAc,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;YACjE,CAAC,CAAC,EAAE,CAAC;IACT,CAAC,CAAC;AACJ,CAAC","sourcesContent":["import DOMPurify from 'dompurify';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { Marked } from 'marked';\nimport markedShiki from 'marked-shiki';\nimport { getSingletonHighlighter } from 'shiki';\nimport type { IgcMessage } from '../types.js';\n\n/**\n * Options to configure the MarkdownMessageRenderer.\n */\nexport interface MarkdownRendererOptions {\n  /**\n   * If true, disables syntax highlighting entirely.\n   */\n  noHighlighter?: boolean;\n\n  /**\n   * List of programming languages to support in syntax highlighting.\n   */\n  languages?: string[];\n\n  /**\n   * The theme used by the syntax highlighter (e.g., 'github-light').\n   */\n  theme?: string;\n\n  /**\n   * A custom HTML sanitization function. Defaults to DOMPurify.sanitize.\n   */\n  sanitizer?: (html: string) => string;\n}\n\nexport async function createMarkdownRenderer(\n  options?: MarkdownRendererOptions\n) {\n  const sanitizer = options?.sanitizer ?? DOMPurify.sanitize;\n\n  const markedInstance = new Marked({\n    breaks: true,\n    gfm: true,\n    extensions: [\n      {\n        name: 'link',\n        renderer({ href, title, text }) {\n          return `<a href=\"${href}\" target=\"_blank\" rel=\"noopener noreferrer\" ${title ? `title=\"${title}\"` : ''}>${text}</a>`;\n        },\n      },\n    ],\n  });\n\n  if (!options?.noHighlighter) {\n    const themes = [options?.theme ?? 'github-light'];\n    const langs = options?.languages\n      ? options.languages\n      : ['javascript', 'typescript', 'html', 'css'];\n\n    const shikiInstance = await getSingletonHighlighter({\n      themes,\n      langs,\n    });\n\n    markedInstance.use(\n      markedShiki({\n        highlight(code, lang, _) {\n          return shikiInstance.codeToHtml(code, {\n            lang,\n            themes: { light: themes[0] },\n          });\n        },\n      })\n    );\n  }\n\n  return async (message: IgcMessage): Promise<unknown> => {\n    return message.text\n      ? unsafeHTML(sanitizer(await markedInstance.parse(message.text)))\n      : '';\n  };\n}\n"]}

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

@@ -1,5 +1,5 @@
-import { LitElement } from 'lit';
-import { type IgcMessage } from './types.js';
+import { LitElement, nothing } from 'lit';
+import type { IgcMessage } from './types.js';
 /**
  * A component that renders message attachments within a chat.
  *
@@ -22,14 +22,32 @@ import { type IgcMessage } from './types.js';
 export default class IgcMessageAttachmentsComponent extends LitElement {
     static readonly tagName = "igc-message-attachments";
     static styles: import("lit").CSSResult[];
-    private _chatState?;
     static register(): void;
+    private readonly _defaults;
+    private readonly _state;
     /**
      * The array of attachments to render.
      */
-    message: IgcMessage | undefined;
+    message?: IgcMessage;
     constructor();
-    protected render(): import("lit-html").TemplateResult<1>;
+    private _getRenderers;
+    private _handleHeaderClick;
+    /**
+     * Default attachment header template used when no custom template is provided.
+     * Renders the attachment icon and name.
+     * @param attachment The message attachment to render
+     * @returns TemplateResult containing the rendered attachment header
+     */
+    private renderHeader;
+    /**
+     * Default attachment content template used when no custom template is provided.
+     * Renders the attachment content based on its type.
+     * @param attachment The message attachment to render
+     * @returns TemplateResult containing the rendered attachment content
+     */
+    private _renderContent;
+    private _renderAttachment;
+    protected render(): typeof nothing | import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {