igniteui-webcomponents 6.1.2 → 6.3.0-alpha.0

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

@@ -0,0 +1,111 @@
+import { LitElement } from 'lit';
+/**
+ * A chat message list component that displays a list of chat messages grouped by date.
+ *
+ * @element igc-chat-message-list
+ *
+ * This component:
+ * - Renders messages using the `<igc-chat-message>` component.
+ * - Supports keyboard navigation between messages (Home, End, ArrowUp, ArrowDown).
+ * - Manages focus highlighting on active messages.
+ * - Automatically scrolls to the bottom when new messages arrive, unless auto-scroll is disabled.
+ * - Displays a typing indicator if the chat state option `isComposing` is true.
+ *
+ * Accessibility:
+ * - Uses ARIA roles and properties for grouping and active descendant management.
+ * - Message items have role="option" for assistive technologies.
+ *
+ */
+export default class IgcChatMessageListComponent extends LitElement {
+    /** Tag name of the custom element. */
+    static readonly tagName = "igc-chat-message-list";
+    /** Styles applied to the component */
+    static styles: import("lit").CSSResult[];
+    /**
+     * Consumed chat state context providing messages, options, and user data.
+     * @private
+     */
+    private _chatState?;
+    /**
+     * Currently active message id used for focus and keyboard navigation.
+     * @private
+     */
+    private _activeMessageId;
+    /**
+     * Registers this component and its dependencies.
+     * Used internally for component setup.
+     */
+    static register(): void;
+    constructor();
+    /**
+     * Formats a date to a human-readable label.
+     * Returns 'Today', 'Yesterday', or localized date string.
+     * @param date - Date object to format
+     * @returns formatted string
+     * @private
+     */
+    private formatDate;
+    /**
+     * Groups messages by their date labels.
+     * @param messages - Array of messages to group
+     * @returns Array of groups with date label and messages
+     * @private
+     */
+    private groupMessagesByDate;
+    /**
+     * Scrolls the container to the bottom, typically called after new messages are rendered.
+     * @private
+     */
+    private scrollToBottom;
+    /**
+     * Scrolls the view to a specific message by id.
+     * @param messageId - The id of the message to scroll to
+     * @private
+     */
+    private scrollToMessage;
+    /**
+     * Handles focus entering the message list container.
+     * Sets the active message to the last message for keyboard navigation.
+     * @private
+     */
+    private handleFocusIn;
+    /**
+     * Handles focus leaving the message list container.
+     * Clears the active message.
+     * @private
+     */
+    private handleFocusOut;
+    /**
+     * Handles keyboard navigation within the message list.
+     * Supports Home, End, ArrowUp, ArrowDown keys to move active message focus.
+     * @param e KeyboardEvent from user input
+     * @private
+     */
+    private navigateToMessage;
+    /**
+     * Lifecycle: called when the component updates.
+     * Scrolls to bottom unless auto-scroll is disabled.
+     */
+    protected updated(): void;
+    /**
+     * Lifecycle: called after first render.
+     * Scrolls to bottom unless auto-scroll is disabled.
+     */
+    protected firstUpdated(): void;
+    /**
+     * Renders the typing indicator template if composing.
+     * @protected
+     */
+    protected renderLoadingTemplate(): Generator<import("lit-html").TemplateResult<1>, void, unknown>;
+    /**
+     * Main render method.
+     * Groups messages by date and renders each message.
+     * Shows the typing indicator if applicable.
+     */
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-chat-message-list': IgcChatMessageListComponent;
+    }
+}

package/components/chat/chat-message-list.js

@@ -0,0 +1,178 @@
+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 { state } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { chatContext } from '../common/context.js';
+import { addKeybindings, arrowDown, arrowUp, endKey, homeKey, } from '../common/controllers/key-bindings.js';
+import { registerComponent } from '../common/definitions/register.js';
+import IgcChatMessageComponent from './chat-message.js';
+import { styles } from './themes/message-list.base.css.js';
+import { styles as shared } from './themes/shared/message-list.common.css.js';
+class IgcChatMessageListComponent extends LitElement {
+    static register() {
+        registerComponent(IgcChatMessageListComponent, IgcChatMessageComponent);
+    }
+    constructor() {
+        super();
+        this._activeMessageId = '';
+        addKeybindings(this)
+            .set(homeKey, this.navigateToMessage)
+            .set(endKey, this.navigateToMessage)
+            .set(arrowUp, this.navigateToMessage)
+            .set(arrowDown, this.navigateToMessage);
+    }
+    formatDate(date) {
+        const today = new Date();
+        const yesterday = new Date(today);
+        yesterday.setDate(yesterday.getDate() - 1);
+        if (date.toDateString() === today.toDateString()) {
+            return 'Today';
+        }
+        if (date.toDateString() === yesterday.toDateString()) {
+            return 'Yesterday';
+        }
+        return date.toLocaleDateString('en-US', {
+            weekday: 'long',
+            month: 'short',
+            day: 'numeric',
+        });
+    }
+    groupMessagesByDate(messages) {
+        const grouped = {};
+        messages.forEach((message) => {
+            const dateStr = this.formatDate(message.timestamp);
+            if (!grouped[dateStr]) {
+                grouped[dateStr] = [];
+            }
+            grouped[dateStr].push(message);
+        });
+        return Object.keys(grouped).map((date) => ({
+            date,
+            messages: grouped[date],
+        }));
+    }
+    scrollToBottom() {
+        requestAnimationFrame(() => {
+            const container = this.shadowRoot?.host;
+            if (container) {
+                container.scrollTop = container.scrollHeight;
+            }
+        });
+    }
+    scrollToMessage(messageId) {
+        const messageElement = this.shadowRoot?.querySelector(`#message-${messageId}`);
+        messageElement?.scrollIntoView();
+    }
+    handleFocusIn() {
+        if (!this._chatState?.messages || this._chatState.messages.length === 0) {
+            return;
+        }
+        const lastMessage = this._chatState.sortedMessagesIds?.pop() ?? '';
+        this._activeMessageId = lastMessage !== '' ? `message-${lastMessage}` : '';
+    }
+    handleFocusOut() {
+        this._activeMessageId = '';
+    }
+    navigateToMessage(e) {
+        if (!this._chatState?.messages || this._chatState.messages.length === 0) {
+            return;
+        }
+        const currentIndex = this._chatState?.sortedMessagesIds.findIndex((id) => `message-${id}` === this._activeMessageId);
+        let activeMessageId = '';
+        const key = e.key.toLowerCase();
+        switch (key) {
+            case 'home':
+                activeMessageId = this._chatState.sortedMessagesIds[0];
+                break;
+            case 'end':
+                activeMessageId =
+                    this._chatState.sortedMessagesIds[this._chatState.sortedMessagesIds.length - 1];
+                break;
+            case 'arrowup':
+                if (currentIndex > 0) {
+                    activeMessageId = this._chatState.sortedMessagesIds[currentIndex - 1];
+                }
+                break;
+            case 'arrowdown':
+                if (currentIndex < this._chatState?.messages.length - 1) {
+                    activeMessageId = this._chatState.sortedMessagesIds[currentIndex + 1];
+                }
+                break;
+            default:
+                return;
+        }
+        this._activeMessageId = `message-${activeMessageId}`;
+        this.scrollToMessage(activeMessageId);
+    }
+    updated() {
+        if (!this._chatState?.options?.disableAutoScroll) {
+            this.scrollToBottom();
+        }
+    }
+    firstUpdated() {
+        if (!this._chatState?.options?.disableAutoScroll) {
+            this.scrollToBottom();
+        }
+    }
+    *renderLoadingTemplate() {
+        yield html `${this._chatState?.options?.templates?.composingIndicatorTemplate
+            ? this._chatState.options.templates.composingIndicatorTemplate
+            : html `<div part="typing-indicator">
+          <div part="typing-dot"></div>
+          <div part="typing-dot"></div>
+          <div part="typing-dot"></div>
+        </div>`}`;
+    }
+    render() {
+        const groupedMessages = this.groupMessagesByDate(this._chatState?.messages ?? []);
+        return html `
+      <div
+        part="message-container"
+        aria-activedescendant=${this._activeMessageId}
+        role="group"
+        aria-label="Message list"
+        tabindex="0"
+        @focusin=${this.handleFocusIn}
+        @focusout=${this.handleFocusOut}
+      ></div>
+        <div part="message-list">
+          ${repeat(groupedMessages, (group) => group.date, (group) => html `
+              ${repeat(group.messages, (message) => message.id, (message) => {
+            const messageId = `message-${message.id}`;
+            return html `
+                    <igc-chat-message
+                      id=${messageId}
+                      role="option"
+                      part="message-item ${this._activeMessageId === messageId
+                ? 'active'
+                : ''}"
+                      .message=${message}
+                    >
+                    </igc-chat-message>
+                  `;
+        })}
+            `)}
+          ${this._chatState?.options?.isComposing
+            ? this.renderLoadingTemplate()
+            : nothing}
+        </div>
+      </div>
+    `;
+    }
+}
+IgcChatMessageListComponent.tagName = 'igc-chat-message-list';
+IgcChatMessageListComponent.styles = [styles, shared];
+export default IgcChatMessageListComponent;
+__decorate([
+    consume({ context: chatContext, subscribe: true })
+], IgcChatMessageListComponent.prototype, "_chatState", void 0);
+__decorate([
+    state()
+], IgcChatMessageListComponent.prototype, "_activeMessageId", void 0);
+//# sourceMappingURL=chat-message-list.js.map

package/components/chat/chat-message-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-message-list.js","sourceRoot":"","sources":["../../../src/components/chat/chat-message-list.ts"],"names":[],"mappings":"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","sourcesContent":["import { consume } from '@lit/context';\nimport { html, LitElement, nothing } from 'lit';\nimport { state } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { chatContext } from '../common/context.js';\nimport {\n  addKeybindings,\n  arrowDown,\n  arrowUp,\n  endKey,\n  homeKey,\n} from '../common/controllers/key-bindings.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport IgcChatMessageComponent from './chat-message.js';\nimport type { ChatState } from './chat-state.js';\nimport { styles } from './themes/message-list.base.css.js';\nimport { styles as shared } from './themes/shared/message-list.common.css.js';\nimport type { IgcMessage } from './types.js';\n\n/**\n * A chat message list component that displays a list of chat messages grouped by date.\n *\n * @element igc-chat-message-list\n *\n * This component:\n * - Renders messages using the `<igc-chat-message>` component.\n * - Supports keyboard navigation between messages (Home, End, ArrowUp, ArrowDown).\n * - Manages focus highlighting on active messages.\n * - Automatically scrolls to the bottom when new messages arrive, unless auto-scroll is disabled.\n * - Displays a typing indicator if the chat state option `isComposing` is true.\n *\n * Accessibility:\n * - Uses ARIA roles and properties for grouping and active descendant management.\n * - Message items have role=\"option\" for assistive technologies.\n *\n */\nexport default class IgcChatMessageListComponent extends LitElement {\n  /** Tag name of the custom element. */\n  public static readonly tagName = 'igc-chat-message-list';\n\n  /** Styles applied to the component */\n  public static override styles = [styles, shared];\n\n  /**\n   * Consumed chat state context providing messages, options, and user data.\n   * @private\n   */\n  @consume({ context: chatContext, subscribe: true })\n  private _chatState?: ChatState;\n\n  /**\n   * Currently active message id used for focus and keyboard navigation.\n   * @private\n   */\n  @state()\n  private _activeMessageId = '';\n\n  /**\n   * Registers this component and its dependencies.\n   * Used internally for component setup.\n   */\n  /* blazorSuppress */\n  public static register() {\n    registerComponent(IgcChatMessageListComponent, IgcChatMessageComponent);\n  }\n\n  constructor() {\n    super();\n    addKeybindings(this)\n      .set(homeKey, this.navigateToMessage)\n      .set(endKey, this.navigateToMessage)\n      .set(arrowUp, this.navigateToMessage)\n      .set(arrowDown, this.navigateToMessage);\n  }\n\n  /**\n   * Formats a date to a human-readable label.\n   * Returns 'Today', 'Yesterday', or localized date string.\n   * @param date - Date object to format\n   * @returns formatted string\n   * @private\n   */\n  private formatDate(date: Date): string {\n    const today = new Date();\n    const yesterday = new Date(today);\n    yesterday.setDate(yesterday.getDate() - 1);\n\n    if (date.toDateString() === today.toDateString()) {\n      return 'Today';\n    }\n\n    if (date.toDateString() === yesterday.toDateString()) {\n      return 'Yesterday';\n    }\n\n    return date.toLocaleDateString('en-US', {\n      weekday: 'long',\n      month: 'short',\n      day: 'numeric',\n    });\n  }\n\n  /**\n   * Groups messages by their date labels.\n   * @param messages - Array of messages to group\n   * @returns Array of groups with date label and messages\n   * @private\n   */\n  private groupMessagesByDate(\n    messages: IgcMessage[]\n  ): { date: string; messages: IgcMessage[] }[] {\n    const grouped: { [key: string]: IgcMessage[] } = {};\n\n    messages.forEach((message) => {\n      const dateStr = this.formatDate(message.timestamp);\n      if (!grouped[dateStr]) {\n        grouped[dateStr] = [];\n      }\n      grouped[dateStr].push(message);\n    });\n\n    return Object.keys(grouped).map((date) => ({\n      date,\n      messages: grouped[date],\n    }));\n  }\n\n  /**\n   * Scrolls the container to the bottom, typically called after new messages are rendered.\n   * @private\n   */\n  private scrollToBottom() {\n    requestAnimationFrame(() => {\n      const container = this.shadowRoot?.host as HTMLElement;\n      if (container) {\n        container.scrollTop = container.scrollHeight;\n      }\n    });\n  }\n\n  /**\n   * Scrolls the view to a specific message by id.\n   * @param messageId - The id of the message to scroll to\n   * @private\n   */\n  private scrollToMessage(messageId: string) {\n    const messageElement = this.shadowRoot?.querySelector(\n      `#message-${messageId}`\n    );\n    messageElement?.scrollIntoView();\n  }\n\n  /**\n   * Handles focus entering the message list container.\n   * Sets the active message to the last message for keyboard navigation.\n   * @private\n   */\n  private handleFocusIn() {\n    if (!this._chatState?.messages || this._chatState.messages.length === 0) {\n      return;\n    }\n    const lastMessage = this._chatState.sortedMessagesIds?.pop() ?? '';\n    this._activeMessageId = lastMessage !== '' ? `message-${lastMessage}` : '';\n  }\n\n  /**\n   * Handles focus leaving the message list container.\n   * Clears the active message.\n   * @private\n   */\n  private handleFocusOut() {\n    this._activeMessageId = '';\n  }\n\n  /**\n   * Handles keyboard navigation within the message list.\n   * Supports Home, End, ArrowUp, ArrowDown keys to move active message focus.\n   * @param e KeyboardEvent from user input\n   * @private\n   */\n  private navigateToMessage(e: KeyboardEvent) {\n    if (!this._chatState?.messages || this._chatState.messages.length === 0) {\n      return;\n    }\n\n    const currentIndex = this._chatState?.sortedMessagesIds.findIndex(\n      (id) => `message-${id}` === this._activeMessageId\n    );\n    let activeMessageId = '';\n    const key = e.key.toLowerCase();\n\n    switch (key) {\n      case 'home':\n        activeMessageId = this._chatState.sortedMessagesIds[0];\n        break;\n      case 'end':\n        activeMessageId =\n          this._chatState.sortedMessagesIds[\n            this._chatState.sortedMessagesIds.length - 1\n          ];\n        break;\n      case 'arrowup':\n        if (currentIndex > 0) {\n          activeMessageId = this._chatState.sortedMessagesIds[currentIndex - 1];\n        }\n        break;\n      case 'arrowdown':\n        if (currentIndex < this._chatState?.messages.length - 1) {\n          activeMessageId = this._chatState.sortedMessagesIds[currentIndex + 1];\n        }\n        break;\n      default:\n        return; // Ignore other keys\n    }\n\n    this._activeMessageId = `message-${activeMessageId}`;\n    this.scrollToMessage(activeMessageId);\n  }\n\n  /**\n   * Lifecycle: called when the component updates.\n   * Scrolls to bottom unless auto-scroll is disabled.\n   */\n  protected override updated() {\n    if (!this._chatState?.options?.disableAutoScroll) {\n      this.scrollToBottom();\n    }\n  }\n\n  /**\n   * Lifecycle: called after first render.\n   * Scrolls to bottom unless auto-scroll is disabled.\n   */\n  protected override firstUpdated() {\n    if (!this._chatState?.options?.disableAutoScroll) {\n      this.scrollToBottom();\n    }\n  }\n\n  /**\n   * Renders the typing indicator template if composing.\n   * @protected\n   */\n  protected *renderLoadingTemplate() {\n    yield html`${this._chatState?.options?.templates?.composingIndicatorTemplate\n      ? this._chatState.options.templates.composingIndicatorTemplate\n      : html`<div part=\"typing-indicator\">\n          <div part=\"typing-dot\"></div>\n          <div part=\"typing-dot\"></div>\n          <div part=\"typing-dot\"></div>\n        </div>`}`;\n  }\n\n  /**\n   * Main render method.\n   * Groups messages by date and renders each message.\n   * Shows the typing indicator if applicable.\n   */\n  protected override render() {\n    const groupedMessages = this.groupMessagesByDate(\n      this._chatState?.messages ?? []\n    );\n\n    return html`\n      <div\n        part=\"message-container\"\n        aria-activedescendant=${this._activeMessageId}\n        role=\"group\"\n        aria-label=\"Message list\"\n        tabindex=\"0\"\n        @focusin=${this.handleFocusIn}\n        @focusout=${this.handleFocusOut}\n      ></div>\n        <div part=\"message-list\">\n          ${repeat(\n            groupedMessages,\n            (group) => group.date,\n            (group) => html`\n              ${repeat(\n                group.messages,\n                (message) => message.id,\n                (message) => {\n                  const messageId = `message-${message.id}`;\n                  return html`\n                    <igc-chat-message\n                      id=${messageId}\n                      role=\"option\"\n                      part=\"message-item ${this._activeMessageId === messageId\n                        ? 'active'\n                        : ''}\"\n                      .message=${message}\n                    >\n                    </igc-chat-message>\n                  `;\n                }\n              )}\n            `\n          )}\n          ${\n            this._chatState?.options?.isComposing\n              ? this.renderLoadingTemplate()\n              : nothing\n          }\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-chat-message-list': IgcChatMessageListComponent;\n  }\n}\n"]}

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

@@ -0,0 +1,57 @@
+import { LitElement } from 'lit';
+import type { IgcMessage } from './types.js';
+/**
+ * A chat message component for displaying individual messages in `<igc-chat>`.
+ *
+ * @element igc-chat-message
+ *
+ * This component renders a single chat message including:
+ * - Message text (sanitized)
+ * - Attachments (if any)
+ * - Custom templates for message content and actions (if provided via chat options)
+ *
+ * It distinguishes sent messages from received messages by comparing
+ * the message sender with the current user ID from chat state.
+ *
+ * The message text is sanitized with DOMPurify before rendering,
+ * and can be rendered with a markdown renderer if provided.
+ */
+export default class IgcChatMessageComponent extends LitElement {
+    /** Tag name of the custom element. */
+    static readonly tagName = "igc-chat-message";
+    /** Styles applied to the component. */
+    static styles: import("lit").CSSResult[];
+    /**
+     * Injected chat state context. Provides message data, user info, and options.
+     * @private
+     */
+    private _chatState?;
+    /**
+     * Registers this component and its dependencies.
+     * This is used internally to set up the component definitions.
+     */
+    static register(): void;
+    /**
+     * The chat message to render.
+     */
+    message: IgcMessage | undefined;
+    /**
+     * Sanitizes message text to prevent XSS or invalid HTML.
+     * @param text The raw message text
+     * @returns Sanitized text safe for HTML rendering
+     * @private
+     */
+    private sanitizeMessageText;
+    /**
+     * Renders the chat message template.
+     * - Applies 'sent' CSS class if the message sender matches current user.
+     * - Uses markdown rendering if configured.
+     * - Renders attachments and custom templates if provided.
+     */
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-chat-message': IgcChatMessageComponent;
+    }
+}

package/components/chat/chat-message.js

@@ -0,0 +1,59 @@
+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 DOMPurify from 'dompurify';
+import { html, LitElement, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import IgcAvatarComponent from '../avatar/avatar.js';
+import { chatContext } from '../common/context.js';
+import { registerComponent } from '../common/definitions/register.js';
+import { renderMarkdown } from './markdown-util.js';
+import IgcMessageAttachmentsComponent from './message-attachments.js';
+import { styles } from './themes/message.base.css.js';
+import { styles as shared } from './themes/shared/chat-message.common.css.js';
+class IgcChatMessageComponent extends LitElement {
+    static register() {
+        registerComponent(IgcChatMessageComponent, IgcMessageAttachmentsComponent, IgcAvatarComponent);
+    }
+    sanitizeMessageText(text) {
+        return DOMPurify.sanitize(text);
+    }
+    render() {
+        const containerPart = `message-container ${this.message?.sender === this._chatState?.currentUserId ? 'sent' : ''}`;
+        const sanitizedMessageText = this.sanitizeMessageText(this.message?.text.trim() || '');
+        const renderer = this._chatState?.options?.markdownRenderer || renderMarkdown;
+        return html `
+      <div part=${containerPart}>
+        <div part="bubble">
+          ${this._chatState?.options?.templates?.messageTemplate && this.message
+            ? this._chatState.options.templates.messageTemplate(this.message)
+            : html `${sanitizedMessageText
+                ? html `<div>${renderer(sanitizedMessageText)}</div>`
+                : nothing}`}
+          ${this.message?.attachments && this.message?.attachments.length > 0
+            ? html `<igc-message-attachments .message=${this.message}>
+              </igc-message-attachments>`
+            : nothing}
+          ${this._chatState?.options?.templates?.messageActionsTemplate &&
+            this.message
+            ? this._chatState.options.templates.messageActionsTemplate(this.message)
+            : nothing}
+        </div>
+      </div>
+    `;
+    }
+}
+IgcChatMessageComponent.tagName = 'igc-chat-message';
+IgcChatMessageComponent.styles = [styles, shared];
+export default IgcChatMessageComponent;
+__decorate([
+    consume({ context: chatContext, subscribe: true })
+], IgcChatMessageComponent.prototype, "_chatState", void 0);
+__decorate([
+    property({ attribute: false })
+], IgcChatMessageComponent.prototype, "message", void 0);
+//# sourceMappingURL=chat-message.js.map

package/components/chat/chat-message.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-message.js","sourceRoot":"","sources":["../../../src/components/chat/chat-message.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,SAAS,MAAM,WAAW,CAAC;AAClC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,kBAAkB,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAEtE,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,8BAA8B,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,4CAA4C,CAAC;AAmB9E,MAAqB,uBAAwB,SAAQ,UAAU;IAmBtD,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CACf,uBAAuB,EACvB,8BAA8B,EAC9B,kBAAkB,CACnB,CAAC;IACJ,CAAC;IAcO,mBAAmB,CAAC,IAAY;QACtC,OAAO,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IAClC,CAAC;IAQkB,MAAM;QACvB,MAAM,aAAa,GAAG,qBAAqB,IAAI,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;QACnH,MAAM,oBAAoB,GAAG,IAAI,CAAC,mBAAmB,CACnD,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,CAChC,CAAC;QACF,MAAM,QAAQ,GACZ,IAAI,CAAC,UAAU,EAAE,OAAO,EAAE,gBAAgB,IAAI,cAAc,CAAC;QAE/D,OAAO,IAAI,CAAA;kBACG,aAAa;;YAEnB,IAAI,CAAC,UAAU,EAAE,OAAO,EAAE,SAAS,EAAE,eAAe,IAAI,IAAI,CAAC,OAAO;YACpE,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,SAAS,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC;YACjE,CAAC,CAAC,IAAI,CAAA,GAAG,oBAAoB;gBACzB,CAAC,CAAC,IAAI,CAAA,QAAQ,QAAQ,CAAC,oBAAoB,CAAC,QAAQ;gBACpD,CAAC,CAAC,OAAO,EAAE;YACf,IAAI,CAAC,OAAO,EAAE,WAAW,IAAI,IAAI,CAAC,OAAO,EAAE,WAAW,CAAC,MAAM,GAAG,CAAC;YACjE,CAAC,CAAC,IAAI,CAAA,qCAAqC,IAAI,CAAC,OAAO;yCAC1B;YAC7B,CAAC,CAAC,OAAO;YACT,IAAI,CAAC,UAAU,EAAE,OAAO,EAAE,SAAS,EAAE,sBAAsB;YAC7D,IAAI,CAAC,OAAO;YACV,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,SAAS,CAAC,sBAAsB,CACtD,IAAI,CAAC,OAAO,CACb;YACH,CAAC,CAAC,OAAO;;;KAGhB,CAAC;IACJ,CAAC;;AA5EsB,+BAAO,GAAG,kBAAkB,CAAC;AAG7B,8BAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;eAL9B,uBAAuB;AAYlC;IADP,OAAO,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;2DACpB;AAmBxB;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;wDACQ","sourcesContent":["import { consume } from '@lit/context';\nimport DOMPurify from 'dompurify';\nimport { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport IgcAvatarComponent from '../avatar/avatar.js';\nimport { chatContext } from '../common/context.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport type { ChatState } from './chat-state.js';\nimport { renderMarkdown } from './markdown-util.js';\nimport IgcMessageAttachmentsComponent from './message-attachments.js';\nimport { styles } from './themes/message.base.css.js';\nimport { styles as shared } from './themes/shared/chat-message.common.css.js';\nimport type { IgcMessage } from './types.js';\n\n/**\n * A chat message component for displaying individual messages in `<igc-chat>`.\n *\n * @element igc-chat-message\n *\n * This component renders a single chat message including:\n * - Message text (sanitized)\n * - Attachments (if any)\n * - Custom templates for message content and actions (if provided via chat options)\n *\n * It distinguishes sent messages from received messages by comparing\n * the message sender with the current user ID from chat state.\n *\n * The message text is sanitized with DOMPurify before rendering,\n * and can be rendered with a markdown renderer if provided.\n */\nexport default class IgcChatMessageComponent extends LitElement {\n  /** Tag name of the custom element. */\n  public static readonly tagName = 'igc-chat-message';\n\n  /** Styles applied to the component. */\n  public static override styles = [styles, shared];\n\n  /**\n   * Injected chat state context. Provides message data, user info, and options.\n   * @private\n   */\n  @consume({ context: chatContext, subscribe: true })\n  private _chatState?: ChatState;\n\n  /**\n   * Registers this component and its dependencies.\n   * This is used internally to set up the component definitions.\n   */\n  /* blazorSuppress */\n  public static register() {\n    registerComponent(\n      IgcChatMessageComponent,\n      IgcMessageAttachmentsComponent,\n      IgcAvatarComponent\n    );\n  }\n\n  /**\n   * The chat message to render.\n   */\n  @property({ attribute: false })\n  public message: IgcMessage | undefined;\n\n  /**\n   * Sanitizes message text to prevent XSS or invalid HTML.\n   * @param text The raw message text\n   * @returns Sanitized text safe for HTML rendering\n   * @private\n   */\n  private sanitizeMessageText(text: string): string {\n    return DOMPurify.sanitize(text);\n  }\n\n  /**\n   * Renders the chat message template.\n   * - Applies 'sent' CSS class if the message sender matches current user.\n   * - Uses markdown rendering if configured.\n   * - Renders attachments and custom templates if provided.\n   */\n  protected override render() {\n    const containerPart = `message-container ${this.message?.sender === this._chatState?.currentUserId ? 'sent' : ''}`;\n    const sanitizedMessageText = this.sanitizeMessageText(\n      this.message?.text.trim() || ''\n    );\n    const renderer =\n      this._chatState?.options?.markdownRenderer || renderMarkdown;\n\n    return html`\n      <div part=${containerPart}>\n        <div part=\"bubble\">\n          ${this._chatState?.options?.templates?.messageTemplate && this.message\n            ? this._chatState.options.templates.messageTemplate(this.message)\n            : html`${sanitizedMessageText\n                ? html`<div>${renderer(sanitizedMessageText)}</div>`\n                : nothing}`}\n          ${this.message?.attachments && this.message?.attachments.length > 0\n            ? html`<igc-message-attachments .message=${this.message}>\n              </igc-message-attachments>`\n            : nothing}\n          ${this._chatState?.options?.templates?.messageActionsTemplate &&\n          this.message\n            ? this._chatState.options.templates.messageActionsTemplate(\n                this.message\n              )\n            : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-chat-message': IgcChatMessageComponent;\n  }\n}\n"]}

package/components/chat/chat-state.d.ts

@@ -0,0 +1,155 @@
+import type IgcTextareaComponent from '../textarea/textarea.js';
+import type IgcChatComponent from './chat.js';
+import type { IgcChatComponentEventMap } from './chat.js';
+import type { IgcChatOptions, IgcMessage, IgcMessageAttachment } from './types.js';
+/**
+ * Internal state manager for the `<igc-chat>` component.
+ *
+ * Manages messages, input value, attachments, options, and event emissions.
+ */
+export declare class ChatState {
+    private readonly _host;
+    /** Reference to the text area input component */
+    private _textArea;
+    /** The current list of messages */
+    private _messages;
+    /** Sorted copy of messages by timestamp */
+    private _sortedMessages;
+    /** Chat options/configuration */
+    private _options?;
+    /** List of current input attachments */
+    private _inputAttachments;
+    /** Current input text */
+    private _inputValue;
+    /**
+     * Cache of accepted file types, organized into extensions, mimeTypes, and wildcardTypes
+     */
+    private _acceptedTypesCache;
+    private _suggestionsPosition;
+    /**
+     * Array of message IDs sorted by timestamp ascending.
+     */
+    get sortedMessagesIds(): string[];
+    /**
+     * Gets the list of chat messages.
+     */
+    get messages(): IgcMessage[];
+    /**
+     * Sets the list of chat messages.
+     * Also sorts messages by timestamp and requests host update.
+     */
+    set messages(value: IgcMessage[]);
+    /**
+     * Gets current chat options.
+     */
+    get options(): IgcChatOptions | undefined;
+    /**
+     * Sets chat options and requests host update.
+     */
+    set options(value: IgcChatOptions);
+    /**
+     * Gets the current user ID from options or returns 'user' as fallback.
+     */
+    get currentUserId(): string;
+    /**
+     * Gets the current suggestionsPosition from options or returns the default value 'below-messages'.
+     */
+    get suggestionsPosition(): string;
+    /**
+     * Gets the text area component.
+     */
+    get textArea(): IgcTextareaComponent | null;
+    /**
+     * Sets the text area component.
+     */
+    set textArea(value: IgcTextareaComponent);
+    /**
+     * Gets the list of attachments currently attached to input.
+     */
+    get inputAttachments(): IgcMessageAttachment[];
+    /**
+     * Sets the input attachments and requests host update.
+     */
+    set inputAttachments(value: IgcMessageAttachment[]);
+    /**
+     * Gets the current input value.
+     */
+    get inputValue(): string;
+    /**
+     * Sets the current input value and requests host update.
+     */
+    set inputValue(value: string);
+    /**
+     * Creates an instance of ChatState.
+     * @param chat The host `<igc-chat>` component.
+     */
+    constructor(chat: IgcChatComponent);
+    /**
+     * Emits a custom event from the host component.
+     * @param name Event name (key of IgcChatComponentEventMap)
+     * @param args Event detail or options
+     * @returns true if event was not canceled, false otherwise
+     */
+    emitEvent(name: keyof IgcChatComponentEventMap, args?: any): boolean;
+    /**
+     * Handles input text changes.
+     * Updates internal inputValue and emits 'igcInputChange' event.
+     * @param value New input value
+     */
+    handleInputChange(value: string): void;
+    /**
+     * Adds a new chat message.
+     * Emits 'igcMessageCreated' event which can be canceled to prevent adding.
+     * Clears input value and attachments on success.
+     * @param message Partial message object with optional id, sender, timestamp
+     */
+    addMessage(message: {
+        id?: string;
+        text: string;
+        sender?: string;
+        timestamp?: Date;
+        attachments?: IgcMessageAttachment[];
+    }): void;
+    /**
+     * Adds files as attachments to the input.
+     * Emits 'igcAttachmentChange' event which can be canceled to prevent adding.
+     * @param files Array of File objects to attach
+     */
+    attachFiles(files: File[]): void;
+    /**
+     * Removes an attachment by index.
+     * Emits 'igcAttachmentChange' event which can be canceled to prevent removal.
+     * @param index Index of the attachment to remove
+     */
+    removeAttachment(index: number): void;
+    /**
+     * Handles when a suggestion is clicked.
+     * Adds the suggestion as a new message and focuses the text area.
+     * @param suggestion The suggestion string clicked
+     */
+    handleSuggestionClick(suggestion: string): void;
+    /**
+     * Updates the chat options partially.
+     * @param options Partial options to merge with current options
+     */
+    updateOptions(options: Partial<IgcChatOptions>): void;
+    /**
+     * Updates the internal cache for accepted file types.
+     * Parses the acceptedFiles string option into extensions, mimeTypes, and wildcard types.
+     */
+    updateAcceptedTypesCache(): void;
+    /**
+     * Checks if a file's type or extension is accepted by the chat's acceptedFiles setting.
+     * @param file File object to check
+     * @param type Optional MIME type override if no file provided
+     * @returns True if accepted, false otherwise
+     */
+    isFileTypeAccepted(file: File, type?: string): boolean;
+    /**
+     * Checks if a slot is empty.
+     * @param name Slot name to check
+     * @returns True if the slot has content, false otherwise
+     */
+    hasSlotContent(name: string): boolean;
+}
+export declare function createChatState(host: IgcChatComponent): ChatState;