Filter out zero tool toolkits

This commit is contained in:
akhisud3195 2025-08-15 12:59:32 +08:00
parent 2ba639a74c
commit 9304c1e5fd
2 changed files with 27 additions and 17 deletions

View file

@ -23,6 +23,7 @@ interface SelectComposioToolkitProps {
onSelectToolkit: (toolkit: ToolkitType) => void; onSelectToolkit: (toolkit: ToolkitType) => void;
initialToolkitSlug?: string | null; initialToolkitSlug?: string | null;
filterByTriggers?: boolean; // New prop to filter toolkits that have triggers filterByTriggers?: boolean; // New prop to filter toolkits that have triggers
filterByTools?: boolean; // New prop to filter toolkits that have tools
} }
export function SelectComposioToolkit({ export function SelectComposioToolkit({
@ -30,7 +31,8 @@ export function SelectComposioToolkit({
tools, tools,
onSelectToolkit, onSelectToolkit,
initialToolkitSlug, initialToolkitSlug,
filterByTriggers = false filterByTriggers = false,
filterByTools = false
}: SelectComposioToolkitProps) { }: SelectComposioToolkitProps) {
const [toolkits, setToolkits] = useState<ToolkitType[]>([]); const [toolkits, setToolkits] = useState<ToolkitType[]>([]);
const [projectConfig, setProjectConfig] = useState<ProjectType | null>(null); const [projectConfig, setProjectConfig] = useState<ProjectType | null>(null);
@ -61,20 +63,13 @@ export function SelectComposioToolkit({
cursor = response.next_cursor; cursor = response.next_cursor;
} while (cursor !== null); } while (cursor !== null);
// // Only show those toolkits that // Filter toolkits based on the filter props
// // - 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
let finalToolkits = allToolkits; let finalToolkits = allToolkits;
if (filterByTriggers) { 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); setToolkits(finalToolkits);
@ -86,7 +81,7 @@ export function SelectComposioToolkit({
} finally { } finally {
setLoading(false); setLoading(false);
} }
}, [projectId, filterByTriggers]); }, [projectId, filterByTriggers, filterByTools]);
const handleSelectToolkit = useCallback((toolkit: ToolkitType) => { const handleSelectToolkit = useCallback((toolkit: ToolkitType) => {
onSelectToolkit(toolkit); onSelectToolkit(toolkit);
@ -134,7 +129,12 @@ export function SelectComposioToolkit({
<div className="text-center py-8"> <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> <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"> <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> </p>
</div> </div>
); );
@ -171,7 +171,13 @@ export function SelectComposioToolkit({
</div> </div>
<input <input
type="text" 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} value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} 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 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"> <div className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
{filteredToolkits.length} {filteredToolkits.length === 1 ? 'toolkit' : 'toolkits'} {filteredToolkits.length} {filteredToolkits.length === 1 ? 'toolkit' : 'toolkits'}
{filterByTriggers && ' with triggers'} {filterByTriggers && ' with triggers'}
{filterByTools && ' with tools'}
</div> </div>
<div className="h-4 w-px bg-gray-200 dark:bg-gray-700" /> <div className="h-4 w-px bg-gray-200 dark:bg-gray-700" />
</div> </div>
@ -228,6 +235,8 @@ export function SelectComposioToolkit({
? 'No toolkits found matching your search.' ? 'No toolkits found matching your search.'
: filterByTriggers : filterByTriggers
? 'No toolkits with triggers available.' ? 'No toolkits with triggers available.'
: filterByTools
? 'No toolkits with tools available.'
: 'No toolkits available.' : 'No toolkits available.'
} }
</p> </p>

View file

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