prazy1208/text2sql
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8" />5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />6 <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />7 <title>Text2SQL — Multi-Agent Pipeline Demo</title>8 <link rel="stylesheet" href="styles.css?v=21" />9</head>10<body>11 <div class="app layout">12 <header class="header header--compact">13 <div class="header-brand">14 <h1>Text2SQL</h1>15 <p class="tagline">Natural Language to SQL — Multi-Agent Pipeline Demo</p>16 </div>17 <div class="header-badge">PyCon 2026</div>18 </header>19 20 <main class="main main--chatbot">21 <div class="main-layout">22 <aside class="chat-sidebar" aria-label="Chats">23 <div class="chat-sidebar-header">24 <button type="button" id="new-chat-btn" class="btn btn-primary btn-sidebar-new">New chat</button>25 </div>26 <div id="chat-list" class="chat-list" role="list"></div>27 </aside>28 29 <div class="main-column">30 <div id="chat-scroll" class="chat-scroll">31 <div id="output-placeholder" class="output-placeholder">32 <div id="welcome-panel" class="welcome-panel"></div>33 </div>34 <div id="output-content" class="output-content hidden">35 <div id="chat-thread" class="chat-thread"></div>36 <div id="intent-actions" class="intent-actions hidden">37 <p id="intent-actions-label" class="intent-actions-label">Is this understanding correct?</p>38 <div class="intent-actions-buttons">39 <button type="button" id="intent-yes-btn" class="btn btn-secondary">Yes</button>40 <button type="button" id="intent-no-btn" class="btn btn-secondary btn-secondary-muted">No</button>41 </div>42 </div>43 </div>44 </div>45 46 <div id="pipeline-progress" class="pipeline-progress hidden">47 <div class="pipeline-steps">48 <div class="pipeline-step" data-step="intent"><span class="pipeline-step-dot"></span><span class="pipeline-step-label">Intent</span></div>49 <div class="pipeline-connector"></div>50 <div class="pipeline-step" data-step="tables"><span class="pipeline-step-dot"></span><span class="pipeline-step-label">Tables</span></div>51 <div class="pipeline-connector"></div>52 <div class="pipeline-step" data-step="columns"><span class="pipeline-step-dot"></span><span class="pipeline-step-label">Columns</span></div>53 <div class="pipeline-connector"></div>54 <div class="pipeline-step" data-step="fewshot"><span class="pipeline-step-dot"></span><span class="pipeline-step-label">Few-Shot</span></div>55 <div class="pipeline-connector"></div>56 <div class="pipeline-step" data-step="sql"><span class="pipeline-step-dot"></span><span class="pipeline-step-label">SQL</span></div>57 </div>58 </div>59 60 <div id="output-error" class="output-error output-error--composer hidden"></div>61 62 <form id="query-form" class="composer" autocomplete="off">63 <div class="composer-row">64 <div id="domain-selector" class="domain-selector" role="radiogroup" aria-label="Select domain">65 <!-- Domain buttons rendered by JS -->66 </div>67 <label class="sr-only" for="use-case">Use case</label>68 <select id="use-case" class="composer-use-case hidden" aria-label="Use case">69 <option value="">Select Domain</option>70 </select>71 <label class="sr-only" for="message">Question</label>72 <textarea73 id="message"74 class="composer-message"75 rows="1"76 placeholder="Ask a question about your data..."77 aria-label="Your question"78 ></textarea>79 <button type="submit" class="btn btn-primary composer-send" id="submit-btn">80 <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>81 </button>82 </div>83 <p id="composer-status" class="composer-status hidden" role="status" aria-live="polite"></p>84 </form>85 </div>86 </div>87 </main>88 </div>89 90 <div91 id="delete-confirm-modal"92 class="modal-overlay hidden"93 role="dialog"94 aria-modal="true"95 aria-labelledby="delete-confirm-title"96 aria-hidden="true"97 >98 <div class="modal-dialog">99 <h2 id="delete-confirm-title" class="modal-title">Delete this chat?</h2>100 <p class="modal-body">This removes the conversation from your history. It cannot be undone.</p>101 <div class="modal-actions">102 <button type="button" id="delete-confirm-cancel" class="btn btn-modal-secondary">Cancel</button>103 <button type="button" id="delete-confirm-delete" class="btn btn-danger">Delete</button>104 </div>105 </div>106 </div>107 108 <script src="app.js?v=21"></script>109</body>110</html>111