ngx-chat-ui


Universal Chat UI based on Angular. It Supports override of every template component via TemplateRef mechanism. Also ngx-chat-ui supports non-text responses (action payloads), for example, select one item from list or click buttons.

$3

npm install --save ngx-chat-ui

Usage

$3

import { NgxChatUiModule } from 'ngx-chat-ui'

@NgModule({
...
imports: [
NgxChatUiModule,
],
...
})

#### Component (app.component.ts)

import { Component, OnInit } from '@angular/core';
import {
INgxChatUiMessage,
INgxChatUiMessageType,
INgxChatUiMessagePayload,
INgxChatUiMessagePartner,
INgxChatUiState,
} from 'ngx-chat-ui';

@Component(
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
)
export class AppComponent implements OnInit {
state: INgxChatUiState;
partners: INgxChatUiMessagePartner[] = [];
messages: INgxChatUiMessage[] = [];

ngOnInit() {
this.partners = this.partners.concat([
{
messagePartnerId: 'me',
firstName: 'Sergey',
lastName: 'Kalaus'
},
{
messagePartnerId: 'it',
firstName: 'Someone'
}
]);

this.messages = this.messages.concat([
{
date: new Date(),
messagePartnerId: 'me',
payload: {
type: INgxChatUiMessageType.text,
text: 'Hello'
}
},
{
date: new Date(),
messageId: '1',
messagePartnerId: 'it',
payload: {
type: INgxChatUiMessageType.text,
text: 'Hi'
},
action: {
type: INgxChatUiMessageType.text
}
}
]);
}

onResponse(payload: INgxChatUiMessagePayload) {
// Here you post data to API and add message to chat afterwards
setTimeout(() => {
this.messages = this.messages.concat([
{
date: new Date(),
messagePartnerId: 'me',
payload
}
]);
});
}
}

#### Component (app.component.html)

[state]="state"
[partners]="partners"
[messages]="messages"
[containerTemplate]="containerTemplate"
(response)="onResponse($event)"
>

#containerTemplate
let-chatKey="chatKey"
let-response="response"
>

Custom template example

[chatKey]="chatKey"
>
[chatKey]="chatKey"
(response)="response.emit($event)"
>

#### Component (app.component.scss)
@import '~ngx-chat-ui/src/themes/default/styles';

$3

Link

$3

Link