Fix #158 fix query result

.env.example

@@ -74,9 +74,8 @@ FALKORDB_URL=redis://localhost:6379/0  # REQUIRED - change to your FalkorDB URL
 # GITHUB_CLIENT_ID=your_github_client_id
 # GITHUB_CLIENT_SECRET=your_github_client_secret
 
-# If your OAuth app uses a different base URL than the request base (e.g., using 127.0.0.1 vs localhost)
-# you can override the base used for building callback URLs. Example:
-# OAUTH_BASE_URL=http://localhost:5000
+# FalkorDB configuration
+FALKORDB_URL=redis://localhost:6379
 
 # -----------------------------
 # Email Configuration (optional - for sending invitation emails)

app/public/css/menu.css

@@ -116,6 +116,24 @@
   border-color: var(--text-secondary);
 }
 
+#query-final-result-table {
+  border-collapse: collapse;
+}
+
+#query-final-result-table th,
+#query-final-result-table td {
+  padding: 4px 8px;
+}
+
+#query-final-result-table th:not(:first-child),
+#query-final-result-table td:not(:first-child) {
+  border-left: 1px solid var(--text-primary);
+}
+
+#query-final-result-table td {
+  border-top: 1px solid var(--text-primary);
+}
+
 #graph-select {
   height: 100%;
   padding: 8px 12px;
@@ -143,7 +161,7 @@
 #schema-content {
   position: relative;
   width: 100%;
-  height: 100%; 
+  height: 100%;
 }
 
 #schema-controls {

app/ts/app.ts

@@ -22,6 +22,7 @@ import { setupAuthenticationModal, setupDatabaseModal } from './modules/modals';
 import { resizeGraph, showGraph } from './modules/schema';
 import { setupTokenManagement } from './modules/tokens';
 import { initLeftToolbar } from './modules/left_toolbar';
+import { resizeGraph } from './modules/schema';
 
 async function loadAndShowGraph(selected: string | undefined) {
     if (!selected) return;

app/ts/modules/chat.ts

@@ -12,23 +12,23 @@ export async function sendMessage() {
 
     const selectedValue = getSelectedGraph() || '';
     if (!selectedValue) {
-        addMessage('Please select a graph from the dropdown before sending a message.', false, true);
+        addMessage('Please select a graph from the dropdown before sending a message.', "followup");
         return;
     }
 
     if (state.currentRequestController) {
         state.currentRequestController.abort();
     }
 
-    addMessage(message, true, false, false, false, (window as any).currentUser || null);
+    addMessage(message, "user", (window as any).currentUser || null);
     if (DOM.messageInput) DOM.messageInput.value = '';
 
     // Show typing indicator
     DOM.inputContainer?.classList.add('loading');
     if (DOM.submitButton) DOM.submitButton.style.display = 'none';
     if (DOM.pauseButton) DOM.pauseButton.style.display = 'block';
     if (DOM.newChatButton) DOM.newChatButton.disabled = true;
-    addMessage('', false, false, false, true);
+    addMessage('', "loading");
 
     [DOM.confValue, DOM.expValue, DOM.missValue, DOM.ambValue].forEach((element) => {
         if (element) element.innerHTML = '';
@@ -62,7 +62,7 @@ export async function sendMessage() {
         } else {
             console.error('Error:', error);
             resetUIState();
-            addMessage('Sorry, there was an error processing your message: ' + (error.message || String(error)), false);
+            addMessage('Sorry, there was an error processing your message: ' + (error.message || String(error)));
         }
         state.currentRequestController = null;
     }
@@ -80,9 +80,9 @@ async function processStreamingResponse(response: Response) {
             if (buffer.trim()) {
                 try {
                     const step = JSON.parse(buffer);
-                    addMessage(step.message || JSON.stringify(step), false);
+                    addMessage(step.message || JSON.stringify(step));
                 } catch {
-                    addMessage(buffer, false);
+                    addMessage(buffer);
                 }
             }
             break;
@@ -102,7 +102,7 @@ async function processStreamingResponse(response: Response) {
                 const step = JSON.parse(message);
                 handleStreamMessage(step);
             } catch {
-                addMessage('Failed: ' + message, false);
+                addMessage('Failed: ' + message);
             }
         }
     }
@@ -115,7 +115,7 @@ function handleStreamMessage(step: any) {
     }
 
     if (step.type === 'reasoning_step') {
-        addMessage(step.message, false);
+        addMessage(step.message);
         moveLoadingMessageToBottom();
     } else if (step.type === 'final_result') {
         handleFinalResult(step);
@@ -124,13 +124,13 @@ function handleStreamMessage(step: any) {
     } else if (step.type === 'query_result') {
         handleQueryResult(step);
     } else if (step.type === 'ai_response') {
-        addMessage(step.message, false, false, true);
+        addMessage(step.message, "final-result");
     } else if (step.type === 'destructive_confirmation') {
         addDestructiveConfirmationMessage(step);
     } else if (step.type === 'operation_cancelled') {
-        addMessage(step.message, false, true);
+        addMessage(step.message, "followup");
     } else {
-        addMessage(step.message || JSON.stringify(step), false);
+        addMessage(step.message || JSON.stringify(step));
     }
 
     if (step.type !== 'reasoning_step') {
@@ -166,9 +166,9 @@ function handleFinalResult(step: any) {
 
     const message = step.message || JSON.stringify(step.data, null, 2);
     if (step.is_valid) {
-        addMessage(message, false, false, true);
+        addMessage(message, "final-result");
     } else {
-        addMessage("Sorry, we couldn't generate a valid SQL query. Please try rephrasing your question or add more details. For help, check the explanation window.", false, true);
+        addMessage("Sorry, we couldn't generate a valid SQL query. Please try rephrasing your question or add more details. For help, check the explanation window.", "followup");
     }
 }
 
@@ -177,14 +177,15 @@ function handleFollowupQuestions(step: any) {
     if (DOM.confValue) DOM.confValue.textContent = 'N/A';
     if (DOM.missValue) DOM.missValue.textContent = 'N/A';
     if (DOM.ambValue) DOM.ambValue.textContent = 'N/A';
-    addMessage(step.message, false, true);
+    addMessage(step.message, "followup");
 }
 
 function handleQueryResult(step: any) {
     if (step.data) {
-        addMessage(`Query Result: ${JSON.stringify(step.data)}`, false, false, true);
+        console.log(step.data);
+        addMessage("Query Result", "query-final-result", null, step.data);
     } else {
-        addMessage('No results found for the query.', false);
+        addMessage('No results found for the query.');
     }
 }
 
@@ -202,7 +203,7 @@ export function pauseRequest() {
         state.currentRequestController = null;
 
         resetUIState();
-        addMessage('Request was paused by user.', false, true);
+        addMessage('Request was paused by user.', "followup");
     }
 }
 
@@ -255,10 +256,10 @@ export async function handleDestructiveConfirmation(confirmation: string, sqlQue
     if (DOM.messageInput) DOM.messageInput.disabled = false;
     if (DOM.submitButton) DOM.submitButton.disabled = false;
 
-    addMessage(`User choice: ${confirmation}`, true, false, false, false, (window as any).currentUser || null);
+    addMessage(`User choice: ${confirmation}`, "user", (window as any).currentUser || null);
 
     if (confirmation === 'CANCEL') {
-        addMessage('Operation cancelled. The destructive SQL query was not executed.', false, true);
+        addMessage('Operation cancelled. The destructive SQL query was not executed.', "followup");
         return;
     }
 
@@ -282,7 +283,7 @@ export async function handleDestructiveConfirmation(confirmation: string, sqlQue
         await processStreamingResponse(response);
     } catch (error: any) {
         console.error('Error:', error);
-        addMessage('Sorry, there was an error processing the confirmation: ' + (error.message || String(error)), false);
+        addMessage('Sorry, there was an error processing the confirmation: ' + (error.message || String(error)));
     }
 }