igniteui-webcomponents 6.1.2 → 6.3.0-alpha.0

package/components/chat/chat-state.js

@@ -0,0 +1,167 @@
+export class ChatState {
+    get sortedMessagesIds() {
+        return this._sortedMessages.map((m) => m.id);
+    }
+    get messages() {
+        return this._messages;
+    }
+    set messages(value) {
+        this._messages = value;
+        this._sortedMessages = value.slice().sort((a, b) => {
+            return a.timestamp.getTime() - b.timestamp.getTime();
+        });
+        this._host.requestUpdate();
+    }
+    get options() {
+        return this._options;
+    }
+    set options(value) {
+        this._options = value;
+        this._host.requestUpdate();
+    }
+    get currentUserId() {
+        return this._options?.currentUserId ?? 'user';
+    }
+    get suggestionsPosition() {
+        return this._options?.suggestionsPosition ?? this._suggestionsPosition;
+    }
+    get textArea() {
+        return this._textArea;
+    }
+    set textArea(value) {
+        this._textArea = value;
+    }
+    get inputAttachments() {
+        return this._inputAttachments;
+    }
+    set inputAttachments(value) {
+        this._inputAttachments = value;
+        this._host.requestUpdate();
+    }
+    get inputValue() {
+        return this._inputValue;
+    }
+    set inputValue(value) {
+        this._inputValue = value;
+        this._host.requestUpdate();
+    }
+    constructor(chat) {
+        this._textArea = null;
+        this._messages = [];
+        this._sortedMessages = [];
+        this._inputAttachments = [];
+        this._inputValue = '';
+        this._acceptedTypesCache = null;
+        this._suggestionsPosition = 'below-messages';
+        this._host = chat;
+    }
+    emitEvent(name, args) {
+        return this._host.emitEvent(name, args);
+    }
+    handleInputChange(value) {
+        this.inputValue = value;
+        this.emitEvent('igcInputChange', { detail: { value: this.inputValue } });
+    }
+    addMessage(message) {
+        const newMessage = {
+            id: message.id ?? Date.now().toString(),
+            text: message.text,
+            sender: message.sender ?? this.currentUserId,
+            timestamp: message.timestamp ?? new Date(),
+            attachments: message.attachments || [],
+        };
+        const allowed = this.emitEvent('igcMessageCreated', {
+            detail: newMessage,
+            cancelable: true,
+        });
+        if (allowed) {
+            if (!this.messages.some((msg) => msg.id === newMessage.id)) {
+                this.messages = [...this.messages, newMessage];
+            }
+            this.inputValue = '';
+            this.inputAttachments = [];
+        }
+    }
+    attachFiles(files) {
+        const newAttachments = [];
+        let count = this.inputAttachments.length;
+        files.forEach((file) => {
+            if (this.inputAttachments.find((a) => a.name === file.name)) {
+                return;
+            }
+            const isImage = file.type.startsWith('image/');
+            newAttachments.push({
+                id: Date.now().toString() + count++,
+                url: URL.createObjectURL(file),
+                name: file.name,
+                file: file,
+                thumbnail: isImage ? URL.createObjectURL(file) : undefined,
+            });
+        });
+        const allowed = this.emitEvent('igcAttachmentChange', {
+            detail: [...this.inputAttachments, ...newAttachments],
+            cancelable: true,
+        });
+        if (allowed) {
+            this.inputAttachments = [...this.inputAttachments, ...newAttachments];
+        }
+    }
+    removeAttachment(index) {
+        const allowed = this.emitEvent('igcAttachmentChange', {
+            detail: this.inputAttachments.filter((_, i) => i !== index),
+            cancelable: true,
+        });
+        if (allowed) {
+            this.inputAttachments = this.inputAttachments.filter((_, i) => i !== index);
+        }
+    }
+    handleSuggestionClick(suggestion) {
+        this.addMessage({ text: suggestion });
+        if (this.textArea) {
+            this.textArea.focus();
+        }
+    }
+    updateOptions(options) {
+        this.options = { ...this.options, ...options };
+    }
+    updateAcceptedTypesCache() {
+        if (!this.options?.acceptedFiles) {
+            this._acceptedTypesCache = null;
+            return;
+        }
+        const types = this.options?.acceptedFiles
+            .split(',')
+            .map((type) => type.trim().toLowerCase());
+        this._acceptedTypesCache = {
+            extensions: new Set(types.filter((t) => t.startsWith('.'))),
+            mimeTypes: new Set(types.filter((t) => !t.startsWith('.') && !t.endsWith('/*'))),
+            wildcardTypes: new Set(types.filter((t) => t.endsWith('/*')).map((t) => t.slice(0, -2))),
+        };
+    }
+    isFileTypeAccepted(file, type = '') {
+        if (!this._acceptedTypesCache)
+            return true;
+        if (file === null && type === '')
+            return false;
+        const fileType = file != null ? file.type.toLowerCase() : type.toLowerCase();
+        const fileExtension = file != null
+            ? `.${file.name.split('.').pop()?.toLowerCase()}`
+            : `.${type.split('/').pop()?.toLowerCase()}`;
+        if (this._acceptedTypesCache.extensions.has(fileExtension)) {
+            return true;
+        }
+        if (this._acceptedTypesCache.mimeTypes.has(fileType)) {
+            return true;
+        }
+        const [fileBaseType] = fileType.split('/');
+        return this._acceptedTypesCache.wildcardTypes.has(fileBaseType);
+    }
+    hasSlotContent(name) {
+        return (this._host.renderRoot.querySelector(`slot[name=${name}]`)
+            ?.childNodes.length !== 0);
+    }
+}
+export function createChatState(host) {
+    return new ChatState(host);
+}
+//# sourceMappingURL=chat-state.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chat-state.js","sourceRoot":"","sources":["../../../src/components/chat/chat-state.ts"],"names":[],"mappings":"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","sourcesContent":["import type IgcTextareaComponent from '../textarea/textarea.js';\nimport type IgcChatComponent from './chat.js';\nimport type { IgcChatComponentEventMap } from './chat.js';\nimport type {\n  IgcChatOptions,\n  IgcMessage,\n  IgcMessageAttachment,\n} from './types.js';\n\n/**\n * Internal state manager for the `<igc-chat>` component.\n *\n * Manages messages, input value, attachments, options, and event emissions.\n */\nexport class ChatState {\n  //#region Internal properties and state /** The host `<igc-chat>` component instance */\n  private readonly _host: IgcChatComponent;\n  /** Reference to the text area input component */\n  private _textArea: IgcTextareaComponent | null = null;\n  /** The current list of messages */\n  private _messages: IgcMessage[] = [];\n  /** Sorted copy of messages by timestamp */\n  private _sortedMessages: IgcMessage[] = [];\n  /** Chat options/configuration */\n  private _options?: IgcChatOptions;\n  /** List of current input attachments */\n  private _inputAttachments: IgcMessageAttachment[] = [];\n  /** Current input text */\n  private _inputValue = '';\n  /**\n   * Cache of accepted file types, organized into extensions, mimeTypes, and wildcardTypes\n   */\n  private _acceptedTypesCache: {\n    extensions: Set<string>;\n    mimeTypes: Set<string>;\n    wildcardTypes: Set<string>;\n  } | null = null;\n\n  private _suggestionsPosition: 'below-input' | 'below-messages' =\n    'below-messages';\n  //#endregion\n\n  //#region Public properties\n  /**\n   * Array of message IDs sorted by timestamp ascending.\n   */\n  public get sortedMessagesIds(): string[] {\n    return this._sortedMessages.map((m) => m.id);\n  }\n\n  /**\n   * Gets the list of chat messages.\n   */\n  public get messages(): IgcMessage[] {\n    return this._messages;\n  }\n\n  /**\n   * Sets the list of chat messages.\n   * Also sorts messages by timestamp and requests host update.\n   */\n  public set messages(value: IgcMessage[]) {\n    this._messages = value;\n    this._sortedMessages = value.slice().sort((a, b) => {\n      return a.timestamp.getTime() - b.timestamp.getTime();\n    });\n    this._host.requestUpdate();\n  }\n\n  /**\n   * Gets current chat options.\n   */\n  public get options(): IgcChatOptions | undefined {\n    return this._options;\n  }\n\n  /**\n   * Sets chat options and requests host update.\n   */\n  public set options(value: IgcChatOptions) {\n    this._options = value;\n    this._host.requestUpdate();\n  }\n\n  /**\n   * Gets the current user ID from options or returns 'user' as fallback.\n   */\n  public get currentUserId(): string {\n    return this._options?.currentUserId ?? 'user';\n  }\n\n  /**\n   * Gets the current suggestionsPosition from options or returns the default value 'below-messages'.\n   */\n  public get suggestionsPosition(): string {\n    return this._options?.suggestionsPosition ?? this._suggestionsPosition;\n  }\n  /**\n   * Gets the text area component.\n   */\n  public get textArea(): IgcTextareaComponent | null {\n    return this._textArea;\n  }\n\n  /**\n   * Sets the text area component.\n   */\n  public set textArea(value: IgcTextareaComponent) {\n    this._textArea = value;\n  }\n\n  /**\n   * Gets the list of attachments currently attached to input.\n   */\n  public get inputAttachments(): IgcMessageAttachment[] {\n    return this._inputAttachments;\n  }\n\n  /**\n   * Sets the input attachments and requests host update.\n   */\n  public set inputAttachments(value: IgcMessageAttachment[]) {\n    this._inputAttachments = value;\n    this._host.requestUpdate(); // Notify the host component to re-render\n  }\n\n  /**\n   * Gets the current input value.\n   */\n  public get inputValue(): string {\n    return this._inputValue;\n  }\n\n  /**\n   * Sets the current input value and requests host update.\n   */\n  public set inputValue(value: string) {\n    this._inputValue = value;\n    this._host.requestUpdate();\n  }\n  //#endregion\n\n  /**\n   * Creates an instance of ChatState.\n   * @param chat The host `<igc-chat>` component.\n   */\n  constructor(chat: IgcChatComponent) {\n    this._host = chat;\n  }\n\n  //#region Event handlers\n\n  /**\n   * Emits a custom event from the host component.\n   * @param name Event name (key of IgcChatComponentEventMap)\n   * @param args Event detail or options\n   * @returns true if event was not canceled, false otherwise\n   */\n  public emitEvent(name: keyof IgcChatComponentEventMap, args?: any) {\n    return this._host.emitEvent(name, args);\n  }\n\n  /**\n   * Handles input text changes.\n   * Updates internal inputValue and emits 'igcInputChange' event.\n   * @param value New input value\n   */\n  public handleInputChange(value: string): void {\n    this.inputValue = value;\n    this.emitEvent('igcInputChange', { detail: { value: this.inputValue } });\n  }\n\n  //#endregion\n\n  //#region Public API\n\n  /**\n   * Adds a new chat message.\n   * Emits 'igcMessageCreated' event which can be canceled to prevent adding.\n   * Clears input value and attachments on success.\n   * @param message Partial message object with optional id, sender, timestamp\n   */\n  public addMessage(message: {\n    id?: string;\n    text: string;\n    sender?: string;\n    timestamp?: Date;\n    attachments?: IgcMessageAttachment[];\n  }): void {\n    const newMessage: IgcMessage = {\n      id: message.id ?? Date.now().toString(),\n      text: message.text,\n      sender: message.sender ?? this.currentUserId,\n      timestamp: message.timestamp ?? new Date(),\n      attachments: message.attachments || [],\n    };\n\n    const allowed = this.emitEvent('igcMessageCreated', {\n      detail: newMessage,\n      cancelable: true,\n    });\n\n    if (allowed) {\n      if (!this.messages.some((msg) => msg.id === newMessage.id)) {\n        this.messages = [...this.messages, newMessage];\n      }\n      this.inputValue = '';\n      this.inputAttachments = [];\n    }\n  }\n\n  /**\n   * Adds files as attachments to the input.\n   * Emits 'igcAttachmentChange' event which can be canceled to prevent adding.\n   * @param files Array of File objects to attach\n   */\n  public attachFiles(files: File[]) {\n    const newAttachments: IgcMessageAttachment[] = [];\n    let count = this.inputAttachments.length;\n    files.forEach((file) => {\n      if (this.inputAttachments.find((a) => a.name === file.name)) {\n        return;\n      }\n\n      const isImage = file.type.startsWith('image/');\n      newAttachments.push({\n        id: Date.now().toString() + count++,\n        url: URL.createObjectURL(file),\n        name: file.name,\n        file: file,\n        thumbnail: isImage ? URL.createObjectURL(file) : undefined,\n      });\n    });\n\n    const allowed = this.emitEvent('igcAttachmentChange', {\n      detail: [...this.inputAttachments, ...newAttachments],\n      cancelable: true,\n    });\n    if (allowed) {\n      this.inputAttachments = [...this.inputAttachments, ...newAttachments];\n    }\n  }\n\n  /**\n   * Removes an attachment by index.\n   * Emits 'igcAttachmentChange' event which can be canceled to prevent removal.\n   * @param index Index of the attachment to remove\n   */\n  public removeAttachment(index: number): void {\n    const allowed = this.emitEvent('igcAttachmentChange', {\n      detail: this.inputAttachments.filter((_, i) => i !== index),\n      cancelable: true,\n    });\n    if (allowed) {\n      this.inputAttachments = this.inputAttachments.filter(\n        (_, i) => i !== index\n      );\n    }\n  }\n\n  /**\n   * Handles when a suggestion is clicked.\n   * Adds the suggestion as a new message and focuses the text area.\n   * @param suggestion The suggestion string clicked\n   */\n  public handleSuggestionClick(suggestion: string): void {\n    this.addMessage({ text: suggestion });\n    if (this.textArea) {\n      this.textArea.focus();\n    }\n  }\n\n  /**\n   * Updates the chat options partially.\n   * @param options Partial options to merge with current options\n   */\n  public updateOptions(options: Partial<IgcChatOptions>): void {\n    this.options = { ...this.options, ...options };\n  }\n\n  /**\n   * Updates the internal cache for accepted file types.\n   * Parses the acceptedFiles string option into extensions, mimeTypes, and wildcard types.\n   */\n  public updateAcceptedTypesCache() {\n    if (!this.options?.acceptedFiles) {\n      this._acceptedTypesCache = null;\n      return;\n    }\n\n    const types = this.options?.acceptedFiles\n      .split(',')\n      .map((type) => type.trim().toLowerCase());\n    this._acceptedTypesCache = {\n      extensions: new Set(types.filter((t) => t.startsWith('.'))),\n      mimeTypes: new Set(\n        types.filter((t) => !t.startsWith('.') && !t.endsWith('/*'))\n      ),\n      wildcardTypes: new Set(\n        types.filter((t) => t.endsWith('/*')).map((t) => t.slice(0, -2))\n      ),\n    };\n  }\n\n  /**\n   * Checks if a file's type or extension is accepted by the chat's acceptedFiles setting.\n   * @param file File object to check\n   * @param type Optional MIME type override if no file provided\n   * @returns True if accepted, false otherwise\n   */\n  public isFileTypeAccepted(file: File, type = ''): boolean {\n    if (!this._acceptedTypesCache) return true;\n\n    if (file === null && type === '') return false;\n\n    const fileType =\n      file != null ? file.type.toLowerCase() : type.toLowerCase();\n    const fileExtension =\n      file != null\n        ? `.${file.name.split('.').pop()?.toLowerCase()}`\n        : `.${type.split('/').pop()?.toLowerCase()}`;\n\n    // Check file extension\n    if (this._acceptedTypesCache.extensions.has(fileExtension)) {\n      return true;\n    }\n\n    // Check exact MIME type\n    if (this._acceptedTypesCache.mimeTypes.has(fileType)) {\n      return true;\n    }\n\n    // Check wildcard MIME types\n    const [fileBaseType] = fileType.split('/');\n    return this._acceptedTypesCache.wildcardTypes.has(fileBaseType);\n  }\n\n  /**\n   * Checks if a slot is empty.\n   * @param name Slot name to check\n   * @returns True if the slot has content, false otherwise\n   */\n  public hasSlotContent(name: string): boolean {\n    return (\n      this._host.renderRoot.querySelector<HTMLSlotElement>(`slot[name=${name}]`)\n        ?.childNodes.length !== 0\n    );\n  }\n  //#endregion\n}\n\nexport function createChatState(host: IgcChatComponent): ChatState {\n  return new ChatState(host);\n}\n"]}

package/components/chat/chat.d.ts

@@ -0,0 +1,164 @@
+import { LitElement, type TemplateResult } 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 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 _context;
+    private _hasContent;
+    private _chatInput;
+    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;
+    /** Returns the default attachments element. */
+    get defaultAttachments(): TemplateResult;
+    /** Returns the default textarea element. */
+    get defaultTextArea(): TemplateResult;
+    /** Returns the default file upload button element. */
+    get defaultFileUploadButton(): TemplateResult;
+    /** Returns the default send message button element. */
+    get defaultSendButton(): TemplateResult;
+    protected contextChanged(): void;
+    private renderHeader;
+    private renderSuggestions;
+    protected firstUpdated(): void;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    protected render(): TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        /** The `<igc-chat>` custom element. */
+        'igc-chat': IgcChatComponent;
+    }
+}
+export {};

package/components/chat/chat.js

@@ -0,0 +1,168 @@
+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, state } from 'lit/decorators.js';
+import { addThemingController } from '../../theming/theming-controller.js';
+import IgcButtonComponent from '../button/button.js';
+import { chatContext } from '../common/context.js';
+import { watch } from '../common/decorators/watch.js';
+import { registerComponent } from '../common/definitions/register.js';
+import { EventEmitterMixin } from '../common/mixins/event-emitter.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';
+class IgcChatComponent extends EventEmitterMixin(LitElement) {
+    static register() {
+        registerComponent(IgcChatComponent, IgcChatInputComponent, IgcChatMessageListComponent, IgcButtonComponent);
+    }
+    constructor() {
+        super();
+        this._chatState = createChatState(this);
+        this._context = new ContextProvider(this, {
+            context: chatContext,
+            initialValue: this._chatState,
+        });
+        this._hasContent = false;
+        addThemingController(this, all);
+    }
+    set messages(value) {
+        this._chatState.messages = value;
+    }
+    get messages() {
+        return this._chatState.messages;
+    }
+    set draftMessage(value) {
+        if (this._chatState) {
+            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;
+    }
+    get defaultAttachments() {
+        return this._chatInput.defaultAttachmentsArea;
+    }
+    get defaultTextArea() {
+        return this._chatInput.defaultTextArea;
+    }
+    get defaultFileUploadButton() {
+        return this._chatInput.defaultFileUploadButton;
+    }
+    get defaultSendButton() {
+        return this._chatInput.defaultSendButton;
+    }
+    contextChanged() {
+        this._context.setValue(this._chatState, true);
+    }
+    renderHeader() {
+        return html ` <div part="header">
+      <slot name="prefix" part="prefix"></slot>
+      <slot name="title" part="title"
+        >${this._chatState.options?.headerText}</slot
+      >
+      <slot name="actions" part="actions"></slot>
+    </div>`;
+    }
+    renderSuggestions() {
+        return html ` <div
+      part="suggestions-container"
+      role="list"
+      aria-label="Suggestions"
+    >
+      <slot name="suggestions-header" part="suggestions-header"></slot>
+      <slot name="suggestions" part="suggestions">
+        ${this._chatState.options?.suggestions?.map((suggestion) => html `
+            <slot name="suggestion" part="suggestion" role="listitem">
+              <igc-chip
+                @click=${() => this._chatState?.handleSuggestionClick(suggestion)}
+              >
+                <span>${suggestion}</span>
+              </igc-chip>
+            </slot>
+          `)}
+      </slot>
+      <slot name="suggestions-actions" part="suggestions-actions"></slot>
+    </div>`;
+    }
+    firstUpdated() {
+        this._context.setValue(this._chatState, true);
+    }
+    createRenderRoot() {
+        const root = super.createRenderRoot();
+        root.addEventListener('slotchange', () => {
+            this._hasContent =
+                this._chatState?.hasSlotContent('prefix') ||
+                    this._chatState?.hasSlotContent('title') ||
+                    this._chatState?.hasSlotContent('actions');
+        });
+        return root;
+    }
+    render() {
+        const hasSuggestions = this._chatState.options?.suggestions &&
+            this._chatState.options.suggestions.length > 0;
+        return html `
+      <div part="chat-container">
+        ${this._hasContent || this._chatState.options?.headerText
+            ? this.renderHeader()
+            : nothing}
+        ${this.messages.length === 0
+            ? html `<div part="empty-state">
+              <slot name="empty-state"> </slot>
+            </div>`
+            : html `<igc-chat-message-list> </igc-chat-message-list>`}
+        ${hasSuggestions &&
+            this._chatState.suggestionsPosition === 'below-messages'
+            ? this.renderSuggestions()
+            : nothing}
+        <igc-chat-input> </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([
+    state()
+], IgcChatComponent.prototype, "_hasContent", void 0);
+__decorate([
+    query(IgcChatInputComponent.tagName)
+], IgcChatComponent.prototype, "_chatInput", void 0);
+__decorate([
+    property({ reflect: true, attribute: false })
+], IgcChatComponent.prototype, "messages", null);
+__decorate([
+    property({ reflect: true, attribute: false })
+], IgcChatComponent.prototype, "draftMessage", null);
+__decorate([
+    property({ attribute: false })
+], IgcChatComponent.prototype, "options", null);
+__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, type TemplateResult } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport IgcButtonComponent from '../button/button.js';\nimport { chatContext } from '../common/context.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport type { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.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 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\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    );\n  }\n\n  private readonly _chatState = createChatState(this);\n\n  private _context = new ContextProvider(this, {\n    context: chatContext,\n    initialValue: this._chatState,\n  });\n\n  @state()\n  private _hasContent = false;\n\n  @query(IgcChatInputComponent.tagName)\n  private _chatInput!: IgcChatInputComponent;\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({ reflect: true, 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({ reflect: true, attribute: false })\n  public set draftMessage(value: {\n    text: string;\n    attachments?: IgcMessageAttachment[];\n  }) {\n    if (this._chatState) {\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  /** Returns the default attachments element. */\n  public get defaultAttachments(): TemplateResult {\n    return this._chatInput.defaultAttachmentsArea;\n  }\n\n  /** Returns the default textarea element. */\n  public get defaultTextArea(): TemplateResult {\n    return this._chatInput.defaultTextArea;\n  }\n\n  /** Returns the default file upload button element. */\n  public get defaultFileUploadButton(): TemplateResult {\n    return this._chatInput.defaultFileUploadButton;\n  }\n\n  /** Returns the default send message button element. */\n  public get defaultSendButton(): TemplateResult {\n    return this._chatInput.defaultSendButton;\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    return html` <div part=\"header\">\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 renderSuggestions() {\n    return html` <div\n      part=\"suggestions-container\"\n      role=\"list\"\n      aria-label=\"Suggestions\"\n    >\n      <slot name=\"suggestions-header\" part=\"suggestions-header\"></slot>\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-chip\n                @click=${() =>\n                  this._chatState?.handleSuggestionClick(suggestion)}\n              >\n                <span>${suggestion}</span>\n              </igc-chip>\n            </slot>\n          `\n        )}\n      </slot>\n      <slot name=\"suggestions-actions\" part=\"suggestions-actions\"></slot>\n    </div>`;\n  }\n\n  protected override firstUpdated() {\n    this._context.setValue(this._chatState, true);\n  }\n\n  protected override createRenderRoot(): HTMLElement | DocumentFragment {\n    const root = super.createRenderRoot();\n    root.addEventListener('slotchange', () => {\n      this._hasContent =\n        this._chatState?.hasSlotContent('prefix') ||\n        this._chatState?.hasSlotContent('title') ||\n        this._chatState?.hasSlotContent('actions');\n    });\n    return root;\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 part=\"chat-container\">\n        ${this._hasContent || this._chatState.options?.headerText\n          ? this.renderHeader()\n          : nothing}\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> </igc-chat-message-list>`}\n        ${hasSuggestions &&\n        this._chatState.suggestionsPosition === 'below-messages'\n          ? this.renderSuggestions()\n          : nothing}\n        <igc-chat-input> </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-util.d.ts

@@ -0,0 +1,2 @@
+import { type TemplateResult } from 'lit';
+export declare function renderMarkdown(text: string): TemplateResult;

package/components/chat/markdown-util.js

@@ -0,0 +1,22 @@
+import { html } from 'lit';
+import { marked } from 'marked';
+marked.setOptions({
+    gfm: true,
+    breaks: true,
+});
+const renderer = new marked.Renderer();
+renderer.code = (code, language) => {
+    return `<pre><code class="language-${language}">${code}</code></pre>`;
+};
+renderer.link = (href, title, text) => {
+    return `<a href="${href}" target="_blank" rel="noopener noreferrer" ${title ? `title="${title}"` : ''}>${text}</a>`;
+};
+export function renderMarkdown(text) {
+    if (!text)
+        return html ``;
+    const rendered = marked(text, { renderer }).toString();
+    const template = document.createElement('template');
+    template.innerHTML = rendered;
+    return html `${template.content}`;
+}
+//# sourceMappingURL=markdown-util.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"markdown-util.js","sourceRoot":"","sources":["../../../src/components/chat/markdown-util.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAEhC,MAAM,CAAC,UAAU,CAAC;IAChB,GAAG,EAAE,IAAI;IACT,MAAM,EAAE,IAAI;CACb,CAAC,CAAC;AAEH,MAAM,QAAQ,GAAG,IAAI,MAAM,CAAC,QAAQ,EAAE,CAAC;AAGvC,QAAQ,CAAC,IAAI,GAAG,CAAC,IAAI,EAAE,QAAQ,EAAE,EAAE;IACjC,OAAO,8BAA8B,QAAQ,KAAK,IAAI,eAAe,CAAC;AACxE,CAAC,CAAC;AAGF,QAAQ,CAAC,IAAI,GAAG,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;IACpC,OAAO,YAAY,IAAI,+CAA+C,KAAK,CAAC,CAAC,CAAC,UAAU,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,MAAM,CAAC;AACtH,CAAC,CAAC;AAEF,MAAM,UAAU,cAAc,CAAC,IAAY;IACzC,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAA,EAAE,CAAC;IAEzB,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,QAAQ,EAAE,CAAC;IACvD,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACpD,QAAQ,CAAC,SAAS,GAAG,QAAQ,CAAC;IAE9B,OAAO,IAAI,CAAA,GAAG,QAAQ,CAAC,OAAO,EAAE,CAAC;AACnC,CAAC","sourcesContent":["import { html, type TemplateResult } from 'lit';\nimport { marked } from 'marked';\n\nmarked.setOptions({\n  gfm: true,\n  breaks: true,\n});\n\nconst renderer = new marked.Renderer();\n\n// Customize code rendering\nrenderer.code = (code, language) => {\n  return `<pre><code class=\"language-${language}\">${code}</code></pre>`;\n};\n\n// Customize link rendering\nrenderer.link = (href, title, text) => {\n  return `<a href=\"${href}\" target=\"_blank\" rel=\"noopener noreferrer\" ${title ? `title=\"${title}\"` : ''}>${text}</a>`;\n};\n\nexport function renderMarkdown(text: string): TemplateResult {\n  if (!text) return html``;\n\n  const rendered = marked(text, { renderer }).toString();\n  const template = document.createElement('template');\n  template.innerHTML = rendered;\n\n  return html`${template.content}`;\n}\n"]}

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

@@ -0,0 +1,45 @@
+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();
+    private handleHeaderClick;
+    private getURL;
+    private defaulAttachmentContent;
+    private renderAttachmentHeaderText;
+    private renderAttachmentHeaderActions;
+    private renderAttachmentContent;
+    private renderDefaultAttachmentsTemplate;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-message-attachments': IgcMessageAttachmentsComponent;
+    }
+}