feat: added global llm configurations

surfsense_web/components/onboard/add-provider-step.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { AlertCircle, Bot, Check, ChevronsUpDown, Plus, Trash2 } from "lucide-react";
+import { AlertCircle, Bot, Check, CheckCircle, ChevronsUpDown, Plus, Trash2 } from "lucide-react";
 import { motion } from "motion/react";
 import { useTranslations } from "next-intl";
 import { useState } from "react";
@@ -30,7 +30,7 @@ import {
 import { LANGUAGES } from "@/contracts/enums/languages";
 import { getModelsByProvider } from "@/contracts/enums/llm-models";
 import { LLM_PROVIDERS } from "@/contracts/enums/llm-providers";
-import { type CreateLLMConfig, useLLMConfigs } from "@/hooks/use-llm-configs";
+import { type CreateLLMConfig, useGlobalLLMConfigs, useLLMConfigs } from "@/hooks/use-llm-configs";
 import { cn } from "@/lib/utils";
 
 import InferenceParamsEditor from "../inference-params-editor";
@@ -48,6 +48,7 @@ export function AddProviderStep({
 }: AddProviderStepProps) {
 	const t = useTranslations("onboard");
 	const { llmConfigs, createLLMConfig, deleteLLMConfig } = useLLMConfigs(searchSpaceId);
+	const { globalConfigs } = useGlobalLLMConfigs();
 	const [isAddingNew, setIsAddingNew] = useState(false);
 	const [formData, setFormData] = useState<CreateLLMConfig>({
 		name: "",
@@ -117,6 +118,19 @@ export function AddProviderStep({
 				<AlertDescription>{t("add_provider_instruction")}</AlertDescription>
 			</Alert>
 
+			{/* Global Configs Notice */}
+			{globalConfigs.length > 0 && (
+				<Alert className="bg-blue-50 border-blue-200 dark:bg-blue-950 dark:border-blue-800">
+					<CheckCircle className="h-4 w-4 text-blue-600" />
+					<AlertDescription className="text-blue-800 dark:text-blue-200">
+						<strong>{globalConfigs.length} global configuration(s) available!</strong>
+						<br />
+						You can skip adding your own LLM provider and use our pre-configured models in the next
+						step. Or continue here to add your own custom configurations.
+					</AlertDescription>
+				</Alert>
+			)}
+
 			{/* Existing Configurations */}
 			{llmConfigs.length > 0 && (
 				<div className="space-y-4">

surfsense_web/components/onboard/assign-roles-step.tsx

@@ -15,7 +15,7 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
-import { useLLMConfigs, useLLMPreferences } from "@/hooks/use-llm-configs";
+import { useGlobalLLMConfigs, useLLMConfigs, useLLMPreferences } from "@/hooks/use-llm-configs";
 
 interface AssignRolesStepProps {
 	searchSpaceId: number;
@@ -25,8 +25,12 @@ interface AssignRolesStepProps {
 export function AssignRolesStep({ searchSpaceId, onPreferencesUpdated }: AssignRolesStepProps) {
 	const t = useTranslations("onboard");
 	const { llmConfigs } = useLLMConfigs(searchSpaceId);
+	const { globalConfigs } = useGlobalLLMConfigs();
 	const { preferences, updatePreferences } = useLLMPreferences(searchSpaceId);
 
+	// Combine global and user-specific configs
+	const allConfigs = [...globalConfigs, ...llmConfigs];
+
 	const ROLE_DESCRIPTIONS = {
 		long_context: {
 			icon: Brain,
@@ -107,7 +111,7 @@ export function AssignRolesStep({ searchSpaceId, onPreferencesUpdated }: AssignR
 	const isAssignmentComplete =
 		assignments.long_context_llm_id && assignments.fast_llm_id && assignments.strategic_llm_id;
 
-	if (llmConfigs.length === 0) {
+	if (allConfigs.length === 0) {
 		return (
 			<div className="flex flex-col items-center justify-center py-12">
 				<AlertCircle className="w-16 h-16 text-muted-foreground mb-4" />
@@ -130,7 +134,7 @@ export function AssignRolesStep({ searchSpaceId, onPreferencesUpdated }: AssignR
 				{Object.entries(ROLE_DESCRIPTIONS).map(([key, role]) => {
 					const IconComponent = role.icon;
 					const currentAssignment = assignments[`${key}_llm_id` as keyof typeof assignments];
-					const assignedConfig = llmConfigs.find((config) => config.id === currentAssignment);
+					const assignedConfig = allConfigs.find((config) => config.id === currentAssignment);
 
 					return (
 						<motion.div
@@ -171,6 +175,32 @@ export function AssignRolesStep({ searchSpaceId, onPreferencesUpdated }: AssignR
 												<SelectValue placeholder={t("select_llm_config")} />
 											</SelectTrigger>
 											<SelectContent>
+												{globalConfigs.length > 0 && (
+													<div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground">
+														{t("global_configs") || "Global Configurations"}
+													</div>
+												)}
+												{globalConfigs
+													.filter((config) => config.id && config.id.toString().trim() !== "")
+													.map((config) => (
+														<SelectItem key={config.id} value={config.id.toString()}>
+															<div className="flex items-center gap-2">
+																<Badge variant="secondary" className="text-xs">
+																	🌐 Global
+																</Badge>
+																<Badge variant="outline" className="text-xs">
+																	{config.provider}
+																</Badge>
+																<span>{config.name}</span>
+																<span className="text-muted-foreground">({config.model_name})</span>
+															</div>
+														</SelectItem>
+													))}
+												{llmConfigs.length > 0 && globalConfigs.length > 0 && (
+													<div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground border-t mt-1">
+														{t("your_configs") || "Your Configurations"}
+													</div>
+												)}
 												{llmConfigs
 													.filter((config) => config.id && config.id.toString().trim() !== "")
 													.map((config) => (
@@ -193,6 +223,11 @@ export function AssignRolesStep({ searchSpaceId, onPreferencesUpdated }: AssignR
 											<div className="flex items-center gap-2 text-sm">
 												<Bot className="w-4 h-4" />
 												<span className="font-medium">{t("assigned")}:</span>
+												{assignedConfig.is_global && (
+													<Badge variant="secondary" className="text-xs">
+														🌐 Global
+													</Badge>
+												)}
 												<Badge variant="secondary">{assignedConfig.provider}</Badge>
 												<span>{assignedConfig.name}</span>
 											</div>

surfsense_web/components/onboard/completion-step.tsx

@@ -4,7 +4,7 @@ import { ArrowRight, Bot, Brain, CheckCircle, Sparkles, Zap } from "lucide-react
 import { motion } from "motion/react";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { useLLMConfigs, useLLMPreferences } from "@/hooks/use-llm-configs";
+import { useGlobalLLMConfigs, useLLMConfigs, useLLMPreferences } from "@/hooks/use-llm-configs";
 
 const ROLE_ICONS = {
 	long_context: Brain,
@@ -18,12 +18,16 @@ interface CompletionStepProps {
 
 export function CompletionStep({ searchSpaceId }: CompletionStepProps) {
 	const { llmConfigs } = useLLMConfigs(searchSpaceId);
+	const { globalConfigs } = useGlobalLLMConfigs();
 	const { preferences } = useLLMPreferences(searchSpaceId);
 
+	// Combine global and user-specific configs
+	const allConfigs = [...globalConfigs, ...llmConfigs];
+
 	const assignedConfigs = {
-		long_context: llmConfigs.find((c) => c.id === preferences.long_context_llm_id),
-		fast: llmConfigs.find((c) => c.id === preferences.fast_llm_id),
-		strategic: llmConfigs.find((c) => c.id === preferences.strategic_llm_id),
+		long_context: allConfigs.find((c) => c.id === preferences.long_context_llm_id),
+		fast: allConfigs.find((c) => c.id === preferences.fast_llm_id),
+		strategic: allConfigs.find((c) => c.id === preferences.strategic_llm_id),
 	};
 
 	return (
@@ -86,6 +90,11 @@ export function CompletionStep({ searchSpaceId }: CompletionStepProps) {
 										</div>
 									</div>
 									<div className="flex items-center gap-2">
+										{config.is_global && (
+											<Badge variant="secondary" className="text-xs">
+												🌐 Global
+											</Badge>
+										)}
 										<Badge variant="outline">{config.provider}</Badge>
 										<span className="text-sm text-muted-foreground">{config.model_name}</span>
 									</div>
@@ -115,8 +124,14 @@ export function CompletionStep({ searchSpaceId }: CompletionStepProps) {
 						</p>
 						<div className="flex flex-wrap gap-2 text-sm">
 							<Badge variant="secondary">
-								✓ {llmConfigs.length} LLM provider{llmConfigs.length > 1 ? "s" : ""} configured
+								✓ {allConfigs.length} LLM provider{allConfigs.length > 1 ? "s" : ""} available
 							</Badge>
+							{globalConfigs.length > 0 && (
+								<Badge variant="secondary">✓ {globalConfigs.length} Global config(s)</Badge>
+							)}
+							{llmConfigs.length > 0 && (
+								<Badge variant="secondary">✓ {llmConfigs.length} Custom config(s)</Badge>
+							)}
 							<Badge variant="secondary">✓ All roles assigned</Badge>
 							<Badge variant="secondary">✓ Ready to use</Badge>
 						</div>