feat: added configurable LLM's

surfsense_web/app/dashboard/[search_space_id]/researcher/[chat_id]/page.tsx

@@ -19,7 +19,9 @@ import {
   FolderOpen,
   Upload,
   ChevronDown,
-  Filter
+  Filter,
+  Brain,
+  Zap
 } from 'lucide-react';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
@@ -42,6 +44,13 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { Badge } from "@/components/ui/badge";
 import { Skeleton } from "@/components/ui/skeleton";
 import {
@@ -62,6 +71,7 @@ import { MarkdownViewer } from '@/components/markdown-viewer';
 import { Logo } from '@/components/Logo';
 import { useSearchSourceConnectors } from '@/hooks';
 import { useDocuments } from '@/hooks/use-documents';
+import { useLLMConfigs, useLLMPreferences } from '@/hooks/use-llm-configs';
 
 interface SourceItem {
   id: number;
@@ -374,6 +384,8 @@ const ChatPage = () => {
   const [currentDate, setCurrentDate] = useState<string>('');
   const terminalMessagesRef = useRef<HTMLDivElement>(null);
   const { connectorSourceItems, isLoading: isLoadingConnectors } = useSearchSourceConnectors();
+  const { llmConfigs } = useLLMConfigs();
+  const { preferences, updatePreferences } = useLLMPreferences();
 
   const INITIAL_SOURCES_DISPLAY = 3;
 
@@ -457,6 +469,8 @@ const ChatPage = () => {
     setCurrentTime(new Date().toTimeString().split(' ')[0]);
   }, []);
 
+
+
   // Add this CSS to remove input shadow and improve the UI
   useEffect(() => {
     if (typeof document !== 'undefined') {
@@ -710,6 +724,7 @@ const ChatPage = () => {
     if (!input.trim() || status !== 'ready') return;
 
     // Validation: require at least one connector OR at least one document
+    // Note: Fast LLM selection updates user preferences automatically
     // if (selectedConnectors.length === 0 && selectedDocuments.length === 0) {
     //   alert("Please select at least one connector or document");
     //   return;
@@ -1569,6 +1584,75 @@ const ChatPage = () => {
                   onChange={setResearchMode}
                 />
               </div>
+
+              {/* Fast LLM Selector */}
+              <div className="h-8 min-w-0">
+                <Select
+                  value={preferences.fast_llm_id?.toString() || ""}
+                  onValueChange={(value) => {
+                    const llmId = value ? parseInt(value) : undefined;
+                    updatePreferences({ fast_llm_id: llmId });
+                  }}
+                >
+                  <SelectTrigger className="h-8 w-auto min-w-[120px] px-3 text-xs border-border bg-background hover:bg-muted/50">
+                    <div className="flex items-center gap-2">
+                      <Zap className="h-3 w-3 text-primary" />
+                      <SelectValue placeholder="Fast LLM">
+                        {preferences.fast_llm_id && (() => {
+                          const selectedConfig = llmConfigs.find(config => config.id === preferences.fast_llm_id);
+                          return selectedConfig ? (
+                            <div className="flex items-center gap-1">
+                              <span className="font-medium">{selectedConfig.provider}</span>
+                              <span className="text-muted-foreground">•</span>
+                              <span className="hidden sm:inline text-muted-foreground">{selectedConfig.name}</span>
+                            </div>
+                          ) : "Select LLM";
+                        })()}
+                      </SelectValue>
+                    </div>
+                  </SelectTrigger>
+                  <SelectContent align="end" className="w-[280px]">
+                    <div className="px-2 py-1.5 text-xs font-medium text-muted-foreground border-b">
+                      Answer LLM Selection
+                    </div>
+                    {llmConfigs.length === 0 ? (
+                      <div className="px-2 py-3 text-center text-sm text-muted-foreground">
+                        <Brain className="h-4 w-4 mx-auto mb-1 opacity-50" />
+                        <p>No LLM configurations found</p>
+                        <p className="text-xs">Configure models in Settings</p>
+                      </div>
+                    ) : (
+                      llmConfigs.map((config) => (
+                        <SelectItem key={config.id} value={config.id.toString()}>
+                          <div className="flex items-center justify-between w-full">
+                            <div className="flex items-center gap-3">
+                              <div className="flex h-8 w-8 items-center justify-center rounded-md bg-primary/10">
+                                <Brain className="h-4 w-4 text-primary" />
+                              </div>
+                              <div className="space-y-1">
+                                <div className="flex items-center gap-2">
+                                  <span className="font-medium text-sm">{config.name}</span>
+                                  <Badge variant="outline" className="text-xs">
+                                    {config.provider}
+                                  </Badge>
+                                </div>
+                                <p className="text-xs text-muted-foreground font-mono">
+                                  {config.model_name}
+                                </p>
+                              </div>
+                            </div>
+                            {preferences.fast_llm_id === config.id && (
+                              <div className="flex h-4 w-4 items-center justify-center rounded-full bg-primary">
+                                <div className="h-2 w-2 rounded-full bg-primary-foreground" />
+                              </div>
+                            )}
+                          </div>
+                        </SelectItem>
+                      ))
+                    )}
+                  </SelectContent>
+                </Select>
+              </div>
             </div>
           </div>
         </div>

surfsense_web/app/dashboard/layout.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { useLLMPreferences } from '@/hooks/use-llm-configs';
+import { Loader2 } from 'lucide-react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+
+interface DashboardLayoutProps {
+  children: React.ReactNode;
+}
+
+export default function DashboardLayout({ children }: DashboardLayoutProps) {
+  const router = useRouter();
+  const { loading, error, isOnboardingComplete } = useLLMPreferences();
+  const [isCheckingAuth, setIsCheckingAuth] = useState(true);
+
+  useEffect(() => {
+    // Check if user is authenticated
+    const token = localStorage.getItem('surfsense_bearer_token');
+    if (!token) {
+      router.push('/login');
+      return;
+    }
+    setIsCheckingAuth(false);
+  }, [router]);
+
+  useEffect(() => {
+    // Wait for preferences to load, then check if onboarding is complete
+    if (!loading && !error && !isCheckingAuth) {
+      if (!isOnboardingComplete()) {
+        router.push('/onboard');
+      }
+    }
+  }, [loading, error, isCheckingAuth, isOnboardingComplete, router]);
+
+  // Show loading screen while checking authentication or loading preferences
+  if (isCheckingAuth || loading) {
+    return (
+      <div className="flex flex-col items-center justify-center min-h-screen space-y-4">
+        <Card className="w-[350px] bg-background/60 backdrop-blur-sm">
+          <CardHeader className="pb-2">
+            <CardTitle className="text-xl font-medium">Loading Dashboard</CardTitle>
+            <CardDescription>Checking your configuration...</CardDescription>
+          </CardHeader>
+          <CardContent className="flex justify-center py-6">
+            <Loader2 className="h-12 w-12 text-primary animate-spin" />
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  // Show error screen if there's an error loading preferences
+  if (error) {
+    return (
+      <div className="flex flex-col items-center justify-center min-h-screen space-y-4">
+        <Card className="w-[400px] bg-background/60 backdrop-blur-sm border-destructive/20">
+          <CardHeader className="pb-2">
+            <CardTitle className="text-xl font-medium text-destructive">Configuration Error</CardTitle>
+            <CardDescription>Failed to load your LLM configuration</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <p className="text-sm text-muted-foreground">{error}</p>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  // Only render children if onboarding is complete
+  if (isOnboardingComplete()) {
+    return <>{children}</>;
+  }
+
+  // This should not be reached due to redirect, but just in case
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen space-y-4">
+      <Card className="w-[350px] bg-background/60 backdrop-blur-sm">
+        <CardHeader className="pb-2">
+          <CardTitle className="text-xl font-medium">Redirecting...</CardTitle>
+          <CardDescription>Taking you to complete your setup</CardDescription>
+        </CardHeader>
+        <CardContent className="flex justify-center py-6">
+          <Loader2 className="h-12 w-12 text-primary animate-spin" />
+        </CardContent>
+      </Card>
+    </div>
+  );
+} 

surfsense_web/app/onboard/page.tsx

@@ -0,0 +1,227 @@
+"use client";
+
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Progress } from '@/components/ui/progress';
+import { CheckCircle, ArrowRight, ArrowLeft, Bot, Sparkles, Zap, Brain } from 'lucide-react';
+import { Logo } from '@/components/Logo';
+import { useLLMConfigs, useLLMPreferences } from '@/hooks/use-llm-configs';
+import { AddProviderStep } from '@/components/onboard/add-provider-step';
+import { AssignRolesStep } from '@/components/onboard/assign-roles-step';
+import { CompletionStep } from '@/components/onboard/completion-step';
+
+const TOTAL_STEPS = 3;
+
+const OnboardPage = () => {
+  const router = useRouter();
+  const { llmConfigs, loading: configsLoading } = useLLMConfigs();
+  const { preferences, loading: preferencesLoading, isOnboardingComplete, refreshPreferences } = useLLMPreferences();
+  const [currentStep, setCurrentStep] = useState(1);
+  const [hasUserProgressed, setHasUserProgressed] = useState(false);
+
+  // Check if user is authenticated
+  useEffect(() => {
+    const token = localStorage.getItem('surfsense_bearer_token');
+    if (!token) {
+      router.push('/login');
+      return;
+    }
+  }, [router]);
+
+  // Track if user has progressed beyond step 1
+  useEffect(() => {
+    if (currentStep > 1) {
+      setHasUserProgressed(true);
+    }
+  }, [currentStep]);
+
+  // Redirect to dashboard if onboarding is already complete and user hasn't progressed (fresh page load)
+  useEffect(() => {
+    if (!preferencesLoading && isOnboardingComplete() && !hasUserProgressed) {
+      router.push('/dashboard');
+    }
+  }, [preferencesLoading, isOnboardingComplete, hasUserProgressed, router]);
+
+
+
+  const progress = (currentStep / TOTAL_STEPS) * 100;
+
+  const stepTitles = [
+    "Add LLM Provider",
+    "Assign LLM Roles", 
+    "Setup Complete"
+  ];
+
+  const stepDescriptions = [
+    "Configure your first model provider",
+    "Assign specific roles to your LLM configurations",
+    "You're all set to start using SurfSense!"
+  ];
+
+  const canProceedToStep2 = !configsLoading && llmConfigs.length > 0;
+  const canProceedToStep3 = !preferencesLoading && preferences.long_context_llm_id && preferences.fast_llm_id && preferences.strategic_llm_id;
+  
+
+
+  const handleNext = () => {
+    if (currentStep < TOTAL_STEPS) {
+      setCurrentStep(currentStep + 1);
+    }
+  };
+
+  const handlePrevious = () => {
+    if (currentStep > 1) {
+      setCurrentStep(currentStep - 1);
+    }
+  };
+
+  const handleComplete = () => {
+    router.push('/dashboard');
+  };
+
+  if (configsLoading || preferencesLoading) {
+    return (
+      <div className="flex flex-col items-center justify-center min-h-screen">
+        <Card className="w-[350px] bg-background/60 backdrop-blur-sm">
+          <CardContent className="flex flex-col items-center justify-center py-12">
+            <Bot className="h-12 w-12 text-primary animate-pulse mb-4" />
+            <p className="text-sm text-muted-foreground">Loading your configuration...</p>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-background via-background to-muted/20 flex items-center justify-center p-4">
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.5 }}
+        className="w-full max-w-4xl"
+      >
+        {/* Header */}
+        <div className="text-center mb-8">
+          <div className="flex items-center justify-center mb-4">
+            <Logo className="w-12 h-12 mr-3" />
+            <h1 className="text-3xl font-bold">Welcome to SurfSense</h1>
+          </div>
+          <p className="text-muted-foreground text-lg">Let's configure your SurfSense to get started</p>
+        </div>
+
+        {/* Progress */}
+        <Card className="mb-8 bg-background/60 backdrop-blur-sm">
+          <CardContent className="pt-6">
+            <div className="flex items-center justify-between mb-4">
+              <div className="text-sm font-medium">Step {currentStep} of {TOTAL_STEPS}</div>
+              <div className="text-sm text-muted-foreground">{Math.round(progress)}% Complete</div>
+            </div>
+            <Progress value={progress} className="mb-4" />
+            <div className="grid grid-cols-3 gap-4">
+              {Array.from({ length: TOTAL_STEPS }, (_, i) => {
+                const stepNum = i + 1;
+                const isCompleted = stepNum < currentStep;
+                const isCurrent = stepNum === currentStep;
+                
+                return (
+                  <div key={stepNum} className="flex items-center space-x-2">
+                    <div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium ${
+                      isCompleted 
+                        ? 'bg-primary text-primary-foreground' 
+                        : isCurrent 
+                          ? 'bg-primary/20 text-primary border-2 border-primary' 
+                          : 'bg-muted text-muted-foreground'
+                    }`}>
+                      {isCompleted ? <CheckCircle className="w-4 h-4" /> : stepNum}
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <p className={`text-sm font-medium truncate ${
+                        isCurrent ? 'text-foreground' : 'text-muted-foreground'
+                      }`}>
+                        {stepTitles[i]}
+                      </p>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Step Content */}
+        <Card className="min-h-[500px] bg-background/60 backdrop-blur-sm">
+          <CardHeader className="text-center">
+            <CardTitle className="text-2xl flex items-center justify-center gap-2">
+              {currentStep === 1 && <Bot className="w-6 h-6" />}
+              {currentStep === 2 && <Sparkles className="w-6 h-6" />}
+              {currentStep === 3 && <CheckCircle className="w-6 h-6" />}
+              {stepTitles[currentStep - 1]}
+            </CardTitle>
+            <CardDescription className="text-base">
+              {stepDescriptions[currentStep - 1]}
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <AnimatePresence mode="wait">
+              <motion.div
+                key={currentStep}
+                initial={{ opacity: 0, x: 20 }}
+                animate={{ opacity: 1, x: 0 }}
+                exit={{ opacity: 0, x: -20 }}
+                transition={{ duration: 0.3 }}
+              >
+                {currentStep === 1 && <AddProviderStep />}
+                {currentStep === 2 && <AssignRolesStep onPreferencesUpdated={refreshPreferences} />}
+                {currentStep === 3 && <CompletionStep />}
+              </motion.div>
+            </AnimatePresence>
+          </CardContent>
+        </Card>
+
+        {/* Navigation */}
+        <div className="flex justify-between mt-8">
+          <Button
+            variant="outline"
+            onClick={handlePrevious}
+            disabled={currentStep === 1}
+            className="flex items-center gap-2"
+          >
+            <ArrowLeft className="w-4 h-4" />
+            Previous
+          </Button>
+          
+          <div className="flex gap-2">
+            {currentStep < TOTAL_STEPS && (
+              <Button
+                onClick={handleNext}
+                disabled={
+                  (currentStep === 1 && !canProceedToStep2) ||
+                  (currentStep === 2 && !canProceedToStep3)
+                }
+                className="flex items-center gap-2"
+              >
+                Next
+                <ArrowRight className="w-4 h-4" />
+              </Button>
+            )}
+            
+            {currentStep === TOTAL_STEPS && (
+              <Button
+                onClick={handleComplete}
+                className="flex items-center gap-2"
+              >
+                Complete Setup
+                <CheckCircle className="w-4 h-4" />
+              </Button>
+            )}
+          </div>
+        </div>
+      </motion.div>
+    </div>
+  );
+};
+
+export default OnboardPage; 

surfsense_web/app/settings/page.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import React from 'react';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Separator } from '@/components/ui/separator';
+import { Bot, Settings, Brain } from 'lucide-react';
+import { ModelConfigManager } from '@/components/settings/model-config-manager';
+import { LLMRoleManager } from '@/components/settings/llm-role-manager';
+
+export default function SettingsPage() {
+  return (
+    <div className="min-h-screen bg-background">
+      <div className="container max-w-7xl mx-auto p-6 lg:p-8">
+        <div className="space-y-8">
+          {/* Header Section */}
+          <div className="space-y-4">
+            <div className="flex items-center space-x-4">
+              <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
+                <Settings className="h-6 w-6 text-primary" />
+              </div>
+              <div className="space-y-1">
+                <h1 className="text-3xl font-bold tracking-tight">Settings</h1>
+                <p className="text-lg text-muted-foreground">
+                  Manage your LLM configurations and role assignments.
+                </p>
+              </div>
+            </div>
+            <Separator className="my-6" />
+          </div>
+
+          {/* Settings Content */}
+          <Tabs defaultValue="models" className="space-y-8">
+            <div className="overflow-x-auto">
+              <TabsList className="grid w-full min-w-fit grid-cols-2 lg:w-auto lg:inline-grid">
+                <TabsTrigger value="models" className="flex items-center gap-2 text-sm">
+                  <Bot className="h-4 w-4" />
+                  <span className="hidden sm:inline">Model Configs</span>
+                  <span className="sm:hidden">Models</span>
+                </TabsTrigger>
+                <TabsTrigger value="roles" className="flex items-center gap-2 text-sm">
+                  <Brain className="h-4 w-4" />
+                  <span className="hidden sm:inline">LLM Roles</span>
+                  <span className="sm:hidden">Roles</span>
+                </TabsTrigger>
+              </TabsList>
+            </div>
+
+            <TabsContent value="models" className="space-y-6">
+              <ModelConfigManager />
+            </TabsContent>
+
+            <TabsContent value="roles" className="space-y-6">
+              <LLMRoleManager />
+            </TabsContent>
+          </Tabs>
+        </div>
+      </div>
+    </div>
+  );
+}