igniteui-webcomponents 6.3.0-beta.0 → 6.3.0

package/components/chat/chat-message.js

@@ -7,31 +7,34 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { consume } from '@lit/context';
 import { html, LitElement, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
+import { cache } from 'lit/directives/cache.js';
 import { until } from 'lit/directives/until.js';
 import { addThemingController } from '../../theming/theming-controller.js';
-import IgcAvatarComponent from '../avatar/avatar.js';
+import IgcIconButtonComponent from '../button/icon-button.js';
 import { chatContext } from '../common/context.js';
 import { registerComponent } from '../common/definitions/register.js';
 import { partMap } from '../common/part-map.js';
-import { 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';
-class IgcChatMessageComponent extends LitElement {
+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, IgcAvatarComponent, IgcTooltipComponent);
+        registerComponent(IgcChatMessageComponent, IgcMessageAttachmentsComponent, IgcIconButtonComponent);
     }
     constructor() {
         super();
         this._defaults = Object.freeze({
-            message: () => this._renderMessage(),
             messageHeader: () => this._renderHeader(),
             messageContent: () => this._renderContent(),
             messageAttachments: () => this._renderAttachments(),
@@ -40,66 +43,95 @@ 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('igc-icon-button');
-        if (!button)
+        const button = targetButton.closest(IgcIconButtonComponent.tagName);
+        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 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;
-        if (isSent || !hasText || (isLastMessage && isTyping)) {
+        if (isSent || !(hasText || hasAttachments) || (isLastMessage && isTyping)) {
             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) {
@@ -108,59 +140,69 @@ 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;
-    }
-    render() {
-        if (!this.message) {
-            return nothing;
-        }
-        const parts = {
-            'message-container': true,
-            sent: this._state.isCurrentUserMessage(this.message),
-        };
-        const options = this._state.options;
         const ctx = {
-            param: this.message,
-            defaults: this._defaults,
-            options,
+            message: this.message,
+            instance: this._state.host,
         };
-        if (options?.renderers?.message) {
-            return html `
-        <div part=${partMap(parts)}>
-          ${until(options.renderers.message(ctx))}
-        </div>
-      `;
-        }
-        return html `
-      <div part=${partMap(parts)}>
+        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,
+            instance: this._state.host,
+        };
+        const parts = {
+            'message-container': true,
+            sent: this._state.isCurrentUserMessage(this.message),
+        };
+        return html `
+      ${cache(this.message
+            ? html `
+              <div part=${partMap(parts)}>
+                ${cache(messageRenderer
+                ? until(messageRenderer(ctx))
+                : this._renderMessage())}
+              </div>
+            `
+            : nothing)}
+    `;
+    }
 }
-IgcChatMessageComponent.tagName = 'igc-chat-message';
-IgcChatMessageComponent.styles = [styles, shared];
-export default IgcChatMessageComponent;
 __decorate([
     consume({ context: chatContext, subscribe: true })
 ], IgcChatMessageComponent.prototype, "_state", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"chat-message.js","sourceRoot":"","sources":["../../../src/components/chat/chat-message.ts"],"names":[],"mappings":"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","sourcesContent":["import { consume } from '@lit/context';\nimport { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { until } from 'lit/directives/until.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport IgcAvatarComponent from '../avatar/avatar.js';\nimport { chatContext } from '../common/context.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { partMap } from '../common/part-map.js';\nimport { isEmpty } from '../common/util.js';\nimport IgcTooltipComponent from '../tooltip/tooltip.js';\nimport type { ChatState } from './chat-state.js';\nimport IgcMessageAttachmentsComponent from './message-attachments.js';\nimport { styles } from './themes/message.base.css.js';\nimport { all } from './themes/message.js';\nimport { styles as shared } from './themes/shared/chat-message/chat-message.common.css.js';\nimport type { ChatTemplateRenderer, IgcMessage } from './types.js';\nimport { chatMessageAdoptPageStyles, showChatActionsTooltip } from './utils.js';\n\nconst LIKE_INACTIVE = 'thumb_up_inactive';\nconst LIKE_ACTIVE = 'thumb_up_active';\nconst DISLIKE_INACTIVE = 'thumb_down_inactive';\nconst DISLIKE_ACTIVE = 'thumb_down_active';\n\ntype DefaultMessageRenderers = {\n  message: ChatTemplateRenderer<IgcMessage>;\n  messageHeader: ChatTemplateRenderer<IgcMessage>;\n  messageContent: ChatTemplateRenderer<IgcMessage>;\n  messageAttachments: ChatTemplateRenderer<IgcMessage>;\n  messageActions: ChatTemplateRenderer<IgcMessage>;\n};\n\n/**\n * A chat message component for displaying individual messages in `<igc-chat>`.\n *\n * @element igc-chat-message\n *\n * @fires igcMessageReact - Fired when a message is reacted to.\n *\n * This component renders a single chat message including:\n * - Message text (sanitized)\n * - Attachments (if any)\n * - Custom templates for message content and actions (if provided via chat options)\n *\n * It distinguishes sent messages from received messages by comparing\n * the message sender with the current user ID from chat state.\n *\n * The message text is sanitized with DOMPurify before rendering,\n * and can be rendered with a markdown renderer if provided.\n */\nexport default class IgcChatMessageComponent extends LitElement {\n  public static readonly tagName = 'igc-chat-message';\n  public static override styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(\n      IgcChatMessageComponent,\n      IgcMessageAttachmentsComponent,\n      IgcAvatarComponent,\n      IgcTooltipComponent\n    );\n  }\n\n  /**\n   * Injected chat state context. Provides message data, user info, and options.\n   */\n  @consume({ context: chatContext, subscribe: true })\n  private readonly _state!: ChatState;\n\n  private readonly _defaults = Object.freeze<DefaultMessageRenderers>({\n    message: () => this._renderMessage(),\n    messageHeader: () => this._renderHeader(),\n    messageContent: () => this._renderContent(),\n    messageAttachments: () => this._renderAttachments(),\n    messageActions: () => this._renderActions(),\n  });\n\n  /**\n   * The chat message to render.\n   */\n  @property({ attribute: false })\n  public message?: IgcMessage;\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n  }\n\n  protected override firstUpdated(): void {\n    chatMessageAdoptPageStyles(this);\n  }\n\n  private _getRenderer(name: keyof DefaultMessageRenderers) {\n    return this._state.options?.renderers\n      ? (this._state.options.renderers[name] ?? this._defaults[name])\n      : this._defaults[name];\n  }\n\n  private _handleMessageActionClick(event: PointerEvent): void {\n    const targetButton = event.target as HTMLElement;\n    const button = targetButton.closest('igc-icon-button');\n    if (!button) return;\n\n    let reaction = button.getAttribute('name');\n    if (this.message) {\n      if (reaction === LIKE_INACTIVE) {\n        reaction = LIKE_ACTIVE;\n        this.message.reactions = [reaction];\n      } else if (reaction === DISLIKE_INACTIVE) {\n        reaction = DISLIKE_ACTIVE;\n        this.message.reactions = [reaction];\n      } else if (reaction === this.message.reactions?.[0]) {\n        reaction = null;\n        this.message.reactions = [];\n      }\n\n      this.requestUpdate();\n    }\n\n    this._state.emitEvent('igcMessageReact', {\n      detail: { message: this.message, reaction },\n    });\n  }\n\n  private _renderHeader() {\n    return nothing;\n  }\n\n  private _renderContent() {\n    return this.message?.text\n      ? html`<pre part=\"plain-text\">${this.message.text}</pre>`\n      : nothing;\n  }\n\n  private _renderActions() {\n    const isSent = this.message?.sender === this._state.currentUserId;\n    const hasText = this.message?.text.trim();\n    const isTyping = this._state._isTyping;\n    const isLastMessage = this.message === this._state.messages.at(-1);\n    const resourceStrings = this._state.resourceStrings!;\n\n    if (isSent || !hasText || (isLastMessage && isTyping)) {\n      return nothing;\n    }\n\n    return html`\n      <div @click=${this._handleMessageActionClick}>\n        ${this._renderActionButton(\n          'copy_content',\n          resourceStrings.reactionCopy\n        )}\n        ${this._renderActionButton(\n          this.message?.reactions?.includes(LIKE_ACTIVE)\n            ? LIKE_ACTIVE\n            : LIKE_INACTIVE,\n          resourceStrings.reactionLike\n        )}\n        ${this._renderActionButton(\n          this.message?.reactions?.includes(DISLIKE_ACTIVE)\n            ? DISLIKE_ACTIVE\n            : DISLIKE_INACTIVE,\n          resourceStrings.reactionDislike\n        )}\n        ${this._renderActionButton(\n          'regenerate',\n          resourceStrings.reactionRegenerate\n        )}\n      </div>\n    `;\n  }\n\n  private _renderActionButton(name: string, tooltipMessage: string) {\n    return html`\n      <igc-icon-button\n        id=${`${name}-button`}\n        name=${name}\n        variant=\"flat\"\n        @pointerenter=${({ target }: PointerEvent) =>\n          showChatActionsTooltip(target as Element, tooltipMessage)}\n        @focus=${({ target }: FocusEvent) =>\n          showChatActionsTooltip(target as Element, tooltipMessage)}\n      ></igc-icon-button>\n    `;\n  }\n\n  // Default rendering logic for attachments\n  private _renderAttachments() {\n    return isEmpty(this.message?.attachments ?? [])\n      ? nothing\n      : html`\n          <igc-message-attachments\n            .message=${this.message}\n          ></igc-message-attachments>\n        `;\n  }\n\n  /**\n   * Default message template used when no custom template is provided.\n   * Renders the message text, sanitized for security.\n   * @param message The chat message to render\n   * @returns TemplateResult containing the rendered message\n   */\n  private _renderMessage() {\n    return this.message\n      ? html`${this._renderHeader()}${this._renderContent()}${this._renderAttachments()}${this._renderActions()}`\n      : nothing;\n  }\n\n  /**\n   * Renders the chat message template.\n   * - Applies 'sent' CSS class if the message sender matches current user.\n   * - Uses markdown rendering if configured.\n   * - Renders attachments and custom templates if provided.\n   */\n  protected override render() {\n    if (!this.message) {\n      return nothing;\n    }\n\n    const parts = {\n      'message-container': true,\n      sent: this._state.isCurrentUserMessage(this.message),\n    };\n\n    const options = this._state.options;\n    const ctx = {\n      param: this.message,\n      defaults: this._defaults,\n      options,\n    };\n\n    if (options?.renderers?.message) {\n      return html`\n        <div part=${partMap(parts)}>\n          ${until(options.renderers.message(ctx))}\n        </div>\n      `;\n    }\n\n    return html`\n      <div part=${partMap(parts)}>\n        ${until(this._getRenderer('messageHeader')(ctx))}\n        ${until(this._getRenderer('messageContent')(ctx))}\n        ${until(this._getRenderer('messageAttachments')(ctx))}\n        ${until(this._getRenderer('messageActions')(ctx))}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-chat-message': IgcChatMessageComponent;\n  }\n}\n"]}
+{"version":3,"file":"chat-message.js","sourceRoot":"","sources":["../../../src/components/chat/chat-message.ts"],"names":[],"mappings":"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","sourcesContent":["import { consume } from '@lit/context';\nimport { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { cache } from 'lit/directives/cache.js';\nimport { until } from 'lit/directives/until.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport IgcIconButtonComponent from '../button/icon-button.js';\nimport { chatContext } from '../common/context.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { partMap } from '../common/part-map.js';\nimport { isEmpty, trimmedHtml } from '../common/util.js';\nimport type { ChatState } from './chat-state.js';\nimport IgcMessageAttachmentsComponent from './message-attachments.js';\nimport { styles } from './themes/message.base.css.js';\nimport { all } from './themes/message.js';\nimport { styles as shared } from './themes/shared/chat-message/chat-message.common.css.js';\nimport type {\n  ChatMessageRenderContext,\n  ChatTemplateRenderer,\n  IgcChatMessage,\n} from './types.js';\nimport { chatMessageAdoptPageStyles } from './utils.js';\n\nconst LIKE_INACTIVE = 'thumb_up_inactive';\nconst LIKE_ACTIVE = 'thumb_up_active';\nconst DISLIKE_INACTIVE = 'thumb_down_inactive';\nconst DISLIKE_ACTIVE = 'thumb_down_active';\nconst COPY_CONTENT = 'copy_content';\nconst REGENERATE = 'regenerate';\n\ntype DefaultMessageRenderers = {\n  messageHeader: ChatTemplateRenderer<ChatMessageRenderContext>;\n  messageContent: ChatTemplateRenderer<ChatMessageRenderContext>;\n  messageAttachments: ChatTemplateRenderer<ChatMessageRenderContext>;\n  messageActions: ChatTemplateRenderer<ChatMessageRenderContext>;\n};\n\n/* blazorSuppress */\n/**\n * A chat message component for displaying individual messages in `<igc-chat>`.\n *\n * @element igc-chat-message\n *\n *\n * This component renders a single chat message including:\n * - Message text (sanitized)\n * - Attachments (if any)\n * - Custom templates for message content and actions (if provided via chat options)\n *\n * It distinguishes sent messages from received messages by comparing\n * the message sender with the current user ID from chat state.\n *\n * The message text is sanitized with DOMPurify before rendering,\n * and can be rendered with a markdown renderer if provided.\n */\nexport default class IgcChatMessageComponent extends LitElement {\n  public static readonly tagName = 'igc-chat-message';\n  public static override styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(\n      IgcChatMessageComponent,\n      IgcMessageAttachmentsComponent,\n      IgcIconButtonComponent\n    );\n  }\n\n  private readonly _defaults = Object.freeze<DefaultMessageRenderers>({\n    messageHeader: () => this._renderHeader(),\n    messageContent: () => this._renderContent(),\n    messageAttachments: () => this._renderAttachments(),\n    messageActions: () => this._renderActions(),\n  });\n\n  @consume({ context: chatContext, subscribe: true })\n  private readonly _state!: ChatState;\n\n  /**\n   * The chat message to render.\n   */\n  @property({ attribute: false })\n  public message!: IgcChatMessage;\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n  }\n\n  protected override firstUpdated(): void {\n    if (this._state.options?.adoptRootStyles) {\n      chatMessageAdoptPageStyles(this);\n    }\n  }\n\n  private _getRenderer(name: keyof DefaultMessageRenderers) {\n    return this._state.options?.renderers\n      ? (this._state.options.renderers[name] ?? this._defaults[name])\n      : this._defaults[name];\n  }\n\n  private async _handleCopy(): Promise<void> {\n    const text = this.message.text;\n    const separator = text ? '\\n\\n' : '';\n    const attachments = this.message.attachments ?? [];\n    const { attachmentLabel, attachmentsListLabel, messageCopied } =\n      this._state.resourceStrings!;\n\n    const attachmentsText = isEmpty(attachments)\n      ? ''\n      : attachments\n          .map(({ name, url }) => `${name ?? attachmentLabel}: ${url ?? ''}`)\n          .join('\\n');\n\n    const payload = attachmentsText\n      ? `${text}${separator}${attachmentsListLabel}:\\n${attachmentsText}`\n      : text;\n\n    try {\n      await navigator.clipboard.writeText(payload);\n      this._state.showActionToast(messageCopied);\n    } catch (err) {\n      throw new Error(`Failed to copy message: ${err}`);\n    }\n  }\n\n  private _handleMessageActionClick(event: PointerEvent): void {\n    const targetButton = event.target as HTMLElement;\n    const button = targetButton.closest(IgcIconButtonComponent.tagName);\n\n    if (!button) {\n      return;\n    }\n\n    let reaction = button.name;\n\n    switch (reaction) {\n      case LIKE_INACTIVE:\n      case LIKE_ACTIVE:\n        reaction = this.message.reactions?.includes(LIKE_ACTIVE)\n          ? LIKE_INACTIVE\n          : LIKE_ACTIVE;\n        break;\n      case DISLIKE_INACTIVE:\n      case DISLIKE_ACTIVE:\n        reaction = this.message.reactions?.includes(DISLIKE_ACTIVE)\n          ? DISLIKE_INACTIVE\n          : DISLIKE_ACTIVE;\n        break;\n      case COPY_CONTENT:\n        reaction = COPY_CONTENT;\n        this._handleCopy();\n        break;\n      case REGENERATE:\n        reaction = REGENERATE;\n        break;\n      default:\n        reaction = '';\n    }\n\n    this.message.reactions = reaction ? [reaction] : [];\n    this._state.emitMessageReaction({ message: this.message, reaction });\n    this.requestUpdate();\n  }\n\n  private _renderHeader() {\n    return nothing;\n  }\n\n  private _renderContent() {\n    return html`${this.message.text}`;\n  }\n\n  private _renderActions() {\n    const isSent = this.message.sender === this._state.currentUserId;\n    const hasText = this.message.text.trim();\n    const hasAttachments = !isEmpty(this.message.attachments ?? []);\n    const isTyping = this._state._isTyping;\n    const isLastMessage = this.message === this._state.messages.at(-1);\n    const resourceStrings = this._state.resourceStrings!;\n\n    if (isSent || !(hasText || hasAttachments) || (isLastMessage && isTyping)) {\n      return nothing;\n    }\n\n    return html`\n      ${this._renderActionButton(COPY_CONTENT, resourceStrings.reactionCopy)}\n      ${this._renderActionButton(\n        this.message.reactions?.includes(LIKE_ACTIVE)\n          ? LIKE_ACTIVE\n          : LIKE_INACTIVE,\n        resourceStrings.reactionLike\n      )}\n      ${this._renderActionButton(\n        this.message.reactions?.includes(DISLIKE_ACTIVE)\n          ? DISLIKE_ACTIVE\n          : DISLIKE_INACTIVE,\n        resourceStrings.reactionDislike\n      )}\n      ${this._renderActionButton(\n        REGENERATE,\n        resourceStrings.reactionRegenerate\n      )}\n    `;\n  }\n\n  private _renderActionButton(name: string, tooltipMessage: string) {\n    return html`\n      <igc-icon-button\n        id=${`${name}-button`}\n        name=${name}\n        variant=\"flat\"\n        @pointerenter=${({ target }: PointerEvent) =>\n          this._state.showActionsTooltip(target as Element, tooltipMessage)}\n        @focus=${({ target }: FocusEvent) =>\n          this._state.showActionsTooltip(target as Element, tooltipMessage)}\n      ></igc-icon-button>\n    `;\n  }\n\n  private _renderAttachments() {\n    return isEmpty(this.message.attachments ?? [])\n      ? nothing\n      : html`\n          <igc-message-attachments\n            .message=${this.message}\n            exportparts=\"\n              attachment,\n              attachment-header,\n              attachment-icon,\n              file-name,\n              attachment-content\"\n          ></igc-message-attachments>\n        `;\n  }\n\n  private _renderMessage() {\n    const ctx: ChatMessageRenderContext = {\n      message: this.message,\n      instance: this._state.host,\n    };\n\n    return trimmedHtml`\n      <div part=\"message-header\">\n        ${until(this._getRenderer('messageHeader')(ctx))}\n      </div>\n      <div part=\"plain-text\">\n        ${until(this._getRenderer('messageContent')(ctx))}\n      </div>\n      <div part=\"message-attachments\">\n        ${until(this._getRenderer('messageAttachments')(ctx))}\n      </div>\n      <div part=\"message-actions\" @click=${this._handleMessageActionClick}>\n        ${until(this._getRenderer('messageActions')(ctx))}\n      </div>\n    `;\n  }\n\n  protected override render() {\n    const messageRenderer = this._state.options?.renderers?.message;\n    const ctx: ChatMessageRenderContext = {\n      message: this.message,\n      instance: this._state.host,\n    };\n\n    const parts = {\n      'message-container': true,\n      sent: this._state.isCurrentUserMessage(this.message),\n    };\n\n    return html`\n      ${cache(\n        this.message\n          ? html`\n              <div part=${partMap(parts)}>\n                ${cache(\n                  messageRenderer\n                    ? until(messageRenderer(ctx))\n                    : this._renderMessage()\n                )}\n              </div>\n            `\n          : nothing\n      )}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-chat-message': IgcChatMessageComponent;\n  }\n}\n"]}

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

@@ -1,7 +1,6 @@
-import type IgcTextareaComponent from '../textarea/textarea.js';
 import type IgcChatComponent from './chat.js';
 import type { IgcChatComponentEventMap } from './chat.js';
-import type { IgcChatOptions, IgcMessage, IgcMessageAttachment } from './types.js';
+import type { ChatSuggestionsPosition, IgcChatMessage, IgcChatMessageAttachment, IgcChatMessageReaction, IgcChatOptions } from './types.js';
 import { type ChatAcceptedFileTypes } from './utils.js';
 /**
  * Internal state manager for the `<igc-chat>` component.
@@ -12,8 +11,8 @@ export declare class ChatState {
     private readonly _host;
     private readonly _contextUpdateFn;
     private readonly _userInputContextUpdateFn;
-    /** Reference to the text area input component */
-    private _textArea;
+    private _actionsTooltip?;
+    private _actionToast?;
     /** The current list of messages */
     private _messages;
     /** Chat options/configuration */
@@ -26,23 +25,20 @@ export declare class ChatState {
      * Cache of accepted file types, organized into extensions, mimeTypes, and wildcardTypes
      */
     private _acceptedTypesCache;
-    /** Default position of the suggestions */
-    private _suggestionsPosition;
-    /** Default time in milliseconds before dispatching stop typing event */
-    private _stopTypingDelay;
     _isTyping: boolean;
     private _lastTyped;
     resourceStrings: import("../common/i18n/chat.resources.js").IgcChatResourceStrings;
+    get host(): IgcChatComponent;
     get acceptedFileTypes(): ChatAcceptedFileTypes | null;
     get disableAutoScroll(): boolean;
     /**
      * Gets the list of chat messages.
      */
-    get messages(): IgcMessage[];
+    get messages(): IgcChatMessage[];
     /**
      * Sets the list of chat messages.
      */
-    set messages(value: IgcMessage[]);
+    set messages(value: IgcChatMessage[]);
     /**
      * Gets current chat options.
      */
@@ -58,27 +54,19 @@ export declare class ChatState {
     /**
      * Gets the current suggestionsPosition from options or returns the default value 'below-messages'.
      */
-    get suggestionsPosition(): string;
+    get suggestionsPosition(): ChatSuggestionsPosition;
     /**
      * Gets the current stopTypingDelay from options or returns the default value `3000`.
      */
     get stopTypingDelay(): number;
-    /**
-     * Gets the text area component.
-     */
-    get textArea(): IgcTextareaComponent | null;
-    /**
-     * Sets the text area component.
-     */
-    set textArea(value: IgcTextareaComponent);
     /**
      * Gets the list of attachments currently attached to input.
      */
-    get inputAttachments(): IgcMessageAttachment[];
+    get inputAttachments(): IgcChatMessageAttachment[];
     /**
      * Sets the input attachments and requests host update.
      */
-    set inputAttachments(value: IgcMessageAttachment[]);
+    set inputAttachments(value: IgcChatMessageAttachment[]);
     /**
      * Gets the current input value.
      */
@@ -87,47 +75,54 @@ export declare class ChatState {
      * Sets the current input value and requests host update.
      */
     set inputValue(value: string);
+    /**
+     * Returns whether the default chat input textarea has a trimmed value payload.
+     * @internal
+     */
     get hasInputValue(): boolean;
+    /**
+     * Returns whether the default file input of the chat has any attached files.
+     * @internal
+     */
     get hasInputAttachments(): boolean;
     constructor(chat: IgcChatComponent, contextUpdateFn: () => unknown, userInputContextUpdateFn: () => unknown);
-    isCurrentUserMessage(message?: IgcMessage): boolean;
+    isCurrentUserMessage(message?: IgcChatMessage): boolean;
     emitEvent(name: keyof IgcChatComponentEventMap, args?: any): boolean;
+    /** @internal */
+    emitMessageCreated(message: IgcChatMessage): boolean;
+    /** @internal */
+    emitAttachmentsAdded(attachments: IgcChatMessageAttachment[]): boolean;
+    /** @internal */
+    emitAttachmentRemoved(attachment: IgcChatMessageAttachment): boolean;
+    /** @internal */
+    emitMessageReaction(reaction: IgcChatMessageReaction): boolean;
     /**
-     * Adds a new chat message.
-     * Emits 'igcMessageCreated' event which can be canceled to prevent adding.
-     * Clears input value and attachments on success.
-     * @param message Partial message object with optional id, sender, timestamp
-     */
-    addMessage(message: Partial<IgcMessage>): void;
-    /**
-     * Adds files as attachments to the input.
-     * Emits 'igcAttachmentChange' event which can be canceled to prevent adding.
-     * @param files Array of File objects to attach
+     * @internal
      */
-    attachFiles(files: File[]): void;
-    isImageAttachment(attachment: IgcMessageAttachment): boolean;
-    handleKeyDown: (e: KeyboardEvent) => void;
-    sendMessage: () => void;
+    showActionsTooltip(target: Element, message: string): void;
     /**
-     * Removes an attachment by index.
-     * Emits 'igcAttachmentChange' event which can be canceled to prevent removal.
-     * @param index Index of the attachment to remove
+     * @internal
      */
-    removeAttachment: (index: number) => void;
+    showActionToast(content: string): void;
     /**
-     * Handles when a suggestion is clicked.
-     * Adds the suggestion as a new message and focuses the text area.
-     * @param suggestion The suggestion string clicked
+     * Updates the internal cache for accepted file types.
+     * Parses the acceptedFiles string option into extensions, mimeTypes, and wildcard types.
      */
-    handleSuggestionClick: (suggestion: string) => void;
+    private _setAcceptedTypesCache;
+    protected _createMessage(message: Partial<IgcChatMessage>): IgcChatMessage;
+    addMessage(message: Partial<IgcChatMessage>): void;
     /**
-     * Updates the chat options partially.
-     * @param options Partial options to merge with current options
+     * Adds a new chat message.
+     * Emits 'igcMessageCreated' event which can be canceled to prevent adding.
+     * Clears input value and attachments on success.
+     * @internal
      */
-    updateOptions(options: Partial<IgcChatOptions>): void;
+    addMessageWithEvent(message: Partial<IgcChatMessage>): void;
     /**
-     * Updates the internal cache for accepted file types.
-     * Parses the acceptedFiles string option into extensions, mimeTypes, and wildcard types.
+     * Adds files as attachments to the input.
+     * Emits 'igcAttachmentChange' event which can be canceled to prevent adding.
+     * @internal
      */
-    updateAcceptedTypesCache(): void;
+    attachFilesWithEvent(files: File[]): void;
+    handleKeyDown: (_: KeyboardEvent) => void;
 }