# angular-ai-chat-bot

> Angular 6 AI Chat Bot module with Google Api

Latest version **1.1.1** (published 2018-08-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install angular-ai-chat-bot
pnpm add angular-ai-chat-bot
yarn add angular-ai-chat-bot
bun add angular-ai-chat-bot
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2018-08-19 |
| First published | 2018-08-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 20 |
| Unpacked size | 73.4 KB |
| Known vulnerabilities | 0 (+35 in 5 direct dependencies) |
| Install scripts | no |
| GitHub stars | 13 |
| Author | Hayk Poghosyan |
| Maintainers | hayk_development |
| Keywords | angular, dialogflow, web speech api, nlp, material, chatbot, bot, ai, ngx, rxjs, observables, custom design, google, api, chat, bot, design, artificial intelligence, intelligence |

## Links

- npm: https://www.npmjs.com/package/angular-ai-chat-bot
- Repository: https://github.com/PoghosyanHayk/Angular-AI-Chat-Bot/tree/chat-bot/chat-bot
- npm.io page: https://npm.io/package/angular-ai-chat-bot

## Dependencies (20)

- [rxjs](https://npm.io/package/rxjs.md) ^6.1.0
- [core-js](https://npm.io/package/core-js.md) ^2.5.6
- [zone.js](https://npm.io/package/zone.js.md) ^0.8.26
- [hammerjs](https://npm.io/package/hammerjs.md) ^2.0.8
- [ts-helpers](https://npm.io/package/ts-helpers.md) ^1.1.2
- [rxjs-compat](https://npm.io/package/rxjs-compat.md) ^6.1.0
- [@angular/cdk](https://npm.io/package/@angular/cdk.md) ^6.4.3
- [@angular/core](https://npm.io/package/@angular/core.md) ^6.0.2
- [@angular/http](https://npm.io/package/@angular/http.md) ^6.0.2
- [@types/lodash](https://npm.io/package/@types/lodash.md) ^4.14.109
- [@angular/forms](https://npm.io/package/@angular/forms.md) ^6.0.2
- [@angular/common](https://npm.io/package/@angular/common.md) ^6.0.2
- [@angular/router](https://npm.io/package/@angular/router.md) ^6.0.2
- [@angular/compiler](https://npm.io/package/@angular/compiler.md) ^6.0.2
- [@angular/material](https://npm.io/package/@angular/material.md) ^6.4.3
- [@material-ui/core](https://npm.io/package/@material-ui/core.md) ^1.4.3
- [@angular/animations](https://npm.io/package/@angular/animations.md) ^6.1.2
- [@angular/platform-server](https://npm.io/package/@angular/platform-server.md) ^6.0.2
- [@angular/platform-browser](https://npm.io/package/@angular/platform-browser.md) ^6.0.2
- [@angular/platform-browser-dynamic](https://npm.io/package/@angular/platform-browser-dynamic.md) ^6.0.2

## Alternatives

- [@expo/fingerprint](https://npm.io/package/@expo/fingerprint.md) — 6.2M weekly downloads
- [@azure/monitor-opentelemetry-exporter](https://npm.io/package/@azure/monitor-opentelemetry-exporter.md) — 850.0K weekly downloads
- [@azure/monitor-opentelemetry](https://npm.io/package/@azure/monitor-opentelemetry.md) — 624.0K weekly downloads
- [@posthog/ai](https://npm.io/package/@posthog/ai.md) — 423.3K weekly downloads
- [fakefilter](https://npm.io/package/fakefilter.md) — 63.9K weekly downloads

## Recent versions

- 1.1.1 (latest) — 2018-08-19
- 1.1.0 — 2018-08-19
- 1.0.15 — 2018-08-19
- 1.0.13 — 2018-08-19
- 1.0.12 — 2018-08-19
- 1.0.11 — 2018-08-19
- 1.0.10 — 2018-08-18
- 1.0.9 — 2018-08-18
- 1.0.8 — 2018-08-18
- 1.0.7 — 2018-08-18
- 1.0.6 — 2018-08-18
- 1.0.5 — 2018-08-17
- 1.0.4 — 2018-08-17
- 1.0.3 — 2018-08-17
- 1.0.2 — 2018-08-16
- … 1 more at https://npm.io/package/angular-ai-chat-bot/versions

## README

# Angular AI Chat Bot

<img src="https://image.ibb.co/bRzqVz/ezgif_com_video_to_gif_1.gif" height="400" width="40%"  /><img  src="https://preview.ibb.co/fSHcvz/a.png" alt="dialog_chat3" height="400" border="0" width="60%">



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

```typescript
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:

```typescript
// 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

```typescript
{
	...
  "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](https://github.com/PoghosyanHayk/Angular-AI-Chat-Bot/tree/chat-bot/chat-bot/src/demo).

## :wrench: API

Here is the fully stuffed _Chat-Bot_ tag that you can use in your templates:

```html
    <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

```typescript
// 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

```html
    <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

```html
    <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:

```typescript
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

```html
    <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>
```

```typescript
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

```html
    <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>
```

```typescript
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:

```typescript
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.

```html
    <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](https://github.com/PoghosyanHayk/Angular-AI-Chat-Bot/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.

---
_Source: https://npm.io/package/angular-ai-chat-bot · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._