/**
* @license
* Copyright Akveo. 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 { NbStatusService } from '../../services/status.service';
import { NbComponentSize } from '../component-size';
import { NbComponentOrCustomStatus } from '../component-status';
import { NbBooleanInput } from '../helpers';
import { NbChatFormComponent } from './chat-form.component';
import { NbChatMessageComponent } 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
*
*
*
*
*
*
*
* ```
* ### Installation
*
* Import `NbChatModule` to your feature module.
* ```ts
* @NgModule({
* imports: [
* // ...
* NbChatModule,
* ],
* })
* 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 `NbChatModule.forRoot({ ... })` call if this is a global app configuration
* or `NbChatModule.forChild({ ... })` for a feature module configuration:
*
* ```ts
* @NgModule({
* imports: [
* // ...
* NbChatModule.forRoot({ messageGoogleMapKey: 'MAP_KEY' }),
* ],
* })
* export class AppModule { }
* ```
*
* ### Usage
*
* There are three main components:
* ```ts
*
* // chat container
*
*
* // chat form with drag&drop files feature
*
*
* // 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:
* chat-scrollbar-color:
* chat-scrollbar-background-color:
* chat-scrollbar-width:
* chat-text-color:
* chat-text-font-family:
* chat-text-font-size:
* chat-text-font-weight:
* chat-text-line-height:
* 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-basic-background-color:
* chat-basic-text-color:
* 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-control-background-color:
* chat-control-text-color:
* chat-divider-color:
* chat-divider-style:
* chat-divider-width:
* chat-message-background:
* chat-message-text-color:
* chat-message-reply-background-color:
* chat-message-reply-text-color:
* chat-message-avatar-background-color:
* chat-message-sender-text-color:
* chat-message-quote-background-color:
* chat-message-quote-text-color:
* chat-message-file-text-color:
* chat-message-file-background-color:
*/
export declare class NbChatComponent implements OnChanges, AfterContentInit, AfterViewInit {
protected statusService: NbStatusService;
title: string;
/**
* Chat size, available sizes:
* `tiny`, `small`, `medium`, `large`, `giant`
*/
size: NbComponentSize;
/**
* Chat status color (adds specific styles):
* `basic` (default), `primary`, `success`, `info`, `warning`, `danger`, `control`.
*/
status: NbComponentOrCustomStatus;
noMessagesPlaceholder: string;
/**
* Scroll chat to the bottom of the list when a new message arrives
*/
get scrollBottom(): boolean;
set scrollBottom(value: boolean);
protected _scrollBottom: boolean;
static ngAcceptInputType_scrollBottom: NbBooleanInput;
scrollable: ElementRef;
messages: QueryList;
chatForm: NbChatFormComponent;
constructor(statusService: NbStatusService);
ngOnChanges(changes: SimpleChanges): void;
ngAfterContentInit(): void;
ngAfterViewInit(): void;
updateView(): void;
scrollListBottom(): void;
protected updateFormStatus(): void;
get tiny(): boolean;
get small(): boolean;
get medium(): boolean;
get large(): boolean;
get giant(): boolean;
get primary(): boolean;
get success(): boolean;
get info(): boolean;
get warning(): boolean;
get danger(): boolean;
get basic(): boolean;
get control(): boolean;
get additionalClasses(): string[];
}