feat: moved LLMConfigs from User to SearchSpaces

- RBAC soon??
- Updated various services and routes to handle search space-specific LLM preferences.
- Modified frontend components to pass search space ID for LLM configuration management.
- Removed onboarding page and settings page as part of the refactor.

surfsense_web/app/dashboard/[search_space_id]/client-layout.tsx

@@ -1,12 +1,16 @@
 "use client";
 
+import { Loader2 } from "lucide-react";
+import { usePathname, useRouter } from "next/navigation";
 import type React from "react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { DashboardBreadcrumb } from "@/components/dashboard-breadcrumb";
 import { AppSidebarProvider } from "@/components/sidebar/AppSidebarProvider";
 import { ThemeTogglerComponent } from "@/components/theme/theme-toggle";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Separator } from "@/components/ui/separator";
 import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
+import { useLLMPreferences } from "@/hooks/use-llm-configs";
 
 export function DashboardClientLayout({
 	children,
@@ -19,6 +23,16 @@ export function DashboardClientLayout({
 	navSecondary: any[];
 	navMain: any[];
 }) {
+	const router = useRouter();
+	const pathname = usePathname();
+	const searchSpaceIdNum = Number(searchSpaceId);
+
+	const { loading, error, isOnboardingComplete } = useLLMPreferences(searchSpaceIdNum);
+	const [hasCheckedOnboarding, setHasCheckedOnboarding] = useState(false);
+
+	// Skip onboarding check if we're already on the onboarding page
+	const isOnboardingPage = pathname?.includes("/onboard");
+
 	const [open, setOpen] = useState<boolean>(() => {
 		try {
 			const match = document.cookie.match(/(?:^|; )sidebar_state=([^;]+)/);
@@ -29,6 +43,68 @@ export function DashboardClientLayout({
 		return true;
 	});
 
+	useEffect(() => {
+		// Skip check if already on onboarding page
+		if (isOnboardingPage) {
+			setHasCheckedOnboarding(true);
+			return;
+		}
+
+		// Only check once after preferences have loaded
+		if (!loading && !hasCheckedOnboarding) {
+			const onboardingComplete = isOnboardingComplete();
+
+			if (!onboardingComplete) {
+				router.push(`/dashboard/${searchSpaceId}/onboard`);
+			}
+
+			setHasCheckedOnboarding(true);
+		}
+	}, [
+		loading,
+		isOnboardingComplete,
+		isOnboardingPage,
+		router,
+		searchSpaceId,
+		hasCheckedOnboarding,
+	]);
+
+	// Show loading screen while checking onboarding status (only on first load)
+	if (!hasCheckedOnboarding && loading && !isOnboardingPage) {
+		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 Configuration</CardTitle>
+						<CardDescription>Checking your LLM preferences...</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 (but not on onboarding page)
+	if (error && !hasCheckedOnboarding && !isOnboardingPage) {
+		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>
+		);
+	}
+
 	return (
 		<SidebarProvider open={open} onOpenChange={setOpen}>
 			{/* Use AppSidebarProvider which fetches user, search space, and recent chats */}

surfsense_web/app/dashboard/[search_space_id]/layout.tsx

@@ -33,6 +33,12 @@ export default function DashboardLayout({
 			icon: "SquareTerminal",
 			items: [],
 		},
+		{
+			title: "Manage LLMs",
+			url: `/dashboard/${search_space_id}/settings`,
+			icon: "Settings2",
+			items: [],
+		},
 
 		{
 			title: "Documents",

surfsense_web/app/dashboard/[search_space_id]/onboard/page.tsx

@@ -0,0 +1,259 @@
+"use client";
+
+import { ArrowLeft, ArrowRight, Bot, CheckCircle, Sparkles } from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
+import { useParams, useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import { Logo } from "@/components/Logo";
+import { AddProviderStep } from "@/components/onboard/add-provider-step";
+import { AssignRolesStep } from "@/components/onboard/assign-roles-step";
+import { CompletionStep } from "@/components/onboard/completion-step";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Progress } from "@/components/ui/progress";
+import { useLLMConfigs, useLLMPreferences } from "@/hooks/use-llm-configs";
+
+const TOTAL_STEPS = 3;
+
+const OnboardPage = () => {
+	const router = useRouter();
+	const params = useParams();
+	const searchSpaceId = Number(params.search_space_id);
+
+	const { llmConfigs, loading: configsLoading, refreshConfigs } = useLLMConfigs(searchSpaceId);
+	const {
+		preferences,
+		loading: preferencesLoading,
+		isOnboardingComplete,
+		refreshPreferences,
+	} = useLLMPreferences(searchSpaceId);
+	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)
+	// But only check once to avoid redirect loops
+	useEffect(() => {
+		if (!preferencesLoading && !configsLoading && isOnboardingComplete() && !hasUserProgressed) {
+			// Small delay to ensure the check is stable
+			const timer = setTimeout(() => {
+				router.push(`/dashboard/${searchSpaceId}`);
+			}, 100);
+			return () => clearTimeout(timer);
+		}
+	}, [
+		preferencesLoading,
+		configsLoading,
+		isOnboardingComplete,
+		hasUserProgressed,
+		router,
+		searchSpaceId,
+	]);
+
+	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/${searchSpaceId}/documents`);
+	};
+
+	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
+										searchSpaceId={searchSpaceId}
+										onConfigCreated={refreshConfigs}
+										onConfigDeleted={refreshConfigs}
+									/>
+								)}
+								{currentStep === 2 && (
+									<AssignRolesStep
+										searchSpaceId={searchSpaceId}
+										onPreferencesUpdated={refreshPreferences}
+									/>
+								)}
+								{currentStep === 3 && <CompletionStep searchSpaceId={searchSpaceId} />}
+							</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/dashboard/[search_space_id]/settings/page.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { ArrowLeft, Bot, Brain, Settings } from "lucide-react";
+import { useParams, useRouter } from "next/navigation";
+import { LLMRoleManager } from "@/components/settings/llm-role-manager";
+import { ModelConfigManager } from "@/components/settings/model-config-manager";
+import { Separator } from "@/components/ui/separator";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
+export default function SettingsPage() {
+	const router = useRouter();
+	const params = useParams();
+	const searchSpaceId = Number(params.search_space_id);
+
+	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">
+							{/* Back Button */}
+							<button
+								onClick={() => router.push(`/dashboard/${searchSpaceId}`)}
+								className="flex items-center justify-center h-10 w-10 rounded-lg bg-primary/10 hover:bg-primary/20 transition-colors"
+								aria-label="Back to Dashboard"
+								type="button"
+							>
+								<ArrowLeft className="h-5 w-5 text-primary" />
+							</button>
+							<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 for this search space.
+								</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 searchSpaceId={searchSpaceId} />
+						</TabsContent>
+
+						<TabsContent value="roles" className="space-y-6">
+							<LLMRoleManager searchSpaceId={searchSpaceId} />
+						</TabsContent>
+					</Tabs>
+				</div>
+			</div>
+		</div>
+	);
+}

surfsense_web/app/dashboard/layout.tsx

@@ -4,7 +4,6 @@ import { Loader2 } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { useLLMPreferences } from "@/hooks/use-llm-configs";
 
 interface DashboardLayoutProps {
 	children: React.ReactNode;
@@ -12,7 +11,6 @@ interface DashboardLayoutProps {
 
 export default function DashboardLayout({ children }: DashboardLayoutProps) {
 	const router = useRouter();
-	const { loading, error, isOnboardingComplete } = useLLMPreferences();
 	const [isCheckingAuth, setIsCheckingAuth] = useState(true);
 
 	useEffect(() => {
@@ -25,23 +23,14 @@ export default function DashboardLayout({ children }: DashboardLayoutProps) {
 		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) {
+	// Show loading screen while checking authentication
+	if (isCheckingAuth) {
 		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>
+						<CardDescription>Checking authentication...</CardDescription>
 					</CardHeader>
 					<CardContent className="flex justify-center py-6">
 						<Loader2 className="h-12 w-12 text-primary animate-spin" />
@@ -51,42 +40,5 @@ export default function DashboardLayout({ children }: DashboardLayoutProps) {
 		);
 	}
 
-	// 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>
-	);
+	return <>{children}</>;
 }