File size: 2,653 Bytes
732e77c | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 | <!-- /app/assets/html/chat_minimal.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Minimal Chat Tester</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body { font-family: system-ui, Arial, sans-serif; margin: 24px; }
.row { display:flex; gap:8px; align-items:center; margin-bottom:8px; }
input[type=text]{ width:420px; padding:8px; }
textarea{ width:100%; height:240px; padding:8px; }
button{ padding:8px 12px; }
.ok{ color:#1a7f37; }
.warn{ color:#b54708; }
.err{ color:#b42318; }
</style>
</head>
<body>
<h2>Minimal Chat Tester → FastAPI /chatbot/message</h2>
<div class="row">
<label>Backend URL:</label>
<input id="base" type="text" value="http://127.0.0.1:8000" />
<button id="btnHealth">Health</button>
<button id="btnCaps">Capabilities</button>
</div>
<div class="row">
<input id="msg" type="text" placeholder="Type a message…" />
<button id="btnSend">Send</button>
</div>
<p id="status"></p>
<textarea id="log" readonly></textarea>
<script>
const $ = id => document.getElementById(id);
const log = (o, cls="") => {
const line = (typeof o === "string") ? o : JSON.stringify(o, null, 2);
$("log").value += line + "\n";
$("log").scrollTop = $("log").scrollHeight;
if(cls) { $("status").className = cls; $("status").textContent = line; }
};
function urlJoin(base, path) {
return base.replace(/\/+$/,"") + path;
}
async function health() {
try {
const r = await fetch(urlJoin($("base").value, "/health"));
const j = await r.json();
log(j, "ok");
} catch (e) { log("Health error: " + e, "err"); }
}
async function caps() {
try {
// Prefer library-like caps endpoint if you expose one; otherwise call /openapi.json for visibility
const r = await fetch(urlJoin($("base").value, "/openapi.json"));
const j = await r.json();
log({paths: Object.keys(j.paths).slice(0,20)}, "ok");
} catch (e) { log("Caps error: " + e, "err"); }
}
async function sendMsg() {
const text = $("msg").value.trim();
if(!text) { log("Please type a message.", "warn"); return; }
try {
const r = await fetch(urlJoin($("base").value, "/chatbot/message"), {
method:"POST",
headers:{ "Content-Type":"application/json" },
body: JSON.stringify({ message: text })
});
if(!r.ok) throw new Error(`${r.status} ${r.statusText}`);
const j = await r.json();
log(j, "ok");
} catch (e) { log("Send error: " + e, "err"); }
}
$("btnHealth").onclick = health;
$("btnCaps").onclick = caps;
$("btnSend").onclick = sendMsg;
// Warmup
health();
</script>
</body>
</html>
|