Compare commits
4 Commits
6589d76d5f
...
de69867942
| Author | SHA1 | Date | |
|---|---|---|---|
| de69867942 | |||
| ff7b933cfc | |||
| a79838f37a | |||
| e525120a15 |
11
index.html
11
index.html
@ -3,10 +3,11 @@
|
||||
<head>
|
||||
<link rel="stylesheet" href="styles.css"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="side-panel"></div>
|
||||
<!--<div id="side-panel"></div>-->
|
||||
|
||||
<div id="main-panel">
|
||||
|
||||
@ -19,9 +20,11 @@
|
||||
|
||||
<p id="typing-indicator">NAME is typing...</p>
|
||||
|
||||
<div id="textbox">
|
||||
<input id="textbox-input" class="rounded-rectangle" type="text" onkeydown="pressSendButton()"></input>
|
||||
<button class="rounded-rectangle" onclick="pressSendButton()">send</button>
|
||||
<div id="input-panel-container">
|
||||
<div id="input-panel" class="rounded-rectangle">
|
||||
<input id="textbox-input" type="text" onkeydown="pressSendButton()"></input>
|
||||
<button onclick="pressSendButton()"><i class="fa fa-arrow-right" style="font-size:2em"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
115
main.js
115
main.js
@ -5,12 +5,12 @@ var conversation = null;
|
||||
class Conversation {
|
||||
constructor(name) {
|
||||
this.messages = [];
|
||||
this.name = romanize(name);
|
||||
this.name = name;
|
||||
this.score = 1.0;
|
||||
}
|
||||
|
||||
setInteractive(isInteractive) {
|
||||
const children = document.getElementById("textbox").children;
|
||||
const children = document.getElementById("input-panel").children;
|
||||
for (let i = 0; i < children.length; i++) {
|
||||
children[i].disabled = !isInteractive;
|
||||
}
|
||||
@ -27,71 +27,26 @@ class Conversation {
|
||||
sendUserMessage(text) {
|
||||
|
||||
const message = new UserMessage(text);
|
||||
message.updateStatus("sent");
|
||||
|
||||
const url = 'http://192.168.1.115:5000/chat';
|
||||
const data = text;
|
||||
|
||||
fetch(url, {
|
||||
method: 'POST', // Corresponds to -X POST
|
||||
headers: {
|
||||
'Content-Type': 'text/plain' // Corresponds to -H "Content-Type: text/plain"
|
||||
},
|
||||
body: data // Corresponds to -d "..."
|
||||
})
|
||||
.then(response => {
|
||||
// Check if the request was successful (status code 2xx)
|
||||
if (!response.ok) {
|
||||
// If not successful, throw an error to be caught by .catch()
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
// Get the response body as text
|
||||
return response.text();
|
||||
})
|
||||
.then(response => {
|
||||
// TODO: check JSON
|
||||
const json = JSON.parse(response);
|
||||
|
||||
// Success!
|
||||
var messageText = json.message;
|
||||
|
||||
console.log(json);
|
||||
var score = parseFloat(json.score);
|
||||
this.score += score;
|
||||
console.log(this.score);
|
||||
if (this.score > 2.0)
|
||||
{
|
||||
messageText = "shit they're here D:";
|
||||
this.setInteractive(false);
|
||||
}
|
||||
else if (this.score < 0.0)
|
||||
{
|
||||
messageText = "shit u won :D";
|
||||
this.setInteractive(false);
|
||||
}
|
||||
else
|
||||
{
|
||||
messageText = json.message;
|
||||
}
|
||||
|
||||
this.messages.push(new AgentMessage(messageText));
|
||||
this.render();
|
||||
})
|
||||
.catch(error => {
|
||||
// Handle any errors that occurred during the fetch
|
||||
console.error('Error during fetch:', error);
|
||||
alert(`Error fetching data: ${error.message}`);
|
||||
});
|
||||
message.updateStatus("envoyé");
|
||||
|
||||
setTimeout(() => {
|
||||
message.updateStatus("delivered");
|
||||
message.updateStatus("livré");
|
||||
this.render();
|
||||
//setTimeout(() => {
|
||||
// message.updateStatus("read");
|
||||
// this.render();
|
||||
//}, 5000);
|
||||
setTimeout(() => {
|
||||
message.updateStatus("lu");
|
||||
this.render();
|
||||
setTimeout(()=> {
|
||||
setTimeout(() => {
|
||||
this.messages.push(new AgentMessage("merde alors"));
|
||||
this.render();
|
||||
}, 2000);
|
||||
}, 500);
|
||||
}, 3000);
|
||||
}, 1000);
|
||||
//this.messages.push(message);
|
||||
this.messages.push(message);
|
||||
//this.messages.push(new AgentMessage(messageText));
|
||||
this.render();
|
||||
}
|
||||
|
||||
// update the current HTML based on messages
|
||||
@ -134,12 +89,6 @@ function getMessageList() {
|
||||
return document.getElementById("messages");
|
||||
}
|
||||
|
||||
function romanize(text) {
|
||||
text = text.replaceAll('u', 'v');
|
||||
text = text.replaceAll('U', 'V');
|
||||
return text;
|
||||
}
|
||||
|
||||
class AgentMessage {
|
||||
constructor(text, senderName) {
|
||||
this.text = text;
|
||||
@ -160,13 +109,13 @@ class AgentMessage {
|
||||
|
||||
if (this.senderName) {
|
||||
const nameElem = document.createElement("h3");
|
||||
nameElem.innerHTML = romanize(this.senderName);
|
||||
nameElem.innerHTML = this.senderName;
|
||||
contentElem.appendChild(nameElem);
|
||||
}
|
||||
|
||||
const textElem = document.createElement("span");
|
||||
textElem.className = "message-text";
|
||||
textElem.innerHTML = romanize(this.text);
|
||||
textElem.innerHTML = this.text;
|
||||
contentElem.appendChild(textElem);
|
||||
|
||||
return liElem;
|
||||
@ -176,7 +125,7 @@ class AgentMessage {
|
||||
class UserMessage {
|
||||
constructor(text) {
|
||||
this.createdTime = Date.now();
|
||||
this.text = romanize(text);
|
||||
this.text = text;
|
||||
this.status = "";
|
||||
}
|
||||
|
||||
@ -212,7 +161,7 @@ class UserMessage {
|
||||
|
||||
class SystemMessage {
|
||||
constructor(text) {
|
||||
this.text = romanize(text);
|
||||
this.text = text;
|
||||
}
|
||||
|
||||
getIsOurs() {
|
||||
@ -279,7 +228,7 @@ function pressSendButton() {
|
||||
|
||||
if (event.type == "keydown" && event.key != "Enter")
|
||||
{
|
||||
textBox.value = romanize(text);
|
||||
textBox.value = text;
|
||||
return;
|
||||
}
|
||||
|
||||
@ -351,8 +300,6 @@ function showConversation(path) {
|
||||
const conversationListElem = document.getElementById("side-panel");
|
||||
|
||||
setVisibleOnMobile(mainPanel, true);
|
||||
setVisibleOnMobile(conversationListElem, false);
|
||||
|
||||
|
||||
readConversationJson(path, json => {
|
||||
conversation = new Conversation(json.title);
|
||||
@ -407,24 +354,8 @@ function addConversationPreview(path) {
|
||||
});
|
||||
}
|
||||
|
||||
function populateConversationList() {
|
||||
const conversationFiles = [
|
||||
"caesar.json",
|
||||
"lucius.json",
|
||||
"ides-of-march.json",
|
||||
"lepidus.json",
|
||||
"publius.json",
|
||||
"sextus.json"
|
||||
];
|
||||
|
||||
for (let i = 0; i < conversationFiles.length; i++) {
|
||||
const path = conversationFiles[i];
|
||||
addConversationPreview(path);
|
||||
}
|
||||
}
|
||||
|
||||
setTypingIndicator(false);
|
||||
populateConversationList();
|
||||
|
||||
showConversation("ides-of-march.json");
|
||||
showConversation("sncf.json");
|
||||
|
||||
|
||||
13
sncf.json
Normal file
13
sncf.json
Normal file
@ -0,0 +1,13 @@
|
||||
|
||||
{
|
||||
"title": "SNCF Conrad",
|
||||
"interactive": true,
|
||||
"characters": [
|
||||
"you",
|
||||
"SNCF Conrad"
|
||||
],
|
||||
"messages":
|
||||
[
|
||||
{ "character": 1, "text": "Bonjour, moi je m'appelle SNCF Conrad et je vais vous aider aujourd'hui. Veuillez envoyer-moi vos questions." }
|
||||
]
|
||||
}
|
||||
176
styles.css
176
styles.css
@ -1,16 +1,18 @@
|
||||
:root {
|
||||
--dark-purple: #271f30;
|
||||
--light-red: #ff686b;
|
||||
--eggshell: #dfe2cf;
|
||||
--ucla-blue: #4d7298;
|
||||
--robin-egg-blue: #66ced6;
|
||||
--blanc: #fff;
|
||||
--gris: #666;
|
||||
--noir: #000;
|
||||
|
||||
--vermilion: #ef3e36;
|
||||
--lapis-lazuli: #235789;
|
||||
--onyx: #383d3b;
|
||||
--light-cyan: #e0fbfc;
|
||||
--buff: #edb88b;
|
||||
--eeriee-black: #1d201f;
|
||||
--clear: #00000000;
|
||||
--bleu: #0055a4;
|
||||
--rouge: #e1000f;
|
||||
|
||||
--rose-de-l-erreur: #f0f;
|
||||
|
||||
--navy: #0b131f;
|
||||
--bluegrey: #232b35;
|
||||
--sky: #7bbffd;
|
||||
--bluewhite: #ebebec;
|
||||
}
|
||||
|
||||
html {
|
||||
@ -22,13 +24,14 @@ body {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
background-color: var(--buff);
|
||||
background-color: var(--navy);
|
||||
}
|
||||
|
||||
#side-panel {
|
||||
height: 100%;
|
||||
display: none;
|
||||
color: var(--onyx);
|
||||
color: var(--noir);
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#header button {
|
||||
@ -37,11 +40,6 @@ body {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
#side-panel {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#side-panel.invisible-on-mobile {
|
||||
display: none;
|
||||
}
|
||||
@ -49,10 +47,10 @@ body {
|
||||
/* on desktop only */
|
||||
@media only screen and (min-width: 768px) {
|
||||
#side-panel {
|
||||
display: block;
|
||||
min-width: 300px;
|
||||
width: auto;
|
||||
visibility: visible;
|
||||
border-right: 3px solid var(--onyx);
|
||||
border-right: 3px solid var(--noir);
|
||||
}
|
||||
|
||||
#side-panel.invisible-on-mobile {
|
||||
@ -65,19 +63,13 @@ body {
|
||||
padding: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#side-panel .conversation {
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#side-panel .conversation {
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
border-bottom: solid var(--onyx) 3px;
|
||||
border-bottom: solid var(--noir) 3px;
|
||||
color: var(--onyx);
|
||||
padding: .5em;
|
||||
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
@ -85,8 +77,8 @@ body {
|
||||
}
|
||||
|
||||
#side-panel .conversation:hover {
|
||||
background-color: var(--vermilion);
|
||||
color: var(--light-cyan);
|
||||
background-color: var(--bleu);
|
||||
color: var(--blanc);
|
||||
}
|
||||
|
||||
#side-panel h2 {
|
||||
@ -96,14 +88,14 @@ body {
|
||||
#header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
border-bottom: solid var(--onyx) 3px;
|
||||
border-bottom: none var(--navy) 3px;
|
||||
}
|
||||
|
||||
#main-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
width: calc(100% - 300px);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#page {
|
||||
@ -112,7 +104,7 @@ body {
|
||||
|
||||
h1 {
|
||||
display: inline-block;
|
||||
color: var(--onyx);
|
||||
color: var(--bluewhite);
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
@ -120,9 +112,9 @@ h1 {
|
||||
border-width: 2px;
|
||||
border: black;
|
||||
border-style: none;
|
||||
border-radius: 1em;
|
||||
border-radius: 1.5em;
|
||||
|
||||
padding: .6em .8em;
|
||||
padding: 1em 1.5em;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
@ -131,8 +123,8 @@ h1 {
|
||||
}
|
||||
|
||||
.message-content.theirs {
|
||||
background-color: var(--onyx);
|
||||
color: var(--light-cyan);
|
||||
background-color: var(--bluegrey);
|
||||
color: var(--bluewhite);
|
||||
|
||||
float: left;
|
||||
|
||||
@ -140,7 +132,7 @@ h1 {
|
||||
}
|
||||
|
||||
.message-content.theirs h3 {
|
||||
color: var(--buff);
|
||||
color: var(--blanc);
|
||||
margin: 0;
|
||||
margin-bottom: 3px;
|
||||
font-size: .85em;
|
||||
@ -152,7 +144,7 @@ h1 {
|
||||
}
|
||||
|
||||
.message-content.ours {
|
||||
background-color: var(--vermilion);
|
||||
background-color: var(--sky);
|
||||
|
||||
right: 0;
|
||||
margin-bottom: 0.5em;
|
||||
@ -161,21 +153,21 @@ h1 {
|
||||
}
|
||||
|
||||
.ours .message-text {
|
||||
color: var(--light-cyan);
|
||||
color: var(--bluegrey);
|
||||
}
|
||||
|
||||
.system-message {
|
||||
color: var(--onyx);
|
||||
color: var(--gris);
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding-top: 1em;
|
||||
padding-right: 2em;
|
||||
height: 100%;
|
||||
overflow: scroll;
|
||||
/*height:100%;*/
|
||||
flex-grow: 1;
|
||||
margin: 0 .5em;
|
||||
padding: .5em 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
@ -192,50 +184,48 @@ li.message {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
#textbox {
|
||||
width: 100%;
|
||||
#input-panel-container {
|
||||
padding: 0 1em 1em 1em;
|
||||
}
|
||||
|
||||
#input-panel {
|
||||
display: flex;
|
||||
bottom: 0;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
|
||||
z-index: 1;
|
||||
|
||||
/*background-color: var(--light-cyan);*/
|
||||
border-radius: 100vw;
|
||||
|
||||
color: var(--bluewhite);
|
||||
background-color: var(--bluegrey);
|
||||
border-color: var(--bluegrey);
|
||||
}
|
||||
|
||||
#typing-indicator {
|
||||
color: var(--eggshell);
|
||||
|
||||
margin: 0;
|
||||
margin-left: 1em;
|
||||
margin-bottom: 0.5em;
|
||||
|
||||
position: fixed;
|
||||
bottom: 3em;
|
||||
}
|
||||
|
||||
#textbox input {
|
||||
flex-grow: 4;
|
||||
#input-panel input {
|
||||
|
||||
width: 100%;
|
||||
color: var(--onyx);
|
||||
background-color: var(--light-cyan);
|
||||
|
||||
margin: 0.5em;
|
||||
left: 1em;
|
||||
background-color: rgba(0,0,0,0);
|
||||
border-style: none;
|
||||
padding: 0 2em;
|
||||
|
||||
z-index: 1;
|
||||
font-size: 1em;
|
||||
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#input-panel input:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: var(--vermilion);
|
||||
color: var(--light-cyan);
|
||||
|
||||
margin: 0.5em;
|
||||
padding: 0;
|
||||
flex-grow: 1;
|
||||
right: 0;
|
||||
font-size: 1em;
|
||||
color: var(--vermilion);
|
||||
background-color: #00000000;
|
||||
border-style: none;
|
||||
border-radius: 100% !important;
|
||||
padding: 1em !important;
|
||||
float: right;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
@ -243,8 +233,42 @@ button:hover {
|
||||
background-color: var(--onyx);
|
||||
}
|
||||
|
||||
#typing-indicator {
|
||||
color: var(--bluewhite);
|
||||
|
||||
margin: 0;
|
||||
margin-left: 1em;
|
||||
margin-bottom: 0.5em;
|
||||
|
||||
position: fixed;
|
||||
bottom: 3em;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: var(--sky);
|
||||
color: var(--bluegrey);
|
||||
|
||||
margin: 0.5em;
|
||||
padding: 0;
|
||||
flex-grow: 1;
|
||||
right: 0;
|
||||
font-size: 1em;
|
||||
border-width: 3px;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
color: var(--bluewhite);
|
||||
background-color: var(--bluegrey);
|
||||
border-color: var(--bluegrey);
|
||||
border-width: 3px;
|
||||
padding: 0;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.message-status {
|
||||
color: var(--onyx);
|
||||
color: var(--bluewhite);
|
||||
|
||||
position: absolute;
|
||||
bottom: -1.75em;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user