fix: remove toolkit view

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<string>(
 		(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 ? (
 					<YouTubeCrawlerView searchSpaceId={searchSpaceId} onBack={handleBackFromYouTube} />
-				) : viewingComposio && searchSpaceId ? (
-					<ComposioToolkitView
-						searchSpaceId={searchSpaceId}
-						connectedToolkits={
-							(connectors || [])
-								.filter((c: SearchSourceConnector) => 
-									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 ? (
 					<ConnectorAccountsListView
 						connectorType="MCP_CONNECTOR"
@@ -343,7 +312,6 @@ export const ConnectorIndicator: FC = () => {
 											onCreateYouTubeCrawler={handleCreateYouTubeCrawler}
 											onManage={handleStartEdit}
 											onViewAccountsList={handleViewAccountsList}
-											onOpenComposio={handleOpenComposio}
 										/>
 									</TabsContent>
 

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<string | null>(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,
 	};
 };

surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx

@@ -82,7 +82,7 @@ export const AllConnectorsTab: FC<AllConnectorsTabProps> = ({
 			{filteredComposio.length > 0 && (
 				<section>
 					<div className="flex items-center gap-2 mb-4">
-						<h3 className="text-sm font-semibold text-muted-foreground">Managed OAuth</h3>
+						<h3 className="text-sm font-semibold text-muted-foreground">Managed OAuth (Composio)</h3>
 					</div>
 					<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
 						{filteredComposio.map((connector) => {

surfsense_web/components/assistant-ui/connector-popup/views/composio-toolkit-view.tsx

@@ -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 <Image src="/connectors/google-drive.svg" alt="Google Drive" width={20} height={20} className={iconClass} />;
-		case "gmail":
-			return <Image src="/connectors/google-gmail.svg" alt="Gmail" width={20} height={20} className={iconClass} />;
-		case "googlecalendar":
-			return <Image src="/connectors/google-calendar.svg" alt="Google Calendar" width={20} height={20} className={iconClass} />;
-		case "slack":
-			return <Image src="/connectors/slack.svg" alt="Slack" width={20} height={20} className={iconClass} />;
-		case "notion":
-			return <Image src="/connectors/notion.svg" alt="Notion" width={20} height={20} className={iconClass} />;
-		case "github":
-			return <Image src="/connectors/github.svg" alt="GitHub" width={20} height={20} className={iconClass} />;
-		default:
-			return <Zap className={iconClass} />;
-	}
-};
-
-export const ComposioToolkitView: FC<ComposioToolkitViewProps> = ({
-	searchSpaceId,
-	connectedToolkits,
-	onBack,
-	onConnectToolkit,
-	isConnecting,
-	connectingToolkitId,
-}) => {
-	const [hoveredToolkit, setHoveredToolkit] = useState<string | null>(null);
-
-	// Separate indexable and non-indexable toolkits
-	const indexableToolkits = COMPOSIO_TOOLKITS.filter((t) => t.isIndexable);
-	const nonIndexableToolkits = COMPOSIO_TOOLKITS.filter((t) => !t.isIndexable);
-
-	return (
-		<div className="flex flex-col h-full">
-			{/* Header */}
-			<div className="px-6 sm:px-12 pt-8 sm:pt-10 pb-4 sm:pb-6 border-b border-border/50 bg-muted">
-				{/* Back button */}
-				<button
-					type="button"
-					onClick={onBack}
-					className="flex items-center gap-2 text-xs sm:text-sm text-muted-foreground hover:text-foreground mb-6 w-fit transition-colors"
-				>
-					<ArrowLeft className="size-4" />
-					Back to connectors
-				</button>
-
-				{/* Header content */}
-				<div className="flex flex-col sm:flex-row items-start sm:items-center gap-4">
-					<div className="flex gap-4 flex-1 w-full sm:w-auto">
-						<div className="flex h-14 w-14 items-center justify-center rounded-xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 border border-violet-500/30 shrink-0">
-							<Image
-								src="/connectors/composio.svg"
-								alt="Composio"
-								width={28}
-								height={28}
-								className="size-7"
-							/>
-						</div>
-						<div className="flex-1 min-w-0">
-							<h2 className="text-xl sm:text-2xl font-semibold tracking-tight">
-								Composio
-							</h2>
-							<p className="text-xs sm:text-sm text-muted-foreground mt-1">
-								Connect 100+ apps with managed OAuth - no verification needed
-							</p>
-						</div>
-					</div>
-					<a
-						href="https://composio.dev"
-						target="_blank"
-						rel="noopener noreferrer"
-						className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
-					>
-						<span>Powered by Composio</span>
-						<ExternalLink className="size-3" />
-					</a>
-				</div>
-			</div>
-
-			{/* Content */}
-			<div className="flex-1 overflow-y-auto px-6 sm:px-12 py-6 sm:py-8">
-				{/* Indexable Toolkits (Google Services) */}
-				<section className="mb-8">
-					<div className="flex items-center gap-2 mb-4">
-						<h3 className="text-sm font-semibold text-foreground">Google Services</h3>
-						<Badge variant="secondary" className="text-[10px] px-1.5 py-0 h-5 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20">
-							Indexable
-						</Badge>
-					</div>
-					<p className="text-xs text-muted-foreground mb-4">
-						Connect Google services via Composio&apos;s verified OAuth app. Your data will be indexed and searchable.
-					</p>
-					<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
-						{indexableToolkits.map((toolkit) => {
-							const isConnected = connectedToolkits.includes(toolkit.id);
-							const isThisConnecting = connectingToolkitId === toolkit.id;
-
-							return (
-								<div
-									key={toolkit.id}
-									onMouseEnter={() => 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"
-									)}
-								>
-									<div className="flex items-start justify-between mb-3">
-										<div
-											className={cn(
-												"flex h-10 w-10 items-center justify-center rounded-lg border transition-colors",
-												isConnected
-													? "bg-emerald-500/10 border-emerald-500/20"
-													: "bg-muted border-border group-hover:border-violet-500/20 group-hover:bg-violet-500/10"
-											)}
-										>
-											{getToolkitIcon(toolkit.id, "size-5")}
-										</div>
-										{isConnected && (
-											<Badge variant="secondary" className="text-[10px] px-1.5 py-0 h-5 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20">
-												<Check className="size-3 mr-0.5" />
-												Connected
-											</Badge>
-										)}
-									</div>
-									<h4 className="text-sm font-medium mb-1">{toolkit.name}</h4>
-									<p className="text-xs text-muted-foreground mb-4 flex-1">
-										{toolkit.description}
-									</p>
-									<Button
-										size="sm"
-										variant={isConnected ? "secondary" : "default"}
-										className={cn(
-											"w-full h-8 text-xs font-medium",
-											!isConnected && "bg-violet-600 hover:bg-violet-700 text-white"
-										)}
-										onClick={() => onConnectToolkit(toolkit.id)}
-										disabled={isConnecting || isConnected}
-									>
-										{isThisConnecting ? (
-											<>
-												<Loader2 className="size-3 mr-1.5 animate-spin" />
-												Connecting...
-											</>
-										) : isConnected ? (
-											"Connected"
-										) : (
-											"Connect"
-										)}
-									</Button>
-								</div>
-							);
-						})}
-					</div>
-				</section>
-
-				{/* Non-Indexable Toolkits (Coming Soon) */}
-				<section>
-					<div className="flex items-center gap-2 mb-4">
-						<h3 className="text-sm font-semibold text-foreground">More Integrations</h3>
-						<Badge variant="secondary" className="text-[10px] px-1.5 py-0 h-5 bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-500/20">
-							Coming Soon
-						</Badge>
-					</div>
-					<p className="text-xs text-muted-foreground mb-4">
-						Connect these services for future indexing support. Currently available for connection only.
-					</p>
-					<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 opacity-60">
-						{nonIndexableToolkits.map((toolkit) => (
-							<div
-								key={toolkit.id}
-								className="group relative flex flex-col p-4 rounded-xl border border-border bg-card/50"
-							>
-								<div className="flex items-start justify-between mb-3">
-									<div className="flex h-10 w-10 items-center justify-center rounded-lg border bg-muted border-border">
-										{getToolkitIcon(toolkit.id, "size-5")}
-									</div>
-									<Badge variant="outline" className="text-[10px] px-1.5 py-0 h-5">
-										Soon
-									</Badge>
-								</div>
-								<h4 className="text-sm font-medium mb-1">{toolkit.name}</h4>
-								<p className="text-xs text-muted-foreground mb-4 flex-1">
-									{toolkit.description}
-								</p>
-								<Button
-									size="sm"
-									variant="outline"
-									className="w-full h-8 text-xs font-medium"
-									disabled
-								>
-									Coming Soon
-								</Button>
-							</div>
-						))}
-					</div>
-				</section>
-
-				{/* Info footer */}
-				<div className="mt-8 p-4 rounded-xl bg-muted/50 border border-border/50">
-					<div className="flex items-start gap-3">
-						<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-violet-500/10 border border-violet-500/20 shrink-0">
-							<Zap className="size-4 text-violet-500" />
-						</div>
-						<div>
-							<h4 className="text-sm font-medium mb-1">Why use Composio?</h4>
-							<p className="text-xs text-muted-foreground leading-relaxed">
-								Composio provides pre-verified OAuth apps, so you don&apos;t need to wait for Google app verification.
-								Your data is securely processed through Composio&apos;s managed authentication.
-							</p>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	);
-};