Skip to content

feat: save and load Aura history #116

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
alissonpeloso merged 2 commits into from
Sep 19, 2022
Merged

feat: save and load Aura history #116

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0c374b1
feat: save and load Aura history
stefanimeneghetti Sep 8, 2022
1c94a16
feat: get jwt token from url
stefanimeneghetti Sep 9, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
106 changes: 53 additions & 53 deletions app/Http/Livewire/AuraWidget.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,61 +22,61 @@ class AuraWidget extends Component

public function mount()
{
$this->messages[0] = ['id' => 1,
'message' => 'Olá! Eu sou a AURA, uma assistente virtual desenvolvida pelo PRACTICE, converse comigo!',
'source' => 'aura',
'userMessage' => 'has_no_message',
'assessed' => 2,
'category' => 'welcome_message'
];
// $this->messages[0] = ['id' => 1,
// 'message' => 'Olá! Eu sou a AURA, uma assistente virtual desenvolvida pelo PRACTICE, converse comigo!',
// 'source' => 'aura',
// 'userMessage' => 'has_no_message',
// 'assessed' => 2,
// 'category' => 'welcome_message'
// ];

$this->inputMessage = '';

$this->widgetSettings = [
'theme' => 'light',
'type' => 'fullscreen',
'history_loaded' => false,
'display_agree_form' => false,
'display_login_form' => false
];

$this->user = [
'token' => request()->token,
'id' => 0,
'profile_pic' => '',
'consent_status' => -1 // -1: not answered; 1: agreed, 0: disagreed
];

if (request()->type == "button"){
$this->widgetSettings['type'] = "button";
}
if (request()->theme == "dark") {
$this->widgetSettings['theme'] = "dark";
}

if ($this->user['token'] != null) {
$request = Request::create('/v0/user/', 'GET');
$request->headers->set('Authorization', 'Bearer '.$this->user['token']);

$response = json_decode(app()->handle($request)->getContent());
// $this->inputMessage = '';

// $this->widgetSettings = [
// 'theme' => 'light',
// 'type' => 'fullscreen',
// 'history_loaded' => false,
// 'display_agree_form' => false,
// 'display_login_form' => false
// ];

// $this->user = [
// 'token' => request()->token,
// 'id' => 0,
// 'profile_pic' => '',
// 'consent_status' => -1 // -1: not answered; 1: agreed, 0: disagreed
// ];

// if (request()->type == "button"){
// $this->widgetSettings['type'] = "button";
// }
// if (request()->theme == "dark") {
// $this->widgetSettings['theme'] = "dark";
// }

// if ($this->user['token'] != null) {
// $request = Request::create('/v0/user/', 'GET');
// $request->headers->set('Authorization', 'Bearer '.$this->user['token']);

// $response = json_decode(app()->handle($request)->getContent());

if ($response != null) {
if (property_exists($response, 'error')) {
$this->user['token'] = null;
} else {
$this->user['id'] = $response->id;
$this->user['profile_pic'] = "https://cc.uffs.edu.br/avatar/iduffs/".$response->uid;
$consentStatus = AuraChatController::consentStatus($response->id)['aura_consent'];
$this->user['consent_status'] = $consentStatus == 1 ? $consentStatus : -1;
}
} else {
$this->user['token'] = null;
}
}

$this->academicCalendar = [
'display-popup' => false
];
// if ($response != null) {
// if (property_exists($response, 'error')) {
// $this->user['token'] = null;
// } else {
// $this->user['id'] = $response->id;
// $this->user['profile_pic'] = "https://cc.uffs.edu.br/avatar/iduffs/".$response->uid;
// $consentStatus = AuraChatController::consentStatus($response->id)['aura_consent'];
// $this->user['consent_status'] = $consentStatus == 1 ? $consentStatus : -1;
// }
// } else {
// $this->user['token'] = null;
// }
// }

// $this->academicCalendar = [
// 'display-popup' => false
// ];
}

public function render()
Expand Down
15 changes: 15 additions & 0 deletions resources/js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@ const app = new Vue({

mounted() {
this.setTheme(this.userTheme);
this.getUserTokenFromUrl();
},
methods: {
toggleTheme() {
Expand All @@ -84,5 +85,19 @@ const app = new Vue({
return "light-theme";
}
},
getUserTokenFromUrl() {
const url = new URL(location.href);
const urlToken = url.searchParams.get('token');

axios({
method: "GET",
url: "/v0/user/",
headers: {
Authorization: `Bearer ${urlToken}`
}
}).then(()=>{
this.userToken = urlToken;
}).catch(e => console.error(e));
}
}
});
32 changes: 24 additions & 8 deletions resources/js/components/InputComponent.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ export default {
data() {
return {
inputMessage: "",
userToken: this.usertoken,
disabled: false,
};
},
Expand All @@ -30,7 +29,10 @@ export default {
}
this.disabled = true;

this.messages.push({id: this.messages.length + 1, message: this.inputMessage, source: "user"})
let userMessage = {id: this.messages.length + 1, message: this.inputMessage, source: "user"};

this.messages.push(userMessage);
this.saveMessage(userMessage);

var auraAnswer = {
id: this.messages.length + 1,
Expand All @@ -42,13 +44,13 @@ export default {
};

var encodedMessage = encodeURIComponent(this.inputMessage);
var requestUrl = "/v0/aura/nlp/domain/" + encodedMessage
var requestUrl = "/v0/aura/nlp/domain/" + encodedMessage;

axios({
method: "GET",
url: requestUrl,
headers: {
Authorization: `Bearer ${this.userToken}`
Authorization: `Bearer ${this.usertoken}`
}
}).then((response) => {
const data = response.data;
Expand All @@ -61,8 +63,9 @@ export default {
auraAnswer.category = "aura_has_no_response";
}

this.messages.push(auraAnswer)
this.disabled = false;
this.messages.push(auraAnswer);
this.saveMessage(auraAnswer);
this.disabled = false;
}).catch((error) => {
if (error.response.status == 401) {
auraAnswer.message = "Para poder conversar comigo você precisa estar autenticado(a). Por favor autentique-se:";
Expand All @@ -72,12 +75,25 @@ export default {
auraAnswer.message = "Algo de errado está acontecendo com meus servidores, bip bop.";
auraAnswer.category = "aura_could_not_respond";
}
this.messages.push(auraAnswer)
this.messages.push(auraAnswer);
this.saveMessage(auraAnswer);
this.disabled = false;
});

this.inputMessage = "";
},
saveMessage(message) {
axios({
method: "POST",
url: "/v0/aura/chat/history/add-message",
headers: {
Authorization: `Bearer ${this.usertoken}`
},
data: {
"message": message
}
});
}
},
};
</script>
91 changes: 64 additions & 27 deletions resources/js/components/MessageComponent.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,42 @@
<template>
<div>
<div class="chat-ctn" v-for="message in msgs">
<div v-if="message.source == 'aura'" class="d-flex justify-content-start received-message mb-4">
<div class="msg-container">
{{ 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(message, 0)">
<img src="/img/aura/doubt.png" class="rate-icon" alt="Mensagem sem sentido">
</button>
<button class="rate-icon" @click="rateMessage(message, 1)">
<img src="/img/aura/heart.png" class="rate-icon" alt="Apreciar a mensagem">
</button>
</div>

<div v-if="message.assessed != '2'" class="d-flex justify-content-end">
<small v-if="message.assessed == '1'" class="mr-2 text-success">Mensagem avaliada!</small>
<small v-if="message.assessed == '0'" class="mr-2 text-danger">Mensagem avaliada!</small>
<small v-if="message.assessed == '-1'" class="mr-2 text-danger">Não foi possível avaliar a resposta.</small>
<div class="d-flex justify-content-center mb-4 mt-4" v-if="!loadedHistory">
<a @click="loadHistory">Carregar histórico de mensagens</a>
</div>
<div class="spinner justify-content-center mb-4 mt-4" style="display: none">
<div class="spinner-border text-secondary" role="status">
<span class="sr-only">Carregando...</span>
</div>
</div>
<div class="chat-ctn" v-for="message in msgs">
<div v-if="message.source == 'aura'" class="d-flex justify-content-start received-message mb-4">
<div class="msg-container">
{{ 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(message, 0)">
<img src="/img/aura/doubt.png" class="rate-icon" alt="Mensagem sem sentido">
</button>
<button class="rate-icon" @click="rateMessage(message, 1)">
<img src="/img/aura/heart.png" class="rate-icon" alt="Apreciar a mensagem">
</button>
</div>

<div v-if="message.assessed != '2'" class="d-flex justify-content-end">
<small v-if="message.assessed == '1'" class="mr-2 text-success">Mensagem avaliada!</small>
<small v-if="message.assessed == '0'" class="mr-2 text-danger">Mensagem avaliada!</small>
<small v-if="message.assessed == '-1'" class="mr-2 text-danger">Não foi possível avaliar a resposta.</small>
</div>
<!-- </div> -->
</div>
<!-- </div> -->
</div>
</div>
<div v-if="message.source != 'aura'" class="d-flex justify-content-end mb-4">
<div class="msg-container-send">
{{ message.message }}
<div v-if="message.source != 'aura'" class="d-flex justify-content-end mb-4">
<div class="msg-container-send">
{{ message.message }}
</div>
</div>
</div>
</div>
</div>
</template>

<script>
Expand All @@ -38,8 +46,8 @@ export default {
data() {
return {
msgs: this.message,
userToken: this.usertoken,
assessing: false,
loadedHistory: false
};
},

Expand All @@ -55,7 +63,7 @@ export default {
method: "POST",
url: "/v0/analytics/",
headers: {
"Authorization": `Bearer ${this.userToken}`,
"Authorization": `Bearer ${this.usertoken}`,
"Content-Type": "application/json",
},
data: {
Expand All @@ -73,8 +81,37 @@ export default {
this.assessing = false;
});

},
loadHistory() {
this.loadedHistory = true;
this.toggleSpinner();

axios({
method: "GET",
url: "/v0/aura/chat/history",
headers: {
Authorization: `Bearer ${this.usertoken}`
}
}).then((response) => {
let data = response.data;
this.msgs = data.aura_history.concat(this.msgs);
this.toggleSpinner();
this.$emit('update:message', this.msgs);
}).catch(() => {
this.msgs.unshift({id: this.msgs.length + 1, message: "Não foi possível carregar seu histórico de mensagens.", source: "aura"});
this.toggleSpinner();
});
},
toggleSpinner() {
let spinner = document.getElementsByClassName('spinner')[0];

if (spinner.style.display === "none") {
spinner.style.display = "flex";
} else {
spinner.style.display = "none";
}
}
},
}
};
</script>