feat(supabase): add credentials handling for Supabase API keys and URL

This commit introduces the ability to fetch and store Supabase API keys and URL credentials when a project is selected. This enables the application to dynamically configure the Supabase connection environment variables, improving the integration with Supabase services. The changes include updates to the Supabase connection logic, new API endpoints, and modifications to the chat and prompt components to utilize the new credentials.

app/lib/hooks/useSupabaseConnection.ts

@@ -2,21 +2,39 @@ import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 import { useStore } from '@nanostores/react';
 import { logStore } from '~/lib/stores/logs';
-import { supabaseConnection, isConnecting, isFetchingStats, updateSupabaseConnection } from '~/lib/stores/supabase';
+import {
+  supabaseConnection,
+  isConnecting,
+  isFetchingStats,
+  isFetchingApiKeys,
+  updateSupabaseConnection,
+  fetchProjectApiKeys,
+} from '~/lib/stores/supabase';
 
 export function useSupabaseConnection() {
   const connection = useStore(supabaseConnection);
   const connecting = useStore(isConnecting);
   const fetchingStats = useStore(isFetchingStats);
+  const fetchingApiKeys = useStore(isFetchingApiKeys);
   const [isProjectsExpanded, setIsProjectsExpanded] = useState(false);
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
 
   useEffect(() => {
     const savedConnection = localStorage.getItem('supabase_connection');
+    const savedCredentials = localStorage.getItem('supabaseCredentials');
 
     if (savedConnection) {
       const parsed = JSON.parse(savedConnection);
+
+      if (savedCredentials && !parsed.credentials) {
+        parsed.credentials = JSON.parse(savedCredentials);
+      }
+
       updateSupabaseConnection(parsed);
+
+      if (parsed.token && parsed.selectedProjectId && !parsed.credentials) {
+        fetchProjectApiKeys(parsed.selectedProjectId, parsed.token).catch(console.error);
+      }
     }
   }, []);
 
@@ -50,7 +68,6 @@ export function useSupabaseConnection() {
 
       toast.success('Successfully connected to Supabase');
 
-      // Keep the dialog open and expand the projects section
       setIsProjectsExpanded(true);
 
       return true;
@@ -72,7 +89,7 @@ export function useSupabaseConnection() {
     setIsDropdownOpen(false);
   };
 
-  const selectProject = (projectId: string) => {
+  const selectProject = async (projectId: string) => {
     const currentState = supabaseConnection.get();
     let projectData = undefined;
 
@@ -85,7 +102,18 @@ export function useSupabaseConnection() {
       project: projectData,
     });
 
-    toast.success('Project selected successfully');
+    if (projectId && currentState.token) {
+      try {
+        await fetchProjectApiKeys(projectId, currentState.token);
+        toast.success('Project selected successfully');
+      } catch (error) {
+        console.error('Failed to fetch API keys:', error);
+        toast.error('Selected project but failed to fetch API keys');
+      }
+    } else {
+      toast.success('Project selected successfully');
+    }
+
     setIsDropdownOpen(false);
   };
 
@@ -97,6 +125,7 @@ export function useSupabaseConnection() {
     connection,
     connecting,
     fetchingStats,
+    fetchingApiKeys,
     isProjectsExpanded,
     setIsProjectsExpanded,
     isDropdownOpen,
@@ -107,5 +136,12 @@ export function useSupabaseConnection() {
     handleCreateProject,
     updateToken: (token: string) => updateSupabaseConnection({ ...connection, token }),
     isConnected: !!(connection.user && connection.token),
+    fetchProjectApiKeys: (projectId: string) => {
+      if (connection.token) {
+        return fetchProjectApiKeys(projectId, connection.token);
+      }
+
+      return Promise.reject(new Error('No token available'));
+    },
   };
 }