igniteui-webcomponents 6.3.0-beta.0 → 6.3.0

package/components/chat/chat.js

@@ -6,22 +6,21 @@ 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 { property, query } 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, 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 IgcToastComponent from '../toast/toast.js';
+import IgcTooltipComponent from '../tooltip/tooltip.js';
 import IgcChatInputComponent from './chat-input.js';
 import IgcChatMessageComponent from './chat-message.js';
 import { ChatState } from './chat-state.js';
@@ -29,9 +28,11 @@ 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', 'suggestion', 'empty-state');
-class IgcChatComponent extends EventEmitterMixin(LitElement) {
+export default class IgcChatComponent extends EventEmitterMixin(LitElement) {
+    static { this.tagName = 'igc-chat'; }
+    static { this.styles = [styles, shared]; }
     static register() {
-        registerComponent(IgcChatComponent, IgcChatInputComponent, IgcChatMessageComponent, IgcButtonComponent, IgcIconComponent, IgcListComponent, IgcListItemComponent, IgcListHeaderComponent);
+        registerComponent(IgcChatComponent, IgcChatInputComponent, IgcChatMessageComponent, IgcButtonComponent, IgcIconComponent, IgcListComponent, IgcTooltipComponent, IgcToastComponent);
     }
     _updateContext() {
         this._context.setValue(this._state, true);
@@ -67,6 +68,10 @@ class IgcChatComponent extends EventEmitterMixin(LitElement) {
     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,
         });
@@ -81,8 +86,14 @@ class IgcChatComponent extends EventEmitterMixin(LitElement) {
         this.resourceStrings = IgcChatResourceStringEN;
         addThemingController(this, all);
     }
-    contextChanged() {
-        this._context.setValue(this._state, true);
+    _getRenderer(name) {
+        return this._state.options?.renderers
+            ? (this._state.options.renderers[name] ?? this._defaults[name])
+            : this._defaults[name];
+    }
+    _handleSuggestionClick(text) {
+        this._state.addMessageWithEvent({ text });
+        this._input?.focusInput();
     }
     scrollToMessage(messageId) {
         if (!isEmpty(this.messages)) {
@@ -90,21 +101,24 @@ class IgcChatComponent extends EventEmitterMixin(LitElement) {
             message?.scrollIntoView({ block: 'end', inline: 'end' });
         }
     }
-    updateContextValue() {
-        this._context.setValue(this._state, true);
-    }
     updated(properties) {
-        if (properties.has('messages') && !this._state.disableAutoScroll) {
+        if ((properties.has('messages') ||
+            this._typingIndicator ||
+            this._suggestionsContainer) &&
+            !this._state.disableAutoScroll) {
             this._scrollToBottom();
         }
     }
     _scrollToBottom() {
-        if (!isEmpty(this.messages)) {
-            const lastMessage = this.renderRoot
-                .querySelectorAll(IgcChatMessageComponent.tagName)
-                .item(this.messages.length - 1);
-            requestAnimationFrame(() => lastMessage.scrollIntoView({ block: 'end', inline: 'end' }));
-        }
+        const current = this._scrollContainer.scrollTop;
+        requestAnimationFrame(() => {
+            const scrollHeight = this._scrollContainer.scrollHeight;
+            if (current < scrollHeight) {
+                this._scrollContainer.scrollBy({
+                    top: Math.abs(scrollHeight - current),
+                });
+            }
+        });
     }
     _renderHeader() {
         const hasContent = this._slots.hasAssignedElements('prefix') ||
@@ -113,15 +127,17 @@ class IgcChatComponent extends EventEmitterMixin(LitElement) {
             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>
+        <slot
+          name="prefix"
+          ?hidden=${!this._slots.hasAssignedElements('prefix')}
+        ></slot>
+        <slot name="title">${this._state.options?.headerText}</slot>
+        <slot name="actions"></slot>
       </div>
     `;
     }
     _renderMessages() {
+        const ctx = { instance: this };
         return html `
       <div part="message-list" tabindex="0">
         ${repeat(this._state.messages, (message) => message.id, (message) => {
@@ -130,44 +146,49 @@ class IgcChatComponent extends EventEmitterMixin(LitElement) {
                 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"
+                exportparts="
+                  message-container,
+                  message-list,
+                  message-header,
+                  plain-text: message-content,
+                  message-attachments: message-attachments-container,
+                  attachment: message-attachment,
+                  message-actions: message-actions-container,
+                  sent: message-sent,
+                  attachment-header,
+                  attachment-content,
+                  attachment-icon,
+                  file-name,
+                "
               >
               </igc-chat-message>
             `;
         })}
         ${this._state.options?.isTyping
-            ? (this._state.options?.renderers?.typingIndicator?.({
-                param: undefined,
-                defaults: {
-                    typingIndicator: () => this._renderLoadingTemplate(),
-                },
-                options: this._state.options,
-            }) ?? this._renderLoadingTemplate())
+            ? html `
+              <div part="typing-indicator">
+                ${this._getRenderer('typingIndicator')(ctx)}
+              </div>
+            `
             : 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>
+      <div part="typing-dot"></div>
+      <div part="typing-dot"></div>
+      <div part="typing-dot"></div>
+      <div part="typing-dot"></div>
     `;
     }
     _renderSuggestionPrefix() {
-        return html `
-      <span slot="start">
-        <igc-icon name="auto_suggest"></igc-icon>
-      </span>
-    `;
+        return html `<igc-icon name="auto_suggest"></igc-icon>`;
     }
     _renderSuggestions() {
         const hasContent = this._slots.hasAssignedElements('suggestions-header');
         const suggestions = this._state.options?.suggestions ?? [];
+        const ctx = { instance: this };
         return html `
       <div part="suggestions-container">
         <igc-list>
@@ -177,19 +198,24 @@ class IgcChatComponent extends EventEmitterMixin(LitElement) {
             </span>
             <slot name="suggestions-header"></slot>
           </igc-list-header>
-          <slot name="suggestions" part="suggestions">
+          <slot name="suggestions">
             ${suggestions.map((suggestion) => html `
-                <slot name="suggestion" part="suggestion">
+                <slot name="suggestion">
                   <igc-list-item
-                    @click=${() => this._state?.handleSuggestionClick(suggestion)}
+                    part="suggestion"
+                    @click=${() => this._handleSuggestionClick(suggestion)}
                   >
-                    ${this._renderSuggestionPrefix()}
-                    <span slot="title">${suggestion}</span>
+                    <span slot="start" part="suggestion-prefix">
+                      ${this._getRenderer('suggestionPrefix')(ctx)}
+                    </span>
+                    <span slot="title" part="suggestion-title"
+                      >${suggestion}</span
+                    >
                   </igc-list-item>
                 </slot>
               `)}
           </slot>
-          <slot name="suggestions-actions" part="suggestions-actions"></slot>
+          <slot name="suggestions-actions"></slot>
         </igc-list>
       </div>
     `;
@@ -207,42 +233,10 @@ class IgcChatComponent extends EventEmitterMixin(LitElement) {
             ? nothing
             : this._renderSuggestions();
         return html `
-      <div
-        part="chat-container"
-        exportparts="
-          chat-container,
-          header,
-          prefix,
-          title,
-          actions,
-          chat-wrapper,
-          chat-messages,
-          empty-state,
-          suggestions-container,
-          suggestions-header,
-          suggestions,
-          suggestions-actions,
-          suggestion,
-          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,
-          attachment-actions
-        "
-      >
+      <div part="chat-container">
         ${this._renderHeader()}
 
-        <div part="chat-wrapper">
+        <div part="message-area-container">
           ${cache(hasMessages || this._state.options?.isTyping
             ? this._renderMessages()
             : this._renderEmptyState())}
@@ -253,14 +247,19 @@ class IgcChatComponent extends EventEmitterMixin(LitElement) {
 
         <igc-chat-input
           exportparts="
-              input-container,
-              input-wrapper,
+              input-container: input-area-container,
+              input-wrapper: input-container,
               attachments: input-attachments-container,
-              attachments-wrapper: input-attachment,
+              attachment-wrapper: input-attachment-container,
               attachment-name: input-attachment-name,
+              attachment-icon: input-attachment-icon,
               text-input,
-              buttons-container: input-buttons-container,
-              upload-button,
+              actions-container: input-actions-container,
+              input-actions-start,
+              input-actions-end,
+              file-upload-container,
+              file-upload,
+              send-button-container,
               send-button"
         >
         </igc-chat-input>
@@ -271,9 +270,18 @@ class IgcChatComponent extends EventEmitterMixin(LitElement) {
     `;
     }
 }
-IgcChatComponent.tagName = 'igc-chat';
-IgcChatComponent.styles = [styles, shared];
-export default IgcChatComponent;
+__decorate([
+    query(IgcChatInputComponent.tagName)
+], IgcChatComponent.prototype, "_input", void 0);
+__decorate([
+    query('[part="typing-indicator"]')
+], IgcChatComponent.prototype, "_typingIndicator", void 0);
+__decorate([
+    query('[part="suggestions-container"]')
+], IgcChatComponent.prototype, "_suggestionsContainer", void 0);
+__decorate([
+    query('[part="message-area-container"]', true)
+], IgcChatComponent.prototype, "_scrollContainer", void 0);
 __decorate([
     property({ attribute: false })
 ], IgcChatComponent.prototype, "messages", null);
@@ -286,9 +294,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, 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"]}
+{"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, query } 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 } from '../common/util.js';\nimport IgcIconComponent from '../icon/icon.js';\nimport IgcListComponent from '../list/list.js';\nimport IgcToastComponent from '../toast/toast.js';\nimport IgcTooltipComponent from '../tooltip/tooltip.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  ChatRenderContext,\n  ChatTemplateRenderer,\n  IgcChatMessage,\n  IgcChatMessageAttachment,\n  IgcChatMessageReaction,\n  IgcChatOptions,\n} from './types.js';\n\ntype DefaultChatRenderers = {\n  typingIndicator: ChatTemplateRenderer<ChatRenderContext>;\n  suggestionPrefix: ChatTemplateRenderer<ChatRenderContext>;\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<IgcChatMessage>;\n\n  /**\n   * Dispatched when a message is reacted to.\n   */\n  igcMessageReact: CustomEvent<IgcChatMessageReaction>;\n\n  /**\n   * Dispatched when a chat message attachment is clicked.\n   */\n  igcAttachmentClick: CustomEvent<IgcChatMessageAttachment>;\n\n  /**\n   * Dispatched when attachment(s) are added either through drag & drop or through\n   * the default file input.\n   */\n  igcAttachmentAdded: CustomEvent<IgcChatMessageAttachment[]>;\n\n  /**\n   * Dispatched when an attachment is removed by the user.\n   */\n  igcAttachmentRemoved: CustomEvent<IgcChatMessageAttachment>;\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 igcAttachmentAdded - Dispatched when attachment(s) are added either through drag & drop or through the default file input.\n * @fires igcAttachmentRemoved - Dispatched when an attachment is removed by the user.\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 chat-container - Styles the main chat container.\n * @csspart header - Styles the chat header container.\n * @csspart prefix - Styles the element before the chat title (e.g., avatar).\n * @csspart title - Styles the chat header title.\n *\n * @csspart message-area-container - Styles the container holding the messages and (optional) suggestions.\n * @csspart message-list - Styles the message list container.\n * @csspart message-item - Styles each message wrapper.\n * @csspart typing-indicator - Styles the typing indicator container.\n * @csspart typing-dot - Styles individual typing indicator dots.\n *\n * @csspart suggestions-container - Styles the container holding all suggestions.\n * @csspart suggestions-header - Styles the suggestions header.\n * @csspart suggestion - Styles each suggestion item.\n * @csspart suggestion-prefix - Styles the icon or prefix in a suggestion.\n * @csspart suggestion-title - Styles the text/title of a suggestion.\n *\n * @csspart empty-state - Styles the empty state container when there are no messages.\n *\n * @csspart input-area-container - Styles the wrapper around the chat input area.\n * @csspart input-container - Styles the main input container.\n * @csspart input-attachments-container - Styles the container for attachments in the input.\n * @csspart input-attachment-container - Styles a single attachment in the input area.\n * @csspart input-attachment-name - Styles the file name of an attachment.\n * @csspart input-attachment-icon - Styles the icon of an attachment.\n * @csspart text-input - Styles the text input field for typing messages.\n * @csspart input-actions-container - Styles the container for input actions.\n * @csspart input-actions-start - Styles the group of actions at the start of the input after the default file upload.\n * @csspart input-actions-end - Styles the group of actions at the end of the input.\n * @csspart file-upload-container - Styles the container for the file upload input.\n * @csspart file-upload - Styles the file upload input itself.\n * @csspart send-button-container - Styles the container around the send button.\n * @csspart send-button - Styles the send button.\n *\n * @csspart message-container - Styles the container of a single message.\n * @csspart message-list (forwarded) - Styles the internal list of messages.\n * @csspart message-header - Styles the header of a message (e.g., sender, timestamp).\n * @csspart message-content - Styles the text content of a message.\n * @csspart message-attachments-container - Styles the container for message attachments.\n * @csspart message-attachment - Styles a single message attachment.\n * @csspart message-actions-container - Styles the container holding message actions.\n * @csspart message-sent - Styles messages marked as sent by the current user.\n * @csspart attachment-header - Styles the header of an attachment block.\n * @csspart attachment-content - Styles the content of an attachment block.\n * @csspart attachment-icon - Styles the icon of an attachment.\n * @csspart file-name - Styles the file name shown in an attachment.\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      IgcTooltipComponent,\n      IgcToastComponent\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  @query(IgcChatInputComponent.tagName)\n  private readonly _input?: IgcChatInputComponent;\n\n  @query('[part=\"typing-indicator\"]')\n  private readonly _typingIndicator?: HTMLElement;\n\n  @query('[part=\"suggestions-container\"]')\n  private readonly _suggestionsContainer?: HTMLElement;\n\n  @query('[part=\"message-area-container\"]', true)\n  private readonly _scrollContainer!: HTMLElement;\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: IgcChatMessage[]) {\n    this._state.messages = value;\n  }\n\n  public get messages(): IgcChatMessage[] {\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?: IgcChatMessageAttachment[];\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?: IgcChatMessageAttachment[];\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  private _handleSuggestionClick(text: string): void {\n    this._state.addMessageWithEvent({ text });\n    this._input?.focusInput();\n  }\n\n  /**\n   * Scrolls the view to a specific message by id.\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  protected override updated(properties: PropertyValues<this>): void {\n    if (\n      (properties.has('messages') ||\n        this._typingIndicator ||\n        this._suggestionsContainer) &&\n      !this._state.disableAutoScroll\n    ) {\n      this._scrollToBottom();\n    }\n  }\n\n  private _scrollToBottom(): void {\n    const current = this._scrollContainer.scrollTop;\n\n    requestAnimationFrame(() => {\n      const scrollHeight = this._scrollContainer.scrollHeight;\n      if (current < scrollHeight) {\n        this._scrollContainer.scrollBy({\n          top: Math.abs(scrollHeight - current),\n        });\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          ?hidden=${!this._slots.hasAssignedElements('prefix')}\n        ></slot>\n        <slot name=\"title\">${this._state.options?.headerText}</slot>\n        <slot name=\"actions\"></slot>\n      </div>\n    `;\n  }\n\n  private _renderMessages() {\n    const ctx = { 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=\"\n                  message-container,\n                  message-list,\n                  message-header,\n                  plain-text: message-content,\n                  message-attachments: message-attachments-container,\n                  attachment: message-attachment,\n                  message-actions: message-actions-container,\n                  sent: message-sent,\n                  attachment-header,\n                  attachment-content,\n                  attachment-icon,\n                  file-name,\n                \"\n              >\n              </igc-chat-message>\n            `;\n          }\n        )}\n        ${this._state.options?.isTyping\n          ? html`\n              <div part=\"typing-indicator\">\n                ${this._getRenderer('typingIndicator')(ctx)}\n              </div>\n            `\n          : nothing}\n      </div>\n    `;\n  }\n\n  private _renderLoadingTemplate() {\n    return html`\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    `;\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 = { instance: this };\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\">\n            ${suggestions.map(\n              (suggestion) => html`\n                <slot name=\"suggestion\">\n                  <igc-list-item\n                    part=\"suggestion\"\n                    @click=${() => this._handleSuggestionClick(suggestion)}\n                  >\n                    <span slot=\"start\" part=\"suggestion-prefix\">\n                      ${this._getRenderer('suggestionPrefix')(ctx)}\n                    </span>\n                    <span slot=\"title\" part=\"suggestion-title\"\n                      >${suggestion}</span\n                    >\n                  </igc-list-item>\n                </slot>\n              `\n            )}\n          </slot>\n          <slot name=\"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 part=\"chat-container\">\n        ${this._renderHeader()}\n\n        <div part=\"message-area-container\">\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: input-area-container,\n              input-wrapper: input-container,\n              attachments: input-attachments-container,\n              attachment-wrapper: input-attachment-container,\n              attachment-name: input-attachment-name,\n              attachment-icon: input-attachment-icon,\n              text-input,\n              actions-container: input-actions-container,\n              input-actions-start,\n              input-actions-end,\n              file-upload-container,\n              file-upload,\n              send-button-container,\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

@@ -1,4 +1,4 @@
-import type { IgcMessage } from '../types.js';
+import type { IgcChatMessage } from '../types.js';
 /**
  * Options to configure the MarkdownMessageRenderer.
  */
@@ -14,10 +14,13 @@ export interface MarkdownRendererOptions {
     /**
      * The theme used by the syntax highlighter (e.g., 'github-light').
      */
-    theme?: string;
+    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>>;
+export declare function createMarkdownRenderer(options?: MarkdownRendererOptions): Promise<(message: IgcChatMessage) => Promise<unknown>>;

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

@@ -2,10 +2,15 @@ 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';
+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 markedInstance = new Marked({
+    const markdown = new Marked({
         breaks: true,
         gfm: true,
         extensions: [
@@ -18,26 +23,26 @@ export async function createMarkdownRenderer(options) {
         ],
     });
     if (!options?.noHighlighter) {
-        const themes = [options?.theme ?? 'github-light'];
-        const langs = options?.languages
-            ? options.languages
-            : ['javascript', 'typescript', 'html', 'css'];
-        const shikiInstance = await getSingletonHighlighter({
-            themes,
+        const themes = options?.theme ?? DEFAULT_THEME;
+        const langs = options?.languages ?? DEFAULT_LANGUAGES;
+        const highlighter = await createHighlighter({
             langs,
+            themes: Object.keys(bundledThemes),
         });
-        markedInstance.use(markedShiki({
+        markdown.use(markedShiki({
             highlight(code, lang, _) {
-                return shikiInstance.codeToHtml(code, {
-                    lang,
-                    themes: { light: themes[0] },
-                });
+                try {
+                    return highlighter.codeToHtml(code, { lang, themes });
+                }
+                catch {
+                    return `<pre><code>${sanitizer(code)}</code></pre>`;
+                }
             },
         }));
     }
     return async (message) => {
         return message.text
-            ? unsafeHTML(sanitizer(await markedInstance.parse(message.text)))
+            ? unsafeHTML(sanitizer(await markdown.parse(message.text)))
             : '';
     };
 }

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

@@ -1 +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"]}
+{"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,IAAI,CAAC;oBACH,OAAO,WAAW,CAAC,UAAU,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;gBACxD,CAAC;gBAAC,MAAM,CAAC;oBACP,OAAO,cAAc,SAAS,CAAC,IAAI,CAAC,eAAe,CAAC;gBACtD,CAAC;YACH,CAAC;SACF,CAAC,CACH,CAAC;IACJ,CAAC;IAED,OAAO,KAAK,EAAE,OAAuB,EAAoB,EAAE;QACzD,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 { IgcChatMessage } 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          try {\n            return highlighter.codeToHtml(code, { lang, themes });\n          } catch {\n            return `<pre><code>${sanitizer(code)}</code></pre>`;\n          }\n        },\n      })\n    );\n  }\n\n  return async (message: IgcChatMessage): 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, nothing } from 'lit';
-import type { IgcMessage } from './types.js';
+import { LitElement } from 'lit';
+import type { IgcChatMessage } from './types.js';
 /**
  * A component that renders message attachments within a chat.
  *
@@ -28,9 +28,9 @@ export default class IgcMessageAttachmentsComponent extends LitElement {
     /**
      * The array of attachments to render.
      */
-    message?: IgcMessage;
+    message?: IgcChatMessage;
     constructor();
-    private _getRenderers;
+    private _getRenderer;
     private _handleHeaderClick;
     /**
      * Default attachment header template used when no custom template is provided.
@@ -47,7 +47,7 @@ export default class IgcMessageAttachmentsComponent extends LitElement {
      */
     private _renderContent;
     private _renderAttachment;
-    protected render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {