igniteui-webcomponents 6.2.0 → 6.3.0-RC.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"chat-message.js","sourceRoot":"","sources":["../../../src/components/chat/chat-message.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,sBAAsB,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAE5C,OAAO,8BAA8B,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,yDAAyD,CAAC;AAM3F,OAAO,EAAE,0BAA0B,EAAE,MAAM,YAAY,CAAC;AAExD,MAAM,aAAa,GAAG,mBAAmB,CAAC;AAC1C,MAAM,WAAW,GAAG,iBAAiB,CAAC;AACtC,MAAM,gBAAgB,GAAG,qBAAqB,CAAC;AAC/C,MAAM,cAAc,GAAG,mBAAmB,CAAC;AAC3C,MAAM,YAAY,GAAG,cAAc,CAAC;AACpC,MAAM,UAAU,GAAG,YAAY,CAAC;AA4BhC,MAAM,CAAC,OAAO,OAAO,uBAAwB,SAAQ,UAAU;aACtC,YAAO,GAAG,kBAAkB,AAArB,CAAsB;aAC7B,WAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;IAG1C,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CACf,uBAAuB,EACvB,8BAA8B,EAC9B,sBAAsB,CACvB,CAAC;IACJ,CAAC;IAmBD;QACE,KAAK,EAAE,CAAC;QAlBO,cAAS,GAAG,MAAM,CAAC,MAAM,CAA0B;YAClE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE;YACpC,aAAa,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE;YACzC,cAAc,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE;YAC3C,kBAAkB,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,EAAE;YACnD,cAAc,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE;SAC5C,CAAC,CAAC;QAaD,oBAAoB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAClC,CAAC;IAEkB,YAAY;QAC7B,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACnC,CAAC;IAEO,YAAY,CAAC,IAAmC;QACtD,OAAO,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS;YACnC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;YAC/D,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC;IAEO,KAAK,CAAC,WAAW;QACvB,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE,OAAO;QAE1B,IAAI,aAAa,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;QAEtC,MAAM,eAAe,GAAG,IAAI,CAAC,MAAM,CAAC,eAAgB,CAAC;QACrD,IAAI,IAAI,CAAC,OAAO,CAAC,WAAW,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE,CAAC;YACnE,MAAM,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW;iBAC5C,GAAG,CACF,CAAC,GAAG,EAAE,EAAE,CACN,GAAG,GAAG,CAAC,IAAI,IAAI,eAAe,CAAC,eAAe,KAAK,GAAG,CAAC,GAAG,IAAI,EAAE,EAAE,CACrE;iBACA,IAAI,CAAC,IAAI,CAAC,CAAC;YACd,aAAa,IAAI,GAAG,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,GAAG,eAAe,CAAC,oBAAoB,MAAM,cAAc,EAAE,CAAC;QAC/G,CAAC;QAED,IAAI,SAAS,CAAC,SAAS,EAAE,SAAS,EAAE,CAAC;YACnC,IAAI,CAAC;gBACH,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC;gBACnD,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;YAC7D,CAAC;YAAC,OAAO,GAAG,EAAE,CAAC;gBACb,MAAM,IAAI,KAAK,CAAC,6CAA6C,GAAG,EAAE,CAAC,CAAC;YACtE,CAAC;QACH,CAAC;IACH,CAAC;IAEO,yBAAyB,CAAC,KAAmB;QACnD,MAAM,YAAY,GAAG,KAAK,CAAC,MAAqB,CAAC;QACjD,MAAM,MAAM,GAAG,YAAY,CAAC,OAAO,CAAC,sBAAsB,CAAC,OAAO,CAAC,CAAC;QACpE,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE,OAAO;QAErC,IAAI,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC;QAE3B,QAAQ,QAAQ,EAAE,CAAC;YACjB,KAAK,aAAa,CAAC;YACnB,KAAK,WAAW;gBACd,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,QAAQ,CAAC,WAAW,CAAC;oBACtD,CAAC,CAAC,aAAa;oBACf,CAAC,CAAC,WAAW,CAAC;gBAChB,MAAM;YACR,KAAK,gBAAgB,CAAC;YACtB,KAAK,cAAc;gBACjB,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,QAAQ,CAAC,cAAc,CAAC;oBACzD,CAAC,CAAC,gBAAgB;oBAClB,CAAC,CAAC,cAAc,CAAC;gBACnB,MAAM;YACR,KAAK,YAAY;gBACf,QAAQ,GAAG,YAAY,CAAC;gBACxB,IAAI,CAAC,WAAW,EAAE,CAAC;gBACnB,MAAM;YACR,KAAK,UAAU;gBACb,QAAQ,GAAG,UAAU,CAAC;gBACtB,MAAM;YACR;gBACE,QAAQ,GAAG,SAAS,CAAC;QACzB,CAAC;QAED,IAAI,CAAC,OAAO,CAAC,SAAS,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QACpD,IAAI,CAAC,aAAa,EAAE,CAAC;QAErB,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,iBAAiB,EAAE;YACvC,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE;SAC5C,CAAC,CAAC;IACL,CAAC;IAEO,aAAa;QACnB,OAAO,OAAO,CAAC;IACjB,CAAC;IAEO,cAAc;QACpB,OAAO,IAAI,CAAC,OAAO,EAAE,IAAI;YACvB,CAAC,CAAC,IAAI,CAAA,0BAA0B,IAAI,CAAC,OAAO,CAAC,IAAI,QAAQ;YACzD,CAAC,CAAC,OAAO,CAAC;IACd,CAAC;IAEO,cAAc;QACpB,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC;QAClE,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;QAC1C,MAAM,cAAc,GAClB,IAAI,CAAC,OAAO,EAAE,WAAW,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QACnE,MAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC;QACvC,MAAM,aAAa,GAAG,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;QACnE,MAAM,eAAe,GAAG,IAAI,CAAC,MAAM,CAAC,eAAgB,CAAC;QAErD,IAAI,MAAM,IAAI,CAAC,CAAC,OAAO,IAAI,cAAc,CAAC,IAAI,CAAC,aAAa,IAAI,QAAQ,CAAC,EAAE,CAAC;YAC1E,OAAO,OAAO,CAAC;QACjB,CAAC;QAED,OAAO,IAAI,CAAA;oBACK,IAAI,CAAC,yBAAyB;UACxC,IAAI,CAAC,mBAAmB,CAAC,YAAY,EAAE,eAAe,CAAC,YAAY,CAAC;UACpE,IAAI,CAAC,mBAAmB,CACxB,IAAI,CAAC,OAAO,EAAE,SAAS,EAAE,QAAQ,CAAC,WAAW,CAAC;YAC5C,CAAC,CAAC,WAAW;YACb,CAAC,CAAC,aAAa,EACjB,eAAe,CAAC,YAAY,CAC7B;UACC,IAAI,CAAC,mBAAmB,CACxB,IAAI,CAAC,OAAO,EAAE,SAAS,EAAE,QAAQ,CAAC,cAAc,CAAC;YAC/C,CAAC,CAAC,cAAc;YAChB,CAAC,CAAC,gBAAgB,EACpB,eAAe,CAAC,eAAe,CAChC;UACC,IAAI,CAAC,mBAAmB,CACxB,UAAU,EACV,eAAe,CAAC,kBAAkB,CACnC;;KAEJ,CAAC;IACJ,CAAC;IAEO,mBAAmB,CAAC,IAAY,EAAE,cAAsB;QAC9D,OAAO,IAAI,CAAA;;aAEF,GAAG,IAAI,SAAS;eACd,IAAI;;wBAEK,CAAC,EAAE,MAAM,EAAgB,EAAE,EAAE,CAC3C,IAAI,CAAC,MAAM,CAAC,kBAAkB,CAAC,MAAiB,EAAE,cAAc,CAAC;iBAC1D,CAAC,EAAE,MAAM,EAAc,EAAE,EAAE,CAClC,IAAI,CAAC,MAAM,CAAC,kBAAkB,CAAC,MAAiB,EAAE,cAAc,CAAC;;KAEtE,CAAC;IACJ,CAAC;IAGO,kBAAkB;QACxB,OAAO,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,WAAW,IAAI,EAAE,CAAC;YAC7C,CAAC,CAAC,OAAO;YACT,CAAC,CAAC,IAAI,CAAA;;uBAEW,IAAI,CAAC,OAAO;;SAE1B,CAAC;IACR,CAAC;IAEO,cAAc;QACpB,OAAO,IAAI,CAAC,OAAO;YACjB,CAAC,CAAC,IAAI,CAAA,GAAG,IAAI,CAAC,aAAa,EAAE,GAAG,IAAI,CAAC,cAAc,EAAE,GAAG,IAAI,CAAC,kBAAkB,EAAE,GAAG,IAAI,CAAC,cAAc,EAAE,EAAE;YAC3G,CAAC,CAAC,OAAO,CAAC;IACd,CAAC;IAEkB,MAAM;QACvB,MAAM,GAAG,GAA6B;YACpC,OAAO,EAAE,IAAI,CAAC,OAAQ;YACtB,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI;SAC3B,CAAC;QAEF,MAAM,KAAK,GAAG;YACZ,mBAAmB,EAAE,IAAI;YACzB,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,oBAAoB,CAAC,IAAI,CAAC,OAAO,CAAC;SACrD,CAAC;QAEF,OAAO,IAAI,CAAA;QACP,KAAK,CACL,IAAI,CAAC,OAAO;YACV,CAAC,CAAC,IAAI,CAAA;0BACU,OAAO,CAAC,KAAK,CAAC;kBACtB,KAAK,CACL,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS,EAAE,OAAO;gBACrC,CAAC,CAAC,IAAI,CAAA,GAAG,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE;gBACnD,CAAC,CAAC,IAAI,CAAA;0BACA,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,GAAG,CAAC,CAAC;0BAC9C,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,CAAC,GAAG,CAAC,CAAC;0BAC/C,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,oBAAoB,CAAC,CAAC,GAAG,CAAC,CAAC;0BACnD,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,CAAC,GAAG,CAAC,CAAC;uBAClD,CACN;;aAEJ;YACH,CAAC,CAAC,OAAO,CACZ;KACF,CAAC;IACJ,CAAC;;AApMgB;IADhB,OAAO,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;uDACf;AAM7B;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;wDACC","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 } 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  message: ChatTemplateRenderer<ChatMessageRenderContext>;\n  messageHeader: ChatTemplateRenderer<ChatMessageRenderContext>;\n  messageContent: ChatTemplateRenderer<ChatMessageRenderContext>;\n  messageAttachments: ChatTemplateRenderer<ChatMessageRenderContext>;\n  messageActions: ChatTemplateRenderer<ChatMessageRenderContext>;\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      IgcIconButtonComponent\n    );\n  }\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  @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    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 async _handleCopy() {\n    if (!this.message) return;\n\n    let clipboardText = this.message.text;\n\n    const resourceStrings = this._state.resourceStrings!;\n    if (this.message.attachments && !isEmpty(this.message.attachments)) {\n      const attachmentList = this.message.attachments\n        .map(\n          (att) =>\n            `${att.name ?? resourceStrings.attachmentLabel}: ${att.url ?? ''}`\n        )\n        .join('\\n');\n      clipboardText += `${clipboardText ? '\\n\\n' : ''}${resourceStrings.attachmentsListLabel}:\\n${attachmentList}`;\n    }\n\n    if (navigator.clipboard?.writeText) {\n      try {\n        await navigator.clipboard.writeText(clipboardText);\n        this._state.showActionToast(resourceStrings.messageCopied);\n      } catch (err) {\n        throw new Error(`Failed to copy message via Clipboard API: ${err}`);\n      }\n    }\n  }\n\n  private _handleMessageActionClick(event: PointerEvent): void {\n    const targetButton = event.target as HTMLElement;\n    const button = targetButton.closest(IgcIconButtonComponent.tagName);\n    if (!button || !this.message) return;\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 = undefined;\n    }\n\n    this.message.reactions = reaction ? [reaction] : [];\n    this.requestUpdate();\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 hasAttachments =\n      this.message?.attachments && !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      <div @click=${this._handleMessageActionClick} part=\"message-actions\">\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      </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          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  // 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  private _renderMessage() {\n    return this.message\n      ? html`${this._renderHeader()}${this._renderContent()}${this._renderAttachments()}${this._renderActions()}`\n      : nothing;\n  }\n\n  protected override render() {\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                  this._state.options?.renderers?.message\n                    ? html`${until(this._getRenderer('message')(ctx))}`\n                    : html`\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                      `\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

@@ -0,0 +1,130 @@
+import type IgcChatComponent from './chat.js';
+import type { IgcChatComponentEventMap } from './chat.js';
+import type { IgcChatMessage, IgcChatMessageAttachment, IgcChatOptions } from './types.js';
+import { type ChatAcceptedFileTypes } from './utils.js';
+/**
+ * Internal state manager for the `<igc-chat>` component.
+ *
+ * Manages messages, input value, attachments, options, and event emissions.
+ */
+export declare class ChatState {
+    private readonly _host;
+    private readonly _contextUpdateFn;
+    private readonly _userInputContextUpdateFn;
+    private _actionsTooltip?;
+    private _actionToast?;
+    /** The current list of messages */
+    private _messages;
+    /** Chat options/configuration */
+    private _options?;
+    /** List of current input attachments */
+    private _inputAttachments;
+    /** Current input text */
+    private _inputValue;
+    /**
+     * Cache of accepted file types, organized into extensions, mimeTypes, and wildcardTypes
+     */
+    private _acceptedTypesCache;
+    /** 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(): IgcChatMessage[];
+    /**
+     * Sets the list of chat messages.
+     */
+    set messages(value: IgcChatMessage[]);
+    /**
+     * Gets current chat options.
+     */
+    get options(): IgcChatOptions | undefined;
+    /**
+     * Sets chat options and requests host update.
+     */
+    set options(value: IgcChatOptions);
+    /**
+     * Gets the current user ID from options or returns 'user' as fallback.
+     */
+    get currentUserId(): string;
+    /**
+     * Gets the current suggestionsPosition from options or returns the default value 'below-messages'.
+     */
+    get suggestionsPosition(): string;
+    /**
+     * Gets the current stopTypingDelay from options or returns the default value `3000`.
+     */
+    get stopTypingDelay(): number;
+    /**
+     * Gets the list of attachments currently attached to input.
+     */
+    get inputAttachments(): IgcChatMessageAttachment[];
+    /**
+     * Sets the input attachments and requests host update.
+     */
+    set inputAttachments(value: IgcChatMessageAttachment[]);
+    /**
+     * Gets the current input value.
+     */
+    get inputValue(): string;
+    /**
+     * 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?: IgcChatMessage): boolean;
+    emitEvent(name: keyof IgcChatComponentEventMap, args?: any): boolean;
+    /**
+     * @internal
+     */
+    showActionsTooltip(target: Element, message: string): void;
+    /**
+     * @internal
+     */
+    showActionToast(content: string): void;
+    /**
+     * Updates the internal cache for accepted file types.
+     * Parses the acceptedFiles string option into extensions, mimeTypes, and wildcard types.
+     */
+    private _setAcceptedTypesCache;
+    protected _createMessage(message: Partial<IgcChatMessage>): IgcChatMessage;
+    addMessage(message: Partial<IgcChatMessage>): void;
+    /**
+     * Adds a new chat message.
+     * Emits 'igcMessageCreated' event which can be canceled to prevent adding.
+     * Clears input value and attachments on success.
+     * @internal
+     */
+    addMessageWithEvent(message: Partial<IgcChatMessage>): void;
+    /**
+     * Adds files as attachments to the input.
+     * Emits 'igcAttachmentChange' event which can be canceled to prevent adding.
+     * @param files Array of File objects to attach
+     */
+    attachFiles(files: File[]): void;
+    handleKeyDown: (_: KeyboardEvent) => void;
+    /**
+     * Removes an attachment by index.
+     * Emits 'igcAttachmentChange' event which can be canceled to prevent removal.
+     * @param index Index of the attachment to remove
+     */
+    removeAttachment: (attachment: IgcChatMessageAttachment) => void;
+}

package/components/chat/chat-state.js

@@ -0,0 +1,180 @@
+import { IgcChatResourceStringEN } from '../common/i18n/chat.resources.js';
+import { isEmpty, nanoid } from '../common/util.js';
+import IgcToastComponent from '../toast/toast.js';
+import IgcTooltipComponent from '../tooltip/tooltip.js';
+import { isImageAttachment, parseAcceptedFileTypes, } from './utils.js';
+export class ChatState {
+    get host() {
+        return this._host;
+    }
+    get acceptedFileTypes() {
+        return this._acceptedTypesCache;
+    }
+    get disableAutoScroll() {
+        return this._options?.disableAutoScroll ?? false;
+    }
+    get messages() {
+        return this._messages;
+    }
+    set messages(value) {
+        this._messages = value;
+    }
+    get options() {
+        return this._options;
+    }
+    set options(value) {
+        this._options = value;
+        this._setAcceptedTypesCache();
+        this._contextUpdateFn.call(this._host);
+    }
+    get currentUserId() {
+        return this._options?.currentUserId ?? 'user';
+    }
+    get suggestionsPosition() {
+        return this._options?.suggestionsPosition ?? this._suggestionsPosition;
+    }
+    get stopTypingDelay() {
+        return this._options?.stopTypingDelay ?? this._stopTypingDelay;
+    }
+    get inputAttachments() {
+        return this._inputAttachments;
+    }
+    set inputAttachments(value) {
+        this._inputAttachments = value;
+        this._userInputContextUpdateFn.call(this._host);
+    }
+    get inputValue() {
+        return this._inputValue;
+    }
+    set inputValue(value) {
+        this._inputValue = value;
+        this._userInputContextUpdateFn.call(this._host);
+    }
+    get hasInputValue() {
+        return !!this._inputValue.trim();
+    }
+    get hasInputAttachments() {
+        return !isEmpty(this._inputAttachments);
+    }
+    constructor(chat, contextUpdateFn, userInputContextUpdateFn) {
+        this._messages = [];
+        this._inputAttachments = [];
+        this._inputValue = '';
+        this._acceptedTypesCache = null;
+        this._suggestionsPosition = 'below-messages';
+        this._stopTypingDelay = 3000;
+        this._isTyping = false;
+        this._lastTyped = Date.now();
+        this.resourceStrings = IgcChatResourceStringEN;
+        this.handleKeyDown = (_) => {
+            this._lastTyped = Date.now();
+            if (!this._isTyping) {
+                this.emitEvent('igcTypingChange', {
+                    detail: { isTyping: true },
+                });
+                this._isTyping = true;
+                const stopTypingDelay = this.stopTypingDelay;
+                setTimeout(() => {
+                    if (this._isTyping &&
+                        stopTypingDelay &&
+                        this._lastTyped + stopTypingDelay < Date.now()) {
+                        this.emitEvent('igcTypingChange', {
+                            detail: { isTyping: false },
+                        });
+                        this._isTyping = false;
+                    }
+                }, stopTypingDelay);
+            }
+        };
+        this.removeAttachment = (attachment) => {
+            const attachments = this.inputAttachments.filter((each) => each !== attachment);
+            if (this.emitEvent('igcAttachmentChange', {
+                detail: attachments,
+                cancelable: true,
+            })) {
+                this.inputAttachments = attachments;
+            }
+        };
+        this._host = chat;
+        this._contextUpdateFn = contextUpdateFn;
+        this._userInputContextUpdateFn = userInputContextUpdateFn;
+    }
+    isCurrentUserMessage(message) {
+        return this.currentUserId === message?.sender;
+    }
+    emitEvent(name, args) {
+        return this._host.emitEvent(name, args);
+    }
+    showActionsTooltip(target, message) {
+        if (!this._actionsTooltip) {
+            this._actionsTooltip = document.createElement(IgcTooltipComponent.tagName);
+            this._actionsTooltip.hideTriggers = 'pointerleave,click,blur';
+            this._actionsTooltip.hideDelay = 100;
+            this._host.renderRoot.appendChild(this._actionsTooltip);
+        }
+        this._actionsTooltip.message = message;
+        this._actionsTooltip.show(target);
+    }
+    showActionToast(content) {
+        if (!this._actionToast) {
+            this._actionToast = document.createElement(IgcToastComponent.tagName);
+            this._host.renderRoot.appendChild(this._actionToast);
+        }
+        this._actionToast.textContent = content;
+        this._actionToast.show();
+    }
+    _setAcceptedTypesCache() {
+        this._acceptedTypesCache = this.options?.acceptedFiles
+            ? parseAcceptedFileTypes(this.options.acceptedFiles)
+            : null;
+    }
+    _createMessage(message) {
+        return {
+            id: message.id ?? nanoid(),
+            text: message.text ?? '',
+            sender: message.sender ?? this.currentUserId,
+            timestamp: message.timestamp ?? Date.now().toString(),
+            attachments: message.attachments || [],
+        };
+    }
+    addMessage(message) {
+        this.messages.push(this._createMessage(message));
+        this._host.requestUpdate('messages');
+    }
+    addMessageWithEvent(message) {
+        const newMessage = this._createMessage(message);
+        if (this._host.emitEvent('igcMessageCreated', {
+            detail: newMessage,
+            cancelable: true,
+        })) {
+            this.addMessage(newMessage);
+            this.inputValue = '';
+            this.inputAttachments = [];
+        }
+    }
+    attachFiles(files) {
+        const newAttachments = [];
+        const fileNames = new Set(this.inputAttachments.map((attachment) => attachment.file?.name ?? ''));
+        for (const file of files) {
+            if (fileNames.has(file.name)) {
+                continue;
+            }
+            const url = URL.createObjectURL(file);
+            newAttachments.push({
+                id: nanoid(),
+                url,
+                name: file.name,
+                file,
+                thumbnail: isImageAttachment(file) ? url : undefined,
+            });
+        }
+        const allowed = this.emitEvent('igcAttachmentChange', {
+            detail: [...this.inputAttachments, ...newAttachments],
+            cancelable: true,
+        });
+        if (allowed) {
+            this.inputAttachments = [...this.inputAttachments, ...newAttachments];
+        }
+    }
+}
+//# sourceMappingURL=chat-state.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chat-state.js","sourceRoot":"","sources":["../../../src/components/chat/chat-state.ts"],"names":[],"mappings":"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","sourcesContent":["import { IgcChatResourceStringEN } from '../common/i18n/chat.resources.js';\nimport { isEmpty, nanoid } from '../common/util.js';\nimport IgcToastComponent from '../toast/toast.js';\nimport IgcTooltipComponent from '../tooltip/tooltip.js';\nimport type IgcChatComponent from './chat.js';\nimport type { IgcChatComponentEventMap } from './chat.js';\nimport type {\n  IgcChatMessage,\n  IgcChatMessageAttachment,\n  IgcChatOptions,\n} from './types.js';\nimport {\n  type ChatAcceptedFileTypes,\n  isImageAttachment,\n  parseAcceptedFileTypes,\n} from './utils.js';\n\n/**\n * Internal state manager for the `<igc-chat>` component.\n *\n * Manages messages, input value, attachments, options, and event emissions.\n */\nexport class ChatState {\n  //#region Internal properties and state /** The host `<igc-chat>` component instance */\n  private readonly _host: IgcChatComponent;\n\n  private readonly _contextUpdateFn: () => unknown;\n  private readonly _userInputContextUpdateFn: () => unknown;\n\n  private _actionsTooltip?: IgcTooltipComponent;\n  private _actionToast?: IgcToastComponent;\n  /** The current list of messages */\n  private _messages: IgcChatMessage[] = [];\n  /** Chat options/configuration */\n  private _options?: IgcChatOptions;\n\n  /** List of current input attachments */\n  private _inputAttachments: IgcChatMessageAttachment[] = [];\n  /** Current input text */\n  private _inputValue = '';\n  /**\n   * Cache of accepted file types, organized into extensions, mimeTypes, and wildcardTypes\n   */\n  private _acceptedTypesCache: ChatAcceptedFileTypes | null = null;\n  /** Default position of the suggestions */\n  private _suggestionsPosition: 'below-input' | 'below-messages' =\n    'below-messages';\n  /** Default time in milliseconds before dispatching stop typing event */\n  private _stopTypingDelay = 3000;\n\n  public _isTyping = false;\n  private _lastTyped = Date.now();\n\n  public resourceStrings = IgcChatResourceStringEN;\n\n  //#endregion\n\n  //#region Public properties\n\n  public get host(): IgcChatComponent {\n    return this._host;\n  }\n\n  public get acceptedFileTypes() {\n    return this._acceptedTypesCache;\n  }\n\n  public get disableAutoScroll(): boolean {\n    return this._options?.disableAutoScroll ?? false;\n  }\n\n  /**\n   * Gets the list of chat messages.\n   */\n  public get messages(): IgcChatMessage[] {\n    return this._messages;\n  }\n\n  /**\n   * Sets the list of chat messages.\n   */\n  public set messages(value: IgcChatMessage[]) {\n    this._messages = value;\n  }\n\n  /**\n   * Gets current chat options.\n   */\n  public get options(): IgcChatOptions | undefined {\n    return this._options;\n  }\n\n  /**\n   * Sets chat options and requests host update.\n   */\n  public set options(value: IgcChatOptions) {\n    this._options = value;\n    this._setAcceptedTypesCache();\n    this._contextUpdateFn.call(this._host);\n  }\n\n  /**\n   * Gets the current user ID from options or returns 'user' as fallback.\n   */\n  public get currentUserId(): string {\n    return this._options?.currentUserId ?? 'user';\n  }\n\n  /**\n   * Gets the current suggestionsPosition from options or returns the default value 'below-messages'.\n   */\n  public get suggestionsPosition(): string {\n    return this._options?.suggestionsPosition ?? this._suggestionsPosition;\n  }\n\n  /**\n   * Gets the current stopTypingDelay from options or returns the default value `3000`.\n   */\n  public get stopTypingDelay(): number {\n    return this._options?.stopTypingDelay ?? this._stopTypingDelay;\n  }\n\n  /**\n   * Gets the list of attachments currently attached to input.\n   */\n  public get inputAttachments(): IgcChatMessageAttachment[] {\n    return this._inputAttachments;\n  }\n\n  /**\n   * Sets the input attachments and requests host update.\n   */\n  public set inputAttachments(value: IgcChatMessageAttachment[]) {\n    this._inputAttachments = value;\n    this._userInputContextUpdateFn.call(this._host);\n  }\n\n  /**\n   * Gets the current input value.\n   */\n  public get inputValue(): string {\n    return this._inputValue;\n  }\n\n  /**\n   * Sets the current input value and requests host update.\n   */\n  public set inputValue(value: string) {\n    this._inputValue = value;\n    this._userInputContextUpdateFn.call(this._host);\n  }\n\n  /**\n   * Returns whether the default chat input textarea has a trimmed value payload.\n   * @internal\n   */\n  public get hasInputValue(): boolean {\n    return !!this._inputValue.trim();\n  }\n\n  /**\n   * Returns whether the default file input of the chat has any attached files.\n   * @internal\n   */\n  public get hasInputAttachments(): boolean {\n    return !isEmpty(this._inputAttachments);\n  }\n\n  //#endregion\n\n  constructor(\n    chat: IgcChatComponent,\n    contextUpdateFn: () => unknown,\n    userInputContextUpdateFn: () => unknown\n  ) {\n    this._host = chat;\n    this._contextUpdateFn = contextUpdateFn;\n    this._userInputContextUpdateFn = userInputContextUpdateFn;\n  }\n\n  public isCurrentUserMessage(message?: IgcChatMessage): boolean {\n    return this.currentUserId === message?.sender;\n  }\n\n  //#region Event handlers\n\n  public emitEvent(name: keyof IgcChatComponentEventMap, args?: any): boolean {\n    return this._host.emitEvent(name, args);\n  }\n\n  /**\n   * @internal\n   */\n  public showActionsTooltip(target: Element, message: string): void {\n    if (!this._actionsTooltip) {\n      this._actionsTooltip = document.createElement(\n        IgcTooltipComponent.tagName\n      );\n      this._actionsTooltip.hideTriggers = 'pointerleave,click,blur';\n      this._actionsTooltip.hideDelay = 100;\n      this._host.renderRoot.appendChild(this._actionsTooltip);\n    }\n    this._actionsTooltip.message = message;\n    this._actionsTooltip.show(target);\n  }\n\n  /**\n   * @internal\n   */\n  public showActionToast(content: string): void {\n    if (!this._actionToast) {\n      this._actionToast = document.createElement(IgcToastComponent.tagName);\n      this._host.renderRoot.appendChild(this._actionToast);\n    }\n    this._actionToast.textContent = content;\n    this._actionToast.show();\n  }\n\n  //#endregion\n\n  /**\n   * Updates the internal cache for accepted file types.\n   * Parses the acceptedFiles string option into extensions, mimeTypes, and wildcard types.\n   */\n  private _setAcceptedTypesCache(): void {\n    this._acceptedTypesCache = this.options?.acceptedFiles\n      ? parseAcceptedFileTypes(this.options.acceptedFiles)\n      : null;\n  }\n\n  protected _createMessage(message: Partial<IgcChatMessage>): IgcChatMessage {\n    return {\n      id: message.id ?? nanoid(),\n      text: message.text ?? '',\n      sender: message.sender ?? this.currentUserId,\n      timestamp: message.timestamp ?? Date.now().toString(),\n      attachments: message.attachments || [],\n    };\n  }\n\n  public addMessage(message: Partial<IgcChatMessage>) {\n    this.messages.push(this._createMessage(message));\n    this._host.requestUpdate('messages');\n  }\n\n  //#region Public API\n\n  /**\n   * Adds a new chat message.\n   * Emits 'igcMessageCreated' event which can be canceled to prevent adding.\n   * Clears input value and attachments on success.\n   * @internal\n   */\n  public addMessageWithEvent(message: Partial<IgcChatMessage>): void {\n    const newMessage = this._createMessage(message);\n\n    if (\n      this._host.emitEvent('igcMessageCreated', {\n        detail: newMessage,\n        cancelable: true,\n      })\n    ) {\n      this.addMessage(newMessage);\n      this.inputValue = '';\n      this.inputAttachments = [];\n    }\n  }\n\n  /**\n   * Adds files as attachments to the input.\n   * Emits 'igcAttachmentChange' event which can be canceled to prevent adding.\n   * @param files Array of File objects to attach\n   */\n  public attachFiles(files: File[]) {\n    const newAttachments: IgcChatMessageAttachment[] = [];\n    const fileNames = new Set(\n      this.inputAttachments.map((attachment) => attachment.file?.name ?? '')\n    );\n\n    for (const file of files) {\n      if (fileNames.has(file.name)) {\n        continue;\n      }\n\n      const url = URL.createObjectURL(file);\n\n      newAttachments.push({\n        id: nanoid(),\n        url,\n        name: file.name,\n        file,\n        thumbnail: isImageAttachment(file) ? url : undefined,\n      });\n    }\n\n    const allowed = this.emitEvent('igcAttachmentChange', {\n      detail: [...this.inputAttachments, ...newAttachments],\n      cancelable: true,\n    });\n    if (allowed) {\n      this.inputAttachments = [...this.inputAttachments, ...newAttachments];\n    }\n  }\n\n  public handleKeyDown = (_: KeyboardEvent) => {\n    this._lastTyped = Date.now();\n    if (!this._isTyping) {\n      this.emitEvent('igcTypingChange', {\n        detail: { isTyping: true },\n      });\n      this._isTyping = true;\n\n      const stopTypingDelay = this.stopTypingDelay;\n      setTimeout(() => {\n        if (\n          this._isTyping &&\n          stopTypingDelay &&\n          this._lastTyped + stopTypingDelay < Date.now()\n        ) {\n          this.emitEvent('igcTypingChange', {\n            detail: { isTyping: false },\n          });\n          this._isTyping = false;\n        }\n      }, stopTypingDelay);\n    }\n  };\n\n  /**\n   * Removes an attachment by index.\n   * Emits 'igcAttachmentChange' event which can be canceled to prevent removal.\n   * @param index Index of the attachment to remove\n   */\n  public removeAttachment = (attachment: IgcChatMessageAttachment): void => {\n    const attachments = this.inputAttachments.filter(\n      (each) => each !== attachment\n    );\n\n    if (\n      this.emitEvent('igcAttachmentChange', {\n        detail: attachments,\n        cancelable: true,\n      })\n    ) {\n      this.inputAttachments = attachments;\n    }\n  };\n\n  //#endregion\n}\n"]}

package/components/chat/chat.d.ts

@@ -0,0 +1,151 @@
+import { LitElement, type PropertyValues } from 'lit';
+import type { Constructor } from '../common/mixins/constructor.js';
+import type { IgcChatMessage, IgcChatMessageAttachment, IgcChatOptions } from './types.js';
+/**
+ * Defines the custom events dispatched by the `<igc-chat>` component.
+ */
+export interface IgcChatComponentEventMap {
+    /**
+     * Dispatched when a new chat message is created (sent).
+     */
+    igcMessageCreated: CustomEvent<IgcChatMessage>;
+    /**
+     * Dispatched when a message is reacted to.
+     */
+    igcMessageReact: CustomEvent<{
+        message: IgcChatMessage;
+        reaction: string;
+    }>;
+    /**
+     * Dispatched when a chat message attachment is clicked.
+     */
+    igcAttachmentClick: CustomEvent<IgcChatMessageAttachment>;
+    /**
+     * Dispatched when an attachment is changed (e.g., updated or removed).
+     */
+    igcAttachmentChange: CustomEvent<IgcChatMessageAttachment>;
+    /**
+     * Dispatched during an attachment drag operation.
+     */
+    igcAttachmentDrag: CustomEvent<void>;
+    /**
+     * Dispatched when an attachment is dropped (e.g., in a drag-and-drop operation).
+     */
+    igcAttachmentDrop: CustomEvent<void>;
+    /**
+     * Dispatched when the typing status changes (e.g., user starts or stops typing).
+     */
+    igcTypingChange: CustomEvent<boolean>;
+    /**
+     * Dispatched when the chat input field gains focus.
+     */
+    igcInputFocus: CustomEvent<void>;
+    /**
+     * Dispatched when the chat input field loses focus.
+     */
+    igcInputBlur: CustomEvent<void>;
+    /**
+     * Dispatched when the content of the chat input changes.
+     */
+    igcInputChange: CustomEvent<string>;
+}
+declare const IgcChatComponent_base: Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcChatComponentEventMap>> & Constructor<LitElement>;
+/**
+ * A chat UI component for displaying messages, attachments, and input interaction.
+ *
+ * @element igc-chat
+ *
+ * @fires igcMessageCreated - Dispatched when a new chat message is created (sent).
+ * @fires igcMessageReact - Dispatched when a message is reacted to.
+ * @fires igcAttachmentClick - Dispatched when a chat message attachment is clicked.
+ * @fires igcAttachmentChange - Dispatched when a message attachment is changed (e.g., updated or removed).
+ * @fires igcAttachmentDrag - Dispatched during an attachment drag operation.
+ * @fires igcAttachmentDrop - Dispatched when an attachment is dropped (e.g., in a drag-and-drop operation).
+ * @fires igcTypingChange - Dispatched when the typing status changes (e.g., user starts or stops typing).
+ * @fires igcInputFocus - Dispatched when the chat input field gains focus.
+ * @fires igcInputBlur - Dispatched when the chat input field loses focus.
+ * @fires igcInputChange - Dispatched when the content of the chat input changes.
+ *
+ * @slot prefix - Slot for injecting content (e.g., avatar or icon) before the chat title.
+ * @slot title - Slot for overriding the chat title content.
+ * @slot actions - Slot for injecting header actions (e.g., buttons, menus).
+ * @slot suggestions-header - Slot for rendering a custom header for the suggestions list.
+ * @slot suggestions - Slot for rendering a custom list of quick reply suggestions.
+ * @slot suggestions-actions - Slot for rendering additional actions.
+ * @slot suggestion - Slot for rendering a single suggestion item.
+ * @slot empty-state - Slot shown when there are no messages.
+ *
+ * @csspart header - Styles the header container.
+ * @csspart prefix - Styles the element before the title (e.g., avatar).
+ * @csspart title - Styles the chat header title.
+ * @csspart suggestions - Styles the suggestion container.
+ * @csspart suggestion - Styles each suggestion item.
+ */
+export default class IgcChatComponent extends IgcChatComponent_base {
+    static readonly tagName = "igc-chat";
+    static styles: import("lit").CSSResult[];
+    static register(): void;
+    private readonly _state;
+    private readonly _defaults;
+    private readonly _slots;
+    private readonly _context;
+    private readonly _userInputContext;
+    private readonly _input?;
+    private readonly _typingIndicator?;
+    private readonly _suggestionsContainer?;
+    private _updateContext;
+    private _updateUserInputContext;
+    /**
+     * The list of chat messages currently displayed.
+     * Use this property to set or update the message history.
+     */
+    set messages(value: IgcChatMessage[]);
+    get messages(): IgcChatMessage[];
+    /**
+     * The chat message currently being composed but not yet sent.
+     * Includes the draft text and any attachments.
+     */
+    set draftMessage(value: {
+        text: string;
+        attachments?: IgcChatMessageAttachment[];
+    });
+    get draftMessage(): {
+        text: string;
+        attachments?: IgcChatMessageAttachment[];
+    };
+    /**
+     * Controls the chat behavior and appearance through a configuration object.
+     * Use this to toggle UI options, provide suggestions, templates, etc.
+     */
+    set options(value: IgcChatOptions);
+    get options(): IgcChatOptions | undefined;
+    /**
+     * The resource strings of the chat.
+     */
+    resourceStrings: import("../common/i18n/chat.resources.js").IgcChatResourceStrings;
+    constructor();
+    private _getRenderer;
+    private _handleSuggestionClick;
+    /**
+     * Scrolls the view to a specific message by id.
+     * @param messageId - The id of the message to scroll to
+     */
+    scrollToMessage(messageId: string): void;
+    addMessage(message: Partial<IgcChatMessage>): IgcChatMessage;
+    updateMessage(message: IgcChatMessage, data: Partial<IgcChatMessage>, scrollIntoView?: boolean): void;
+    protected updated(properties: PropertyValues<this>): void;
+    private _scrollToBottom;
+    private _renderHeader;
+    private _renderMessages;
+    private _renderLoadingTemplate;
+    private _renderSuggestionPrefix;
+    private _renderSuggestions;
+    private _renderEmptyState;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-chat': IgcChatComponent;
+    }
+}
+export {};