Angular AI Chat Bot
🎬 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:
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:
import { ChatBot } from ' angular-ai-chat-bot ' ;
import { Subject } from ' rxjs ' ;
@ Component ( {
selector : ' myComp ' ,
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 😊
👀 Demo
There is demo built with Angular CLI .
🔧 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
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 ' ;
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 ' ;
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
💡 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.