| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| <title>ReplyFlow Chat</title> |
| <link rel="preconnect" href="https://fonts.googleapis.com" /> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> |
| <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Syne:wght@600;700;800&display=swap" rel="stylesheet" /> |
| <link rel="stylesheet" href="/static/css/styles.css" /> |
| </head> |
| <body> |
| <div class="shell"> |
| <header class="topbar"> |
| <a class="brand" href="/"> |
| <span class="brand-mark" aria-hidden="true"></span> |
| <span>ReplyFlow</span> |
| </a> |
| <nav class="nav"> |
| <a href="/dashboard">Dashboard</a> |
| </nav> |
| </header> |
|
|
| <div class="chat-layout"> |
| <section class="panel chat-panel"> |
| <div class="chat-header"> |
| <div> |
| <h1>ReplyFlow assistant</h1> |
| <div style="color:var(--muted);font-size:0.9rem"> |
| Ask about products, pricing, delivery, or booking |
| </div> |
| </div> |
| <span class="badge" id="conv-id">—</span> |
| </div> |
| <div class="messages" id="messages" aria-live="polite"></div> |
| <form class="composer" id="composer"> |
| <input |
| id="message-input" |
| type="text" |
| autocomplete="off" |
| placeholder="Type your message…" |
| required |
| /> |
| <button class="btn btn-primary" type="submit">Send</button> |
| </form> |
| </section> |
|
|
| <aside class="side-stack"> |
| <div class="panel side-card"> |
| <h2>Lead profile</h2> |
| <div class="kv" id="lead-box"> |
| <div><span>Name</span><span id="lead-name">—</span></div> |
| <div><span>Need</span><span id="lead-need">—</span></div> |
| <div><span>Budget</span><span id="lead-budget">—</span></div> |
| <div><span>Contact</span><span id="lead-contact">—</span></div> |
| </div> |
| </div> |
| <div class="panel side-card"> |
| <h2>Suggested slots</h2> |
| <div class="slots" id="slots-box"> |
| <div style="color:var(--muted);font-size:0.9rem">—</div> |
| </div> |
| </div> |
| <div class="panel side-card"> |
| <h2>Integrations</h2> |
| <div class="kv" id="health-box"> |
| <div><span>OpenAI</span><span id="h-openai">…</span></div> |
| <div><span>Cal.com</span><span id="h-calcom">…</span></div> |
| <div><span>WhatsApp</span><span id="h-whatsapp">…</span></div> |
| <div><span>KB chunks</span><span id="h-chunks">…</span></div> |
| </div> |
| </div> |
| </aside> |
| </div> |
| </div> |
|
|
| <script src="/static/js/chat.js"></script> |
| </body> |
| </html> |
|
|
