opensource/dify
2
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-07-19 16:38:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(workflow): improve block selector navigation and previews (#39212)

Browse Source 
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
This commit is contained in:
yyh 2026-07-18 17:56:36 +08:00 committed by GitHub
parent fa65f45bff
commit 2ec34b2cfb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
82 changed files with 1719 additions and 1679 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
oxlint-suppressions.json
View File

@ -1594,11 +1594,6 @@
"count": 1
}
},
"web/app/components/base/icons/src/vender/solid/arrows/index.ts": {
"no-barrel-files/no-barrel-files": {
"count": 1
}
},
"web/app/components/base/icons/src/vender/solid/communication/index.ts": {
"no-barrel-files/no-barrel-files": {
"count": 6
@ -2112,11 +2107,6 @@
"count": 1
}
},
"web/app/components/base/search-input/__tests__/index.spec.tsx": {
"jsx_a11y/no-autofocus": {
"count": 1
}
},
"web/app/components/base/search-input/index.stories.tsx": {
"jsx_a11y/label-has-associated-control": {
"count": 3
@ -3346,11 +3336,6 @@
"count": 1
}
},
"web/app/components/plugins/marketplace/search-box/index.tsx": {
"jsx_a11y/no-autofocus": {
"count": 1
}
},
"web/app/components/plugins/marketplace/search-box/tags-filter.tsx": {
"no-restricted-imports": {
"count": 1
@ -4105,59 +4090,16 @@
"count": 1
}
},
"web/app/components/workflow/block-selector/all-tools.tsx": {
"jsx_a11y/click-events-have-key-events": {
"count": 1
},
"jsx_a11y/no-static-element-interactions": {
"count": 1
}
},
"web/app/components/workflow/block-selector/constants.tsx": {
"react/only-export-components": {
"count": 3
}
},
"web/app/components/workflow/block-selector/featured-tools.tsx": {
"jsx_a11y/click-events-have-key-events": {
"count": 1
},
"jsx_a11y/no-static-element-interactions": {
"count": 1
}
},
"web/app/components/workflow/block-selector/featured-triggers.tsx": {
"jsx_a11y/click-events-have-key-events": {
"count": 1
},
"jsx_a11y/no-static-element-interactions": {
"count": 1
}
},
"web/app/components/workflow/block-selector/hooks.ts": {
"eslint-react/set-state-in-effect": {
"count": 1
}
},
"web/app/components/workflow/block-selector/index-bar.tsx": {
"react/only-export-components": {
"count": 1
}
},
"web/app/components/workflow/block-selector/main.tsx": {
"jsx_a11y/click-events-have-key-events": {
"count": 1
},
"jsx_a11y/no-autofocus": {
"count": 4
},
"jsx_a11y/no-static-element-interactions": {
"count": 1
},
"no-restricted-imports": {
"count": 2
}
},
"web/app/components/workflow/block-selector/market-place-plugin/list.tsx": {
"jsx_a11y/click-events-have-key-events": {
"count": 1
@ -4166,14 +4108,6 @@
"count": 1
}
},
"web/app/components/workflow/block-selector/rag-tool-recommendations/index.tsx": {
"jsx_a11y/click-events-have-key-events": {
"count": 1
},
"jsx_a11y/no-static-element-interactions": {
"count": 1
}
},
"web/app/components/workflow/block-selector/rag-tool-recommendations/uninstalled-item.tsx": {
"jsx_a11y/click-events-have-key-events": {
"count": 1
@ -4182,19 +4116,6 @@
"count": 1
}
},
"web/app/components/workflow/block-selector/snippets/index.tsx": {
"jsx_a11y/no-autofocus": {
"count": 1
}
},
"web/app/components/workflow/block-selector/tabs.tsx": {
"jsx_a11y/click-events-have-key-events": {
"count": 2
},
"jsx_a11y/no-static-element-interactions": {
"count": 2
}
},
"web/app/components/workflow/block-selector/tool-picker.tsx": {
"no-restricted-imports": {
"count": 1
@ -4208,11 +4129,6 @@
"count": 2
}
},
"web/app/components/workflow/block-selector/types.ts": {
"erasable-syntax-only/enums": {
"count": 4
}
},
"web/app/components/workflow/block-selector/use-sticky-scroll.ts": {
"erasable-syntax-only/enums": {
"count": 1
@ -5669,11 +5585,6 @@
"count": 1
}
},
"web/app/components/workflow/operator/add-block.tsx": {
"no-restricted-imports": {
"count": 1
}
},
"web/app/components/workflow/operator/hooks.ts": {
"typescript/no-explicit-any": {
"count": 1

2
packages/dify-ui/src/collapsible/index.stories.tsx
View File

@ -12,7 +12,7 @@ const meta = {
docs: {
description: {
component:
'Unstyled Base UI Collapsible primitive. The examples mirror the official Root, Trigger, and Panel anatomy, with presentation supplied at the call site using Dify UI tokens.',
'Styled Dify disclosure wrapper over Base UI Collapsible. It preserves the official Root, Trigger, and Panel anatomy while providing Dify layout, focus, disabled, and motion styles.',
},
},
},

99
packages/dify-ui/src/preview-card/__tests__/index.spec.tsx
View File

@ -10,91 +10,56 @@ describe('PreviewCardContent', () => {
it('should use bottom placement and default offsets when placement props are not provided', async () => {
const screen = await renderWithSafeViewport(
<PreviewCard open>
<PreviewCardTrigger
render={
<button type="button" aria-label="preview trigger">
Open
</button>
}
/>
<PreviewCardTrigger href="#default-preview">Open</PreviewCardTrigger>
<PreviewCardContent
positionerProps={{ role: 'group', 'aria-label': 'default positioner' }}
popupProps={{ role: 'dialog', 'aria-label': 'default popup' }}
positionerProps={{ id: 'default-positioner' }}
popupProps={{ id: 'default-popup' }}
>
<span>Default content</span>
</PreviewCardContent>
</PreviewCard>,
)
await expect
.element(screen.getByRole('group', { name: 'default positioner' }))
.toHaveAttribute('data-side', 'bottom')
await expect
.element(screen.getByRole('group', { name: 'default positioner' }))
.toHaveAttribute('data-align', 'center')
await expect
.element(screen.getByRole('dialog', { name: 'default popup' }))
.toHaveTextContent('Default content')
await expect.element(screen.getByText('Default content')).toBeInTheDocument()
expect(document.getElementById('default-positioner')).toHaveAttribute('data-side', 'bottom')
expect(document.getElementById('default-positioner')).toHaveAttribute('data-align', 'center')
expect(document.getElementById('default-popup')).toHaveTextContent('Default content')
})
it('should apply parsed custom placement and custom offsets when placement props are provided', async () => {
const screen = await renderWithSafeViewport(
<PreviewCard open>
<PreviewCardTrigger
render={
<button type="button" aria-label="preview trigger">
Open
</button>
}
/>
<PreviewCardTrigger href="#custom-preview">Open</PreviewCardTrigger>
<PreviewCardContent
placement="top-end"
sideOffset={14}
alignOffset={6}
positionerProps={{ role: 'group', 'aria-label': 'custom positioner' }}
popupProps={{ role: 'dialog', 'aria-label': 'custom popup' }}
positionerProps={{ id: 'custom-positioner' }}
popupProps={{ id: 'custom-popup' }}
>
<span>Custom placement content</span>
</PreviewCardContent>
</PreviewCard>,
)
await expect
.element(screen.getByRole('group', { name: 'custom positioner' }))
.toHaveAttribute('data-side', 'top')
await expect
.element(screen.getByRole('group', { name: 'custom positioner' }))
.toHaveAttribute('data-align', 'end')
await expect
.element(screen.getByRole('dialog', { name: 'custom popup' }))
.toHaveTextContent('Custom placement content')
await expect.element(screen.getByText('Custom placement content')).toBeInTheDocument()
expect(document.getElementById('custom-positioner')).toHaveAttribute('data-side', 'top')
expect(document.getElementById('custom-positioner')).toHaveAttribute('data-align', 'end')
expect(document.getElementById('custom-popup')).toHaveTextContent('Custom placement content')
})
})
describe('Passthrough props', () => {
it('should forward positionerProps and popupProps when passthrough props are provided', async () => {
const onPopupClick = vi.fn()
const screen = await render(
<PreviewCard open>
<PreviewCardTrigger
render={
<button type="button" aria-label="preview trigger">
Open
</button>
}
/>
<PreviewCardTrigger href="#passthrough-preview">Open</PreviewCardTrigger>
<PreviewCardContent
positionerProps={{
role: 'group',
'aria-label': 'preview positioner',
id: 'preview-positioner-id',
}}
popupProps={{
id: 'preview-popup-id',
role: 'dialog',
'aria-label': 'preview content',
onClick: onPopupClick,
}}
>
<span>Preview body</span>
@ -102,40 +67,26 @@ describe('PreviewCardContent', () => {
</PreviewCard>,
)
const popup = screen.getByRole('dialog', { name: 'preview content' })
await popup.click()
await expect
.element(screen.getByRole('group', { name: 'preview positioner' }))
.toHaveAttribute('id', 'preview-positioner-id')
await expect.element(popup).toHaveAttribute('id', 'preview-popup-id')
expect(onPopupClick).toHaveBeenCalledTimes(1)
await expect.element(screen.getByText('Preview body')).toBeInTheDocument()
expect(document.getElementById('preview-positioner-id')).toBeInTheDocument()
expect(document.getElementById('preview-popup-id')).toBeInTheDocument()
})
})
describe('Trigger click behavior', () => {
it('should forward the trigger click to the consumer handler so the primary action runs', async () => {
const onPrimaryClick = vi.fn()
describe('Trigger semantics', () => {
it('should preserve the link destination', async () => {
const screen = await renderWithSafeViewport(
<PreviewCard>
<PreviewCardTrigger
render={
<button type="button" aria-label="preview trigger" onClick={onPrimaryClick}>
Open
</button>
}
/>
<PreviewCardContent popupProps={{ role: 'dialog', 'aria-label': 'preview content' }}>
<PreviewCardTrigger href="/preview-destination">Preview destination</PreviewCardTrigger>
<PreviewCardContent>
<span>Preview body</span>
</PreviewCardContent>
</PreviewCard>,
)
const trigger = screen.getByRole('button', { name: 'preview trigger' })
await trigger.click()
expect(onPrimaryClick).toHaveBeenCalledTimes(1)
await expect
.element(screen.getByRole('link', { name: 'Preview destination' }))
.toHaveAttribute('href', '/preview-destination')
})
})
})

58
packages/dify-ui/src/preview-card/index.stories.tsx
View File

@ -3,9 +3,6 @@ import type { Placement } from '.'
import * as React from 'react'
import { createPreviewCardHandle, PreviewCard, PreviewCardContent, PreviewCardTrigger } from '.'
const rowButtonClassName =
'flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-sm text-text-secondary outline-hidden hover:bg-state-base-hover focus-visible:ring-2 focus-visible:ring-state-accent-solid'
const triggerButtonClassName =
'rounded-lg border border-divider-subtle bg-components-button-secondary-bg px-3 py-1.5 text-sm text-text-secondary shadow-xs outline-hidden hover:bg-state-base-hover focus-visible:ring-2 focus-visible:ring-state-accent-solid'
@ -20,7 +17,7 @@ const meta = {
docs: {
description: {
component:
"Hover- and focus-activated rich preview for triggers whose primary click has its own destination (following a link, selecting a row, jumping to a definition). Built on Base UI PreviewCard.\n\n**A11y contract:** touch and screen-reader users cannot open the preview. Never place information or actions in the popup that are not also reachable from the trigger's primary click destination. If that is unavoidable, add a separate click affordance (Popover) or move the unique content onto the destination.",
'Hover- and focus-activated rich link preview built on Base UI PreviewCard.\n\n**A11y contract:** touch and screen-reader users cannot open the preview. Keep popup content available on the link destination. A polymorphic action trigger is a Dify application-level extension and is only valid when its click result exposes the same information.',
},
},
},
@ -85,38 +82,6 @@ export const LinkPreview: Story = {
),
}
export const Supplementary: Story = {
name: 'Supplementary preview on a button trigger',
parameters: {
docs: {
description: {
story:
'Application-level adaptation of the same semantic: the trigger is a `<button>` that owns a primary action (selecting a model row) rather than an `<a>`. The preview still only shows supplementary info reachable from the selection destination, so the a11y contract holds.',
},
},
},
render: () => (
<PreviewCard>
<PreviewCardTrigger
render={
<button type="button" className={rowButtonClassName}>
<span className="i-ri-sparkling-fill h-4 w-4 text-text-accent" />
<span>gpt-4o</span>
</button>
}
/>
<PreviewCardContent placement="right" popupClassName="w-[220px] p-3">
<div className="flex flex-col gap-2">
<div className="text-sm font-medium text-text-primary">gpt-4o</div>
<div className="text-xs text-text-tertiary">
Multimodal flagship model. Vision, audio and 128k context.
</div>
</div>
</PreviewCardContent>
</PreviewCard>
),
}
const PLACEMENTS: Placement[] = [
'top-start',
'top',
@ -152,13 +117,9 @@ const PlacementsDemo = () => {
))}
</div>
<PreviewCard open>
<PreviewCardTrigger
render={
<button type="button" className={triggerButtonClassName}>
Hover me
</button>
}
/>
<PreviewCardTrigger href="#preview-card-placement" className={triggerButtonClassName}>
Hover me
</PreviewCardTrigger>
<PreviewCardContent placement={placement} popupClassName="w-56 p-3">
<div className="flex flex-col gap-1">
<div className="text-sm font-semibold text-text-primary">
@ -187,12 +148,11 @@ const CustomDelayDemo = () => (
<PreviewCardTrigger
delay={100}
closeDelay={100}
render={
<button type="button" className={triggerButtonClassName}>
Snappy trigger
</button>
}
/>
href="#preview-card-delay"
className={triggerButtonClassName}
>
Snappy trigger
</PreviewCardTrigger>
<PreviewCardContent popupClassName="w-64 p-3">
<div className="flex flex-col gap-1">
<div className="text-sm font-semibold text-text-primary">Fast hover</div>

12
packages/dify-ui/src/preview-card/index.tsx
View File

@ -11,20 +11,22 @@ export type { Placement }
/**
* PreviewCard is a hover/focus-triggered rich preview intended to supplement a
* trigger whose primary action is its own click destination (e.g. a link, a
* selectable row, a chip that jumps to a definition).
* link. Base UI's canonical trigger renders an anchor.
*
* A11y contract — match Base UI's guidance:
* - The popup MUST NOT contain information or actions that are not also
* reachable from the trigger's primary click destination. Touch and screen
* reader users cannot open the card and must be able to get the same
* information/actions without it.
* reachable from the link destination. Touch and screen reader users cannot
* open the card and must be able to get the same information/actions without
* it.
* - A polymorphic action trigger is an application-level extension and is only
* valid when its primary click result exposes the same information.
* - If content is unique to the popup, either (a) add a separate click-triggered
* affordance (Popover) next to the trigger, or (b) move the unique content
* onto the click destination.
*/
export const PreviewCard = BasePreviewCard.Root
export const PreviewCardTrigger = BasePreviewCard.Trigger
export const PreviewCardViewport = BasePreviewCard.Viewport
export const createPreviewCardHandle = BasePreviewCard.createHandle
type PreviewCardContentProps = {

27
web/app/components/base/icons/src/vender/solid/arrows/ArrowDownRoundFill.json
View File

@ -1,27 +0,0 @@
{
"icon": {
"type": "element",
"isRootNode": true,
"name": "svg",
"attributes": {
"width": "16",
"height": "16",
"viewBox": "0 0 16 16",
"fill": "none",
"xmlns": "http://www.w3.org/2000/svg"
},
"children": [
{
"type": "element",
"name": "path",
"attributes": {
"d": "M6.02888 6.23572C5.08558 6.23572 4.56458 7.33027 5.15943 8.06239L7.13069 10.4885C7.57898 11.0403 8.42124 11.0403 8.86962 10.4885L10.8408 8.06239C11.4357 7.33027 10.9147 6.23572 9.97134 6.23572H6.02888Z",
"fill": "currentColor",
"fill-opacity": "0.3"
},
"children": []
}
]
},
"name": "ArrowDownRoundFill"
}

18
web/app/components/base/icons/src/vender/solid/arrows/ArrowDownRoundFill.tsx
View File

@ -1,18 +0,0 @@
// GENERATE BY script
// DON NOT EDIT IT MANUALLY
import type { IconData } from '@/app/components/base/icons/IconBase'
import * as React from 'react'
import IconBase from '@/app/components/base/icons/IconBase'
import data from './ArrowDownRoundFill.json'
const Icon = ({
ref,
...props
}: React.SVGProps<SVGSVGElement> & {
ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
}) => <IconBase {...props} ref={ref} data={data as IconData} />
Icon.displayName = 'ArrowDownRoundFill'
export default Icon

1
web/app/components/base/icons/src/vender/solid/arrows/index.ts
View File

@ -1 +0,0 @@
export { default as ArrowDownRoundFill } from './ArrowDownRoundFill'

10
web/app/components/base/search-input/__tests__/index.spec.tsx
View File

@ -1,5 +1,5 @@
import { fireEvent, render, screen } from '@testing-library/react'
import { useState } from 'react'
import { createRef, useState } from 'react'
import { SearchInput } from '..'
describe('SearchInput', () => {
@ -26,7 +26,15 @@ describe('SearchInput', () => {
expect(screen.getByRole('searchbox', { name: 'Search providers' })).toBeInTheDocument()
})
it('exposes the input element through its ref', () => {
const ref = createRef<HTMLInputElement>()
render(<SearchInput ref={ref} value="" onValueChange={() => {}} />)
expect(ref.current).toBe(screen.getByRole('searchbox', { name: 'common.operation.search' }))
})
it('focuses the searchbox when autoFocus is enabled', () => {
// oxlint-disable-next-line jsx-a11y/no-autofocus
render(<SearchInput value="" onValueChange={() => {}} autoFocus />)
expect(screen.getByRole('searchbox', { name: 'common.operation.search' })).toHaveFocus()
})

6
web/app/components/base/search-input/index.tsx
View File

@ -1,10 +1,12 @@
import type { InputProps } from '@langgenius/dify-ui/input'
import type { Ref } from 'react'
import { cn } from '@langgenius/dify-ui/cn'
import { Input } from '@langgenius/dify-ui/input'
import { useRef, useState } from 'react'
import { useImperativeHandle, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
type SearchInputProps = {
ref?: Ref<HTMLInputElement>
value: string
onValueChange: (value: string) => void
placeholder?: string
@ -12,6 +14,7 @@ type SearchInputProps = {
} & Pick<InputProps, 'aria-label' | 'autoFocus'>
export function SearchInput({
ref,
placeholder,
className,
value,
@ -25,6 +28,7 @@ export function SearchInput({
const compositionCommitRef = useRef<string | null>(null)
const [compositionValue, setCompositionValue] = useState('')
const inputValue = isComposingRef.current ? compositionValue : value
useImperativeHandle(ref, () => inputRef.current as HTMLInputElement, [])
const handleClear = () => {
isComposingRef.current = false

14
web/app/components/integrations/__tests__/tool-provider-list.spec.tsx
View File

@ -4,7 +4,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
import { createSystemFeaturesWrapper } from '@/__tests__/utils/mock-system-features'
import { getToolType } from '@/app/components/tools/utils'
import { renderWithNuqs } from '@/test/nuqs-testing'
import { ToolTypeEnum } from '../../workflow/block-selector/types'
import { ToolType } from '../../workflow/block-selector/types'
import ProviderList from '../tool-provider-list'
vi.mock('@/app/components/plugins/hooks', () => ({
@ -371,12 +371,12 @@ vi.mock('@/app/components/tools/mcp/create-card', () => ({
describe('getToolType', () => {
it.each([
['builtin', ToolTypeEnum.BuiltIn],
['api', ToolTypeEnum.Custom],
['workflow', ToolTypeEnum.Workflow],
['mcp', ToolTypeEnum.MCP],
['unknown', ToolTypeEnum.BuiltIn],
])('returns correct ToolTypeEnum for "%s"', (input, expected) => {
['builtin', ToolType.BuiltIn],
['api', ToolType.Custom],
['workflow', ToolType.Workflow],
['mcp', ToolType.MCP],
['unknown', ToolType.BuiltIn],
])('returns correct ToolType for "%s"', (input, expected) => {
expect(getToolType(input)).toBe(expected)
})
})

20
web/app/components/plugins/marketplace/search-box/__tests__/index.spec.tsx
View File

@ -1,6 +1,6 @@
import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { useState } from 'react'
import { createRef, useState } from 'react'
import { describe, expect, it, vi } from 'vitest'
import SearchBox from '../index'
@ -55,4 +55,22 @@ describe('SearchBox', () => {
await user.click(screen.getByRole('button'))
expect(onShowAddCustomCollectionModal).toHaveBeenCalledOnce()
})
it('exposes the input element through its ref', () => {
const ref = createRef<HTMLInputElement>()
render(
<SearchBox
ref={ref}
search=""
onSearchChange={vi.fn()}
tags={[]}
onTagsChange={vi.fn()}
placeholder="Search plugins"
showTags={false}
/>,
)
expect(ref.current).toBe(screen.getByPlaceholderText('Search plugins'))
})
})

8
web/app/components/plugins/marketplace/search-box/index.tsx
View File

@ -1,4 +1,5 @@
'use client'
import type { Ref } from 'react'
import { cn } from '@langgenius/dify-ui/cn'
import { RiAddLine, RiCloseLine, RiSearchLine } from '@remixicon/react'
import ActionButton from '@/app/components/base/action-button'
@ -6,6 +7,7 @@ import Divider from '@/app/components/base/divider'
import TagsFilter from './tags-filter'
type SearchBoxProps = {
ref?: Ref<HTMLInputElement>
search: string
onSearchChange: (search: string) => void
wrapperClassName?: string
@ -23,6 +25,7 @@ type SearchBoxProps = {
showTags?: boolean
}
const SearchBox = ({
ref,
search,
onSearchChange,
wrapperClassName,
@ -60,6 +63,8 @@ const SearchBox = ({
)}
<div className="flex grow items-center gap-x-2 p-1">
<input
ref={ref}
aria-label={placeholder || undefined}
className={cn(
'inline-block grow appearance-none bg-transparent body-md-medium text-text-secondary outline-hidden',
inputElementClassName,
@ -85,6 +90,9 @@ const SearchBox = ({
className={cn('size-4 text-components-input-text-placeholder', searchIconClassName)}
/>
<input
ref={ref}
aria-label={placeholder || undefined}
// oxlint-disable-next-line jsx-a11y/no-autofocus
autoFocus={autoFocus}
className={cn(
'mr-1 ml-1.5 inline-block min-w-0 grow appearance-none truncate bg-transparent system-sm-regular text-components-input-text-filled caret-primary-600 outline-hidden placeholder:text-components-input-text-placeholder',

4
web/app/components/plugins/plugin-detail-panel/subscription-list/__tests__/index.spec.tsx
View File

@ -2,7 +2,7 @@ import type { PluginDeclaration, PluginDetail } from '@/app/components/plugins/t
import type { TriggerSubscription } from '@/app/components/workflow/block-selector/types'
import { fireEvent, render, screen } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { TriggerCredentialTypeEnum } from '@/app/components/workflow/block-selector/types'
import { TriggerCredentialType } from '@/app/components/workflow/block-selector/types'
import { createReactI18nextMock } from '@/test/i18n-mock'
import { SubscriptionList } from '../index'
import { SubscriptionListMode } from '../types'
@ -53,7 +53,7 @@ const createSubscription = (overrides: Partial<TriggerSubscription> = {}): Trigg
id: 'sub-1',
name: 'Subscription One',
provider: 'provider-1',
credential_type: TriggerCredentialTypeEnum.ApiKey,
credential_type: TriggerCredentialType.ApiKey,
credentials: {},
endpoint: 'https://example.com',
parameters: {},

4
web/app/components/plugins/plugin-detail-panel/subscription-list/__tests__/list-view.spec.tsx
View File

@ -1,7 +1,7 @@
import type { TriggerSubscription } from '@/app/components/workflow/block-selector/types'
import { render, screen } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { TriggerCredentialTypeEnum } from '@/app/components/workflow/block-selector/types'
import { TriggerCredentialType } from '@/app/components/workflow/block-selector/types'
import { SubscriptionListView } from '../list-view'
let mockSubscriptions: TriggerSubscription[] = []
@ -24,7 +24,7 @@ const createSubscription = (overrides: Partial<TriggerSubscription> = {}): Trigg
id: 'sub-1',
name: 'Subscription One',
provider: 'provider-1',
credential_type: TriggerCredentialTypeEnum.ApiKey,
credential_type: TriggerCredentialType.ApiKey,
credentials: {},
endpoint: 'https://example.com',
parameters: {},

4
web/app/components/plugins/plugin-detail-panel/subscription-list/__tests__/selector-entry.spec.tsx
View File

@ -1,7 +1,7 @@
import type { TriggerSubscription } from '@/app/components/workflow/block-selector/types'
import { fireEvent, render, screen } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { TriggerCredentialTypeEnum } from '@/app/components/workflow/block-selector/types'
import { TriggerCredentialType } from '@/app/components/workflow/block-selector/types'
import { SubscriptionSelectorEntry } from '../selector-entry'
vi.mock('@langgenius/dify-ui/popover', async () => {
@ -86,7 +86,7 @@ const createSubscription = (overrides: Partial<TriggerSubscription> = {}): Trigg
id: 'sub-1',
name: 'Subscription One',
provider: 'provider-1',
credential_type: TriggerCredentialTypeEnum.ApiKey,
credential_type: TriggerCredentialType.ApiKey,
credentials: {},
endpoint: 'https://example.com',
parameters: {},

4
web/app/components/plugins/plugin-detail-panel/subscription-list/__tests__/selector-view.spec.tsx
View File

@ -1,7 +1,7 @@
import type { TriggerSubscription } from '@/app/components/workflow/block-selector/types'
import { fireEvent, render, screen } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { TriggerCredentialTypeEnum } from '@/app/components/workflow/block-selector/types'
import { TriggerCredentialType } from '@/app/components/workflow/block-selector/types'
import { SubscriptionSelectorView } from '../selector-view'
let mockSubscriptions: TriggerSubscription[] = []
@ -41,7 +41,7 @@ const createSubscription = (overrides: Partial<TriggerSubscription> = {}): Trigg
id: 'sub-1',
name: 'Subscription One',
provider: 'provider-1',
credential_type: TriggerCredentialTypeEnum.ApiKey,
credential_type: TriggerCredentialType.ApiKey,
credentials: {},
endpoint: 'https://example.com',
parameters: {},

4
web/app/components/plugins/plugin-detail-panel/subscription-list/__tests__/subscription-card.spec.tsx
View File

@ -1,7 +1,7 @@
import type { TriggerSubscription } from '@/app/components/workflow/block-selector/types'
import { fireEvent, render, screen } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { TriggerCredentialTypeEnum } from '@/app/components/workflow/block-selector/types'
import { TriggerCredentialType } from '@/app/components/workflow/block-selector/types'
import SubscriptionCard from '../subscription-card'
const mockRefetch = vi.fn()
@ -47,7 +47,7 @@ const createSubscription = (overrides: Partial<TriggerSubscription> = {}): Trigg
id: 'sub-1',
name: 'Subscription One',
provider: 'provider-1',
credential_type: TriggerCredentialTypeEnum.ApiKey,
credential_type: TriggerCredentialType.ApiKey,
credentials: {},
endpoint: 'https://example.com',
parameters: {},

4
web/app/components/plugins/plugin-detail-panel/subscription-list/create/__tests__/common-modal.spec.tsx
View File

@ -3,7 +3,7 @@ import type { TriggerSubscriptionBuilder } from '@/app/components/workflow/block
import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
import { SupportedCreationMethods } from '@/app/components/plugins/types'
import { TriggerCredentialTypeEnum } from '@/app/components/workflow/block-selector/types'
import { TriggerCredentialType } from '@/app/components/workflow/block-selector/types'
import { CommonCreateModal } from '../common-modal'
type PluginDetail = {
@ -63,7 +63,7 @@ function createMockSubscriptionBuilder(
id: 'builder-123',
name: 'Test Builder',
provider: 'test-provider',
credential_type: TriggerCredentialTypeEnum.ApiKey,
credential_type: TriggerCredentialType.ApiKey,
credentials: {},
endpoint: 'https://example.com/callback',
parameters: {},

12
web/app/components/plugins/plugin-detail-panel/subscription-list/create/__tests__/index.spec.tsx
View File

@ -9,7 +9,7 @@ import { toast } from '@langgenius/dify-ui/toast'
import { fireEvent, render, screen, waitFor } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { SupportedCreationMethods } from '@/app/components/plugins/types'
import { TriggerCredentialTypeEnum } from '@/app/components/workflow/block-selector/types'
import { TriggerCredentialType } from '@/app/components/workflow/block-selector/types'
import { CreateSubscriptionButton } from '../index'
import { CreateButtonType, DEFAULT_METHOD } from '../types'
@ -116,7 +116,7 @@ vi.mock('../oauth-client', () => ({
id: 'test-builder',
name: 'test',
provider: 'test-provider',
credential_type: TriggerCredentialTypeEnum.Oauth2,
credential_type: TriggerCredentialType.Oauth2,
credentials: {},
endpoint: 'https://test.com',
parameters: {},
@ -285,7 +285,7 @@ const createSubscription = (overrides: Partial<TriggerSubscription> = {}): Trigg
id: 'test-subscription',
name: 'Test Subscription',
provider: 'test-provider',
credential_type: TriggerCredentialTypeEnum.ApiKey,
credential_type: TriggerCredentialType.ApiKey,
credentials: {},
endpoint: 'https://test.com',
parameters: {},
@ -1133,7 +1133,7 @@ describe('CreateSubscriptionButton', () => {
id: 'oauth-builder',
name: 'OAuth Builder',
provider: 'test-provider',
credential_type: TriggerCredentialTypeEnum.Oauth2,
credential_type: TriggerCredentialType.Oauth2,
credentials: {},
endpoint: 'https://test.com',
parameters: {},
@ -1598,7 +1598,7 @@ describe('CreateSubscriptionButton', () => {
id: 'oauth-builder',
name: 'OAuth Builder',
provider: 'test-provider',
credential_type: TriggerCredentialTypeEnum.Oauth2,
credential_type: TriggerCredentialType.Oauth2,
credentials: {},
endpoint: 'https://test.com',
parameters: {},
@ -1770,7 +1770,7 @@ describe('CreateSubscriptionButton', () => {
id: 'oauth-builder',
name: 'OAuth Builder',
provider: 'test-provider',
credential_type: TriggerCredentialTypeEnum.Oauth2,
credential_type: TriggerCredentialType.Oauth2,
credentials: {},
endpoint: 'https://test.com',
parameters: {},

4
web/app/components/plugins/plugin-detail-panel/subscription-list/create/__tests__/oauth-client.spec.tsx
View File

@ -5,7 +5,7 @@ import type {
import { fireEvent, render, screen, waitFor } from '@testing-library/react'
import * as React from 'react'
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
import { TriggerCredentialTypeEnum } from '@/app/components/workflow/block-selector/types'
import { TriggerCredentialType } from '@/app/components/workflow/block-selector/types'
import { OAuthClientSettingsModal } from '../oauth-client'
type PluginDetail = {
@ -59,7 +59,7 @@ function createMockSubscriptionBuilder(
id: 'builder-123',
name: 'Test Builder',
provider: 'test-provider',
credential_type: TriggerCredentialTypeEnum.Oauth2,
credential_type: TriggerCredentialType.Oauth2,
credentials: {},
endpoint: 'https://example.com/callback',
parameters: {},

8
web/app/components/plugins/plugin-detail-panel/subscription-list/create/hooks/__tests__/use-common-modal-state.spec.ts
View File

@ -3,7 +3,7 @@ import type { TriggerSubscriptionBuilder } from '@/app/components/workflow/block
import { act, renderHook, waitFor } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { SupportedCreationMethods } from '@/app/components/plugins/types'
import { TriggerCredentialTypeEnum } from '@/app/components/workflow/block-selector/types'
import { TriggerCredentialType } from '@/app/components/workflow/block-selector/types'
import { ApiKeyStep, useCommonModalState } from '../use-common-modal-state'
type MockPluginDetail = {
@ -27,7 +27,7 @@ const createMockBuilder = (
id: 'builder-1',
name: 'builder',
provider: 'provider-a',
credential_type: TriggerCredentialTypeEnum.ApiKey,
credential_type: TriggerCredentialType.ApiKey,
credentials: {},
endpoint: 'https://example.com/callback',
parameters: {},
@ -148,7 +148,7 @@ describe('useCommonModalState', () => {
expect(mockCreateBuilder).toHaveBeenCalledWith({
provider: 'provider-a',
credential_type: TriggerCredentialTypeEnum.ApiKey,
credential_type: TriggerCredentialType.ApiKey,
})
expect(result.current.currentStep).toBe(ApiKeyStep.Verify)
expect(result.current.apiKeyCredentialsSchema[0]).toMatchObject({
@ -248,7 +248,7 @@ describe('useCommonModalState', () => {
vi.useFakeTimers()
const builder = createMockBuilder({
credential_type: TriggerCredentialTypeEnum.Unauthorized,
credential_type: TriggerCredentialType.Unauthorized,
})
const { result } = renderHook(() =>
useCommonModalState({

4
web/app/components/plugins/plugin-detail-panel/subscription-list/create/hooks/__tests__/use-oauth-client-state.spec.ts
View File

@ -4,7 +4,7 @@ import type {
} from '@/app/components/workflow/block-selector/types'
import { act, renderHook, waitFor } from '@testing-library/react'
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
import { TriggerCredentialTypeEnum } from '@/app/components/workflow/block-selector/types'
import { TriggerCredentialType } from '@/app/components/workflow/block-selector/types'
import {
AuthorizationStatusEnum,
ClientTypeEnum,
@ -52,7 +52,7 @@ function createMockSubscriptionBuilder(
id: 'builder-123',
name: 'Test Builder',
provider: 'test-provider',
credential_type: TriggerCredentialTypeEnum.Oauth2,
credential_type: TriggerCredentialType.Oauth2,
credentials: {},
endpoint: 'https://example.com/callback',
parameters: {},

10
web/app/components/plugins/plugin-detail-panel/subscription-list/create/hooks/use-common-modal-state.ts
View File

@ -12,7 +12,7 @@ import { debounce } from 'es-toolkit/compat'
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { SupportedCreationMethods } from '@/app/components/plugins/types'
import { TriggerCredentialTypeEnum } from '@/app/components/workflow/block-selector/types'
import { TriggerCredentialType } from '@/app/components/workflow/block-selector/types'
import {
useBuildTriggerSubscription,
useCreateTriggerSubscriptionBuilder,
@ -42,10 +42,10 @@ export enum ApiKeyStep {
Configuration = 'configuration',
}
const CREDENTIAL_TYPE_MAP: Record<SupportedCreationMethods, TriggerCredentialTypeEnum> = {
[SupportedCreationMethods.APIKEY]: TriggerCredentialTypeEnum.ApiKey,
[SupportedCreationMethods.OAUTH]: TriggerCredentialTypeEnum.Oauth2,
[SupportedCreationMethods.MANUAL]: TriggerCredentialTypeEnum.Unauthorized,
const CREDENTIAL_TYPE_MAP: Record<SupportedCreationMethods, TriggerCredentialType> = {
[SupportedCreationMethods.APIKEY]: TriggerCredentialType.ApiKey,
[SupportedCreationMethods.OAUTH]: TriggerCredentialType.Oauth2,
[SupportedCreationMethods.MANUAL]: TriggerCredentialType.Unauthorized,
}
export const MODAL_TITLE_KEY_MAP: Record<

28
web/app/components/plugins/plugin-detail-panel/subscription-list/edit/__tests__/index.spec.tsx
View File

@ -4,7 +4,7 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { FormTypeEnum } from '@/app/components/base/form/types'
import { PluginCategoryEnum, PluginSource } from '@/app/components/plugins/types'
import { TriggerCredentialTypeEnum } from '@/app/components/workflow/block-selector/types'
import { TriggerCredentialType } from '@/app/components/workflow/block-selector/types'
import { ApiKeyEditModal } from '../apikey-edit-modal'
import { EditModal } from '../index'
import { ManualEditModal } from '../manual-edit-modal'
@ -191,7 +191,7 @@ const createSubscription = (overrides: Partial<TriggerSubscription> = {}): Trigg
id: 'test-subscription-id',
name: 'Test Subscription',
provider: 'test-provider',
credential_type: TriggerCredentialTypeEnum.Unauthorized,
credential_type: TriggerCredentialType.Unauthorized,
credentials: {},
endpoint: 'https://example.com/webhook',
parameters: {},
@ -317,9 +317,9 @@ describe('Edit Modal Components', () => {
describe('EditModal (Router)', () => {
it.each([
{ type: TriggerCredentialTypeEnum.Unauthorized, name: 'ManualEditModal' },
{ type: TriggerCredentialTypeEnum.Oauth2, name: 'OAuthEditModal' },
{ type: TriggerCredentialTypeEnum.ApiKey, name: 'ApiKeyEditModal' },
{ type: TriggerCredentialType.Unauthorized, name: 'ManualEditModal' },
{ type: TriggerCredentialType.Oauth2, name: 'OAuthEditModal' },
{ type: TriggerCredentialType.ApiKey, name: 'ApiKeyEditModal' },
])('should render $name for $type credential type', ({ type }) => {
render(
<EditModal
@ -335,7 +335,7 @@ describe('Edit Modal Components', () => {
<EditModal
onClose={vi.fn()}
subscription={createSubscription({
credential_type: 'unknown' as TriggerCredentialTypeEnum,
credential_type: 'unknown' as TriggerCredentialType,
})}
/>,
)
@ -707,7 +707,7 @@ describe('Edit Modal Components', () => {
const createProps = (overrides = {}) => ({
onClose: vi.fn(),
subscription: createSubscription({ credential_type: TriggerCredentialTypeEnum.Oauth2 }),
subscription: createSubscription({ credential_type: TriggerCredentialType.Oauth2 }),
...overrides,
})
@ -744,7 +744,7 @@ describe('Edit Modal Components', () => {
<OAuthEditModal
{...createProps({
subscription: createSubscription({
credential_type: TriggerCredentialTypeEnum.Oauth2,
credential_type: TriggerCredentialType.Oauth2,
parameters: { channel: 'general' },
}),
})}
@ -808,7 +808,7 @@ describe('Edit Modal Components', () => {
<OAuthEditModal
{...createProps({
subscription: createSubscription({
credential_type: TriggerCredentialTypeEnum.Oauth2,
credential_type: TriggerCredentialType.Oauth2,
parameters: { channel: 'general' },
}),
})}
@ -830,7 +830,7 @@ describe('Edit Modal Components', () => {
<OAuthEditModal
{...createProps({
subscription: createSubscription({
credential_type: TriggerCredentialTypeEnum.Oauth2,
credential_type: TriggerCredentialType.Oauth2,
parameters: { channel: 'old' },
}),
})}
@ -982,7 +982,7 @@ describe('Edit Modal Components', () => {
const createProps = (overrides = {}) => ({
onClose: vi.fn(),
subscription: createSubscription({ credential_type: TriggerCredentialTypeEnum.ApiKey }),
subscription: createSubscription({ credential_type: TriggerCredentialType.ApiKey }),
...overrides,
})
@ -1038,7 +1038,7 @@ describe('Edit Modal Components', () => {
<ApiKeyEditModal
{...createProps({
subscription: createSubscription({
credential_type: TriggerCredentialTypeEnum.ApiKey,
credential_type: TriggerCredentialType.ApiKey,
credentials: { api_key: '[__HIDDEN__]' },
}),
})}
@ -1375,7 +1375,7 @@ describe('Edit Modal Components', () => {
<ApiKeyEditModal
{...createProps({
subscription: createSubscription({
credential_type: TriggerCredentialTypeEnum.ApiKey,
credential_type: TriggerCredentialType.ApiKey,
parameters: { param1: 'value' },
}),
})}
@ -1404,7 +1404,7 @@ describe('Edit Modal Components', () => {
<ApiKeyEditModal
{...createProps({
subscription: createSubscription({
credential_type: TriggerCredentialTypeEnum.ApiKey,
credential_type: TriggerCredentialType.ApiKey,
parameters: { param1: 'old_value' },
}),
})}

8
web/app/components/plugins/plugin-detail-panel/subscription-list/edit/index.tsx
View File

@ -1,7 +1,7 @@
'use client'
import type { PluginDetail } from '@/app/components/plugins/types'
import type { TriggerSubscription } from '@/app/components/workflow/block-selector/types'
import { TriggerCredentialTypeEnum } from '@/app/components/workflow/block-selector/types'
import { TriggerCredentialType } from '@/app/components/workflow/block-selector/types'
import { ApiKeyEditModal } from './apikey-edit-modal'
import { ManualEditModal } from './manual-edit-modal'
import { OAuthEditModal } from './oauth-edit-modal'
@ -16,7 +16,7 @@ export const EditModal = ({ onClose, subscription, pluginDetail }: Props) => {
const credentialType = subscription.credential_type
switch (credentialType) {
case TriggerCredentialTypeEnum.Unauthorized:
case TriggerCredentialType.Unauthorized:
return (
<ManualEditModal
onClose={onClose}
@ -24,11 +24,11 @@ export const EditModal = ({ onClose, subscription, pluginDetail }: Props) => {
pluginDetail={pluginDetail}
/>
)
case TriggerCredentialTypeEnum.Oauth2:
case TriggerCredentialType.Oauth2:
return (
<OAuthEditModal onClose={onClose} subscription={subscription} pluginDetail={pluginDetail} />
)
case TriggerCredentialTypeEnum.ApiKey:
case TriggerCredentialType.ApiKey:
return (
<ApiKeyEditModal
onClose={onClose}

10
web/app/components/tools/provider/__tests__/empty.spec.tsx
View File

@ -1,14 +1,14 @@
import { render, screen } from '@testing-library/react'
import { describe, expect, it, vi } from 'vitest'
import { ToolTypeEnum } from '../../../workflow/block-selector/types'
import { ToolType } from '../../../workflow/block-selector/types'
import Empty from '../empty'
vi.mock('@/hooks/use-theme', () => ({ default: () => ({ theme: 'light' }) }))
describe('Empty', () => {
it.each([
[ToolTypeEnum.Custom, '/integrations/tools/api'],
[ToolTypeEnum.MCP, '/integrations/tools/mcp'],
[ToolType.Custom, '/integrations/tools/api'],
[ToolType.MCP, '/integrations/tools/mcp'],
])('links the %s empty state to its integration page', (type, href) => {
render(<Empty type={type} />)
@ -16,7 +16,7 @@ describe('Empty', () => {
})
it('links the workflow guide to Studio and the documentation', () => {
render(<Empty type={ToolTypeEnum.Workflow} />)
render(<Empty type={ToolType.Workflow} />)
expect(screen.getByRole('link', { name: /goToStudio/i })).toHaveAttribute('href', '/apps')
expect(screen.getByRole('link', { name: /learnMore/i })).toHaveAttribute(
@ -26,7 +26,7 @@ describe('Empty', () => {
})
it('does not offer installation navigation in an agent empty state', () => {
render(<Empty type={ToolTypeEnum.Custom} isAgent />)
render(<Empty type={ToolType.Custom} isAgent />)
expect(screen.queryByRole('link')).not.toBeInTheDocument()
})

14
web/app/components/tools/provider/empty.tsx
View File

@ -7,10 +7,10 @@ import { useDocLink } from '@/context/i18n'
import useTheme from '@/hooks/use-theme'
import Link from '@/next/link'
import { NoToolPlaceholder } from '../../base/icons/src/vender/other'
import { ToolTypeEnum } from '../../workflow/block-selector/types'
import { ToolType } from '../../workflow/block-selector/types'
type Props = Readonly<{
type?: ToolTypeEnum
type?: ToolType
isAgent?: boolean
}>
@ -20,11 +20,11 @@ const workflowToolStepKeys = [
'workflowToolEmpty.step3',
] as const
const getLink = (type?: ToolTypeEnum) => {
const getLink = (type?: ToolType) => {
switch (type) {
case ToolTypeEnum.Custom:
case ToolType.Custom:
return buildIntegrationPath('custom-tool')
case ToolTypeEnum.MCP:
case ToolType.MCP:
return buildIntegrationPath('mcp')
default:
return buildIntegrationPath('custom-tool')
@ -35,7 +35,7 @@ const Empty = ({ type, isAgent }: Props) => {
const docLink = useDocLink()
const { theme } = useTheme()
const hasLink = type && [ToolTypeEnum.Custom, ToolTypeEnum.MCP].includes(type)
const hasLink = type === ToolType.Custom || type === ToolType.MCP
const renderType = isAgent ? ('agent' as const) : type
const hasTitle =
renderType &&
@ -52,7 +52,7 @@ const Empty = ({ type, isAgent }: Props) => {
</>
)
if (!isAgent && type === ToolTypeEnum.Workflow) {
if (!isAgent && type === ToolType.Workflow) {
return (
<div className="flex w-full max-w-[1060px] flex-col items-center gap-8 text-center">
<div className="flex w-full max-w-[739px] flex-col items-center gap-1">

12
web/app/components/tools/utils/index.ts
View File

@ -1,20 +1,20 @@
import type { ThoughtItem } from '@/app/components/base/chat/chat/type'
import type { FileEntity } from '@/app/components/base/file-uploader/types'
import type { VisionFile } from '@/types/app'
import { ToolTypeEnum } from '../../workflow/block-selector/types'
import { ToolType } from '../../workflow/block-selector/types'
export const getToolType = (type: string) => {
switch (type) {
case 'builtin':
return ToolTypeEnum.BuiltIn
return ToolType.BuiltIn
case 'api':
return ToolTypeEnum.Custom
return ToolType.Custom
case 'workflow':
return ToolTypeEnum.Workflow
return ToolType.Workflow
case 'mcp':
return ToolTypeEnum.MCP
return ToolType.MCP
default:
return ToolTypeEnum.BuiltIn
return ToolType.BuiltIn
}
}

5
web/app/components/workflow-app/components/workflow-onboarding-modal/start-node-selection-panel.tsx
View File

@ -4,7 +4,7 @@ import type { BlockDefaultValue } from '@/app/components/workflow/block-selector
import { useCallback, useState } from 'react'
import { useTranslation } from 'react-i18next'
import NodeSelector from '@/app/components/workflow/block-selector'
import { TabsEnum } from '@/app/components/workflow/block-selector/types'
import { TabType } from '@/app/components/workflow/block-selector/types'
import { BlockEnum } from '@/app/components/workflow/types'
import StartNodeOption from './start-node-option'
@ -49,8 +49,7 @@ const StartNodeSelectionPanel: FC<StartNodeSelectionPanelProps> = ({
offset={-200}
noBlocks={true}
showStartTab={true}
defaultActiveTab={TabsEnum.Start}
forceShowStartContent={true}
defaultActiveTab={TabType.Start}
availableBlocksTypes={[
BlockEnum.TriggerSchedule,
BlockEnum.TriggerWebhook,

31
web/app/components/workflow/block-selector/__tests__/all-tools.spec.tsx
View File

@ -33,6 +33,14 @@ vi.mock('@/utils/var', async (importOriginal) => ({
getMarketplaceUrl: (path = '') => `https://marketplace.test${path}`,
}))
vi.mock('../rag-tool-recommendations', () => ({
RAGToolRecommendations: ({ onLoadMore }: { onLoadMore: () => void }) => (
<button type="button" onClick={onLoadMore}>
Load more RAG tools
</button>
),
}))
const mockUseMarketplacePlugins = vi.mocked(useMarketplacePlugins)
const mockUseGetLanguage = vi.mocked(useGetLanguage)
const mockUseTheme = vi.mocked(useTheme)
@ -193,4 +201,27 @@ describe('AllTools', () => {
expect(screen.getByText('workflow.tabs.noPluginsFound')).toBeInTheDocument()
})
})
it('returns the next tag value when loading more RAG tools', async () => {
const user = userEvent.setup()
const onTagsChange = vi.fn()
render(
<AllTools
searchText=""
tags={[]}
onTagsChange={onTagsChange}
onSelect={vi.fn()}
buildInTools={[createToolProvider({ id: 'provider-built-in' })]}
customTools={[]}
workflowTools={[]}
mcpTools={[]}
isInRAGPipeline
/>,
)
await user.click(screen.getByRole('button', { name: 'Load more RAG tools' }))
expect(onTagsChange).toHaveBeenCalledWith(['rag'])
})
})

22
web/app/components/workflow/block-selector/__tests__/blocks.spec.tsx
View File

@ -11,7 +11,7 @@ import { HooksStoreContext } from '../../hooks-store/provider'
import { createHooksStore } from '../../hooks-store/store'
import { BlockEnum } from '../../types'
import Blocks from '../blocks'
import { BlockClassificationEnum } from '../types'
import { BlockClassification } from '../types'
const runtimeState = vi.hoisted(() => ({
appType: 'workflow' as string | undefined,
@ -53,7 +53,7 @@ vi.mock('@langgenius/dify-ui/toast', () => ({
const createBlock = (
type: BlockEnum,
title: string,
classification = BlockClassificationEnum.Default,
classification: BlockClassification = BlockClassification.Default,
sort = 0,
): NodeDefault => ({
metaData: {
@ -142,18 +142,20 @@ describe('Blocks', () => {
availableBlocksTypes={[BlockEnum.LLM, BlockEnum.LoopEnd, BlockEnum.KnowledgeBase]}
blocks={[
createBlock(BlockEnum.LLM, 'LLM'),
createBlock(BlockEnum.LoopEnd, 'Exit Loop', BlockClassificationEnum.Logic),
createBlock(BlockEnum.LoopEnd, 'Exit Loop', BlockClassification.Logic),
createBlock(BlockEnum.KnowledgeBase, 'Knowledge Retrieval'),
]}
/>,
)
expect(screen.getByRole('button', { name: 'LLM' })).toBeInTheDocument()
const llmButton = screen.getByRole('button', { name: 'LLM' })
expect(llmButton).toBeInTheDocument()
expect(llmButton).toHaveAccessibleDescription('LLM description')
expect(screen.getByText('Exit Loop')).toBeInTheDocument()
expect(screen.getByText('workflow.nodes.loop.loopNode')).toBeInTheDocument()
expect(screen.queryByText('Knowledge Retrieval')).not.toBeInTheDocument()
await user.click(screen.getByRole('button', { name: 'LLM' }))
await user.click(llmButton)
expect(onSelect).toHaveBeenCalledWith(BlockEnum.LLM)
})
@ -245,8 +247,8 @@ describe('Blocks', () => {
onSelect={onSelect}
availableBlocksTypes={[BlockEnum.LLM, BlockEnum.AgentV2]}
blocks={[
createBlock(BlockEnum.LLM, 'LLM', BlockClassificationEnum.Default, 0),
createBlock(BlockEnum.AgentV2, 'Agent', BlockClassificationEnum.Default, 3),
createBlock(BlockEnum.LLM, 'LLM', BlockClassification.Default, 0),
createBlock(BlockEnum.AgentV2, 'Agent', BlockClassification.Default, 3),
]}
/>
</HooksStoreContext>
@ -334,7 +336,7 @@ describe('Blocks', () => {
searchText=""
onSelect={vi.fn()}
availableBlocksTypes={[BlockEnum.AgentV2]}
blocks={[createBlock(BlockEnum.AgentV2, 'Agent', BlockClassificationEnum.Default, 3)]}
blocks={[createBlock(BlockEnum.AgentV2, 'Agent', BlockClassification.Default, 3)]}
/>
</HooksStoreContext>
</QueryClientProvider>,
@ -392,7 +394,7 @@ describe('Blocks', () => {
searchText=""
onSelect={onSelect}
availableBlocksTypes={[BlockEnum.AgentV2]}
blocks={[createBlock(BlockEnum.AgentV2, 'Agent', BlockClassificationEnum.Default, 3)]}
blocks={[createBlock(BlockEnum.AgentV2, 'Agent', BlockClassification.Default, 3)]}
/>
</HooksStoreContext>
</QueryClientProvider>,
@ -435,7 +437,7 @@ describe('Blocks', () => {
searchText=""
onSelect={onSelect}
availableBlocksTypes={[BlockEnum.AgentV2]}
blocks={[createBlock(BlockEnum.AgentV2, 'Agent', BlockClassificationEnum.Default, 3)]}
blocks={[createBlock(BlockEnum.AgentV2, 'Agent', BlockClassification.Default, 3)]}
/>
</HooksStoreContext>
</QueryClientProvider>,

78
web/app/components/workflow/block-selector/__tests__/featured-tools.spec.tsx
View File

@ -20,6 +20,21 @@ vi.mock('@/app/components/workflow/nodes/_base/components/mcp-tool-availability'
}),
}))
vi.mock('@/app/components/workflow/block-selector/market-place-plugin/action', () => ({
default: () => <button type="button" aria-label="common.operation.more" />,
}))
vi.mock('@/app/components/plugins/install-plugin/install-from-marketplace', () => ({
default: () => <div data-testid="install-from-marketplace" />,
}))
vi.mock(
'@/app/components/plugins/install-plugin/hooks/use-workspace-plugin-install-permission',
() => ({
default: () => ({ canInstallPlugin: true, currentDifyVersion: '1.0.0' }),
}),
)
vi.mock('@/utils/var', async (importOriginal) => ({
...(await importOriginal<typeof import('@/utils/var')>()),
getMarketplaceUrl: (path = '') => `https://marketplace.test${path}`,
@ -36,9 +51,9 @@ describe('FeaturedTools', () => {
mockUseTheme.mockReturnValue({ theme: Theme.light } as ReturnType<typeof useTheme>)
})
it('shows more featured tools when the list exceeds the initial quota', async () => {
it('reveals featured tools in batches and then returns to the initial list', async () => {
const user = userEvent.setup()
const plugins = Array.from({ length: 6 }, (_, index) =>
const plugins = Array.from({ length: 11 }, (_, index) =>
createPlugin({
plugin_id: `plugin-${index + 1}`,
latest_package_identifier: `plugin-${index + 1}@1.0.0`,
@ -59,12 +74,27 @@ describe('FeaturedTools', () => {
expect(screen.getByText('Provider 1')).toBeInTheDocument()
expect(screen.queryByText('Provider 6')).not.toBeInTheDocument()
await user.click(screen.getByText('workflow.tabs.showMoreFeatured'))
const showMoreButton = screen.getByRole('button', {
name: 'workflow.tabs.showMoreFeatured',
})
expect(showMoreButton).not.toHaveAttribute('aria-expanded')
expect(screen.getByText('Provider 6')).toBeInTheDocument()
await user.click(showMoreButton)
expect(screen.getByText('Provider 10')).toBeInTheDocument()
expect(screen.queryByText('Provider 11')).not.toBeInTheDocument()
await user.click(screen.getByRole('button', { name: 'workflow.tabs.showMoreFeatured' }))
expect(screen.getByText('Provider 11')).toBeInTheDocument()
await user.click(screen.getByRole('button', { name: 'workflow.tabs.showLessFeatured' }))
expect(screen.queryByText('Provider 6')).not.toBeInTheDocument()
})
it('honors the persisted collapsed state', () => {
it('restores the collapsed state and expands from the keyboard', async () => {
const user = userEvent.setup()
localStorage.setItem('workflow_tools_featured_collapsed', 'true')
render(
@ -75,8 +105,44 @@ describe('FeaturedTools', () => {
/>,
)
expect(screen.getByText('workflow.tabs.featuredTools')).toBeInTheDocument()
const trigger = screen.getByRole('button', { name: 'workflow.tabs.featuredTools' })
expect(trigger).toHaveAttribute('aria-expanded', 'false')
expect(screen.queryByText('Provider One')).not.toBeInTheDocument()
trigger.focus()
await user.keyboard('{Enter}')
expect(trigger).toHaveAttribute('aria-expanded', 'true')
expect(screen.getByText('Provider One')).toBeInTheDocument()
expect(globalThis.localStorage.setItem).toHaveBeenCalledWith(
'workflow_tools_featured_collapsed',
'false',
)
})
it('keeps the marketplace link and row actions keyboard reachable', async () => {
const user = userEvent.setup()
render(
<FeaturedTools
plugins={[createPlugin({ name: 'plugin-one' })]}
providerMap={new Map()}
onSelect={vi.fn()}
/>,
)
const detailsLink = screen.getByRole('link', { name: 'Plugin One' })
const installButton = screen.getByRole('button', { name: 'plugin.installAction' })
const moreButton = screen.getByRole('button', { name: 'common.operation.more' })
expect(detailsLink).toHaveAttribute('href', 'https://marketplace.test/plugins/org/plugin-one')
detailsLink.focus()
await user.tab()
expect(installButton).toHaveFocus()
await user.tab()
expect(moreButton).toHaveFocus()
})
it('shows the marketplace empty state when no featured tools are available', () => {

79
web/app/components/workflow/block-selector/__tests__/featured-triggers.spec.tsx
View File

@ -14,13 +14,20 @@ vi.mock('@/hooks/use-theme', () => ({
}))
vi.mock('@/app/components/workflow/block-selector/market-place-plugin/action', () => ({
default: () => <div data-testid="marketplace-action" />,
default: () => <button type="button" aria-label="common.operation.more" />,
}))
vi.mock('@/app/components/plugins/install-plugin/install-from-marketplace', () => ({
default: () => <div data-testid="install-from-marketplace" />,
}))
vi.mock(
'@/app/components/plugins/install-plugin/hooks/use-workspace-plugin-install-permission',
() => ({
default: () => ({ canInstallPlugin: true, currentDifyVersion: '1.0.0' }),
}),
)
vi.mock('@/utils/var', async (importOriginal) => {
const actual = await importOriginal<typeof import('@/utils/var')>()
return {
@ -106,7 +113,12 @@ describe('FeaturedTriggers', () => {
render(<FeaturedTriggers plugins={[]} providerMap={new Map()} onSelect={vi.fn()} />)
await user.click(screen.getByRole('button', { name: /workflow\.tabs\.featuredTools/ }))
const trigger = screen.getByRole('button', { name: /workflow\.tabs\.featuredTools/ })
expect(trigger).toHaveAttribute('aria-expanded', 'true')
await user.click(trigger)
expect(trigger).toHaveAttribute('aria-expanded', 'false')
expect(
screen.queryByRole('link', { name: 'workflow.tabs.noFeaturedTriggers' }),
@ -117,9 +129,9 @@ describe('FeaturedTriggers', () => {
)
})
it('should show more and show less across installed providers', async () => {
it('should reveal installed providers in batches and then return to the initial list', async () => {
const user = userEvent.setup()
const providers = Array.from({ length: 6 }).map((_, index) =>
const providers = Array.from({ length: 11 }).map((_, index) =>
createTriggerProvider({
id: `provider-${index}`,
name: `provider-${index}`,
@ -141,10 +153,19 @@ describe('FeaturedTriggers', () => {
expect(screen.getByText('Provider 4')).toBeInTheDocument()
expect(screen.queryByText('Provider 5')).not.toBeInTheDocument()
await user.click(screen.getByText('workflow.tabs.showMoreFeatured'))
expect(screen.getByText('Provider 5')).toBeInTheDocument()
const showMoreButton = screen.getByRole('button', {
name: 'workflow.tabs.showMoreFeatured',
})
expect(showMoreButton).not.toHaveAttribute('aria-expanded')
await user.click(screen.getByText('workflow.tabs.showLessFeatured'))
await user.click(showMoreButton)
expect(screen.getByText('Provider 9')).toBeInTheDocument()
expect(screen.queryByText('Provider 10')).not.toBeInTheDocument()
await user.click(screen.getByRole('button', { name: 'workflow.tabs.showMoreFeatured' }))
expect(screen.getByText('Provider 10')).toBeInTheDocument()
await user.click(screen.getByRole('button', { name: 'workflow.tabs.showLessFeatured' }))
expect(screen.queryByText('Provider 5')).not.toBeInTheDocument()
})
})
@ -192,38 +213,28 @@ describe('FeaturedTriggers', () => {
)
})
it('should align featured item icons with the trigger list column', () => {
const provider = createTriggerProvider()
it('should keep the marketplace link and row actions keyboard reachable', async () => {
const user = userEvent.setup()
render(
<FeaturedTriggers
plugins={[
createPlugin({ plugin_id: 'plugin-1', latest_package_identifier: 'plugin-1@1.0.0' }),
createPlugin({
name: 'plugin-two',
plugin_id: 'plugin-2',
latest_package_identifier: 'plugin-2@1.0.0',
label: { en_US: 'Plugin Two', zh_Hans: '插件二' },
}),
]}
providerMap={
new Map([
['plugin-1', provider],
['plugin-1@1.0.0', provider],
])
}
onSelect={vi.fn()}
/>,
<FeaturedTriggers plugins={[createPlugin()]} providerMap={new Map()} onSelect={vi.fn()} />,
)
const installedRow = screen.getByText('Provider One').closest('.select-none')
expect(installedRow).toHaveClass('h-8', 'pr-2', 'pl-3')
expect(installedRow?.parentElement?.parentElement?.parentElement).toHaveClass('p-1')
const detailsLink = screen.getByRole('link', { name: 'Plugin One' })
const installButton = screen.getByRole('button', { name: 'plugin.installAction' })
const moreButton = screen.getByRole('button', { name: 'common.operation.more' })
const uninstalledRow = screen.getByText('Plugin Two').closest('.group')
expect(uninstalledRow).toHaveClass('h-8', 'pr-2', 'pl-3')
expect(uninstalledRow?.parentElement).toHaveClass('mb-1', 'last-of-type:mb-0')
expect(uninstalledRow?.parentElement?.parentElement).toHaveClass('p-1')
expect(detailsLink).toHaveAttribute(
'href',
'https://marketplace.test/plugins/org/trigger-plugin',
)
detailsLink.focus()
await user.tab()
expect(installButton).toHaveFocus()
await user.tab()
expect(moreButton).toHaveFocus()
})
})
})

85
web/app/components/workflow/block-selector/__tests__/hooks.spec.tsx
View File

@ -1,6 +1,6 @@
import { act, renderHook } from '@testing-library/react'
import { renderHook } from '@testing-library/react'
import { useTabs, useToolTabs } from '../hooks'
import { TabsEnum, ToolTypeEnum } from '../types'
import { TabType, ToolType } from '../types'
describe('block-selector hooks', () => {
beforeEach(() => {
@ -11,12 +11,12 @@ describe('block-selector hooks', () => {
const { result } = renderHook(() =>
useTabs({
noStart: false,
defaultActiveTab: TabsEnum.Start,
defaultActiveTab: TabType.Start,
}),
)
expect(result.current.tabs.find((tab) => tab.key === TabsEnum.Start)?.disabled).toBeFalsy()
expect(result.current.activeTab).toBe(TabsEnum.Start)
expect(result.current.tabs.find((tab) => tab.key === TabType.Start)?.disabled).toBeFalsy()
expect(result.current.initialTab).toBe(TabType.Start)
})
it('disables the start tab when an unconfigured start placeholder exists', () => {
@ -24,87 +24,54 @@ describe('block-selector hooks', () => {
useTabs({
noStart: false,
hasStartPlaceholderNode: true,
defaultActiveTab: TabsEnum.Start,
defaultActiveTab: TabType.Start,
}),
)
const startTab = result.current.tabs.find((tab) => tab.key === TabsEnum.Start)
const startTab = result.current.tabs.find((tab) => tab.key === TabType.Start)
expect(startTab?.disabled).toBe(true)
expect(startTab?.disabledTip).toBe('workflow.tabs.unconfiguredStartDisabledTip')
expect(startTab?.disabledTipLinkKey).toBe('startNodesDocs')
expect(result.current.activeTab).toBe(TabsEnum.Blocks)
expect(result.current.initialTab).toBe(TabType.Blocks)
})
it('keeps the start tab enabled when forcing it on and resets to a valid tab after disabling blocks', () => {
const props: Parameters<typeof useTabs>[0] = {
noBlocks: false,
noStart: false,
forceEnableStartTab: true,
}
it('chooses the enabled start panel when blocks, sources, and tools are unavailable', () => {
const { result } = renderHook(() =>
useTabs({
noBlocks: true,
noSources: true,
noTools: true,
noStart: false,
forceEnableStartTab: true,
}),
)
const { result, rerender } = renderHook((nextProps) => useTabs(nextProps), {
initialProps: props,
})
expect(result.current.tabs.find((tab) => tab.key === TabsEnum.Start)?.disabled).toBeFalsy()
act(() => {
result.current.setActiveTab(TabsEnum.Blocks)
})
rerender({
...props,
noBlocks: true,
noSources: true,
noTools: true,
})
expect(result.current.activeTab).toBe(TabsEnum.Start)
expect(result.current.tabs.find((tab) => tab.key === TabType.Start)?.disabled).toBeFalsy()
expect(result.current.initialTab).toBe(TabType.Start)
})
it('returns the MCP tab only when it is not hidden', () => {
const { result: visible } = renderHook(() => useToolTabs())
const { result: hidden } = renderHook(() => useToolTabs(true))
expect(visible.current.some((tab) => tab.key === ToolTypeEnum.MCP)).toBe(true)
expect(hidden.current.some((tab) => tab.key === ToolTypeEnum.MCP)).toBe(false)
expect(visible.current.some((tab) => tab.key === ToolType.MCP)).toBe(true)
expect(hidden.current.some((tab) => tab.key === ToolType.MCP)).toBe(false)
})
it('includes the snippets tab by default', () => {
const { result } = renderHook(() => useTabs({}))
expect(result.current.tabs.some((tab) => tab.key === TabsEnum.Snippets)).toBe(true)
expect(result.current.tabs.some((tab) => tab.key === TabType.Snippets)).toBe(true)
})
it('hides the snippets tab and falls back when snippets are disabled', () => {
const { result } = renderHook(() =>
useTabs({
defaultActiveTab: TabsEnum.Snippets,
defaultActiveTab: TabType.Snippets,
noSnippets: true,
}),
)
expect(result.current.tabs.some((tab) => tab.key === TabsEnum.Snippets)).toBe(false)
expect(result.current.activeTab).toBe(TabsEnum.Blocks)
})
it('resets the active tab to the current default tab', () => {
const { result } = renderHook(() =>
useTabs({
noStart: false,
}),
)
act(() => {
result.current.setActiveTab(TabsEnum.Start)
})
expect(result.current.activeTab).toBe(TabsEnum.Start)
act(() => {
result.current.resetActiveTab()
})
expect(result.current.activeTab).toBe(TabsEnum.Blocks)
expect(result.current.tabs.some((tab) => tab.key === TabType.Snippets)).toBe(false)
expect(result.current.initialTab).toBe(TabType.Blocks)
})
})

4
web/app/components/workflow/block-selector/__tests__/index.spec.tsx
View File

@ -3,7 +3,7 @@ import { screen } from '@testing-library/react'
import { renderWorkflowComponent } from '../../__tests__/workflow-test-env'
import { BlockEnum } from '../../types'
import NodeSelectorWrapper from '../index'
import { BlockClassificationEnum } from '../types'
import { BlockClassification } from '../types'
vi.mock('reactflow', async () =>
(await import('../../__tests__/reactflow-mock-state')).createReactFlowModuleMock(),
@ -29,7 +29,7 @@ const createBlock = (type: BlockEnum, title: string): NodeDefault => ({
type,
title,
sort: 0,
classification: BlockClassificationEnum.Default,
classification: BlockClassification.Default,
author: 'Dify',
description: `${title} description`,
},

69
web/app/components/workflow/block-selector/__tests__/main.spec.tsx
View File

@ -7,7 +7,7 @@ import { FlowType } from '@/types/common'
import { renderWorkflowComponent } from '../../__tests__/workflow-test-env'
import { BlockEnum } from '../../types'
import NodeSelector from '../main'
import { BlockClassificationEnum, TabsEnum } from '../types'
import { BlockClassification, TabType } from '../types'
vi.mock('reactflow', () => ({
useStoreApi: () => ({
@ -50,7 +50,7 @@ vi.mock('@/service/use-tools', () => ({
const createBlock = (type: BlockEnum, title: string): NodeDefault => ({
metaData: {
classification: BlockClassificationEnum.Default,
classification: BlockClassification.Default,
sort: 0,
type,
title,
@ -153,6 +153,63 @@ describe('NodeSelector', () => {
expect(screen.getByPlaceholderText('workflow.tabs.searchBlock')).toBeInTheDocument()
})
it('preserves the current popup session until a controlled close actually unmounts it', async () => {
const user = userEvent.setup()
const onOpenChange = vi.fn()
renderNodeSelector(
<NodeSelector
open
onOpenChange={onOpenChange}
onSelect={vi.fn()}
blocks={[createBlock(BlockEnum.LLM, 'LLM')]}
availableBlocksTypes={[BlockEnum.LLM, BlockEnum.Start]}
showStartTab
trigger={() => <button type="button">selector-open</button>}
/>,
)
await user.click(screen.getByRole('tab', { name: 'workflow.tabs.start' }))
const searchInput = screen.getByPlaceholderText('workflow.tabs.searchTrigger')
await user.type(searchInput, 'webhook')
await user.click(screen.getByRole('button', { name: 'selector-open' }))
expect(onOpenChange).toHaveBeenCalledWith(false)
expect(screen.getByRole('tab', { name: 'workflow.tabs.start' })).toHaveAttribute(
'aria-selected',
'true',
)
expect(searchInput).toHaveValue('webhook')
})
it('focuses the search input on open and keeps focus on a tab when it is activated', async () => {
const user = userEvent.setup()
renderNodeSelector(
<NodeSelector
onSelect={vi.fn()}
blocks={[createBlock(BlockEnum.LLM, 'LLM')]}
availableBlocksTypes={[BlockEnum.LLM, BlockEnum.Start]}
showStartTab
trigger={(open) => (
<button type="button">{open ? 'selector-open' : 'selector-closed'}</button>
)}
/>,
)
await user.click(screen.getByRole('button', { name: 'selector-closed' }))
expect(screen.getByPlaceholderText('workflow.tabs.searchBlock')).toHaveFocus()
await waitFor(() => {
expect(screen.getByRole('dialog').parentElement).toHaveStyle({ position: 'fixed' })
})
const startTab = screen.getByRole('tab', { name: 'workflow.tabs.start' })
await user.click(startTab)
expect(startTab).toHaveFocus()
expect(screen.getByPlaceholderText('workflow.tabs.searchTrigger')).not.toHaveFocus()
})
it('does not open or emit open changes when disabled', async () => {
const user = userEvent.setup()
const onOpenChange = vi.fn()
@ -307,7 +364,7 @@ describe('NodeSelector', () => {
blocks={[createBlock(BlockEnum.LLM, 'LLM')]}
availableBlocksTypes={[BlockEnum.LLM, BlockEnum.Start]}
showStartTab
defaultActiveTab={TabsEnum.Start}
defaultActiveTab={TabType.Start}
/>,
{
initialStoreState: {
@ -328,9 +385,7 @@ describe('NodeSelector', () => {
expect(
await screen.findByText('workflow.tabs.unconfiguredStartDisabledTip'),
).toBeInTheDocument()
expect(
screen.getByRole('link', { name: 'workflow.tabs.startDisabledTipLearnMore' }),
).toHaveAttribute('href', 'https://docs.dify.ai/en/self-host/use-dify/nodes/trigger/overview')
expect(screen.queryByRole('link')).not.toBeInTheDocument()
expect(screen.getByPlaceholderText('workflow.tabs.searchBlock')).toBeInTheDocument()
})
@ -342,7 +397,7 @@ describe('NodeSelector', () => {
blocks={[createBlock(BlockEnum.LLM, 'LLM')]}
availableBlocksTypes={[BlockEnum.LLM, BlockEnum.Start, BlockEnum.TriggerPlugin]}
showStartTab
defaultActiveTab={TabsEnum.Start}
defaultActiveTab={TabType.Start}
/>,
{
initialStoreState: {

8
web/app/components/workflow/block-selector/__tests__/start-blocks.spec.tsx
View File

@ -50,12 +50,16 @@ describe('StartBlocks', () => {
/>,
)
expect(screen.getByText('workflow.blocks.start')).toBeInTheDocument()
const userInputButton = screen.getByRole('button', { name: 'workflow.blocks.start' })
expect(userInputButton).toBeInTheDocument()
expect(userInputButton).toHaveAccessibleDescription(
'workflow.nodes.start.userInputTipDescription',
)
expect(screen.getByText('workflow.blocks.trigger-webhook')).toBeInTheDocument()
expect(screen.getByText('workflow.blocks.originalStartNode')).toBeInTheDocument()
expect(onContentStateChange).toHaveBeenCalledWith(true)
await user.click(screen.getByText('workflow.blocks.start'))
await user.click(userInputButton)
expect(onSelect).toHaveBeenCalledWith(BlockEnum.Start)
})

126
web/app/components/workflow/block-selector/__tests__/tabs.spec.tsx
View File

@ -1,9 +1,9 @@
import { fireEvent, screen } from '@testing-library/react'
import { screen, waitFor } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import * as React from 'react'
import { renderWithSystemFeatures } from '@/__tests__/utils/mock-system-features'
import Tabs from '../tabs'
import { TabsEnum } from '../types'
import { SelectorContent } from '../tabs'
import { TabType } from '../types'
const render = (ui: React.ReactElement) =>
renderWithSystemFeatures(ui, { systemFeatures: { enable_marketplace: true } })
@ -60,15 +60,15 @@ vi.mock('../data-sources', () => ({
vi.mock('../all-tools', () => ({
default: (props: {
buildInTools: Array<{ icon: string | Record<string, string> }>
buildInTools: Array<{ icon: string | Record<string, string>; name: string }>
showFeatured: boolean
featuredLoading: boolean
onFeaturedInstallSuccess: () => Promise<void>
}) => (
<div>
tools-content
{props.buildInTools.map((tool, index) => (
<span key={index}>{typeof tool.icon === 'string' ? tool.icon : 'object-icon'}</span>
{props.buildInTools.map((tool) => (
<span key={tool.name}>{typeof tool.icon === 'string' ? tool.icon : 'object-icon'}</span>
))}
<span>{props.showFeatured ? 'featured-on' : 'featured-off'}</span>
<span>{props.featuredLoading ? 'featured-loading' : 'featured-idle'}</span>
@ -87,67 +87,112 @@ describe('Tabs', () => {
})
const baseProps = {
activeTab: TabsEnum.Start,
onActiveTabChange: vi.fn(),
searchText: '',
tags: [],
onTagsChange: vi.fn(),
defaultTab: TabType.Start,
searchInputRef: React.createRef<HTMLInputElement>(),
onSelect: vi.fn(),
onRequestClose: vi.fn(),
blocks: [],
tabs: [
{ key: TabsEnum.Start, name: 'Start' },
{ key: TabsEnum.Blocks, name: 'Blocks', disabled: true },
{ key: TabsEnum.Tools, name: 'Tools' },
{ key: TabType.Start, name: 'Start' },
{ key: TabType.Blocks, name: 'Blocks', disabled: true },
{ key: TabType.Tools, name: 'Tools' },
],
filterElem: <div>filter</div>,
}
it('should render start content and disabled tab tooltip text', async () => {
const user = userEvent.setup()
render(<Tabs {...baseProps} />)
render(<SelectorContent {...baseProps} />)
expect(screen.getByText('start-content'))!.toBeInTheDocument()
await user.hover(screen.getByText('Blocks'))
await user.hover(screen.getByRole('tab', { name: 'Blocks' }))
expect(await screen.findByText('workflow.tabs.startDisabledTip'))!.toBeInTheDocument()
})
it('should switch tabs through click handlers and render tools content with normalized icons', () => {
const onActiveTabChange = vi.fn()
it('should expose tab semantics and use manual keyboard activation', async () => {
const user = userEvent.setup()
render(<SelectorContent {...baseProps} />)
render(<Tabs {...baseProps} activeTab={TabsEnum.Tools} onActiveTabChange={onActiveTabChange} />)
const startTab = screen.getByRole('tab', { name: 'Start' })
const blocksTab = screen.getByRole('tab', { name: 'Blocks' })
const toolsTab = screen.getByRole('tab', { name: 'Tools' })
fireEvent.click(screen.getByText('Start'))
expect(screen.getByRole('tablist')).toBeInTheDocument()
expect(startTab).toHaveAttribute('aria-selected', 'true')
expect(blocksTab).toHaveAttribute('aria-disabled', 'true')
expect(screen.getByRole('tabpanel', { name: 'Start' })).toBeInTheDocument()
await user.click(startTab)
await user.keyboard('{ArrowRight}')
expect(blocksTab).toHaveFocus()
expect(startTab).toHaveAttribute('aria-selected', 'true')
await user.keyboard('{ArrowRight}')
expect(toolsTab).toHaveFocus()
expect(startTab).toHaveAttribute('aria-selected', 'true')
})
it('should sync normalized tools into workflow store state', () => {
render(<SelectorContent {...baseProps} defaultTab={TabType.Tools} />)
expect(onActiveTabChange).toHaveBeenCalledWith(TabsEnum.Start)
expect(screen.getByText('tools-content'))!.toBeInTheDocument()
expect(screen.getByText('/console/tool.svg'))!.toBeInTheDocument()
expect(screen.getByText('featured-on'))!.toBeInTheDocument()
expect(screen.getByText('featured-idle'))!.toBeInTheDocument()
})
it('should sync normalized tools into workflow store state', () => {
render(<Tabs {...baseProps} activeTab={TabsEnum.Tools} />)
expect(mockSetState).toHaveBeenCalled()
})
it('should ignore clicks on disabled and already active tabs', async () => {
const user = userEvent.setup()
const onActiveTabChange = vi.fn()
render(<SelectorContent {...baseProps} />)
render(<Tabs {...baseProps} activeTab={TabsEnum.Start} onActiveTabChange={onActiveTabChange} />)
const startTab = screen.getByRole('tab', { name: 'Start' })
await user.click(startTab)
await user.click(screen.getByRole('tab', { name: 'Blocks' }))
await user.click(screen.getByText('Start'))
await user.click(screen.getByText('Blocks'))
expect(startTab).toHaveAttribute('aria-selected', 'true')
})
expect(onActiveTabChange).not.toHaveBeenCalled()
it('should fall back to an available tab when the active tab is removed', async () => {
const user = userEvent.setup()
function Harness() {
const [tabs, setTabs] = React.useState(baseProps.tabs)
return (
<>
<button
type="button"
onClick={() =>
setTabs((currentTabs) => currentTabs.filter((tab) => tab.key !== TabType.Tools))
}
>
Remove tools
</button>
<SelectorContent {...baseProps} tabs={tabs} />
</>
)
}
render(<Harness />)
await user.click(screen.getByRole('tab', { name: 'Tools' }))
await waitFor(() => {
expect(screen.getByRole('tab', { name: 'Tools' })).toHaveAttribute('aria-selected', 'true')
})
await user.click(screen.getByRole('button', { name: 'Remove tools' }))
await waitFor(() => {
expect(screen.getByRole('tab', { name: 'Start' })).toHaveAttribute('aria-selected', 'true')
})
})
it('should render sources content when the sources tab is active and data sources are provided', () => {
render(
<Tabs
<SelectorContent
{...baseProps}
activeTab={TabsEnum.Sources}
defaultTab={TabType.Sources}
tabs={[...baseProps.tabs, { key: TabType.Sources, name: 'Sources' }]}
dataSources={[{ name: 'dataset', icon: '/dataset.svg' } as never]}
/>,
)
@ -158,7 +203,7 @@ describe('Tabs', () => {
it('should keep the previous workflow store state when tool references do not change', () => {
mockToolsState.buildInTools = [{ icon: '/console/already-prefixed.svg', name: 'tool' }]
render(<Tabs {...baseProps} activeTab={TabsEnum.Tools} />)
render(<SelectorContent {...baseProps} defaultTab={TabType.Tools} />)
const previousState = {
buildInTools: mockToolsState.buildInTools,
@ -179,7 +224,7 @@ describe('Tabs', () => {
mockToolsState.workflowTools = [{ icon: '/workflow.svg', name: 'workflow' }]
mockToolsState.mcpTools = [{ icon: '/mcp.svg', name: 'mcp' }]
render(<Tabs {...baseProps} activeTab={TabsEnum.Tools} />)
render(<SelectorContent {...baseProps} defaultTab={TabType.Tools} />)
expect(screen.getByText('object-icon'))!.toBeInTheDocument()
@ -213,7 +258,7 @@ describe('Tabs', () => {
it('should skip normalization when a tool list is undefined', () => {
mockToolsState.buildInTools = undefined
render(<Tabs {...baseProps} activeTab={TabsEnum.Tools} />)
render(<SelectorContent {...baseProps} defaultTab={TabType.Tools} />)
expect(screen.getByText('tools-content'))!.toBeInTheDocument()
})
@ -221,7 +266,7 @@ describe('Tabs', () => {
it('should force start content to render and invalidate built-in tools after featured installs', async () => {
const user = userEvent.setup()
render(<Tabs {...baseProps} activeTab={TabsEnum.Tools} />)
render(<SelectorContent {...baseProps} defaultTab={TabType.Tools} />)
await user.click(screen.getByRole('button', { name: 'Install featured tool' }))
@ -229,9 +274,10 @@ describe('Tabs', () => {
expect(mockInvalidateBuiltInTools).toHaveBeenCalledTimes(1)
})
it('should render start content when blocks are hidden but forceShowStartContent is enabled', () => {
render(<Tabs {...baseProps} activeTab={TabsEnum.Start} noBlocks forceShowStartContent />)
it('should compose start content directly without tab semantics in standalone mode', () => {
render(<SelectorContent {...baseProps} standalonePanel={TabType.Start} />)
expect(screen.getByText('start-content'))!.toBeInTheDocument()
expect(screen.queryByRole('tablist')).not.toBeInTheDocument()
})
})

48
web/app/components/workflow/block-selector/all-tools.tsx
View File

@ -1,4 +1,4 @@
import type { Dispatch, RefObject, SetStateAction } from 'react'
import type { RefObject } from 'react'
import type { Plugin } from '../../plugins/types'
import type { BlockEnum, ToolWithProvider } from '../types'
import type { ToolDefaultValue, ToolValue } from './types'
@ -24,9 +24,9 @@ import { useMarketplacePlugins } from '../../plugins/marketplace/hooks'
import { PluginCategoryEnum } from '../../plugins/types'
import FeaturedTools from './featured-tools'
import { useToolTabs } from './hooks'
import RAGToolRecommendations from './rag-tool-recommendations'
import { RAGToolRecommendations } from './rag-tool-recommendations'
import Tools from './tools'
import { ToolTypeEnum } from './types'
import { ToolType } from './types'
import ViewTypeSelect, { ViewType } from './view-type-select'
const marketplaceFooterClassName =
@ -45,7 +45,7 @@ type AllToolsProps = {
canNotSelectMultiple?: boolean
onSelectMultiple?: (type: BlockEnum, tools: ToolDefaultValue[]) => void
selectedTools?: ToolValue[]
onTagsChange?: Dispatch<SetStateAction<string[]>>
onTagsChange?: (tags: string[]) => void
isInRAGPipeline?: boolean
featuredPlugins?: Plugin[]
featuredLoading?: boolean
@ -78,12 +78,16 @@ const AllTools = ({
const { t } = useTranslation()
const language = useGetLanguage()
const tabs = useToolTabs()
const [activeTab, setActiveTab] = useState(ToolTypeEnum.All)
const [activeTab, setActiveTab] = useState<ToolType>(ToolType.All)
const [activeView, setActiveView] = useState<ViewType>(ViewType.flat)
const trimmedSearchText = searchText.trim()
const hasSearchText = trimmedSearchText.length > 0
const hasTags = tags.length > 0
const hasFilter = hasSearchText || hasTags
const handleLoadMoreRAGTools = () => {
if (!onTagsChange || tags.includes('rag')) return
onTagsChange([...tags, 'rag'])
}
const isMatchingKeywords = (text: string, keywords: string) => {
return text.toLowerCase().includes(keywords.toLowerCase())
}
@ -101,12 +105,12 @@ const AllTools = ({
}, [allProviders])
const tools = useMemo(() => {
let mergedTools: ToolWithProvider[] = []
if (activeTab === ToolTypeEnum.All)
if (activeTab === ToolType.All)
mergedTools = [...buildInTools, ...customTools, ...workflowTools, ...mcpTools]
if (activeTab === ToolTypeEnum.BuiltIn) mergedTools = buildInTools
if (activeTab === ToolTypeEnum.Custom) mergedTools = customTools
if (activeTab === ToolTypeEnum.Workflow) mergedTools = workflowTools
if (activeTab === ToolTypeEnum.MCP) mergedTools = mcpTools
if (activeTab === ToolType.BuiltIn) mergedTools = buildInTools
if (activeTab === ToolType.Custom) mergedTools = customTools
if (activeTab === ToolType.Workflow) mergedTools = workflowTools
if (activeTab === ToolType.MCP) mergedTools = mcpTools
const normalizedSearch = trimmedSearchText.toLowerCase()
const getLocalizedText = (text?: Record<string, string> | null) => {
@ -182,9 +186,9 @@ const AllTools = ({
const pluginRef = useRef<ListRef>(null)
const wrapElemRef = useRef<HTMLDivElement>(null)
const isSupportGroupView = [ToolTypeEnum.All, ToolTypeEnum.BuiltIn].includes(activeTab)
const isSupportGroupView = activeTab === ToolType.All || activeTab === ToolType.BuiltIn
const isShowRAGRecommendations = isInRAGPipeline && activeTab === ToolTypeEnum.All && !hasFilter
const isShowRAGRecommendations = isInRAGPipeline && activeTab === ToolType.All && !hasFilter
const hasToolsListContent = tools.length > 0 || isShowRAGRecommendations
const hasPluginContent = enable_marketplace && notInstalledPlugins.length > 0
const shouldShowEmptyState = hasFilter && !hasToolsListContent && !hasPluginContent
@ -192,7 +196,7 @@ const AllTools = ({
showFeatured &&
enable_marketplace &&
!isInRAGPipeline &&
activeTab === ToolTypeEnum.All &&
activeTab === ToolType.All &&
!hasFilter
const shouldShowMarketplaceFooter = enable_marketplace && !hasFilter
@ -204,10 +208,10 @@ const AllTools = ({
[onSelect],
)
const toolsListTitle = useMemo(() => {
if (activeTab === ToolTypeEnum.BuiltIn) return t(($) => $.allToolPlugins, { ns: 'tools' })
if (activeTab === ToolTypeEnum.Custom) return t(($) => $.allSwaggerAPIAsTool, { ns: 'tools' })
if (activeTab === ToolTypeEnum.Workflow) return t(($) => $.allWorkflowAsTool, { ns: 'tools' })
if (activeTab === ToolTypeEnum.MCP) return t(($) => $.allMCP, { ns: 'tools' })
if (activeTab === ToolType.BuiltIn) return t(($) => $.allToolPlugins, { ns: 'tools' })
if (activeTab === ToolType.Custom) return t(($) => $.allSwaggerAPIAsTool, { ns: 'tools' })
if (activeTab === ToolType.Workflow) return t(($) => $.allWorkflowAsTool, { ns: 'tools' })
if (activeTab === ToolType.MCP) return t(($) => $.allMCP, { ns: 'tools' })
return t(($) => $.allTools, { ns: 'tools' })
}, [activeTab, t])
@ -216,17 +220,19 @@ const AllTools = ({
<div className="flex items-center justify-between border-b border-divider-subtle px-3">
<div className="flex h-8 items-center space-x-1">
{tabs.map((tab) => (
<div
<button
type="button"
className={cn(
'flex h-6 cursor-pointer items-center rounded-md px-2 hover:bg-state-base-hover',
'flex h-6 cursor-pointer items-center rounded-md border-0 bg-transparent px-2 hover:bg-state-base-hover focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden',
'text-xs font-medium text-text-secondary',
activeTab === tab.key && 'bg-state-base-hover-alt',
)}
key={tab.key}
aria-pressed={activeTab === tab.key}
onClick={() => setActiveTab(tab.key)}
>
{tab.name}
</div>
</button>
))}
</div>
{isSupportGroupView && <ViewTypeSelect viewType={activeView} onChange={setActiveView} />}
@ -242,7 +248,7 @@ const AllTools = ({
<RAGToolRecommendations
viewType={isSupportGroupView ? activeView : ViewType.flat}
onSelect={handleRAGSelect}
onTagsChange={onTagsChange}
onLoadMore={handleLoadMoreRAGTools}
/>
)}
{shouldShowFeatured && (

86
web/app/components/workflow/block-selector/blocks.tsx
View File

@ -1,13 +1,12 @@
import type { NodeDefault, OnSelectBlock } from '../types'
import type { BlockClassificationEnum } from './types'
import type { BlockClassification } from './types'
import {
createPreviewCardHandle,
PreviewCard,
PreviewCardContent,
PreviewCardTrigger,
} from '@langgenius/dify-ui/preview-card'
import { groupBy } from 'es-toolkit/compat'
import { memo, useCallback, useMemo } from 'react'
import { Fragment, memo, useCallback, useId, useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import { useStoreApi } from 'reactflow'
import Badge from '@/app/components/base/badge'
@ -16,6 +15,7 @@ import { BlockEnum } from '../types'
import { AgentBlockItem } from './agent-selector'
import { BLOCK_CLASSIFICATIONS } from './constants'
import { useBlocks } from './hooks'
import { BlockSelectorPreviewCardContent } from './preview-card'
type BlocksProps = {
searchText: string
@ -37,6 +37,7 @@ const Blocks = ({
const store = useStoreApi()
const blocksFromHooks = useBlocks()
const previewCardHandle = useMemo(() => createPreviewCardHandle<BlockPreviewPayload>(), [])
const previewDescriptionBaseId = useId()
// Use external blocks if provided, otherwise fallback to hook-based blocks
const blocks =
@ -89,7 +90,7 @@ const Blocks = ({
const isEmpty = Object.values(groups).every((list) => !list.length)
const renderGroup = useCallback(
(classification: BlockClassificationEnum) => {
(classification: BlockClassification) => {
const list = [...groups[classification]!].sort((a, b) => {
if (a.metaData.type === BlockEnum.AgentV2) return -1
if (b.metaData.type === BlockEnum.AgentV2) return 1
@ -139,38 +140,49 @@ const Blocks = ({
)
}
const previewDescriptionId = block.metaData.description
? `${previewDescriptionBaseId}-${block.metaData.type}`
: undefined
return (
<PreviewCardTrigger
key={block.metaData.type}
delay={150}
closeDelay={150}
handle={previewCardHandle}
payload={{ block }}
render={
<button
type="button"
className="flex h-8 w-full cursor-pointer items-center rounded-lg px-3 text-left hover:bg-state-base-hover focus-visible:bg-state-base-hover focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden"
onClick={() => onSelect(block.metaData.type)}
>
<BlockIcon className="mr-2 shrink-0" type={block.metaData.type} />
<span className="min-w-0 grow truncate text-sm text-text-secondary">
{block.metaData.title}
</span>
{block.metaData.type === BlockEnum.LoopEnd && (
<Badge
text={t(($) => $['nodes.loop.loopNode'], { ns: 'workflow' })}
className="ml-2 shrink-0"
/>
)}
</button>
}
/>
<Fragment key={block.metaData.type}>
<PreviewCardTrigger
delay={150}
closeDelay={150}
handle={previewCardHandle}
payload={{ block }}
render={
<button
type="button"
aria-describedby={previewDescriptionId}
className="flex h-8 w-full cursor-pointer items-center rounded-lg px-3 text-left hover:bg-state-base-hover focus-visible:bg-state-base-hover focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden"
onClick={() => onSelect(block.metaData.type)}
>
<BlockIcon className="mr-2 shrink-0" type={block.metaData.type} />
<span className="min-w-0 grow truncate text-sm text-text-secondary">
{block.metaData.title}
</span>
{block.metaData.type === BlockEnum.LoopEnd && (
<Badge
text={t(($) => $['nodes.loop.loopNode'], { ns: 'workflow' })}
className="ml-2 shrink-0"
/>
)}
</button>
}
/>
{previewDescriptionId && (
<span id={previewDescriptionId} className="sr-only">
{block.metaData.description}
</span>
)}
</Fragment>
)
})}
</div>
)
},
[groups, onSelect, previewCardHandle, t, store],
[groups, onSelect, previewCardHandle, previewDescriptionBaseId, t, store],
)
return (
@ -198,15 +210,13 @@ function BlockPreviewCard({ payload }: BlockPreviewCardProps) {
const { block } = payload
return (
<PreviewCardContent placement="right" popupClassName="w-[200px] border-none px-3 py-2">
<div>
<BlockIcon size="md" className="mb-2" type={block.metaData.type} />
<div className="mb-1 system-md-medium text-text-primary">{block.metaData.title}</div>
<div className="system-xs-regular wrap-break-word text-text-tertiary">
{block.metaData.description}
</div>
<BlockSelectorPreviewCardContent>
<BlockIcon size="md" className="mb-2" type={block.metaData.type} />
<div className="mb-1 system-md-medium text-text-primary">{block.metaData.title}</div>
<div className="system-xs-regular wrap-break-word text-text-tertiary">
{block.metaData.description}
</div>
</PreviewCardContent>
</BlockSelectorPreviewCardContent>
)
}

56
web/app/components/workflow/block-selector/constants.tsx
View File

@ -1,13 +1,13 @@
import type { Block } from '../types'
import { BlockEnum } from '../types'
import { BlockClassificationEnum } from './types'
import { BlockClassification } from './types'
export const BLOCK_CLASSIFICATIONS = [
BlockClassificationEnum.Default,
BlockClassificationEnum.QuestionUnderstand,
BlockClassificationEnum.Logic,
BlockClassificationEnum.Transform,
BlockClassificationEnum.Utilities,
BlockClassification.Default,
BlockClassification.QuestionUnderstand,
BlockClassification.Logic,
BlockClassification.Transform,
BlockClassification.Utilities,
] as const
export const DEFAULT_FILE_EXTENSIONS_IN_LOCAL_FILE_DATA_SOURCE = [
@ -34,19 +34,19 @@ export const DEFAULT_FILE_EXTENSIONS_IN_LOCAL_FILE_DATA_SOURCE = [
export const START_BLOCKS = [
{
classification: BlockClassificationEnum.Default,
classification: BlockClassification.Default,
type: BlockEnum.Start,
title: 'User Input',
description: 'Traditional start node for user input',
},
{
classification: BlockClassificationEnum.Default,
classification: BlockClassification.Default,
type: BlockEnum.TriggerSchedule,
title: 'Schedule Trigger',
description: 'Time-based workflow trigger',
},
{
classification: BlockClassificationEnum.Default,
classification: BlockClassification.Default,
type: BlockEnum.TriggerWebhook,
title: 'Webhook Trigger',
description: 'HTTP callback trigger',
@ -62,98 +62,98 @@ export const ENTRY_NODE_TYPES = [
export const BLOCKS = [
{
classification: BlockClassificationEnum.Default,
classification: BlockClassification.Default,
type: BlockEnum.Agent,
title: 'Agent',
},
{
classification: BlockClassificationEnum.Default,
classification: BlockClassification.Default,
type: BlockEnum.AgentV2,
title: 'Agent',
},
{
classification: BlockClassificationEnum.Default,
classification: BlockClassification.Default,
type: BlockEnum.LLM,
title: 'LLM',
},
{
classification: BlockClassificationEnum.Default,
classification: BlockClassification.Default,
type: BlockEnum.KnowledgeRetrieval,
title: 'Knowledge Retrieval',
},
{
classification: BlockClassificationEnum.Default,
classification: BlockClassification.Default,
type: BlockEnum.End,
title: 'End',
},
{
classification: BlockClassificationEnum.Default,
classification: BlockClassification.Default,
type: BlockEnum.Answer,
title: 'Direct Answer',
},
{
classification: BlockClassificationEnum.QuestionUnderstand,
classification: BlockClassification.QuestionUnderstand,
type: BlockEnum.QuestionClassifier,
title: 'Question Classifier',
},
{
classification: BlockClassificationEnum.Logic,
classification: BlockClassification.Logic,
type: BlockEnum.IfElse,
title: 'IF/ELSE',
},
{
classification: BlockClassificationEnum.Logic,
classification: BlockClassification.Logic,
type: BlockEnum.LoopEnd,
title: 'Exit Loop',
description: '',
},
{
classification: BlockClassificationEnum.Logic,
classification: BlockClassification.Logic,
type: BlockEnum.Iteration,
title: 'Iteration',
},
{
classification: BlockClassificationEnum.Logic,
classification: BlockClassification.Logic,
type: BlockEnum.Loop,
title: 'Loop',
},
{
classification: BlockClassificationEnum.Transform,
classification: BlockClassification.Transform,
type: BlockEnum.Code,
title: 'Code',
},
{
classification: BlockClassificationEnum.Transform,
classification: BlockClassification.Transform,
type: BlockEnum.TemplateTransform,
title: 'Templating Transform',
},
{
classification: BlockClassificationEnum.Transform,
classification: BlockClassification.Transform,
type: BlockEnum.VariableAggregator,
title: 'Variable Aggregator',
},
{
classification: BlockClassificationEnum.Transform,
classification: BlockClassification.Transform,
type: BlockEnum.DocExtractor,
title: 'Doc Extractor',
},
{
classification: BlockClassificationEnum.Transform,
classification: BlockClassification.Transform,
type: BlockEnum.Assigner,
title: 'Variable Assigner',
},
{
classification: BlockClassificationEnum.Transform,
classification: BlockClassification.Transform,
type: BlockEnum.ParameterExtractor,
title: 'Parameter Extractor',
},
{
classification: BlockClassificationEnum.Utilities,
classification: BlockClassification.Utilities,
type: BlockEnum.HttpRequest,
title: 'HTTP Request',
},
{
classification: BlockClassificationEnum.Utilities,
classification: BlockClassification.Utilities,
type: BlockEnum.ListFilter,
title: 'List Filter',
},

323
web/app/components/workflow/block-selector/featured-tools.tsx
View File

@ -5,10 +5,10 @@ import type { ToolDefaultValue, ToolValue } from './types'
import type { Plugin } from '@/app/components/plugins/types'
import type { Locale } from '@/i18n-config'
import { cn } from '@langgenius/dify-ui/cn'
import { Collapsible, CollapsiblePanel, CollapsibleTrigger } from '@langgenius/dify-ui/collapsible'
import {
createPreviewCardHandle,
PreviewCard,
PreviewCardContent,
PreviewCardTrigger,
} from '@langgenius/dify-ui/preview-card'
import { useEffect, useMemo, useState } from 'react'
@ -23,11 +23,14 @@ import { useFeaturedToolsCollapsed } from '@/app/components/workflow/block-selec
import { useGetLanguage } from '@/context/i18n'
import Link from '@/next/link'
import { formatNumber } from '@/utils/format'
import { getMarketplaceUrl } from '@/utils/var'
import { PluginCategoryEnum } from '../../plugins/types'
import BlockIcon from '../block-icon'
import { BlockEnum } from '../types'
import { BlockSelectorRow } from './block-selector-row'
import { BlockSelectorPreviewCardContent } from './preview-card'
import Tools from './tools'
import { ToolTypeEnum } from './types'
import { ToolType } from './types'
import { ViewType } from './view-type-select'
const MAX_RECOMMENDED_COUNT = 15
@ -117,113 +120,118 @@ const FeaturedTools = ({
const showEmptyState = !isLoading && totalVisible === 0
return (
<div className="px-3 pt-2 pb-3">
<button
type="button"
className="flex w-full items-center rounded-md px-0 py-1 text-left text-text-primary"
onClick={() => setIsCollapsed((prev) => !prev)}
>
<Collapsible
className="px-3 pt-2 pb-3"
open={!isCollapsed}
onOpenChange={(open) => setIsCollapsed(!open)}
>
<CollapsibleTrigger className="min-h-0 justify-start gap-0 rounded-md px-0 py-1 hover:not-data-disabled:bg-transparent">
<span className="system-xs-medium text-text-primary">
{t(($) => $['tabs.featuredTools'], { ns: 'workflow' })}
</span>
<span
className={cn(
'i-custom-vender-solid-arrows-arrow-down-round-fill',
'ml-0.5 size-4 text-text-tertiary transition-transform',
isCollapsed ? '-rotate-90' : 'rotate-0',
)}
aria-hidden
className="ml-0.5 i-custom-vender-solid-arrows-arrow-down-round-fill size-4 -rotate-90 text-text-tertiary transition-transform group-data-panel-open:rotate-0 motion-reduce:transition-none"
/>
</button>
</CollapsibleTrigger>
{!isCollapsed && (
<>
{isLoading && (
<div className="py-3">
<Loading type="app" />
</div>
)}
<CollapsiblePanel>
{isLoading && (
<div className="py-3">
<Loading type="app" />
</div>
)}
{showEmptyState && (
<p className="py-2 system-xs-regular text-text-tertiary">
<Link
className="text-text-accent"
href={getMarketplaceCategoryUrl(PluginCategoryEnum.tool)}
target="_blank"
rel="noopener noreferrer"
>
{t(($) => $['tabs.noFeaturedPlugins'], { ns: 'workflow' })}
</Link>
</p>
)}
{showEmptyState && (
<p className="py-2 system-xs-regular text-text-tertiary">
<Link
className="text-text-accent"
href={getMarketplaceCategoryUrl(PluginCategoryEnum.tool)}
target="_blank"
rel="noopener noreferrer"
>
{t(($) => $['tabs.noFeaturedPlugins'], { ns: 'workflow' })}
</Link>
</p>
)}
{!showEmptyState && !isLoading && (
<>
{visibleInstalledProviders.length > 0 && (
<Tools
className="p-0"
tools={visibleInstalledProviders}
onSelect={onSelect}
canNotSelectMultiple
toolType={ToolTypeEnum.All}
viewType={ViewType.flat}
hasSearchText={false}
selectedTools={selectedTools}
{!showEmptyState && !isLoading && (
<>
{visibleInstalledProviders.length > 0 && (
<Tools
className="p-0"
tools={visibleInstalledProviders}
onSelect={onSelect}
canNotSelectMultiple
toolType={ToolType.All}
viewType={ViewType.flat}
hasSearchText={false}
selectedTools={selectedTools}
/>
)}
{visibleUninstalledPlugins.length > 0 && (
<div className="mt-1 flex flex-col gap-1">
{visibleUninstalledPlugins.map((plugin) => (
<FeaturedToolUninstalledItem
key={plugin.plugin_id}
plugin={plugin}
language={language}
previewCardHandle={previewCardHandle}
onInstallSuccess={async () => {
await onInstallSuccess?.()
}}
t={t}
/>
))}
</div>
)}
</>
)}
{!isLoading && totalVisible > 0 && canToggleVisibility && (
<button
type="button"
className="group mt-1 flex w-full cursor-pointer touch-manipulation items-center gap-x-2 rounded-lg border-0 bg-transparent py-1 pr-2 pl-3 text-left text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary focus-visible:inset-ring-2 focus-visible:inset-ring-state-accent-solid focus-visible:outline-hidden"
onClick={() => {
setVisibleCount((count) => {
if (count >= maxAvailable) return INITIAL_VISIBLE_COUNT
return Math.min(count + INITIAL_VISIBLE_COUNT, maxAvailable)
})
}}
>
<div className="flex items-center px-1 text-text-tertiary group-hover:text-text-secondary group-focus-visible:text-text-secondary">
<span
aria-hidden
className="i-ri-more-line size-4 group-hover:hidden group-focus-visible:hidden"
/>
{isExpanded ? (
<span
aria-hidden
className="i-custom-vender-solid-arrows-arrow-up-double-line hidden size-4 group-hover:block group-focus-visible:block"
/>
) : (
<span
aria-hidden
className="i-custom-vender-solid-arrows-arrow-down-double-line hidden size-4 group-hover:block group-focus-visible:block"
/>
)}
{visibleUninstalledPlugins.length > 0 && (
<div className="mt-1 flex flex-col gap-1">
{visibleUninstalledPlugins.map((plugin) => (
<FeaturedToolUninstalledItem
key={plugin.plugin_id}
plugin={plugin}
language={language}
previewCardHandle={previewCardHandle}
onInstallSuccess={async () => {
await onInstallSuccess?.()
}}
t={t}
/>
))}
</div>
)}
</>
)}
{!isLoading && totalVisible > 0 && canToggleVisibility && (
<div
className="group mt-1 flex cursor-pointer items-center gap-x-2 rounded-lg py-1 pr-2 pl-3 text-text-tertiary transition-colors hover:bg-state-base-hover hover:text-text-secondary"
onClick={() => {
setVisibleCount((count) => {
if (count >= maxAvailable) return INITIAL_VISIBLE_COUNT
return Math.min(count + INITIAL_VISIBLE_COUNT, maxAvailable)
})
}}
>
<div className="flex items-center px-1 text-text-tertiary transition-colors group-hover:text-text-secondary">
<span className="i-ri-more-line size-4 group-hover:hidden" />
{isExpanded ? (
<span className="i-custom-vender-solid-arrows-arrow-up-double-line hidden size-4 group-hover:block" />
) : (
<span className="i-custom-vender-solid-arrows-arrow-down-double-line hidden size-4 group-hover:block" />
)}
</div>
<div className="system-xs-regular">
{t(($) => $[isExpanded ? 'tabs.showLessFeatured' : 'tabs.showMoreFeatured'], {
ns: 'workflow',
})}
</div>
</div>
)}
</>
)}
<div className="system-xs-regular">
{t(($) => $[isExpanded ? 'tabs.showLessFeatured' : 'tabs.showMoreFeatured'], {
ns: 'workflow',
})}
</div>
</button>
)}
</CollapsiblePanel>
<PreviewCard handle={previewCardHandle}>
{({ payload }) => (
<FeaturedToolPreviewCard payload={payload as FeaturedToolPreviewPayload | undefined} />
)}
</PreviewCard>
</div>
</Collapsible>
)
}
@ -266,63 +274,77 @@ function FeaturedToolUninstalledItem({
}
}, [actionOpen])
const row = (
<div className="group flex h-8 w-full items-center rounded-lg pr-1 pl-3 hover:bg-state-base-hover">
<div className="flex h-full min-w-0 items-center">
const detailsLink = (
<Link
className="flex h-full min-w-0 flex-1 items-center rounded-lg focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden"
href={getMarketplaceUrl(`/plugins/${plugin.org}/${plugin.name}`)}
target="_blank"
rel="noopener noreferrer"
>
<div className="flex min-w-0 items-center">
<BlockIcon type={BlockEnum.Tool} toolIcon={plugin.icon} />
<div className="ml-2 min-w-0">
<div className="truncate system-sm-medium text-text-secondary">{label}</div>
</div>
</div>
<div className="ml-auto flex h-full items-center gap-1 pl-1">
<span
className={`system-xs-regular text-text-tertiary ${actionOpen ? 'hidden' : 'group-hover:hidden'}`}
>
{installCountLabel}
</span>
<div
className={`flex h-full items-center gap-1 system-xs-medium text-components-button-secondary-accent-text [&_.action-btn]:size-6 [&_.action-btn]:min-h-0 [&_.action-btn]:rounded-lg [&_.action-btn]:p-0 ${actionOpen ? '' : 'hidden group-hover:flex'}`}
>
{canInstallPlugin && (
<button
type="button"
className="cursor-pointer rounded-md px-1.5 py-0.5 hover:bg-state-base-hover"
onClick={() => {
setActionOpen(false)
setIsInstallModalOpen(true)
}}
>
{t(($) => $.installAction, { ns: 'plugin' })}
</button>
)}
<Action
open={actionOpen}
onOpenChange={setActionOpen}
author={plugin.org}
name={plugin.name}
version={plugin.latest_version}
/>
</div>
</div>
</div>
</Link>
)
return (
<>
{description ? (
// Preview is supplementary: icon / label / brief are all reachable from
// the InstallFromMarketplace modal that opens on click, so hover/focus-only
// activation is a11y-safe. See packages/dify-ui/AGENTS.md → Overlay Primitive Selection.
<PreviewCardTrigger
delay={150}
closeDelay={150}
handle={previewCardHandle}
payload={{ plugin, label, description }}
render={row}
/>
) : (
row
)}
<BlockSelectorRow as="div" className="group pr-1 focus-within:bg-state-base-hover">
{description ? (
<PreviewCardTrigger
delay={150}
closeDelay={150}
handle={previewCardHandle}
payload={{ plugin, label, description }}
render={detailsLink}
/>
) : (
detailsLink
)}
<div className="relative ml-auto flex h-full items-center pl-1">
<span
className={cn(
'system-xs-regular text-text-tertiary',
actionOpen
? 'hidden'
: 'group-focus-within:hidden group-hover:hidden [@media(hover:none)]:hidden',
)}
>
{installCountLabel}
</span>
<div
className={cn(
'absolute right-0 flex h-full items-center gap-1 system-xs-medium text-components-button-secondary-accent-text opacity-0 transition-opacity motion-reduce:transition-none [&_.action-btn]:size-6 [&_.action-btn]:min-h-0 [&_.action-btn]:rounded-lg [&_.action-btn]:p-0',
actionOpen
? 'pointer-events-auto opacity-100'
: 'pointer-events-none group-focus-within:pointer-events-auto group-focus-within:opacity-100 group-hover:pointer-events-auto group-hover:opacity-100 [@media(hover:none)]:pointer-events-auto [@media(hover:none)]:opacity-100',
)}
>
{canInstallPlugin && (
<button
type="button"
className="cursor-pointer rounded-md px-1.5 py-0.5 hover:bg-state-base-hover focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden"
onClick={() => {
setActionOpen(false)
setIsInstallModalOpen(true)
}}
>
{t(($) => $.installAction, { ns: 'plugin' })}
</button>
)}
<Action
open={actionOpen}
onOpenChange={setActionOpen}
author={plugin.org}
name={plugin.name}
version={plugin.latest_version}
/>
</div>
</div>
</BlockSelectorRow>
{isInstallModalOpen && canInstallPlugin && (
<PluginInstallPermissionProvider
canInstallPlugin={canInstallPlugin}
@ -353,20 +375,13 @@ function FeaturedToolPreviewCard({ payload }: FeaturedToolPreviewCardProps) {
if (!payload) return null
return (
<PreviewCardContent placement="right" popupClassName="w-[224px] px-3 py-2.5">
<div>
<BlockIcon
size="md"
className="mb-2"
type={BlockEnum.Tool}
toolIcon={payload.plugin.icon}
/>
<div className="mb-1 text-sm/5 text-text-primary">{payload.label}</div>
<div className="text-xs leading-[18px] wrap-break-word text-text-secondary">
{payload.description}
</div>
<BlockSelectorPreviewCardContent>
<BlockIcon size="md" className="mb-2" type={BlockEnum.Tool} toolIcon={payload.plugin.icon} />
<div className="mb-1 text-sm/5 text-text-primary">{payload.label}</div>
<div className="text-xs leading-[18px] wrap-break-word text-text-secondary">
{payload.description}
</div>
</PreviewCardContent>
</BlockSelectorPreviewCardContent>
)
}

313
web/app/components/workflow/block-selector/featured-triggers.tsx
View File

@ -5,10 +5,10 @@ import type { TriggerDefaultValue, TriggerWithProvider } from './types'
import type { Plugin } from '@/app/components/plugins/types'
import type { Locale } from '@/i18n-config'
import { cn } from '@langgenius/dify-ui/cn'
import { Collapsible, CollapsiblePanel, CollapsibleTrigger } from '@langgenius/dify-ui/collapsible'
import {
createPreviewCardHandle,
PreviewCard,
PreviewCardContent,
PreviewCardTrigger,
} from '@langgenius/dify-ui/preview-card'
import { useEffect, useMemo, useState } from 'react'
@ -23,10 +23,12 @@ import { useFeaturedTriggersCollapsed } from '@/app/components/workflow/block-se
import { useGetLanguage } from '@/context/i18n'
import Link from '@/next/link'
import { formatNumber } from '@/utils/format'
import { getMarketplaceUrl } from '@/utils/var'
import { PluginCategoryEnum } from '../../plugins/types'
import BlockIcon from '../block-icon'
import { BlockEnum } from '../types'
import { BlockSelectorRow } from './block-selector-row'
import { BlockSelectorPreviewCardContent } from './preview-card'
import { TriggerPluginActionPreviewCard } from './trigger-plugin/action-item'
import TriggerPluginItem from './trigger-plugin/item'
@ -123,101 +125,106 @@ const FeaturedTriggers = ({
const showEmptyState = !isLoading && totalVisible === 0
return (
<div className="pt-2 pb-3">
<button
type="button"
className="flex w-full items-center rounded-md px-4 py-1 text-left text-text-primary"
onClick={() => setIsCollapsed((prev) => !prev)}
>
<Collapsible
className="pt-2 pb-3"
open={!isCollapsed}
onOpenChange={(open) => setIsCollapsed(!open)}
>
<CollapsibleTrigger className="min-h-0 justify-start gap-0 rounded-md px-4 py-1 hover:not-data-disabled:bg-transparent">
<span className="system-xs-medium text-text-primary">
{t(($) => $['tabs.featuredTools'], { ns: 'workflow' })}
</span>
<span
className={cn(
'i-custom-vender-solid-arrows-arrow-down-round-fill',
'ml-0.5 size-4 text-text-tertiary transition-transform',
isCollapsed ? '-rotate-90' : 'rotate-0',
)}
aria-hidden
className="ml-0.5 i-custom-vender-solid-arrows-arrow-down-round-fill size-4 -rotate-90 text-text-tertiary transition-transform group-data-panel-open:rotate-0 motion-reduce:transition-none"
/>
</button>
</CollapsibleTrigger>
{!isCollapsed && (
<>
{isLoading && (
<div className="py-3">
<Loading type="app" />
</div>
)}
<CollapsiblePanel>
{isLoading && (
<div className="py-3">
<Loading type="app" />
</div>
)}
{showEmptyState && (
<p className="px-4 py-2 system-xs-regular text-text-tertiary">
<Link
className="text-text-accent"
href={getMarketplaceCategoryUrl(PluginCategoryEnum.trigger)}
target="_blank"
rel="noopener noreferrer"
>
{t(($) => $['tabs.noFeaturedTriggers'], { ns: 'workflow' })}
</Link>
</p>
)}
{!showEmptyState && !isLoading && (
<div className="mt-1 p-1">
{visibleInstalledProviders.map((provider) => (
<TriggerPluginItem
key={provider.id}
payload={provider}
hasSearchText={false}
previewCardHandle={triggerActionPreviewCardHandle}
onSelect={onSelect}
/>
))}
{visibleUninstalledPlugins.map((plugin) => (
<div key={plugin.plugin_id} className="mb-1 last-of-type:mb-0">
<FeaturedTriggerUninstalledItem
plugin={plugin}
language={language}
previewCardHandle={previewCardHandle}
onInstallSuccess={async () => {
await onInstallSuccess?.()
}}
t={t}
/>
</div>
))}
</div>
)}
{!isLoading && totalVisible > 0 && canToggleVisibility && (
<div
className="group mt-1 flex cursor-pointer items-center gap-x-2 rounded-lg py-1 pr-2 pl-3 text-text-tertiary transition-colors hover:bg-state-base-hover hover:text-text-secondary"
onClick={() => {
setVisibleCount((count) => {
if (count >= maxAvailable) return INITIAL_VISIBLE_COUNT
return Math.min(count + INITIAL_VISIBLE_COUNT, maxAvailable)
})
}}
{showEmptyState && (
<p className="px-4 py-2 system-xs-regular text-text-tertiary">
<Link
className="text-text-accent"
href={getMarketplaceCategoryUrl(PluginCategoryEnum.trigger)}
target="_blank"
rel="noopener noreferrer"
>
<div className="flex items-center px-1 text-text-tertiary transition-colors group-hover:text-text-secondary">
<span className="i-ri-more-line size-4 group-hover:hidden" />
{isExpanded ? (
<span className="i-custom-vender-solid-arrows-arrow-up-double-line hidden size-4 group-hover:block" />
) : (
<span className="i-custom-vender-solid-arrows-arrow-down-double-line hidden size-4 group-hover:block" />
)}
</div>
<div className="system-xs-regular">
{t(($) => $[isExpanded ? 'tabs.showLessFeatured' : 'tabs.showMoreFeatured'], {
ns: 'workflow',
})}
{t(($) => $['tabs.noFeaturedTriggers'], { ns: 'workflow' })}
</Link>
</p>
)}
{!showEmptyState && !isLoading && (
<div className="mt-1 p-1">
{visibleInstalledProviders.map((provider) => (
<TriggerPluginItem
key={provider.id}
payload={provider}
hasSearchText={false}
previewCardHandle={triggerActionPreviewCardHandle}
onSelect={onSelect}
/>
))}
{visibleUninstalledPlugins.map((plugin) => (
<div key={plugin.plugin_id} className="mb-1 last-of-type:mb-0">
<FeaturedTriggerUninstalledItem
plugin={plugin}
language={language}
previewCardHandle={previewCardHandle}
onInstallSuccess={async () => {
await onInstallSuccess?.()
}}
t={t}
/>
</div>
))}
</div>
)}
{!isLoading && totalVisible > 0 && canToggleVisibility && (
<button
type="button"
className="group mt-1 flex w-full cursor-pointer touch-manipulation items-center gap-x-2 rounded-lg border-0 bg-transparent py-1 pr-2 pl-3 text-left text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary focus-visible:inset-ring-2 focus-visible:inset-ring-state-accent-solid focus-visible:outline-hidden"
onClick={() => {
setVisibleCount((count) => {
if (count >= maxAvailable) return INITIAL_VISIBLE_COUNT
return Math.min(count + INITIAL_VISIBLE_COUNT, maxAvailable)
})
}}
>
<div className="flex items-center px-1 text-text-tertiary group-hover:text-text-secondary group-focus-visible:text-text-secondary">
<span
aria-hidden
className="i-ri-more-line size-4 group-hover:hidden group-focus-visible:hidden"
/>
{isExpanded ? (
<span
aria-hidden
className="i-custom-vender-solid-arrows-arrow-up-double-line hidden size-4 group-hover:block group-focus-visible:block"
/>
) : (
<span
aria-hidden
className="i-custom-vender-solid-arrows-arrow-down-double-line hidden size-4 group-hover:block group-focus-visible:block"
/>
)}
</div>
)}
</>
)}
<div className="system-xs-regular">
{t(($) => $[isExpanded ? 'tabs.showLessFeatured' : 'tabs.showMoreFeatured'], {
ns: 'workflow',
})}
</div>
</button>
)}
</CollapsiblePanel>
<PreviewCard handle={previewCardHandle}>
{({ payload }) => (
<FeaturedTriggerPreviewCard
@ -232,7 +239,7 @@ const FeaturedTriggers = ({
/>
)}
</PreviewCard>
</div>
</Collapsible>
)
}
@ -275,8 +282,13 @@ function FeaturedTriggerUninstalledItem({
}
}, [actionOpen])
const row = (
<BlockSelectorRow as="div" className="group select-none">
const detailsLink = (
<Link
className="flex h-full min-w-0 flex-1 items-center rounded-lg focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden"
href={getMarketplaceUrl(`/plugins/${plugin.org}/${plugin.name}`)}
target="_blank"
rel="noopener noreferrer"
>
<div className="flex min-w-0 items-center">
<BlockIcon
className="mr-2 shrink-0"
@ -288,55 +300,64 @@ function FeaturedTriggerUninstalledItem({
<div className="truncate system-sm-medium text-text-secondary">{label}</div>
</div>
</div>
<div className="ml-auto flex h-6 items-center gap-1 pl-1">
<span
className={`system-xs-regular text-text-tertiary ${actionOpen ? 'hidden' : 'group-hover:hidden'}`}
>
{installCountLabel}
</span>
<div
className={`flex h-full items-center gap-1 system-xs-medium text-components-button-secondary-accent-text [&_.action-btn]:size-6 [&_.action-btn]:min-h-0 [&_.action-btn]:rounded-lg [&_.action-btn]:p-0 ${actionOpen ? '' : 'hidden group-hover:flex'}`}
>
{canInstallPlugin && (
<button
type="button"
className="cursor-pointer rounded-md px-1.5 py-0.5 hover:bg-state-base-hover"
onClick={() => {
setActionOpen(false)
setIsInstallModalOpen(true)
}}
>
{t(($) => $.installAction, { ns: 'plugin' })}
</button>
)}
<Action
open={actionOpen}
onOpenChange={setActionOpen}
author={plugin.org}
name={plugin.name}
version={plugin.latest_version}
/>
</div>
</div>
</BlockSelectorRow>
</Link>
)
return (
<>
{description ? (
// Preview is supplementary: icon / label / brief are all reachable from
// the InstallFromMarketplace modal that opens on click, so hover/focus-only
// activation is a11y-safe. See packages/dify-ui/AGENTS.md → Overlay Primitive Selection.
<PreviewCardTrigger
delay={150}
closeDelay={150}
handle={previewCardHandle}
payload={{ plugin, label, description }}
render={row}
/>
) : (
row
)}
<BlockSelectorRow as="div" className="group select-none focus-within:bg-state-base-hover">
{description ? (
<PreviewCardTrigger
delay={150}
closeDelay={150}
handle={previewCardHandle}
payload={{ plugin, label, description }}
render={detailsLink}
/>
) : (
detailsLink
)}
<div className="relative ml-auto flex h-6 items-center pl-1">
<span
className={cn(
'system-xs-regular text-text-tertiary',
actionOpen
? 'hidden'
: 'group-focus-within:hidden group-hover:hidden [@media(hover:none)]:hidden',
)}
>
{installCountLabel}
</span>
<div
className={cn(
'absolute right-0 flex h-full items-center gap-1 system-xs-medium text-components-button-secondary-accent-text opacity-0 transition-opacity motion-reduce:transition-none [&_.action-btn]:size-6 [&_.action-btn]:min-h-0 [&_.action-btn]:rounded-lg [&_.action-btn]:p-0',
actionOpen
? 'pointer-events-auto opacity-100'
: 'pointer-events-none group-focus-within:pointer-events-auto group-focus-within:opacity-100 group-hover:pointer-events-auto group-hover:opacity-100 [@media(hover:none)]:pointer-events-auto [@media(hover:none)]:opacity-100',
)}
>
{canInstallPlugin && (
<button
type="button"
className="cursor-pointer rounded-md px-1.5 py-0.5 hover:bg-state-base-hover focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden"
onClick={() => {
setActionOpen(false)
setIsInstallModalOpen(true)
}}
>
{t(($) => $.installAction, { ns: 'plugin' })}
</button>
)}
<Action
open={actionOpen}
onOpenChange={setActionOpen}
author={plugin.org}
name={plugin.name}
version={plugin.latest_version}
/>
</div>
</div>
</BlockSelectorRow>
{isInstallModalOpen && canInstallPlugin && (
<PluginInstallPermissionProvider
canInstallPlugin={canInstallPlugin}
@ -367,20 +388,18 @@ function FeaturedTriggerPreviewCard({ payload }: FeaturedTriggerPreviewCardProps
if (!payload) return null
return (
<PreviewCardContent placement="right" popupClassName="w-[224px] px-3 py-2.5">
<div>
<BlockIcon
size="md"
className="mb-2"
type={BlockEnum.TriggerPlugin}
toolIcon={payload.plugin.icon}
/>
<div className="mb-1 text-sm/5 text-text-primary">{payload.label}</div>
<div className="text-xs leading-[18px] wrap-break-word text-text-secondary">
{payload.description}
</div>
<BlockSelectorPreviewCardContent>
<BlockIcon
size="md"
className="mb-2"
type={BlockEnum.TriggerPlugin}
toolIcon={payload.plugin.icon}
/>
<div className="mb-1 text-sm/5 text-text-primary">{payload.label}</div>
<div className="text-xs leading-[18px] wrap-break-word text-text-secondary">
{payload.description}
</div>
</PreviewCardContent>
</BlockSelectorPreviewCardContent>
)
}

75
web/app/components/workflow/block-selector/hooks.ts
View File

@ -1,10 +1,8 @@
import type { ReactNode } from 'react'
import { useCallback, useEffect, useMemo, useState } from 'react'
import { useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import { BLOCKS } from './constants'
import { TabsEnum, ToolTypeEnum } from './types'
const startNodesDocsTipLinkKey = 'startNodesDocs' as const
import { TabType, ToolType } from './types'
export const useBlocks = () => {
const { t } = useTranslation()
@ -33,7 +31,7 @@ export const useTabs = ({
noTools?: boolean
noSnippets?: boolean
noStart?: boolean
defaultActiveTab?: TabsEnum
defaultActiveTab?: TabType
hasStartPlaceholderNode?: boolean
disableStartTab?: boolean
forceEnableStartTab?: boolean
@ -49,33 +47,29 @@ export const useTabs = ({
const tabs = useMemo(() => {
const tabConfigs = [
{
key: TabsEnum.Blocks,
key: TabType.Blocks,
name: t(($) => $['tabs.blocks'], { ns: 'workflow' }),
show: !noBlocks,
},
{
key: TabsEnum.Sources,
key: TabType.Sources,
name: t(($) => $['tabs.sources'], { ns: 'workflow' }),
show: !noSources,
},
{
key: TabsEnum.Tools,
key: TabType.Tools,
name: t(($) => $['tabs.tools'], { ns: 'workflow' }),
show: !noTools,
},
{
key: TabsEnum.Start,
key: TabType.Start,
name: t(($) => $['tabs.start'], { ns: 'workflow' }),
show: shouldShowStartTab,
disabled: shouldDisableStartTab,
disabledTip: shouldDisableStartTab ? startDisabledTip : undefined,
disabledTipLinkKey:
shouldDisableStartTab && !disableStartTab && hasStartPlaceholderNode
? startNodesDocsTipLinkKey
: undefined,
},
{
key: TabsEnum.Snippets,
key: TabType.Snippets,
name: t(($) => $['tabs.snippets'], { ns: 'workflow' }),
show: !noSnippets,
},
@ -91,31 +85,25 @@ export const useTabs = ({
shouldShowStartTab,
shouldDisableStartTab,
startDisabledTip,
disableStartTab,
hasStartPlaceholderNode,
])
const getValidTabKey = useCallback(
(targetKey?: TabsEnum) => {
const initialTab = useMemo(() => {
const getValidTabKey = (targetKey?: TabType) => {
if (!targetKey) return undefined
const tab = tabs.find((tabItem) => tabItem.key === targetKey)
if (!tab || tab.disabled) return undefined
return tab.key
},
[tabs],
)
const initialTab = useMemo(() => {
const fallbackTab = tabs.find((tab) => !tab.disabled)?.key ?? TabsEnum.Blocks
}
const fallbackTab = tabs.find((tab) => !tab.disabled)?.key ?? TabType.Blocks
const preferredDefault = getValidTabKey(defaultActiveTab)
if (preferredDefault) return preferredDefault
const preferredOrder: TabsEnum[] = []
if (!noBlocks) preferredOrder.push(TabsEnum.Blocks)
if (!noTools) preferredOrder.push(TabsEnum.Tools)
if (!noSources) preferredOrder.push(TabsEnum.Sources)
if (!noStart) preferredOrder.push(TabsEnum.Start)
if (!noSnippets) preferredOrder.push(TabsEnum.Snippets)
const preferredOrder: TabType[] = []
if (!noBlocks) preferredOrder.push(TabType.Blocks)
if (!noTools) preferredOrder.push(TabType.Tools)
if (!noSources) preferredOrder.push(TabType.Sources)
if (!noStart) preferredOrder.push(TabType.Start)
if (!noSnippets) preferredOrder.push(TabType.Snippets)
for (const tabKey of preferredOrder) {
const validKey = getValidTabKey(tabKey)
@ -123,48 +111,37 @@ export const useTabs = ({
}
return fallbackTab
}, [defaultActiveTab, noBlocks, noSources, noTools, noSnippets, noStart, tabs, getValidTabKey])
const [activeTab, setActiveTab] = useState(initialTab)
const resetActiveTab = useCallback(() => {
setActiveTab(initialTab)
}, [initialTab])
useEffect(() => {
const currentTab = tabs.find((tab) => tab.key === activeTab)
if (!currentTab || currentTab.disabled) resetActiveTab()
}, [tabs, activeTab, resetActiveTab])
}, [defaultActiveTab, noBlocks, noSources, noTools, noSnippets, noStart, tabs])
return {
tabs,
activeTab,
setActiveTab,
resetActiveTab,
initialTab,
}
}
export const useToolTabs = (isHideMCPTools?: boolean) => {
const { t } = useTranslation()
const tabs = [
const tabs: Array<{ key: ToolType; name: string }> = [
{
key: ToolTypeEnum.All,
key: ToolType.All,
name: t(($) => $['tabs.allTool'], { ns: 'workflow' }),
},
{
key: ToolTypeEnum.BuiltIn,
key: ToolType.BuiltIn,
name: t(($) => $['tabs.plugin'], { ns: 'workflow' }),
},
{
key: ToolTypeEnum.Custom,
key: ToolType.Custom,
name: t(($) => $['tabs.customTool'], { ns: 'workflow' }),
},
{
key: ToolTypeEnum.Workflow,
key: ToolType.Workflow,
name: t(($) => $['tabs.workflowTool'], { ns: 'workflow' }),
},
]
if (!isHideMCPTools) {
tabs.push({
key: ToolTypeEnum.MCP,
key: ToolType.MCP,
name: 'MCP',
})
}

169
web/app/components/workflow/block-selector/main.tsx
View File

@ -1,4 +1,4 @@
import type { OffsetOptions, Placement } from '@floating-ui/react'
import type { Placement } from '@langgenius/dify-ui/popover'
import type { MouseEventHandler } from 'react'
import type {
CommonNodeType,
@ -7,22 +7,25 @@ import type {
OnSelectBlock,
ToolWithProvider,
} from '../types'
import type { TabType } from './types'
import { cn } from '@langgenius/dify-ui/cn'
import { Popover, PopoverContent, PopoverTrigger } from '@langgenius/dify-ui/popover'
import { useDebounce } from 'ahooks'
import * as React from 'react'
import { memo, useCallback, useEffect, useMemo, useState } from 'react'
import { memo, useCallback, useMemo, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Input from '@/app/components/base/input'
import SearchBox from '@/app/components/plugins/marketplace/search-box'
import { useHooksStore } from '@/app/components/workflow/hooks-store'
import useNodes from '@/app/components/workflow/store/workflow/use-nodes'
import { FlowType } from '@/types/common'
import { BlockEnum, isTriggerNode } from '../types'
import { useTabs } from './hooks'
import Snippets from './snippets'
import Tabs from './tabs'
import { TabsEnum } from './types'
import { SelectorContent } from './tabs'
type NodeSelectorOffset =
| number
| {
mainAxis?: number
crossAxis?: number
}
export type NodeSelectorProps = {
open?: boolean
@ -30,7 +33,7 @@ export type NodeSelectorProps = {
onSelect: OnSelectBlock
trigger?: (open: boolean) => React.ReactNode
placement?: Placement
offset?: OffsetOptions
offset?: NodeSelectorOffset
triggerStyle?: React.CSSProperties
triggerClassName?: (open: boolean) => string
triggerInnerClassName?: string
@ -43,8 +46,7 @@ export type NodeSelectorProps = {
noBlocks?: boolean
noTools?: boolean
showStartTab?: boolean
defaultActiveTab?: TabsEnum
forceShowStartContent?: boolean
defaultActiveTab?: TabType
ignoreNodeIds?: string[]
forceEnableStartTab?: boolean // Force enabling Start tab regardless of existing trigger/user input nodes (e.g., when changing Start node type).
allowUserInputSelection?: boolean // Override user-input availability; default logic blocks it when triggers exist.
@ -71,7 +73,6 @@ function NodeSelector({
noTools = false,
showStartTab = false,
defaultActiveTab,
forceShowStartContent = false,
ignoreNodeIds = [],
forceEnableStartTab = false,
allowUserInputSelection,
@ -81,13 +82,8 @@ function NodeSelector({
const { t } = useTranslation()
const nodes = useNodes()
const flowType = useHooksStore((s) => s.configsMap?.flowType)
const [searchText, setSearchText] = useState('')
const [snippetsLoading, setSnippetsLoading] = useState(
() => Boolean(openFromProps) && defaultActiveTab === TabsEnum.Snippets,
)
const debouncedSearchText = useDebounce(searchText, { wait: 500 })
const [tags, setTags] = useState<string[]>([])
const [localOpen, setLocalOpen] = useState(false)
const searchInputRef = useRef<HTMLInputElement>(null)
// Exclude nodes explicitly ignored (such as the node currently being edited) when checking canvas state.
const filteredNodes = useMemo(() => {
if (!ignoreNodeIds.length) return nodes
@ -116,7 +112,7 @@ function NodeSelector({
const canSelectUserInput = allowUserInputSelection ?? defaultAllowUserInputSelection
const disableStartTab = flowType === FlowType.snippet
const disableSnippetsTab = flowType === FlowType.snippet
const { activeTab, resetActiveTab, setActiveTab, tabs } = useTabs({
const { initialTab, tabs } = useTabs({
noBlocks,
noSources: !dataSources.length,
noTools,
@ -133,22 +129,16 @@ function NodeSelector({
if (disabled) return
setLocalOpen(newOpen)
if (!newOpen) {
setSearchText('')
setSnippetsLoading(false)
resetActiveTab()
} else if (activeTab === TabsEnum.Snippets) {
setSnippetsLoading(true)
}
if (onOpenChange) onOpenChange(newOpen)
},
[activeTab, disabled, onOpenChange, resetActiveTab],
[disabled, onOpenChange],
)
const handleTrigger = useCallback<MouseEventHandler<HTMLElement>>((e) => {
e.stopPropagation()
}, [])
const handlePopupClick = useCallback<MouseEventHandler<HTMLDivElement>>((event) => {
event.stopPropagation()
}, [])
const handleSelect = useCallback<OnSelectBlock>(
(type, pluginDefaultValue) => {
@ -158,13 +148,6 @@ function NodeSelector({
[handleOpenChange, onSelect],
)
const handleActiveTabChange = useCallback(
(newActiveTab: TabsEnum) => {
setActiveTab(newActiveTab)
if (open && newActiveTab === TabsEnum.Snippets) setSnippetsLoading(true)
},
[open, setActiveTab],
)
const handlePopupKeyDown = useCallback(
(event: React.KeyboardEvent) => {
if (isolateKeyboardEvents) event.stopPropagation()
@ -172,34 +155,6 @@ function NodeSelector({
[isolateKeyboardEvents],
)
useEffect(() => {
if (!snippetsLoading) return
const timer = window.setTimeout(() => {
setSnippetsLoading(false)
}, 200)
return () => {
window.clearTimeout(timer)
}
}, [snippetsLoading])
const filterSearchText =
activeTab === TabsEnum.Start || activeTab === TabsEnum.Tools ? debouncedSearchText : searchText
const searchPlaceholder = useMemo(() => {
if (activeTab === TabsEnum.Start) return t(($) => $['tabs.searchTrigger'], { ns: 'workflow' })
if (activeTab === TabsEnum.Blocks) return t(($) => $['tabs.searchBlock'], { ns: 'workflow' })
if (activeTab === TabsEnum.Tools) return t(($) => $['tabs.searchTool'], { ns: 'workflow' })
if (activeTab === TabsEnum.Sources)
return t(($) => $['tabs.searchDataSource'], { ns: 'workflow' })
if (activeTab === TabsEnum.Snippets)
return t(($) => $['tabs.searchSnippets'], { ns: 'workflow' })
return ''
}, [activeTab, t])
const defaultTriggerElement = (
<PopoverTrigger
aria-label={t(($) => $['common.addBlock'], { ns: 'workflow' })}
@ -223,8 +178,7 @@ function NodeSelector({
) : (
<div className={triggerInnerClassName}>{triggerElement}</div>
)
const resolvedOffset =
typeof offset === 'number' || typeof offset === 'function' ? undefined : offset
const resolvedOffset = typeof offset === 'number' ? undefined : offset
const sideOffset = typeof offset === 'number' ? offset : (resolvedOffset?.mainAxis ?? 0)
const alignOffset = typeof offset === 'number' ? 0 : (resolvedOffset?.crossAxis ?? 0)
@ -243,8 +197,13 @@ function NodeSelector({
placement={placement}
sideOffset={sideOffset}
alignOffset={alignOffset}
positionerProps={{ positionMethod: 'fixed' }}
popupClassName="border-none bg-transparent shadow-none"
popupProps={isolateKeyboardEvents ? { onKeyDown: handlePopupKeyDown } : undefined}
popupProps={{
initialFocus: searchInputRef,
onClick: handlePopupClick,
...(isolateKeyboardEvents ? { onKeyDown: handlePopupKeyDown } : {}),
}}
>
<div
className={cn(
@ -252,84 +211,20 @@ function NodeSelector({
popupClassName,
)}
>
<Tabs
<SelectorContent
tabs={tabs}
activeTab={activeTab}
defaultTab={initialTab}
standalonePanel={noBlocks ? initialTab : undefined}
searchInputRef={searchInputRef}
blocks={blocks}
allowStartNodeSelection={canSelectUserInput}
hasUserInputNode={hasUserInputNode}
hasTriggerNode={hasTriggerNode}
onActiveTabChange={handleActiveTabChange}
filterElem={
activeTab === TabsEnum.Snippets ? null : (
<div className="relative m-2" onClick={(e) => e.stopPropagation()}>
{activeTab === TabsEnum.Start && (
<SearchBox
autoFocus
search={searchText}
onSearchChange={setSearchText}
tags={tags}
onTagsChange={setTags}
placeholder={searchPlaceholder}
inputClassName="grow"
/>
)}
{activeTab === TabsEnum.Blocks && (
<Input
showLeftIcon
showClearIcon
autoFocus
value={searchText}
placeholder={searchPlaceholder}
onChange={(e) => setSearchText(e.target.value)}
onClear={() => setSearchText('')}
/>
)}
{activeTab === TabsEnum.Sources && (
<Input
showLeftIcon
showClearIcon
autoFocus
value={searchText}
placeholder={searchPlaceholder}
onChange={(e) => setSearchText(e.target.value)}
onClear={() => setSearchText('')}
/>
)}
{activeTab === TabsEnum.Tools && (
<SearchBox
autoFocus
search={searchText}
onSearchChange={setSearchText}
tags={tags}
onTagsChange={setTags}
placeholder={t(($) => $.searchTools, { ns: 'plugin' })!}
inputClassName="grow"
/>
)}
</div>
)
}
onSelect={handleSelect}
searchText={filterSearchText}
tags={tags}
onRequestClose={() => handleOpenChange(false)}
availableBlocksTypes={availableBlocksTypes}
noBlocks={noBlocks}
dataSources={dataSources}
noTools={noTools}
onTagsChange={setTags}
forceShowStartContent={forceShowStartContent}
snippetsElem={
disableSnippetsTab ? undefined : (
<Snippets
loading={snippetsLoading}
searchText={searchText}
onSearchTextChange={setSearchText}
insertPayload={snippetInsertPayload}
onInserted={() => handleOpenChange(false)}
/>
)
}
snippetInsertPayload={snippetInsertPayload}
/>
</div>
</PopoverContent>

29
web/app/components/workflow/block-selector/preview-card.tsx Normal file
View File

@ -0,0 +1,29 @@
import type { ReactNode } from 'react'
import { cn } from '@langgenius/dify-ui/cn'
import { PreviewCardContent, PreviewCardViewport } from '@langgenius/dify-ui/preview-card'
export function BlockSelectorPreviewCardContent({ children }: { children: ReactNode }) {
return (
<PreviewCardContent
placement="right"
className="h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom,transform] duration-180 ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none motion-reduce:transition-none"
popupClassName="relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] overflow-hidden border-none transition-[width,height,transform,scale,opacity] duration-[180ms] ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none motion-reduce:transition-none"
>
<PreviewCardViewport
className={cn(
'relative h-full w-full overflow-clip',
'**:data-current:w-56 **:data-current:translate-y-0 **:data-current:px-3 **:data-current:py-2.5 **:data-current:opacity-100 **:data-current:transition-[translate,opacity] **:data-current:duration-[180ms,90ms] **:data-current:ease-[cubic-bezier(0.22,1,0.36,1)]',
'**:data-previous:w-56 **:data-previous:translate-y-0 **:data-previous:px-3 **:data-previous:py-2.5 **:data-previous:opacity-100 **:data-previous:transition-[translate,opacity] **:data-previous:duration-[180ms,90ms] **:data-previous:ease-[cubic-bezier(0.22,1,0.36,1)]',
'data-instant:**:data-current:transition-none data-instant:**:data-previous:transition-none',
"data-[activation-direction~='up']:**:data-current:data-starting-style:-translate-y-2 data-[activation-direction~='up']:**:data-current:data-starting-style:opacity-0",
"data-[activation-direction~='up']:**:data-previous:data-ending-style:translate-y-2 data-[activation-direction~='up']:**:data-previous:data-ending-style:opacity-0",
"data-[activation-direction~='down']:**:data-current:data-starting-style:translate-y-2 data-[activation-direction~='down']:**:data-current:data-starting-style:opacity-0",
"data-[activation-direction~='down']:**:data-previous:data-ending-style:-translate-y-2 data-[activation-direction~='down']:**:data-previous:data-ending-style:opacity-0",
'motion-reduce:**:data-current:transition-none motion-reduce:**:data-previous:transition-none',
)}
>
{children}
</PreviewCardViewport>
</PreviewCardContent>
)
}

49
web/app/components/workflow/block-selector/rag-tool-recommendations/index.tsx
View File

@ -1,12 +1,9 @@
'use client'
import type { Dispatch, SetStateAction } from 'react'
import type { ViewType } from '@/app/components/workflow/block-selector/view-type-select'
import type { OnSelectBlock } from '@/app/components/workflow/types'
import { RiMoreLine } from '@remixicon/react'
import * as React from 'react'
import { useCallback, useMemo } from 'react'
import { cn } from '@langgenius/dify-ui/cn'
import { useMemo } from 'react'
import { Trans, useTranslation } from 'react-i18next'
import { ArrowDownRoundFill } from '@/app/components/base/icons/src/vender/solid/arrows'
import Loading from '@/app/components/base/loading'
import { getFormattedPlugin } from '@/app/components/plugins/marketplace/utils'
import { useRAGRecommendationsCollapsed } from '@/app/components/workflow/block-selector/storage'
@ -18,14 +15,14 @@ import List from './list'
type RAGToolRecommendationsProps = {
viewType: ViewType
onSelect: OnSelectBlock
onTagsChange: Dispatch<SetStateAction<string[]>>
onLoadMore: () => void
}
const RAGToolRecommendations = ({
export function RAGToolRecommendations({
viewType,
onSelect,
onTagsChange,
}: RAGToolRecommendationsProps) => {
onLoadMore,
}: RAGToolRecommendationsProps) {
const { t } = useTranslation()
const [isCollapsed, setIsCollapsed] = useRAGRecommendationsCollapsed()
@ -46,25 +43,23 @@ const RAGToolRecommendations = ({
return []
}, [ragRecommendedPlugins])
const loadMore = useCallback(() => {
onTagsChange((prev) => {
if (prev.includes('rag')) return prev
return [...prev, 'rag']
})
}, [onTagsChange])
return (
<div className="flex flex-col p-1">
<button
type="button"
className="flex w-full items-center rounded-md px-3 pt-1 pb-0.5 text-left text-text-tertiary"
className="flex w-full items-center rounded-md px-3 pt-1 pb-0.5 text-left text-text-tertiary focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden"
aria-expanded={!isCollapsed}
onClick={() => setIsCollapsed((prev) => !prev)}
>
<span className="system-xs-medium text-text-tertiary">
{t(($) => $['ragToolSuggestions.title'], { ns: 'pipeline' })}
</span>
<ArrowDownRoundFill
className={`ml-1 size-4 text-text-tertiary transition-transform ${isCollapsed ? '-rotate-90' : 'rotate-0'}`}
<span
aria-hidden="true"
className={cn(
'ml-1 i-custom-vender-solid-arrows-arrow-down-round-fill size-4 text-text-tertiary transition-transform motion-reduce:transition-none',
isCollapsed && '-rotate-90',
)}
/>
</button>
{!isCollapsed && (
@ -103,17 +98,21 @@ const RAGToolRecommendations = ({
onSelect={onSelect}
viewType={viewType}
/>
<div
className="flex cursor-pointer items-center gap-x-2 py-1 pr-2 pl-3"
onClick={loadMore}
<button
type="button"
className="flex w-full items-center gap-x-2 rounded-md py-1 pr-2 pl-3 text-left focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden"
onClick={onLoadMore}
>
<div className="px-1">
<RiMoreLine className="size-4 text-text-tertiary" />
<span
aria-hidden="true"
className="i-ri-more-line block size-4 text-text-tertiary"
/>
</div>
<div className="system-xs-regular text-text-tertiary">
{t(($) => $['operation.more'], { ns: 'common' })}
</div>
</div>
</button>
</>
)}
</>
@ -121,5 +120,3 @@ const RAGToolRecommendations = ({
</div>
)
}
export default React.memo(RAGToolRecommendations)

15
web/app/components/workflow/block-selector/snippets/__tests__/index.spec.tsx
View File

@ -45,7 +45,16 @@ describe('Snippets', () => {
describe('Rendering', () => {
it('should render loading skeleton when loading', () => {
const { container } = render(<Snippets loading searchText="" />)
mockUseInfiniteSnippetList.mockReturnValue({
data: undefined,
isLoading: true,
isFetching: true,
isFetchingNextPage: false,
fetchNextPage: vi.fn(),
hasNextPage: undefined,
})
const { container } = render(<Snippets searchText="" />)
expect(container.querySelectorAll('.bg-text-quaternary')).not.toHaveLength(0)
})
@ -59,7 +68,7 @@ describe('Snippets', () => {
).not.toBeInTheDocument()
})
it('should render snippet rows from infinite list data', () => {
it('should keep cached snippet rows visible while refetching', () => {
mockUseInfiniteSnippetList.mockReturnValue({
data: {
pages: [
@ -85,7 +94,7 @@ describe('Snippets', () => {
],
},
isLoading: false,
isFetching: false,
isFetching: true,
isFetchingNextPage: false,
fetchNextPage: vi.fn(),
hasNextPage: false,

113
web/app/components/workflow/block-selector/snippets/index.tsx
View File

@ -20,7 +20,6 @@ import SnippetTagsFilter from './snippet-tags-filter'
import { useInsertSnippet } from './use-insert-snippet'
type SnippetsProps = {
loading?: boolean
searchText: string
onSearchTextChange?: (searchText: string) => void
insertPayload?: Parameters<OnNodeAdd>[1]
@ -50,13 +49,7 @@ const LoadingSkeleton = () => {
)
}
const Snippets = ({
loading = false,
searchText,
onSearchTextChange,
insertPayload,
onInserted,
}: SnippetsProps) => {
const Snippets = ({ searchText, onSearchTextChange, insertPayload, onInserted }: SnippetsProps) => {
const { t } = useTranslation()
const { handleInsertSnippet } = useInsertSnippet()
const deferredSearchText = useDeferredValue(searchText)
@ -103,7 +96,7 @@ const Snippets = ({
)
const filter = (
<div className="border-b border-divider-subtle p-2">
<div className="p-2">
<div className="flex items-center rounded-lg border border-transparent bg-components-input-bg-normal focus-within:border-components-input-border-active hover:border-components-input-border-hover">
<div className="flex min-w-0 grow items-center py-1.75 pr-3 pl-2">
<span
@ -111,11 +104,15 @@ const Snippets = ({
aria-hidden="true"
/>
<input
autoFocus
type="search"
aria-label={t(($) => $['tabs.searchSnippets'], { ns: 'workflow' })}
name="query"
autoComplete="off"
value={searchText}
placeholder={t(($) => $['tabs.searchSnippets'], { ns: 'workflow' })}
className={cn(
'mr-1 ml-1.5 inline-block min-w-0 grow appearance-none bg-transparent system-sm-regular text-components-input-text-filled outline-hidden placeholder:text-components-input-text-placeholder',
'[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none',
searchText && 'mr-2',
)}
onChange={(event) => onSearchTextChange?.(event.target.value)}
@ -124,7 +121,7 @@ const Snippets = ({
<button
type="button"
aria-label={t(($) => $['operation.clear'], { ns: 'common' })}
className="group shrink-0 cursor-pointer rounded-md p-1 hover:bg-state-base-hover"
className="group shrink-0 cursor-pointer rounded-md p-1 outline-hidden hover:bg-state-base-hover focus-visible:ring-2 focus-visible:ring-state-accent-solid"
onClick={() => onSearchTextChange?.('')}
>
<span className="i-ri-close-line size-4 text-text-tertiary" aria-hidden="true" />
@ -137,60 +134,56 @@ const Snippets = ({
</div>
)
if (loading || isLoading || (isFetching && snippets.length === 0)) {
return (
<>
{filter}
<LoadingSkeleton />
</>
const content =
isLoading || (isFetching && snippets.length === 0) ? (
<LoadingSkeleton />
) : !snippets.length ? (
<SnippetEmptyState />
) : (
<ScrollAreaRoot className="relative max-h-120 max-w-125 overflow-hidden">
<ScrollAreaViewport ref={viewportRef}>
<ScrollAreaContent className="p-1">
{snippets.map((item) => {
const row = (
<SnippetListItem
snippet={item}
isHovered={hoveredSnippetId === item.id}
onClick={() => handleSnippetClick(item.id)}
onMouseEnter={() => setHoveredSnippetId(item.id)}
onMouseLeave={() =>
setHoveredSnippetId((current) => (current === item.id ? null : current))
}
/>
)
if (!item.description) return <div key={item.id}>{row}</div>
return (
<Tooltip key={item.id}>
<TooltipTrigger delay={0} render={row} />
<TooltipContent placement="right-start" className="bg-transparent! p-0!">
<SnippetDetailCard snippet={item} />
</TooltipContent>
</Tooltip>
)
})}
{isFetchingNextPage && (
<div className="flex justify-center px-3 py-2">
<Loading />
</div>
)}
</ScrollAreaContent>
</ScrollAreaViewport>
<ScrollAreaScrollbar orientation="vertical">
<ScrollAreaThumb />
</ScrollAreaScrollbar>
</ScrollAreaRoot>
)
}
return (
<>
{filter}
{!snippets.length ? (
<SnippetEmptyState />
) : (
<ScrollAreaRoot className="relative max-h-120 max-w-125 overflow-hidden">
<ScrollAreaViewport ref={viewportRef}>
<ScrollAreaContent className="p-1">
{snippets.map((item) => {
const row = (
<SnippetListItem
snippet={item}
isHovered={hoveredSnippetId === item.id}
onClick={() => handleSnippetClick(item.id)}
onMouseEnter={() => setHoveredSnippetId(item.id)}
onMouseLeave={() =>
setHoveredSnippetId((current) => (current === item.id ? null : current))
}
/>
)
if (!item.description) return <div key={item.id}>{row}</div>
return (
<Tooltip key={item.id}>
<TooltipTrigger delay={0} render={row} />
<TooltipContent placement="right-start" className="bg-transparent! p-0!">
<SnippetDetailCard snippet={item} />
</TooltipContent>
</Tooltip>
)
})}
{isFetchingNextPage && (
<div className="flex justify-center px-3 py-2">
<Loading />
</div>
)}
</ScrollAreaContent>
</ScrollAreaViewport>
<ScrollAreaScrollbar orientation="vertical">
<ScrollAreaThumb />
</ScrollAreaScrollbar>
</ScrollAreaRoot>
)}
<div className="border-t border-divider-subtle">{content}</div>
</>
)
}

87
web/app/components/workflow/block-selector/start-blocks.tsx
View File

@ -4,18 +4,17 @@ import { cn } from '@langgenius/dify-ui/cn'
import {
createPreviewCardHandle,
PreviewCard,
PreviewCardContent,
PreviewCardTrigger,
} from '@langgenius/dify-ui/preview-card'
import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
import { memo, useCallback, useEffect, useMemo } from 'react'
import { Fragment, memo, useCallback, useEffect, useId, useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import useNodes from '@/app/components/workflow/store/workflow/use-nodes'
import BlockIcon from '../block-icon'
import { BlockEnum as BlockEnumValues } from '../types'
import { BlockSelectorRow } from './block-selector-row'
// import { useNodeMetaData } from '../hooks'
import { START_BLOCKS } from './constants'
import { BlockSelectorPreviewCardContent } from './preview-card'
type StartBlocksProps = {
searchText: string
@ -30,6 +29,8 @@ type StartBlocksProps = {
}
type StartBlockPreviewPayload = {
block: (typeof START_BLOCKS)[number]
label: string
description: string
}
const StartBlocks = ({
@ -46,7 +47,7 @@ const StartBlocks = ({
const { t } = useTranslation()
const nodes = useNodes()
const previewCardHandle = useMemo(() => createPreviewCardHandle<StartBlockPreviewPayload>(), [])
// const nodeMetaData = useNodeMetaData()
const previewDescriptionBaseId = useId()
const filteredBlocks = useMemo(() => {
// Check if Start node already exists in workflow
@ -99,22 +100,24 @@ const StartBlocks = ({
onContentStateChange?.(!isEmpty)
}, [isEmpty, onContentStateChange])
// Preview is supplementary: the block icon, title and description all become
// reachable from the inspector + canvas once the row is clicked to insert
// the start node, so hover/focus-only activation is a11y-safe. See
// packages/dify-ui/AGENTS.md → Overlay Primitive Selection.
const renderBlock = useCallback(
(block: (typeof START_BLOCKS)[number]) => {
const isUserInput = block.type === BlockEnumValues.Start
const isUserInputDisabled = isUserInput && showUserInputDisabled
const isRowDisabled = disabled || (isUserInput && showUserInputAdded) || isUserInputDisabled
const label = t(($) => $[`blocks.${block.type}`], { ns: 'workflow' })
const description =
block.type === BlockEnumValues.Start
? t(($) => $['nodes.start.userInputTipDescription'], { ns: 'workflow' })
: t(($) => $[`blocksAbout.${block.type}`], { ns: 'workflow' })
const previewDescriptionId = `${previewDescriptionBaseId}-${block.type}`
const disabledReason = t(($) => $['nodes.startPlaceholder.userInputConflictTip'], {
ns: 'workflow',
})
const row = (
<BlockSelectorRow
aria-disabled={isRowDisabled}
aria-describedby={previewDescriptionId}
aria-label={isUserInputDisabled ? `${label}. ${disabledReason}` : label}
disabled={isRowDisabled}
onClick={() => {
@ -153,34 +156,38 @@ const StartBlocks = ({
if (isUserInputDisabled) {
return (
<Tooltip key={block.type}>
<TooltipTrigger render={row} />
<TooltipContent
placement="right"
sideOffset={8}
className="max-w-[240px] rounded-xl border-[0.5px] border-components-panel-border bg-components-tooltip-bg px-4 py-3.5 shadow-lg"
>
<p className="system-xs-regular text-text-secondary">{disabledReason}</p>
</TooltipContent>
</Tooltip>
<Fragment key={block.type}>
<Tooltip>
<TooltipTrigger render={row} />
<TooltipContent className="rounded-xl">{disabledReason}</TooltipContent>
</Tooltip>
<span id={previewDescriptionId} className="sr-only">
{description}
</span>
</Fragment>
)
}
return (
<PreviewCardTrigger
key={block.type}
delay={150}
closeDelay={150}
handle={previewCardHandle}
payload={{ block }}
render={row}
/>
<Fragment key={block.type}>
<PreviewCardTrigger
delay={150}
closeDelay={150}
handle={previewCardHandle}
payload={{ block, label, description }}
render={row}
/>
<span id={previewDescriptionId} className="sr-only">
{description}
</span>
</Fragment>
)
},
[
disabled,
onSelect,
previewCardHandle,
previewDescriptionBaseId,
showMostCommonBadge,
showUserInputAdded,
showUserInputDisabled,
@ -223,11 +230,7 @@ type StartBlockPreviewCardProps = {
function StartBlockPreviewCard({ payload, t }: StartBlockPreviewCardProps) {
if (!payload) return null
const { block } = payload
const description =
block.type === BlockEnumValues.Start
? t(($) => $['nodes.start.userInputTipDescription'], { ns: 'workflow' })
: t(($) => $[`blocksAbout.${block.type}`], { ns: 'workflow' })
const { block, label, description } = payload
const showDifyTeamAuthor = [
BlockEnumValues.Start,
BlockEnumValues.TriggerWebhook,
@ -235,20 +238,16 @@ function StartBlockPreviewCard({ payload, t }: StartBlockPreviewCardProps) {
].includes(block.type)
return (
<PreviewCardContent placement="right" popupClassName="w-[224px] px-3 pt-3 pb-2.5">
<div>
<BlockIcon size="md" className="mb-2" type={block.type} />
<div className="mb-1 system-md-medium text-text-primary">
{t(($) => $[`blocks.${block.type}`], { ns: 'workflow' })}
<BlockSelectorPreviewCardContent>
<BlockIcon size="md" className="mb-2" type={block.type} />
<div className="mb-1 system-md-medium text-text-primary">{label}</div>
<div className="system-xs-regular wrap-break-word text-text-secondary">{description}</div>
{showDifyTeamAuthor && (
<div className="mt-1 system-xs-regular text-text-tertiary">
{t(($) => $.author, { ns: 'tools' })} {t(($) => $.difyTeam, { ns: 'workflow' })}
</div>
<div className="system-xs-regular wrap-break-word text-text-secondary">{description}</div>
{showDifyTeamAuthor && (
<div className="mt-1 system-xs-regular text-text-tertiary">
{t(($) => $.author, { ns: 'tools' })} {t(($) => $.difyTeam, { ns: 'workflow' })}
</div>
)}
</div>
</PreviewCardContent>
)}
</BlockSelectorPreviewCardContent>
)
}

535
web/app/components/workflow/block-selector/tabs.tsx
View File

@ -1,331 +1,266 @@
import type { Dispatch, FC, ReactNode, SetStateAction } from 'react'
import type { BlockEnum, NodeDefault, OnSelectBlock, ToolWithProvider } from '../types'
import type { ReactNode, Ref } from 'react'
import type { BlockEnum, NodeDefault, OnNodeAdd, OnSelectBlock, ToolWithProvider } from '../types'
import { cn } from '@langgenius/dify-ui/cn'
import { Tabs, TabsIndicator, TabsList, TabsPanel, TabsTab } from '@langgenius/dify-ui/tabs'
import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
import { useSuspenseQuery } from '@tanstack/react-query'
import { memo, useEffect, useMemo } from 'react'
import { useDebounce } from 'ahooks'
import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import { useDocLink } from '@/context/i18n'
import { systemFeaturesQueryOptions } from '@/features/system-features/client'
import { useFeaturedToolsRecommendations } from '@/service/use-plugins'
import {
useAllBuiltInTools,
useAllCustomTools,
useAllMCPTools,
useAllWorkflowTools,
useInvalidateAllBuiltInTools,
} from '@/service/use-tools'
import { basePath } from '@/utils/var'
import { useWorkflowStore } from '../store'
import { SearchInput } from '@/app/components/base/search-input'
import SearchBox from '@/app/components/plugins/marketplace/search-box'
import AllStartBlocks from './all-start-blocks'
import AllTools from './all-tools'
import Blocks from './blocks'
import DataSources from './data-sources'
import { TabsEnum } from './types'
import Snippets from './snippets'
import { ToolPanel } from './tool-panel'
import { TabType } from './types'
type TabsProps = {
activeTab: TabsEnum
onActiveTabChange: (activeTab: TabsEnum) => void
searchText: string
tags: string[]
onTagsChange: Dispatch<SetStateAction<string[]>>
type TabConfig = {
key: TabType
name: string
disabled?: boolean
disabledTip?: ReactNode
}
type SelectorContentProps = {
defaultTab: TabType
standalonePanel?: TabType
tabs: TabConfig[]
searchInputRef: Ref<HTMLInputElement>
onSelect: OnSelectBlock
onRequestClose: () => void
availableBlocksTypes?: BlockEnum[]
blocks: NodeDefault[]
dataSources?: ToolWithProvider[]
tabs: Array<{
key: TabsEnum
name: string
disabled?: boolean
disabledTip?: ReactNode
disabledTipLinkKey?: 'startNodesDocs'
}>
filterElem: React.ReactNode
noBlocks?: boolean
noTools?: boolean
forceShowStartContent?: boolean // Force show Start content even when noBlocks=true
allowStartNodeSelection?: boolean // Allow user input option even when trigger node already exists (e.g. change-node flow or when no Start node yet).
allowStartNodeSelection?: boolean
hasUserInputNode?: boolean
hasTriggerNode?: boolean
snippetsElem?: React.ReactNode
snippetInsertPayload?: Parameters<OnNodeAdd>[1]
}
const normalizeToolList = (list: ToolWithProvider[] | undefined, currentBasePath?: string) => {
if (!list || !currentBasePath) return list
let changed = false
const normalized = list.map((provider) => {
if (typeof provider.icon !== 'string') return provider
const shouldPrefix =
provider.icon.startsWith('/') && !provider.icon.startsWith(`${currentBasePath}/`)
if (!shouldPrefix) return provider
changed = true
return {
...provider,
icon: `${currentBasePath}${provider.icon}`,
}
})
return changed ? normalized : list
}
const getStoreToolUpdates = ({
state,
buildInTools,
customTools,
workflowTools,
mcpTools,
}: {
state: {
buildInTools?: ToolWithProvider[]
customTools?: ToolWithProvider[]
workflowTools?: ToolWithProvider[]
mcpTools?: ToolWithProvider[]
}
buildInTools?: ToolWithProvider[]
customTools?: ToolWithProvider[]
workflowTools?: ToolWithProvider[]
mcpTools?: ToolWithProvider[]
}) => {
const updates: Partial<typeof state> = {}
if (buildInTools !== undefined && state.buildInTools !== buildInTools)
updates.buildInTools = buildInTools
if (customTools !== undefined && state.customTools !== customTools)
updates.customTools = customTools
if (workflowTools !== undefined && state.workflowTools !== workflowTools)
updates.workflowTools = workflowTools
if (mcpTools !== undefined && state.mcpTools !== mcpTools) updates.mcpTools = mcpTools
return updates
}
const TabHeaderItem = ({
function TabHeaderItem({
tab,
activeTab,
onActiveTabChange,
disabledTip,
disabledTipLinkHref,
disabledTipLinkLabel,
fallbackDisabledTip,
}: {
tab: TabsProps['tabs'][number]
activeTab: TabsEnum
onActiveTabChange: (activeTab: TabsEnum) => void
disabledTip: ReactNode
disabledTipLinkHref?: string
disabledTipLinkLabel?: string
}) => {
const className = cn(
'relative mr-0.5 flex h-8 items-center rounded-t-lg px-3 system-sm-medium',
tab.disabled
? 'cursor-not-allowed text-text-disabled opacity-60'
: activeTab === tab.key
? 'sm-no-bottom cursor-default bg-components-panel-bg text-text-accent'
: 'cursor-pointer text-text-tertiary',
tab: TabConfig
fallbackDisabledTip: ReactNode
}) {
const tabElement = (
<TabsTab
value={tab.key}
disabled={tab.disabled}
className={cn(
'z-10 mr-0.5 h-8 rounded-t-lg border-b-0 px-3 py-0 system-sm-medium text-text-tertiary',
'data-active:cursor-default data-active:border-transparent data-active:text-text-accent',
'data-disabled:text-text-disabled data-disabled:opacity-60',
)}
>
{tab.name}
</TabsTab>
)
const handleClick = () => {
if (tab.disabled || activeTab === tab.key) return
onActiveTabChange(tab.key)
if (!tab.disabled) return tabElement
return (
<Tooltip>
<TooltipTrigger render={tabElement} />
<TooltipContent placement="top" className="max-w-[230px] rounded-xl px-4 py-3.5">
{tab.disabledTip || fallbackDisabledTip}
</TooltipContent>
</Tooltip>
)
}
function SelectorContent({
defaultTab,
standalonePanel,
tabs,
searchInputRef,
onSelect,
onRequestClose,
availableBlocksTypes,
blocks,
dataSources = [],
allowStartNodeSelection = false,
hasUserInputNode = false,
hasTriggerNode = false,
snippetInsertPayload,
}: SelectorContentProps) {
const { t } = useTranslation()
const [searchText, setSearchText] = useState('')
const debouncedSearchText = useDebounce(searchText, { wait: 500 })
const [tags, setTags] = useState<string[]>([])
const fallbackDisabledTip = t(($) => $['tabs.startDisabledTip'], { ns: 'workflow' })
const renderSearchFilter = (tab: TabType, inputRef?: Ref<HTMLInputElement>) => {
if (tab === TabType.Snippets) return null
const filter = (() => {
if (tab === TabType.Start) {
return (
<SearchBox
ref={inputRef}
search={searchText}
onSearchChange={setSearchText}
tags={tags}
onTagsChange={setTags}
placeholder={t(($) => $['tabs.searchTrigger'], { ns: 'workflow' })}
inputClassName="grow"
/>
)
}
if (tab === TabType.Tools) {
return (
<SearchBox
ref={inputRef}
search={searchText}
onSearchChange={setSearchText}
tags={tags}
onTagsChange={setTags}
placeholder={t(($) => $.searchTools, { ns: 'plugin' })!}
inputClassName="grow"
/>
)
}
return (
<SearchInput
ref={inputRef}
value={searchText}
placeholder={
tab === TabType.Blocks
? t(($) => $['tabs.searchBlock'], { ns: 'workflow' })
: t(($) => $['tabs.searchDataSource'], { ns: 'workflow' })
}
aria-label={
tab === TabType.Blocks
? t(($) => $['tabs.searchBlock'], { ns: 'workflow' })
: t(($) => $['tabs.searchDataSource'], { ns: 'workflow' })
}
onValueChange={setSearchText}
/>
)
})()
return <div className="relative m-2">{filter}</div>
}
if (tab.disabled) {
return (
<Tooltip key={tab.key}>
<TooltipTrigger
render={
<button
type="button"
className={className}
aria-disabled={tab.disabled}
onClick={handleClick}
>
{tab.name}
</button>
}
/>
<TooltipContent placement="top" className="max-w-[230px] rounded-xl px-4 py-3.5">
<div className="flex flex-col items-start gap-1 system-xs-regular text-text-secondary">
<p>{disabledTip}</p>
{disabledTipLinkHref && disabledTipLinkLabel && (
<a
className="text-text-accent hover:underline"
href={disabledTipLinkHref}
target="_blank"
rel="noopener noreferrer"
onClick={(e) => e.stopPropagation()}
>
{disabledTipLinkLabel}
</a>
)}
const renderPanel = (tab: TabType, inputRef?: Ref<HTMLInputElement>) => {
const searchFilter = renderSearchFilter(tab, inputRef)
if (tab === TabType.Start) {
return (
<>
{searchFilter}
<div className="border-t border-divider-subtle">
<AllStartBlocks
allowUserInputSelection={allowStartNodeSelection}
hasUserInputNode={hasUserInputNode}
hasTriggerNode={hasTriggerNode}
searchText={debouncedSearchText}
onSelect={onSelect}
availableBlocksTypes={availableBlocksTypes}
tags={tags}
/>
</div>
</TooltipContent>
</Tooltip>
</>
)
}
if (tab === TabType.Blocks) {
return (
<>
{searchFilter}
<div className="border-t border-divider-subtle">
<Blocks
searchText={searchText}
onSelect={onSelect}
availableBlocksTypes={availableBlocksTypes}
blocks={blocks}
/>
</div>
</>
)
}
if (tab === TabType.Sources) {
return (
<>
{searchFilter}
<div className="border-t border-divider-subtle">
<DataSources searchText={searchText} onSelect={onSelect} dataSources={dataSources} />
</div>
</>
)
}
if (tab === TabType.Tools) {
return (
<>
{searchFilter}
<ToolPanel
searchText={debouncedSearchText}
onSelect={onSelect}
tags={tags}
onTagsChange={setTags}
dataSources={dataSources}
/>
</>
)
}
return (
<Snippets
searchText={searchText}
onSearchTextChange={setSearchText}
insertPayload={snippetInsertPayload}
onInserted={onRequestClose}
/>
)
}
if (standalonePanel) {
return (
<div className="w-full min-w-0">
{renderPanel(
standalonePanel,
standalonePanel === TabType.Snippets ? undefined : searchInputRef,
)}
</div>
)
}
return (
<div key={tab.key} className={className} aria-disabled={tab.disabled} onClick={handleClick}>
{tab.name}
</div>
)
}
const Tabs: FC<TabsProps> = ({
activeTab,
onActiveTabChange,
tags,
onTagsChange,
searchText,
onSelect,
availableBlocksTypes,
blocks,
dataSources = [],
tabs = [],
filterElem,
noBlocks,
noTools,
forceShowStartContent = false,
allowStartNodeSelection = false,
hasUserInputNode = false,
hasTriggerNode = false,
snippetsElem,
}) => {
const { t } = useTranslation()
const docLink = useDocLink()
const { data: buildInTools } = useAllBuiltInTools()
const { data: customTools } = useAllCustomTools()
const { data: workflowTools } = useAllWorkflowTools()
const { data: mcpTools } = useAllMCPTools()
const invalidateBuiltInTools = useInvalidateAllBuiltInTools()
const { data: enable_marketplace } = useSuspenseQuery({
...systemFeaturesQueryOptions(),
select: (s) => s.enable_marketplace,
})
const workflowStore = useWorkflowStore()
const inRAGPipeline = dataSources.length > 0
const { plugins: featuredPlugins = [], isLoading: isFeaturedLoading } =
useFeaturedToolsRecommendations(enable_marketplace && !inRAGPipeline)
const normalizedBuiltInTools = useMemo(
() => normalizeToolList(buildInTools, basePath),
[buildInTools],
)
const normalizedCustomTools = useMemo(
() => normalizeToolList(customTools, basePath),
[customTools],
)
const normalizedWorkflowTools = useMemo(
() => normalizeToolList(workflowTools, basePath),
[workflowTools],
)
const normalizedMcpTools = useMemo(() => normalizeToolList(mcpTools, basePath), [mcpTools])
const disabledTip = t(($) => $['tabs.startDisabledTip'], { ns: 'workflow' })
useEffect(() => {
workflowStore.setState((state) => {
const updates = getStoreToolUpdates({
state,
buildInTools: normalizedBuiltInTools,
customTools: normalizedCustomTools,
workflowTools: normalizedWorkflowTools,
mcpTools: normalizedMcpTools,
})
if (!Object.keys(updates).length) return state
return {
...state,
...updates,
}
})
}, [
normalizedBuiltInTools,
normalizedCustomTools,
normalizedMcpTools,
normalizedWorkflowTools,
workflowStore,
])
return (
<div className="w-full min-w-0" onClick={(e) => e.stopPropagation()}>
{!noBlocks && (
<div className="relative flex w-full min-w-0 bg-background-section-burn pt-1 pl-1">
{tabs.map((tab) => (
<TabHeaderItem
key={tab.key}
tab={tab}
activeTab={activeTab}
onActiveTabChange={onActiveTabChange}
disabledTip={tab.disabledTip || disabledTip}
disabledTipLinkHref={
tab.disabledTipLinkKey === 'startNodesDocs'
? docLink('/use-dify/nodes/trigger/overview')
: undefined
}
disabledTipLinkLabel={
tab.disabledTipLinkKey === 'startNodesDocs'
? t(($) => $['tabs.startDisabledTipLearnMore'], { ns: 'workflow' })
: undefined
}
/>
))}
</div>
)}
{filterElem}
{activeTab === TabsEnum.Start && (!noBlocks || forceShowStartContent) && (
<div className="border-t border-divider-subtle">
<AllStartBlocks
allowUserInputSelection={allowStartNodeSelection}
hasUserInputNode={hasUserInputNode}
hasTriggerNode={hasTriggerNode}
searchText={searchText}
onSelect={onSelect}
availableBlocksTypes={availableBlocksTypes}
tags={tags}
/>
</div>
)}
{activeTab === TabsEnum.Blocks && !noBlocks && (
<div className="border-t border-divider-subtle">
<Blocks
searchText={searchText}
onSelect={onSelect}
availableBlocksTypes={availableBlocksTypes}
blocks={blocks}
/>
</div>
)}
{activeTab === TabsEnum.Sources && !!dataSources.length && (
<div className="border-t border-divider-subtle">
<DataSources searchText={searchText} onSelect={onSelect} dataSources={dataSources} />
</div>
)}
{activeTab === TabsEnum.Tools && !noTools && (
<AllTools
searchText={searchText}
onSelect={onSelect}
tags={tags}
canNotSelectMultiple
buildInTools={normalizedBuiltInTools || []}
customTools={normalizedCustomTools || []}
workflowTools={normalizedWorkflowTools || []}
mcpTools={normalizedMcpTools || []}
onTagsChange={onTagsChange}
isInRAGPipeline={inRAGPipeline}
featuredPlugins={featuredPlugins}
featuredLoading={isFeaturedLoading}
showFeatured={enable_marketplace && !inRAGPipeline}
onFeaturedInstallSuccess={async () => {
invalidateBuiltInTools()
<Tabs defaultValue={defaultTab} className="w-full min-w-0">
<TabsList className="relative w-full min-w-0 gap-0 bg-background-section-burn pt-1 pl-1">
{tabs.map((tab) => (
<TabHeaderItem key={tab.key} tab={tab} fallbackDisabledTip={fallbackDisabledTip} />
))}
<TabsIndicator
className="sm-no-bottom pointer-events-none absolute left-0 rounded-t-lg bg-components-panel-bg transition-[translate,width] duration-150 ease-in-out motion-reduce:transition-none"
style={{
top: 'var(--active-tab-top)',
translate: 'var(--active-tab-left)',
width: 'var(--active-tab-width)',
height: 'var(--active-tab-height)',
}}
/>
)}
{activeTab === TabsEnum.Snippets && Boolean(snippetsElem) ? (
<div className="border-t border-divider-subtle">{snippetsElem}</div>
) : null}
</div>
</TabsList>
{tabs.map((tab) => (
<TabsPanel
key={tab.key}
value={tab.key}
className="focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden focus-visible:ring-inset"
>
{renderPanel(
tab.key,
tab.key === defaultTab && tab.key !== TabType.Snippets ? searchInputRef : undefined,
)}
</TabsPanel>
))}
</Tabs>
)
}
export default memo(Tabs)
export { SelectorContent }

151
web/app/components/workflow/block-selector/tool-panel.tsx Normal file
View File

@ -0,0 +1,151 @@
import type { OnSelectBlock, ToolWithProvider } from '../types'
import { useSuspenseQuery } from '@tanstack/react-query'
import { useEffect, useMemo } from 'react'
import { systemFeaturesQueryOptions } from '@/features/system-features/client'
import { useFeaturedToolsRecommendations } from '@/service/use-plugins'
import {
useAllBuiltInTools,
useAllCustomTools,
useAllMCPTools,
useAllWorkflowTools,
useInvalidateAllBuiltInTools,
} from '@/service/use-tools'
import { basePath } from '@/utils/var'
import { useWorkflowStore } from '../store'
import AllTools from './all-tools'
function normalizeToolList(list: ToolWithProvider[] | undefined, currentBasePath?: string) {
if (!list || !currentBasePath) return list
let changed = false
const normalized = list.map((provider) => {
if (typeof provider.icon !== 'string') return provider
const shouldPrefix =
provider.icon.startsWith('/') && !provider.icon.startsWith(`${currentBasePath}/`)
if (!shouldPrefix) return provider
changed = true
return {
...provider,
icon: `${currentBasePath}${provider.icon}`,
}
})
return changed ? normalized : list
}
function getStoreToolUpdates({
state,
buildInTools,
customTools,
workflowTools,
mcpTools,
}: {
state: {
buildInTools?: ToolWithProvider[]
customTools?: ToolWithProvider[]
workflowTools?: ToolWithProvider[]
mcpTools?: ToolWithProvider[]
}
buildInTools?: ToolWithProvider[]
customTools?: ToolWithProvider[]
workflowTools?: ToolWithProvider[]
mcpTools?: ToolWithProvider[]
}) {
const updates: Partial<typeof state> = {}
if (buildInTools !== undefined && state.buildInTools !== buildInTools)
updates.buildInTools = buildInTools
if (customTools !== undefined && state.customTools !== customTools)
updates.customTools = customTools
if (workflowTools !== undefined && state.workflowTools !== workflowTools)
updates.workflowTools = workflowTools
if (mcpTools !== undefined && state.mcpTools !== mcpTools) updates.mcpTools = mcpTools
return updates
}
export function ToolPanel({
searchText,
tags,
onTagsChange,
onSelect,
dataSources,
}: {
searchText: string
tags: string[]
onTagsChange: (tags: string[]) => void
onSelect: OnSelectBlock
dataSources: ToolWithProvider[]
}) {
const { data: buildInTools } = useAllBuiltInTools()
const { data: customTools } = useAllCustomTools()
const { data: workflowTools } = useAllWorkflowTools()
const { data: mcpTools } = useAllMCPTools()
const invalidateBuiltInTools = useInvalidateAllBuiltInTools()
const { data: enableMarketplace } = useSuspenseQuery({
...systemFeaturesQueryOptions(),
select: (systemFeatures) => systemFeatures.enable_marketplace,
})
const workflowStore = useWorkflowStore()
const inRAGPipeline = dataSources.length > 0
const { plugins: featuredPlugins = [], isLoading: isFeaturedLoading } =
useFeaturedToolsRecommendations(enableMarketplace && !inRAGPipeline)
const normalizedBuiltInTools = useMemo(
() => normalizeToolList(buildInTools, basePath),
[buildInTools],
)
const normalizedCustomTools = useMemo(
() => normalizeToolList(customTools, basePath),
[customTools],
)
const normalizedWorkflowTools = useMemo(
() => normalizeToolList(workflowTools, basePath),
[workflowTools],
)
const normalizedMcpTools = useMemo(() => normalizeToolList(mcpTools, basePath), [mcpTools])
useEffect(() => {
workflowStore.setState((state) => {
const updates = getStoreToolUpdates({
state,
buildInTools: normalizedBuiltInTools,
customTools: normalizedCustomTools,
workflowTools: normalizedWorkflowTools,
mcpTools: normalizedMcpTools,
})
if (!Object.keys(updates).length) return state
return {
...state,
...updates,
}
})
}, [
normalizedBuiltInTools,
normalizedCustomTools,
normalizedMcpTools,
normalizedWorkflowTools,
workflowStore,
])
return (
<AllTools
searchText={searchText}
onSelect={onSelect}
tags={tags}
canNotSelectMultiple
buildInTools={normalizedBuiltInTools || []}
customTools={normalizedCustomTools || []}
workflowTools={normalizedWorkflowTools || []}
mcpTools={normalizedMcpTools || []}
onTagsChange={onTagsChange}
isInRAGPipeline={inRAGPipeline}
featuredPlugins={featuredPlugins}
featuredLoading={isFeaturedLoading}
showFeatured={enableMarketplace && !inRAGPipeline}
onFeaturedInstallSuccess={invalidateBuiltInTools}
/>
)
}

5
web/app/components/workflow/block-selector/tool/__tests__/action-item.spec.tsx
View File

@ -45,7 +45,10 @@ describe('ToolActionItem', () => {
/>,
)
await user.click(screen.getByRole('button', { name: 'Search Tool' }))
const toolButton = screen.getByRole('button', { name: 'Search Tool' })
expect(toolButton).toHaveAccessibleDescription('Search Tool description')
await user.click(toolButton)
expect(onSelect).toHaveBeenCalledWith(
BlockEnum.Tool,

70
web/app/components/workflow/block-selector/tool/action-item.tsx
View File

@ -4,7 +4,7 @@ import type { ToolWithProvider } from '../../types'
import type { ToolDefaultValue } from '../types'
import type { Tool } from '@/app/components/tools/types'
import { cn } from '@langgenius/dify-ui/cn'
import { PreviewCardContent, PreviewCardTrigger } from '@langgenius/dify-ui/preview-card'
import { PreviewCardTrigger } from '@langgenius/dify-ui/preview-card'
import * as React from 'react'
import { useMemo } from 'react'
import { useTranslation } from 'react-i18next'
@ -15,6 +15,7 @@ import { Theme } from '@/types/app'
import { basePath } from '@/utils/var'
import BlockIcon from '../../block-icon'
import { BlockEnum } from '../../types'
import { BlockSelectorPreviewCardContent } from '../preview-card'
const normalizeProviderIcon = (icon?: ToolWithProvider['icon']) => {
if (!icon) return icon
@ -57,6 +58,8 @@ const ToolItem: FC<Props> = ({
const { t } = useTranslation()
const language = useGetLanguage()
const previewDescriptionId = React.useId()
const previewDescription = payload.description[language]
const { theme } = useTheme()
const normalizedIcon = useMemo<ToolWithProvider['icon']>(() => {
return normalizeProviderIcon(provider.icon) ?? provider.icon
@ -72,8 +75,8 @@ const ToolItem: FC<Props> = ({
const row = (
<button
key={payload.name}
type="button"
aria-describedby={previewDescription ? previewDescriptionId : undefined}
disabled={disabled}
className="flex w-full cursor-pointer items-center justify-between rounded-lg border-none bg-transparent pr-1 pl-[21px] text-left hover:bg-state-base-hover focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden disabled:cursor-default"
onClick={() => {
@ -108,11 +111,7 @@ const ToolItem: FC<Props> = ({
})
}}
>
<div
className={cn(
'truncate border-l-2 border-divider-subtle py-2 pl-4 system-sm-medium text-text-secondary',
)}
>
<div className="truncate border-l-2 border-divider-subtle py-2 pl-4 system-sm-medium text-text-secondary">
<span className={cn(disabled && 'opacity-30')}>{payload.label[language]}</span>
</div>
{isAdded && (
@ -124,22 +123,24 @@ const ToolItem: FC<Props> = ({
)
return (
// Preview is supplementary: provider icon, tool label and description are all
// reachable from the node inspector after the row is clicked to add the tool,
// so hover/focus-only activation is a11y-safe. See
// packages/dify-ui/AGENTS.md → Overlay Primitive Selection.
<PreviewCardTrigger
key={payload.name}
delay={150}
closeDelay={150}
handle={previewCardHandle}
payload={{
providerIcon,
payload,
language,
}}
render={row}
/>
<>
<PreviewCardTrigger
delay={150}
closeDelay={150}
handle={previewCardHandle}
payload={{
providerIcon,
payload,
language,
}}
render={row}
/>
{previewDescription && (
<span id={previewDescriptionId} className="sr-only">
{previewDescription}
</span>
)}
</>
)
}
@ -151,22 +152,15 @@ export function ToolActionPreviewCard({ payload }: ToolActionPreviewCardProps) {
if (!payload) return null
return (
<PreviewCardContent placement="right" popupClassName="w-[200px] px-3 py-2.5">
<div>
<BlockIcon
size="md"
className="mb-2"
type={BlockEnum.Tool}
toolIcon={payload.providerIcon}
/>
<div className="mb-1 text-sm/5 text-text-primary">
{payload.payload.label[payload.language]}
</div>
<div className="text-xs leading-[18px] wrap-break-word text-text-secondary">
{payload.payload.description[payload.language]}
</div>
<BlockSelectorPreviewCardContent>
<BlockIcon size="md" className="mb-2" type={BlockEnum.Tool} toolIcon={payload.providerIcon} />
<div className="mb-1 text-sm/5 wrap-break-word text-text-primary">
{payload.payload.label[payload.language]}
</div>
</PreviewCardContent>
<div className="text-xs leading-[18px] wrap-break-word text-text-secondary">
{payload.payload.description[payload.language]}
</div>
</BlockSelectorPreviewCardContent>
)
}

4
web/app/components/workflow/block-selector/tools.tsx
View File

@ -1,6 +1,6 @@
import type { BlockEnum, ToolWithProvider } from '../types'
import type { ToolActionPreviewPayload } from './tool/action-item'
import type { ToolDefaultValue, ToolTypeEnum, ToolValue } from './types'
import type { ToolDefaultValue, ToolType, ToolValue } from './types'
import { cn } from '@langgenius/dify-ui/cn'
import { createPreviewCardHandle, PreviewCard } from '@langgenius/dify-ui/preview-card'
import { memo, useMemo, useRef } from 'react'
@ -19,7 +19,7 @@ type ToolsProps = {
tools: ToolWithProvider[]
viewType: ViewType
hasSearchText: boolean
toolType?: ToolTypeEnum
toolType?: ToolType
isAgent?: boolean
className?: string
indexBarClassName?: string

5
web/app/components/workflow/block-selector/trigger-plugin/__tests__/trigger-plugin.spec.tsx
View File

@ -111,7 +111,10 @@ describe('trigger plugin selector components', () => {
/>,
)
await user.click(screen.getByText('On Created'))
const triggerButton = screen.getByRole('button', { name: 'On Created' })
expect(triggerButton).toHaveAccessibleDescription('On Created description')
await user.click(triggerButton)
expect(onSelect).toHaveBeenCalledWith(
BlockEnum.TriggerPlugin,

67
web/app/components/workflow/block-selector/trigger-plugin/action-item.tsx
View File

@ -3,12 +3,13 @@ import type { ComponentProps, FC } from 'react'
import type { TriggerDefaultValue, TriggerWithProvider } from '../types'
import type { Event } from '@/app/components/tools/types'
import { cn } from '@langgenius/dify-ui/cn'
import { PreviewCardContent, PreviewCardTrigger } from '@langgenius/dify-ui/preview-card'
import { PreviewCardTrigger } from '@langgenius/dify-ui/preview-card'
import * as React from 'react'
import { useTranslation } from 'react-i18next'
import { useGetLanguage } from '@/context/i18n'
import BlockIcon from '../../block-icon'
import { BlockEnum } from '../../types'
import { BlockSelectorPreviewCardContent } from '../preview-card'
type Props = Readonly<{
provider: TriggerWithProvider
@ -38,12 +39,14 @@ const TriggerPluginActionItem: FC<Props> = ({
}) => {
const { t } = useTranslation()
const language = useGetLanguage()
const previewDescriptionId = React.useId()
const previewDescription = payload.description[language]
const row = (
<button
type="button"
aria-describedby={previewDescription ? previewDescriptionId : undefined}
disabled={disabled}
key={payload.name}
className={cn(
'flex w-full items-center justify-between rounded-lg border-0 bg-transparent pr-1 pl-[21px] text-left focus-visible:ring-1 focus-visible:ring-components-input-border-hover focus-visible:outline-hidden',
disabled ? 'cursor-default' : 'cursor-pointer hover:bg-state-base-hover',
@ -74,11 +77,7 @@ const TriggerPluginActionItem: FC<Props> = ({
})
}}
>
<div
className={cn(
'truncate border-l-2 border-divider-subtle py-2 pl-4 system-sm-medium text-text-secondary',
)}
>
<div className="truncate border-l-2 border-divider-subtle py-2 pl-4 system-sm-medium text-text-secondary">
<span className={cn(disabled && 'opacity-30')}>{payload.label[language]}</span>
</div>
{isAdded && (
@ -90,18 +89,20 @@ const TriggerPluginActionItem: FC<Props> = ({
)
return (
// Preview is supplementary: provider icon, event label and description are all
// reachable from the node inspector after the row is clicked to add the trigger,
// so hover/focus-only activation is a11y-safe. See
// packages/dify-ui/AGENTS.md → Overlay Primitive Selection.
<PreviewCardTrigger
key={payload.name}
delay={150}
closeDelay={150}
handle={previewCardHandle}
payload={{ provider, payload, language }}
render={row}
/>
<>
<PreviewCardTrigger
delay={150}
closeDelay={150}
handle={previewCardHandle}
payload={{ provider, payload, language }}
render={row}
/>
{previewDescription && (
<span id={previewDescriptionId} className="sr-only">
{previewDescription}
</span>
)}
</>
)
}
@ -113,22 +114,20 @@ export function TriggerPluginActionPreviewCard({ payload }: TriggerPluginActionP
if (!payload) return null
return (
<PreviewCardContent placement="right" popupClassName="w-[224px] px-3 py-2.5">
<div>
<BlockIcon
size="md"
className="mb-2"
type={BlockEnum.TriggerPlugin}
toolIcon={payload.provider.icon}
/>
<div className="mb-1 text-sm/5 text-text-primary">
{payload.payload.label[payload.language]}
</div>
<div className="text-xs leading-[18px] wrap-break-word text-text-secondary">
{payload.payload.description[payload.language]}
</div>
<BlockSelectorPreviewCardContent>
<BlockIcon
size="md"
className="mb-2"
type={BlockEnum.TriggerPlugin}
toolIcon={payload.provider.icon}
/>
<div className="mb-1 text-sm/5 text-text-primary">
{payload.payload.label[payload.language]}
</div>
</PreviewCardContent>
<div className="text-xs leading-[18px] wrap-break-word text-text-secondary">
{payload.payload.description[payload.language]}
</div>
</BlockSelectorPreviewCardContent>
)
}

63
web/app/components/workflow/block-selector/types.ts
View File

@ -9,29 +9,35 @@ import type {
import type { Collection, Event } from '../../tools/types'
import type { TypeWithI18N } from '@/app/components/header/account-setting/model-provider-page/declarations'
export enum TabsEnum {
Start = 'start',
Blocks = 'blocks',
Tools = 'tools',
Sources = 'sources',
Snippets = 'snippets',
}
export const TabType = {
Start: 'start',
Blocks: 'blocks',
Tools: 'tools',
Sources: 'sources',
Snippets: 'snippets',
} as const
export enum ToolTypeEnum {
All = 'all',
BuiltIn = 'built-in',
Custom = 'custom',
Workflow = 'workflow',
MCP = 'mcp',
}
export type TabType = (typeof TabType)[keyof typeof TabType]
export enum BlockClassificationEnum {
Default = '-',
QuestionUnderstand = 'question-understand',
Logic = 'logic',
Transform = 'transform',
Utilities = 'utilities',
}
export const ToolType = {
All: 'all',
BuiltIn: 'built-in',
Custom: 'custom',
Workflow: 'workflow',
MCP: 'mcp',
} as const
export type ToolType = (typeof ToolType)[keyof typeof ToolType]
export const BlockClassification = {
Default: '-',
QuestionUnderstand: 'question-understand',
Logic: 'logic',
Transform: 'transform',
Utilities: 'utilities',
} as const
export type BlockClassification = (typeof BlockClassification)[keyof typeof BlockClassification]
type PluginCommonDefaultValue = {
provider_id: string
@ -215,17 +221,20 @@ export type TriggerWithProvider = Collection & {
// Trigger subscription instance types
export enum TriggerCredentialTypeEnum {
ApiKey = 'api-key',
Oauth2 = 'oauth2',
Unauthorized = 'unauthorized',
}
export const TriggerCredentialType = {
ApiKey: 'api-key',
Oauth2: 'oauth2',
Unauthorized: 'unauthorized',
} as const
export type TriggerCredentialType =
(typeof TriggerCredentialType)[keyof typeof TriggerCredentialType]
type TriggerSubscriptionStructure = {
id: string
name: string
provider: string
credential_type: TriggerCredentialTypeEnum
credential_type: TriggerCredentialType
credentials: Record<string, unknown>
endpoint: string
parameters: Record<string, unknown>

4
web/app/components/workflow/hooks/__tests__/use-available-blocks.spec.ts
View File

@ -1,6 +1,6 @@
import type { NodeDefault } from '../../types'
import { renderWorkflowHook } from '../../__tests__/workflow-test-env'
import { BlockClassificationEnum } from '../../block-selector/types'
import { BlockClassification } from '../../block-selector/types'
import { BlockEnum } from '../../types'
import { useAvailableBlocks } from '../use-available-blocks'
@ -29,7 +29,7 @@ const mockNodeTypes = [
function createNodeDefault(type: BlockEnum): NodeDefault {
return {
metaData: {
classification: BlockClassificationEnum.Default,
classification: BlockClassification.Default,
sort: 0,
type,
title: type,

4
web/app/components/workflow/hooks/__tests__/use-workflow.spec.ts
View File

@ -6,7 +6,7 @@ import {
renderWorkflowFlowHook,
renderWorkflowHook,
} from '../../__tests__/workflow-test-env'
import { BlockClassificationEnum } from '../../block-selector/types'
import { BlockClassification } from '../../block-selector/types'
import { BlockEnum, WorkflowRunningStatus } from '../../types'
import {
useIsChatMode,
@ -32,7 +32,7 @@ beforeEach(() => {
function createNodeDefault(type: BlockEnum): NodeDefault {
return {
metaData: {
classification: BlockClassificationEnum.Default,
classification: BlockClassification.Default,
sort: 0,
type,
title: type,

4
web/app/components/workflow/nodes/_base/node.tsx
View File

@ -7,7 +7,7 @@ import { cloneElement, memo, useMemo, useRef } from 'react'
import { useTranslation } from 'react-i18next'
import { UserAvatarList } from '@/app/components/base/user-avatar-list'
import BlockIcon from '@/app/components/workflow/block-icon'
import { ToolTypeEnum } from '@/app/components/workflow/block-selector/types'
import { ToolType } from '@/app/components/workflow/block-selector/types'
import { useCollaboration } from '@/app/components/workflow/collaboration/hooks/use-collaboration'
import { useNodesReadOnly, useToolIcon } from '@/app/components/workflow/hooks'
import useInspectVarsCrud from '@/app/components/workflow/hooks/use-inspect-vars-crud'
@ -271,7 +271,7 @@ const BaseNode: FC<BaseNodeProps> = ({ id, data, children }) => {
{hasRetryNode(data.type) && <RetryOnNode id={id} data={data} />}
{hasErrorHandleNode(data.type) && <ErrorHandleOnNode id={id} data={data} />}
<NodeDescription data={data} />
{data.type === BlockEnum.Tool && data.provider_type === ToolTypeEnum.MCP && (
{data.type === BlockEnum.Tool && data.provider_type === ToolType.MCP && (
<div className="px-3 pb-2">
<CopyID content={data.provider_id || ''} />
</div>

4
web/app/components/workflow/nodes/assigner/default.ts
View File

@ -1,7 +1,7 @@
import type { TFunction } from 'i18next'
import type { NodeDefault } from '../../types'
import type { AssignerNodeType } from './types'
import { BlockClassificationEnum } from '@/app/components/workflow/block-selector/types'
import { BlockClassification } from '@/app/components/workflow/block-selector/types'
import { BlockEnum } from '@/app/components/workflow/types'
import { genNodeMetaData } from '@/app/components/workflow/utils'
import { WriteMode } from './types'
@ -9,7 +9,7 @@ import { WriteMode } from './types'
const i18nPrefix = 'errorMsg'
const metaData = genNodeMetaData({
classification: BlockClassificationEnum.Transform,
classification: BlockClassification.Transform,
sort: 5,
type: BlockEnum.Assigner,
helpLinkUri: 'variable-assigner',

4
web/app/components/workflow/nodes/code/default.ts
View File

@ -1,7 +1,7 @@
import type { TFunction } from 'i18next'
import type { NodeDefault } from '../../types'
import type { CodeNodeType } from './types'
import { BlockClassificationEnum } from '@/app/components/workflow/block-selector/types'
import { BlockClassification } from '@/app/components/workflow/block-selector/types'
import { BlockEnum } from '@/app/components/workflow/types'
import { genNodeMetaData } from '@/app/components/workflow/utils'
import { CodeLanguage } from './types'
@ -9,7 +9,7 @@ import { CodeLanguage } from './types'
const i18nPrefix = 'errorMsg'
const metaData = genNodeMetaData({
classification: BlockClassificationEnum.Transform,
classification: BlockClassification.Transform,
sort: 1,
type: BlockEnum.Code,
})

4
web/app/components/workflow/nodes/document-extractor/default.ts
View File

@ -1,14 +1,14 @@
import type { TFunction } from 'i18next'
import type { NodeDefault } from '../../types'
import type { DocExtractorNodeType } from './types'
import { BlockClassificationEnum } from '@/app/components/workflow/block-selector/types'
import { BlockClassification } from '@/app/components/workflow/block-selector/types'
import { BlockEnum } from '@/app/components/workflow/types'
import { genNodeMetaData } from '@/app/components/workflow/utils'
const i18nPrefix = 'errorMsg'
const metaData = genNodeMetaData({
classification: BlockClassificationEnum.Transform,
classification: BlockClassification.Transform,
sort: 4,
type: BlockEnum.DocExtractor,
helpLinkUri: 'doc-extractor',

4
web/app/components/workflow/nodes/http/default.ts
View File

@ -1,13 +1,13 @@
import type { TFunction } from 'i18next'
import type { NodeDefault } from '../../types'
import type { BodyPayload, HttpNodeType } from './types'
import { BlockClassificationEnum } from '@/app/components/workflow/block-selector/types'
import { BlockClassification } from '@/app/components/workflow/block-selector/types'
import { BlockEnum } from '@/app/components/workflow/types'
import { genNodeMetaData } from '@/app/components/workflow/utils'
import { AuthorizationType, BodyType, Method } from './types'
const metaData = genNodeMetaData({
classification: BlockClassificationEnum.Utilities,
classification: BlockClassification.Utilities,
sort: 1,
type: BlockEnum.HttpRequest,
})

4
web/app/components/workflow/nodes/human-input/default.ts
View File

@ -1,7 +1,7 @@
import type { TFunction } from 'i18next'
import type { NodeDefault, Var } from '../../types'
import type { DeliveryMethod, EmailConfig, FormInputItem, HumanInputNodeType } from './types'
import { BlockClassificationEnum } from '@/app/components/workflow/block-selector/types'
import { BlockClassification } from '@/app/components/workflow/block-selector/types'
import { BlockEnum, VarType } from '@/app/components/workflow/types'
import { genNodeMetaData } from '@/app/components/workflow/utils'
import { DeliveryMethodType } from './types'
@ -9,7 +9,7 @@ import { DeliveryMethodType } from './types'
const i18nPrefix = 'nodes.humanInput.errorMsg'
const metaData = genNodeMetaData({
classification: BlockClassificationEnum.Logic,
classification: BlockClassification.Logic,
sort: 1,
type: BlockEnum.HumanInput,
})

4
web/app/components/workflow/nodes/if-else/default.ts
View File

@ -1,7 +1,7 @@
import type { TFunction } from 'i18next'
import type { NodeDefault } from '../../types'
import type { IfElseNodeType } from './types'
import { BlockClassificationEnum } from '@/app/components/workflow/block-selector/types'
import { BlockClassification } from '@/app/components/workflow/block-selector/types'
import { BlockEnum } from '@/app/components/workflow/types'
import { genNodeMetaData } from '@/app/components/workflow/utils'
import { VarType } from '../../types'
@ -11,7 +11,7 @@ import { isEmptyRelatedOperator } from './utils'
const i18nPrefix = 'errorMsg'
const metaData = genNodeMetaData({
classification: BlockClassificationEnum.Logic,
classification: BlockClassification.Logic,
sort: 1,
type: BlockEnum.IfElse,
helpLinkUri: 'ifelse',

4
web/app/components/workflow/nodes/iteration/default.ts
View File

@ -1,14 +1,14 @@
import type { TFunction } from 'i18next'
import type { NodeDefault } from '../../types'
import type { IterationNodeType } from './types'
import { BlockClassificationEnum } from '@/app/components/workflow/block-selector/types'
import { BlockClassification } from '@/app/components/workflow/block-selector/types'
import { genNodeMetaData } from '@/app/components/workflow/utils'
import { BlockEnum, ErrorHandleMode } from '../../types'
const i18nPrefix = ''
const metaData = genNodeMetaData({
classification: BlockClassificationEnum.Logic,
classification: BlockClassification.Logic,
sort: 2,
type: BlockEnum.Iteration,
isTypeFixed: true,

4
web/app/components/workflow/nodes/list-operator/default.ts
View File

@ -1,7 +1,7 @@
import type { TFunction } from 'i18next'
import type { NodeDefault } from '../../types'
import type { ListFilterNodeType } from './types'
import { BlockClassificationEnum } from '@/app/components/workflow/block-selector/types'
import { BlockClassification } from '@/app/components/workflow/block-selector/types'
import { genNodeMetaData } from '@/app/components/workflow/utils'
import { BlockEnum, VarType } from '../../types'
import { comparisonOperatorNotRequireValue } from '../if-else/utils'
@ -10,7 +10,7 @@ import { OrderBy } from './types'
const i18nPrefix = 'errorMsg'
const metaData = genNodeMetaData({
classification: BlockClassificationEnum.Utilities,
classification: BlockClassification.Utilities,
sort: 2,
type: BlockEnum.ListFilter,
})

4
web/app/components/workflow/nodes/loop-end/default.ts
View File

@ -1,11 +1,11 @@
import type { NodeDefault } from '../../types'
import type { SimpleNodeType } from '@/app/components/workflow/simple-node/types'
import { BlockClassificationEnum } from '@/app/components/workflow/block-selector/types'
import { BlockClassification } from '@/app/components/workflow/block-selector/types'
import { BlockEnum } from '@/app/components/workflow/types'
import { genNodeMetaData } from '@/app/components/workflow/utils'
const metaData = genNodeMetaData({
classification: BlockClassificationEnum.Logic,
classification: BlockClassification.Logic,
sort: 2,
type: BlockEnum.LoopEnd,
isSingleton: true,

4
web/app/components/workflow/nodes/loop/default.ts
View File

@ -2,7 +2,7 @@ import type { TFunction } from 'i18next'
import type { NodeDefault } from '../../types'
import type { LoopNodeType } from './types'
import type { I18nKeysByPrefix } from '@/types/i18n'
import { BlockClassificationEnum } from '@/app/components/workflow/block-selector/types'
import { BlockClassification } from '@/app/components/workflow/block-selector/types'
import { BlockEnum } from '@/app/components/workflow/types'
import { genNodeMetaData } from '@/app/components/workflow/utils'
import { LOOP_NODE_MAX_COUNT } from '@/config'
@ -14,7 +14,7 @@ import { isEmptyRelatedOperator } from './utils'
const i18nPrefix = 'errorMsg'
const metaData = genNodeMetaData({
classification: BlockClassificationEnum.Logic,
classification: BlockClassification.Logic,
sort: 3,
type: BlockEnum.Loop,
author: 'AICT-Team',

4
web/app/components/workflow/nodes/parameter-extractor/default.ts
View File

@ -1,7 +1,7 @@
import type { TFunction } from 'i18next'
import type { NodeDefault } from '../../types'
import type { ParameterExtractorNodeType } from './types'
import { BlockClassificationEnum } from '@/app/components/workflow/block-selector/types'
import { BlockClassification } from '@/app/components/workflow/block-selector/types'
import { BlockEnum } from '@/app/components/workflow/types'
import { genNodeMetaData } from '@/app/components/workflow/utils'
import { AppModeEnum } from '@/types/app'
@ -10,7 +10,7 @@ import { ReasoningModeType } from './types'
const i18nPrefix = ''
const metaData = genNodeMetaData({
classification: BlockClassificationEnum.Transform,
classification: BlockClassification.Transform,
sort: 6,
type: BlockEnum.ParameterExtractor,
})

4
web/app/components/workflow/nodes/question-classifier/default.ts
View File

@ -1,7 +1,7 @@
import type { TFunction } from 'i18next'
import type { NodeDefault } from '../../types'
import type { QuestionClassifierNodeType } from './types'
import { BlockClassificationEnum } from '@/app/components/workflow/block-selector/types'
import { BlockClassification } from '@/app/components/workflow/block-selector/types'
import { BlockEnum } from '@/app/components/workflow/types'
import { genNodeMetaData } from '@/app/components/workflow/utils'
import { AppModeEnum } from '@/types/app'
@ -9,7 +9,7 @@ import { AppModeEnum } from '@/types/app'
const i18nPrefix = ''
const metaData = genNodeMetaData({
classification: BlockClassificationEnum.QuestionUnderstand,
classification: BlockClassification.QuestionUnderstand,
sort: 1,
type: BlockEnum.QuestionClassifier,
})

4
web/app/components/workflow/nodes/template-transform/default.ts
View File

@ -1,14 +1,14 @@
import type { TFunction } from 'i18next'
import type { NodeDefault } from '../../types'
import type { TemplateTransformNodeType } from './types'
import { BlockClassificationEnum } from '@/app/components/workflow/block-selector/types'
import { BlockClassification } from '@/app/components/workflow/block-selector/types'
import { BlockEnum } from '@/app/components/workflow/types'
import { genNodeMetaData } from '@/app/components/workflow/utils'
const i18nPrefix = 'errorMsg'
const metaData = genNodeMetaData({
classification: BlockClassificationEnum.Transform,
classification: BlockClassification.Transform,
sort: 2,
type: BlockEnum.TemplateTransform,
helpLinkUri: 'template',

4
web/app/components/workflow/nodes/variable-assigner/default.ts
View File

@ -1,13 +1,13 @@
import type { SelectorParam, TFunction } from 'i18next'
import type { NodeDefault } from '../../types'
import type { VariableAssignerNodeType } from './types'
import { BlockClassificationEnum } from '@/app/components/workflow/block-selector/types'
import { BlockClassification } from '@/app/components/workflow/block-selector/types'
import { BlockEnum } from '@/app/components/workflow/types'
import { genNodeMetaData } from '@/app/components/workflow/utils'
import { VarType } from '../../types'
const metaData = genNodeMetaData({
classification: BlockClassificationEnum.Transform,
classification: BlockClassification.Transform,
sort: 3,
type: BlockEnum.VariableAggregator,
})

4
web/app/components/workflow/operator/add-block.tsx
View File

@ -1,4 +1,4 @@
import type { OffsetOptions } from '@floating-ui/react'
import type { NodeSelectorProps } from '@/app/components/workflow/block-selector/main'
import type { Node, OnSelectBlock } from '@/app/components/workflow/types'
import { cn } from '@langgenius/dify-ui/cn'
import { RiAddCircleFill } from '@remixicon/react'
@ -27,7 +27,7 @@ import TipPopup from './tip-popup'
type AddBlockProps = {
renderTrigger?: (open: boolean) => React.ReactNode
renderTriggerAsButtonRoot?: boolean
offset?: OffsetOptions
offset?: NodeSelectorProps['offset']
onClose?: () => void
isolateKeyboardEvents?: boolean
}

4
web/app/components/workflow/types.ts
View File

@ -2,7 +2,7 @@ import type { Edge as ReactFlowEdge, Node as ReactFlowNode, Viewport, XYPosition
import type { Plugin, PluginMeta } from '@/app/components/plugins/types'
import type { Collection, Tool } from '@/app/components/tools/types'
import type {
BlockClassificationEnum,
BlockClassification,
BlockDefaultValue,
PluginDefaultValue,
} from '@/app/components/workflow/block-selector/types'
@ -329,7 +329,7 @@ export type NodeOutPutVar = {
export type NodeDefault<T = {}> = {
metaData: {
classification: BlockClassificationEnum
classification: BlockClassification
sort: number
type: BlockEnum
title: string

8
web/app/components/workflow/utils/__tests__/gen-node-meta-data.spec.ts
View File

@ -1,4 +1,4 @@
import { BlockClassificationEnum } from '../../block-selector/types'
import { BlockClassification } from '../../block-selector/types'
import { BlockEnum } from '../../types'
import { genNodeMetaData } from '../gen-node-meta-data'
@ -11,7 +11,7 @@ describe('genNodeMetaData', () => {
})
expect(result).toEqual({
classification: BlockClassificationEnum.Default,
classification: BlockClassification.Default,
sort: 1,
type: BlockEnum.LLM,
title: 'LLM Node',
@ -27,7 +27,7 @@ describe('genNodeMetaData', () => {
it('should use custom values when provided', () => {
const result = genNodeMetaData({
classification: BlockClassificationEnum.Logic,
classification: BlockClassification.Logic,
sort: 5,
type: BlockEnum.Start,
title: 'Start',
@ -40,7 +40,7 @@ describe('genNodeMetaData', () => {
isTypeFixed: true,
})
expect(result.classification).toBe(BlockClassificationEnum.Logic)
expect(result.classification).toBe(BlockClassification.Logic)
expect(result.author).toBe('Custom')
expect(result.helpLinkUri).toBe('code')
expect(result.isRequired).toBe(true)

6
web/app/components/workflow/utils/gen-node-meta-data.ts
View File

@ -1,9 +1,9 @@
import type { BlockEnum } from '@/app/components/workflow/types'
import type { UseDifyNodesPath } from '@/types/doc-paths'
import { BlockClassificationEnum } from '@/app/components/workflow/block-selector/types'
import { BlockClassification } from '@/app/components/workflow/block-selector/types'
type GenNodeMetaDataParams = {
classification?: BlockClassificationEnum
classification?: BlockClassification
sort: number
type: BlockEnum
title?: string
@ -16,7 +16,7 @@ type GenNodeMetaDataParams = {
isTypeFixed?: boolean
}
export const genNodeMetaData = ({
classification = BlockClassificationEnum.Default,
classification = BlockClassification.Default,
sort,
type,
title = '',

22
web/features/agent-v2/agent-detail/configure/components/orchestrate/prompt-editor/slash.tsx
View File

@ -4,7 +4,7 @@ import type { TFunction } from 'i18next'
import type { ReactNode } from 'react'
import type { AgentOrchestrateAddAction, AgentOrchestrateAddedItem } from '../add-actions-context'
import type { Tool } from '@/app/components/tools/types'
import type { ToolTypeEnum, ToolValue } from '@/app/components/workflow/block-selector/types'
import type { ToolValue } from '@/app/components/workflow/block-selector/types'
import type { ToolWithProvider } from '@/app/components/workflow/types'
import type {
AgentFileNode,
@ -21,7 +21,7 @@ import { getMarketplaceCategoryUrl } from '@/app/components/plugins/marketplace/
import { PluginCategoryEnum } from '@/app/components/plugins/types'
import { CollectionType } from '@/app/components/tools/types'
import BlockIcon from '@/app/components/workflow/block-icon'
import { ToolTypeEnum as ToolTabEnum } from '@/app/components/workflow/block-selector/types'
import { ToolType } from '@/app/components/workflow/block-selector/types'
import { BlockEnum } from '@/app/components/workflow/types'
import { useGetLanguage } from '@/context/i18n'
import { ENABLE_AGENT_CLI_TOOLS } from '@/features/agent-v2/agent-detail/configure/feature-flags'
@ -330,10 +330,10 @@ function AgentPromptToolRows({
: []
const availableProviders = useMemo(() => {
if (activeTab === 'all') return [...builtInTools, ...workflowTools, ...customTools, ...mcpTools]
if (activeTab === ToolTabEnum.BuiltIn) return builtInTools
if (activeTab === ToolTabEnum.Workflow) return workflowTools
if (activeTab === ToolTabEnum.Custom) return customTools
if (activeTab === ToolTabEnum.MCP) return mcpTools
if (activeTab === ToolType.BuiltIn) return builtInTools
if (activeTab === ToolType.Workflow) return workflowTools
if (activeTab === ToolType.Custom) return customTools
if (activeTab === ToolType.MCP) return mcpTools
return []
}, [activeTab, builtInTools, customTools, mcpTools, workflowTools])
@ -345,15 +345,15 @@ function AgentPromptToolRows({
const tabs = [
{ key: 'all' as const, label: t(($) => $['agentDetail.configure.tools.toolTabs.all']) },
{
key: ToolTabEnum.BuiltIn,
key: ToolType.BuiltIn,
label: t(($) => $['agentDetail.configure.tools.toolTabs.plugins']),
},
{
key: ToolTabEnum.Workflow,
key: ToolType.Workflow,
label: t(($) => $['agentDetail.configure.tools.toolTabs.workflow']),
},
{ key: ToolTabEnum.Custom, label: t(($) => $['agentDetail.configure.tools.toolTabs.custom']) },
{ key: ToolTabEnum.MCP, label: t(($) => $['agentDetail.configure.tools.toolTabs.mcp']) },
{ key: ToolType.Custom, label: t(($) => $['agentDetail.configure.tools.toolTabs.custom']) },
{ key: ToolType.MCP, label: t(($) => $['agentDetail.configure.tools.toolTabs.mcp']) },
...(ENABLE_AGENT_CLI_TOOLS
? [{ key: 'cli' as const, label: t(($) => $['agentDetail.configure.tools.toolTabs.cli']) }]
: []),
@ -449,7 +449,7 @@ function AgentPromptToolRows({
)
}
type ToolPromptTab = ToolTypeEnum | 'all' | 'cli'
type ToolPromptTab = ToolType | 'cli'
function getLocalizedText(text: Record<string, string> | undefined | null, language: string) {
if (!text) return ''

18
web/service/use-triggers.ts
View File

@ -17,7 +17,7 @@ import { useMutation, useQuery } from '@tanstack/react-query'
import { FormTypeEnum } from '@/app/components/base/form/types'
import { SupportedCreationMethods } from '@/app/components/plugins/types'
import { CollectionType } from '@/app/components/tools/types'
import { TriggerCredentialTypeEnum } from '@/app/components/workflow/block-selector/types'
import { TriggerCredentialType } from '@/app/components/workflow/block-selector/types'
import { consoleClient, consoleQuery } from '@/service/client'
import { useInvalid } from './use-base'
@ -346,16 +346,16 @@ export const normalizeTriggerProvider = (
const normalizeCredentialType = (
credentialType: GeneratedTriggerSubscription['credential_type'],
): TriggerCredentialTypeEnum => {
): TriggerCredentialType => {
switch (credentialType) {
case TriggerCredentialTypeEnum.ApiKey:
return TriggerCredentialTypeEnum.ApiKey
case TriggerCredentialTypeEnum.Oauth2:
return TriggerCredentialTypeEnum.Oauth2
case TriggerCredentialTypeEnum.Unauthorized:
return TriggerCredentialTypeEnum.Unauthorized
case TriggerCredentialType.ApiKey:
return TriggerCredentialType.ApiKey
case TriggerCredentialType.Oauth2:
return TriggerCredentialType.Oauth2
case TriggerCredentialType.Unauthorized:
return TriggerCredentialType.Unauthorized
}
return TriggerCredentialTypeEnum.Unauthorized
return TriggerCredentialType.Unauthorized
}
const normalizeTriggerSubscription = (