|
<!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>
|
|
|