added entity highlighting, some form validations

Author: alfredfrancis

frontend/src/app/agent/chat/chat.component.html

@@ -1,7 +1,7 @@
 <!-- https://tburleson-layouts-demos.firebaseapp.com/#/docs -->
 <div fxLayout="row" fxFill>
   <mat-card fxFlex="30" fxLayout="column" >
-    <div fxFlex="90" class="chat-container">
+    <div fxFlex="90" class="chat-container" #scrollMe>
       <div *ngFor="let message of messages"  [@listAnimation]="messages.length" >
 
         <div  *ngIf="message.author=='user'" class="chat-message">

frontend/src/app/agent/chat/chat.component.scss

@@ -19,8 +19,13 @@ mat-card{
     height: 600px;
 }   
 
+::-webkit-scrollbar {
+  width: 0px;  /* remove scrollbar space */
+  background: transparent;  /* optional: just make scrollbar invisible */
+}
+
 .chat-container {
-    overflow-y: scroll;
+    overflow-y: auto;
   }
 
   .chat-message {
@@ -45,12 +50,12 @@ mat-card{
     padding: 7px 13px;
     border-radius: 15px;
     color: #595a5a;
-    background-color: #ebebeb;
+    background-color: #eeeeee;
 
     &.human {
       float: right;
       color: #f7f8f8;
-      background-color: #28635a;
+      background-color: #3392fb;
     }
   }
 

frontend/src/app/agent/chat/chat.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input,AfterViewChecked, ElementRef, ViewChild } from '@angular/core';
 import { ChatService } from '../../services/chat.service';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { trigger,style,transition,animate,keyframes,query,stagger } from '@angular/animations';
@@ -36,6 +36,7 @@ export class ChatComponent implements OnInit {
 
   chatForm: FormGroup;
   chatFormFields: any;
+  @ViewChild('scrollMe') private myScrollContainer: ElementRef;
 
   constructor(
     public fb: FormBuilder,
@@ -69,6 +70,13 @@ export class ChatComponent implements OnInit {
       });
   }
 
+
+scrollToBottom(): void {
+    try {
+        this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
+    } catch(err) { }                 
+}
+
   render_bubbles(c){
     c.speechResponse.forEach((item, index) => {
       if (index  == 0){
@@ -84,7 +92,10 @@ export class ChatComponent implements OnInit {
   add_to_messages(message,author){
       let new_message = new Message(message,author)
       this.messages.push(new_message);
-
+      setTimeout(()=>{
+        this.scrollToBottom();
+      },300)
+      
   }
 
   changeCurrent(c) {

frontend/src/app/agent/intent/intent.component.html

@@ -11,7 +11,7 @@ <h2>{{message}}</h2>
     </mat-form-field>
 
     <h2>Parameters
-      <button mat-mini-fab (click)="addParameter()" color="primary">
+      <button type="button"  mat-mini-fab (click)="addParameter()" color="primary">
         <mat-icon aria-label="New Parameter">add</mat-icon>
       </button>
     </h2>
@@ -110,7 +110,7 @@ <h3>HTTP Headers
 
 
     <mat-card-actions>
-      <button mat-raised-button color="primary">Save</button>
+      <button mat-raised-button color="primary" [disabled]="!intentForm.valid">Save</button>
     </mat-card-actions>
   </form>
 </mat-card>

frontend/src/app/agent/intent/intent.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, Input } from '@angular/core';
-import { FormGroup, FormBuilder, FormArray } from '@angular/forms';
+import { FormGroup, FormBuilder, FormArray,Validators } from '@angular/forms';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 
 import { CoreService } from '../../services/core.service';
@@ -79,8 +79,8 @@ export class IntentComponent implements OnInit {
 
   initParameter(parameter = null) {
     const fields = {
-      name: [''],
-      type: [''],
+      name: ['', Validators.required],
+      type: ['', Validators.required],
       required: [false],
       prompt: ['']
     };
@@ -116,8 +116,8 @@ export class IntentComponent implements OnInit {
   }
   initApiHeaders() {
     const fields = {
-      headerKey: [''],
-      headerValue: [''],
+      headerKey: ['', Validators.required],
+      headerValue: ['', Validators.required],
     };
     const g = this.fb.group(fields);
     return g;

frontend/src/app/agent/train/train.component.html

@@ -23,13 +23,12 @@ <h2 fxFlex="90">Train your intent</h2>
 <mat-accordion>
   <mat-expansion-panel *ngFor="let example of trainingData;let example_index = index" [expanded]="example_index == 0" (opened)="selectionInfo.value = ''">
     <mat-expansion-panel-header>
-      <mat-panel-title>
-        {{example.text}}
+      <mat-panel-title [innerHTML]="getAnnotatedText(example)">
       </mat-panel-title>
     </mat-expansion-panel-header>
 
     <div fxLayout="row">
-      <div fxFlex="90" id="textarea_highlight" contenteditable="true" role="textarea" (mouseup)="annotate()" appAutofocus>{{example.text}}</div>
+      <div fxFlex="90" id="textarea_highlight" contenteditable="true" role="textarea" (mouseup)="annotate()" appAutofocus  (blur)="example.text = $event.target.outerText;">{{example.text}}</div>
       <button mat-icon-button fxFlex="10">
         <mat-icon aria-label="Delete this example" (click)="deleteExample(example_index)">delete</mat-icon>
       </button>
@@ -51,7 +50,7 @@ <h2 fxFlex="90">Train your intent</h2>
 
 
 
-          <span class="round-button" (click)="addNewEntity(example_index)"> Add an entity for
+          <span class="round-button" (click)="newEntityName && addNewEntity(example_index)"> Add an entity for
             <b>"{{this.selectionInfo.value}}"</b>
           </span>
         </ng-template>

frontend/src/app/agent/train/train.component.ts

@@ -76,6 +76,21 @@ export class TrainComponent implements OnInit {
 
   }
 
+  // 123456
+  getAnnotatedText(example){
+    let text = example.text
+    example.entities.forEach(entity => {
+      var key =entity.value;
+      var regex = new RegExp(key,'g');
+      text =  text.replace(regex,'&nbsp;<mark style="background: red;">'+key+'</mark>&nbsp;' );
+    });
+    return text
+  }
+  // updateValue($event,example_index){
+  //   this.trainingData[example_index]["text"]=$event.srcElement.outerText;
+    
+  // }
+
   addNewExample(){
     this.trainingData.unshift({
       "text":this.newExampleText,