diff --git a/surfsense_web/components/assistant-ui/connector-popup.tsx b/surfsense_web/components/assistant-ui/connector-popup.tsx index 228b12836..a1108f7c8 100644 --- a/surfsense_web/components/assistant-ui/connector-popup.tsx +++ b/surfsense_web/components/assistant-ui/connector-popup.tsx @@ -21,7 +21,6 @@ import { useConnectorDialog } from "./connector-popup/hooks/use-connector-dialog import { useIndexingConnectors } from "./connector-popup/hooks/use-indexing-connectors"; import { ActiveConnectorsTab } from "./connector-popup/tabs/active-connectors-tab"; import { AllConnectorsTab } from "./connector-popup/tabs/all-connectors-tab"; -import { ComposioToolkitView } from "./connector-popup/views/composio-toolkit-view"; import { ConnectorAccountsListView } from "./connector-popup/views/connector-accounts-list-view"; import { YouTubeCrawlerView } from "./connector-popup/views/youtube-crawler-view"; @@ -88,12 +87,6 @@ export const ConnectorIndicator: FC = () => { setConnectorConfig, setIndexingConnectorConfig, setConnectorName, - // Composio - viewingComposio, - connectingComposioToolkit, - handleOpenComposio, - handleBackFromComposio, - handleConnectComposioToolkit, } = useConnectorDialog(); // Fetch connectors using Electric SQL + PGlite for real-time updates @@ -142,7 +135,7 @@ export const ConnectorIndicator: FC = () => { // Check which connectors are already connected // Using Electric SQL + PGlite for real-time connector updates - const connectedTypes = new Set( + const connectedTypes = new Set( (connectors || []).map((c: SearchSourceConnector) => c.connector_type) ); @@ -183,30 +176,6 @@ export const ConnectorIndicator: FC = () => { {/* YouTube Crawler View - shown when adding YouTube videos */} {isYouTubeView && searchSpaceId ? ( - ) : viewingComposio && searchSpaceId ? ( - - c.connector_type === "COMPOSIO_GOOGLE_DRIVE_CONNECTOR" || - c.connector_type === "COMPOSIO_GMAIL_CONNECTOR" || - c.connector_type === "COMPOSIO_GOOGLE_CALENDAR_CONNECTOR" - ) - .map((c: SearchSourceConnector) => { - // Map connector type back to toolkit_id - if (c.connector_type === "COMPOSIO_GOOGLE_DRIVE_CONNECTOR") return "googledrive"; - if (c.connector_type === "COMPOSIO_GMAIL_CONNECTOR") return "gmail"; - if (c.connector_type === "COMPOSIO_GOOGLE_CALENDAR_CONNECTOR") return "googlecalendar"; - return c.config?.toolkit_id as string; - }) - .filter(Boolean) - } - onBack={handleBackFromComposio} - onConnectToolkit={handleConnectComposioToolkit} - isConnecting={connectingComposioToolkit !== null} - connectingToolkitId={connectingComposioToolkit} - /> ) : viewingMCPList ? ( { onCreateYouTubeCrawler={handleCreateYouTubeCrawler} onManage={handleStartEdit} onViewAccountsList={handleViewAccountsList} - onOpenComposio={handleOpenComposio} /> diff --git a/surfsense_web/components/assistant-ui/connector-popup/hooks/use-connector-dialog.ts b/surfsense_web/components/assistant-ui/connector-popup/hooks/use-connector-dialog.ts index 4a177ac36..3ea1aab48 100644 --- a/surfsense_web/components/assistant-ui/connector-popup/hooks/use-connector-dialog.ts +++ b/surfsense_web/components/assistant-ui/connector-popup/hooks/use-connector-dialog.ts @@ -83,9 +83,6 @@ export const useConnectorDialog = () => { // MCP list view state (for managing multiple MCP connectors) const [viewingMCPList, setViewingMCPList] = useState(false); - // Composio toolkit view state - const [viewingComposio, setViewingComposio] = useState(false); - const [connectingComposioToolkit, setConnectingComposioToolkit] = useState(null); // Track if we came from accounts list when entering edit mode const [cameFromAccountsList, setCameFromAccountsList] = useState<{ @@ -159,17 +156,6 @@ export const useConnectorDialog = () => { setViewingMCPList(true); } - // Clear Composio view if view is not "composio" anymore - if (params.view !== "composio" && viewingComposio) { - setViewingComposio(false); - setConnectingComposioToolkit(null); - } - - // Handle Composio view - if (params.view === "composio" && !viewingComposio) { - setViewingComposio(true); - } - // Handle connect view if (params.view === "connect" && params.connectorType && !connectingConnectorType) { setConnectingConnectorType(params.connectorType); @@ -303,7 +289,6 @@ export const useConnectorDialog = () => { connectingConnectorType, viewingAccountsType, viewingMCPList, - viewingComposio, ]); // Detect OAuth success / Failure and transition to config view @@ -872,63 +857,6 @@ export const useConnectorDialog = () => { router.replace(url.pathname + url.search, { scroll: false }); }, [router]); - // Handle opening Composio toolkit view - const handleOpenComposio = useCallback(() => { - if (!searchSpaceId) return; - - setViewingComposio(true); - - // Update URL to show Composio view - const url = new URL(window.location.href); - url.searchParams.set("modal", "connectors"); - url.searchParams.set("view", "composio"); - router.replace(url.pathname + url.search, { scroll: false }); - }, [searchSpaceId, router]); - - // Handle going back from Composio view - const handleBackFromComposio = useCallback(() => { - setViewingComposio(false); - setConnectingComposioToolkit(null); - const url = new URL(window.location.href); - url.searchParams.set("modal", "connectors"); - url.searchParams.delete("view"); - router.replace(url.pathname + url.search, { scroll: false }); - }, [router]); - - // Handle connecting a Composio toolkit - const handleConnectComposioToolkit = useCallback( - async (toolkitId: string) => { - if (!searchSpaceId) return; - - setConnectingComposioToolkit(toolkitId); - - try { - const response = await authenticatedFetch( - `${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/auth/composio/connector/add?space_id=${searchSpaceId}&toolkit_id=${toolkitId}`, - { method: "GET" } - ); - - if (!response.ok) { - throw new Error(`Failed to initiate Composio OAuth for ${toolkitId}`); - } - - const data = await response.json(); - - if (data.auth_url) { - // Redirect to Composio OAuth - window.location.href = data.auth_url; - } else { - throw new Error("No authorization URL received from Composio"); - } - } catch (error) { - console.error("Error connecting Composio toolkit:", error); - toast.error(`Failed to connect ${toolkitId}. Please try again.`); - setConnectingComposioToolkit(null); - } - }, - [searchSpaceId] - ); - // Handle starting indexing const handleStartIndexing = useCallback( async (refreshConnectors: () => void) => { @@ -1589,8 +1517,6 @@ export const useConnectorDialog = () => { allConnectors, viewingAccountsType, viewingMCPList, - viewingComposio, - connectingComposioToolkit, // Setters setSearchQuery, @@ -1626,10 +1552,5 @@ export const useConnectorDialog = () => { connectorConfig, setConnectorConfig, setIndexingConnectorConfig, - - // Composio - handleOpenComposio, - handleBackFromComposio, - handleConnectComposioToolkit, }; }; diff --git a/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx b/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx index 4a0680200..ffe879d5d 100644 --- a/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx +++ b/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx @@ -82,7 +82,7 @@ export const AllConnectorsTab: FC = ({ {filteredComposio.length > 0 && (
-

Managed OAuth

+

Managed OAuth (Composio)

{filteredComposio.map((connector) => { diff --git a/surfsense_web/components/assistant-ui/connector-popup/views/composio-toolkit-view.tsx b/surfsense_web/components/assistant-ui/connector-popup/views/composio-toolkit-view.tsx deleted file mode 100644 index 456835597..000000000 --- a/surfsense_web/components/assistant-ui/connector-popup/views/composio-toolkit-view.tsx +++ /dev/null @@ -1,301 +0,0 @@ -"use client"; - -import { - ArrowLeft, - Calendar, - Check, - ExternalLink, - Github, - Loader2, - Mail, - HardDrive, - MessageSquare, - FileText, - Zap, -} from "lucide-react"; -import Image from "next/image"; -import type { FC } from "react"; -import { useState } from "react"; -import { Badge } from "@/components/ui/badge"; -import { Button } from "@/components/ui/button"; -import { cn } from "@/lib/utils"; - -interface ComposioToolkit { - id: string; - name: string; - description: string; - isIndexable: boolean; -} - -interface ComposioToolkitViewProps { - searchSpaceId: string; - connectedToolkits: string[]; - onBack: () => void; - onConnectToolkit: (toolkitId: string) => void; - isConnecting: boolean; - connectingToolkitId: string | null; -} - -// Available Composio toolkits -const COMPOSIO_TOOLKITS: ComposioToolkit[] = [ - { - id: "googledrive", - name: "Google Drive", - description: "Search your Drive files and documents", - isIndexable: true, - }, - { - id: "gmail", - name: "Gmail", - description: "Search through your emails", - isIndexable: true, - }, - { - id: "googlecalendar", - name: "Google Calendar", - description: "Search through your events", - isIndexable: true, - }, - { - id: "slack", - name: "Slack", - description: "Search Slack messages", - isIndexable: false, - }, - { - id: "notion", - name: "Notion", - description: "Search Notion pages", - isIndexable: false, - }, - { - id: "github", - name: "GitHub", - description: "Search repositories and code", - isIndexable: false, - }, -]; - -// Get icon for toolkit -const getToolkitIcon = (toolkitId: string, className?: string) => { - const iconClass = className || "size-5"; - - switch (toolkitId) { - case "googledrive": - return Google Drive; - case "gmail": - return Gmail; - case "googlecalendar": - return Google Calendar; - case "slack": - return Slack; - case "notion": - return Notion; - case "github": - return GitHub; - default: - return ; - } -}; - -export const ComposioToolkitView: FC = ({ - searchSpaceId, - connectedToolkits, - onBack, - onConnectToolkit, - isConnecting, - connectingToolkitId, -}) => { - const [hoveredToolkit, setHoveredToolkit] = useState(null); - - // Separate indexable and non-indexable toolkits - const indexableToolkits = COMPOSIO_TOOLKITS.filter((t) => t.isIndexable); - const nonIndexableToolkits = COMPOSIO_TOOLKITS.filter((t) => !t.isIndexable); - - return ( -
- {/* Header */} -
- {/* Back button */} - - - {/* Header content */} -
-
-
- Composio -
-
-

- Composio -

-

- Connect 100+ apps with managed OAuth - no verification needed -

-
-
- - Powered by Composio - - -
-
- - {/* Content */} -
- {/* Indexable Toolkits (Google Services) */} -
-
-

Google Services

- - Indexable - -
-

- Connect Google services via Composio's verified OAuth app. Your data will be indexed and searchable. -

-
- {indexableToolkits.map((toolkit) => { - const isConnected = connectedToolkits.includes(toolkit.id); - const isThisConnecting = connectingToolkitId === toolkit.id; - - return ( -
setHoveredToolkit(toolkit.id)} - onMouseLeave={() => setHoveredToolkit(null)} - className={cn( - "group relative flex flex-col p-4 rounded-xl border transition-all duration-200", - isConnected - ? "border-emerald-500/30 bg-emerald-500/5" - : "border-border bg-card hover:border-violet-500/30 hover:bg-violet-500/5" - )} - > -
-
- {getToolkitIcon(toolkit.id, "size-5")} -
- {isConnected && ( - - - Connected - - )} -
-

{toolkit.name}

-

- {toolkit.description} -

- -
- ); - })} -
-
- - {/* Non-Indexable Toolkits (Coming Soon) */} -
-
-

More Integrations

- - Coming Soon - -
-

- Connect these services for future indexing support. Currently available for connection only. -

-
- {nonIndexableToolkits.map((toolkit) => ( -
-
-
- {getToolkitIcon(toolkit.id, "size-5")} -
- - Soon - -
-

{toolkit.name}

-

- {toolkit.description} -

- -
- ))} -
-
- - {/* Info footer */} -
-
-
- -
-
-

Why use Composio?

-

- Composio provides pre-verified OAuth apps, so you don't need to wait for Google app verification. - Your data is securely processed through Composio's managed authentication. -

-
-
-
-
-
- ); -};