ktyl/shift
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: ktyl:6589d76d5fa2912ed93bd96bdbb27188f079b43b
Branches Tags
ktyl:main
ktyl:sncf
ktyl:ceasar
ktyl:armand
ktyl:v0.1.2
ktyl:v0.1.1
ktyl:v0.1.0
...
compare: ktyl:de6986794295b87f7eb025aadf89b35174f89b7e
Branches Tags
ktyl:sncf
ktyl:ceasar
ktyl:main
ktyl:armand
ktyl:v0.1.2
ktyl:v0.1.1
ktyl:v0.1.0

4 Commits
6589d76d5f ... de69867942

Author SHA1 Message Date
Cat Flynn
de69867942 feat: opening message 2025-05-01 00:56:11 +01:00
Cat Flynn
ff7b933cfc feat: sncf theme 2025-05-01 00:56:10 +01:00
Cat Flynn
a79838f37a feat: merde alors 2025-05-01 00:51:08 +01:00
Cat Flynn
e525120a15 feat: update input style 2025-05-01 00:44:46 +01:00
4 changed files with 143 additions and 172 deletions
Show Stats Expand all files Collapse all files

11
index.html
View File

@ -3,10 +3,11 @@
<head> <head>
<link rel="stylesheet" href="styles.css"/> <link rel="stylesheet" href="styles.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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> </head>
<body> <body>
<div id="side-panel"></div> <!--<div id="side-panel"></div>-->
<div id="main-panel"> <div id="main-panel">
@ -19,9 +20,11 @@
<p id="typing-indicator">NAME is typing...</p> <p id="typing-indicator">NAME is typing...</p>
<div id="textbox"> <div id="input-panel-container">
<input id="textbox-input" class="rounded-rectangle" type="text" onkeydown="pressSendButton()"></input> <div id="input-panel" class="rounded-rectangle">
<button class="rounded-rectangle" onclick="pressSendButton()">send</button> <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>
</div> </div>

115
main.js
View File

@ -5,12 +5,12 @@ var conversation = null;
class Conversation { class Conversation {
constructor(name) { constructor(name) {
this.messages = []; this.messages = [];
this.name = romanize(name); this.name = name;
this.score = 1.0; this.score = 1.0;
} }
setInteractive(isInteractive) { setInteractive(isInteractive) {
const children = document.getElementById("textbox").children; const children = document.getElementById("input-panel").children;
for (let i = 0; i < children.length; i++) { for (let i = 0; i < children.length; i++) {
children[i].disabled = !isInteractive; children[i].disabled = !isInteractive;
} }
@ -27,71 +27,26 @@ class Conversation {
sendUserMessage(text) { sendUserMessage(text) {
const message = new UserMessage(text); const message = new UserMessage(text);
message.updateStatus("sent"); message.updateStatus("envoy&eacute");
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}`);
});
setTimeout(() => { setTimeout(() => {
message.updateStatus("delivered"); message.updateStatus("livr&eacute");
this.render(); this.render();
//setTimeout(() => { setTimeout(() => {
// message.updateStatus("read"); message.updateStatus("lu");
// this.render(); this.render();
//}, 5000); setTimeout(()=> {
setTimeout(() => {
this.messages.push(new AgentMessage("merde alors"));
this.render();
}, 2000);
}, 500);
}, 3000);
}, 1000); }, 1000);
//this.messages.push(message);
this.messages.push(message); this.messages.push(message);
//this.messages.push(new AgentMessage(messageText));
this.render();
} }
// update the current HTML based on messages // update the current HTML based on messages
@ -134,12 +89,6 @@ function getMessageList() {
return document.getElementById("messages"); return document.getElementById("messages");
} }
function romanize(text) {
text = text.replaceAll('u', 'v');
text = text.replaceAll('U', 'V');
return text;
}
class AgentMessage { class AgentMessage {
constructor(text, senderName) { constructor(text, senderName) {
this.text = text; this.text = text;
@ -160,13 +109,13 @@ class AgentMessage {
if (this.senderName) { if (this.senderName) {
const nameElem = document.createElement("h3"); const nameElem = document.createElement("h3");
nameElem.innerHTML = romanize(this.senderName); nameElem.innerHTML = this.senderName;
contentElem.appendChild(nameElem); contentElem.appendChild(nameElem);
} }
const textElem = document.createElement("span"); const textElem = document.createElement("span");
textElem.className = "message-text"; textElem.className = "message-text";
textElem.innerHTML = romanize(this.text); textElem.innerHTML = this.text;
contentElem.appendChild(textElem); contentElem.appendChild(textElem);
return liElem; return liElem;
@ -176,7 +125,7 @@ class AgentMessage {
class UserMessage { class UserMessage {
constructor(text) { constructor(text) {
this.createdTime = Date.now(); this.createdTime = Date.now();
this.text = romanize(text); this.text = text;
this.status = ""; this.status = "";
} }
@ -212,7 +161,7 @@ class UserMessage {
class SystemMessage { class SystemMessage {
constructor(text) { constructor(text) {
this.text = romanize(text); this.text = text;
} }
getIsOurs() { getIsOurs() {
@ -279,7 +228,7 @@ function pressSendButton() {
if (event.type == "keydown" && event.key != "Enter") if (event.type == "keydown" && event.key != "Enter")
{ {
textBox.value = romanize(text); textBox.value = text;
return; return;
} }
@ -351,8 +300,6 @@ function showConversation(path) {
const conversationListElem = document.getElementById("side-panel"); const conversationListElem = document.getElementById("side-panel");
setVisibleOnMobile(mainPanel, true); setVisibleOnMobile(mainPanel, true);
setVisibleOnMobile(conversationListElem, false);
readConversationJson(path, json => { readConversationJson(path, json => {
conversation = new Conversation(json.title); 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); setTypingIndicator(false);
populateConversationList();
showConversation("ides-of-march.json"); showConversation("sncf.json");

13
sncf.json Normal file
View 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
View File

@ -1,16 +1,18 @@
:root { :root {
--dark-purple: #271f30; --blanc: #fff;
--light-red: #ff686b; --gris: #666;
--eggshell: #dfe2cf; --noir: #000;
--ucla-blue: #4d7298;
--robin-egg-blue: #66ced6;
--vermilion: #ef3e36; --clear: #00000000;
--lapis-lazuli: #235789; --bleu: #0055a4;
--onyx: #383d3b; --rouge: #e1000f;
--light-cyan: #e0fbfc;
--buff: #edb88b; --rose-de-l-erreur: #f0f;
--eeriee-black: #1d201f;
--navy: #0b131f;
--bluegrey: #232b35;
--sky: #7bbffd;
--bluewhite: #ebebec;
} }
html { html {
@ -22,13 +24,14 @@ body {
margin: 0; margin: 0;
height: 100%; height: 100%;
display: flex; display: flex;
background-color: var(--buff); background-color: var(--navy);
} }
#side-panel { #side-panel {
height: 100%; height: 100%;
display: none; color: var(--noir);
color: var(--onyx); display: block;
width: 100%;
} }
#header button { #header button {
@ -37,11 +40,6 @@ body {
visibility: visible; visibility: visible;
} }
#side-panel {
display: block;
width: 100%;
}
#side-panel.invisible-on-mobile { #side-panel.invisible-on-mobile {
display: none; display: none;
} }
@ -49,10 +47,10 @@ body {
/* on desktop only */ /* on desktop only */
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {
#side-panel { #side-panel {
display: block; min-width: 300px;
width: auto; width: auto;
visibility: visible; visibility: visible;
border-right: 3px solid var(--onyx); border-right: 3px solid var(--noir);
} }
#side-panel.invisible-on-mobile { #side-panel.invisible-on-mobile {
@ -65,19 +63,13 @@ body {
padding: 0; padding: 0;
visibility: hidden; visibility: hidden;
} }
#side-panel .conversation {
max-width: 300px;
}
} }
#side-panel .conversation { #side-panel .conversation {
width: 100%; width: 100%;
height: 70px; height: 70px;
border-bottom: solid var(--onyx) 3px; border-bottom: solid var(--noir) 3px;
color: var(--onyx); color: var(--onyx);
padding: .5em;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@ -85,8 +77,8 @@ body {
} }
#side-panel .conversation:hover { #side-panel .conversation:hover {
background-color: var(--vermilion); background-color: var(--bleu);
color: var(--light-cyan); color: var(--blanc);
} }
#side-panel h2 { #side-panel h2 {
@ -96,14 +88,14 @@ body {
#header { #header {
position: sticky; position: sticky;
top: 0; top: 0;
border-bottom: solid var(--onyx) 3px; border-bottom: none var(--navy) 3px;
} }
#main-panel { #main-panel {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-end; justify-content: flex-end;
width: calc(100% - 300px); width: 100%;
} }
#page { #page {
@ -112,7 +104,7 @@ body {
h1 { h1 {
display: inline-block; display: inline-block;
color: var(--onyx); color: var(--bluewhite);
margin-left: 1em; margin-left: 1em;
} }
@ -120,9 +112,9 @@ h1 {
border-width: 2px; border-width: 2px;
border: black; border: black;
border-style: none; border-style: none;
border-radius: 1em; border-radius: 1.5em;
padding: .6em .8em; padding: 1em 1.5em;
} }
.message-content { .message-content {
@ -131,8 +123,8 @@ h1 {
} }
.message-content.theirs { .message-content.theirs {
background-color: var(--onyx); background-color: var(--bluegrey);
color: var(--light-cyan); color: var(--bluewhite);
float: left; float: left;
@ -140,7 +132,7 @@ h1 {
} }
.message-content.theirs h3 { .message-content.theirs h3 {
color: var(--buff); color: var(--blanc);
margin: 0; margin: 0;
margin-bottom: 3px; margin-bottom: 3px;
font-size: .85em; font-size: .85em;
@ -152,7 +144,7 @@ h1 {
} }
.message-content.ours { .message-content.ours {
background-color: var(--vermilion); background-color: var(--sky);
right: 0; right: 0;
margin-bottom: 0.5em; margin-bottom: 0.5em;
@ -161,21 +153,21 @@ h1 {
} }
.ours .message-text { .ours .message-text {
color: var(--light-cyan); color: var(--bluegrey);
} }
.system-message { .system-message {
color: var(--onyx); color: var(--gris);
width: 100%; width: 100%;
text-align: center; text-align: center;
} }
ul { ul {
margin: 0;
padding-top: 1em;
padding-right: 2em;
height: 100%;
overflow: scroll; overflow: scroll;
/*height:100%;*/
flex-grow: 1;
margin: 0 .5em;
padding: .5em 0;
list-style: none; list-style: none;
} }
@ -192,50 +184,48 @@ li.message {
margin-bottom: 1em; margin-bottom: 1em;
} }
#textbox { #input-panel-container {
width: 100%; padding: 0 1em 1em 1em;
}
#input-panel {
display: flex; display: flex;
bottom: 0; justify-content: space-between;
padding: 0;
z-index: 1; z-index: 1;
/*background-color: var(--light-cyan);*/ border-radius: 100vw;
color: var(--bluewhite);
background-color: var(--bluegrey);
border-color: var(--bluegrey);
} }
#typing-indicator { #input-panel input {
color: var(--eggshell);
margin: 0;
margin-left: 1em;
margin-bottom: 0.5em;
position: fixed;
bottom: 3em;
}
#textbox input {
flex-grow: 4;
width: 100%;
color: var(--onyx); color: var(--onyx);
background-color: var(--light-cyan); background-color: rgba(0,0,0,0);
border-style: none;
margin: 0.5em; padding: 0 2em;
left: 1em;
z-index: 1;
font-size: 1em; font-size: 1em;
z-index: 1; }
#input-panel input:focus {
outline: none;
} }
button { button {
background-color: var(--vermilion); color: var(--vermilion);
color: var(--light-cyan); background-color: #00000000;
border-style: none;
margin: 0.5em; border-radius: 100% !important;
padding: 0; padding: 1em !important;
flex-grow: 1; float: right;
right: 0;
font-size: 1em;
} }
button:hover { button:hover {
@ -243,8 +233,42 @@ button:hover {
background-color: var(--onyx); 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 { .message-status {
color: var(--onyx); color: var(--bluewhite);
position: absolute; position: absolute;
bottom: -1.75em; bottom: -1.75em;