apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-05-05 13:52:40 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Merge pull request #579 from MODSetter/dev

Browse source 
refactor(ux): Update dashboard links and enhance settings page layout
This commit is contained in:
Rohan Verma 2025-12-13 22:46:00 -08:00 • committed by GitHub
commit eefaefad0d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 720 additions and 297 deletions
Download patch file Download diff file Expand all files Collapse all files

12
surfsense_web/app/dashboard/[search_space_id]/layout.tsx
View file

@ -52,18 +52,6 @@ export default function DashboardLayout({
}, },
], ],
}, },
{
title: "Team",
url: `/dashboard/${search_space_id}/team`,
icon: "Users",
items: [],
},
{
title: "Settings",
url: `/dashboard/${search_space_id}/settings`,
icon: "Settings2",
items: [],
},
{ {
title: "Logs", title: "Logs",
url: `/dashboard/${search_space_id}/logs`, url: `/dashboard/${search_space_id}/logs`,

9
surfsense_web/app/dashboard/[search_space_id]/settings/layout.tsx Normal file
View file

@ -0,0 +1,9 @@
import type React from "react";
/**
* Settings layout - renders children directly without the parent sidebar
* This creates a full-screen settings experience
*/
export default function SettingsLayout({ children }: { children: React.ReactNode }) {
return <div className="fixed inset-0 z-50 bg-background">{children}</div>;
}

353
surfsense_web/app/dashboard/[search_space_id]/settings/page.tsx
View file

@ -1,83 +1,302 @@
"use client"; "use client";
import { ArrowLeft, Bot, Brain, MessageSquare, Settings } from "lucide-react"; import {
ArrowLeft,
Bot,
Brain,
ChevronRight,
type LucideIcon,
Menu,
MessageSquare,
Settings,
X,
} from "lucide-react";
import { AnimatePresence, motion } from "motion/react";
import { useParams, useRouter } from "next/navigation"; import { useParams, useRouter } from "next/navigation";
import { useCallback, useState } from "react";
import { LLMRoleManager } from "@/components/settings/llm-role-manager"; import { LLMRoleManager } from "@/components/settings/llm-role-manager";
import { ModelConfigManager } from "@/components/settings/model-config-manager"; import { ModelConfigManager } from "@/components/settings/model-config-manager";
import { PromptConfigManager } from "@/components/settings/prompt-config-manager"; import { PromptConfigManager } from "@/components/settings/prompt-config-manager";
import { Separator } from "@/components/ui/separator"; import { Button } from "@/components/ui/button";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { cn } from "@/lib/utils";
interface SettingsNavItem {
id: string;
label: string;
description: string;
icon: LucideIcon;
}
const settingsNavItems: SettingsNavItem[] = [
{
id: "models",
label: "Model Configs",
description: "Configure AI models and providers",
icon: Bot,
},
{
id: "roles",
label: "LLM Roles",
description: "Manage language model roles",
icon: Brain,
},
{
id: "prompts",
label: "System Instructions",
description: "Customize system prompts",
icon: MessageSquare,
},
];
function SettingsSidebar({
activeSection,
onSectionChange,
onBackToApp,
isOpen,
onClose,
}: {
activeSection: string;
onSectionChange: (section: string) => void;
onBackToApp: () => void;
isOpen: boolean;
onClose: () => void;
}) {
const handleNavClick = (sectionId: string) => {
onSectionChange(sectionId);
onClose(); // Close sidebar on mobile after selection
};
return (
<>
{/* Mobile overlay */}
<AnimatePresence>
{isOpen && (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.2 }}
className="fixed inset-0 bg-background/80 backdrop-blur-sm z-40 md:hidden"
onClick={onClose}
/>
)}
</AnimatePresence>
{/* Sidebar */}
<aside
className={cn(
"fixed md:relative left-0 top-0 z-50 md:z-auto",
"w-72 shrink-0 border-r border-border bg-background md:bg-muted/20 h-full flex flex-col",
"transition-transform duration-300 ease-out",
"md:translate-x-0",
isOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0"
)}
>
{/* Header with back button */}
<div className="p-4 border-b border-border flex items-center justify-between">
<Button
variant="ghost"
onClick={onBackToApp}
className="flex-1 justify-start gap-3 h-11 px-3 hover:bg-muted group"
>
<div className="flex items-center justify-center w-8 h-8 rounded-lg bg-primary/10 group-hover:bg-primary/20 transition-colors">
<ArrowLeft className="h-4 w-4 text-primary" />
</div>
<span className="font-medium">Back to app</span>
</Button>
{/* Mobile close button */}
<Button variant="ghost" size="icon" onClick={onClose} className="md:hidden h-9 w-9">
<X className="h-5 w-5" />
</Button>
</div>
{/* Navigation Items */}
<nav className="flex-1 px-3 py-2 space-y-1 overflow-y-auto">
{settingsNavItems.map((item, index) => {
const isActive = activeSection === item.id;
const Icon = item.icon;
return (
<motion.button
key={item.id}
initial={{ opacity: 0, x: -10 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.1 + index * 0.05, duration: 0.3 }}
onClick={() => handleNavClick(item.id)}
whileHover={{ scale: 1.01 }}
whileTap={{ scale: 0.99 }}
className={cn(
"relative w-full flex items-center gap-3 px-3 py-3 rounded-xl text-left transition-all duration-200",
isActive ? "bg-muted shadow-sm border border-border" : "hover:bg-muted/60"
)}
>
{isActive && (
<motion.div
layoutId="settingsActiveIndicator"
className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 bg-primary rounded-r-full"
initial={false}
transition={{
type: "spring",
stiffness: 500,
damping: 35,
}}
/>
)}
<div
className={cn(
"flex items-center justify-center w-9 h-9 rounded-lg transition-colors",
isActive ? "bg-primary/10 text-primary" : "bg-muted text-muted-foreground"
)}
>
<Icon className="h-4 w-4" />
</div>
<div className="flex-1 min-w-0">
<p
className={cn(
"text-sm font-medium truncate transition-colors",
isActive ? "text-foreground" : "text-muted-foreground"
)}
>
{item.label}
</p>
<p className="text-xs text-muted-foreground/70 truncate">{item.description}</p>
</div>
<ChevronRight
className={cn(
"h-4 w-4 shrink-0 transition-all",
isActive
? "text-primary opacity-100 translate-x-0"
: "text-muted-foreground/40 opacity-0 -translate-x-1"
)}
/>
</motion.button>
);
})}
</nav>
{/* Footer */}
<div className="p-4 border-t border-border">
<p className="text-xs text-muted-foreground text-center">SurfSense Settings</p>
</div>
</aside>
</>
);
}
function SettingsContent({
activeSection,
searchSpaceId,
onMenuClick,
}: {
activeSection: string;
searchSpaceId: number;
onMenuClick: () => void;
}) {
const activeItem = settingsNavItems.find((item) => item.id === activeSection);
const Icon = activeItem?.icon || Settings;
return (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.2, duration: 0.4 }}
className="flex-1 min-w-0 h-full overflow-hidden bg-background"
>
<div className="h-full overflow-y-auto">
<div className="max-w-4xl mx-auto p-4 md:p-6 lg:p-10">
{/* Section Header */}
<AnimatePresence mode="wait">
<motion.div
key={activeSection + "-header"}
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -10 }}
transition={{ duration: 0.3 }}
className="mb-6 md:mb-8"
>
<div className="flex items-center gap-3 md:gap-4">
{/* Mobile menu button */}
<Button
variant="outline"
size="icon"
onClick={onMenuClick}
className="md:hidden h-10 w-10 shrink-0"
>
<Menu className="h-5 w-5" />
</Button>
<motion.div
initial={{ scale: 0.8, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
transition={{ delay: 0.1, duration: 0.3 }}
className="flex items-center justify-center w-12 h-12 md:w-14 md:h-14 rounded-xl md:rounded-2xl bg-gradient-to-br from-primary/20 to-primary/5 border border-primary/10 shadow-sm shrink-0"
>
<Icon className="h-6 w-6 md:h-7 md:w-7 text-primary" />
</motion.div>
<div className="min-w-0">
<h1 className="text-xl md:text-2xl font-bold tracking-tight truncate">
{activeItem?.label}
</h1>
<p className="text-sm text-muted-foreground mt-0.5 truncate">
{activeItem?.description}
</p>
</div>
</div>
</motion.div>
</AnimatePresence>
{/* Section Content */}
<AnimatePresence mode="wait">
<motion.div
key={activeSection}
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -20 }}
transition={{
duration: 0.35,
ease: [0.4, 0, 0.2, 1],
}}
>
{activeSection === "models" && <ModelConfigManager searchSpaceId={searchSpaceId} />}
{activeSection === "roles" && <LLMRoleManager searchSpaceId={searchSpaceId} />}
{activeSection === "prompts" && <PromptConfigManager searchSpaceId={searchSpaceId} />}
</motion.div>
</AnimatePresence>
</div>
</div>
</motion.div>
);
}
export default function SettingsPage() { export default function SettingsPage() {
const router = useRouter(); const router = useRouter();
const params = useParams(); const params = useParams();
const searchSpaceId = Number(params.search_space_id); const searchSpaceId = Number(params.search_space_id);
const [activeSection, setActiveSection] = useState("models");
const [isSidebarOpen, setIsSidebarOpen] = useState(false);
const handleBackToApp = useCallback(() => {
router.push(`/dashboard/${searchSpaceId}/researcher`);
}, [router, searchSpaceId]);
return ( return (
<div className="min-h-screen bg-background"> <motion.div
<div className="container max-w-7xl mx-auto p-6 lg:p-8"> initial={{ opacity: 0 }}
<div className="space-y-8"> animate={{ opacity: 1 }}
{/* Header Section */} transition={{ duration: 0.3 }}
<div className="space-y-4"> className="h-full flex bg-background"
<div className="flex items-center space-x-4">
{/* Back Button */}
<button
onClick={() => router.push(`/dashboard/${searchSpaceId}`)}
className="flex items-center justify-center h-10 w-10 rounded-lg bg-primary/10 hover:bg-primary/20 transition-colors"
aria-label="Back to Dashboard"
type="button"
> >
<ArrowLeft className="h-5 w-5 text-primary" /> <SettingsSidebar
</button> activeSection={activeSection}
<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10"> onSectionChange={setActiveSection}
<Settings className="h-6 w-6 text-primary" /> onBackToApp={handleBackToApp}
</div> isOpen={isSidebarOpen}
<div className="space-y-1"> onClose={() => setIsSidebarOpen(false)}
<h1 className="text-3xl font-bold tracking-tight">Settings</h1> />
<p className="text-lg text-muted-foreground"> <SettingsContent
Manage your settings for this search space. activeSection={activeSection}
</p> searchSpaceId={searchSpaceId}
</div> onMenuClick={() => setIsSidebarOpen(true)}
</div> />
<Separator className="my-6" /> </motion.div>
</div>
{/* Settings Content */}
<Tabs defaultValue="models" className="space-y-8">
<div className="overflow-x-auto">
<TabsList className="grid w-full min-w-fit grid-cols-3 lg:w-auto lg:inline-grid">
<TabsTrigger value="models" className="flex items-center gap-2 text-sm">
<Bot className="h-4 w-4" />
<span className="hidden sm:inline">Model Configs</span>
<span className="sm:hidden">Models</span>
</TabsTrigger>
<TabsTrigger value="roles" className="flex items-center gap-2 text-sm">
<Brain className="h-4 w-4" />
<span className="hidden sm:inline">LLM Roles</span>
<span className="sm:hidden">Roles</span>
</TabsTrigger>
<TabsTrigger value="prompts" className="flex items-center gap-2 text-sm">
<MessageSquare className="h-4 w-4" />
<span className="hidden sm:inline">System Instructions</span>
<span className="sm:hidden">System Instructions</span>
</TabsTrigger>
</TabsList>
</div>
<TabsContent value="models" className="space-y-6">
<ModelConfigManager searchSpaceId={searchSpaceId} />
</TabsContent>
<TabsContent value="roles" className="space-y-6">
<LLMRoleManager searchSpaceId={searchSpaceId} />
</TabsContent>
<TabsContent value="prompts" className="space-y-6">
<PromptConfigManager searchSpaceId={searchSpaceId} />
</TabsContent>
</Tabs>
</div>
</div>
</div>
); );
} }

4
surfsense_web/app/dashboard/page.tsx
View file

@ -255,7 +255,7 @@ const DashboardPage = () => {
/> />
<div className="flex flex-col h-full justify-between overflow-hidden rounded-xl border bg-muted/30 backdrop-blur-sm transition-all hover:border-primary/50"> <div className="flex flex-col h-full justify-between overflow-hidden rounded-xl border bg-muted/30 backdrop-blur-sm transition-all hover:border-primary/50">
<div className="relative h-32 w-full overflow-hidden"> <div className="relative h-32 w-full overflow-hidden">
<Link href={`/dashboard/${space.id}/documents`} key={space.id}> <Link href={`/dashboard/${space.id}/researcher`} key={space.id}>
<Image <Image
src="https://images.unsplash.com/photo-1519389950473-47ba0277781c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80" src="https://images.unsplash.com/photo-1519389950473-47ba0277781c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80"
alt={space.name} alt={space.name}
@ -300,7 +300,7 @@ const DashboardPage = () => {
</div> </div>
<Link <Link
className="flex flex-1 flex-col p-4 cursor-pointer" className="flex flex-1 flex-col p-4 cursor-pointer"
href={`/dashboard/${space.id}/documents`} href={`/dashboard/${space.id}/researcher`}
key={space.id} key={space.id}
> >
<div className="flex flex-1 flex-col justify-between p-1"> <div className="flex flex-1 flex-col justify-between p-1">

7
surfsense_web/components/markdown-viewer.tsx
View file

@ -28,7 +28,12 @@ export function MarkdownViewer({ content, className }: MarkdownViewerProps) {
</p> </p>
), ),
a: ({ node, children, ...props }: any) => ( a: ({ node, children, ...props }: any) => (
<a className="text-primary hover:underline" target="_blank" rel="noopener noreferrer" {...props}> <a
className="text-primary hover:underline"
target="_blank"
rel="noopener noreferrer"
{...props}
>
{children} {children}
</a> </a>
), ),

88
surfsense_web/components/settings/llm-role-manager.tsx
View file

@ -255,93 +255,89 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
{/* Stats Overview */} {/* Stats Overview */}
{!isLoading && !hasError && ( {!isLoading && !hasError && (
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4"> <div className="grid gap-3 grid-cols-2 lg:grid-cols-4">
<Card className="border-l-4 border-l-blue-500"> <Card className="overflow-hidden">
<CardContent className="p-6"> <div className="h-1 bg-blue-500" />
<div className="flex items-center justify-between space-x-4"> <CardContent className="p-4">
<div className="space-y-1"> <div className="flex items-start justify-between gap-2">
<p className="text-3xl font-bold tracking-tight">{availableConfigs.length}</p> <div className="space-y-1 min-w-0">
<p className="text-sm font-medium text-muted-foreground">Available Models</p> <p className="text-2xl font-bold tracking-tight">{availableConfigs.length}</p>
<div className="flex gap-2 text-xs text-muted-foreground"> <p className="text-xs font-medium text-muted-foreground">Available Models</p>
<span>🌐 {globalConfigs.length} Global</span> <div className="flex flex-wrap gap-x-2 gap-y-0.5 text-[10px] text-muted-foreground">
<span>• {llmConfigs.length} Custom</span> <span>{globalConfigs.length} Global</span>
<span>{llmConfigs.length} Custom</span>
</div> </div>
</div> </div>
<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-blue-500/10"> <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-blue-500/10">
<Bot className="h-6 w-6 text-blue-600" /> <Bot className="h-4 w-4 text-blue-600" />
</div> </div>
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
<Card className="border-l-4 border-l-purple-500"> <Card className="overflow-hidden">
<CardContent className="p-6"> <div className="h-1 bg-purple-500" />
<div className="flex items-center justify-between space-x-4"> <CardContent className="p-4">
<div className="space-y-1"> <div className="flex items-start justify-between gap-2">
<p className="text-3xl font-bold tracking-tight">{assignedConfigIds.length}</p> <div className="space-y-1 min-w-0">
<p className="text-sm font-medium text-muted-foreground">Assigned Roles</p> <p className="text-2xl font-bold tracking-tight">{assignedConfigIds.length}</p>
<p className="text-xs font-medium text-muted-foreground">Assigned Roles</p>
</div> </div>
<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-purple-500/10"> <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-purple-500/10">
<CheckCircle className="h-6 w-6 text-purple-600" /> <CheckCircle className="h-4 w-4 text-purple-600" />
</div> </div>
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
<Card <Card className="overflow-hidden">
className={`border-l-4 ${ <div className={`h-1 ${isAssignmentComplete ? "bg-green-500" : "bg-yellow-500"}`} />
isAssignmentComplete ? "border-l-green-500" : "border-l-yellow-500" <CardContent className="p-4">
}`} <div className="flex items-start justify-between gap-2">
> <div className="space-y-1 min-w-0">
<CardContent className="p-6"> <p className="text-2xl font-bold tracking-tight">
<div className="flex items-center justify-between space-x-4">
<div className="space-y-1">
<p className="text-3xl font-bold tracking-tight">
{Math.round((assignedConfigIds.length / 3) * 100)}% {Math.round((assignedConfigIds.length / 3) * 100)}%
</p> </p>
<p className="text-sm font-medium text-muted-foreground">Completion</p> <p className="text-xs font-medium text-muted-foreground">Completion</p>
</div> </div>
<div <div
className={`flex h-12 w-12 items-center justify-center rounded-lg ${ className={`flex h-9 w-9 shrink-0 items-center justify-center rounded-lg ${
isAssignmentComplete ? "bg-green-500/10" : "bg-yellow-500/10" isAssignmentComplete ? "bg-green-500/10" : "bg-yellow-500/10"
}`} }`}
> >
{isAssignmentComplete ? ( {isAssignmentComplete ? (
<CheckCircle className="h-6 w-6 text-green-600" /> <CheckCircle className="h-4 w-4 text-green-600" />
) : ( ) : (
<AlertCircle className="h-6 w-6 text-yellow-600" /> <AlertCircle className="h-4 w-4 text-yellow-600" />
)} )}
</div> </div>
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
<Card <Card className="overflow-hidden">
className={`border-l-4 ${ <div className={`h-1 ${isAssignmentComplete ? "bg-emerald-500" : "bg-orange-500"}`} />
isAssignmentComplete ? "border-l-emerald-500" : "border-l-orange-500" <CardContent className="p-4">
}`} <div className="flex items-start justify-between gap-2">
> <div className="space-y-1 min-w-0">
<CardContent className="p-6">
<div className="flex items-center justify-between space-x-4">
<div className="space-y-1">
<p <p
className={`text-3xl font-bold tracking-tight ${ className={`text-2xl font-bold tracking-tight ${
isAssignmentComplete ? "text-emerald-600" : "text-orange-600" isAssignmentComplete ? "text-emerald-600" : "text-orange-600"
}`} }`}
> >
{isAssignmentComplete ? "Ready" : "Setup"} {isAssignmentComplete ? "Ready" : "Setup"}
</p> </p>
<p className="text-sm font-medium text-muted-foreground">Status</p> <p className="text-xs font-medium text-muted-foreground">Status</p>
</div> </div>
<div <div
className={`flex h-12 w-12 items-center justify-center rounded-lg ${ className={`flex h-9 w-9 shrink-0 items-center justify-center rounded-lg ${
isAssignmentComplete ? "bg-emerald-500/10" : "bg-orange-500/10" isAssignmentComplete ? "bg-emerald-500/10" : "bg-orange-500/10"
}`} }`}
> >
{isAssignmentComplete ? ( {isAssignmentComplete ? (
<CheckCircle className="h-6 w-6 text-emerald-600" /> <CheckCircle className="h-4 w-4 text-emerald-600" />
) : ( ) : (
<RefreshCw className="h-6 w-6 text-orange-600" /> <RefreshCw className="h-4 w-4 text-orange-600" />
)} )}
</div> </div>
</div> </div>

262
surfsense_web/components/settings/model-config-manager.tsx
View file

@ -8,8 +8,6 @@ import {
ChevronsUpDown, ChevronsUpDown,
Clock, Clock,
Edit3, Edit3,
Eye,
EyeOff,
Loader2, Loader2,
Plus, Plus,
RefreshCw, RefreshCw,
@ -20,6 +18,16 @@ import { AnimatePresence, motion } from "motion/react";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { toast } from "sonner"; import { toast } from "sonner";
import { Alert, AlertDescription } from "@/components/ui/alert"; import { Alert, AlertDescription } from "@/components/ui/alert";
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card"; import { Card, CardContent } from "@/components/ui/card";
@ -77,7 +85,6 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
const { globalConfigs } = useGlobalLLMConfigs(); const { globalConfigs } = useGlobalLLMConfigs();
const [isAddingNew, setIsAddingNew] = useState(false); const [isAddingNew, setIsAddingNew] = useState(false);
const [editingConfig, setEditingConfig] = useState<LLMConfig | null>(null); const [editingConfig, setEditingConfig] = useState<LLMConfig | null>(null);
const [showApiKey, setShowApiKey] = useState<Record<number, boolean>>({});
const [formData, setFormData] = useState<CreateLLMConfig>({ const [formData, setFormData] = useState<CreateLLMConfig>({
name: "", name: "",
provider: "", provider: "",
@ -91,6 +98,8 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
}); });
const [isSubmitting, setIsSubmitting] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false);
const [modelComboboxOpen, setModelComboboxOpen] = useState(false); const [modelComboboxOpen, setModelComboboxOpen] = useState(false);
const [configToDelete, setConfigToDelete] = useState<LLMConfig | null>(null);
const [isDeleting, setIsDeleting] = useState(false);
// Populate form when editing // Populate form when editing
useEffect(() => { useEffect(() => {
@ -162,19 +171,22 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
} }
}; };
const handleDelete = async (id: number) => { const handleDeleteClick = (config: LLMConfig) => {
if ( setConfigToDelete(config);
confirm("Are you sure you want to delete this configuration? This action cannot be undone.")
) {
await deleteLLMConfig(id);
}
}; };
const toggleApiKeyVisibility = (configId: number) => { const handleConfirmDelete = async () => {
setShowApiKey((prev) => ({ if (!configToDelete) return;
...prev, setIsDeleting(true);
[configId]: !prev[configId], try {
})); await deleteLLMConfig(configToDelete.id);
toast.success("Configuration deleted successfully");
} catch (error) {
toast.error("Failed to delete configuration");
} finally {
setIsDeleting(false);
setConfigToDelete(null);
}
}; };
const selectedProvider = LLM_PROVIDERS.find((p) => p.value === formData.provider); const selectedProvider = LLM_PROVIDERS.find((p) => p.value === formData.provider);
@ -184,13 +196,6 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
return LLM_PROVIDERS.find((p) => p.value === providerValue); return LLM_PROVIDERS.find((p) => p.value === providerValue);
}; };
const maskApiKey = (apiKey: string) => {
if (apiKey.length <= 8) return "*".repeat(apiKey.length);
return (
apiKey.substring(0, 4) + "*".repeat(apiKey.length - 8) + apiKey.substring(apiKey.length - 4)
);
};
return ( return (
<div className="space-y-6"> <div className="space-y-6">
{/* Header */} {/* Header */}
@ -258,46 +263,49 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
{/* Stats Overview */} {/* Stats Overview */}
{!loading && !error && ( {!loading && !error && (
<div className="grid gap-4 md:grid-cols-3"> <div className="grid gap-3 grid-cols-3">
<Card className="border-l-4 border-l-blue-500"> <Card className="overflow-hidden">
<CardContent className="p-6"> <div className="h-1 bg-blue-500" />
<div className="flex items-center justify-between space-x-4"> <CardContent className="p-4">
<div className="space-y-1"> <div className="flex items-start justify-between gap-2">
<p className="text-3xl font-bold tracking-tight">{llmConfigs.length}</p> <div className="space-y-1 min-w-0">
<p className="text-sm font-medium text-muted-foreground">Total Configurations</p> <p className="text-2xl font-bold tracking-tight">{llmConfigs.length}</p>
<p className="text-xs font-medium text-muted-foreground">Total Configs</p>
</div> </div>
<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-blue-500/10"> <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-blue-500/10">
<Bot className="h-6 w-6 text-blue-600" /> <Bot className="h-4 w-4 text-blue-600" />
</div> </div>
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
<Card className="border-l-4 border-l-green-500"> <Card className="overflow-hidden">
<CardContent className="p-6"> <div className="h-1 bg-green-500" />
<div className="flex items-center justify-between space-x-4"> <CardContent className="p-4">
<div className="space-y-1"> <div className="flex items-start justify-between gap-2">
<p className="text-3xl font-bold tracking-tight"> <div className="space-y-1 min-w-0">
<p className="text-2xl font-bold tracking-tight">
{new Set(llmConfigs.map((c) => c.provider)).size} {new Set(llmConfigs.map((c) => c.provider)).size}
</p> </p>
<p className="text-sm font-medium text-muted-foreground">Unique Providers</p> <p className="text-xs font-medium text-muted-foreground">Providers</p>
</div> </div>
<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-green-500/10"> <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-green-500/10">
<CheckCircle className="h-6 w-6 text-green-600" /> <CheckCircle className="h-4 w-4 text-green-600" />
</div> </div>
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
<Card className="border-l-4 border-l-emerald-500"> <Card className="overflow-hidden">
<CardContent className="p-6"> <div className="h-1 bg-emerald-500" />
<div className="flex items-center justify-between space-x-4"> <CardContent className="p-4">
<div className="space-y-1"> <div className="flex items-start justify-between gap-2">
<p className="text-3xl font-bold tracking-tight text-emerald-600">Active</p> <div className="space-y-1 min-w-0">
<p className="text-sm font-medium text-muted-foreground">System Status</p> <p className="text-2xl font-bold tracking-tight text-emerald-600">Active</p>
<p className="text-xs font-medium text-muted-foreground">Status</p>
</div> </div>
<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-emerald-500/10"> <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-emerald-500/10">
<CheckCircle className="h-6 w-6 text-emerald-600" /> <CheckCircle className="h-4 w-4 text-emerald-600" />
</div> </div>
</div> </div>
</CardContent> </CardContent>
@ -352,120 +360,92 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
exit={{ opacity: 0, y: -10 }} exit={{ opacity: 0, y: -10 }}
transition={{ duration: 0.2 }} transition={{ duration: 0.2 }}
> >
<Card className="group border-l-4 border-l-primary/50 hover:border-l-primary hover:shadow-md transition-all duration-200"> <Card className="group overflow-hidden hover:shadow-md transition-all duration-200">
<CardContent className="p-6"> <CardContent className="p-0">
<div className="flex items-start justify-between"> <div className="flex">
<div className="flex-1 space-y-4"> {/* Left accent bar */}
{/* Header */} <div className="w-1 bg-primary/50 group-hover:bg-primary transition-colors" />
<div className="flex items-start gap-4">
<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10 group-hover:bg-primary/20 transition-colors"> <div className="flex-1 p-5">
<Bot className="h-6 w-6 text-primary" /> <div className="flex items-start justify-between gap-4">
{/* Main content */}
<div className="flex items-start gap-4 flex-1 min-w-0">
<div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-primary/10 group-hover:bg-primary/15 transition-colors">
<Bot className="h-5 w-5 text-primary" />
</div> </div>
<div className="flex-1 space-y-2"> <div className="flex-1 min-w-0 space-y-3">
<div className="flex items-center gap-3"> {/* Title row */}
<h4 className="text-lg font-semibold tracking-tight"> <div className="flex items-center gap-2 flex-wrap">
<h4 className="text-base font-semibold tracking-tight truncate">
{config.name} {config.name}
</h4> </h4>
<Badge variant="secondary" className="text-xs font-medium"> <div className="flex items-center gap-1.5">
<Badge
variant="secondary"
className="text-[10px] font-medium px-1.5 py-0"
>
{config.provider} {config.provider}
</Badge> </Badge>
</div>
<p className="text-sm text-muted-foreground font-mono">
{config.model_name}
</p>
{config.language && ( {config.language && (
<div className="flex items-center gap-2"> <Badge
<Badge variant="outline" className="text-xs"> variant="outline"
className="text-[10px] px-1.5 py-0 text-muted-foreground"
>
{config.language} {config.language}
</Badge> </Badge>
</div>
)} )}
</div> </div>
</div> </div>
{/* Provider Description */} {/* Model name */}
{providerInfo && ( <div className="flex items-center gap-2">
<p className="text-sm text-muted-foreground"> <code className="text-xs font-mono text-muted-foreground bg-muted/50 px-2 py-0.5 rounded">
{providerInfo.description} {config.model_name}
</p>
)}
{/* Configuration Details */}
<div className="grid gap-4 sm:grid-cols-2">
<div className="space-y-2">
<Label className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
API Key
</Label>
<div className="flex items-center space-x-2">
<code className="flex-1 rounded-md bg-muted px-3 py-2 text-xs font-mono">
{showApiKey[config.id]
? config.api_key
: maskApiKey(config.api_key)}
</code>
<Button
variant="ghost"
size="sm"
onClick={() => toggleApiKeyVisibility(config.id)}
className="h-8 w-8 p-0"
>
{showApiKey[config.id] ? (
<EyeOff className="h-3 w-3" />
) : (
<Eye className="h-3 w-3" />
)}
</Button>
</div>
</div>
{config.api_base && (
<div className="space-y-2">
<Label className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
API Base URL
</Label>
<code className="block rounded-md bg-muted px-3 py-2 text-xs font-mono break-all">
{config.api_base}
</code> </code>
</div> </div>
)}
</div>
{/* Metadata */} {/* Footer row */}
<div className="flex flex-wrap items-center gap-4 pt-4 border-t border-border/50"> <div className="flex items-center gap-3 pt-2">
{config.created_at && ( {config.created_at && (
<div className="flex items-center gap-2 text-xs text-muted-foreground"> <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
<Clock className="h-3 w-3" /> <Clock className="h-3 w-3" />
<span> <span>
Created {new Date(config.created_at).toLocaleDateString()} {new Date(config.created_at).toLocaleDateString()}
</span> </span>
</div> </div>
)} )}
<div className="flex items-center gap-2 text-xs"> <div className="flex items-center gap-1.5 text-xs">
<div className="h-2 w-2 rounded-full bg-green-500"></div> <div className="h-1.5 w-1.5 rounded-full bg-emerald-500" />
<span className="text-green-600 font-medium">Active</span> <span className="text-emerald-600 dark:text-emerald-400 font-medium">
Active
</span>
</div>
</div> </div>
</div> </div>
</div> </div>
{/* Actions */} {/* Actions */}
<div className="flex flex-col gap-2 ml-6"> <div className="flex items-center gap-1 shrink-0">
<Button <Button
variant="outline" variant="ghost"
size="sm" size="sm"
onClick={() => setEditingConfig(config)} onClick={() => setEditingConfig(config)}
className="h-8 w-8 p-0" className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
> >
<Edit3 className="h-4 w-4" /> <Edit3 className="h-4 w-4" />
</Button> </Button>
<Button <Button
variant="outline" variant="ghost"
size="sm" size="sm"
onClick={() => handleDelete(config.id)} onClick={() => handleDeleteClick(config)}
className="h-8 w-8 p-0 border-destructive/20 text-destructive hover:bg-destructive hover:text-destructive-foreground" className="h-8 w-8 p-0 text-muted-foreground hover:text-destructive hover:bg-destructive/10"
> >
<Trash2 className="h-4 w-4" /> <Trash2 className="h-4 w-4" />
</Button> </Button>
</div> </div>
</div> </div>
</div>
</div>
</CardContent> </CardContent>
</Card> </Card>
</motion.div> </motion.div>
@ -803,6 +783,46 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
</form> </form>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
{/* Delete Confirmation Dialog */}
<AlertDialog
open={!!configToDelete}
onOpenChange={(open) => !open && setConfigToDelete(null)}
>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle className="flex items-center gap-2">
<Trash2 className="h-5 w-5 text-destructive" />
Delete Configuration
</AlertDialogTitle>
<AlertDialogDescription>
Are you sure you want to delete{" "}
<span className="font-semibold text-foreground">{configToDelete?.name}</span>? This
action cannot be undone and will permanently remove this model configuration.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel disabled={isDeleting}>Cancel</AlertDialogCancel>
<AlertDialogAction
onClick={handleConfirmDelete}
disabled={isDeleting}
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
>
{isDeleting ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
Deleting...
</>
) : (
<>
<Trash2 className="mr-2 h-4 w-4" />
Delete
</>
)}
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</div> </div>
); );
} }

2
surfsense_web/components/sidebar/AppSidebarProvider.tsx
View file

@ -193,6 +193,7 @@ export function AppSidebarProvider({
if (!isClient) { if (!isClient) {
return ( return (
<AppSidebar <AppSidebar
searchSpaceId={searchSpaceId}
navSecondary={navSecondary} navSecondary={navSecondary}
navMain={navMain} navMain={navMain}
RecentChats={[]} RecentChats={[]}
@ -204,6 +205,7 @@ export function AppSidebarProvider({
return ( return (
<> <>
<AppSidebar <AppSidebar
searchSpaceId={searchSpaceId}
navSecondary={updatedNavSecondary} navSecondary={updatedNavSecondary}
navMain={navMain} navMain={navMain}
RecentChats={displayChats} RecentChats={displayChats}

216
surfsense_web/components/sidebar/app-sidebar.tsx
View file

@ -4,26 +4,116 @@ import {
AlertCircle, AlertCircle,
BookOpen, BookOpen,
Cable, Cable,
ChevronsUpDown,
Database, Database,
ExternalLink, ExternalLink,
FileStack, FileStack,
FileText, FileText,
Info, Info,
LogOut,
type LucideIcon, type LucideIcon,
MessageCircleMore, MessageCircleMore,
MoonIcon,
Podcast, Podcast,
Settings2, Settings2,
SquareLibrary, SquareLibrary,
SquareTerminal, SquareTerminal,
SunIcon,
Trash2, Trash2,
Undo2, Undo2,
UserPlus,
Users, Users,
} from "lucide-react"; } from "lucide-react";
import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import { memo, useMemo } from "react"; import { useRouter } from "next/navigation";
import { useTheme } from "next-themes";
import { memo, useEffect, useMemo, useState } from "react";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { useUser } from "@/hooks/use-user";
/**
* Generates a consistent color based on a string (email)
*/
function stringToColor(str: string): string {
let hash = 0;
for (let i = 0; i < str.length; i++) {
hash = str.charCodeAt(i) + ((hash << 5) - hash);
}
const colors = [
"#6366f1", // indigo
"#8b5cf6", // violet
"#a855f7", // purple
"#d946ef", // fuchsia
"#ec4899", // pink
"#f43f5e", // rose
"#ef4444", // red
"#f97316", // orange
"#eab308", // yellow
"#84cc16", // lime
"#22c55e", // green
"#14b8a6", // teal
"#06b6d4", // cyan
"#0ea5e9", // sky
"#3b82f6", // blue
];
return colors[Math.abs(hash) % colors.length];
}
/**
* Gets initials from an email address
*/
function getInitials(email: string): string {
const name = email.split("@")[0];
const parts = name.split(/[._-]/);
if (parts.length >= 2) {
return (parts[0][0] + parts[1][0]).toUpperCase();
}
return name.slice(0, 2).toUpperCase();
}
/**
* Dynamic avatar component that generates an SVG based on email
*/
function UserAvatar({ email, size = 32 }: { email: string; size?: number }) {
const bgColor = stringToColor(email);
const initials = getInitials(email);
return (
<svg
width={size}
height={size}
viewBox="0 0 32 32"
className="rounded-lg"
role="img"
aria-labelledby="sidebar-avatar-title"
>
<title id="sidebar-avatar-title">Avatar for {email}</title>
<rect width="32" height="32" rx="6" fill={bgColor} />
<text
x="50%"
y="50%"
dominantBaseline="central"
textAnchor="middle"
fill="white"
fontSize="12"
fontWeight="600"
fontFamily="system-ui, sans-serif"
>
{initials}
</text>
</svg>
);
}
import { Logo } from "@/components/Logo";
import { NavMain } from "@/components/sidebar/nav-main"; import { NavMain } from "@/components/sidebar/nav-main";
import { NavProjects } from "@/components/sidebar/nav-projects"; import { NavProjects } from "@/components/sidebar/nav-projects";
import { NavSecondary } from "@/components/sidebar/nav-secondary"; import { NavSecondary } from "@/components/sidebar/nav-secondary";
@ -122,6 +212,7 @@ const defaultData = {
}; };
interface AppSidebarProps extends React.ComponentProps<typeof Sidebar> { interface AppSidebarProps extends React.ComponentProps<typeof Sidebar> {
searchSpaceId?: string;
navMain?: { navMain?: {
title: string; title: string;
url: string; url: string;
@ -162,12 +253,22 @@ interface AppSidebarProps extends React.ComponentProps<typeof Sidebar> {
// Memoized AppSidebar component for better performance // Memoized AppSidebar component for better performance
export const AppSidebar = memo(function AppSidebar({ export const AppSidebar = memo(function AppSidebar({
searchSpaceId,
navMain = defaultData.navMain, navMain = defaultData.navMain,
navSecondary = defaultData.navSecondary, navSecondary = defaultData.navSecondary,
RecentChats = defaultData.RecentChats, RecentChats = defaultData.RecentChats,
pageUsage, pageUsage,
...props ...props
}: AppSidebarProps) { }: AppSidebarProps) {
const router = useRouter();
const { theme, setTheme } = useTheme();
const { user, loading: isLoadingUser } = useUser();
const [isClient, setIsClient] = useState(false);
useEffect(() => {
setIsClient(true);
}, []);
// Process navMain to resolve icon names to components // Process navMain to resolve icon names to components
const processedNavMain = useMemo(() => { const processedNavMain = useMemo(() => {
return navMain.map((item) => ({ return navMain.map((item) => ({
@ -194,28 +295,111 @@ export const AppSidebar = memo(function AppSidebar({
); );
}, [RecentChats]); }, [RecentChats]);
// Get user display name from email
const userDisplayName = user?.email ? user.email.split("@")[0] : "User";
const userEmail = user?.email || (isLoadingUser ? "Loading..." : "Unknown");
const handleLogout = () => {
try {
if (typeof window !== "undefined") {
localStorage.removeItem("surfsense_bearer_token");
router.push("/");
}
} catch (error) {
console.error("Error during logout:", error);
router.push("/");
}
};
return ( return (
<Sidebar variant="inset" collapsible="icon" aria-label="Main navigation" {...props}> <Sidebar variant="inset" collapsible="icon" aria-label="Main navigation" {...props}>
<SidebarHeader> <SidebarHeader>
<SidebarMenu> <SidebarMenu>
<SidebarMenuItem> <SidebarMenuItem>
<SidebarMenuButton asChild size="lg"> <DropdownMenu>
<Link href="/" className="flex items-center gap-2 w-full"> <DropdownMenuTrigger asChild>
<div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg"> <SidebarMenuButton
<Image size="lg"
src="/icon-128.png" className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
alt="SurfSense logo" >
width={32} <div className="flex aspect-square size-8 items-center justify-center">
height={32} {user?.email ? (
className="rounded-lg" <UserAvatar email={user.email} size={32} />
/> ) : (
<div className="size-8 rounded-lg bg-sidebar-primary animate-pulse" />
)}
</div> </div>
<div className="grid flex-1 text-left text-sm leading-tight"> <div className="grid flex-1 text-left text-sm leading-tight">
<span className="truncate font-medium">SurfSense</span> <span className="truncate font-medium">{userDisplayName}</span>
<span className="truncate text-xs">beta v0.0.8</span> <span className="truncate text-xs text-muted-foreground">{userEmail}</span>
</div> </div>
</Link> <ChevronsUpDown className="ml-auto size-4" />
</SidebarMenuButton> </SidebarMenuButton>
</DropdownMenuTrigger>
<DropdownMenuContent
className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
side="bottom"
align="start"
sideOffset={4}
>
<DropdownMenuLabel className="p-0 font-normal">
<div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
<div className="flex aspect-square size-8 items-center justify-center">
{user?.email ? (
<UserAvatar email={user.email} size={32} />
) : (
<div className="size-8 rounded-lg bg-sidebar-primary animate-pulse" />
)}
</div>
<div className="grid flex-1 text-left text-sm leading-tight">
<span className="truncate font-medium">{userDisplayName}</span>
<span className="truncate text-xs text-muted-foreground">{userEmail}</span>
</div>
</div>
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuGroup>
{searchSpaceId && (
<>
<DropdownMenuItem
onClick={() => router.push(`/dashboard/${searchSpaceId}/settings`)}
>
<Settings2 className="mr-2 h-4 w-4" />
Settings
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => router.push(`/dashboard/${searchSpaceId}/team`)}
>
<UserPlus className="mr-2 h-4 w-4" />
Invite members
</DropdownMenuItem>
</>
)}
<DropdownMenuItem onClick={() => router.push("/dashboard")}>
<SquareLibrary className="mr-2 h-4 w-4" />
Switch workspace
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
{isClient && (
<DropdownMenuItem onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>
{theme === "dark" ? (
<SunIcon className="mr-2 h-4 w-4" />
) : (
<MoonIcon className="mr-2 h-4 w-4" />
)}
{theme === "dark" ? "Light mode" : "Dark mode"}
</DropdownMenuItem>
)}
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuItem onClick={handleLogout}>
<LogOut className="mr-2 h-4 w-4" />
Logout
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</SidebarMenuItem> </SidebarMenuItem>
</SidebarMenu> </SidebarMenu>
</SidebarHeader> </SidebarHeader>