Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"/> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> | |
| <title>Nilotpal SQL Bot</title> | |
| <script src="https://telegram.org/js/telegram-web-app.js"></script> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"/> | |
| <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet"/> | |
| <style> | |
| :root { | |
| --bg: #0d1117; | |
| --surface: #161b22; | |
| --card: #1c2128; | |
| --card2: #21262d; | |
| --border: #30363d; | |
| --border2: #3d444d; | |
| --accent: #58a6ff; | |
| --accent2: #388bfd; | |
| --accent-dim: rgba(88,166,255,0.08); | |
| --sql-kw: #ff7b72; | |
| --sql-fn: #d2a8ff; | |
| --sql-str: #a5d6ff; | |
| --sql-num: #79c0ff; | |
| --sql-id: #56d364; | |
| --sql-op: #ffa657; | |
| --sql-def: #c9d1d9; | |
| --danger: #f85149; | |
| --success: #3fb950; | |
| --text: #e6edf3; | |
| --text2: #8b949e; | |
| --muted: #484f58; | |
| --mono: 'JetBrains Mono', monospace; | |
| --sans: 'Inter', sans-serif; | |
| --r: 8px; | |
| --rl: 14px; | |
| --sidebar: 280px; | |
| } | |
| * { box-sizing: border-box; margin: 0; padding: 0; } | |
| html, body { height: 100%; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 14px; overflow-x: hidden; } | |
| /* ── DESKTOP: sidebar layout ── */ | |
| #app { | |
| display: grid; | |
| grid-template-rows: 54px 1fr; | |
| grid-template-columns: var(--sidebar) 1fr; | |
| height: 100vh; | |
| } | |
| /* ── Header ── */ | |
| header { | |
| grid-column: 1/-1; | |
| display: flex; align-items: center; gap: 10px; | |
| padding: 0 20px; | |
| background: var(--surface); | |
| border-bottom: 1px solid var(--border); | |
| z-index: 10; | |
| } | |
| .hdr-icon { width: 30px; height: 30px; background: linear-gradient(135deg,#388bfd,#58a6ff); border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 15px; box-shadow: 0 0 10px rgba(88,166,255,.3); flex-shrink: 0; } | |
| .hdr-title { font-family: var(--mono); font-size: 13px; font-weight: 600; } | |
| .hdr-title span { color: var(--accent); } | |
| #menu-btn { display: none; background: none; border: none; color: var(--text2); font-size: 20px; cursor: pointer; padding: 4px; margin-right: 4px; } | |
| .hdr-right { margin-left: auto; display: flex; align-items: center; gap: 6px; } | |
| .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); } | |
| .dot.ok { background: var(--success); animation: pulse 2.5s ease-in-out infinite; } | |
| @keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(63,185,80,.4)} 50%{box-shadow:0 0 0 5px transparent} } | |
| .badge { font-family: var(--mono); font-size: 10px; padding: 2px 7px; border-radius: 4px; border: 1px solid var(--border2); color: var(--text2); } | |
| .badge.ok { border-color: rgba(88,166,255,.4); color: var(--accent); background: var(--accent-dim); } | |
| /* ── Sidebar ── */ | |
| aside { | |
| background: var(--surface); | |
| border-right: 1px solid var(--border); | |
| display: flex; flex-direction: column; | |
| overflow: hidden; | |
| transition: transform .25s ease; | |
| } | |
| .aside-sec { padding: 14px 14px 12px; border-bottom: 1px solid var(--border); } | |
| .sec-label { font-family: var(--mono); font-size: 9px; letter-spacing: 1.5px; color: var(--muted); text-transform: uppercase; margin-bottom: 10px; } | |
| .upload-zone { | |
| border: 1.5px dashed var(--border2); | |
| border-radius: var(--r); | |
| padding: 16px 12px; | |
| text-align: center; | |
| cursor: pointer; | |
| transition: all .2s; | |
| background: var(--card); | |
| position: relative; | |
| } | |
| .upload-zone:hover, .upload-zone.drag { border-color: var(--accent); background: var(--accent-dim); } | |
| .upload-zone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; } | |
| .upload-icon { font-size: 20px; margin-bottom: 5px; display: block; } | |
| .upload-zone p { font-size: 12px; color: var(--text2); line-height: 1.5; } | |
| .upload-zone p strong { color: var(--text); } | |
| #file-badge { display: none; background: var(--card); border: 1px solid var(--border2); border-radius: var(--r); padding: 10px 11px; font-size: 12px; margin-top: 10px; } | |
| #file-badge.show { display: block; } | |
| .fb-name { font-family: var(--mono); font-size: 10px; color: var(--accent); font-weight: 600; margin-bottom: 5px; word-break: break-all; } | |
| .fb-row { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; margin-bottom: 2px; } | |
| .fb-row span:last-child { color: var(--text2); } | |
| /* Suggestions */ | |
| .aside-sec.sugg-sec { flex: 1; overflow-y: auto; } | |
| #suggestions { display: flex; flex-direction: column; gap: 5px; } | |
| .chip { padding: 7px 10px; border-radius: 6px; border: 1px solid var(--border); background: transparent; font-size: 11px; color: var(--text2); cursor: pointer; transition: all .15s; text-align: left; font-family: var(--sans); line-height: 1.4; } | |
| .chip:hover { border-color: var(--accent2); color: var(--text); background: var(--accent-dim); } | |
| .chip-placeholder { font-size: 11px; color: var(--muted); font-style: italic; } | |
| /* ── Main ── */ | |
| main { display: flex; flex-direction: column; overflow: hidden; background: var(--bg); } | |
| /* Chat */ | |
| #chat { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; scroll-behavior: smooth; } | |
| #empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--text2); text-align: center; padding: 30px; } | |
| .empty-icon { font-size: 38px; animation: float 4s ease-in-out infinite; } | |
| @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} } | |
| #empty h3 { font-size: 15px; color: var(--text); font-weight: 500; } | |
| #empty p { font-size: 12px; line-height: 1.7; max-width: 300px; } | |
| .msg { display: flex; flex-direction: column; gap: 3px; max-width: 800px; width: 100%; } | |
| .msg.user { align-self: flex-end; align-items: flex-end; max-width: 75%; } | |
| .msg.bot { align-self: flex-start; align-items: flex-start; } | |
| .msg-meta { font-size: 10px; color: var(--muted); font-family: var(--mono); padding: 0 3px; } | |
| .bubble { padding: 10px 14px; border-radius: var(--rl); font-size: 13.5px; line-height: 1.65; } | |
| .msg.user .bubble { background: var(--accent2); color: #fff; border-bottom-right-radius: 4px; } | |
| .msg.bot .bubble { background: var(--card); border: 1px solid var(--border); border-bottom-left-radius: 4px; color: var(--text); width: 100%; } | |
| /* SQL block */ | |
| .sql-block { background: #010409; border: 1px solid var(--border2); border-radius: var(--r); margin-top: 8px; overflow: hidden; } | |
| .sql-hdr { display: flex; align-items: center; justify-content: space-between; padding: 6px 12px; background: var(--card2); border-bottom: 1px solid var(--border); } | |
| .sql-dots { display: flex; gap: 4px; align-items: center; } | |
| .sd { width: 8px; height: 8px; border-radius: 50%; } | |
| .sd-r{background:#f85149}.sd-y{background:#d29922}.sd-g{background:#3fb950} | |
| .sql-lang { font-family: var(--mono); font-size: 9px; letter-spacing: 1.5px; color: var(--text2); margin-left: 6px; } | |
| .copy-btn { background: none; border: 1px solid var(--border2); color: var(--text2); font-size: 10px; padding: 3px 8px; border-radius: 4px; cursor: pointer; font-family: var(--mono); transition: all .15s; } | |
| .copy-btn:hover { border-color: var(--accent); color: var(--accent); } | |
| .sql-code { padding: 14px 16px; font-family: var(--mono); font-size: 12px; line-height: 1.9; color: var(--sql-def); white-space: pre-wrap; word-break: break-word; } | |
| .kw{color:var(--sql-kw);font-weight:600} .fn{color:var(--sql-fn)} .st{color:var(--sql-str)} .nm{color:var(--sql-num)} .op{color:var(--sql-op)} | |
| /* Result table */ | |
| .result-wrap { margin-top: 8px; border: 1px solid var(--border); border-radius: var(--r); overflow: auto; max-height: 280px; } | |
| table { width: 100%; border-collapse: collapse; font-size: 12px; } | |
| thead th { position: sticky; top: 0; background: var(--card2); padding: 7px 12px; text-align: left; font-family: var(--mono); font-size: 9px; color: var(--accent); letter-spacing: .8px; border-bottom: 1px solid var(--border2); white-space: nowrap; } | |
| tbody tr { border-bottom: 1px solid var(--border); transition: background .1s; } | |
| tbody tr:last-child { border-bottom: none; } | |
| tbody tr:hover { background: var(--accent-dim); } | |
| td { padding: 7px 12px; color: var(--text2); white-space: nowrap; font-size: 12px; } | |
| .rc { font-family: var(--mono); font-size: 10px; color: var(--muted); margin-top: 5px; } | |
| .err-box { background: rgba(248,81,73,.06); border: 1px solid rgba(248,81,73,.25); border-radius: var(--r); padding: 9px 12px; font-size: 12px; color: #ffa198; margin-top: 6px; font-family: var(--mono); } | |
| /* Thinking */ | |
| .thinking { display: flex; gap: 4px; align-items: center; padding: 10px 14px; background: var(--card); border: 1px solid var(--border); border-radius: var(--rl); border-bottom-left-radius: 4px; } | |
| .thinking span { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: think 1.2s ease-in-out infinite; } | |
| .thinking span:nth-child(2){animation-delay:.2s} .thinking span:nth-child(3){animation-delay:.4s} | |
| @keyframes think { 0%,60%,100%{transform:translateY(0);opacity:.3} 30%{transform:translateY(-5px);opacity:1} } | |
| /* Input */ | |
| .input-bar { padding: 12px 20px 14px; background: var(--surface); border-top: 1px solid var(--border); } | |
| .input-row { display: flex; gap: 9px; align-items: flex-end; } | |
| #q-input { flex: 1; background: var(--card); border: 1.5px solid var(--border2); border-radius: var(--r); padding: 10px 13px; font-size: 14px; font-family: var(--sans); color: var(--text); resize: none; min-height: 44px; max-height: 120px; outline: none; transition: border-color .2s, box-shadow .2s; line-height: 1.5; } | |
| #q-input:focus { border-color: var(--accent2); box-shadow: 0 0 0 3px rgba(88,166,255,.1); } | |
| #q-input::placeholder { color: var(--muted); } | |
| #q-input:disabled { opacity: .4; } | |
| #send-btn { background: var(--accent2); color: #fff; border: none; border-radius: var(--r); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; transition: all .2s; flex-shrink: 0; font-weight: 700; } | |
| #send-btn:hover { background: var(--accent); box-shadow: 0 0 12px rgba(88,166,255,.35); transform: scale(1.04); } | |
| #send-btn:disabled { opacity: .3; cursor: not-allowed; transform: none; box-shadow: none; } | |
| .input-hint { font-size: 11px; color: var(--muted); margin-top: 5px; } | |
| /* Toast */ | |
| #toast { position: fixed; bottom: 20px; right: 20px; background: var(--card2); border: 1px solid var(--border2); border-radius: var(--r); padding: 9px 15px; font-size: 12px; font-family: var(--mono); color: var(--text); z-index: 9999; transform: translateY(50px); opacity: 0; transition: all .3s cubic-bezier(.34,1.56,.64,1); pointer-events: none; max-width: 280px; } | |
| #toast.show { transform: translateY(0); opacity: 1; } | |
| #toast.ok { border-color: rgba(63,185,80,.4); color: #56d364; } | |
| #toast.err { border-color: rgba(248,81,73,.4); color: #ffa198; } | |
| /* Overlay for mobile sidebar */ | |
| #overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 90; backdrop-filter: blur(2px); } | |
| #overlay.show { display: block; } | |
| /* Scrollbar */ | |
| ::-webkit-scrollbar { width: 4px; height: 4px; } | |
| ::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 10px; } | |
| /* ── TABLET ── */ | |
| @media (max-width: 900px) { | |
| :root { --sidebar: 240px; } | |
| #chat { padding: 12px 16px; } | |
| .input-bar { padding: 10px 16px 12px; } | |
| .msg.user { max-width: 85%; } | |
| } | |
| /* ── MOBILE ── */ | |
| @media (max-width: 640px) { | |
| #app { grid-template-columns: 1fr; } | |
| #menu-btn { display: flex; align-items: center; } | |
| .input-hint { display: none; } | |
| aside { | |
| position: fixed; | |
| top: 54px; left: 0; | |
| width: 80vw; max-width: 300px; | |
| height: calc(100vh - 54px); | |
| z-index: 95; | |
| transform: translateX(-100%); | |
| box-shadow: 6px 0 24px rgba(0,0,0,.5); | |
| } | |
| aside.open { transform: translateX(0); } | |
| main { grid-column: 1; } | |
| .msg, .msg.user { max-width: 100%; } | |
| .msg.user { max-width: 88%; } | |
| #chat { padding: 12px; gap: 10px; } | |
| .bubble { font-size: 13px; padding: 9px 12px; } | |
| .sql-code { font-size: 11px; padding: 10px 12px; } | |
| td, thead th { padding: 5px 8px; font-size: 11px; } | |
| .input-bar { padding: 8px 12px 10px; } | |
| #toast { bottom: 12px; right: 12px; left: 12px; max-width: none; } | |
| .badge { display: none; } | |
| } | |
| @media (max-width: 360px) { | |
| .hdr-title { font-size: 12px; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="toast"></div> | |
| <div id="overlay" onclick="closeSidebar()"></div> | |
| <div id="app"> | |
| <!-- Header --> | |
| <header> | |
| <button id="menu-btn" onclick="toggleSidebar()">☰</button> | |
| <div class="hdr-icon">⚡</div> | |
| <div class="hdr-title">Nilotpal <span>SQL Bot</span></div> | |
| <div class="hdr-right"> | |
| <span class="dot" id="dot"></span> | |
| <span class="badge" id="badge">Loading</span> | |
| </div> | |
| </header> | |
| <!-- Sidebar --> | |
| <aside id="sidebar"> | |
| <div class="aside-sec"> | |
| <div class="sec-label">Data Source</div> | |
| <div class="upload-zone" id="upload-zone"> | |
| <input type="file" id="csv-input" accept=".csv"/> | |
| <span class="upload-icon">📂</span> | |
| <p><strong>Drop CSV here</strong><br/>or click to browse</p> | |
| </div> | |
| <div id="file-badge"> | |
| <div class="fb-name" id="fb-name"></div> | |
| <div class="fb-row"><span>Rows</span><span id="fb-rows">—</span></div> | |
| <div class="fb-row"><span>Columns</span><span id="fb-cols">—</span></div> | |
| </div> | |
| </div> | |
| <div class="aside-sec sugg-sec"> | |
| <div class="sec-label">Example Queries</div> | |
| <div id="suggestions"> | |
| <span class="chip-placeholder">Upload CSV to see examples</span> | |
| </div> | |
| </div> | |
| </aside> | |
| <!-- Main --> | |
| <main> | |
| <div id="chat"> | |
| <div id="empty"> | |
| <div class="empty-icon">🗂️</div> | |
| <h3>Ask anything about your data</h3> | |
| <p>Upload a CSV from the sidebar, then ask questions in plain English. I convert them to SQL instantly.</p> | |
| </div> | |
| </div> | |
| <div class="input-bar"> | |
| <div class="input-row"> | |
| <textarea id="q-input" placeholder="e.g. Show top 10 rows by sales…" rows="1" disabled></textarea> | |
| <button id="send-btn" disabled>↑</button> | |
| </div> | |
| <div class="input-hint">Enter to send · Shift+Enter new line</div> | |
| </div> | |
| </main> | |
| </div> | |
| <script> | |
| const tg = window.Telegram?.WebApp; | |
| if (tg) { tg.ready(); tg.expand(); } | |
| let sessionId=null, isLoading=false; | |
| const chat = document.getElementById('chat'); | |
| const empty = document.getElementById('empty'); | |
| const input = document.getElementById('q-input'); | |
| const sendBtn = document.getElementById('send-btn'); | |
| const csvInput = document.getElementById('csv-input'); | |
| const zone = document.getElementById('upload-zone'); | |
| const fileBadge= document.getElementById('file-badge'); | |
| const fbName = document.getElementById('fb-name'); | |
| const fbRows = document.getElementById('fb-rows'); | |
| const fbCols = document.getElementById('fb-cols'); | |
| const sugg = document.getElementById('suggestions'); | |
| const dot = document.getElementById('dot'); | |
| const badge = document.getElementById('badge'); | |
| const toast = document.getElementById('toast'); | |
| const sidebar = document.getElementById('sidebar'); | |
| const overlay = document.getElementById('overlay'); | |
| function toggleSidebar(){ sidebar.classList.toggle('open'); overlay.classList.toggle('show'); } | |
| function closeSidebar(){ sidebar.classList.remove('open'); overlay.classList.remove('show'); } | |
| fetch('/health').then(r=>r.json()).then(d=>{ | |
| if(d.status==='ok'){ dot.classList.add('ok'); badge.textContent=d.model.split('/').pop().toUpperCase(); badge.classList.add('ok'); } | |
| }).catch(()=>badge.textContent='OFFLINE'); | |
| let toastT; | |
| function showToast(msg,type='ok'){ toast.textContent=msg; toast.className=`show ${type}`; clearTimeout(toastT); toastT=setTimeout(()=>toast.className='',2800); } | |
| zone.addEventListener('dragover',e=>{e.preventDefault();zone.classList.add('drag');}); | |
| zone.addEventListener('dragleave',()=>zone.classList.remove('drag')); | |
| zone.addEventListener('drop',e=>{e.preventDefault();zone.classList.remove('drag');const f=e.dataTransfer.files[0];if(f)handleUpload(f);}); | |
| csvInput.addEventListener('change',e=>{if(e.target.files[0])handleUpload(e.target.files[0]);}); | |
| async function handleUpload(file){ | |
| if(!file.name.endsWith('.csv')){ showToast('Only .csv files','err'); return; } | |
| zone.querySelector('p').textContent='⏳ Uploading...'; | |
| const fd=new FormData(); fd.append('file',file); | |
| try{ | |
| const r=await fetch('/upload',{method:'POST',body:fd}); | |
| const d=await r.json(); | |
| if(!r.ok) throw new Error(d.detail); | |
| sessionId=d.session_id; | |
| fbName.textContent=file.name; | |
| fbRows.textContent=d.row_count.toLocaleString(); | |
| fbCols.textContent=d.columns.length; | |
| fileBadge.classList.add('show'); | |
| zone.querySelector('p').innerHTML='<strong>Change CSV</strong> — click to replace'; | |
| buildSuggestions(d.columns); | |
| empty.style.display='none'; | |
| input.disabled=false; sendBtn.disabled=false; | |
| showToast(`✓ Loaded ${d.row_count.toLocaleString()} rows`,'ok'); | |
| closeSidebar(); | |
| addMsg('bot',`<strong>File loaded:</strong> <code>${file.name}</code><br/>Table <code>${d.table_name}</code> · ${d.row_count.toLocaleString()} rows · ${d.columns.length} columns.<br/><br/>Columns: <code>${d.columns.join(', ')}</code><br/><br/>Ask me anything!`); | |
| }catch(e){ showToast(e.message,'err'); zone.querySelector('p').innerHTML='<strong>Drop CSV here</strong><br/>or click to browse'; } | |
| } | |
| function buildSuggestions(cols){ | |
| const numCol=cols.find(c=>/num|price|val|amt|count|qty|sal|rev|cost/i.test(c))||cols[1]||cols[0]; | |
| const qs=[`Show first 10 rows`,`Count total records`,`Unique values in ${cols[0]}`,`Average of ${numCol}`,`Group by ${cols[0]} and count`]; | |
| sugg.innerHTML=''; | |
| qs.forEach(q=>{ | |
| const c=document.createElement('button'); c.className='chip'; c.textContent=q; | |
| c.onclick=()=>{ input.value=q; input.focus(); closeSidebar(); sendQuery(); }; | |
| sugg.appendChild(c); | |
| }); | |
| } | |
| input.addEventListener('input',()=>{ input.style.height='auto'; input.style.height=Math.min(input.scrollHeight,120)+'px'; }); | |
| input.addEventListener('keydown',e=>{ if(e.key==='Enter'&&!e.shiftKey){ e.preventDefault(); if(!isLoading&&sessionId&&input.value.trim()) sendQuery(); } }); | |
| sendBtn.addEventListener('click',()=>{ if(!isLoading&&sessionId&&input.value.trim()) sendQuery(); }); | |
| async function sendQuery(){ | |
| const q=input.value.trim(); if(!q||!sessionId) return; | |
| addMsg('user',escHtml(q)); | |
| input.value=''; input.style.height='auto'; | |
| isLoading=true; sendBtn.disabled=true; | |
| const thinkId=addThink(); | |
| try{ | |
| const r=await fetch('/query',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({session_id:sessionId,question:q})}); | |
| const d=await r.json(); removeThink(thinkId); | |
| if(!r.ok) throw new Error(d.detail); | |
| addMsg('bot',buildResult(d.sql,d.results)); | |
| }catch(e){ | |
| removeThink(thinkId); | |
| addMsg('bot',`<div class="err-box">⚠ ${escHtml(e.message)}</div>`); | |
| } | |
| isLoading=false; if(sessionId) sendBtn.disabled=false; | |
| } | |
| function hlSQL(raw){ | |
| const kw=/\b(SELECT|FROM|WHERE|AND|OR|NOT|IN|IS|NULL|LIKE|ORDER\s+BY|GROUP\s+BY|HAVING|LIMIT|DISTINCT|AS|JOIN|LEFT|RIGHT|INNER|ON|UNION|ALL|BY|ASC|DESC|CASE|WHEN|THEN|ELSE|END)\b/gi; | |
| const fn=/\b(COUNT|SUM|AVG|MAX|MIN|ROUND|FLOOR|CEIL|ABS|LENGTH|UPPER|LOWER|TRIM|SUBSTR|CAST|IFNULL|COALESCE)\b/gi; | |
| return escHtml(raw) | |
| .replace(/('(?:[^'\\]|\\.)*')/g,m=>`<span class="st">${m}</span>`) | |
| .replace(/\b(\d+(?:\.\d+)?)\b/g,m=>`<span class="nm">${m}</span>`) | |
| .replace(kw,m=>`<span class="kw">${m}</span>`) | |
| .replace(fn,m=>`<span class="fn">${m}</span>`) | |
| .replace(/(?<![<\w])([=<>!]+)(?![>\w])/g,m=>`<span class="op">${m}</span>`); | |
| } | |
| function buildResult(sql,results){ | |
| let html=`<div class="sql-block"><div class="sql-hdr"><div class="sql-dots"><span class="sd sd-r"></span><span class="sd sd-y"></span><span class="sd sd-g"></span><span class="sql-lang">SQL</span></div><button class="copy-btn" onclick="copySql(this)">Copy</button></div><div class="sql-code">${hlSQL(sql)}</div></div>`; | |
| if(!results||results.length===0) return html+`<div style="margin-top:6px;font-size:11px;color:var(--muted);">No rows returned.</div>`; | |
| const cols=Object.keys(results[0]); | |
| let t=`<div class="result-wrap"><table><thead><tr>${cols.map(c=>`<th>${escHtml(c)}</th>`).join('')}</tr></thead><tbody>`; | |
| results.forEach(row=>{ t+=`<tr>${cols.map(c=>`<td>${row[c]===null?'<span style="color:var(--muted)">null</span>':escHtml(String(row[c]))}</td>`).join('')}</tr>`; }); | |
| t+=`</tbody></table></div><div class="rc">${results.length.toLocaleString()} row${results.length!==1?'s':''} returned</div>`; | |
| return html+t; | |
| } | |
| window.copySql=function(btn){ | |
| const code=btn.closest('.sql-block').querySelector('.sql-code').textContent; | |
| navigator.clipboard?.writeText(code).then(()=>{ btn.textContent='✓'; setTimeout(()=>btn.textContent='Copy',1500); }); | |
| }; | |
| function addMsg(role,html){ | |
| const now=new Date().toLocaleTimeString([],{hour:'2-digit',minute:'2-digit'}); | |
| const d=document.createElement('div'); d.className=`msg ${role}`; | |
| d.innerHTML=`<div class="msg-meta">${role==='user'?'You':'QueryMind'} · ${now}</div><div class="bubble">${html}</div>`; | |
| chat.appendChild(d); chat.scrollTop=chat.scrollHeight; | |
| } | |
| let tc=0; | |
| function addThink(){ const id='t'+(++tc); const d=document.createElement('div'); d.id=id; d.className='msg bot'; d.innerHTML=`<div class="msg-meta">Bot</div><div class="thinking"><span></span><span></span><span></span></div>`; chat.appendChild(d); chat.scrollTop=chat.scrollHeight; return id; } | |
| function removeThink(id){ const el=document.getElementById(id); if(el) el.remove(); } | |
| function escHtml(s){ return String(s).replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"'); } | |
| </script> | |
| </body> | |
| </html> | |