Update.

2025-09-14 11:58:50 +02:00
parent b56011d3cc
commit a0e5bec39e
6 changed files with 402 additions and 6 deletions
@@ -0,0 +1,70 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>AIS Chat</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link rel="stylesheet" href="style.css">
+  <style>
+    /* Hide scrollbar on the chat pane but keep it scrollable and smooth */
+    .chat {
+      overflow-y: auto;
+      -ms-overflow-style: none;     /* IE/Edge */
+      scrollbar-width: none;        /* Firefox */
+      scroll-behavior: smooth;      /* Smooth programmatic scrolling */
+    }
+    .chat::-webkit-scrollbar {      /* Chrome/Safari/Opera */
+      display: none;
+      width: 0;
+      height: 0;
+    }
+  </style>
+</head>
+<body>
+  <main class="app">
+    <header>AIS Chat</header>
+
+    <section id="chat" class="chat"></section>
+
+    <form id="form" class="inputbar">
+      <input id="msg" type="text" placeholder="Type a message…" autocomplete="off" required />
+      <button type="submit">Send</button>
+    </form>
+  </main>
+
+  <script>
+    const chat = document.getElementById('chat');
+    const form = document.getElementById('form');
+    const msg  = document.getElementById('msg');
+
+    function addBubble(text, who) {
+      const div = document.createElement('div');
+      div.className = `bubble ${who}`;
+      div.textContent = text;
+      chat.appendChild(div);
+      chat.scrollTo({ top: chat.scrollHeight, behavior: 'smooth' });
+    }
+
+    form.addEventListener('submit', async (e) => {
+      e.preventDefault();
+      const text = msg.value.trim();
+      if (!text) return;
+      addBubble(text, 'user');
+      msg.value = '';
+      try {
+        const r = await fetch('/api/chat', {
+          method: 'POST',
+          headers: {'Content-Type':'application/json'},
+          body: JSON.stringify({ message: text })
+        });
+        const data = await r.json();
+        const reply = typeof data.reply === 'string' ? data.reply : JSON.stringify(data.reply);
+        addBubble(reply || 'ERROR', 'ai');
+      } catch (err) {
+        addBubble('Network error', 'ai');
+      }
+    });
+  </script>
+</body>
+</html>
+
@@ -0,0 +1,13 @@
+* { box-sizing: border-box; }
+html, body { height: 100%; margin: 0; font-family: system-ui, sans-serif; background: #0b0f14; color: #e6edf3; }
+.app { max-width: 800px; margin: 0 auto; height: 100%; display: grid; grid-template-rows: auto 1fr auto; gap: 12px; padding: 16px; }
+header { font-weight: 700; letter-spacing: 0.4px; }
+.chat { overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 8px 0; }
+.bubble { padding: 10px 12px; border-radius: 12px; max-width: 80%; white-space: pre-wrap; line-height: 1.35; }
+.bubble.user { align-self: flex-end; background: #1f6feb; color: #fff; border-bottom-right-radius: 4px; }
+.bubble.ai   { align-self: flex-start; background: #161b22; border: 1px solid #30363d; border-bottom-left-radius: 4px; }
+.inputbar { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
+.inputbar input { padding: 10px 12px; background: #0d1117; color: #e6edf3; border: 1px solid #30363d; border-radius: 8px; }
+.inputbar button { padding: 10px 14px; border: 1px solid #30363d; border-radius: 8px; background: #21262d; color: #e6edf3; cursor: pointer; }
+.inputbar button:hover { background: #30363d; }
+