igniteui-webcomponents 6.2.0 → 6.3.0-alpha.1

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

@@ -0,0 +1,47 @@
+import { LitElement, nothing } from 'lit';
+import type { IgcMessage } 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)
+ * - Attachments (if any)
+ * - Custom templates for message content and actions (if provided via chat options)
+ *
+ * It distinguishes sent messages from received messages by comparing
+ * the message sender with the current user ID from chat state.
+ *
+ * The message text is sanitized with DOMPurify before rendering,
+ * and can be rendered with a markdown renderer if provided.
+ */
+export default class IgcChatMessageComponent extends LitElement {
+    static readonly tagName = "igc-chat-message";
+    static styles: import("lit").CSSResult[];
+    static register(): void;
+    /**
+     * Injected chat state context. Provides message data, user info, and options.
+     */
+    private _chatState?;
+    /**
+     * The chat message to render.
+     */
+    message?: IgcMessage;
+    constructor();
+    protected firstUpdated(): void;
+    /**
+     * Renders the chat message template.
+     * - Applies 'sent' CSS class if the message sender matches current user.
+     * - Uses markdown rendering if configured.
+     * - Renders attachments and custom templates if provided.
+     */
+    protected render(): import("lit-html").TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-chat-message': IgcChatMessageComponent;
+    }
+}

package/components/chat/chat-message.js

@@ -0,0 +1,70 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { consume } from '@lit/context';
+import { adoptStyles, html, LitElement, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { until } from 'lit/directives/until.js';
+import { addThemingController } from '../../theming/theming-controller.js';
+import IgcAvatarComponent from '../avatar/avatar.js';
+import { chatContext } from '../common/context.js';
+import { registerComponent } from '../common/definitions/register.js';
+import { partMap } from '../common/part-map.js';
+import IgcTooltipComponent from '../tooltip/tooltip.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';
+class IgcChatMessageComponent extends LitElement {
+    static register() {
+        registerComponent(IgcChatMessageComponent, IgcMessageAttachmentsComponent, IgcAvatarComponent, IgcTooltipComponent);
+    }
+    constructor() {
+        super();
+        addThemingController(this, all);
+    }
+    firstUpdated() {
+        adoptPageStyles(this);
+    }
+    render() {
+        const parts = {
+            'message-container': true,
+            sent: this._chatState?.currentUserId === this.message?.sender,
+        };
+        return this.message && this._chatState?.chatRenderer
+            ? html `
+          <div part=${partMap(parts)}>
+            ${until(this._chatState.chatRenderer.render(this.message))}
+          </div>
+        `
+            : nothing;
+    }
+}
+IgcChatMessageComponent.tagName = 'igc-chat-message';
+IgcChatMessageComponent.styles = [styles, shared];
+export default IgcChatMessageComponent;
+__decorate([
+    consume({ context: chatContext, subscribe: true })
+], IgcChatMessageComponent.prototype, "_chatState", void 0);
+__decorate([
+    property({ attribute: false })
+], IgcChatMessageComponent.prototype, "message", void 0);
+function adoptPageStyles(message) {
+    const sheets = [];
+    for (const sheet of document.styleSheets) {
+        try {
+            const constructed = new CSSStyleSheet();
+            for (const rule of sheet.cssRules) {
+                constructed.insertRule(rule.cssText);
+            }
+            sheets.push(constructed);
+        }
+        catch { }
+    }
+    const ctor = message.constructor;
+    adoptStyles(message.shadowRoot, [...ctor.elementStyles, ...sheets]);
+}
+//# sourceMappingURL=chat-message.js.map

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,WAAW,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAC7D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,kBAAkB,MAAM,qBAAqB,CAAC;AACrD,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,mBAAmB,MAAM,uBAAuB,CAAC;AAExD,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;AAqB3F,MAAqB,uBAAwB,SAAQ,UAAU;IAKtD,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CACf,uBAAuB,EACvB,8BAA8B,EAC9B,kBAAkB,EAClB,mBAAmB,CACpB,CAAC;IACJ,CAAC;IAcD;QACE,KAAK,EAAE,CAAC;QACR,oBAAoB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAClC,CAAC;IAEkB,YAAY;QAC7B,eAAe,CAAC,IAAI,CAAC,CAAC;IACxB,CAAC;IAQkB,MAAM;QACvB,MAAM,KAAK,GAAG;YACZ,mBAAmB,EAAE,IAAI;YACzB,IAAI,EAAE,IAAI,CAAC,UAAU,EAAE,aAAa,KAAK,IAAI,CAAC,OAAO,EAAE,MAAM;SAC9D,CAAC;QAEF,OAAO,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,UAAU,EAAE,YAAY;YAClD,CAAC,CAAC,IAAI,CAAA;sBACU,OAAO,CAAC,KAAK,CAAC;cACtB,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;;SAE7D;YACH,CAAC,CAAC,OAAO,CAAC;IACd,CAAC;;AArDsB,+BAAO,GAAG,kBAAkB,CAAC;AAC7B,8BAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;eAF9B,uBAAuB;AAkBlC;IADP,OAAO,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;2DACpB;AAMxB;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;wDACH;AAwC9B,SAAS,eAAe,CAAC,OAAgC;IACvD,MAAM,MAAM,GAAoB,EAAE,CAAC;IAEnC,KAAK,MAAM,KAAK,IAAI,QAAQ,CAAC,WAAW,EAAE,CAAC;QACzC,IAAI,CAAC;YACH,MAAM,WAAW,GAAG,IAAI,aAAa,EAAE,CAAC;YACxC,KAAK,MAAM,IAAI,IAAI,KAAK,CAAC,QAAQ,EAAE,CAAC;gBAClC,WAAW,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YACvC,CAAC;YACD,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC3B,CAAC;QAAC,MAAM,CAAC,CAAA,CAAC;IACZ,CAAC;IAED,MAAM,IAAI,GAAG,OAAO,CAAC,WAAgC,CAAC;IACtD,WAAW,CAAC,OAAO,CAAC,UAAW,EAAE,CAAC,GAAG,IAAI,CAAC,aAAa,EAAE,GAAG,MAAM,CAAC,CAAC,CAAC;AACvE,CAAC","sourcesContent":["import { consume } from '@lit/context';\nimport { adoptStyles, 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 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 { IgcMessage } from './types.js';\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 _chatState?: ChatState;\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    adoptPageStyles(this);\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    const parts = {\n      'message-container': true,\n      sent: this._chatState?.currentUserId === this.message?.sender,\n    };\n\n    return this.message && this._chatState?.chatRenderer\n      ? html`\n          <div part=${partMap(parts)}>\n            ${until(this._chatState.chatRenderer.render(this.message))}\n          </div>\n        `\n      : nothing;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-chat-message': IgcChatMessageComponent;\n  }\n}\n\n// REVIEW: Maybe put that behind a configuration flag as this is nasty.\nfunction adoptPageStyles(message: IgcChatMessageComponent): void {\n  const sheets: CSSStyleSheet[] = [];\n\n  for (const sheet of document.styleSheets) {\n    try {\n      const constructed = new CSSStyleSheet();\n      for (const rule of sheet.cssRules) {\n        constructed.insertRule(rule.cssText);\n      }\n      sheets.push(constructed);\n    } catch {}\n  }\n\n  const ctor = message.constructor as typeof LitElement;\n  adoptStyles(message.shadowRoot!, [...ctor.elementStyles, ...sheets]);\n}\n"]}

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

@@ -0,0 +1,14 @@
+import type { ChatMessageRenderer, IgcChatTemplates, IgcMessage } from './types.js';
+export declare class DefaultChatRenderer implements ChatMessageRenderer {
+    private baseTextRenderer;
+    private defaultTemplates;
+    private cache;
+    templates: Required<IgcChatTemplates>;
+    constructor(baseTextRenderer: ChatMessageRenderer, // e.g. PlainTextRenderer, MarkdownMessageRenderer
+    defaultTemplates: Required<IgcChatTemplates>, userTemplates?: Partial<IgcChatTemplates>);
+    protected renderText(message: IgcMessage): Promise<unknown>;
+    render(message: IgcMessage, ctx?: {
+        templates?: Partial<IgcChatTemplates>;
+    }): Promise<unknown>;
+    clearCache(): void;
+}

package/components/chat/chat-renderer.js

@@ -0,0 +1,39 @@
+export class DefaultChatRenderer {
+    constructor(baseTextRenderer, defaultTemplates, userTemplates) {
+        this.baseTextRenderer = baseTextRenderer;
+        this.defaultTemplates = defaultTemplates;
+        this.cache = new Map();
+        this.templates = {
+            ...this.defaultTemplates,
+            ...(userTemplates ?? {}),
+        };
+    }
+    async renderText(message) {
+        const rendered = await this.baseTextRenderer.render(message);
+        return rendered;
+    }
+    async render(message, ctx) {
+        const templates = { ...ctx?.templates, ...this.templates };
+        if (!message.id) {
+            const textContent = await this.baseTextRenderer.render(message);
+            return templates.messageTemplate(message, { textContent, templates });
+        }
+        if (this.cache.has(message.id)) {
+            const cached = this.cache.get(message.id);
+            if (cached && cached.text === message.text) {
+                return cached.rendered;
+            }
+        }
+        const textContent = await this.baseTextRenderer.render(message);
+        const rendered = templates.messageTemplate(message, {
+            textContent,
+            templates,
+        });
+        this.cache.set(message.id, { text: message.text, rendered });
+        return rendered;
+    }
+    clearCache() {
+        this.cache.clear();
+    }
+}
+//# sourceMappingURL=chat-renderer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chat-renderer.js","sourceRoot":"","sources":["../../../src/components/chat/chat-renderer.ts"],"names":[],"mappings":"AAMA,MAAM,OAAO,mBAAmB;IAI9B,YACU,gBAAqC,EACrC,gBAA4C,EACpD,aAAyC;QAFjC,qBAAgB,GAAhB,gBAAgB,CAAqB;QACrC,qBAAgB,GAAhB,gBAAgB,CAA4B;QAL9C,UAAK,GAAG,IAAI,GAAG,EAA+C,CAAC;QAQrE,IAAI,CAAC,SAAS,GAAG;YACf,GAAG,IAAI,CAAC,gBAAgB;YACxB,GAAG,CAAC,aAAa,IAAI,EAAE,CAAC;SACzB,CAAC;IACJ,CAAC;IAES,KAAK,CAAC,UAAU,CAAC,OAAmB;QAC5C,MAAM,QAAQ,GAAG,MAAM,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QAC7D,OAAO,QAAQ,CAAC;IAClB,CAAC;IAEM,KAAK,CAAC,MAAM,CACjB,OAAmB,EACnB,GAA+C;QAE/C,MAAM,SAAS,GAAG,EAAE,GAAG,GAAG,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;QAC3D,IAAI,CAAC,OAAO,CAAC,EAAE,EAAE,CAAC;YAEhB,MAAM,WAAW,GAAG,MAAM,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;YAChE,OAAO,SAAS,CAAC,eAAe,CAAC,OAAO,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC,CAAC;QACxE,CAAC;QAED,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC;YAC/B,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;YAC1C,IAAI,MAAM,IAAI,MAAM,CAAC,IAAI,KAAK,OAAO,CAAC,IAAI,EAAE,CAAC;gBAC3C,OAAO,MAAM,CAAC,QAAQ,CAAC;YACzB,CAAC;QACH,CAAC;QAGD,MAAM,WAAW,GAAG,MAAM,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QAChE,MAAM,QAAQ,GAAG,SAAS,CAAC,eAAe,CAAC,OAAO,EAAE;YAClD,WAAW;YACX,SAAS;SACV,CAAC,CAAC;QACH,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,CAAC,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC;QAE7D,OAAO,QAAQ,CAAC;IAClB,CAAC;IAEM,UAAU;QACf,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;IACrB,CAAC;CACF","sourcesContent":["import type {\n  ChatMessageRenderer,\n  IgcChatTemplates,\n  IgcMessage,\n} from './types.js';\n\nexport class DefaultChatRenderer implements ChatMessageRenderer {\n  private cache = new Map<string, { text: string; rendered: unknown }>();\n  public templates: Required<IgcChatTemplates>;\n\n  constructor(\n    private baseTextRenderer: ChatMessageRenderer, // e.g. PlainTextRenderer, MarkdownMessageRenderer\n    private defaultTemplates: Required<IgcChatTemplates>,\n    userTemplates?: Partial<IgcChatTemplates>\n  ) {\n    this.templates = {\n      ...this.defaultTemplates,\n      ...(userTemplates ?? {}),\n    };\n  }\n\n  protected async renderText(message: IgcMessage) {\n    const rendered = await this.baseTextRenderer.render(message);\n    return rendered;\n  }\n\n  public async render(\n    message: IgcMessage,\n    ctx?: { templates?: Partial<IgcChatTemplates> }\n  ): Promise<unknown> {\n    const templates = { ...ctx?.templates, ...this.templates };\n    if (!message.id) {\n      // No caching for messages without an ID\n      const textContent = await this.baseTextRenderer.render(message);\n      return templates.messageTemplate(message, { textContent, templates });\n    }\n\n    if (this.cache.has(message.id)) {\n      const cached = this.cache.get(message.id);\n      if (cached && cached.text === message.text) {\n        return cached.rendered;\n      }\n    }\n\n    // Cache miss or message text changed\n    const textContent = await this.baseTextRenderer.render(message);\n    const rendered = templates.messageTemplate(message, {\n      textContent,\n      templates,\n    });\n    this.cache.set(message.id, { text: message.text, rendered });\n\n    return rendered;\n  }\n\n  public clearCache() {\n    this.cache.clear();\n  }\n}\n"]}

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

@@ -0,0 +1,250 @@
+import { type Ref } from 'lit/directives/ref.js';
+import type IgcTextareaComponent from '../textarea/textarea.js';
+import type IgcChatComponent from './chat.js';
+import type { IgcChatComponentEventMap } from './chat.js';
+import { DefaultChatRenderer } from './chat-renderer.js';
+import { type IgcChatOptions, type IgcChatTemplates, type IgcMessage, type IgcMessageAttachment } from './types.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;
+    /** Reference to the text area input component */
+    private _textArea;
+    /** 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;
+    private _isTyping;
+    private _lastTyped;
+    private _fileIcon;
+    private _jsonIcon;
+    private _linkIcon;
+    private readonly _textAreaRef;
+    private readonly _attachmentsButtonInputRef;
+    private readonly _sharedTooltipRef;
+    private _chatRenderer?;
+    private resourceStrings;
+    /** Default templates of the chat components */
+    private _defaultTemplates;
+    /** The tooltip component used for showing action tooltips. */
+    private get _sharedTooltip();
+    private getIconName;
+    /**
+     * Default attachments area template used when no custom template is provided.
+     * Renders the list of input attachments as chips.
+     * @returns TemplateResult containing the attachments area
+     */
+    private renderDefaultAttachmentsArea;
+    /**
+     * Default text area template used when no custom template is provided.
+     * Renders a text area for user input.
+     * @returns TemplateResult containing the text area
+     */
+    private renderDefaultTextArea;
+    /**
+     * 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 renderDefaultFileUploadButton;
+    /**
+     * 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 renderDefaultSendButton;
+    private renderDefaultActionsArea;
+    /**
+     * Default typing indicator template used when no custom template is provided.
+     * Renders a simple typing indicator with three dots.
+     * @returns TemplateResult containing the typing indicator
+     */
+    private renderDefaultTypingIndicator;
+    /**
+     * Default message template used when no custom template is provided.
+     * Renders the message text, sanitized for security.
+     * @param message The chat message to render
+     * @returns TemplateResult containing the rendered message
+     */
+    private renderDefaultMessageTemplate;
+    private renderDefaultAttachmentHeaderText;
+    private handleHeaderClick;
+    /**
+     * Default attachment header template used when no custom template is provided.
+     * Renders the attachment icon and name.
+     * @param attachment The message attachment to render
+     * @returns TemplateResult containing the rendered attachment header
+     */
+    private renderDefaultAttachmentHeader;
+    /**
+     * Default attachment content template used when no custom template is provided.
+     * Renders the attachment content based on its type.
+     * @param attachment The message attachment to render
+     * @returns TemplateResult containing the rendered attachment content
+     */
+    private renderDefaultAttachmentContent;
+    private renderDefaultMessageActionsTemplate;
+    private handleMessageActionClick;
+    private renderDefaultAttachmentTemplate;
+    private renderDefaultAttachmentsTemplate;
+    private showTooltip;
+    /**
+     * Gets the list of chat messages.
+     */
+    get messages(): IgcMessage[];
+    /**
+     * Sets the list of chat messages.
+     */
+    set messages(value: IgcMessage[]);
+    /**
+     * 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 text area component.
+     */
+    get textArea(): IgcTextareaComponent | null;
+    /**
+     * Sets the text area component.
+     */
+    set textArea(value: IgcTextareaComponent);
+    /**
+     * Gets the text area component.
+     */
+    get textAreaRef(): Ref<IgcTextareaComponent>;
+    /**
+     * Gets the list of attachments currently attached to input.
+     */
+    get inputAttachments(): IgcMessageAttachment[];
+    /**
+     * Sets the input attachments and requests host update.
+     */
+    set inputAttachments(value: IgcMessageAttachment[]);
+    /**
+     * Gets the current input value.
+     */
+    get inputValue(): string;
+    /**
+     * Sets the current input value and requests host update.
+     */
+    set inputValue(value: string);
+    /** Returns all default templates applied in the chat component. */
+    get defaultTemplates(): Required<IgcChatTemplates>;
+    /** Sets the default templates applied in the chat component. */
+    set defaultTemplates(templates: Required<IgcChatTemplates>);
+    get mergedTemplates(): Required<IgcChatTemplates>;
+    get chatRenderer(): DefaultChatRenderer | undefined;
+    /**
+     * Handles input text changes.
+     * Updates internal inputValue and emits 'igcInputChange' event.
+     * @param e Input event from the text area
+     */
+    private handleInput;
+    /**
+     * Creates an instance of ChatState.
+     * @param chat The host `<igc-chat>` component.
+     */
+    constructor(chat: IgcChatComponent);
+    /**
+     * Emits a custom event from the host component.
+     * @param name Event name (key of IgcChatComponentEventMap)
+     * @param args Event detail or options
+     * @returns true if event was not canceled, false otherwise
+     */
+    emitEvent: (name: keyof IgcChatComponentEventMap, args?: any) => 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: {
+        id?: string;
+        text: string;
+        sender?: string;
+        timestamp?: Date;
+        attachments?: IgcMessageAttachment[];
+    }) => 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;
+    private getURL;
+    private isImageAttachment;
+    private _fileIconMap;
+    private getFileExtension;
+    handleKeyDown: (e: KeyboardEvent) => void;
+    private handleFocus;
+    private handleBlur;
+    private sendMessage;
+    private handleFileUpload;
+    /**
+     * Removes an attachment by index.
+     * Emits 'igcAttachmentChange' event which can be canceled to prevent removal.
+     * @param index Index of the attachment to remove
+     */
+    private removeAttachment;
+    /**
+     * Handles when a suggestion is clicked.
+     * Adds the suggestion as a new message and focuses the text area.
+     * @param suggestion The suggestion string clicked
+     */
+    handleSuggestionClick: (suggestion: string) => void;
+    /**
+     * Updates the chat options partially.
+     * @param options Partial options to merge with current options
+     */
+    updateOptions(options: Partial<IgcChatOptions>): void;
+    /**
+     * Updates the internal cache for accepted file types.
+     * Parses the acceptedFiles string option into extensions, mimeTypes, and wildcard types.
+     */
+    updateAcceptedTypesCache: () => void;
+    /**
+     * Checks if a file's type or extension is accepted by the chat's acceptedFiles setting.
+     * @param file File object to check
+     * @param type Optional MIME type override if no file provided
+     * @returns True if accepted, false otherwise
+     */
+    isFileTypeAccepted: (file: File, type?: string) => boolean;
+    /**
+     * Checks if a slot is empty.
+     * @param name Slot name to check
+     * @returns True if the slot has content, false otherwise
+     */
+    hasSlotContent(name: string): boolean;
+}
+export declare function createChatState(host: IgcChatComponent): ChatState;