igniteui-webcomponents 6.2.0 → 6.3.0-RC.0

package/components/chat/chat.js

@@ -0,0 +1,325 @@
+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, 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 { registerComponent } from '../common/definitions/register.js';
+import { IgcChatResourceStringEN } from '../common/i18n/chat.resources.js';
+import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
+import { isEmpty, last } from '../common/util.js';
+import IgcIconComponent from '../icon/icon.js';
+import IgcListComponent from '../list/list.js';
+import 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';
+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');
+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, IgcTooltipComponent, IgcToastComponent);
+    }
+    _updateContext() {
+        this._context.setValue(this._state, true);
+    }
+    _updateUserInputContext() {
+        this._userInputContext.setValue(this._state, true);
+    }
+    set messages(value) {
+        this._state.messages = value;
+    }
+    get messages() {
+        return this._state.messages;
+    }
+    set draftMessage(value) {
+        if (this._state && value) {
+            this._state.inputValue = value.text;
+            this._state.inputAttachments = value.attachments || [];
+            this.requestUpdate();
+        }
+    }
+    get draftMessage() {
+        return {
+            text: this._state.inputValue,
+            attachments: this._state.inputAttachments,
+        };
+    }
+    set options(value) {
+        this._state.options = value;
+    }
+    get options() {
+        return this._state.options;
+    }
+    constructor() {
+        super();
+        this._state = new ChatState(this, this._updateContext, this._updateUserInputContext);
+        this._defaults = Object.freeze({
+            typingIndicator: () => this._renderLoadingTemplate(),
+            suggestionPrefix: () => this._renderSuggestionPrefix(),
+        });
+        this._slots = addSlotController(this, {
+            slots: Slots,
+        });
+        this._context = new ContextProvider(this, {
+            context: chatContext,
+            initialValue: this._state,
+        });
+        this._userInputContext = new ContextProvider(this, {
+            context: chatUserInputContext,
+            initialValue: this._state,
+        });
+        this.resourceStrings = IgcChatResourceStringEN;
+        addThemingController(this, all);
+    }
+    _getRenderer(name) {
+        return this._state.options?.renderers
+            ? (this._state.options.renderers[name] ?? this._defaults[name])
+            : this._defaults[name];
+    }
+    _handleSuggestionClick(text) {
+        this._state.addMessageWithEvent({ text });
+        this._input?.focusInput();
+    }
+    scrollToMessage(messageId) {
+        if (!isEmpty(this.messages)) {
+            const message = this.renderRoot.querySelector(`#message-${messageId}`);
+            message?.scrollIntoView({ block: 'end', inline: 'end' });
+        }
+    }
+    addMessage(message) {
+        this._state.addMessage(message);
+        return last(this.messages);
+    }
+    updateMessage(message, data, scrollIntoView = false) {
+        Object.assign(message, data);
+        const messageElement = this.renderRoot.querySelector(`#message-${message.id}`);
+        if (messageElement) {
+            messageElement.requestUpdate();
+            if (scrollIntoView) {
+                messageElement.updateComplete.then(() => messageElement.scrollIntoView({ block: 'end', inline: 'end' }));
+            }
+        }
+        else {
+            this.requestUpdate('messages');
+        }
+    }
+    updated(properties) {
+        if ((properties.has('messages') ||
+            this._typingIndicator ||
+            this._suggestionsContainer) &&
+            !this._state.disableAutoScroll) {
+            this._scrollToBottom();
+        }
+    }
+    _scrollToBottom() {
+        if (isEmpty(this.messages))
+            return;
+        const lastMessage = this.renderRoot
+            .querySelectorAll(IgcChatMessageComponent.tagName)
+            .item(this.messages.length - 1);
+        const scrollTarget = this._typingIndicator ?? this._suggestionsContainer ?? lastMessage;
+        requestAnimationFrame(() => {
+            scrollTarget?.scrollIntoView({ block: 'end', inline: 'end' });
+        });
+    }
+    _renderHeader() {
+        const hasContent = this._slots.hasAssignedElements('prefix') ||
+            this._slots.hasAssignedElements('title') ||
+            this._slots.hasAssignedElements('actions') ||
+            this._state.options?.headerText;
+        return html `
+      <div part="header" ?hidden=${!hasContent}>
+        <slot
+          name="prefix"
+          part="prefix"
+          ?hidden=${!this._slots.hasAssignedElements('prefix')}
+        ></slot>
+        <slot name="title" part="title"
+          >${this._state.options?.headerText}</slot
+        >
+        <slot name="actions" part="actions"></slot>
+      </div>
+    `;
+    }
+    _renderMessages() {
+        const ctx = { defaults: this._defaults, instance: this };
+        return html `
+      <div part="message-list" tabindex="0">
+        ${repeat(this._state.messages, (message) => message.id, (message) => {
+            return html `
+              <igc-chat-message
+                id=${`message-${message.id}`}
+                part="message-item"
+                .message=${message}
+                exportparts="message-container, message-text, message-attachments, message-actions, sent,
+                    attachments-container, attachment, attachment-header, attachment-content, attachment-icon, file-name, actions: attachment-actions"
+              >
+              </igc-chat-message>
+            `;
+        })}
+        ${this._state.options?.isTyping
+            ? html `<div part="typing-indicator">
+              ${this._getRenderer('typingIndicator')(ctx)}
+            </div>`
+            : nothing}
+      </div>
+    `;
+    }
+    _renderLoadingTemplate() {
+        return html `
+      <div part="typing-dot"></div>
+      <div part="typing-dot"></div>
+      <div part="typing-dot"></div>
+      <div part="typing-dot"></div>
+    `;
+    }
+    _renderSuggestionPrefix() {
+        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>
+          <igc-list-header part="suggestions-header">
+            <span ?hidden=${hasContent}>
+              ${this.resourceStrings.suggestionsHeader}
+            </span>
+            <slot name="suggestions-header"></slot>
+          </igc-list-header>
+          <slot name="suggestions" part="suggestions">
+            ${suggestions.map((suggestion) => html `
+                <slot name="suggestion" part="suggestion">
+                  <igc-list-item
+                    @click=${() => this._handleSuggestionClick(suggestion)}
+                  >
+                    <span slot="start">
+                      ${this._getRenderer('suggestionPrefix')(ctx)}
+                    </span>
+                    <span slot="title">${suggestion}</span>
+                  </igc-list-item>
+                </slot>
+              `)}
+          </slot>
+          <slot name="suggestions-actions" part="suggestions-actions"></slot>
+        </igc-list>
+      </div>
+    `;
+    }
+    _renderEmptyState() {
+        return html `
+      <div part="empty-state">
+        <slot name="empty-state"></slot>
+      </div>
+    `;
+    }
+    render() {
+        const hasMessages = !isEmpty(this.messages);
+        const suggestions = isEmpty(this._state.options?.suggestions ?? [])
+            ? 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,
+          sent
+        "
+      >
+        ${this._renderHeader()}
+
+        <div part="chat-wrapper">
+          ${cache(hasMessages || this._state.options?.isTyping
+            ? this._renderMessages()
+            : this._renderEmptyState())}
+          ${this._state.suggestionsPosition === 'below-messages'
+            ? suggestions
+            : 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>
+        ${this._state.suggestionsPosition === 'below-input'
+            ? suggestions
+            : nothing}
+      </div>
+    `;
+    }
+}
+__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([
+    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);
+//# 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, 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, last } 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  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<{ message: IgcChatMessage; reaction: string }>;\n\n  /**\n   * Dispatched when a chat message attachment is clicked.\n   */\n  igcAttachmentClick: CustomEvent<IgcChatMessageAttachment>;\n\n  /**\n   * Dispatched when an attachment is changed (e.g., updated or removed).\n   */\n  igcAttachmentChange: 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 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      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  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  // REVIEW: Maybe accept an `IgcMessage` type as well?\n  /**\n   * Scrolls the view to a specific message by id.\n   * @param messageId - The id of the message to scroll to\n   */\n  public scrollToMessage(messageId: string): void {\n    if (!isEmpty(this.messages)) {\n      const message = this.renderRoot.querySelector(`#message-${messageId}`);\n      message?.scrollIntoView({ block: 'end', inline: 'end' });\n    }\n  }\n\n  // REVIEW\n  public addMessage(message: Partial<IgcChatMessage>): IgcChatMessage {\n    this._state.addMessage(message);\n    return last(this.messages);\n  }\n\n  // REVIEW\n  public updateMessage(\n    message: IgcChatMessage,\n    data: Partial<IgcChatMessage>,\n    scrollIntoView = false\n  ) {\n    Object.assign(message, data);\n    const messageElement =\n      this.renderRoot.querySelector<IgcChatMessageComponent>(\n        `#message-${message.id}`\n      );\n\n    if (messageElement) {\n      messageElement.requestUpdate();\n      if (scrollIntoView) {\n        messageElement.updateComplete.then(() =>\n          messageElement.scrollIntoView({ block: 'end', inline: 'end' })\n        );\n      }\n    } else {\n      this.requestUpdate('messages');\n    }\n  }\n\n  protected override updated(properties: PropertyValues<this>): void {\n    if (\n      (properties.has('messages') ||\n        this._typingIndicator ||\n        this._suggestionsContainer) &&\n      !this._state.disableAutoScroll\n    ) {\n      this._scrollToBottom();\n    }\n  }\n\n  private _scrollToBottom() {\n    if (isEmpty(this.messages)) return;\n\n    const lastMessage = this.renderRoot\n      .querySelectorAll(IgcChatMessageComponent.tagName)\n      .item(this.messages.length - 1);\n\n    const scrollTarget =\n      this._typingIndicator ?? this._suggestionsContainer ?? lastMessage;\n\n    requestAnimationFrame(() => {\n      scrollTarget?.scrollIntoView({ block: 'end', inline: 'end' });\n    });\n  }\n\n  private _renderHeader() {\n    const hasContent =\n      this._slots.hasAssignedElements('prefix') ||\n      this._slots.hasAssignedElements('title') ||\n      this._slots.hasAssignedElements('actions') ||\n      this._state.options?.headerText;\n\n    return html`\n      <div part=\"header\" ?hidden=${!hasContent}>\n        <slot\n          name=\"prefix\"\n          part=\"prefix\"\n          ?hidden=${!this._slots.hasAssignedElements('prefix')}\n        ></slot>\n        <slot name=\"title\" part=\"title\"\n          >${this._state.options?.headerText}</slot\n        >\n        <slot name=\"actions\" part=\"actions\"></slot>\n      </div>\n    `;\n  }\n\n  private _renderMessages() {\n    const ctx = { defaults: this._defaults, instance: this };\n\n    return html`\n      <div part=\"message-list\" tabindex=\"0\">\n        ${repeat(\n          this._state.messages,\n          (message) => message.id,\n          (message) => {\n            return html`\n              <igc-chat-message\n                id=${`message-${message.id}`}\n                part=\"message-item\"\n                .message=${message}\n                exportparts=\"message-container, message-text, message-attachments, message-actions, sent,\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          ? html`<div part=\"typing-indicator\">\n              ${this._getRenderer('typingIndicator')(ctx)}\n            </div>`\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\" part=\"suggestions\">\n            ${suggestions.map(\n              (suggestion) => html`\n                <slot name=\"suggestion\" part=\"suggestion\">\n                  <igc-list-item\n                    @click=${() => this._handleSuggestionClick(suggestion)}\n                  >\n                    <span slot=\"start\">\n                      ${this._getRenderer('suggestionPrefix')(ctx)}\n                    </span>\n                    <span slot=\"title\">${suggestion}</span>\n                  </igc-list-item>\n                </slot>\n              `\n            )}\n          </slot>\n          <slot name=\"suggestions-actions\" part=\"suggestions-actions\"></slot>\n        </igc-list>\n      </div>\n    `;\n  }\n\n  private _renderEmptyState() {\n    return html`\n      <div part=\"empty-state\">\n        <slot name=\"empty-state\"></slot>\n      </div>\n    `;\n  }\n\n  protected override render() {\n    const hasMessages = !isEmpty(this.messages);\n    const suggestions = isEmpty(this._state.options?.suggestions ?? [])\n      ? nothing\n      : this._renderSuggestions();\n\n    return html`\n      <div\n        part=\"chat-container\"\n        exportparts=\"\n          chat-container,\n          header,\n          prefix,\n          title,\n          actions,\n          chat-wrapper,\n          chat-messages,\n          empty-state,\n          suggestions-container,\n          suggestions-header,\n          suggestions,\n          suggestions-actions,\n          suggestion,\n          message-container,\n          message-list,\n          message-item,\n          message,\n          message-text,\n          message-attachments,\n          message-actions,\n          typing-indicator,\n          attachments-container,\n          attachment,\n          attachment-header,\n          attachment-content,\n          attachment-icon,\n          file-name,\n          attachment-actions,\n          sent\n        \"\n      >\n        ${this._renderHeader()}\n\n        <div part=\"chat-wrapper\">\n          ${cache(\n            hasMessages || this._state.options?.isTyping\n              ? this._renderMessages()\n              : this._renderEmptyState()\n          )}\n          ${this._state.suggestionsPosition === 'below-messages'\n            ? suggestions\n            : nothing}\n        </div>\n\n        <igc-chat-input\n          exportparts=\"\n              input-container,\n              input-wrapper,\n              attachments: input-attachments-container,\n              attachments-wrapper: input-attachment,\n              attachment-name: input-attachment-name,\n              text-input,\n              buttons-container: input-buttons-container,\n              upload-button,\n              send-button\"\n        >\n        </igc-chat-input>\n        ${this._state.suggestionsPosition === 'below-input'\n          ? suggestions\n          : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-chat': IgcChatComponent;\n  }\n}\n"]}

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"markdown-renderer.js","sourceRoot":"","sources":["../../../../src/components/chat/extras/markdown-renderer.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,WAAW,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAChC,OAAO,WAAW,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAGpE,MAAM,iBAAiB,GAAG,CAAC,YAAY,EAAE,YAAY,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;AACtE,MAAM,aAAa,GAAG;IACpB,KAAK,EAAE,cAAc;IACrB,IAAI,EAAE,aAAa;CACpB,CAAC;AA8BF,MAAM,CAAC,KAAK,UAAU,sBAAsB,CAC1C,OAAiC;IAEjC,MAAM,SAAS,GAAG,OAAO,EAAE,SAAS,IAAI,SAAS,CAAC,QAAQ,CAAC;IAE3D,MAAM,QAAQ,GAAG,IAAI,MAAM,CAAC;QAC1B,MAAM,EAAE,IAAI;QACZ,GAAG,EAAE,IAAI;QACT,UAAU,EAAE;YACV;gBACE,IAAI,EAAE,MAAM;gBACZ,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE;oBAC5B,OAAO,YAAY,IAAI,+CAA+C,KAAK,CAAC,CAAC,CAAC,UAAU,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,MAAM,CAAC;gBACtH,CAAC;aACF;SACF;KACF,CAAC,CAAC;IAEH,IAAI,CAAC,OAAO,EAAE,aAAa,EAAE,CAAC;QAC5B,MAAM,MAAM,GAAG,OAAO,EAAE,KAAK,IAAI,aAAa,CAAC;QAC/C,MAAM,KAAK,GAAG,OAAO,EAAE,SAAS,IAAI,iBAAiB,CAAC;QAEtD,MAAM,WAAW,GAAG,MAAM,iBAAiB,CAAC;YAC1C,KAAK;YACL,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC;SACnC,CAAC,CAAC;QAEH,QAAQ,CAAC,GAAG,CACV,WAAW,CAAC;YACV,SAAS,CAAC,IAAI,EAAE,IAAI,EAAE,CAAC;gBACrB,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

@@ -0,0 +1,56 @@
+import { LitElement } from 'lit';
+import type { IgcChatMessage } 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[];
+    static register(): void;
+    private readonly _defaults;
+    private readonly _state;
+    /**
+     * The array of attachments to render.
+     */
+    message?: IgcChatMessage;
+    constructor();
+    private _getRenderer;
+    private _handleHeaderClick;
+    /**
+     * Default attachment header template used when no custom template is provided.
+     * Renders the attachment icon and name.
+     * @param attachment The message attachment to render
+     * @returns TemplateResult containing the rendered attachment header
+     */
+    private renderHeader;
+    /**
+     * Default attachment content template used when no custom template is provided.
+     * Renders the attachment content based on its type.
+     * @param attachment The message attachment to render
+     * @returns TemplateResult containing the rendered attachment content
+     */
+    private _renderContent;
+    private _renderAttachment;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-message-attachments': IgcMessageAttachmentsComponent;
+    }
+}

package/components/chat/message-attachments.js

@@ -0,0 +1,132 @@
+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 { consume } from '@lit/context';
+import { html, LitElement, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { cache } from 'lit/directives/cache.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { until } from 'lit/directives/until.js';
+import { addThemingController } from '../../theming/theming-controller.js';
+import IgcIconButtonComponent from '../button/icon-button.js';
+import { chatContext } from '../common/context.js';
+import { registerComponent } from '../common/definitions/register.js';
+import { partMap } from '../common/part-map.js';
+import IgcIconComponent from '../icon/icon.js';
+import { all } from './themes/attachments.js';
+import { styles } from './themes/message-attachments.base.css.js';
+import { styles as shared } from './themes/shared/message-attachments/message-attachments.common.css.js';
+import { ChatFileTypeIcons, createAttachmentURL, getFileExtension, isImageAttachment, } from './utils.js';
+export default class IgcMessageAttachmentsComponent extends LitElement {
+    static { this.tagName = 'igc-message-attachments'; }
+    static { this.styles = [styles, shared]; }
+    static register() {
+        registerComponent(IgcMessageAttachmentsComponent, IgcIconComponent, IgcIconButtonComponent);
+    }
+    constructor() {
+        super();
+        this._defaults = Object.freeze({
+            attachment: (ctx) => this._renderAttachment(ctx.attachment),
+            attachmentHeader: (ctx) => this.renderHeader(ctx.attachment),
+            attachmentContent: (ctx) => this._renderContent(ctx.attachment),
+        });
+        this._handleHeaderClick = (attachment) => {
+            this._state.emitEvent('igcAttachmentClick', { detail: attachment });
+        };
+        addThemingController(this, all);
+    }
+    _getRenderer(name) {
+        return this._state.options?.renderers
+            ? (this._state.options.renderers[name] ?? this._defaults[name])
+            : this._defaults[name];
+    }
+    renderHeader(attachment) {
+        const isCurrentUser = this._state.isCurrentUserMessage(this.message);
+        const iconName = isImageAttachment(attachment)
+            ? 'attach_image'
+            : 'document_thumbnail';
+        return html `
+      ${!isCurrentUser
+            ? html `<igc-icon name=${iconName} part="attachment-icon"></igc-icon>`
+            : nothing}
+      <span part="file-name">${attachment.name}</span>
+    `;
+    }
+    _renderContent(attachment) {
+        const iconName = ChatFileTypeIcons.get(getFileExtension(attachment.name)) ??
+            ChatFileTypeIcons.get('default');
+        return isImageAttachment(attachment)
+            ? html `
+          <img
+            part="image-attachment"
+            src=${createAttachmentURL(attachment)}
+            alt=${attachment.name}
+          />
+        `
+            : html `<igc-icon part="file-attachment" name=${iconName}></igc-icon>`;
+    }
+    _renderAttachment(attachment) {
+        const isCurrentUser = this._state.isCurrentUserMessage(this.message);
+        const attachmentParts = {
+            attachment: true,
+            sent: isCurrentUser,
+        };
+        const contentParts = {
+            'attachment-content': true,
+            sent: isCurrentUser,
+        };
+        const headerParts = {
+            'attachment-header': true,
+            sent: isCurrentUser,
+        };
+        const ctx = {
+            attachment,
+            message: this.message,
+            instance: this._state.host,
+        };
+        const content = html `<div part=${partMap(contentParts)}>
+      ${until(this._getRenderer('attachmentContent')(ctx))}
+    </div>`;
+        const header = html ` <div
+      part=${partMap(headerParts)}
+      role="button"
+      @click=${() => this._handleHeaderClick(attachment)}
+    >
+      <div part="details">
+        ${until(this._getRenderer('attachmentHeader')(ctx))}
+      </div>
+    </div>`;
+        return html `
+      <div part=${partMap(attachmentParts)}>
+        ${isCurrentUser ? content : nothing} ${header}
+        ${!isCurrentUser ? content : nothing}
+      </div>
+    `;
+    }
+    render() {
+        const attachments = this.message?.attachments ?? [];
+        return html `${cache(this.message
+            ? html `
+            <div part="attachments-container">
+              ${repeat(attachments, (attachment) => attachment.id, (attachment) => html `
+                  ${until(this._getRenderer('attachment')({
+                attachment,
+                message: this.message,
+                instance: this._state.host,
+            }))}
+                `)}
+            </div>
+          `
+            : nothing)}`;
+    }
+}
+__decorate([
+    consume({ context: chatContext, subscribe: true })
+], IgcMessageAttachmentsComponent.prototype, "_state", void 0);
+__decorate([
+    property({ attribute: false })
+], IgcMessageAttachmentsComponent.prototype, "message", void 0);
+//# sourceMappingURL=message-attachments.js.map