igniteui-webcomponents 6.2.0 → 6.3.0-alpha.1

package/components/chat/chat.d.ts

@@ -0,0 +1,177 @@
+import { LitElement } from 'lit';
+import type { Constructor } from '../common/mixins/constructor.js';
+import type { IgcChatOptions, IgcMessage, IgcMessageAttachment } from './types.js';
+/**
+ * Defines the custom events dispatched by the `<igc-chat>` component.
+ */
+export interface IgcChatComponentEventMap {
+    /**
+     * Dispatched when a new chat message is created (sent).
+     *
+     * @event igcMessageCreated
+     * @type {CustomEvent<IgcMessage>}
+     * @detail The message that was created.
+     */
+    igcMessageCreated: CustomEvent<IgcMessage>;
+    /**
+     * Dispatched when a new chat message is created (sent).
+     *
+     * @event igcMessageCreated
+     * @type {CustomEvent<IgcMessage>}
+     * @detail The message that was reacted to and the reaction.
+     */
+    igcMessageReact: CustomEvent<{
+        message: IgcMessage;
+        reaction: string;
+    }>;
+    /**
+     * Dispatched when a chat message attachment is clicked.
+     *
+     * @event igcAttachmentClick
+     * @type {CustomEvent<IgcMessageAttachment>}
+     * @detail The attachment that was clicked.
+     */
+    igcAttachmentClick: CustomEvent<IgcMessageAttachment>;
+    /**
+     * Dispatched when an attachment is changed (e.g., updated or removed).
+     *
+     * @event igcAttachmentChange
+     * @type {CustomEvent<IgcMessageAttachment>}
+     * @detail The attachment that was changed.
+     */
+    igcAttachmentChange: CustomEvent<IgcMessageAttachment>;
+    /**
+     * Dispatched during an attachment drag operation.
+     *
+     * @event igcAttachmentDrag
+     * @type {CustomEvent<any>}
+     * @detail The drag event payload.
+     */
+    igcAttachmentDrag: CustomEvent<any>;
+    /**
+     * Dispatched when an attachment is dropped (e.g., in a drag-and-drop operation).
+     *
+     * @event igcAttachmentDrop
+     * @type {CustomEvent<any>}
+     * @detail The drop event payload.
+     */
+    igcAttachmentDrop: CustomEvent<any>;
+    /**
+     * Dispatched when the typing status changes (e.g., user starts or stops typing).
+     *
+     * @event igcTypingChange
+     * @type {CustomEvent<boolean>}
+     * @detail `true` if typing started, `false` if stopped.
+     */
+    igcTypingChange: CustomEvent<boolean>;
+    /**
+     * Dispatched when the chat input field gains focus.
+     *
+     * @event igcInputFocus
+     * @type {CustomEvent<any>}
+     * @detail Focus event payload.
+     */
+    igcInputFocus: CustomEvent<any>;
+    /**
+     * Dispatched when the chat input field loses focus.
+     *
+     * @event igcInputBlur
+     * @type {CustomEvent<any>}
+     * @detail Blur event payload.
+     */
+    igcInputBlur: CustomEvent<any>;
+    /**
+     * Dispatched when the content of the chat input changes.
+     *
+     * @event igcInputChange
+     * @type {CustomEvent<string>}
+     * @detail The current text value of the input.
+     */
+    igcInputChange: CustomEvent<string>;
+}
+declare const IgcChatComponent_base: Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcChatComponentEventMap>> & Constructor<LitElement>;
+/**
+ * A chat UI component for displaying messages, attachments, and input interaction.
+ *
+ * This component is part of the Ignite UI Web Components suite.
+ *
+ * @element igc-chat
+ * @slot prefix - Slot for injecting content (e.g., avatar or icon) before the chat title.
+ * @slot title - Slot for overriding the chat title content.
+ * @slot actions - Slot for injecting header actions (e.g., buttons, menus).
+ * @slot suggestions-header - Slot for rendering a custom header for the suggestions list.
+ * @slot suggestions - Slot for rendering a custom list of quick reply suggestions.
+ * @slot suggestions-actions - Slot for rendering additional actions.
+ * @slot suggestion - Slot for rendering a single suggestion item.
+ * @slot empty-state - Slot shown when there are no messages.
+ *
+ * @csspart header - Styles the header container.
+ * @csspart prefix - Styles the element before the title (e.g., avatar).
+ * @csspart title - Styles the chat header title.
+ * @csspart suggestions - Styles the suggestion container.
+ * @csspart suggestion - Styles each suggestion item.
+ */
+export default class IgcChatComponent extends IgcChatComponent_base {
+    static readonly tagName = "igc-chat";
+    static styles: import("lit").CSSResult[];
+    /**
+     * Registers the chat component and its child components.
+     * Should be called once before using the component.
+     *
+     * @example
+     * IgcChatComponent.register();
+     */
+    static register(): void;
+    private readonly _chatState;
+    private readonly _slots;
+    private _context;
+    constructor();
+    /**
+     * The list of chat messages currently displayed.
+     * Use this property to set or update the message history.
+     */
+    set messages(value: IgcMessage[]);
+    get messages(): IgcMessage[];
+    /**
+     * The chat message currently being composed but not yet sent.
+     * Includes the draft text and any attachments.
+     */
+    set draftMessage(value: {
+        text: string;
+        attachments?: IgcMessageAttachment[];
+    });
+    get draftMessage(): {
+        text: string;
+        attachments?: IgcMessageAttachment[];
+    };
+    /**
+     * Controls the chat behavior and appearance through a configuration object.
+     * Use this to toggle UI options, provide suggestions, templates, etc.
+     */
+    set options(value: IgcChatOptions);
+    get options(): IgcChatOptions | undefined;
+    /** The resource strings. */
+    resourceStrings: import("../common/i18n/chat.resources.js").IgcChatResourceStrings;
+    /**
+     * Scrolls the view to a specific message by id.
+     * @param messageId - The id of the message to scroll to
+     */
+    scrollToMessage(messageId: string): void;
+    protected contextChanged(): void;
+    private renderHeader;
+    private renderSuggestionPrefix;
+    private renderSuggestions;
+    /**
+     * Updates the context value to notify all consumers that the chat state has changed.
+     * This ensures that components consuming the chat context will re-render.
+     */
+    updateContextValue(): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        /** The `<igc-chat>` custom element. */
+        'igc-chat': IgcChatComponent;
+    }
+}
+export {};

package/components/chat/chat.js

@@ -0,0 +1,250 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { ContextProvider } from '@lit/context';
+import { html, LitElement, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { addThemingController } from '../../theming/theming-controller.js';
+import IgcButtonComponent from '../button/button.js';
+import { chatContext } 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 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 { 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) {
+    static register() {
+        registerComponent(IgcChatComponent, IgcChatInputComponent, IgcChatMessageListComponent, IgcButtonComponent, IgcIconComponent, IgcListComponent, IgcListItemComponent, IgcListHeaderComponent);
+    }
+    constructor() {
+        super();
+        this._chatState = createChatState(this);
+        this._slots = addSlotController(this, {
+            slots: Slots,
+        });
+        this._context = new ContextProvider(this, {
+            context: chatContext,
+            initialValue: this._chatState,
+        });
+        this.resourceStrings = IgcChatResourceStringEN;
+        addThemingController(this, all);
+    }
+    set messages(value) {
+        this._chatState.messages = value;
+    }
+    get messages() {
+        return this._chatState.messages;
+    }
+    set draftMessage(value) {
+        if (this._chatState && value) {
+            this._chatState.inputValue = value.text;
+            this._chatState.inputAttachments = value.attachments || [];
+            this.requestUpdate();
+        }
+    }
+    get draftMessage() {
+        return {
+            text: this._chatState?.inputValue,
+            attachments: this._chatState?.inputAttachments,
+        };
+    }
+    set options(value) {
+        this._chatState.options = value;
+    }
+    get options() {
+        return this._chatState.options;
+    }
+    scrollToMessage(messageId) {
+        const messageListComponent = this.shadowRoot?.querySelector('igc-chat-message-list');
+        if (!messageListComponent) {
+            return;
+        }
+        const messageElement = messageListComponent.shadowRoot?.querySelector(`#message-${messageId}`);
+        if (!messageElement) {
+            return;
+        }
+        messageElement.scrollIntoView({
+            behavior: 'smooth',
+            block: 'center',
+            inline: 'nearest',
+        });
+    }
+    contextChanged() {
+        this._context.setValue(this._chatState, true);
+    }
+    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() {
+        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);
+    }
+    render() {
+        const hasSuggestions = this._chatState.options?.suggestions &&
+            this._chatState.options.suggestions.length > 0;
+        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
+        "
+      >
+        ${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()
+            : nothing}
+        </div>
+        <igc-chat-input
+          exportparts="
+              input-container,
+              input-wrapper,
+              attachments: input-attachments-container,
+              attachments-wrapper: input-attachment,
+              attachment-name: input-attachment-name,
+              text-input,
+              buttons-container: input-buttons-container,
+              upload-button,
+              send-button"
+        >
+        </igc-chat-input>
+        ${hasSuggestions &&
+            this._chatState.suggestionsPosition === 'below-input'
+            ? this.renderSuggestions()
+            : nothing}
+      </div>
+    `;
+    }
+}
+IgcChatComponent.tagName = 'igc-chat';
+IgcChatComponent.styles = [styles, shared];
+export default IgcChatComponent;
+__decorate([
+    property({ attribute: false })
+], IgcChatComponent.prototype, "messages", null);
+__decorate([
+    property({ attribute: false })
+], IgcChatComponent.prototype, "draftMessage", null);
+__decorate([
+    property({ attribute: false })
+], IgcChatComponent.prototype, "options", null);
+__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

@@ -0,0 +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"]}

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

@@ -0,0 +1,72 @@
+import { type TemplateResult } from 'lit';
+import type { ChatMessageRenderer, IgcMessage } from './types.js';
+/**
+ * Options to configure the MarkdownMessageRenderer.
+ */
+export interface MarkdownRendererOptions {
+    /**
+     * If true, disables syntax highlighting entirely.
+     */
+    noHighlighter?: boolean;
+    /**
+     * A custom syntax highlighter compatible with Shiki's `codeToHtml()` API.
+     */
+    highlighter?: any;
+    /**
+     * List of programming languages to support in syntax highlighting.
+     */
+    languages?: string[];
+    /**
+     * The theme used by the syntax highlighter (e.g., 'github-light').
+     */
+    theme?: string;
+    /**
+     * A custom HTML sanitization function. Defaults to DOMPurify.sanitize.
+     */
+    sanitizer?: (html: string) => string;
+}
+/**
+ * A renderer that converts markdown chat messages to HTML using `marked`,
+ * with optional syntax highlighting powered by `shiki` or a custom highlighter.
+ *
+ * @implements {ChatMessageRenderer}
+ */
+export declare class MarkdownMessageRenderer implements ChatMessageRenderer {
+    private opts;
+    private highlighter?;
+    private theme;
+    private langs;
+    private _marked;
+    private initialized;
+    private _sanitizer;
+    /**
+     * Creates a new MarkdownMessageRenderer.
+     *
+     * @param {MarkdownRendererOptions} [opts={}] - Configuration options.
+     */
+    constructor(opts?: MarkdownRendererOptions);
+    /**
+     * Initializes the `marked` instance with custom renderer options.
+     * Currently modifies link rendering to open in a new tab with safe attributes.
+     *
+     * @private
+     */
+    private initMarked;
+    private initSanitizer;
+    /**
+     * Performs async initialization for syntax highlighting.
+     * Loads Shiki and configures the `marked` instance with `marked-shiki`.
+     * This is called lazily during rendering unless pre-called explicitly.
+     *
+     * @async
+     * @returns {Promise<void>} A promise that resolves once initialization is complete.
+     */
+    init(): Promise<void>;
+    /**
+     * Renders the given chat message as markdown, with optional syntax highlighting.
+     *
+     * @param {IgcMessage} message - The message to render.
+     * @returns {Promise<TemplateResult>} A lit template containing the rendered markdown content.
+     */
+    render(message: IgcMessage): Promise<TemplateResult>;
+}

package/components/chat/markdown-renderer.js

@@ -0,0 +1,71 @@
+import DOMPurify from 'dompurify';
+import { html } from 'lit';
+import { Marked, Renderer } from 'marked';
+export class MarkdownMessageRenderer {
+    constructor(opts = {}) {
+        this.opts = opts;
+        this.initialized = false;
+        this.theme = opts.theme ?? 'github-light';
+        this.langs = opts.languages ?? ['javascript', 'typescript', 'html', 'css'];
+        this.highlighter = opts.highlighter;
+        this._marked = new Marked();
+        this.initMarked();
+        this._sanitizer = this.initSanitizer();
+    }
+    initMarked() {
+        const renderer = new Renderer();
+        renderer.link = (href, title, text) => {
+            return `<a href="${href}" target="_blank" rel="noopener noreferrer" ${title ? `title="${title}"` : ''}>${text}</a>`;
+        };
+        this._marked.setOptions({
+            gfm: true,
+            breaks: true,
+            renderer,
+        });
+    }
+    initSanitizer() {
+        return this.opts?.sanitizer ?? DOMPurify.sanitize;
+    }
+    async init() {
+        if (this.highlighter || this.opts.noHighlighter) {
+            this.initialized = true;
+            return;
+        }
+        const shiki = await import('shiki');
+        this.highlighter = await shiki.getSingletonHighlighter({
+            themes: [this.theme],
+            langs: this.langs,
+        });
+        const markedShiki = await import('marked-shiki');
+        this._marked.use(markedShiki.default({
+            highlight: (code, lang) => {
+                try {
+                    const safeLang = lang && this.highlighter.getLoadedLanguages?.().includes(lang)
+                        ? lang
+                        : 'text';
+                    return (this.highlighter?.codeToHtml(code, {
+                        lang: safeLang,
+                        themes: { light: this.theme },
+                    }) ?? code);
+                }
+                catch (_err) {
+                    return `<pre><code>${DOMPurify.sanitize(code)}</code></pre>`;
+                }
+            },
+        }));
+        this.initialized = true;
+    }
+    async render(message) {
+        if (!this.initialized) {
+            await this.init();
+        }
+        if (!message.text)
+            return html ``;
+        const rendered = await this._marked?.parse(message.text);
+        const cleanHtml = this._sanitizer(rendered);
+        const template = document.createElement('template');
+        template.innerHTML = cleanHtml ?? message.text;
+        return html `${template.content}`;
+    }
+}
+//# sourceMappingURL=markdown-renderer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"markdown-renderer.js","sourceRoot":"","sources":["../../../src/components/chat/markdown-renderer.ts"],"names":[],"mappings":"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","sourcesContent":["import DOMPurify from 'dompurify';\nimport { html, type TemplateResult } from 'lit';\nimport { Marked, Renderer } from 'marked';\nimport type { ChatMessageRenderer, 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   * A custom syntax highlighter compatible with Shiki's `codeToHtml()` API.\n   */\n  highlighter?: any;\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\n/**\n * A renderer that converts markdown chat messages to HTML using `marked`,\n * with optional syntax highlighting powered by `shiki` or a custom highlighter.\n *\n * @implements {ChatMessageRenderer}\n */\nexport class MarkdownMessageRenderer implements ChatMessageRenderer {\n  private highlighter?: any;\n  private theme: string;\n  private langs: string[];\n  private _marked: Marked;\n  private initialized = false;\n  private _sanitizer: (html: string) => string;\n\n  /**\n   * Creates a new MarkdownMessageRenderer.\n   *\n   * @param {MarkdownRendererOptions} [opts={}] - Configuration options.\n   */\n  constructor(private opts: MarkdownRendererOptions = {}) {\n    this.theme = opts.theme ?? 'github-light';\n    this.langs = opts.languages ?? ['javascript', 'typescript', 'html', 'css'];\n    this.highlighter = opts.highlighter;\n\n    this._marked = new Marked();\n    this.initMarked();\n    this._sanitizer = this.initSanitizer();\n  }\n\n  /**\n   * Initializes the `marked` instance with custom renderer options.\n   * Currently modifies link rendering to open in a new tab with safe attributes.\n   *\n   * @private\n   */\n  private initMarked() {\n    const renderer = new Renderer();\n\n    // Customize link rendering\n    renderer.link = (href, title, text) => {\n      return `<a href=\"${href}\" target=\"_blank\" rel=\"noopener noreferrer\" ${title ? `title=\"${title}\"` : ''}>${text}</a>`;\n    };\n\n    this._marked.setOptions({\n      gfm: true,\n      breaks: true,\n      renderer,\n    });\n  }\n\n  private initSanitizer() {\n    return this.opts?.sanitizer ?? DOMPurify.sanitize;\n  }\n\n  /**\n   * Performs async initialization for syntax highlighting.\n   * Loads Shiki and configures the `marked` instance with `marked-shiki`.\n   * This is called lazily during rendering unless pre-called explicitly.\n   *\n   * @async\n   * @returns {Promise<void>} A promise that resolves once initialization is complete.\n   */\n  async init(): Promise<void> {\n    if (this.highlighter || this.opts.noHighlighter) {\n      this.initialized = true;\n      return;\n    }\n\n    const shiki = await import('shiki');\n    this.highlighter = await shiki.getSingletonHighlighter({\n      themes: [this.theme],\n      langs: this.langs,\n    });\n\n    const markedShiki = await import('marked-shiki');\n    this._marked.use(\n      markedShiki.default({\n        highlight: (code: any, lang: string) => {\n          try {\n            const safeLang =\n              lang && this.highlighter.getLoadedLanguages?.().includes(lang)\n                ? lang\n                : 'text';\n\n            return (\n              this.highlighter?.codeToHtml(code, {\n                lang: safeLang,\n                themes: { light: this.theme },\n              }) ?? code\n            );\n          } catch (_err) {\n            // if Shiki still throws for some reason, just return escaped code\n            return `<pre><code>${DOMPurify.sanitize(code)}</code></pre>`;\n          }\n        },\n      })\n    );\n\n    this.initialized = true;\n  }\n\n  /**\n   * Renders the given chat message as markdown, with optional syntax highlighting.\n   *\n   * @param {IgcMessage} message - The message to render.\n   * @returns {Promise<TemplateResult>} A lit template containing the rendered markdown content.\n   */\n  async render(message: IgcMessage): Promise<TemplateResult> {\n    if (!this.initialized) {\n      await this.init();\n    }\n\n    if (!message.text) return html``;\n\n    const rendered = await this._marked?.parse(message.text);\n    const cleanHtml = this._sanitizer(rendered);\n    const template = document.createElement('template');\n    template.innerHTML = cleanHtml ?? message.text;\n\n    return html`${template.content}`;\n  }\n}\n"]}

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

@@ -0,0 +1,38 @@
+import { LitElement } from 'lit';
+import { type IgcMessage } from './types.js';
+/**
+ * A component that renders message attachments within a chat.
+ *
+ * Displays attachments such as images or files, supporting custom templates
+ * and default rendering using expansion panels.
+ *
+ * @element igc-message-attachments
+ *
+ * @csspart attachments-container - Container wrapping all attachments.
+ * @csspart attachment - Wrapper for a single attachment.
+ * @csspart attachment-header - Wrapper for a single attachment header.
+ * @csspart attachments-content - Part representing the attachment preview.
+ * @csspart attachment-icon - Icon part representing the attachment type.
+ * @csspart file-name - Part representing the attachment's file name.
+ * @csspart actions - Container for header action buttons.
+ * @csspart image-attachment - Part for the image element inside an image attachment.
+ *
+ * @fires igcAttachmentClick - Fired when an attachment header is toggled (clicked).
+ */
+export default class IgcMessageAttachmentsComponent extends LitElement {
+    static readonly tagName = "igc-message-attachments";
+    static styles: import("lit").CSSResult[];
+    private _chatState?;
+    static register(): void;
+    /**
+     * The array of attachments to render.
+     */
+    message: IgcMessage | undefined;
+    constructor();
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-message-attachments': IgcMessageAttachmentsComponent;
+    }
+}