/** * @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[]; }