| |
| <!doctype html> |
| <html><head><meta charset="utf-8"/><title>Simple Chat</title> |
| <meta name="viewport" content="width=device-width,initial-scale=1"/> |
| <style> |
| :root { --bg:#f6f7f9; --card:#fff; --me:#dff1ff; --bot:#ffffff; --text:#23262b; --muted:#8a9099; } |
| body { margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; background:var(--bg); color:var(--text); } |
| .app { max-width:840px; margin:24px auto; padding:0 16px; } |
| .card { background:var(--card); border:1px solid #e3e6ea; border-radius:14px; box-shadow:0 1px 2px rgba(0,0,0,.04); overflow:hidden; } |
| .header { padding:14px 16px; border-bottom:1px solid #e9edf2; font-weight:600; } |
| .chat { height:480px; overflow:auto; padding:16px; display:flex; flex-direction:column; gap:12px; } |
| .row { display:flex; } |
| .row.me { justify-content:flex-end; } |
| .bubble { max-width:70%; padding:10px 12px; border-radius:12px; line-height:1.35; white-space:pre-wrap; } |
| .me .bubble { background:var(--me); border:1px solid #c3e5ff; } |
| .bot .bubble { background:var(--bot); border:1px solid #e5e8ec; } |
| .footer { display:flex; gap:8px; padding:12px; border-top:1px solid #e9edf2; } |
| input[type=text] { flex:1; padding:10px 12px; border-radius:10px; border:1px solid #d5dbe3; font-size:15px; } |
| button { padding:10px 14px; border-radius:10px; border:1px solid #2b6cb0; background:#2b6cb0; color:#fff; font-weight:600; cursor:pointer; } |
| button:disabled { opacity:.6; cursor:not-allowed; } |
| .hint { color:var(--muted); font-size:12px; padding:0 16px 12px; } |
| </style></head> |
| <body> |
| <div class="app"><div class="card"> |
| <div class="header">Traditional Chatbot (Local)</div> |
| <div id="chat" class="chat"></div> |
| <div class="hint">Try: <code>reverse: hello world</code>, <code>help</code>, <code>capabilities</code></div> |
| <div class="footer"> |
| <input id="msg" type="text" placeholder="Type a message..." autofocus /> |
| <button id="send">Send</button> |
| </div> |
| </div></div> |
| <script> |
| const API = "http://127.0.0.1:3978/plain-chat"; |
| const chat = document.getElementById("chat"); |
| const input = document.getElementById("msg"); |
| const sendBtn = document.getElementById("send"); |
| function addBubble(text, who) { |
| const row = document.createElement("div"); row.className = "row " + who; |
| const wrap = document.createElement("div"); wrap.className = who === "me" ? "me" : "bot"; |
| const b = document.createElement("div"); b.className = "bubble"; b.textContent = text; |
| wrap.appendChild(b); row.appendChild(wrap); chat.appendChild(row); chat.scrollTop = chat.scrollHeight; |
| } |
| async function send() { |
| const text = input.value.trim(); if (!text) return; input.value = ""; addBubble(text, "me"); sendBtn.disabled = true; |
| try { |
| const res = await fetch(API, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ text }) }); |
| if (!res.ok) throw new Error("HTTP " + res.status); |
| const data = await res.json(); addBubble(data.reply ?? "(no reply)", "bot"); |
| } catch (err) { addBubble("Error: " + err.message, "bot"); } |
| finally { sendBtn.disabled = false; input.focus(); } |
| } |
| sendBtn.addEventListener("click", send); |
| input.addEventListener("keydown", (e)=>{ if (e.key === "Enter") send(); }); |
| addBubble("Connected to local bot at /plain-chat", "bot"); |
| </script> |
| </body></html> |
|
|
