feat: opening message

feat: sncf theme
feat: merde alors
2025-05-01 00:56:11 +01:00 · 2025-05-01 00:56:10 +01:00 · 2025-05-01 00:51:08 +01:00 · 2025-05-01 00:44:46 +01:00
4 changed files with 120 additions and 31 deletions
--- a/index.html
+++ b/index.html
@ -3,6 +3,7 @@
 <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>

@ -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()">envoyer</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>
--- a/main.js
+++ b/main.js
@ -10,7 +10,7 @@ class Conversation {
    }

    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;
        }
@ -64,7 +64,7 @@ class Conversation {

            // if we haven't found a read message yet, let's check to see if we have now
            if (!foundReadMessage) {
-                if (message.status == "lu") {
+                if (message.status == "read") {
                    foundReadMessage = true;
                    continue;
                }
@ -252,6 +252,42 @@ function onMessageSent(message) {
    updateChat(message);
 }

+// probably a bit hacky! but this saves having to do like, state or something in CSS?
+// which probably is possible and probably would be the better way to do it, but that
+// sounds like a bunch of learning i'm not SUPER in the mood for
+function setVisibleOnMobile(element, isVisible) {
+    let classes = element.className.split().filter(c => c != "");
+    const invisibleClass = "invisible-on-mobile";
+    const visibleClass = "visible";
+
+    if (isVisible && !classes.includes(visibleClass)) {
+        const idx = classes.indexOf(invisibleClass);
+        if (idx != -1) {
+            classes.splice(idx, 1);
+        }
+        classes.push(visibleClass);
+    } else if (!isVisible && !classes.includes(invisibleClass)) {
+        const idx = classes.indexOf(visibleClass);
+        if (idx != -1) {
+            classes.splice(idx, 1);
+        }
+        classes.push(invisibleClass);
+    }
+
+    element.className = classes.join(" ");
+}
+
+function showSidePanel() {
+    // this function can only be called on mobile. the main conversation should be
+    // hidden and the side conversations panel should take up the whole screen.
+
+    const mainPanel = document.getElementById("main-panel");
+    const conversationListElem = document.getElementById("side-panel");
+
+    setVisibleOnMobile(mainPanel, false);
+    setVisibleOnMobile(conversationListElem, true);
+}
+
 function readConversationJson(path, callback) {
    fetch(path)
        .then(response => response.json())
@ -263,6 +299,8 @@ function showConversation(path) {
    const mainPanel = document.getElementById("main-panel");
    const conversationListElem = document.getElementById("side-panel");

+    setVisibleOnMobile(mainPanel, true);
+
    readConversationJson(path, json => {
        conversation = new Conversation(json.title);
        const jsonMessages = json.messages;
@ -278,7 +316,7 @@ function showConversation(path) {
                initialMessages.push(message);
            } else if (data.character == 0) {
                const message = new UserMessage(text);
-                message.updateStatus("lu");
+                message.updateStatus("read");
                initialMessages.push(message);
            } else {
                const message = participants.length > 2 
@ -294,6 +332,29 @@ function showConversation(path) {
    });
 }

+function addConversationPreview(path) {
+    const listRoot = document.getElementById("side-panel");
+
+    readConversationJson(path, json => {
+        const messages = json.messages;
+
+        const elem = document.createElement("div");
+        elem.onclick = () => showConversation(path);
+        elem.className = "conversation";
+
+        const headerElem = document.createElement("h2");
+        headerElem.innerHTML = romanize(json.title);
+        elem.appendChild(headerElem);
+
+        const previewElem = document.createElement("span");
+        previewElem.innerHTML = messages.length > 0 ? romanize(messages[messages.length - 1].text) : "";
+        elem.appendChild(previewElem);
+
+        listRoot.appendChild(elem);
+    });
+}
+
+
 setTypingIndicator(false);

 showConversation("sncf.json");
--- a/sncf.json
+++ b/sncf.json
@ -8,5 +8,6 @@
    ],
    "messages":
    [
+        { "character": 1, "text": "Bonjour, moi je m'appelle SNCF Conrad et je vais vous aider aujourd'hui. Veuillez envoyer-moi vos questions." }
    ]
 }
--- a/styles.css
+++ b/styles.css
@ -3,6 +3,7 @@
    --gris: #666;
    --noir: #000;

+    --clear: #00000000;
    --bleu: #0055a4;
    --rouge: #e1000f;

@ -162,11 +163,11 @@ h1 {
 }

 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;
 }

@ -183,14 +184,53 @@ 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);
+}
+
+#input-panel input {
+
+    width: 100%;
+    color: var(--onyx);
+    background-color: rgba(0,0,0,0);
+    border-style: none;
+    padding: 0 2em;
+
+    z-index: 1;
+    font-size: 1em;
+
+}
+
+#input-panel input:focus {
+    outline: none;
+}
+
+button {
+    color: var(--vermilion);
+    background-color: #00000000;
+    border-style: none;
+    border-radius: 100% !important;
+    padding: 1em !important;
+    float: right;
+}
+
+button:hover {
+    color: var(--light-cyan);
+    background-color: var(--onyx);
 }

 #typing-indicator {
@ -202,23 +242,7 @@ li.message {

    position: fixed;
    bottom: 3em;
-}
-
-#textbox input {
-    flex-grow: 4;
-
-    color: var(--bluewhite);
-    background-color: var(--bluegrey);
-    border-color: var(--bluegrey);
-    border-width: 3px;
-    border-style: solid;
-
-    margin: 0.5em;
-    left: 1em;
-
-    font-size: 1em;
-
-    z-index: 1;
+    visibility: hidden;
 }

 button {
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