igniteui-angular/types/igniteui-angular-chat.d.ts

Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps

import * as _angular_core from '@angular/core';
import { TemplateRef, OnInit, OnDestroy } from '@angular/core';
import { ChatRenderers, ChatAttachmentRenderContext, ChatMessageRenderContext, ChatInputRenderContext, ChatRenderContext, IgcChatMessageAttachment, IgcChatMessage, IgcChatComponent, IgcChatOptions, IgcChatMessageReaction } from 'igniteui-webcomponents';

type ChatContextUnion = ChatAttachmentRenderContext | ChatMessageRenderContext | ChatInputRenderContext | ChatRenderContext;
type ChatContextType<T extends ChatContextUnion> = T extends ChatAttachmentRenderContext ? IgcChatMessageAttachment : T extends ChatMessageRenderContext ? IgcChatMessage : T extends ChatInputRenderContext ? string : T extends ChatRenderContext ? {
    instance: IgcChatComponent;
} : never;
type ExtractChatContext<T> = T extends (ctx: infer R) => any ? R : never;
type ChatTemplatesContextMap = {
    [K in keyof ChatRenderers]: {
        $implicit: ChatContextType<ExtractChatContext<NonNullable<ChatRenderers[K]>> & ChatContextUnion>;
    };
};
/**
 * Template references for customizing chat component rendering.
 * Each property corresponds to a specific part of the chat UI that can be customized.
 *
 * @example
 * ```typescript
 * templates = {
 *   messageContent: this.customMessageTemplate,
 *   attachment: this.customAttachmentTemplate
 * }
 * ```
 */
type IgxChatTemplates = {
    [K in keyof Omit<ChatRenderers, 'typingIndicator'>]?: TemplateRef<ChatTemplatesContextMap[K]>;
};
/**
 * Configuration options for the chat component.
 */
type IgxChatOptions = Omit<IgcChatOptions, 'renderers'>;
/**
 * Angular wrapper component for the Ignite UI Web Components Chat component.
 *
 * This component provides an Angular-friendly interface to the igc-chat web component,
 * including support for Angular templates, signals, and change detection.
 *
 * Uses OnPush change detection strategy for optimal performance. All inputs are signals,
 * so changes are automatically tracked and propagated to the underlying web component.
 *
 * @example
 * ```typescript
 * <igx-chat
 *   [messages]="messages"
 *   [draftMessage]="draft"
 *   [options]="chatOptions"
 *   [templates]="chatTemplates"
 *   (messageCreated)="onMessageCreated($event)"
 * />
 * ```
 */
declare class IgxChatComponent implements OnInit, OnDestroy {
    private readonly _view;
    private readonly _templateViewRefs;
    private _oldTemplates;
    protected readonly _transformedTemplates: _angular_core.WritableSignal<ChatRenderers>;
    protected readonly _mergedOptions: _angular_core.Signal<IgcChatOptions>;
    /** Array of chat messages to display */
    readonly messages: _angular_core.InputSignal<IgcChatMessage[]>;
    /** Draft message with text and optional attachments */
    readonly draftMessage: _angular_core.InputSignal<{
        text: string;
        attachments?: IgcChatMessageAttachment[];
    }>;
    /** Configuration options for the chat component */
    readonly options: _angular_core.InputSignal<IgxChatOptions>;
    /** Custom templates for rendering chat elements */
    readonly templates: _angular_core.InputSignal<IgxChatTemplates>;
    /** Emitted when a new message is created */
    readonly messageCreated: _angular_core.OutputEmitterRef<IgcChatMessage>;
    /** Emitted when a user reacts to a message */
    readonly messageReact: _angular_core.OutputEmitterRef<IgcChatMessageReaction>;
    /** Emitted when an attachment is clicked */
    readonly attachmentClick: _angular_core.OutputEmitterRef<IgcChatMessageAttachment>;
    /** Emitted when attachment drag starts */
    readonly attachmentDrag: _angular_core.OutputEmitterRef<void>;
    /** Emitted when attachment is dropped */
    readonly attachmentDrop: _angular_core.OutputEmitterRef<void>;
    /** Emitted when typing indicator state changes */
    readonly typingChange: _angular_core.OutputEmitterRef<boolean>;
    /** Emitted when the input receives focus */
    readonly inputFocus: _angular_core.OutputEmitterRef<void>;
    /** Emitted when the input loses focus */
    readonly inputBlur: _angular_core.OutputEmitterRef<void>;
    /** Emitted when the input value changes */
    readonly inputChange: _angular_core.OutputEmitterRef<string>;
    /** @internal */
    ngOnInit(): void;
    /** @internal */
    ngOnDestroy(): void;
    constructor();
    private _setTemplates;
    private _createTemplateRenderer;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<IgxChatComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<IgxChatComponent, "igx-chat", never, { "messages": { "alias": "messages"; "required": false; "isSignal": true; }; "draftMessage": { "alias": "draftMessage"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "templates": { "alias": "templates"; "required": false; "isSignal": true; }; }, { "messageCreated": "messageCreated"; "messageReact": "messageReact"; "attachmentClick": "attachmentClick"; "attachmentDrag": "attachmentDrag"; "attachmentDrop": "attachmentDrop"; "typingChange": "typingChange"; "inputFocus": "inputFocus"; "inputBlur": "inputBlur"; "inputChange": "inputChange"; }, never, ["*"], true, never>;
}
/**
 * Context provided to the chat input template.
 */
interface ChatInputContext {
    /** The current input value */
    $implicit: string;
    /** Array of attachments associated with the input */
    attachments: IgcChatMessageAttachment[];
}
/**
 * Directive providing type information for chat message template contexts.
 * Use this directive on ng-template elements that render chat messages.
 *
 * @example
 * ```html
 * <ng-template igxChatMessageContext let-message>
 *   <div>{{ message.text }}</div>
 * </ng-template>
 * ```
 */
declare class IgxChatMessageContextDirective {
    static ngTemplateContextGuard(_: IgxChatMessageContextDirective, ctx: unknown): ctx is {
        $implicit: IgcChatMessage;
    };
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<IgxChatMessageContextDirective, never>;
    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<IgxChatMessageContextDirective, "[igxChatMessageContext]", never, {}, {}, never, never, true, never>;
}
/**
 * Directive providing type information for chat attachment template contexts.
 * Use this directive on ng-template elements that render message attachments.
 *
 * @example
 * ```html
 * <ng-template igxChatAttachmentContext let-attachment>
 *   <img [src]="attachment.url" />
 * </ng-template>
 * ```
 */
declare class IgxChatAttachmentContextDirective {
    static ngTemplateContextGuard(_: IgxChatAttachmentContextDirective, ctx: unknown): ctx is {
        $implicit: IgcChatMessageAttachment;
    };
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<IgxChatAttachmentContextDirective, never>;
    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<IgxChatAttachmentContextDirective, "[igxChatAttachmentContext]", never, {}, {}, never, never, true, never>;
}
/**
 * Directive providing type information for chat input template contexts.
 * Use this directive on ng-template elements that render the chat input.
 *
 * @example
 * ```html
 * <ng-template igxChatInputContext let-value let-attachments="attachments">
 *   <input [value]="value" />
 * </ng-template>
 * ```
 */
declare class IgxChatInputContextDirective {
    static ngTemplateContextGuard(_: IgxChatInputContextDirective, ctx: unknown): ctx is ChatInputContext;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<IgxChatInputContextDirective, never>;
    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<IgxChatInputContextDirective, "[igxChatInputContext]", never, {}, {}, never, never, true, never>;
}

export { IgxChatAttachmentContextDirective, IgxChatComponent, IgxChatInputContextDirective, IgxChatMessageContextDirective };
export type { ChatInputContext, IgxChatOptions, IgxChatTemplates };