dis-chat

app/templates/components/chat_input.j2

@@ -1,7 +1,7 @@
 {# Chat input area with text input and action buttons #}
 <div class="chat-input">
     <div class="input-container" id="input-container">
-        <textarea type="text" id="message-input" placeholder="Describe the SQL query you want..." rows="1"></textarea>
+        <textarea type="text" id="message-input" placeholder="Please select a database first..." rows="1" disabled></textarea>
         <button class="input-button" title="Submit" id="submit-button" disabled>
             <svg width="54" height="54" viewBox="0 0 54 54" xmlns="http://www.w3.org/2000/svg">
                 <!-- Rounded rectangle background -->

app/ts/app.ts

@@ -53,6 +53,30 @@ async function loadAndShowGraph(selected: string | undefined) {
   }
 }
 
+function updateInputState() {
+  const submitButton = DOM.submitButton;
+  const messageInput = DOM.messageInput;
+  if (!submitButton || !messageInput) return;
+
+  const selected = getSelectedGraph();
+  const isDatabaseSelected = selected && selected !== "Select Database";
+
+  if (isDatabaseSelected) {
+    messageInput.disabled = false;
+    messageInput.placeholder = "Describe the SQL query you want...";
+    // Enable submit button only if there's also text in the input
+    if (messageInput.value.trim()) {
+      submitButton.disabled = false;
+    } else {
+      submitButton.disabled = true;
+    }
+  } else {
+    messageInput.disabled = true;
+    messageInput.placeholder = "Please select a database first...";
+    submitButton.disabled = true;
+  }
+}
+
 function initializeApp() {
   initChat();
   setupEventListeners();
@@ -71,15 +95,7 @@ function setupEventListeners() {
   });
 
   DOM.messageInput?.addEventListener("input", () => {
-    const submitButton = DOM.submitButton;
-    const messageInput = DOM.messageInput;
-    if (!submitButton || !messageInput) return;
-    const selected = getSelectedGraph();
-    if (messageInput.value && selected && selected !== "Select Database") {
-      submitButton.disabled = false;
-    } else {
-      submitButton.disabled = true;
-    }
+    updateInputState();
   });
 
   DOM.menuButton?.addEventListener("click", () =>
@@ -245,6 +261,10 @@ function setupUIComponents() {
 
 function loadInitialData() {
   loadGraphs();
+  updateInputState(); // Set initial input state based on database selection
 }
 
+// Expose updateInputState globally so other modules can use it
+(window as any).updateInputState = updateInputState;
+
 document.addEventListener("DOMContentLoaded", initializeApp);

app/ts/modules/graphs.ts

@@ -87,6 +87,9 @@ export function loadGraphs() {
               // onSelect
               setSelectedGraph(name);
               initChat();
+              if (typeof (window as any).updateInputState === 'function') {
+                (window as any).updateInputState();
+              }
             },
             async (name) => {
               // onDelete
@@ -216,4 +219,7 @@ export function handleFileUpload(event: Event) {
 
 export function onGraphChange() {
   initChat();
+  if (typeof (window as any).updateInputState === 'function') {
+    (window as any).updateInputState();
+  }
 }