feat: convert AISApp from console REPL to ASP.NET REST server with static chat UI

2025-09-14 09:58:50 +00:00
parent d52239b0d1
commit 8bd9a75162
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>
+