igniteui-webcomponents 6.2.0 → 6.3.0-alpha.0

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

@@ -0,0 +1,70 @@
+import { LitElement, type TemplateResult } from 'lit';
+/**
+ * A web component that provides the input area for the `igc-chat` interface.
+ *
+ * It supports:
+ * - Text input with automatic resizing
+ * - Sending messages on Enter key (with Shift+Enter for newlines)
+ * - File attachments via file picker or drag-and-drop
+ * - Customizable templates for send button, attachments, and text input
+ * - Emits various chat-related events (typing, input focus/blur, attachment drop, etc.)
+ *
+ * @element igc-chat-input
+ *
+ * @slot - Default unnamed slot for rendering inside the component
+ * @fires igcTypingChange - Fired when the user starts/stops typing
+ * @fires igcInputFocus - Fired when the input area receives focus
+ * @fires igcInputBlur - Fired when the input area loses focus
+ * @fires igcAttachmentDrag - Fired when dragging a file over the input
+ * @fires igcAttachmentDrop - Fired when a file is dropped into the input
+ * @fires igcChange - Fired when file input changes (delegated from `<igc-file-input>`)
+ *
+ * @csspart input-container - Container for the input section
+ * @csspart input-wrapper - Wrapper around the text input
+ * @csspart text-input - The `<igc-textarea>` component
+ * @csspart buttons-container - Container for file upload/send buttons
+ * @csspart send-button - The send icon button
+ * @csspart attachments - Container for rendering attachments
+ * @csspart attachment-wrapper - Wrapper for individual attachment
+ * @csspart attachment-name - Display name of an attachment
+ */
+export default class IgcChatInputComponent extends LitElement {
+    static readonly tagName = "igc-chat-input";
+    static styles: import("lit").CSSResult[];
+    private _chatState?;
+    static register(): void;
+    private textInputElement;
+    private fileInputElement;
+    protected acceptedFilesChange(): void;
+    private inputValue;
+    private inputPlaceholder;
+    private containerPart;
+    constructor();
+    get defaultAttachmentsArea(): TemplateResult;
+    get defaultTextArea(): TemplateResult;
+    get defaultFileUploadButton(): TemplateResult;
+    get defaultSendButton(): TemplateResult;
+    protected renderDefaultFileUploadTemplate(): Generator<TemplateResult<1>, void, unknown>;
+    protected firstUpdated(): void;
+    protected updated(): void;
+    private handleInput;
+    private handleKeyDown;
+    private handleFocus;
+    private handleBlur;
+    private setupDragAndDrop;
+    private handleDragEnter;
+    private handleDragOver;
+    private handleDragLeave;
+    private handleDrop;
+    private sendMessage;
+    private handleFileUpload;
+    private removeAttachment;
+    private renderActionsArea;
+    private renderAttachmentsArea;
+    protected render(): TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-chat-input': IgcChatInputComponent;
+    }
+}

package/components/chat/chat-input.js

@@ -0,0 +1,266 @@
+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 { query, state } from 'lit/decorators.js';
+import { addThemingController } from '../../theming/theming-controller.js';
+import IgcIconButtonComponent from '../button/icon-button.js';
+import IgcChipComponent from '../chip/chip.js';
+import { chatContext } from '../common/context.js';
+import { watch } from '../common/decorators/watch.js';
+import { registerComponent } from '../common/definitions/register.js';
+import IgcFileInputComponent from '../file-input/file-input.js';
+import IgcIconComponent from '../icon/icon.js';
+import { registerIconFromText } from '../icon/icon.registry.js';
+import IgcTextareaComponent from '../textarea/textarea.js';
+import { styles } from './themes/input.base.css.js';
+import { all } from './themes/input.js';
+import { styles as shared } from './themes/shared/input/input.common.css.js';
+import { attachmentIcon, sendButtonIcon } from './types.js';
+class IgcChatInputComponent extends LitElement {
+    static register() {
+        registerComponent(IgcChatInputComponent, IgcTextareaComponent, IgcIconButtonComponent, IgcChipComponent, IgcFileInputComponent, IgcIconComponent);
+    }
+    acceptedFilesChange() {
+        this._chatState?.updateAcceptedTypesCache();
+    }
+    constructor() {
+        super();
+        this.inputValue = '';
+        this.inputPlaceholder = '';
+        this.containerPart = 'input-container';
+        addThemingController(this, all);
+        registerIconFromText('attachment', attachmentIcon, 'material');
+        registerIconFromText('send-message', sendButtonIcon, 'material');
+    }
+    get defaultAttachmentsArea() {
+        return html `${this._chatState?.inputAttachments?.map((attachment, index) => html `
+        <div part="attachment-wrapper" role="listitem">
+          <igc-chip removable @igcRemove=${() => this.removeAttachment(index)}>
+            <span part="attachment-name">${attachment.name}</span>
+          </igc-chip>
+        </div>
+      `)} `;
+    }
+    get defaultTextArea() {
+        return html ` <igc-textarea
+      part="text-input"
+      .placeholder=${this.inputPlaceholder}
+      resize="auto"
+      rows="1"
+      .value=${this.inputValue}
+      @input=${this.handleInput}
+      @keydown=${this.handleKeyDown}
+      @focus=${this.handleFocus}
+      @blur=${this.handleBlur}
+    ></igc-textarea>`;
+    }
+    get defaultFileUploadButton() {
+        return html `
+      <igc-file-input
+        multiple
+        .accept=${this._chatState?.options?.acceptedFiles}
+        @igcChange=${this.handleFileUpload}
+      >
+        <igc-icon
+          slot="file-selector-text"
+          name="attachment"
+          collection="material"
+        ></igc-icon>
+      </igc-file-input>
+    `;
+    }
+    get defaultSendButton() {
+        return html ` <igc-icon-button
+      aria-label="Send message"
+      name="send-message"
+      collection="material"
+      variant="contained"
+      part="send-button"
+      ?disabled=${!this.inputValue.trim() &&
+            this._chatState?.inputAttachments.length === 0}
+      @click=${this.sendMessage}
+    ></igc-icon-button>`;
+    }
+    *renderDefaultFileUploadTemplate() {
+        yield html `${this._chatState?.options?.disableAttachments
+            ? nothing
+            : this.defaultFileUploadButton}`;
+    }
+    firstUpdated() {
+        this.setupDragAndDrop();
+        if (this._chatState) {
+            this._chatState.updateAcceptedTypesCache();
+            this._chatState.textArea = this.textInputElement;
+        }
+    }
+    updated() {
+        this.inputValue = this._chatState?.inputValue || '';
+        this.inputPlaceholder = this._chatState?.options?.inputPlaceholder || '';
+    }
+    handleInput(e) {
+        const target = e.target;
+        this.inputValue = target.value;
+        this._chatState?.handleInputChange(this.inputValue);
+    }
+    handleKeyDown(e) {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            this.sendMessage();
+        }
+        else {
+            this._chatState?.emitEvent('igcTypingChange', {
+                detail: { isTyping: true },
+            });
+            setTimeout(() => {
+                this._chatState?.emitEvent('igcTypingChange', {
+                    detail: { isTyping: false },
+                });
+            }, 3000);
+        }
+    }
+    handleFocus() {
+        this._chatState?.emitEvent('igcInputFocus');
+    }
+    handleBlur() {
+        this._chatState?.emitEvent('igcInputBlur');
+    }
+    setupDragAndDrop() {
+        const container = this.shadowRoot?.querySelector(`div[part='input-container']`);
+        if (container) {
+            container.addEventListener('dragenter', this.handleDragEnter.bind(this));
+            container.addEventListener('dragover', this.handleDragOver.bind(this));
+            container.addEventListener('dragleave', this.handleDragLeave.bind(this));
+            container.addEventListener('drop', this.handleDrop.bind(this));
+        }
+    }
+    handleDragEnter(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        const files = Array.from(e.dataTransfer?.items || []).filter((item) => item.kind === 'file');
+        const hasValidFiles = files.some((item) => this._chatState?.isFileTypeAccepted(item.getAsFile(), item.type));
+        this.containerPart = `input-container ${hasValidFiles ? ' dragging' : ''}`;
+        this._chatState?.emitEvent('igcAttachmentDrag');
+    }
+    handleDragOver(e) {
+        e.preventDefault();
+        e.stopPropagation();
+    }
+    handleDragLeave(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        const rect = e.currentTarget.getBoundingClientRect();
+        const x = e.clientX;
+        const y = e.clientY;
+        if (x <= rect.left ||
+            x >= rect.right ||
+            y <= rect.top ||
+            y >= rect.bottom) {
+            this.containerPart = 'input-container';
+        }
+    }
+    handleDrop(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.containerPart = 'input-container';
+        const files = Array.from(e.dataTransfer?.files || []);
+        if (files.length === 0)
+            return;
+        const validFiles = files.filter((file) => this._chatState?.isFileTypeAccepted(file));
+        this._chatState?.emitEvent('igcAttachmentDrop');
+        this._chatState?.attachFiles(validFiles);
+        this.requestUpdate();
+    }
+    sendMessage() {
+        if (!this.inputValue.trim() &&
+            this._chatState?.inputAttachments.length === 0)
+            return;
+        this._chatState?.addMessage({
+            text: this.inputValue,
+            attachments: this._chatState?.inputAttachments,
+        });
+        this.inputValue = '';
+        if (this.textInputElement) {
+            this.textInputElement.style.height = 'auto';
+        }
+        this.updateComplete.then(() => {
+            this.textInputElement?.focus();
+        });
+    }
+    handleFileUpload(e) {
+        const input = e.target.input;
+        if (!input.files || input.files.length === 0)
+            return;
+        const files = Array.from(input.files);
+        this._chatState?.attachFiles(files);
+        this.requestUpdate();
+        if (this.fileInputElement) {
+            this.fileInputElement.value = '';
+        }
+    }
+    removeAttachment(index) {
+        this._chatState?.removeAttachment(index);
+        this.requestUpdate();
+    }
+    renderActionsArea() {
+        return html `<div part="buttons-container">
+      ${this._chatState?.options?.templates?.textAreaActionsTemplate
+            ? this._chatState?.options?.templates?.textAreaActionsTemplate
+            : html `
+            ${this.renderDefaultFileUploadTemplate()} ${this.defaultSendButton}
+          `}
+    </div>`;
+    }
+    renderAttachmentsArea() {
+        return html `<div part="attachments" role="list" aria-label="Attachments">
+      ${this._chatState?.options?.templates?.textAreaAttachmentsTemplate
+            ? this._chatState.options.templates.textAreaAttachmentsTemplate(this._chatState?.inputAttachments)
+            : this.defaultAttachmentsArea}
+    </div>`;
+    }
+    render() {
+        return html `
+      <div part="${this.containerPart}">
+        ${this._chatState?.inputAttachments &&
+            this._chatState?.inputAttachments.length > 0
+            ? this.renderAttachmentsArea()
+            : nothing}
+        <div part="input-wrapper">
+          ${this._chatState?.options?.templates?.textInputTemplate
+            ? this._chatState.options.templates.textInputTemplate(this._chatState?.inputValue)
+            : this.defaultTextArea}
+        </div>
+        ${this.renderActionsArea()}
+      </div>
+    `;
+    }
+}
+IgcChatInputComponent.tagName = 'igc-chat-input';
+IgcChatInputComponent.styles = [styles, shared];
+export default IgcChatInputComponent;
+__decorate([
+    consume({ context: chatContext, subscribe: true })
+], IgcChatInputComponent.prototype, "_chatState", void 0);
+__decorate([
+    query(IgcTextareaComponent.tagName)
+], IgcChatInputComponent.prototype, "textInputElement", void 0);
+__decorate([
+    query(IgcFileInputComponent.tagName)
+], IgcChatInputComponent.prototype, "fileInputElement", void 0);
+__decorate([
+    watch('acceptedFiles', { waitUntilFirstUpdate: true })
+], IgcChatInputComponent.prototype, "acceptedFilesChange", null);
+__decorate([
+    state()
+], IgcChatInputComponent.prototype, "inputValue", void 0);
+__decorate([
+    state()
+], IgcChatInputComponent.prototype, "inputPlaceholder", void 0);
+__decorate([
+    state()
+], IgcChatInputComponent.prototype, "containerPart", void 0);
+//# sourceMappingURL=chat-input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chat-input.js","sourceRoot":"","sources":["../../../src/components/chat/chat-input.ts"],"names":[],"mappings":"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","sourcesContent":["import { consume } from '@lit/context';\nimport { html, LitElement, nothing, type TemplateResult } from 'lit';\nimport { query, state } from 'lit/decorators.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport IgcIconButtonComponent from '../button/icon-button.js';\nimport IgcChipComponent from '../chip/chip.js';\nimport { chatContext } from '../common/context.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport IgcFileInputComponent from '../file-input/file-input.js';\nimport IgcIconComponent from '../icon/icon.js';\nimport { registerIconFromText } from '../icon/icon.registry.js';\nimport IgcTextareaComponent from '../textarea/textarea.js';\nimport type { ChatState } from './chat-state.js';\nimport { styles } from './themes/input.base.css.js';\nimport { all } from './themes/input.js';\nimport { styles as shared } from './themes/shared/input/input.common.css.js';\nimport { attachmentIcon, sendButtonIcon } from './types.js';\n\n/**\n * A web component that provides the input area for the `igc-chat` interface.\n *\n * It supports:\n * - Text input with automatic resizing\n * - Sending messages on Enter key (with Shift+Enter for newlines)\n * - File attachments via file picker or drag-and-drop\n * - Customizable templates for send button, attachments, and text input\n * - Emits various chat-related events (typing, input focus/blur, attachment drop, etc.)\n *\n * @element igc-chat-input\n *\n * @slot - Default unnamed slot for rendering inside the component\n * @fires igcTypingChange - Fired when the user starts/stops typing\n * @fires igcInputFocus - Fired when the input area receives focus\n * @fires igcInputBlur - Fired when the input area loses focus\n * @fires igcAttachmentDrag - Fired when dragging a file over the input\n * @fires igcAttachmentDrop - Fired when a file is dropped into the input\n * @fires igcChange - Fired when file input changes (delegated from `<igc-file-input>`)\n *\n * @csspart input-container - Container for the input section\n * @csspart input-wrapper - Wrapper around the text input\n * @csspart text-input - The `<igc-textarea>` component\n * @csspart buttons-container - Container for file upload/send buttons\n * @csspart send-button - The send icon button\n * @csspart attachments - Container for rendering attachments\n * @csspart attachment-wrapper - Wrapper for individual attachment\n * @csspart attachment-name - Display name of an attachment\n */\nexport default class IgcChatInputComponent extends LitElement {\n  public static readonly tagName = 'igc-chat-input';\n\n  public static override styles = [styles, shared];\n\n  @consume({ context: chatContext, subscribe: true })\n  private _chatState?: ChatState;\n\n  /* blazorSuppress */\n  public static register() {\n    registerComponent(\n      IgcChatInputComponent,\n      IgcTextareaComponent,\n      IgcIconButtonComponent,\n      IgcChipComponent,\n      IgcFileInputComponent,\n      IgcIconComponent\n    );\n  }\n\n  @query(IgcTextareaComponent.tagName)\n  private textInputElement!: IgcTextareaComponent;\n\n  @query(IgcFileInputComponent.tagName)\n  private fileInputElement!: IgcFileInputComponent;\n\n  @watch('acceptedFiles', { waitUntilFirstUpdate: true })\n  protected acceptedFilesChange(): void {\n    this._chatState?.updateAcceptedTypesCache();\n  }\n\n  @state()\n  private inputValue = '';\n\n  @state()\n  private inputPlaceholder = '';\n\n  @state()\n  private containerPart = 'input-container';\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n    registerIconFromText('attachment', attachmentIcon, 'material');\n    registerIconFromText('send-message', sendButtonIcon, 'material');\n  }\n\n  public get defaultAttachmentsArea(): TemplateResult {\n    return html`${this._chatState?.inputAttachments?.map(\n      (attachment, index) => html`\n        <div part=\"attachment-wrapper\" role=\"listitem\">\n          <igc-chip removable @igcRemove=${() => this.removeAttachment(index)}>\n            <span part=\"attachment-name\">${attachment.name}</span>\n          </igc-chip>\n        </div>\n      `\n    )} `;\n  }\n\n  public get defaultTextArea(): TemplateResult {\n    return html` <igc-textarea\n      part=\"text-input\"\n      .placeholder=${this.inputPlaceholder}\n      resize=\"auto\"\n      rows=\"1\"\n      .value=${this.inputValue}\n      @input=${this.handleInput}\n      @keydown=${this.handleKeyDown}\n      @focus=${this.handleFocus}\n      @blur=${this.handleBlur}\n    ></igc-textarea>`;\n  }\n\n  public get defaultFileUploadButton(): TemplateResult {\n    return html`\n      <igc-file-input\n        multiple\n        .accept=${this._chatState?.options?.acceptedFiles}\n        @igcChange=${this.handleFileUpload}\n      >\n        <igc-icon\n          slot=\"file-selector-text\"\n          name=\"attachment\"\n          collection=\"material\"\n        ></igc-icon>\n      </igc-file-input>\n    `;\n  }\n\n  public get defaultSendButton(): TemplateResult {\n    return html` <igc-icon-button\n      aria-label=\"Send message\"\n      name=\"send-message\"\n      collection=\"material\"\n      variant=\"contained\"\n      part=\"send-button\"\n      ?disabled=${!this.inputValue.trim() &&\n      this._chatState?.inputAttachments.length === 0}\n      @click=${this.sendMessage}\n    ></igc-icon-button>`;\n  }\n\n  protected *renderDefaultFileUploadTemplate() {\n    yield html`${this._chatState?.options?.disableAttachments\n      ? nothing\n      : this.defaultFileUploadButton}`;\n  }\n\n  protected override firstUpdated() {\n    this.setupDragAndDrop();\n    if (this._chatState) {\n      this._chatState.updateAcceptedTypesCache();\n      this._chatState.textArea = this.textInputElement;\n    }\n  }\n\n  protected override updated() {\n    this.inputValue = this._chatState?.inputValue || '';\n    this.inputPlaceholder = this._chatState?.options?.inputPlaceholder || '';\n  }\n\n  private handleInput(e: Event) {\n    const target = e.target as HTMLTextAreaElement;\n    this.inputValue = target.value;\n    this._chatState?.handleInputChange(this.inputValue);\n    // this.adjustTextareaHeight();\n  }\n\n  private handleKeyDown(e: KeyboardEvent) {\n    if (e.key === 'Enter' && !e.shiftKey) {\n      e.preventDefault();\n      this.sendMessage();\n    } else {\n      this._chatState?.emitEvent('igcTypingChange', {\n        detail: { isTyping: true },\n      });\n\n      // wait 3 seconds and dispatch a stop-typing event\n      setTimeout(() => {\n        this._chatState?.emitEvent('igcTypingChange', {\n          detail: { isTyping: false },\n        });\n      }, 3000);\n    }\n  }\n\n  private handleFocus() {\n    this._chatState?.emitEvent('igcInputFocus');\n  }\n\n  private handleBlur() {\n    this._chatState?.emitEvent('igcInputBlur');\n  }\n\n  private setupDragAndDrop() {\n    const container = this.shadowRoot?.querySelector(\n      `div[part='input-container']`\n    ) as HTMLElement;\n    if (container) {\n      container.addEventListener('dragenter', this.handleDragEnter.bind(this));\n      container.addEventListener('dragover', this.handleDragOver.bind(this));\n      container.addEventListener('dragleave', this.handleDragLeave.bind(this));\n      container.addEventListener('drop', this.handleDrop.bind(this));\n    }\n  }\n\n  private handleDragEnter(e: DragEvent) {\n    e.preventDefault();\n    e.stopPropagation();\n\n    const files = Array.from(e.dataTransfer?.items || []).filter(\n      (item) => item.kind === 'file'\n    );\n    const hasValidFiles = files.some((item) =>\n      this._chatState?.isFileTypeAccepted(item.getAsFile() as File, item.type)\n    );\n\n    this.containerPart = `input-container ${hasValidFiles ? ' dragging' : ''}`;\n\n    this._chatState?.emitEvent('igcAttachmentDrag');\n  }\n\n  private handleDragOver(e: DragEvent) {\n    e.preventDefault();\n    e.stopPropagation();\n  }\n\n  private handleDragLeave(e: DragEvent) {\n    e.preventDefault();\n    e.stopPropagation();\n\n    // Check if we're actually leaving the container\n    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();\n    const x = e.clientX;\n    const y = e.clientY;\n\n    if (\n      x <= rect.left ||\n      x >= rect.right ||\n      y <= rect.top ||\n      y >= rect.bottom\n    ) {\n      this.containerPart = 'input-container';\n    }\n  }\n\n  private handleDrop(e: DragEvent) {\n    e.preventDefault();\n    e.stopPropagation();\n    this.containerPart = 'input-container';\n\n    const files = Array.from(e.dataTransfer?.files || []);\n    if (files.length === 0) return;\n\n    const validFiles = files.filter((file) =>\n      this._chatState?.isFileTypeAccepted(file)\n    );\n\n    this._chatState?.emitEvent('igcAttachmentDrop');\n\n    this._chatState?.attachFiles(validFiles);\n    this.requestUpdate();\n  }\n\n  // private adjustTextareaHeight() {\n  //   const textarea = this.textInputElement;\n  //   if (!textarea) return;\n\n  //   textarea.style.height = 'auto';\n  //   const newHeight = Math.min(textarea.scrollHeight, 120);\n  //   textarea.style.height = `${newHeight}px`;\n  // }\n\n  private sendMessage() {\n    if (\n      !this.inputValue.trim() &&\n      this._chatState?.inputAttachments.length === 0\n    )\n      return;\n\n    this._chatState?.addMessage({\n      text: this.inputValue,\n      attachments: this._chatState?.inputAttachments,\n    });\n    this.inputValue = '';\n\n    if (this.textInputElement) {\n      this.textInputElement.style.height = 'auto';\n    }\n\n    this.updateComplete.then(() => {\n      this.textInputElement?.focus();\n    });\n  }\n\n  private handleFileUpload(e: Event) {\n    const input = (e.target as any).input as HTMLInputElement;\n    if (!input.files || input.files.length === 0) return;\n\n    const files = Array.from(input.files);\n    this._chatState?.attachFiles(files);\n    this.requestUpdate();\n\n    if (this.fileInputElement) {\n      this.fileInputElement.value = '';\n    }\n  }\n\n  private removeAttachment(index: number) {\n    this._chatState?.removeAttachment(index);\n    this.requestUpdate();\n  }\n\n  private renderActionsArea() {\n    return html`<div part=\"buttons-container\">\n      ${this._chatState?.options?.templates?.textAreaActionsTemplate\n        ? this._chatState?.options?.templates?.textAreaActionsTemplate\n        : html`\n            ${this.renderDefaultFileUploadTemplate()} ${this.defaultSendButton}\n          `}\n    </div>`;\n  }\n\n  private renderAttachmentsArea() {\n    return html`<div part=\"attachments\" role=\"list\" aria-label=\"Attachments\">\n      ${this._chatState?.options?.templates?.textAreaAttachmentsTemplate\n        ? this._chatState.options.templates.textAreaAttachmentsTemplate(\n            this._chatState?.inputAttachments\n          )\n        : this.defaultAttachmentsArea}\n    </div>`;\n  }\n\n  protected override render() {\n    return html`\n      <div part=\"${this.containerPart}\">\n        ${this._chatState?.inputAttachments &&\n        this._chatState?.inputAttachments.length > 0\n          ? this.renderAttachmentsArea()\n          : nothing}\n        <div part=\"input-wrapper\">\n          ${this._chatState?.options?.templates?.textInputTemplate\n            ? this._chatState.options.templates.textInputTemplate(\n                this._chatState?.inputValue\n              )\n            : this.defaultTextArea}\n        </div>\n        ${this.renderActionsArea()}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-chat-input': IgcChatInputComponent;\n  }\n}\n"]}

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