igniteui-webcomponents 6.3.0-beta.1 → 6.3.1

package/CHANGELOG.md

@@ -4,6 +4,22 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [6.3.1] - 2025-09-18
+### Fixed
+- peerDependencies versions
+
+## [6.3.0] - 2025-09-18
+### Added
+- Chat component
+
+### Fixed
+- #### List
+  - removed duplicated CSS variables across list components and themes [#1853](https://github.com/IgniteUI/igniteui-webcomponents/pull/1853)
+
+## [6.2.2] - 2025-09-16
+### Fixed
+- Minor bug fixes around styles
+
 ## [6.2.1] - 2025-09-01
 ### Added
 - #### Date picker
@@ -1010,6 +1026,9 @@ Initial release of Ignite UI Web Components
 - Ripple component
 - Switch component
 
+[6.3.1]: https://github.com/IgniteUI/igniteui-webcomponents/compare/6.3.0...6.3.1
+[6.3.0]: https://github.com/IgniteUI/igniteui-webcomponents/compare/6.2.2...6.3.0
+[6.2.2]: https://github.com/IgniteUI/igniteui-webcomponents/compare/6.2.1...6.2.2
 [6.2.1]: https://github.com/IgniteUI/igniteui-webcomponents/compare/6.2.0...6.2.1
 [6.2.0]: https://github.com/IgniteUI/igniteui-webcomponents/compare/6.1.2...6.2.0
 [6.1.2]: https://github.com/IgniteUI/igniteui-webcomponents/compare/6.1.1...6.1.2

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

@@ -22,7 +22,7 @@ import { LitElement } from 'lit';
  * @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 actions-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
@@ -40,8 +40,11 @@ export default class IgcChatInputComponent extends LitElement {
     private _parts;
     private get _acceptedTypes();
     constructor();
-    protected firstUpdated(): void;
+    /** @internal */
+    focusInput(): void;
     private _getRenderer;
+    private _sendMessage;
+    private _handleAttachmentRemoved;
     private _handleKeydown;
     private _handleFileInputClick;
     private _handleFocusState;
@@ -49,11 +52,6 @@ export default class IgcChatInputComponent extends LitElement {
     private _handleDragOver;
     private _handleDragLeave;
     private _handleDrop;
-    /**
-     * Handles input text changes.
-     * Updates internal inputValue and emits 'igcInputChange' event.
-     * @param e Input event from the text area
-     */
     private _handleInput;
     private _handleFileUpload;
     /**
@@ -68,17 +66,7 @@ export default class IgcChatInputComponent extends LitElement {
      * @returns TemplateResult containing the text area
      */
     private _renderTextArea;
-    /**
-     * Default file upload button template used when no custom template is provided.
-     * Renders a file input for attaching files.
-     * @returns TemplateResult containing the file upload button
-     */
     private _renderFileUploadButton;
-    /**
-     * Default send button template used when no custom template is provided.
-     * Renders a send button that submits the current input value and attachments.
-     * @returns TemplateResult containing the send button
-     */
     private _renderSendButton;
     private _renderActionsArea;
     protected render(): import("lit-html").TemplateResult<1>;

package/components/chat/chat-input.js

@@ -17,7 +17,7 @@ import { chatContext, chatUserInputContext } from '../common/context.js';
 import { enterKey } from '../common/controllers/key-bindings.js';
 import { registerComponent } from '../common/definitions/register.js';
 import { partMap } from '../common/part-map.js';
-import { bindIf, hasFiles, isEmpty } from '../common/util.js';
+import { bindIf, hasFiles, isEmpty, trimmedHtml } from '../common/util.js';
 import IgcIconComponent from '../icon/icon.js';
 import IgcTextareaComponent from '../textarea/textarea.js';
 import { styles } from './themes/input.base.css.js';
@@ -39,15 +39,16 @@ export default class IgcChatInputComponent extends LitElement {
             fileUploadButton: () => this._renderFileUploadButton(),
             input: () => this._renderTextArea(),
             inputActions: () => this._renderActionsArea(),
+            inputActionsEnd: () => nothing,
+            inputActionsStart: () => nothing,
             inputAttachments: (ctx) => this._renderAttachmentsArea(ctx.attachments),
             sendButton: () => this._renderSendButton(),
         });
         this._parts = { 'input-container': true, dragging: false };
         addThemingController(this, all);
     }
-    firstUpdated() {
-        this._state.updateAcceptedTypesCache();
-        this._state.textArea = this._textInputElement;
+    focusInput() {
+        this._textInputElement.focus();
     }
     _getRenderer(name) {
         return this._state.options?.renderers
@@ -55,11 +56,30 @@ export default class IgcChatInputComponent extends LitElement {
                 this._defaults[name])
             : this._defaults[name];
     }
+    async _sendMessage() {
+        if (!this._userInputState.hasInputValue &&
+            !this._userInputState.hasInputAttachments) {
+            return;
+        }
+        this._userInputState.addMessageWithEvent({
+            text: this._userInputState.inputValue,
+            attachments: this._userInputState.inputAttachments,
+        });
+        this.style.height = 'auto';
+        await this._userInputState.host.updateComplete;
+        this.focusInput();
+    }
+    _handleAttachmentRemoved(attachment) {
+        const current = this._userInputState.inputAttachments;
+        if (this._state.emitAttachmentRemoved(attachment)) {
+            this._state.inputAttachments = current.toSpliced(current.indexOf(attachment), 1);
+        }
+    }
     _handleKeydown(event) {
-        const isSend = event.key === enterKey && !event.shiftKey;
-        if (isSend) {
+        const isSendRequest = event.key.toLowerCase() === enterKey.toLowerCase() && !event.shiftKey;
+        if (isSendRequest) {
             event.preventDefault();
-            this._state.sendMessage();
+            this._sendMessage();
         }
         else {
             this._state.handleKeyDown(event);
@@ -101,29 +121,28 @@ export default class IgcChatInputComponent extends LitElement {
         this._parts = { 'input-container': true, dragging: false };
         const validFiles = getChatAcceptedFiles(event, this._acceptedTypes);
         this._state.emitEvent('igcAttachmentDrop');
-        this._state.attachFiles(validFiles);
+        this._state.attachFilesWithEvent(validFiles);
         this.requestUpdate();
     }
     _handleInput({ detail }) {
-        if (detail === this._state.inputValue)
-            return;
         this._state.inputValue = detail;
         this._state.emitEvent('igcInputChange', { detail: { value: detail } });
     }
     _handleFileUpload(event) {
         const input = event.target;
         if (hasFiles(input)) {
-            this._state.attachFiles(Array.from(input.files));
+            this._state.attachFilesWithEvent(Array.from(input.files));
         }
     }
     _renderAttachmentsArea(attachments) {
-        return html `${attachments?.map((attachment, index) => html `
+        return html `${attachments?.map((attachment) => html `
         <div part="attachment-wrapper" role="listitem">
           <igc-chip
             removable
-            @igcRemove=${() => this._state.removeAttachment(index)}
+            @igcRemove=${() => this._handleAttachmentRemoved(attachment)}
           >
             <igc-icon
+              part="attachment-icon"
               slot="prefix"
               name=${getIconName(attachment.file?.type ?? attachment.type)}
             ></igc-icon>
@@ -154,7 +173,7 @@ export default class IgcChatInputComponent extends LitElement {
         return html `${cache(attachmentsDisabled
             ? nothing
             : html `
-            <label for="input_attachments" part="upload-button">
+            <label for="input_attachments" part="file-upload">
               <igc-icon-button
                 aria-label="Attach files"
                 variant="flat"
@@ -164,6 +183,7 @@ export default class IgcChatInputComponent extends LitElement {
               <input
                 type="file"
                 id="input_attachments"
+                tabindex="-1"
                 name="input_attachments"
                 aria-label="Upload button"
                 multiple
@@ -182,25 +202,27 @@ export default class IgcChatInputComponent extends LitElement {
         variant="contained"
         part="send-button"
         ?disabled=${!enabled}
-        @click=${this._state.sendMessage}
+        @click=${this._sendMessage}
       ></igc-icon-button>
     `;
     }
     _renderActionsArea() {
-        const ctx = {
-            defaults: this._defaults,
-            instance: this._state.host,
-        };
-        return html `
-      ${this._getRenderer('fileUploadButton')(ctx)}
-      ${this._getRenderer('sendButton')(ctx)}
+        const ctx = { instance: this._state.host };
+        return trimmedHtml `
+      <div part="file-upload-container">
+        ${this._getRenderer('fileUploadButton')(ctx)}
+      </div>
+      <div part="input-actions-start">
+        ${this._getRenderer('inputActionsStart')(ctx)}
+      </div>
+      <div part="send-button-container">${this._getRenderer('sendButton')(ctx)}</div>
+      <div part="input-actions-end">
+        ${this._getRenderer('inputActionsEnd')(ctx)}
+      </div>
     `;
     }
     render() {
-        const ctx = {
-            defaults: this._defaults,
-            instance: this._state.host,
-        };
+        const ctx = { instance: this._state.host };
         const inputCtx = {
             ...ctx,
             attachments: this._state.inputAttachments,
@@ -226,7 +248,7 @@ export default class IgcChatInputComponent extends LitElement {
           ${until(this._getRenderer('input')(inputCtx))}
         </div>
 
-        <div part="buttons-container">
+        <div part="actions-container">
           ${until(this._getRenderer('inputActions')(ctx))}
         </div>
       </div>

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

@@ -1 +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 } from 'lit';\nimport { query, state } from 'lit/decorators.js';\nimport { cache } from 'lit/directives/cache.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { until } from 'lit/directives/until.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport IgcIconButtonComponent from '../button/icon-button.js';\nimport IgcChipComponent from '../chip/chip.js';\nimport { chatContext, chatUserInputContext } from '../common/context.js';\nimport { enterKey } from '../common/controllers/key-bindings.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { partMap } from '../common/part-map.js';\nimport { bindIf, hasFiles, isEmpty } from '../common/util.js';\nimport IgcIconComponent from '../icon/icon.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 type {\n  ChatRendererContext,\n  ChatTemplateRenderer,\n  IgcMessageAttachment,\n  InputRendererContext,\n} from './types.js';\nimport { getChatAcceptedFiles, getIconName } from './utils.js';\n\ntype DefaultInputRenderers = {\n  input: ChatTemplateRenderer<InputRendererContext>;\n  inputActions: ChatTemplateRenderer<ChatRendererContext>;\n  inputAttachments: ChatTemplateRenderer<InputRendererContext>;\n  fileUploadButton: ChatTemplateRenderer<ChatRendererContext>;\n  sendButton: ChatTemplateRenderer<ChatRendererContext>;\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  public static override styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(\n      IgcChatInputComponent,\n      IgcTextareaComponent,\n      IgcIconButtonComponent,\n      IgcChipComponent,\n      IgcIconComponent\n    );\n  }\n\n  private readonly _defaults: Readonly<DefaultInputRenderers> = Object.freeze({\n    fileUploadButton: () => this._renderFileUploadButton(),\n    input: () => this._renderTextArea(),\n    inputActions: () => this._renderActionsArea(),\n    inputAttachments: (ctx) => this._renderAttachmentsArea(ctx.attachments),\n    sendButton: () => this._renderSendButton(),\n  });\n\n  @consume({ context: chatContext, subscribe: true })\n  private readonly _state!: ChatState;\n\n  @consume({ context: chatUserInputContext, subscribe: true })\n  private readonly _userInputState!: ChatState;\n\n  @query(IgcTextareaComponent.tagName)\n  private readonly _textInputElement!: IgcTextareaComponent;\n\n  @query('#input_attachments')\n  protected readonly _fileInput!: HTMLInputElement;\n\n  @state()\n  private _parts = { 'input-container': true, dragging: false };\n\n  private get _acceptedTypes() {\n    return this._state.acceptedFileTypes;\n  }\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n  }\n\n  protected override firstUpdated() {\n    this._state.updateAcceptedTypesCache();\n    this._state.textArea = this._textInputElement;\n  }\n\n  private _getRenderer<U extends keyof DefaultInputRenderers>(\n    name: U\n  ): DefaultInputRenderers[U] {\n    return this._state.options?.renderers\n      ? ((this._state.options.renderers[name] ??\n          this._defaults[name]) as DefaultInputRenderers[U])\n      : this._defaults[name];\n  }\n\n  private _handleKeydown(event: KeyboardEvent): void {\n    const isSend = event.key === enterKey && !event.shiftKey;\n\n    if (isSend) {\n      event.preventDefault();\n      this._state.sendMessage();\n    } else {\n      // TODO:\n      this._state.handleKeyDown(event);\n    }\n  }\n\n  private _handleFileInputClick(): void {\n    this._fileInput.showPicker();\n  }\n\n  private _handleFocusState(event: FocusEvent): void {\n    this._state.emitEvent(\n      event.type === 'focus' ? 'igcInputFocus' : 'igcInputBlur'\n    );\n  }\n\n  private _handleDragEnter(event: DragEvent): void {\n    event.preventDefault();\n    event.stopPropagation();\n\n    const validFiles = getChatAcceptedFiles(event, this._acceptedTypes);\n    this._parts = { 'input-container': true, dragging: !isEmpty(validFiles) };\n    this._state.emitEvent('igcAttachmentDrag');\n  }\n\n  private _handleDragOver(event: DragEvent): void {\n    event.preventDefault();\n    event.stopPropagation();\n  }\n\n  private _handleDragLeave(event: DragEvent): void {\n    event.preventDefault();\n    event.stopPropagation();\n\n    // Check if we're actually leaving the container\n    const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();\n    const x = event.clientX;\n    const y = event.clientY;\n\n    if (\n      x <= rect.left ||\n      x >= rect.right ||\n      y <= rect.top ||\n      y >= rect.bottom\n    ) {\n      this._parts = { 'input-container': true, dragging: false };\n    }\n  }\n\n  private _handleDrop(event: DragEvent): void {\n    event.preventDefault();\n    event.stopPropagation();\n    this._parts = { 'input-container': true, dragging: false };\n\n    const validFiles = getChatAcceptedFiles(event, this._acceptedTypes);\n    this._state.emitEvent('igcAttachmentDrop');\n    this._state.attachFiles(validFiles);\n    this.requestUpdate();\n  }\n\n  /**\n   * Handles input text changes.\n   * Updates internal inputValue and emits 'igcInputChange' event.\n   * @param e Input event from the text area\n   */\n  private _handleInput({ detail }: CustomEvent<string>): void {\n    if (detail === this._state.inputValue) return;\n\n    this._state.inputValue = detail;\n    this._state.emitEvent('igcInputChange', { detail: { value: detail } });\n  }\n\n  private _handleFileUpload(event: Event): void {\n    const input = event.target as HTMLInputElement;\n\n    if (hasFiles(input)) {\n      this._state.attachFiles(Array.from(input.files!));\n    }\n  }\n  /**\n   * Default attachments area template used when no custom template is provided.\n   * Renders the list of input attachments as chips.\n   * @returns TemplateResult containing the attachments area\n   */\n  private _renderAttachmentsArea(attachments: IgcMessageAttachment[]) {\n    return html`${attachments?.map(\n      (attachment, index) => html`\n        <div part=\"attachment-wrapper\" role=\"listitem\">\n          <igc-chip\n            removable\n            @igcRemove=${() => this._state.removeAttachment(index)}\n          >\n            <igc-icon\n              slot=\"prefix\"\n              name=${getIconName(attachment.file?.type ?? attachment.type)}\n            ></igc-icon>\n            <span part=\"attachment-name\">${attachment.name}</span>\n          </igc-chip>\n        </div>\n      `\n    )} `;\n  }\n\n  /**\n   * Default text area template used when no custom template is provided.\n   * Renders a text area for user input.\n   * @returns TemplateResult containing the text area\n   */\n  private _renderTextArea() {\n    return html`\n      <igc-textarea\n        part=\"text-input\"\n        aria-label=\"Chat text input\"\n        placeholder=${ifDefined(this._state.options?.inputPlaceholder)}\n        resize=\"auto\"\n        rows=\"1\"\n        .value=${this._userInputState?.inputValue}\n        @igcInput=${this._handleInput}\n        @keydown=${this._handleKeydown}\n        @focus=${this._handleFocusState}\n        @blur=${this._handleFocusState}\n      ></igc-textarea>\n    `;\n  }\n\n  /**\n   * Default file upload button template used when no custom template is provided.\n   * Renders a file input for attaching files.\n   * @returns TemplateResult containing the file upload button\n   */\n  private _renderFileUploadButton() {\n    const accepted = this._state.options?.acceptedFiles;\n    const attachmentsDisabled = this._state.options?.disableInputAttachments;\n\n    return html`${cache(\n      attachmentsDisabled\n        ? nothing\n        : html`\n            <label for=\"input_attachments\" part=\"upload-button\">\n              <igc-icon-button\n                aria-label=\"Attach files\"\n                variant=\"flat\"\n                name=\"attach_file\"\n                @click=${this._handleFileInputClick}\n              ></igc-icon-button>\n              <input\n                type=\"file\"\n                id=\"input_attachments\"\n                name=\"input_attachments\"\n                aria-label=\"Upload button\"\n                multiple\n                accept=${bindIf(accepted, accepted)}\n                @change=${this._handleFileUpload}\n              />\n            </label>\n          `\n    )}`;\n  }\n\n  /**\n   * Default send button template used when no custom template is provided.\n   * Renders a send button that submits the current input value and attachments.\n   * @returns TemplateResult containing the send button\n   */\n  private _renderSendButton() {\n    const enabled =\n      this._state.hasInputValue || this._state.hasInputAttachments;\n\n    return html`\n      <igc-icon-button\n        aria-label=\"Send message\"\n        name=\"send_message\"\n        variant=\"contained\"\n        part=\"send-button\"\n        ?disabled=${!enabled}\n        @click=${this._state.sendMessage}\n      ></igc-icon-button>\n    `;\n  }\n\n  private _renderActionsArea() {\n    const ctx: ChatRendererContext = {\n      defaults: this._defaults,\n      instance: this._state.host,\n    };\n\n    return html`\n      ${this._getRenderer('fileUploadButton')(ctx)}\n      ${this._getRenderer('sendButton')(ctx)}\n    `;\n  }\n\n  protected override render() {\n    const ctx: ChatRendererContext = {\n      defaults: this._defaults,\n      instance: this._state.host,\n    };\n\n    const inputCtx: InputRendererContext = {\n      ...ctx,\n      attachments: this._state.inputAttachments,\n      value: this._state.inputValue,\n    };\n\n    return html`\n      <div\n        part=${partMap(this._parts)}\n        @dragenter=${this._handleDragEnter}\n        @dragover=${this._handleDragOver}\n        @dragleave=${this._handleDragLeave}\n        @drop=${this._handleDrop}\n      >\n        ${this._state.hasInputAttachments\n          ? html`\n              <div part=\"attachments\" role=\"list\" aria-label=\"Attachments\">\n                ${until(this._getRenderer('inputAttachments')(inputCtx))}\n              </div>\n            `\n          : nothing}\n\n        <div part=\"input-wrapper\">\n          ${until(this._getRenderer('input')(inputCtx))}\n        </div>\n\n        <div part=\"buttons-container\">\n          ${until(this._getRenderer('inputActions')(ctx))}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-chat-input': IgcChatInputComponent;\n  }\n}\n"]}
+{"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 } from 'lit';\nimport { query, state } from 'lit/decorators.js';\nimport { cache } from 'lit/directives/cache.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { until } from 'lit/directives/until.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport IgcIconButtonComponent from '../button/icon-button.js';\nimport IgcChipComponent from '../chip/chip.js';\nimport { chatContext, chatUserInputContext } from '../common/context.js';\nimport { enterKey } from '../common/controllers/key-bindings.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { partMap } from '../common/part-map.js';\nimport { bindIf, hasFiles, isEmpty, trimmedHtml } from '../common/util.js';\nimport IgcIconComponent from '../icon/icon.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 type {\n  ChatInputRenderContext,\n  ChatRenderContext,\n  ChatTemplateRenderer,\n  IgcChatMessageAttachment,\n} from './types.js';\nimport { getChatAcceptedFiles, getIconName } from './utils.js';\n\ntype DefaultInputRenderers = {\n  input: ChatTemplateRenderer<ChatInputRenderContext>;\n  inputActions: ChatTemplateRenderer<ChatRenderContext>;\n  inputActionsEnd: ChatTemplateRenderer<ChatRenderContext>;\n  inputActionsStart: ChatTemplateRenderer<ChatRenderContext>;\n  inputAttachments: ChatTemplateRenderer<ChatInputRenderContext>;\n  fileUploadButton: ChatTemplateRenderer<ChatRenderContext>;\n  sendButton: ChatTemplateRenderer<ChatRenderContext>;\n};\n\n/* blazorSuppress */\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 actions-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  public static override styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(\n      IgcChatInputComponent,\n      IgcTextareaComponent,\n      IgcIconButtonComponent,\n      IgcChipComponent,\n      IgcIconComponent\n    );\n  }\n\n  private readonly _defaults: Readonly<DefaultInputRenderers> = Object.freeze({\n    fileUploadButton: () => this._renderFileUploadButton(),\n    input: () => this._renderTextArea(),\n    inputActions: () => this._renderActionsArea(),\n    inputActionsEnd: () => nothing,\n    inputActionsStart: () => nothing,\n    inputAttachments: (ctx) => this._renderAttachmentsArea(ctx.attachments),\n    sendButton: () => this._renderSendButton(),\n  });\n\n  @consume({ context: chatContext, subscribe: true })\n  private readonly _state!: ChatState;\n\n  @consume({ context: chatUserInputContext, subscribe: true })\n  private readonly _userInputState!: ChatState;\n\n  @query(IgcTextareaComponent.tagName)\n  private readonly _textInputElement!: IgcTextareaComponent;\n\n  @query('#input_attachments')\n  protected readonly _fileInput!: HTMLInputElement;\n\n  @state()\n  private _parts = { 'input-container': true, dragging: false };\n\n  private get _acceptedTypes() {\n    return this._state.acceptedFileTypes;\n  }\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n  }\n\n  /** @internal */\n  public focusInput(): void {\n    this._textInputElement.focus();\n  }\n\n  private _getRenderer<U extends keyof DefaultInputRenderers>(\n    name: U\n  ): DefaultInputRenderers[U] {\n    return this._state.options?.renderers\n      ? ((this._state.options.renderers[name] ??\n          this._defaults[name]) as DefaultInputRenderers[U])\n      : this._defaults[name];\n  }\n\n  private async _sendMessage(): Promise<void> {\n    if (\n      !this._userInputState.hasInputValue &&\n      !this._userInputState.hasInputAttachments\n    ) {\n      return;\n    }\n\n    this._userInputState.addMessageWithEvent({\n      text: this._userInputState.inputValue,\n      attachments: this._userInputState.inputAttachments,\n    });\n\n    this.style.height = 'auto';\n\n    await this._userInputState.host.updateComplete;\n    this.focusInput();\n  }\n\n  private _handleAttachmentRemoved(attachment: IgcChatMessageAttachment): void {\n    const current = this._userInputState.inputAttachments;\n\n    if (this._state.emitAttachmentRemoved(attachment)) {\n      this._state.inputAttachments = current.toSpliced(\n        current.indexOf(attachment),\n        1\n      );\n    }\n  }\n\n  private _handleKeydown(event: KeyboardEvent): void {\n    const isSendRequest =\n      event.key.toLowerCase() === enterKey.toLowerCase() && !event.shiftKey;\n\n    if (isSendRequest) {\n      event.preventDefault();\n      this._sendMessage();\n    } else {\n      // TODO:\n      this._state.handleKeyDown(event);\n    }\n  }\n\n  private _handleFileInputClick(): void {\n    this._fileInput.showPicker();\n  }\n\n  private _handleFocusState(event: FocusEvent): void {\n    this._state.emitEvent(\n      event.type === 'focus' ? 'igcInputFocus' : 'igcInputBlur'\n    );\n  }\n\n  private _handleDragEnter(event: DragEvent): void {\n    event.preventDefault();\n    event.stopPropagation();\n\n    const validFiles = getChatAcceptedFiles(event, this._acceptedTypes);\n    this._parts = { 'input-container': true, dragging: !isEmpty(validFiles) };\n    this._state.emitEvent('igcAttachmentDrag');\n  }\n\n  private _handleDragOver(event: DragEvent): void {\n    event.preventDefault();\n    event.stopPropagation();\n  }\n\n  private _handleDragLeave(event: DragEvent): void {\n    event.preventDefault();\n    event.stopPropagation();\n\n    // Check if we're actually leaving the container\n    const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();\n    const x = event.clientX;\n    const y = event.clientY;\n\n    if (\n      x <= rect.left ||\n      x >= rect.right ||\n      y <= rect.top ||\n      y >= rect.bottom\n    ) {\n      this._parts = { 'input-container': true, dragging: false };\n    }\n  }\n\n  private _handleDrop(event: DragEvent): void {\n    event.preventDefault();\n    event.stopPropagation();\n    this._parts = { 'input-container': true, dragging: false };\n\n    const validFiles = getChatAcceptedFiles(event, this._acceptedTypes);\n    this._state.emitEvent('igcAttachmentDrop');\n    this._state.attachFilesWithEvent(validFiles);\n    this.requestUpdate();\n  }\n\n  private _handleInput({ detail }: CustomEvent<string>): void {\n    this._state.inputValue = detail;\n    this._state.emitEvent('igcInputChange', { detail: { value: detail } });\n  }\n\n  private _handleFileUpload(event: Event): void {\n    const input = event.target as HTMLInputElement;\n\n    if (hasFiles(input)) {\n      this._state.attachFilesWithEvent(Array.from(input.files!));\n    }\n  }\n  /**\n   * Default attachments area template used when no custom template is provided.\n   * Renders the list of input attachments as chips.\n   * @returns TemplateResult containing the attachments area\n   */\n  private _renderAttachmentsArea(attachments: IgcChatMessageAttachment[]) {\n    return html`${attachments?.map(\n      (attachment) => html`\n        <div part=\"attachment-wrapper\" role=\"listitem\">\n          <igc-chip\n            removable\n            @igcRemove=${() => this._handleAttachmentRemoved(attachment)}\n          >\n            <igc-icon\n              part=\"attachment-icon\"\n              slot=\"prefix\"\n              name=${getIconName(attachment.file?.type ?? attachment.type)}\n            ></igc-icon>\n            <span part=\"attachment-name\">${attachment.name}</span>\n          </igc-chip>\n        </div>\n      `\n    )} `;\n  }\n\n  /**\n   * Default text area template used when no custom template is provided.\n   * Renders a text area for user input.\n   * @returns TemplateResult containing the text area\n   */\n  private _renderTextArea() {\n    return html`\n      <igc-textarea\n        part=\"text-input\"\n        aria-label=\"Chat text input\"\n        placeholder=${ifDefined(this._state.options?.inputPlaceholder)}\n        resize=\"auto\"\n        rows=\"1\"\n        .value=${this._userInputState?.inputValue}\n        @igcInput=${this._handleInput}\n        @keydown=${this._handleKeydown}\n        @focus=${this._handleFocusState}\n        @blur=${this._handleFocusState}\n      ></igc-textarea>\n    `;\n  }\n\n  private _renderFileUploadButton() {\n    const accepted = this._state.options?.acceptedFiles;\n    const attachmentsDisabled = this._state.options?.disableInputAttachments;\n\n    return html`${cache(\n      attachmentsDisabled\n        ? nothing\n        : html`\n            <label for=\"input_attachments\" part=\"file-upload\">\n              <igc-icon-button\n                aria-label=\"Attach files\"\n                variant=\"flat\"\n                name=\"attach_file\"\n                @click=${this._handleFileInputClick}\n              ></igc-icon-button>\n              <input\n                type=\"file\"\n                id=\"input_attachments\"\n                tabindex=\"-1\"\n                name=\"input_attachments\"\n                aria-label=\"Upload button\"\n                multiple\n                accept=${bindIf(accepted, accepted)}\n                @change=${this._handleFileUpload}\n              />\n            </label>\n          `\n    )}`;\n  }\n\n  private _renderSendButton() {\n    const enabled =\n      this._state.hasInputValue || this._state.hasInputAttachments;\n\n    return html`\n      <igc-icon-button\n        aria-label=\"Send message\"\n        name=\"send_message\"\n        variant=\"contained\"\n        part=\"send-button\"\n        ?disabled=${!enabled}\n        @click=${this._sendMessage}\n      ></igc-icon-button>\n    `;\n  }\n\n  private _renderActionsArea() {\n    const ctx: ChatRenderContext = { instance: this._state.host };\n\n    return trimmedHtml`\n      <div part=\"file-upload-container\">\n        ${this._getRenderer('fileUploadButton')(ctx)}\n      </div>\n      <div part=\"input-actions-start\">\n        ${this._getRenderer('inputActionsStart')(ctx)}\n      </div>\n      <div part=\"send-button-container\">${this._getRenderer('sendButton')(ctx)}</div>\n      <div part=\"input-actions-end\">\n        ${this._getRenderer('inputActionsEnd')(ctx)}\n      </div>\n    `;\n  }\n\n  protected override render() {\n    const ctx: ChatRenderContext = { instance: this._state.host };\n\n    const inputCtx: ChatInputRenderContext = {\n      ...ctx,\n      attachments: this._state.inputAttachments,\n      value: this._state.inputValue,\n    };\n\n    return html`\n      <div\n        part=${partMap(this._parts)}\n        @dragenter=${this._handleDragEnter}\n        @dragover=${this._handleDragOver}\n        @dragleave=${this._handleDragLeave}\n        @drop=${this._handleDrop}\n      >\n        ${this._state.hasInputAttachments\n          ? html`\n              <div part=\"attachments\" role=\"list\" aria-label=\"Attachments\">\n                ${until(this._getRenderer('inputAttachments')(inputCtx))}\n              </div>\n            `\n          : nothing}\n\n        <div part=\"input-wrapper\">\n          ${until(this._getRenderer('input')(inputCtx))}\n        </div>\n\n        <div part=\"actions-container\">\n          ${until(this._getRenderer('inputActions')(ctx))}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-chat-input': IgcChatInputComponent;\n  }\n}\n"]}

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

@@ -1,11 +1,10 @@
 import { LitElement } from 'lit';
-import type { IgcMessage } from './types.js';
+import type { IgcChatMessage } from './types.js';
 /**
  * A chat message component for displaying individual messages in `<igc-chat>`.
  *
  * @element igc-chat-message
  *
- * @fires igcMessageReact - Fired when a message is reacted to.
  *
  * This component renders a single chat message including:
  * - Message text (sanitized)
@@ -27,10 +26,11 @@ export default class IgcChatMessageComponent extends LitElement {
     /**
      * The chat message to render.
      */
-    message?: IgcMessage;
+    message: IgcChatMessage;
     constructor();
     protected firstUpdated(): void;
     private _getRenderer;
+    private _handleCopy;
     private _handleMessageActionClick;
     private _renderHeader;
     private _renderContent;

package/components/chat/chat-message.js

@@ -14,27 +14,27 @@ import IgcIconButtonComponent from '../button/icon-button.js';
 import { chatContext } from '../common/context.js';
 import { registerComponent } from '../common/definitions/register.js';
 import { partMap } from '../common/part-map.js';
-import { isEmpty } from '../common/util.js';
-import IgcTooltipComponent from '../tooltip/tooltip.js';
+import { isEmpty, trimmedHtml } from '../common/util.js';
 import IgcMessageAttachmentsComponent from './message-attachments.js';
 import { styles } from './themes/message.base.css.js';
 import { all } from './themes/message.js';
 import { styles as shared } from './themes/shared/chat-message/chat-message.common.css.js';
-import { chatMessageAdoptPageStyles, showChatActionsTooltip } from './utils.js';
+import { chatMessageAdoptPageStyles } from './utils.js';
 const LIKE_INACTIVE = 'thumb_up_inactive';
 const LIKE_ACTIVE = 'thumb_up_active';
 const DISLIKE_INACTIVE = 'thumb_down_inactive';
 const DISLIKE_ACTIVE = 'thumb_down_active';
+const COPY_CONTENT = 'copy_content';
+const REGENERATE = 'regenerate';
 export default class IgcChatMessageComponent extends LitElement {
     static { this.tagName = 'igc-chat-message'; }
     static { this.styles = [styles, shared]; }
     static register() {
-        registerComponent(IgcChatMessageComponent, IgcMessageAttachmentsComponent, IgcIconButtonComponent, IgcTooltipComponent);
+        registerComponent(IgcChatMessageComponent, IgcMessageAttachmentsComponent, IgcIconButtonComponent);
     }
     constructor() {
         super();
         this._defaults = Object.freeze({
-            message: () => this._renderMessage(),
             messageHeader: () => this._renderHeader(),
             messageContent: () => this._renderContent(),
             messageAttachments: () => this._renderAttachments(),
@@ -43,50 +43,80 @@ export default class IgcChatMessageComponent extends LitElement {
         addThemingController(this, all);
     }
     firstUpdated() {
-        chatMessageAdoptPageStyles(this);
+        if (this._state.options?.adoptRootStyles) {
+            chatMessageAdoptPageStyles(this);
+        }
     }
     _getRenderer(name) {
         return this._state.options?.renderers
             ? (this._state.options.renderers[name] ?? this._defaults[name])
             : this._defaults[name];
     }
+    async _handleCopy() {
+        const text = this.message.text;
+        const separator = text ? '\n\n' : '';
+        const attachments = this.message.attachments ?? [];
+        const { attachmentLabel, attachmentsListLabel, messageCopied } = this._state.resourceStrings;
+        const attachmentsText = isEmpty(attachments)
+            ? ''
+            : attachments
+                .map(({ name, url }) => `${name ?? attachmentLabel}: ${url ?? ''}`)
+                .join('\n');
+        const payload = attachmentsText
+            ? `${text}${separator}${attachmentsListLabel}:\n${attachmentsText}`
+            : text;
+        try {
+            await navigator.clipboard.writeText(payload);
+            this._state.showActionToast(messageCopied);
+        }
+        catch (err) {
+            throw new Error(`Failed to copy message: ${err}`);
+        }
+    }
     _handleMessageActionClick(event) {
         const targetButton = event.target;
         const button = targetButton.closest(IgcIconButtonComponent.tagName);
-        if (!button)
+        if (!button) {
             return;
-        let reaction = button.getAttribute('name');
-        if (this.message) {
-            if (reaction === LIKE_INACTIVE) {
-                reaction = LIKE_ACTIVE;
-                this.message.reactions = [reaction];
-            }
-            else if (reaction === DISLIKE_INACTIVE) {
-                reaction = DISLIKE_ACTIVE;
-                this.message.reactions = [reaction];
-            }
-            else if (reaction === this.message.reactions?.[0]) {
-                reaction = null;
-                this.message.reactions = [];
-            }
-            this.requestUpdate();
         }
-        this._state.emitEvent('igcMessageReact', {
-            detail: { message: this.message, reaction },
-        });
+        let reaction = button.name;
+        switch (reaction) {
+            case LIKE_INACTIVE:
+            case LIKE_ACTIVE:
+                reaction = this.message.reactions?.includes(LIKE_ACTIVE)
+                    ? LIKE_INACTIVE
+                    : LIKE_ACTIVE;
+                break;
+            case DISLIKE_INACTIVE:
+            case DISLIKE_ACTIVE:
+                reaction = this.message.reactions?.includes(DISLIKE_ACTIVE)
+                    ? DISLIKE_INACTIVE
+                    : DISLIKE_ACTIVE;
+                break;
+            case COPY_CONTENT:
+                reaction = COPY_CONTENT;
+                this._handleCopy();
+                break;
+            case REGENERATE:
+                reaction = REGENERATE;
+                break;
+            default:
+                reaction = '';
+        }
+        this.message.reactions = reaction ? [reaction] : [];
+        this._state.emitMessageReaction({ message: this.message, reaction });
+        this.requestUpdate();
     }
     _renderHeader() {
         return nothing;
     }
     _renderContent() {
-        return this.message?.text
-            ? html `<pre part="plain-text">${this.message.text}</pre>`
-            : nothing;
+        return html `${this.message.text}`;
     }
     _renderActions() {
-        const isSent = this.message?.sender === this._state.currentUserId;
-        const hasText = this.message?.text.trim();
-        const hasAttachments = this.message?.attachments && !isEmpty(this.message?.attachments);
+        const isSent = this.message.sender === this._state.currentUserId;
+        const hasText = this.message.text.trim();
+        const hasAttachments = !isEmpty(this.message.attachments ?? []);
         const isTyping = this._state._isTyping;
         const isLastMessage = this.message === this._state.messages.at(-1);
         const resourceStrings = this._state.resourceStrings;
@@ -94,16 +124,14 @@ export default class IgcChatMessageComponent extends LitElement {
             return nothing;
         }
         return html `
-      <div @click=${this._handleMessageActionClick}>
-        ${this._renderActionButton('copy_content', resourceStrings.reactionCopy)}
-        ${this._renderActionButton(this.message?.reactions?.includes(LIKE_ACTIVE)
+      ${this._renderActionButton(COPY_CONTENT, resourceStrings.reactionCopy)}
+      ${this._renderActionButton(this.message.reactions?.includes(LIKE_ACTIVE)
             ? LIKE_ACTIVE
             : LIKE_INACTIVE, resourceStrings.reactionLike)}
-        ${this._renderActionButton(this.message?.reactions?.includes(DISLIKE_ACTIVE)
+      ${this._renderActionButton(this.message.reactions?.includes(DISLIKE_ACTIVE)
             ? DISLIKE_ACTIVE
             : DISLIKE_INACTIVE, resourceStrings.reactionDislike)}
-        ${this._renderActionButton('regenerate', resourceStrings.reactionRegenerate)}
-      </div>
+      ${this._renderActionButton(REGENERATE, resourceStrings.reactionRegenerate)}
     `;
     }
     _renderActionButton(name, tooltipMessage) {
@@ -112,29 +140,50 @@ export default class IgcChatMessageComponent extends LitElement {
         id=${`${name}-button`}
         name=${name}
         variant="flat"
-        @pointerenter=${({ target }) => showChatActionsTooltip(target, tooltipMessage)}
-        @focus=${({ target }) => showChatActionsTooltip(target, tooltipMessage)}
+        @pointerenter=${({ target }) => this._state.showActionsTooltip(target, tooltipMessage)}
+        @focus=${({ target }) => this._state.showActionsTooltip(target, tooltipMessage)}
       ></igc-icon-button>
     `;
     }
     _renderAttachments() {
-        return isEmpty(this.message?.attachments ?? [])
+        return isEmpty(this.message.attachments ?? [])
             ? nothing
             : html `
           <igc-message-attachments
             .message=${this.message}
+            exportparts="
+              attachment,
+              attachment-header,
+              attachment-icon,
+              file-name,
+              attachment-content"
           ></igc-message-attachments>
         `;
     }
     _renderMessage() {
-        return this.message
-            ? html `${this._renderHeader()}${this._renderContent()}${this._renderAttachments()}${this._renderActions()}`
-            : nothing;
+        const ctx = {
+            message: this.message,
+            instance: this._state.host,
+        };
+        return trimmedHtml `
+      <div part="message-header">
+        ${until(this._getRenderer('messageHeader')(ctx))}
+      </div>
+      <div part="plain-text">
+        ${until(this._getRenderer('messageContent')(ctx))}
+      </div>
+      <div part="message-attachments">
+        ${until(this._getRenderer('messageAttachments')(ctx))}
+      </div>
+      <div part="message-actions" @click=${this._handleMessageActionClick}>
+        ${until(this._getRenderer('messageActions')(ctx))}
+      </div>
+    `;
     }
     render() {
+        const messageRenderer = this._state.options?.renderers?.message;
         const ctx = {
             message: this.message,
-            defaults: this._defaults,
             instance: this._state.host,
         };
         const parts = {
@@ -145,14 +194,9 @@ export default class IgcChatMessageComponent extends LitElement {
       ${cache(this.message
             ? html `
               <div part=${partMap(parts)}>
-                ${cache(this._state.options?.renderers?.message
-                ? html `${until(this._getRenderer('message')(ctx))}`
-                : html `
-                        ${until(this._getRenderer('messageHeader')(ctx))}
-                        ${until(this._getRenderer('messageContent')(ctx))}
-                        ${until(this._getRenderer('messageAttachments')(ctx))}
-                        ${until(this._getRenderer('messageActions')(ctx))}
-                      `)}
+                ${cache(messageRenderer
+                ? until(messageRenderer(ctx))
+                : this._renderMessage())}
               </div>
             `
             : nothing)}