+
{org}
/
)}
-
diff --git a/web/app/components/main-nav/__tests__/index.spec.tsx b/web/app/components/main-nav/__tests__/index.spec.tsx
index 9408839897d..10fce19ce42 100644
--- a/web/app/components/main-nav/__tests__/index.spec.tsx
+++ b/web/app/components/main-nav/__tests__/index.spec.tsx
@@ -723,19 +723,6 @@ describe('MainNav', () => {
expect(
marketplaceLink.querySelector('.i-custom-vender-main-nav-marketplace-v2'),
).toBeInTheDocument()
- expect(
- within(screen.getByRole('navigation'))
- .getAllByRole('link')
- .map((link) => link.getAttribute('href')),
- ).toEqual([
- '/',
- '/apps',
- '/agents',
- '/datasets',
- '/skills',
- '/integrations/model-provider',
- '/marketplace',
- ])
})
it('hides the roster entry when Agent v2 is disabled', () => {
@@ -979,14 +966,17 @@ describe('MainNav', () => {
)
})
- it('marks marketplace active on marketplace routes', () => {
- mockPathname = '/marketplace'
+ it.each(['/marketplace', '/plugins', '/templates', '/templates/marketing'])(
+ 'marks marketplace active on route %s',
+ (pathname) => {
+ mockPathname = pathname
- renderMainNav()
+ renderMainNav()
- const marketplaceLink = screen.getByRole('link', { name: /common.mainNav.marketplace/ })
- expect(marketplaceLink).toHaveClass(activeGradientMaskClassName)
- })
+ const marketplaceLink = screen.getByRole('link', { name: /common.mainNav.marketplace/ })
+ expect(marketplaceLink).toHaveClass(activeGradientMaskClassName)
+ },
+ )
it('marks roster active on roster routes', () => {
mockPathname = '/agents'
@@ -1184,7 +1174,8 @@ describe('MainNav', () => {
'common.mainNav.help.learnDify',
'common.mainNav.help.stepByStepTour',
'common.userProfile.compliance',
- 'Discord',
+ 'common.userProfile.discord',
+ 'common.mainNav.help.creatorCenter',
'common.userProfile.github',
'common.userProfile.about',
]
@@ -1195,6 +1186,23 @@ describe('MainNav', () => {
})
})
+ it('opens Creator Center from the help menu above GitHub', async () => {
+ renderMainNav()
+
+ fireEvent.click(screen.getByRole('button', { name: 'common.mainNav.help.openMenu' }))
+
+ const creatorCenter = await screen.findByRole('menuitem', {
+ name: 'common.mainNav.help.creatorCenter',
+ })
+ const github = screen.getByRole('menuitem', { name: /common\.userProfile\.github/ })
+
+ expect(creatorCenter).toHaveAttribute('href', 'https://creators.dify.ai/')
+ expect(creatorCenter).toHaveAttribute('target', '_blank')
+ expect(creatorCenter).toHaveAttribute('rel', 'noopener noreferrer')
+ expect(creatorCenter.compareDocumentPosition(github)).toBe(Node.DOCUMENT_POSITION_FOLLOWING)
+ expect(creatorCenter.querySelector('.i-ri-user-star-line')).toBeTruthy()
+ })
+
it('opens About from its real Help menu owner and restores focus when closed', async () => {
const user = userEvent.setup()
mockConsoleState.current = {
@@ -1267,7 +1275,7 @@ describe('MainNav', () => {
fireEvent.click(contactUsItem)
await waitFor(() => {
- expect(screen.queryByText('Discord')).not.toBeInTheDocument()
+ expect(screen.queryByText('common.userProfile.discord')).not.toBeInTheDocument()
})
expect(mockSetShowPricingModal).toHaveBeenCalled()
})
diff --git a/web/app/components/main-nav/__tests__/layout.spec.tsx b/web/app/components/main-nav/__tests__/layout.spec.tsx
index 1645b32a690..c2833868fea 100644
--- a/web/app/components/main-nav/__tests__/layout.spec.tsx
+++ b/web/app/components/main-nav/__tests__/layout.spec.tsx
@@ -1,5 +1,6 @@
import type { ReactNode } from 'react'
import type { Mock } from 'vite-plus/test'
+import { useSuspenseQuery } from '@tanstack/react-query'
import { fireEvent, screen } from '@testing-library/react'
import { useStore as useAppStore } from '@/app/components/app/store'
import { isAgentV2Enabled } from '@/features/agent-v2/feature-flag'
@@ -10,6 +11,7 @@ import MainNavLayout from '../layout'
const mockConsoleState = vi.hoisted(() => ({
current: {
isCurrentWorkspaceDatasetOperator: false,
+ isCurrentWorkspaceEditor: true,
},
}))
@@ -22,6 +24,14 @@ vi.mock('@/app/components/header/header-wrapper', () => ({
{children}
),
}))
+vi.mock('@tanstack/react-query', async (importOriginal) => {
+ const actual = await importOriginal
()
+ return {
+ ...actual,
+ useSuspenseQuery: vi.fn(),
+ }
+})
+
vi.mock('@/context/workspace-state', async () => {
const { createWorkspaceStateModuleMock } = await import('@/test/console/state-fixture')
return createWorkspaceStateModuleMock(() => mockConsoleState.current)
@@ -55,7 +65,13 @@ describe('MainNavLayout', () => {
;(usePathname as Mock).mockReturnValue('/apps')
mockConsoleState.current = {
isCurrentWorkspaceDatasetOperator: false,
+ isCurrentWorkspaceEditor: true,
}
+ ;(useSuspenseQuery as Mock).mockReturnValue({
+ data: {
+ enable_app_deploy: true,
+ },
+ })
;(isAgentV2Enabled as Mock).mockReturnValue(true)
})
@@ -205,29 +221,64 @@ describe('MainNavLayout', () => {
expect(screen.getByTestId('main-nav')).toBeInTheDocument()
})
- it.each(['/datasets/create', '/datasets/new/create', '/datasets/dataset-1/documents/create'])(
- 'keeps the global main nav on collection and creation route %s',
- (pathname) => {
- ;(usePathname as Mock).mockReturnValue(pathname)
+ it.each([
+ '/datasets/create',
+ '/datasets/new/create',
+ '/datasets/dataset-1/documents/create',
+ '/deployments/create',
+ ])('keeps the global main nav on collection and creation route %s', (pathname) => {
+ ;(usePathname as Mock).mockReturnValue(pathname)
- render(
- Detail sidebar}>
- content
- ,
- )
+ render(
+ Detail sidebar}>
+ content
+ ,
+ )
- expect(screen.getByTestId('main-nav')).toBeInTheDocument()
- expect(
- screen.queryByRole('complementary', { name: 'Detail sidebar' }),
- ).not.toBeInTheDocument()
+ expect(screen.getByTestId('main-nav')).toBeInTheDocument()
+ expect(screen.queryByRole('complementary', { name: 'Detail sidebar' })).not.toBeInTheDocument()
+ })
+
+ it.each([
+ {
+ label: 'agent detail route for dataset operators',
+ pathname: '/agents/agent-1/configure',
+ consoleState: {
+ isCurrentWorkspaceDatasetOperator: true,
+ isCurrentWorkspaceEditor: true,
+ },
+ systemFeatures: {
+ enable_app_deploy: true,
+ },
},
- )
-
- it('keeps the global main nav on agent detail routes for dataset operators', () => {
- ;(usePathname as Mock).mockReturnValue('/agents/agent-1/configure')
- mockConsoleState.current = {
- isCurrentWorkspaceDatasetOperator: true,
- }
+ {
+ label: 'deployment detail route for non-editor workspaces',
+ pathname: '/deployments/app-instance-1/overview',
+ consoleState: {
+ isCurrentWorkspaceDatasetOperator: false,
+ isCurrentWorkspaceEditor: false,
+ },
+ systemFeatures: {
+ enable_app_deploy: true,
+ },
+ },
+ {
+ label: 'deployment detail route when deployment is disabled',
+ pathname: '/deployments/app-instance-1/overview',
+ consoleState: {
+ isCurrentWorkspaceDatasetOperator: false,
+ isCurrentWorkspaceEditor: true,
+ },
+ systemFeatures: {
+ enable_app_deploy: false,
+ },
+ },
+ ])('keeps the global main nav on $label', ({ pathname, consoleState, systemFeatures }) => {
+ ;(usePathname as Mock).mockReturnValue(pathname)
+ mockConsoleState.current = consoleState
+ ;(useSuspenseQuery as Mock).mockReturnValue({
+ data: systemFeatures,
+ })
render(
Detail sidebar}>
diff --git a/web/app/components/main-nav/components/__tests__/support-menu.spec.tsx b/web/app/components/main-nav/components/__tests__/support-menu.spec.tsx
index 17f01fe1c3e..d3bcd3454c1 100644
--- a/web/app/components/main-nav/components/__tests__/support-menu.spec.tsx
+++ b/web/app/components/main-nav/components/__tests__/support-menu.spec.tsx
@@ -104,12 +104,18 @@ describe('SupportMenu', () => {
renderSupportMenu()
expect(screen.getByText('common.userProfile.contactUs')).toBeInTheDocument()
- expect(screen.getByText('Discord')).toBeInTheDocument()
+ expect(screen.getByText('common.userProfile.discord')).toBeInTheDocument()
+ expect(screen.queryByText('common.userProfile.forum')).not.toBeInTheDocument()
+ expect(screen.queryByText('common.userProfile.community')).not.toBeInTheDocument()
expect(
screen
.getByText('common.userProfile.contactUs')
- .compareDocumentPosition(screen.getByText('Discord')),
+ .compareDocumentPosition(screen.getByText('common.userProfile.discord')),
).toBe(Node.DOCUMENT_POSITION_FOLLOWING)
+ expect(screen.getByRole('menuitem', { name: 'common.userProfile.discord' })).toHaveClass(
+ 'mx-0',
+ 'px-3',
+ )
fireEvent.click(screen.getByRole('menuitem', { name: 'common.userProfile.contactUs' }))
@@ -155,7 +161,7 @@ describe('SupportMenu', () => {
expect(screen.queryByText('common.userProfile.contactUs')).not.toBeInTheDocument()
expect(screen.queryByText('billing.upgradeBtn.encourageShort')).not.toBeInTheDocument()
expect(screen.queryByText('common.userProfile.emailSupport')).not.toBeInTheDocument()
- expect(screen.getByText('Discord')).toBeInTheDocument()
+ expect(screen.getByText('common.userProfile.discord')).toBeInTheDocument()
})
it('keeps Zendesk contact us for Cloud sandbox plan with support email and Zendesk configured', () => {
@@ -207,7 +213,7 @@ describe('SupportMenu', () => {
expect(screen.queryByText('common.userProfile.contactUs')).not.toBeInTheDocument()
expect(screen.queryByText('common.userProfile.emailSupport')).not.toBeInTheDocument()
- expect(screen.getByText('Discord')).toBeInTheDocument()
+ expect(screen.getByText('common.userProfile.discord')).toBeInTheDocument()
})
it('renders email support when Zendesk is not configured for a dedicated support channel', () => {
@@ -223,12 +229,12 @@ describe('SupportMenu', () => {
).toHaveAttribute('href', 'mailto:support@example.com')
})
- it('has the correct Discord link', () => {
+ it('has the Discord link and no Forum entry', () => {
renderSupportMenu()
- expect(screen.getByRole('menuitem', { name: 'Discord' })).toHaveAttribute(
- 'href',
- 'https://discord.gg/5AEfbxcd9k',
- )
+ const discordLink = screen.getByText('common.userProfile.discord').closest('a')
+ expect(discordLink).toHaveAttribute('href', 'https://discord.gg/5AEfbxcd9k')
+ expect(screen.queryByText('common.userProfile.forum')).not.toBeInTheDocument()
+ expect(screen.queryByText('common.userProfile.community')).not.toBeInTheDocument()
})
})
diff --git a/web/app/components/main-nav/components/help-menu.tsx b/web/app/components/main-nav/components/help-menu.tsx
index e6851679659..f7d26d8a3a1 100644
--- a/web/app/components/main-nav/components/help-menu.tsx
+++ b/web/app/components/main-nav/components/help-menu.tsx
@@ -29,6 +29,7 @@ import {
MenuItemContent,
} from '@/app/components/header/account-dropdown/menu-item-content'
import GithubStar from '@/app/components/header/github-star'
+import { useCreatorCenterUrl } from '@/app/components/plugins/marketplace/creator-center-url'
import { trackStepByStepTourEvent } from '@/app/components/step-by-step-tour/analytics'
import {
disableStepByStepTourForCurrentWorkspaceAtom,
@@ -38,6 +39,7 @@ import {
stepByStepTourStateUpdatingAtom,
} from '@/app/components/step-by-step-tour/state'
import { useSetStepByStepTourShellMode } from '@/app/components/step-by-step-tour/storage'
+import { MARKETPLACE_URL_PREFIX } from '@/config'
import { getLangGeniusVersionInfo } from '@/context/app-context-normalizers'
import { useDocLink } from '@/context/i18n'
import {
@@ -91,6 +93,7 @@ const MenuSwitchIndicator = ({ checked }: { checked: boolean }) => (
const HelpMenu = ({ triggerIcon, triggerClassName, triggerRef, triggerSize }: HelpMenuProps) => {
const { t } = useTranslation()
const docLink = useDocLink()
+ const creatorCenterUrl = useCreatorCenterUrl(MARKETPLACE_URL_PREFIX)
const { data: systemFeatures } = useSuspenseQuery(systemFeaturesQueryOptions())
const { data: profileMeta } = useSuspenseQuery({
...userProfileQueryOptions(),
@@ -252,6 +255,18 @@ const HelpMenu = ({ triggerIcon, triggerClassName, triggerRef, triggerSize }: He
+
+ $['mainNav.help.creatorCenter'], { ns: 'common' })}
+ trailing={}
+ />
+
(
-
+
+
+
)
type MainNavLinkProps = {
@@ -30,7 +32,10 @@ const MainNavLink = ({ item, pathname, children }: MainNavLinkProps) => {
)}
>
-
+
{item.label}
diff --git a/web/app/components/main-nav/components/support-menu.tsx b/web/app/components/main-nav/components/support-menu.tsx
index 4bb93f0999c..8b49450edc0 100644
--- a/web/app/components/main-nav/components/support-menu.tsx
+++ b/web/app/components/main-nav/components/support-menu.tsx
@@ -104,7 +104,7 @@ export default function SupportMenu() {
>
$['userProfile.discord'], { ns: 'common' })}
trailing={}
/>
diff --git a/web/app/components/main-nav/routes.ts b/web/app/components/main-nav/routes.ts
index 78c5958ca4b..d8ec10883b4 100644
--- a/web/app/components/main-nav/routes.ts
+++ b/web/app/components/main-nav/routes.ts
@@ -43,7 +43,7 @@ export const MAIN_NAV_ROUTES = [
key: 'home',
href: '/',
labelKey: 'mainNav.home',
- active: (path: string) => path === '/',
+ active: (path: string) => path === '/' || path === '/explore/apps',
icon: 'i-custom-vender-main-nav-home-v2',
activeIcon: 'i-custom-vender-main-nav-home-v2-active',
visibility: VISIBLE_TO_ALL,
@@ -70,15 +70,6 @@ export const MAIN_NAV_ROUTES = [
visibility: CAN_MANAGE_AGENTS,
feature: 'agentV2',
},
- {
- key: 'datasets',
- href: '/datasets',
- labelKey: 'menus.datasets',
- active: (path: string) => isPathUnderRoute(path, '/datasets'),
- icon: 'i-custom-vender-main-nav-knowledge-v2',
- activeIcon: 'i-custom-vender-main-nav-knowledge-v2-active',
- visibility: VISIBLE_TO_ALL,
- },
{
key: 'skills',
href: '/skills',
@@ -88,6 +79,15 @@ export const MAIN_NAV_ROUTES = [
activeIcon: 'i-custom-vender-main-nav-skill-active',
visibility: SKILL_ENABLED_FOR_WORKSPACE,
},
+ {
+ key: 'datasets',
+ href: '/datasets',
+ labelKey: 'menus.datasets',
+ active: (path: string) => isPathUnderRoute(path, '/datasets'),
+ icon: 'i-custom-vender-main-nav-knowledge-v2',
+ activeIcon: 'i-custom-vender-main-nav-knowledge-v2-active',
+ visibility: VISIBLE_TO_ALL,
+ },
{
key: 'integrations',
href: buildIntegrationPath('provider'),
@@ -103,7 +103,9 @@ export const MAIN_NAV_ROUTES = [
href: '/marketplace',
labelKey: 'mainNav.marketplace',
active: (path: string) =>
- isPathUnderRoute(path, '/marketplace') || isPathUnderRoute(path, '/plugins'),
+ isPathUnderRoute(path, '/marketplace') ||
+ isPathUnderRoute(path, '/plugins') ||
+ isPathUnderRoute(path, '/templates'),
icon: 'i-custom-vender-main-nav-marketplace-v2',
activeIcon: 'i-custom-vender-main-nav-marketplace-v2-active',
visibility: VISIBLE_TO_ALL,
diff --git a/web/app/components/oauth-registration-analytics.tsx b/web/app/components/oauth-registration-analytics.tsx
index fd7eb3bc542..e82adaf2923 100644
--- a/web/app/components/oauth-registration-analytics.tsx
+++ b/web/app/components/oauth-registration-analytics.tsx
@@ -2,9 +2,18 @@
import Cookies from 'js-cookie'
import { useEffect, useRef } from 'react'
+import { useAnalyticsConsent } from '@/app/components/base/analytics-consent/consent-store'
import { useSearchParams } from '@/next/navigation'
import { sendGAEvent } from '@/utils/gtag'
-import { rememberRegistrationSuccess } from './base/amplitude/registration-tracking'
+import {
+ clearOAuthRegistrationGAGuard,
+ hasSentOAuthRegistrationGA,
+ markOAuthRegistrationGASent,
+} from './base/amplitude/registration-session-state'
+import {
+ normalizeRegistrationAttribution,
+ rememberRegistrationSuccess,
+} from './base/amplitude/registration-tracking'
const OAUTH_NEW_USER_PARAM = 'oauth_new_user'
@@ -18,46 +27,75 @@ const removeOAuthNewUserParam = () => {
}
export function OAuthRegistrationAnalytics() {
+ const analyticsConsent = useAnalyticsConsent()
const searchParams = useSearchParams()
const oauthNewUserParam = searchParams.get(OAUTH_NEW_USER_PARAM)
- const handledParamRef = useRef(null)
+ const gaHandledRef = useRef(false)
+ const amplitudeHandledRef = useRef(false)
+ const cleanedRef = useRef(false)
+ const utmInfoRef = useRef | undefined>(
+ undefined,
+ )
useEffect(() => {
- if (oauthNewUserParam === null || handledParamRef.current === oauthNewUserParam) return
-
- handledParamRef.current = oauthNewUserParam
- const oauthNewUser = oauthNewUserParam === 'true'
- if (!oauthNewUser) {
- removeOAuthNewUserParam()
+ if (oauthNewUserParam === null) {
+ clearOAuthRegistrationGAGuard()
return
}
- let utmInfo: Record | null = null
- const utmInfoStr = Cookies.get('utm_info')
- if (utmInfoStr) {
- try {
- const parsed: unknown = JSON.parse(utmInfoStr)
- if (isRecord(parsed)) utmInfo = parsed
- } catch (e) {
- console.error('Failed to parse utm_info cookie:', e)
+ const oauthNewUser = oauthNewUserParam === 'true'
+ if (!oauthNewUser) {
+ if (!cleanedRef.current) {
+ cleanedRef.current = true
+ clearOAuthRegistrationGAGuard()
+ removeOAuthNewUserParam()
}
+ return
}
+ if (utmInfoRef.current === undefined) {
+ let parsedUtmInfo: Record | null = null
+ const utmInfoStr = Cookies.get('utm_info')
+ if (utmInfoStr) {
+ try {
+ const parsed: unknown = JSON.parse(utmInfoStr)
+ if (isRecord(parsed)) parsedUtmInfo = parsed
+ } catch (e) {
+ console.error('Failed to parse utm_info cookie:', e)
+ }
+ }
+ utmInfoRef.current = normalizeRegistrationAttribution(parsedUtmInfo)
+ }
+ const utmInfo = utmInfoRef.current
+
const eventName = utmInfo ? 'user_registration_success_with_utm' : 'user_registration_success'
- // Defer the Amplitude event until the user ID is attached. The app context
- // external sync replays it after setUserId runs. Firing it here would record it under an
- // anonymous Amplitude profile (no user ID set yet).
- rememberRegistrationSuccess({ method: 'oauth', utmInfo })
+ if (!gaHandledRef.current) {
+ gaHandledRef.current = true
+ if (!hasSentOAuthRegistrationGA()) {
+ sendGAEvent(eventName, {
+ method: 'oauth',
+ ...utmInfo,
+ })
+ markOAuthRegistrationGASent()
+ }
+ }
- sendGAEvent(eventName, {
- method: 'oauth',
- ...utmInfo,
- })
+ if (
+ (analyticsConsent === 'unknown' || analyticsConsent === 'granted') &&
+ !amplitudeHandledRef.current
+ ) {
+ const persisted = rememberRegistrationSuccess({ method: 'oauth', utmInfo })
+ if (!persisted) return
+ amplitudeHandledRef.current = true
+ }
- Cookies.remove('utm_info')
- removeOAuthNewUserParam()
- }, [oauthNewUserParam])
+ if (!cleanedRef.current) {
+ cleanedRef.current = true
+ Cookies.remove('utm_info')
+ removeOAuthNewUserParam()
+ }
+ }, [analyticsConsent, oauthNewUserParam])
return null
}
diff --git a/web/app/components/plugins/base/badges/partner.tsx b/web/app/components/plugins/base/badges/partner.tsx
index 6d97d3b4898..41663ffee80 100644
--- a/web/app/components/plugins/base/badges/partner.tsx
+++ b/web/app/components/plugins/base/badges/partner.tsx
@@ -1,3 +1,5 @@
+'use client'
+
import type { FC } from 'react'
import PartnerDark from '@/app/components/base/icons/src/public/plugins/PartnerDark'
import PartnerLight from '@/app/components/base/icons/src/public/plugins/PartnerLight'
diff --git a/web/app/components/plugins/card/__tests__/index.spec.tsx b/web/app/components/plugins/card/__tests__/index.spec.tsx
new file mode 100644
index 00000000000..e2d32e68f29
--- /dev/null
+++ b/web/app/components/plugins/card/__tests__/index.spec.tsx
@@ -0,0 +1,86 @@
+import type { CardPayload } from '../index'
+import { render } from '@testing-library/react'
+import { useAtomValue } from 'jotai'
+import { describe, expect, it, vi } from 'vitest'
+import { MARKETPLACE_API_PREFIX } from '@/config'
+import { PluginCategoryEnum } from '../../types'
+import Card from '../index'
+
+vi.mock('jotai', () => ({
+ useAtomValue: vi.fn(),
+}))
+
+vi.mock('@/context/workspace-state', () => ({
+ currentWorkspaceIdAtom: Symbol('currentWorkspaceIdAtom'),
+}))
+
+vi.mock('#i18n', () => ({
+ useTranslation: () => ({
+ t: (key: string | ((...args: never[]) => unknown)) =>
+ typeof key === 'string' ? key : 'translated',
+ }),
+}))
+
+vi.mock('@/context/i18n', () => ({
+ useGetLanguage: () => 'en-US',
+}))
+
+vi.mock('@/hooks/use-theme', () => ({
+ default: () => ({ theme: 'light' }),
+}))
+
+vi.mock('@/i18n-config', () => ({
+ renderI18nObject: (value: Record) => value['en-US'] ?? '',
+}))
+
+vi.mock('../../hooks', () => ({
+ useCategories: () => ({
+ categoriesMap: {
+ tool: { label: 'Tool' },
+ },
+ }),
+}))
+
+const marketplacePlugin = {
+ badges: [],
+ brief: { 'en-US': 'Marketplace plugin description' },
+ category: PluginCategoryEnum.tool,
+ description: { 'en-US': 'Marketplace plugin description' },
+ endpoint: { settings: [] },
+ from: 'marketplace',
+ icon: 'icon.png',
+ install_count: 0,
+ introduction: '',
+ label: { 'en-US': 'Marketplace plugin' },
+ latest_package_identifier: 'langgenius/demo-plugin:1.0.0',
+ latest_version: '1.0.0',
+ name: 'demo-plugin',
+ org: 'langgenius',
+ plugin_id: 'langgenius/demo-plugin',
+ repository: '',
+ tags: [],
+ type: 'plugin',
+ verified: false,
+ verification: { authorized_category: 'langgenius' },
+ version: '1.0.0',
+} satisfies CardPayload
+
+describe('Plugin card workspace boundary', () => {
+ it('renders Marketplace variant icons without reading Dify workspace state', () => {
+ vi.mocked(useAtomValue).mockImplementation(() => {
+ throw new Error('Dify workspace state must not be read')
+ })
+
+ const payloadWithoutSource = {
+ ...marketplacePlugin,
+ from: undefined,
+ } as unknown as CardPayload
+ const { container } = render()
+
+ expect(container.querySelector('img')).toHaveAttribute(
+ 'src',
+ `${MARKETPLACE_API_PREFIX}/plugins/langgenius/demo-plugin/icon`,
+ )
+ expect(useAtomValue).not.toHaveBeenCalled()
+ })
+})
diff --git a/web/app/components/plugins/card/base/org-info.tsx b/web/app/components/plugins/card/base/org-info.tsx
index 2d9ef6ce036..9989cd454cb 100644
--- a/web/app/components/plugins/card/base/org-info.tsx
+++ b/web/app/components/plugins/card/base/org-info.tsx
@@ -13,7 +13,7 @@ const OrgInfo = ({ className, orgName, packageName, packageNameClassName }: Prop
{orgName && (
<>
{orgName}
@@ -23,7 +23,7 @@ const OrgInfo = ({ className, orgName, packageName, packageNameClassName }: Prop
)}
+type CardIconProps = {
+ icon: CardPayload['icon']
+ installFailed?: boolean
+ installed?: boolean
+ marketplace?: boolean
+ plugin: Pick
+}
+
+const WorkspaceCardIcon = ({ icon, installFailed, installed, plugin }: CardIconProps) => {
+ const currentWorkspaceId = useAtomValue(currentWorkspaceIdAtom)
+ const iconSrc = getPluginCardIconUrl(plugin, icon, currentWorkspaceId)
+
+ return
+}
+
+const CardIcon = ({ icon, installFailed, installed, marketplace, plugin }: CardIconProps) => {
+ if (marketplace || plugin.from === 'marketplace') {
+ const iconSrc = getPluginCardIconUrl({ ...plugin, from: 'marketplace' }, icon, '')
+ return
+ }
+
+ return (
+
+ )
+}
+
const Card = ({
className,
payload,
@@ -60,15 +91,11 @@ const Card = ({
const locale = useGetLanguage()
const { t } = useTranslation()
const { categoriesMap } = useCategories(true)
- const currentWorkspaceId = useAtomValue(currentWorkspaceIdAtom)
const { category, type, name, org, label, brief, icon, icon_dark, verified, from } = payload
const badges = payload.badges ?? []
const { theme } = useTheme()
- const iconSrc = getPluginCardIconUrl(
- { from, name, org, type },
- theme === Theme.dark && icon_dark ? icon_dark : icon,
- currentWorkspaceId,
- )
+ const activeIcon = theme === Theme.dark && icon_dark ? icon_dark : icon
+ const pluginIdentity = { from, name, org, type }
const getLocalizedText = (obj: Record | undefined) =>
obj ? renderI18nObject(obj, locale) : ''
const isPartner = badges.includes('partner')
@@ -92,7 +119,13 @@ const Card = ({
{!hideCornerMark &&
}
-
+
@@ -152,7 +185,12 @@ const Card = ({
{!hideCornerMark &&
}
{/* Header */}
-
+
diff --git a/web/app/components/plugins/marketplace/__tests__/atoms.spec.tsx b/web/app/components/plugins/marketplace/__tests__/atoms.spec.tsx
index cc440d567f4..87fb5039af0 100644
--- a/web/app/components/plugins/marketplace/__tests__/atoms.spec.tsx
+++ b/web/app/components/plugins/marketplace/__tests__/atoms.spec.tsx
@@ -6,6 +6,7 @@ import { createNuqsTestWrapper } from '@/test/nuqs-testing'
import {
useActivePluginType,
useFilterPluginTags,
+ useFilterTemplateLanguages,
useMarketplaceMoreClick,
useMarketplaceSearchMode,
useMarketplaceSort,
@@ -128,6 +129,25 @@ describe('useFilterPluginTags', () => {
})
})
+describe('useFilterTemplateLanguages', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ })
+
+ it('should return empty array as default', () => {
+ const { wrapper } = createWrapper()
+ const { result } = renderHook(() => useFilterTemplateLanguages(), { wrapper })
+
+ expect(result.current[0]).toEqual([])
+ })
+
+ it('parses languages from search params', () => {
+ const { wrapper } = createWrapper('?languages=ja')
+ const { result } = renderHook(() => useFilterTemplateLanguages(), { wrapper })
+ expect(result.current[0]).toEqual(['ja'])
+ })
+})
+
describe('useMarketplaceSearchMode', () => {
beforeEach(() => {
vi.clearAllMocks()
diff --git a/web/app/components/plugins/marketplace/__tests__/creator-center-url.spec.ts b/web/app/components/plugins/marketplace/__tests__/creator-center-url.spec.ts
new file mode 100644
index 00000000000..a8a82ebe809
--- /dev/null
+++ b/web/app/components/plugins/marketplace/__tests__/creator-center-url.spec.ts
@@ -0,0 +1,44 @@
+import { describe, expect, it } from 'vitest'
+import {
+ getCreatorCenterUrl,
+ PUBLIC_CREATOR_CENTER_URL,
+ rewriteMarketplaceOriginToCreators,
+} from '../creator-center-url'
+
+describe('getCreatorCenterUrl', () => {
+ it('maps the public Marketplace to the public Creator Center', () => {
+ expect(getCreatorCenterUrl('https://marketplace.dify.ai')).toBe('https://creators.dify.ai/')
+ })
+
+ it('maps marketplace.dify.dev to creators.dify.dev', () => {
+ expect(getCreatorCenterUrl('https://marketplace.dify.dev')).toBe('https://creators.dify.dev/')
+ })
+
+ it('keeps the staging suffix on the Creators host', () => {
+ expect(getCreatorCenterUrl('https://marketplace-staging.dify.dev')).toBe(
+ 'https://creators-staging.dify.dev/',
+ )
+ })
+
+ it('falls back to the public Creator Center for localhost', () => {
+ expect(getCreatorCenterUrl('http://localhost:3000')).toBe(PUBLIC_CREATOR_CENTER_URL)
+ })
+
+ it('falls back to the public Creator Center when the prefix is empty', () => {
+ expect(getCreatorCenterUrl('')).toBe(PUBLIC_CREATOR_CENTER_URL)
+ })
+
+ it('prefers the current Marketplace page over a stale configured prefix', () => {
+ expect(getCreatorCenterUrl('https://marketplace.dify.ai', 'https://marketplace.dify.dev')).toBe(
+ 'https://creators.dify.dev/',
+ )
+ })
+})
+
+describe('rewriteMarketplaceOriginToCreators', () => {
+ it('returns null for hosts that are not a Marketplace surface', () => {
+ expect(rewriteMarketplaceOriginToCreators('https://cloud.dify.ai')).toBeNull()
+ expect(rewriteMarketplaceOriginToCreators('http://localhost:3000')).toBeNull()
+ expect(rewriteMarketplaceOriginToCreators('')).toBeNull()
+ })
+})
diff --git a/web/app/components/plugins/marketplace/__tests__/embedded.spec.tsx b/web/app/components/plugins/marketplace/__tests__/embedded.spec.tsx
new file mode 100644
index 00000000000..5f20986e463
--- /dev/null
+++ b/web/app/components/plugins/marketplace/__tests__/embedded.spec.tsx
@@ -0,0 +1,154 @@
+import type { PluginBanner } from '@dify/contracts/marketplace'
+import type { ReactNode } from 'react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { render, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+const mockFetchPluginBanners = vi.fn()
+
+vi.mock('@/context/i18n', () => ({
+ useLocale: () => 'zh-Hans',
+}))
+
+vi.mock('../home/banners', async (importOriginal) => {
+ const original = await importOriginal
()
+
+ return {
+ ...original,
+ fetchPluginBanners: (...args: unknown[]) => mockFetchPluginBanners(...args),
+ }
+})
+
+vi.mock('../view', () => ({
+ MarketplaceView: ({
+ banners,
+ showInstallButton,
+ }: {
+ banners: PluginBanner[]
+ showInstallButton: boolean
+ }) => (
+
+
Trending banners: {banners.length}
+
{showInstallButton ? 'Install enabled' : 'Install disabled'}
+
Child
,
+ })
+
+ expect(mockCollections).not.toHaveBeenCalled()
+ expect(mockSearchAdvanced).toHaveBeenCalledWith(
+ expect.objectContaining({
+ params: { kind: 'plugins' },
+ body: expect.objectContaining({
+ page: 1,
+ query: 'openai',
+ }),
+ }),
+ expect.any(Object),
+ )
+ })
+
+ it('should prefetch when category does not have collections (model)', async () => {
const { HydrateQueryClient } = await import('../hydration-server')
await HydrateQueryClient({
@@ -128,9 +157,10 @@ describe('HydrateQueryClient', () => {
})
expect(mockCollections).not.toHaveBeenCalled()
+ expect(mockSearchAdvanced).toHaveBeenCalled()
})
- it('should not prefetch when category does not have collections (bundle)', async () => {
+ it('should prefetch when category does not have collections (bundle)', async () => {
const { HydrateQueryClient } = await import('../hydration-server')
await HydrateQueryClient({
@@ -139,5 +169,6 @@ describe('HydrateQueryClient', () => {
})
expect(mockCollections).not.toHaveBeenCalled()
+ expect(mockSearchAdvanced).toHaveBeenCalled()
})
})
diff --git a/web/app/components/plugins/marketplace/__tests__/plugin-type-switch.spec.tsx b/web/app/components/plugins/marketplace/__tests__/plugin-type-switch.spec.tsx
index 8b78b7bba3c..32671514e43 100644
--- a/web/app/components/plugins/marketplace/__tests__/plugin-type-switch.spec.tsx
+++ b/web/app/components/plugins/marketplace/__tests__/plugin-type-switch.spec.tsx
@@ -1,10 +1,11 @@
-import type { ReactNode } from 'react'
+import type { ComponentProps, ReactNode } from 'react'
import { render, screen, waitFor } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { Provider as JotaiProvider } from 'jotai'
import { describe, expect, it, vi } from 'vite-plus/test'
import { createNuqsTestWrapper } from '@/test/nuqs-testing'
import PluginTypeSwitch from '../plugin-type-switch'
+import styles from '../plugin-type-switch.module.css'
vi.mock('#i18n', async () => {
const { withSelectorKey } = await import('@/test/i18n-mock')
@@ -13,7 +14,7 @@ vi.mock('#i18n', async () => {
}
})
-const renderSwitch = (searchParams = '') => {
+const renderSwitch = (searchParams = '', props?: ComponentProps) => {
const { wrapper: NuqsWrapper, onUrlUpdate } = createNuqsTestWrapper({ searchParams })
const Wrapper = ({ children }: { children: ReactNode }) => (
@@ -21,7 +22,7 @@ const renderSwitch = (searchParams = '') => {
)
- return { ...render(, { wrapper: Wrapper }), onUrlUpdate }
+ return { ...render(, { wrapper: Wrapper }), onUrlUpdate }
}
describe('PluginTypeSwitch', () => {
@@ -41,7 +42,7 @@ describe('PluginTypeSwitch', () => {
expect(screen.getByRole('button', { name: 'category.agents' })).toBeInTheDocument()
expect(screen.getByRole('button', { name: 'category.triggers' })).toBeInTheDocument()
expect(screen.getByRole('button', { name: 'category.extensions' })).toBeInTheDocument()
- expect(screen.getByRole('button', { name: 'category.bundles' })).toBeInTheDocument()
+ expect(screen.queryByRole('button', { name: 'category.bundles' })).not.toBeInTheDocument()
})
it('updates the category in the URL when selected', async () => {
@@ -56,4 +57,28 @@ describe('PluginTypeSwitch', () => {
expect(onUrlUpdate.mock.calls.at(-1)?.[0].searchParams.get('category')).toBe('model')
expect(modelsButton).toHaveAttribute('aria-pressed', 'true')
})
+
+ it('exposes the selected category and updates the URL in the home variant', async () => {
+ const user = userEvent.setup()
+ const { onUrlUpdate } = renderSwitch('?category=all', { variant: 'home' })
+ const categoryGroup = screen.getByRole('group', { name: 'allCategories' })
+
+ expect(categoryGroup).toHaveClass('w-full', 'justify-start', 'gap-1')
+ const activeCategory = screen.getByRole('button', { name: 'category.all' })
+ const inactiveCategory = screen.getByRole('button', { name: 'category.models' })
+
+ expect(activeCategory).toHaveAttribute('aria-pressed', 'true')
+ expect(activeCategory).toHaveClass(styles.homeItem!, styles.homeItemActive!)
+ expect(inactiveCategory).toHaveClass(styles.homeItem!)
+ expect(inactiveCategory).not.toHaveClass(styles.homeItemActive!)
+ expect(screen.getByRole('button', { name: 'categorySingle.datasource' })).toBeInTheDocument()
+ expect(screen.getByRole('button', { name: 'categorySingle.agent' })).toBeInTheDocument()
+
+ await user.click(screen.getByRole('button', { name: 'category.models' }))
+
+ await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
+ const update = onUrlUpdate.mock.calls.at(-1)?.[0]
+ expect(update?.searchParams.get('category')).toBe('model')
+ expect(update?.options.scroll).toBe(false)
+ })
})
diff --git a/web/app/components/plugins/marketplace/__tests__/query.spec.tsx b/web/app/components/plugins/marketplace/__tests__/query.spec.tsx
index ec93fe23bde..9cf84fed0dc 100644
--- a/web/app/components/plugins/marketplace/__tests__/query.spec.tsx
+++ b/web/app/components/plugins/marketplace/__tests__/query.spec.tsx
@@ -163,7 +163,7 @@ describe('useMarketplacePlugins', () => {
})
})
- it('should handle API error gracefully', async () => {
+ it('should surface API errors instead of an empty success', async () => {
mockSearchAdvanced.mockRejectedValue(new Error('Network error'))
const { useMarketplacePlugins } = await import('../query')
@@ -177,11 +177,14 @@ describe('useMarketplacePlugins', () => {
)
await waitFor(() => {
- expect(result.current.data).toBeDefined()
+ expect(result.current.isError).toBe(true)
})
- expect(result.current.data?.pages[0]!.plugins).toEqual([])
- expect(result.current.data?.pages[0]!.total).toBe(0)
+ // No synthesized page: an empty success let a backend outage render as
+ // "no plugins found", suppressed retries, and permanently disabled
+ // getNextPageParam for this key.
+ expect(result.current.data).toBeUndefined()
+ expect(result.current.error).toEqual(new Error('Network error'))
})
it('should determine next page correctly via getNextPageParam', async () => {
diff --git a/web/app/components/plugins/marketplace/__tests__/search-params.spec.ts b/web/app/components/plugins/marketplace/__tests__/search-params.spec.ts
index 62a786e5be1..7f0654e35f0 100644
--- a/web/app/components/plugins/marketplace/__tests__/search-params.spec.ts
+++ b/web/app/components/plugins/marketplace/__tests__/search-params.spec.ts
@@ -9,6 +9,7 @@ describe('marketplace search params', () => {
)
expect(marketplaceSearchParamsParsers.q.parseServerSide(undefined)).toBe('')
expect(marketplaceSearchParamsParsers.tags.parseServerSide(undefined)).toEqual([])
+ expect(marketplaceSearchParamsParsers.languages.parseServerSide(undefined)).toEqual([])
})
it('parses supported query values with the configured parsers', () => {
@@ -23,5 +24,9 @@ describe('marketplace search params', () => {
'rag',
'search',
])
+ expect(marketplaceSearchParamsParsers.languages.parseServerSide('en,zh-Hans')).toEqual([
+ 'en',
+ 'zh-Hans',
+ ])
})
})
diff --git a/web/app/components/plugins/marketplace/__tests__/server-entry.spec.tsx b/web/app/components/plugins/marketplace/__tests__/server-entry.spec.tsx
new file mode 100644
index 00000000000..34e350ac773
--- /dev/null
+++ b/web/app/components/plugins/marketplace/__tests__/server-entry.spec.tsx
@@ -0,0 +1,65 @@
+import type { PluginBanner } from '@dify/contracts/marketplace'
+import type { ReactNode } from 'react'
+import { render, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+const { mockFetchPluginBanners, mockGetLocaleOnServer } = vi.hoisted(() => ({
+ mockFetchPluginBanners: vi.fn(),
+ mockGetLocaleOnServer: vi.fn(),
+}))
+
+vi.mock('@/i18n-config/server', () => ({
+ getLocaleOnServer: mockGetLocaleOnServer,
+}))
+
+vi.mock('../home/banners', async (importOriginal) => {
+ const original = await importOriginal()
+
+ return {
+ ...original,
+ fetchPluginBanners: mockFetchPluginBanners,
+ }
+})
+
+vi.mock('../hydration-server', () => ({
+ HydrateQueryClient: ({ children }: { children: ReactNode }) => children,
+}))
+
+vi.mock('../view', () => ({
+ MarketplaceView: ({ banners }: { banners: PluginBanner[] }) => (
+ Server banners: {banners.length}
+ ),
+}))
+
+describe('Marketplace server entry', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ })
+
+ it('prefetches localized homepage banners before rendering the standalone view', async () => {
+ mockGetLocaleOnServer.mockResolvedValue('en-US')
+ mockFetchPluginBanners.mockResolvedValue([
+ {
+ id: 'banner-1',
+ title: 'Trending',
+ sort: 1,
+ language: 'en-US',
+ style_type: 'blog',
+ content: {
+ blog_title: 'Dify update',
+ link: 'https://dify.ai/blog',
+ link_target_type: 'blog',
+ },
+ },
+ ] satisfies PluginBanner[])
+
+ const { default: Marketplace } = await import('../index')
+ const element = await Marketplace({ variant: 'home' })
+
+ render(element)
+
+ expect(screen.getByText('Server banners: 1')).toBeInTheDocument()
+ expect(mockGetLocaleOnServer).toHaveBeenCalledOnce()
+ expect(mockFetchPluginBanners).toHaveBeenCalledWith('en-US')
+ })
+})
diff --git a/web/app/components/plugins/marketplace/__tests__/state.spec.tsx b/web/app/components/plugins/marketplace/__tests__/state.spec.tsx
index 03fd80dd333..a223d6524b0 100644
--- a/web/app/components/plugins/marketplace/__tests__/state.spec.tsx
+++ b/web/app/components/plugins/marketplace/__tests__/state.spec.tsx
@@ -1,9 +1,10 @@
import type { ReactNode } from 'react'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { renderHook, waitFor } from '@testing-library/react'
+import { act, renderHook, waitFor } from '@testing-library/react'
import { Provider as JotaiProvider } from 'jotai'
import { beforeEach, describe, expect, it, vi } from 'vite-plus/test'
import { createNuqsTestWrapper } from '@/test/nuqs-testing'
+import { PLUGIN_TYPE_SEARCH_MAP } from '../constants'
vi.mock('@/config', () => ({
API_PREFIX: '/api',
@@ -116,6 +117,7 @@ describe('useMarketplaceData', () => {
expect(result.current.plugins).toBeDefined()
expect(result.current.pluginsTotal).toBeDefined()
+ expect(mockCollections).not.toHaveBeenCalled()
document.body.removeChild(container)
})
@@ -161,6 +163,35 @@ describe('useMarketplaceData', () => {
document.body.removeChild(container)
})
+ it('should use the server route category for hydrated standalone search', async () => {
+ const { useMarketplaceData } = await import('../state')
+ const { Wrapper } = createWrapper('?q=openai')
+
+ const container = document.createElement('div')
+ container.id = 'marketplace-container'
+ document.body.appendChild(container)
+
+ const { result } = renderHook(() => useMarketplaceData(PLUGIN_TYPE_SEARCH_MAP.model), {
+ wrapper: Wrapper,
+ })
+
+ await waitFor(() => {
+ expect(result.current.isLoading).toBe(false)
+ })
+
+ expect(mockSearchAdvanced).toHaveBeenCalledWith(
+ expect.objectContaining({
+ body: expect.objectContaining({
+ category: 'model',
+ query: 'openai',
+ }),
+ }),
+ expect.any(Object),
+ )
+
+ document.body.removeChild(container)
+ })
+
it('should trigger scroll pagination via handlePageChange callback', async () => {
// Return enough data to indicate hasNextPage (40 of 200 total)
mockSearchAdvanced.mockResolvedValue({
@@ -287,4 +318,53 @@ describe('useMarketplaceData', () => {
document.body.removeChild(container)
})
+
+ // Regression: `isSearchMode` was derived from the raw URL value while the
+ // request body used the 500ms-debounced one. Keystroke #1 therefore flipped
+ // the hook into search mode with an empty query, firing a full search for ''
+ // whose generic top-plugins results rendered until the real ones replaced
+ // them — the wrong-results flash at the start of every search session.
+ it('should never issue an empty-query search when typing starts', async () => {
+ const { useMarketplaceData } = await import('../state')
+ const { useSearchPluginText } = await import('../atoms')
+ const { Wrapper } = createWrapper('?category=all')
+
+ const container = document.createElement('div')
+ container.id = 'marketplace-container'
+ document.body.appendChild(container)
+
+ const { result } = renderHook(
+ () => ({
+ data: useMarketplaceData(),
+ setSearch: useSearchPluginText()[1],
+ }),
+ { wrapper: Wrapper },
+ )
+
+ await waitFor(() => {
+ expect(result.current.data.isLoading).toBe(false)
+ })
+
+ await act(async () => {
+ await result.current.setSearch('openai')
+ })
+
+ await waitFor(
+ () => {
+ expect(mockSearchAdvanced).toHaveBeenCalled()
+ },
+ { timeout: 3000 },
+ )
+
+ expect(mockSearchAdvanced).not.toHaveBeenCalledWith(
+ expect.objectContaining({ body: expect.objectContaining({ query: '' }) }),
+ expect.anything(),
+ )
+ expect(mockSearchAdvanced).toHaveBeenCalledWith(
+ expect.objectContaining({ body: expect.objectContaining({ query: 'openai' }) }),
+ expect.anything(),
+ )
+
+ document.body.removeChild(container)
+ })
})
diff --git a/web/app/components/plugins/marketplace/__tests__/utils.spec.ts b/web/app/components/plugins/marketplace/__tests__/utils.spec.ts
index ec9e0b66772..546d16e7c3f 100644
--- a/web/app/components/plugins/marketplace/__tests__/utils.spec.ts
+++ b/web/app/components/plugins/marketplace/__tests__/utils.spec.ts
@@ -229,13 +229,14 @@ describe('getMarketplacePluginsByCollectionId', () => {
expect(result).toHaveLength(2)
})
- it('should handle fetch error and return empty array', async () => {
+ it('should propagate fetch errors', async () => {
mockCollectionPlugins.mockRejectedValueOnce(new Error('Network error'))
const { getMarketplacePluginsByCollectionId } = await import('../utils')
- const result = await getMarketplacePluginsByCollectionId('test-collection')
- expect(result).toEqual([])
+ await expect(getMarketplacePluginsByCollectionId('test-collection')).rejects.toThrow(
+ 'Network error',
+ )
})
it('should send an empty body when query is omitted', async () => {
@@ -299,14 +300,35 @@ describe('getMarketplaceCollectionsAndPlugins', () => {
expect(result.marketplaceCollectionPluginsMap).toBeDefined()
})
- it('should handle fetch error and return empty data', async () => {
+ it('should propagate a failing collections request', async () => {
mockCollections.mockRejectedValueOnce(new Error('Network error'))
+ const { getMarketplaceCollectionsAndPlugins } = await import('../utils')
+
+ // Resolving an empty catalog here made a backend outage indistinguishable
+ // from "no collections", cached as a success for the whole staleTime.
+ await expect(getMarketplaceCollectionsAndPlugins()).rejects.toThrow('Network error')
+ })
+
+ it('should keep the catalog when a single collection fails', async () => {
+ mockCollections.mockResolvedValueOnce({
+ data: {
+ collections: [
+ { name: 'ok', label: {}, description: {}, rule: '', created_at: '', updated_at: '' },
+ { name: 'broken', label: {}, description: {}, rule: '', created_at: '', updated_at: '' },
+ ],
+ },
+ })
+ mockCollectionPlugins
+ .mockResolvedValueOnce({ data: { plugins: [{ type: 'plugin', org: 'a', name: 'b' }] } })
+ .mockRejectedValueOnce(new Error('collection down'))
+
const { getMarketplaceCollectionsAndPlugins } = await import('../utils')
const result = await getMarketplaceCollectionsAndPlugins()
- expect(result.marketplaceCollections).toEqual([])
- expect(result.marketplaceCollectionPluginsMap).toEqual({})
+ expect(result.marketplaceCollections).toHaveLength(2)
+ expect(result.marketplaceCollectionPluginsMap.ok).toHaveLength(1)
+ expect(result.marketplaceCollectionPluginsMap.broken).toEqual([])
})
it('should append condition and type to URL when provided', async () => {
@@ -431,23 +453,15 @@ describe('getMarketplacePlugins', () => {
expect(call![0].body.category).toBe('')
})
- it('should handle API error and return empty result', async () => {
+ it('should propagate API errors instead of synthesizing an empty page', async () => {
mockSearchAdvanced.mockRejectedValueOnce(new Error('API error'))
const { getMarketplacePlugins } = await import('../utils')
- const result = await getMarketplacePlugins(
- {
- query: 'fail',
- },
- 2,
- )
- expect(result).toEqual({
- plugins: [],
- total: 0,
- page: 2,
- page_size: 40,
- })
+ // A synthesized `{ plugins: [], total: 0 }` resolved as a *success*: no
+ // isError, no retry, a cached empty result, and getNextPageParam saw
+ // total 0 and killed pagination for that key permanently.
+ await expect(getMarketplacePlugins({ query: 'fail' }, 2)).rejects.toThrow('API error')
})
it('should pass abort signal when provided', async () => {
diff --git a/web/app/components/plugins/marketplace/atoms.ts b/web/app/components/plugins/marketplace/atoms.ts
index a2118997a96..c01990d548a 100644
--- a/web/app/components/plugins/marketplace/atoms.ts
+++ b/web/app/components/plugins/marketplace/atoms.ts
@@ -1,9 +1,10 @@
import type { PluginsSort, SearchParamsFromCollection } from '@dify/contracts/marketplace'
+import type { ActivePluginType } from './constants'
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 { marketplaceSearchParamsParsers } from './search-params'
+import { useCallback, useEffect } from 'react'
+import { DEFAULT_SORT } from './constants'
+import { marketplaceSearchParamsParsers, shouldSearchMarketplacePlugins } from './search-params'
const marketplaceSortAtom = atom(DEFAULT_SORT)
export function useMarketplaceSort() {
@@ -21,6 +22,9 @@ export function useActivePluginType() {
export function useFilterPluginTags() {
return useQueryState('tags', marketplaceSearchParamsParsers.tags)
}
+export function useFilterTemplateLanguages() {
+ return useQueryState('languages', marketplaceSearchParamsParsers.languages)
+}
/**
* Not all categories have collections, so we need to
@@ -28,19 +32,48 @@ export function useFilterPluginTags() {
*/
export const searchModeAtom = atom(null)
-export function useMarketplaceSearchMode() {
- const [searchPluginText] = useSearchPluginText()
+export function useMarketplaceSearchMode(
+ activePluginTypeOverride?: ActivePluginType,
+ // Callers that debounce the query text MUST pass the debounced value here.
+ // Deciding "are we searching?" from the raw URL value while the request body
+ // carries the debounced one flips this hook true on keystroke #1, firing a
+ // wasted empty-query search whose generic top-plugins list renders for the
+ // debounce window before the real results replace it. '' is a meaningful
+ // override, so this is `??`, not `||`.
+ searchPluginTextOverride?: string,
+) {
+ const [searchPluginTextFromUrl] = useSearchPluginText()
+ const searchPluginText = searchPluginTextOverride ?? searchPluginTextFromUrl
const [filterPluginTags] = useFilterPluginTags()
- const [activePluginType] = useActivePluginType()
+ const [activePluginTypeFromUrl] = useActivePluginType()
+ const activePluginType = activePluginTypeOverride ?? activePluginTypeFromUrl
const searchMode = useAtomValue(searchModeAtom)
const isSearchMode =
- !!searchPluginText ||
- filterPluginTags.length > 0 ||
- (searchMode ?? !PLUGIN_CATEGORY_WITH_COLLECTIONS.has(activePluginType))
+ searchMode === true ||
+ shouldSearchMarketplacePlugins({
+ category: activePluginType,
+ q: searchPluginText,
+ tags: filterPluginTags,
+ })
return isSearchMode
}
+/**
+ * The forced search mode lives in the app-wide Jotai store, so a "View More"
+ * click would otherwise leak into the next visit of the plugin catalog after
+ * navigating away (e.g. to /templates) and back, rendering empty-query search
+ * results instead of the prefetched collections. Reset it when the catalog
+ * route mounts; URL-owned state (q, tags, category) is not affected.
+ */
+export function useResetMarketplaceSearchModeOnMount() {
+ const setSearchMode = useSetAtom(searchModeAtom)
+
+ useEffect(() => {
+ setSearchMode(null)
+ }, [setSearchMode])
+}
+
export function useMarketplaceMoreClick() {
const [, setQ] = useSearchPluginText()
const setSort = useSetAtom(marketplaceSortAtom)
diff --git a/web/app/components/plugins/marketplace/constants.ts b/web/app/components/plugins/marketplace/constants.ts
index 5db8045a547..9dda37bd3dc 100644
--- a/web/app/components/plugins/marketplace/constants.ts
+++ b/web/app/components/plugins/marketplace/constants.ts
@@ -5,6 +5,12 @@ export const DEFAULT_SORT = {
sortOrder: 'DESC',
}
+/**
+ * DOM id of the marketplace scroll container. The route components render it
+ * and the scroll/viewport observers below the marketplace tree look it up.
+ */
+export const MARKETPLACE_CONTAINER_ID = 'marketplace-container'
+
export const SCROLL_BOTTOM_THRESHOLD = 100
export const PLUGIN_TYPE_SEARCH_MAP = {
diff --git a/web/app/components/plugins/marketplace/creator-center-url.ts b/web/app/components/plugins/marketplace/creator-center-url.ts
new file mode 100644
index 00000000000..33f2d3d5566
--- /dev/null
+++ b/web/app/components/plugins/marketplace/creator-center-url.ts
@@ -0,0 +1,48 @@
+import { useSyncExternalStore } from 'react'
+
+export const PUBLIC_CREATOR_CENTER_URL = 'https://creators.dify.ai/'
+
+const subscribe = () => () => {}
+
+/**
+ * marketplace.dify.ai → creators.dify.ai
+ * marketplace.dify.dev → creators.dify.dev
+ * marketplace-staging.dify.dev → creators-staging.dify.dev
+ */
+export const rewriteMarketplaceOriginToCreators = (origin: string): string | null => {
+ if (!origin) return null
+
+ try {
+ const marketplaceUrl = new URL(origin)
+ const [service, ...domain] = marketplaceUrl.hostname.split('.')
+ if (!service?.startsWith('marketplace') || domain.length === 0) return null
+
+ marketplaceUrl.hostname = [service.replace(/^marketplace/, 'creators'), ...domain].join('.')
+ marketplaceUrl.pathname = '/'
+ marketplaceUrl.search = ''
+ marketplaceUrl.hash = ''
+ return marketplaceUrl.toString()
+ } catch {
+ return null
+ }
+}
+
+export const getCreatorCenterUrl = (marketplaceUrlPrefix: string, pageOrigin?: string): string => {
+ return (
+ rewriteMarketplaceOriginToCreators(pageOrigin ?? '') ||
+ rewriteMarketplaceOriginToCreators(marketplaceUrlPrefix) ||
+ PUBLIC_CREATOR_CENTER_URL
+ )
+}
+
+/**
+ * Prefer the current page origin when this is the standalone Marketplace, so a
+ * .dev deployment cannot inherit a baked-in .ai Creator Center URL.
+ */
+export const useCreatorCenterUrl = (marketplaceUrlPrefix: string) => {
+ return useSyncExternalStore(
+ subscribe,
+ () => getCreatorCenterUrl(marketplaceUrlPrefix, window.location.origin),
+ () => getCreatorCenterUrl(marketplaceUrlPrefix),
+ )
+}
diff --git a/web/app/components/plugins/marketplace/creator-profile/__tests__/creation-card.spec.tsx b/web/app/components/plugins/marketplace/creator-profile/__tests__/creation-card.spec.tsx
new file mode 100644
index 00000000000..e81cb64ffa3
--- /dev/null
+++ b/web/app/components/plugins/marketplace/creator-profile/__tests__/creation-card.spec.tsx
@@ -0,0 +1,50 @@
+import type { CreatorCreation } from '../model'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+import CreationCard from '../creation-card'
+
+vi.mock('@/app/components/base/app-icon', () => ({
+ default: () => ,
+}))
+
+const creation: CreatorCreation = {
+ id: 'plugin:dify/search',
+ kind: 'plugin',
+ title: 'Search',
+ description: 'Search the web.',
+ target: { type: 'plugin', pluginType: 'plugin', org: 'dify', name: 'search' },
+ icon: { type: 'emoji', value: '🔎' },
+ dependencyIcons: ['/one.png', '/two.png'],
+ dependencyCount: 4,
+ updatedAt: 1,
+ createdAt: 1,
+ popularity: 1,
+}
+
+describe('CreationCard', () => {
+ it('renders a host link without selecting', () => {
+ render(
+ ,
+ )
+
+ expect(screen.getByRole('link', { name: 'Search' })).toHaveAttribute(
+ 'href',
+ '/plugin/dify/search?language=en-US',
+ )
+ expect(screen.getByText('+2')).toBeInTheDocument()
+ })
+
+ it('selects in Dify without rendering a navigation target', async () => {
+ const user = userEvent.setup()
+ const onSelect = vi.fn()
+ render()
+
+ await user.click(screen.getByRole('button', { name: 'Search' }))
+ expect(onSelect).toHaveBeenCalledOnce()
+ expect(screen.queryByRole('link')).not.toBeInTheDocument()
+ })
+})
diff --git a/web/app/components/plugins/marketplace/creator-profile/__tests__/creator-content.spec.tsx b/web/app/components/plugins/marketplace/creator-profile/__tests__/creator-content.spec.tsx
new file mode 100644
index 00000000000..39306668d88
--- /dev/null
+++ b/web/app/components/plugins/marketplace/creator-profile/__tests__/creator-content.spec.tsx
@@ -0,0 +1,94 @@
+import type { CreatorCreation } from '../model'
+import { screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+import { renderWithNuqs } from '@/test/nuqs-testing'
+import CreatorContent from '../creator-content'
+
+vi.mock('#i18n', async () => {
+ const { withSelectorKey } = await import('@/test/i18n-mock')
+ const translations: Record = {
+ 'marketplace.creatorProfile.creations': 'Creations',
+ 'marketplace.creatorProfile.sortBy': 'Sort by',
+ 'marketplace.creatorProfile.sort.updatedAt': 'Recently updated',
+ 'marketplace.creatorProfile.sort.createdAt': 'Recently created',
+ 'marketplace.creatorProfile.sort.popularity': 'Most popular',
+ 'marketplace.creatorProfile.sort.asc': 'Sort ascending',
+ 'marketplace.creatorProfile.sort.desc': 'Sort descending',
+ 'marketplace.creatorProfile.type.plugin': 'Plugin',
+ 'marketplace.creatorProfile.type.template': 'Template',
+ }
+
+ return {
+ useTranslation: () => ({
+ t: withSelectorKey((key: string) => translations[key] ?? key),
+ }),
+ }
+})
+
+vi.mock('@/app/components/base/app-icon', () => ({
+ default: () => ,
+}))
+
+const createCreation = (
+ id: string,
+ title: string,
+ updatedAt: number,
+ createdAt: number,
+ popularity: number,
+): CreatorCreation => ({
+ id,
+ kind: 'plugin',
+ title,
+ description: `${title} description`,
+ target: { type: 'plugin', pluginType: 'plugin', org: 'dify', name: id },
+ icon: { type: 'emoji', value: 'P' },
+ dependencyIcons: [],
+ dependencyCount: 0,
+ updatedAt,
+ createdAt,
+ popularity,
+})
+
+const creations = [
+ createCreation('alpha', 'Alpha', 2, 3, 1),
+ createCreation('bravo', 'Bravo', 3, 1, 2),
+ createCreation('charlie', 'Charlie', 1, 2, 3),
+]
+
+const cardNames = () => screen.getAllByRole('link').map((link) => link.getAttribute('aria-label'))
+
+describe('CreatorContent', () => {
+ it('writes sort into the URL and reorders the current cards', async () => {
+ const user = userEvent.setup()
+ const { onUrlUpdate } = renderWithNuqs(
+ ({ type: 'link', href: `/creation/${creation.id}` })}
+ />,
+ )
+
+ expect(cardNames()).toEqual(['Bravo', 'Alpha', 'Charlie'])
+
+ await user.click(screen.getByRole('button', { name: 'Sort by Recently updated' }))
+ const recentlyUpdatedOption = screen.getByRole('menuitemradio', {
+ name: 'Recently updated',
+ })
+ const mostPopularOption = screen.getByRole('menuitemradio', { name: 'Most popular' })
+ expect(recentlyUpdatedOption).toHaveAttribute('aria-checked', 'true')
+ expect(mostPopularOption).toHaveAttribute('aria-checked', 'false')
+
+ await user.click(mostPopularOption)
+ await waitFor(() => {
+ expect(cardNames()).toEqual(['Charlie', 'Bravo', 'Alpha'])
+ expect(onUrlUpdate.mock.calls.at(-1)?.[0].searchParams.get('sort_by')).toBe('popularity')
+ })
+
+ await user.click(screen.getByRole('button', { name: 'Sort ascending' }))
+ await waitFor(() => {
+ expect(cardNames()).toEqual(['Alpha', 'Bravo', 'Charlie'])
+ expect(onUrlUpdate.mock.calls.at(-1)?.[0].searchParams.get('sort_order')).toBe('asc')
+ expect(onUrlUpdate.mock.calls.at(-1)?.[0].searchParams.get('sort_by')).toBe('popularity')
+ })
+ })
+})
diff --git a/web/app/components/plugins/marketplace/creator-profile/__tests__/creator-sidebar.spec.tsx b/web/app/components/plugins/marketplace/creator-profile/__tests__/creator-sidebar.spec.tsx
new file mode 100644
index 00000000000..d2d7327502e
--- /dev/null
+++ b/web/app/components/plugins/marketplace/creator-profile/__tests__/creator-sidebar.spec.tsx
@@ -0,0 +1,83 @@
+import type { CreatorProfileViewModel } from '../model'
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import CreatorSidebar from '../creator-sidebar'
+
+vi.mock('#i18n', async () => {
+ const { withSelectorKey } = await import('@/test/i18n-mock')
+ return {
+ useTranslation: () => ({
+ t: withSelectorKey((key: string) => key),
+ }),
+ }
+})
+
+vi.mock('../publisher-avatar', () => ({
+ default: ({ className, size }: { className?: string; size?: number }) => (
+
+ ),
+}))
+
+const profile: CreatorProfileViewModel['profile'] = {
+ kind: 'individual',
+ displayName: 'Creator',
+ handle: 'creator',
+ avatarUrl: '',
+ backgroundUrl: '',
+ badges: [],
+ socialLinks: [
+ { platform: 'website', href: 'https://example.com/', label: 'example.com' },
+ { platform: 'x', href: 'https://x.com/creator', label: 'x.com/creator' },
+ {
+ platform: 'instagram',
+ href: 'https://instagram.com/creator',
+ label: 'instagram.com/creator',
+ },
+ {
+ platform: 'youtube',
+ href: 'https://youtube.com/creator',
+ label: 'youtube.com/creator',
+ },
+ { platform: 'figma', href: 'https://figma.com/@creator', label: 'figma.com/@creator' },
+ { platform: 'github', href: 'https://github.com/creator', label: 'github.com/creator' },
+ ],
+}
+
+describe('CreatorSidebar social links', () => {
+ it('adds a light shadow without changing the avatar geometry', () => {
+ render()
+
+ const avatar = screen.getByTestId('publisher-avatar')
+
+ expect(avatar).toHaveClass('shadow-xs')
+ expect(avatar).toHaveClass(
+ 'absolute',
+ '-top-12',
+ '-left-2',
+ '!size-20',
+ 'border-[1.5px]',
+ 'md:-top-[68px]',
+ 'md:!size-[100px]',
+ )
+ expect(avatar).toHaveAttribute('data-size', '100')
+ })
+
+ it('renders a static platform icon at the start of every social row', () => {
+ render()
+
+ const expectedClasses = [
+ ['example.com', 'i-ri-global-line'],
+ ['x.com/creator', 'i-ri-twitter-x-fill'],
+ ['instagram.com/creator', 'i-ri-instagram-line'],
+ ['youtube.com/creator', 'i-ri-youtube-fill'],
+ ['figma.com/@creator', 'i-ri-figma-line'],
+ ['github.com/creator', 'i-ri-github-fill'],
+ ]
+
+ for (const [name, iconClass] of expectedClasses) {
+ const link = screen.getByRole('link', { name })
+ expect(link.firstElementChild).toHaveClass(iconClass!)
+ expect(link.firstElementChild).toHaveClass('size-4')
+ }
+ })
+})
diff --git a/web/app/components/plugins/marketplace/creator-profile/__tests__/data.server.spec.ts b/web/app/components/plugins/marketplace/creator-profile/__tests__/data.server.spec.ts
new file mode 100644
index 00000000000..c35b8ccc774
--- /dev/null
+++ b/web/app/components/plugins/marketplace/creator-profile/__tests__/data.server.spec.ts
@@ -0,0 +1,261 @@
+import type { MarketplacePlugin, MarketplaceTemplate } from '@dify/contracts/marketplace'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { loadCreatorProfile } from '../data.server'
+
+const mocks = vi.hoisted(() => ({
+ creatorDetail: vi.fn(),
+ organizationDetail: vi.fn(),
+ publisherPlugins: vi.fn(),
+ publisherTemplates: vi.fn(),
+}))
+
+vi.mock('server-only', () => ({}))
+vi.mock('@/config', () => ({ MARKETPLACE_API_PREFIX: 'https://marketplace.example/api/v1' }))
+vi.mock('@/service/client', () => ({ marketplaceClient: mocks }))
+
+const plugin = {
+ type: 'plugin',
+ org: 'dify',
+ name: 'search',
+ plugin_id: 'dify/search',
+ label: { en_US: 'Search' },
+ brief: { en_US: 'Search the web.' },
+ tags: [],
+} as unknown as MarketplacePlugin
+
+const template = {
+ id: 'template-one',
+ template_name: 'Template one',
+ overview: 'Build an app.',
+ icon: '📄',
+ icon_background: '#fff',
+ icon_file_key: '',
+ usage_count: 1,
+ categories: [],
+} as MarketplaceTemplate
+
+describe('loadCreatorProfile', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ mocks.creatorDetail.mockResolvedValue({
+ data: {
+ creator: {
+ unique_handle: 'creator',
+ display_name: 'Creator',
+ social_links: [],
+ },
+ },
+ })
+ mocks.organizationDetail.mockResolvedValue({ data: {} })
+ mocks.publisherPlugins.mockResolvedValue({ data: { plugins: [plugin] } })
+ mocks.publisherTemplates.mockResolvedValue({ data: { templates: [template] } })
+ })
+
+ it('loads individual data through all publisher contracts', async () => {
+ const loaded = await loadCreatorProfile({
+ uniqueHandle: 'creator-one',
+ locale: 'en-US',
+ })
+
+ expect(mocks.creatorDetail).toHaveBeenCalledWith({
+ params: { uniqueHandle: 'creator-one' },
+ })
+ expect(mocks.publisherPlugins).toHaveBeenCalledWith({
+ params: { uniqueHandle: 'creator-one' },
+ query: { page: 1, page_size: 40, sort_by: 'version_updated_at', sort_order: 'DESC' },
+ })
+ expect(loaded?.viewModel.creations).toHaveLength(2)
+ expect(loaded?.pluginsByCreationId['plugin:dify/search']).toBeDefined()
+ expect(loaded?.viewModel.profile.backgroundUrl).toBe('')
+ expect(loaded?.viewModel.profile.avatarUrl).toBe('')
+ })
+
+ it('only emits the remote background URL when the API reports an uploaded background', async () => {
+ mocks.creatorDetail.mockResolvedValue({
+ data: {
+ creator: {
+ unique_handle: 'creator-with-background',
+ display_name: 'Creator with background',
+ background_image: 'creator/background.png',
+ social_links: [],
+ },
+ },
+ })
+
+ const loaded = await loadCreatorProfile({
+ uniqueHandle: 'creator-with-background',
+ locale: 'en-US',
+ })
+
+ expect(loaded?.viewModel.profile.backgroundUrl).toBe(
+ 'https://marketplace.example/api/v1/creators/creator-with-background/background-image',
+ )
+ })
+
+ it('only emits the remote avatar URL when the API reports an uploaded avatar', async () => {
+ mocks.creatorDetail.mockResolvedValue({
+ data: {
+ creator: {
+ unique_handle: 'creator-with-avatar',
+ display_name: 'Creator with avatar',
+ avatar: 'creator/avatar.png',
+ social_links: [],
+ },
+ },
+ })
+
+ const loaded = await loadCreatorProfile({
+ uniqueHandle: 'creator-with-avatar',
+ locale: 'en-US',
+ })
+
+ expect(loaded?.viewModel.profile.avatarUrl).toBe(
+ 'https://marketplace.example/api/v1/creators/creator-with-avatar/avatar',
+ )
+ })
+
+ it('loads evanz from the Marketplace API without a development fixture branch', async () => {
+ await loadCreatorProfile({ uniqueHandle: 'evanz', locale: 'en-US' })
+
+ expect(mocks.creatorDetail).toHaveBeenCalledWith({ params: { uniqueHandle: 'evanz' } })
+ expect(mocks.publisherTemplates).toHaveBeenCalledWith({
+ params: { uniqueHandle: 'evanz' },
+ query: { page: 1, page_size: 40, sort_by: 'updated_at', sort_order: 'DESC' },
+ })
+ })
+
+ it('forwards popularity sort to each publisher API column', async () => {
+ await loadCreatorProfile({
+ uniqueHandle: 'creator-one',
+ locale: 'en-US',
+ sortBy: 'popularity',
+ sortOrder: 'asc',
+ })
+
+ expect(mocks.publisherPlugins).toHaveBeenCalledWith({
+ params: { uniqueHandle: 'creator-one' },
+ query: { page: 1, page_size: 40, sort_by: 'install_count', sort_order: 'ASC' },
+ })
+ expect(mocks.publisherTemplates).toHaveBeenCalledWith({
+ params: { uniqueHandle: 'creator-one' },
+ query: { page: 1, page_size: 40, sort_by: 'usage_count', sort_order: 'ASC' },
+ })
+ })
+
+ it('merge-sorts mixed creations after the publisher responses return', async () => {
+ mocks.publisherPlugins.mockResolvedValue({
+ data: {
+ plugins: [{ ...plugin, install_count: 2, created_at: '2026-01-01T00:00:00Z' }],
+ },
+ })
+ mocks.publisherTemplates.mockResolvedValue({
+ data: {
+ templates: [{ ...template, usage_count: 5, created_at: '2026-01-02T00:00:00Z' }],
+ },
+ })
+
+ const loaded = await loadCreatorProfile({
+ uniqueHandle: 'creator-one',
+ locale: 'en-US',
+ sortBy: 'popularity',
+ sortOrder: 'desc',
+ })
+
+ expect(loaded?.viewModel.creations.map(({ kind }) => kind)).toEqual(['template', 'plugin'])
+ })
+
+ it('fetches remaining publisher pages until the reported total is loaded', async () => {
+ const extraPlugin = {
+ ...plugin,
+ name: 'extra',
+ plugin_id: 'dify/extra',
+ } as MarketplacePlugin
+ mocks.publisherPlugins
+ .mockResolvedValueOnce({
+ data: { plugins: [plugin], total: 2 },
+ })
+ .mockResolvedValueOnce({
+ data: { plugins: [extraPlugin], total: 2 },
+ })
+
+ const loaded = await loadCreatorProfile({
+ uniqueHandle: 'paged-creator',
+ locale: 'en-US',
+ })
+
+ expect(mocks.publisherPlugins).toHaveBeenNthCalledWith(1, {
+ params: { uniqueHandle: 'paged-creator' },
+ query: { page: 1, page_size: 40, sort_by: 'version_updated_at', sort_order: 'DESC' },
+ })
+ expect(mocks.publisherPlugins).toHaveBeenNthCalledWith(2, {
+ params: { uniqueHandle: 'paged-creator' },
+ query: { page: 2, page_size: 40, sort_by: 'version_updated_at', sort_order: 'DESC' },
+ })
+ expect(loaded?.pluginsByCreationId['plugin:dify/search']).toBeDefined()
+ expect(loaded?.pluginsByCreationId['plugin:dify/extra']).toBeDefined()
+ })
+
+ it('keeps successful creations when one publisher request fails', async () => {
+ mocks.publisherPlugins.mockRejectedValue(new Error('plugin request failed'))
+
+ const loaded = await loadCreatorProfile({
+ uniqueHandle: 'creator-partial',
+ locale: 'en-US',
+ })
+
+ expect(loaded?.viewModel.creations.map(({ kind }) => kind)).toEqual(['template'])
+ })
+
+ it('returns null when the primary creator does not exist', async () => {
+ mocks.creatorDetail.mockResolvedValue({ data: {} })
+
+ await expect(
+ loadCreatorProfile({ uniqueHandle: 'missing-creator', locale: 'en-US' }),
+ ).resolves.toBeNull()
+ })
+
+ it('rethrows when the primary creator request fails', async () => {
+ mocks.creatorDetail.mockRejectedValue(new Error('creator request timed out'))
+
+ await expect(
+ loadCreatorProfile({ uniqueHandle: 'slow-creator', locale: 'en-US' }),
+ ).rejects.toThrow('creator request timed out')
+ })
+
+ it('rethrows when the organization request fails', async () => {
+ mocks.organizationDetail.mockRejectedValue(new Error('organization request timed out'))
+
+ await expect(
+ loadCreatorProfile({
+ uniqueHandle: 'slow-org',
+ publisherType: 'organization',
+ locale: 'en-US',
+ }),
+ ).rejects.toThrow('organization request timed out')
+ })
+
+ it('maps organizations to the shared creator profile shape', async () => {
+ mocks.organizationDetail.mockResolvedValue({
+ data: {
+ organization: {
+ id: 'org-id',
+ unique_handle: 'dify-org',
+ display_name: 'Dify Org',
+ social_links: [],
+ },
+ },
+ })
+
+ const loaded = await loadCreatorProfile({
+ uniqueHandle: 'dify-org',
+ publisherType: 'organization',
+ locale: 'en-US',
+ })
+
+ expect(mocks.organizationDetail).toHaveBeenCalledWith({ params: { id: 'dify-org' } })
+ expect(loaded?.viewModel.profile).toMatchObject({
+ kind: 'organization',
+ displayName: 'Dify Org',
+ })
+ })
+})
diff --git a/web/app/components/plugins/marketplace/creator-profile/__tests__/dify-profile.spec.tsx b/web/app/components/plugins/marketplace/creator-profile/__tests__/dify-profile.spec.tsx
new file mode 100644
index 00000000000..7b9fad871c8
--- /dev/null
+++ b/web/app/components/plugins/marketplace/creator-profile/__tests__/dify-profile.spec.tsx
@@ -0,0 +1,229 @@
+import type { MarketplaceTemplate } from '@dify/contracts/marketplace'
+import type { MarketplaceSearchSelection } from '../../home/marketplace-search-autocomplete'
+import type { LoadedCreatorProfile } from '../model'
+import type { Plugin } from '@/app/components/plugins/types'
+import { screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { renderWithNuqs } from '@/test/nuqs-testing'
+import DifyCreatorProfile from '../dify-profile'
+
+const mocks = vi.hoisted(() => ({
+ push: vi.fn(),
+ installedInfo: { 'dify/deep_research': { version: '0.0.1' } },
+}))
+
+const deepResearchPlugin = {
+ type: 'plugin',
+ org: 'dify',
+ name: 'deep_research',
+ plugin_id: 'dify/deep_research',
+ latest_package_identifier: 'dify/deep_research:0.0.1@test',
+ label: { 'en-US': 'Deep Research' },
+ brief: { 'en-US': 'Research the web.' },
+} as unknown as Plugin
+
+const searchPlugin = {
+ ...deepResearchPlugin,
+ name: 'search_result',
+ plugin_id: 'dify/search_result',
+ latest_package_identifier: 'dify/search_result:0.0.1@test',
+ label: { 'en-US': 'Search result' },
+} as Plugin
+
+const template: MarketplaceTemplate = {
+ id: 'template-one',
+ template_name: 'Research Template',
+ overview: 'Build a research app.',
+ icon: 'R',
+ icon_background: '#fff',
+ icon_file_key: '',
+ publisher_unique_handle: 'dify',
+ usage_count: 1,
+ categories: [],
+}
+
+const loadedProfile: LoadedCreatorProfile = {
+ viewModel: {
+ profile: {
+ kind: 'individual',
+ displayName: 'Creator',
+ handle: 'creator',
+ avatarUrl: '',
+ backgroundUrl: '',
+ badges: [],
+ socialLinks: [],
+ },
+ creations: [
+ {
+ id: 'plugin:dify/deep_research',
+ kind: 'plugin',
+ title: 'Deep Research',
+ description: 'Research the web.',
+ target: {
+ type: 'plugin',
+ pluginType: 'plugin',
+ org: 'dify',
+ name: 'deep_research',
+ },
+ icon: { type: 'emoji', value: 'R' },
+ dependencyIcons: [],
+ dependencyCount: 0,
+ updatedAt: 1,
+ createdAt: 1,
+ popularity: 1,
+ },
+ {
+ id: 'template:template-one',
+ kind: 'template',
+ title: 'Research Template',
+ description: 'Build a research app.',
+ target: {
+ type: 'template',
+ id: 'template-one',
+ publisher: 'dify',
+ templateName: 'Research Template',
+ },
+ icon: { type: 'emoji', value: 'R' },
+ dependencyIcons: [],
+ dependencyCount: 0,
+ updatedAt: 1,
+ createdAt: 1,
+ popularity: 1,
+ },
+ ],
+ },
+ pluginsByCreationId: {
+ 'plugin:dify/deep_research': deepResearchPlugin,
+ },
+ templatesByCreationId: {
+ 'template:template-one': template,
+ },
+}
+
+vi.mock('#i18n', async () => {
+ const { withSelectorKey } = await import('@/test/i18n-mock')
+ return {
+ useTranslation: () => ({
+ t: withSelectorKey((key: string) => key),
+ }),
+ }
+})
+
+vi.mock('@/next/navigation', () => ({
+ useRouter: () => ({ push: mocks.push }),
+}))
+
+vi.mock('@/app/components/main-nav/components/account-section', () => ({
+ default: () => ,
+}))
+
+vi.mock('@/app/components/base/app-icon', () => ({
+ default: () => ,
+}))
+
+vi.mock('@/app/components/plugins/install-plugin/hooks/use-check-installed', () => ({
+ default: () => ({ installedInfo: mocks.installedInfo }),
+}))
+
+vi.mock('@/app/components/plugins/install-plugin/install-from-marketplace', () => ({
+ default: ({ manifest }: { manifest: { name: string } }) => (
+ {manifest.name}
+ ),
+}))
+
+vi.mock('../../detail-dialog', () => ({
+ default: ({
+ isInstalled,
+ onInstall,
+ plugin,
+ }: {
+ isInstalled: boolean
+ onInstall: () => void
+ plugin: { name: string }
+ }) => (
+
+ {plugin.name}
+ {isInstalled ? 'installed' : 'not installed'}
+
+
+ ),
+}))
+
+vi.mock('../../templates/template-detail-dialog', () => ({
+ default: ({
+ onInstall,
+ template,
+ }: {
+ onInstall: () => void
+ template: { template_name: string }
+ }) => (
+
+ {template.template_name}
+
+
+ ),
+}))
+
+vi.mock('../header', () => ({
+ default: ({
+ onSuggestionSelect,
+ }: {
+ onSuggestionSelect: (selection: MarketplaceSearchSelection) => void
+ }) => (
+
+ ),
+}))
+
+describe('DifyCreatorProfile', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ })
+
+ it('opens the existing plugin detail flow with installed state', async () => {
+ const user = userEvent.setup()
+ renderWithNuqs()
+
+ await user.click(screen.getByRole('button', { name: 'Deep Research' }))
+
+ const dialog = screen.getByRole('dialog', { name: 'plugin-detail' })
+ expect(dialog).toHaveTextContent('deep_research')
+ expect(dialog).toHaveTextContent('installed')
+
+ await user.click(screen.getByRole('button', { name: 'Install plugin' }))
+ expect(screen.getByTestId('install-plugin')).toHaveTextContent('deep_research')
+ })
+
+ it('opens a template detail and imports it inside Dify', async () => {
+ const user = userEvent.setup()
+ renderWithNuqs()
+
+ await user.click(screen.getByRole('button', { name: 'Research Template' }))
+ expect(screen.getByRole('dialog', { name: 'template-detail' })).toBeInTheDocument()
+
+ await user.click(screen.getByRole('button', { name: 'Install template' }))
+ expect(mocks.push).toHaveBeenCalledWith('/apps?template-id=template-one')
+ })
+
+ it('opens search results in the same plugin dialog controller', async () => {
+ const user = userEvent.setup()
+ renderWithNuqs()
+
+ await user.click(screen.getByRole('button', { name: 'Select search plugin' }))
+
+ const dialog = screen.getByRole('dialog', { name: 'plugin-detail' })
+ expect(dialog).toHaveTextContent('search_result')
+ expect(dialog).toHaveTextContent('not installed')
+ })
+})
diff --git a/web/app/components/plugins/marketplace/creator-profile/__tests__/header.spec.tsx b/web/app/components/plugins/marketplace/creator-profile/__tests__/header.spec.tsx
new file mode 100644
index 00000000000..b8887a2b7c8
--- /dev/null
+++ b/web/app/components/plugins/marketplace/creator-profile/__tests__/header.spec.tsx
@@ -0,0 +1,42 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import CreatorProfileHeader from '../header'
+
+vi.mock('#i18n', async () => {
+ const { withSelectorKey } = await import('@/test/i18n-mock')
+ const translations: Record = {
+ 'marketplace.home.plugins': 'Plugins',
+ 'marketplace.home.templates': 'Templates',
+ 'marketplace.creatorProfile.searchPlaceholder': 'Search plugins or templates',
+ 'mainNav.marketplace': 'Marketplace',
+ }
+
+ return {
+ useTranslation: () => ({
+ t: withSelectorKey((key: string) => translations[key] ?? key),
+ }),
+ }
+})
+
+vi.mock('../../home/home-guide', () => ({
+ default: () => ,
+}))
+
+vi.mock('../../home/marketplace-search-autocomplete', () => ({
+ MarketplaceSearchAutocomplete: () => ,
+}))
+
+describe('CreatorProfileHeader', () => {
+ it('returns to the native Marketplace without marking a catalog tab active', () => {
+ render()
+
+ const pluginsLink = screen.getByRole('link', { name: 'Plugins' })
+ const templatesLink = screen.getByRole('link', { name: 'Templates' })
+
+ expect(pluginsLink).toHaveAttribute('href', '/marketplace')
+ expect(pluginsLink).not.toHaveAttribute('aria-current')
+ expect(pluginsLink).not.toHaveClass('bg-state-base-active')
+ expect(templatesLink).not.toHaveAttribute('aria-current')
+ expect(templatesLink).not.toHaveClass('bg-state-base-active')
+ })
+})
diff --git a/web/app/components/plugins/marketplace/creator-profile/__tests__/model.spec.ts b/web/app/components/plugins/marketplace/creator-profile/__tests__/model.spec.ts
new file mode 100644
index 00000000000..ff8a507998c
--- /dev/null
+++ b/web/app/components/plugins/marketplace/creator-profile/__tests__/model.spec.ts
@@ -0,0 +1,195 @@
+import type {
+ MarketplaceCreator,
+ MarketplacePlugin,
+ MarketplaceTemplate,
+} from '@dify/contracts/marketplace'
+import { describe, expect, it } from 'vitest'
+import {
+ adaptCreatorProfile,
+ getStandaloneCreationHref,
+ normalizeCreatorSocialLink,
+ parseCreatorSortField,
+ parseCreatorSortOrder,
+ sortCreatorCreations,
+ toPublisherSortQuery,
+} from '../model'
+
+const creator: MarketplaceCreator = {
+ unique_handle: 'evanz',
+ display_name: 'Evan.Z',
+ social_links: ['github.com/evanz', 'javascript:alert(1)'],
+ badges: ['partner'],
+ verified: true,
+}
+
+const plugin = {
+ type: 'bundle',
+ org: 'dify',
+ name: 'research',
+ labels: { en_US: 'Research bundle' },
+ description: { en_US: 'Research reliably.' },
+ install_count: 20,
+ created_at: '2026-01-01T00:00:00Z',
+ updated_at: '2026-02-01T00:00:00Z',
+} as unknown as MarketplacePlugin
+
+const template = {
+ id: 'template/one',
+ template_name: 'Research template',
+ overview: 'Start a research app.',
+ icon: '📄',
+ icon_background: '#fff',
+ icon_file_key: '',
+ publisher_unique_handle: 'dify',
+ usage_count: 10,
+ categories: [],
+ deps_plugins: ['dify/search'],
+ created_at: '2026-01-02T00:00:00Z',
+ updated_at: '2026-02-02T00:00:00Z',
+} as MarketplaceTemplate
+
+describe('creator profile model', () => {
+ it('normalizes DTOs into host-neutral creation targets and safe social links', () => {
+ const viewModel = adaptCreatorProfile({
+ creator,
+ kind: 'organization',
+ locale: 'en-US',
+ avatarUrl: '/avatar',
+ backgroundUrl: '/background',
+ plugins: [plugin],
+ templates: [template],
+ resolvePluginIcon: () => '/plugin-icon',
+ resolveTemplateIcon: () => '',
+ resolveDependencyIcon: (id) => `/dependency/${id}`,
+ })
+
+ expect(viewModel.profile.badges).toEqual(['partner', 'verified'])
+ expect(viewModel.profile.socialLinks).toEqual([
+ expect.objectContaining({ platform: 'github', href: 'https://github.com/evanz' }),
+ ])
+ expect(viewModel.creations[0]).toMatchObject({
+ title: 'Research bundle',
+ target: { type: 'plugin', pluginType: 'bundle', org: 'dify', name: 'research' },
+ })
+ expect(viewModel.creations[1]).toMatchObject({
+ target: {
+ type: 'template',
+ id: 'template/one',
+ publisher: 'dify',
+ templateName: 'Research template',
+ },
+ dependencyCount: 1,
+ })
+ })
+
+ it('builds standalone plugin, bundle, and template URLs outside the shared model', () => {
+ const viewModel = adaptCreatorProfile({
+ creator,
+ kind: 'individual',
+ locale: 'en-US',
+ avatarUrl: '',
+ backgroundUrl: '',
+ plugins: [plugin],
+ templates: [template],
+ resolvePluginIcon: () => '',
+ resolveTemplateIcon: () => '',
+ resolveDependencyIcon: () => '',
+ })
+
+ expect(getStandaloneCreationHref(viewModel.creations[0]!, 'zh-Hans')).toBe(
+ '/bundles/dify/research?language=zh-Hans',
+ )
+ expect(getStandaloneCreationHref(viewModel.creations[1]!, 'zh-Hans')).toBe(
+ '/template/dify/Research%20template?templateId=template%2Fone&creationType=templates&language=zh-Hans',
+ )
+ })
+
+ it('normalizes Unix-second, Unix-millisecond, and ISO timestamps', () => {
+ const unixSeconds = 1_767_225_600
+ const unixMilliseconds = 1_767_225_700_000
+ const viewModel = adaptCreatorProfile({
+ creator,
+ kind: 'individual',
+ locale: 'en-US',
+ avatarUrl: '',
+ backgroundUrl: '',
+ plugins: [
+ {
+ ...plugin,
+ created_at: unixSeconds,
+ version_updated_at: unixSeconds + 100,
+ },
+ ],
+ templates: [
+ {
+ ...template,
+ created_at: '2026-01-02T00:00:00Z',
+ updated_at: unixMilliseconds,
+ },
+ ],
+ resolvePluginIcon: () => '',
+ resolveTemplateIcon: () => '',
+ resolveDependencyIcon: () => '',
+ })
+
+ expect(viewModel.creations[0]).toMatchObject({
+ createdAt: unixSeconds * 1000,
+ updatedAt: (unixSeconds + 100) * 1000,
+ })
+ expect(viewModel.creations[1]).toMatchObject({
+ createdAt: Date.parse('2026-01-02T00:00:00Z'),
+ updatedAt: unixMilliseconds,
+ })
+ })
+
+ it('maps each UI sort onto the matching plugin and template API columns', () => {
+ expect(toPublisherSortQuery('updatedAt', 'desc')).toEqual({
+ plugins: { sort_by: 'version_updated_at', sort_order: 'DESC' },
+ templates: { sort_by: 'updated_at', sort_order: 'DESC' },
+ })
+ expect(toPublisherSortQuery('createdAt', 'asc')).toEqual({
+ plugins: { sort_by: 'created_at', sort_order: 'ASC' },
+ templates: { sort_by: 'created_at', sort_order: 'ASC' },
+ })
+ expect(toPublisherSortQuery('popularity', 'desc')).toEqual({
+ plugins: { sort_by: 'install_count', sort_order: 'DESC' },
+ templates: { sort_by: 'usage_count', sort_order: 'DESC' },
+ })
+ })
+
+ it('falls back to recently updated descending for unknown URL sort values', () => {
+ expect(parseCreatorSortField('garbage')).toBe('updatedAt')
+ expect(parseCreatorSortField(undefined)).toBe('updatedAt')
+ expect(parseCreatorSortOrder('sideways')).toBe('desc')
+ expect(parseCreatorSortOrder('ASC')).toBe('asc')
+ })
+
+ it('sorts all fields in both directions and preserves equal-value order', () => {
+ const creations = [
+ { id: 'first', updatedAt: 1, createdAt: 3, popularity: 2 },
+ { id: 'second', updatedAt: 1, createdAt: 2, popularity: 3 },
+ { id: 'third', updatedAt: 2, createdAt: 1, popularity: 1 },
+ ] as ReturnType['creations']
+
+ expect(sortCreatorCreations(creations, 'updatedAt', 'asc').map(({ id }) => id)).toEqual([
+ 'first',
+ 'second',
+ 'third',
+ ])
+ expect(sortCreatorCreations(creations, 'createdAt', 'desc').map(({ id }) => id)).toEqual([
+ 'first',
+ 'second',
+ 'third',
+ ])
+ expect(sortCreatorCreations(creations, 'popularity', 'desc').map(({ id }) => id)).toEqual([
+ 'second',
+ 'first',
+ 'third',
+ ])
+ })
+
+ it('rejects unsafe URL schemes', () => {
+ expect(normalizeCreatorSocialLink('data:text/html,bad')).toBeNull()
+ expect(normalizeCreatorSocialLink('mailto:test@example.com')).toBeNull()
+ })
+})
diff --git a/web/app/components/plugins/marketplace/creator-profile/__tests__/view-layout.browser.spec.tsx b/web/app/components/plugins/marketplace/creator-profile/__tests__/view-layout.browser.spec.tsx
new file mode 100644
index 00000000000..ae7959e16aa
--- /dev/null
+++ b/web/app/components/plugins/marketplace/creator-profile/__tests__/view-layout.browser.spec.tsx
@@ -0,0 +1,64 @@
+import type { CreatorProfileViewModel } from '../model'
+import { render } from 'vitest-browser-react'
+import CreatorProfileView from '../view'
+
+vi.mock('#i18n', async () => {
+ const { withSelectorKey } = await import('@/test/i18n-mock')
+
+ return {
+ useTranslation: () => ({
+ t: withSelectorKey((key: string) => key),
+ }),
+ }
+})
+
+vi.mock('../creator-sidebar', () => ({
+ default: () => ,
+}))
+
+vi.mock('../creator-content', () => ({
+ default: () => (
+
+ ),
+}))
+
+const profile: CreatorProfileViewModel = {
+ profile: {
+ kind: 'individual',
+ displayName: 'Creator',
+ handle: 'creator',
+ avatarUrl: '',
+ backgroundUrl: '',
+ badges: [],
+ socialLinks: [],
+ },
+ creations: [],
+}
+
+describe('CreatorProfileView layout', () => {
+ it('keeps the profile background behind content taller than its scrollport', async () => {
+ const screen = await render(
+
+ ({ type: 'link', href: '/' })}
+ />
+
,
+ )
+
+ const scrollport = screen.getByTestId('creator-scrollport').element()
+ const profileRoot = scrollport.firstElementChild as HTMLElement
+ const creations = screen.getByTestId('creator-creations').element()
+
+ expect(profileRoot.getBoundingClientRect().bottom).toBeGreaterThanOrEqual(
+ creations.getBoundingClientRect().bottom,
+ )
+ })
+})
diff --git a/web/app/components/plugins/marketplace/creator-profile/__tests__/view.spec.tsx b/web/app/components/plugins/marketplace/creator-profile/__tests__/view.spec.tsx
new file mode 100644
index 00000000000..e6f5dec38c5
--- /dev/null
+++ b/web/app/components/plugins/marketplace/creator-profile/__tests__/view.spec.tsx
@@ -0,0 +1,88 @@
+import type { CreatorProfileViewModel } from '../model'
+import { fireEvent, render } from '@testing-library/react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it, vi } from 'vitest'
+import CreatorProfileView from '../view'
+
+vi.mock('#i18n', async () => {
+ const { withSelectorKey } = await import('@/test/i18n-mock')
+ return {
+ useTranslation: () => ({
+ t: withSelectorKey((key: string) => key),
+ }),
+ }
+})
+
+vi.mock('../creator-sidebar', () => ({
+ default: () => ,
+}))
+
+vi.mock('../creator-content', () => ({
+ default: () => ,
+}))
+
+const profile: CreatorProfileViewModel = {
+ profile: {
+ kind: 'individual',
+ displayName: 'Creator',
+ handle: 'creator',
+ avatarUrl: '/creator-avatar.png',
+ backgroundUrl: '/creator-background.png',
+ badges: [],
+ socialLinks: [],
+ },
+ creations: [],
+}
+
+describe('CreatorProfileView SSR background', () => {
+ it('includes the default background in server markup before the remote background loads', () => {
+ const markup = renderToStaticMarkup(
+ ({ type: 'link', href: '/' })}
+ />,
+ )
+
+ expect(markup).toContain('default-background.png')
+ expect(markup).toContain('src="/creator-background.png"')
+ })
+
+ it('server-renders only the default background when the profile has no background', () => {
+ const markup = renderToStaticMarkup(
+ ({ type: 'link', href: '/' })}
+ />,
+ )
+
+ expect(markup).toContain('default-background.png')
+ expect(markup).not.toContain(' {
+ const { container } = render(
+ ({ type: 'link', href: '/' })}
+ />,
+ )
+ const remoteBackground = container.querySelector(
+ 'img[src="/creator-background.png"]',
+ )!
+
+ fireEvent.error(remoteBackground)
+
+ expect(remoteBackground).toHaveAttribute('hidden')
+ expect(remoteBackground).toHaveClass('border-0')
+ })
+})
diff --git a/web/app/components/plugins/marketplace/creator-profile/assets/default-background.png b/web/app/components/plugins/marketplace/creator-profile/assets/default-background.png
new file mode 100644
index 00000000000..704fbae82e1
Binary files /dev/null and b/web/app/components/plugins/marketplace/creator-profile/assets/default-background.png differ
diff --git a/web/app/components/plugins/marketplace/creator-profile/creation-card.tsx b/web/app/components/plugins/marketplace/creator-profile/creation-card.tsx
new file mode 100644
index 00000000000..72d62ba275e
--- /dev/null
+++ b/web/app/components/plugins/marketplace/creator-profile/creation-card.tsx
@@ -0,0 +1,94 @@
+'use client'
+
+import type { CreatorCreation, CreatorCreationAction } from './model'
+import { cn } from '@langgenius/dify-ui/cn'
+import { useTranslation } from '#i18n'
+import AppIcon from '@/app/components/base/app-icon'
+import CornerMark from '@/app/components/plugins/card/base/corner-mark'
+import Link from '@/next/link'
+
+const MAX_VISIBLE_DEPENDENCIES = 7
+
+type CreationCardProps = {
+ creation: CreatorCreation
+ action: CreatorCreationAction
+}
+
+const cardClassName =
+ 'group relative flex h-[152px] min-w-0 w-full flex-col overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg pb-3 text-left shadow-xs outline-hidden transition-shadow hover:bg-components-panel-on-panel-item-bg-hover hover:shadow-md focus-visible:ring-2 focus-visible:ring-state-accent-solid'
+
+function CreationCardContent({ creation }: { creation: CreatorCreation }) {
+ const { t } = useTranslation()
+ const visibleDependencies = creation.dependencyIcons.slice(0, MAX_VISIBLE_DEPENDENCIES)
+ const remainingDependencies = Math.max(0, creation.dependencyCount - visibleDependencies.length)
+
+ return (
+ <>
+ $[`marketplace.creatorProfile.type.${creation.kind}`], { ns: 'plugin' })}
+ className={cn(
+ creation.kind === 'plugin' && '[&>div]:text-text-accent',
+ creation.kind === 'template' && '[&>div]:text-text-warning',
+ )}
+ />
+
+
+ {creation.icon.type === 'image' ? (
+
+ ) : (
+
+ )}
+
+ {creation.title}
+
+
+ {creation.description}
+
+
+
+ {visibleDependencies.map((icon) => (
+
+ ))}
+ {remainingDependencies > 0 && (
+
+ +{remainingDependencies}
+
+ )}
+
+
+ {t(($) => $['marketplace.creatorProfile.creations'], { ns: 'plugin' })}
+
+
+
+
+ $['marketplace.creatorProfile.sortBy'], { ns: 'plugin' })} ${selectedSort.label}`}
+ className="flex h-8 items-center rounded-lg px-2 outline-hidden hover:bg-state-base-hover focus-visible:ring-2 focus-visible:ring-state-accent-solid"
+ >
+
+ {t(($) => $['marketplace.creatorProfile.sortBy'], { ns: 'plugin' })}
+
+ {selectedSort.label}
+
+
+
+
+ value={sortField}
+ onValueChange={(nextField) => {
+ void setSort({ sort_by: nextField, sort_order: sortOrder })
+ }}
+ >
+ {sortOptions.map((option) => (
+
+ key={option.value}
+ value={option.value}
+ closeOnClick
+ className="justify-between px-3 pr-2 system-md-regular text-text-primary"
+ >
+ {option.label}
+
+
+ ))}
+
+
+
+
+
+
+
+
+ {sortedCreations.map((creation) => (
+
+ ))}
+
+ ) : (
+
+ {t(($) => $['marketplace.creatorProfile.empty'], { ns: 'plugin' })}
+
+ )}
+
+ )
+}
diff --git a/web/app/components/plugins/marketplace/creator-profile/creator-sidebar.tsx b/web/app/components/plugins/marketplace/creator-profile/creator-sidebar.tsx
new file mode 100644
index 00000000000..0241983e870
--- /dev/null
+++ b/web/app/components/plugins/marketplace/creator-profile/creator-sidebar.tsx
@@ -0,0 +1,114 @@
+'use client'
+
+import type { CreatorProfileViewModel, CreatorSocialPlatform } from './model'
+import { cn } from '@langgenius/dify-ui/cn'
+import { useTranslation } from '#i18n'
+import Partner from '@/app/components/plugins/base/badges/partner'
+import Verified from '@/app/components/plugins/base/badges/verified'
+import PublisherAvatar from './publisher-avatar'
+
+type CreatorSidebarProps = {
+ profile: CreatorProfileViewModel['profile']
+}
+
+function SocialIcon({ platform }: { platform: CreatorSocialPlatform }) {
+ const className = 'size-4 shrink-0 text-text-tertiary'
+
+ if (platform === 'x') return
+ if (platform === 'instagram')
+ return
+ if (platform === 'youtube')
+ return
+ if (platform === 'figma') return
+ if (platform === 'github')
+ return
+
+ return
+}
+
+export default function CreatorSidebar({ profile }: CreatorSidebarProps) {
+ const { t } = useTranslation()
+ const isOrganization = profile.kind === 'organization'
+ const isPartner = profile.badges.includes('partner')
+ const isVerified = profile.badges.includes('verified')
+
+ return (
+
+ )
+}
diff --git a/web/app/components/plugins/marketplace/creator-profile/data.server.ts b/web/app/components/plugins/marketplace/creator-profile/data.server.ts
new file mode 100644
index 00000000000..6de6c8a4df2
--- /dev/null
+++ b/web/app/components/plugins/marketplace/creator-profile/data.server.ts
@@ -0,0 +1,201 @@
+import type {
+ MarketplaceCreator,
+ MarketplaceOrganization,
+ MarketplacePlugin,
+ MarketplaceTemplate,
+} from '@dify/contracts/marketplace'
+import type { CreatorSortField, CreatorSortOrder, LoadedCreatorProfile } from './model'
+import { cache } from 'react'
+import { MARKETPLACE_API_PREFIX } from '@/config'
+import { marketplaceClient } from '@/service/client'
+import { getFormattedPlugin, getPluginIconInMarketplace } from '../utils'
+import {
+ adaptCreatorProfile,
+ parseCreatorSortField,
+ parseCreatorSortOrder,
+ sortCreatorCreations,
+ toPublisherSortQuery,
+} from './model'
+import 'server-only'
+
+const PAGE_SIZE = 40
+const MAX_PAGES = 5
+
+const fetchAllPublisherPages = async (
+ fetchPage: (page: number) => Promise<{ items: T[]; total?: number }>,
+) => {
+ const first = await fetchPage(1)
+ const items = [...first.items]
+ const total = first.total ?? items.length
+
+ for (let page = 2; page <= MAX_PAGES && items.length < total; page++) {
+ const next = await fetchPage(page)
+ if (next.items.length === 0) break
+ items.push(...next.items)
+ }
+
+ return items
+}
+
+const mapOrganizationToCreator = (
+ organization: MarketplaceOrganization,
+ uniqueHandle: string,
+): MarketplaceCreator => ({
+ id: organization.id || organization.name,
+ email: organization.email,
+ name: organization.name || organization.display_name || uniqueHandle,
+ display_name: organization.display_name || organization.name || uniqueHandle,
+ unique_handle: organization.unique_handle || uniqueHandle,
+ display_email: organization.display_email,
+ description: organization.description,
+ avatar: organization.avatar,
+ background_image: organization.background_image,
+ social_links: organization.social_links ?? [],
+ badges: organization.badges,
+ verified: organization.verified,
+ status: organization.status,
+ created_at: organization.created_at,
+ updated_at: organization.updated_at,
+})
+
+const getPublisher = async (uniqueHandle: string, publisherType?: string) => {
+ if (publisherType === 'organization') {
+ const response = await marketplaceClient.organizationDetail({
+ params: { id: uniqueHandle },
+ })
+ const organization = response.data?.organization
+ return organization ? mapOrganizationToCreator(organization, uniqueHandle) : undefined
+ }
+
+ const response = await marketplaceClient.creatorDetail({
+ params: { uniqueHandle },
+ })
+ return response.data?.creator
+}
+
+const getPublisherPlugins = async (
+ uniqueHandle: string,
+ sortField: CreatorSortField,
+ sortOrder: CreatorSortOrder,
+) => {
+ const { plugins } = toPublisherSortQuery(sortField, sortOrder)
+ return fetchAllPublisherPages(async (page) => {
+ const response = await marketplaceClient.publisherPlugins({
+ params: { uniqueHandle },
+ query: { page, page_size: PAGE_SIZE, ...plugins },
+ })
+ return {
+ items: response.data?.plugins ?? [],
+ total: response.data?.total,
+ }
+ })
+}
+
+const getPublisherTemplates = async (
+ uniqueHandle: string,
+ sortField: CreatorSortField,
+ sortOrder: CreatorSortOrder,
+) => {
+ const { templates } = toPublisherSortQuery(sortField, sortOrder)
+ return fetchAllPublisherPages(async (page) => {
+ const response = await marketplaceClient.publisherTemplates({
+ params: { uniqueHandle },
+ query: { page, page_size: PAGE_SIZE, ...templates },
+ })
+ return {
+ items: response.data?.templates ?? [],
+ total: response.data?.total,
+ }
+ })
+}
+
+const getTemplateIcon = (template: MarketplaceTemplate) =>
+ template.icon_file_key
+ ? `${MARKETPLACE_API_PREFIX}/templates/${encodeURIComponent(template.id)}/icon`
+ : ''
+
+const getDependencyIcon = (pluginId: string) =>
+ `${MARKETPLACE_API_PREFIX}/plugins/${pluginId.split('/').map(encodeURIComponent).join('/')}/icon`
+
+const loadCreatorProfileCached = cache(
+ async (
+ uniqueHandle: string,
+ publisherType: string | undefined,
+ locale: string,
+ sortField: CreatorSortField,
+ sortOrder: CreatorSortOrder,
+ ): Promise => {
+ const [creatorResult, pluginsResult, templatesResult] = await Promise.allSettled([
+ getPublisher(uniqueHandle, publisherType),
+ getPublisherPlugins(uniqueHandle, sortField, sortOrder),
+ getPublisherTemplates(uniqueHandle, sortField, sortOrder),
+ ])
+
+ if (creatorResult.status === 'rejected') throw creatorResult.reason
+ const creator = creatorResult.value
+ if (!creator) return null
+
+ const plugins: MarketplacePlugin[] =
+ pluginsResult.status === 'fulfilled' ? pluginsResult.value : []
+ const templates: MarketplaceTemplate[] =
+ templatesResult.status === 'fulfilled' ? templatesResult.value : []
+ const kind = publisherType === 'organization' ? 'organization' : 'individual'
+ const resource = kind === 'organization' ? 'organizations' : 'creators'
+ const encodedHandle = encodeURIComponent(uniqueHandle)
+ const backgroundUrl = creator.background_image
+ ? `${MARKETPLACE_API_PREFIX}/${resource}/${encodedHandle}/background-image`
+ : ''
+ const avatarUrl = creator.avatar
+ ? `${MARKETPLACE_API_PREFIX}/${resource}/${encodedHandle}/avatar`
+ : ''
+ const viewModel = adaptCreatorProfile({
+ creator,
+ kind,
+ locale,
+ avatarUrl,
+ backgroundUrl,
+ plugins,
+ templates,
+ resolvePluginIcon: getPluginIconInMarketplace,
+ resolveTemplateIcon: getTemplateIcon,
+ resolveDependencyIcon: getDependencyIcon,
+ })
+
+ return {
+ viewModel: {
+ ...viewModel,
+ creations: sortCreatorCreations(viewModel.creations, sortField, sortOrder),
+ },
+ pluginsByCreationId: Object.fromEntries(
+ plugins.map((plugin) => [
+ `${plugin.type}:${plugin.org}/${plugin.name}`,
+ getFormattedPlugin(plugin),
+ ]),
+ ),
+ templatesByCreationId: Object.fromEntries(
+ templates.map((template) => [`template:${template.id}`, template]),
+ ),
+ }
+ },
+)
+
+export const loadCreatorProfile = ({
+ uniqueHandle,
+ publisherType,
+ locale,
+ sortBy,
+ sortOrder,
+}: {
+ uniqueHandle: string
+ publisherType?: string
+ locale: string
+ sortBy?: string
+ sortOrder?: string
+}) =>
+ loadCreatorProfileCached(
+ uniqueHandle,
+ publisherType,
+ locale,
+ parseCreatorSortField(sortBy),
+ parseCreatorSortOrder(sortOrder),
+ )
diff --git a/web/app/components/plugins/marketplace/creator-profile/dify-profile.tsx b/web/app/components/plugins/marketplace/creator-profile/dify-profile.tsx
new file mode 100644
index 00000000000..39b8d53c8cd
--- /dev/null
+++ b/web/app/components/plugins/marketplace/creator-profile/dify-profile.tsx
@@ -0,0 +1,142 @@
+'use client'
+
+import type { MarketplaceTemplate } from '@dify/contracts/marketplace'
+import type { MarketplaceSearchSelection } from '../home/marketplace-search-autocomplete'
+import type { CreatorCreation, LoadedCreatorProfile } from './model'
+import type { Plugin } from '@/app/components/plugins/types'
+import { useMemo, useState } from 'react'
+import AccountSection from '@/app/components/main-nav/components/account-section'
+import useCheckInstalled from '@/app/components/plugins/install-plugin/hooks/use-check-installed'
+import InstallFromMarketplace from '@/app/components/plugins/install-plugin/install-from-marketplace'
+import { useRouter } from '@/next/navigation'
+import MarketplaceDetailDialog from '../detail-dialog'
+import TemplateDetailDialog from '../templates/template-detail-dialog'
+import { getFormattedPlugin } from '../utils'
+import CreatorProfileHeader from './header'
+import CreatorProfileView from './view'
+
+type SelectedCreation =
+ | { kind: 'plugin'; plugin: Plugin }
+ | { kind: 'template'; template: MarketplaceTemplate }
+
+type DifyCreatorProfileProps = {
+ loadedProfile: LoadedCreatorProfile
+ locale: string
+}
+
+const normalizePlugin = (plugin: Plugin): Plugin => ({
+ ...plugin,
+ label: plugin.label ?? {},
+ brief: plugin.brief ?? {},
+ description: plugin.description ?? {},
+ tags: plugin.tags ?? [],
+ badges: plugin.badges ?? null,
+})
+
+export default function DifyCreatorProfile({ loadedProfile, locale }: DifyCreatorProfileProps) {
+ const router = useRouter()
+ const [selected, setSelected] = useState(null)
+ const [pluginToInstall, setPluginToInstall] = useState(null)
+ const profilePlugins = Object.values(loadedProfile.pluginsByCreationId)
+ const pluginIds = useMemo(
+ () =>
+ Array.from(
+ new Set([
+ ...profilePlugins.map((plugin) => plugin.plugin_id),
+ ...(selected?.kind === 'plugin' ? [selected.plugin.plugin_id] : []),
+ ]),
+ ).sort(),
+ [profilePlugins, selected],
+ )
+ const { installedInfo } = useCheckInstalled({
+ pluginIds,
+ enabled: pluginIds.length > 0,
+ })
+
+ const selectCreation = (creation: CreatorCreation) => {
+ if (creation.kind === 'plugin') {
+ const plugin = loadedProfile.pluginsByCreationId[creation.id]
+ if (plugin) setSelected({ kind: 'plugin', plugin: normalizePlugin(plugin) })
+ return
+ }
+
+ const template = loadedProfile.templatesByCreationId[creation.id]
+ if (template) setSelected({ kind: 'template', template })
+ }
+
+ const selectSearchResult = (selection: MarketplaceSearchSelection) => {
+ if (selection.kind === 'plugin') {
+ setSelected({
+ kind: 'plugin',
+ plugin: normalizePlugin(getFormattedPlugin(selection.plugin)),
+ })
+ return
+ }
+ setSelected({ kind: 'template', template: selection.template })
+ }
+
+ const closeSelected = () => setSelected(null)
+ const selectedPlugin = selected?.kind === 'plugin' ? selected.plugin : null
+ const selectedTemplate = selected?.kind === 'template' ? selected.template : null
+
+ return (
+ <>
+ ({
+ type: 'select',
+ onSelect: () => selectCreation(creation),
+ })}
+ header={
+
+
+
+ }
+ />
+ }
+ />
+
+ {selectedPlugin && (
+
{
+ setPluginToInstall(selectedPlugin)
+ closeSelected()
+ }}
+ onOpenChange={(open) => {
+ if (!open) closeSelected()
+ }}
+ />
+ )}
+ {selectedTemplate && (
+ {
+ closeSelected()
+ router.push(`/apps?template-id=${encodeURIComponent(selectedTemplate.id)}`)
+ }}
+ onOpenChange={(open) => {
+ if (!open) closeSelected()
+ }}
+ />
+ )}
+ {pluginToInstall && (
+ setPluginToInstall(null)}
+ onSuccess={() => setPluginToInstall(null)}
+ />
+ )}
+
+ )
+}
diff --git a/web/app/components/plugins/marketplace/creator-profile/header.tsx b/web/app/components/plugins/marketplace/creator-profile/header.tsx
new file mode 100644
index 00000000000..038c7d052c4
--- /dev/null
+++ b/web/app/components/plugins/marketplace/creator-profile/header.tsx
@@ -0,0 +1,82 @@
+'use client'
+
+import type { MarketplaceSearchSelection } from '../home/marketplace-search-autocomplete'
+import { cn } from '@langgenius/dify-ui/cn'
+import { useState } from 'react'
+import { useTranslation } from '#i18n'
+import Link from '@/next/link'
+import MarketplaceLogoDark from '@/public/marketplace/dify-marketplace-logo-dark.svg'
+import MarketplaceLogo from '@/public/marketplace/dify-marketplace-logo.svg'
+import HomeCatalogTabs from '../home/home-catalog-tabs'
+import HomeGuide from '../home/home-guide'
+import styles from '../home/home-sticky.module.css'
+import { MarketplaceSearchAutocomplete } from '../home/marketplace-search-autocomplete'
+
+type CreatorProfileHeaderProps = {
+ actions?: React.ReactNode
+ locale: string
+ onSuggestionSelect: (selection: MarketplaceSearchSelection) => void
+}
+
+export default function CreatorProfileHeader({
+ actions,
+ locale,
+ onSuggestionSelect,
+}: CreatorProfileHeaderProps) {
+ const { t } = useTranslation()
+ const [searchValue, setSearchValue] = useState('')
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ $['marketplace.creatorProfile.searchPlaceholder'], {
+ ns: 'plugin',
+ })}
+ scope="all"
+ value={searchValue}
+ />
+
+
+
+
+ )
+}
diff --git a/web/app/components/plugins/marketplace/creator-profile/model.ts b/web/app/components/plugins/marketplace/creator-profile/model.ts
new file mode 100644
index 00000000000..d76b770a8f1
--- /dev/null
+++ b/web/app/components/plugins/marketplace/creator-profile/model.ts
@@ -0,0 +1,319 @@
+import type {
+ MarketplaceCreator,
+ MarketplacePlugin,
+ MarketplaceTemplate,
+ MarketplaceTimestamp,
+} from '@dify/contracts/marketplace'
+import type { Plugin } from '@/app/components/plugins/types'
+
+type CreatorProfileKind = 'individual' | 'organization'
+type CreatorProfileBadge = 'partner' | 'verified'
+export type CreatorSocialPlatform = 'website' | 'x' | 'instagram' | 'youtube' | 'figma' | 'github'
+export type CreatorSortField = 'updatedAt' | 'createdAt' | 'popularity'
+export type CreatorSortOrder = 'asc' | 'desc'
+export const CREATOR_SORT_FIELDS = ['updatedAt', 'createdAt', 'popularity'] as const
+export const DEFAULT_CREATOR_SORT_FIELD: CreatorSortField = 'updatedAt'
+export const DEFAULT_CREATOR_SORT_ORDER: CreatorSortOrder = 'desc'
+
+export const parseCreatorSortField = (value?: string | null): CreatorSortField =>
+ CREATOR_SORT_FIELDS.includes(value as CreatorSortField)
+ ? (value as CreatorSortField)
+ : DEFAULT_CREATOR_SORT_FIELD
+
+export const parseCreatorSortOrder = (value?: string | null): CreatorSortOrder => {
+ const normalized = value?.toLowerCase()
+ return normalized === 'asc' || normalized === 'desc' ? normalized : DEFAULT_CREATOR_SORT_ORDER
+}
+
+export const toPublisherSortQuery = (field: CreatorSortField, order: CreatorSortOrder) => {
+ const sort_order = order === 'asc' ? 'ASC' : 'DESC'
+ return {
+ plugins: {
+ sort_by:
+ field === 'updatedAt'
+ ? 'version_updated_at'
+ : field === 'createdAt'
+ ? 'created_at'
+ : 'install_count',
+ sort_order,
+ },
+ templates: {
+ sort_by:
+ field === 'updatedAt' ? 'updated_at' : field === 'createdAt' ? 'created_at' : 'usage_count',
+ sort_order,
+ },
+ }
+}
+
+export type CreatorSocialLink = {
+ platform: CreatorSocialPlatform
+ href: string
+ label: string
+}
+
+type CreatorCreationTarget =
+ | {
+ type: 'plugin'
+ org: string
+ name: string
+ pluginType: MarketplacePlugin['type']
+ }
+ | {
+ type: 'template'
+ id: string
+ publisher: string
+ templateName: string
+ }
+
+type CreatorCreationIcon =
+ | { type: 'image'; src: string }
+ | { type: 'emoji'; value: string; background?: string }
+
+export type CreatorCreation = {
+ id: string
+ kind: 'plugin' | 'template'
+ title: string
+ description: string
+ target: CreatorCreationTarget
+ icon: CreatorCreationIcon
+ dependencyIcons: string[]
+ dependencyCount: number
+ updatedAt: number
+ createdAt: number
+ popularity: number
+}
+
+export type CreatorProfileViewModel = {
+ profile: {
+ kind: CreatorProfileKind
+ displayName: string
+ handle: string
+ description?: string
+ email?: string
+ avatarUrl: string
+ backgroundUrl: string
+ badges: CreatorProfileBadge[]
+ socialLinks: CreatorSocialLink[]
+ }
+ creations: CreatorCreation[]
+}
+
+export type LoadedCreatorProfile = {
+ viewModel: CreatorProfileViewModel
+ pluginsByCreationId: Record
+ templatesByCreationId: Record
+}
+
+export type CreatorCreationAction =
+ | { type: 'link'; href: string }
+ | { type: 'select'; onSelect: () => void }
+
+export type CreatorProfileAdapterInput = {
+ creator: MarketplaceCreator
+ kind: CreatorProfileKind
+ locale: string
+ avatarUrl: string
+ backgroundUrl: string
+ plugins: MarketplacePlugin[]
+ templates: MarketplaceTemplate[]
+ resolvePluginIcon: (plugin: MarketplacePlugin) => string
+ resolveTemplateIcon: (template: MarketplaceTemplate) => string
+ resolveDependencyIcon: (pluginId: string) => string
+}
+
+const toTimestamp = (value?: MarketplaceTimestamp | null) => {
+ if (value === undefined || value === null || value === '') return 0
+
+ if (typeof value === 'number') {
+ if (!Number.isFinite(value)) return 0
+
+ // Marketplace search responses use Unix seconds, while some consumers may already
+ // provide JavaScript timestamps in milliseconds.
+ return Math.abs(value) < 1_000_000_000_000 ? value * 1000 : value
+ }
+
+ const timestamp = Date.parse(value)
+ return Number.isNaN(timestamp) ? 0 : timestamp
+}
+
+const getCreatorLocalizedText = (
+ value: Partial> | string | undefined,
+ locale: string,
+) => {
+ if (typeof value === 'string') return value
+ if (!value) return ''
+
+ const normalizedLocale = locale.replace('-', '_')
+ return (
+ value[locale] ||
+ value[normalizedLocale] ||
+ value['en-US'] ||
+ value.en_US ||
+ Object.values(value).find(Boolean) ||
+ ''
+ )
+}
+
+const getSocialPlatform = (hostname: string): CreatorSocialPlatform => {
+ if (
+ hostname === 'x.com' ||
+ hostname.endsWith('.x.com') ||
+ hostname === 'twitter.com' ||
+ hostname.endsWith('.twitter.com')
+ )
+ return 'x'
+ if (hostname === 'instagram.com' || hostname.endsWith('.instagram.com')) return 'instagram'
+ if (hostname === 'youtube.com' || hostname.endsWith('.youtube.com') || hostname === 'youtu.be')
+ return 'youtube'
+ if (hostname === 'figma.com' || hostname.endsWith('.figma.com')) return 'figma'
+ if (hostname === 'github.com' || hostname.endsWith('.github.com')) return 'github'
+ return 'website'
+}
+
+export const normalizeCreatorSocialLink = (value: string): CreatorSocialLink | null => {
+ const trimmedValue = value.trim()
+ if (!trimmedValue) return null
+
+ const hasScheme = /^[a-z][a-z\d+.-]*:/i.test(trimmedValue)
+ if (hasScheme && !/^https?:\/\//i.test(trimmedValue)) return null
+
+ try {
+ const url = new URL(
+ /^https?:\/\//i.test(trimmedValue) ? trimmedValue : `https://${trimmedValue}`,
+ )
+ if (url.protocol !== 'http:' && url.protocol !== 'https:') return null
+
+ const hostname = url.hostname.toLowerCase().replace(/^www\./, '')
+ return {
+ platform: getSocialPlatform(hostname),
+ href: url.toString(),
+ label: trimmedValue.replace(/^https?:\/\//i, '').replace(/\/$/, ''),
+ }
+ } catch {
+ return null
+ }
+}
+
+const getCreatorBadges = (creator: MarketplaceCreator) => {
+ const badges = new Set()
+ if (creator.badges?.includes('partner')) badges.add('partner')
+ if (creator.verified || creator.badges?.includes('verified')) badges.add('verified')
+ return Array.from(badges)
+}
+
+export const adaptCreatorProfile = ({
+ creator,
+ kind,
+ locale,
+ avatarUrl,
+ backgroundUrl,
+ plugins,
+ templates,
+ resolvePluginIcon,
+ resolveTemplateIcon,
+ resolveDependencyIcon,
+}: CreatorProfileAdapterInput): CreatorProfileViewModel => {
+ const pluginCreations = plugins.map((plugin): CreatorCreation => ({
+ id: `${plugin.type}:${plugin.org}/${plugin.name}`,
+ kind: 'plugin',
+ title: getCreatorLocalizedText(plugin.labels ?? plugin.label, locale) || plugin.name,
+ description:
+ getCreatorLocalizedText(
+ plugin.type === 'bundle' ? plugin.description : plugin.brief,
+ locale,
+ ) ||
+ plugin.introduction ||
+ '',
+ target: {
+ type: 'plugin',
+ org: plugin.org,
+ name: plugin.name,
+ pluginType: plugin.type,
+ },
+ icon: { type: 'image', src: resolvePluginIcon(plugin) },
+ dependencyIcons: [],
+ dependencyCount: 0,
+ updatedAt: toTimestamp(plugin.version_updated_at || plugin.updated_at),
+ createdAt: toTimestamp(plugin.created_at),
+ popularity: plugin.install_count || 0,
+ }))
+
+ const templateCreations = templates.map((template): CreatorCreation => {
+ const templateIcon = resolveTemplateIcon(template)
+ const dependencyIds = template.deps_plugins ?? []
+ const publisher =
+ template.publisher_handle ||
+ template.publisher_unique_handle ||
+ template.creator_email ||
+ 'template'
+
+ return {
+ id: `template:${template.id}`,
+ kind: 'template',
+ title: template.template_name,
+ description: template.overview || '',
+ target: {
+ type: 'template',
+ id: template.id,
+ publisher,
+ templateName: template.template_name,
+ },
+ icon: templateIcon
+ ? { type: 'image', src: templateIcon }
+ : { type: 'emoji', value: template.icon || '📄', background: template.icon_background },
+ dependencyIcons: dependencyIds.map(resolveDependencyIcon),
+ dependencyCount: dependencyIds.length,
+ updatedAt: toTimestamp(template.updated_at),
+ createdAt: toTimestamp(template.created_at),
+ popularity: template.usage_count || 0,
+ }
+ })
+
+ return {
+ profile: {
+ kind,
+ displayName: creator.display_name || creator.name || creator.unique_handle,
+ handle: creator.unique_handle,
+ description: creator.description || undefined,
+ email: creator.display_email || creator.email || undefined,
+ avatarUrl,
+ backgroundUrl,
+ badges: getCreatorBadges(creator),
+ socialLinks: (creator.social_links ?? [])
+ .map(normalizeCreatorSocialLink)
+ .filter((link): link is CreatorSocialLink => link !== null),
+ },
+ creations: [...pluginCreations, ...templateCreations],
+ }
+}
+
+export const sortCreatorCreations = (
+ creations: CreatorCreation[],
+ field: CreatorSortField,
+ order: CreatorSortOrder,
+) => {
+ const direction = order === 'asc' ? 1 : -1
+ return creations
+ .map((creation, index) => ({ creation, index }))
+ .sort((left, right) => {
+ const difference = (left.creation[field] - right.creation[field]) * direction
+ return difference || left.index - right.index
+ })
+ .map(({ creation }) => creation)
+}
+
+export const getStandaloneCreationHref = (creation: CreatorCreation, locale?: string) => {
+ const language = locale ? `language=${encodeURIComponent(locale)}` : ''
+ if (creation.target.type === 'plugin') {
+ const resource = creation.target.pluginType === 'bundle' ? 'bundles' : 'plugin'
+ const path = `/${resource}/${encodeURIComponent(creation.target.org)}/${encodeURIComponent(creation.target.name)}`
+ return language ? `${path}?${language}` : path
+ }
+
+ const params = new URLSearchParams({
+ templateId: creation.target.id,
+ creationType: 'templates',
+ })
+ if (locale) params.set('language', locale)
+ return `/template/${encodeURIComponent(creation.target.publisher)}/${encodeURIComponent(creation.target.templateName)}?${params.toString()}`
+}
diff --git a/web/app/components/plugins/marketplace/creator-profile/publisher-avatar.tsx b/web/app/components/plugins/marketplace/creator-profile/publisher-avatar.tsx
new file mode 100644
index 00000000000..2776410cd51
--- /dev/null
+++ b/web/app/components/plugins/marketplace/creator-profile/publisher-avatar.tsx
@@ -0,0 +1,75 @@
+'use client'
+
+import type { CSSProperties } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
+import { useState } from 'react'
+
+type PublisherAvatarProps = {
+ avatarUrl: string
+ name: string
+ isOrganization: boolean
+ size?: number
+ className?: string
+}
+
+// Keep in sync with Creator Center `components/ui/avatar.tsx`.
+const DEFAULT_AVATAR_BG =
+ 'linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.08) 100%), linear-gradient(90deg, #155aef 0%, #155aef 100%)'
+
+const DEFAULT_AVATAR_LETTER_STYLE: CSSProperties = {
+ color: '#FFFFFF',
+ textShadow: '0px 0.25px 0.5px rgba(0, 0, 0, 0.20)',
+ lineHeight: '120%',
+ textTransform: 'uppercase',
+}
+
+function getFallbackTextClass(size: number) {
+ if (size <= 32) return 'text-xs'
+ if (size <= 50) return 'text-base'
+ return 'text-[40px]'
+}
+
+export default function PublisherAvatar({
+ avatarUrl,
+ name,
+ isOrganization,
+ size = 24,
+ className,
+}: PublisherAvatarProps) {
+ const [failedAvatarUrl, setFailedAvatarUrl] = useState(null)
+ const shapeClass = isOrganization ? 'rounded-md' : 'rounded-full'
+ const shouldShowImage = Boolean(avatarUrl) && failedAvatarUrl !== avatarUrl
+ const fallbackLetter = name?.[0]?.toUpperCase() || 'U'
+
+ return (
+
+ {shouldShowImage ? (
+
setFailedAvatarUrl(avatarUrl)}
+ />
+ ) : (
+
+
+ {fallbackLetter}
+
+
+ )}
+
+ {header}
+
+
+
+
+
+ {profile.profile.backgroundUrl && (
+
{
+ event.currentTarget.hidden = true
+ }}
+ />
+ )}
+
+
+
+
+
+
+
+