Merge pull request #12 from ajinkyaghodake123/buttonImpl

Button implemetation

package.json

@@ -26,7 +26,7 @@
     "zone.js": "~0.8.26"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.901.7",
+    "@angular-devkit/build-angular": "~0.11.0",
     "@angular-devkit/build-ng-packagr": "~0.11.0",
     "@angular/cli": "~7.1.0",
     "@angular/compiler-cli": "~7.1.0",

projects/chat-lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sunbird-chatbot-client",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "peerDependencies": {
     "@angular/common": "^7.1.0",
     "@angular/core": "^7.1.0"

projects/chat-lib/src/lib/chat-lib.service.ts

@@ -31,12 +31,9 @@ export class ChatLibService {
     req.data['channel'] = this.channel;
     req.data['From'] = (this.did).toString();
     req.data['context'] = this.context;
-
+    
     return this.http.post(this.chatbotUrl, req.data).pipe(
       mergeMap((data: any) => {
-        if (data.responseCode !== 'OK') {
-          return observableThrowError(data);
-        }
         return observableOf(data);
       }));
   }
@@ -47,4 +44,26 @@ export class ChatLibService {
     }
     this.chatList.push(chat);
   }
+
+  chatListPushRevised(source, msg) {
+    if(msg.data.button){
+      for(var val of msg.data.buttons){ 
+        val.disabled = false
+      }
+    }
+
+    const chat = {
+      'buttons': msg.data.buttons,
+      'text': msg.data.text,
+      'type': source
+    }
+    this.chatList.push(chat);
+  }
+
+  disableButtons() {
+    var btns =  this.chatList[this.chatList.length-1].buttons
+    for(var val of btns){
+      val.disabled = true
+    }
+  }
 }

projects/chat-lib/src/lib/chat-message-bottom-bar/chat-message-bottom-bar.component.ts

@@ -19,29 +19,25 @@ export class ChatMessageBottomBarComponent implements OnInit {
   }
 
   ngOnInit() {
-    //this.initialiseForm();
   }
-  // initialiseForm () {
-  //   this.messageForm = new FormGroup({
-  //     message: new FormControl('', Validators.required)
-  //   });
-  // }
+
   sendMessage() {
     let msg = this.messageForm.controls.message.value;
     if(msg) { 
       this.chatService.chatListPush('sent',msg);
       this.messageForm.controls.message.reset();
-;      const req = {
+      const req = {
         data: {
           Body: msg
           }
         }
       this.chatService.chatpost(req).pipe(takeUntil(this.unsubscribe$)).subscribe(data => {
-        console.log(data)
-        this.chatService.chatListPush('recieved', data.text)
+
+          this.chatService.chatListPushRevised('recieved', data)
+
+        // this.chatService.chatListPush('recieved', data)
       },err => {
-        console.log(err)
-        this.chatService.chatListPush('recieved', err.error.text)
+        this.chatService.chatListPushRevised('recieved', err.error)
       });
     }
     }

projects/chat-lib/src/lib/chat-message-list/chat-message-list.component.ts

@@ -38,11 +38,9 @@ export class ChatMessageListComponent implements OnInit, AfterViewChecked {
           }
         }
       this.chatService.chatpost(req).pipe(takeUntil(this.unsubscribe$)).subscribe(data => {
-        console.log(data)
-        this.chatService.chatListPush('recieved', data.text)
+        this.chatService.chatListPushRevised('recieved', data)
       },err => {
-        console.log(err)
-        this.chatService.chatListPush('recieved', err.error.text)
+        this.chatService.chatListPushRevised('recieved', err.error.data)
       });
     }
   }

projects/chat-lib/src/lib/chat-message/chat-message.component.html

@@ -1,4 +1,12 @@
 
-<div class="chat-msg " [ngClass]="{ 'recieved': data.type==='recieved', 'sent': data.type==='sent' }" [innerHTML]="data.text">
-
-</div>
+<div >
+    <div class="chat-msg " [ngClass]="{ 'recieved': data.type==='recieved', 'sent': data.type==='sent' }" >
+        <div [innerHTML]="data.text">
+        </div>
+        <div *ngIf="isButtonAvailable" class="btn-cover my-5px">
+            <div class="my-5px mr-5px" *ngFor='let btn of buttons; let indx = index'>
+                <button type="button" [disabled]= "btn.disabled" class="btn-primary" (click)="buttonClicked(indx+1,btn.text)">{{btn.text}}</button>
+            </div>
+        </div>
+    </div>
+</div>  

projects/chat-lib/src/lib/chat-message/chat-message.component.scss

@@ -7,6 +7,7 @@
     max-width: 96%;
     display: flex;
     font-size: 12px;
+    flex-direction: column;
 
     &.recieved{
         align-self: flex-start;
@@ -19,4 +20,32 @@
         background: #024F9D;
         color: #FFF;
     }
+}
+.btn-primary{
+    background: #ffffff;
+    border: solid 1px #024f9d;
+    color: #024f9d;
+    padding: 8px 12px;
+    border-radius: 3px;
+    font-size: 11px;
+    &:hover{
+        background: #024f9d;
+        color: #ffffff;
+    }
+}
+.mr-5px{
+    margin-right: 5px;
+}
+.my-5px{
+    margin-top: 5px;
+    margin-bottom: 5px;
+}
+.btn-cover {
+    display: flex;
+    flex-wrap: wrap;
+} 
+button:disabled{
+    border: solid 1px rgb(153, 151, 151) !important;
+    color: rgb(153, 151, 151) !important;
+    background: #fff !important;
 }

projects/chat-lib/src/lib/chat-message/chat-message.component.ts

@@ -1,16 +1,57 @@
 import { Component, OnInit, Input } from '@angular/core';
+import { ChatLibService } from '../chat-lib.service';
+import { takeUntil } from 'rxjs/operators';
+import { Subject} from 'rxjs';
 
 @Component({
   selector: 'lib-chat-message',
   templateUrl: './chat-message.component.html',
   styleUrls: ['./chat-message.component.scss']
-})
+}) 
 export class ChatMessageComponent implements OnInit {
   @Input() data;
-
-  constructor() { }
+  public buttons = [];
+  public isButtonAvailable:boolean = false;
+  public unsubscribe$ = new Subject<void>();
+  constructor(public chatService: ChatLibService) { 
+  }
 
   ngOnInit() {
+    if(this.data.buttons) {
+      this.isButtonAvailable = true;
+      this.buttons = this.data.buttons
+    }
+    this.buttons = this.data.buttons?this.data.buttons:''
+  }
+
+  buttonClicked(indx, text){
+    if(text === "First Menu"){
+      indx="0"
+    }
+    if(text === "Go Back"){
+      indx="99"
+    }
+    this.disableButtons()
+    this.chatService.chatListPush('sent',text);
+    const req = {
+      data: {
+        Body: indx
+        }
+      }
+    this.sendMessage(req)
   }
 
+  disableButtons(){
+    this.chatService.disableButtons()
+  }
+
+  sendMessage(req) {
+    this.chatService.chatpost(req).pipe(takeUntil(this.unsubscribe$)).subscribe(data => {
+
+      this.chatService.chatListPushRevised('recieved', data)
+
+    },err => {
+      this.chatService.chatListPushRevised('recieved', err.error)
+    });
+  }
 }