Spaces:
Sleeping
Sleeping
File size: 6,925 Bytes
df5861f 798ece2 df5861f 798ece2 9808fe5 798ece2 9808fe5 798ece2 df5861f 798ece2 df5861f 798ece2 9808fe5 798ece2 9808fe5 798ece2 df5861f |
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 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Patient Assistant Chat</title>
<style>
/* your existing styles here */
:root { --bg:#0f172a; --panel:#111827; --soft:#1f2937; --text:#e5e7eb; --muted:#9ca3af; --accent:#22c55e; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); }
.app { max-width: 900px; margin: 0 auto; padding: 20px; }
.card { background: var(--panel); border: 1px solid #242b3a; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.header { padding: 16px 20px; border-bottom: 1px solid #242b3a; display: flex; align-items: center; gap: 12px; }
.badge { background: #0b3b26; color: #8bf2c0; padding: 6px 10px; border-radius: 999px; font-weight: 600; font-size: 12px; letter-spacing: .3px; }
.row { display:flex; gap:12px; align-items:center; flex-wrap: wrap; }
label { font-size: 13px; color: var(--muted); }
input[type="text"] { background: var(--soft); color: var(--text); border: 1px solid #2b3346; padding: 10px 12px; border-radius: 10px; min-width: 200px; outline: none; }
input[type="text"]:focus { border-color: #374462; box-shadow: 0 0 0 3px rgba(59,130,246,.15); }
button { background: var(--accent); color: #052e19; border: none; padding: 10px 14px; border-radius: 10px; font-weight: 700; cursor: pointer; }
button.secondary { background: #334155; color: #dbeafe; }
button:disabled { opacity: .6; cursor: not-allowed; }
.chat { height: 420px; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; background: #0b1220; }
.msg { max-width: 80%; padding: 10px 12px; border-radius: 12px; border: 1px solid #1f2937; white-space: pre-wrap; word-break: break-word; }
.user { align-self: flex-end; background: #0b3b26; border-color: #14532d; }
.assist { align-self: flex-start; background: #111827; border-color: #1f2937; }
.composer { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 14px; border-top: 1px solid #242b3a; background: #0b1220; }
.composer input { width: 100%; }
.state { padding: 12px 16px; border-top: 1px dashed #243044; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12px; color: #cbd5e1; background: #0b1220; }
details > summary { cursor: pointer; }
.small { font-size: 12px; color: var(--muted); }
</style>
</head>
<body>
<div class="app">
<div class="card">
<div class="header">
<span class="badge">Patient Assistant</span>
</div>
<div id="chat" class="chat"></div>
<div class="composer">
<input id="message" type="text" placeholder="Type your message…" />
<button id="send">Send</button>
</div>
<div class="state">
<details>
<summary>Agent State (from backend)</summary>
<pre id="stateView">{}</pre>
</details>
</div>
</div>
<p class="small" style="margin-top:10px; opacity:.8">
This version allows the agent to ask for your Patient ID (PID) during the conversation.
</p>
</div>
<script>
const NODE_CHAT_ENDPOINT = "/chat";
const chatEl = document.getElementById("chat");
const msgEl = document.getElementById("message");
const sendBtn = document.getElementById("send");
const stateView = document.getElementById("stateView");
let chatHistory = JSON.parse(localStorage.getItem("chatHistory")) || [];
let patientState = JSON.parse(localStorage.getItem("patientState")) || {};
sendBtn.addEventListener("click", onSend);
msgEl.addEventListener("keydown", (e) => {
if (e.key === "Enter") onSend();
});
function saveState() {
localStorage.setItem("chatHistory", JSON.stringify(chatHistory));
localStorage.setItem("patientState", JSON.stringify(patientState));
}
function renderChat() {
chatEl.innerHTML = "";
for (const m of chatHistory) {
const div = document.createElement("div");
div.className = `msg ${m.role === "user" ? "user" : "assist"}`;
div.textContent = `${m.role === "user" ? "You" : "Assistant"}: ${m.content}`;
chatEl.appendChild(div);
}
chatEl.scrollTop = chatEl.scrollHeight;
}
async function onSend() {
const message = (msgEl.value || "").trim();
if (!message) return;
// Clear the input and disable the button while we wait for the response
msgEl.value = "";
sendBtn.disabled = true;
// Add the user's message to the chat history
chatHistory.push({ role: "user", content: message });
renderChat();
saveState();
try {
// Send the chat history and patient state to the backend
const res = await fetch(NODE_CHAT_ENDPOINT, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ chat_history: chatHistory, patient_state: patientState })
});
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const data = await res.json();
const reply = data.assistant_reply || "(no reply)";
patientState = data.updated_state || patientState;
// Add the assistant's reply to the chat history
chatHistory.push({ role: "assistant", content: reply });
renderChat();
saveState();
// Display the raw agent state for debugging
stateView.textContent = JSON.stringify(patientState, null, 2);
} catch (err) {
// Handle any errors and display them in the chat
chatHistory.push({ role: "assistant", content: `Error: ${err.message}` });
renderChat();
saveState();
} finally {
sendBtn.disabled = false;
}
}
// Initial greeting
if (chatHistory.length === 0) {
chatHistory.push({ role: "assistant", content: "Hello! I am your patient assistant. Please tell me your Patient ID to get started." });
saveState();
}
renderChat();
</script>
</body>
</html>
|