-
+
-
+ 
+
+ );
+}
+
+function ScrollingColumn({
+ cards,
+ scrollUp,
+ duration,
+ colIndex,
+ isEdge,
+ isEdgeAdjacent,
+}: {
+ cards: number[];
+ scrollUp: boolean;
+ duration: number;
+ colIndex: number;
+ isEdge: boolean;
+ isEdgeAdjacent: boolean;
+}) {
+ // Edge columns get a heavy vertical mask; edge-adjacent columns get a lighter one to smooth the transition
+ const columnMask = isEdge
+ ? {
+ maskImage:
+ "linear-gradient(to bottom, transparent 0%, transparent 20%, black 40%, black 60%, transparent 80%, transparent 100%)",
+ WebkitMaskImage:
+ "linear-gradient(to bottom, transparent 0%, transparent 20%, black 40%, black 60%, transparent 80%, transparent 100%)",
+ }
+ : isEdgeAdjacent
+ ? {
+ maskImage:
+ "linear-gradient(to bottom, transparent 0%, transparent 10%, black 30%, black 70%, transparent 90%, transparent 100%)",
+ WebkitMaskImage:
+ "linear-gradient(to bottom, transparent 0%, transparent 10%, black 30%, black 70%, transparent 90%, transparent 100%)",
+ }
+ : {};
+
+ const cardSet = cards.map((integrationIndex, i) => (
+
+ {/* Outer div has NO gap — each inner copy uses pb matching the gap so both halves are identical in height → seamless -50% loop */}
+
);
}
export default function ExternalIntegrations() {
- const [size, setSize] = useState({ width: 0, height: 0 });
-
- useEffect(() => {
- const updateSize = () => setSize({ width: window.innerWidth, height: window.innerHeight });
- updateSize();
- window.addEventListener("resize", updateSize);
- return () => window.removeEventListener("resize", updateSize);
- }, []);
-
- const baseWidth = Math.min(size.width * 0.8, 700);
- const centerX = baseWidth / 2;
- const centerY = baseWidth * 0.5;
-
- const iconSize =
- size.width < 480
- ? Math.max(24, baseWidth * 0.05)
- : size.width < 768
- ? Math.max(28, baseWidth * 0.06)
- : Math.max(32, baseWidth * 0.07);
-
return (
-
+
-
- {/* Orbit icons */}
- {Array.from({ length: count }).map((_, index) => {
- const actualIndex = startIndex + index;
- // Skip if we've run out of integrations
- if (actualIndex >= INTEGRATIONS.length) return null;
-
- const angle = (index / (count - 1)) * 180;
- const x = radius * Math.cos((angle * Math.PI) / 180);
- const y = radius * Math.sin((angle * Math.PI) / 180);
- const integration = INTEGRATIONS[actualIndex];
-
- // Tooltip positioning — above or below based on angle
- const tooltipAbove = angle > 90;
-
- return (
-
+ {cardSet}
+
+
+ {cardSet}
+
-
-
- {/* Tooltip */}
-
- );
- })}
-
+
- {integration.name}
-
-
-
-
+ {/* Heading */}
+
diff --git a/surfsense_web/public/connectors/composio.svg b/surfsense_web/public/connectors/composio.svg
deleted file mode 100644
index 7c06babeb..000000000
--- a/surfsense_web/public/connectors/composio.svg
+++ /dev/null
@@ -1,12 +0,0 @@
-
From 2add10629666f88a0877cbdb445368c3171657f9 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Mon, 9 Feb 2026 03:15:27 +0530
Subject: [PATCH 05/34] feat: enhance rate limiting by allowing requests to
proceed when Redis is unavailable, with logging for monitoring
---
surfsense_backend/app/app.py | 22 ++++++++++++++++------
1 file changed, 16 insertions(+), 6 deletions(-)
diff --git a/surfsense_backend/app/app.py b/surfsense_backend/app/app.py
index f7d4601ef..541393564 100644
--- a/surfsense_backend/app/app.py
+++ b/surfsense_backend/app/app.py
@@ -84,17 +84,27 @@ def _check_rate_limit(
"""
Check per-IP rate limit using Redis. Raises 429 if exceeded.
Uses atomic INCR + EXPIRE to avoid race conditions.
+ Fails open (allows request) if Redis is unavailable.
"""
client_ip = get_remote_address(request)
key = f"surfsense:auth_rate_limit:{scope}:{client_ip}"
- r = _get_rate_limit_redis()
+ try:
+ r = _get_rate_limit_redis()
- # Atomic: increment first, then set TTL if this is a new key
- pipe = r.pipeline()
- pipe.incr(key)
- pipe.expire(key, window_seconds)
- result = pipe.execute()
+ # Atomic: increment first, then set TTL if this is a new key
+ pipe = r.pipeline()
+ pipe.incr(key)
+ pipe.expire(key, window_seconds)
+ result = pipe.execute()
+ except (redis.exceptions.RedisError, OSError) as exc:
+ # Redis unavailable — fail open to preserve auth availability.
+ # SlowAPI middleware provides a secondary rate-limiting layer.
+ rate_limit_logger.warning(
+ f"Redis unavailable for rate limiting ({scope}), "
+ f"allowing request from {client_ip}: {exc}"
+ )
+ return
current_count = result[0] # INCR returns the new value
From c1016591dab9f4b95aa5960db55d8872c4568bfa Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Mon, 9 Feb 2026 12:57:32 +0530
Subject: [PATCH 06/34] refactor: update authentication error handling to
prevent user enumeration and improve error messages
---
surfsense_backend/app/app.py | 2 +-
surfsense_backend/app/users.py | 40 +++++++-------------------------
surfsense_web/lib/auth-errors.ts | 16 ++++---------
3 files changed, 14 insertions(+), 44 deletions(-)
diff --git a/surfsense_backend/app/app.py b/surfsense_backend/app/app.py
index 541393564..e35b310e0 100644
--- a/surfsense_backend/app/app.py
+++ b/surfsense_backend/app/app.py
@@ -62,7 +62,7 @@ def _rate_limit_exceeded_handler(request: Request, exc: RateLimitExceeded):
# ============================================================================
# Stricter per-IP limits on auth endpoints to prevent:
# - Brute force password attacks
-# - User enumeration via LOGIN_USER_NOT_FOUND / REGISTER_USER_ALREADY_EXISTS
+# - User enumeration via REGISTER_USER_ALREADY_EXISTS
# - Email spam via forgot-password
#
# These use direct Redis INCR+EXPIRE for simplicity and reliability.
diff --git a/surfsense_backend/app/users.py b/surfsense_backend/app/users.py
index b68461fc0..7ec657781 100644
--- a/surfsense_backend/app/users.py
+++ b/surfsense_backend/app/users.py
@@ -2,7 +2,7 @@ import logging
import uuid
import httpx
-from fastapi import Depends, HTTPException, Request, Response
+from fastapi import Depends, Request, Response
from fastapi.responses import JSONResponse, RedirectResponse
from fastapi_users import BaseUserManager, FastAPIUsers, UUIDIDMixin, models
from fastapi_users.authentication import (
@@ -47,6 +47,14 @@ if config.AUTH_TYPE == "GOOGLE":
class UserManager(UUIDIDMixin, BaseUserManager[User, uuid.UUID]):
+ """
+ Custom user manager extending fastapi-users BaseUserManager.
+
+ Authentication returns a generic error for both non-existent accounts
+ and incorrect passwords to comply with OWASP WSTG-IDNT-04 and
+ prevent user enumeration attacks.
+ """
+
reset_password_token_secret = SECRET
verification_token_secret = SECRET
@@ -180,36 +188,6 @@ class UserManager(UUIDIDMixin, BaseUserManager[User, uuid.UUID]):
):
print(f"Verification requested for user {user.id}. Verification token: {token}")
- async def authenticate(self, credentials):
- """
- Override to return a specific error when user account doesn't exist,
- instead of a generic LOGIN_BAD_CREDENTIALS.
- """
- from fastapi_users.exceptions import UserNotExists
-
- try:
- user = await self.get_by_email(credentials.username)
- except UserNotExists:
- # Still hash the password to mitigate timing attacks
- self.password_helper.hash(credentials.password)
- logger.warning(
- f"Login attempt for non-existent account: {credentials.username}"
- )
- raise HTTPException(
- status_code=400,
- detail="LOGIN_USER_NOT_FOUND",
- ) from None
-
- verified, updated_password_hash = self.password_helper.verify_and_update(
- credentials.password, user.hashed_password
- )
- if not verified:
- logger.warning(f"Failed login attempt (wrong password) for user: {user.id}")
- return None
- if updated_password_hash is not None:
- await self.user_db.update(user, {"hashed_password": updated_password_hash})
- return user
-
async def get_user_manager(user_db: SQLAlchemyUserDatabase = Depends(get_user_db)):
yield UserManager(user_db)
diff --git a/surfsense_web/lib/auth-errors.ts b/surfsense_web/lib/auth-errors.ts
index c1f0a3be3..d1816cbdd 100644
--- a/surfsense_web/lib/auth-errors.ts
+++ b/surfsense_web/lib/auth-errors.ts
@@ -20,8 +20,8 @@ const AUTH_ERROR_MESSAGES: AuthErrorMapping = {
description: "Your account may be suspended or restricted",
},
"404": {
- title: "Account not found",
- description: "No account exists with this email address",
+ title: "Not found",
+ description: "The requested resource was not found",
},
"409": {
title: "Account conflict",
@@ -46,12 +46,8 @@ const AUTH_ERROR_MESSAGES: AuthErrorMapping = {
// FastAPI specific errors
LOGIN_BAD_CREDENTIALS: {
- title: "Invalid credentials",
- description: "The email or password you entered is incorrect",
- },
- LOGIN_USER_NOT_FOUND: {
- title: "Account not found",
- description: "No account exists with this email address. Please sign up first.",
+ title: "Login failed",
+ description: "Invalid email or password. If you don't have an account, please sign up.",
},
LOGIN_USER_NOT_VERIFIED: {
title: "Account not verified",
@@ -147,10 +143,6 @@ export function getAuthErrorMessage(errorCode: string, returnTitle: boolean = fa
if (!errorInfo) {
const patterns = [
{ pattern: /credential|password|email/i, code: "LOGIN_BAD_CREDENTIALS" },
- {
- pattern: /not found|no account|does not exist|user not found/i,
- code: "LOGIN_USER_NOT_FOUND",
- },
{ pattern: /verify|verification/i, code: "LOGIN_USER_NOT_VERIFIED" },
{ pattern: /inactive|disabled|suspended/i, code: "USER_INACTIVE" },
{ pattern: /exists|duplicate/i, code: "REGISTER_USER_ALREADY_EXISTS" },
From 5b5e4823057bb22d021008576d46c71a3766607e Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Mon, 9 Feb 2026 13:09:38 +0530
Subject: [PATCH 07/34] feat: implement in-memory fallback for rate limiting
when Redis is unavailable, enhancing reliability and logging
---
surfsense_backend/app/app.py | 50 +++++++++++++++++++++++++++++++-----
1 file changed, 44 insertions(+), 6 deletions(-)
diff --git a/surfsense_backend/app/app.py b/surfsense_backend/app/app.py
index e35b310e0..70269e723 100644
--- a/surfsense_backend/app/app.py
+++ b/surfsense_backend/app/app.py
@@ -1,6 +1,9 @@
import logging
import os
+import time
+from collections import defaultdict
from contextlib import asynccontextmanager
+from threading import Lock
import redis
from fastapi import Depends, FastAPI, HTTPException, Request, status
@@ -58,17 +61,22 @@ def _rate_limit_exceeded_handler(request: Request, exc: RateLimitExceeded):
# ============================================================================
-# Auth-Specific Rate Limits (Redis-backed FastAPI dependencies)
+# Auth-Specific Rate Limits (Redis-backed with in-memory fallback)
# ============================================================================
# Stricter per-IP limits on auth endpoints to prevent:
# - Brute force password attacks
# - User enumeration via REGISTER_USER_ALREADY_EXISTS
# - Email spam via forgot-password
#
-# These use direct Redis INCR+EXPIRE for simplicity and reliability.
+# Primary: Redis INCR+EXPIRE (shared across all workers).
+# Fallback: In-memory sliding window (per-worker) when Redis is unavailable.
# Same Redis instance as SlowAPI / Celery.
_rate_limit_redis: redis.Redis | None = None
+# In-memory fallback rate limiter (per-worker, used only when Redis is down)
+_memory_rate_limits: dict[str, list[float]] = defaultdict(list)
+_memory_lock = Lock()
+
def _get_rate_limit_redis() -> redis.Redis:
"""Get or create Redis client for auth rate limiting."""
@@ -78,13 +86,43 @@ def _get_rate_limit_redis() -> redis.Redis:
return _rate_limit_redis
+def _check_rate_limit_memory(
+ client_ip: str, max_requests: int, window_seconds: int, scope: str
+):
+ """
+ In-memory fallback rate limiter using a sliding window.
+ Used only when Redis is unavailable. Per-worker only (not shared),
+ so effective limit = max_requests x num_workers.
+ """
+ key = f"{scope}:{client_ip}"
+ now = time.monotonic()
+
+ with _memory_lock:
+ # Evict timestamps outside the current window
+ _memory_rate_limits[key] = [
+ t for t in _memory_rate_limits[key] if now - t < window_seconds
+ ]
+
+ if len(_memory_rate_limits[key]) >= max_requests:
+ rate_limit_logger.warning(
+ f"Rate limit exceeded (in-memory fallback) on {scope} for IP {client_ip} "
+ f"({len(_memory_rate_limits[key])}/{max_requests} in {window_seconds}s)"
+ )
+ raise HTTPException(
+ status_code=429,
+ detail="RATE_LIMIT_EXCEEDED",
+ )
+
+ _memory_rate_limits[key].append(now)
+
+
def _check_rate_limit(
request: Request, max_requests: int, window_seconds: int, scope: str
):
"""
Check per-IP rate limit using Redis. Raises 429 if exceeded.
Uses atomic INCR + EXPIRE to avoid race conditions.
- Fails open (allows request) if Redis is unavailable.
+ Falls back to in-memory sliding window if Redis is unavailable.
"""
client_ip = get_remote_address(request)
key = f"surfsense:auth_rate_limit:{scope}:{client_ip}"
@@ -98,12 +136,12 @@ def _check_rate_limit(
pipe.expire(key, window_seconds)
result = pipe.execute()
except (redis.exceptions.RedisError, OSError) as exc:
- # Redis unavailable — fail open to preserve auth availability.
- # SlowAPI middleware provides a secondary rate-limiting layer.
+ # Redis unavailable — fall back to in-memory rate limiting
rate_limit_logger.warning(
f"Redis unavailable for rate limiting ({scope}), "
- f"allowing request from {client_ip}: {exc}"
+ f"falling back to in-memory limiter for {client_ip}: {exc}"
)
+ _check_rate_limit_memory(client_ip, max_requests, window_seconds, scope)
return
current_count = result[0] # INCR returns the new value
From 038cdb3ed32e7a77a10575431185825d8933c5dd Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Mon, 9 Feb 2026 15:24:38 +0530
Subject: [PATCH 08/34] feat: add new integrations and update icon handling in
the homepage
---
.../components/homepage/integrations.tsx | 35 +++++++++----
.../contracts/enums/connectorIcons.tsx | 10 ++--
.../public/connectors/circleback.svg | 19 +++++++
surfsense_web/public/connectors/linkup.svg | 50 +++++++++++++++++++
4 files changed, 98 insertions(+), 16 deletions(-)
create mode 100644 surfsense_web/public/connectors/circleback.svg
create mode 100644 surfsense_web/public/connectors/linkup.svg
diff --git a/surfsense_web/components/homepage/integrations.tsx b/surfsense_web/components/homepage/integrations.tsx
index d8361d721..fc250e65b 100644
--- a/surfsense_web/components/homepage/integrations.tsx
+++ b/surfsense_web/components/homepage/integrations.tsx
@@ -1,6 +1,7 @@
"use client";
import type React from "react";
+import Image from "next/image";
interface Integration {
name: string;
@@ -44,15 +45,24 @@ const INTEGRATIONS: Integration[] = [
// Media
{ name: "YouTube", icon: "/connectors/youtube.svg" },
+
+ // Search
+ { name: "Linkup", icon: "/connectors/linkup.svg" },
+
+ // Meetings
+ { name: "Circleback", icon: "/connectors/circleback.svg" },
+
+ // AI
+ { name: "MCP", icon: "/connectors/modelcontextprotocol.svg" },
];
-// 5 vertical columns — 21 icons spread across categories
+// 5 vertical columns — 23 icons spread across categories
const COLUMNS: number[][] = [
- [2, 5, 10, 0, 11],
+ [2, 5, 10, 0, 21, 11],
[1, 7, 20, 17],
- [13, 6, 4, 16],
+ [13, 6, 23, 4, 16],
[12, 8, 15, 18],
- [3, 9, 14, 19],
+ [3, 9, 14, 22, 19],
];
// Different scroll speeds per column for organic feel (seconds)
@@ -61,7 +71,7 @@ const SCROLL_DURATIONS = [26, 32, 22, 30, 28];
function IntegrationCard({ integration }: { integration: Integration }) {
return (
Delete document?
- This action cannot be undone. This will permanently delete this document from your search space.
+ This action cannot be undone. This will permanently delete this document from your
+ search space.
diff --git a/surfsense_web/components/homepage/integrations.tsx b/surfsense_web/components/homepage/integrations.tsx
index fc250e65b..662387de5 100644
--- a/surfsense_web/components/homepage/integrations.tsx
+++ b/surfsense_web/components/homepage/integrations.tsx
@@ -73,21 +73,19 @@ function IntegrationCard({ integration }: { integration: Integration }) {
Integrations
-- Integrate with your team's most important tools -
+
+
+ Integrate with your
+
+
-
+ Integrate with your
+
+ team's most important tools
+
+
-
+ {/* 5 scrolling columns */}
+
+ {COLUMNS.map((column, colIndex) => (
+
-
+
);
}
diff --git a/surfsense_web/contracts/enums/connectorIcons.tsx b/surfsense_web/contracts/enums/connectorIcons.tsx
index 18a872d94..e29e5be6e 100644
--- a/surfsense_web/contracts/enums/connectorIcons.tsx
+++ b/surfsense_web/contracts/enums/connectorIcons.tsx
@@ -1,4 +1,4 @@
-import { IconLinkPlus, IconUsersGroup } from "@tabler/icons-react";
+import { IconUsersGroup } from "@tabler/icons-react";
import {
BookOpen,
File,
@@ -15,11 +15,11 @@ import { EnumConnectorName } from "./connector";
export const getConnectorIcon = (connectorType: EnumConnectorName | string, className?: string) => {
const iconProps = { className: className || "h-4 w-4" };
- const imgProps = { className: className || "h-5 w-5", width: 20, height: 20 };
+ const imgProps = { className: `${className || "h-5 w-5"} select-none pointer-events-none`, width: 20, height: 20, draggable: false as const };
switch (connectorType) {
- case EnumConnectorName.LINKUP_API:
- return
-
);
}
@@ -132,7 +130,10 @@ function ScrollingColumn({
));
return (
-
+
{/* Outer div has NO gap — each inner copy uses pb matching the gap so both halves are identical in height → seamless -50% loop */}
;
}
export function PublicChatSnapshotRow({
@@ -18,6 +31,7 @@ export function PublicChatSnapshotRow({
onCopy,
onDelete,
isDeleting = false,
+ memberMap,
}: PublicChatSnapshotRowProps) {
const formattedDate = new Date(snapshot.created_at).toLocaleDateString(undefined, {
year: "numeric",
@@ -25,50 +39,127 @@ export function PublicChatSnapshotRow({
day: "numeric",
});
+ const member = snapshot.created_by_user_id
+ ? memberMap.get(snapshot.created_by_user_id)
+ : null;
+
return (
-
{/* Heading */}
@@ -203,15 +204,15 @@ export default function ExternalIntegrations() {
{/* 5 scrolling columns */}
diff --git a/surfsense_web/contracts/enums/connectorIcons.tsx b/surfsense_web/contracts/enums/connectorIcons.tsx
index e29e5be6e..c9375a5ca 100644
--- a/surfsense_web/contracts/enums/connectorIcons.tsx
+++ b/surfsense_web/contracts/enums/connectorIcons.tsx
@@ -15,11 +15,16 @@ import { EnumConnectorName } from "./connector";
export const getConnectorIcon = (connectorType: EnumConnectorName | string, className?: string) => {
const iconProps = { className: className || "h-4 w-4" };
- const imgProps = { className: `${className || "h-5 w-5"} select-none pointer-events-none`, width: 20, height: 20, draggable: false as const };
+ const imgProps = {
+ className: `${className || "h-5 w-5"} select-none pointer-events-none`,
+ width: 20,
+ height: 20,
+ draggable: false as const,
+ };
switch (connectorType) {
- case EnumConnectorName.LINKUP_API:
- return
{COLUMNS.map((column, colIndex) => (
-
- ;
}
export function PublicChatSnapshotsList({
@@ -18,13 +19,14 @@ export function PublicChatSnapshotsList({
onCopy,
onDelete,
deletingId,
+ memberMap,
}: PublicChatSnapshotsListProps) {
if (snapshots.length === 0) {
return
-
+
+ {/* Footer: Date + Creator */}
+ - {snapshot.thread_title} -
-
- {formattedDate}
-
-
+
+ {/* Header: Title + Actions */}
+
-
+
- (e.target as HTMLInputElement).select()}
- />
-
+
+ + {snapshot.thread_title} +
+
+
+
+
+
+
+ Copy link
+
+
+
+
+
+
+
+ Open link
+
+
+ {canDelete && (
+
+
+
+
+
+ Delete
+
+
+ )}
+
-
- {canDelete && (
-
+
+
+ {formattedDate}
+
+ {member && (
+ <>
+ ·
+
+
+
+
+
+ {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..8daf9a07f 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
+ {member.avatarUrl ? (
+
+
+
+ {getInitials(member.name)}
+
+
+ )}
+
+ {member.name}
+
+
+ ();
+ 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(() => {
@@ -69,16 +84,13 @@ export function PublicChatSnapshotsManager({
// Loading state
if (isLoading) {
return (
- (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 errors = [createError, updateError, deleteError, fetchError].filter(Boolean) as Error[];
@@ -290,39 +276,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);
@@ -402,135 +355,9 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
)}
- {/* Active Preference Card */}
- {!isLoading && allConfigs.length > 0 && (
-
-
-
-
-
-
- {hasPrefChanges && (
-
-
-
- )}
-
{/* Loading Skeleton */}
{isLoading && (
{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..07ff57c0d 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,13 @@
"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 { Skeleton } from "@/components/ui/skeleton";
import type { PublicChatSnapshotDetail } from "@/contracts/types/chat-threads.types";
import { PublicChatSnapshotsList } from "./public-chat-snapshots-list";
@@ -25,6 +24,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
-
-
-
-
-
-
+
+
Complete all role assignments to enable full functionality. Each role serves
@@ -247,7 +247,7 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
) : (
-
+
All roles are assigned and ready to use! Your LLM configuration is complete.
diff --git a/surfsense_web/components/settings/model-config-manager.tsx b/surfsense_web/components/settings/model-config-manager.tsx
index bdd951349..3ee5458b8 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 } from "@/atoms/members/members-query.atoms";
import {
createNewLLMConfigMutationAtom,
deleteNewLLMConfigMutationAtom,
@@ -71,6 +71,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 ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
// Mutations
const {
@@ -98,6 +106,22 @@ 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]);
+
// Local state
const [isDialogOpen, setIsDialogOpen] = useState(false);
const [editingConfig, setEditingConfig] = useState(null);
@@ -153,21 +177,27 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
};
return (
-
{/* Provider + Model */}
From 5ce6011c9b448116c6ee34cafce4fa8ed0749123 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Mon, 9 Feb 2026 19:38:07 +0530
Subject: [PATCH 14/34] refactor: streamline image model manager by removing
unused preference state and related logic
---
.../settings/image-model-manager.tsx | 179 +-----------------
1 file changed, 3 insertions(+), 176 deletions(-)
diff --git a/surfsense_web/components/settings/image-model-manager.tsx b/surfsense_web/components/settings/image-model-manager.tsx
index cba2295c6..123cc1a8f 100644
--- a/surfsense_web/components/settings/image-model-manager.tsx
+++ b/surfsense_web/components/settings/image-model-manager.tsx
@@ -6,18 +6,16 @@ import {
Check,
ChevronsUpDown,
Edit3,
- ImageIcon,
Key,
Plus,
RefreshCw,
- Shuffle,
Info,
Trash2,
Wand2,
} from "lucide-react";
import { AnimatePresence, motion } from "motion/react";
import Image from "next/image";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
import { toast } from "sonner";
import { membersAtom, myAccessAtom } from "@/atoms/members/members-query.atoms";
import {
@@ -44,7 +42,7 @@ import {
} 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,
@@ -130,7 +128,7 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
} = useAtomValue(imageGenConfigsAtom);
const { data: globalConfigs = [], isFetching: globalLoading } =
useAtomValue(globalImageGenConfigsAtom);
- const { data: preferences = {}, isFetching: prefsLoading } = useAtomValue(llmPreferencesAtom);
+ const { isFetching: prefsLoading } = useAtomValue(llmPreferencesAtom);
// Members for user resolution
const { data: members } = useAtomValue(membersAtom);
@@ -169,18 +167,6 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
const [editingConfig, setEditingConfig] = useState
+
);
}
@@ -110,35 +122,23 @@ export function PublicChatSnapshotsManager({
const snapshots = snapshotsData?.snapshots ?? [];
return (
-
+
-
- ();
+ 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,
+ });
+ }
+ }
+ return map;
+ }, [members]);
+
// Local state
const [isDialogOpen, setIsDialogOpen] = useState(false);
const [editingConfig, setEditingConfig] = useState(null);
@@ -320,16 +337,16 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
{/* 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)
- {" "}
- available from your administrator.
-
-
+
+
+
+ {globalConfigs.filter((g) => !("is_auto_mode" in g && g.is_auto_mode)).length} global
+ image model(s)
+ {" "}
+ available from your administrator.
+
+
)}
{/* Active Preference Card */}
@@ -521,9 +538,17 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
{config.description}
)}
-
diff --git a/surfsense_web/components/settings/llm-role-manager.tsx b/surfsense_web/components/settings/llm-role-manager.tsx
index dac68a358..d91150a4f 100644
--- a/surfsense_web/components/settings/llm-role-manager.tsx
+++ b/surfsense_web/components/settings/llm-role-manager.tsx
@@ -239,7 +239,7 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
) : !isAssignmentComplete ? (
-
+
+
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.
-
-
-
-
-
+
);
}
diff --git a/surfsense_web/components/settings/image-model-manager.tsx b/surfsense_web/components/settings/image-model-manager.tsx
index e87cc9a95..013b7cae2 100644
--- a/surfsense_web/components/settings/image-model-manager.tsx
+++ b/surfsense_web/components/settings/image-model-manager.tsx
@@ -12,13 +12,15 @@ import {
Plus,
RefreshCw,
Shuffle,
- Sparkles,
+ Info,
Trash2,
+ User,
Wand2,
} from "lucide-react";
import { AnimatePresence, motion } from "motion/react";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
import { toast } from "sonner";
+import { membersAtom } from "@/atoms/members/members-query.atoms";
import {
createImageGenConfigMutationAtom,
deleteImageGenConfigMutationAtom,
@@ -122,6 +124,21 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
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
-
+
+
+ {config.user_id && memberMap.get(config.user_id) && (
+
+
+ )}
- {/* Header */}
-
+
+
+ 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 && (
@@ -279,17 +328,21 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
-
+ {canCreate && (
+
+ )}
@@ -325,38 +378,44 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
)}
+ {(canUpdate || canDelete) && (
- (null);
@@ -187,13 +206,15 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
{/* Fetch Error Alert */}
@@ -215,6 +236,34 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
)}
+ {/* Read-only / Limited permissions notice */}
+ {access && !isLoading && isReadOnly && (
+
-
-
+
+ {/* Header actions */}
+
-
-
+
+
{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(", ")}
@@ -222,18 +252,7 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
{/* Configurations List */}
{!isLoading && (
-
{/* Provider + Model */}
diff --git a/surfsense_web/components/settings/model-config-manager.tsx b/surfsense_web/components/settings/model-config-manager.tsx
index 238286a96..1666fae20 100644
--- a/surfsense_web/components/settings/model-config-manager.tsx
+++ b/surfsense_web/components/settings/model-config-manager.tsx
@@ -15,7 +15,7 @@ import {
import { AnimatePresence, motion } from "motion/react";
import Image from "next/image";
import { useCallback, useMemo, useState } from "react";
-import { membersAtom } from "@/atoms/members/members-query.atoms";
+import { membersAtom, myAccessAtom } from "@/atoms/members/members-query.atoms";
import {
createNewLLMConfigMutationAtom,
deleteNewLLMConfigMutationAtom,
@@ -120,6 +120,25 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
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
+
+
{/* Error Alerts */}
@@ -193,12 +223,12 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
{/* Global Configs Info */}
{globalConfigs.length > 0 && (
-
-
- {editingConfig ? (
-
{editingConfig ? "Edit Configuration" : "Create New Configuration"}
From 83033cebb9d4393a756ab2e266e3a8667a61014e Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Mon, 9 Feb 2026 19:37:59 +0530
Subject: [PATCH 13/34] feat: implement permission-based access controls for
image and model configuration managers
---
.../settings/image-model-manager.tsx | 140 +++++++++++-----
.../settings/model-config-manager.tsx | 153 ++++++++++++------
2 files changed, 204 insertions(+), 89 deletions(-)
diff --git a/surfsense_web/components/settings/image-model-manager.tsx b/surfsense_web/components/settings/image-model-manager.tsx
index 445d87a2a..cba2295c6 100644
--- a/surfsense_web/components/settings/image-model-manager.tsx
+++ b/surfsense_web/components/settings/image-model-manager.tsx
@@ -19,7 +19,7 @@ import { AnimatePresence, motion } from "motion/react";
import Image from "next/image";
import { useCallback, useEffect, useMemo, useState } from "react";
import { toast } from "sonner";
-import { membersAtom } from "@/atoms/members/members-query.atoms";
+import { membersAtom, myAccessAtom } from "@/atoms/members/members-query.atoms";
import {
createImageGenConfigMutationAtom,
deleteImageGenConfigMutationAtom,
@@ -148,6 +148,22 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
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);
@@ -344,6 +360,34 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
))}
+ {/* Read-only / Limited permissions notice */}
+ {access && !isLoading && isReadOnly && (
+
+
+
+ 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 && (
@@ -530,12 +574,14 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
{(userConfigs?.length ?? 0) === 0 ? (
@@ -546,12 +592,16 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
+ {(canUpdate || canDelete) && (
-
-
+ Your Configurations
- -
{configs?.length === 0 ? (
@@ -259,9 +278,16 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
) : (
-
+
{configs?.map((config) => {
+ const member = config.user_id ? memberMap.get(config.user_id) : null;
+
return (
-
-
-
) : (
-
+
- {userConfigs?.map((config) => (
-
-
-
-
@@ -444,12 +460,7 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
onOpenAutoFocus={(e) => e.preventDefault()}
>
- {/* Left accent bar */}
-
+
+
+ {/* Header: Name + Actions */}
+
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 07ff57c0d..a11e11198 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
@@ -8,6 +8,7 @@ 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 } 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";
@@ -85,11 +86,31 @@ export function PublicChatSnapshotsManager({
if (isLoading) {
return (
+
-
+
+ + {config.name} +
+ {config.description && ( ++ {config.description} +
+ )} +
+
+
+
+
+
+ Edit
+
+
+
+
+
+
+
+ Delete
+
+
+
+
-
)}
-
+
{member.name}
- {/* Main content */}
-
+ {member.email || member.name}
+
+
+
+
+ )}
@@ -408,7 +439,10 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
{/* Add/Edit Configuration Dialog */}
-
+
+
-
-
- {/* Title row */}
-
-
-
-
- {/* Actions */}
- - {config.name} -
-
-
- {config.provider}
-
- {config.citations_enabled && (
-
-
-
-
-
-
-
- Citations are enabled for this configuration
-
-
-
+ {/* Provider + Model */}
+
-
+
+ {config.provider}
+
+
+
+ {/* Feature badges */}
+
+ {config.model_name}
+
+
+ {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 && (
+ <>
+ ·
+
+
+
+
-
- {/* Model name */}
-
+ {member.avatarUrl ? (
+
-
-
-
-
-
-
- Using custom system instructions
-
-
-
- )}
-
-
+
+ {getInitials(member.name)}
+
+
)}
- {!config.use_default_system_instructions &&
- config.system_instructions && (
-
- {config.model_name}
-
-
- {/* Description if any */}
- {config.description && (
- - {config.description} -
- )} - - {/* Footer row */} -
-
-
-
-
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
- Delete
-
-
-
-
+ {/* Info alert skeleton */}
);
diff --git a/surfsense_web/components/settings/general-settings-manager.tsx b/surfsense_web/components/settings/general-settings-manager.tsx
index 64d9ed876..bd22e9180 100644
--- a/surfsense_web/components/settings/general-settings-manager.tsx
+++ b/surfsense_web/components/settings/general-settings-manager.tsx
@@ -108,7 +108,7 @@ export function GeneralSettingsManager({ searchSpaceId }: GeneralSettingsManager
return (
-
+
+ {/* Header: Title */}
+
+
+ ))}
+
+ {/* Message count badge */}
+
+
+ {/* Footer: Date + Creator */}
+
+
+
-
+
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 013b7cae2..445d87a2a 100644
--- a/surfsense_web/components/settings/image-model-manager.tsx
+++ b/surfsense_web/components/settings/image-model-manager.tsx
@@ -5,7 +5,6 @@ import {
AlertCircle,
Check,
ChevronsUpDown,
- Clock,
Edit3,
ImageIcon,
Key,
@@ -14,10 +13,10 @@ import {
Shuffle,
Info,
Trash2,
- User,
Wand2,
} from "lucide-react";
import { AnimatePresence, motion } from "motion/react";
+import Image from "next/image";
import { useCallback, useEffect, useMemo, useState } from "react";
import { toast } from "sonner";
import { membersAtom } from "@/atoms/members/members-query.atoms";
@@ -72,6 +71,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 {
@@ -95,6 +95,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 {
@@ -127,12 +135,13 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
// Members for user resolution
const { data: members } = useAtomValue(membersAtom);
const memberMap = useMemo(() => {
- const map = new Map();
+ 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,
});
}
}
@@ -459,13 +468,61 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
)}
- {/* Loading */}
+ {/* Loading Skeleton */}
{isLoading && (
-
-
-
-
+
@@ -492,105 +548,143 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
+ {/* Active Preference Skeleton */}
+
+
+
+
+
+
+
+ {/* Your Image Models Section Skeleton */}
+
)}
{/* User Configs */}
@@ -477,7 +534,6 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
onClick={openNewDialog}
className="flex items-center gap-2 text-xs md:text-sm h-8 md:h-9"
>
-
+
+
+
+
+
+
+
+
+ {/* Cards Grid Skeleton */}
+
+ {["skeleton-a", "skeleton-b", "skeleton-c"].map((key) => (
+
+
+ {/* Header */}
+
+
+ ))}
+
+
+
+ {/* Provider + Model */}
+
+
+
+
+ {/* Footer */}
+
+
+ Add your own image generation model (DALL-E 3, GPT Image 1, etc.)
-
-
-
- {errors.length > 0 &&
- errors.map((err) => (
-
-
-
- {err?.message ?? "Something went wrong"}
-
-
-
- ))}
+ {fetchError && (
+
+
+
+ {fetchError?.message ?? "Failed to load configurations"}
+
+
+
+ )}
{/* Global Configs Info */}
@@ -236,18 +231,39 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
)}
- {/* Loading State */}
+ {/* Loading Skeleton */}
{isLoading && (
-
-
-
-
+
)}
-
+
{member.name}
-
+ e.preventDefault()}
+ >
-
- {editingConfig ? (
-
{editingConfig ? "Edit Image Model" : "Add Image Model"}
diff --git a/surfsense_web/components/settings/model-config-manager.tsx b/surfsense_web/components/settings/model-config-manager.tsx
index 3ee5458b8..238286a96 100644
--- a/surfsense_web/components/settings/model-config-manager.tsx
+++ b/surfsense_web/components/settings/model-config-manager.tsx
@@ -47,6 +47,7 @@ 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";
@@ -84,17 +85,14 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
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);
// Queries
@@ -128,7 +126,6 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
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) => {
@@ -145,7 +142,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]
@@ -157,7 +154,7 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
await deleteConfig({ id: configToDelete.id });
setConfigToDelete(null);
} catch {
- // Error handled by mutation
+ // Error handled by mutation state
}
};
@@ -195,29 +192,27 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
size="sm"
className="flex items-center gap-2 text-xs md:text-sm h-8 md:h-9"
>
-
- {/* Error Alerts */}
+ {/* Fetch Error Alert */}
-
-
-
-
- ))}
+
+ {/* Provider + Model */}
+
-
-
-
-
- Edit
+
+
+
+
+
+
+
+ Delete
+
+
- {
+ const member = config.user_id ? memberMap.get(config.user_id) : null;
+
+ return (
+
+
+
+ {/* Header: Name + Actions */}
+
- - {config.name} -
-
+
-
+
+ + {config.name} +
+ {config.description && ( ++ {config.description} +
+ )} +
+
+
+
+
-
- {config.model_name}
-
- {config.description && (
- - {config.description} -
- )} -
-
-
-
- {config.user_id && memberMap.get(config.user_id) && (
-
-
- )}
-
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
- Delete
-
-
-
+
+
+ {config.provider}
+
+
+
+ {/* Footer: Date + Creator */}
+
+ {config.model_name}
+
+
+
+ {new Date(config.created_at).toLocaleDateString(
+ undefined,
+ {
+ year: "numeric",
+ month: "short",
+ day: "numeric",
+ }
+ )}
+
+ {member && (
+ <>
+ ·
+
+
+
+
+
+ {member.email || member.name}
+
+
+
+
+ )}
+
+
+
+
+ );
+ })}
)}
@@ -608,14 +702,12 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
}
}}
>
-
+ {member.avatarUrl ? (
+
+
+
+ {getInitials(member.name)}
+
+
+ )}
+
+ {member.name}
+
+
-
-
+ {["skeleton-a", "skeleton-b", "skeleton-c"].map((key) => (
+
+
+ {/* Header */}
+
+
+ ))}
+
)}
{/* Configurations List */}
@@ -413,7 +429,7 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
+
+ {/* Provider + Model */}
+
+
+
+
+ {/* Feature badges */}
+
+
+ {/* Footer */}
+
+
+ Your Image Models
- + {canCreate && ( + + )}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 && ( + + )} ) : ( @@ -586,38 +636,44 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) { )}
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
- Delete
-
-
+ {canUpdate && (
+
+
+
+
+
+ Edit
+
+
+ )}
+ {canDelete && (
+
+
+
+
+
+ Delete
+
+
+ )}
+ )}
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."}
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
- Delete
-
-
+ {canUpdate && (
+
+
+
+
+
+ Edit
+
+
+ )}
+ {canDelete && (
+
+
+
+
+
+ Delete
+
+
+ )}
+ )}
-
-
-
-
- Active Image Model
-
- Select which model to use for image generation
-
-
-
-
-
-
- )}
-
- {/* Active Preference Skeleton */}
-
-
-
-
-
-
-
{/* Your Image Models Section Skeleton */}
-
-
-
-
From 147530e1d25ef5fe253a214986d45779f052eaf7 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Mon, 9 Feb 2026 19:58:28 +0530
Subject: [PATCH 15/34] feat: enhance LLM role manager with improved loading
states, error handling, and UI updates
---
.../components/settings/llm-role-manager.tsx | 658 ++++++++++--------
1 file changed, 370 insertions(+), 288 deletions(-)
diff --git a/surfsense_web/components/settings/llm-role-manager.tsx b/surfsense_web/components/settings/llm-role-manager.tsx
index d91150a4f..a0c13d116 100644
--- a/surfsense_web/components/settings/llm-role-manager.tsx
+++ b/surfsense_web/components/settings/llm-role-manager.tsx
@@ -5,13 +5,14 @@ import {
AlertCircle,
Bot,
CheckCircle,
+ CircleDashed,
FileText,
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 { updateLLMPreferencesMutationAtom } from "@/atoms/new-llm-config/new-llm-config-mutation.atoms";
@@ -23,16 +24,18 @@ 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";
const ROLE_DESCRIPTIONS = {
@@ -40,17 +43,15 @@ const ROLE_DESCRIPTIONS = {
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",
},
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",
},
};
@@ -59,7 +60,6 @@ interface LLMRoleManagerProps {
}
export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
- // Use new LLM config system
const {
data: newLLMConfigs = [],
isFetching: configsLoading,
@@ -70,7 +70,6 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
data: globalConfigs = [],
isFetching: globalConfigsLoading,
error: globalConfigsError,
- refetch: refreshGlobalConfigs,
} = useAtomValue(globalNewLLMConfigsAtom);
const {
data: preferences = {},
@@ -105,7 +104,6 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
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 ?? "",
@@ -165,325 +163,409 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
assignments.document_summary_llm_id !== null &&
assignments.document_summary_llm_id !== undefined;
- // Combine global and custom configs (new system)
+ // Combine global and custom configs
const allConfigs = [
...globalConfigs.map((config) => ({ ...config, is_global: true })),
...newLLMConfigs.filter((config) => config.id && config.id.toString().trim() !== ""),
];
- const availableConfigs = allConfigs;
-
const isLoading = configsLoading || preferencesLoading || globalConfigsLoading;
const hasError = configsError || preferencesError || globalConfigsError;
return (
-
- {/* Header */}
-
-
+ {hasError && (
+
+
+
+ {(configsError?.message ?? "Failed to load LLM configurations") ||
+ (preferencesError?.message ?? "Failed to load preferences") ||
+ (globalConfigsError?.message ??
+ "Failed to load global configurations")}
+
+
+
+ )}
+
+
+ {/* Loading Skeleton */}
+ {isLoading && (
+
- {(configsError?.message ?? "Failed to load LLM configurations") ||
- (preferencesError?.message ?? "Failed to load preferences") ||
- (globalConfigsError?.message ?? "Failed to load global configurations")}
+ No LLM configurations found. Please add at least one LLM provider in the
+ Agent Configs tab before assigning roles.
)}
- {/* Loading State */}
- {isLoading && (
-
-
-
-
- )}
+ {/* Role Assignment Cards */}
+ {!isLoading && !hasError && allConfigs.length > 0 && (
+
+ {Object.entries(ROLE_DESCRIPTIONS).map(([key, role], index) => {
+ const IconComponent = role.icon;
+ const currentAssignment =
+ assignments[`${key}_llm_id` as keyof typeof assignments];
+ const assignedConfig = allConfigs.find(
+ (config) => config.id === currentAssignment
+ );
+ const isAssigned =
+ currentAssignment !== "" &&
+ currentAssignment !== null &&
+ currentAssignment !== undefined;
+ const isAutoMode =
+ assignedConfig &&
+ "is_auto_mode" in assignedConfig &&
+ assignedConfig.is_auto_mode;
- {/* Info Alert */}
- {!isLoading && !hasError && (
-
-
{/* Error Alert */}
- {hasError && (
+
+ {["skeleton-a", "skeleton-b"].map((key) => (
+
+
+ {/* Header: icon + title + status */}
+
+
+ ))}
+
+ )}
+
+ {/* No configs warning */}
+ {!isLoading && !hasError && allConfigs.length === 0 && (
+
+ {/* Label */}
+
+
+
+
+
+
+ {/* Summary block */}
+
+
+
+
+
+
+
-
-
- {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.
-
-
- )}
+ return (
+
+
+
+ {/* Role Header */}
+
+
- {/* Role Assignment Cards */}
- {availableConfigs.length > 0 && (
-
+
+ {isAssigned ? (
+
+
+
+
+ + {role.title} +
++ {role.description} +
+
- {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
- );
+ {/* Selector */}
+
+
+
+
+
+ {/* Assigned Config Summary */}
+ {assignedConfig && (
+
-
-
-
-
-
+
+
+ );
+ })}
+
+ )}
- {/* Action Buttons */}
- {hasChanges && (
-
);
}
From 302ee5ad2f92805c6037f3c477770d40bc2a19a4 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Mon, 9 Feb 2026 20:48:42 +0530
Subject: [PATCH 16/34] feat: centralize provider icon logic by creating a
reusable getProviderIcon function and update components to utilize it
---
.../components/new-chat/model-selector.tsx | 37 +------
.../settings/image-model-manager.tsx | 8 +-
.../components/settings/llm-role-manager.tsx | 55 ++++------
.../settings/model-config-manager.tsx | 8 +-
surfsense_web/lib/provider-icons.tsx | 103 ++++++++++++++++++
5 files changed, 133 insertions(+), 78 deletions(-)
create mode 100644 surfsense_web/lib/provider-icons.tsx
diff --git a/surfsense_web/components/new-chat/model-selector.tsx b/surfsense_web/components/new-chat/model-selector.tsx
index ec1143e04..3f5786a3a 100644
--- a/surfsense_web/components/new-chat/model-selector.tsx
+++ b/surfsense_web/components/new-chat/model-selector.tsx
@@ -5,15 +5,10 @@ import {
Bot,
Check,
ChevronDown,
- Cloud,
Edit3,
Globe,
Plus,
- Settings2,
- Shuffle,
- Sparkles,
User,
- Zap,
} from "lucide-react";
import { useCallback, useMemo, useState } from "react";
import { toast } from "sonner";
@@ -42,33 +37,7 @@ import type {
NewLLMConfigPublic,
} from "@/contracts/types/new-llm-config.types";
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
-
-
- {role.title}
-
- {role.description}
-
+ {isAutoMode ? (
+
-
-
+
- {currentAssignment && (
-
+
+ Auto Load Balanced +
++ Routes across all available providers +
-
-
-
-
- {assignedConfig && (
-
-
+ )}
+
- {"is_auto_mode" in assignedConfig && assignedConfig.is_auto_mode ? (
-
- AUTO
-
- ) : (
-
- {assignedConfig.provider}
-
- )}
- {assignedConfig.name}
- {"is_auto_mode" in assignedConfig && assignedConfig.is_auto_mode ? (
+ ) : (
+
- )}
+
+
)}
-
-
-
- );
- })}
-
+
- Recommended
+ {assignedConfig.provider}
- ) : (
- "is_global" in assignedConfig &&
- assignedConfig.is_global && (
-
- 🌐 Global
-
- )
+
+ {assignedConfig.api_base && (
+
- {"is_auto_mode" in assignedConfig && assignedConfig.is_auto_mode ? (
-
+
+ {assignedConfig.name}
+
+ {"is_global" in assignedConfig &&
+ assignedConfig.is_global && (
+
+ 🌐 Global
+
+ )}
+
+
+ {assignedConfig.model_name}
+
+ + {assignedConfig.api_base} +
)}
- Automatically load balances across all available LLM providers
-
- ) : (
- <>
-
- Model: {assignedConfig.model_name}
-
- {assignedConfig.api_base && (
-
- Base: {assignedConfig.api_base}
-
- )}
-
- )}
-
+ {/* Save / Reset Bar */}
+
+ {hasChanges && (
+
+
- )}
+
+ )}
+
+ You have unsaved changes +
+
+
- )}
-
- {getProviderIcon(config.provider, isAutoMode)}
+ {getProviderIcon(config.provider, { isAutoMode })}
diff --git a/surfsense_web/components/settings/image-model-manager.tsx b/surfsense_web/components/settings/image-model-manager.tsx
index 123cc1a8f..0170fcf8c 100644
--- a/surfsense_web/components/settings/image-model-manager.tsx
+++ b/surfsense_web/components/settings/image-model-manager.tsx
@@ -78,6 +78,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;
@@ -505,12 +506,7 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
{/* Provider + Model */}
-
- {config.provider}
-
+ {getProviderIcon(config.provider, { className: "size-3.5 shrink-0" })}
+
-
-
+
+
Unassigned
@@ -355,7 +359,7 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
{/* Global Configurations */}
{globalConfigs.length > 0 && (
-
+
Global Configurations
{globalConfigs.map((config) => {
@@ -366,29 +370,25 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
-
{config.model_name}
diff --git a/surfsense_web/components/settings/llm-role-manager.tsx b/surfsense_web/components/settings/llm-role-manager.tsx
index a0c13d116..c634ffd49 100644
--- a/surfsense_web/components/settings/llm-role-manager.tsx
+++ b/surfsense_web/components/settings/llm-role-manager.tsx
@@ -37,6 +37,7 @@ import {
} from "@/components/ui/select";
import { Skeleton } from "@/components/ui/skeleton";
import { cn } from "@/lib/utils";
+import { getProviderIcon } from "@/lib/provider-icons";
const ROLE_DESCRIPTIONS = {
agent: {
@@ -342,11 +343,14 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
handleRoleAssignment(`${key}_llm_id`, value)
}
>
-
+
{isAuto ? (
-
) : (
-
- {config.provider}
-
+ getProviderIcon(config.provider, { className: "size-3 md:size-3.5 shrink-0" })
)}
-
+
{config.name}
{!isAuto && (
-
+
(
{
config.model_name
@@ -399,7 +399,7 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
{isAuto && (
Recommended
@@ -414,7 +414,7 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
{/* Custom Configurations */}
{newLLMConfigs.length > 0 && (
-
+
Your Configurations
{newLLMConfigs
@@ -429,18 +429,14 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
-
-
- {config.provider}
-
-
+
+ {getProviderIcon(config.provider, { className: "size-3 md:size-3.5 shrink-0" })}
+
{config.name}
-
+
(
{
config.model_name
@@ -501,12 +497,7 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
)}
-
- {assignedConfig.provider}
-
+ {getProviderIcon(assignedConfig.provider, { className: "size-3 shrink-0" })}
- {/* Message count badge */}
-
{assignedConfig.model_name}
diff --git a/surfsense_web/components/settings/model-config-manager.tsx b/surfsense_web/components/settings/model-config-manager.tsx
index 1666fae20..6500c1c6e 100644
--- a/surfsense_web/components/settings/model-config-manager.tsx
+++ b/surfsense_web/components/settings/model-config-manager.tsx
@@ -52,6 +52,7 @@ 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;
@@ -420,12 +421,7 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
{/* Provider + Model */}
-
- {config.provider}
-
+ {getProviderIcon(config.provider, { className: "size-3.5 shrink-0" })}
>();
+
+ 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",
@@ -63,27 +74,18 @@ export function PublicChatSnapshotRow({
- Copy link
-
-
-
-
-
-
-
Open link
@@ -108,18 +110,47 @@ export function PublicChatSnapshotRow({
{config.model_name}
diff --git a/surfsense_web/lib/provider-icons.tsx b/surfsense_web/lib/provider-icons.tsx
new file mode 100644
index 000000000..62ed19f61
--- /dev/null
+++ b/surfsense_web/lib/provider-icons.tsx
@@ -0,0 +1,103 @@
+import {
+ Bot,
+ Cloud,
+ Cpu,
+ Database,
+ Globe,
+ Layers,
+ Server,
+ Settings2,
+ Shuffle,
+ Sparkles,
+ Wand2,
+ Zap,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+
+/**
+ * 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
-
-
-
+ {/* Message count badge */}
+
+
+
+
- {/* Footer: Date + Creator */}
+ {/* Public URL – selectable fallback for manual copy */}
+
+
+
+
+
+
+ {copied ? "Copied!" : "Copy link"}
+
+
+
+
+ {/* Footer: Date + Creator */}
+ {snapshot.public_url} +
+
{formattedDate}
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 8daf9a07f..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
@@ -26,7 +26,7 @@ export function PublicChatSnapshotsList({
}
return (
-
+
{snapshots.map((snapshot) => (
{
const publicUrl = `${window.location.origin}/public/${snapshot.share_token}`;
navigator.clipboard.writeText(publicUrl);
- toast.success("Link copied to clipboard");
}, []);
const handleDelete = useCallback(
@@ -90,7 +89,7 @@ export function PublicChatSnapshotsManager({
+
{["skeleton-a", "skeleton-b", "skeleton-c"].map((key) => (
@@ -98,11 +97,13 @@ export function PublicChatSnapshotsManager({
>;
+ export default content;
+}
+
From 312fedd6a2375d305c96987e53630ac78e5fd629 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Tue, 10 Feb 2026 17:20:42 +0530
Subject: [PATCH 20/34] refactor: remove ImageModelSelector component and
update ModelSelector and ChatHeader to handle LLM and image model
configurations more efficiently
---
.../components/new-chat/chat-header.tsx | 13 +-
.../new-chat/image-model-selector.tsx | 361 --------
.../components/new-chat/model-selector.tsx | 774 ++++++++++++------
surfsense_web/lib/provider-icons.tsx | 2 +-
4 files changed, 532 insertions(+), 618 deletions(-)
delete mode 100644 surfsense_web/components/new-chat/image-model-selector.tsx
diff --git a/surfsense_web/components/new-chat/chat-header.tsx b/surfsense_web/components/new-chat/chat-header.tsx
index 8a8fa11a0..2f1d9d845 100644
--- a/surfsense_web/components/new-chat/chat-header.tsx
+++ b/surfsense_web/components/new-chat/chat-header.tsx
@@ -8,7 +8,6 @@ import type {
NewLLMConfigPublic,
} from "@/contracts/types/new-llm-config.types";
import { ImageConfigSidebar } from "./image-config-sidebar";
-import { ImageModelSelector } from "./image-model-selector";
import { ModelConfigSidebar } from "./model-config-sidebar";
import { ModelSelector } from "./model-selector";
@@ -34,7 +33,7 @@ export function ChatHeader({ searchSpaceId }: ChatHeaderProps) {
const [imageSidebarMode, setImageSidebarMode] = useState<"create" | "edit" | "view">("view");
// LLM handlers
- const handleEditConfig = useCallback(
+ const handleEditLLMConfig = useCallback(
(config: NewLLMConfigPublic | GlobalNewLLMConfig, global: boolean) => {
setSelectedConfig(config);
setIsGlobal(global);
@@ -44,7 +43,7 @@ export function ChatHeader({ searchSpaceId }: ChatHeaderProps) {
[]
);
- const handleAddNew = useCallback(() => {
+ const handleAddNewLLM = useCallback(() => {
setSelectedConfig(null);
setIsGlobal(false);
setSidebarMode("create");
@@ -81,8 +80,12 @@ export function ChatHeader({ searchSpaceId }: ChatHeaderProps) {
return (
-
- {/* Footer: Date + Creator */}
+ {/* Message count badge */}
+
+
+ {/* URL skeleton */}
+
-
{filteredGlobalConfigs.map((config) => {
@@ -300,14 +297,13 @@ export function ModelSelector({ onEdit, onAddNew, className }: ModelSelectorProp
)}
{filteredGlobalConfigs.length > 0 && filteredUserConfigs.length > 0 && (
-
-
{filteredUserConfigs.map((config) => {
diff --git a/surfsense_web/lib/provider-icons.tsx b/surfsense_web/lib/provider-icons.tsx
index 62ed19f61..ce474c5a9 100644
--- a/surfsense_web/lib/provider-icons.tsx
+++ b/surfsense_web/lib/provider-icons.tsx
@@ -1,18 +1,39 @@
import {
Bot,
- Cloud,
- Cpu,
- Database,
- Globe,
- Layers,
- Server,
- Settings2,
Shuffle,
- Sparkles,
- Wand2,
- Zap,
} 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.
@@ -30,72 +51,74 @@ export function getProviderIcon(
}
switch (provider?.toUpperCase()) {
- case "OPENAI":
- return
- void;
- onEdit?: (config: ImageGenerationConfig | GlobalImageGenConfig, isGlobal: boolean) => void;
-}
-
-export function ImageModelSelector({ className, onAddNew, onEdit }: ImageModelSelectorProps) {
- const [open, setOpen] = useState(false);
- const [searchQuery, setSearchQuery] = useState("");
-
- const { data: globalConfigs, isLoading: globalLoading } = useAtomValue(globalImageGenConfigsAtom);
- const { data: userConfigs, isLoading: userLoading } = useAtomValue(imageGenConfigsAtom);
- const { data: preferences, isLoading: prefsLoading } = useAtomValue(llmPreferencesAtom);
- const searchSpaceId = useAtomValue(activeSearchSpaceIdAtom);
- const { mutateAsync: updatePreferences } = useAtomValue(updateLLMPreferencesMutationAtom);
-
- const isLoading = globalLoading || userLoading || prefsLoading;
-
- const currentConfig = useMemo(() => {
- if (!preferences) return null;
- const id = preferences.image_generation_config_id;
- if (id === null || id === undefined) return null;
- const globalMatch = globalConfigs?.find((c) => c.id === id);
- if (globalMatch) return globalMatch;
- return userConfigs?.find((c) => c.id === id) ?? null;
- }, [preferences, globalConfigs, userConfigs]);
-
- const isCurrentAutoMode = useMemo(() => {
- return currentConfig && "is_auto_mode" in currentConfig && currentConfig.is_auto_mode;
- }, [currentConfig]);
-
- const filteredGlobal = useMemo(() => {
- if (!globalConfigs) return [];
- if (!searchQuery) return globalConfigs;
- const q = searchQuery.toLowerCase();
- return globalConfigs.filter(
- (c) =>
- c.name.toLowerCase().includes(q) ||
- c.model_name.toLowerCase().includes(q) ||
- c.provider.toLowerCase().includes(q)
- );
- }, [globalConfigs, searchQuery]);
-
- const filteredUser = useMemo(() => {
- if (!userConfigs) return [];
- if (!searchQuery) return userConfigs;
- const q = searchQuery.toLowerCase();
- return userConfigs.filter(
- (c) =>
- c.name.toLowerCase().includes(q) ||
- c.model_name.toLowerCase().includes(q) ||
- c.provider.toLowerCase().includes(q)
- );
- }, [userConfigs, searchQuery]);
-
- const totalModels = (globalConfigs?.length ?? 0) + (userConfigs?.length ?? 0);
-
- const handleSelect = useCallback(
- async (configId: number) => {
- if (currentConfig?.id === configId) {
- setOpen(false);
- return;
- }
- if (!searchSpaceId) {
- toast.error("No search space selected");
- return;
- }
- try {
- await updatePreferences({
- search_space_id: Number(searchSpaceId),
- data: { image_generation_config_id: configId },
- });
- toast.success("Image model updated");
- setOpen(false);
- } catch {
- toast.error("Failed to switch image model");
- }
- },
- [currentConfig, searchSpaceId, updatePreferences]
- );
-
- // Don't render if no configs at all
- if (!isLoading && totalModels === 0) {
- return (
-
- );
- }
-
- return (
-
-
-
-
-
-
-
- {totalModels > 3 && (
-
-
-
-
- {/* Global Image Gen Configs */}
- {filteredGlobal.length > 0 && (
-
- handleSelect(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-200 dark:border-violet-800/50"
- )}
- >
-
- );
- })}
-
- )}
-
- {/* User Image Gen Configs */}
- {filteredUser.length > 0 && (
- <>
- {filteredGlobal.length > 0 &&
- handleSelect(config.id)}
- className={cn(
- "mx-2 rounded-lg mb-1 cursor-pointer group transition-all hover:bg-accent/50",
- isSelected && "bg-accent/80"
- )}
- >
-
- );
- })}
-
-
- )}
-
- {/* Add New */}
- {onAddNew && (
-
-
-
-
- );
-}
diff --git a/surfsense_web/components/new-chat/model-selector.tsx b/surfsense_web/components/new-chat/model-selector.tsx
index 988dc7209..d27594ee6 100644
--- a/surfsense_web/components/new-chat/model-selector.tsx
+++ b/surfsense_web/components/new-chat/model-selector.tsx
@@ -6,10 +6,16 @@ import {
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,
@@ -30,102 +36,150 @@ 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 { cn } from "@/lib/utils";
import { getProviderIcon } from "@/lib/provider-icons";
+import { cn } from "@/lib/utils";
interface ModelSelectorProps {
- onEdit: (config: NewLLMConfigPublic | GlobalNewLLMConfig, isGlobal: boolean) => void;
- onAddNew: () => void;
+ onEditLLM: (config: NewLLMConfigPublic | GlobalNewLLMConfig, isGlobal: boolean) => void;
+ onAddNewLLM: () => void;
+ onEditImage?: (config: ImageGenerationConfig | GlobalImageGenConfig, isGlobal: boolean) => void;
+ onAddNewImage?: () => void;
className?: string;
}
-export function ModelSelector({ onEdit, onAddNew, className }: ModelSelectorProps) {
+export function ModelSelector({
+ onEditLLM,
+ onAddNewLLM,
+ onEditImage,
+ onAddNewImage,
+ className,
+}: ModelSelectorProps) {
const [open, setOpen] = useState(false);
- const [searchQuery, setSearchQuery] = useState("");
+ const [activeTab, setActiveTab] = useState<"llm" | "image">("llm");
+ const [llmSearchQuery, setLlmSearchQuery] = useState("");
+ const [imageSearchQuery, setImageSearchQuery] = useState("");
- // Fetch configs
- const { data: userConfigs, isLoading: userConfigsLoading } = useAtomValue(newLLMConfigsAtom);
- const { data: globalConfigs, isLoading: globalConfigsLoading } =
+ // LLM data
+ const { data: llmUserConfigs, isLoading: llmUserLoading } = useAtomValue(newLLMConfigsAtom);
+ const { data: llmGlobalConfigs, isLoading: llmGlobalLoading } =
useAtomValue(globalNewLLMConfigsAtom);
- const { data: preferences, isLoading: preferencesLoading } = useAtomValue(llmPreferencesAtom);
+ const { data: preferences, isLoading: prefsLoading } = useAtomValue(llmPreferencesAtom);
const searchSpaceId = useAtomValue(activeSearchSpaceIdAtom);
const { mutateAsync: updatePreferences } = useAtomValue(updateLLMPreferencesMutationAtom);
- const isLoading = userConfigsLoading || globalConfigsLoading || preferencesLoading;
+ // Image data
+ const { data: imageGlobalConfigs, isLoading: imageGlobalLoading } =
+ useAtomValue(globalImageGenConfigsAtom);
+ const { data: imageUserConfigs, isLoading: imageUserLoading } =
+ useAtomValue(imageGenConfigsAtom);
- // Get current agent LLM config
- const currentConfig = useMemo(() => {
+ const isLoading = llmUserLoading || llmGlobalLoading || prefsLoading || imageGlobalLoading || imageUserLoading;
+
+ // ─── LLM current config ───
+ const currentLLMConfig = useMemo(() => {
if (!preferences) return null;
-
const agentLlmId = preferences.agent_llm_id;
if (agentLlmId === null || agentLlmId === undefined) return null;
-
- // Check if it's Auto mode (ID 0) or global config (negative ID)
if (agentLlmId <= 0) {
- return globalConfigs?.find((c) => c.id === agentLlmId) ?? null;
+ return llmGlobalConfigs?.find((c) => c.id === agentLlmId) ?? null;
}
- // Otherwise, check user configs
- return userConfigs?.find((c) => c.id === agentLlmId) ?? null;
- }, [preferences, globalConfigs, userConfigs]);
+ return llmUserConfigs?.find((c) => c.id === agentLlmId) ?? null;
+ }, [preferences, llmGlobalConfigs, llmUserConfigs]);
- // Check if current config is Auto mode
- const isCurrentAutoMode = useMemo(() => {
- return currentConfig && "is_auto_mode" in currentConfig && currentConfig.is_auto_mode;
- }, [currentConfig]);
+ const isLLMAutoMode = useMemo(() => {
+ return currentLLMConfig && "is_auto_mode" in currentLLMConfig && currentLLMConfig.is_auto_mode;
+ }, [currentLLMConfig]);
- // Filter configs based on search
- const filteredGlobalConfigs = useMemo(() => {
- if (!globalConfigs) return [];
- if (!searchQuery) return globalConfigs;
- const query = searchQuery.toLowerCase();
- return globalConfigs.filter(
+ // ─── Image current config ───
+ const currentImageConfig = useMemo(() => {
+ if (!preferences) return null;
+ const id = preferences.image_generation_config_id;
+ if (id === null || id === undefined) return null;
+ const globalMatch = imageGlobalConfigs?.find((c) => c.id === id);
+ if (globalMatch) return globalMatch;
+ return imageUserConfigs?.find((c) => c.id === id) ?? null;
+ }, [preferences, imageGlobalConfigs, imageUserConfigs]);
+
+ const isImageAutoMode = useMemo(() => {
+ return currentImageConfig && "is_auto_mode" in currentImageConfig && currentImageConfig.is_auto_mode;
+ }, [currentImageConfig]);
+
+ // ─── LLM filtering ───
+ const filteredLLMGlobal = useMemo(() => {
+ if (!llmGlobalConfigs) return [];
+ if (!llmSearchQuery) return llmGlobalConfigs;
+ const q = llmSearchQuery.toLowerCase();
+ return llmGlobalConfigs.filter(
(c) =>
- c.name.toLowerCase().includes(query) ||
- c.model_name.toLowerCase().includes(query) ||
- c.provider.toLowerCase().includes(query)
+ c.name.toLowerCase().includes(q) ||
+ c.model_name.toLowerCase().includes(q) ||
+ c.provider.toLowerCase().includes(q)
);
- }, [globalConfigs, searchQuery]);
+ }, [llmGlobalConfigs, llmSearchQuery]);
- const filteredUserConfigs = useMemo(() => {
- if (!userConfigs) return [];
- if (!searchQuery) return userConfigs;
- const query = searchQuery.toLowerCase();
- return userConfigs.filter(
+ const filteredLLMUser = useMemo(() => {
+ if (!llmUserConfigs) return [];
+ if (!llmSearchQuery) return llmUserConfigs;
+ const q = llmSearchQuery.toLowerCase();
+ return llmUserConfigs.filter(
(c) =>
- c.name.toLowerCase().includes(query) ||
- c.model_name.toLowerCase().includes(query) ||
- c.provider.toLowerCase().includes(query)
+ c.name.toLowerCase().includes(q) ||
+ c.model_name.toLowerCase().includes(q) ||
+ c.provider.toLowerCase().includes(q)
);
- }, [userConfigs, searchQuery]);
+ }, [llmUserConfigs, llmSearchQuery]);
- // Total model count for conditional search display
- const totalModels = useMemo(() => {
- return (globalConfigs?.length ?? 0) + (userConfigs?.length ?? 0);
- }, [globalConfigs, userConfigs]);
+ const totalLLMModels = (llmGlobalConfigs?.length ?? 0) + (llmUserConfigs?.length ?? 0);
- const handleSelectConfig = useCallback(
+ // ─── Image filtering ───
+ const filteredImageGlobal = useMemo(() => {
+ if (!imageGlobalConfigs) return [];
+ if (!imageSearchQuery) return imageGlobalConfigs;
+ const q = imageSearchQuery.toLowerCase();
+ return imageGlobalConfigs.filter(
+ (c) =>
+ c.name.toLowerCase().includes(q) ||
+ c.model_name.toLowerCase().includes(q) ||
+ c.provider.toLowerCase().includes(q)
+ );
+ }, [imageGlobalConfigs, imageSearchQuery]);
+
+ const filteredImageUser = useMemo(() => {
+ if (!imageUserConfigs) return [];
+ if (!imageSearchQuery) return imageUserConfigs;
+ const q = imageSearchQuery.toLowerCase();
+ return imageUserConfigs.filter(
+ (c) =>
+ c.name.toLowerCase().includes(q) ||
+ c.model_name.toLowerCase().includes(q) ||
+ c.provider.toLowerCase().includes(q)
+ );
+ }, [imageUserConfigs, imageSearchQuery]);
+
+ const totalImageModels = (imageGlobalConfigs?.length ?? 0) + (imageUserConfigs?.length ?? 0);
+
+ // ─── Handlers ───
+ const handleSelectLLM = useCallback(
async (config: NewLLMConfigPublic | GlobalNewLLMConfig) => {
- // If already selected, just close
- if (currentConfig?.id === config.id) {
+ if (currentLLMConfig?.id === config.id) {
setOpen(false);
return;
}
-
if (!searchSpaceId) {
toast.error("No search space selected");
return;
}
-
try {
await updatePreferences({
search_space_id: Number(searchSpaceId),
- data: {
- agent_llm_id: config.id,
- },
+ data: { agent_llm_id: config.id },
});
toast.success(`Switched to ${config.name}`);
setOpen(false);
@@ -134,16 +188,40 @@ export function ModelSelector({ onEdit, onAddNew, className }: ModelSelectorProp
toast.error("Failed to switch model");
}
},
- [currentConfig, searchSpaceId, updatePreferences]
+ [currentLLMConfig, searchSpaceId, updatePreferences]
);
- const handleEditConfig = useCallback(
+ const handleEditLLMConfig = useCallback(
(e: React.MouseEvent, config: NewLLMConfigPublic | GlobalNewLLMConfig, isGlobal: boolean) => {
e.stopPropagation();
- onEdit(config, isGlobal);
+ onEditLLM(config, isGlobal);
setOpen(false);
},
- [onEdit]
+ [onEditLLM]
+ );
+
+ const handleSelectImage = useCallback(
+ async (configId: number) => {
+ if (currentImageConfig?.id === configId) {
+ setOpen(false);
+ return;
+ }
+ if (!searchSpaceId) {
+ toast.error("No search space selected");
+ return;
+ }
+ try {
+ await updatePreferences({
+ search_space_id: Number(searchSpaceId),
+ data: { image_generation_config_id: configId },
+ });
+ toast.success("Image model updated");
+ setOpen(false);
+ } catch {
+ toast.error("Failed to switch image model");
+ }
+ },
+ [currentImageConfig, searchSpaceId, updatePreferences]
);
return (
@@ -161,30 +239,37 @@ export function ModelSelector({ onEdit, onAddNew, className }: ModelSelectorProp
- Balanced
-
- ) : (
-
- {currentConfig.model_name.split("/").pop()?.slice(0, 10) ||
- currentConfig.model_name.slice(0, 10)}
-
- )}
-
) : (
<>
-
- setActiveTab(v as "llm" | "image")}
+ className="w-full"
>
- {totalModels > 3 && (
-
-
-
-
- {/* Global Configs Section */}
- {filteredGlobalConfigs.length > 0 && (
-
- 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"
- )}
- >
-
- );
- })}
-
- )}
-
- {filteredGlobalConfigs.length > 0 && filteredUserConfigs.length > 0 && (
-
- handleSelectConfig(config)}
- className={cn(
- "mx-2 rounded-lg mb-1 cursor-pointer group transition-all",
- "hover:bg-accent/50",
- isSelected && "bg-accent/80"
- )}
- >
-
- );
- })}
-
- )}
-
- {/* Add New Config Button */}
-
+
+ {totalLLMModels > 3 && (
+
+
+
+
+ {/* Global LLM Configs */}
+ {filteredLLMGlobal.length > 0 && (
+
+ 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"
+ )}
+ >
+
+ );
+ })}
+
+ )}
+
+ {filteredLLMGlobal.length > 0 && filteredLLMUser.length > 0 && (
+
+ handleSelectLLM(config)}
+ className={cn(
+ "mx-2 rounded-lg mb-1 cursor-pointer group transition-all",
+ "hover:bg-accent/50",
+ isSelected && "bg-accent/80"
+ )}
+ >
+
+ );
+ })}
+
+ )}
+
+ {/* Add New LLM Config */}
+
+
+
+
+ {/* ─── Image Tab ─── */}
+
+
+ {totalImageModels > 3 && (
+
+
+
+
+ {/* Global Image Configs */}
+ {filteredImageGlobal.length > 0 && (
+
+ 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"
+ )}
+ >
+
+ );
+ })}
+
+ )}
+
+ {/* User Image Configs */}
+ {filteredImageUser.length > 0 && (
+ <>
+ {filteredImageGlobal.length > 0 &&
+ handleSelectImage(config.id)}
+ className={cn(
+ "mx-2 rounded-lg mb-1 cursor-pointer group transition-all hover:bg-accent/50",
+ isSelected && "bg-accent/80"
+ )}
+ >
+
+ );
+ })}
+
+
+ )}
+
+ {/* Add New Image Config */}
+ {onAddNewImage && (
+
+
+
+
);
diff --git a/surfsense_web/lib/provider-icons.tsx b/surfsense_web/lib/provider-icons.tsx
index ce474c5a9..4a32f0df0 100644
--- a/surfsense_web/lib/provider-icons.tsx
+++ b/surfsense_web/lib/provider-icons.tsx
@@ -47,7 +47,7 @@ export function getProviderIcon(
}: { isAutoMode?: boolean; className?: string } = {}
) {
if (isAutoMode || provider?.toUpperCase() === "AUTO") {
- return (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 errors = [createError, updateError, deleteError, fetchError].filter(Boolean) as Error[];
@@ -277,6 +291,39 @@ 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);
@@ -356,9 +403,135 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
)}
+ {/* Active Preference Card */}
+ {!isLoading && allConfigs.length > 0 && (
+
+
+
+
+
+
+ {hasPrefChanges && (
+
+
+
+ )}
+
{/* Loading Skeleton */}
{isLoading && (
-
- )}
-
-
- No image models found
-
-
- {filteredGlobal.map((config) => {
- const isSelected = currentConfig?.id === config.id;
- const isAuto = "is_auto_mode" in config && config.is_auto_mode;
- return (
-
- {
- e.stopPropagation();
- setOpen(false);
- onEdit(config, true);
- }}
- />
- )}
-
-
- {isAuto ? (
-
-
-
- {onEdit && (
-
- {config.name}
- {isAuto && (
-
- Recommended
-
- )}
- {isSelected &&
-
- {isAuto ? "Auto load balancing" : config.model_name}
-
-
-
- {filteredUser.map((config) => {
- const isSelected = currentConfig?.id === config.id;
- return (
-
-
-
-
-
-
- {onEdit && (
-
- )}
-
- {config.name}
- {isSelected &&
-
- {config.model_name}
-
-
-
-
- )}
-
-
- )}
-
-
-
- No models found
-Try a different search term
-
- Global Models
-
- {filteredGlobalConfigs.map((config) => {
- const isSelected = currentConfig?.id === config.id;
- const isAutoMode = "is_auto_mode" in config && config.is_auto_mode;
- return (
-
-
-
-
- {!isAutoMode && (
-
- )}
-
- {getProviderIcon(config.provider, { isAutoMode })}
-
-
-
-
- {config.name}
- {isAutoMode && (
-
- Recommended
-
- )}
- {isSelected &&
-
-
- {isAutoMode ? "Auto load balancing" : config.model_name}
-
- {!isAutoMode && config.citations_enabled && (
-
- Citations
-
- )}
-
-
- Your Configurations
-
- {filteredUserConfigs.map((config) => {
- const isSelected = currentConfig?.id === config.id;
- return (
-
-
-
-
-
- {getProviderIcon(config.provider)}
-
-
-
- {config.name}
- {isSelected &&
-
-
- {config.model_name}
-
- {config.citations_enabled && (
-
- Citations
-
- )}
-
-
-
+
+ {/* ─── LLM Tab ─── */}
+
+
+ )}
+
+
+
+ No models found
+Try a different search term
+
+ Global Models
+
+ {filteredLLMGlobal.map((config) => {
+ const isSelected = currentLLMConfig?.id === config.id;
+ const isAutoMode = "is_auto_mode" in config && config.is_auto_mode;
+ return (
+
+
+
+
+ {!isAutoMode && (
+
+ )}
+
+ {getProviderIcon(config.provider, { isAutoMode })}
+
+
+
+
+ {config.name}
+ {isAutoMode && (
+
+ Recommended
+
+ )}
+ {isSelected &&
+
+
+ {isAutoMode ? "Auto load balancing" : config.model_name}
+
+ {!isAutoMode && config.citations_enabled && (
+
+ Citations
+
+ )}
+
+
+ Your Configurations
+
+ {filteredLLMUser.map((config) => {
+ const isSelected = currentLLMConfig?.id === config.id;
+ return (
+
+
+
+
+
+ {getProviderIcon(config.provider)}
+
+
+
+ {config.name}
+ {isSelected &&
+
+
+ {config.model_name}
+
+ {config.citations_enabled && (
+
+ Citations
+
+ )}
+
+
+
+
+
+
+ )}
+
+
+ No image models found
+
+ Global Image Models
+
+ {filteredImageGlobal.map((config) => {
+ const isSelected = currentImageConfig?.id === config.id;
+ const isAuto = "is_auto_mode" in config && config.is_auto_mode;
+ return (
+
+
+
+ {getProviderIcon(config.provider, { isAutoMode: isAuto })}
+
+
+
+ {onEditImage && !isAuto && (
+
+ )}
+
+ {config.name}
+ {isAuto && (
+
+ Recommended
+
+ )}
+ {isSelected &&
+
+ {isAuto ? "Auto load balancing" : config.model_name}
+
+
+ Your Image Models
+
+ {filteredImageUser.map((config) => {
+ const isSelected = currentImageConfig?.id === config.id;
+ return (
+
+
+
+ {getProviderIcon(config.provider)}
+
+
+
+ {onEditImage && (
+
+ )}
+
+ {config.name}
+ {isSelected &&
+
+ {config.model_name}
+
+
+
+
+ )}
+
+
+
+
+
+ Active Image Model
+
+ Select which model to use for image generation
+
+
+
+
+
+
+ )}
+
+ {/* Active Preference Skeleton */}
+
+
+
+
+
+
+
{/* Your Image Models Section Skeleton */}
-
-
-
-
-
- {hasPrefChanges && (
-
-
-
- )}
-
{/* Loading Skeleton */}
{isLoading && (
+
+
+
+
From 4d7132c16cfcc50ec3aaed4acac00aa264a246f9 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Tue, 10 Feb 2026 18:09:27 +0530
Subject: [PATCH 22/34] feat: update LLM role manager to include image
generation model preferences and improve loading/error handling
---
.../settings/image-model-manager.tsx | 203 +-----------------
.../components/settings/llm-role-manager.tsx | 124 +++++++----
2 files changed, 94 insertions(+), 233 deletions(-)
diff --git a/surfsense_web/components/settings/image-model-manager.tsx b/surfsense_web/components/settings/image-model-manager.tsx
index 37a1636c7..f2d010e10 100644
--- a/surfsense_web/components/settings/image-model-manager.tsx
+++ b/surfsense_web/components/settings/image-model-manager.tsx
@@ -6,18 +6,16 @@ import {
Check,
ChevronsUpDown,
Edit3,
- ImageIcon,
Key,
Plus,
RefreshCw,
- Shuffle,
Info,
Trash2,
Wand2,
} from "lucide-react";
import { AnimatePresence, motion } from "motion/react";
import Image from "next/image";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
import { toast } from "sonner";
import { membersAtom, myAccessAtom } from "@/atoms/members/members-query.atoms";
import {
@@ -30,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,
@@ -42,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,
@@ -131,7 +127,6 @@ 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);
@@ -170,20 +165,8 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
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
@@ -291,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);
@@ -342,6 +291,14 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
{/* Errors */}
@@ -403,135 +360,9 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
)}
- {/* Active Preference Card */}
- {!isLoading && allConfigs.length > 0 && (
-
-
-
-
-
- Active Image Model
-
- Select which model to use for image generation
-
-
-
-
-
-
- )}
-
- {/* Active Preference Skeleton */}
-
-
-
-
-
-
-
{/* Your Image Models Section Skeleton */}
-
-
-
-
@@ -573,18 +404,6 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
{/* User Configs */}
{!isLoading && (
-
diff --git a/surfsense_web/components/settings/llm-role-manager.tsx b/surfsense_web/components/settings/llm-role-manager.tsx
index c634ffd49..6e44b8958 100644
--- a/surfsense_web/components/settings/llm-role-manager.tsx
+++ b/surfsense_web/components/settings/llm-role-manager.tsx
@@ -7,6 +7,7 @@ import {
CheckCircle,
CircleDashed,
FileText,
+ ImageIcon,
RefreshCw,
RotateCcw,
Save,
@@ -15,6 +16,10 @@ import {
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,
@@ -46,6 +51,8 @@ const ROLE_DESCRIPTIONS = {
description: "Primary LLM for chat interactions and 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,
@@ -53,6 +60,17 @@ const ROLE_DESCRIPTIONS = {
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,
},
};
@@ -61,6 +79,7 @@ interface LLMRoleManagerProps {
}
export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
+ // LLM configs
const {
data: newLLMConfigs = [],
isFetching: configsLoading,
@@ -72,6 +91,20 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
isFetching: globalConfigsLoading,
error: globalConfigsError,
} = 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,15 +126,16 @@ 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);
@@ -108,6 +143,7 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
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(
@@ -122,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({
@@ -143,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);
};
@@ -152,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);
};
@@ -162,16 +193,26 @@ 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
- 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 isLoading = configsLoading || preferencesLoading || globalConfigsLoading;
- const hasError = configsError || preferencesError || globalConfigsError;
+ // 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 || imageConfigsLoading || globalImageConfigsLoading;
+ const hasError = configsError || preferencesError || globalConfigsError || imageConfigsError || globalImageConfigsError;
+ const hasAnyConfigs = allLLMConfigs.length > 0 || allImageConfigs.length > 0;
return (
-
-
{(userConfigs?.length ?? 0) === 0 ? (
Your Image Models
- {canCreate && ( - - )} -
@@ -223,7 +264,7 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
{/* Loading Skeleton */}
{isLoading && (
- {["skeleton-a", "skeleton-b"].map((key) => (
+ {["skeleton-a", "skeleton-b", "skeleton-c"].map((key) => (
{/* Header: icon + title + status */}
@@ -260,18 +301,18 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
)}
{/* No configs warning */}
- {!isLoading && !hasError && allConfigs.length === 0 && (
+ {!isLoading && !hasError && !hasAnyConfigs && (
- No LLM configurations found. Please add at least one LLM provider in the
- Agent Configs tab before assigning roles.
+ No configurations found. Please add at least one LLM provider or image model
+ in the respective settings tabs before assigning roles.
)}
{/* Role Assignment Cards */}
- {!isLoading && !hasError && allConfigs.length > 0 && (
+ {!isLoading && !hasError && hasAnyConfigs && (
{Object.entries(ROLE_DESCRIPTIONS).map(([key, role], index) => {
const IconComponent = role.icon;
+ const isImageRole = role.configType === "image";
const currentAssignment =
- assignments[`${key}_llm_id` as keyof typeof assignments];
- const assignedConfig = allConfigs.find(
+ assignments[role.prefKey as keyof typeof assignments];
+
+ // 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;
+
+ const assignedConfig = roleAllConfigs.find(
(config) => config.id === currentAssignment
);
const isAssigned =
@@ -340,7 +390,7 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {