feat: coordinate message padding and input shape

index.html

@@ -12,7 +12,6 @@
 <div id="main-panel">
 
 <div id="header">
-    <button id="conversation-list-button" class="rounded-rectangle" onclick="showSidePanel()"><- back</button>
     <h1 id="header-title">NAME</h1>
 </div>
 

main.js

@@ -23,11 +23,21 @@ class Conversation {
         this.messages = initialMessages;
     }
 
+    addMessage(message) {
+        this.messages.push(message);
+        this.render();
+
+        var elements = document.getElementById("messages").children;
+        var lastElement = elements[elements.length - 1];
+        lastElement.scrollIntoView();
+    }
+
     // for the user to send their own messages
     sendUserMessage(text) {
 
         const message = new UserMessage(text);
         message.updateStatus("envoy&eacute");
+        this.addMessage(message);
 
         setTimeout(() => {
             message.updateStatus("livr&eacute");
@@ -37,16 +47,11 @@ class Conversation {
                 this.render();
                 setTimeout(()=> {
                     setTimeout(() => {
-                        this.messages.push(new AgentMessage("merde alors"));
-                        this.render();
+                        this.addMessage(new AgentMessage("merde alors"));
                     }, 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

sncf.json

@@ -8,6 +8,6 @@
     ],
     "messages":
     [
-        { "character": 1, "text": "Bonjour, moi je m'appelle SNCF Conrad et je vais vous aider aujourd'hui. Veuillez nous envoyer vos questions." }
+        { "character": 1, "text": "Bonjour, moi je m'appelle SNCF Conrad et je vais vous aider aujourd'hui. N'hésiter pas à me poser des questions." }
     ]
 }

styles.css

@@ -164,8 +164,7 @@ h1 {
 
 ul {
     margin: 0;
-    padding-top: 1em;
-    padding-right: 2em;
+    padding: 1em 1.5em 0 1.5em;
     height: 100%;
     overflow: scroll;
     list-style: none;
@@ -195,7 +194,7 @@ li.message {
 
     z-index: 1;
 
-    border-radius: 100vw;
+    border-radius: 1em;
 
     color: var(--bluewhite);
     background-color: var(--bluegrey);