apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-07-14 22:52:15 +02:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #510 from MODSetter/dev

Browse source 
feat: UX improvement
This commit is contained in:
Rohan Verma 2025-11-28 23:43:54 -08:00 • committed by GitHub
commit ff853c3de6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 91 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

17
surfsense_web/components/chat/ChatInputGroup.tsx
View file

@ -1,8 +1,8 @@
"use client"; "use client";
import { ChatInput } from "@llamaindex/chat-ui"; import { ChatInput } from "@llamaindex/chat-ui";
import { Brain, Check, FolderOpen, Minus, Plus, Zap } from "lucide-react"; import { Brain, Check, FolderOpen, Minus, Plus, PlusCircle, Zap } from "lucide-react";
import { useParams } from "next/navigation"; import { useParams, useRouter } from "next/navigation";
import React, { Suspense, useCallback, useState } from "react"; import React, { Suspense, useCallback, useState } from "react";
import { DocumentsDataTable } from "@/components/chat/DocumentsDataTable"; import { DocumentsDataTable } from "@/components/chat/DocumentsDataTable";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
@ -115,6 +115,7 @@ const ConnectorSelector = React.memo(
selectedConnectors?: string[]; selectedConnectors?: string[];
}) => { }) => {
const { search_space_id } = useParams(); const { search_space_id } = useParams();
const router = useRouter();
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
// Fetch immediately (not lazy) so the button can show the correct count // Fetch immediately (not lazy) so the button can show the correct count
@ -247,9 +248,19 @@ const ConnectorSelector = React.memo(
<Brain className="h-8 w-8 text-muted-foreground" /> <Brain className="h-8 w-8 text-muted-foreground" />
</div> </div>
<h4 className="text-sm font-medium mb-1">No sources found</h4> <h4 className="text-sm font-medium mb-1">No sources found</h4>
<p className="text-xs text-muted-foreground max-w-xs"> <p className="text-xs text-muted-foreground max-w-xs mb-4">
Add documents or configure search connectors for this search space Add documents or configure search connectors for this search space
</p> </p>
<Button
onClick={() => {
setIsOpen(false);
router.push(`/dashboard/${search_space_id}/sources/add`);
}}
className="gap-2"
>
<PlusCircle className="h-4 w-4" />
Add Sources
</Button>
</div> </div>
) : ( ) : (
<> <>

97
surfsense_web/components/onboard/completion-step.tsx
View file

@ -8,6 +8,8 @@ import {
FileText, FileText,
MessageSquare, MessageSquare,
Sparkles, Sparkles,
UserPlus,
Users,
Zap, Zap,
} from "lucide-react"; } from "lucide-react";
import { motion } from "motion/react"; import { motion } from "motion/react";
@ -50,16 +52,60 @@ export function CompletionStep({ searchSpaceId }: CompletionStepProps) {
<p className="text-muted-foreground">Choose an option to continue</p> <p className="text-muted-foreground">Choose an option to continue</p>
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6"> <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{/* Manage Team Card */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.9, type: "spring", stiffness: 300, damping: 25 }}
>
<Card className="h-full border-2 hover:border-emerald-500/50 transition-all duration-300 hover:shadow-xl hover:shadow-emerald-500/10 cursor-pointer group relative overflow-hidden">
<div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-emerald-500/10 to-transparent rounded-full blur-2xl -mr-16 -mt-16 group-hover:scale-150 transition-transform duration-500" />
<CardHeader className="relative">
<div className="w-12 h-12 bg-gradient-to-br from-emerald-500/20 to-emerald-600/10 rounded-xl flex items-center justify-center mb-3 group-hover:scale-110 group-hover:rotate-3 transition-all duration-300 ring-1 ring-emerald-500/20">
<Users className="w-6 h-6 text-emerald-600 dark:text-emerald-400" />
</div>
<CardTitle className="text-lg">Manage Team</CardTitle>
<CardDescription>
Invite team members and collaborate on your search space
</CardDescription>
</CardHeader>
<CardContent className="space-y-4 relative">
<div className="space-y-2 text-sm text-muted-foreground">
<div className="flex items-center gap-2">
<UserPlus className="w-4 h-4 text-emerald-500" />
<span>Invite team members</span>
</div>
<div className="flex items-center gap-2">
<CheckCircle className="w-4 h-4 text-emerald-500" />
<span>Assign roles & permissions</span>
</div>
<div className="flex items-center gap-2">
<CheckCircle className="w-4 h-4 text-emerald-500" />
<span>Collaborate together</span>
</div>
</div>
<Button
className="w-full bg-emerald-600 hover:bg-emerald-700 text-white group-hover:shadow-lg group-hover:shadow-emerald-500/25 transition-all duration-300"
onClick={() => router.push(`/dashboard/${searchSpaceId}/team`)}
>
Manage Team
<ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" />
</Button>
</CardContent>
</Card>
</motion.div>
{/* Add Sources Card */} {/* Add Sources Card */}
<motion.div <motion.div
initial={{ opacity: 0, x: -20 }} initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, x: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.7 }} transition={{ delay: 0.7, type: "spring", stiffness: 300, damping: 25 }}
> >
<Card className="h-full border-2 hover:border-primary/50 transition-all hover:shadow-lg cursor-pointer group"> <Card className="h-full border-2 hover:border-blue-500/50 transition-all duration-300 hover:shadow-xl hover:shadow-blue-500/10 cursor-pointer group relative overflow-hidden">
<CardHeader> <div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-blue-500/10 to-transparent rounded-full blur-2xl -mr-16 -mt-16 group-hover:scale-150 transition-transform duration-500" />
<div className="w-12 h-12 bg-blue-100 dark:bg-blue-950 rounded-lg flex items-center justify-center mb-3 group-hover:scale-110 transition-transform"> <CardHeader className="relative">
<div className="w-12 h-12 bg-gradient-to-br from-blue-500/20 to-blue-600/10 rounded-xl flex items-center justify-center mb-3 group-hover:scale-110 group-hover:rotate-3 transition-all duration-300 ring-1 ring-blue-500/20">
<FileText className="w-6 h-6 text-blue-600 dark:text-blue-400" /> <FileText className="w-6 h-6 text-blue-600 dark:text-blue-400" />
</div> </div>
<CardTitle className="text-lg">Add Sources</CardTitle> <CardTitle className="text-lg">Add Sources</CardTitle>
@ -67,27 +113,27 @@ export function CompletionStep({ searchSpaceId }: CompletionStepProps) {
Connect your data sources to start building your knowledge base Connect your data sources to start building your knowledge base
</CardDescription> </CardDescription>
</CardHeader> </CardHeader>
<CardContent className="space-y-4"> <CardContent className="space-y-4 relative">
<div className="space-y-2 text-sm text-muted-foreground"> <div className="space-y-2 text-sm text-muted-foreground">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<CheckCircle className="w-4 h-4 text-green-600" /> <CheckCircle className="w-4 h-4 text-emerald-500" />
<span>Connect documents and files</span> <span>Connect documents and files</span>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<CheckCircle className="w-4 h-4 text-green-600" /> <CheckCircle className="w-4 h-4 text-emerald-500" />
<span>Import from various sources</span> <span>Import from various sources</span>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<CheckCircle className="w-4 h-4 text-green-600" /> <CheckCircle className="w-4 h-4 text-emerald-500" />
<span>Build your knowledge base</span> <span>Build your knowledge base</span>
</div> </div>
</div> </div>
<Button <Button
className="w-full group-hover:bg-primary/90" className="w-full bg-blue-600 hover:bg-blue-700 text-white group-hover:shadow-lg group-hover:shadow-blue-500/25 transition-all duration-300"
onClick={() => router.push(`/dashboard/${searchSpaceId}/sources/add`)} onClick={() => router.push(`/dashboard/${searchSpaceId}/sources/add`)}
> >
Add Sources Add Sources
<ArrowRight className="w-4 h-4 ml-2" /> <ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" />
</Button> </Button>
</CardContent> </CardContent>
</Card> </Card>
@ -95,13 +141,14 @@ export function CompletionStep({ searchSpaceId }: CompletionStepProps) {
{/* Start Chatting Card */} {/* Start Chatting Card */}
<motion.div <motion.div
initial={{ opacity: 0, x: 20 }} initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, x: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.8 }} transition={{ delay: 0.8, type: "spring", stiffness: 300, damping: 25 }}
> >
<Card className="h-full border-2 hover:border-primary/50 transition-all hover:shadow-lg cursor-pointer group"> <Card className="h-full border-2 hover:border-purple-500/50 transition-all duration-300 hover:shadow-xl hover:shadow-purple-500/10 cursor-pointer group relative overflow-hidden">
<CardHeader> <div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-purple-500/10 to-transparent rounded-full blur-2xl -mr-16 -mt-16 group-hover:scale-150 transition-transform duration-500" />
<div className="w-12 h-12 bg-purple-100 dark:bg-purple-950 rounded-lg flex items-center justify-center mb-3 group-hover:scale-110 transition-transform"> <CardHeader className="relative">
<div className="w-12 h-12 bg-gradient-to-br from-purple-500/20 to-purple-600/10 rounded-xl flex items-center justify-center mb-3 group-hover:scale-110 group-hover:rotate-3 transition-all duration-300 ring-1 ring-purple-500/20">
<MessageSquare className="w-6 h-6 text-purple-600 dark:text-purple-400" /> <MessageSquare className="w-6 h-6 text-purple-600 dark:text-purple-400" />
</div> </div>
<CardTitle className="text-lg">Start Chatting</CardTitle> <CardTitle className="text-lg">Start Chatting</CardTitle>
@ -109,27 +156,27 @@ export function CompletionStep({ searchSpaceId }: CompletionStepProps) {
Jump right into the AI researcher and start asking questions Jump right into the AI researcher and start asking questions
</CardDescription> </CardDescription>
</CardHeader> </CardHeader>
<CardContent className="space-y-4"> <CardContent className="space-y-4 relative">
<div className="space-y-2 text-sm text-muted-foreground"> <div className="space-y-2 text-sm text-muted-foreground">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<CheckCircle className="w-4 h-4 text-green-600" /> <CheckCircle className="w-4 h-4 text-emerald-500" />
<span>AI-powered conversations</span> <span>AI-powered conversations</span>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<CheckCircle className="w-4 h-4 text-green-600" /> <CheckCircle className="w-4 h-4 text-emerald-500" />
<span>Research and explore topics</span> <span>Research and explore topics</span>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<CheckCircle className="w-4 h-4 text-green-600" /> <CheckCircle className="w-4 h-4 text-emerald-500" />
<span>Get instant insights</span> <span>Get instant insights</span>
</div> </div>
</div> </div>
<Button <Button
className="w-full group-hover:bg-primary/90" className="w-full bg-purple-600 hover:bg-purple-700 text-white group-hover:shadow-lg group-hover:shadow-purple-500/25 transition-all duration-300"
onClick={() => router.push(`/dashboard/${searchSpaceId}/researcher`)} onClick={() => router.push(`/dashboard/${searchSpaceId}/researcher`)}
> >
Start Chatting Start Chatting
<ArrowRight className="w-4 h-4 ml-2" /> <ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" />
</Button> </Button>
</CardContent> </CardContent>
</Card> </Card>

8
surfsense_web/components/pricing/pricing-section.tsx
View file

@ -16,7 +16,8 @@ const demoPlans = [
"Podcasts support with local TTS providers.", "Podcasts support with local TTS providers.",
"Connects with 15+ external sources.", "Connects with 15+ external sources.",
"Cross-Browser Extension for dynamic webpages including authenticated content", "Cross-Browser Extension for dynamic webpages including authenticated content",
"Upcoming: Mergeable MindMaps", "Role-based access permissions",
"Collaboration and multiplayer features",
"Upcoming: Note Management", "Upcoming: Note Management",
], ],
description: "Open source version with powerful features", description: "Open source version with powerful features",
@ -32,9 +33,10 @@ const demoPlans = [
features: [ features: [
"Everything in Community", "Everything in Community",
"Priority Support", "Priority Support",
"Role-based access permissions",
"Collaboration and multiplayer features",
"Advanced security features", "Advanced security features",
"Audit logs and compliance",
"SSO, OIDC & SAML",
"SLA guarantee",
], ],
description: "For large organizations with specific needs", description: "For large organizations with specific needs",
buttonText: "Contact Sales", buttonText: "Contact Sales",

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

@ -413,19 +413,6 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
</div> </div>
</CardHeader> </CardHeader>
<CardContent className="space-y-4"> <CardContent className="space-y-4">
<div className="space-y-2">
<div className="text-sm text-muted-foreground">
<strong>Use cases:</strong> {role.examples}
</div>
<div className="flex flex-wrap gap-1">
{role.characteristics.map((char, idx) => (
<Badge key={idx} variant="outline" className="text-xs">
{char}
</Badge>
))}
</div>
</div>
<div className="space-y-2"> <div className="space-y-2">
<Label className="text-sm font-medium">Assign LLM Configuration:</Label> <Label className="text-sm font-medium">Assign LLM Configuration:</Label>
<Select <Select