css

public/app.js

@@ -90,6 +90,15 @@ If it’s not the right fit, no worries — we’ll refund you 💸.
       });
 
       const data = await response.json();
+      const statusDiv = document.getElementById('cw-status');
+      if (data.status) {
+        statusDiv.innerHTML = data.status;
+        statusDiv.style.maxHeight = statusDiv.scrollHeight + 'px';
+        statusDiv.style.padding = '10px';
+      } else {
+        statusDiv.style.maxHeight = '0';
+        statusDiv.style.padding = '0 10px';
+      }
       appendMessage(data.output, 'bot');
     } catch (error) {
       appendMessage('Fehler beim Verbinden mit dem Server. Bitte versuchen Sie es später erneut.', 'bot');

public/index.html

@@ -18,6 +18,7 @@
       <img src="logo.svg" alt="Logo" />
     </div>
     <div class="header">Kundenservice</div>
+    <div id="cw-status"></div>
     <div id="cw-chatMessages"></div>
     <form id="cw-chatForm" autocomplete="off">
       <input type="text" id="cw-chatInput" placeholder="Type your message..." required autocomplete="off" />

public/style.css

@@ -364,6 +364,15 @@ footer a:hover {
 }
 
 /* Header */
+#cw-status {
+  padding: 0 10px;
+  background-color: #f0f0f0;
+  border-bottom: 1px solid #ddd;
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
+}
+
 #cw-chatWidget .header {
   background-color: #0070c0;
   color: white;