assets/game1.js

@@ -24,6 +24,7 @@ function subscribeToMercure(mercurePublicUrl, topic) {
             msgEl.style.color = '#0F0'; // Green for incoming messages
             msgEl.style.marginBottom = '10px';
             messageContainer.appendChild(msgEl);
+            window.scrollTo(0, document.body.scrollHeight);
             if(stillPlayingSound)
             playSound();
             console.log('[Mercure][game1] sequenceFinished status:', sequenceFinished);
@@ -181,6 +182,7 @@ document.addEventListener('DOMContentLoaded', async () => {
         msgEl.textContent = msg[0];
         msgEl.style.marginBottom = '10px';
         messageContainer.appendChild(msgEl);
+        window.scrollTo(0, document.body.scrollHeight);
 
         playSound();
 
@@ -203,6 +205,13 @@ document.addEventListener('DOMContentLoaded', async () => {
               stillPlayingSound = false;
               sequenceFinished = false;
               const message = inputField.value.trim();
+
+              const msgEl = document.createElement('div');
+              msgEl.className = 'message';
+              msgEl.textContent = message;
+              msgEl.style.marginBottom = '10px';
+              messageContainer.appendChild(msgEl);
+
               if (message && apiEchoUrl) {
                 inputField.value = '';
                 try {
@@ -211,6 +220,16 @@ document.addEventListener('DOMContentLoaded', async () => {
                     body: { message, ts: new Date().toISOString() },
                   });
                   console.log('[API][game1] message sent →', response);
+                  if (response && response.result && Array.isArray(response.result.result)) {
+                    response.result.result.forEach(text => {
+                      const msgEl = document.createElement('div');
+                      msgEl.className = 'message';
+                      msgEl.textContent = text;
+                      msgEl.style.marginBottom = '10px';
+                      messageContainer.appendChild(msgEl);
+                    });
+                    window.scrollTo(0, document.body.scrollHeight);
+                  }
                 } catch (err) {
                   console.error('[API][game1] Failed to send message:', err);
                 }

assets/styles/game1.css

@@ -29,8 +29,11 @@ body {
 
 div#game-timer {
     position: fixed;
-    top: 20px;
+    top: 0;
-    left: 20px;
+    left: 0;
+    width: 100%;
+    padding: 20px;
+    background-color: #000;
     color: #F00;
     font-size: 28px;
     z-index: 100;
@@ -38,7 +41,7 @@ div#game-timer {
 
 div#message-container {
     padding: 20px;
-    padding-top: 60px; /* Space for fixed timer */
+    padding-top: 80px; /* Space for fixed timer */
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
@@ -49,6 +52,7 @@ div#message-container {
 
 div.message {
     color: #C0C0C0;
+    white-space: pre-wrap;
 }
 
 div#input {

src/Game/Service/GameResponseService.php

@@ -189,6 +189,7 @@ class GameResponseService
                     $messages[] = '   If you want to send a message specifically to one other agent, use the id of the agent after /chat, like /chat 6 {message}';
                     $messages[] = '   This will send the message only to agent with id 6.';
                     $messages[] = '   USAGE: /chat {message}';
+                    $messages[] = '   USAGE: /chat 6 {message}';
                     $messages[] = '';
                     break;
                 case 'help':