From 501826245561aeb862b9894567240f7d1619a9ab Mon Sep 17 00:00:00 2001
From: Stefani Meneghetti <meneghettistefani@gmail.com>
Date: Wed, 31 Aug 2022 10:45:30 -0300
Subject: [PATCH] feat: add Aura answer rating

---
 resources/js/app.js                           |  2 +-
 resources/js/components/InputComponent.vue    | 39 ++++++++---------
 resources/js/components/MessageComponent.vue  | 42 +++++++++++++++----
 .../views/livewire/aura-widget.blade.php      |  2 +-
 4 files changed, 57 insertions(+), 28 deletions(-)

diff --git a/resources/js/app.js b/resources/js/app.js
index dc948e2..18f70bf 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -38,7 +38,7 @@ const app = new Vue({
     el: '#app',
 
     data: {
-        messages: [{id: 1, message: "Olá! Eu me chamo aura, sua assistente virtual.", source: "aura", assessed: 2}],
+        messages: [{id: 1, message: "Olá! Eu me chamo aura, sua assistente virtual.", source: "aura", assessed: 2, userMessage: "has_no_message", category: "welcome_message"}],
         showHeader: true,
         userTheme: "light-theme",
         userToken: "",
diff --git a/resources/js/components/InputComponent.vue b/resources/js/components/InputComponent.vue
index 117a658..838eae3 100644
--- a/resources/js/components/InputComponent.vue
+++ b/resources/js/components/InputComponent.vue
@@ -30,7 +30,16 @@ export default {
             }
             this.disabled =  true;
 
-            this.messages.push({id: this.messages.length + 1, message: this.inputMessage, source: "user", assessed: 2})
+            this.messages.push({id: this.messages.length + 1, message: this.inputMessage, source: "user"})
+
+            var auraAnswer = {
+                id: this.messages.length + 1,
+                message: null,
+                source: "aura",
+                assessed: 2,
+                userMessage: this.inputMessage,
+                category: null
+            };
 
             var encodedMessage = encodeURIComponent(this.inputMessage);
             var requestUrl = "/v0/aura/nlp/domain/" + encodedMessage
@@ -43,35 +52,27 @@ export default {
                 }
             }).then((response) => {
                 const data = response.data;
-                var auraAnswer = "";
 
                 if (data.answer != undefined) {
-                    auraAnswer = data.answer;
+                    auraAnswer.message = data.answer;
+                    auraAnswer.category = data.intent;
                 } else {
-                    auraAnswer = "Não tenho resposta para isso.";
+                    auraAnswer.message = "Não tenho resposta para isso.";
+                    auraAnswer.category = "aura_has_no_response";
                 }
 
-                this.messages.push({id: this.messages.length + 1, message: auraAnswer, source: "aura", assessed: 2})
-
+                this.messages.push(auraAnswer)
                 this.disabled =  false;
-
             }).catch((error) => {
                 if (error.response.status == 401) {
-                    this.messages.push({
-                        id: this.messages.length + 1, 
-                        message: "Para poder conversar comigo você precisa estar autenticado(a). Por favor autentique-se:", 
-                        source: "aura", 
-                        assessed: 2
-                    })
+                    auraAnswer.message = "Para poder conversar comigo você precisa estar autenticado(a). Por favor autentique-se:";
+                    auraAnswer.category = "user_not_authenticated";
                     // Mostrar o formulário de login
                 } else if(error.response.status == 500) {
-                    this.messages.push({
-                        id: this.messages.length + 1, 
-                        message: "Algo de errado está acontecendo com meus servidores, bip bop.", 
-                        source: "aura", 
-                        assessed: 2
-                    })
+                    auraAnswer.message = "Algo de errado está acontecendo com meus servidores, bip bop.";
+                    auraAnswer.category = "aura_could_not_respond";
                 }
+                this.messages.push(auraAnswer)
                 this.disabled =  false;
             });
 
diff --git a/resources/js/components/MessageComponent.vue b/resources/js/components/MessageComponent.vue
index f331024..13f97c5 100644
--- a/resources/js/components/MessageComponent.vue
+++ b/resources/js/components/MessageComponent.vue
@@ -6,10 +6,10 @@
                 {{ message.message }}
                 <!-- <div v-if="user.token != 'null' && user.consent == '1'"> -->
                     <div v-if="message.assessed == '2'" class="d-flex justify-content-between">
-                        <button class="rate-icon" @click="rateMessage(0)"> 
+                        <button class="rate-icon" @click="rateMessage(message, 0)"> 
                             <img src="/img/aura/doubt.png" class="rate-icon" alt="Mensagem sem sentido">
                         </button>
-                        <button class="rate-icon" @click="rateMessage(1)">
+                        <button class="rate-icon" @click="rateMessage(message, 1)">
                             <img src="/img/aura/heart.png" class="rate-icon" alt="Apreciar a mensagem">
                         </button>
                     </div>
@@ -33,18 +33,46 @@
 
 <script>
 export default {
-    props: ['message'],
+    props: ['message', 'usertoken'],
     
     data() {
         return {
-            msgs: this.message
+            msgs: this.message,
+            userToken: this.usertoken,
+            assessing: false,
         };
     },
     
     methods: {
-        rateMessage(rate) {
-            this.$emit('update:showheader', !this.showheader);
-            //wire:click="assessAnswer('{{$message['category']}}','{{$message['userMessage']}}',0,{{$message['id']}})
+        rateMessage(message, rate) {
+            if (this.assessing == true) {
+                return;
+            }
+
+            this.assessing = true;
+
+            axios({
+                method: "POST",
+                url: "/v0/analytics/",
+                headers: {
+                    "Authorization": `Bearer ${this.userToken}`,
+                    "Content-Type": "application/json",
+                },
+                data: {
+                    "app_id": "1",
+                    "action": "aura_feedback",
+                    "key": message.category,
+                    "value": message.userMessage,
+                    "rate": rate,
+                }
+            }).then(() => {
+                this.msgs[message.id - 1].assessed = rate;
+                this.assessing = false;
+            }).catch(() => {
+                this.msgs[message.id - 1].assessed = -1;
+                this.assessing = false;
+            });
+
         }
     },
 };
diff --git a/resources/views/livewire/aura-widget.blade.php b/resources/views/livewire/aura-widget.blade.php
index 678edf5..a3a8009 100644
--- a/resources/views/livewire/aura-widget.blade.php
+++ b/resources/views/livewire/aura-widget.blade.php
@@ -6,7 +6,7 @@
                     <header-component :showheader.sync="showHeader"></header-component>
 
                     <div id="chat-body" class="chat-body msg_card_body" onscroll="handleHeader()">
-                        <message-component :message.sync="messages"></message-component>
+                        <message-component :usertoken.sync="userToken" :message.sync="messages"></message-component>
                         {{-- <div wire:loading.delay wire:target="sendMessage" class="aura_typing text-secondary">
                             Aura está digitando... achar algum substituto em Vue
                         </div>  --}}