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

package/components/chat/chat.js

@@ -7,140 +7,225 @@ 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, last } 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');
-class IgcChatComponent extends EventEmitterMixin(LitElement) {
+const Slots = setSlots('prefix', 'title', 'actions', 'suggestions-header', 'suggestions', 'suggestions-actions', 'suggestion', 'empty-state');
+export default class IgcChatComponent extends EventEmitterMixin(LitElement) {
+    static { this.tagName = 'igc-chat'; }
+    static { this.styles = [styles, shared]; }
     static register() {
-        registerComponent(IgcChatComponent, IgcChatInputComponent, IgcChatMessageListComponent, IgcButtonComponent, IgcIconComponent, IgcListComponent, IgcListItemComponent, IgcListHeaderComponent);
+        registerComponent(IgcChatComponent, IgcChatInputComponent, IgcChatMessageComponent, IgcButtonComponent, IgcIconComponent, IgcListComponent);
     }
-    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._defaults = Object.freeze({
+            typingIndicator: () => this._renderLoadingTemplate(),
+            suggestionPrefix: () => this._renderSuggestionPrefix(),
+        });
+        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);
+    }
+    _getRenderer(name) {
+        return this._state.options?.renderers
+            ? (this._state.options.renderers[name] ?? this._defaults[name])
+            : this._defaults[name];
     }
     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;
+    }
+    addMessage(message) {
+        this._state.addMessage(message);
+        return last(this.messages);
+    }
+    updateMessage(message, data, scrollIntoView = false) {
+        Object.assign(message, data);
+        const messageElement = this.renderRoot.querySelector(`#message-${message.id}`);
+        if (messageElement) {
+            messageElement.requestUpdate();
+            if (scrollIntoView) {
+                messageElement.updateComplete.then(() => messageElement.scrollIntoView({ block: 'end', inline: 'end' }));
+            }
+        }
+        else {
+            this.requestUpdate('messages');
         }
-        messageElement.scrollIntoView({
-            behavior: 'smooth',
-            block: 'center',
-            inline: 'nearest',
-        });
     }
-    contextChanged() {
-        this._context.setValue(this._chatState, true);
+    updated(properties) {
+        if (properties.has('messages') && !this._state.disableAutoScroll) {
+            this._scrollToBottom();
+        }
     }
-    renderHeader() {
+    _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() {
         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"
+          ?hidden=${!this._slots.hasAssignedElements('prefix')}
+        ></slot>
+        <slot name="title" part="title"
+          >${this._state.options?.headerText}</slot
+        >
+        <slot name="actions" part="actions"></slot>
+      </div>
+    `;
+    }
+    _renderMessages() {
+        const ctx = { defaults: this._defaults, instance: this };
+        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._getRenderer('typingIndicator')(ctx)
+            : 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 `<igc-icon name="auto_suggest"></igc-icon>`;
+    }
+    _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>`;
-    }
-    updateContextValue() {
-        this._context.setValue(this._chatState, true);
+        const suggestions = this._state.options?.suggestions ?? [];
+        const ctx = {
+            defaults: this._defaults,
+            instance: this,
+        };
+        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)}
+                  >
+                    <span slot="start">
+                      ${this._getRenderer('suggestionPrefix')(ctx)}
+                    </span>
+                    <span slot="title">${suggestion}</span>
+                  </igc-list-item>
+                </slot>
+              `)}
+          </slot>
+          <slot name="suggestions-actions" part="suggestions-actions"></slot>
+        </igc-list>
+      </div>
+    `;
+    }
+    _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 +260,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,17 +284,13 @@ 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>
     `;
     }
 }
-IgcChatComponent.tagName = 'igc-chat';
-IgcChatComponent.styles = [styles, shared];
-export default IgcChatComponent;
 __decorate([
     property({ attribute: false })
 ], IgcChatComponent.prototype, "messages", null);
@@ -242,9 +303,4 @@ __decorate([
 __decorate([
     property({ attribute: false })
 ], IgcChatComponent.prototype, "resourceStrings", void 0);
-__decorate([
-    watch('messages'),
-    watch('draftMessage'),
-    watch('options')
-], IgcChatComponent.prototype, "contextChanged", null);
 //# sourceMappingURL=chat.js.map

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 { 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, last } from '../common/util.js';\nimport IgcIconComponent from '../icon/icon.js';\nimport IgcListComponent from '../list/list.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  ChatRendererContext,\n  ChatTemplateRenderer,\n  IgcChatOptions,\n  IgcMessage,\n  IgcMessageAttachment,\n} from './types.js';\n\ntype DefaultChatRenderers = {\n  typingIndicator: ChatTemplateRenderer<ChatRendererContext>;\n  suggestionPrefix: ChatTemplateRenderer<ChatRendererContext>;\n};\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    );\n  }\n\n  private readonly _state = new ChatState(\n    this,\n    this._updateContext,\n    this._updateUserInputContext\n  );\n\n  private readonly _defaults = Object.freeze<DefaultChatRenderers>({\n    typingIndicator: () => this._renderLoadingTemplate(),\n    suggestionPrefix: () => this._renderSuggestionPrefix(),\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  private _getRenderer<U extends keyof DefaultChatRenderers>(\n    name: U\n  ): DefaultChatRenderers[U] {\n    return this._state.options?.renderers\n      ? (this._state.options.renderers[name] ?? this._defaults[name])\n      : this._defaults[name];\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  // REVIEW\n  public addMessage(message: Partial<IgcMessage>): IgcMessage {\n    this._state.addMessage(message);\n    return last(this.messages);\n  }\n\n  // REVIEW\n  public updateMessage(\n    message: IgcMessage,\n    data: Partial<IgcMessage>,\n    scrollIntoView = false\n  ) {\n    Object.assign(message, data);\n    const messageElement =\n      this.renderRoot.querySelector<IgcChatMessageComponent>(\n        `#message-${message.id}`\n      );\n\n    if (messageElement) {\n      messageElement.requestUpdate();\n      if (scrollIntoView) {\n        messageElement.updateComplete.then(() =>\n          messageElement.scrollIntoView({ block: 'end', inline: 'end' })\n        );\n      }\n    } else {\n      this.requestUpdate('messages');\n    }\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\n          name=\"prefix\"\n          part=\"prefix\"\n          ?hidden=${!this._slots.hasAssignedElements('prefix')}\n        ></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    const ctx = { defaults: this._defaults, instance: this };\n\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._getRenderer('typingIndicator')(ctx)\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`<igc-icon name=\"auto_suggest\"></igc-icon>`;\n  }\n\n  private _renderSuggestions() {\n    const hasContent = this._slots.hasAssignedElements('suggestions-header');\n    const suggestions = this._state.options?.suggestions ?? [];\n    const ctx = {\n      defaults: this._defaults,\n      instance: this,\n    };\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                    <span slot=\"start\">\n                      ${this._getRenderer('suggestionPrefix')(ctx)}\n                    </span>\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,26 @@
+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?: {
+        light?: string;
+        dark?: 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 { bundledThemes, createHighlighter } from 'shiki/bundle/web';
+const DEFAULT_LANGUAGES = ['javascript', 'typescript', 'html', 'css'];
+const DEFAULT_THEME = {
+    light: 'github-light',
+    dark: 'github-dark',
+};
+export async function createMarkdownRenderer(options) {
+    const sanitizer = options?.sanitizer ?? DOMPurify.sanitize;
+    const markdown = 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 ?? DEFAULT_THEME;
+        const langs = options?.languages ?? DEFAULT_LANGUAGES;
+        const highlighter = await createHighlighter({
+            langs,
+            themes: Object.keys(bundledThemes),
+        });
+        markdown.use(markedShiki({
+            highlight(code, lang, _) {
+                return highlighter.codeToHtml(code, { lang, themes });
+            },
+        }));
+    }
+    return async (message) => {
+        return message.text
+            ? unsafeHTML(sanitizer(await markdown.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,aAAa,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAGpE,MAAM,iBAAiB,GAAG,CAAC,YAAY,EAAE,YAAY,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;AACtE,MAAM,aAAa,GAAG;IACpB,KAAK,EAAE,cAAc;IACrB,IAAI,EAAE,aAAa;CACpB,CAAC;AA8BF,MAAM,CAAC,KAAK,UAAU,sBAAsB,CAC1C,OAAiC;IAEjC,MAAM,SAAS,GAAG,OAAO,EAAE,SAAS,IAAI,SAAS,CAAC,QAAQ,CAAC;IAE3D,MAAM,QAAQ,GAAG,IAAI,MAAM,CAAC;QAC1B,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,OAAO,EAAE,KAAK,IAAI,aAAa,CAAC;QAC/C,MAAM,KAAK,GAAG,OAAO,EAAE,SAAS,IAAI,iBAAiB,CAAC;QAEtD,MAAM,WAAW,GAAG,MAAM,iBAAiB,CAAC;YAC1C,KAAK;YACL,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC;SACnC,CAAC,CAAC;QAEH,QAAQ,CAAC,GAAG,CACV,WAAW,CAAC;YACV,SAAS,CAAC,IAAI,EAAE,IAAI,EAAE,CAAC;gBACrB,OAAO,WAAW,CAAC,UAAU,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;YACxD,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,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;YAC3D,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 { bundledThemes, createHighlighter } from 'shiki/bundle/web';\nimport type { IgcMessage } from '../types.js';\n\nconst DEFAULT_LANGUAGES = ['javascript', 'typescript', 'html', 'css'];\nconst DEFAULT_THEME = {\n  light: 'github-light',\n  dark: 'github-dark',\n};\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?: {\n    light?: string;\n    dark?: string;\n  };\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 markdown = 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 ?? DEFAULT_THEME;\n    const langs = options?.languages ?? DEFAULT_LANGUAGES;\n\n    const highlighter = await createHighlighter({\n      langs,\n      themes: Object.keys(bundledThemes),\n    });\n\n    markdown.use(\n      markedShiki({\n        highlight(code, lang, _) {\n          return highlighter.codeToHtml(code, { lang, themes });\n        },\n      })\n    );\n  }\n\n  return async (message: IgcMessage): Promise<unknown> => {\n    return message.text\n      ? unsafeHTML(sanitizer(await markdown.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 type { IgcMessage } from './types.js';
 /**
  * A component that renders message attachments within a chat.
  *
@@ -22,13 +22,31 @@ 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();
+    private _getRenderer;
+    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(): import("lit-html").TemplateResult<1>;
 }
 declare global {