Angular AI Chat Bot

:clapper: Usage

Ok, let's start with an installation - all you need to do is:

npm install --save angular-ai-chat-bot

Now when you have angular-ai-chat-bot installed, you are in a few steps from having Chat Bot in your application:

1. Add the ChatBot to your application's module declarations section:

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import {ChatBot} from 'angular-ai-chat-bot';

@NgModule({
  declarations: [MyComponent, ChatBot],
  imports: [BrowserModule],
  bootstrap: [MyComponent]
})
export class MyModule {}

2. As soon as the previous step is done we need to give ChatBot an access token and message object - this can be accomplished by populating its [token] attribute with an 'Client access token' from Dialog Flow Agent and [msg] attribute with an RX Subject:

// 1 - import required classes and interfaces
import { ChatBot } from 'angular-ai-chat-bot';
import { Subject } from 'rxjs';


@Component({
  selector: 'myComp',
  // 2 - set [token] attribute to ChatBot object
  template: `<Chat-bot class="chat-window"
                              [token]="accessToken"
                              [msg]="message"
                              >
               <ng-template>
               </ng-template>
             </Chat-bot>`
})
class MyComponent {
  public accessToken = 'YOUR_ACCESS_TOKEN';
  public message: Subject<any> = new Subject();
}

3. You need to add module into typescript compilation configs

tsconfig.app.json

{
	...
  "include": [
  	...
  "../node_modules/angular-ai-chat-bot/*.ts",
   "../node_modules/angular-ai-chat-bot/**/*.ts"
  ],
	...
}

Voila! That's pretty much it - enjoy :blush:

:eyes: Demo

There is demo built with Angular CLI.

:wrench: API

Here is the fully stuffed Chat-Bot tag that you can use in your templates:

    <Chat-bot class="chat-window"
                     [token]="accessToken"
                     [msg]="msg"
                     [msgTemplate]='message'
                     [inputTemplate]='input'
					 (onMsgReceive)="onMsgReceive($event)">
      <ng-template #window>
      </ng-template>
    </Chat-bot>

Let's go through every element of this structure one by one.

Chat-bot

Chat-bot is the selector for Chat bot which is bundled into ChatBot:

[token] :required

Chat-bot has a [token] attribute which needs to connect to Google API:

[msg] :required

Chat-bot has a [msg] attribute which should be RX Subject object

// 1 - import required classes and interfaces
import { ChatBot } from 'angular-ai-chat-bot';
import { Subject } from 'rxjs';


@Component({
  selector: 'myComp',
  template: `<app-chat-window class="chat-window"
                              [token]="accessToken"
                              [msg]="message"
                              >
               <ng-template>
               </ng-template>
             </app-chat-window>`
})
class MyComponent {
  public accessToken = 'YOUR_ACCESS_TOKEN';
  public message: Subject<any> = new Subject();
  
  private sendMessage(msgText: string):void {
      this.message.next(msgText);
  }
}

[msgTemplate]

Chat-bot has a [msgTemplate] attribute which is a template for message

    <Chat-bot class="chat-window"
                     [token]="accessToken"
                     [msg]="msg"
                     [msgTemplate]='message'
                     [inputTemplate]='input'>
      <ng-template #window>
      </ng-template>
    </Chat-bot>
    
    
    <ng-template #message let-text="text" let-object="object" let-sendBy="sendBy">
      <div>
        <span>{{sendBy}}</span>
        <span>{{text}}</span>
      </div>
    </ng-template>

Or you can import chat-msg component from angular-ai-chat-bot module and use it

    <Chat-bot class="chat-window"
                     [token]="accessToken"
                     [msg]="msg"
                     [msgTemplate]='message'
                     [inputTemplate]='input'>
      <ng-template #window>
      </ng-template>
    </Chat-bot>
    
    
    <ng-template #message let-text="text" let-object="object" let-sendBy="sendBy">
      <chat-msg [msg]="{text: text,sendBy: sendBy}" ></chat-msg>
    </ng-template>

Add the ChatMsg to your application's module declarations section:

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import {ChatBot} from 'angular-ai-chat-bot';
// Add the following component
import { ChatMsg } from 'angular-ai-chat-bot';
 

@NgModule({
  declarations: [MyComponent, ChatBot, ChatMsg],
  imports: [BrowserModule],
  bootstrap: [MyComponent]
})
export class MyModule {}

[inputTemplate]

Chat-bot has a [inputTemplate] attribute which is a template for message input

    <Chat-bot class="chat-window"
                     [token]="accessToken"
                     [msg]="msg"
                     [msgTemplate]='message'
                     [inputTemplate]='input'>
      <ng-template #window>
      </ng-template>
    </Chat-bot>
      
<ng-template #input>
  <input (change)="onChange($event.target);">
</ng-template>

class MyComponent {
  public accessToken = 'YOUR_ACCESS_TOKEN';
  public message: Subject<any> = new Subject();
  public onChange(message: string) {
      this.message.next(message);
  }
}

Or you can import chat-input component from angular-ai-chat-bot module and use it

    <Chat-bot class="chat-window"
                     [token]="accessToken"
                     [msg]="msg"
                     [msgTemplate]='message'
                     [inputTemplate]='input'>
      <ng-template #window>
      </ng-template>
    </Chat-bot>
    
    
<ng-template #input>
  <chat-input (change)="onChange($event.target.value);"></chat-input>
</ng-template>

class MyComponent {
  public accessToken = 'YOUR_ACCESS_TOKEN';
  public message: Subject<any> = new Subject();
  public onChange(message: string) {
      this.message.next(message);
  }
}

Add the ChatInput to your application's module declarations section:

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import {ChatBot} from 'angular-ai-chat-bot';
// Add the following component
import { ChatInput } from 'angular-ai-chat-bot';
 

@NgModule({
  declarations: [MyComponent, ChatBot, ChatInput],
  imports: [BrowserModule],
  bootstrap: [MyComponent]
})
export class MyModule {}

Events

(onMsgReceive)

You can subscribe to the message receive event by attaching listener to the (onMsgReceive) attribute.

    <Chat-bot class="chat-window"
                  (onMsgReceive)="onMsgReceive($event)">
      <ng-template #window>
      </ng-template>
    </Chat-bot>

onMsgReceive has just one property: recived message context

:bulb: Want to help?

I am very appreciate for your ideas, proposals and found bugs which you can put in github issues. Thanks in advance!

P.S. If you find it hard going through the documentation, please, let me know which parts of it was difficult to grasp and I will improve them.