Speech to text

package.json

@@ -71,6 +71,7 @@
     "leaflet.markercluster": "^1.4.1",
     "msal": "^1.4.4",
     "rxjs": "~6.6.7",
+    "speak-tts": "^2.0.8",
     "subscriptions-transport-ws": "^0.9.18",
     "survey-angular": "^1.8.54",
     "survey-creator": "^1.8.54",

projects/back-office/src/app/app-routing.module.ts

@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { MsalGuard } from '@azure/msal-angular';
 import { AccessGuard } from './guards/access.guard';
+import {VirtualAssistantComponent} from './virtual-assistant/virtual-assistant.component';
 
 const routes: Routes = [
   {
@@ -31,7 +32,17 @@ const routes: Routes = [
               .then(m => m.AppPreviewModule),
           }
         ]
-      }
+      },
+      {
+          path: 'va',
+          children: [
+          {
+            path: ':id',
+            loadChildren: () => import('./virtual-assistant/virtual-assistant.module')
+              .then(m => m.VirtualAssistantModule),
+          }
+        ]
+      },
     ],
     canActivate: [MsalGuard, AccessGuard]
   },

projects/back-office/src/app/dashboard/pages/forms/forms.component.html

@@ -179,6 +179,10 @@
             <mat-icon>delete</mat-icon>
             Delete
           </button>
+          <button mat-menu-item (click)="onExportAssistant(element, $event)">
+            <mat-icon>support_agent</mat-icon>
+            Virtual assistant
+          </button>
         </mat-menu>
       </td>
     </ng-container>
@@ -188,4 +192,4 @@
       [ngClass]="{'clickable': ( row.canCreate && (row.status === 'active') )}"
       [routerLink]="( row.canCreate && (row.status === 'active') ) ? ['/forms/answer', row.id] : []"></tr>
   </table>
-</ng-container>
+</ng-container>

projects/back-office/src/app/dashboard/pages/forms/forms.component.ts

@@ -19,6 +19,7 @@ import { AddFormComponent } from '../../../components/add-form/add-form.componen
 import { MatTableDataSource } from '@angular/material/table';
 import { MatSort } from '@angular/material/sort';
 import { MatEndDate, MatStartDate } from '@angular/material/datepicker';
+import {SafeDownloadService} from '../../../../../../safe/src/lib/services/download.service';
 
 
 @Component({
@@ -57,7 +58,8 @@ export class FormsComponent implements OnInit, OnDestroy, AfterViewInit {
     public dialog: MatDialog,
     private router: Router,
     private snackBar: SafeSnackBarService,
-    private authService: SafeAuthService
+    private authService: SafeAuthService,
+    private downloadService: SafeDownloadService
   ) {}
 
   /*  Load the forms.
@@ -191,4 +193,13 @@ export class FormsComponent implements OnInit, OnDestroy, AfterViewInit {
     this.coreFilter = '';
     this.clearDateFilter();
   }
+
+  async onExportAssistant(element: any, $event: any): Promise<void> {
+    console.log(element);
+    // const path = `download/form/${element.id}`;
+    // const dataReturn = await this.downloadService.getForm(path);
+    window.open(`/va/${element.id}`);
+    // this.router.navigate([`/va/${element.id}`]);
+    // return dataReturn;
+  }
 }

projects/back-office/src/app/graphql/mutations.ts

@@ -198,6 +198,28 @@ export interface DeleteResourceMutationResponse{
   deletedResource: Resource;
 }
 
+// === ADD RECORD ===
+export const ADD_RECORD = gql`
+mutation addRecord($form: ID!, $data: JSON!, $display: Boolean) {
+  addRecord(form: $form, data: $data) {
+    id
+    createdAt
+    modifiedAt
+    data(display: $display)
+    form {
+      uniqueRecord {
+        id
+        modifiedAt
+        data
+      }
+    }
+  }
+}`;
+
+export interface AddRecordMutationResponse {
+  loading: boolean;
+  addRecord: Record;
+}
 
 // === DELETE RECORD ===
 export const DELETE_RECORD = gql`

projects/back-office/src/app/virtual-assistant/models/choices.model.ts

@@ -0,0 +1,9 @@
+export class Choices {
+  value: any;
+  text: string;
+
+  constructor(value: any, text: string) {
+    this.value = value;
+    this.text = text;
+  }
+}

projects/back-office/src/app/virtual-assistant/models/message.model.ts

@@ -0,0 +1,26 @@
+import { User } from './user.model';
+import {Choices} from './choices.model';
+
+export class Message {
+    type: string;
+    text: string;
+    reply: boolean;
+    user: User;
+    date: number;
+    choices: Choices[];
+
+    // tslint:disable-next-line:max-line-length
+    constructor(type: string,
+                text: string,
+                reply: boolean,
+                user: User,
+                date: number,
+                choices: Choices[]) {
+        this.type = type;
+        this.text = text;
+        this.reply = reply;
+        this.user = user;
+        this.date = date;
+        this.choices = choices;
+    }
+}

projects/back-office/src/app/virtual-assistant/models/user.model.ts

@@ -0,0 +1,9 @@
+export class User {
+    name: string;
+    avatar: string;
+
+    constructor(name: string, avatar: string) {
+        this.name = name;
+        this.avatar = avatar;
+    }
+}

projects/back-office/src/app/virtual-assistant/va-conversation/conversation-footer/conversation-footer.component.html

@@ -0,0 +1,5 @@
+<div id="footer">
+  <input id="inputMsg" placeholder="Tap your message here" [value]="inputValue" [type]="inputType" #test (input)="msgChange(test.value)">
+  <button mat-mini-fab id="btnSend" class="btnFoot" (click)="btnSendClick.emit($event)" disabled><mat-icon>chat</mat-icon></button>
+  <button mat-mini-fab id="btnRec" class="btnFoot" (click)="btnRecClick.emit($event)"><mat-icon>mic</mat-icon></button>
+</div>

projects/back-office/src/app/virtual-assistant/va-conversation/conversation-footer/conversation-footer.component.scss

@@ -0,0 +1,30 @@
+#footer {
+  height: 50px;
+  border-top: 1px solid lightgray;
+  border-radius: 0 0 5px 5px;
+  text-align: center;
+}
+
+#inputMsg {
+  height: 30px;
+  margin-top: 7px;
+  margin-left: 5px;
+  width: 390px;
+  border: 1px solid lightgray;
+  border-radius: 5px;
+  padding-left: 5px;
+}
+
+.btnFoot {
+  margin-left: 10px;
+}
+
+#btnSend {
+  background-color: green;
+  color: white;
+}
+
+#btnRec {
+  background-color: indianred;
+  color: white;
+}

projects/back-office/src/app/virtual-assistant/va-conversation/conversation-footer/conversation-footer.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ConversationFooterComponent } from './conversation-footer.component';
+
+describe('ConversationFooterComponent', () => {
+  let component: ConversationFooterComponent;
+  let fixture: ComponentFixture<ConversationFooterComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ConversationFooterComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ConversationFooterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/back-office/src/app/virtual-assistant/va-conversation/conversation-footer/conversation-footer.component.ts

@@ -0,0 +1,60 @@
+import {Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges} from '@angular/core';
+
+@Component({
+  selector: 'app-conversation-footer',
+  templateUrl: './conversation-footer.component.html',
+  styleUrls: ['./conversation-footer.component.scss']
+})
+
+export class ConversationFooterComponent implements OnInit, OnChanges {
+
+  @Output() btnSendClick: EventEmitter<any> = new EventEmitter();
+  @Output() btnRecClick: EventEmitter<any> = new EventEmitter();
+
+  @Output() inputChange: EventEmitter<any> = new EventEmitter();
+
+  public input: any;
+  public btnSend: any;
+  public btnRec: any;
+
+  @Input() inputValue = '';
+  @Input() inputType = '';
+
+  ngOnChanges(changes: SimpleChanges): void {
+    // we skip that at the beginning when object are not yet set
+    if (this.input !== undefined && changes.inputValue !== undefined){
+      console.log('ngOnChanges : ' + this.inputValue);
+      this.input.value = null;
+      this.input.value = '';
+      console.log('this.input.value : ' + this.input.value);
+      console.log('changes.inputValue.currentValue : ' + changes.inputValue.currentValue);
+      console.log('this.inputValue : ' + this.inputValue);
+      console.log('this.inputType : ' + this.inputType);
+      console.log('this.input.value : ' + this.input.value);
+      if (changes.inputValue.currentValue === '' && this.inputValue !== ''){
+        // this.msgChange(this.inputValue);
+      }
+      else if (changes.inputValue.currentValue !== ''){
+        this.msgChange(changes.inputValue.currentValue);
+      }
+      this.inputFocus();
+    }
+  }
+
+  constructor() {
+  }
+
+  ngOnInit(): void {
+    this.input = document.getElementById('inputMsg');
+    this.btnSend = document.getElementById('btnSend');
+    this.btnRec = document.getElementById('btnRec');
+  }
+
+  inputFocus(): void {
+    this.input.focus();
+  }
+
+  msgChange(text: string): void {
+    this.inputChange.emit(text);
+  }
+}

projects/back-office/src/app/virtual-assistant/va-conversation/conversation-header/conversation-header.component.html

@@ -0,0 +1,3 @@
+<div id="header">
+  <p id="convName">chat</p>
+</div>

projects/back-office/src/app/virtual-assistant/va-conversation/conversation-header/conversation-header.component.scss

@@ -0,0 +1,13 @@
+#header {
+  height: 50px;
+  border-radius: 5px 5px 0 0;
+  background-color: #60d295;
+  display: flex;
+  align-items: center;
+  color: white;
+}
+
+#convName {
+  display: inline;
+  margin-left: 10px;
+}

projects/back-office/src/app/virtual-assistant/va-conversation/conversation-header/conversation-header.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ConversationHeaderComponent } from './conversation-header.component';
+
+describe('ConversationHeaderComponent', () => {
+  let component: ConversationHeaderComponent;
+  let fixture: ComponentFixture<ConversationHeaderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ConversationHeaderComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ConversationHeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/back-office/src/app/virtual-assistant/va-conversation/conversation-header/conversation-header.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-conversation-header',
+  templateUrl: './conversation-header.component.html',
+  styleUrls: ['./conversation-header.component.scss']
+})
+export class ConversationHeaderComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

projects/back-office/src/app/virtual-assistant/va-conversation/conversation-message/conversation-message.component.html

@@ -0,0 +1,24 @@
+<div *ngIf="reply=='true'; then thenBlock else elseBlock"></div>
+<ng-template #thenBlock >
+  <div class="messageGlobal" style="margin-left:{{ml}}; margin-right: {{mr}}; background-color: {{backgroundColorReply}}">
+    <img alt="profile_photo" src="{{imgSrc}}">
+    <p innerText="{{text}}"></p>
+  </div>
+</ng-template>
+<ng-template #elseBlock >
+  <div class="messageGlobal" style="margin-left:{{ml}}; margin-right: {{mr}}; background-color: {{backgroundColor}}">
+    <img alt="profile_photo" src="{{imgSrc}}">
+    <p innerText="{{text}}"></p>
+  </div>
+</ng-template>
+<div class="btnChoicesCont" *ngIf="choices!=null && (type == 'radiogroup' || type == 'text' || type == 'boolean')">
+  <button mat-flat-button color="primary" class="btnChoices" *ngFor="let ch of this.choices" (click)="btnChoiceClickFn($event, ch)">{{ch.text}}</button>
+</div>
+<div *ngIf="choices!=null && (type == 'checkbox' || type == 'dropdown' || type == 'tagbox')">
+  <div class="btnChoicesCont">
+    <button mat-flat-button [color]="(this.checkBoxChoices.includes(ch) ? 'accent' : 'primary')" class="btnChoices" *ngFor="let ch of this.choices" (click)="btnChoiceCheckBoxClickFn($event, ch)">{{ch.text}}</button>
+  </div>
+  <div class="btnChoicesValidateCont">
+    <button mat-flat-button id="btnChoicesValidate" (click)="btnChoiceCheckBoxValidateClickFn($event)"> OK </button>
+  </div>
+</div>