Merge upstream/dev into feat/vision-autocomplete

surfsense_web/components/settings/image-model-manager.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useAtomValue } from "jotai";
-import { AlertCircle, Edit3, Info, Plus, RefreshCw, Trash2, Wand2 } from "lucide-react";
+import { AlertCircle, Dot, Edit3, Info, RefreshCw, Trash2, Wand2 } from "lucide-react";
 import { useMemo, useState } from "react";
 import { deleteImageGenConfigMutationAtom } from "@/atoms/image-gen-config/image-gen-config-mutation.atoms";
 import {
@@ -240,27 +240,14 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
 			{!isLoading && (
 				<div className="space-y-4 md:space-y-6">
 					{(userConfigs?.length ?? 0) === 0 ? (
-						<Card className="border-dashed border-2 border-muted-foreground/25">
+						<Card className="border-0 bg-transparent shadow-none">
 							<CardContent className="flex flex-col items-center justify-center py-10 md:py-16 text-center">
-								<div className="rounded-full bg-gradient-to-br from-teal-500/10 to-cyan-500/10 p-4 md:p-6 mb-4">
-									<Wand2 className="h-8 w-8 md:h-12 md:w-12 text-teal-600 dark:text-teal-400" />
-								</div>
-								<h3 className="text-lg font-semibold mb-2">No Image Models Yet</h3>
-								<p className="text-xs md:text-sm text-muted-foreground max-w-sm mb-4">
+								<h3 className="text-sm md:text-base font-semibold mb-2">No Image Models Yet</h3>
+								<p className="text-[11px] md:text-xs text-muted-foreground max-w-sm mb-4">
 									{canCreate
 										? "Add your own image generation model (DALL-E 3, GPT Image 1, etc.)"
 										: "No image models have been added to this space yet. Contact a space owner to add one."}
 								</p>
-								{canCreate && (
-									<Button
-										onClick={openNewDialog}
-										size="lg"
-										className="gap-2 text-xs md:text-sm h-9 md:h-10"
-									>
-										<Plus className="h-3 w-3 md:h-4 md:w-4" />
-										Add First Image Model
-									</Button>
-								)}
 							</CardContent>
 						</Card>
 					) : (
@@ -343,7 +330,7 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
 													</span>
 													{member && (
 														<>
-															<span className="text-muted-foreground/30">·</span>
+															<Dot className="h-4 w-4 text-muted-foreground/30" />
 															<TooltipProvider>
 																<Tooltip open={isDesktop ? undefined : false}>
 																	<TooltipTrigger asChild>

surfsense_web/components/settings/llm-role-manager.tsx

@@ -4,17 +4,15 @@ import { useAtomValue } from "jotai";
 import {
 	AlertCircle,
 	Bot,
-	CheckCircle,
+	CircleCheck,
 	CircleDashed,
 	Eye,
 	FileText,
 	ImageIcon,
 	RefreshCw,
-	RotateCcw,
-	Save,
 	Shuffle,
 } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 import {
 	globalImageGenConfigsAtom,
@@ -41,6 +39,7 @@ import {
 	SelectValue,
 } from "@/components/ui/select";
 import { Skeleton } from "@/components/ui/skeleton";
+import { Spinner } from "@/components/ui/spinner";
 import { getProviderIcon } from "@/lib/provider-icons";
 import { cn } from "@/lib/utils";
 
@@ -49,8 +48,8 @@ const ROLE_DESCRIPTIONS = {
 		icon: Bot,
 		title: "Agent LLM",
 		description: "Primary LLM for chat interactions and agent operations",
-		color: "text-blue-600 dark:text-blue-400",
-		bgColor: "bg-blue-500/10",
+		color: "text-muted-foreground",
+		bgColor: "bg-muted",
 		prefKey: "agent_llm_id" as const,
 		configType: "llm" as const,
 	},
@@ -58,8 +57,8 @@ const ROLE_DESCRIPTIONS = {
 		icon: FileText,
 		title: "Document Summary LLM",
 		description: "Handles document summarization and research synthesis",
-		color: "text-purple-600 dark:text-purple-400",
-		bgColor: "bg-purple-500/10",
+		color: "text-muted-foreground",
+		bgColor: "bg-muted",
 		prefKey: "document_summary_llm_id" as const,
 		configType: "llm" as const,
 	},
@@ -67,8 +66,8 @@ const ROLE_DESCRIPTIONS = {
 		icon: ImageIcon,
 		title: "Image Generation Model",
 		description: "Model used for AI image generation (DALL-E, GPT Image, etc.)",
-		color: "text-teal-600 dark:text-teal-400",
-		bgColor: "bg-teal-500/10",
+		color: "text-muted-foreground",
+		bgColor: "bg-muted",
 		prefKey: "image_generation_config_id" as const,
 		configType: "image" as const,
 	},
@@ -129,18 +128,18 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
 		vision_llm_id: preferences.vision_llm_id ?? "",
 	}));
 
-	const [hasChanges, setHasChanges] = useState(false);
-	const [isSaving, setIsSaving] = useState(false);
+	const [savingRole, setSavingRole] = useState<string | null>(null);
+	const savingRef = useRef(false);
 
 	useEffect(() => {
-		const newAssignments = {
-			agent_llm_id: preferences.agent_llm_id ?? "",
-			document_summary_llm_id: preferences.document_summary_llm_id ?? "",
-			image_generation_config_id: preferences.image_generation_config_id ?? "",
-			vision_llm_id: preferences.vision_llm_id ?? "",
-		};
-		setAssignments(newAssignments);
-		setHasChanges(false);
+		if (!savingRef.current) {
+			setAssignments({
+				agent_llm_id: preferences.agent_llm_id ?? "",
+				document_summary_llm_id: preferences.document_summary_llm_id ?? "",
+				image_generation_config_id: preferences.image_generation_config_id ?? "",
+				vision_llm_id: preferences.vision_llm_id ?? "",
+			});
+		}
 	}, [
 		preferences?.agent_llm_id,
 		preferences?.document_summary_llm_id,
@@ -148,77 +147,27 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
 		preferences?.vision_llm_id,
 	]);
 
-	const handleRoleAssignment = (prefKey: string, configId: string) => {
-		const newAssignments = {
-			...assignments,
-			[prefKey]: configId === "unassigned" ? "" : parseInt(configId),
-		};
+	const handleRoleAssignment = useCallback(
+		async (prefKey: string, configId: string) => {
+			const value = configId === "unassigned" ? "" : parseInt(configId);
 
-		setAssignments(newAssignments);
+			setAssignments((prev) => ({ ...prev, [prefKey]: value }));
+			setSavingRole(prefKey);
+			savingRef.current = true;
 
-		const currentPrefs = {
-			agent_llm_id: preferences.agent_llm_id ?? "",
-			document_summary_llm_id: preferences.document_summary_llm_id ?? "",
-			image_generation_config_id: preferences.image_generation_config_id ?? "",
-			vision_llm_id: preferences.vision_llm_id ?? "",
-		};
-
-		const hasChangesNow = Object.keys(newAssignments).some(
-			(key) =>
-				newAssignments[key as keyof typeof newAssignments] !==
-				currentPrefs[key as keyof typeof currentPrefs]
-		);
-
-		setHasChanges(hasChangesNow);
-	};
-
-	const handleSave = async () => {
-		setIsSaving(true);
-
-		const toNumericOrUndefined = (val: string | number) =>
-			typeof val === "string" ? (val ? parseInt(val) : undefined) : val;
-
-		const numericAssignments = {
-			agent_llm_id: toNumericOrUndefined(assignments.agent_llm_id),
-			document_summary_llm_id: toNumericOrUndefined(assignments.document_summary_llm_id),
-			image_generation_config_id: toNumericOrUndefined(assignments.image_generation_config_id),
-			vision_llm_id: toNumericOrUndefined(assignments.vision_llm_id),
-		};
-
-		await updatePreferences({
-			search_space_id: searchSpaceId,
-			data: numericAssignments,
-		});
-
-		setHasChanges(false);
-		toast.success("Role assignments saved successfully!");
-
-		setIsSaving(false);
-	};
-
-	const handleReset = () => {
-		setAssignments({
-			agent_llm_id: preferences.agent_llm_id ?? "",
-			document_summary_llm_id: preferences.document_summary_llm_id ?? "",
-			image_generation_config_id: preferences.image_generation_config_id ?? "",
-			vision_llm_id: preferences.vision_llm_id ?? "",
-		});
-		setHasChanges(false);
-	};
-
-	const isAssignmentComplete =
-		assignments.agent_llm_id !== "" &&
-		assignments.agent_llm_id !== null &&
-		assignments.agent_llm_id !== undefined &&
-		assignments.document_summary_llm_id !== "" &&
-		assignments.document_summary_llm_id !== null &&
-		assignments.document_summary_llm_id !== undefined &&
-		assignments.image_generation_config_id !== "" &&
-		assignments.image_generation_config_id !== null &&
-		assignments.image_generation_config_id !== undefined &&
-		assignments.vision_llm_id !== "" &&
-		assignments.vision_llm_id !== null &&
-		assignments.vision_llm_id !== undefined;
+			try {
+				await updatePreferences({
+					search_space_id: searchSpaceId,
+					data: { [prefKey]: value || undefined },
+				});
+				toast.success("Role assignment updated");
+			} finally {
+				setSavingRole(null);
+				savingRef.current = false;
+			}
+		},
+		[updatePreferences, searchSpaceId]
+	);
 
 	// Combine global and custom LLM configs
 	const allLLMConfigs = [
@@ -232,6 +181,11 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
 		...(userImageConfigs ?? []).filter((config) => config.id && config.id.toString().trim() !== ""),
 	];
 
+	const isAssignmentComplete =
+		allLLMConfigs.some((c) => c.id === assignments.agent_llm_id) &&
+		allLLMConfigs.some((c) => c.id === assignments.document_summary_llm_id) &&
+		allImageConfigs.some((c) => c.id === assignments.image_generation_config_id);
+
 	const isLoading =
 		configsLoading ||
 		preferencesLoading ||
@@ -261,11 +215,8 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
 					Refresh
 				</Button>
 				{isAssignmentComplete && !isLoading && !hasError && (
-					<Badge
-						variant="outline"
-						className="text-xs gap-1.5 border-emerald-500/30 text-emerald-700 dark:text-emerald-300 bg-emerald-500/5"
-					>
-						<CheckCircle className="h-3 w-3" />
+					<Badge variant="outline" className="text-xs gap-1.5 text-muted-foreground">
+						<CircleCheck className="h-3 w-3" />
 						All roles assigned
 					</Badge>
 				)}
@@ -351,10 +302,7 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
 						const roleAllConfigs = isImageRole ? allImageConfigs : allLLMConfigs;
 
 						const assignedConfig = roleAllConfigs.find((config) => config.id === currentAssignment);
-						const isAssigned =
-							currentAssignment !== "" &&
-							currentAssignment !== null &&
-							currentAssignment !== undefined;
+						const isAssigned = !!assignedConfig;
 						const isAutoMode =
 							assignedConfig && "is_auto_mode" in assignedConfig && assignedConfig.is_auto_mode;
 
@@ -380,8 +328,10 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
 													</p>
 												</div>
 											</div>
-											{isAssigned ? (
-												<CheckCircle className="w-4 h-4 text-emerald-500 shrink-0 mt-0.5" />
+											{savingRole === role.prefKey ? (
+												<Spinner size="sm" className="shrink-0 mt-0.5 text-muted-foreground" />
+											) : isAssigned ? (
+												<CircleCheck className="w-4 h-4 text-muted-foreground/40 shrink-0 mt-0.5" />
 											) : (
 												<CircleDashed className="w-4 h-4 text-muted-foreground/40 shrink-0 mt-0.5" />
 											)}
@@ -393,7 +343,7 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
 												Configuration
 											</Label>
 											<Select
-												value={currentAssignment?.toString() || "unassigned"}
+												value={isAssigned ? currentAssignment.toString() : "unassigned"}
 												onValueChange={(value) => handleRoleAssignment(role.prefKey, value)}
 											>
 												<SelectTrigger className="w-full h-9 md:h-10 text-xs md:text-sm">
@@ -423,13 +373,7 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
 																	>
 																		<div className="flex items-center gap-1 md:gap-1.5 flex-wrap min-w-0">
 																			{isAuto ? (
-																				<Badge
-																					variant="outline"
-																					className="text-[9px] md:text-[10px] shrink-0 bg-violet-100 text-violet-700 dark:bg-violet-900/30 dark:text-violet-300 border-violet-200 dark:border-violet-700"
-																				>
-																					<Shuffle className="size-2 md:size-2.5 mr-0.5" />
-																					AUTO
-																				</Badge>
+																				<Shuffle className="size-3 md:size-3.5 shrink-0 text-muted-foreground" />
 																			) : (
 																				getProviderIcon(config.provider, {
 																					className: "size-3 md:size-3.5 shrink-0",
@@ -552,34 +496,6 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
 					})}
 				</div>
 			)}
-
-			{/* Save / Reset Bar */}
-			{hasChanges && (
-				<div className="flex items-center justify-between gap-3 rounded-lg border border-border bg-muted/50 p-3 md:p-4">
-					<p className="text-xs md:text-sm text-muted-foreground">You have unsaved changes</p>
-					<div className="flex items-center gap-2">
-						<Button
-							variant="outline"
-							size="sm"
-							onClick={handleReset}
-							disabled={isSaving}
-							className="h-8 text-xs gap-1.5"
-						>
-							<RotateCcw className="w-3 h-3" />
-							Reset
-						</Button>
-						<Button
-							size="sm"
-							onClick={handleSave}
-							disabled={isSaving}
-							className="h-8 text-xs gap-1.5"
-						>
-							<Save className="w-3 h-3" />
-							{isSaving ? "Saving…" : "Save Changes"}
-						</Button>
-					</div>
-				</div>
-			)}
 		</div>
 	);
 }

surfsense_web/components/settings/model-config-manager.tsx

@@ -3,11 +3,11 @@
 import { useAtomValue } from "jotai";
 import {
 	AlertCircle,
+	Dot,
 	Edit3,
 	FileText,
 	Info,
 	MessageSquareQuote,
-	Plus,
 	RefreshCw,
 	Trash2,
 	Wand2,
@@ -151,7 +151,7 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 						onClick={openNewDialog}
 						className="gap-2 bg-white text-black hover:bg-neutral-100 dark:bg-white dark:text-black dark:hover:bg-neutral-200"
 					>
-						Add LLM Model
+						Add Model
 					</Button>
 				)}
 			</div>
@@ -251,29 +251,14 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 				<div className="space-y-4">
 					{configs?.length === 0 ? (
 						<div>
-							<Card className="border-dashed border-2 border-muted-foreground/25">
+							<Card className="border-0 bg-transparent shadow-none">
 								<CardContent className="flex flex-col items-center justify-center py-10 md:py-16 text-center">
-									<div className="rounded-full bg-gradient-to-br from-violet-500/10 to-purple-500/10 p-4 md:p-6 mb-4 md:mb-6">
-										<Wand2 className="h-8 w-8 md:h-12 md:w-12 text-violet-600 dark:text-violet-400" />
-									</div>
-									<div className="space-y-2 mb-4 md:mb-6">
-										<h3 className="text-lg md:text-xl font-semibold">No Configurations Yet</h3>
-										<p className="text-xs md:text-sm text-muted-foreground max-w-sm">
-											{canCreate
-												? "Create your first AI configuration to customize how your agent responds"
-												: "No AI configurations have been added to this space yet. Contact a space owner to add one."}
-										</p>
-									</div>
-									{canCreate && (
-										<Button
-											onClick={openNewDialog}
-											size="lg"
-											className="gap-2 text-xs md:text-sm h-9 md:h-10"
-										>
-											<Plus className="h-3 w-3 md:h-4 md:w-4" />
-											Create First Configuration
-										</Button>
-									)}
+									<h3 className="text-sm md:text-base font-semibold mb-2">No Models Yet</h3>
+									<p className="text-[11px] md:text-xs text-muted-foreground max-w-sm mb-4">
+										{canCreate
+											? "Add your first model to power document summarization, chat, and other agent capabilities"
+											: "No models have been added to this space yet. Contact a space owner to add one"}
+									</p>
 								</CardContent>
 							</Card>
 						</div>
@@ -380,7 +365,7 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 													</span>
 													{member && (
 														<>
-															<span className="text-muted-foreground/30">·</span>
+															<Dot className="h-4 w-4 text-muted-foreground/30" />
 															<TooltipProvider>
 																<Tooltip open={isDesktop ? undefined : false}>
 																	<TooltipTrigger asChild>
@@ -436,7 +421,7 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 			>
 				<AlertDialogContent className="select-none">
 					<AlertDialogHeader>
-						<AlertDialogTitle>Delete LLM Model</AlertDialogTitle>
+						<AlertDialogTitle>Delete Model</AlertDialogTitle>
 						<AlertDialogDescription>
 							Are you sure you want to delete{" "}
 							<span className="font-semibold text-foreground">{configToDelete?.name}</span>? This