mirror of https://github.com/kortix-ai/suna.git
merge kortix agents with community
This commit is contained in:
parent
ebdddbb580
commit
14a86b753b
|
@ -119,12 +119,22 @@ export default function AgentsPage() {
|
|||
return params;
|
||||
}, [agentsPage, agentsSearchQuery, agentsSortBy, agentsSortOrder, agentsFilters]);
|
||||
|
||||
const marketplaceQueryParams = useMemo(() => ({
|
||||
limit: 20,
|
||||
offset: (marketplacePage - 1) * 20,
|
||||
search: marketplaceSearchQuery || undefined,
|
||||
tags: marketplaceSelectedTags.length > 0 ? marketplaceSelectedTags.join(',') : undefined,
|
||||
}), [marketplacePage, marketplaceSearchQuery, marketplaceSelectedTags]);
|
||||
const marketplaceQueryParams = useMemo(() => {
|
||||
const params: any = {
|
||||
limit: 20,
|
||||
offset: (marketplacePage - 1) * 20,
|
||||
search: marketplaceSearchQuery || undefined,
|
||||
tags: marketplaceSelectedTags.length > 0 ? marketplaceSelectedTags.join(',') : undefined,
|
||||
};
|
||||
|
||||
if (marketplaceFilter === 'kortix') {
|
||||
params.is_kortix_team = true;
|
||||
} else if (marketplaceFilter === 'community') {
|
||||
params.is_kortix_team = false;
|
||||
}
|
||||
|
||||
return params;
|
||||
}, [marketplacePage, marketplaceSearchQuery, marketplaceSelectedTags, marketplaceFilter]);
|
||||
|
||||
const { data: agentsResponse, isLoading: agentsLoading, error: agentsError, refetch: loadAgents } = useAgents(agentsQueryParams);
|
||||
const { data: marketplaceTemplates, isLoading: marketplaceLoading } = useMarketplaceTemplates(marketplaceQueryParams);
|
||||
|
@ -144,9 +154,8 @@ export default function AgentsPage() {
|
|||
const agents = agentsResponse?.agents || [];
|
||||
const agentsPagination = agentsResponse?.pagination;
|
||||
|
||||
const { kortixTeamItems, communityItems, mineItems } = useMemo(() => {
|
||||
const kortixItems: MarketplaceTemplate[] = [];
|
||||
const communityItems: MarketplaceTemplate[] = [];
|
||||
const { allMarketplaceItems, mineItems } = useMemo(() => {
|
||||
const allItems: MarketplaceTemplate[] = [];
|
||||
const mineItems: MarketplaceTemplate[] = [];
|
||||
|
||||
if (marketplaceTemplates) {
|
||||
|
@ -168,61 +177,20 @@ export default function AgentsPage() {
|
|||
metadata: template.metadata,
|
||||
};
|
||||
|
||||
const matchesSearch = !marketplaceSearchQuery.trim() || (() => {
|
||||
const searchLower = marketplaceSearchQuery.toLowerCase();
|
||||
return item.name.toLowerCase().includes(searchLower) ||
|
||||
item.description?.toLowerCase().includes(searchLower) ||
|
||||
item.tags.some(tag => tag.toLowerCase().includes(searchLower)) ||
|
||||
item.creator_name?.toLowerCase().includes(searchLower);
|
||||
})();
|
||||
|
||||
if (!matchesSearch) return;
|
||||
// Backend handles search filtering, so we just transform the data
|
||||
allItems.push(item);
|
||||
|
||||
if (user?.id === template.creator_id) {
|
||||
mineItems.push(item);
|
||||
}
|
||||
|
||||
if (template.is_kortix_team === true) {
|
||||
kortixItems.push(item);
|
||||
} else {
|
||||
communityItems.push(item);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const sortItems = (items: MarketplaceTemplate[]) =>
|
||||
items.sort((a, b) => {
|
||||
switch (marketplaceSortBy) {
|
||||
case 'newest':
|
||||
return new Date(b.marketplace_published_at || b.created_at).getTime() -
|
||||
new Date(a.marketplace_published_at || a.created_at).getTime();
|
||||
case 'popular':
|
||||
case 'most_downloaded':
|
||||
return b.download_count - a.download_count;
|
||||
case 'name':
|
||||
return a.name.localeCompare(b.name);
|
||||
default:
|
||||
return 0;
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
kortixTeamItems: sortItems(kortixItems),
|
||||
communityItems: sortItems(communityItems),
|
||||
mineItems: sortItems(mineItems)
|
||||
allMarketplaceItems: allItems,
|
||||
mineItems: mineItems
|
||||
};
|
||||
}, [marketplaceTemplates, marketplaceSortBy, user?.id, marketplaceSearchQuery]);
|
||||
|
||||
const allMarketplaceItems = useMemo(() => {
|
||||
if (marketplaceFilter === 'kortix') {
|
||||
return kortixTeamItems;
|
||||
} else if (marketplaceFilter === 'community') {
|
||||
return communityItems;
|
||||
} else if (marketplaceFilter === 'mine') {
|
||||
return mineItems;
|
||||
}
|
||||
return [...kortixTeamItems, ...communityItems];
|
||||
}, [kortixTeamItems, communityItems, mineItems, marketplaceFilter]);
|
||||
}, [marketplaceTemplates, user?.id]);
|
||||
|
||||
const handleTabChange = (newTab: string) => {
|
||||
const params = new URLSearchParams(searchParams.toString());
|
||||
|
@ -611,9 +579,7 @@ export default function AgentsPage() {
|
|||
marketplaceFilter={marketplaceFilter}
|
||||
setMarketplaceFilter={setMarketplaceFilter}
|
||||
marketplaceLoading={marketplaceLoading}
|
||||
allMarketplaceItems={allMarketplaceItems}
|
||||
kortixTeamItems={kortixTeamItems}
|
||||
communityItems={communityItems}
|
||||
allMarketplaceItems={marketplaceFilter === 'mine' ? mineItems : allMarketplaceItems}
|
||||
mineItems={mineItems}
|
||||
installingItemId={installingItemId}
|
||||
onInstallClick={handleInstallClick}
|
||||
|
|
|
@ -16,8 +16,6 @@ interface MarketplaceTabProps {
|
|||
setMarketplaceFilter: (value: 'all' | 'kortix' | 'community' | 'mine') => void;
|
||||
marketplaceLoading: boolean;
|
||||
allMarketplaceItems: MarketplaceTemplate[];
|
||||
kortixTeamItems: MarketplaceTemplate[];
|
||||
communityItems: MarketplaceTemplate[];
|
||||
mineItems: MarketplaceTemplate[];
|
||||
installingItemId: string | null;
|
||||
onInstallClick: (item: MarketplaceTemplate, e?: React.MouseEvent) => void;
|
||||
|
@ -34,8 +32,6 @@ export const MarketplaceTab = ({
|
|||
setMarketplaceFilter,
|
||||
marketplaceLoading,
|
||||
allMarketplaceItems,
|
||||
kortixTeamItems,
|
||||
communityItems,
|
||||
mineItems,
|
||||
installingItemId,
|
||||
onInstallClick,
|
||||
|
@ -101,55 +97,27 @@ export const MarketplaceTab = ({
|
|||
) : (
|
||||
<div className="space-y-12">
|
||||
{marketplaceFilter === 'all' ? (
|
||||
<>
|
||||
{kortixTeamItems.length > 0 && (
|
||||
<div className="space-y-6">
|
||||
<MarketplaceSectionHeader
|
||||
title="By team Kortix"
|
||||
subtitle="Official agents, maintained and supported"
|
||||
<div className="space-y-6">
|
||||
{/* <MarketplaceSectionHeader
|
||||
title="Popular Agents"
|
||||
subtitle="Sorted by popularity - most downloads first"
|
||||
/> */}
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
{allMarketplaceItems.map((item) => (
|
||||
<AgentCard
|
||||
key={item.id}
|
||||
mode="marketplace"
|
||||
data={item}
|
||||
styling={getItemStyling(item)}
|
||||
isActioning={installingItemId === item.id}
|
||||
onPrimaryAction={onInstallClick}
|
||||
onDeleteAction={onDeleteTemplate}
|
||||
onClick={() => handleAgentClick(item)}
|
||||
currentUserId={currentUserId}
|
||||
/>
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
{kortixTeamItems.map((item) => (
|
||||
<AgentCard
|
||||
key={item.id}
|
||||
mode="marketplace"
|
||||
data={item}
|
||||
styling={getItemStyling(item)}
|
||||
isActioning={installingItemId === item.id}
|
||||
onPrimaryAction={onInstallClick}
|
||||
onDeleteAction={onDeleteTemplate}
|
||||
onClick={() => handleAgentClick(item)}
|
||||
currentUserId={currentUserId}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{communityItems.length > 0 && (
|
||||
<div className="space-y-6">
|
||||
<MarketplaceSectionHeader
|
||||
title="From the community"
|
||||
subtitle="Agents created by our community"
|
||||
iconColor="bg-gradient-to-br from-green-500 to-green-600"
|
||||
/>
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
{communityItems.map((item) => (
|
||||
<AgentCard
|
||||
key={item.id}
|
||||
mode="marketplace"
|
||||
data={item}
|
||||
styling={getItemStyling(item)}
|
||||
isActioning={installingItemId === item.id}
|
||||
onPrimaryAction={onInstallClick}
|
||||
onDeleteAction={onDeleteTemplate}
|
||||
onClick={() => handleAgentClick(item)}
|
||||
currentUserId={currentUserId}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
{allMarketplaceItems.map((item) => (
|
||||
|
|
Loading…
Reference in New Issue