Filter out zero tool toolkits

apps/rowboat/app/projects/[projectId]/tools/components/SelectComposioToolkit.tsx

@@ -23,6 +23,7 @@ interface SelectComposioToolkitProps {
   onSelectToolkit: (toolkit: ToolkitType) => void;
   initialToolkitSlug?: string | null;
   filterByTriggers?: boolean; // New prop to filter toolkits that have triggers
+  filterByTools?: boolean; // New prop to filter toolkits that have tools
 }
 
 export function SelectComposioToolkit({
@@ -30,7 +31,8 @@ export function SelectComposioToolkit({
   tools,
   onSelectToolkit,
   initialToolkitSlug,
-  filterByTriggers = false
+  filterByTriggers = false,
+  filterByTools = false
 }: SelectComposioToolkitProps) {
   const [toolkits, setToolkits] = useState<ToolkitType[]>([]);
   const [projectConfig, setProjectConfig] = useState<ProjectType | null>(null);
@@ -61,20 +63,13 @@ export function SelectComposioToolkit({
         cursor = response.next_cursor;
       } while (cursor !== null);
       
-      // // Only show those toolkits that
-      // // - either do not require authentication, OR
-      // // - have oauth2 managed by Composio
-      // const filteredToolkits = allToolkits.filter(toolkit => {
-      //   const noAuth = toolkit.no_auth;
-      //   const hasOAuth2 = toolkit.auth_schemes.includes('OAUTH2');
-      //   const hasComposioManagedOAuth2 = toolkit.composio_managed_auth_schemes.includes('OAUTH2');
-      //   return noAuth || hasOAuth2;
-      // });
-      
-      // Filter toolkits that have triggers if filterByTriggers is true
+      // Filter toolkits based on the filter props
       let finalToolkits = allToolkits;
       if (filterByTriggers) {
-        finalToolkits = allToolkits.filter(toolkit => toolkit.meta.triggers_count > 0);
+        finalToolkits = finalToolkits.filter(toolkit => toolkit.meta.triggers_count > 0);
+      }
+      if (filterByTools) {
+        finalToolkits = finalToolkits.filter(toolkit => toolkit.meta.tools_count > 0);
       }
       
       setToolkits(finalToolkits);
@@ -86,7 +81,7 @@ export function SelectComposioToolkit({
     } finally {
       setLoading(false);
     }
-  }, [projectId, filterByTriggers]);
+  }, [projectId, filterByTriggers, filterByTools]);
 
   const handleSelectToolkit = useCallback((toolkit: ToolkitType) => {
     onSelectToolkit(toolkit);
@@ -134,7 +129,12 @@ export function SelectComposioToolkit({
       <div className="text-center py-8">
         <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-800 dark:border-gray-200 mx-auto"></div>
         <p className="mt-4 text-sm text-gray-600 dark:text-gray-400">
-          {filterByTriggers ? 'Loading Composio toolkits with triggers...' : 'Loading Composio toolkits...'}
+          {filterByTriggers 
+            ? 'Loading Composio toolkits with triggers...' 
+            : filterByTools 
+              ? 'Loading Composio toolkits with tools...'
+              : 'Loading Composio toolkits...'
+          }
         </p>
       </div>
     );
@@ -171,7 +171,13 @@ export function SelectComposioToolkit({
               </div>
               <input
                 type="text"
-                placeholder={filterByTriggers ? "Search toolkits with triggers..." : "Search toolkits..."}
+                placeholder={
+                  filterByTriggers 
+                    ? "Search toolkits with triggers..." 
+                    : filterByTools 
+                      ? "Search toolkits with tools..."
+                      : "Search toolkits..."
+                }
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
                 className="w-full pl-8 pr-4 py-2 text-sm border border-gray-200 dark:border-gray-700 rounded-md 
@@ -184,6 +190,7 @@ export function SelectComposioToolkit({
             <div className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
               {filteredToolkits.length} {filteredToolkits.length === 1 ? 'toolkit' : 'toolkits'}
               {filterByTriggers && ' with triggers'}
+              {filterByTools && ' with tools'}
             </div>
             <div className="h-4 w-px bg-gray-200 dark:bg-gray-700" />
           </div>
@@ -228,7 +235,9 @@ export function SelectComposioToolkit({
               ? 'No toolkits found matching your search.' 
               : filterByTriggers 
                 ? 'No toolkits with triggers available.' 
-                : 'No toolkits available.'
+                : filterByTools
+                  ? 'No toolkits with tools available.'
+                  : 'No toolkits available.'
             }
           </p>
         </div>

apps/rowboat/app/projects/[projectId]/tools/components/ToolsConfig.tsx

@@ -73,6 +73,7 @@ export function ToolsConfig({
                 tools={tools}
                 onSelectToolkit={handleSelectToolkit}
                 initialToolkitSlug={initialToolkitSlug}
+                filterByTools={true}
               />
             </div>
           </Tab>