NbChatComponent

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.

Basic chat configuration and usage:

<nb-chat title="Nebular Conversational UI">
      <nb-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">
  </nb-chat-message>

  <nb-chat-form (send)="sendMessage($event)" [dropFiles]="true">
  </nb-chat-form>
</nb-chat>

Installation

Import NbChatModule to your feature module.

@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:

@NgModule({
  imports: [
    // ...
    NbChatModule.forRoot({ messageGoogleMapKey: 'MAP_KEY' }),
  ],
})
export class AppModule { }

Usage

There are three main components:

<nb-chat>
</nb-chat> // chat container

<nb-chat-form>
</nb-chat-form> // chat form with drag&drop files feature

<nb-chat-message>
</nb-chat-message> // chat message, available multiple types

Two users conversation showcase:

Chat UI is also available in different colors by specifying a [status] input:

Also it is possible to configure sizes through [size] input:

Custom message types

Besides built-in message types, you could provide custom ones with their own template to render. As an example, let's add the link message type.
First, you need to provide a template for the link message type:

<nb-chat>
  <a *nbCustomMessage="'link'" href="https://example.com">example.com</a>
</nb-chat>

Then, add the nb-chat-message component with the link type:

<nb-chat>
  <a *nbCustomMessage="'link'" href="https://example.com">example.com</a>
  <nb-chat-message type="link"></nb-chat-message>
</nb-chat>

Custom message templates could have arbitrary data associated with them. Let's extract hardcoded link href and text. To pass some data to the custom message template, use the customMessageData input of the nb-chat-message component:

...
<nb-chat-message type="link" [customMessageData]="{ href: 'https://example.com', text: 'example.com' }">
</nb-chat-message>
...

When customMessageData is set, this object would become a template context and you'll be able to reference it via let varName syntax:

<a *nbCustomMessage="'link'; let data" [href]="data.href">{{ data.text }}</a>

That's it, full example will look like this:

<nb-chat title="Nebular Conversational UI">
  <a *nbCustomMessage="'link'; let data" [href]="data.href">{{ data.text }}</a>
  <nb-chat-message type="link" [customMessageData]="{ href: 'https://example.com', text: 'example.com' }">
  </nb-chat-message>
</nb-chat>

If you want to style your custom template from the ground up you could turn off generic message styling (such as round borders, color, background, etc.) via the noStyles input:

  <div *nbCustomMessage="'my-custom-type'; noStyles: true">...</div>

When you decide to use your own styles, the isReply property of the custom message template context would come in handy. This property allows you to determine whether the message is a reply or not. For example, to change link text color (as replies have a different background):

<a *nbCustomMessage="'link'; let data; let isReply=isReply"
   [href]="data.href"
   [class.link-control]="!isReply">
  {{ data.label }}
</a>

Below, you could find a more complex example with multiple custom message types:

NbChatMessageComponent

Chat message component.

Multiple message types are available through a type property, such as

• text - simple text message
• file - could be a file preview or a file icon if multiple files are provided grouped files are shown
• quote - quotes a message with specific quote styles
• map - shows a google map picture by provided [latitude] and [longitude] properties

Message with attached files:

<nb-chat-message
  type="file"
  [files]="[ { url: '...' } ]"
  message="Hello world!">
</nb-chat-message>

Map message:

<nb-chat-message
  type="map"
  [latitude]="53.914"
  [longitude]="27.59"
  message="Here I am">
</nb-chat-message>

NbChatFormComponent

Chat form component.

Show a message form with a send message button.

<nb-chat-form showButton="true" buttonIcon="nb-send">
</nb-chat-form>

When [dropFiles]="true" handles files drag&drop with a file preview.

Drag & drop available for files and images:

New message could be tracked outside by using (send) output.

<nb-chat-form (send)="onNewMessage($event)">
</nb-chat-form>

// ...

onNewMessage({ message: string, files: any[] }) {
  this.service.sendToServer(message, files);
}

NbChatCustomMessageDirective

[nbCustomMessage] directive should be used as a structural directive or should be applied to the ng-template:

<div *nbCustomMessage="'my-custom-type'; let data">
  <!-- custom message -->
</div>

or

<ng-template nbCustomMessage='my-custom-type' let-data>
  <!-- custom message -->
</ng-template>