Staging

Dockerfile

@@ -16,6 +16,7 @@ COPY --from=python-base /usr/local /usr/local
 # Install netcat for wait loop in start.sh
 RUN apt-get update && apt-get install -y \
     netcat-openbsd \
+    git \
     && rm -rf /var/lib/apt/lists/* \
     && ln -sf /usr/local/bin/python3.12 /usr/bin/python3 \
     && ln -sf /usr/local/bin/python3.12 /usr/bin/python

README.md

@@ -8,7 +8,7 @@
 
 QueryWeaver is an open-source Text2SQL tool that converts plain-English questions into SQL using graph-powered schema understanding. It helps you ask databases natural-language questions and returns SQL and results.
 
-![Screenshot](https://github.com/user-attachments/assets/a0be7bbd-0c99-4399-a302-2b9f7b419dd2)
+![Screenshot](https://github.com/user-attachments/assets/e5a577a0-c157-44ff-9aeb-3522a757b536)
 
 TL;DR
 - Try quickly with Docker: `docker run -p 5000:5000 -it falkordb/queryweaver`

app/public/css/buttons.css

@@ -1,7 +1,7 @@
 /* Button Styles and Interactive Elements */
 
 .input-button {
-  background: var(--falkor-quaternary);
+  background: var(--falkor-primary);
   cursor: pointer;
   transition: all 0.2s ease;
   border: none;
@@ -48,7 +48,7 @@
 
 .action-button:hover {
   box-shadow: 0 4px 12px rgba(0,0,0,0.25);
-  background: var(--falkor-accent);
+  background: var(--falkor-primary);
   transform: translateY(-1px);
 }
 
@@ -179,7 +179,7 @@
 
 #github-link-btn:hover {
   box-shadow: 0 4px 12px rgba(0,0,0,0.25);
-  background: var(--falkor-accent);
+  background: var(--falkor-primary);
   transform: translateY(-1px);
   color: var(--text-primary);
 }

app/public/css/chat-components.css

@@ -117,8 +117,8 @@
 }
 
 .final-result-message-container::before {
-  background: color-mix(in srgb, var(--accent-green) 40%, transparent);
-  border: 1px solid var(--accent-green);
+  background: color-mix(in srgb, var(--falkor-primary) 40%, transparent);
+  border: 1px solid var(--falkor-primary);
 }
 
 .loading-message-container::before {
@@ -168,8 +168,8 @@
 }
 
 .final-result-message {
-  background: color-mix(in srgb, var(--accent-green) 15%, transparent);
-  border-left: 3px solid var(--accent-green);
+  background: color-mix(in srgb, var(--falkor-primary) 15%, transparent);
+  border-left: 3px solid var(--falkor-primary);
 }
 
 .chat-input {

app/public/css/layout.css

@@ -9,7 +9,7 @@
 }
 
 .logo {
-  height: 240px;
+  height: 6rem;
   width: auto;
 }
 

app/public/css/menu.css

@@ -405,7 +405,7 @@
 
 .graph-options {
   position: absolute;
-  top: calc(100% + 20px);
+  top: 100%;
   left: -20%;
   right: -20%;
   background: var(--falkor-secondary);

app/templates/components/chat_header.j2

@@ -1,6 +1,6 @@
 {# Chat header with logo, title, and action buttons #}
 <div class="chat-header">
-    <img src="/static/icons/queryweaver.webp" alt="Chat Logo" class="logo">
+    <img src="/static/icons/queryweaver.svg" alt="Chat Logo" class="logo">
     <h1>Natural Language to SQL Generator</h1>
     <div class="button-container">
         <button class="action-button" id="graph-select-refresh">
@@ -10,8 +10,8 @@
             </svg>
         </button>
         <div id="graph-custom-dropdown" class="graph-custom-dropdown">
-            <div id="graph-selected" class="graph-selected dropdown-selected" title="No database">
-                <span class="dropdown-text">No database</span>
+            <div id="graph-selected" class="graph-selected dropdown-selected" title="Select Database">
+                <span class="dropdown-text">Select database</span>
                 <span class="dropdown-arrow">▼</span>
             </div>
             <div id="graph-options" class="graph-options dropdown-options" aria-hidden="true"></div>

app/templates/components/chat_input.j2

@@ -3,10 +3,24 @@
     <div class="input-container" id="input-container">
         <input type="text" id="message-input" placeholder="Describe the SQL query you want..." />
         <button class="input-button" title="Submit" id="submit-button">
-            <img src="/static/icons/submit.svg" alt="Submit">
+            <svg width="54" height="54" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <!-- Rounded rectangle background -->
+                <rect x="2" y="2" width="50" height="50" rx="6" ry="6" fill="none" />
+                <!-- Submit arrow icon -->
+                <path
+                    d="M24.332 26.4667V35C24.332 35.7555 24.588 36.3893 25.1 36.9013C25.612 37.4133 26.2449 37.6684 26.9987 37.6667C27.7525 37.6649 28.3863 37.4089 28.9 36.8987C29.4138 36.3884 29.6689 35.7555 29.6654 35V26.4667L32.0654 28.8666C32.5543 29.3555 33.1765 29.6 33.932 29.6C34.6876 29.6 35.3098 29.3555 35.7987 28.8666C36.2876 28.3778 36.532 27.7555 36.532 27C36.532 26.2444 36.2876 25.6222 35.7987 25.1333L28.8654 18.2C28.332 17.6666 27.7098 17.4 26.9987 17.4C26.2876 17.4 25.6654 17.6666 25.132 18.2L18.1987 25.1333C17.7098 25.6222 17.4654 26.2444 17.4654 27C17.4654 27.7555 17.7098 28.3778 18.1987 28.8666C18.6876 29.3555 19.3098 29.6 20.0654 29.6C20.8209 29.6 21.4431 29.3555 21.932 28.8666L24.332 26.4667Z"
+                    fill="white" />
+            </svg>
         </button>
         <button class="input-button" title="Pause" id="pause-button">
-            <img src="/static/icons/pause.svg" alt="Pause">
+            <svg width="54" height="54" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <!-- Rounded rectangle background -->
+                <rect x="2" y="2" width="50" height="50" rx="6" ry="6" fill="none" />
+                <!-- Pause bars -->
+                <rect x="18.6667" y="16" width="5.3333" height="21.3333" fill="white" />
+                <rect x="29.3333" y="16" width="5.3333" height="21.3333" fill="white" />
+            </svg>
+
         </button>
         <button id="reset-button" class="action-button" title="Reset session">
             <svg width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">

app/ts/app.ts

@@ -18,10 +18,10 @@ import {
   handleWindowResize,
   setupCustomDropdown,
 } from "./modules/ui";
-import { setupAuthenticationModal, setupDatabaseModal } from './modules/modals';
-import { resizeGraph, showGraph } from './modules/schema';
-import { setupTokenManagement } from './modules/tokens';
-import { initLeftToolbar } from './modules/left_toolbar';
+import { setupAuthenticationModal, setupDatabaseModal } from "./modules/modals";
+import { resizeGraph, showGraph } from "./modules/schema";
+import { setupTokenManagement } from "./modules/tokens";
+import { initLeftToolbar } from "./modules/left_toolbar";
 
 async function loadAndShowGraph(selected: string | undefined) {
   if (!selected) return;
@@ -84,11 +84,7 @@ function setupEventListeners() {
 
     if (!refreshButton) return;
 
-    if (
-      !selected ||
-      selected === "Select database" ||
-      selected === "No databases"
-    )
+    if (!selected || selected === "Select Database")
       return alert("Please select a database to refresh");
 
     refreshButton.classList.add("loading");

app/ts/modules/chat.ts

@@ -11,7 +11,7 @@ export async function sendMessage() {
     if (!message) return;
 
     const selectedValue = getSelectedGraph() || '';
-    if (!selectedValue) {
+    if (!selectedValue || selectedValue === "Select Database") {
         addMessage('Please select a graph from the dropdown before sending a message.', "followup");
         return;
     }

app/ts/modules/graphs.ts

@@ -44,7 +44,6 @@ export function loadGraphs() {
       return response.json();
     })
     .then((data: string[]) => {
-      console.log("Graphs loaded:", data);
       if (!data || data.length === 0) {
         // Clear custom dropdown and show no graphs state
         clearGraphOptions();
@@ -64,7 +63,7 @@ export function loadGraphs() {
         if (selectedLabel) {
           const dropdownText = selectedLabel.querySelector(".dropdown-text");
           if (dropdownText) {
-            dropdownText.textContent = "No Databases";
+            dropdownText.textContent = "Select Database";
           }
         }
         return;