/**
 * @license
 * Copyright Endlessjs. All Rights Reserved.
 * Licensed under the MIT License. See License.txt in the project root for license information.
 */
import { ElementRef, QueryList, AfterViewInit, SimpleChanges, AfterContentInit, OnChanges } from '@angular/core';
import { ElComponentSize } from '../component-size';
import { ElComponentStatus } from '../component-status';
import { ElChatFormComponent } from './chat-form.component';
import { ElChatMessageComponent } from './chat-message.component';
/**
 * Conversational UI collection - a set of components for chat-like UI construction.
 *
 * Main features:
 * - different message types support (text, image, file, file group, map, etc)
 * - drag & drop for images and files with preview
 * - different UI styles
 * - custom action buttons (coming soon)
 *
 * Here's a complete example build in a bot-like app. Type `help` to be able to receive different message types.
 * Enjoy the conversation and the beautiful UI.
 * @stacked-example(Showcase, chat/chat-showcase.component)
 *
 * Basic chat configuration and usage:
 * ```ts
 * <el-chat title="Endlessjs Conversational UI">
 *       <el-chat-message *ngFor="let msg of messages"
 *                        [type]="msg.type"
 *                        [message]="msg.text"
 *                        [reply]="msg.reply"
 *                        [sender]="msg.user.name"
 *                        [date]="msg.date"
 *                        [files]="msg.files"
 *                        [quote]="msg.quote"
 *                        [latitude]="msg.latitude"
 *                        [longitude]="msg.longitude"
 *                        [avatar]="msg.user.avatar">
 *   </el-chat-message>
 *
 *   <el-chat-form (send)="sendMessage($event)" [dropFiles]="true">
 *   </el-chat-form>
 * </el-chat>
 * ```
 * ### Installation
 *
 * Import `ElChatModule` to your feature module.
 * ```ts
 * @NgModule({
 *   imports: [
 *     // ...
 *     ElChatModule,
 *   ],
 * })
 * export class PageModule { }
 * ```
 *
 * If you need to provide an API key for a `map` message type (which is required by Google Maps)
 * you may use `ElChatModule.forRoot({ ... })` call if this is a global app configuration
 * or `ElChatModule.forChild({ ... })` for a feature module configuration:
 *
 * ```ts
 * @NgModule({
 *   imports: [
 *     // ...
 *     ElChatModule.forRoot({ messageGoogleMapKey: 'MAP_KEY' }),
 *   ],
 * })
 * export class AppModule { }
 * ```
 *
 * ### Usage
 *
 * There are three main components:
 * ```ts
 * <el-chat>
 * </el-chat> // chat container
 *
 * <el-chat-form>
 * </el-chat-form> // chat form with drag&drop files feature
 *
 * <el-chat-message>
 * </el-chat-message> // chat message, available multiple types
 * ```
 *
 * Two users conversation showcase:
 * @stacked-example(Conversation, chat/chat-conversation-showcase.component)
 *
 * Chat UI is also available in different colors by specifying a `[status]` input:
 *
 * @stacked-example(Colored Chat, chat/chat-colors.component)
 *
 * Also it is possible to configure sizes through `[size]` input:
 *
 * @stacked-example(Chat Sizes, chat/chat-sizes.component)
 *
 * @styles
 *
 * chat-background-color:
 * chat-border:
 * chat-border-radius:
 * chat-shadow:
 * chat-padding:
 * chart-scrollbar-color:
 * chart-scrollbar-background-color:
 * chart-scrollbar-width:
 * chat-text-color:
 * chat-text-font-family:
 * chat-text-font-size:
 * chat-text-font-weight:
 * chat-text-line-height:
 * chat-header-text-color:
 * chat-header-text-font-family:
 * chat-header-text-font-size:
 * chat-header-text-font-weight:
 * chat-header-text-line-height:
 * chat-tiny-height:
 * chat-small-height:
 * chat-medium-height:
 * chat-large-height:
 * chat-giant-height:
 * chat-primary-background-color:
 * chat-primary-text-color:
 * chat-success-background-color:
 * chat-success-text-color:
 * chat-info-background-color:
 * chat-info-text-color:
 * chat-warning-background-color:
 * chat-warning-text-color:
 * chat-danger-background-color:
 * chat-danger-text-color:
 * chat-divider-color:
 * chat-divider-style:
 * chat-divider-width:
 */
export declare class ElChatComponent implements OnChanges, AfterContentInit, AfterViewInit {
    title: string;
    /**
     * Chat size, available sizes:
     * `tiny`, `small`, `medium`, `large`, `giant`
     */
    size: ElComponentSize;
    /**
     * Chat status color (adds specific styles):
     * `primary`, `success`, `info`, `warning`, `danger`
     */
    status: ElComponentStatus;
    /**
     * Scroll chat to the bottom of the list when a new message arrives
     */
    scrollBottom: boolean;
    protected _scrollBottom: boolean;
    scrollable: ElementRef;
    messages: QueryList<ElChatMessageComponent>;
    chatForm: ElChatFormComponent;
    ngOnChanges(changes: SimpleChanges): void;
    ngAfterContentInit(): void;
    ngAfterViewInit(): void;
    updateView(): void;
    scrollListBottom(): void;
    protected updateFormStatus(): void;
    readonly tiny: boolean;
    readonly small: boolean;
    readonly medium: boolean;
    readonly large: boolean;
    readonly giant: boolean;
    readonly primary: boolean;
    readonly success: boolean;
    readonly info: boolean;
    readonly warning: boolean;
    readonly danger: boolean;
}