- Automatic Load Balancing
+ Automatic (Fastest)
Distributes requests across all configured LLM providers
diff --git a/surfsense_web/components/new-chat/model-selector.tsx b/surfsense_web/components/new-chat/model-selector.tsx
index ec1143e04..98911fe38 100644
--- a/surfsense_web/components/new-chat/model-selector.tsx
+++ b/surfsense_web/components/new-chat/model-selector.tsx
@@ -1,22 +1,13 @@
"use client";
import { useAtomValue } from "jotai";
-import {
- Bot,
- Check,
- ChevronDown,
- Cloud,
- Edit3,
- Globe,
- Plus,
- Settings2,
- Shuffle,
- Sparkles,
- User,
- Zap,
-} from "lucide-react";
+import { Bot, Check, ChevronDown, Edit3, ImageIcon, Plus, Zap } from "lucide-react";
import { useCallback, useMemo, useState } from "react";
import { toast } from "sonner";
+import {
+ globalImageGenConfigsAtom,
+ imageGenConfigsAtom,
+} from "@/atoms/image-gen-config/image-gen-config-query.atoms";
import { updateLLMPreferencesMutationAtom } from "@/atoms/new-llm-config/new-llm-config-mutation.atoms";
import {
globalNewLLMConfigsAtom,
@@ -37,128 +28,152 @@ import {
} from "@/components/ui/command";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Spinner } from "@/components/ui/spinner";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import type {
+ GlobalImageGenConfig,
GlobalNewLLMConfig,
+ ImageGenerationConfig,
NewLLMConfigPublic,
} from "@/contracts/types/new-llm-config.types";
+import { getProviderIcon } from "@/lib/provider-icons";
import { cn } from "@/lib/utils";
-// Provider icons mapping
-const getProviderIcon = (provider: string, isAutoMode?: boolean) => {
- const iconClass = "size-4";
-
- // Special icon for Auto mode
- if (isAutoMode || provider?.toUpperCase() === "AUTO") {
- return Loading
- ) : currentConfig ? (
- <>
- {getProviderIcon(currentConfig.provider, isCurrentAutoMode ?? false)}
-
- {currentConfig.name}
-
- {isCurrentAutoMode ? (
-
- Balanced
-
- ) : (
-
- {currentConfig.model_name.split("/").pop()?.slice(0, 10) ||
- currentConfig.model_name.slice(0, 10)}
-
- )}
-
) : (
<>
- Select Model
+ {/* LLM section */}
+ {currentLLMConfig ? (
+ <>
+ {getProviderIcon(currentLLMConfig.provider, {
+ isAutoMode: isLLMAutoMode ?? false,
+ })}
+
+ {currentLLMConfig.name}
+
+
+ ) : (
+ <>
+ Select Model
+
+ )}
+
+ {/* Divider */}
+
+
+ {/* Image section */}
+ {currentImageConfig ? (
+ <>
+ {getProviderIcon(currentImageConfig.provider, {
+ isAutoMode: isImageAutoMode ?? false,
+ })}
+
+ {currentImageConfig.name}
+
+
+ ) : (
+
+ )}
)}
- setActiveTab(v as "llm" | "image")}
+ className="w-full"
>
- {totalModels > 3 && (
-
-
- )}
-
-
-
-
-
-
No models found
-
Try a different search term
-
-
- {/* Global Configs Section */}
- {filteredGlobalConfigs.length > 0 && (
-
-
-
- {filteredGlobalConfigs.map((config) => {
- const isSelected = currentConfig?.id === config.id;
- const isAutoMode = "is_auto_mode" in config && config.is_auto_mode;
- return (
- handleSelectConfig(config)}
- className={cn(
- "mx-2 rounded-lg mb-1 cursor-pointer group transition-all",
- "hover:bg-accent/50",
- isSelected && "bg-accent/80",
- isAutoMode && "border border-violet-200 dark:border-violet-800/50"
- )}
- >
-
-
-
- {getProviderIcon(config.provider, isAutoMode)}
-
-
-
- {config.name}
- {isAutoMode && (
-
- Recommended
-
- )}
- {isSelected &&
-
-
- {isAutoMode ? "Auto load balancing" : config.model_name}
-
- {!isAutoMode && config.citations_enabled && (
-
- Citations
-
- )}
-
-
-
- {!isAutoMode && (
-
handleEditConfig(e, config, true)}
- >
-
- )}
-
- );
- })}
-
- )}
-
- {filteredGlobalConfigs.length > 0 && filteredUserConfigs.length > 0 && (
-
-
-
- {filteredUserConfigs.map((config) => {
- const isSelected = currentConfig?.id === config.id;
- return (
- handleSelectConfig(config)}
- className={cn(
- "mx-2 rounded-lg mb-1 cursor-pointer group transition-all",
- "hover:bg-accent/50",
- isSelected && "bg-accent/80"
- )}
- >
-
-
-
{getProviderIcon(config.provider)}
-
-
- {config.name}
- {isSelected &&
-
-
- {config.model_name}
-
- {config.citations_enabled && (
-
- Citations
-
- )}
-
-
-
-
handleEditConfig(e, config, false)}
- >
-
-
- );
- })}
-
- )}
-
- {/* Add New Config Button */}
-
-
{
- setOpen(false);
- onAddNew();
- }}
+
+
+
- Add New Configuration
-
-
+
+
+
+
+ {totalLLMModels > 3 && (
+
+
+ )}
+
+
+
+
+
+
No models found
+
Try a different search term
+
+
+ {/* Global LLM Configs */}
+ {filteredLLMGlobal.length > 0 && (
+
+
+ Global Models
+
+ {filteredLLMGlobal.map((config) => {
+ const isSelected = currentLLMConfig?.id === config.id;
+ const isAutoMode = "is_auto_mode" in config && config.is_auto_mode;
+ return (
+ handleSelectLLM(config)}
+ className={cn(
+ "mx-2 rounded-lg mb-1 cursor-pointer group transition-all",
+ "hover:bg-accent/50",
+ isSelected && "bg-accent/80",
+ isAutoMode && "border border-violet-800"
+ )}
+ >
+
+
+
+ {getProviderIcon(config.provider, { isAutoMode })}
+
+
+
+ {config.name}
+ {isAutoMode && (
+
+ Recommended
+
+ )}
+ {isSelected && (
+
+
+
+ {isAutoMode ? "Auto Mode" : config.model_name}
+
+ {!isAutoMode && config.citations_enabled && (
+
+ Citations
+
+ )}
+
+
+
+ {!isAutoMode && (
+
handleEditLLMConfig(e, config, true)}
+ >
+
+ )}
+
+ );
+ })}
+
+ )}
+
+ {filteredLLMGlobal.length > 0 && filteredLLMUser.length > 0 && (
+
+
+ Your Configurations
+
+ {filteredLLMUser.map((config) => {
+ const isSelected = currentLLMConfig?.id === config.id;
+ return (
+ handleSelectLLM(config)}
+ className={cn(
+ "mx-2 rounded-lg mb-1 cursor-pointer group transition-all",
+ "hover:bg-accent/50",
+ isSelected && "bg-accent/80"
+ )}
+ >
+
+
+
{getProviderIcon(config.provider)}
+
+
+ {config.name}
+ {isSelected && (
+
+
+
+ {config.model_name}
+
+ {config.citations_enabled && (
+
+ Citations
+
+ )}
+
+
+
+
handleEditLLMConfig(e, config, false)}
+ >
+
+
+ );
+ })}
+
+ )}
+
+ {/* Add New LLM Config */}
+
+
{
+ setOpen(false);
+ onAddNewLLM();
+ }}
+ >
+ Add New Configuration
+
+
+
+
+
+ {/* ─── Image Tab ─── */}
+
+
+ {totalImageModels > 3 && (
+
+
+ )}
+
+
+
+
+
No image models found
+
+
+ {/* Global Image Configs */}
+ {filteredImageGlobal.length > 0 && (
+
+
+ Global Image Models
+
+ {filteredImageGlobal.map((config) => {
+ const isSelected = currentImageConfig?.id === config.id;
+ const isAuto = "is_auto_mode" in config && config.is_auto_mode;
+ return (
+ handleSelectImage(config.id)}
+ className={cn(
+ "mx-2 rounded-lg mb-1 cursor-pointer group transition-all hover:bg-accent/50",
+ isSelected && "bg-accent/80",
+ isAuto && "border border-violet-800"
+ )}
+ >
+
+
+ {getProviderIcon(config.provider, { isAutoMode: isAuto })}
+
+
+
+ {config.name}
+ {isAuto && (
+
+ Recommended
+
+ )}
+ {isSelected &&
+
+ {isAuto ? "Auto Mode" : config.model_name}
+
+
+ {onEditImage && !isAuto && (
+
{
+ e.stopPropagation();
+ setOpen(false);
+ onEditImage(config, true);
+ }}
+ >
+
+ )}
+
+ );
+ })}
+
+ )}
+
+ {/* User Image Configs */}
+ {filteredImageUser.length > 0 && (
+ <>
+ {filteredImageGlobal.length > 0 && (
+
+
+ Your Image Models
+
+ {filteredImageUser.map((config) => {
+ const isSelected = currentImageConfig?.id === config.id;
+ return (
+ handleSelectImage(config.id)}
+ className={cn(
+ "mx-2 rounded-lg mb-1 cursor-pointer group transition-all hover:bg-accent/50",
+ isSelected && "bg-accent/80"
+ )}
+ >
+
+
{getProviderIcon(config.provider)}
+
+
+ {config.name}
+ {isSelected && (
+
+
+ {config.model_name}
+
+
+ {onEditImage && (
+
{
+ e.stopPropagation();
+ setOpen(false);
+ onEditImage(config, false);
+ }}
+ >
+
+ )}
+
+ );
+ })}
+
+
+ )}
+
+ {/* Add New Image Config */}
+ {onAddNewImage && (
+
+
{
+ setOpen(false);
+ onAddNewImage();
+ }}
+ >
+ Add Image Model
+
+
+
+
+
);
diff --git a/surfsense_web/components/public-chat-snapshots/public-chat-snapshot-row.tsx b/surfsense_web/components/public-chat-snapshots/public-chat-snapshot-row.tsx
index 5f0048100..568c52ded 100644
--- a/surfsense_web/components/public-chat-snapshots/public-chat-snapshot-row.tsx
+++ b/surfsense_web/components/public-chat-snapshots/public-chat-snapshot-row.tsx
@@ -1,15 +1,29 @@
"use client";
-import { Copy, MessageSquare, Trash2 } from "lucide-react";
+import { Check, Copy, ExternalLink, MessageSquare, Trash2 } from "lucide-react";
+import Image from "next/image";
+import { useCallback, useRef, useState } from "react";
+import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import type { PublicChatSnapshotDetail } from "@/contracts/types/chat-threads.types";
+function getInitials(name: string): string {
+ const parts = name.trim().split(/\s+/);
+ if (parts.length >= 2) {
+ return (parts[0][0] + parts[1][0]).toUpperCase();
+ }
+ return name.slice(0, 2).toUpperCase();
+}
+
interface PublicChatSnapshotRowProps {
snapshot: PublicChatSnapshotDetail;
canDelete: boolean;
onCopy: (snapshot: PublicChatSnapshotDetail) => void;
onDelete: (snapshot: PublicChatSnapshotDetail) => void;
isDeleting?: boolean;
+ memberMap: Map;
}
export function PublicChatSnapshotRow({
@@ -18,57 +32,155 @@ export function PublicChatSnapshotRow({
onCopy,
onDelete,
isDeleting = false,
+ memberMap,
}: PublicChatSnapshotRowProps) {
+ const [copied, setCopied] = useState(false);
+ const copyTimeoutRef = useRef>();
+
+ const handleCopyClick = useCallback(() => {
+ onCopy(snapshot);
+ setCopied(true);
+ clearTimeout(copyTimeoutRef.current);
+ copyTimeoutRef.current = setTimeout(() => setCopied(false), 2000);
+ }, [onCopy, snapshot]);
+
const formattedDate = new Date(snapshot.created_at).toLocaleDateString(undefined, {
year: "numeric",
month: "short",
day: "numeric",
});
+ const member = snapshot.created_by_user_id ? memberMap.get(snapshot.created_by_user_id) : null;
+
return (
-
-
-
- {snapshot.thread_title}
-
-
-
{formattedDate}
-
-
+
+
+ {/* Header: Title + Actions */}
+
+
+
+ {snapshot.thread_title}
+
+
+
+
+
+
+
+
+
+
+
+ Open link
+
+
+ {canDelete && (
+
+
+
+ onDelete(snapshot)}
+ disabled={isDeleting}
+ className="h-7 w-7 text-muted-foreground hover:text-destructive"
+ >
+
+
+ Delete
+
+
+ )}
+
-
-
onCopy(snapshot)}
- className="h-8 px-2"
- title="Copy link"
- >
-
- {canDelete && (
-
onDelete(snapshot)}
- disabled={isDeleting}
- className="h-8 px-2 text-destructive hover:text-destructive hover:bg-destructive/10"
- title="Delete link"
+
+ {/* Message count badge */}
+
+
-
-
+
+ {snapshot.message_count} messages
+
+
+
+ {/* Public URL – selectable fallback for manual copy */}
+
+
+ {snapshot.public_url}
+
+
+
+
+
+ {copied ? (
+
+
+ {copied ? "Copied!" : "Copy link"}
+
+
+
+
+ {/* Footer: Date + Creator */}
+
+
{formattedDate}
+ {member && (
+ <>
+
·
+
+
+
+
+ {member.avatarUrl ? (
+
+ ) : (
+
+
+ {getInitials(member.name)}
+
+
+ )}
+
+ {member.name}
+
+
+ {member.email || member.name}
+
+
+
+ )}
+
+
+
);
}
diff --git a/surfsense_web/components/public-chat-snapshots/public-chat-snapshots-list.tsx b/surfsense_web/components/public-chat-snapshots/public-chat-snapshots-list.tsx
index 38c435059..7a07c62ee 100644
--- a/surfsense_web/components/public-chat-snapshots/public-chat-snapshots-list.tsx
+++ b/surfsense_web/components/public-chat-snapshots/public-chat-snapshots-list.tsx
@@ -10,6 +10,7 @@ interface PublicChatSnapshotsListProps {
onCopy: (snapshot: PublicChatSnapshotDetail) => void;
onDelete: (snapshot: PublicChatSnapshotDetail) => void;
deletingId?: number;
+ memberMap: Map
;
}
export function PublicChatSnapshotsList({
@@ -18,13 +19,14 @@ export function PublicChatSnapshotsList({
onCopy,
onDelete,
deletingId,
+ memberMap,
}: PublicChatSnapshotsListProps) {
if (snapshots.length === 0) {
return
+
{snapshots.map((snapshot) => (
))}
diff --git a/surfsense_web/components/public-chat-snapshots/public-chat-snapshots-manager.tsx b/surfsense_web/components/public-chat-snapshots/public-chat-snapshots-manager.tsx
index 167443f66..24d801409 100644
--- a/surfsense_web/components/public-chat-snapshots/public-chat-snapshots-manager.tsx
+++ b/surfsense_web/components/public-chat-snapshots/public-chat-snapshots-manager.tsx
@@ -1,14 +1,14 @@
"use client";
import { useAtomValue } from "jotai";
-import { AlertCircle, Globe, Info } from "lucide-react";
+import { AlertCircle, Info } from "lucide-react";
import { useCallback, useMemo, useState } from "react";
import { toast } from "sonner";
-import { myAccessAtom } from "@/atoms/members/members-query.atoms";
+import { membersAtom, myAccessAtom } from "@/atoms/members/members-query.atoms";
import { deletePublicChatSnapshotMutationAtom } from "@/atoms/public-chat-snapshots/public-chat-snapshots-mutation.atoms";
import { publicChatSnapshotsAtom } from "@/atoms/public-chat-snapshots/public-chat-snapshots-query.atoms";
import { Alert, AlertDescription } from "@/components/ui/alert";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import type { PublicChatSnapshotDetail } from "@/contracts/types/chat-threads.types";
import { PublicChatSnapshotsList } from "./public-chat-snapshots-list";
@@ -25,6 +25,22 @@ export function PublicChatSnapshotsManager({
// Data fetching
const { data: snapshotsData, isLoading, isError } = useAtomValue(publicChatSnapshotsAtom);
+ // Members for user resolution
+ const { data: members } = useAtomValue(membersAtom);
+ const memberMap = useMemo(() => {
+ const map = new Map
();
+ if (members) {
+ for (const m of members) {
+ map.set(m.user_id, {
+ name: m.user_display_name || m.user_email || "Unknown",
+ email: m.user_email || undefined,
+ avatarUrl: m.user_avatar_url || undefined,
+ });
+ }
+ }
+ return map;
+ }, [members]);
+
// Permissions
const { data: access } = useAtomValue(myAccessAtom);
const canView = useMemo(() => {
@@ -46,7 +62,6 @@ export function PublicChatSnapshotsManager({
const handleCopy = useCallback((snapshot: PublicChatSnapshotDetail) => {
const publicUrl = `${window.location.origin}/public/${snapshot.share_token}`;
navigator.clipboard.writeText(publicUrl);
- toast.success("Link copied to clipboard");
}, []);
const handleDelete = useCallback(
@@ -69,16 +84,35 @@ export function PublicChatSnapshotsManager({
// Loading state
if (isLoading) {
return (
-
-
-
-
-
-
-
+
+ {/* Info alert skeleton */}
+
+
+ {/* Cards grid skeleton */}
+
+ {["skeleton-a", "skeleton-b", "skeleton-c"].map((key) => (
+
+
+ {/* Header: Title */}
+
+
+ {/* Message count badge */}
+
+
+ {/* URL skeleton */}
+
+
+
+
+ ))}
+
);
}
@@ -110,35 +144,23 @@ export function PublicChatSnapshotsManager({
const snapshots = snapshotsData?.snapshots ?? [];
return (
-
-
-
+
+
Public chat links allow anyone with the URL to view a snapshot of a chat. These links do
not update when the original chat changes.
-
-
-
-
-
- Manage public links to chats in this search space.
-
-
-
-
-
+
-
+
Update your search space name and description. These details help identify and organize
diff --git a/surfsense_web/components/settings/image-model-manager.tsx b/surfsense_web/components/settings/image-model-manager.tsx
index 017bb5a79..80828f825 100644
--- a/surfsense_web/components/settings/image-model-manager.tsx
+++ b/surfsense_web/components/settings/image-model-manager.tsx
@@ -5,20 +5,19 @@ import {
AlertCircle,
Check,
ChevronsUpDown,
- Clock,
Edit3,
- ImageIcon,
Key,
Plus,
RefreshCw,
- Shuffle,
- Sparkles,
+ Info,
Trash2,
Wand2,
} from "lucide-react";
import { AnimatePresence, motion } from "motion/react";
-import { useCallback, useEffect, useState } from "react";
+import Image from "next/image";
+import { useCallback, useMemo, useState } from "react";
import { toast } from "sonner";
+import { membersAtom, myAccessAtom } from "@/atoms/members/members-query.atoms";
import {
createImageGenConfigMutationAtom,
deleteImageGenConfigMutationAtom,
@@ -29,7 +28,6 @@ import {
imageGenConfigsAtom,
} from "@/atoms/image-gen-config/image-gen-config-query.atoms";
import { updateLLMPreferencesMutationAtom } from "@/atoms/new-llm-config/new-llm-config-mutation.atoms";
-import { llmPreferencesAtom } from "@/atoms/new-llm-config/new-llm-config-query.atoms";
import { Alert, AlertDescription } from "@/components/ui/alert";
import {
AlertDialog,
@@ -41,9 +39,8 @@ import {
AlertDialogHeader,
AlertDialogTitle,
} from "@/components/ui/alert-dialog";
-import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent } from "@/components/ui/card";
import {
Command,
CommandEmpty,
@@ -70,6 +67,7 @@ import {
SelectValue,
} from "@/components/ui/select";
import { Separator } from "@/components/ui/separator";
+import { Skeleton } from "@/components/ui/skeleton";
import { Spinner } from "@/components/ui/spinner";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import {
@@ -78,6 +76,7 @@ import {
} from "@/contracts/enums/image-gen-providers";
import type { ImageGenerationConfig } from "@/contracts/types/new-llm-config.types";
import { cn } from "@/lib/utils";
+import { getProviderIcon } from "@/lib/provider-icons";
interface ImageModelManagerProps {
searchSpaceId: number;
@@ -93,6 +92,14 @@ const item = {
show: { opacity: 1, y: 0 },
};
+function getInitials(name: string): string {
+ const parts = name.trim().split(/\s+/);
+ if (parts.length >= 2) {
+ return (parts[0][0] + parts[1][0]).toUpperCase();
+ }
+ return name.slice(0, 2).toUpperCase();
+}
+
export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
// Image gen config atoms
const {
@@ -120,27 +127,46 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
} = useAtomValue(imageGenConfigsAtom);
const { data: globalConfigs = [], isFetching: globalLoading } =
useAtomValue(globalImageGenConfigsAtom);
- const { data: preferences = {}, isFetching: prefsLoading } = useAtomValue(llmPreferencesAtom);
+
+ // Members for user resolution
+ const { data: members } = useAtomValue(membersAtom);
+ const memberMap = useMemo(() => {
+ const map = new Map();
+ if (members) {
+ for (const m of members) {
+ map.set(m.user_id, {
+ name: m.user_display_name || m.user_email || "Unknown",
+ email: m.user_email || undefined,
+ avatarUrl: m.user_avatar_url || undefined,
+ });
+ }
+ }
+ return map;
+ }, [members]);
+
+ // Permissions
+ const { data: access } = useAtomValue(myAccessAtom);
+ const canCreate = useMemo(() => {
+ if (!access) return false;
+ if (access.is_owner) return true;
+ return access.permissions?.includes("image_generations:create") ?? false;
+ }, [access]);
+ const canDelete = useMemo(() => {
+ if (!access) return false;
+ if (access.is_owner) return true;
+ return access.permissions?.includes("image_generations:delete") ?? false;
+ }, [access]);
+ // Backend uses image_generations:create for update as well
+ const canUpdate = canCreate;
+ const isReadOnly = !canCreate && !canDelete;
// Local state
const [isDialogOpen, setIsDialogOpen] = useState(false);
const [editingConfig, setEditingConfig] = useState(null);
const [configToDelete, setConfigToDelete] = useState(null);
- // Preference state
- const [selectedPrefId, setSelectedPrefId] = useState(
- preferences.image_generation_config_id ?? ""
- );
- const [hasPrefChanges, setHasPrefChanges] = useState(false);
- const [isSavingPref, setIsSavingPref] = useState(false);
-
- useEffect(() => {
- setSelectedPrefId(preferences.image_generation_config_id ?? "");
- setHasPrefChanges(false);
- }, [preferences]);
-
const isSubmitting = isCreating || isUpdating;
- const isLoading = configsLoading || globalLoading || prefsLoading;
+ const isLoading = configsLoading || globalLoading;
const errors = [createError, updateError, deleteError, fetchError].filter(Boolean) as Error[];
// Form state for create/edit dialog
@@ -248,40 +274,6 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
setIsDialogOpen(true);
};
- const handlePrefChange = (value: string) => {
- const newVal = value === "unassigned" ? "" : parseInt(value);
- setSelectedPrefId(newVal);
- setHasPrefChanges(newVal !== (preferences.image_generation_config_id ?? ""));
- };
-
- const handleSavePref = async () => {
- setIsSavingPref(true);
- try {
- await updatePreferences({
- search_space_id: searchSpaceId,
- data: {
- image_generation_config_id:
- typeof selectedPrefId === "string"
- ? selectedPrefId
- ? parseInt(selectedPrefId)
- : undefined
- : selectedPrefId,
- },
- });
- setHasPrefChanges(false);
- toast.success("Image generation model preference saved!");
- } catch {
- toast.error("Failed to save preference");
- } finally {
- setIsSavingPref(false);
- }
- };
-
- const allConfigs = [
- ...globalConfigs.map((c) => ({ ...c, _source: "global" as const })),
- ...(userConfigs ?? []).map((c) => ({ ...c, _source: "user" as const })),
- ];
-
const selectedProvider = IMAGE_GEN_PROVIDERS.find((p) => p.value === formData.provider);
const suggestedModels = getImageGenModelsByProvider(formData.provider);
@@ -299,6 +291,14 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
+ Add Image Model
+
+ )}
+
+
+ You have read-only access to image generation
+ configurations. Contact a space owner to request additional permissions.
+
+
+
+ )}
+ {access && !isLoading && !isReadOnly && (!canCreate || !canDelete) && (
+
+
+
+ You can{" "}
+ {[canCreate && "create and edit", canDelete && "delete"]
+ .filter(Boolean)
+ .join(" and ")}{" "}
+ image model configurations
+ {!canDelete && ", but cannot delete them"}.
+
+
+
+ )}
+
{/* Global info */}
{globalConfigs.filter((g) => !("is_auto_mode" in g && g.is_auto_mode)).length > 0 && (
-
-
+
+
{globalConfigs.filter((g) => !("is_auto_mode" in g && g.is_auto_mode)).length} global
image model(s)
@@ -332,139 +360,50 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
)}
- {/* Active Preference Card */}
- {!isLoading && allConfigs.length > 0 && (
-
-
-
-
-
-
-
- Active Image Model
-
- Select which model to use for image generation
-
-
-
-
-
-
-
-
-
- Unassigned
-
- {globalConfigs.length > 0 && (
- <>
-
- Global
-
- {globalConfigs.map((c) => {
- const isAuto = "is_auto_mode" in c && c.is_auto_mode;
- return (
-
-
- {isAuto ? (
-
-
- ) : (
-
- {c.provider}
-
- )}
- {c.name}
-
-
- );
- })}
-
- )}
- {(userConfigs?.length ?? 0) > 0 && (
- <>
-
- Your Models
-
- {userConfigs?.map((c) => (
-
-
-
- {c.provider}
-
- {c.name}
- ({c.model_name})
-
-
- ))}
-
- )}
-
-
- {hasPrefChanges && (
-
-
- {isSavingPref ? "Saving..." : "Save"}
-
- {
- setSelectedPrefId(preferences.image_generation_config_id ?? "");
- setHasPrefChanges(false);
- }}
- className="text-xs h-8"
- >
- Reset
-
-
- )}
-
-
-
- )}
-
- {/* Loading */}
+ {/* Loading Skeleton */}
{isLoading && (
-
-
-
-
+
+ {/* Your Image Models Section Skeleton */}
+
+
+
+
+ {/* Cards Grid Skeleton */}
+
+ {["skeleton-a", "skeleton-b", "skeleton-c"].map((key) => (
+
+
+ {/* Header */}
+
+ {/* Provider + Model */}
+
+
+ {/* Footer */}
+
+
+
+
+ ))}
+
+
+
-
-
Your Image Models
-
-
-
-
{(userConfigs?.length ?? 0) === 0 ? (
@@ -473,99 +412,151 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
No Image Models Yet
- Add your own image generation model (DALL-E 3, GPT Image 1, etc.)
+ {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."}
-
-
+ {canCreate && (
+
+
+ )}
) : (
-
+
- {userConfigs?.map((config) => (
-
-
-
-
-
-
-
-
-
-
-
-
-
- {config.name}
-
-
- {config.provider}
-
-
-
- {config.model_name}
-
- {config.description && (
-
- {config.description}
-
- )}
-
-
-
-
-
-
-
-
- openEditDialog(config)}
- className="h-7 w-7 p-0 text-muted-foreground hover:text-foreground"
- >
-
-
- Edit
-
-
-
-
-
- setConfigToDelete(config)}
- className="h-7 w-7 p-0 text-muted-foreground hover:text-destructive"
- >
-
-
- Delete
-
-
-
+ {userConfigs?.map((config) => {
+ const member = config.user_id ? memberMap.get(config.user_id) : null;
+
+ return (
+
+
+
+ {/* Header: Name + Actions */}
+
+
+
+ {config.name}
+
+ {config.description && (
+
+ {config.description}
+
+ )}
+ {(canUpdate || canDelete) && (
+
+ {canUpdate && (
+
+
+
+ openEditDialog(config)}
+ className="h-7 w-7 text-muted-foreground hover:text-foreground"
+ >
+
+
+ Edit
+
+
+ )}
+ {canDelete && (
+
+
+
+ setConfigToDelete(config)}
+ className="h-7 w-7 text-muted-foreground hover:text-destructive"
+ >
+
+
+ Delete
+
+
+ )}
+
+ )}
-
-
-
- ))}
+
+ {/* Provider + Model */}
+
+ {getProviderIcon(config.provider, { className: "size-3.5 shrink-0" })}
+
+ {config.model_name}
+
+
+
+ {/* Footer: Date + Creator */}
+
+
+ {new Date(config.created_at).toLocaleDateString(undefined, {
+ year: "numeric",
+ month: "short",
+ day: "numeric",
+ })}
+
+ {member && (
+ <>
+
·
+
+
+
+
+ {member.avatarUrl ? (
+
+ ) : (
+
+
+ {getInitials(member.name)}
+
+
+ )}
+
+ {member.name}
+
+
+
+ {member.email || member.name}
+
+
+
+
+ )}
+
+
+
+
+ );
+ })}
)}
@@ -583,16 +574,12 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
}
}}
>
-
+ e.preventDefault()}
+ >
-
- {editingConfig ? (
-
+ {editingConfig ? "Edit Image Model" : "Add Image Model"}
{editingConfig
? "Update your image generation model"
diff --git a/surfsense_web/components/settings/llm-role-manager.tsx b/surfsense_web/components/settings/llm-role-manager.tsx
index dac68a358..8c6fbf4cf 100644
--- a/surfsense_web/components/settings/llm-role-manager.tsx
+++ b/surfsense_web/components/settings/llm-role-manager.tsx
@@ -5,15 +5,21 @@ import {
AlertCircle,
Bot,
CheckCircle,
+ CircleDashed,
FileText,
+ ImageIcon,
RefreshCw,
RotateCcw,
Save,
Shuffle,
} from "lucide-react";
-import { motion } from "motion/react";
+import { AnimatePresence, motion } from "motion/react";
import { useEffect, useState } from "react";
import { toast } from "sonner";
+import {
+ globalImageGenConfigsAtom,
+ imageGenConfigsAtom,
+} from "@/atoms/image-gen-config/image-gen-config-query.atoms";
import { updateLLMPreferencesMutationAtom } from "@/atoms/new-llm-config/new-llm-config-mutation.atoms";
import {
globalNewLLMConfigsAtom,
@@ -23,34 +29,48 @@ import {
import { Alert, AlertDescription } from "@/components/ui/alert";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent } from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import {
Select,
SelectContent,
+ SelectGroup,
SelectItem,
+ SelectLabel,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
-import { Spinner } from "@/components/ui/spinner";
+import { Skeleton } from "@/components/ui/skeleton";
import { cn } from "@/lib/utils";
+import { getProviderIcon } from "@/lib/provider-icons";
const ROLE_DESCRIPTIONS = {
agent: {
icon: Bot,
title: "Agent LLM",
description: "Primary LLM for chat interactions and agent operations",
- color: "bg-blue-100 text-blue-800 border-blue-200",
- examples: "Chat responses, agent tasks, real-time interactions",
- characteristics: ["Fast responses", "Conversational", "Agent operations"],
+ color: "text-blue-600 dark:text-blue-400",
+ bgColor: "bg-blue-500/10",
+ prefKey: "agent_llm_id" as const,
+ configType: "llm" as const,
},
document_summary: {
icon: FileText,
title: "Document Summary LLM",
- description: "Handles document summarization",
- color: "bg-purple-100 text-purple-800 border-purple-200",
- examples: "Document analysis, podcasts, research synthesis",
- characteristics: ["Large context window", "Deep reasoning", "Summarization"],
+ description: "Handles document summarization and research synthesis",
+ color: "text-purple-600 dark:text-purple-400",
+ bgColor: "bg-purple-500/10",
+ prefKey: "document_summary_llm_id" as const,
+ configType: "llm" as const,
+ },
+ image_generation: {
+ 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",
+ prefKey: "image_generation_config_id" as const,
+ configType: "image" as const,
},
};
@@ -59,7 +79,7 @@ interface LLMRoleManagerProps {
}
export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
- // Use new LLM config system
+ // LLM configs
const {
data: newLLMConfigs = [],
isFetching: configsLoading,
@@ -70,8 +90,21 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
data: globalConfigs = [],
isFetching: globalConfigsLoading,
error: globalConfigsError,
- refetch: refreshGlobalConfigs,
} = useAtomValue(globalNewLLMConfigsAtom);
+
+ // Image gen configs
+ const {
+ data: userImageConfigs = [],
+ isFetching: imageConfigsLoading,
+ error: imageConfigsError,
+ } = useAtomValue(imageGenConfigsAtom);
+ const {
+ data: globalImageConfigs = [],
+ isFetching: globalImageConfigsLoading,
+ error: globalImageConfigsError,
+ } = useAtomValue(globalImageGenConfigsAtom);
+
+ // Preferences
const {
data: preferences = {},
isFetching: preferencesLoading,
@@ -83,6 +116,7 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
const [assignments, setAssignments] = useState({
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 ?? "",
});
const [hasChanges, setHasChanges] = useState(false);
@@ -92,23 +126,24 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
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 ?? "",
};
setAssignments(newAssignments);
setHasChanges(false);
}, [preferences]);
- const handleRoleAssignment = (role: string, configId: string) => {
+ const handleRoleAssignment = (prefKey: string, configId: string) => {
const newAssignments = {
...assignments,
- [role]: configId === "unassigned" ? "" : parseInt(configId),
+ [prefKey]: configId === "unassigned" ? "" : parseInt(configId),
};
setAssignments(newAssignments);
- // Check if there are changes compared to current preferences
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 ?? "",
};
const hasChangesNow = Object.keys(newAssignments).some(
@@ -123,19 +158,13 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
const handleSave = async () => {
setIsSaving(true);
+ const toNumericOrUndefined = (val: string | number) =>
+ typeof val === "string" ? (val ? parseInt(val) : undefined) : val;
+
const numericAssignments = {
- agent_llm_id:
- typeof assignments.agent_llm_id === "string"
- ? assignments.agent_llm_id
- ? parseInt(assignments.agent_llm_id)
- : undefined
- : assignments.agent_llm_id,
- document_summary_llm_id:
- typeof assignments.document_summary_llm_id === "string"
- ? assignments.document_summary_llm_id
- ? parseInt(assignments.document_summary_llm_id)
- : undefined
- : assignments.document_summary_llm_id,
+ 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),
};
await updatePreferences({
@@ -144,7 +173,7 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
});
setHasChanges(false);
- toast.success("LLM role assignments saved successfully!");
+ toast.success("Role assignments saved successfully!");
setIsSaving(false);
};
@@ -153,6 +182,7 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
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 ?? "",
});
setHasChanges(false);
};
@@ -163,327 +193,396 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
assignments.agent_llm_id !== undefined &&
assignments.document_summary_llm_id !== "" &&
assignments.document_summary_llm_id !== null &&
- assignments.document_summary_llm_id !== undefined;
+ assignments.document_summary_llm_id !== undefined &&
+ assignments.image_generation_config_id !== "" &&
+ assignments.image_generation_config_id !== null &&
+ assignments.image_generation_config_id !== undefined;
- // Combine global and custom configs (new system)
- const allConfigs = [
+ // Combine global and custom LLM configs
+ const allLLMConfigs = [
...globalConfigs.map((config) => ({ ...config, is_global: true })),
...newLLMConfigs.filter((config) => config.id && config.id.toString().trim() !== ""),
];
- const availableConfigs = allConfigs;
+ // Combine global and custom image gen configs
+ const allImageConfigs = [
+ ...globalImageConfigs.map((config) => ({ ...config, is_global: true })),
+ ...(userImageConfigs ?? []).filter((config) => config.id && config.id.toString().trim() !== ""),
+ ];
- const isLoading = configsLoading || preferencesLoading || globalConfigsLoading;
- const hasError = configsError || preferencesError || globalConfigsError;
+ const isLoading =
+ configsLoading ||
+ preferencesLoading ||
+ globalConfigsLoading ||
+ imageConfigsLoading ||
+ globalImageConfigsLoading;
+ const hasError =
+ configsError ||
+ preferencesError ||
+ globalConfigsError ||
+ imageConfigsError ||
+ globalImageConfigsError;
+ const hasAnyConfigs = allLLMConfigs.length > 0 || allImageConfigs.length > 0;
return (
-
- {/* Header */}
-
-
-
+ {/* Header actions */}
+
+ refreshConfigs()}
+ disabled={isLoading}
+ className="flex items-center gap-2 text-xs md:text-sm h-8 md:h-9"
+ >
+
+ {isAssignmentComplete && !isLoading && !hasError && (
+ refreshConfigs()}
- disabled={isLoading}
- className="flex items-center gap-2 text-xs md:text-sm h-8 md:h-9"
+ className="text-xs gap-1.5 border-emerald-500/30 text-emerald-700 dark:text-emerald-300 bg-emerald-500/5"
>
- Refresh Configs
- Configs
-
-
+
{/* Error Alert */}
- {hasError && (
+
+ {hasError && (
+
+
+
+ {(configsError?.message ?? "Failed to load LLM configurations") ||
+ (preferencesError?.message ?? "Failed to load preferences") ||
+ (globalConfigsError?.message ?? "Failed to load global configurations")}
+
+
+
+ )}
+
+
+ {/* Loading Skeleton */}
+ {isLoading && (
+
+ {["skeleton-a", "skeleton-b", "skeleton-c"].map((key) => (
+
+
+ {/* Header: icon + title + status */}
+
+ {/* Label */}
+
+
+ {/* Summary block */}
+
+
+
+ ))}
+
+ )}
+
+ {/* No configs warning */}
+ {!isLoading && !hasError && !hasAnyConfigs && (
- {(configsError?.message ?? "Failed to load LLM configurations") ||
- (preferencesError?.message ?? "Failed to load preferences") ||
- (globalConfigsError?.message ?? "Failed to load global configurations")}
+ No configurations found. Please add at least one LLM provider or image model in the
+ respective settings tabs before assigning roles.
)}
- {/* Loading State */}
- {isLoading && (
-
-
-
-
- {configsLoading && preferencesLoading
- ? "Loading configurations and preferences..."
- : configsLoading
- ? "Loading configurations..."
- : "Loading preferences..."}
-
-
-
-
- )}
+ {/* Role Assignment Cards */}
+ {!isLoading && !hasError && hasAnyConfigs && (
+
+ {Object.entries(ROLE_DESCRIPTIONS).map(([key, role], index) => {
+ const IconComponent = role.icon;
+ const isImageRole = role.configType === "image";
+ const currentAssignment = assignments[role.prefKey as keyof typeof assignments];
- {/* Info Alert */}
- {!isLoading && !hasError && (
-
- {availableConfigs.length === 0 ? (
-
-
- No LLM configurations found. Please add at least one LLM provider in the Agent
- Configs tab before assigning roles.
-
-
- ) : !isAssignmentComplete ? (
-
-
- Complete all role assignments to enable full functionality. Each role serves
- different purposes in your workflow.
-
-
- ) : (
-
-
- All roles are assigned and ready to use! Your LLM configuration is complete.
-
-
- )}
+ // Pick the right config lists based on role type
+ const roleGlobalConfigs = isImageRole ? globalImageConfigs : globalConfigs;
+ const roleUserConfigs = isImageRole
+ ? (userImageConfigs ?? []).filter((c) => c.id && c.id.toString().trim() !== "")
+ : newLLMConfigs.filter((c) => c.id && c.id.toString().trim() !== "");
+ const roleAllConfigs = isImageRole ? allImageConfigs : allLLMConfigs;
- {/* Role Assignment Cards */}
- {availableConfigs.length > 0 && (
-
- {Object.entries(ROLE_DESCRIPTIONS).map(([key, role]) => {
- const IconComponent = role.icon;
- const currentAssignment = assignments[`${key}_llm_id` as keyof typeof assignments];
- const assignedConfig = availableConfigs.find(
- (config) => config.id === currentAssignment
- );
+ const assignedConfig = roleAllConfigs.find((config) => config.id === currentAssignment);
+ const isAssigned =
+ currentAssignment !== "" &&
+ currentAssignment !== null &&
+ currentAssignment !== undefined;
+ const isAutoMode =
+ assignedConfig && "is_auto_mode" in assignedConfig && assignedConfig.is_auto_mode;
- return (
-
-
-
-
-
-
-
-
-
{role.title}
-
- {role.description}
-
+ return (
+
+
+
+ {/* Role Header */}
+
+
+
+
+
+
{role.title}
+
+ {role.description}
+
+
+
+ {isAssigned ? (
+
+ ) : (
+
+ )}
+
+
+ Configuration
+
+
handleRoleAssignment(role.prefKey, value)}
+ >
+
+
+
+
+ Unassigned
+
+
+ {/* Global Configurations */}
+ {roleGlobalConfigs.length > 0 && (
+
+
+ Global Configurations
+
+ {roleGlobalConfigs.map((config) => {
+ const isAuto = "is_auto_mode" in config && config.is_auto_mode;
+ return (
+
+
+ {isAuto ? (
+
+
+ ) : (
+ getProviderIcon(config.provider, {
+ className: "size-3 md:size-3.5 shrink-0",
+ })
+ )}
+
+ {config.name}
+
+ {!isAuto && (
+
+ ({config.model_name})
+
+ )}
+ {isAuto && (
+
+ Recommended
+
+ )}
+
+
+ );
+ })}
+
+ )}
+
+ {/* Custom Configurations */}
+ {roleUserConfigs.length > 0 && (
+
+
+ Your Configurations
+
+ {roleUserConfigs.map((config) => (
+
+
+ {getProviderIcon(config.provider, {
+ className: "size-3 md:size-3.5 shrink-0",
+ })}
+
+ {config.name}
+
+
+ ({config.model_name})
+
+
+
+ ))}
+
+ )}
+
+
+
+ {isAutoMode ? (
+
+
+
+
+ Auto Mode
+
+
+ Routes across all available providers
+
- {currentAssignment && (
-
- )}
-
-
-
- Assign LLM Configuration:
-
-
handleRoleAssignment(`${key}_llm_id`, value)}
- >
-
-
-
-
- Unassigned
-
-
- {/* Global Configurations */}
- {globalConfigs.length > 0 && (
- <>
-
- Global Configurations
-
- {globalConfigs.map((config) => {
- const isAutoMode =
- "is_auto_mode" in config && config.is_auto_mode;
- return (
-
-
- {isAutoMode ? (
-
-
- ) : (
-
- {config.provider}
-
- )}
- {config.name}
- {!isAutoMode && (
-
- ({config.model_name})
-
- )}
- {isAutoMode ? (
-
- Recommended
-
- ) : (
-
- 🌐 Global
-
- )}
-
-
- );
- })}
-
- )}
-
- {/* Custom Configurations */}
- {newLLMConfigs.length > 0 && (
- <>
-
- Your Configurations
-
- {newLLMConfigs
- .filter(
- (config) => config.id && config.id.toString().trim() !== ""
- )
- .map((config) => (
-
-
-
- {config.provider}
-
- {config.name}
-
- ({config.model_name})
-
-
-
- ))}
-
- )}
-
-
-
-
- {"is_auto_mode" in assignedConfig && assignedConfig.is_auto_mode ? (
-
- ) : (
-
- )}
-
Assigned:
- {"is_auto_mode" in assignedConfig && assignedConfig.is_auto_mode ? (
-
- AUTO
-
- ) : (
-
- {assignedConfig.provider}
-
- )}
-
{assignedConfig.name}
- {"is_auto_mode" in assignedConfig && assignedConfig.is_auto_mode ? (
-
- Recommended
-
- ) : (
- "is_global" in assignedConfig &&
- assignedConfig.is_global && (
-
+ ) : (
+
+
+
+
+ {assignedConfig.name}
+ {"is_global" in assignedConfig && assignedConfig.is_global && (
+
🌐 Global
- )
+ )}
+
+
+ {getProviderIcon(assignedConfig.provider, {
+ className: "size-3 shrink-0",
+ })}
+
+ {assignedConfig.model_name}
+
+
+ {assignedConfig.api_base && (
+
+ {assignedConfig.api_base}
+
)}
- {"is_auto_mode" in assignedConfig && assignedConfig.is_auto_mode ? (
-
- Automatically load balances across all available LLM providers
-
- ) : (
- <>
-
- Model: {assignedConfig.model_name}
-
- {assignedConfig.api_base && (
-
- Base: {assignedConfig.api_base}
-
- )}
-
- )}
- )}
+
+
+
+ );
+ })}
+
+ )}
- {/* Action Buttons */}
- {hasChanges && (
-
-
-
+ {/* Save / Reset Bar */}
+
+ {hasChanges && (
+
+ You have unsaved changes
+
-
+
+
- )}
-
- )}
+
+ )}
+
);
}
diff --git a/surfsense_web/components/settings/model-config-manager.tsx b/surfsense_web/components/settings/model-config-manager.tsx
index bdd951349..7f228ff56 100644
--- a/surfsense_web/components/settings/model-config-manager.tsx
+++ b/surfsense_web/components/settings/model-config-manager.tsx
@@ -3,19 +3,19 @@
import { useAtomValue } from "jotai";
import {
AlertCircle,
- Bot,
- Clock,
Edit3,
FileText,
MessageSquareQuote,
Plus,
RefreshCw,
- Sparkles,
+ Info,
Trash2,
Wand2,
} from "lucide-react";
import { AnimatePresence, motion } from "motion/react";
-import { useCallback, useState } from "react";
+import Image from "next/image";
+import { useCallback, useMemo, useState } from "react";
+import { membersAtom, myAccessAtom } from "@/atoms/members/members-query.atoms";
import {
createNewLLMConfigMutationAtom,
deleteNewLLMConfigMutationAtom,
@@ -47,10 +47,12 @@ import {
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
+import { Skeleton } from "@/components/ui/skeleton";
import { Spinner } from "@/components/ui/spinner";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import type { NewLLMConfig } from "@/contracts/types/new-llm-config.types";
import { cn } from "@/lib/utils";
+import { getProviderIcon } from "@/lib/provider-icons";
interface ModelConfigManagerProps {
searchSpaceId: number;
@@ -71,23 +73,25 @@ const item = {
show: { opacity: 1, y: 0 },
};
+function getInitials(name: string): string {
+ const parts = name.trim().split(/\s+/);
+ if (parts.length >= 2) {
+ return (parts[0][0] + parts[1][0]).toUpperCase();
+ }
+ return name.slice(0, 2).toUpperCase();
+}
+
export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
// Mutations
- const {
- mutateAsync: createConfig,
- isPending: isCreating,
- error: createError,
- } = useAtomValue(createNewLLMConfigMutationAtom);
- const {
- mutateAsync: updateConfig,
- isPending: isUpdating,
- error: updateError,
- } = useAtomValue(updateNewLLMConfigMutationAtom);
- const {
- mutateAsync: deleteConfig,
- isPending: isDeleting,
- error: deleteError,
- } = useAtomValue(deleteNewLLMConfigMutationAtom);
+ const { mutateAsync: createConfig, isPending: isCreating } = useAtomValue(
+ createNewLLMConfigMutationAtom
+ );
+ const { mutateAsync: updateConfig, isPending: isUpdating } = useAtomValue(
+ updateNewLLMConfigMutationAtom
+ );
+ const { mutateAsync: deleteConfig, isPending: isDeleting } = useAtomValue(
+ deleteNewLLMConfigMutationAtom
+ );
// Queries
const {
@@ -98,13 +102,47 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
} = useAtomValue(newLLMConfigsAtom);
const { data: globalConfigs = [] } = useAtomValue(globalNewLLMConfigsAtom);
+ // Members for user resolution
+ const { data: members } = useAtomValue(membersAtom);
+ const memberMap = useMemo(() => {
+ const map = new Map
();
+ if (members) {
+ for (const m of members) {
+ map.set(m.user_id, {
+ name: m.user_display_name || m.user_email || "Unknown",
+ email: m.user_email || undefined,
+ avatarUrl: m.user_avatar_url || undefined,
+ });
+ }
+ }
+ return map;
+ }, [members]);
+
+ // Permissions
+ const { data: access } = useAtomValue(myAccessAtom);
+ const canCreate = useMemo(() => {
+ if (!access) return false;
+ if (access.is_owner) return true;
+ return access.permissions?.includes("llm_configs:create") ?? false;
+ }, [access]);
+ const canUpdate = useMemo(() => {
+ if (!access) return false;
+ if (access.is_owner) return true;
+ return access.permissions?.includes("llm_configs:update") ?? false;
+ }, [access]);
+ const canDelete = useMemo(() => {
+ if (!access) return false;
+ if (access.is_owner) return true;
+ return access.permissions?.includes("llm_configs:delete") ?? false;
+ }, [access]);
+ const isReadOnly = !canCreate && !canUpdate && !canDelete;
+
// Local state
const [isDialogOpen, setIsDialogOpen] = useState(false);
const [editingConfig, setEditingConfig] = useState(null);
const [configToDelete, setConfigToDelete] = useState(null);
const isSubmitting = isCreating || isUpdating;
- const errors = [createError, updateError, deleteError, fetchError].filter(Boolean) as Error[];
const handleFormSubmit = useCallback(
async (formData: LLMConfigFormData) => {
@@ -121,7 +159,7 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
setIsDialogOpen(false);
setEditingConfig(null);
} catch {
- // Error handled by mutation
+ // Error is displayed inside the dialog by the form
}
},
[editingConfig, createConfig, updateConfig]
@@ -133,7 +171,7 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
await deleteConfig({ id: configToDelete.id });
setConfigToDelete(null);
} catch {
- // Error handled by mutation
+ // Error handled by mutation state
}
};
@@ -153,52 +191,86 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
};
return (
-
- {/* Header */}
-
-
+
+ {/* Header actions */}
+
+ refreshConfigs()}
+ disabled={isLoading}
+ className="flex items-center gap-2 text-xs md:text-sm h-8 md:h-9"
+ >
+
+ {canCreate && (
refreshConfigs()}
- disabled={isLoading}
className="flex items-center gap-2 text-xs md:text-sm h-8 md:h-9"
>
-
-
+ )}
- {/* Error Alerts */}
+ {/* Fetch Error Alert */}
- {errors.length > 0 &&
- errors.map((err) => (
-
-
-
- {err?.message ?? "Something went wrong"}
-
-
-
- ))}
+ {fetchError && (
+
+
+
+ {fetchError?.message ?? "Failed to load configurations"}
+
+
+
+ )}
+ {/* Read-only / Limited permissions notice */}
+ {access && !isLoading && isReadOnly && (
+
+
+
+ You have read-only access to LLM configurations.
+ Contact a space owner to request additional permissions.
+
+
+
+ )}
+ {access && !isLoading && !isReadOnly && (!canCreate || !canUpdate || !canDelete) && (
+
+
+
+ You can{" "}
+ {[canCreate && "create", canUpdate && "edit", canDelete && "delete"]
+ .filter(Boolean)
+ .join(" and ")}{" "}
+ configurations
+ {!canDelete && ", but cannot delete them"}.
+
+
+
+ )}
+
{/* Global Configs Info */}
{globalConfigs.length > 0 && (
-
-
+
+
{globalConfigs.length} global configuration(s) {" "}
available from your administrator. These are pre-configured and ready to use.{" "}
-
+
Global configs: {globalConfigs.map((g) => g.name).join(", ")}
@@ -206,34 +278,44 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
)}
- {/* Loading State */}
+ {/* Loading Skeleton */}
{isLoading && (
-
-
-
-
- Loading configurations...
-
-
-
-
+
+ {["skeleton-a", "skeleton-b", "skeleton-c"].map((key) => (
+
+
+ {/* Header */}
+
+ {/* Provider + Model */}
+
+
+ {/* Feature badges */}
+
+
+ {/* Footer */}
+
+
+
+
+ ))}
+
)}
{/* Configurations List */}
{!isLoading && (
-
-
-
Your Configurations
-
-
-
-
+
{configs?.length === 0 ? (
@@ -244,24 +326,35 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
No Configurations Yet
- Create your first AI configuration to customize how your agent responds
+ {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."}
-
-
+ {canCreate && (
+
+
+ )}
) : (
-
+
{configs?.map((config) => {
+ const member = config.user_id ? memberMap.get(config.user_id) : null;
+
return (
-
-
-
- {/* Left accent bar */}
-
-
-
-
- {/* Main content */}
-
-
-
-
- {/* Title row */}
-
-
- {config.name}
-
-
-
- {config.provider}
-
- {config.citations_enabled && (
-
-
-
-
-
-
-
- Citations are enabled for this configuration
-
-
-
- )}
- {!config.use_default_system_instructions &&
- config.system_instructions && (
-
-
-
-
-
-
-
- Using custom system instructions
-
-
-
- )}
-
-
-
- {/* Model name */}
-
- {config.model_name}
-
-
- {/* Description if any */}
- {config.description && (
-
- {config.description}
-
- )}
-
- {/* Footer row */}
-
-
-
- {new Date(config.created_at).toLocaleDateString()}
-
-
-
-
-
-
- {/* Actions */}
-
+
+
+ {/* Header: Name + Actions */}
+
+
+
+ {config.name}
+
+ {config.description && (
+
+ {config.description}
+
+ )}
+
+ {(canUpdate || canDelete) && (
+
+ {canUpdate && (
openEditDialog(config)}
- className="h-7 w-7 md:h-8 md:w-8 p-0 text-muted-foreground hover:text-foreground"
+ className="h-7 w-7 text-muted-foreground hover:text-foreground"
>
-
Edit
+ )}
+ {canDelete && (
setConfigToDelete(config)}
- className="h-7 w-7 md:h-8 md:w-8 p-0 text-muted-foreground hover:text-destructive"
+ className="h-7 w-7 text-muted-foreground hover:text-destructive"
>
-
Delete
-
+ )}
+ )}
+
+
+ {/* Provider + Model */}
+
+ {getProviderIcon(config.provider, { className: "size-3.5 shrink-0" })}
+
+ {config.model_name}
+
+
+
+ {/* Feature badges */}
+
+ {config.citations_enabled && (
+
+
+ )}
+ {!config.use_default_system_instructions &&
+ config.system_instructions && (
+
+
+ )}
+
+
+ {/* Footer: Date + Creator */}
+
+
+ {new Date(config.created_at).toLocaleDateString(undefined, {
+ year: "numeric",
+ month: "short",
+ day: "numeric",
+ })}
+
+ {member && (
+ <>
+
·
+
+
+
+
+ {member.avatarUrl ? (
+
+ ) : (
+
+
+ {getInitials(member.name)}
+
+
+ )}
+
+ {member.name}
+
+
+
+ {member.email || member.name}
+
+
+
+
+ )}
@@ -408,14 +504,12 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
{/* Add/Edit Configuration Dialog */}
!open && closeDialog()}>
-
+ e.preventDefault()}
+ >
-
- {editingConfig ? (
-
{editingConfig ? "Edit Configuration" : "Create New Configuration"}
diff --git a/surfsense_web/components/settings/prompt-config-manager.tsx b/surfsense_web/components/settings/prompt-config-manager.tsx
index 64f6adf23..54058759f 100644
--- a/surfsense_web/components/settings/prompt-config-manager.tsx
+++ b/surfsense_web/components/settings/prompt-config-manager.tsx
@@ -122,7 +122,7 @@ export function PromptConfigManager({ searchSpaceId }: PromptConfigManagerProps)
-
+
System instructions apply to all AI interactions in this search space. They guide how the
diff --git a/surfsense_web/contracts/types/chat-threads.types.ts b/surfsense_web/contracts/types/chat-threads.types.ts
index df561092e..d245a4168 100644
--- a/surfsense_web/contracts/types/chat-threads.types.ts
+++ b/surfsense_web/contracts/types/chat-threads.types.ts
@@ -55,6 +55,7 @@ export const publicChatSnapshotDetail = z.object({
message_count: z.number(),
thread_id: z.number(),
thread_title: z.string(),
+ created_by_user_id: z.string().nullable().optional(),
});
/**
diff --git a/surfsense_web/contracts/types/new-llm-config.types.ts b/surfsense_web/contracts/types/new-llm-config.types.ts
index 8239505a1..b01e2abdf 100644
--- a/surfsense_web/contracts/types/new-llm-config.types.ts
+++ b/surfsense_web/contracts/types/new-llm-config.types.ts
@@ -63,6 +63,7 @@ export const newLLMConfig = z.object({
// Metadata
created_at: z.string(),
search_space_id: z.number(),
+ user_id: z.string(),
});
/**
@@ -76,6 +77,7 @@ export const newLLMConfigPublic = newLLMConfig.omit({ api_key: true });
export const createNewLLMConfigRequest = newLLMConfig.omit({
id: true,
created_at: true,
+ user_id: true,
});
export const createNewLLMConfigResponse = newLLMConfig;
@@ -110,6 +112,7 @@ export const updateNewLLMConfigRequest = z.object({
id: true,
created_at: true,
search_space_id: true,
+ user_id: true,
})
.partial(),
});
@@ -201,11 +204,13 @@ export const imageGenerationConfig = z.object({
litellm_params: z.record(z.string(), z.any()).nullable().optional(),
created_at: z.string(),
search_space_id: z.number(),
+ user_id: z.string(),
});
export const createImageGenConfigRequest = imageGenerationConfig.omit({
id: true,
created_at: true,
+ user_id: true,
});
export const createImageGenConfigResponse = imageGenerationConfig;
@@ -214,7 +219,9 @@ export const getImageGenConfigsResponse = z.array(imageGenerationConfig);
export const updateImageGenConfigRequest = z.object({
id: z.number(),
- data: imageGenerationConfig.omit({ id: true, created_at: true, search_space_id: true }).partial(),
+ data: imageGenerationConfig
+ .omit({ id: true, created_at: true, search_space_id: true, user_id: true })
+ .partial(),
});
export const updateImageGenConfigResponse = imageGenerationConfig;
diff --git a/surfsense_web/lib/provider-icons.tsx b/surfsense_web/lib/provider-icons.tsx
new file mode 100644
index 000000000..11cef5bce
--- /dev/null
+++ b/surfsense_web/lib/provider-icons.tsx
@@ -0,0 +1,119 @@
+import { Bot, Shuffle } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Ai21Icon } from "@/components/icons/providers";
+import { AnthropicIcon } from "@/components/icons/providers";
+import { AnyscaleIcon } from "@/components/icons/providers";
+import { BedrockIcon } from "@/components/icons/providers";
+import { CerebrasIcon } from "@/components/icons/providers";
+import { CloudflareIcon } from "@/components/icons/providers";
+import { CohereIcon } from "@/components/icons/providers";
+import { CometApiIcon } from "@/components/icons/providers";
+import { DatabricksIcon } from "@/components/icons/providers";
+import { DeepInfraIcon } from "@/components/icons/providers";
+import { DeepSeekIcon } from "@/components/icons/providers";
+import { FireworksAiIcon } from "@/components/icons/providers";
+import { GeminiIcon } from "@/components/icons/providers";
+import { GroqIcon } from "@/components/icons/providers";
+import { HuggingFaceIcon } from "@/components/icons/providers";
+import { MistralIcon } from "@/components/icons/providers";
+import { MoonshotIcon } from "@/components/icons/providers";
+import { NscaleIcon } from "@/components/icons/providers";
+import { OllamaIcon } from "@/components/icons/providers";
+import { OpenaiIcon } from "@/components/icons/providers";
+import { OpenRouterIcon } from "@/components/icons/providers";
+import { PerplexityIcon } from "@/components/icons/providers";
+import { QwenIcon } from "@/components/icons/providers";
+import { RecraftIcon } from "@/components/icons/providers";
+import { ReplicateIcon } from "@/components/icons/providers";
+import { SambaNovaIcon } from "@/components/icons/providers";
+import { TogetherAiIcon } from "@/components/icons/providers";
+import { VertexAiIcon } from "@/components/icons/providers";
+import { XaiIcon } from "@/components/icons/providers";
+import { XinferenceIcon } from "@/components/icons/providers";
+import { ZhipuIcon } from "@/components/icons/providers";
+
+/**
+ * Returns a Lucide icon element for the given LLM / image-gen provider.
+ * Accepts an optional `className` override for the icon size.
+ */
+export function getProviderIcon(
+ provider: string,
+ { isAutoMode, className = "size-4" }: { isAutoMode?: boolean; className?: string } = {}
+) {
+ if (isAutoMode || provider?.toUpperCase() === "AUTO") {
+ return >;
+ export default content;
+}