apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-04-25 00:36:31 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor(ux): combined sources to one section

Browse source 
- Renamed "Documents" section to "Sources" in the dashboard layout.
- Updated routing for adding sources and managing documents.
- Refactored the connectors and documents upload pages to redirect to the new sources section.
- Added localization support for the new "Sources" terminology in English and Chinese.
This commit is contained in:
DESKTOP-RTLN3BA\$punk 2025-11-07 14:28:30 -08:00
parent ed348b1bf9
commit 8c54ca27d7
16 changed files with 1188 additions and 1332 deletions
Download patch file Download diff file Expand all files Collapse all files

416
surfsense_web/app/dashboard/[search_space_id]/connectors/add/page.tsx
View file

@ -1,414 +1,16 @@
"use client";
import {
IconBrandWindows,
IconBrandZoom,
IconChevronDown,
IconChevronRight,
} from "@tabler/icons-react";
import { AnimatePresence, motion, type Variants } from "motion/react";
import Link from "next/link";
import { useParams } from "next/navigation";
import { useTranslations } from "next-intl";
import { useState } from "react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
import { EnumConnectorName } from "@/contracts/enums/connector";
import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
import { useParams, useRouter } from "next/navigation";
import { useEffect } from "react";
// Define the Connector type
interface Connector {
id: string;
title: string;
description: string;
icon: React.ReactNode;
status: "available" | "coming-soon" | "connected";
}
interface ConnectorCategory {
id: string;
title: string;
connectors: Connector[];
}
// Define connector categories and their connectors
const connectorCategories: ConnectorCategory[] = [
{
id: "search-engines",
title: "search_engines",
connectors: [
{
id: "tavily-api",
title: "Tavily API",
description: "tavily_desc",
icon: getConnectorIcon(EnumConnectorName.TAVILY_API, "h-6 w-6"),
status: "available",
},
{
id: "searxng",
title: "SearxNG",
description: "searxng_desc",
icon: getConnectorIcon(EnumConnectorName.SEARXNG_API, "h-6 w-6"),
status: "available",
},
{
id: "linkup-api",
title: "Linkup API",
description: "linkup_desc",
icon: getConnectorIcon(EnumConnectorName.LINKUP_API, "h-6 w-6"),
status: "available",
},
{
id: "elasticsearch-connector",
title: "Elasticsearch",
description: "elasticsearch_desc",
icon: getConnectorIcon(EnumConnectorName.ELASTICSEARCH_CONNECTOR, "h-6 w-6"),
status: "available",
},
{
id: "baidu-search-api",
title: "Baidu Search",
description: "baidu_desc",
icon: getConnectorIcon(EnumConnectorName.BAIDU_SEARCH_API, "h-6 w-6"),
status: "available",
},
],
},
{
id: "team-chats",
title: "team_chats",
connectors: [
{
id: "slack-connector",
title: "Slack",
description: "slack_desc",
icon: getConnectorIcon(EnumConnectorName.SLACK_CONNECTOR, "h-6 w-6"),
status: "available",
},
{
id: "ms-teams",
title: "Microsoft Teams",
description: "teams_desc",
icon: <IconBrandWindows className="h-6 w-6" />,
status: "coming-soon",
},
{
id: "discord-connector",
title: "Discord",
description: "discord_desc",
icon: getConnectorIcon(EnumConnectorName.DISCORD_CONNECTOR, "h-6 w-6"),
status: "available",
},
],
},
{
id: "project-management",
title: "project_management",
connectors: [
{
id: "linear-connector",
title: "Linear",
description: "linear_desc",
icon: getConnectorIcon(EnumConnectorName.LINEAR_CONNECTOR, "h-6 w-6"),
status: "available",
},
{
id: "jira-connector",
title: "Jira",
description: "jira_desc",
icon: getConnectorIcon(EnumConnectorName.JIRA_CONNECTOR, "h-6 w-6"),
status: "available",
},
{
id: "clickup-connector",
title: "ClickUp",
description: "clickup_desc",
icon: getConnectorIcon(EnumConnectorName.CLICKUP_CONNECTOR, "h-6 w-6"),
status: "available",
},
],
},
{
id: "knowledge-bases",
title: "knowledge_bases",
connectors: [
{
id: "notion-connector",
title: "Notion",
description: "notion_desc",
icon: getConnectorIcon(EnumConnectorName.NOTION_CONNECTOR, "h-6 w-6"),
status: "available",
},
{
id: "github-connector",
title: "GitHub",
description: "github_desc",
icon: getConnectorIcon(EnumConnectorName.GITHUB_CONNECTOR, "h-6 w-6"),
status: "available",
},
{
id: "confluence-connector",
title: "Confluence",
description: "confluence_desc",
icon: getConnectorIcon(EnumConnectorName.CONFLUENCE_CONNECTOR, "h-6 w-6"),
status: "available",
},
{
id: "airtable-connector",
title: "Airtable",
description: "airtable_desc",
icon: getConnectorIcon(EnumConnectorName.AIRTABLE_CONNECTOR, "h-6 w-6"),
status: "available",
},
{
id: "luma-connector",
title: "Luma",
description: "luma_desc",
icon: getConnectorIcon(EnumConnectorName.LUMA_CONNECTOR, "h-6 w-6"),
status: "available",
},
],
},
{
id: "communication",
title: "communication",
connectors: [
{
id: "google-calendar-connector",
title: "Google Calendar",
description: "calendar_desc",
icon: getConnectorIcon(EnumConnectorName.GOOGLE_CALENDAR_CONNECTOR, "h-6 w-6"),
status: "available",
},
{
id: "google-gmail-connector",
title: "Gmail",
description: "gmail_desc",
icon: getConnectorIcon(EnumConnectorName.GOOGLE_GMAIL_CONNECTOR, "h-6 w-6"),
status: "available",
},
{
id: "zoom",
title: "Zoom",
description: "zoom_desc",
icon: <IconBrandZoom className="h-6 w-6" />,
status: "coming-soon",
},
],
},
];
// Animation variants
const fadeIn = {
hidden: { opacity: 0 },
visible: { opacity: 1, transition: { duration: 0.4 } },
};
const staggerContainer = {
hidden: { opacity: 0 },
visible: {
opacity: 1,
transition: {
staggerChildren: 0.1,
},
},
};
const cardVariants: Variants = {
hidden: { opacity: 0, y: 20 },
visible: {
opacity: 1,
y: 0,
transition: {
type: "spring",
stiffness: 260,
damping: 20,
},
},
hover: {
scale: 1.02,
boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
transition: {
type: "spring",
stiffness: 400,
damping: 10,
},
},
};
export default function ConnectorsPage() {
const t = useTranslations("add_connector");
export default function AddConnectorRedirect() {
const params = useParams();
const searchSpaceId = params.search_space_id as string;
const [expandedCategories, setExpandedCategories] = useState<string[]>([
"search-engines",
"knowledge-bases",
"project-management",
"team-chats",
"communication",
]);
const router = useRouter();
const search_space_id = params.search_space_id as string;
const toggleCategory = (categoryId: string) => {
setExpandedCategories((prev) =>
prev.includes(categoryId) ? prev.filter((id) => id !== categoryId) : [...prev, categoryId]
);
};
useEffect(() => {
router.replace(`/dashboard/${search_space_id}/sources/add?tab=connectors`);
}, [search_space_id, router]);
return (
<div className="container mx-auto py-12 max-w-6xl">
<motion.div
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{
duration: 0.6,
ease: [0.22, 1, 0.36, 1],
}}
className="mb-12 text-center"
>
<h1 className="text-4xl font-bold tracking-tight bg-gradient-to-r from-indigo-500 to-purple-500 bg-clip-text text-transparent">
{t("title")}
</h1>
<p className="text-muted-foreground mt-3 text-lg max-w-2xl mx-auto">{t("subtitle")}</p>
</motion.div>
<motion.div
className="space-y-8"
initial="hidden"
animate="visible"
variants={staggerContainer}
>
{connectorCategories.map((category) => (
<motion.div
key={category.id}
variants={fadeIn}
className="rounded-lg border bg-card text-card-foreground shadow-sm"
>
<Collapsible
open={expandedCategories.includes(category.id)}
onOpenChange={() => toggleCategory(category.id)}
className="w-full"
>
<div className="flex items-center justify-between space-x-4 p-4">
<h3 className="text-xl font-semibold">{t(category.title)}</h3>
<CollapsibleTrigger asChild>
<Button variant="ghost" size="sm" className="w-9 p-0 hover:bg-muted">
<motion.div
animate={{
rotate: expandedCategories.includes(category.id) ? 180 : 0,
}}
transition={{ duration: 0.3, ease: "easeInOut" }}
>
<IconChevronDown className="h-5 w-5" />
</motion.div>
<span className="sr-only">Toggle</span>
</Button>
</CollapsibleTrigger>
</div>
<CollapsibleContent>
<AnimatePresence>
<motion.div
className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 p-4"
variants={staggerContainer}
initial="hidden"
animate="visible"
exit="hidden"
>
{category.connectors.map((connector) => (
<motion.div
key={connector.id}
variants={cardVariants}
whileHover="hover"
className="col-span-1"
>
<Card className="h-full flex flex-col overflow-hidden border-transparent transition-all duration-200 hover:border-primary/50">
<CardHeader className="flex-row items-center gap-4 pb-2">
<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10 dark:bg-primary/20">
<motion.div
whileHover={{ rotate: 5, scale: 1.1 }}
className="text-primary"
>
{connector.icon}
</motion.div>
</div>
<div>
<div className="flex items-center gap-2">
<h3 className="font-medium">{connector.title}</h3>
{connector.status === "coming-soon" && (
<Badge
variant="outline"
className="text-xs bg-amber-100 dark:bg-amber-950 text-amber-800 dark:text-amber-300 border-amber-200 dark:border-amber-800"
>
{t("coming_soon")}
</Badge>
)}
{connector.status === "connected" && (
<Badge
variant="outline"
className="text-xs bg-green-100 dark:bg-green-950 text-green-800 dark:text-green-300 border-green-200 dark:border-green-800"
>
{t("connected")}
</Badge>
)}
</div>
</div>
</CardHeader>
<CardContent className="pb-4">
<p className="text-sm text-muted-foreground">
{t(connector.description)}
</p>
</CardContent>
<CardFooter className="mt-auto pt-2">
{connector.status === "available" && (
<Link
href={`/dashboard/${searchSpaceId}/connectors/add/${connector.id}`}
className="w-full"
>
<Button variant="default" className="w-full group">
<span>{t("connect")}</span>
<motion.div
className="ml-1"
initial={{ x: 0 }}
whileHover={{ x: 3 }}
transition={{
type: "spring",
stiffness: 400,
damping: 10,
}}
>
<IconChevronRight className="h-4 w-4" />
</motion.div>
</Button>
</Link>
)}
{connector.status === "coming-soon" && (
<Button variant="outline" disabled className="w-full opacity-70">
{t("coming_soon")}
</Button>
)}
{connector.status === "connected" && (
<Button
variant="outline"
className="w-full border-green-500 text-green-600 hover:bg-green-50 dark:hover:bg-green-950"
>
{t("manage")}
</Button>
)}
</CardFooter>
</Card>
</motion.div>
))}
</motion.div>
</AnimatePresence>
</CollapsibleContent>
</Collapsible>
</motion.div>
))}
</motion.div>
</div>
);
return null;
}

578
surfsense_web/app/dashboard/[search_space_id]/documents/upload/page.tsx
View file

@ -1,580 +1,16 @@
"use client";
import { CheckCircle2, FileType, Info, Tag, Upload, X } from "lucide-react";
import { AnimatePresence, motion } from "motion/react";
import { useParams, useRouter } from "next/navigation";
import { useTranslations } from "next-intl";
import { useCallback, useState } from "react";
import { useDropzone } from "react-dropzone";
import { toast } from "sonner";
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 { Progress } from "@/components/ui/progress";
import { Separator } from "@/components/ui/separator";
import { useEffect } from "react";
// Grid pattern component inspired by Aceternity UI
function GridPattern() {
const columns = 41;
const rows = 11;
return (
<div className="flex bg-gray-100 dark:bg-neutral-900 flex-shrink-0 flex-wrap justify-center items-center gap-x-px gap-y-px scale-105">
{Array.from({ length: rows }).map((_, row) =>
Array.from({ length: columns }).map((_, col) => {
const index = row * columns + col;
return (
<div
key={`${col}-${row}`}
className={`w-10 h-10 flex flex-shrink-0 rounded-[2px] ${
index % 2 === 0
? "bg-gray-50 dark:bg-neutral-950"
: "bg-gray-50 dark:bg-neutral-950 shadow-[0px_0px_1px_3px_rgba(255,255,255,1)_inset] dark:shadow-[0px_0px_1px_3px_rgba(0,0,0,1)_inset]"
}`}
/>
);
})
)}
</div>
);
}
export default function FileUploader() {
const t = useTranslations("upload_documents");
export default function UploadDocumentsRedirect() {
const params = useParams();
const router = useRouter();
const search_space_id = params.search_space_id as string;
const [files, setFiles] = useState<File[]>([]);
const [isUploading, setIsUploading] = useState(false);
const [uploadProgress, setUploadProgress] = useState(0);
const router = useRouter();
useEffect(() => {
router.replace(`/dashboard/${search_space_id}/sources/add?tab=documents`);
}, [search_space_id, router]);
// Audio files are always supported (using whisper)
const audioFileTypes = {
"audio/mpeg": [".mp3", ".mpeg", ".mpga"],
"audio/mp4": [".mp4", ".m4a"],
"audio/wav": [".wav"],
"audio/webm": [".webm"],
"text/markdown": [".md", ".markdown"],
"text/plain": [".txt"],
};
// Conditionally set accepted file types based on ETL service
const getAcceptedFileTypes = () => {
const etlService = process.env.NEXT_PUBLIC_ETL_SERVICE;
if (etlService === "LLAMACLOUD") {
return {
// LlamaCloud supported file types
"application/pdf": [".pdf"],
"application/msword": [".doc"],
"application/vnd.openxmlformats-officedocument.wordprocessingml.document": [".docx"],
"application/vnd.ms-word.document.macroEnabled.12": [".docm"],
"application/msword-template": [".dot"],
"application/vnd.ms-word.template.macroEnabled.12": [".dotm"],
"application/vnd.ms-powerpoint": [".ppt"],
"application/vnd.ms-powerpoint.template.macroEnabled.12": [".pptm"],
"application/vnd.openxmlformats-officedocument.presentationml.presentation": [".pptx"],
"application/vnd.ms-powerpoint.template": [".pot"],
"application/vnd.openxmlformats-officedocument.presentationml.template": [".potx"],
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": [".xlsx"],
"application/vnd.ms-excel": [".xls"],
"application/vnd.ms-excel.sheet.macroEnabled.12": [".xlsm"],
"application/vnd.ms-excel.sheet.binary.macroEnabled.12": [".xlsb"],
"application/vnd.ms-excel.workspace": [".xlw"],
"application/rtf": [".rtf"],
"application/xml": [".xml"],
"application/epub+zip": [".epub"],
"application/vnd.apple.keynote": [".key"],
"application/vnd.apple.pages": [".pages"],
"application/vnd.apple.numbers": [".numbers"],
"application/vnd.wordperfect": [".wpd"],
"application/vnd.oasis.opendocument.text": [".odt"],
"application/vnd.oasis.opendocument.presentation": [".odp"],
"application/vnd.oasis.opendocument.graphics": [".odg"],
"application/vnd.oasis.opendocument.spreadsheet": [".ods"],
"application/vnd.oasis.opendocument.formula": [".fods"],
"text/csv": [".csv"],
"text/tab-separated-values": [".tsv"],
"text/html": [".html", ".htm", ".web"],
"image/jpeg": [".jpg", ".jpeg"],
"image/png": [".png"],
"image/gif": [".gif"],
"image/bmp": [".bmp"],
"image/svg+xml": [".svg"],
"image/tiff": [".tiff"],
"image/webp": [".webp"],
"application/dbase": [".dbf"],
"application/vnd.lotus-1-2-3": [".123"],
"text/x-web-markdown": [
".602",
".abw",
".cgm",
".cwk",
".hwp",
".lwp",
".mw",
".mcw",
".pbd",
".sda",
".sdd",
".sdp",
".sdw",
".sgl",
".sti",
".sxi",
".sxw",
".stw",
".sxg",
".uof",
".uop",
".uot",
".vor",
".wps",
".zabw",
],
"text/x-spreadsheet": [
".dif",
".sylk",
".slk",
".prn",
".et",
".uos1",
".uos2",
".wk1",
".wk2",
".wk3",
".wk4",
".wks",
".wq1",
".wq2",
".wb1",
".wb2",
".wb3",
".qpw",
".xlr",
".eth",
],
// Audio files (always supported)
...audioFileTypes,
};
} else if (etlService === "DOCLING") {
return {
// Docling supported file types
"application/pdf": [".pdf"],
"application/vnd.openxmlformats-officedocument.wordprocessingml.document": [".docx"],
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": [".xlsx"],
"application/vnd.openxmlformats-officedocument.presentationml.presentation": [".pptx"],
"text/asciidoc": [".adoc", ".asciidoc"],
"text/html": [".html", ".htm", ".xhtml"],
"text/csv": [".csv"],
"image/png": [".png"],
"image/jpeg": [".jpg", ".jpeg"],
"image/tiff": [".tiff", ".tif"],
"image/bmp": [".bmp"],
"image/webp": [".webp"],
// Audio files (always supported)
...audioFileTypes,
};
} else {
return {
// Unstructured supported file types
"image/bmp": [".bmp"],
"text/csv": [".csv"],
"application/msword": [".doc"],
"application/vnd.openxmlformats-officedocument.wordprocessingml.document": [".docx"],
"message/rfc822": [".eml"],
"application/epub+zip": [".epub"],
"image/heic": [".heic"],
"text/html": [".html"],
"image/jpeg": [".jpeg", ".jpg"],
"image/png": [".png"],
"application/vnd.ms-outlook": [".msg"],
"application/vnd.oasis.opendocument.text": [".odt"],
"text/x-org": [".org"],
"application/pkcs7-signature": [".p7s"],
"application/pdf": [".pdf"],
"application/vnd.ms-powerpoint": [".ppt"],
"application/vnd.openxmlformats-officedocument.presentationml.presentation": [".pptx"],
"text/x-rst": [".rst"],
"application/rtf": [".rtf"],
"image/tiff": [".tiff"],
"text/tab-separated-values": [".tsv"],
"application/vnd.ms-excel": [".xls"],
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": [".xlsx"],
"application/xml": [".xml"],
// Audio files (always supported)
...audioFileTypes,
};
}
};
const acceptedFileTypes = getAcceptedFileTypes();
const supportedExtensions = Array.from(new Set(Object.values(acceptedFileTypes).flat())).sort();
const onDrop = useCallback((acceptedFiles: File[]) => {
setFiles((prevFiles) => [...prevFiles, ...acceptedFiles]);
}, []);
const { getRootProps, getInputProps, isDragActive } = useDropzone({
onDrop,
accept: acceptedFileTypes,
maxSize: 50 * 1024 * 1024, // 50MB
noClick: false, // Ensure clicking is enabled
noKeyboard: false, // Ensure keyboard navigation is enabled
});
const removeFile = (index: number) => {
setFiles((prevFiles) => prevFiles.filter((_, i) => i !== index));
};
const formatFileSize = (bytes: number) => {
if (bytes === 0) return "0 Bytes";
const k = 1024;
const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return `${parseFloat((bytes / k ** i).toFixed(2))} ${sizes[i]}`;
};
const handleUpload = async () => {
setIsUploading(true);
setUploadProgress(0);
const formData = new FormData();
files.forEach((file) => {
formData.append("files", file);
});
formData.append("search_space_id", search_space_id);
try {
// Simulate progress for better UX
const progressInterval = setInterval(() => {
setUploadProgress((prev) => {
if (prev >= 90) return prev;
return prev + Math.random() * 10;
});
}, 200);
const response = await fetch(
`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/documents/fileupload`,
{
method: "POST",
headers: {
Authorization: `Bearer ${window.localStorage.getItem("surfsense_bearer_token")}`,
},
body: formData,
}
);
clearInterval(progressInterval);
setUploadProgress(100);
if (!response.ok) {
throw new Error("Upload failed");
}
await response.json();
toast(t("upload_initiated"), {
description: t("upload_initiated_desc"),
});
router.push(`/dashboard/${search_space_id}/documents`);
} catch (error: any) {
setIsUploading(false);
setUploadProgress(0);
toast(t("upload_error"), {
description: `${t("upload_error_desc")}: ${error.message}`,
});
}
};
const getTotalFileSize = () => {
return files.reduce((total, file) => total + file.size, 0);
};
const containerVariants = {
hidden: { opacity: 0, y: 20 },
visible: {
opacity: 1,
y: 0,
transition: {
duration: 0.5,
when: "beforeChildren",
staggerChildren: 0.1,
},
},
};
const itemVariants = {
hidden: { opacity: 0, y: 10 },
visible: { opacity: 1, y: 0, transition: { duration: 0.3 } },
};
const fileItemVariants = {
hidden: { opacity: 0, x: -20 },
visible: { opacity: 1, x: 0, transition: { duration: 0.3 } },
exit: { opacity: 0, x: 20, transition: { duration: 0.2 } },
};
return (
<div className="grow flex items-center justify-center p-4 md:p-8">
<motion.div
className="w-full max-w-4xl mx-auto space-y-6"
initial="hidden"
animate="visible"
variants={containerVariants}
>
{/* Header Card */}
<motion.div variants={itemVariants}>
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Upload className="h-5 w-5" />
{t("title")}
</CardTitle>
<CardDescription>{t("subtitle")}</CardDescription>
</CardHeader>
<CardContent>
<Alert>
<Info className="h-4 w-4" />
<AlertDescription>{t("file_size_limit")}</AlertDescription>
</Alert>
</CardContent>
</Card>
</motion.div>
{/* Upload Area Card */}
<motion.div variants={itemVariants}>
<Card className="relative overflow-hidden">
{/* Grid background pattern */}
<div className="absolute inset-0 [mask-image:radial-gradient(ellipse_at_center,white,transparent)] opacity-30">
<GridPattern />
</div>
<CardContent className="p-10 relative z-10">
<div
{...getRootProps()}
className="flex flex-col items-center justify-center min-h-[300px] border-2 border-dashed border-muted-foreground/25 rounded-lg hover:border-primary/50 transition-colors cursor-pointer"
>
<input {...getInputProps()} className="hidden" />
{isDragActive ? (
<motion.div
initial={{ opacity: 0, scale: 0.8 }}
animate={{ opacity: 1, scale: 1 }}
className="flex flex-col items-center gap-4"
>
<Upload className="h-12 w-12 text-primary" />
<p className="text-lg font-medium text-primary">{t("drop_files")}</p>
</motion.div>
) : (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
className="flex flex-col items-center gap-4"
>
<Upload className="h-12 w-12 text-muted-foreground" />
<div className="text-center">
<p className="text-lg font-medium">{t("drag_drop")}</p>
<p className="text-sm text-muted-foreground mt-1">{t("or_browse")}</p>
</div>
</motion.div>
)}
{/* Fallback button for better accessibility */}
<div className="mt-4">
<Button
variant="outline"
size="sm"
onClick={(e) => {
e.stopPropagation();
const input = document.querySelector(
'input[type="file"]'
) as HTMLInputElement;
if (input) input.click();
}}
>
{t("browse_files")}
</Button>
</div>
</div>
</CardContent>
</Card>
</motion.div>
{/* File List Card */}
<AnimatePresence mode="wait">
{files.length > 0 && (
<motion.div
variants={itemVariants}
initial={{ opacity: 0, height: 0 }}
animate={{ opacity: 1, height: "auto" }}
exit={{ opacity: 0, height: 0 }}
transition={{ duration: 0.3 }}
>
<Card>
<CardHeader>
<div className="flex items-center justify-between">
<div>
<CardTitle>{t("selected_files", { count: files.length })}</CardTitle>
<CardDescription>
{t("total_size")}: {formatFileSize(getTotalFileSize())}
</CardDescription>
</div>
<Button
variant="outline"
size="sm"
onClick={() => setFiles([])}
disabled={isUploading}
>
{t("clear_all")}
</Button>
</div>
</CardHeader>
<CardContent>
<div className="space-y-3 max-h-[400px] overflow-y-auto pr-2 custom-scrollbar">
<AnimatePresence>
{files.map((file, index) => (
<motion.div
key={`${file.name}-${index}`}
variants={fileItemVariants}
initial="hidden"
animate="visible"
exit="exit"
className="flex items-center justify-between p-4 rounded-lg border bg-card hover:bg-accent/50 transition-colors"
>
<div className="flex items-center gap-3 flex-1 min-w-0">
<div className="flex-shrink-0">
<FileType className="h-5 w-5 text-muted-foreground" />
</div>
<div className="flex-1 min-w-0">
<p className="font-medium truncate">{file.name}</p>
<div className="flex items-center gap-2 mt-1">
<Badge variant="secondary" className="text-xs">
{formatFileSize(file.size)}
</Badge>
<Badge variant="outline" className="text-xs">
{file.type || "Unknown type"}
</Badge>
</div>
</div>
</div>
<div className="flex items-center gap-2">
<Button
variant="ghost"
size="icon"
onClick={() => removeFile(index)}
disabled={isUploading}
className="h-8 w-8"
>
<X className="h-4 w-4" />
</Button>
</div>
</motion.div>
))}
</AnimatePresence>
</div>
{isUploading && (
<motion.div
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
className="mt-6 space-y-3"
>
<Separator />
<div className="space-y-2">
<div className="flex items-center justify-between text-sm">
<span>{t("uploading_files")}</span>
<span>{Math.round(uploadProgress)}%</span>
</div>
<Progress value={uploadProgress} className="h-2" />
</div>
</motion.div>
)}
<motion.div
className="mt-6"
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.2 }}
>
<Button
className="w-full py-6 text-base font-medium"
onClick={handleUpload}
disabled={isUploading || files.length === 0}
>
{isUploading ? (
<motion.div
className="flex items-center gap-2"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
>
<motion.div
animate={{ rotate: 360 }}
transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
>
<Upload className="h-5 w-5" />
</motion.div>
<span>{t("uploading")}</span>
</motion.div>
) : (
<motion.div
className="flex items-center gap-2"
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
>
<CheckCircle2 className="h-5 w-5" />
<span>{t("upload_button", { count: files.length })}</span>
</motion.div>
)}
</Button>
</motion.div>
</CardContent>
</Card>
</motion.div>
)}
</AnimatePresence>
{/* Supported File Types Card */}
<motion.div variants={itemVariants}>
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Tag className="h-5 w-5" />
{t("supported_file_types")}
</CardTitle>
<CardDescription>{t("file_types_desc")}</CardDescription>
</CardHeader>
<CardContent>
<div className="flex flex-wrap gap-2">
{supportedExtensions.map((ext) => (
<Badge key={ext} variant="outline" className="text-xs">
{ext}
</Badge>
))}
</div>
</CardContent>
</Card>
</motion.div>
</motion.div>
<style jsx global>{`
.custom-scrollbar::-webkit-scrollbar {
width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background-color: rgba(var(--muted-foreground), 0.3);
border-radius: 20px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background-color: rgba(var(--muted-foreground), 0.5);
}
`}</style>
</div>
);
return null;
}

298
surfsense_web/app/dashboard/[search_space_id]/documents/youtube/page.tsx
View file

@ -1,302 +1,16 @@
"use client";
import { IconBrandYoutube } from "@tabler/icons-react";
import { type Tag, TagInput } from "emblor";
import { Loader2 } from "lucide-react";
import { motion, type Variants } from "motion/react";
import { useParams, useRouter } from "next/navigation";
import { useTranslations } from "next-intl";
import { useState } from "react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { useEffect } from "react";
// YouTube video ID validation regex
const youtubeRegex =
/^(https:\/\/)?(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})$/;
export default function YouTubeVideoAdder() {
const t = useTranslations("add_youtube");
export default function YouTubeRedirect() {
const params = useParams();
const router = useRouter();
const search_space_id = params.search_space_id as string;
const [videoTags, setVideoTags] = useState<Tag[]>([]);
const [activeTagIndex, setActiveTagIndex] = useState<number | null>(null);
const [isSubmitting, setIsSubmitting] = useState(false);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
router.replace(`/dashboard/${search_space_id}/sources/add?tab=youtube`);
}, [search_space_id, router]);
// Function to validate a YouTube URL
const isValidYoutubeUrl = (url: string): boolean => {
return youtubeRegex.test(url);
};
// Function to extract video ID from URL
const extractVideoId = (url: string): string | null => {
const match = url.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/);
return match ? match[1] : null;
};
// Function to handle video URL submission
const handleSubmit = async () => {
// Validate that we have at least one video URL
if (videoTags.length === 0) {
setError(t("error_no_video"));
return;
}
// Validate all URLs
const invalidUrls = videoTags.filter((tag) => !isValidYoutubeUrl(tag.text));
if (invalidUrls.length > 0) {
setError(t("error_invalid_urls", { urls: invalidUrls.map((tag) => tag.text).join(", ") }));
return;
}
setError(null);
setIsSubmitting(true);
try {
toast(t("processing_toast"), {
description: t("processing_toast_desc"),
});
// Extract URLs from tags
const videoUrls = videoTags.map((tag) => tag.text);
// Make API call to backend
const response = await fetch(
`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/documents`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${localStorage.getItem("surfsense_bearer_token")}`,
},
body: JSON.stringify({
document_type: "YOUTUBE_VIDEO",
content: videoUrls,
search_space_id: parseInt(search_space_id),
}),
}
);
if (!response.ok) {
throw new Error("Failed to process YouTube videos");
}
await response.json();
toast(t("success_toast"), {
description: t("success_toast_desc"),
});
// Redirect to documents page
router.push(`/dashboard/${search_space_id}/documents`);
} catch (error: any) {
setError(error.message || t("error_generic"));
toast(t("error_toast"), {
description: `${t("error_toast_desc")}: ${error.message}`,
});
} finally {
setIsSubmitting(false);
}
};
// Function to add a new video URL tag
const handleAddTag = (text: string) => {
// Basic URL validation
if (!isValidYoutubeUrl(text)) {
toast(t("invalid_url_toast"), {
description: t("invalid_url_toast_desc"),
});
return;
}
// Check for duplicates
if (videoTags.some((tag) => tag.text === text)) {
toast(t("duplicate_url_toast"), {
description: t("duplicate_url_toast_desc"),
});
return;
}
// Add the new tag
const newTag: Tag = {
id: Date.now().toString(),
text: text,
};
setVideoTags([...videoTags, newTag]);
};
// Animation variants
const containerVariants: Variants = {
hidden: { opacity: 0 },
visible: {
opacity: 1,
transition: {
staggerChildren: 0.1,
},
},
};
const itemVariants: Variants = {
hidden: { y: 20, opacity: 0 },
visible: {
y: 0,
opacity: 1,
transition: {
type: "spring",
stiffness: 300,
damping: 24,
},
},
};
return (
<div className="container mx-auto py-8">
<motion.div initial="hidden" animate="visible" variants={containerVariants}>
<Card className="max-w-2xl mx-auto">
<motion.div variants={itemVariants}>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<IconBrandYoutube className="h-5 w-5" />
{t("title")}
</CardTitle>
<CardDescription>{t("subtitle")}</CardDescription>
</CardHeader>
</motion.div>
<motion.div variants={itemVariants}>
<CardContent>
<div className="space-y-4">
<div className="space-y-2">
<Label htmlFor="video-input">{t("label")}</Label>
<TagInput
id="video-input"
tags={videoTags}
setTags={setVideoTags}
placeholder={t("placeholder")}
onAddTag={handleAddTag}
styleClasses={{
inlineTagsContainer:
"border-input rounded-lg bg-background shadow-sm shadow-black/5 transition-shadow focus-within:border-ring focus-within:outline-none focus-within:ring-[3px] focus-within:ring-ring/20 p-1 gap-1",
input: "w-full min-w-[80px] focus-visible:outline-none shadow-none px-2 h-7",
tag: {
body: "h-7 relative bg-background border border-input hover:bg-background rounded-md font-medium text-xs ps-2 pe-7 flex",
closeButton:
"absolute -inset-y-px -end-px p-0 rounded-e-lg flex size-7 transition-colors outline-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring/70 text-muted-foreground/80 hover:text-foreground",
},
}}
activeTagIndex={activeTagIndex}
setActiveTagIndex={setActiveTagIndex}
/>
<p className="text-xs text-muted-foreground mt-1">{t("hint")}</p>
</div>
{error && (
<motion.div
className="text-sm text-red-500 mt-2"
initial={{ opacity: 0, scale: 0.9 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ type: "spring", stiffness: 500, damping: 30 }}
>
{error}
</motion.div>
)}
<motion.div variants={itemVariants} className="bg-muted/50 rounded-lg p-4 text-sm">
<h4 className="font-medium mb-2">{t("tips_title")}</h4>
<ul className="list-disc pl-5 space-y-1 text-muted-foreground">
<li>{t("tip_1")}</li>
<li>{t("tip_2")}</li>
<li>{t("tip_3")}</li>
<li>{t("tip_4")}</li>
</ul>
</motion.div>
{videoTags.length > 0 && (
<motion.div variants={itemVariants} className="mt-4 space-y-2">
<h4 className="font-medium">{t("preview")}:</h4>
<div className="grid grid-cols-1 gap-3">
{videoTags.map((tag, index) => {
const videoId = extractVideoId(tag.text);
return videoId ? (
<motion.div
key={tag.id}
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: index * 0.1 }}
className="relative aspect-video rounded-lg overflow-hidden border"
>
<iframe
width="100%"
height="100%"
src={`https://www.youtube.com/embed/${videoId}`}
title="YouTube video player"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
></iframe>
</motion.div>
) : null;
})}
</div>
</motion.div>
)}
</div>
</CardContent>
</motion.div>
<motion.div variants={itemVariants}>
<CardFooter className="flex justify-between">
<Button
variant="outline"
onClick={() => router.push(`/dashboard/${search_space_id}/documents`)}
>
{t("cancel")}
</Button>
<Button
onClick={handleSubmit}
disabled={isSubmitting || videoTags.length === 0}
className="relative overflow-hidden"
>
{isSubmitting ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
{t("processing")}
</>
) : (
<>
<motion.span
initial={{ x: -5, opacity: 0 }}
animate={{ x: 0, opacity: 1 }}
transition={{ delay: 0.2 }}
className="mr-2"
>
<IconBrandYoutube className="h-4 w-4" />
</motion.span>
{t("submit")}
</>
)}
<motion.div
className="absolute inset-0 bg-primary/10"
initial={{ x: "-100%" }}
animate={isSubmitting ? { x: "0%" } : { x: "-100%" }}
transition={{ duration: 0.5, ease: "easeInOut" }}
/>
</Button>
</CardFooter>
</motion.div>
</Card>
</motion.div>
</div>
);
return null;
}

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

@ -41,37 +41,18 @@ export default function DashboardLayout({
},
{
title: "Documents",
title: "Sources",
url: "#",
icon: "FileStack",
icon: "Database",
items: [
{
title: "Upload Documents",
url: `/dashboard/${search_space_id}/documents/upload`,
},
// {
// title: "Add Webpages",
// url: `/dashboard/${search_space_id}/documents/webpage`,
// },
{
title: "Add Youtube Videos",
url: `/dashboard/${search_space_id}/documents/youtube`,
title: "Add Sources",
url: `/dashboard/${search_space_id}/sources/add`,
},
{
title: "Manage Documents",
url: `/dashboard/${search_space_id}/documents`,
},
],
},
{
title: "Connectors",
url: `#`,
icon: "Cable",
items: [
{
title: "Add Connector",
url: `/dashboard/${search_space_id}/connectors/add`,
},
{
title: "Manage Connectors",
url: `/dashboard/${search_space_id}/connectors`,

78
surfsense_web/app/dashboard/[search_space_id]/sources/add/page.tsx Normal file
View file

@ -0,0 +1,78 @@
"use client";
import { IconBrandYoutube } from "@tabler/icons-react";
import { Cable, Database, Upload } from "lucide-react";
import { motion } from "motion/react";
import { useParams, useSearchParams } from "next/navigation";
import { useEffect, useState } from "react";
import { ConnectorsTab } from "@/components/sources/ConnectorsTab";
import { DocumentUploadTab } from "@/components/sources/DocumentUploadTab";
import { YouTubeTab } from "@/components/sources/YouTubeTab";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
export default function AddSourcesPage() {
const params = useParams();
const searchParams = useSearchParams();
const search_space_id = params.search_space_id as string;
const [activeTab, setActiveTab] = useState("documents");
// Handle tab from query parameter
useEffect(() => {
const tabParam = searchParams.get("tab");
if (tabParam && ["documents", "youtube", "connectors"].includes(tabParam)) {
setActiveTab(tabParam);
}
}, [searchParams]);
return (
<div className="container mx-auto py-8 px-4">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
className="space-y-6"
>
{/* Header */}
<div className="text-center space-y-2">
<h1 className="text-4xl font-bold tracking-tight flex items-center justify-center gap-3">
<Database className="h-8 w-8" />
Add Sources
</h1>
<p className="text-muted-foreground text-lg">Add your sources to your search space</p>
</div>
{/* Tabs */}
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
<TabsList className="grid w-full max-w-2xl mx-auto grid-cols-3 h-12">
<TabsTrigger value="documents" className="flex items-center gap-2">
<Upload className="h-4 w-4" />
Documents
</TabsTrigger>
<TabsTrigger value="youtube" className="flex items-center gap-2">
<IconBrandYoutube className="h-4 w-4" />
YouTube
</TabsTrigger>
<TabsTrigger value="connectors" className="flex items-center gap-2">
<Cable className="h-4 w-4" />
Connectors
</TabsTrigger>
</TabsList>
<div className="mt-8">
<TabsContent value="documents" className="space-y-6">
<DocumentUploadTab searchSpaceId={search_space_id} />
</TabsContent>
<TabsContent value="youtube" className="space-y-6">
<YouTubeTab searchSpaceId={search_space_id} />
</TabsContent>
<TabsContent value="connectors" className="space-y-6">
<ConnectorsTab searchSpaceId={search_space_id} />
</TabsContent>
</div>
</Tabs>
</motion.div>
</div>
);
}

16
surfsense_web/components/dashboard-breadcrumb.tsx
View file

@ -46,6 +46,7 @@ export function DashboardBreadcrumb() {
researcher: t("researcher"),
documents: t("documents"),
connectors: t("connectors"),
sources: "Sources",
podcasts: t("podcasts"),
logs: t("logs"),
chats: t("chats"),
@ -59,6 +60,21 @@ export function DashboardBreadcrumb() {
const subSection = segments[3];
let subSectionLabel = subSection.charAt(0).toUpperCase() + subSection.slice(1);
// Handle sources sub-sections
if (section === "sources") {
const sourceLabels: Record<string, string> = {
add: "Add Sources",
};
const sourceLabel = sourceLabels[subSection] || subSectionLabel;
breadcrumbs.push({
label: "Sources",
href: `/dashboard/${segments[1]}/sources`,
});
breadcrumbs.push({ label: sourceLabel });
return breadcrumbs;
}
// Handle documents sub-sections
if (section === "documents") {
const documentLabels: Record<string, string> = {

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

@ -4,6 +4,7 @@ import {
AlertCircle,
BookOpen,
Cable,
Database,
ExternalLink,
FileStack,
FileText,
@ -40,6 +41,7 @@ import {
export const iconMap: Record<string, LucideIcon> = {
BookOpen,
Cable,
Database,
FileStack,
Undo2,
MessageCircleMore,
@ -69,54 +71,24 @@ const defaultData = {
items: [],
},
{
title: "Documents",
title: "Sources",
url: "#",
icon: "FileStack",
icon: "Database",
items: [
{
title: "Upload Documents",
title: "Add Sources",
url: "#",
},
// {
// title: "Add Webpages",
// url: "#",
// },
{
title: "Manage Documents",
url: "#",
},
],
},
{
title: "Connectors",
url: "#",
icon: "Cable",
items: [
{
title: "Add Connector",
url: "#",
},
{
title: "Manage Connectors",
url: "#",
},
],
},
{
title: "Research Synthesizer's",
url: "#",
icon: "SquareLibrary",
items: [
{
title: "Podcast Creator",
url: "#",
},
{
title: "Presentation Creator",
url: "#",
},
],
},
],
navSecondary: [
{

8
surfsense_web/components/sidebar/nav-main.tsx
View file

@ -36,13 +36,9 @@ export function NavMain({ items }: { items: NavItem[] }) {
const titleMap: Record<string, string> = {
Researcher: "researcher",
"Manage LLMs": "manage_llms",
Documents: "documents",
"Upload Documents": "upload_documents",
"Add Webpages": "add_webpages",
"Add Youtube Videos": "add_youtube",
Sources: "sources",
"Add Sources": "add_sources",
"Manage Documents": "manage_documents",
Connectors: "connectors",
"Add Connector": "add_connector",
"Manage Connectors": "manage_connectors",
Podcasts: "podcasts",
Logs: "logs",

200
surfsense_web/components/sources/ConnectorsTab.tsx Normal file
View file

@ -0,0 +1,200 @@
"use client";
import { IconChevronDown, IconChevronRight } from "@tabler/icons-react";
import { AnimatePresence, motion, type Variants } from "motion/react";
import Link from "next/link";
import { useTranslations } from "next-intl";
import { useState } from "react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
import { connectorCategories } from "./connector-data";
interface ConnectorsTabProps {
searchSpaceId: string;
}
export function ConnectorsTab({ searchSpaceId }: ConnectorsTabProps) {
const t = useTranslations("add_connector");
const [expandedCategories, setExpandedCategories] = useState<string[]>([
"search-engines",
"knowledge-bases",
"project-management",
"team-chats",
"communication",
]);
const toggleCategory = (categoryId: string) => {
setExpandedCategories((prev) =>
prev.includes(categoryId) ? prev.filter((id) => id !== categoryId) : [...prev, categoryId]
);
};
const cardVariants: Variants = {
hidden: { opacity: 0, y: 20 },
visible: {
opacity: 1,
y: 0,
transition: {
type: "spring",
stiffness: 260,
damping: 20,
},
},
hover: {
scale: 1.02,
transition: {
type: "spring",
stiffness: 400,
damping: 10,
},
},
};
const staggerContainer = {
hidden: { opacity: 0 },
visible: {
opacity: 1,
transition: {
staggerChildren: 0.1,
},
},
};
return (
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.3 }}
className="space-y-6"
>
{connectorCategories.map((category) => (
<div key={category.id} className="rounded-lg border bg-card text-card-foreground shadow-sm">
<Collapsible
open={expandedCategories.includes(category.id)}
onOpenChange={() => toggleCategory(category.id)}
className="w-full"
>
<div className="flex items-center justify-between space-x-4 p-4">
<h3 className="text-xl font-semibold">{t(category.title)}</h3>
<CollapsibleTrigger asChild>
<Button variant="ghost" size="sm" className="w-9 p-0 hover:bg-muted">
<motion.div
animate={{
rotate: expandedCategories.includes(category.id) ? 180 : 0,
}}
transition={{ duration: 0.3, ease: "easeInOut" }}
>
<IconChevronDown className="h-5 w-5" />
</motion.div>
<span className="sr-only">Toggle</span>
</Button>
</CollapsibleTrigger>
</div>
<CollapsibleContent>
<AnimatePresence>
<motion.div
className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 p-4"
variants={staggerContainer}
initial="hidden"
animate="visible"
exit="hidden"
>
{category.connectors.map((connector) => (
<motion.div
key={connector.id}
variants={cardVariants}
whileHover="hover"
className="col-span-1"
>
<Card className="h-full flex flex-col overflow-hidden border-transparent transition-all duration-200 hover:border-primary/50">
<CardHeader className="flex-row items-center gap-4 pb-2">
<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10 dark:bg-primary/20">
<motion.div
whileHover={{ rotate: 5, scale: 1.1 }}
className="text-primary"
>
{connector.icon}
</motion.div>
</div>
<div>
<div className="flex items-center gap-2">
<h3 className="font-medium">{connector.title}</h3>
{connector.status === "coming-soon" && (
<Badge
variant="outline"
className="text-xs bg-amber-100 dark:bg-amber-950 text-amber-800 dark:text-amber-300 border-amber-200 dark:border-amber-800"
>
{t("coming_soon")}
</Badge>
)}
{connector.status === "connected" && (
<Badge
variant="outline"
className="text-xs bg-green-100 dark:bg-green-950 text-green-800 dark:text-green-300 border-green-200 dark:border-green-800"
>
{t("connected")}
</Badge>
)}
</div>
</div>
</CardHeader>
<CardContent className="pb-4">
<p className="text-sm text-muted-foreground">
{t(connector.description)}
</p>
</CardContent>
<CardFooter className="mt-auto pt-2">
{connector.status === "available" && (
<Link
href={`/dashboard/${searchSpaceId}/connectors/add/${connector.id}`}
className="w-full"
>
<Button variant="default" className="w-full group">
<span>{t("connect")}</span>
<motion.div
className="ml-1"
initial={{ x: 0 }}
whileHover={{ x: 3 }}
transition={{
type: "spring",
stiffness: 400,
damping: 10,
}}
>
<IconChevronRight className="h-4 w-4" />
</motion.div>
</Button>
</Link>
)}
{connector.status === "coming-soon" && (
<Button variant="outline" disabled className="w-full opacity-70">
{t("coming_soon")}
</Button>
)}
{connector.status === "connected" && (
<Button
variant="outline"
className="w-full border-green-500 text-green-600 hover:bg-green-50 dark:hover:bg-green-950"
>
{t("manage")}
</Button>
)}
</CardFooter>
</Card>
</motion.div>
))}
</motion.div>
</AnimatePresence>
</CollapsibleContent>
</Collapsible>
</div>
))}
</motion.div>
);
}

401
surfsense_web/components/sources/DocumentUploadTab.tsx Normal file
View file

@ -0,0 +1,401 @@
"use client";
import { CheckCircle2, FileType, Info, Loader2, Tag, Upload, X } from "lucide-react";
import { AnimatePresence, motion } from "motion/react";
import { useRouter } from "next/navigation";
import { useTranslations } from "next-intl";
import { useCallback, useState } from "react";
import { useDropzone } from "react-dropzone";
import { toast } from "sonner";
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 { Progress } from "@/components/ui/progress";
import { Separator } from "@/components/ui/separator";
import { GridPattern } from "./GridPattern";
interface DocumentUploadTabProps {
searchSpaceId: string;
}
export function DocumentUploadTab({ searchSpaceId }: DocumentUploadTabProps) {
const t = useTranslations("upload_documents");
const router = useRouter();
const [files, setFiles] = useState<File[]>([]);
const [isUploading, setIsUploading] = useState(false);
const [uploadProgress, setUploadProgress] = useState(0);
const audioFileTypes = {
"audio/mpeg": [".mp3", ".mpeg", ".mpga"],
"audio/mp4": [".mp4", ".m4a"],
"audio/wav": [".wav"],
"audio/webm": [".webm"],
"text/markdown": [".md", ".markdown"],
"text/plain": [".txt"],
};
const getAcceptedFileTypes = () => {
const etlService = process.env.NEXT_PUBLIC_ETL_SERVICE;
if (etlService === "LLAMACLOUD") {
return {
"application/pdf": [".pdf"],
"application/msword": [".doc"],
"application/vnd.openxmlformats-officedocument.wordprocessingml.document": [".docx"],
"application/vnd.ms-word.document.macroEnabled.12": [".docm"],
"application/msword-template": [".dot"],
"application/vnd.ms-word.template.macroEnabled.12": [".dotm"],
"application/vnd.ms-powerpoint": [".ppt"],
"application/vnd.ms-powerpoint.template.macroEnabled.12": [".pptm"],
"application/vnd.openxmlformats-officedocument.presentationml.presentation": [".pptx"],
"application/vnd.ms-powerpoint.template": [".pot"],
"application/vnd.openxmlformats-officedocument.presentationml.template": [".potx"],
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": [".xlsx"],
"application/vnd.ms-excel": [".xls"],
"application/vnd.ms-excel.sheet.macroEnabled.12": [".xlsm"],
"application/vnd.ms-excel.sheet.binary.macroEnabled.12": [".xlsb"],
"application/vnd.ms-excel.workspace": [".xlw"],
"application/rtf": [".rtf"],
"application/xml": [".xml"],
"application/epub+zip": [".epub"],
"text/csv": [".csv"],
"text/tab-separated-values": [".tsv"],
"text/html": [".html", ".htm", ".web"],
"image/jpeg": [".jpg", ".jpeg"],
"image/png": [".png"],
"image/gif": [".gif"],
"image/bmp": [".bmp"],
"image/svg+xml": [".svg"],
"image/tiff": [".tiff"],
"image/webp": [".webp"],
...audioFileTypes,
};
} else if (etlService === "DOCLING") {
return {
"application/pdf": [".pdf"],
"application/vnd.openxmlformats-officedocument.wordprocessingml.document": [".docx"],
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": [".xlsx"],
"application/vnd.openxmlformats-officedocument.presentationml.presentation": [".pptx"],
"text/asciidoc": [".adoc", ".asciidoc"],
"text/html": [".html", ".htm", ".xhtml"],
"text/csv": [".csv"],
"image/png": [".png"],
"image/jpeg": [".jpg", ".jpeg"],
"image/tiff": [".tiff", ".tif"],
"image/bmp": [".bmp"],
"image/webp": [".webp"],
...audioFileTypes,
};
} else {
return {
"image/bmp": [".bmp"],
"text/csv": [".csv"],
"application/msword": [".doc"],
"application/vnd.openxmlformats-officedocument.wordprocessingml.document": [".docx"],
"message/rfc822": [".eml"],
"application/epub+zip": [".epub"],
"image/heic": [".heic"],
"text/html": [".html"],
"image/jpeg": [".jpeg", ".jpg"],
"image/png": [".png"],
"application/vnd.ms-outlook": [".msg"],
"application/vnd.oasis.opendocument.text": [".odt"],
"text/x-org": [".org"],
"application/pkcs7-signature": [".p7s"],
"application/pdf": [".pdf"],
"application/vnd.ms-powerpoint": [".ppt"],
"application/vnd.openxmlformats-officedocument.presentationml.presentation": [".pptx"],
"text/x-rst": [".rst"],
"application/rtf": [".rtf"],
"image/tiff": [".tiff"],
"text/tab-separated-values": [".tsv"],
"application/vnd.ms-excel": [".xls"],
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": [".xlsx"],
"application/xml": [".xml"],
...audioFileTypes,
};
}
};
const acceptedFileTypes = getAcceptedFileTypes();
const supportedExtensions = Array.from(new Set(Object.values(acceptedFileTypes).flat())).sort();
const onDrop = useCallback((acceptedFiles: File[]) => {
setFiles((prevFiles) => [...prevFiles, ...acceptedFiles]);
}, []);
const { getRootProps, getInputProps, isDragActive } = useDropzone({
onDrop,
accept: acceptedFileTypes,
maxSize: 50 * 1024 * 1024,
noClick: false,
noKeyboard: false,
});
const removeFile = (index: number) => {
setFiles((prevFiles) => prevFiles.filter((_, i) => i !== index));
};
const formatFileSize = (bytes: number) => {
if (bytes === 0) return "0 Bytes";
const k = 1024;
const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return `${parseFloat((bytes / k ** i).toFixed(2))} ${sizes[i]}`;
};
const handleUpload = async () => {
setIsUploading(true);
setUploadProgress(0);
const formData = new FormData();
files.forEach((file) => {
formData.append("files", file);
});
formData.append("search_space_id", searchSpaceId);
try {
const progressInterval = setInterval(() => {
setUploadProgress((prev) => {
if (prev >= 90) return prev;
return prev + Math.random() * 10;
});
}, 200);
const response = await fetch(
`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/documents/fileupload`,
{
method: "POST",
headers: {
Authorization: `Bearer ${window.localStorage.getItem("surfsense_bearer_token")}`,
},
body: formData,
}
);
clearInterval(progressInterval);
setUploadProgress(100);
if (!response.ok) {
throw new Error("Upload failed");
}
await response.json();
toast(t("upload_initiated"), {
description: t("upload_initiated_desc"),
});
router.push(`/dashboard/${searchSpaceId}/documents`);
} catch (error: any) {
setIsUploading(false);
setUploadProgress(0);
toast(t("upload_error"), {
description: `${t("upload_error_desc")}: ${error.message}`,
});
}
};
const getTotalFileSize = () => {
return files.reduce((total, file) => total + file.size, 0);
};
return (
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.3 }}
className="space-y-6 max-w-4xl mx-auto"
>
<Alert>
<Info className="h-4 w-4" />
<AlertDescription>{t("file_size_limit")}</AlertDescription>
</Alert>
<Card className="relative overflow-hidden">
<div className="absolute inset-0 [mask-image:radial-gradient(ellipse_at_center,white,transparent)] opacity-30">
<GridPattern />
</div>
<CardContent className="p-10 relative z-10">
<div
{...getRootProps()}
className="flex flex-col items-center justify-center min-h-[300px] border-2 border-dashed border-muted-foreground/25 rounded-lg hover:border-primary/50 transition-colors cursor-pointer"
>
<input {...getInputProps()} className="hidden" />
{isDragActive ? (
<motion.div
initial={{ opacity: 0, scale: 0.8 }}
animate={{ opacity: 1, scale: 1 }}
className="flex flex-col items-center gap-4"
>
<Upload className="h-12 w-12 text-primary" />
<p className="text-lg font-medium text-primary">{t("drop_files")}</p>
</motion.div>
) : (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
className="flex flex-col items-center gap-4"
>
<Upload className="h-12 w-12 text-muted-foreground" />
<div className="text-center">
<p className="text-lg font-medium">{t("drag_drop")}</p>
<p className="text-sm text-muted-foreground mt-1">{t("or_browse")}</p>
</div>
</motion.div>
)}
<div className="mt-4">
<Button
variant="outline"
size="sm"
onClick={(e) => {
e.stopPropagation();
const input = document.querySelector('input[type="file"]') as HTMLInputElement;
if (input) input.click();
}}
>
{t("browse_files")}
</Button>
</div>
</div>
</CardContent>
</Card>
<AnimatePresence mode="wait">
{files.length > 0 && (
<motion.div
initial={{ opacity: 0, height: 0 }}
animate={{ opacity: 1, height: "auto" }}
exit={{ opacity: 0, height: 0 }}
transition={{ duration: 0.3 }}
>
<Card>
<CardHeader>
<div className="flex items-center justify-between">
<div>
<CardTitle>{t("selected_files", { count: files.length })}</CardTitle>
<CardDescription>
{t("total_size")}: {formatFileSize(getTotalFileSize())}
</CardDescription>
</div>
<Button
variant="outline"
size="sm"
onClick={() => setFiles([])}
disabled={isUploading}
>
{t("clear_all")}
</Button>
</div>
</CardHeader>
<CardContent>
<div className="space-y-3 max-h-[400px] overflow-y-auto">
<AnimatePresence>
{files.map((file, index) => (
<motion.div
key={`${file.name}-${index}`}
initial={{ opacity: 0, x: -20 }}
animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: 20 }}
className="flex items-center justify-between p-4 rounded-lg border bg-card hover:bg-accent/50 transition-colors"
>
<div className="flex items-center gap-3 flex-1 min-w-0">
<FileType className="h-5 w-5 text-muted-foreground flex-shrink-0" />
<div className="flex-1 min-w-0">
<p className="font-medium truncate">{file.name}</p>
<div className="flex items-center gap-2 mt-1">
<Badge variant="secondary" className="text-xs">
{formatFileSize(file.size)}
</Badge>
<Badge variant="outline" className="text-xs">
{file.type || "Unknown type"}
</Badge>
</div>
</div>
</div>
<Button
variant="ghost"
size="icon"
onClick={() => removeFile(index)}
disabled={isUploading}
className="h-8 w-8"
>
<X className="h-4 w-4" />
</Button>
</motion.div>
))}
</AnimatePresence>
</div>
{isUploading && (
<motion.div
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
className="mt-6 space-y-3"
>
<Separator />
<div className="space-y-2">
<div className="flex items-center justify-between text-sm">
<span>{t("uploading_files")}</span>
<span>{Math.round(uploadProgress)}%</span>
</div>
<Progress value={uploadProgress} className="h-2" />
</div>
</motion.div>
)}
<motion.div
className="mt-6"
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
>
<Button
className="w-full py-6 text-base font-medium"
onClick={handleUpload}
disabled={isUploading || files.length === 0}
>
{isUploading ? (
<span className="flex items-center gap-2">
<Loader2 className="h-5 w-5 animate-spin" />
{t("uploading")}
</span>
) : (
<span className="flex items-center gap-2">
<CheckCircle2 className="h-5 w-5" />
{t("upload_button", { count: files.length })}
</span>
)}
</Button>
</motion.div>
</CardContent>
</Card>
</motion.div>
)}
</AnimatePresence>
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Tag className="h-5 w-5" />
{t("supported_file_types")}
</CardTitle>
<CardDescription>{t("file_types_desc")}</CardDescription>
</CardHeader>
<CardContent>
<div className="flex flex-wrap gap-2">
{supportedExtensions.map((ext) => (
<Badge key={ext} variant="outline" className="text-xs">
{ext}
</Badge>
))}
</div>
</CardContent>
</Card>
</motion.div>
);
}

23
surfsense_web/components/sources/GridPattern.tsx Normal file
View file

@ -0,0 +1,23 @@
export function GridPattern() {
const columns = 41;
const rows = 11;
return (
<div className="flex bg-gray-100 dark:bg-neutral-900 flex-shrink-0 flex-wrap justify-center items-center gap-x-px gap-y-px scale-105">
{Array.from({ length: rows }).map((_, row) =>
Array.from({ length: columns }).map((_, col) => {
const index = row * columns + col;
return (
<div
key={`${col}-${row}`}
className={`w-10 h-10 flex flex-shrink-0 rounded-[2px] ${
index % 2 === 0
? "bg-gray-50 dark:bg-neutral-950"
: "bg-gray-50 dark:bg-neutral-950 shadow-[0px_0px_1px_3px_rgba(255,255,255,1)_inset] dark:shadow-[0px_0px_1px_3px_rgba(0,0,0,1)_inset]"
}`}
/>
);
})
)}
</div>
);
}

250
surfsense_web/components/sources/YouTubeTab.tsx Normal file
View file

@ -0,0 +1,250 @@
"use client";
import { IconBrandYoutube } from "@tabler/icons-react";
import { TagInput, type Tag as TagType } from "emblor";
import { Loader2 } from "lucide-react";
import { motion } from "motion/react";
import { useRouter } from "next/navigation";
import { useTranslations } from "next-intl";
import { useState } from "react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Label } from "@/components/ui/label";
const youtubeRegex =
/^(https:\/\/)?(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})$/;
interface YouTubeTabProps {
searchSpaceId: string;
}
export function YouTubeTab({ searchSpaceId }: YouTubeTabProps) {
const t = useTranslations("add_youtube");
const router = useRouter();
const [videoTags, setVideoTags] = useState<TagType[]>([]);
const [activeTagIndex, setActiveTagIndex] = useState<number | null>(null);
const [isSubmitting, setIsSubmitting] = useState(false);
const [error, setError] = useState<string | null>(null);
const isValidYoutubeUrl = (url: string): boolean => {
return youtubeRegex.test(url);
};
const extractVideoId = (url: string): string | null => {
const match = url.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/);
return match ? match[1] : null;
};
const handleSubmit = async () => {
if (videoTags.length === 0) {
setError(t("error_no_video"));
return;
}
const invalidUrls = videoTags.filter((tag) => !isValidYoutubeUrl(tag.text));
if (invalidUrls.length > 0) {
setError(t("error_invalid_urls", { urls: invalidUrls.map((tag) => tag.text).join(", ") }));
return;
}
setError(null);
setIsSubmitting(true);
try {
toast(t("processing_toast"), {
description: t("processing_toast_desc"),
});
const videoUrls = videoTags.map((tag) => tag.text);
const response = await fetch(
`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/documents`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${localStorage.getItem("surfsense_bearer_token")}`,
},
body: JSON.stringify({
document_type: "YOUTUBE_VIDEO",
content: videoUrls,
search_space_id: parseInt(searchSpaceId),
}),
}
);
if (!response.ok) {
throw new Error("Failed to process YouTube videos");
}
await response.json();
toast(t("success_toast"), {
description: t("success_toast_desc"),
});
router.push(`/dashboard/${searchSpaceId}/documents`);
} catch (error: any) {
setError(error.message || t("error_generic"));
toast(t("error_toast"), {
description: `${t("error_toast_desc")}: ${error.message}`,
});
} finally {
setIsSubmitting(false);
}
};
const handleAddTag = (text: string) => {
if (!isValidYoutubeUrl(text)) {
toast(t("invalid_url_toast"), {
description: t("invalid_url_toast_desc"),
});
return;
}
if (videoTags.some((tag) => tag.text === text)) {
toast(t("duplicate_url_toast"), {
description: t("duplicate_url_toast_desc"),
});
return;
}
const newTag: TagType = {
id: Date.now().toString(),
text: text,
};
setVideoTags([...videoTags, newTag]);
};
return (
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.3 }}
className="max-w-2xl mx-auto space-y-6"
>
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<IconBrandYoutube className="h-5 w-5" />
{t("title")}
</CardTitle>
<CardDescription>{t("subtitle")}</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-4">
<div className="space-y-2">
<Label htmlFor="video-input">{t("label")}</Label>
<TagInput
id="video-input"
tags={videoTags}
setTags={setVideoTags}
placeholder={t("placeholder")}
onAddTag={handleAddTag}
styleClasses={{
inlineTagsContainer:
"border-input rounded-lg bg-background shadow-sm shadow-black/5 transition-shadow focus-within:border-ring focus-within:outline-none focus-within:ring-[3px] focus-within:ring-ring/20 p-1 gap-1",
input: "w-full min-w-[80px] focus-visible:outline-none shadow-none px-2 h-7",
tag: {
body: "h-7 relative bg-background border border-input hover:bg-background rounded-md font-medium text-xs ps-2 pe-7 flex",
closeButton:
"absolute -inset-y-px -end-px p-0 rounded-e-lg flex size-7 transition-colors outline-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring/70 text-muted-foreground/80 hover:text-foreground",
},
}}
activeTagIndex={activeTagIndex}
setActiveTagIndex={setActiveTagIndex}
/>
<p className="text-xs text-muted-foreground mt-1">{t("hint")}</p>
</div>
{error && (
<motion.div
className="text-sm text-red-500 mt-2"
initial={{ opacity: 0, scale: 0.9 }}
animate={{ opacity: 1, scale: 1 }}
>
{error}
</motion.div>
)}
<div className="bg-muted/50 rounded-lg p-4 text-sm">
<h4 className="font-medium mb-2">{t("tips_title")}</h4>
<ul className="list-disc pl-5 space-y-1 text-muted-foreground">
<li>{t("tip_1")}</li>
<li>{t("tip_2")}</li>
<li>{t("tip_3")}</li>
<li>{t("tip_4")}</li>
</ul>
</div>
{videoTags.length > 0 && (
<div className="mt-4 space-y-2">
<h4 className="font-medium">{t("preview")}:</h4>
<div className="grid grid-cols-1 gap-3">
{videoTags.map((tag, index) => {
const videoId = extractVideoId(tag.text);
return videoId ? (
<motion.div
key={tag.id}
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: index * 0.1 }}
className="relative aspect-video rounded-lg overflow-hidden border"
>
<iframe
width="100%"
height="100%"
src={`https://www.youtube.com/embed/${videoId}`}
title="YouTube video player"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
/>
</motion.div>
) : null;
})}
</div>
</div>
)}
</div>
</CardContent>
<CardFooter className="flex justify-between">
<Button
variant="outline"
onClick={() => router.push(`/dashboard/${searchSpaceId}/documents`)}
>
{t("cancel")}
</Button>
<Button
onClick={handleSubmit}
disabled={isSubmitting || videoTags.length === 0}
className="relative overflow-hidden"
>
{isSubmitting ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
{t("processing")}
</>
) : (
<>
<IconBrandYoutube className="mr-2 h-4 w-4" />
{t("submit")}
</>
)}
</Button>
</CardFooter>
</Card>
</motion.div>
);
}

170
surfsense_web/components/sources/connector-data.tsx Normal file
View file

@ -0,0 +1,170 @@
import { IconBrandWindows, IconBrandZoom } from "@tabler/icons-react";
import { EnumConnectorName } from "@/contracts/enums/connector";
import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
import type { ConnectorCategory } from "./types";
export const connectorCategories: ConnectorCategory[] = [
{
id: "search-engines",
title: "search_engines",
connectors: [
{
id: "tavily-api",
title: "Tavily API",
description: "tavily_desc",
icon: getConnectorIcon(EnumConnectorName.TAVILY_API, "h-6 w-6"),
status: "available",
},
{
id: "searxng",
title: "SearxNG",
description: "searxng_desc",
icon: getConnectorIcon(EnumConnectorName.SEARXNG_API, "h-6 w-6"),
status: "available",
},
{
id: "linkup-api",
title: "Linkup API",
description: "linkup_desc",
icon: getConnectorIcon(EnumConnectorName.LINKUP_API, "h-6 w-6"),
status: "available",
},
{
id: "elasticsearch-connector",
title: "Elasticsearch",
description: "elasticsearch_desc",
icon: getConnectorIcon(EnumConnectorName.ELASTICSEARCH_CONNECTOR, "h-6 w-6"),
status: "available",
},
{
id: "baidu-search-api",
title: "Baidu Search",
description: "baidu_desc",
icon: getConnectorIcon(EnumConnectorName.BAIDU_SEARCH_API, "h-6 w-6"),
status: "available",
},
],
},
{
id: "team-chats",
title: "team_chats",
connectors: [
{
id: "slack-connector",
title: "Slack",
description: "slack_desc",
icon: getConnectorIcon(EnumConnectorName.SLACK_CONNECTOR, "h-6 w-6"),
status: "available",
},
{
id: "ms-teams",
title: "Microsoft Teams",
description: "teams_desc",
icon: <IconBrandWindows className="h-6 w-6" />,
status: "coming-soon",
},
{
id: "discord-connector",
title: "Discord",
description: "discord_desc",
icon: getConnectorIcon(EnumConnectorName.DISCORD_CONNECTOR, "h-6 w-6"),
status: "available",
},
],
},
{
id: "project-management",
title: "project_management",
connectors: [
{
id: "linear-connector",
title: "Linear",
description: "linear_desc",
icon: getConnectorIcon(EnumConnectorName.LINEAR_CONNECTOR, "h-6 w-6"),
status: "available",
},
{
id: "jira-connector",
title: "Jira",
description: "jira_desc",
icon: getConnectorIcon(EnumConnectorName.JIRA_CONNECTOR, "h-6 w-6"),
status: "available",
},
{
id: "clickup-connector",
title: "ClickUp",
description: "clickup_desc",
icon: getConnectorIcon(EnumConnectorName.CLICKUP_CONNECTOR, "h-6 w-6"),
status: "available",
},
],
},
{
id: "knowledge-bases",
title: "knowledge_bases",
connectors: [
{
id: "notion-connector",
title: "Notion",
description: "notion_desc",
icon: getConnectorIcon(EnumConnectorName.NOTION_CONNECTOR, "h-6 w-6"),
status: "available",
},
{
id: "github-connector",
title: "GitHub",
description: "github_desc",
icon: getConnectorIcon(EnumConnectorName.GITHUB_CONNECTOR, "h-6 w-6"),
status: "available",
},
{
id: "confluence-connector",
title: "Confluence",
description: "confluence_desc",
icon: getConnectorIcon(EnumConnectorName.CONFLUENCE_CONNECTOR, "h-6 w-6"),
status: "available",
},
{
id: "airtable-connector",
title: "Airtable",
description: "airtable_desc",
icon: getConnectorIcon(EnumConnectorName.AIRTABLE_CONNECTOR, "h-6 w-6"),
status: "available",
},
{
id: "luma-connector",
title: "Luma",
description: "luma_desc",
icon: getConnectorIcon(EnumConnectorName.LUMA_CONNECTOR, "h-6 w-6"),
status: "available",
},
],
},
{
id: "communication",
title: "communication",
connectors: [
{
id: "google-calendar-connector",
title: "Google Calendar",
description: "calendar_desc",
icon: getConnectorIcon(EnumConnectorName.GOOGLE_CALENDAR_CONNECTOR, "h-6 w-6"),
status: "available",
},
{
id: "google-gmail-connector",
title: "Gmail",
description: "gmail_desc",
icon: getConnectorIcon(EnumConnectorName.GOOGLE_GMAIL_CONNECTOR, "h-6 w-6"),
status: "available",
},
{
id: "zoom",
title: "Zoom",
description: "zoom_desc",
icon: <IconBrandZoom className="h-6 w-6" />,
status: "coming-soon",
},
],
},
];

13
surfsense_web/components/sources/types.ts Normal file
View file

@ -0,0 +1,13 @@
export interface Connector {
id: string;
title: string;
description: string;
icon: React.ReactNode;
status: "available" | "coming-soon" | "connected";
}
export interface ConnectorCategory {
id: string;
title: string;
connectors: Connector[];
}

2
surfsense_web/messages/en.json
View file

@ -134,6 +134,8 @@
"platform": "Platform",
"researcher": "Researcher",
"manage_llms": "Manage LLMs",
"sources": "Sources",
"add_sources": "Add Sources",
"documents": "Documents",
"upload_documents": "Upload Documents",
"add_webpages": "Add Webpages",

2
surfsense_web/messages/zh.json
View file

@ -134,6 +134,8 @@
"platform": "平台",
"researcher": "AI 研究",
"manage_llms": "管理 LLM",
"sources": "数据源",
"add_sources": "添加数据源",
"documents": "文档",
"upload_documents": "上传文档",
"add_webpages": "添加网页",