| (() => { |
| const messagesEl = document.getElementById("messages"); |
| const composer = document.getElementById("composer"); |
| const input = document.getElementById("message-input"); |
| const convIdEl = document.getElementById("conv-id"); |
| const slotsBox = document.getElementById("slots-box"); |
|
|
| let conversationId = null; |
| let busy = false; |
|
|
| function addBubble(role, text) { |
| const div = document.createElement("div"); |
| div.className = `bubble ${role}`; |
| div.textContent = text; |
| messagesEl.appendChild(div); |
| messagesEl.scrollTop = messagesEl.scrollHeight; |
| } |
|
|
| function renderLead(lead) { |
| document.getElementById("lead-name").textContent = |
| (lead && lead.name) || "—"; |
| document.getElementById("lead-need").textContent = |
| (lead && lead.need) || "—"; |
| document.getElementById("lead-budget").textContent = |
| (lead && lead.budget) || "—"; |
| document.getElementById("lead-contact").textContent = |
| (lead && (lead.contact_channel || lead.email || lead.phone)) || |
| "—"; |
| } |
|
|
| function renderSlots(slots) { |
| slotsBox.innerHTML = ""; |
| if (!slots || !slots.length) { |
| slotsBox.innerHTML = |
| '<div style="color:var(--muted);font-size:0.9rem">—</div>'; |
| return; |
| } |
| slots.forEach((slot) => { |
| const btn = document.createElement("button"); |
| btn.type = "button"; |
| btn.className = "slot-btn"; |
| btn.textContent = slot.label || slot.start; |
| btn.addEventListener("click", () => bookSlot(slot)); |
| slotsBox.appendChild(btn); |
| }); |
| } |
|
|
| async function bookSlot(slot) { |
| if (!conversationId) return; |
| const res = await fetch("/api/appointments/book", { |
| method: "POST", |
| headers: { "Content-Type": "application/json" }, |
| body: JSON.stringify({ |
| conversation_id: conversationId, |
| slot_start: slot.start, |
| slot_end: slot.end, |
| }), |
| }); |
| const data = await res.json(); |
| if (!res.ok) { |
| addBubble("assistant", data.detail || "Booking failed"); |
| return; |
| } |
| addBubble( |
| "assistant", |
| data.message || "Appointment booked" |
| ); |
| renderSlots([]); |
| } |
|
|
| async function loadHealth() { |
| try { |
| const res = await fetch("/api/health"); |
| const data = await res.json(); |
| document.getElementById("h-openai").textContent = data.openai |
| ? "on" |
| : "demo"; |
| document.getElementById("h-calcom").textContent = data.calcom |
| ? "on" |
| : "demo"; |
| document.getElementById("h-whatsapp").textContent = data.whatsapp |
| ? "on" |
| : "demo"; |
| document.getElementById("h-chunks").textContent = |
| data.knowledge_chunks; |
| } catch (_) { |
| |
| } |
| } |
|
|
| async function startChat() { |
| messagesEl.innerHTML = ""; |
| const res = await fetch( |
| "/api/chat/start?ui_language=en", |
| { method: "POST" } |
| ); |
| const data = await res.json(); |
| conversationId = data.conversation_id; |
| convIdEl.textContent = `#${conversationId}`; |
| addBubble("assistant", data.greeting); |
| renderLead(null); |
| renderSlots([]); |
| } |
|
|
| composer.addEventListener("submit", async (event) => { |
| event.preventDefault(); |
| if (busy || !conversationId) return; |
| const text = input.value.trim(); |
| if (!text) return; |
| input.value = ""; |
| addBubble("user", text); |
| busy = true; |
| try { |
| const res = await fetch("/api/chat/message", { |
| method: "POST", |
| headers: { "Content-Type": "application/json" }, |
| body: JSON.stringify({ |
| conversation_id: conversationId, |
| message: text, |
| ui_language: "en", |
| }), |
| }); |
| const data = await res.json(); |
| addBubble("assistant", data.reply); |
| renderLead(data.lead); |
| renderSlots(data.suggested_slots); |
| } catch (err) { |
| addBubble("assistant", "Network error. Please retry."); |
| } finally { |
| busy = false; |
| } |
| }); |
|
|
| loadHealth(); |
| startChat(); |
| })(); |
|
|
