angular-ai-chat-bot v1.1.1
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:
- Add the
ChatBot
to your application's moduledeclarations
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.