Optimization

Author: jeroenouw

.gitignore

@@ -31,6 +31,7 @@ npm-debug.log
 testem.log
 /typings
 readme.txt
+package-lock.json
 
 # e2e
 /e2e/*.js

Procfile

@@ -50,5 +50,8 @@
   },
   "defaults": {
     "styleExt": "scss"
+  },
+  "warnings": {
+    "typescriptMismatch": false
   }
 }

angular-cli.json

@@ -1,27 +1,27 @@
 <mat-card>
-    <h1 class="mat-display-1">Angular 5 AI</h1>
+  <h1 class="mat-display-1">Angular 5 AI</h1>
 
-    <mat-card-content *ngFor="let message of allMessages | async">
-        <div 
-        class="message" 
-        [ngClass]="{ 'from': message.sentBy === 'bot', 'to':   message.sentBy === 'user' }">
-        {{ message.content }}
-        </div>
-    </mat-card-content>
-
-    <div class="message-container">
-        <mat-card-actions class="voice-button">
-            <button mat-icon-button (click)="startTalkingToBot()">
-                <mat-icon>keyboard_voice</mat-icon> 
-            </button>
-        </mat-card-actions>
-        <mat-input-container>
-            <input matInput [(ngModel)]="formInput" min="2" placeholder="Your Message..." (keyup.enter)="sendMessageToBot()" type="text">
-        </mat-input-container>
+  <mat-card-content *ngFor="let message of allMessages | async">
+    <div
+    class="message"
+    [ngClass]="{ 'from': message.sentBy === 'bot', 'to':   message.sentBy === 'user' }">
+    {{ message.content }}
     </div>
+  </mat-card-content>
 
-    <mat-card-actions class="button center">
-        <button mat-raised-button (click)="sendMessageToBot()">Send</button>
+  <div class="message-container">
+    <mat-card-actions class="voice-button">
+      <button mat-icon-button (click)="startTalkingToBot()">
+        <mat-icon>keyboard_voice</mat-icon>
+      </button>
     </mat-card-actions>
+    <mat-input-container>
+      <input matInput [(ngModel)]="formInput" min="2" placeholder="Your Message..." (keyup.enter)="sendMessageToBot()" type="text">
+    </mat-input-container>
+  </div>
+
+  <mat-card-actions class="button center">
+    <button mat-raised-button (click)="sendMessageToBot()">Send</button>
+  </mat-card-actions>
 
 </mat-card>

docs/.gitkeep

@@ -1,56 +1,56 @@
 @import "./src/assets/scss/base/variables";
 
 .message {
-    border-radius: 2px;
-    line-height: 36px;
-    margin: 0 15px 10px;
-    padding: 15px 20px;
-    vertical-align: baseline;
-    position: relative;
-    font-weight: bold;
-    word-wrap: break-word;
+  border-radius: 2px;
+  line-height: 36px;
+  margin: 0 15px 10px;
+  padding: 15px 20px;
+  vertical-align: baseline;
+  position: relative;
+  font-weight: bold;
+  word-wrap: break-word;
 }
 
 .message-container {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
 }
 
 .message.to {
-    background-color: $darkblue;
-    color: $white;
-    margin: -10px 0 -10px 100px;
+  background-color: $darkblue;
+  color: $white;
+  margin: -10px 0 -10px 100px;
 }
 
 .message.from {
-    background-color: $pink;
-    color: $white;
-    margin: -10px 100px -10px 0;
+  background-color: $pink;
+  color: $white;
+  margin: -10px 100px -10px 0;
 }
 
 .center {
-    display: flex;
-    justify-content: center;
+  display: flex;
+  justify-content: center;
 }
 
 .mat-input-container {
-    display: inline;
+  display: inline;
 }
 
 .mat-form-field {
-    width: 100%;
+  width: 100%;
 }
 
 .mat-raised-button {
-    background-color: $darkblue;
-    color: $white;
+  background-color: $darkblue;
+  color: $white;
 }
 
 .voice-button {
-    border-radius: 50%;
-    width: 40px;
-    height: 40px;
-    line-height: 24px;
-    padding: 8px 20px 8px 8px;
-}
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  line-height: 24px;
+  padding: 8px 20px 8px 8px;
+}

src/app/components/ai/ai.component.html

@@ -14,27 +14,27 @@ import { Message } from '../../model/message';
 export class AiComponent implements OnInit, OnDestroy {
   allMessages: Observable<Message[]>;
   formInput: string;
-  
-  constructor(public ai: AiService) { 
+
+  constructor(public ai: AiService) {
     this.formInput = '';
   }
-  
+
   ngOnInit() {
     this.allMessages = this.ai.conversation.asObservable()
     .pipe(
       scan((acc, val) => acc.concat(val))
     )
   }
-  
+
   ngOnDestroy() {
     this.ai.destroyVoiceConversation();
   }
-  
+
   sendMessageToBot() {
     this.ai.textConversation(this.formInput);
     this.formInput = '';
   }
-  
+
   startTalkingToBot() {
     this.ai.voiceConversation()
     .subscribe(
@@ -44,7 +44,7 @@ export class AiComponent implements OnInit, OnDestroy {
       },
       (err) => {
         console.log(err);
-        if (err.error  == "no-speech") {
+        if (err.error  === 'no-speech') {
           // console.log("Talking error");
           this.startTalkingToBot();
         }
@@ -55,4 +55,3 @@ export class AiComponent implements OnInit, OnDestroy {
       });
     }
   }
-  

src/app/components/ai/ai.component.scss

@@ -1,4 +1,4 @@
 export interface IWindow extends Window {
     webkitSpeechRecognition: any;
     SpeechRecognition: any;
-}
+}

src/app/components/ai/ai.component.ts

@@ -1,6 +1,6 @@
 import { Injectable, NgZone } from '@angular/core';
 import { environment } from '../../environments/environment';
-import * as lodash from "lodash";
+import * as lodash from 'lodash';
 
 import { Observable } from 'rxjs/Observable';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
@@ -11,74 +11,67 @@ import { IWindow } from '../interface/iwindow'
 
 @Injectable()
 export class AiService {
-    readonly token = environment.dialogflow.angularAIBot;
-    readonly client = new ApiAiClient({ accessToken: this.token });
-    
-    speechRecognition: any;
-    conversation = new BehaviorSubject<Message[]>([]);
-    
-    constructor(private zone: NgZone) {       
-    }
-    
-    textConversation(msg: string) {
-        const userMessage = new Message(msg, 'user');
-        this.update(userMessage);
-        return this.client.textRequest(msg)
-        .then(res => {
-            const speech = res.result.fulfillment.speech;
-            const botMessage = new Message(speech, 'bot');
-            this.update(botMessage);
-        });
-    }
-    
-    update(msg: Message) {
-        this.conversation.next([msg]);
-    } 
-    
-    voiceConversation(): Observable<string> {
-        return Observable.create(observer => {
-            const { webkitSpeechRecognition }: IWindow = <IWindow>window;
-            this.speechRecognition = new webkitSpeechRecognition();
-            this.speechRecognition.continuous = false;
-            this.speechRecognition.interimResults = false;
-            this.speechRecognition.lang = 'en-us';
-            this.speechRecognition.maxAlternatives = 0;
-            
-            this.speechRecognition.onresult = speech => {
-                let sentence: string = "";
-                if (speech.results) {
-                    var result = speech.results[speech.resultIndex];
-                    var transcript = result[0].transcript;
-                    if (result.isFinal) {
-                        if (result[0].confidence < 0.1) {
-                            // console.log("Unrecognized result - Please try again");
-                        }
-                        else {
-                            sentence = lodash.trim(transcript);
-                            // console.log("Did you said? -> " + sentence + " , If not then say something else...");
-                        }
-                    }
-                }
-                this.zone.run(() => {
-                    observer.next(sentence);
-                });
-            };
-            
-            this.speechRecognition.onerror = error => {
-                observer.error(error);
-            };
-            
-            this.speechRecognition.onend = () => {
-                observer.complete();
-            };
-            
-            this.speechRecognition.start();
-            // console.log("I'm listening...");
+  readonly token = environment.dialogflow.angularAIBot;
+  readonly client = new ApiAiClient({ accessToken: this.token });
+
+  speechRecognition: any;
+  conversation = new BehaviorSubject<Message[]>([]);
+
+  constructor(private zone: NgZone) {
+  }
+
+  update(msg: Message) {
+    this.conversation.next([msg]);
+  }
+
+  textConversation(msg: string) {
+    const userMessage = new Message(msg, 'user');
+    this.update(userMessage);
+    return this.client.textRequest(msg)
+    .then(res => {
+      const speech = res.result.fulfillment.speech;
+      const botMessage = new Message(speech, 'bot');
+      this.update(botMessage);
+    });
+  }
+
+  voiceConversation(): Observable<string> {
+    return Observable.create(observer => {
+      const { webkitSpeechRecognition }: IWindow = <IWindow>window;
+      this.speechRecognition = new webkitSpeechRecognition();
+      this.speechRecognition.continuous = false;
+      this.speechRecognition.interimResults = false;
+      this.speechRecognition.lang = 'en-us';
+      this.speechRecognition.maxAlternatives = 0;
+
+      this.speechRecognition.onresult = speech => {
+        let sentence = '';
+        if (speech.results) {
+          const result = speech.results[speech.resultIndex];
+          const transcript = result[0].transcript;
+          if (result.isFinal) {
+            result[0].confidence < 0.1 ? console.log('Unrecognized result') : sentence = lodash.trim(transcript);
+          }
+        }
+        this.zone.run(() => {
+          observer.next(sentence);
         });
-    }
-    
-    destroyVoiceConversation() {
-        if (this.speechRecognition)
-        this.speechRecognition.stop();
-    }
+      };
+
+      this.speechRecognition.onerror = error => {
+        observer.error(error);
+      };
+
+      this.speechRecognition.onend = () => {
+        observer.complete();
+      };
+
+      this.speechRecognition.start();
+        // console.log('Listening...');
+    });
+  }
+
+  destroyVoiceConversation() {
+    this.speechRecognition ? this.speechRecognition.stop() : this.speechRecognition.stop();
+  }
 }