feat: enhance user association by integrating member data into public chat and image model managers

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<string, { name: string; email?: string; avatarUrl?: string }>();
+		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<NewLLMConfig | null>(null);
@@ -153,21 +177,27 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 	};
 
 	return (
-		<div className="space-y-4 md:space-y-6">
-			{/* Header */}
-			<div className="flex flex-col space-y-4 sm:flex-row sm:items-center sm:justify-between sm:space-y-0">
-				<div className="flex items-center space-x-2">
-					<Button
-						variant="outline"
-						size="sm"
-						onClick={() => refreshConfigs()}
-						disabled={isLoading}
-						className="flex items-center gap-2 text-xs md:text-sm h-8 md:h-9"
-					>
-						<RefreshCw className={cn("h-3 w-3 md:h-4 md:w-4", isLoading && "animate-spin")} />
-						Refresh
-					</Button>
-				</div>
+		<div className="space-y-5 md:space-y-6">
+			{/* Header actions */}
+			<div className="flex items-center justify-between">
+				<Button
+					variant="outline"
+					size="sm"
+					onClick={() => refreshConfigs()}
+					disabled={isLoading}
+					className="flex items-center gap-2 text-xs md:text-sm h-8 md:h-9"
+				>
+					<RefreshCw className={cn("h-3 w-3 md:h-4 md:w-4", isLoading && "animate-spin")} />
+					Refresh
+				</Button>
+				<Button
+					onClick={openNewDialog}
+					size="sm"
+					className="flex items-center gap-2 text-xs md:text-sm h-8 md:h-9"
+				>
+					<Plus className="h-3 w-3 md:h-4 md:w-4" />
+					Add Configuration
+				</Button>
 			</div>
 
 			{/* Error Alerts */}
@@ -193,12 +223,12 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 			{/* Global Configs Info */}
 			{globalConfigs.length > 0 && (
 				<motion.div initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }}>
-					<Alert className="border-blue-500/30 bg-blue-500/5 py-3 md:py-4">
-						<Sparkles className="h-3 w-3 md:h-4 md:w-4 text-blue-600 dark:text-blue-400 shrink-0" />
-						<AlertDescription className="text-blue-800 dark:text-blue-200 text-xs md:text-sm">
+					<Alert className="bg-muted/50 py-3 md:py-4">
+						<Info className="h-3 w-3 md:h-4 md:w-4 shrink-0" />
+						<AlertDescription className="text-xs md:text-sm">
 							<span className="font-medium">{globalConfigs.length} global configuration(s)</span>{" "}
 							available from your administrator. These are pre-configured and ready to use.{" "}
-							<span className="text-blue-600 dark:text-blue-300">
+							<span className="text-muted-foreground">
 								Global configs: {globalConfigs.map((g) => g.name).join(", ")}
 							</span>
 						</AlertDescription>
@@ -222,18 +252,7 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 
 			{/* Configurations List */}
 			{!isLoading && (
-				<div className="space-y-4 md:space-y-6">
-					<div className="flex flex-col space-y-4 sm:flex-row sm:items-center sm:justify-between sm:space-y-0">
-						<h3 className="text-lg md:text-xl font-semibold tracking-tight">Your Configurations</h3>
-						<Button
-							onClick={openNewDialog}
-							className="flex items-center gap-2 text-xs md:text-sm h-8 md:h-9"
-						>
-							<Plus className="h-3 w-3 md:h-4 md:w-4" />
-							Add Configuration
-						</Button>
-					</div>
-
+				<div className="space-y-4">
 					{configs?.length === 0 ? (
 						<motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }}>
 							<Card className="border-dashed border-2 border-muted-foreground/25">
@@ -259,9 +278,16 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 							</Card>
 						</motion.div>
 					) : (
-						<motion.div variants={container} initial="hidden" animate="show" className="grid gap-4">
+						<motion.div
+							variants={container}
+							initial="hidden"
+							animate="show"
+							className="grid gap-3 grid-cols-1 sm:grid-cols-2 xl:grid-cols-3"
+						>
 							<AnimatePresence mode="popLayout">
 								{configs?.map((config) => {
+									const member = config.user_id ? memberMap.get(config.user_id) : null;
+
 									return (
 										<motion.div
 											key={config.id}
@@ -269,131 +295,136 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 											layout
 											exit={{ opacity: 0, scale: 0.95 }}
 										>
-											<Card className="group overflow-hidden hover:shadow-lg transition-all duration-300 border-muted-foreground/10 hover:border-violet-500/30">
-												<CardContent className="p-0">
-													<div className="flex">
-														{/* Left accent bar */}
-														<div className="w-1 md:w-1.5 transition-colors bg-gradient-to-b from-violet-500/50 to-purple-500/50 group-hover:from-violet-500 group-hover:to-purple-500" />
+											<Card className="group relative overflow-hidden transition-all duration-200 border-border/60 hover:shadow-md h-full">
+												<CardContent className="p-4 flex flex-col gap-3 h-full">
+													{/* Header: Name + Actions */}
+													<div className="flex items-start justify-between gap-2">
+														<div className="min-w-0 flex-1">
+															<h4 className="text-sm font-semibold tracking-tight truncate">
+																{config.name}
+															</h4>
+															{config.description && (
+																<p className="text-[11px] text-muted-foreground/70 truncate mt-0.5">
+																	{config.description}
+																</p>
+															)}
+														</div>
+														<div className="flex items-center gap-0.5 shrink-0 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity duration-150">
+															<TooltipProvider>
+																<Tooltip>
+																	<TooltipTrigger asChild>
+																		<Button
+																			variant="ghost"
+																			size="icon"
+																			onClick={() => openEditDialog(config)}
+																			className="h-7 w-7 text-muted-foreground hover:text-foreground"
+																		>
+																			<Edit3 className="h-3 w-3" />
+																		</Button>
+																	</TooltipTrigger>
+																	<TooltipContent>Edit</TooltipContent>
+																</Tooltip>
+															</TooltipProvider>
+															<TooltipProvider>
+																<Tooltip>
+																	<TooltipTrigger asChild>
+																		<Button
+																			variant="ghost"
+																			size="icon"
+																			onClick={() => setConfigToDelete(config)}
+																			className="h-7 w-7 text-muted-foreground hover:text-destructive"
+																		>
+																			<Trash2 className="h-3 w-3" />
+																		</Button>
+																	</TooltipTrigger>
+																	<TooltipContent>Delete</TooltipContent>
+																</Tooltip>
+															</TooltipProvider>
+														</div>
+													</div>
 
-														<div className="flex-1 p-3 md:p-5">
-															<div className="flex items-start justify-between gap-2 md:gap-4">
-																{/* Main content */}
-																<div className="flex items-start gap-2 md:gap-4 flex-1 min-w-0">
-																	<div className="flex h-10 w-10 md:h-12 md:w-12 items-center justify-center rounded-lg md:rounded-xl bg-gradient-to-br from-violet-500/10 to-purple-500/10 group-hover:from-violet-500/20 group-hover:to-purple-500/20 transition-colors shrink-0">
-																		<Bot className="h-5 w-5 md:h-6 md:w-6 text-violet-600 dark:text-violet-400" />
-																	</div>
-																	<div className="flex-1 min-w-0 space-y-2 md:space-y-3">
-																		{/* Title row */}
-																		<div className="flex items-center gap-1.5 md:gap-2 flex-wrap">
-																			<h4 className="text-sm md:text-base font-semibold tracking-tight truncate">
-																				{config.name}
-																			</h4>
-																			<div className="flex items-center gap-1 md:gap-1.5 flex-wrap">
-																				<Badge
-																					variant="secondary"
-																					className="text-[9px] md:text-[10px] font-medium px-1.5 md:px-2 py-0.5 bg-violet-500/10 text-violet-700 dark:text-violet-300 border-violet-500/20"
-																				>
-																					{config.provider}
-																				</Badge>
-																				{config.citations_enabled && (
-																					<TooltipProvider>
-																						<Tooltip>
-																							<TooltipTrigger>
-																								<Badge
-																									variant="outline"
-																									className="text-[9px] md:text-[10px] px-1.5 md:px-2 py-0.5 border-emerald-500/30 text-emerald-700 dark:text-emerald-300"
-																								>
-																									<MessageSquareQuote className="h-2.5 w-2.5 md:h-3 md:w-3 mr-0.5 md:mr-1" />
-																									Citations
-																								</Badge>
-																							</TooltipTrigger>
-																							<TooltipContent>
-																								Citations are enabled for this configuration
-																							</TooltipContent>
-																						</Tooltip>
-																					</TooltipProvider>
+													{/* Provider + Model */}
+													<div className="flex items-center gap-2 flex-wrap">
+														<Badge
+															variant="secondary"
+															className="text-[10px] font-medium px-2 py-0.5 bg-violet-500/10 text-violet-700 dark:text-violet-300 border-violet-500/20"
+														>
+															{config.provider}
+														</Badge>
+														<code className="text-[11px] font-mono text-muted-foreground bg-muted/60 px-2 py-0.5 rounded-md truncate max-w-[160px]">
+															{config.model_name}
+														</code>
+													</div>
+
+													{/* Feature badges */}
+													<div className="flex items-center gap-1.5 flex-wrap">
+														{config.citations_enabled && (
+															<Badge
+																variant="outline"
+																className="text-[10px] px-1.5 py-0.5 border-emerald-500/30 text-emerald-700 dark:text-emerald-300 bg-emerald-500/5"
+															>
+																<MessageSquareQuote className="h-2.5 w-2.5 mr-1" />
+																Citations
+															</Badge>
+														)}
+														{!config.use_default_system_instructions &&
+															config.system_instructions && (
+																<Badge
+																	variant="outline"
+																	className="text-[10px] px-1.5 py-0.5 border-blue-500/30 text-blue-700 dark:text-blue-300 bg-blue-500/5"
+																>
+																	<FileText className="h-2.5 w-2.5 mr-1" />
+																	Custom
+																</Badge>
+															)}
+													</div>
+
+													{/* Footer: Date + Creator */}
+													<div className="flex items-center gap-2 pt-2 border-t border-border/40 mt-auto">
+														<span className="text-[11px] text-muted-foreground/60">
+															{new Date(config.created_at).toLocaleDateString(
+																undefined,
+																{
+																	year: "numeric",
+																	month: "short",
+																	day: "numeric",
+																}
+															)}
+														</span>
+														{member && (
+															<>
+																<span className="text-muted-foreground/30">·</span>
+																<TooltipProvider>
+																	<Tooltip>
+																		<TooltipTrigger asChild>
+																			<div className="flex items-center gap-1.5 cursor-default">
+																				{member.avatarUrl ? (
+																					<Image
+																						src={member.avatarUrl}
+																						alt={member.name}
+																						width={18}
+																						height={18}
+																						className="h-4.5 w-4.5 rounded-full object-cover shrink-0"
+																					/>
+																				) : (
+																					<div className="flex h-4.5 w-4.5 items-center justify-center rounded-full bg-gradient-to-br from-primary/20 to-primary/5 shrink-0">
+																						<span className="text-[9px] font-semibold text-primary">
+																							{getInitials(member.name)}
+																						</span>
+																					</div>
 																				)}
-																				{!config.use_default_system_instructions &&
-																					config.system_instructions && (
-																						<TooltipProvider>
-																							<Tooltip>
-																								<TooltipTrigger>
-																									<Badge
-																										variant="outline"
-																										className="text-[9px] md:text-[10px] px-1.5 md:px-2 py-0.5 border-blue-500/30 text-blue-700 dark:text-blue-300"
-																									>
-																										<FileText className="h-2.5 w-2.5 md:h-3 md:w-3 mr-0.5 md:mr-1" />
-																										Custom
-																									</Badge>
-																								</TooltipTrigger>
-																								<TooltipContent>
-																									Using custom system instructions
-																								</TooltipContent>
-																							</Tooltip>
-																						</TooltipProvider>
-																					)}
-																			</div>
-																		</div>
-
-																		{/* Model name */}
-																		<code className="text-[10px] md:text-xs font-mono text-muted-foreground bg-muted/50 px-1.5 md:px-2 py-0.5 md:py-1 rounded-md inline-block">
-																			{config.model_name}
-																		</code>
-
-																		{/* Description if any */}
-																		{config.description && (
-																			<p className="text-[10px] md:text-xs text-muted-foreground line-clamp-1">
-																				{config.description}
-																			</p>
-																		)}
-
-																		{/* Footer row */}
-																		<div className="flex items-center gap-2 md:gap-4 pt-1">
-																			<div className="flex items-center gap-1 md:gap-1.5 text-[10px] md:text-xs text-muted-foreground">
-																				<Clock className="h-2.5 w-2.5 md:h-3 md:w-3" />
-																				<span>
-																					{new Date(config.created_at).toLocaleDateString()}
+																				<span className="text-[11px] text-muted-foreground/60 truncate max-w-[80px]">
+																					{member.name}
 																				</span>
 																			</div>
-																		</div>
-																	</div>
-																</div>
-
-																{/* Actions */}
-																<div className="flex items-center gap-0.5 md:gap-1 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
-																	<TooltipProvider>
-																		<Tooltip>
-																			<TooltipTrigger asChild>
-																				<Button
-																					variant="ghost"
-																					size="sm"
-																					onClick={() => openEditDialog(config)}
-																					className="h-7 w-7 md:h-8 md:w-8 p-0 text-muted-foreground hover:text-foreground"
-																				>
-																					<Edit3 className="h-3.5 w-3.5 md:h-4 md:w-4" />
-																				</Button>
-																			</TooltipTrigger>
-																			<TooltipContent>Edit</TooltipContent>
-																		</Tooltip>
-																	</TooltipProvider>
-																	<TooltipProvider>
-																		<Tooltip>
-																			<TooltipTrigger asChild>
-																				<Button
-																					variant="ghost"
-																					size="sm"
-																					onClick={() => setConfigToDelete(config)}
-																					className="h-7 w-7 md:h-8 md:w-8 p-0 text-muted-foreground hover:text-destructive"
-																				>
-																					<Trash2 className="h-3.5 w-3.5 md:h-4 md:w-4" />
-																				</Button>
-																			</TooltipTrigger>
-																			<TooltipContent>Delete</TooltipContent>
-																		</Tooltip>
-																	</TooltipProvider>
-																</div>
-															</div>
-														</div>
+																		</TooltipTrigger>
+																		<TooltipContent side="bottom">
+																			{member.email || member.name}
+																		</TooltipContent>
+																	</Tooltip>
+																</TooltipProvider>
+															</>
+														)}
 													</div>
 												</CardContent>
 											</Card>
@@ -408,7 +439,10 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 
 			{/* Add/Edit Configuration Dialog */}
 			<Dialog open={isDialogOpen} onOpenChange={(open) => !open && closeDialog()}>
-				<DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
+				<DialogContent
+					className="max-w-2xl max-h-[90vh] overflow-y-auto"
+					onOpenAutoFocus={(e) => e.preventDefault()}
+				>
 					<DialogHeader>
 						<DialogTitle className="flex items-center gap-2">
 							{editingConfig ? (