state-and-stm

Author: galshubeli

app/src/App.tsx

@@ -4,6 +4,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import { AuthProvider } from "@/contexts/AuthContext";
 import { DatabaseProvider } from "@/contexts/DatabaseContext";
+import { ChatProvider } from "@/contexts/ChatContext";
 import Index from "./pages/Index";
 import Settings from "./pages/Settings";
 import NotFound from "./pages/NotFound";
@@ -14,17 +15,19 @@ const App = () => (
   <QueryClientProvider client={queryClient}>
     <AuthProvider>
       <DatabaseProvider>
-        <TooltipProvider>
-          <Toaster />
-          <BrowserRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
-            <Routes>
-              <Route path="/" element={<Index />} />
-              <Route path="/settings" element={<Settings />} />
-              {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
-              <Route path="*" element={<NotFound />} />
-            </Routes>
-          </BrowserRouter>
-        </TooltipProvider>
+        <ChatProvider>
+          <TooltipProvider>
+            <Toaster />
+            <BrowserRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
+              <Routes>
+                <Route path="/" element={<Index />} />
+                <Route path="/settings" element={<Settings />} />
+                {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
+                <Route path="*" element={<NotFound />} />
+              </Routes>
+            </BrowserRouter>
+          </TooltipProvider>
+        </ChatProvider>
       </DatabaseProvider>
     </AuthProvider>
   </QueryClientProvider>

app/src/components/chat/ChatInterface.tsx

@@ -1,15 +1,15 @@
-import { useState, useEffect, useRef } from "react";
+import { useEffect, useRef } from "react";
 import { cn } from "@/lib/utils";
 import { useToast } from "@/components/ui/use-toast";
 import { useDatabase } from "@/contexts/DatabaseContext";
 import { useAuth } from "@/contexts/AuthContext";
+import { useChat } from "@/contexts/ChatContext";
 import LoadingSpinner from "@/components/ui/loading-spinner";
 import { Skeleton } from "@/components/ui/skeleton";
 import ChatMessage from "./ChatMessage";
 import QueryInput from "./QueryInput";
 import SuggestionCards from "../SuggestionCards";
 import { ChatService } from "@/services/chat";
-import type { ConversationMessage } from "@/types/api";
 
 interface ChatMessageData {
   id: string;
@@ -53,10 +53,9 @@ const ChatInterface = ({
 }: ChatInterfaceProps) => {
   const { toast } = useToast();
   const { selectedGraph } = useDatabase();
-  const [isProcessing, setIsProcessing] = useState(false);
+  const { messages, setMessages, conversationHistory, isProcessing, setIsProcessing } = useChat();
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const chatContainerRef = useRef<HTMLDivElement>(null);
-  const conversationHistory = useRef<ConversationMessage[]>([]);
 
   // Auto-scroll to bottom function
   const scrollToBottom = () => {
@@ -80,36 +79,13 @@ const ChatInterface = ({
   );
 
   const { user } = useAuth();
-  const [messages, setMessages] = useState<ChatMessageData[]>([
-    {
-      id: "1",
-      type: "ai",
-      content: "Hello! Describe what you'd like to ask your database",
-      timestamp: new Date(),
-    }
-  ]);
 
   const suggestions = [
     "Show me five customers",
     "Show me the top customers by revenue", 
     "What are the pending orders?"
   ];
 
-  // Reset conversation when the selected graph changes to avoid leaking
-  // conversation history between different databases.
-  useEffect(() => {
-    // Clear in-memory conversation history and reset messages to the greeting
-    conversationHistory.current = [];
-    setMessages([
-      {
-        id: "1",
-        type: "ai",
-        content: "Hello! Describe what you'd like to ask your database",
-        timestamp: new Date(),
-      }
-    ]);
-  }, [selectedGraph?.id]);
-
   // Scroll to bottom whenever messages change
   useEffect(() => {
     scrollToBottom();

app/src/contexts/ChatContext.tsx

@@ -0,0 +1,99 @@
+import React, { createContext, useContext, useState, useRef, useCallback, useEffect } from 'react';
+import { useDatabase } from '@/contexts/DatabaseContext';
+import type { ConversationMessage } from '@/types/api';
+
+interface ChatMessageData {
+  id: string;
+  type: 'user' | 'ai' | 'ai-steps' | 'sql-query' | 'query-result' | 'confirmation';
+  content: string;
+  steps?: Array<{
+    icon: 'search' | 'database' | 'code' | 'message';
+    text: string;
+  }>;
+  queryData?: any[];
+  analysisInfo?: {
+    confidence?: number;
+    missing?: string;
+    ambiguities?: string;
+    explanation?: string;
+    isValid?: boolean;
+  };
+  confirmationData?: {
+    sqlQuery: string;
+    operationType: string;
+    message: string;
+    chatHistory: string[];
+  };
+  timestamp: Date;
+}
+
+interface ChatContextType {
+  messages: ChatMessageData[];
+  setMessages: React.Dispatch<React.SetStateAction<ChatMessageData[]>>;
+  conversationHistory: React.MutableRefObject<ConversationMessage[]>;
+  isProcessing: boolean;
+  setIsProcessing: React.Dispatch<React.SetStateAction<boolean>>;
+  resetChat: () => void;
+}
+
+const initialMessage: ChatMessageData = {
+  id: "1",
+  type: "ai",
+  content: "Hello! Describe what you'd like to ask your database",
+  timestamp: new Date(),
+};
+
+const ChatContext = createContext<ChatContextType | undefined>(undefined);
+
+export const ChatProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const { selectedGraph } = useDatabase();
+  const [messages, setMessages] = useState<ChatMessageData[]>([initialMessage]);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const conversationHistory = useRef<ConversationMessage[]>([]);
+  const previousGraphIdRef = useRef<string | undefined>(undefined);
+
+  // Reset conversation when the selected graph changes to avoid leaking
+  // conversation history between different databases.
+  useEffect(() => {
+    // Only reset if the graph actually changed (not on initial mount with same graph)
+    if (previousGraphIdRef.current !== undefined && previousGraphIdRef.current !== selectedGraph?.id) {
+      conversationHistory.current = [];
+      setMessages([{
+        ...initialMessage,
+        id: Date.now().toString(),
+        timestamp: new Date(),
+      }]);
+    }
+    previousGraphIdRef.current = selectedGraph?.id;
+  }, [selectedGraph?.id]);
+
+  const resetChat = useCallback(() => {
+    conversationHistory.current = [];
+    setMessages([{
+      ...initialMessage,
+      id: Date.now().toString(),
+      timestamp: new Date(),
+    }]);
+  }, []);
+
+  return (
+    <ChatContext.Provider value={{
+      messages,
+      setMessages,
+      conversationHistory,
+      isProcessing,
+      setIsProcessing,
+      resetChat,
+    }}>
+      {children}
+    </ChatContext.Provider>
+  );
+};
+
+export const useChat = () => {
+  const context = useContext(ChatContext);
+  if (context === undefined) {
+    throw new Error('useChat must be used within a ChatProvider');
+  }
+  return context;
+};

app/src/services/chat.ts

@@ -17,11 +17,19 @@ export class ChatService {
       const endpoint = `/graphs/${encodeURIComponent(request.database)}`;
 
       // Transform conversation history to backend format
-      // Backend expects: chat: ["user msg", "ai msg", "user msg", ...]
+      // Backend expects:
+      // - chat: list of user queries only (strings)
+      // - result: list of AI responses (strings)
       const chatHistory: string[] = [];
+      const resultHistory: string[] = [];
+      
       if (request.history && request.history.length > 0) {
         for (const msg of request.history) {
-          chatHistory.push(msg.content);
+          if (msg.role === 'user') {
+            chatHistory.push(msg.content);
+          } else if (msg.role === 'assistant') {
+            resultHistory.push(msg.content);
+          }
         }
       }
       // Add current query to the chat array
@@ -34,9 +42,7 @@ export class ChatService {
         },
         body: JSON.stringify({
           chat: chatHistory,
-          // Optional fields the backend supports:
-          // result: [],  // Previous results if needed
-          // instructions: ""  // Additional instructions if needed
+          result: resultHistory.length > 0 ? resultHistory : undefined,
           ...(request.use_user_rules !== undefined && {
             use_user_rules: request.use_user_rules
           }),