feat: style send button

index.html

@@ -12,6 +12,7 @@
 <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,21 +23,11 @@ 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");
@@ -47,11 +37,16 @@ class Conversation {
                 this.render();
                 setTimeout(()=> {
                     setTimeout(() => {
-                        this.addMessage(new AgentMessage("merde alors"));
+                        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

sncf.json

@@ -8,6 +8,6 @@
     ],
     "messages":
     [
-        { "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." }
+        { "character": 1, "text": "Bonjour, moi je m'appelle SNCF Conrad et je vais vous aider aujourd'hui. Veuillez nous envoyer vos questions." }
     ]
 }

styles.css

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