From 37f11b152195e7ed23ecdf4abe9a6203bac2566e Mon Sep 17 00:00:00 2001 From: "DESKTOP-RTLN3BA\\$punk" Date: Mon, 14 Apr 2025 19:12:39 -0700 Subject: [PATCH] fix(ui) : Added back Tavily and Updated the researcher icon for GitHub --- .../[search_space_id]/connectors/add/page.tsx | 246 ++++++++++++------ .../components/ModernHeroWithGradients.tsx | 2 +- .../components/chat/ConnectorComponents.tsx | 4 +- 3 files changed, 175 insertions(+), 77 deletions(-) diff --git a/surfsense_web/app/dashboard/[search_space_id]/connectors/add/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/connectors/add/page.tsx index f70bb62..7329c44 100644 --- a/surfsense_web/app/dashboard/[search_space_id]/connectors/add/page.tsx +++ b/surfsense_web/app/dashboard/[search_space_id]/connectors/add/page.tsx @@ -15,6 +15,7 @@ import { IconBrandZoom, IconChevronRight, IconWorldWww, + IconChevronDown, } from "@tabler/icons-react"; import { motion, AnimatePresence } from "framer-motion"; import { useState } from "react"; @@ -23,6 +24,8 @@ import Link from "next/link"; import { Button } from "@/components/ui/button"; import { Separator } from "@/components/ui/separator"; import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"; +import { Badge } from "@/components/ui/badge"; +import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card"; import { useForm } from "react-hook-form"; // Define the Connector type @@ -31,7 +34,7 @@ interface Connector { title: string; description: string; icon: React.ReactNode; - status: "available" | "coming-soon" | "connected"; // Added connected status example + status: "available" | "coming-soon" | "connected"; } interface ConnectorCategory { @@ -47,12 +50,11 @@ const connectorCategories: ConnectorCategory[] = [ title: "Search Engines", connectors: [ { - id: "web-search", - title: "Web Search", - description: "Enable web search capabilities for broader context.", + id: "tavily-api", + title: "Tavily API", + description: "Search the web using the Tavily API", icon: , - status: "available", // Example status - // Potentially add config form here if needed (e.g., choosing provider) + status: "available", }, // Add other search engine connectors like Tavily, Serper if they have UI config ], @@ -94,10 +96,9 @@ const connectorCategories: ConnectorCategory[] = [ description: "Connect to your Notion workspace to access pages and databases.", icon: , status: "available", - // No form here, assumes it links to its own page }, { - id: "github-connector", // Keep the id simple + id: "github-connector", title: "GitHub", description: "Connect a GitHub PAT to index code and docs from accessible repositories.", icon: , @@ -127,6 +128,44 @@ const connectorCategories: ConnectorCategory[] = [ }, ]; +// 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 = { + 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 params = useParams(); const searchSpaceId = params.search_space_id as string; @@ -141,85 +180,142 @@ export default function ConnectorsPage() { }; return ( -
+
-

Connect Your Tools

-

+

+ Connect Your Tools +

+

Integrate with your favorite services to enhance your research capabilities.

-
+ {connectorCategories.map((category) => ( - toggleCategory(category.id)} - className="space-y-2" + variants={fadeIn} + className="rounded-lg border bg-card text-card-foreground shadow-sm" > -
-

{category.title}

- - {/* Replace with your preferred expand/collapse icon/button */} - - -
- -
- {category.connectors.map((connector) => ( -
-
-
-
- {connector.icon} -

- {connector.title} -

- {connector.status === "coming-soon" && ( - - Coming soon - - )} - {/* TODO: Add 'Connected' badge based on actual state */} -
-

- {connector.description} -

-
-
- {/* Always render Link button if available */} - {connector.status === 'available' && ( -
- - - -
- )} - {connector.status === 'coming-soon' && ( -
- -
- )} - {/* TODO: Add logic for 'connected' status */} -
- ))} + toggleCategory(category.id)} + className="w-full" + > +
+

{category.title}

+ + +
- - - + + + + + {category.connectors.map((connector) => ( + + + +
+ + {connector.icon} + +
+
+
+

{connector.title}

+ {connector.status === "coming-soon" && ( + + Coming soon + + )} + {connector.status === "connected" && ( + + Connected + + )} +
+
+ + + +

+ {connector.description} +

+ + + + {connector.status === 'available' && ( + + + + )} + {connector.status === 'coming-soon' && ( + + )} + {connector.status === 'connected' && ( + + )} + + + + ))} + + + + + ))} -
+
); } diff --git a/surfsense_web/components/ModernHeroWithGradients.tsx b/surfsense_web/components/ModernHeroWithGradients.tsx index c0bde3f..bd10a50 100644 --- a/surfsense_web/components/ModernHeroWithGradients.tsx +++ b/surfsense_web/components/ModernHeroWithGradients.tsx @@ -36,7 +36,7 @@ export function ModernHeroWithGradients() {

- A Customizable AI Research Agent just like NotebookLM or Perplexity, but connected to external sources such as search engines (Tavily), Slack, Notion, and more. + A Customizable AI Research Agent just like NotebookLM or Perplexity, but connected to external sources such as search engines (Tavily), Slack, Notion, YouTube, GitHub and more.

{ const iconProps = { className: "h-4 w-4" }; switch(connectorType) { + case 'GITHUB_CONNECTOR': + return ; case 'YOUTUBE_VIDEO': return ; case 'CRAWLED_URL':