add chatbot module

ClientApp/src/app/chatbot-start/chatbot-start-routing.module.ts

+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { ChatbotStartPage } from './chatbot-start.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ChatbotStartPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class ChatbotStartPageRoutingModule {}

ClientApp/src/app/chatbot-start/chatbot-start.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { ChatbotStartPageRoutingModule } from './chatbot-start-routing.module';
+
+import { ChatbotStartPage } from './chatbot-start.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    ChatbotStartPageRoutingModule
+  ],
+  declarations: [ChatbotStartPage]
+})
+export class ChatbotStartPageModule {}

ClientApp/src/app/chatbot-start/chatbot-start.page.html

+<ion-header>
+  <ion-toolbar>
+    <ion-title>ChatbotStart</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content style="background-color: #E9F0FB">
+  <div class="row ion-justify-content-center ion-align-items-center" style="height: 80vh">
+    <div class="col-11">
+
+      <div class="row mt-3">
+        <div class="col">
+          <div class="d-grid gap-2 mt-2 ion-text-center">
+            <h1>Chatbot for disease identification</h1>
+            <p>You're all set</p>
+            <button class="btn btn-lg btn-secondary" type="button" style="background-color: #5b628f" [routerLink]="['/chatbot']">Start Using Best Bark Chatbot</button>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</ion-content>

ClientApp/src/app/chatbot-start/chatbot-start.page.spec.ts

+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { ChatbotStartPage } from './chatbot-start.page';
+
+describe('ChatbotStartPage', () => {
+  let component: ChatbotStartPage;
+  let fixture: ComponentFixture<ChatbotStartPage>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ChatbotStartPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ChatbotStartPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

ClientApp/src/app/chatbot-start/chatbot-start.page.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-chatbot-start',
+  templateUrl: './chatbot-start.page.html',
+  styleUrls: ['./chatbot-start.page.scss'],
+})
+export class ChatbotStartPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

ClientApp/src/app/chatbot/chatbot-routing.module.ts

+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { ChatbotPage } from './chatbot.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ChatbotPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class ChatbotPageRoutingModule {}

ClientApp/src/app/chatbot/chatbot.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { ChatbotPageRoutingModule } from './chatbot-routing.module';
+
+import { ChatbotPage } from './chatbot.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    ChatbotPageRoutingModule
+  ],
+  declarations: [ChatbotPage]
+})
+export class ChatbotPageModule {}

ClientApp/src/app/chatbot/chatbot.page.html

+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button></ion-back-button>
+    </ion-buttons>
+    <ion-title>Chatbot</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <div class="container-fluid mt-1" style="background-color: #E9F0FB">
+    <div class="row ion-justify-content-center" style="height: 100vh">
+      <div class="col-11">
+
+        <div class="row">
+          <div class="col" style="height: 85vh; overflow: scroll" id="chatContainer">
+
+            <div class="row mb-1" *ngFor="let chatMessage of chatMessages">
+              <div class="col">
+                <div class="row {{chatMessage.user ? 'ion-justify-content-end':''}}">
+                  <div class="col-10 rounded-3 {{chatMessage.user ? 'bg-secondary':'bg-primary'}} p-2">
+                    <p class="mb-0 text-light fw-bold">{{chatMessage.message}}</p>
+                    <p class="mt-0 mb-0 text-light fw-light"><small>{{chatMessage.date | date : 'M/d/yy, h:mm a'}}</small></p>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="row mb-1" *ngIf="i == 2">
+              <div class="col" style="height: 20vh; overflow: scroll;">
+                <div class="row ion-justify-content-end">
+                  <div class="col-10 rounded-3 bg-secondary p-2">
+                    <p class="mb-0 text-light fw-bold">{{i}} Select symptoms your pet has</p>
+                    <ul class="list-group">
+                      <li class="list-group-item" *ngFor="let symptom of symptomsItr" (click)="selectSymtom(symptom)">{{symptom}}</li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+          </div>
+        </div>
+
+        <div class="row">
+          <div class="col">
+            <input class="form-control" type="text" placeholder="Your message" [(ngModel)]="chatMessageInput">
+          </div>
+          <div class="col-2 mt-1">
+            <img src="assets/send.png" (click)="sendMessage()">
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+</ion-content>

ClientApp/src/app/chatbot/chatbot.page.spec.ts

+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { ChatbotPage } from './chatbot.page';
+
+describe('ChatbotPage', () => {
+  let component: ChatbotPage;
+  let fixture: ComponentFixture<ChatbotPage>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ChatbotPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ChatbotPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

ClientApp/src/app/chatbot/chatbot.page.ts

+import { Component, OnInit } from '@angular/core';
+import {ChatMessage} from '../interfaces/chat-message';
+import {isNumeric} from 'rxjs/internal-compatibility';
+import {PythonBackendService} from "../core/python-backend.service";
+
+@Component({
+  selector: 'app-chatbot',
+  templateUrl: './chatbot.page.html',
+  styleUrls: ['./chatbot.page.scss'],
+})
+export class ChatbotPage implements OnInit {
+  email = localStorage.getItem('email');
+  chatMessages: ChatMessage[] = [];
+  chatMessageInput = '';
+  symptoms: string[] = ['anorexia','high fever','itching','pus discharge','fever','dripping urine','cough','vomiting','unable to swallowing','scratching','scratching the affected ear on the floor','blood in urine','eye discharge','lethargy','patchy hair loss','rubbing the affected ear on the floor','strain to urinate','nasal discharge','bloody diarrhea','increased salivation','crusty skin ulcers','frequently rotating movement','diarrhea','frequently urination','mild fever','drooling','skin redness','rash','painful','pale gums','licking genital area','abdominal pain','seizures','inflammation of skin','hyperemic gums','bloating','paralysis','unpleasant odor','redness on the ear','whining when urination','weight loss','hypersensitivity','stiff joints','muscle twitching','weakness','odd behavior','thickening of skin','abnormal bleeding','dehydration','sores on the abdomen','enlarged lymph nodes','sores on the legs','increased capillary refill time','difficulty breathing','sores on the ears','pain','sores on the chest','sores on the elbows','partial paralysis','complete paralysis'];
+  symptomsItr: string[] = [];
+  diseases: string[] = ['Canine Distemper','Canine Scabies','Otitis Media','Parvovirus ','Rabies','Tick Fever','Urinary tract infections (UTIs)'];
+  inputArray = [[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]];
+
+  age: number;
+  breed: number;
+  i = 0;
+
+  public prediction: string;
+
+  constructor(
+    private pythonBackendService: PythonBackendService
+  ) { }
+
+  ngOnInit() {
+    this.symptomsItr = this.symptoms;
+    this.chatMessages.push({date: new Date(), message: 'Hi, '+this.email, user: false});
+    this.chatMessages.push({date: new Date(), message: 'I am the virtual disease consultant of your dog\'s diseases. I can predict your dog\'s disease on behalf of you', user: false});
+    this.chatMessages.push({date: new Date(), message: 'First, let me ask you a couple of questions about your dog to get to know your dog better', user: false});
+    this.chatMessages.push({date: new Date(), message: 'Let’s Start by telling me about your dog’s age?', user: false});
+    // this.chatMessages.push({date: new Date(), message: 'Hi', user: true});
+    // this.chatMessages.push({date: new Date(), message: 'How can i help you?', user: false});
+    var objDiv = document.getElementById('chatContainer');
+    objDiv.scrollTop = objDiv.scrollHeight;
+  }
+
+  predict() {
+    this.inputArray[0][0] = this.age;
+    this.inputArray[0][1] = this.breed;
+    this.pythonBackendService.predictDiseaseWithSymptoms(this.inputArray)
+      .subscribe(res => {
+        console.log(this.diseases[res.pred]);
+        this.prediction = this.diseases[res.pred];
+        this.chatMessages.push({date: new Date(), message: 'Your dog might have '+this.prediction, user: false});
+        var objDiv = document.getElementById('chatContainer');
+        objDiv.scrollTop = objDiv.scrollHeight;
+      });
+  }
+
+  sendMessage() {
+    this.i += 1;
+    if (this.chatMessageInput) {
+      this.chatMessages.push({date: new Date(), message: this.chatMessageInput, user: true});
+      if (this.i === 1) {
+        if (isNumeric(this.chatMessageInput)) {
+          this.age = Number(this.chatMessageInput);
+          console.log(this.age);
+          this.chatMessages.push({date: new Date(), message: 'What is the breed of the dog?', user: false});
+        }else {
+          this.i -= 1;
+          this.chatMessages.push({date: new Date(), message: 'Let’s Start by telling me about your dog’s age?', user: false});
+        }
+      }else if (this.i === 2) {
+        if (this.chatMessageInput.toLowerCase().includes('german') || this.chatMessageInput.toLowerCase().includes('sheppherd')) {
+          this.breed = 0;
+          this.chatMessages.push({date: new Date(), message: 'Symptoms?', user: false});
+        }else if (this.chatMessageInput.toLowerCase().includes('labrador') || this.chatMessageInput.toLowerCase().includes('retriever')) {
+          this.breed = 1;
+          this.chatMessages.push({date: new Date(), message: 'Symptoms?', user: false});
+        }else if (this.chatMessageInput.toLowerCase().includes('mongrel')) {
+          this.breed = 2;
+          this.chatMessages.push({date: new Date(), message: 'Symptoms?', user: false});
+        }else if (this.chatMessageInput.toLowerCase().includes('pomeranian')) {
+          this.breed = 3;
+          this.chatMessages.push({date: new Date(), message: 'Symptoms?', user: false});
+        }else {
+          this.i -= 1;
+          this.chatMessages.push({date: new Date(), message: 'What is the breed of the dog?', user: false});
+        }
+      }else {
+        const words = this.chatMessageInput.split(' ');
+        let totalSymptomCount = 0;
+        for (let j = 0; j < this.symptoms.length; j++) {
+          if (
+            this.symptoms[j].toLowerCase().includes(this.chatMessageInput.toLowerCase()) ||
+            this.chatMessageInput.toLowerCase().includes(this.symptoms[j].toLowerCase())
+          ) {
+            this.inputArray[0][j+2] = 1;
+            totalSymptomCount++;
+          }
+        }
+        if (totalSymptomCount > 4) {
+          this.predict();
+        }else {
+          this.i -= 1;
+          this.chatMessages.push({date: new Date(), message: 'Can you tell me more about the symptoms?', user: false});
+        }
+      }
+      this.chatMessageInput = '';
+    }
+    var objDiv = document.getElementById('chatContainer');
+    objDiv.scrollTop = objDiv.scrollHeight;
+  }
+
+  selectSymtom(symptom: string) {
+    this.chatMessageInput += symptom + ' ';
+  }
+}