Machine learning chatbot with dialogflow, Jupyter notebook,flask,angular,nodeJS – part4

Now, it is time to get a nice chatbot UI.
We will use nebular chat ui
First create a angular app and install nebular theme to the project .
We will create a separate component for handling chatbot.

ng new chatbot --routing
cd chatbot

ng add @nebular/theme

ng generate component bot

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NbThemeModule, NbLayoutModule, NbChatModule, NbSpinnerModule } from '@nebular/theme';
import { NbEvaIconsModule } from '@nebular/eva-icons';
import { BotComponent } from './bot/bot.component';

@NgModule({
  declarations: [
    AppComponent,
    BotComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    BrowserAnimationsModule,
    NbThemeModule.forRoot({ name: 'default' }),
    NbLayoutModule,
    NbEvaIconsModule,
    NbChatModule,
    NbSpinnerModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<nb-layout>

  <nb-layout-header fixed>
  <!-- Insert header here -->
  Welcome to TITANIC XAI BOT
  </nb-layout-header>

  <nb-layout-column>
<app-bot></app-bot>

    <router-outlet></router-outlet>
  </nb-layout-column>

  <nb-layout-footer fixed>
  <!-- Insert footer here -->
  </nb-layout-footer>

</nb-layout>

bot.component.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

const dialogflowURL = 'http://localhost:3000/getBotResponse';

@Component({
  selector: 'app-bot',
  templateUrl: './bot.component.html',
  styleUrls: ['./bot.component.css']
})
export class BotComponent implements OnInit {

  messages = [];
  loading = false;
  // Random ID to maintain session with server
  sessionId = Math.random().toString(36).slice(-5);

  constructor(private http: HttpClient) { }

  ngOnInit(): void {
    this.addBotMessage('Hello! I m TITANIC chatbot. If you want to check your prediction please say hi. ');
  }

  handleUserMessage(event) {
    console.log(event);
    const text = event.message;
    this.addUserMessage(text);

    this.loading = true;
    

    // Make the request 
    this.http.post<any>(
      dialogflowURL,
      {
        sessionId: this.sessionId,
        queryInput: {
          text: {
            text,
            languageCode: 'en-US'
          }
        }
      }
    )
    .subscribe(res => {
      const { fulfillmentText } = res;
      this.addBotMessage(fulfillmentText);
      this.loading = false;
    });
  }

  addUserMessage(text) {
    this.messages.push({
      text,
      sender: 'You',
      reply: true,
      date: new Date()
    });
  }

  addBotMessage(text) {
    this.messages.push({
      text,
      sender: 'Bot',
      avatar: '/assets/bot.jpeg',
      date: new Date()
    });
  }

}

bot.component.html

<div class="chatbot">
  <nb-chat title="Titanic XAI bot" size="large" scrollBottom="true">
    <nb-chat-message
      *ngFor="let msg of messages"
      type="text"
      [message]="msg.text"
      [reply]="msg.reply"
      [sender]="msg.sender"
      [date]="msg.date"
      [avatar]="msg.avatar"
    >
    </nb-chat-message>

    <nb-chat-message
      *ngIf="loading"
      [nbSpinner]="loading"
      nbSpinnerStatus="info"
      type="text"
      avatar="/assets/bot.jpeg"
      message="..."
    >
    </nb-chat-message>

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


Finally if you run ng serve then you will able to start to chat with dialogflow bot.



Get all the codes from git and try by yoursef.
Enjoy.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s