feat: enhance Composio connector naming logic and improve UI focus

- Updated the Composio connector naming logic to dynamically generate user-friendly names based on existing connectors.
- Introduced new utility functions for counting connectors and retrieving base names for specific connector types.
- Enhanced the UI components to improve accessibility and focus management, ensuring a better user experience when interacting with connector dialogs.

surfsense_backend/app/routes/composio_routes.py

@@ -35,7 +35,10 @@ from app.services.composio_service import (
     ComposioService,
 )
 from app.users import current_active_user
-from app.utils.connector_naming import generate_unique_connector_name
+from app.utils.connector_naming import (
+    count_connectors_of_type,
+    get_base_name_for_type,
+)
 from app.utils.oauth_security import OAuthStateManager
 
 # Note: We no longer use check_duplicate_connector for Composio connectors because
@@ -343,17 +346,19 @@ async def composio_callback(
             )
 
         try:
-            # Generate a unique, user-friendly connector name
-            # Pass just toolkit_name (without "(Composio)") to avoid redundancy
-            base_name = await generate_unique_connector_name(
-                session,
-                connector_type,
-                space_id,
-                user_id,
-                toolkit_name,
+            # Count existing connectors of this type to determine the number
+            count = await count_connectors_of_type(
+                session, connector_type, space_id, user_id
             )
-            # Append "(Composio)" suffix for identification
-            connector_name = f"{base_name} (Composio)"
+            
+            # Generate base name (e.g., "Gmail", "Google Drive")
+            base_name = get_base_name_for_type(connector_type)
+            
+            # Format: "Gmail (Composio) 1", "Gmail (Composio) 2", etc.
+            if count == 0:
+                connector_name = f"{base_name} (Composio) 1"
+            else:
+                connector_name = f"{base_name} (Composio) {count + 1}"
 
             db_connector = SearchSourceConnector(
                 name=connector_name,

surfsense_backend/app/utils/connector_naming.py

@@ -28,6 +28,9 @@ BASE_NAME_FOR_TYPE = {
     SearchSourceConnectorType.CONFLUENCE_CONNECTOR: "Confluence",
     SearchSourceConnectorType.AIRTABLE_CONNECTOR: "Airtable",
     SearchSourceConnectorType.MCP_CONNECTOR: "Model Context Protocol (MCP)",
+    SearchSourceConnectorType.COMPOSIO_GMAIL_CONNECTOR: "Gmail",
+    SearchSourceConnectorType.COMPOSIO_GOOGLE_DRIVE_CONNECTOR: "Google Drive",
+    SearchSourceConnectorType.COMPOSIO_GOOGLE_CALENDAR_CONNECTOR: "Google Calendar",
 }
 
 

surfsense_web/components/assistant-ui/connector-popup.tsx

@@ -184,7 +184,7 @@ export const ConnectorIndicator: FC = () => {
 				)}
 			</TooltipIconButton>
 
-			<DialogContent className="max-w-3xl w-[95vw] sm:w-full h-[75vh] sm:h-[85vh] flex flex-col p-0 gap-0 overflow-hidden border border-border bg-muted text-foreground [&>button]:right-4 sm:[&>button]:right-12 [&>button]:top-6 sm:[&>button]:top-10 [&>button]:opacity-80 hover:[&>button]:opacity-100 [&>button_svg]:size-5">
+			<DialogContent className="max-w-3xl w-[95vw] sm:w-full h-[75vh] sm:h-[85vh] flex flex-col p-0 gap-0 overflow-hidden border border-border bg-muted text-foreground focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 [&>button]:right-4 sm:[&>button]:right-12 [&>button]:top-6 sm:[&>button]:top-10 [&>button]:opacity-80 hover:[&>button]:opacity-100 [&>button_svg]:size-5">
 				<DialogTitle className="sr-only">Manage Connectors</DialogTitle>
 				{/* YouTube Crawler View - shown when adding YouTube videos */}
 				{isYouTubeView && searchSpaceId ? (

surfsense_web/components/ui/dialog.tsx

@@ -38,7 +38,7 @@ const DialogContent = React.forwardRef<
 		<DialogPrimitive.Content
 			ref={ref}
 			className={cn(
-				"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-lg",
+				"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-lg focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0",
 				className
 			)}
 			{...props}