diff --git a/packages/iconify-collections/assets/vender/integrations/agent-strategy-active.svg b/packages/iconify-collections/assets/vender/integrations/agent-strategy-active.svg new file mode 100644 index 0000000000..85b5cede98 --- /dev/null +++ b/packages/iconify-collections/assets/vender/integrations/agent-strategy-active.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/iconify-collections/assets/vender/integrations/api-extension-active.svg b/packages/iconify-collections/assets/vender/integrations/api-extension-active.svg new file mode 100644 index 0000000000..631a2c6adc --- /dev/null +++ b/packages/iconify-collections/assets/vender/integrations/api-extension-active.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/packages/iconify-collections/assets/vender/integrations/custom-tool-active.svg b/packages/iconify-collections/assets/vender/integrations/custom-tool-active.svg new file mode 100644 index 0000000000..a4dd7d6f84 --- /dev/null +++ b/packages/iconify-collections/assets/vender/integrations/custom-tool-active.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/iconify-collections/assets/vender/integrations/extension-active.svg b/packages/iconify-collections/assets/vender/integrations/extension-active.svg new file mode 100644 index 0000000000..41793c99e1 --- /dev/null +++ b/packages/iconify-collections/assets/vender/integrations/extension-active.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/iconify-collections/assets/vender/integrations/tools-active.svg b/packages/iconify-collections/assets/vender/integrations/tools-active.svg new file mode 100644 index 0000000000..3961797744 --- /dev/null +++ b/packages/iconify-collections/assets/vender/integrations/tools-active.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/iconify-collections/assets/vender/integrations/trigger-active.svg b/packages/iconify-collections/assets/vender/integrations/trigger-active.svg new file mode 100644 index 0000000000..018048390e --- /dev/null +++ b/packages/iconify-collections/assets/vender/integrations/trigger-active.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/packages/iconify-collections/assets/vender/integrations/workflow-as-tool-active.svg b/packages/iconify-collections/assets/vender/integrations/workflow-as-tool-active.svg new file mode 100644 index 0000000000..110a9cb7a0 --- /dev/null +++ b/packages/iconify-collections/assets/vender/integrations/workflow-as-tool-active.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/packages/iconify-collections/custom-vender/icons.json b/packages/iconify-collections/custom-vender/icons.json index 55d525a7d8..cef8ebb8e9 100644 --- a/packages/iconify-collections/custom-vender/icons.json +++ b/packages/iconify-collections/custom-vender/icons.json @@ -1,6 +1,6 @@ { "prefix": "custom-vender", - "lastModified": 1778535177, + "lastModified": 1778624737, "icons": { "features-citations": { "body": "", @@ -57,21 +57,41 @@ "width": 15.3333, "height": 14.6667 }, + "integrations-agent-strategy-active": { + "body": "", + "width": 15.3333, + "height": 14.6667 + }, "integrations-api-extension": { "body": "", "width": 14, "height": 12.9447 }, + "integrations-api-extension-active": { + "body": "", + "width": 16, + "height": 16 + }, "integrations-custom-tool": { "body": "", "width": 12.6667, "height": 14.6667 }, + "integrations-custom-tool-active": { + "body": "", + "height": 14.2807, + "width": 12.6667 + }, "integrations-extension": { "body": "", "width": 12, "height": 13.3333 }, + "integrations-extension-active": { + "body": "", + "width": 12, + "height": 13.3333 + }, "integrations-mcp": { "body": "", "width": 13.4445, @@ -87,16 +107,31 @@ "width": 12.3333, "height": 14 }, + "integrations-tools-active": { + "body": "", + "width": 12.3333, + "height": 14 + }, "integrations-trigger": { "body": "", "width": 13.325, "height": 13.325 }, + "integrations-trigger-active": { + "body": "", + "width": 13.325, + "height": 13.325 + }, "integrations-workflow-as-tool": { "body": "", "height": 12, "width": 12.6667 }, + "integrations-workflow-as-tool-active": { + "body": "", + "width": 12.1, + "height": 11.4333 + }, "knowledge-add-chunks": { "body": "", "width": 20, diff --git a/packages/iconify-collections/custom-vender/info.json b/packages/iconify-collections/custom-vender/info.json index 15170831f9..58c7f50e88 100644 --- a/packages/iconify-collections/custom-vender/info.json +++ b/packages/iconify-collections/custom-vender/info.json @@ -1,7 +1,7 @@ { "prefix": "custom-vender", "name": "Dify Custom Vender", - "total": 300, + "total": 307, "version": "0.0.0-private", "author": { "name": "LangGenius, Inc.", diff --git a/web/app/components/main-nav/components/web-apps-section.tsx b/web/app/components/main-nav/components/web-apps-section.tsx index a9069322e2..f16d7de899 100644 --- a/web/app/components/main-nav/components/web-apps-section.tsx +++ b/web/app/components/main-nav/components/web-apps-section.tsx @@ -13,6 +13,7 @@ import { cn } from '@langgenius/dify-ui/cn' import { toast } from '@langgenius/dify-ui/toast' import { useMemo, useState } from 'react' import { useTranslation } from 'react-i18next' +import Input from '@/app/components/base/input' import AppNavItem from '@/app/components/explore/sidebar/app-nav-item' import { usePathname } from '@/next/navigation' import { useGetInstalledApps, useUninstallApp, useUpdateAppPinStatus } from '@/service/use-explore' @@ -79,21 +80,23 @@ const WebAppsSection = () => { {appsExpanded && searchVisible && (
- setSearchText(e.target.value)} + onClear={() => setSearchText('')} placeholder={t('mainNav.webApps.searchPlaceholder', { ns: 'common' })} - className="h-8 w-full rounded-lg border border-transparent bg-components-input-bg-normal px-2 system-sm-regular text-text-secondary outline-none placeholder:text-text-quaternary hover:border-components-input-border-hover focus:border-components-input-border-active" + showClearIcon + className="h-8 px-2" />
)} {appsExpanded && (
{isPending && ( -
{t('loading', { ns: 'common' })}
+
{t('loading', { ns: 'common' })}
)} {!isPending && filteredApps.length === 0 && ( -
+
{searchText ? t('mainNav.webApps.noResults', { ns: 'common' }) : t('sidebar.noApps.title', { ns: 'explore' })}
)} diff --git a/web/app/components/main-nav/components/workspace-card.tsx b/web/app/components/main-nav/components/workspace-card.tsx index a81d663280..9e17a5ddab 100644 --- a/web/app/components/main-nav/components/workspace-card.tsx +++ b/web/app/components/main-nav/components/workspace-card.tsx @@ -103,7 +103,7 @@ const WorkspaceCard = () => { type="button" className={cn( 'flex w-full items-center gap-1.5 py-1.5 pr-3 pl-1.5 text-left transition-colors', - open && 'bg-gradient-to-b from-background-section-burn to-background-section', + open && 'bg-linear-to-b from-background-section-burn to-background-section', )} aria-expanded={open} aria-label={t('mainNav.workspace.openMenu', { ns: 'common' })} @@ -151,7 +151,7 @@ const WorkspaceCard = () => {
{open && (
-
+
+ ) })} -
+
))}
@@ -222,18 +222,21 @@ export default function IntegrationsPage({ section: 'custom-tool', label: t('settings.swaggerAPIAsTool', { ns: 'common' }), icon: 'i-custom-vender-integrations-custom-tool', + activeIcon: 'i-custom-vender-integrations-custom-tool-active', iconClassName: 'h-[14.5px] w-[12.5px]', }, { section: 'workflow-tool', label: t('common.workflowAsTool', { ns: 'workflow' }), icon: 'i-custom-vender-integrations-workflow-as-tool', + activeIcon: 'i-custom-vender-integrations-workflow-as-tool-active', iconClassName: 'h-3 w-[12.5px]', }, { section: 'api-based-extension', label: t('settings.apiBasedExtension', { ns: 'common' }), icon: 'i-custom-vender-integrations-api-extension', + activeIcon: 'i-custom-vender-integrations-api-extension-active', iconClassName: 'h-[13px] w-3.5', }, ], [t]) @@ -242,24 +245,28 @@ export default function IntegrationsPage({ section: 'data-source', label: t('settings.dataSource', { ns: 'common' }), icon: DatasourceIcon, + activeIcon: 'i-ri-database-2-fill', iconClassName: 'size-4', }, { section: 'trigger', label: t('settings.trigger', { ns: 'common' }), icon: 'i-custom-vender-integrations-trigger', + activeIcon: 'i-custom-vender-integrations-trigger-active', iconClassName: 'h-[13.5px] w-[13.5px]', }, { section: 'agent-strategy', label: t('settings.agentStrategy', { ns: 'common' }), icon: 'i-custom-vender-integrations-agent-strategy', + activeIcon: 'i-custom-vender-integrations-agent-strategy-active', iconClassName: 'h-[14.5px] w-[15.5px]', }, { section: 'extension', label: t('settings.extension', { ns: 'common' }), icon: 'i-custom-vender-integrations-extension', + activeIcon: 'i-custom-vender-integrations-extension-active', iconClassName: 'h-[13.5px] w-3', }, ], [t]) @@ -385,18 +392,15 @@ export default function IntegrationsPage({ - + )} /> {showPermissionQuickPanel && ( @@ -428,7 +432,11 @@ export default function IntegrationsPage({ )} > - + {!sidebarCollapsed && ( <> diff --git a/web/app/components/tools/marketplace/__tests__/index.spec.tsx b/web/app/components/tools/marketplace/__tests__/index.spec.tsx index ad2c36510d..822359eece 100644 --- a/web/app/components/tools/marketplace/__tests__/index.spec.tsx +++ b/web/app/components/tools/marketplace/__tests__/index.spec.tsx @@ -188,9 +188,11 @@ describe('Marketplace', () => { />, ) - const sections = container.querySelectorAll('.bg-background-default-subtle') - expect(sections[0]).toHaveClass('px-6') - expect(sections[1]).toHaveClass('px-6') + const contentFrames = Array.from(container.querySelectorAll('div')) + .filter(el => el.classList.contains('max-w-[1600px]')) + expect(contentFrames).toHaveLength(2) + expect(contentFrames[0]).toHaveClass('px-6') + expect(contentFrames[1]).toHaveClass('px-6') }) }) }) diff --git a/web/app/components/tools/marketplace/index.tsx b/web/app/components/tools/marketplace/index.tsx index 1c4e994e4e..e2606771d2 100644 --- a/web/app/components/tools/marketplace/index.tsx +++ b/web/app/components/tools/marketplace/index.tsx @@ -11,7 +11,7 @@ import { useTranslation } from 'react-i18next' import Loading from '@/app/components/base/loading' import List from '@/app/components/plugins/marketplace/list' import { getMarketplaceUrl } from '@/utils/var' -import { toolsContentInsetClassNames } from '../content-inset' +import { toolsContentFrameClassNames, toolsContentInsetClassNames } from '../content-inset' type MarketplaceProps = { searchPluginText: string @@ -40,17 +40,18 @@ const Marketplace = ({ page, } = marketplaceContext const contentPaddingClassName = toolsContentInsetClassNames[contentInset] + const contentFrameClassName = cn(toolsContentFrameClassNames[contentInset], contentPaddingClassName) return ( <> -
+
{isMarketplaceArrowVisible && ( )} -
+
{t('marketplace.moreFrom', { ns: 'plugin' })}
@@ -95,7 +96,7 @@ const Marketplace = ({
-
+
{ isLoading && page === 1 && (
@@ -105,12 +106,14 @@ const Marketplace = ({ } { (!isLoading || page > 1) && ( - +
+ +
) }
diff --git a/web/app/components/tools/mcp/__tests__/index.spec.tsx b/web/app/components/tools/mcp/__tests__/index.spec.tsx index d04e26b116..4a07d3f82a 100644 --- a/web/app/components/tools/mcp/__tests__/index.spec.tsx +++ b/web/app/components/tools/mcp/__tests__/index.spec.tsx @@ -346,6 +346,7 @@ describe('MCPList', () => { const grid = document.querySelector('.grid') expect(grid).toHaveClass('px-6') + expect(grid).toHaveClass('max-w-[1600px]') expect(grid).not.toHaveClass('px-12') }) }) diff --git a/web/app/components/tools/mcp/index.tsx b/web/app/components/tools/mcp/index.tsx index e2b1953c7c..eb56340a4e 100644 --- a/web/app/components/tools/mcp/index.tsx +++ b/web/app/components/tools/mcp/index.tsx @@ -6,7 +6,7 @@ import { useMemo, useState } from 'react' import { useAllToolProviders, } from '@/service/use-tools' -import { toolsContentInsetClassNames } from '../content-inset' +import { toolsContentFrameClassNames, toolsContentInsetClassNames } from '../content-inset' import NewMCPCard from './create-card' import MCPDetailPanel from './detail/provider-detail' import MCPCard from './provider-card' @@ -68,12 +68,13 @@ const MCPList = ({ setIsTriggerAuthorize(true) } const contentPaddingClassName = toolsContentInsetClassNames[contentInset] + const contentFrameClassName = cn(toolsContentFrameClassNames[contentInset], contentPaddingClassName) return ( <>
diff --git a/web/app/components/tools/provider-list.tsx b/web/app/components/tools/provider-list.tsx index 0cb37dae08..1dac25bc64 100644 --- a/web/app/components/tools/provider-list.tsx +++ b/web/app/components/tools/provider-list.tsx @@ -23,7 +23,7 @@ import WorkflowToolEmpty from '@/app/components/tools/provider/empty' import { systemFeaturesQueryOptions } from '@/service/system-features' import { useCheckInstalled, useInvalidateInstalledPluginList } from '@/service/use-plugins' import { useAllToolProviders } from '@/service/use-tools' -import { toolsContentInsetClassNames } from './content-inset' +import { toolsContentFrameClassNames, toolsContentInsetClassNames } from './content-inset' import Marketplace from './marketplace' import { useMarketplace } from './marketplace/hooks' import MCPList from './mcp' @@ -61,6 +61,7 @@ const ProviderList = ({ const activeTab = category ?? categoryParam const isRouteCategory = !!category const contentPaddingClassName = toolsContentInsetClassNames[contentInset] + const contentFrameClassName = cn(toolsContentFrameClassNames[contentInset], contentPaddingClassName) const options = [ { value: 'builtin', text: t('type.builtIn', { ns: 'tools' }) }, { value: 'api', text: t('type.custom', { ns: 'tools' }) }, @@ -146,7 +147,7 @@ const ProviderList = ({
@@ -182,7 +183,7 @@ const ProviderList = ({
@@ -216,7 +217,7 @@ const ProviderList = ({
)} {!filteredCollectionList.length && activeTab === 'builtin' && ( - + )}
{enable_marketplace && activeTab === 'builtin' && (