refactor: update marketplace components to use unified terminology and improve search functionality

This commit is contained in:
yessenia
2026-02-10 16:38:29 +08:00
parent 984992d0fd
commit b241122cf7
45 changed files with 1971 additions and 966 deletions

View File

@ -11,7 +11,7 @@ const Icon = (
ref,
...props
}: React.SVGProps<SVGSVGElement> & {
ref?: React.RefObject<React.MutableRefObject<HTMLOrSVGElement>>
ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
},
) => <IconBase {...props} ref={ref} data={data as IconData} />

View File

@ -64,8 +64,8 @@ const InstallFromMarketplace = ({
{
!isAllPluginsLoading && !collapse && (
<List
marketplaceCollections={[]}
marketplaceCollectionPluginsMap={{}}
pluginCollections={[]}
pluginCollectionPluginsMap={{}}
plugins={allPlugins}
showInstallButton
cardContainerClassName="grid grid-cols-2 gap-2"

View File

@ -63,8 +63,8 @@ const InstallFromMarketplace = ({
{
!isAllPluginsLoading && !collapse && (
<List
marketplaceCollections={[]}
marketplaceCollectionPluginsMap={{}}
pluginCollections={[]}
pluginCollectionPluginsMap={{}}
plugins={allPlugins}
showInstallButton
cardContainerClassName="grid grid-cols-2 gap-2"

View File

@ -2,7 +2,8 @@ import type { PluginsSort, SearchParamsFromCollection } from './types'
import { atom, useAtom, useAtomValue, useSetAtom } from 'jotai'
import { useQueryState } from 'nuqs'
import { useCallback } from 'react'
import { DEFAULT_SORT, PLUGIN_CATEGORY_WITH_COLLECTIONS } from './constants'
import { DEFAULT_SORT, getValidatedPluginCategory, getValidatedTemplateCategory, PLUGIN_CATEGORY_WITH_COLLECTIONS } from './constants'
import type { SearchTab } from './search-params'
import { marketplaceSearchParamsParsers } from './search-params'
const marketplaceSortAtom = atom<PluginsSort>(DEFAULT_SORT)
@ -16,16 +17,26 @@ export function useSetMarketplaceSort() {
return useSetAtom(marketplaceSortAtom)
}
export function useSearchPluginText() {
export function useSearchText() {
return useQueryState('q', marketplaceSearchParamsParsers.q)
}
export function useActivePluginType() {
return useQueryState('category', marketplaceSearchParamsParsers.category)
export function useActivePluginCategory() {
const [category, setCategory] = useQueryState('category', marketplaceSearchParamsParsers.category)
return [getValidatedPluginCategory(category), setCategory] as const
}
export function useActiveTemplateCategory() {
const [category, setCategory] = useQueryState('category', marketplaceSearchParamsParsers.category)
return [getValidatedTemplateCategory(category), setCategory] as const
}
export function useFilterPluginTags() {
return useQueryState('tags', marketplaceSearchParamsParsers.tags)
}
export function useSearchTab() {
return useQueryState('searchTab', marketplaceSearchParamsParsers.searchTab)
}
/**
* Not all categories have collections, so we need to
* force the search mode for those categories.
@ -33,23 +44,24 @@ export function useFilterPluginTags() {
export const searchModeAtom = atom<true | null>(null)
export function useMarketplaceSearchMode() {
const [searchPluginText] = useSearchPluginText()
const [filterPluginTags] = useFilterPluginTags()
const [activePluginType] = useActivePluginType()
// const [searchText] = useSearchText()
const [searchTab] = useSearchTab()
// const [filterPluginTags] = useFilterPluginTags()
const [activePluginCategory] = useActivePluginCategory()
const searchMode = useAtomValue(searchModeAtom)
const isSearchMode = !!searchPluginText
|| filterPluginTags.length > 0
|| (searchMode ?? (!PLUGIN_CATEGORY_WITH_COLLECTIONS.has(activePluginType)))
const isSearchMode = searchTab
|| (searchMode ?? (!PLUGIN_CATEGORY_WITH_COLLECTIONS.has(activePluginCategory)))
return isSearchMode
}
export function useMarketplaceMoreClick() {
const [,setQ] = useSearchPluginText()
const [, setQ] = useSearchText()
const [, setSearchTab] = useSearchTab()
const setSort = useSetAtom(marketplaceSortAtom)
const setSearchMode = useSetAtom(searchModeAtom)
return useCallback((searchParams?: SearchParamsFromCollection) => {
return useCallback((searchParams?: SearchParamsFromCollection, searchTab?: SearchTab) => {
if (!searchParams)
return
setQ(searchParams?.query || '')
@ -58,5 +70,7 @@ export function useMarketplaceMoreClick() {
sortOrder: searchParams?.sort_order || DEFAULT_SORT.sortOrder,
})
setSearchMode(true)
}, [setQ, setSort, setSearchMode])
if (searchTab)
setSearchTab(searchTab)
}, [setQ, setSearchTab, setSort, setSearchMode])
}

View File

@ -0,0 +1,66 @@
'use client'
import { cn } from '@/utils/classnames'
export type CategoryOption = {
value: string
text: string
icon: React.ReactNode | null
}
type CategorySwitchProps = {
className?: string
variant?: 'default' | 'hero'
options: CategoryOption[]
activeValue: string
onChange: (value: string) => void
}
const CategorySwitch = ({
className,
variant = 'default',
options,
activeValue,
onChange,
}: CategorySwitchProps) => {
const isHeroVariant = variant === 'hero'
const getItemClassName = (isActive: boolean) => {
if (isHeroVariant) {
return cn(
'system-md-medium flex h-8 cursor-pointer items-center rounded-lg px-3 text-text-primary-on-surface transition-all',
isActive
? 'bg-components-button-secondary-bg text-saas-dify-blue-inverted'
: 'hover:bg-state-base-hover',
)
}
return cn(
'system-md-medium flex h-8 cursor-pointer items-center rounded-xl border border-transparent px-3 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
isActive && 'border-components-main-nav-nav-button-border !bg-components-main-nav-nav-button-bg-active !text-components-main-nav-nav-button-text-active shadow-xs',
)
}
return (
<div className={cn(
'flex shrink-0 items-center space-x-2',
!isHeroVariant && 'justify-center bg-background-body py-3',
className,
)}
>
{
options.map(option => (
<div
key={option.value}
className={getItemClassName(activeValue === option.value)}
onClick={() => onChange(option.value)}
>
{option.icon}
{option.text}
</div>
))
}
</div>
)
}
export default CategorySwitch

View File

@ -7,8 +7,10 @@ export const DEFAULT_SORT = {
export const SCROLL_BOTTOM_THRESHOLD = 100
export const CATEGORY_ALL = 'all'
export const PLUGIN_TYPE_SEARCH_MAP = {
all: 'all',
all: CATEGORY_ALL,
model: PluginCategoryEnum.model,
tool: PluginCategoryEnum.tool,
agent: PluginCategoryEnum.agent,
@ -28,3 +30,27 @@ export const PLUGIN_CATEGORY_WITH_COLLECTIONS = new Set<ActivePluginType>(
PLUGIN_TYPE_SEARCH_MAP.tool,
],
)
export const TEMPLATE_CATEGORY_MAP = {
all: CATEGORY_ALL,
marketing: 'marketing',
sales: 'sales',
support: 'support',
operations: 'operations',
it: 'it',
knowledge: 'knowledge',
design: 'design',
} as const
export type ActiveTemplateCategory = typeof TEMPLATE_CATEGORY_MAP[keyof typeof TEMPLATE_CATEGORY_MAP]
export function getValidatedPluginCategory(category: string): ActivePluginType {
const key = (category in PLUGIN_TYPE_SEARCH_MAP ? category : CATEGORY_ALL) as keyof typeof PLUGIN_TYPE_SEARCH_MAP
return PLUGIN_TYPE_SEARCH_MAP[key]
}
export function getValidatedTemplateCategory(category: string): ActiveTemplateCategory {
const key = (category in TEMPLATE_CATEGORY_MAP ? category : CATEGORY_ALL) as keyof typeof TEMPLATE_CATEGORY_MAP
return TEMPLATE_CATEGORY_MAP[key]
}

View File

@ -7,7 +7,8 @@ import { useEffect, useLayoutEffect, useRef } from 'react'
import marketPlaceBg from '@/public/marketplace/hero-bg.jpg'
import marketplaceGradientNoise from '@/public/marketplace/hero-gradient-noise.svg'
import { cn } from '@/utils/classnames'
import PluginTypeSwitch from '../plugin-type-switch'
import PluginCategorySwitch from '../plugin-category-switch'
import TemplateCategorySwitch from '../template-category-switch'
import { useMarketplaceData } from '../state'
type DescriptionProps = {
@ -167,9 +168,15 @@ export const Description = ({
</h2>
</motion.div>
{/* Plugin type switch tabs - always visible */}
{/* Category switch tabs - Plugin or Template based on creationType */}
<motion.div style={{ marginTop: tabsMarginTop }}>
<PluginTypeSwitch variant="hero" />
{isTemplatesView
? (
<TemplateCategorySwitch variant="hero" />
)
: (
<PluginCategorySwitch variant="hero" />
)}
</motion.div>
</div>
</motion.div>

View File

@ -3,7 +3,7 @@ import type {
} from '../types'
import type {
CollectionsAndPluginsSearchParams,
MarketplaceCollection,
PluginCollection,
PluginsSearchParams,
} from './types'
import type { PluginsFromMarketplaceResponse } from '@/app/components/plugins/types'
@ -31,8 +31,8 @@ import {
*/
export const useMarketplaceCollectionsAndPlugins = () => {
const [queryParams, setQueryParams] = useState<CollectionsAndPluginsSearchParams>()
const [marketplaceCollectionsOverride, setMarketplaceCollections] = useState<MarketplaceCollection[]>()
const [marketplaceCollectionPluginsMapOverride, setMarketplaceCollectionPluginsMap] = useState<Record<string, Plugin[]>>()
const [pluginCollectionsOverride, setPluginCollections] = useState<PluginCollection[]>()
const [pluginCollectionPluginsMapOverride, setPluginCollectionPluginsMap] = useState<Record<string, Plugin[]>>()
const {
data,
@ -54,10 +54,10 @@ export const useMarketplaceCollectionsAndPlugins = () => {
const isLoading = !!queryParams && (isFetching || isPending)
return {
marketplaceCollections: marketplaceCollectionsOverride ?? data?.marketplaceCollections,
setMarketplaceCollections,
marketplaceCollectionPluginsMap: marketplaceCollectionPluginsMapOverride ?? data?.marketplaceCollectionPluginsMap,
setMarketplaceCollectionPluginsMap,
pluginCollections: pluginCollectionsOverride ?? data?.marketplaceCollections,
setPluginCollections,
pluginCollectionPluginsMap: pluginCollectionPluginsMapOverride ?? data?.marketplaceCollectionPluginsMap,
setPluginCollectionPluginsMap,
queryMarketplaceCollectionsAndPlugins,
isLoading,
isSuccess,

View File

@ -3,9 +3,9 @@ import { dehydrate, HydrationBoundary } from '@tanstack/react-query'
import { createLoader } from 'nuqs/server'
import { getQueryClientServer } from '@/context/query-client-server'
import { marketplaceQuery } from '@/service/client'
import { PLUGIN_CATEGORY_WITH_COLLECTIONS } from './constants'
import { getValidatedPluginCategory, PLUGIN_CATEGORY_WITH_COLLECTIONS } from './constants'
import { marketplaceSearchParamsParsers } from './search-params'
import { getCollectionsParams, getMarketplaceCollectionsAndPlugins } from './utils'
import { getCollectionsParams, getMarketplaceCollectionsAndPlugins, getMarketplaceTemplateCollectionsAndTemplates } from './utils'
// The server side logic should move to marketplace's codebase so that we can get rid of Next.js
@ -15,16 +15,26 @@ async function getDehydratedState(searchParams?: Promise<SearchParams>) {
}
const loadSearchParams = createLoader(marketplaceSearchParamsParsers)
const params = await loadSearchParams(searchParams)
const queryClient = getQueryClientServer()
if (!PLUGIN_CATEGORY_WITH_COLLECTIONS.has(params.category)) {
if (params.creationType === 'templates') {
await queryClient.prefetchQuery({
queryKey: marketplaceQuery.templateCollections.list.queryKey({ input: { query: undefined } }),
queryFn: () => getMarketplaceTemplateCollectionsAndTemplates(),
})
return dehydrate(queryClient)
}
const pluginCategory = getValidatedPluginCategory(params.category)
if (!PLUGIN_CATEGORY_WITH_COLLECTIONS.has(pluginCategory)) {
return
}
const queryClient = getQueryClientServer()
const collectionsParams = getCollectionsParams(pluginCategory)
await queryClient.prefetchQuery({
queryKey: marketplaceQuery.collections.queryKey({ input: { query: getCollectionsParams(params.category) } }),
queryFn: () => getMarketplaceCollectionsAndPlugins(getCollectionsParams(params.category)),
queryKey: marketplaceQuery.plugins.collections.queryKey({ input: { query: collectionsParams } }),
queryFn: () => getMarketplaceCollectionsAndPlugins(collectionsParams),
})
return dehydrate(queryClient)
}

View File

@ -610,8 +610,8 @@ describe('useMarketplaceCollectionsAndPlugins', () => {
expect(result.current.isLoading).toBe(false)
expect(result.current.isSuccess).toBe(false)
expect(result.current.queryMarketplaceCollectionsAndPlugins).toBeDefined()
expect(result.current.setMarketplaceCollections).toBeDefined()
expect(result.current.setMarketplaceCollectionPluginsMap).toBeDefined()
expect(result.current.setPluginCollections).toBeDefined()
expect(result.current.setPluginCollectionPluginsMap).toBeDefined()
})
it('should provide queryMarketplaceCollectionsAndPlugins function', async () => {
@ -621,34 +621,34 @@ describe('useMarketplaceCollectionsAndPlugins', () => {
expect(typeof result.current.queryMarketplaceCollectionsAndPlugins).toBe('function')
})
it('should provide setMarketplaceCollections function', async () => {
it('should provide setPluginCollections function', async () => {
const { useMarketplaceCollectionsAndPlugins } = await import('./hooks')
const { result } = renderHook(() => useMarketplaceCollectionsAndPlugins())
expect(typeof result.current.setMarketplaceCollections).toBe('function')
expect(typeof result.current.setPluginCollections).toBe('function')
})
it('should provide setMarketplaceCollectionPluginsMap function', async () => {
it('should provide setPluginCollectionPluginsMap function', async () => {
const { useMarketplaceCollectionsAndPlugins } = await import('./hooks')
const { result } = renderHook(() => useMarketplaceCollectionsAndPlugins())
expect(typeof result.current.setMarketplaceCollectionPluginsMap).toBe('function')
expect(typeof result.current.setPluginCollectionPluginsMap).toBe('function')
})
it('should return marketplaceCollections from data or override', async () => {
it('should return pluginCollections from data or override', async () => {
const { useMarketplaceCollectionsAndPlugins } = await import('./hooks')
const { result } = renderHook(() => useMarketplaceCollectionsAndPlugins())
// Initial state
expect(result.current.marketplaceCollections).toBeUndefined()
expect(result.current.pluginCollections).toBeUndefined()
})
it('should return marketplaceCollectionPluginsMap from data or override', async () => {
it('should return pluginCollectionPluginsMap from data or override', async () => {
const { useMarketplaceCollectionsAndPlugins } = await import('./hooks')
const { result } = renderHook(() => useMarketplaceCollectionsAndPlugins())
// Initial state
expect(result.current.marketplaceCollectionPluginsMap).toBeUndefined()
expect(result.current.pluginCollectionPluginsMap).toBeUndefined()
})
})

View File

@ -2,7 +2,7 @@ import type { SearchParams } from 'nuqs'
import { TanstackQueryInitializer } from '@/context/query-client'
import { cn } from '@/utils/classnames'
import { HydrateQueryClient } from './hydration-server'
import ListWrapper from './list/list-wrapper'
import MarketplaceContent from './marketplace-content'
import MarketplaceHeader from './marketplace-header'
type MarketplaceProps = {
@ -28,7 +28,7 @@ const Marketplace = async ({
<TanstackQueryInitializer>
<HydrateQueryClient searchParams={searchParams}>
<MarketplaceHeader descriptionClassName={cn('mx-12 mt-1', isMarketplacePlatform && 'top-0 mx-0 mt-0 rounded-none')} marketplaceNav={marketplaceNav} />
<ListWrapper
<MarketplaceContent
showInstallButton={showInstallButton}
/>
</HydrateQueryClient>

View File

@ -43,7 +43,7 @@ const CardWrapperComponent = ({
if (showInstallButton) {
return (
<div
className="group relative cursor-pointer rounded-xl hover:bg-components-panel-on-panel-item-bg-hover"
className="group relative cursor-pointer rounded-xl hover:bg-components-panel-on-panel-item-bg-hover"
>
<Card
key={plugin.name}

View File

@ -0,0 +1,213 @@
'use client'
import type { SearchTab } from '../search-params'
import type { SearchParamsFromCollection } from '../types'
import type { Locale } from '@/i18n-config/language'
import { useLocale, useTranslation } from '#i18n'
import { RiArrowRightSLine } from '@remixicon/react'
import { getLanguage } from '@/i18n-config/language'
import { cn } from '@/utils/classnames'
import { useMarketplaceMoreClick } from '../atoms'
import { getItemKeyByField } from '../utils'
import Empty from '../empty'
import Carousel from './carousel'
export const GRID_CLASS = 'grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4'
export const GRID_DISPLAY_LIMIT = 8
export const CAROUSEL_COLUMN_CLASS = 'flex w-[calc((100%-0px)/1)] shrink-0 flex-col gap-3 sm:w-[calc((100%-12px)/2)] lg:w-[calc((100%-24px)/3)] xl:w-[calc((100%-36px)/4)]'
/** Collection name key that triggers carousel display (plugins: partners, templates: featured) */
export const CAROUSEL_COLLECTION_NAMES = {
partners: 'partners',
featured: 'featured',
} as const
export type BaseCollection = {
name: string
label: Record<string, string>
description: Record<string, string>
searchable?: boolean
search_params?: { query?: string, sort_by?: string, sort_order?: string }
}
type ViewMoreButtonProps = {
searchParams?: SearchParamsFromCollection
searchTab?: SearchTab
}
function ViewMoreButton({ searchParams, searchTab }: ViewMoreButtonProps) {
const { t } = useTranslation()
const onMoreClick = useMarketplaceMoreClick()
return (
<div
className="system-xs-medium flex cursor-pointer items-center text-text-accent"
onClick={() => onMoreClick(searchParams, searchTab)}
>
{t('marketplace.viewMore', { ns: 'plugin' })}
<RiArrowRightSLine className="h-4 w-4" />
</div>
)
}
export { ViewMoreButton }
type CollectionHeaderProps<TCollection extends BaseCollection> = {
collection: TCollection
itemsLength: number
locale: Locale
carouselCollectionNames: string[]
viewMore: React.ReactNode
}
function CollectionHeader<TCollection extends BaseCollection>({
collection,
itemsLength,
locale,
carouselCollectionNames,
viewMore,
}: CollectionHeaderProps<TCollection>) {
const showViewMore = collection.searchable
&& (carouselCollectionNames.includes(collection.name) || itemsLength > GRID_DISPLAY_LIMIT)
return (
<div className="mb-2 flex items-end justify-between">
<div>
<div className="title-xl-semi-bold text-text-primary">
{collection.label[getLanguage(locale)]}
</div>
<div className="system-xs-regular text-text-tertiary">
{collection.description[getLanguage(locale)]}
</div>
</div>
{showViewMore && viewMore}
</div>
)
}
export { CarouselCollection, CollectionHeader }
type CarouselCollectionProps<TItem> = {
items: TItem[]
getItemKey: (item: TItem) => string
renderCard: (item: TItem) => React.ReactNode
cardContainerClassName?: string
}
function CarouselCollection<TItem>({
items,
getItemKey,
renderCard,
cardContainerClassName,
}: CarouselCollectionProps<TItem>) {
const rows: TItem[][] = []
for (let i = 0; i < items.length; i += 2)
rows.push(items.slice(i, i + 2))
return (
<Carousel
className={cardContainerClassName}
showNavigation={items.length > 8}
showPagination={items.length > 8}
autoPlay={items.length > 8}
autoPlayInterval={5000}
>
{rows.map((columnItems, idx) => (
<div
key={columnItems[0] ? getItemKey(columnItems[0]) : idx}
className={CAROUSEL_COLUMN_CLASS}
style={{ scrollSnapAlign: 'start' }}
>
{columnItems.map(item => (
<div key={getItemKey(item)}>{renderCard(item)}</div>
))}
</div>
))}
</Carousel>
)
}
type CollectionListProps<TItem, TCollection extends BaseCollection> = {
collections: TCollection[]
collectionItemsMap: Record<string, TItem[]>
/** Field name to use as item key (e.g. 'plugin_id', 'template_id'). */
itemKeyField: keyof TItem
renderCard: (item: TItem) => React.ReactNode
/** Collection names that use carousel layout (e.g. ['partners'], ['featured']). */
carouselCollectionNames: string[]
/** Search tab for ViewMoreButton (e.g. 'templates' for template collections). */
viewMoreSearchTab?: SearchTab
gridClassName?: string
cardContainerClassName?: string
emptyClassName?: string
}
function CollectionList<TItem, TCollection extends BaseCollection>({
collections,
collectionItemsMap,
itemKeyField,
renderCard,
carouselCollectionNames,
viewMoreSearchTab,
gridClassName = GRID_CLASS,
cardContainerClassName,
emptyClassName,
}: CollectionListProps<TItem, TCollection>) {
const locale = useLocale()
const collectionsWithItems = collections.filter((collection) => {
return collectionItemsMap[collection.name]?.length
})
if (collectionsWithItems.length === 0) {
return <Empty className={emptyClassName} />
}
return (
<>
{
collectionsWithItems.map((collection) => {
const items = collectionItemsMap[collection.name]
const isCarouselCollection = carouselCollectionNames.includes(collection.name)
return (
<div
key={collection.name}
className="py-3"
>
<CollectionHeader
collection={collection}
itemsLength={items.length}
locale={locale}
carouselCollectionNames={carouselCollectionNames}
viewMore={<ViewMoreButton searchParams={collection.search_params} searchTab={viewMoreSearchTab} />}
/>
{isCarouselCollection
? (
<CarouselCollection
items={items}
getItemKey={(item) => getItemKeyByField(item, itemKeyField)}
renderCard={renderCard}
cardContainerClassName={cardContainerClassName}
/>
)
: (
<div className={cn(gridClassName, cardContainerClassName)}>
{items.slice(0, GRID_DISPLAY_LIMIT).map(item => (
<div key={getItemKeyByField(item, itemKeyField)}>
{renderCard(item)}
</div>
))}
</div>
)}
</div>
)
})
}
</>
)
}
export default CollectionList

View File

@ -0,0 +1,55 @@
'use client'
import type { Template } from '../types'
import type { Plugin } from '@/app/components/plugins/types'
import Empty from '../empty'
import CardWrapper from './card-wrapper'
import { GRID_CLASS } from './collection-list'
import TemplateCard from './template-card'
type PluginsVariant = {
variant: 'plugins'
items: Plugin[]
showInstallButton?: boolean
}
type TemplatesVariant = {
variant: 'templates'
items: Template[]
}
type FlatListProps = PluginsVariant | TemplatesVariant
const FlatList = (props: FlatListProps) => {
if (!props.items.length)
return <Empty />
if (props.variant === 'plugins') {
const { items, showInstallButton } = props
return (
<div className={GRID_CLASS}>
{items.map(plugin => (
<CardWrapper
key={`${plugin.org}/${plugin.name}`}
plugin={plugin}
showInstallButton={showInstallButton}
/>
))}
</div>
)
}
const { items } = props
return (
<div className={GRID_CLASS}>
{items.map(template => (
<TemplateCard
key={template.template_id}
template={template}
/>
))}
</div>
)
}
export default FlatList

View File

@ -1,4 +1,4 @@
import type { MarketplaceCollection, SearchParamsFromCollection } from '../types'
import type { PluginCollection, SearchParamsFromCollection } from '../types'
import type { Plugin } from '@/app/components/plugins/types'
import { fireEvent, render, screen } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
@ -36,8 +36,8 @@ const { mockMarketplaceData, mockMoreClick } = vi.hoisted(() => {
mockMarketplaceData: {
plugins: undefined as Plugin[] | undefined,
pluginsTotal: 0,
marketplaceCollections: undefined as MarketplaceCollection[] | undefined,
marketplaceCollectionPluginsMap: undefined as Record<string, Plugin[]> | undefined,
pluginCollections: undefined as PluginCollection[] | undefined,
pluginCollectionPluginsMap: undefined as Record<string, Plugin[]> | undefined,
isLoading: false,
page: 1,
},
@ -207,7 +207,7 @@ const createMockPluginList = (count: number): Plugin[] =>
label: { 'en-US': `Plugin ${i}` },
}))
const createMockCollection = (overrides?: Partial<MarketplaceCollection>): MarketplaceCollection => ({
const createMockCollection = (overrides?: Partial<PluginCollection>): PluginCollection => ({
name: `collection-${Math.random().toString(36).substring(7)}`,
label: { 'en-US': 'Test Collection' },
description: { 'en-US': 'Test collection description' },
@ -219,7 +219,7 @@ const createMockCollection = (overrides?: Partial<MarketplaceCollection>): Marke
...overrides,
})
const createMockCollectionList = (count: number): MarketplaceCollection[] =>
const createMockCollectionList = (count: number): PluginCollection[] =>
Array.from({ length: count }, (_, i) =>
createMockCollection({
name: `collection-${i}`,
@ -232,8 +232,8 @@ const createMockCollectionList = (count: number): MarketplaceCollection[] =>
// ================================
describe('List', () => {
const defaultProps = {
marketplaceCollections: [] as MarketplaceCollection[],
marketplaceCollectionPluginsMap: {} as Record<string, Plugin[]>,
pluginCollections: [] as PluginCollection[],
pluginCollectionPluginsMap: {} as Record<string, Plugin[]>,
plugins: undefined,
showInstallButton: false,
cardContainerClassName: '',
@ -267,8 +267,8 @@ describe('List', () => {
render(
<List
{...defaultProps}
marketplaceCollections={collections}
marketplaceCollectionPluginsMap={pluginsMap}
pluginCollections={collections}
pluginCollectionPluginsMap={pluginsMap}
/>,
)
@ -313,8 +313,8 @@ describe('List', () => {
render(
<List
{...defaultProps}
marketplaceCollections={collections}
marketplaceCollectionPluginsMap={pluginsMap}
pluginCollections={collections}
pluginCollectionPluginsMap={pluginsMap}
plugins={[]}
/>,
)
@ -425,12 +425,12 @@ describe('List', () => {
// Edge Cases Tests
// ================================
describe('Edge Cases', () => {
it('should handle empty marketplaceCollections', () => {
it('should handle empty pluginCollections', () => {
render(
<List
{...defaultProps}
marketplaceCollections={[]}
marketplaceCollectionPluginsMap={{}}
pluginCollections={[]}
pluginCollectionPluginsMap={{}}
/>,
)
@ -447,8 +447,8 @@ describe('List', () => {
render(
<List
{...defaultProps}
marketplaceCollections={collections}
marketplaceCollectionPluginsMap={pluginsMap}
pluginCollections={collections}
pluginCollectionPluginsMap={pluginsMap}
plugins={undefined}
/>,
)
@ -495,12 +495,12 @@ describe('List', () => {
// ================================
describe('ListWithCollection', () => {
const defaultProps = {
marketplaceCollections: [] as MarketplaceCollection[],
marketplaceCollectionPluginsMap: {} as Record<string, Plugin[]>,
variant: 'plugins' as const,
collections: [] as PluginCollection[],
collectionItemsMap: {} as Record<string, Plugin[]>,
showInstallButton: false,
cardContainerClassName: '',
cardRender: undefined,
onMoreClick: undefined,
}
beforeEach(() => {
@ -527,8 +527,8 @@ describe('ListWithCollection', () => {
render(
<ListWithCollection
{...defaultProps}
marketplaceCollections={collections}
marketplaceCollectionPluginsMap={pluginsMap}
collections={collections}
collectionItemsMap={pluginsMap}
/>,
)
@ -547,8 +547,8 @@ describe('ListWithCollection', () => {
render(
<ListWithCollection
{...defaultProps}
marketplaceCollections={collections}
marketplaceCollectionPluginsMap={pluginsMap}
collections={collections}
collectionItemsMap={pluginsMap}
/>,
)
@ -567,8 +567,8 @@ describe('ListWithCollection', () => {
render(
<ListWithCollection
{...defaultProps}
marketplaceCollections={collections}
marketplaceCollectionPluginsMap={pluginsMap}
collections={collections}
collectionItemsMap={pluginsMap}
/>,
)
@ -583,19 +583,19 @@ describe('ListWithCollection', () => {
describe('View More Button', () => {
it('should render View More button when collection is searchable', () => {
const collections = [createMockCollection({
name: 'collection-0',
name: 'partners',
searchable: true,
search_params: { query: 'test' },
})]
const pluginsMap: Record<string, Plugin[]> = {
'collection-0': createMockPluginList(1),
partners: createMockPluginList(1),
}
render(
<ListWithCollection
{...defaultProps}
marketplaceCollections={collections}
marketplaceCollectionPluginsMap={pluginsMap}
collections={collections}
collectionItemsMap={pluginsMap}
/>,
)
@ -614,8 +614,8 @@ describe('ListWithCollection', () => {
render(
<ListWithCollection
{...defaultProps}
marketplaceCollections={collections}
marketplaceCollectionPluginsMap={pluginsMap}
collections={collections}
collectionItemsMap={pluginsMap}
/>,
)
@ -625,19 +625,19 @@ describe('ListWithCollection', () => {
it('should call moreClick hook with search_params when View More is clicked', () => {
const searchParams: SearchParamsFromCollection = { query: 'test-query', sort_by: 'install_count' }
const collections = [createMockCollection({
name: 'collection-0',
name: 'partners',
searchable: true,
search_params: searchParams,
})]
const pluginsMap: Record<string, Plugin[]> = {
'collection-0': createMockPluginList(1),
partners: createMockPluginList(1),
}
render(
<ListWithCollection
{...defaultProps}
marketplaceCollections={collections}
marketplaceCollectionPluginsMap={pluginsMap}
collections={collections}
collectionItemsMap={pluginsMap}
/>,
)
@ -668,8 +668,8 @@ describe('ListWithCollection', () => {
render(
<ListWithCollection
{...defaultProps}
marketplaceCollections={collections}
marketplaceCollectionPluginsMap={pluginsMap}
collections={collections}
collectionItemsMap={pluginsMap}
cardRender={customCardRender}
/>,
)
@ -692,8 +692,8 @@ describe('ListWithCollection', () => {
const { container } = render(
<ListWithCollection
{...defaultProps}
marketplaceCollections={collections}
marketplaceCollectionPluginsMap={pluginsMap}
collections={collections}
collectionItemsMap={pluginsMap}
cardContainerClassName="custom-container"
/>,
)
@ -710,8 +710,8 @@ describe('ListWithCollection', () => {
const { container } = render(
<ListWithCollection
{...defaultProps}
marketplaceCollections={collections}
marketplaceCollectionPluginsMap={pluginsMap}
collections={collections}
collectionItemsMap={pluginsMap}
showInstallButton={true}
/>,
)
@ -729,8 +729,8 @@ describe('ListWithCollection', () => {
render(
<ListWithCollection
{...defaultProps}
marketplaceCollections={[]}
marketplaceCollectionPluginsMap={{}}
collections={[]}
collectionItemsMap={{}}
/>,
)
@ -745,8 +745,8 @@ describe('ListWithCollection', () => {
render(
<ListWithCollection
{...defaultProps}
marketplaceCollections={collections}
marketplaceCollectionPluginsMap={pluginsMap}
collections={collections}
collectionItemsMap={pluginsMap}
/>,
)
@ -763,8 +763,8 @@ describe('ListWithCollection', () => {
render(
<ListWithCollection
{...defaultProps}
marketplaceCollections={collections}
marketplaceCollectionPluginsMap={pluginsMap}
collections={collections}
collectionItemsMap={pluginsMap}
/>,
)
@ -783,8 +783,8 @@ describe('ListWrapper', () => {
// Reset mock data
mockMarketplaceData.plugins = undefined
mockMarketplaceData.pluginsTotal = 0
mockMarketplaceData.marketplaceCollections = undefined
mockMarketplaceData.marketplaceCollectionPluginsMap = undefined
mockMarketplaceData.pluginCollections = undefined
mockMarketplaceData.pluginCollectionPluginsMap = undefined
mockMarketplaceData.isLoading = false
mockMarketplaceData.page = 1
})
@ -861,8 +861,8 @@ describe('ListWrapper', () => {
describe('List Rendering Logic', () => {
it('should render collections when not loading', () => {
mockMarketplaceData.isLoading = false
mockMarketplaceData.marketplaceCollections = createMockCollectionList(1)
mockMarketplaceData.marketplaceCollectionPluginsMap = {
mockMarketplaceData.pluginCollections = createMockCollectionList(1)
mockMarketplaceData.pluginCollectionPluginsMap = {
'collection-0': createMockPluginList(1),
}
@ -874,8 +874,8 @@ describe('ListWrapper', () => {
it('should render List when loading but page > 1', () => {
mockMarketplaceData.isLoading = true
mockMarketplaceData.page = 2
mockMarketplaceData.marketplaceCollections = createMockCollectionList(1)
mockMarketplaceData.marketplaceCollectionPluginsMap = {
mockMarketplaceData.pluginCollections = createMockCollectionList(1)
mockMarketplaceData.pluginCollectionPluginsMap = {
'collection-0': createMockPluginList(1),
}
@ -899,13 +899,13 @@ describe('ListWrapper', () => {
})
it('should show View More button and call moreClick hook', () => {
mockMarketplaceData.marketplaceCollections = [createMockCollection({
name: 'collection-0',
mockMarketplaceData.pluginCollections = [createMockCollection({
name: 'partners',
searchable: true,
search_params: { query: 'test' },
})]
mockMarketplaceData.marketplaceCollectionPluginsMap = {
'collection-0': createMockPluginList(1),
mockMarketplaceData.pluginCollectionPluginsMap = {
partners: createMockPluginList(1),
}
render(<ListWrapper />)
@ -973,8 +973,8 @@ describe('CardWrapper (via List integration)', () => {
render(
<List
marketplaceCollections={[]}
marketplaceCollectionPluginsMap={{}}
pluginCollections={[]}
pluginCollectionPluginsMap={{}}
plugins={[plugin]}
/>,
)
@ -991,8 +991,8 @@ describe('CardWrapper (via List integration)', () => {
render(
<List
marketplaceCollections={[]}
marketplaceCollectionPluginsMap={{}}
pluginCollections={[]}
pluginCollectionPluginsMap={{}}
plugins={[plugin]}
/>,
)
@ -1010,8 +1010,8 @@ describe('CardWrapper (via List integration)', () => {
render(
<List
marketplaceCollections={[]}
marketplaceCollectionPluginsMap={{}}
pluginCollections={[]}
pluginCollectionPluginsMap={{}}
plugins={plugins}
/>,
)
@ -1030,8 +1030,8 @@ describe('CardWrapper (via List integration)', () => {
render(
<List
marketplaceCollections={[]}
marketplaceCollectionPluginsMap={{}}
pluginCollections={[]}
pluginCollectionPluginsMap={{}}
plugins={[plugin]}
showInstallButton={true}
/>,
@ -1050,8 +1050,8 @@ describe('CardWrapper (via List integration)', () => {
render(
<List
marketplaceCollections={[]}
marketplaceCollectionPluginsMap={{}}
pluginCollections={[]}
pluginCollectionPluginsMap={{}}
plugins={[plugin]}
showInstallButton={true}
/>,
@ -1071,8 +1071,8 @@ describe('CardWrapper (via List integration)', () => {
render(
<List
marketplaceCollections={[]}
marketplaceCollectionPluginsMap={{}}
pluginCollections={[]}
pluginCollectionPluginsMap={{}}
plugins={[plugin]}
showInstallButton={true}
/>,
@ -1089,8 +1089,8 @@ describe('CardWrapper (via List integration)', () => {
render(
<List
marketplaceCollections={[]}
marketplaceCollectionPluginsMap={{}}
pluginCollections={[]}
pluginCollectionPluginsMap={{}}
plugins={[plugin]}
showInstallButton={true}
/>,
@ -1105,8 +1105,8 @@ describe('CardWrapper (via List integration)', () => {
render(
<List
marketplaceCollections={[]}
marketplaceCollectionPluginsMap={{}}
pluginCollections={[]}
pluginCollectionPluginsMap={{}}
plugins={[plugin]}
showInstallButton={true}
/>,
@ -1121,8 +1121,8 @@ describe('CardWrapper (via List integration)', () => {
render(
<List
marketplaceCollections={[]}
marketplaceCollectionPluginsMap={{}}
pluginCollections={[]}
pluginCollectionPluginsMap={{}}
plugins={[plugin]}
showInstallButton={true}
/>,
@ -1147,8 +1147,8 @@ describe('CardWrapper (via List integration)', () => {
render(
<List
marketplaceCollections={[]}
marketplaceCollectionPluginsMap={{}}
pluginCollections={[]}
pluginCollectionPluginsMap={{}}
plugins={[plugin]}
showInstallButton={false}
/>,
@ -1167,8 +1167,8 @@ describe('CardWrapper (via List integration)', () => {
render(
<List
marketplaceCollections={[]}
marketplaceCollectionPluginsMap={{}}
pluginCollections={[]}
pluginCollectionPluginsMap={{}}
plugins={[plugin]}
showInstallButton={false}
/>,
@ -1182,8 +1182,8 @@ describe('CardWrapper (via List integration)', () => {
render(
<List
marketplaceCollections={[]}
marketplaceCollectionPluginsMap={{}}
pluginCollections={[]}
pluginCollectionPluginsMap={{}}
plugins={[plugin]}
/>,
)
@ -1205,8 +1205,8 @@ describe('CardWrapper (via List integration)', () => {
render(
<List
marketplaceCollections={[]}
marketplaceCollectionPluginsMap={{}}
pluginCollections={[]}
pluginCollectionPluginsMap={{}}
plugins={[plugin]}
/>,
)
@ -1222,8 +1222,8 @@ describe('CardWrapper (via List integration)', () => {
render(
<List
marketplaceCollections={[]}
marketplaceCollectionPluginsMap={{}}
pluginCollections={[]}
pluginCollectionPluginsMap={{}}
plugins={[plugin]}
/>,
)
@ -1239,8 +1239,8 @@ describe('CardWrapper (via List integration)', () => {
render(
<List
marketplaceCollections={[]}
marketplaceCollectionPluginsMap={{}}
pluginCollections={[]}
pluginCollectionPluginsMap={{}}
plugins={[plugin]}
/>,
)
@ -1261,8 +1261,8 @@ describe('Combined Workflows', () => {
mockMarketplaceData.pluginsTotal = 0
mockMarketplaceData.isLoading = false
mockMarketplaceData.page = 1
mockMarketplaceData.marketplaceCollections = undefined
mockMarketplaceData.marketplaceCollectionPluginsMap = undefined
mockMarketplaceData.pluginCollections = undefined
mockMarketplaceData.pluginCollectionPluginsMap = undefined
})
it('should transition from loading to showing collections', async () => {
@ -1275,8 +1275,8 @@ describe('Combined Workflows', () => {
// Simulate loading complete
mockMarketplaceData.isLoading = false
mockMarketplaceData.marketplaceCollections = createMockCollectionList(1)
mockMarketplaceData.marketplaceCollectionPluginsMap = {
mockMarketplaceData.pluginCollections = createMockCollectionList(1)
mockMarketplaceData.pluginCollectionPluginsMap = {
'collection-0': createMockPluginList(1),
}
@ -1287,8 +1287,8 @@ describe('Combined Workflows', () => {
})
it('should transition from collections to search results', async () => {
mockMarketplaceData.marketplaceCollections = createMockCollectionList(1)
mockMarketplaceData.marketplaceCollectionPluginsMap = {
mockMarketplaceData.pluginCollections = createMockCollectionList(1)
mockMarketplaceData.pluginCollectionPluginsMap = {
'collection-0': createMockPluginList(1),
}
@ -1350,8 +1350,9 @@ describe('Accessibility', () => {
const { container } = render(
<ListWithCollection
marketplaceCollections={collections}
marketplaceCollectionPluginsMap={pluginsMap}
variant="plugins"
collections={collections}
collectionItemsMap={pluginsMap}
/>,
)
@ -1360,19 +1361,20 @@ describe('Accessibility', () => {
expect(headings.length).toBeGreaterThan(0)
})
it('should have clickable View More button', () => {
it('should have clickable View More button', () => {
const collections = [createMockCollection({
name: 'collection-0',
name: 'partners',
searchable: true,
})]
const pluginsMap: Record<string, Plugin[]> = {
'collection-0': createMockPluginList(1),
partners: createMockPluginList(1),
}
render(
<ListWithCollection
marketplaceCollections={collections}
marketplaceCollectionPluginsMap={pluginsMap}
variant="plugins"
collections={collections}
collectionItemsMap={pluginsMap}
/>,
)
@ -1381,18 +1383,18 @@ describe('Accessibility', () => {
expect(viewMoreButton.closest('div')).toHaveClass('cursor-pointer')
})
it('should have proper grid layout for cards', () => {
it('should have proper grid layout for cards', () => {
const plugins = createMockPluginList(4)
const { container } = render(
<List
marketplaceCollections={[]}
marketplaceCollectionPluginsMap={{}}
pluginCollections={[]}
pluginCollectionPluginsMap={{}}
plugins={plugins}
/>,
)
const grid = container.querySelector('.grid-cols-4')
const grid = container.querySelector('.grid')
expect(grid).toBeInTheDocument()
})
})
@ -1411,8 +1413,8 @@ describe('Performance', () => {
const startTime = performance.now()
render(
<List
marketplaceCollections={[]}
marketplaceCollectionPluginsMap={{}}
pluginCollections={[]}
pluginCollectionPluginsMap={{}}
plugins={plugins}
/>,
)
@ -1432,8 +1434,9 @@ describe('Performance', () => {
const startTime = performance.now()
render(
<ListWithCollection
marketplaceCollections={collections}
marketplaceCollectionPluginsMap={pluginsMap}
variant="plugins"
collections={collections}
collectionItemsMap={pluginsMap}
/>,
)
const endTime = performance.now()

View File

@ -1,14 +1,16 @@
'use client'
import type { Plugin } from '../../types'
import type { MarketplaceCollection } from '../types'
import type { PluginCollection } from '../types'
import { cn } from '@/utils/classnames'
import Empty from '../empty'
import CardWrapper from './card-wrapper'
import { GRID_CLASS } from './collection-list'
import ListWithCollection from './list-with-collection'
type ListProps = {
marketplaceCollections: MarketplaceCollection[]
marketplaceCollectionPluginsMap: Record<string, Plugin[]>
pluginCollections: PluginCollection[]
pluginCollectionPluginsMap: Record<string, Plugin[]>
plugins?: Plugin[]
showInstallButton?: boolean
cardContainerClassName?: string
@ -16,8 +18,8 @@ type ListProps = {
emptyClassName?: string
}
const List = ({
marketplaceCollections,
marketplaceCollectionPluginsMap,
pluginCollections,
pluginCollectionPluginsMap,
plugins,
showInstallButton,
cardContainerClassName,
@ -29,8 +31,9 @@ const List = ({
{
!plugins && (
<ListWithCollection
marketplaceCollections={marketplaceCollections}
marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
variant="plugins"
collections={pluginCollections}
collectionItemsMap={pluginCollectionPluginsMap}
showInstallButton={showInstallButton}
cardContainerClassName={cardContainerClassName}
cardRender={cardRender}
@ -39,11 +42,7 @@ const List = ({
}
{
plugins && !!plugins.length && (
<div className={cn(
'grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
cardContainerClassName,
)}
>
<div className={cn(GRID_CLASS, cardContainerClassName)}>
{
plugins.map((plugin) => {
if (cardRender)

View File

@ -1,134 +1,82 @@
'use client'
import type { MarketplaceCollection } from '../types'
import type { PluginCollection, Template, TemplateCollection } from '../types'
import type { Plugin } from '@/app/components/plugins/types'
import { useLocale, useTranslation } from '#i18n'
import { RiArrowRightSLine } from '@remixicon/react'
import { getLanguage } from '@/i18n-config/language'
import { useMarketplaceMoreClick } from '../atoms'
import CardWrapper from './card-wrapper'
import Carousel from './carousel'
import CollectionList, { CAROUSEL_COLLECTION_NAMES } from './collection-list'
import TemplateCard from './template-card'
type ListWithCollectionProps = {
marketplaceCollections: MarketplaceCollection[]
marketplaceCollectionPluginsMap: Record<string, Plugin[]>
showInstallButton?: boolean
type BaseProps = {
cardContainerClassName?: string
}
type PluginsVariant = BaseProps & {
variant: 'plugins'
collections: PluginCollection[]
collectionItemsMap: Record<string, Plugin[]>
showInstallButton?: boolean
cardRender?: (plugin: Plugin) => React.JSX.Element | null
}
const PARTNERS_COLLECTION_NAME = 'partners'
const GRID_DISPLAY_LIMIT = 8 // show up to 8 items
type TemplatesVariant = BaseProps & {
variant: 'templates'
collections: TemplateCollection[]
collectionItemsMap: Record<string, Template[]>
}
const ListWithCollection = ({
marketplaceCollections,
marketplaceCollectionPluginsMap,
showInstallButton,
cardContainerClassName,
cardRender,
}: ListWithCollectionProps) => {
const { t } = useTranslation()
const locale = useLocale()
const onMoreClick = useMarketplaceMoreClick()
type ListWithCollectionProps = PluginsVariant | TemplatesVariant
const renderPluginCard = (plugin: Plugin) => {
if (cardRender)
return cardRender(plugin)
const ListWithCollection = (props: ListWithCollectionProps) => {
const { variant, cardContainerClassName } = props
if (variant === 'plugins') {
const {
collections,
collectionItemsMap,
showInstallButton,
cardRender,
} = props
const renderPluginCard = (plugin: Plugin) => {
if (cardRender)
return cardRender(plugin)
return (
<CardWrapper
plugin={plugin}
showInstallButton={showInstallButton}
/>
)
}
return (
<CardWrapper
plugin={plugin}
showInstallButton={showInstallButton}
<CollectionList
collections={collections}
collectionItemsMap={collectionItemsMap}
itemKeyField="plugin_id"
renderCard={renderPluginCard}
carouselCollectionNames={[CAROUSEL_COLLECTION_NAMES.partners]}
cardContainerClassName={cardContainerClassName}
/>
)
}
const renderPartnersCarousel = (collection: MarketplaceCollection, plugins: Plugin[]) => {
// Partners collection: 2-row carousel with auto-play
const rows: Plugin[][] = []
for (let i = 0; i < plugins.length; i += 2) {
// Group plugins in pairs (2 per column)
rows.push(plugins.slice(i, i + 2))
}
const { collections, collectionItemsMap } = props
return (
<Carousel
className={cardContainerClassName}
showNavigation={plugins.length > 8}
showPagination={plugins.length > 8}
autoPlay={plugins.length > 8}
autoPlayInterval={5000}
>
{rows.map(columnPlugins => (
<div
key={`column-${columnPlugins[0]?.plugin_id}`}
className="flex w-[calc((100%-0px)/1)] shrink-0 flex-col gap-3 sm:w-[calc((100%-12px)/2)] lg:w-[calc((100%-24px)/3)] xl:w-[calc((100%-36px)/4)]"
style={{ scrollSnapAlign: 'start' }}
>
{columnPlugins.map(plugin => (
<div key={plugin.plugin_id}>
{renderPluginCard(plugin)}
</div>
))}
</div>
))}
</Carousel>
)
}
const renderGridCollection = (collection: MarketplaceCollection, plugins: Plugin[]) => {
// Other collections: responsive grid
const displayPlugins = plugins.slice(0, GRID_DISPLAY_LIMIT)
return (
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
{displayPlugins.map(plugin => (
<div key={plugin.plugin_id}>
{renderPluginCard(plugin)}
</div>
))}
</div>
)
}
const renderTemplateCard = (template: Template) => (
<TemplateCard template={template} />
)
return (
<>
{
marketplaceCollections.filter((collection) => {
return marketplaceCollectionPluginsMap[collection.name]?.length
}).map((collection) => {
const plugins = marketplaceCollectionPluginsMap[collection.name]
const isPartnersCollection = collection.name === PARTNERS_COLLECTION_NAME
const showViewMore = collection.searchable && (isPartnersCollection || plugins.length > GRID_DISPLAY_LIMIT)
return (
<div
key={collection.name}
className="py-3"
>
<div className="mb-2 flex items-end justify-between">
<div>
<div className="title-xl-semi-bold text-text-primary">{collection.label[getLanguage(locale)]}</div>
<div className="system-xs-regular text-text-tertiary">{collection.description[getLanguage(locale)]}</div>
</div>
{showViewMore && (
<div
className="system-xs-medium flex cursor-pointer items-center text-text-accent"
onClick={() => onMoreClick(collection.search_params)}
>
{t('marketplace.viewMore', { ns: 'plugin' })}
<RiArrowRightSLine className="h-4 w-4" />
</div>
)}
</div>
{isPartnersCollection
? renderPartnersCarousel(collection, plugins)
: renderGridCollection(collection, plugins)}
</div>
)
})
}
</>
<CollectionList
collections={collections}
collectionItemsMap={collectionItemsMap}
itemKeyField="template_id"
renderCard={renderTemplateCard}
carouselCollectionNames={[CAROUSEL_COLLECTION_NAMES.featured]}
viewMoreSearchTab="templates"
cardContainerClassName={cardContainerClassName}
/>
)
}

View File

@ -0,0 +1,84 @@
import type { Template } from '../types'
import type { Plugin } from '@/app/components/plugins/types'
import { render, screen } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import ListWrapper from './list-wrapper'
const { mockMarketplaceData } = vi.hoisted(() => ({
mockMarketplaceData: {
creationType: 'plugins' as 'plugins' | 'templates',
isLoading: false,
page: 1,
isFetchingNextPage: false,
pluginCollections: [],
pluginCollectionPluginsMap: {},
plugins: undefined as Plugin[] | undefined,
templateCollections: [],
templateCollectionTemplatesMap: {},
templates: undefined as Template[] | undefined,
},
}))
vi.mock('../state', () => ({
useMarketplaceData: () => mockMarketplaceData,
}))
vi.mock('@/app/components/base/loading', () => ({
default: () => <div data-testid="loading-component">Loading</div>,
}))
vi.mock('./flat-list', () => ({
default: ({ variant, items }: { variant: 'plugins' | 'templates', items: unknown[] }) => (
<div data-testid={`flat-list-${variant}`}>
{items.length}
</div>
),
}))
vi.mock('./list-with-collection', () => ({
default: ({ variant }: { variant: 'plugins' | 'templates' }) => (
<div data-testid={`collection-list-${variant}`}>collection</div>
),
}))
describe('ListWrapper flat rendering', () => {
beforeEach(() => {
vi.clearAllMocks()
mockMarketplaceData.creationType = 'plugins'
mockMarketplaceData.isLoading = false
mockMarketplaceData.page = 1
mockMarketplaceData.isFetchingNextPage = false
mockMarketplaceData.plugins = undefined
mockMarketplaceData.templates = undefined
})
it('renders plugin flat list when plugin items exist', () => {
mockMarketplaceData.creationType = 'plugins'
mockMarketplaceData.plugins = [{ org: 'o', name: 'p' } as Plugin]
render(<ListWrapper />)
expect(screen.getByTestId('flat-list-plugins')).toBeInTheDocument()
expect(screen.queryByTestId('collection-list-plugins')).not.toBeInTheDocument()
})
it('renders template flat list when template items exist', () => {
mockMarketplaceData.creationType = 'templates'
mockMarketplaceData.templates = [{ template_id: 't1' } as Template]
render(<ListWrapper />)
expect(screen.getByTestId('flat-list-templates')).toBeInTheDocument()
expect(screen.queryByTestId('collection-list-templates')).not.toBeInTheDocument()
})
it('renders template collection list when templates are undefined', () => {
mockMarketplaceData.creationType = 'templates'
mockMarketplaceData.templates = undefined
render(<ListWrapper />)
expect(screen.getByTestId('collection-list-templates')).toBeInTheDocument()
expect(screen.queryByTestId('flat-list-templates')).not.toBeInTheDocument()
})
})

View File

@ -1,163 +1,74 @@
'use client'
import type { ActivePluginType } from '../constants'
import { useTranslation } from '#i18n'
import { useState } from 'react'
import Loading from '@/app/components/base/loading'
import SegmentedControl from '@/app/components/base/segmented-control'
import CategoriesFilter from '../../plugin-page/filter-management/category-filter'
import TagFilter from '../../plugin-page/filter-management/tag-filter'
import { useActivePluginType, useFilterPluginTags, useMarketplaceSearchMode } from '../atoms'
import { PLUGIN_TYPE_SEARCH_MAP } from '../constants'
import SortDropdown from '../sort-dropdown'
import { useMarketplaceData } from '../state'
import List from './index'
import TemplateList from './template-list'
import TemplateSearchList from './template-search-list'
import FlatList from './flat-list'
import ListWithCollection from './list-with-collection'
type ListWrapperProps = {
showInstallButton?: boolean
}
type SearchScope = 'all' | 'plugins' | 'creators'
const searchScopeOptionKeys = [
{ value: 'all', textKey: 'marketplace.searchFilterAll' },
{ value: 'plugins', textKey: 'marketplace.searchFilterPlugins' },
{ value: 'creators', textKey: 'marketplace.searchFilterCreators' },
] as const satisfies ReadonlyArray<{ value: SearchScope, textKey: 'marketplace.searchFilterAll' | 'marketplace.searchFilterPlugins' | 'marketplace.searchFilterCreators' }>
const ListWrapper = ({
showInstallButton,
}: ListWrapperProps) => {
const { t } = useTranslation()
const isSearchMode = useMarketplaceSearchMode()
const [filterPluginTags, handleFilterPluginTagsChange] = useFilterPluginTags()
const [activePluginType, handleActivePluginTypeChange] = useActivePluginType()
const [searchScope, setSearchScope] = useState<SearchScope>('all')
const ListWrapper = ({ showInstallButton }: ListWrapperProps) => {
const marketplaceData = useMarketplaceData()
const {
creationType,
isLoading,
} = marketplaceData
const { creationType, isLoading, page, isFetchingNextPage } = marketplaceData
const isPluginView = creationType === 'plugins'
const renderContent = () => {
if (!isPluginView) {
const { templateCollections, templateCollectionTemplatesMap, templates } = marketplaceData
if (templates !== undefined) {
return (
<FlatList
variant="templates"
items={templates}
/>
)
}
return (
<ListWithCollection
variant="templates"
collections={templateCollections || []}
collectionItemsMap={templateCollectionTemplatesMap || {}}
/>
)
}
const { pluginCollections, pluginCollectionPluginsMap, plugins } = marketplaceData
if (plugins !== undefined) {
return (
<FlatList
variant="plugins"
items={plugins}
showInstallButton={showInstallButton}
/>
)
}
// Templates view
if (creationType === 'templates') {
const {
templateCollections,
templateCollectionTemplatesMap,
templates,
isSearchMode: isTemplateSearchMode,
} = marketplaceData
return (
<div
style={{ scrollbarGutter: 'stable' }}
className="relative flex grow flex-col bg-background-default-subtle px-12 py-2"
>
{
isLoading && (
<div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
<Loading />
</div>
)
}
{
!isLoading && (
isTemplateSearchMode
? (
<TemplateSearchList templates={templates || []} />
)
: (
<TemplateList
templateCollections={templateCollections || []}
templateCollectionTemplatesMap={templateCollectionTemplatesMap || {}}
/>
)
)
}
</div>
<ListWithCollection
variant="plugins"
collections={pluginCollections || []}
collectionItemsMap={pluginCollectionPluginsMap || {}}
showInstallButton={showInstallButton}
/>
)
}
// Plugins view (default)
const {
plugins,
pluginsTotal,
marketplaceCollections,
marketplaceCollectionPluginsMap,
isFetchingNextPage,
page,
} = marketplaceData
const pluginsCount = pluginsTotal || 0
const searchScopeOptions: Array<{ value: SearchScope, text: string, count: number }> = searchScopeOptionKeys.map(option => ({
value: option.value,
text: t(option.textKey, { ns: 'plugin' }),
count: option.value === 'creators' ? 0 : pluginsCount,
}))
return (
<div
style={{ scrollbarGutter: 'stable' }}
className="relative flex grow flex-col bg-background-default-subtle px-12 py-2"
>
{plugins && !isSearchMode && (
<div className="mb-4 flex items-center pt-3">
<div className="title-xl-semi-bold text-text-primary">{t('marketplace.pluginsResult', { ns: 'plugin', num: pluginsTotal })}</div>
<div className="mx-3 h-3.5 w-[1px] bg-divider-regular"></div>
<SortDropdown />
{isLoading && page === 1 && (
<div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
<Loading />
</div>
)}
{isSearchMode && (
<div className="mb-4 flex items-center justify-between pt-3">
<div className="flex items-center gap-2">
<SegmentedControl
size="large"
activeState="accentLight"
value={searchScope}
onChange={(value) => {
setSearchScope(value as SearchScope)
}}
options={searchScopeOptions}
/>
<CategoriesFilter
value={activePluginType === PLUGIN_TYPE_SEARCH_MAP.all ? [] : [activePluginType]}
onChange={(categories) => {
if (categories.length === 0) {
handleActivePluginTypeChange(PLUGIN_TYPE_SEARCH_MAP.all)
return
}
handleActivePluginTypeChange(categories[categories.length - 1] as ActivePluginType)
}}
/>
<TagFilter
value={filterPluginTags}
onChange={handleFilterPluginTagsChange}
/>
</div>
<SortDropdown />
</div>
)}
{
isLoading && page === 1 && (
<div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
<Loading />
</div>
)
}
{
(!isLoading || page > 1) && (
<List
marketplaceCollections={marketplaceCollections || []}
marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap || {}}
plugins={plugins}
showInstallButton={showInstallButton}
/>
)
}
{
isFetchingNextPage && (
<Loading className="my-3" />
)
}
{(!isLoading || page > 1) && renderContent()}
{isFetchingNextPage && <Loading className="my-3" />}
</div>
)
}

View File

@ -1,129 +0,0 @@
'use client'
import type { Template, TemplateCollection } from '../types'
import { useLocale, useTranslation } from '#i18n'
import { RiArrowRightSLine } from '@remixicon/react'
import { getLanguage } from '@/i18n-config/language'
import Empty from '../empty'
import Carousel from './carousel'
import TemplateCard from './template-card'
type TemplateListProps = {
templateCollections: TemplateCollection[]
templateCollectionTemplatesMap: Record<string, Template[]>
cardContainerClassName?: string
}
const FEATURED_COLLECTION_NAME = 'featured'
const GRID_DISPLAY_LIMIT = 8
const TemplateList = ({
templateCollections,
templateCollectionTemplatesMap,
cardContainerClassName,
}: TemplateListProps) => {
const { t } = useTranslation()
const locale = useLocale()
const renderTemplateCard = (template: Template) => {
return (
<TemplateCard
key={template.template_id}
template={template}
/>
)
}
const renderFeaturedCarousel = (collection: TemplateCollection, templates: Template[]) => {
// Featured collection: 2-row carousel with auto-play
const rows: Template[][] = []
for (let i = 0; i < templates.length; i += 2) {
rows.push(templates.slice(i, i + 2))
}
return (
<Carousel
className={cardContainerClassName}
showNavigation={templates.length > 8}
showPagination={templates.length > 8}
autoPlay={templates.length > 8}
autoPlayInterval={5000}
>
{rows.map(columnTemplates => (
<div
key={`column-${columnTemplates[0]?.template_id}`}
className="flex w-[calc((100%-0px)/1)] shrink-0 flex-col gap-3 sm:w-[calc((100%-12px)/2)] lg:w-[calc((100%-24px)/3)] xl:w-[calc((100%-36px)/4)]"
style={{ scrollSnapAlign: 'start' }}
>
{columnTemplates.map(template => (
<div key={template.template_id}>
{renderTemplateCard(template)}
</div>
))}
</div>
))}
</Carousel>
)
}
const renderGridCollection = (collection: TemplateCollection, templates: Template[]) => {
const displayTemplates = templates.slice(0, GRID_DISPLAY_LIMIT)
return (
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
{displayTemplates.map(template => (
<div key={template.template_id}>
{renderTemplateCard(template)}
</div>
))}
</div>
)
}
const collectionsWithTemplates = templateCollections.filter((collection) => {
return templateCollectionTemplatesMap[collection.name]?.length
})
if (collectionsWithTemplates.length === 0) {
return <Empty />
}
return (
<>
{
collectionsWithTemplates.map((collection) => {
const templates = templateCollectionTemplatesMap[collection.name]
const isFeaturedCollection = collection.name === FEATURED_COLLECTION_NAME
const showViewMore = collection.searchable && (isFeaturedCollection || templates.length > GRID_DISPLAY_LIMIT)
return (
<div
key={collection.name}
className="py-3"
>
<div className="mb-2 flex items-end justify-between">
<div>
<div className="title-xl-semi-bold text-text-primary">{collection.label[getLanguage(locale)]}</div>
<div className="system-xs-regular text-text-tertiary">{collection.description[getLanguage(locale)]}</div>
</div>
{showViewMore && (
<div
className="system-xs-medium flex cursor-pointer items-center text-text-accent"
>
{t('marketplace.viewMore', { ns: 'plugin' })}
<RiArrowRightSLine className="h-4 w-4" />
</div>
)}
</div>
{isFeaturedCollection
? renderFeaturedCarousel(collection, templates)
: renderGridCollection(collection, templates)}
</div>
)
})
}
</>
)
}
export default TemplateList

View File

@ -1,27 +0,0 @@
'use client'
import type { Template } from '../types'
import Empty from '../empty'
import TemplateCard from './template-card'
type TemplateSearchListProps = {
templates: Template[]
}
const TemplateSearchList = ({ templates }: TemplateSearchListProps) => {
if (templates.length === 0) {
return <Empty />
}
return (
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
{templates.map(template => (
<div key={template.template_id}>
<TemplateCard template={template} />
</div>
))}
</div>
)
}
export default TemplateSearchList

View File

@ -0,0 +1,19 @@
'use client'
import { useSearchTab } from './atoms'
import ListWrapper from './list/list-wrapper'
import SearchPage from './search-page'
type MarketplaceContentProps = {
showInstallButton?: boolean
}
const MarketplaceContent = ({ showInstallButton }: MarketplaceContentProps) => {
const [searchTab] = useSearchTab()
if (searchTab)
return <SearchPage />
return <ListWrapper showInstallButton={showInstallButton} />
}
export default MarketplaceContent

View File

@ -1,9 +1,8 @@
'use client'
import { useMarketplaceSearchMode } from './atoms'
import { useSearchTab } from './atoms'
import { Description } from './description'
import SearchResultsHeader from './search-results-header'
import { useMarketplaceData } from './state'
type MarketplaceHeaderProps = {
descriptionClassName?: string
@ -11,14 +10,10 @@ type MarketplaceHeaderProps = {
}
const MarketplaceHeader = ({ descriptionClassName, marketplaceNav }: MarketplaceHeaderProps) => {
const { creationType, isSearchMode: templatesSearchMode } = useMarketplaceData()
const pluginsSearchMode = useMarketplaceSearchMode()
const [searchTab] = useSearchTab()
// Use templates search mode when viewing templates, otherwise use plugins search mode
const isSearchMode = creationType === 'templates' ? templatesSearchMode : pluginsSearchMode
if (isSearchMode)
return <SearchResultsHeader />
if (searchTab)
return <SearchResultsHeader marketplaceNav={marketplaceNav} />
return <Description className={descriptionClassName} marketplaceNav={marketplaceNav} />
}

View File

@ -0,0 +1,99 @@
'use client'
import type { ActivePluginType } from './constants'
import type { PluginCategoryEnum } from '@/app/components/plugins/types'
import { useTranslation } from '#i18n'
import { RiArchive2Line } from '@remixicon/react'
import { useSetAtom } from 'jotai'
import { Plugin } from '@/app/components/base/icons/src/vender/plugin'
import { searchModeAtom, useActivePluginCategory } from './atoms'
import CategorySwitch from './category-switch'
import { PLUGIN_CATEGORY_WITH_COLLECTIONS, PLUGIN_TYPE_SEARCH_MAP } from './constants'
import { MARKETPLACE_TYPE_ICON_COMPONENTS } from './plugin-type-icons'
type PluginTypeSwitchProps = {
className?: string
variant?: 'default' | 'hero'
}
const getTypeIcon = (value: ActivePluginType, isHeroVariant?: boolean) => {
if (value === PLUGIN_TYPE_SEARCH_MAP.all)
return isHeroVariant ? <Plugin className="mr-1.5 h-4 w-4" /> : null
if (value === PLUGIN_TYPE_SEARCH_MAP.bundle)
return <RiArchive2Line className="mr-1.5 h-4 w-4" />
const Icon = MARKETPLACE_TYPE_ICON_COMPONENTS[value as PluginCategoryEnum]
return Icon ? <Icon className="mr-1.5 h-4 w-4" /> : null
}
const PluginCategorySwitch = ({
className,
variant = 'default',
}: PluginTypeSwitchProps) => {
const { t } = useTranslation()
const [activePluginCategory, handleActivePluginCategoryChange] = useActivePluginCategory()
const setSearchMode = useSetAtom(searchModeAtom)
const isHeroVariant = variant === 'hero'
const options = [
{
value: PLUGIN_TYPE_SEARCH_MAP.all,
text: isHeroVariant ? t('category.allTypes', { ns: 'plugin' }) : t('category.all', { ns: 'plugin' }),
icon: getTypeIcon(PLUGIN_TYPE_SEARCH_MAP.all),
},
{
value: PLUGIN_TYPE_SEARCH_MAP.model,
text: t('category.models', { ns: 'plugin' }),
icon: getTypeIcon(PLUGIN_TYPE_SEARCH_MAP.model),
},
{
value: PLUGIN_TYPE_SEARCH_MAP.tool,
text: t('category.tools', { ns: 'plugin' }),
icon: getTypeIcon(PLUGIN_TYPE_SEARCH_MAP.tool),
},
{
value: PLUGIN_TYPE_SEARCH_MAP.datasource,
text: t('category.datasources', { ns: 'plugin' }),
icon: getTypeIcon(PLUGIN_TYPE_SEARCH_MAP.datasource),
},
{
value: PLUGIN_TYPE_SEARCH_MAP.trigger,
text: t('category.triggers', { ns: 'plugin' }),
icon: getTypeIcon(PLUGIN_TYPE_SEARCH_MAP.trigger),
},
{
value: PLUGIN_TYPE_SEARCH_MAP.agent,
text: t('category.agents', { ns: 'plugin' }),
icon: getTypeIcon(PLUGIN_TYPE_SEARCH_MAP.agent),
},
{
value: PLUGIN_TYPE_SEARCH_MAP.extension,
text: t('category.extensions', { ns: 'plugin' }),
icon: getTypeIcon(PLUGIN_TYPE_SEARCH_MAP.extension),
},
{
value: PLUGIN_TYPE_SEARCH_MAP.bundle,
text: t('category.bundles', { ns: 'plugin' }),
icon: getTypeIcon(PLUGIN_TYPE_SEARCH_MAP.bundle),
},
]
const handleChange = (value: string) => {
handleActivePluginCategoryChange(value)
if (PLUGIN_CATEGORY_WITH_COLLECTIONS.has(value as ActivePluginType)) {
setSearchMode(null)
}
}
return (
<CategorySwitch
className={className}
variant={variant}
options={options}
activeValue={activePluginCategory}
onChange={handleChange}
/>
)
}
export default PluginCategorySwitch

View File

@ -1,128 +0,0 @@
'use client'
import type { ActivePluginType } from './constants'
import type { PluginCategoryEnum } from '@/app/components/plugins/types'
import { useTranslation } from '#i18n'
import {
RiApps2Line,
RiArchive2Line,
} from '@remixicon/react'
import { useSetAtom } from 'jotai'
import { cn } from '@/utils/classnames'
import { searchModeAtom, useActivePluginType } from './atoms'
import { PLUGIN_CATEGORY_WITH_COLLECTIONS, PLUGIN_TYPE_SEARCH_MAP } from './constants'
import { MARKETPLACE_TYPE_ICON_COMPONENTS } from './plugin-type-icons'
type PluginTypeSwitchProps = {
className?: string
variant?: 'default' | 'hero'
}
const PluginTypeSwitch = ({
className,
variant = 'default',
}: PluginTypeSwitchProps) => {
const { t } = useTranslation()
const [activePluginType, handleActivePluginTypeChange] = useActivePluginType()
const setSearchMode = useSetAtom(searchModeAtom)
const isHeroVariant = variant === 'hero'
const getTypeIcon = (value: ActivePluginType) => {
if (value === PLUGIN_TYPE_SEARCH_MAP.all)
return isHeroVariant ? <RiApps2Line className="mr-1.5 h-4 w-4" /> : null
if (value === PLUGIN_TYPE_SEARCH_MAP.bundle)
return <RiArchive2Line className="mr-1.5 h-4 w-4" />
const Icon = MARKETPLACE_TYPE_ICON_COMPONENTS[value as PluginCategoryEnum]
return Icon ? <Icon className="mr-1.5 h-4 w-4" /> : null
}
const options: Array<{
value: ActivePluginType
text: string
icon: React.ReactNode | null
}> = [
{
value: PLUGIN_TYPE_SEARCH_MAP.all,
text: isHeroVariant ? t('category.allTypes', { ns: 'plugin' }) : t('category.all', { ns: 'plugin' }),
icon: getTypeIcon(PLUGIN_TYPE_SEARCH_MAP.all),
},
{
value: PLUGIN_TYPE_SEARCH_MAP.model,
text: t('category.models', { ns: 'plugin' }),
icon: getTypeIcon(PLUGIN_TYPE_SEARCH_MAP.model),
},
{
value: PLUGIN_TYPE_SEARCH_MAP.tool,
text: t('category.tools', { ns: 'plugin' }),
icon: getTypeIcon(PLUGIN_TYPE_SEARCH_MAP.tool),
},
{
value: PLUGIN_TYPE_SEARCH_MAP.datasource,
text: t('category.datasources', { ns: 'plugin' }),
icon: getTypeIcon(PLUGIN_TYPE_SEARCH_MAP.datasource),
},
{
value: PLUGIN_TYPE_SEARCH_MAP.trigger,
text: t('category.triggers', { ns: 'plugin' }),
icon: getTypeIcon(PLUGIN_TYPE_SEARCH_MAP.trigger),
},
{
value: PLUGIN_TYPE_SEARCH_MAP.agent,
text: t('category.agents', { ns: 'plugin' }),
icon: getTypeIcon(PLUGIN_TYPE_SEARCH_MAP.agent),
},
{
value: PLUGIN_TYPE_SEARCH_MAP.extension,
text: t('category.extensions', { ns: 'plugin' }),
icon: getTypeIcon(PLUGIN_TYPE_SEARCH_MAP.extension),
},
{
value: PLUGIN_TYPE_SEARCH_MAP.bundle,
text: t('category.bundles', { ns: 'plugin' }),
icon: getTypeIcon(PLUGIN_TYPE_SEARCH_MAP.bundle),
},
]
const getItemClassName = (isActive: boolean) => {
if (isHeroVariant) {
return cn(
'system-md-medium flex h-8 cursor-pointer items-center rounded-lg px-3 text-text-primary-on-surface transition-all',
isActive
? 'bg-components-button-secondary-bg text-saas-dify-blue-inverted'
: 'hover:bg-state-base-hover',
)
}
return cn(
'system-md-medium flex h-8 cursor-pointer items-center rounded-xl border border-transparent px-3 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
isActive && 'border-components-main-nav-nav-button-border !bg-components-main-nav-nav-button-bg-active !text-components-main-nav-nav-button-text-active shadow-xs',
)
}
return (
<div className={cn(
'flex shrink-0 items-center space-x-2',
!isHeroVariant && 'justify-center bg-background-body py-3',
className,
)}
>
{
options.map(option => (
<div
key={option.value}
className={getItemClassName(activePluginType === option.value)}
onClick={() => {
handleActivePluginTypeChange(option.value)
if (PLUGIN_CATEGORY_WITH_COLLECTIONS.has(option.value)) {
setSearchMode(null)
}
}}
>
{option.icon}
{option.text}
</div>
))
}
</div>
)
}
export default PluginTypeSwitch

View File

@ -1,32 +1,37 @@
import type { PluginsSearchParams, TemplateSearchParams } from './types'
import type { CreatorSearchParams, PluginsSearchParams, TemplateSearchParams, UnifiedSearchParams } from './types'
import type { MarketPlaceInputs } from '@/contract/router'
import { useInfiniteQuery, useQuery } from '@tanstack/react-query'
import { marketplaceQuery } from '@/service/client'
import { getMarketplaceCollectionsAndPlugins, getMarketplacePlugins, getMarketplaceTemplateCollectionsAndTemplates, getMarketplaceTemplates } from './utils'
import { getMarketplaceCollectionsAndPlugins, getMarketplaceCreators, getMarketplacePlugins, getMarketplaceTemplateCollectionsAndTemplates, getMarketplaceTemplates, getMarketplaceUnifiedSearch } from './utils'
export function useMarketplaceCollectionsAndPlugins(
collectionsParams: MarketPlaceInputs['collections']['query'],
collectionsParams: MarketPlaceInputs['plugins']['collections']['query'],
options?: { enabled?: boolean },
) {
return useQuery({
queryKey: marketplaceQuery.collections.queryKey({ input: { query: collectionsParams } }),
queryKey: marketplaceQuery.plugins.collections.queryKey({ input: { query: collectionsParams } }),
queryFn: ({ signal }) => getMarketplaceCollectionsAndPlugins(collectionsParams, { signal }),
enabled: options?.enabled !== false,
})
}
export function useMarketplaceTemplateCollectionsAndTemplates(
query?: { page?: number, page_size?: number, condition?: string },
options?: { enabled?: boolean },
) {
return useQuery({
queryKey: marketplaceQuery.templateCollections.list.queryKey({ input: { query } }),
queryFn: ({ signal }) => getMarketplaceTemplateCollectionsAndTemplates(query, { signal }),
enabled: options?.enabled !== false,
})
}
export function useMarketplacePlugins(
queryParams: PluginsSearchParams | undefined,
options?: { enabled?: boolean },
) {
return useInfiniteQuery({
queryKey: marketplaceQuery.searchAdvanced.queryKey({
queryKey: marketplaceQuery.plugins.searchAdvanced.queryKey({
input: {
body: queryParams!,
params: { kind: queryParams?.type === 'bundle' ? 'bundles' : 'plugins' },
@ -39,12 +44,13 @@ export function useMarketplacePlugins(
return loaded < (lastPage.total || 0) ? nextPage : undefined
},
initialPageParam: 1,
enabled: queryParams !== undefined,
enabled: options?.enabled !== false && queryParams !== undefined,
})
}
export function useMarketplaceTemplates(
queryParams: TemplateSearchParams | undefined,
options?: { enabled?: boolean },
) {
return useInfiniteQuery({
queryKey: marketplaceQuery.templates.searchAdvanced.queryKey({
@ -59,6 +65,38 @@ export function useMarketplaceTemplates(
return loaded < (lastPage.total || 0) ? nextPage : undefined
},
initialPageParam: 1,
enabled: options?.enabled !== false && queryParams !== undefined,
})
}
export function useMarketplaceCreators(
queryParams: CreatorSearchParams | undefined,
) {
return useInfiniteQuery({
queryKey: marketplaceQuery.creators.searchAdvanced.queryKey({
input: {
body: queryParams!,
},
}),
queryFn: ({ pageParam = 1, signal }) => getMarketplaceCreators(queryParams, pageParam, signal),
getNextPageParam: (lastPage) => {
const nextPage = lastPage.page + 1
const loaded = lastPage.page * lastPage.page_size
return loaded < (lastPage.total || 0) ? nextPage : undefined
},
initialPageParam: 1,
enabled: queryParams !== undefined,
})
}
export function useMarketplaceUnifiedSearch(
queryParams: UnifiedSearchParams | undefined,
) {
return useQuery({
queryKey: marketplaceQuery.searchUnified.queryKey({
input: { body: queryParams! },
}),
queryFn: ({ signal }) => getMarketplaceUnifiedSearch(queryParams, signal),
enabled: queryParams !== undefined,
})
}

View File

@ -56,19 +56,19 @@ vi.mock('@/hooks/use-i18n', () => ({
// Mock marketplace state hooks
const {
mockSearchPluginText,
mockHandleSearchPluginTextChange,
mockSearchText,
mockHandleSearchTextChange,
mockFilterPluginTags,
mockHandleFilterPluginTagsChange,
mockActivePluginType,
mockActivePluginCategory,
mockSortValue,
} = vi.hoisted(() => {
return {
mockSearchPluginText: '',
mockHandleSearchPluginTextChange: vi.fn(),
mockSearchText: '',
mockHandleSearchTextChange: vi.fn(),
mockFilterPluginTags: [] as string[],
mockHandleFilterPluginTagsChange: vi.fn(),
mockActivePluginType: 'all',
mockActivePluginCategory: 'all',
mockSortValue: {
sortBy: 'install_count',
sortOrder: 'DESC',
@ -77,13 +77,23 @@ const {
})
vi.mock('../atoms', () => ({
useSearchPluginText: () => [mockSearchPluginText, mockHandleSearchPluginTextChange],
useSearchText: () => [mockSearchText, mockHandleSearchTextChange],
useFilterPluginTags: () => [mockFilterPluginTags, mockHandleFilterPluginTagsChange],
useActivePluginType: () => [mockActivePluginType, vi.fn()],
useActivePluginCategory: () => [mockActivePluginCategory, vi.fn()],
useMarketplaceSortValue: () => mockSortValue,
searchModeAtom: {},
}))
vi.mock('../utils', async () => {
const actual = await vi.importActual<typeof import('../utils')>('../utils')
return {
...actual,
mapUnifiedPluginToPlugin: (item: Plugin) => item,
mapUnifiedTemplateToTemplate: (item: unknown) => item,
mapUnifiedCreatorToCreator: (item: unknown) => item,
}
})
// Mock useTags hook
const mockTags: Tag[] = [
{ name: 'agent', label: 'Agent' },
@ -118,8 +128,15 @@ vi.mock('@/app/components/plugins/hooks', () => ({
let mockDropdownPlugins: Plugin[] = []
vi.mock('../query', () => ({
useMarketplacePlugins: () => ({
data: { pages: [{ plugins: mockDropdownPlugins }] },
useMarketplaceUnifiedSearch: () => ({
data: {
plugins: { items: mockDropdownPlugins, total: mockDropdownPlugins.length },
templates: { items: [], total: 0 },
creators: { items: [], total: 0 },
organizations: { items: [], total: 0 },
page: 1,
page_size: 5,
},
isLoading: false,
}),
}))
@ -548,6 +565,8 @@ describe('SearchDropdown', () => {
<SearchDropdown
query="dropbox"
plugins={[createPlugin()]}
templates={[]}
creators={[]}
onShowAll={vi.fn()}
/>,
)
@ -566,6 +585,8 @@ describe('SearchDropdown', () => {
<SearchDropdown
query="dropbox"
plugins={[createPlugin()]}
templates={[]}
creators={[]}
onShowAll={onShowAll}
/>,
)
@ -615,7 +636,7 @@ describe('SearchBoxWrapper', () => {
const input = screen.getByRole('textbox')
fireEvent.change(input, { target: { value: 'new search' } })
expect(mockHandleSearchPluginTextChange).not.toHaveBeenCalled()
expect(mockHandleSearchTextChange).not.toHaveBeenCalled()
})
it('should commit search when pressing Enter', () => {
@ -625,7 +646,7 @@ describe('SearchBoxWrapper', () => {
fireEvent.change(input, { target: { value: 'new search' } })
fireEvent.keyDown(input, { key: 'Enter' })
expect(mockHandleSearchPluginTextChange).toHaveBeenCalledWith('new search')
expect(mockHandleSearchTextChange).toHaveBeenCalledWith('new search')
})
})

View File

@ -1,6 +1,6 @@
'use client'
import type { PluginsSearchParams } from '../types'
import type { UnifiedSearchParams } from '../types'
import { useTranslation } from '#i18n'
import { useDebounce } from 'ahooks'
import { useSetAtom } from 'jotai'
@ -14,14 +14,10 @@ import {
import { cn } from '@/utils/classnames'
import {
searchModeAtom,
useActivePluginType,
useFilterPluginTags,
useMarketplaceSortValue,
useSearchPluginText,
useSearchText,
} from '../atoms'
import { PLUGIN_TYPE_SEARCH_MAP } from '../constants'
import { useMarketplacePlugins } from '../query'
import { getMarketplaceListFilterType } from '../utils'
import { useMarketplaceUnifiedSearch } from '../query'
import { mapUnifiedCreatorToCreator, mapUnifiedPluginToPlugin, mapUnifiedTemplateToTemplate } from '../utils'
import SearchDropdown from './search-dropdown'
type SearchBoxWrapperProps = {
@ -33,41 +29,44 @@ const SearchBoxWrapper = ({
inputClassName,
}: SearchBoxWrapperProps) => {
const { t } = useTranslation()
const [searchPluginText, handleSearchPluginTextChange] = useSearchPluginText()
const [filterPluginTags] = useFilterPluginTags()
const [activePluginType] = useActivePluginType()
const sort = useMarketplaceSortValue()
const [searchText, handleSearchTextChange] = useSearchText()
const setSearchMode = useSetAtom(searchModeAtom)
const committedSearch = searchPluginText || ''
const committedSearch = searchText || ''
const [draftSearch, setDraftSearch] = useState(committedSearch)
const [isFocused, setIsFocused] = useState(false)
const [isHoveringDropdown, setIsHoveringDropdown] = useState(false)
const debouncedDraft = useDebounce(draftSearch, { wait: 300 })
const hasDraft = !!debouncedDraft.trim()
const dropdownQueryParams = useMemo(() => {
const dropdownQueryParams = useMemo((): UnifiedSearchParams | undefined => {
if (!hasDraft)
return undefined
const filterType = getMarketplaceListFilterType(activePluginType) as PluginsSearchParams['type']
return {
query: debouncedDraft.trim(),
category: activePluginType === PLUGIN_TYPE_SEARCH_MAP.all ? undefined : activePluginType,
tags: filterPluginTags,
sort_by: sort.sortBy,
sort_order: sort.sortOrder,
type: filterType,
page_size: 3,
scope: ['plugins', 'templates', 'creators'],
page_size: 5,
}
}, [activePluginType, debouncedDraft, filterPluginTags, hasDraft, sort.sortBy, sort.sortOrder])
}, [debouncedDraft, hasDraft])
const dropdownQuery = useMarketplacePlugins(dropdownQueryParams)
const dropdownPlugins = dropdownQuery.data?.pages[0]?.plugins || []
const dropdownQuery = useMarketplaceUnifiedSearch(dropdownQueryParams)
const dropdownPlugins = useMemo(
() => (dropdownQuery.data?.plugins.items || []).map(mapUnifiedPluginToPlugin),
[dropdownQuery.data?.plugins.items],
)
const dropdownTemplates = useMemo(
() => (dropdownQuery.data?.templates.items || []).map(mapUnifiedTemplateToTemplate),
[dropdownQuery.data?.templates.items],
)
const dropdownCreators = useMemo(
() => (dropdownQuery.data?.creators.items || []).map(mapUnifiedCreatorToCreator),
[dropdownQuery.data?.creators.items],
)
const handleSubmit = () => {
const trimmed = draftSearch.trim()
if (!trimmed)
return
handleSearchPluginTextChange(trimmed)
handleSearchTextChange(trimmed)
setSearchMode(true)
setIsFocused(false)
}
@ -119,6 +118,8 @@ const SearchBoxWrapper = ({
<SearchDropdown
query={debouncedDraft.trim()}
plugins={dropdownPlugins}
templates={dropdownTemplates}
creators={dropdownCreators}
onShowAll={handleSubmit}
isLoading={dropdownQuery.isLoading}
/>

View File

@ -1,16 +1,62 @@
import type { Creator, Template } from '../../types'
import type { Plugin } from '@/app/components/plugins/types'
import { useTranslation } from '#i18n'
import { RiArrowRightLine } from '@remixicon/react'
import { Fragment } from 'react'
import Loading from '@/app/components/base/loading'
import { useCategories } from '@/app/components/plugins/hooks'
import { useRenderI18nObject } from '@/hooks/use-i18n'
import { cn } from '@/utils/classnames'
import { MARKETPLACE_TYPE_ICON_COMPONENTS } from '../../plugin-type-icons'
import { getPluginDetailLinkInMarketplace } from '../../utils'
import { getCreatorAvatarUrl, getPluginDetailLinkInMarketplace } from '../../utils'
import { getMarketplaceUrl } from '@/utils/var'
const DROPDOWN_PANEL = 'w-[472px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-xl backdrop-blur-sm'
const ICON_BOX_BASE = 'flex h-7 w-7 shrink-0 items-center justify-center overflow-hidden border-[0.5px] border-components-panel-border-subtle bg-background-default-dodge'
const DropdownSection = ({ title, children }: { title: string, children: React.ReactNode }) => (
<div className="p-1">
<div className="system-xs-semibold-uppercase px-3 pb-2 pt-3 text-text-primary">{title}</div>
<div className="flex flex-col">{children}</div>
</div>
)
const DropdownItem = ({ href, icon, children }: {
href: string
icon: React.ReactNode
children: React.ReactNode
}) => (
<a className="flex gap-2 rounded-lg px-3 py-2 hover:bg-state-base-hover" href={href}>
{icon}
<div className="flex min-w-0 flex-1 flex-col gap-0.5">{children}</div>
</a>
)
const IconBox = ({ shape, className, children }: {
shape: 'rounded-lg' | 'rounded-full'
className?: string
children: React.ReactNode
}) => (
<div className={`${ICON_BOX_BASE} ${shape} ${className ?? ''}`}>
{children}
</div>
)
const ItemMeta = ({ items }: { items: (React.ReactNode | string)[] }) => (
<div className="flex items-center gap-1.5 pt-0.5 text-text-tertiary">
{items.filter(Boolean).map((item, i) => (
<Fragment key={i}>
{i > 0 && <span className="system-xs-regular">·</span>}
{typeof item === 'string' ? <span className="system-xs-regular">{item}</span> : item}
</Fragment>
))}
</div>
)
type SearchDropdownProps = {
query: string
plugins: Plugin[]
templates: Template[]
creators: Creator[]
onShowAll: () => void
isLoading?: boolean
}
@ -18,6 +64,8 @@ type SearchDropdownProps = {
const SearchDropdown = ({
query,
plugins,
templates,
creators,
onShowAll,
isLoading = false,
}: SearchDropdownProps) => {
@ -25,66 +73,119 @@ const SearchDropdown = ({
const getValueFromI18nObject = useRenderI18nObject()
const { categoriesMap } = useCategories(true)
const hasResults = plugins.length > 0 || templates.length > 0 || creators.length > 0
return (
<div className="w-[472px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-xl backdrop-blur-sm">
<div className={DROPDOWN_PANEL}>
<div className="flex flex-col">
{isLoading && !plugins.length && (
{isLoading && !hasResults && (
<div className="flex items-center justify-center py-6">
<Loading />
</div>
)}
{!!plugins.length && (
<div className="p-1">
<div className="system-xs-semibold-uppercase px-3 pb-2 pt-3 text-text-primary">
{t('marketplace.searchDropdown.plugins', { ns: 'plugin' })}
</div>
<div className="flex flex-col">
{plugins.map((plugin) => {
const title = getValueFromI18nObject(plugin.label) || plugin.name
const description = getValueFromI18nObject(plugin.brief) || ''
const categoryLabel = categoriesMap[plugin.category]?.label || plugin.category
const installLabel = t('install', { ns: 'plugin', num: plugin.install_count || 0 })
const author = plugin.org || plugin.author || ''
const TypeIcon = MARKETPLACE_TYPE_ICON_COMPONENTS[plugin.category]
return (
<a
key={`${plugin.org}/${plugin.name}`}
className={cn(
'flex gap-2 rounded-lg px-3 py-2 hover:bg-state-base-hover',
)}
href={getPluginDetailLinkInMarketplace(plugin)}
>
<div className="flex h-7 w-7 items-center justify-center overflow-hidden rounded-lg border-[0.5px] border-components-panel-border-subtle bg-background-default-dodge">
{plugins.length > 0 && (
<DropdownSection title={t('marketplace.searchDropdown.plugins', { ns: 'plugin' })}>
{plugins.map((plugin) => {
const title = getValueFromI18nObject(plugin.label) || plugin.name
const description = getValueFromI18nObject(plugin.brief) || ''
const categoryLabel = categoriesMap[plugin.category]?.label || plugin.category
const installLabel = t('install', { ns: 'plugin', num: plugin.install_count || 0 })
const author = plugin.org || plugin.author || ''
const TypeIcon = MARKETPLACE_TYPE_ICON_COMPONENTS[plugin.category]
const categoryNode = (
<div className="flex items-center gap-1">
{TypeIcon && <TypeIcon className="h-4 w-4 text-text-tertiary" />}
<span>{categoryLabel}</span>
</div>
)
return (
<DropdownItem
key={`${plugin.org}/${plugin.name}`}
href={getPluginDetailLinkInMarketplace(plugin)}
icon={(
<IconBox shape="rounded-lg">
<img className="h-full w-full object-cover" src={plugin.icon} alt={title} />
</div>
<div className="flex min-w-0 flex-1 flex-col gap-0.5">
<div className="system-sm-medium truncate text-text-primary">{title}</div>
{!!description && (
<div className="system-xs-regular truncate text-text-tertiary">{description}</div>
)}
<div className="flex items-center gap-1.5 pt-0.5 text-text-tertiary">
<div className="flex items-center gap-1">
{TypeIcon && <TypeIcon className="h-4 w-4 text-text-tertiary" />}
<span className="system-xs-regular">{categoryLabel}</span>
</div>
<span className="system-xs-regular">·</span>
<span className="system-xs-regular">
{t('marketplace.searchDropdown.byAuthor', { ns: 'plugin', author })}
</span>
<span className="system-xs-regular">·</span>
<span className="system-xs-regular">{installLabel}</span>
</div>
</div>
</a>
)
})}
</div>
</div>
</IconBox>
)}
>
<div className="system-sm-medium truncate text-text-primary">{title}</div>
{!!description && (
<div className="system-xs-regular truncate text-text-tertiary">{description}</div>
)}
<ItemMeta
items={[
categoryNode,
t('marketplace.searchDropdown.byAuthor', { ns: 'plugin', author }),
installLabel,
]}
/>
</DropdownItem>
)
})}
</DropdownSection>
)}
{templates.length > 0 && (
<DropdownSection title={t('templates', { ns: 'plugin' })}>
{templates.map(template => (
<DropdownItem
key={template.template_id}
href={getMarketplaceUrl(`/templates/${template.template_id}`)}
icon={(
<IconBox shape="rounded-lg" className="text-base">
{template.icon || '📄'}
</IconBox>
)}
>
<div className="system-sm-medium truncate text-text-primary">{template.name}</div>
<ItemMeta
items={[
t('marketplace.searchDropdown.byAuthor', { ns: 'plugin', author: template.author }),
...(template.tags.length > 0
? [<span className="system-xs-regular truncate">{template.tags.join(', ')}</span>]
: []),
]}
/>
</DropdownItem>
))}
</DropdownSection>
)}
{creators.length > 0 && (
<DropdownSection title={t('marketplace.searchFilterCreators', { ns: 'plugin' })}>
{creators.map(creator => (
<DropdownItem
key={creator.unique_handle}
href={getMarketplaceUrl(`/creators/${creator.unique_handle}`)}
icon={(
<IconBox shape="rounded-full">
<img
className="h-full w-full object-cover"
src={getCreatorAvatarUrl(creator.unique_handle)}
alt={creator.display_name}
/>
</IconBox>
)}
>
<div className="flex items-center gap-1.5">
<span className="system-sm-medium truncate text-text-primary">{creator.display_name}</span>
<span className="system-xs-regular text-text-tertiary">
@
{creator.unique_handle}
</span>
</div>
{!!creator.description && (
<div className="system-xs-regular truncate text-text-tertiary">{creator.description}</div>
)}
</DropdownItem>
))}
</DropdownSection>
)}
</div>
<div className="border-t border-divider-subtle p-1">
<button
className="group flex w-full items-center justify-between rounded-lg px-3 py-2 text-left"
className="group flex w-full items-center justify-between rounded-lg px-3 py-2 text-left hover:bg-state-base-hover"
onClick={onShowAll}
type="button"
>
@ -95,7 +196,7 @@ const SearchDropdown = ({
<span className="system-2xs-medium-uppercase rounded-[5px] border border-divider-deep px-1.5 py-0.5 text-text-tertiary group-hover:hidden">
{t('marketplace.searchDropdown.enter', { ns: 'plugin' })}
</span>
<RiArrowRightLine className="hidden h-5 w-5 text-text-tertiary group-hover:block" />
<RiArrowRightLine className="hidden h-[18px] w-[18px] text-text-accent group-hover:block" />
</span>
</button>
</div>

View File

@ -0,0 +1,60 @@
'use client'
import type { Creator } from '../types'
import { getCreatorAvatarUrl } from '../utils'
import { useTranslation } from '#i18n'
import { getMarketplaceUrl } from '@/utils/var'
type CreatorCardProps = {
creator: Creator
}
const CreatorCard = ({ creator }: CreatorCardProps) => {
const { t } = useTranslation()
const href = getMarketplaceUrl(`/creators/${creator.unique_handle}`)
const displayName = creator.display_name || creator.name
return (
<a
href={href}
target="_blank"
rel="noopener noreferrer"
className="flex flex-col gap-2 rounded-xl border border-components-panel-border-subtle bg-components-panel-bg p-4 transition-colors hover:bg-state-base-hover"
>
<div className="flex items-center gap-3">
<div className="h-12 w-12 shrink-0 overflow-hidden rounded-full border border-components-panel-border-subtle bg-background-default-dodge">
<img
src={getCreatorAvatarUrl(creator.unique_handle)}
alt={displayName}
className="h-full w-full object-cover"
/>
</div>
<div className="min-w-0 flex-1">
<div className="system-md-medium truncate text-text-primary">{displayName}</div>
<div className="system-sm-regular text-text-tertiary">
@
{creator.unique_handle}
</div>
</div>
</div>
{!!creator.description && (
<div className="system-sm-regular line-clamp-2 text-text-secondary">
{creator.description}
</div>
)}
{(creator.plugin_count !== undefined || creator.template_count !== undefined) && (
<div className="system-xs-regular text-text-tertiary">
{creator.plugin_count || 0}
{' '}
{t('plugins', { ns: 'plugin' }).toLowerCase()}
{' · '}
{creator.template_count || 0}
{' '}
{t('templates', { ns: 'plugin' }).toLowerCase()}
</div>
)}
</a>
)
}
export default CreatorCard

View File

@ -0,0 +1,266 @@
'use client'
import type { SearchTab } from '../search-params'
import type { Creator, PluginsSearchParams, Template } from '../types'
import type { Plugin } from '@/app/components/plugins/types'
import { useTranslation } from '#i18n'
import { useDebounce } from 'ahooks'
import { useCallback, useMemo } from 'react'
import Loading from '@/app/components/base/loading'
import SegmentedControl from '@/app/components/base/segmented-control'
import { useMarketplaceSortValue, useSearchTab, useSearchText } from '../atoms'
import { PLUGIN_TYPE_SEARCH_MAP } from '../constants'
import Empty from '../empty'
import { useMarketplaceContainerScroll } from '../hooks'
import CardWrapper from '../list/card-wrapper'
import TemplateCard from '../list/template-card'
import { useMarketplaceCreators, useMarketplacePlugins, useMarketplaceTemplates } from '../query'
import SortDropdown from '../sort-dropdown'
import { getPluginFilterType, mapTemplateDetailToTemplate } from '../utils'
import CreatorCard from './creator-card'
const PAGE_SIZE = 40
const ZERO_WIDTH_SPACE = '\u200B'
type SortValue = { sortBy: string, sortOrder: string }
function mapSortForTemplates(sort: SortValue): { sort_by: string, sort_order: string } {
const sortBy = sort.sortBy === 'install_count' ? 'usage_count' : sort.sortBy === 'version_updated_at' ? 'updated_at' : sort.sortBy
return { sort_by: sortBy, sort_order: sort.sortOrder }
}
function mapSortForCreators(sort: SortValue): { sort_by: string, sort_order: string } {
const sortBy = sort.sortBy === 'install_count' ? 'created_at' : sort.sortBy === 'version_updated_at' ? 'updated_at' : sort.sortBy
return { sort_by: sortBy, sort_order: sort.sortOrder }
}
const SearchPage = () => {
const { t } = useTranslation()
const [searchText] = useSearchText()
const debouncedQuery = useDebounce(searchText, { wait: 500 })
const [searchTabParam, setSearchTab] = useSearchTab()
const searchTab = (searchTabParam || 'all') as SearchTab
const sort = useMarketplaceSortValue()
const query = debouncedQuery === ZERO_WIDTH_SPACE ? '' : debouncedQuery.trim()
const hasQuery = !!searchText && (!!query || searchText === ZERO_WIDTH_SPACE)
const pluginsParams = useMemo(() => {
if (!hasQuery)
return undefined
return {
query,
page_size: searchTab === 'all' ? 6 : PAGE_SIZE,
sort_by: sort.sortBy,
sort_order: sort.sortOrder,
type: getPluginFilterType(PLUGIN_TYPE_SEARCH_MAP.all),
} as PluginsSearchParams
}, [hasQuery, query, searchTab, sort])
const templatesParams = useMemo(() => {
if (!hasQuery)
return undefined
const { sort_by, sort_order } = mapSortForTemplates(sort)
return {
query,
page_size: searchTab === 'all' ? 6 : PAGE_SIZE,
sort_by,
sort_order,
}
}, [hasQuery, query, searchTab, sort])
const creatorsParams = useMemo(() => {
if (!hasQuery)
return undefined
const { sort_by, sort_order } = mapSortForCreators(sort)
return {
query,
page_size: searchTab === 'all' ? 6 : PAGE_SIZE,
sort_by,
sort_order,
}
}, [hasQuery, query, searchTab, sort])
const fetchPlugins = searchTab === 'all' || searchTab === 'plugins'
const fetchTemplates = searchTab === 'all' || searchTab === 'templates'
const fetchCreators = searchTab === 'all' || searchTab === 'creators'
const pluginsQuery = useMarketplacePlugins(fetchPlugins ? pluginsParams : undefined)
const templatesQuery = useMarketplaceTemplates(fetchTemplates ? templatesParams : undefined)
const creatorsQuery = useMarketplaceCreators(fetchCreators ? creatorsParams : undefined)
const plugins = pluginsQuery.data?.pages.flatMap(p => p.plugins) ?? []
const pluginsTotal = pluginsQuery.data?.pages[0]?.total ?? 0
const templates = useMemo(
() => (templatesQuery.data?.pages.flatMap(p => p.templates) ?? []).map(mapTemplateDetailToTemplate),
[templatesQuery.data],
)
const templatesTotal = templatesQuery.data?.pages[0]?.total ?? 0
const creators = creatorsQuery.data?.pages.flatMap(p => p.creators) ?? []
const creatorsTotal = creatorsQuery.data?.pages[0]?.total ?? 0
const handleScrollLoadMore = useCallback(() => {
if (searchTab === 'plugins' && pluginsQuery.hasNextPage && !pluginsQuery.isFetching)
pluginsQuery.fetchNextPage()
else if (searchTab === 'templates' && templatesQuery.hasNextPage && !templatesQuery.isFetching)
templatesQuery.fetchNextPage()
else if (searchTab === 'creators' && creatorsQuery.hasNextPage && !creatorsQuery.isFetching)
creatorsQuery.fetchNextPage()
}, [searchTab, pluginsQuery, templatesQuery, creatorsQuery])
useMarketplaceContainerScroll(handleScrollLoadMore)
const tabOptions = [
{ value: 'all', text: t('marketplace.searchFilterAll', { ns: 'plugin' }), count: pluginsTotal + templatesTotal + creatorsTotal },
{ value: 'templates', text: t('templates', { ns: 'plugin' }), count: templatesTotal },
{ value: 'plugins', text: t('plugins', { ns: 'plugin' }), count: pluginsTotal },
{ value: 'creators', text: t('marketplace.searchFilterCreators', { ns: 'plugin' }), count: creatorsTotal },
]
const isLoading = (fetchPlugins && pluginsQuery.isLoading)
|| (fetchTemplates && templatesQuery.isLoading)
|| (fetchCreators && creatorsQuery.isLoading)
const isFetchingNextPage = pluginsQuery.isFetchingNextPage
|| templatesQuery.isFetchingNextPage
|| creatorsQuery.isFetchingNextPage
const renderPluginsSection = (items: Plugin[], limit?: number) => {
const toShow = limit ? items.slice(0, limit) : items
if (toShow.length === 0)
return null
return (
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
{toShow.map(plugin => (
<CardWrapper key={`${plugin.org}/${plugin.name}`} plugin={plugin} showInstallButton={false} />
))}
</div>
)
}
const renderTemplatesSection = (items: Template[], limit?: number) => {
const toShow = limit ? items.slice(0, limit) : items
if (toShow.length === 0)
return null
return (
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
{toShow.map(template => (
<div key={template.template_id}>
<TemplateCard template={template} />
</div>
))}
</div>
)
}
const renderCreatorsSection = (items: Creator[], limit?: number) => {
const toShow = limit ? items.slice(0, limit) : items
if (toShow.length === 0)
return null
return (
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
{toShow.map(creator => (
<CreatorCard key={creator.unique_handle} creator={creator} />
))}
</div>
)
}
const renderAllTab = () => (
<div className="flex flex-col gap-8 py-4">
{templates.length > 0 && (
<section>
<h3 className="title-xl-semi-bold mb-3 text-text-primary">
{t('templates', { ns: 'plugin' })}
</h3>
{renderTemplatesSection(templates, 6)}
</section>
)}
{plugins.length > 0 && (
<section>
<h3 className="title-xl-semi-bold mb-3 text-text-primary">
{t('plugins', { ns: 'plugin' })}
</h3>
{renderPluginsSection(plugins, 6)}
</section>
)}
{creators.length > 0 && (
<section>
<h3 className="title-xl-semi-bold mb-3 text-text-primary">
{t('marketplace.searchFilterCreators', { ns: 'plugin' })}
</h3>
{renderCreatorsSection(creators, 6)}
</section>
)}
{!isLoading && plugins.length === 0 && templates.length === 0 && creators.length === 0 && (
<Empty />
)}
</div>
)
const renderPluginsTab = () => {
if (plugins.length === 0 && !pluginsQuery.isLoading)
return <Empty />
return (
<div className="py-4">
{renderPluginsSection(plugins)}
</div>
)
}
const renderTemplatesTab = () => {
if (templates.length === 0 && !templatesQuery.isLoading)
return <Empty />
return (
<div className="py-4">
{renderTemplatesSection(templates)}
</div>
)
}
const renderCreatorsTab = () => {
if (creators.length === 0 && !creatorsQuery.isLoading)
return <Empty />
return (
<div className="py-4">
{renderCreatorsSection(creators)}
</div>
)
}
return (
<div
style={{ scrollbarGutter: 'stable' }}
className="relative flex grow flex-col bg-background-default-subtle px-12 py-2"
>
<div className="mb-4 flex items-center justify-between pt-3">
<SegmentedControl
size="large"
activeState="accentLight"
value={searchTab}
onChange={v => setSearchTab(v as SearchTab)}
options={tabOptions}
/>
<SortDropdown />
</div>
{isLoading && (
<div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
<Loading />
</div>
)}
{!isLoading && (
<>
{searchTab === 'all' && renderAllTab()}
{searchTab === 'plugins' && renderPluginsTab()}
{searchTab === 'templates' && renderTemplatesTab()}
{searchTab === 'creators' && renderCreatorsTab()}
</>
)}
{isFetchingNextPage && <Loading className="my-3" />}
</div>
)
}
export default SearchPage

View File

@ -1,12 +1,13 @@
import type { ActivePluginType } from './constants'
import { parseAsArrayOf, parseAsString, parseAsStringEnum } from 'nuqs/server'
import { PLUGIN_TYPE_SEARCH_MAP } from './constants'
export type CreationType = 'plugins' | 'templates'
export const marketplaceSearchParamsParsers = {
category: parseAsStringEnum<ActivePluginType>(Object.values(PLUGIN_TYPE_SEARCH_MAP) as ActivePluginType[]).withDefault('all').withOptions({ history: 'replace', clearOnDefault: false }),
category: parseAsString.withDefault('all').withOptions({ history: 'replace', clearOnDefault: false }),
q: parseAsString.withDefault('').withOptions({ history: 'replace' }),
tags: parseAsArrayOf(parseAsString).withDefault([]).withOptions({ history: 'replace' }),
creationType: parseAsStringEnum<CreationType>(['plugins', 'templates']).withDefault('plugins').withOptions({ history: 'replace' }),
searchTab: parseAsStringEnum<SearchTab>(['all', 'plugins', 'templates', 'creators']).withDefault('').withOptions({ history: 'replace' }),
}
export type SearchTab = 'all' | 'plugins' | 'templates' | 'creators' | ''

View File

@ -1,25 +1,29 @@
'use client'
import { useTranslation } from '#i18n'
import { useSearchPluginText } from './atoms'
import { useSearchText } from './atoms'
const SearchResultsHeader = () => {
type SearchResultsHeaderProps = {
marketplaceNav?: React.ReactNode
}
const SearchResultsHeader = ({ marketplaceNav }: SearchResultsHeaderProps) => {
const { t } = useTranslation('plugin')
const [searchPluginText] = useSearchPluginText()
const [searchText] = useSearchText()
return (
<div className="px-12 py-4">
<div className="flex items-center gap-1 system-xs-regular text-text-tertiary">
<div className="relative px-7 py-4">
{marketplaceNav}
<div className="system-xs-regular mt-8 flex items-center gap-1 px-5 text-text-tertiary ">
<span>{t('marketplace.searchBreadcrumbMarketplace')}</span>
<span className="text-text-quaternary">/</span>
<span>{t('marketplace.searchBreadcrumbSearch')}</span>
</div>
<div className="mt-2 flex items-end gap-2">
<div className="mt-2 flex items-end gap-2 px-5 ">
<div className="title-4xl-semi-bold text-text-primary">
{t('marketplace.searchResultsFor')}
</div>
<div className="relative title-4xl-semi-bold text-saas-dify-blue-accessible">
<span className="relative z-10">{searchPluginText || ''}</span>
<div className="title-4xl-semi-bold relative text-saas-dify-blue-accessible">
<span className="relative z-10">{searchText || ''}</span>
<span className="absolute bottom-0 left-0 right-0 h-3 bg-saas-dify-blue-accessible opacity-10" />
</div>
</div>

View File

@ -2,24 +2,31 @@ import type { PluginsSearchParams, TemplateSearchParams } from './types'
import { useDebounce } from 'ahooks'
import { useSearchParams } from 'next/navigation'
import { useCallback, useMemo } from 'react'
import { useActivePluginType, useFilterPluginTags, useMarketplaceSearchMode, useMarketplaceSortValue, useSearchPluginText } from './atoms'
import { PLUGIN_TYPE_SEARCH_MAP } from './constants'
import { useActivePluginCategory, useActiveTemplateCategory, useFilterPluginTags, useMarketplaceSearchMode, useMarketplaceSortValue, useSearchText } from './atoms'
import { CATEGORY_ALL } from './constants'
import { useMarketplaceContainerScroll } from './hooks'
import { useMarketplaceCollectionsAndPlugins, useMarketplacePlugins, useMarketplaceTemplateCollectionsAndTemplates, useMarketplaceTemplates } from './query'
import { getCollectionsParams, getMarketplaceListFilterType, mapTemplateDetailToTemplate } from './utils'
import { getCollectionsParams, getPluginFilterType, mapTemplateDetailToTemplate } from './utils'
const getCategory = (category: string) => {
if (category === CATEGORY_ALL)
return undefined
return category
}
/**
* Hook for plugins marketplace data
* Only fetches plugins-related data
*/
export function usePluginsMarketplaceData() {
const [searchPluginTextOriginal] = useSearchPluginText()
const searchPluginText = useDebounce(searchPluginTextOriginal, { wait: 500 })
export function usePluginsMarketplaceData(enabled = true) {
const [searchTextOriginal] = useSearchText()
const searchText = useDebounce(searchTextOriginal, { wait: 500 })
const [filterPluginTags] = useFilterPluginTags()
const [activePluginType] = useActivePluginType()
const [activePluginCategory] = useActivePluginCategory()
const collectionsQuery = useMarketplaceCollectionsAndPlugins(
getCollectionsParams(activePluginType),
const pluginsCollectionsQuery = useMarketplaceCollectionsAndPlugins(
getCollectionsParams(activePluginCategory),
{ enabled },
)
const sort = useMarketplaceSortValue()
@ -28,16 +35,16 @@ export function usePluginsMarketplaceData() {
if (!isSearchMode)
return undefined
return {
query: searchPluginText,
category: activePluginType === PLUGIN_TYPE_SEARCH_MAP.all ? undefined : activePluginType,
query: searchText,
category: getCategory(activePluginCategory),
tags: filterPluginTags,
sort_by: sort.sortBy,
sort_order: sort.sortOrder,
type: getMarketplaceListFilterType(activePluginType),
type: getPluginFilterType(activePluginCategory),
}
}, [isSearchMode, searchPluginText, activePluginType, filterPluginTags, sort])
}, [isSearchMode, searchText, activePluginCategory, filterPluginTags, sort])
const pluginsQuery = useMarketplacePlugins(queryParams)
const pluginsQuery = useMarketplacePlugins(queryParams, { enabled })
const { hasNextPage, fetchNextPage, isFetching, isFetchingNextPage } = pluginsQuery
const handlePageChange = useCallback(() => {
@ -49,12 +56,12 @@ export function usePluginsMarketplaceData() {
useMarketplaceContainerScroll(handlePageChange)
return {
marketplaceCollections: collectionsQuery.data?.marketplaceCollections,
marketplaceCollectionPluginsMap: collectionsQuery.data?.marketplaceCollectionPluginsMap,
pluginCollections: pluginsCollectionsQuery.data?.marketplaceCollections,
pluginCollectionPluginsMap: pluginsCollectionsQuery.data?.marketplaceCollectionPluginsMap,
plugins: pluginsQuery.data?.pages.flatMap(page => page.plugins),
pluginsTotal: pluginsQuery.data?.pages[0]?.total,
page: pluginsQuery.data?.pages.length || 1,
isLoading: collectionsQuery.isLoading || pluginsQuery.isLoading,
isLoading: pluginsCollectionsQuery.isLoading || pluginsQuery.isLoading,
isFetchingNextPage,
}
}
@ -63,20 +70,20 @@ export function usePluginsMarketplaceData() {
* Hook for templates marketplace data
* Only fetches templates-related data
*/
export function useTemplatesMarketplaceData() {
export function useTemplatesMarketplaceData(enabled = true) {
// Reuse existing atoms for search and sort
const [searchTextOriginal] = useSearchPluginText()
const [searchTextOriginal] = useSearchText()
const searchText = useDebounce(searchTextOriginal, { wait: 500 })
const [activeCategory] = useActivePluginType()
const [activeTemplateCategory] = useActiveTemplateCategory()
// Template collections query (for non-search mode)
const templateCollectionsQuery = useMarketplaceTemplateCollectionsAndTemplates()
const templateCollectionsQuery = useMarketplaceTemplateCollectionsAndTemplates(undefined, { enabled })
// Sort value
const sort = useMarketplaceSortValue()
// Search mode: when there's search text or non-default category
const isSearchMode = !!searchText || (activeCategory !== PLUGIN_TYPE_SEARCH_MAP.all)
const isSearchMode = useMarketplaceSearchMode()
// Build query params for search mode
const queryParams = useMemo((): TemplateSearchParams | undefined => {
@ -84,14 +91,14 @@ export function useTemplatesMarketplaceData() {
return undefined
return {
query: searchText,
categories: activeCategory === PLUGIN_TYPE_SEARCH_MAP.all ? undefined : [activeCategory],
categories: activeTemplateCategory === CATEGORY_ALL ? undefined : [activeTemplateCategory],
sort_by: sort.sortBy,
sort_order: sort.sortOrder,
}
}, [isSearchMode, searchText, activeCategory, sort])
}, [isSearchMode, searchText, activeTemplateCategory, sort])
// Templates search query (for search mode)
const templatesQuery = useMarketplaceTemplates(queryParams)
const templatesQuery = useMarketplaceTemplates(queryParams, { enabled })
const { hasNextPage, fetchNextPage, isFetching, isFetchingNextPage } = templatesQuery
// Pagination handler
@ -103,93 +110,42 @@ export function useTemplatesMarketplaceData() {
// Scroll pagination
useMarketplaceContainerScroll(handlePageChange)
// Compute flat templates list from collection map (for non-search mode)
const { collectionTemplates, collectionTemplatesTotal } = useMemo(() => {
const templateCollectionTemplatesMap = templateCollectionsQuery.data?.templateCollectionTemplatesMap
if (!templateCollectionTemplatesMap) {
return { collectionTemplates: undefined, collectionTemplatesTotal: 0 }
}
const allTemplates = Object.values(templateCollectionTemplatesMap).flat()
// Deduplicate templates by template_id
const uniqueTemplates = allTemplates.filter(
(template, index, self) => index === self.findIndex(t => t.template_id === template.template_id),
)
return {
collectionTemplates: uniqueTemplates,
collectionTemplatesTotal: uniqueTemplates.length,
}
}, [templateCollectionsQuery.data?.templateCollectionTemplatesMap])
const searchTemplates = useMemo(() => {
const rawTemplates = templatesQuery.data?.pages.flatMap(page => page.templates) || []
return rawTemplates.map(mapTemplateDetailToTemplate)
}, [templatesQuery.data])
// Return search results when in search mode, otherwise return collection data
if (isSearchMode) {
return {
isSearchMode,
templateCollections: undefined,
templateCollectionTemplatesMap: undefined,
templates: searchTemplates,
templatesTotal: templatesQuery.data?.pages[0]?.total,
page: templatesQuery.data?.pages.length || 1,
isLoading: templatesQuery.isLoading,
isFetchingNextPage,
}
}
return {
isSearchMode,
templateCollections: templateCollectionsQuery.data?.templateCollections,
templateCollectionTemplatesMap: templateCollectionsQuery.data?.templateCollectionTemplatesMap,
templates: collectionTemplates,
templatesTotal: collectionTemplatesTotal,
page: 1,
isLoading: templateCollectionsQuery.isLoading,
isFetchingNextPage: false,
templates: templatesQuery.data?.pages.flatMap(page => page.templates).map(mapTemplateDetailToTemplate),
templatesTotal: templatesQuery.data?.pages[0]?.total,
page: templatesQuery.data?.pages.length || 1,
isLoading: templateCollectionsQuery.isLoading || templatesQuery.isLoading,
isFetchingNextPage,
}
}
type PluginsMarketplaceData = ReturnType<typeof usePluginsMarketplaceData>
type TemplatesMarketplaceData = ReturnType<typeof useTemplatesMarketplaceData>
type MarketplaceData
= ({ creationType: 'plugins' } & PluginsMarketplaceData)
| ({ creationType: 'templates' } & TemplatesMarketplaceData)
/**
* Main hook that routes to appropriate data based on creationType
* Returns either plugins or templates data based on URL parameter
*/
export function useMarketplaceData() {
export function useMarketplaceData(): MarketplaceData {
const searchParams = useSearchParams()
const creationType = (searchParams.get('creationType') || 'plugins') as 'plugins' | 'templates'
const pluginsData = usePluginsMarketplaceData()
const templatesData = useTemplatesMarketplaceData()
const pluginsData = usePluginsMarketplaceData(creationType === 'plugins')
const templatesData = useTemplatesMarketplaceData(creationType === 'templates')
if (creationType === 'templates') {
return {
creationType,
isSearchMode: templatesData.isSearchMode,
// Templates-specific fields
templateCollections: templatesData.templateCollections,
templateCollectionTemplatesMap: templatesData.templateCollectionTemplatesMap,
templates: templatesData.templates,
templatesTotal: templatesData.templatesTotal,
page: templatesData.page,
isLoading: templatesData.isLoading,
isFetchingNextPage: templatesData.isFetchingNextPage,
...templatesData,
}
}
// Default: plugins
return {
creationType,
isSearchMode: false, // plugins uses useMarketplaceSearchMode separately
// Plugins-specific fields
marketplaceCollections: pluginsData.marketplaceCollections,
marketplaceCollectionPluginsMap: pluginsData.marketplaceCollectionPluginsMap,
plugins: pluginsData.plugins,
pluginsTotal: pluginsData.pluginsTotal,
page: pluginsData.page,
isLoading: pluginsData.isLoading,
isFetchingNextPage: pluginsData.isFetchingNextPage,
...pluginsData,
}
}

View File

@ -0,0 +1,78 @@
'use client'
import { useTranslation } from '#i18n'
import { RiFileList3Line } from '@remixicon/react'
import { useActiveTemplateCategory } from './atoms'
import CategorySwitch from './category-switch'
import { CATEGORY_ALL, TEMPLATE_CATEGORY_MAP } from './constants'
import { Playground } from '@/app/components/base/icons/src/vender/plugin'
type TemplateCategorySwitchProps = {
className?: string
variant?: 'default' | 'hero'
}
const TemplateCategorySwitch = ({
className,
variant = 'default',
}: TemplateCategorySwitchProps) => {
const { t } = useTranslation()
const [activeTemplateCategory, handleActiveTemplateCategoryChange] = useActiveTemplateCategory()
const isHeroVariant = variant === 'hero'
const options = [
{
value: CATEGORY_ALL,
text: t('marketplace.templateCategory.all', { ns: 'plugin' }),
icon: isHeroVariant ? <Playground className="mr-1.5 h-4 w-4" /> : null,
},
{
value: TEMPLATE_CATEGORY_MAP.marketing,
text: t('marketplace.templateCategory.marketing', { ns: 'plugin' }),
icon: null,
},
{
value: TEMPLATE_CATEGORY_MAP.sales,
text: t('marketplace.templateCategory.sales', { ns: 'plugin' }),
icon: null,
},
{
value: TEMPLATE_CATEGORY_MAP.support,
text: t('marketplace.templateCategory.support', { ns: 'plugin' }),
icon: null,
},
{
value: TEMPLATE_CATEGORY_MAP.operations,
text: t('marketplace.templateCategory.operations', { ns: 'plugin' }),
icon: null,
},
{
value: TEMPLATE_CATEGORY_MAP.it,
text: t('marketplace.templateCategory.it', { ns: 'plugin' }),
icon: null,
},
{
value: TEMPLATE_CATEGORY_MAP.knowledge,
text: t('marketplace.templateCategory.knowledge', { ns: 'plugin' }),
icon: null,
},
{
value: TEMPLATE_CATEGORY_MAP.design,
text: t('marketplace.templateCategory.design', { ns: 'plugin' }),
icon: null,
},
]
return (
<CategorySwitch
className={className}
variant={variant}
options={options}
activeValue={activeTemplateCategory}
onChange={handleActiveTemplateCategoryChange}
/>
)
}
export default TemplateCategorySwitch

View File

@ -6,7 +6,7 @@ export type SearchParamsFromCollection = {
sort_order?: string
}
export type MarketplaceCollection = {
export type PluginCollection = {
name: string
label: Record<string, string>
description: Record<string, string>
@ -18,7 +18,7 @@ export type MarketplaceCollection = {
}
export type MarketplaceCollectionsResponse = {
collections: MarketplaceCollection[]
collections: PluginCollection[]
total: number
}
@ -184,3 +184,52 @@ export type TemplateSearchParams = {
sort_order?: string
languages?: string[]
}
// Unified search types
export type UnifiedSearchScope = 'creators' | 'organizations' | 'plugins' | 'templates'
export type UnifiedSearchParams = {
query: string
scope?: UnifiedSearchScope[]
page?: number
page_size?: number
}
// Plugin item shape from /search/unified (superset of Plugin with index_id)
export type UnifiedPluginItem = Plugin & {
index_id: string
}
// Template item shape from /search/unified (differs from TemplateDetail)
export type UnifiedTemplateItem = {
id: string
index_id: string
template_name: string
icon: string
icon_file_key: string
categories: string[]
overview: string
readme: string
partner_link: string
publisher_handle: string
publisher_type: 'individual' | 'organization'
status: string
usage_count: number
created_at: string
updated_at: string
}
// Creator item shape from /search/unified (superset of Creator with index_id)
export type UnifiedCreatorItem = Creator & {
index_id: string
}
export type UnifiedSearchResponse = {
data: {
creators: { items: UnifiedCreatorItem[], total: number }
organizations: { items: unknown[], total: number }
plugins: { items: UnifiedPluginItem[], total: number }
templates: { items: UnifiedTemplateItem[], total: number }
}
}

View File

@ -1,12 +1,19 @@
import type { ActivePluginType } from './constants'
import type {
CollectionsAndPluginsSearchParams,
MarketplaceCollection,
Creator,
CreatorSearchParams,
PluginCollection,
PluginsSearchParams,
Template,
TemplateCollection,
TemplateDetail,
TemplateSearchParams,
UnifiedCreatorItem,
UnifiedPluginItem,
UnifiedSearchParams,
UnifiedSearchResponse,
UnifiedTemplateItem,
} from '@/app/components/plugins/marketplace/types'
import type { Plugin } from '@/app/components/plugins/types'
import { PluginCategoryEnum } from '@/app/components/plugins/types'
@ -21,12 +28,21 @@ type MarketplaceFetchOptions = {
signal?: AbortSignal
}
/** Get a string key from an item by field name (e.g. plugin_id, template_id). */
export function getItemKeyByField<T>(item: T, field: keyof T): string {
return String((item as Record<string, unknown>)[field as string])
}
export const getPluginIconInMarketplace = (plugin: Plugin) => {
if (plugin.type === 'bundle')
return `${MARKETPLACE_API_PREFIX}/bundles/${plugin.org}/${plugin.name}/icon`
return `${MARKETPLACE_API_PREFIX}/plugins/${plugin.org}/${plugin.name}/icon`
}
export const getCreatorAvatarUrl = (uniqueHandle: string) => {
return `${MARKETPLACE_API_PREFIX}/creators/${uniqueHandle}/avatar`
}
export const getFormattedPlugin = (bundle: Plugin): Plugin => {
if (bundle.type === 'bundle') {
return {
@ -63,7 +79,7 @@ export const getMarketplacePluginsByCollectionId = async (
let plugins: Plugin[] = []
try {
const marketplaceCollectionPluginsDataJson = await marketplaceClient.collectionPlugins({
const marketplaceCollectionPluginsDataJson = await marketplaceClient.plugins.collectionPlugins({
params: {
collectionId,
},
@ -85,10 +101,10 @@ export const getMarketplaceCollectionsAndPlugins = async (
query?: CollectionsAndPluginsSearchParams,
options?: MarketplaceFetchOptions,
) => {
let marketplaceCollections: MarketplaceCollection[] = []
let marketplaceCollectionPluginsMap: Record<string, Plugin[]> = {}
let pluginCollections: PluginCollection[] = []
let pluginCollectionPluginsMap: Record<string, Plugin[]> = {}
try {
const marketplaceCollectionsDataJson = await marketplaceClient.collections({
const collectionsDataJson = await marketplaceClient.plugins.collections({
query: {
...query,
page: 1,
@ -97,22 +113,22 @@ export const getMarketplaceCollectionsAndPlugins = async (
}, {
signal: options?.signal,
})
marketplaceCollections = marketplaceCollectionsDataJson.data?.collections || []
await Promise.all(marketplaceCollections.map(async (collection: MarketplaceCollection) => {
pluginCollections = collectionsDataJson.data?.collections || []
await Promise.all(pluginCollections.map(async (collection: PluginCollection) => {
const plugins = await getMarketplacePluginsByCollectionId(collection.name, query, options)
marketplaceCollectionPluginsMap[collection.name] = plugins
pluginCollectionPluginsMap[collection.name] = plugins
}))
}
// eslint-disable-next-line unused-imports/no-unused-vars
catch (e) {
marketplaceCollections = []
marketplaceCollectionPluginsMap = {}
pluginCollections = []
pluginCollectionPluginsMap = {}
}
return {
marketplaceCollections,
marketplaceCollectionPluginsMap,
marketplaceCollections: pluginCollections,
marketplaceCollectionPluginsMap: pluginCollectionPluginsMap,
}
}
@ -202,7 +218,7 @@ export const getMarketplacePlugins = async (
} = queryParams
try {
const res = await marketplaceClient.searchAdvanced({
const res = await marketplaceClient.plugins.searchAdvanced({
params: {
kind: type === 'bundle' ? 'bundles' : 'plugins',
},
@ -235,7 +251,7 @@ export const getMarketplacePlugins = async (
}
}
export const getMarketplaceListCondition = (pluginType: string) => {
export const getPluginCondition = (pluginType: string) => {
if ([PluginCategoryEnum.tool, PluginCategoryEnum.agent, PluginCategoryEnum.model, PluginCategoryEnum.datasource, PluginCategoryEnum.trigger].includes(pluginType as PluginCategoryEnum))
return `category=${pluginType}`
@ -248,7 +264,7 @@ export const getMarketplaceListCondition = (pluginType: string) => {
return ''
}
export const getMarketplaceListFilterType = (category: ActivePluginType) => {
export const getPluginFilterType = (category: ActivePluginType) => {
if (category === PLUGIN_TYPE_SEARCH_MAP.all)
return undefined
@ -264,8 +280,8 @@ export function getCollectionsParams(category: ActivePluginType): CollectionsAnd
}
return {
category,
condition: getMarketplaceListCondition(category),
type: getMarketplaceListFilterType(category),
condition: getPluginCondition(category),
type: getPluginFilterType(category),
}
}
@ -326,3 +342,192 @@ export const getMarketplaceTemplates = async (
}
}
}
export const getMarketplaceCreators = async (
queryParams: CreatorSearchParams | undefined,
pageParam: number,
signal?: AbortSignal,
): Promise<{
creators: Creator[]
total: number
page: number
page_size: number
}> => {
if (!queryParams) {
return {
creators: [],
total: 0,
page: 1,
page_size: 40,
}
}
const {
query,
sort_by,
sort_order,
categories,
page_size = 40,
} = queryParams
try {
const res = await marketplaceClient.creators.searchAdvanced({
body: {
page: pageParam,
page_size,
query,
sort_by,
sort_order,
categories,
},
}, { signal })
const creators = (res.data?.creators || []).map((c: Creator) => ({
...c,
display_name: c.display_name || c.name,
display_email: c.display_email ?? '',
social_links: c.social_links ?? [],
}))
return {
creators,
total: res.data?.total || 0,
page: pageParam,
page_size,
}
}
catch {
return {
creators: [],
total: 0,
page: pageParam,
page_size,
}
}
}
/**
* Map unified search plugin item to Plugin type
*/
export function mapUnifiedPluginToPlugin(item: UnifiedPluginItem): Plugin {
return {
type: item.type,
org: item.org,
name: item.name,
plugin_id: item.plugin_id,
version: item.latest_version,
latest_version: item.latest_version,
latest_package_identifier: item.latest_package_identifier,
icon: `${MARKETPLACE_API_PREFIX}/plugins/${item.org}/${item.name}/icon`,
verified: item.verification?.authorized_category === 'langgenius',
label: item.label,
brief: item.brief,
description: item.brief,
introduction: '',
repository: item.repository || '',
category: item.category as PluginCategoryEnum,
install_count: item.install_count,
endpoint: { settings: [] },
tags: item.tags || [],
badges: item.badges || [],
verification: item.verification,
from: 'marketplace',
}
}
/**
* Map unified search template item to Template type
*/
export function mapUnifiedTemplateToTemplate(item: UnifiedTemplateItem): Template {
const descriptionText = item.overview || item.readme || ''
return {
template_id: item.id,
name: item.template_name,
description: {
en_US: descriptionText,
zh_Hans: descriptionText,
},
icon: item.icon || '',
tags: item.categories || [],
author: item.publisher_handle || '',
created_at: item.created_at,
updated_at: item.updated_at,
}
}
/**
* Map unified search creator item to Creator type
*/
export function mapUnifiedCreatorToCreator(item: UnifiedCreatorItem): Creator {
return {
email: item.email || '',
name: item.name || '',
display_name: item.display_name || item.name || '',
unique_handle: item.unique_handle || '',
display_email: '',
description: item.description || '',
avatar: item.avatar || '',
social_links: [],
status: item.status || 'active',
plugin_count: item.plugin_count,
template_count: item.template_count,
created_at: '',
updated_at: '',
}
}
/**
* Fetch unified search results
*/
export const getMarketplaceUnifiedSearch = async (
queryParams: UnifiedSearchParams | undefined,
signal?: AbortSignal,
): Promise<UnifiedSearchResponse['data'] & { page: number, page_size: number }> => {
if (!queryParams || !queryParams.query.trim()) {
return {
creators: { items: [], total: 0 },
organizations: { items: [], total: 0 },
plugins: { items: [], total: 0 },
templates: { items: [], total: 0 },
page: 1,
page_size: queryParams?.page_size || 10,
}
}
const {
query,
scope,
page = 1,
page_size = 10,
} = queryParams
try {
const res = await marketplaceClient.searchUnified({
body: {
query,
scope,
page,
page_size,
},
}, { signal })
return {
creators: res.data?.creators || { items: [], total: 0 },
organizations: res.data?.organizations || { items: [], total: 0 },
plugins: res.data?.plugins || { items: [], total: 0 },
templates: res.data?.templates || { items: [], total: 0 },
page,
page_size,
}
}
catch {
return {
creators: { items: [], total: 0 },
organizations: { items: [], total: 0 },
plugins: { items: [], total: 0 },
templates: { items: [], total: 0 },
page,
page_size,
}
}
}

View File

@ -9,11 +9,11 @@ import {
useMarketplaceCollectionsAndPlugins,
useMarketplacePlugins,
} from '@/app/components/plugins/marketplace/hooks'
import { getMarketplaceListCondition } from '@/app/components/plugins/marketplace/utils'
import { getPluginCondition } from '@/app/components/plugins/marketplace/utils'
import { PluginCategoryEnum } from '@/app/components/plugins/types'
import { useAllToolProviders } from '@/service/use-tools'
export const useMarketplace = (searchPluginText: string, filterPluginTags: string[]) => {
export const useMarketplace = (searchText: string, filterPluginTags: string[]) => {
const { data: toolProvidersData, isSuccess } = useAllToolProviders()
const exclude = useMemo(() => {
if (isSuccess)
@ -21,8 +21,8 @@ export const useMarketplace = (searchPluginText: string, filterPluginTags: strin
}, [isSuccess, toolProvidersData])
const {
isLoading,
marketplaceCollections,
marketplaceCollectionPluginsMap,
pluginCollections,
pluginCollectionPluginsMap,
queryMarketplaceCollectionsAndPlugins,
} = useMarketplaceCollectionsAndPlugins()
const {
@ -35,19 +35,19 @@ export const useMarketplace = (searchPluginText: string, filterPluginTags: strin
hasNextPage,
page: pluginsPage,
} = useMarketplacePlugins()
const searchPluginTextRef = useRef(searchPluginText)
const searchTextRef = useRef(searchText)
const filterPluginTagsRef = useRef(filterPluginTags)
useEffect(() => {
searchPluginTextRef.current = searchPluginText
searchTextRef.current = searchText
filterPluginTagsRef.current = filterPluginTags
}, [searchPluginText, filterPluginTags])
}, [searchText, filterPluginTags])
useEffect(() => {
if ((searchPluginText || filterPluginTags.length) && isSuccess) {
if (searchPluginText) {
if ((searchText || filterPluginTags.length) && isSuccess) {
if (searchText) {
queryPluginsWithDebounced({
category: PluginCategoryEnum.tool,
query: searchPluginText,
query: searchText,
tags: filterPluginTags,
exclude,
type: 'plugin',
@ -56,7 +56,7 @@ export const useMarketplace = (searchPluginText: string, filterPluginTags: strin
}
queryPlugins({
category: PluginCategoryEnum.tool,
query: searchPluginText,
query: searchText,
tags: filterPluginTags,
exclude,
type: 'plugin',
@ -66,14 +66,14 @@ export const useMarketplace = (searchPluginText: string, filterPluginTags: strin
if (isSuccess) {
queryMarketplaceCollectionsAndPlugins({
category: PluginCategoryEnum.tool,
condition: getMarketplaceListCondition(PluginCategoryEnum.tool),
condition: getPluginCondition(PluginCategoryEnum.tool),
exclude,
type: 'plugin',
})
resetPlugins()
}
}
}, [searchPluginText, filterPluginTags, queryPlugins, queryMarketplaceCollectionsAndPlugins, queryPluginsWithDebounced, resetPlugins, exclude, isSuccess])
}, [searchText, filterPluginTags, queryPlugins, queryMarketplaceCollectionsAndPlugins, queryPluginsWithDebounced, resetPlugins, exclude, isSuccess])
const handleScroll = useCallback((e: Event) => {
const target = e.target as HTMLDivElement
@ -83,17 +83,17 @@ export const useMarketplace = (searchPluginText: string, filterPluginTags: strin
clientHeight,
} = target
if (scrollTop + clientHeight >= scrollHeight - SCROLL_BOTTOM_THRESHOLD && scrollTop > 0) {
const searchPluginText = searchPluginTextRef.current
const searchText = searchTextRef.current
const filterPluginTags = filterPluginTagsRef.current
if (hasNextPage && (!!searchPluginText || !!filterPluginTags.length))
if (hasNextPage && (!!searchText || !!filterPluginTags.length))
fetchNextPage()
}
}, [exclude, fetchNextPage, hasNextPage, plugins, queryPlugins])
return {
isLoading: isLoading || isPluginsLoading,
marketplaceCollections,
marketplaceCollectionPluginsMap,
pluginCollections,
pluginCollectionPluginsMap,
plugins,
handleScroll,
page: Math.max(pluginsPage || 0, 1),

View File

@ -15,8 +15,8 @@ import Marketplace from './index'
const listRenderSpy = vi.fn()
vi.mock('@/app/components/plugins/marketplace/list', () => ({
default: (props: {
marketplaceCollections: unknown[]
marketplaceCollectionPluginsMap: Record<string, unknown[]>
pluginCollections: unknown[]
pluginCollectionPluginsMap: Record<string, unknown[]>
plugins?: unknown[]
showInstallButton?: boolean
}) => {
@ -90,8 +90,8 @@ const createPlugin = (overrides: Partial<Plugin> = {}): Plugin => ({
const createMarketplaceContext = (overrides: Partial<ReturnType<typeof useMarketplace>> = {}) => ({
isLoading: false,
marketplaceCollections: [],
marketplaceCollectionPluginsMap: {},
pluginCollections: [],
pluginCollectionPluginsMap: {},
plugins: [],
handleScroll: vi.fn(),
page: 1,
@ -110,7 +110,7 @@ describe('Marketplace', () => {
const marketplaceContext = createMarketplaceContext({ isLoading: true, page: 1 })
render(
<Marketplace
searchPluginText=""
searchText=""
filterPluginTags={[]}
isMarketplaceArrowVisible={false}
showMarketplacePanel={vi.fn()}
@ -131,7 +131,7 @@ describe('Marketplace', () => {
})
render(
<Marketplace
searchPluginText=""
searchText=""
filterPluginTags={[]}
isMarketplaceArrowVisible={false}
showMarketplacePanel={vi.fn()}
@ -156,7 +156,7 @@ describe('Marketplace', () => {
const showMarketplacePanel = vi.fn()
const { container } = render(
<Marketplace
searchPluginText="vector"
searchText="vector"
filterPluginTags={['tag-a', 'tag-b']}
isMarketplaceArrowVisible
showMarketplacePanel={showMarketplacePanel}
@ -199,8 +199,8 @@ describe('useMarketplace', () => {
}) => {
mockUseMarketplaceCollectionsAndPlugins.mockReturnValue({
isLoading: overrides?.isLoading ?? false,
marketplaceCollections: [],
marketplaceCollectionPluginsMap: {},
pluginCollections: [],
pluginCollectionPluginsMap: {},
queryMarketplaceCollectionsAndPlugins: mockQueryMarketplaceCollectionsAndPlugins,
})
mockUseMarketplacePlugins.mockReturnValue({

View File

@ -11,14 +11,14 @@ import List from '@/app/components/plugins/marketplace/list'
import { getMarketplaceUrl } from '@/utils/var'
type MarketplaceProps = {
searchPluginText: string
searchText: string
filterPluginTags: string[]
isMarketplaceArrowVisible: boolean
showMarketplacePanel: () => void
marketplaceContext: ReturnType<typeof useMarketplace>
}
const Marketplace = ({
searchPluginText,
searchText,
filterPluginTags,
isMarketplaceArrowVisible,
showMarketplacePanel,
@ -29,8 +29,8 @@ const Marketplace = ({
const { theme } = useTheme()
const {
isLoading,
marketplaceCollections,
marketplaceCollectionPluginsMap,
pluginCollections,
pluginCollectionPluginsMap,
plugins,
page,
} = marketplaceContext
@ -79,7 +79,7 @@ const Marketplace = ({
</span>
{t('operation.in', { ns: 'common' })}
<a
href={getMarketplaceUrl('', { language: locale, q: searchPluginText, tags: filterPluginTags.join(','), theme })}
href={getMarketplaceUrl('', { language: locale, q: searchText, tags: filterPluginTags.join(','), theme })}
className="system-sm-medium ml-1 flex items-center text-text-accent"
target="_blank"
>
@ -100,8 +100,8 @@ const Marketplace = ({
{
(!isLoading || page > 1) && (
<List
marketplaceCollections={marketplaceCollections || []}
marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap || {}}
pluginCollections={pluginCollections || []}
pluginCollectionPluginsMap={pluginCollectionPluginsMap || {}}
plugins={plugins}
showInstallButton
/>

View File

@ -199,7 +199,7 @@ const ProviderList = () => {
<div ref={toolListTailRef} />
{enable_marketplace && activeTab === 'builtin' && (
<Marketplace
searchPluginText={keywords}
searchText={keywords}
filterPluginTags={tagFilterValue}
isMarketplaceArrowVisible={isMarketplaceArrowVisible}
showMarketplacePanel={showMarketplacePanel}

View File

@ -14,6 +14,8 @@ import type {
TemplateDetail,
TemplateSearchParams,
TemplatesListResponse,
UnifiedSearchParams,
UnifiedSearchResponse,
} from '@/app/components/plugins/marketplace/types'
import type { Plugin, PluginsFromMarketplaceResponse } from '@/app/components/plugins/types'
import { type } from '@orpc/contract'
@ -366,6 +368,20 @@ export const searchTemplatesAdvancedContract = base
}>(),
)
export const searchUnifiedContract = base
.route({
path: '/search/unified',
method: 'POST',
})
.input(
type<{
body: UnifiedSearchParams
}>(),
)
.output(
type<UnifiedSearchResponse>(),
)
export const getPublisherTemplatesContract = base
.route({
path: '/templates/publisher/{uniqueHandle}',
@ -387,3 +403,25 @@ export const getPublisherTemplatesContract = base
data?: TemplatesListResponse
}>(),
)
export const getPublisherPluginsContract = base
.route({
path: '/plugins/publisher/{uniqueHandle}',
method: 'GET',
})
.input(
type<{
params: {
uniqueHandle: string
}
query?: {
page?: number
page_size?: number
}
}>(),
)
.output(
type<{
data?: PluginsFromMarketplaceResponse
}>(),
)

View File

@ -30,6 +30,7 @@ import {
getCollectionTemplatesContract,
getCreatorAvatarContract,
getCreatorByHandleContract,
getPublisherPluginsContract,
getPublisherTemplatesContract,
getTemplateByIdContract,
getTemplateCollectionContract,
@ -39,15 +40,20 @@ import {
searchCreatorsAdvancedContract,
searchTemplatesAdvancedContract,
searchTemplatesBasicContract,
searchUnifiedContract,
syncCreatorAvatarContract,
syncCreatorProfileContract,
templateCollectionsContract,
} from './marketplace'
export const marketplaceRouterContract = {
collections: collectionsContract,
collectionPlugins: collectionPluginsContract,
searchAdvanced: searchAdvancedContract,
plugins: {
collections: collectionsContract,
collectionPlugins: collectionPluginsContract,
searchAdvanced: searchAdvancedContract,
getPublisherPlugins: getPublisherPluginsContract,
},
searchUnified: searchUnifiedContract,
templateCollections: {
list: templateCollectionsContract,
create: createTemplateCollectionContract,

View File

@ -223,6 +223,14 @@
"marketplace.sortOption.recentlyUpdated": "Recently Updated",
"marketplace.templatesHeroSubtitle": "Community-built workflow templates — ready to use, remix, and deploy.",
"marketplace.templatesHeroTitle": "Create. Remix. Deploy.",
"marketplace.templateCategory.all": "All",
"marketplace.templateCategory.marketing": "Marketing",
"marketplace.templateCategory.sales": "Sales",
"marketplace.templateCategory.support": "Support",
"marketplace.templateCategory.operations": "Operations",
"marketplace.templateCategory.it": "IT",
"marketplace.templateCategory.knowledge": "Knowledge",
"marketplace.templateCategory.design": "Design",
"marketplace.verifiedTip": "Verified by Dify",
"marketplace.viewMore": "View more",
"metadata.title": "Plugins",

View File

@ -223,6 +223,14 @@
"marketplace.sortOption.recentlyUpdated": "最近更新",
"marketplace.templatesHeroSubtitle": "社区构建的工作流模板 —— 随时可使用、复刻和部署。",
"marketplace.templatesHeroTitle": "创建。复刻。部署。",
"marketplace.templateCategory.all": "全部",
"marketplace.templateCategory.marketing": "营销",
"marketplace.templateCategory.sales": "销售",
"marketplace.templateCategory.support": "支持",
"marketplace.templateCategory.operations": "运营",
"marketplace.templateCategory.it": "IT",
"marketplace.templateCategory.knowledge": "知识",
"marketplace.templateCategory.design": "设计",
"marketplace.verifiedTip": "此插件由 Dify 认证",
"marketplace.viewMore": "查看更多",
"metadata.title": "插件",