+ {children}
+
+ )
+ }
+
+ return {
+ Popover,
+ PopoverTrigger,
+ PopoverContent,
+ }
+})
+
type PortalToFollowElemProps = {
children: React.ReactNode
open?: boolean
@@ -209,20 +275,17 @@ describe('ContextVar', () => {
// Act
render({children}
- {children}
+
)
+
const VarPicker: FC
+ {content}
)
}
return {
- PortalToFollowElem,
- PortalToFollowElemContent,
- PortalToFollowElemTrigger,
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
}
})
diff --git a/web/app/components/app/configuration/dataset-config/context-var/var-picker.tsx b/web/app/components/app/configuration/dataset-config/context-var/var-picker.tsx
index d29b2e34df..9bac1c7a41 100644
--- a/web/app/components/app/configuration/dataset-config/context-var/var-picker.tsx
+++ b/web/app/components/app/configuration/dataset-config/context-var/var-picker.tsx
@@ -3,15 +3,15 @@ import type { FC } from 'react'
import type { IInputTypeIconProps } from '@/app/components/app/configuration/config-var/input-type-icon'
import { ChevronDownIcon } from '@heroicons/react/24/outline'
import { cn } from '@langgenius/dify-ui/cn'
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from '@langgenius/dify-ui/popover'
import * as React from 'react'
import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import IconTypeIcon from '@/app/components/app/configuration/config-var/input-type-icon'
-import {
- PortalToFollowElem,
- PortalToFollowElemContent,
- PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
type Option = { name: string, value: string, type: string }
export type Props = {
@@ -33,6 +33,7 @@ const VarItem: FC<{ item: Option }> = ({ item }) => (
-
-
- {value
- ? (
-
+
+
-
- {notSelectedVarTip || t('feature.dataSet.queryVariable.choosePlaceholder', { ns: 'appDebug' })}
-
- )}
+
+
+ {currItem
+ ? (
+
+
+ {notSelectedVarTip || t('feature.dataSet.queryVariable.choosePlaceholder', { ns: 'appDebug' })}
+
+ )}
+
- {options.map(({ name, value, type }, index) => (
+ {options.map(({ name, value, type }) => (
(null)
+ const baseCheckForTriggerMatch = useBasicTypeaheadTriggerMatch(triggerString, {
minLength: 0,
- maxLength: 0,
+ maxLength: 75,
})
+ const checkForTriggerMatch = useCallback((text: string, editor: LexicalEditor) => {
+ const match = baseCheckForTriggerMatch(text, editor)
+ triggerMatchRef.current = match?.matchingString ?? null
+ return match
+ }, [baseCheckForTriggerMatch])
const [queryString, setQueryString] = useState(null)
const [blurHidden, setBlurHidden] = useState(false)
@@ -155,6 +161,7 @@ const ComponentPicker = ({
currentBlock,
errorMessageBlock,
lastRunBlock,
+ queryString || undefined,
)
const onSelectOption = useCallback(
@@ -207,6 +214,8 @@ const ComponentPicker = ({
anchorElementRef,
{ options, selectedIndex, selectOptionAndCleanUp, setHighlightedIndex },
) => {
+ const effectiveQueryString = triggerMatchRef.current ?? queryString
+
if (blurHidden)
return null
if (!(anchorElementRef.current && (allFlattenOptions.length || workflowVariableBlock?.show)))
@@ -237,6 +246,8 @@ const ComponentPicker = ({
workflowVariableBlock?.show && (
{
@@ -270,8 +281,8 @@ const ComponentPicker = ({
)
}
{option.renderMenuOption({
- queryString,
- isSelected: selectedIndex === index,
+ queryString: effectiveQueryString,
+ isSelected: workflowVariableBlock?.show ? false : selectedIndex === index,
onSelect: () => {
selectOptionAndCleanUp(option)
},
diff --git a/web/app/components/header/account-setting/members-page/transfer-ownership-modal/member-selector.tsx b/web/app/components/header/account-setting/members-page/transfer-ownership-modal/member-selector.tsx
index 5875b4fb6a..4dc41a307b 100644
--- a/web/app/components/header/account-setting/members-page/transfer-ownership-modal/member-selector.tsx
+++ b/web/app/components/header/account-setting/members-page/transfer-ownership-modal/member-selector.tsx
@@ -2,16 +2,20 @@
import type { FC } from 'react'
import { Avatar } from '@langgenius/dify-ui/avatar'
import { cn } from '@langgenius/dify-ui/cn'
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from '@langgenius/dify-ui/popover'
import * as React from 'react'
import { useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Input from '@/app/components/base/input'
-import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
import { useMembers } from '@/service/use-common'
type Props = {
- value?: any
- onSelect: (value: any) => void
+ value?: string
+ onSelect: (value: string) => void
exclude?: string[]
}
@@ -27,12 +31,9 @@ const MemberSelector: FC = ({
const { data } = useMembers()
const currentValue = useMemo(() => {
- if (!data?.accounts)
+ if (!data?.accounts || !value)
return null
- const accounts = data.accounts || []
- if (!value)
- return null
- return accounts.find(account => account.id === value)
+ return data.accounts.find(account => account.id === value) ?? null
}, [data, value])
const filteredList = useMemo(() => {
@@ -47,37 +48,36 @@ const MemberSelector: FC = ({
return name.toLowerCase().includes(searchValue.toLowerCase())
|| email.toLowerCase().includes(searchValue.toLowerCase())
}).filter(account => !exclude.includes(account.id))
- }, [data, searchValue, exclude])
+ }, [data, exclude, searchValue])
return (
-
- setOpen(v => !v)}
+
+
+ {!currentValue && (
+
+ )}
+ />
+
-
-
-
+
+
)
}
+
export default MemberSelector
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/__tests__/selector-entry.spec.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/__tests__/selector-entry.spec.tsx
index 37d828591f..1eb02fb15a 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/__tests__/selector-entry.spec.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/__tests__/selector-entry.spec.tsx
@@ -4,6 +4,59 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
import { TriggerCredentialTypeEnum } from '@/app/components/workflow/block-selector/types'
import { SubscriptionSelectorEntry } from '../selector-entry'
+vi.mock('@langgenius/dify-ui/popover', async () => {
+ const React = await import('react')
+ const PopoverContext = React.createContext({
+ open: false,
+ setOpen: (_open: boolean) => {},
+ })
+
+ const Popover = ({
+ children,
+ open: controlledOpen,
+ onOpenChange,
+ }: {
+ children: React.ReactNode
+ open?: boolean
+ onOpenChange?: (open: boolean) => void
+ }) => {
+ const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false)
+ const isControlled = controlledOpen !== undefined
+ const open = isControlled ? !!controlledOpen : uncontrolledOpen
+ const setOpen = (nextOpen: boolean) => {
+ if (!isControlled)
+ setUncontrolledOpen(nextOpen)
+ onOpenChange?.(nextOpen)
+ }
+
+ return (
+
+ {children}
+
+ )
+ }
+
+ const PopoverTrigger = ({ render }: { render: React.ReactNode }) => {
+ const { open, setOpen } = React.useContext(PopoverContext)
+ return (
+ = ({
selectedId,
- onClick,
isOpen = false,
className,
}) => {
@@ -44,7 +42,7 @@ const SubscriptionTriggerButton: React.FC = ({
}
if (subscriptions && subscriptions.length > 0) {
- const selectedSubscription = subscriptions?.find(sub => sub.id === selectedId)
+ const selectedSubscription = subscriptions.find(sub => sub.id === selectedId)
if (!selectedSubscription) {
return {
@@ -67,13 +65,13 @@ const SubscriptionTriggerButton: React.FC = ({
return (
+ )}
+ />
+ {
onChange(value)
@@ -103,9 +108,9 @@ const VarPicker: FC = ({
)}
-
-
-
+
+
)
}
+
export default React.memo(VarPicker)
diff --git a/web/app/components/base/prompt-editor/__tests__/hooks.spec.tsx b/web/app/components/base/prompt-editor/__tests__/hooks.spec.tsx
index 9917918628..13c0c05803 100644
--- a/web/app/components/base/prompt-editor/__tests__/hooks.spec.tsx
+++ b/web/app/components/base/prompt-editor/__tests__/hooks.spec.tsx
@@ -423,11 +423,11 @@ describe('prompt-editor/hooks', () => {
maxLength: 5,
}))
- const match = result.current('prefix @..', {} as LexicalEditor)
+ const match = result.current('prefix @ab', {} as LexicalEditor)
expect(match).toEqual({
leadOffset: 7,
- matchingString: '..',
- replaceableString: '@..',
+ matchingString: 'ab',
+ replaceableString: '@ab',
})
})
@@ -437,7 +437,7 @@ describe('prompt-editor/hooks', () => {
maxLength: 5,
}))
- expect(result.current('prefix @.', {} as LexicalEditor)).toBeNull()
+ expect(result.current('prefix @a', {} as LexicalEditor)).toBeNull()
})
it('should return null when matching text exceeds maxLength', () => {
@@ -445,7 +445,7 @@ describe('prompt-editor/hooks', () => {
minLength: 1,
maxLength: 2,
}))
- expect(result.current('prefix @...', {} as LexicalEditor)).toBeNull()
+ expect(result.current('prefix @abc', {} as LexicalEditor)).toBeNull()
})
it('should return null when text has no trigger character', () => {
diff --git a/web/app/components/base/prompt-editor/hooks.ts b/web/app/components/base/prompt-editor/hooks.ts
index dd6c6295a6..70869d6a17 100644
--- a/web/app/components/base/prompt-editor/hooks.ts
+++ b/web/app/components/base/prompt-editor/hooks.ts
@@ -154,17 +154,18 @@ type TriggerFn = (
text: string,
editor: LexicalEditor,
) => MenuTextMatch | null
-const PUNCTUATION = '\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%\'"~=<>_:;'
+const escapeForCharacterClass = (value: string) => value.replace(/[[\]\\^-]/g, '\\$&')
export function useBasicTypeaheadTriggerMatch(
trigger: string,
{ minLength = 1, maxLength = 75 }: { minLength?: number, maxLength?: number },
): TriggerFn {
return useCallback(
(text: string) => {
- const validChars = `[${PUNCTUATION}\\s]`
+ const escapedTrigger = escapeForCharacterClass(trigger)
+ const validChars = `[^${escapedTrigger}\\n\\r]`
const TypeaheadTriggerRegex = new RegExp(
'(.*)('
- + `[${trigger}]`
+ + `[${escapedTrigger}]`
+ `((?:${validChars}){0,${maxLength}})`
+ ')$',
)
diff --git a/web/app/components/base/prompt-editor/plugins/component-picker-block/__tests__/index.spec.tsx b/web/app/components/base/prompt-editor/plugins/component-picker-block/__tests__/index.spec.tsx
index 6cc38ad78f..3c734700a7 100644
--- a/web/app/components/base/prompt-editor/plugins/component-picker-block/__tests__/index.spec.tsx
+++ b/web/app/components/base/prompt-editor/plugins/component-picker-block/__tests__/index.spec.tsx
@@ -521,6 +521,84 @@ describe('ComponentPicker (component-picker-block/index.tsx)', () => {
await waitFor(() => expect(readEditorText(editor)).not.toContain('{'))
})
+ it('filters workflow variables from slash input and matches child paths', async () => {
+ const captures: Captures = { editor: null, eventEmitter: null }
+ const user = userEvent.setup()
+
+ const workflowVariableBlock = makeWorkflowVariableBlock({}, [
+ makeWorkflowVarNode('node-1', 'Node 1', [
+ makeWorkflowNodeVar('payload', VarType.object, [makeWorkflowNodeVar('child_name', VarType.string)]),
+ makeWorkflowNodeVar('other_value', VarType.string),
+ ]),
+ ])
+
+ render((
+ {t('feature.dataSet.queryVariable.noVarTip', { ns: 'appDebug' })}
{t('members.transferModal.transferPlaceholder', { ns: 'common' })}
+ )}
+ {currentValue && (
+ <>
+ {currentValue.name}
+ {currentValue.email}
+
+ )}
+
+
- {!currentValue && (
-
-
- {t('members.transferModal.transferPlaceholder', { ns: 'common' })}
- )}
- {currentValue && (
- <>
- {currentValue.name}
- {currentValue.email}
-
- )}
-
-
= ({
))}
setOpen(!open)}>
+ {render}
+
+ )
+ }
+
+ const PopoverContent = ({ children }: { children: React.ReactNode }) => {
+ const { open } = React.useContext(PopoverContext)
+ return open ? {children}
: null
+ }
+
+ return {
+ Popover,
+ PopoverTrigger,
+ PopoverContent,
+ }
+})
+
let mockSubscriptions: TriggerSubscription[] = []
const mockRefetch = vi.fn()
@@ -92,6 +145,6 @@ describe('SubscriptionSelectorEntry', () => {
fireEvent.click(screen.getByRole('button', { name: 'Subscription One' }))
expect(onSelect).toHaveBeenCalledWith(expect.objectContaining({ id: 'sub-1', name: 'Subscription One' }), expect.any(Function))
- expect(screen.queryByText('Subscription One')).not.toBeInTheDocument()
+ expect(screen.queryByTestId('popover-content')).not.toBeInTheDocument()
})
})
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/selector-entry.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/selector-entry.tsx
index 5f755ff634..21f1d4898b 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/selector-entry.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/selector-entry.tsx
@@ -1,28 +1,26 @@
'use client'
import type { SimpleSubscription } from './types'
import { cn } from '@langgenius/dify-ui/cn'
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from '@langgenius/dify-ui/popover'
import { RiArrowDownSLine, RiWebhookLine } from '@remixicon/react'
import { useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next'
-import {
- PortalToFollowElem,
- PortalToFollowElemContent,
- PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
import { SubscriptionList } from '@/app/components/plugins/plugin-detail-panel/subscription-list'
import { SubscriptionListMode } from './types'
import { useSubscriptionList } from './use-subscription-list'
type SubscriptionTriggerButtonProps = {
selectedId?: string
- onClick?: () => void
isOpen?: boolean
className?: string
}
const SubscriptionTriggerButton: React.FC{children}
+ )
+ },
+ PopoverTrigger: ({ children, render, onClick, className }: {
+ children?: React.ReactNode
+ render?: React.ReactNode
+ onClick?: (e: React.MouseEvent) => void
+ className?: string
+ }) => (
+ {
+ onClick?.(e)
+ if (!onClick)
+ mockPortalOnOpenChange?.(!mockPortalOpen)
+ }}
+ className={className}
+ >
+ {render ?? children}
+
+ ),
+ PopoverContent: ({ children, className, popupClassName }: {
+ children: React.ReactNode
+ className?: string
+ popupClassName?: string
+ }) => {
+ if (!mockPortalOpen && !forcePortalContentVisible)
+ return null
+ return {children}
+ },
+}))
+
+vi.mock('@/app/components/base/portal-to-follow-elem', () => ({
+ PortalToFollowElem: ({ children, open = false, onOpenChange }: {
+ children: React.ReactNode
+ open?: boolean
+ onOpenChange?: (open: boolean) => void
+ }) => {
+ mockPortalOpen = open
+ mockPortalOnOpenChange = onOpenChange
return {children}
},
PortalToFollowElemTrigger: ({ children, onClick, className }: {
- children: React.ReactNode
- onClick: (e: React.MouseEvent) => void
+ children?: React.ReactNode
+ onClick?: (e: React.MouseEvent) => void
className?: string
}) => (
{children}
),
- PortalToFollowElemContent: ({ children, className }: {
+ PortalToFollowElemContent: ({ children, className, popupClassName }: {
children: React.ReactNode
className?: string
+ popupClassName?: string
}) => {
- // Allow forcing content visibility for testing option selection
if (!mockPortalOpen && !forcePortalContentVisible)
return null
- return {children}
+ return {children}
},
}))
@@ -319,6 +362,7 @@ describe('auto-update-setting', () => {
beforeEach(() => {
vi.clearAllMocks()
mockPortalOpen = false
+ mockPortalOnOpenChange = undefined
forcePortalContentVisible = false
mockPluginsData.plugins = []
})
diff --git a/web/app/components/plugins/reference-setting-modal/auto-update-setting/__tests__/tool-picker.spec.tsx b/web/app/components/plugins/reference-setting-modal/auto-update-setting/__tests__/tool-picker.spec.tsx
index e89b1b3161..176598158c 100644
--- a/web/app/components/plugins/reference-setting-modal/auto-update-setting/__tests__/tool-picker.spec.tsx
+++ b/web/app/components/plugins/reference-setting-modal/auto-update-setting/__tests__/tool-picker.spec.tsx
@@ -4,8 +4,6 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
import { PluginSource } from '@/app/components/plugins/types'
import ToolPicker from '../tool-picker'
-let portalOpen = false
-
const mockInstalledPluginList = vi.hoisted(() => ({
data: {
plugins: [] as PluginDetail[],
@@ -21,33 +19,51 @@ vi.mock('@/app/components/base/loading', () => ({
default: () => loading
,
}))
-vi.mock('@/app/components/base/portal-to-follow-elem', async () => {
- const _React = await import('react')
+vi.mock('@langgenius/dify-ui/popover', async () => {
+ const React = await import('react')
+ const PopoverContext = React.createContext({
+ open: false,
+ setOpen: (_open: boolean) => {},
+ })
+
+ const Popover = ({
+ children,
+ open,
+ onOpenChange,
+ }: {
+ children: React.ReactNode
+ open?: boolean
+ onOpenChange?: (open: boolean) => void
+ }) => (
+ setOpen(!open)}>
+ {render}
+
+ )
+ }
+
+ const PopoverContent = ({
+ children,
+ className,
+ }: {
+ children: React.ReactNode
+ className?: string
+ }) => {
+ const { open } = React.useContext(PopoverContext)
+ return open ? {children}
: null
+ }
+
return {
- PortalToFollowElem: ({
- open,
- children,
- }: {
- open: boolean
- children: React.ReactNode
- }) => {
- portalOpen = open
- return {children}
- },
- PortalToFollowElemTrigger: ({
- children,
- onClick,
- }: {
- children: React.ReactNode
- onClick: () => void
- }) => ,
- PortalToFollowElemContent: ({
- children,
- className,
- }: {
- children: React.ReactNode
- className?: string
- }) => portalOpen ? {children}
: null,
+ Popover,
+ PopoverTrigger,
+ PopoverContent,
}
})
@@ -118,7 +134,6 @@ const createPlugin = (
describe('ToolPicker', () => {
beforeEach(() => {
vi.clearAllMocks()
- portalOpen = false
mockInstalledPluginList.data = {
plugins: [],
}
@@ -137,7 +152,7 @@ describe('ToolPicker', () => {
/>,
)
- fireEvent.click(screen.getByTestId('trigger'))
+ fireEvent.click(screen.getByText('trigger'))
expect(onShowChange).toHaveBeenCalledWith(true)
})
diff --git a/web/app/components/plugins/reference-setting-modal/auto-update-setting/tool-picker.tsx b/web/app/components/plugins/reference-setting-modal/auto-update-setting/tool-picker.tsx
index 975dd2217e..1c499104c2 100644
--- a/web/app/components/plugins/reference-setting-modal/auto-update-setting/tool-picker.tsx
+++ b/web/app/components/plugins/reference-setting-modal/auto-update-setting/tool-picker.tsx
@@ -2,15 +2,15 @@
import type { FC } from 'react'
import type { ActivePluginType } from '../../marketplace/constants'
import { cn } from '@langgenius/dify-ui/cn'
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from '@langgenius/dify-ui/popover'
import * as React from 'react'
-import { useCallback, useMemo, useState } from 'react'
+import { useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Loading from '@/app/components/base/loading'
-import {
- PortalToFollowElem,
- PortalToFollowElemContent,
- PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
import SearchBox from '@/app/components/plugins/marketplace/search-box'
import { useInstalledPluginList } from '@/service/use-plugins'
import { PLUGIN_TYPE_SEARCH_MAP } from '../../marketplace/constants'
@@ -24,7 +24,6 @@ type Props = {
onChange: (value: string[]) => void
isShow: boolean
onShowChange: (isShow: boolean) => void
-
}
const ToolPicker: FC
@@ -105,7 +76,7 @@ const ToolPicker: FC = ({
key={item.plugin_id}
payload={item}
isChecked={value.includes(item.plugin_id)}
- onCheckChange={handleCheckChange(item.plugin_id)}
+ onCheckChange={() => handleCheckChange(item.plugin_id)}
/>
))}
@@ -121,21 +92,18 @@ const ToolPicker: FC{trigger}
+
return (
-
+
= ({
{!isLoading && filteredList.length > 0 && listContent}
{!isLoading && filteredList.length === 0 && noData}
{isLoading && loadingContent}
-
-
+
+
)
}
diff --git a/web/app/components/tools/labels/__tests__/selector.spec.tsx b/web/app/components/tools/labels/__tests__/selector.spec.tsx
index b495d2d227..4ef4534759 100644
--- a/web/app/components/tools/labels/__tests__/selector.spec.tsx
+++ b/web/app/components/tools/labels/__tests__/selector.spec.tsx
@@ -2,6 +2,65 @@ import { act, fireEvent, render, screen } from '@testing-library/react'
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
import LabelSelector from '../selector'
+vi.mock('@langgenius/dify-ui/popover', async () => {
+ const React = await import('react')
+ const PopoverContext = React.createContext({
+ open: false,
+ setOpen: (_open: boolean) => {},
+ })
+
+ const Popover = ({
+ children,
+ open: controlledOpen,
+ onOpenChange,
+ }: {
+ children: React.ReactNode
+ open?: boolean
+ onOpenChange?: (open: boolean) => void
+ }) => {
+ const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false)
+ const isControlled = controlledOpen !== undefined
+ const open = isControlled ? !!controlledOpen : uncontrolledOpen
+ const setOpen = (nextOpen: boolean) => {
+ if (!isControlled)
+ setUncontrolledOpen(nextOpen)
+ onOpenChange?.(nextOpen)
+ }
+
+ return (
+
+ {children}
+
+ )
+ }
+
+ const PopoverTrigger = ({ render }: { render: React.ReactNode }) => {
+ const { open, setOpen } = React.useContext(PopoverContext)
+ return (
+ & { children?: React.ReactNode }) => {
+ const { open } = React.useContext(PopoverContext)
+ if (!open)
+ return null
+
+ return = ({
value,
onChange,
@@ -34,6 +35,7 @@ const LabelSelector: FC = ({
const { run: handleSearch } = useDebounceFn(() => {
setSearchKeywords(keywords)
}, { wait: 500 })
+
const handleKeywordsChange = (value: string) => {
setKeywords(value)
handleSearch()
@@ -55,32 +57,31 @@ const LabelSelector: FC = ({
}
return (
-
+
+ />
+
-
+
-
- {
- tabs.map(tab => (
-
setPluginType(tab.key)}
- >
- {tab.name}
-
- ))
- }
+ {tabs.map(tab => (
+ setPluginType(tab.key)}
+ >
+ {tab.name}
+
+ ))}
setOpen(!open)}>
+ {render}
+
+ )
+ }
+
+ const PopoverContent = ({
+ children,
+ ...props
+ }: React.HTMLAttributes{children}
+ }
+
+ return {
+ Popover,
+ PopoverTrigger,
+ PopoverContent,
+ }
+})
+
// Mock useTags hook with controlled test data
const mockTags = [
{ name: 'agent', label: 'Agent' },
diff --git a/web/app/components/tools/labels/selector.tsx b/web/app/components/tools/labels/selector.tsx
index 830b4d7aaf..67539715a7 100644
--- a/web/app/components/tools/labels/selector.tsx
+++ b/web/app/components/tools/labels/selector.tsx
@@ -1,6 +1,11 @@
import type { FC } from 'react'
import type { Label } from '@/app/components/tools/labels/constant'
import { cn } from '@langgenius/dify-ui/cn'
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from '@langgenius/dify-ui/popover'
import { RiArrowDownSLine } from '@remixicon/react'
import { useDebounceFn } from 'ahooks'
import { noop } from 'es-toolkit/function'
@@ -9,17 +14,13 @@ import { useTranslation } from 'react-i18next'
import Checkbox from '@/app/components/base/checkbox'
import { Tag03 } from '@/app/components/base/icons/src/vender/line/financeAndECommerce'
import Input from '@/app/components/base/input'
-import {
- PortalToFollowElem,
- PortalToFollowElemContent,
- PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
import { useTags } from '@/app/components/plugins/hooks'
type LabelSelectorProps = {
value: string[]
onChange: (v: string[]) => void
}
+
const LabelSelector: FC
- setOpen(v => !v)}
- className="block"
- >
-
-
-
+
)}
- >
- 0 ? selectedLabels : ''} className={cn('grow truncate text-[13px] leading-[18px] text-text-secondary', !value.length && 'text-text-quaternary!')}>
+ {!value.length && t('createTool.toolInput.labelPlaceholder', { ns: 'tools' })}
+ {!!value.length && selectedLabels}
+
+
+
+ 0 ? selectedLabels : ''} className={cn('grow truncate text-[13px] leading-[18px] text-text-secondary', !value.length && 'text-text-quaternary!')}>
- {!value.length && t('createTool.toolInput.labelPlaceholder', { ns: 'tools' })}
- {!!value.length && selectedLabels}
-
-
-
-
= ({
)}
{trigger}
+ const resolvedOffset = typeof offset === 'object' && offset !== null
+ ? offset as { mainAxis?: number, crossAxis?: number, alignmentAxis?: number | null }
+ : undefined
+ const sideOffset = typeof offset === 'number' ? offset : resolvedOffset?.mainAxis ?? 0
+ const alignOffset = typeof offset === 'number' ? 0 : resolvedOffset?.crossAxis ?? resolvedOffset?.alignmentAxis ?? 0
- setIsTriggerHovered(true)}
onMouseLeave={() => setIsTriggerHovered(false)}
diff --git a/web/app/components/workflow/nodes/_base/components/__tests__/agent-strategy-selector.spec.tsx b/web/app/components/workflow/nodes/_base/components/__tests__/agent-strategy-selector.spec.tsx
new file mode 100644
index 0000000000..995d3c8a70
--- /dev/null
+++ b/web/app/components/workflow/nodes/_base/components/__tests__/agent-strategy-selector.spec.tsx
@@ -0,0 +1,446 @@
+import type { ReactNode } from 'react'
+import type { StrategyPluginDetail } from '@/app/components/plugins/types'
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { PluginCategoryEnum } from '@/app/components/plugins/types'
+import { AgentStrategySelector } from '../agent-strategy-selector'
+
+const mocks = vi.hoisted(() => ({
+ useSuspenseQuery: vi.fn(),
+ useStrategyProviders: vi.fn(),
+ useMarketplacePlugins: vi.fn(),
+ useStrategyInfo: vi.fn(),
+ refetchStrategyInfo: vi.fn(),
+ queryPluginsWithDebounced: vi.fn(),
+}))
+
+vi.mock('@tanstack/react-query', () => ({
+ useSuspenseQuery: mocks.useSuspenseQuery,
+}))
+
+vi.mock('@/service/system-features', () => ({
+ systemFeaturesQueryOptions: () => ({}),
+}))
+
+vi.mock('@/service/use-strategy', () => ({
+ useStrategyProviders: mocks.useStrategyProviders,
+}))
+
+vi.mock('@/app/components/plugins/marketplace/hooks', () => ({
+ useMarketplacePlugins: mocks.useMarketplacePlugins,
+}))
+
+vi.mock('@/app/components/workflow/nodes/agent/use-config', () => ({
+ useStrategyInfo: mocks.useStrategyInfo,
+}))
+
+vi.mock('@/app/components/plugins/install-plugin/base/use-get-icon', () => ({
+ default: () => ({
+ getIconUrl: (icon: string) => `https://example.com/${icon}`,
+ }),
+}))
+
+vi.mock('@/app/components/base/search-input', () => ({
+ default: ({
+ value,
+ onChange,
+ placeholder,
+ }: {
+ value: string
+ onChange: (value: string) => void
+ placeholder?: string
+ className?: string
+ }) => (
+ onChange(e.target.value)}
+ />
+ ),
+}))
+
+vi.mock('@/app/components/workflow/block-selector/view-type-select', () => ({
+ default: ({
+ onChange,
+ }: {
+ viewType: string
+ onChange: (value: string) => void
+ }) => (
+
+ ),
+ ViewType: {
+ flat: 'flat',
+ grid: 'grid',
+ },
+}))
+
+vi.mock('@/app/components/workflow/block-selector/tools', () => ({
+ default: ({
+ tools,
+ onSelect,
+ }: {
+ tools: Array<{
+ id: string
+ name: string
+ meta?: unknown
+ tools: Array<{
+ name: string
+ label: string | { en_US?: string }
+ output_schema?: Record
+ }>
+ }>
+ onSelect: (value: unknown, tool: {
+ tool_name: string
+ provider_name: string
+ tool_label: string
+ output_schema?: Record
+ provider_id: string
+ meta?: unknown
+ }) => void
+ }) => (
+
+ {children}
+
+ )
+ }
+
+ const PopoverTrigger = ({ render }: { render: React.ReactNode }) => {
+ const { open, setOpen } = React.useContext(PopoverContext)
+ return (
+
+
}
+ />
+
+ {tools.map(tool => (
+
+ ),
+}))
+
+vi.mock('@/app/components/workflow/block-selector/market-place-plugin/list', () => ({
+ default: ({
+ list,
+ searchText,
+ }: {
+ list: Array<{ plugin_id: string }>
+ searchText: string
+ }) => (
+
+ {tool.name}
+
+
+ ))}
+
+ {`${searchText}:${list.map(item => item.plugin_id).join(',')}`}
+
+ ),
+}))
+
+vi.mock('@/app/components/workflow/nodes/_base/components/install-plugin-button', () => ({
+ InstallPluginButton: ({
+ onClick,
+ }: {
+ onClick?: (event: { stopPropagation: () => void }) => void
+ uniqueIdentifier: string
+ size: string
+ }) => (
+
+ ),
+}))
+
+vi.mock('@/app/components/workflow/nodes/_base/components/switch-plugin-version', () => ({
+ SwitchPluginVersion: ({
+ onChange,
+ }: {
+ onChange: () => void
+ uniqueIdentifier: string
+ tooltip: ReactNode
+ }) => (
+
+ ),
+}))
+
+vi.mock('@/next/link', () => ({
+ default: ({
+ href,
+ children,
+ className,
+ }: {
+ href: string
+ children: ReactNode
+ className?: string
+ }) => {children},
+}))
+
+vi.mock('react-i18next', () => ({
+ useTranslation: () => ({
+ t: (key: string) => key,
+ }),
+}))
+
+vi.mock('@langgenius/dify-ui/popover', async () => {
+ const React = await import('react')
+ const PopoverContext = React.createContext({
+ open: false,
+ setOpen: (_open: boolean) => {},
+ })
+
+ const Popover = ({
+ children,
+ open: controlledOpen,
+ onOpenChange,
+ }: {
+ children: React.ReactNode
+ open?: boolean
+ onOpenChange?: (open: boolean) => void
+ }) => {
+ const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false)
+ const isControlled = controlledOpen !== undefined
+ const open = isControlled ? !!controlledOpen : uncontrolledOpen
+ const setOpen = (nextOpen: boolean) => {
+ if (!isControlled)
+ setUncontrolledOpen(nextOpen)
+ onOpenChange?.(nextOpen)
+ }
+
+ return (
+ setOpen(!open)}>
+ {render}
+
+ )
+ }
+
+ const PopoverContent = ({ children }: { children: React.ReactNode }) => {
+ const { open } = React.useContext(PopoverContext)
+ return open ? {children}
: null
+ }
+
+ return {
+ Popover,
+ PopoverTrigger,
+ PopoverContent,
+ }
+})
+
+vi.mock('@langgenius/dify-ui/tooltip', () => ({
+ Tooltip: ({ children }: { children: ReactNode }) => {children}
,
+ TooltipTrigger: ({ render }: { render: ReactNode }) => {render}
,
+ TooltipContent: ({ children }: { children: ReactNode }) => {children}
,
+}))
+
+const createStrategyDetail = (
+ name: string,
+ strategyName: string,
+ strategyLabel: string,
+): StrategyPluginDetail => ({
+ plugin_unique_identifier: `provider/${name}`,
+ plugin_id: `plugin-${name}`,
+ declaration: {
+ identity: {
+ author: 'Dify',
+ name,
+ description: { en_US: `${name} description` },
+ icon: `${name}.png`,
+ label: { en_US: `${name} label` },
+ tags: [],
+ },
+ strategies: [{
+ identity: {
+ name: strategyName,
+ author: 'Dify',
+ label: { en_US: strategyLabel },
+ },
+ description: { en_US: `${strategyLabel} description` },
+ parameters: [],
+ output_schema: { result: { type: 'string' } },
+ }],
+ },
+ meta: { version: '1.0.0' },
+} as unknown as StrategyPluginDetail)
+
+describe('AgentStrategySelector', () => {
+ const alphaDetail = createStrategyDetail('alpha', 'alpha-strategy', 'Alpha Strategy')
+ const betaDetail = createStrategyDetail('beta', 'beta-strategy', 'Beta Strategy')
+
+ beforeEach(() => {
+ vi.clearAllMocks()
+
+ mocks.useSuspenseQuery.mockReturnValue({ data: true })
+ mocks.useStrategyProviders.mockReturnValue({ data: [alphaDetail, betaDetail] })
+ mocks.useMarketplacePlugins.mockReturnValue({
+ queryPluginsWithDebounced: mocks.queryPluginsWithDebounced,
+ plugins: [{ plugin_id: 'market-agent' }],
+ })
+ mocks.useStrategyInfo.mockReturnValue({
+ strategyStatus: undefined,
+ refetch: mocks.refetchStrategyInfo,
+ })
+ })
+
+ it('filters strategies and queries marketplace when searching', async () => {
+ const user = userEvent.setup()
+
+ render(
+ {title} @@ -51,11 +61,7 @@ const NotFoundWarn = (props: {
-
+ setOpen(o => !o)}
- >
- { }
- {icon && (
-
-
-
- 
-
- )}
- - {value?.agent_strategy_label || t('nodes.agent.strategy.selectTip', { ns: 'workflow' })} -
-
- {showInstallButton && value && (
- e.stopPropagation()}
- size="small"
- uniqueIdentifier={value.plugin_unique_identifier}
- />
+
+
+ {icon && (
+
+
+
)}
- {showPluginNotInstalledWarn
- ? (
- + {value?.agent_strategy_label || t('nodes.agent.strategy.selectTip', { ns: 'workflow' })} +
+
+ {showInstallButton && value && (
+ e.stopPropagation()}
+ size="small"
+ uniqueIdentifier={value.plugin_unique_identifier}
+ />
+ )}
+ {showPluginNotInstalledWarn
? (
- {t('nodes.agent.strategyNotFoundDescAndSwitchVersion', { ns: 'workflow' })}
-
- )}
- onChange={() => {
- refetchStrategyInfo()
- }}
- />
- )}
+ : showUnsupportedStrategy
+ ? (
+
+
+ )}
+ onChange={() => {
+ refetchStrategyInfo()
+ }}
+ />
+ )}
+ + {t('nodes.agent.unsupportedStrategy', { ns: 'workflow' })} +
++ {t('nodes.agent.strategyNotFoundDescAndSwitchVersion', { ns: 'workflow' })} +
+picker-content
+
{hasValue
@@ -212,18 +216,36 @@ const VarReferencePickerTrigger: FC = ({
)
: pill
- return (
- {
- if (readonly)
- return
- if (!isConstant)
- setOpen(!open)
- else
- setControlFocus(Date.now())
- }}
+ const variablePicker = (
+
-
-
+
+
)
}
diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/__tests__/member-selector.spec.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/__tests__/member-selector.spec.tsx
index 823aa68047..e1d959bd86 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/__tests__/member-selector.spec.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/__tests__/member-selector.spec.tsx
@@ -2,6 +2,59 @@ import type { Member } from '@/models/common'
import { fireEvent, render, screen } from '@testing-library/react'
import MemberSelector from '../member-selector'
+vi.mock('@langgenius/dify-ui/popover', async () => {
+ const React = await import('react')
+ const PopoverContext = React.createContext({
+ open: false,
+ setOpen: (_open: boolean) => {},
+ })
+
+ const Popover = ({
+ children,
+ open: controlledOpen,
+ onOpenChange,
+ }: {
+ children: import('react').ReactNode
+ open?: boolean
+ onOpenChange?: (open: boolean) => void
+ }) => {
+ const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false)
+ const isControlled = controlledOpen !== undefined
+ const open = isControlled ? !!controlledOpen : uncontrolledOpen
+ const setOpen = (nextOpen: boolean) => {
+ if (!isControlled)
+ setUncontrolledOpen(nextOpen)
+ onOpenChange?.(nextOpen)
+ }
+
+ return (
+
+
+ )
+
+ const resolvedVariablePicker = isSupportConstantValue
+ ? (
+ readonly
+ ? variablePicker
+ : (
+
+ {hoveredPill}
+
+ {
+ if (!isConstant || readonly)
+ return
+ setControlFocus(Date.now())
+ }}
>
<>
{isAddBtnTrigger
@@ -278,24 +300,7 @@ const VarReferencePickerTrigger: FC = ({
isLoading={isLoading}
/>
)
- : (
- {
- if (readonly)
- return
- if (!isConstant)
- setOpen(!open)
- else
- setControlFocus(Date.now())
- }}
- className="h-full grow"
- >
-
- )}
+ : resolvedVariablePicker}
{(hasValue && !readonly && !isInTable && !isJustShowValue) && (
= ({
})
const node = nodes.find(n => n.id === nodeId)
- const isInIteration = !!(node?.data as any)?.isInIteration
+ const isInIteration = !!node?.data.isInIteration
const iterationNode = isInIteration ? (nodes.find(n => n.id === node?.parentId) ?? null) : null
- const isInLoop = !!(node?.data as any)?.isInLoop
+ const isInLoop = !!node?.data.isInLoop
const loopNode = isInLoop ? (nodes.find(n => n.id === node?.parentId) ?? null) : null
const triggerRef = useRef(null)
@@ -210,13 +210,11 @@ const VarReferencePicker: FC = ({
}, [onChange])
const inputRef = useRef(null)
- const [isFocus, setIsFocus] = useState(false)
const [controlFocus, setControlFocus] = useState(0)
+ const isFocus = controlFocus > 0
useEffect(() => {
- if (controlFocus && inputRef.current) {
+ if (controlFocus && inputRef.current)
inputRef.current.focus()
- setIsFocus(true)
- }
}, [controlFocus])
const handleVarReferenceChange = useCallback((value: ValueSelector, varInfo: Var) => {
@@ -264,7 +262,7 @@ const VarReferencePicker: FC = ({
}, [availableNodes, reactflow, store])
const type = getCurrentVariableType({
- parentNode: (isInIteration ? iterationNode : loopNode) as any,
+ parentNode: isInIteration ? iterationNode : loopNode,
valueSelector: value as ValueSelector,
availableNodes,
isChatMode,
@@ -289,9 +287,6 @@ const VarReferencePicker: FC = ({
maxVarNameWidth,
} = getWidthAllocations(triggerWidth, outputVarNode?.title || '', varName || '', type || '')
- const WrapElem = isSupportConstantValue ? 'div' : PortalToFollowElemTrigger
- const VarPickerWrap = !isSupportConstantValue ? 'div' : PortalToFollowElemTrigger
-
const hoverPopup = useMemo(() => {
const tooltipType = getTooltipContent(hasValue, isShowAPart, isValidVar)
if (tooltipType === 'full-path') {
@@ -349,15 +344,23 @@ const VarReferencePicker: FC = ({
)
const triggerPlaceholder = placeholder ?? t('common.setVarValuePlaceholder', { ns: 'workflow' })
+ const resolvedTrigger = React.isValidElement(trigger) ? trigger : = ({
const open = (isObj || isStructureOutput) && isHovering
useEffect(() => {
onHovering?.(isHovering)
- }, [isHovering])
+ }, [isHovering, onHovering])
const handleChosen = (e: React.MouseEvent) => {
e.stopPropagation()
e.nativeEvent.stopImmediatePropagation()
@@ -167,62 +167,70 @@ const Item: FC = ({
() => getVariableCategory({ isEnv, isChatVar, isLoopVar, isRagVariable }),
[isEnv, isChatVar, isLoopVar, isRagVariable],
)
+
+ const itemTrigger = (
+
-
-
-
{(isStructureOutput || isObj) && (
= ({
}}
/>
)}
-
-
+
+
)
}
type Props = {
hideSearch?: boolean
+ searchText?: string
searchBoxClassName?: string
vars: NodeOutPutVar[]
isSupportFileVar?: boolean
@@ -258,6 +267,7 @@ type Props = {
}
const VarReferenceVars: FC = ({
hideSearch,
+ searchText,
searchBoxClassName,
vars,
isSupportFileVar,
@@ -274,7 +284,8 @@ const VarReferenceVars: FC = ({
preferSchemaType,
}) => {
const { t } = useTranslation()
- const [searchText, setSearchText] = useState('')
+ const [internalSearchValue, setInternalSearchValue] = useState('')
+ const searchValue = searchText ?? internalSearchValue
const handleKeyDown = (e: React.KeyboardEvent) => {
if (e.key === 'Escape') {
@@ -283,7 +294,7 @@ const VarReferenceVars: FC = ({
}
}
- const filteredVars = useMemo(() => filterReferenceVars(vars, searchText), [vars, searchText])
+ const filteredVars = useMemo(() => filterReferenceVars(vars, searchValue), [vars, searchValue])
return (
<>
@@ -295,11 +306,11 @@ const VarReferenceVars: FC = ({
className="var-search-input"
showLeftIcon
showClearIcon
- value={searchText}
+ value={searchValue}
placeholder={t('common.searchVar', { ns: 'workflow' }) || ''}
- onChange={e => setSearchText(e.target.value)}
+ onChange={e => setInternalSearchValue(e.target.value)}
onKeyDown={handleKeyDown}
- onClear={() => setSearchText('')}
+ onClear={() => setInternalSearchValue('')}
onBlur={onBlur}
autoFocus={autoFocus}
/>
diff --git a/web/app/components/workflow/nodes/code/dependency-picker.tsx b/web/app/components/workflow/nodes/code/dependency-picker.tsx
index feed5234a7..dd9e97af6f 100644
--- a/web/app/components/workflow/nodes/code/dependency-picker.tsx
+++ b/web/app/components/workflow/nodes/code/dependency-picker.tsx
@@ -1,5 +1,10 @@
import type { FC } from 'react'
import type { CodeDependency } from './types'
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from '@langgenius/dify-ui/popover'
import {
RiArrowDownSLine,
} from '@remixicon/react'
@@ -8,7 +13,6 @@ import * as React from 'react'
import { useCallback, useState } from 'react'
import { Check } from '@/app/components/base/icons/src/vender/line/general'
import Input from '@/app/components/base/input'
-import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
type Props = {
value: CodeDependency
@@ -32,21 +36,22 @@ const DependencyPicker: FC = ({
}, [onChange])
return (
-
- setOpen(!open)} className="grow cursor-pointer">
-
-
+
+
+ )}
+ />
+
- {hoveredPill}
-
-
- = ({
)}
-
+
)
+
+ if (!isSupportConstantValue) {
+ if (readonly)
+ return triggerContent
+
+ return (
+ {trigger}
return (
-
- {!!trigger && setOpen(!open)}>{trigger} }
+ {!!trigger && (
+ {
+ if (readonly)
+ e.preventDefault()
+ }}
+ />
+ )}
{!trigger && (
= ({
varKindTypes={varKindTypes}
varName={varName}
variableCategory={variableCategory}
- VarPickerWrap={VarPickerWrap}
- WrapElem={WrapElem}
/>
)}
-
{!isConstant && (
= ({
preferSchemaType={preferSchemaType}
/>
)}
-
-
+
+
)
}
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.helpers.ts b/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.helpers.ts
index d36dc807a8..a9941bf72c 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.helpers.ts
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.helpers.ts
@@ -1,3 +1,4 @@
+import type { Field, StructuredOutput } from '@/app/components/workflow/nodes/llm/types'
import type { NodeOutPutVar, ValueSelector, Var } from '@/app/components/workflow/types'
import { VAR_SHOW_NAME_MAP } from '@/app/components/workflow/constants'
import { checkKeys } from '@/utils/var'
@@ -76,6 +77,51 @@ const getVisibleChildren = (vars: Var[]) => {
return vars.filter(variable => checkKeys([variable.variable], false).isValid || isSpecialVar(variable.variable.split('.')[0]!))
}
+const includesSearchText = (value: string | undefined, searchTextLower: string) => {
+ if (!value)
+ return false
+
+ return value.toLowerCase().includes(searchTextLower)
+}
+
+const isStructuredOutputChildren = (children: Var['children']): children is StructuredOutput => {
+ return !!children && !Array.isArray(children) && 'schema' in children
+}
+
+const matchesStructuredField = (fieldName: string, field: Field, searchTextLower: string): boolean => {
+ if (includesSearchText(fieldName, searchTextLower))
+ return true
+
+ if (field.properties)
+ return Object.entries(field.properties).some(([childName, childField]) => matchesStructuredField(childName, childField, searchTextLower))
+
+ if (field.items)
+ return matchesStructuredField(field.items.type, field.items, searchTextLower)
+
+ return false
+}
+
+const matchesVariableSearch = (variable: Var, searchTextLower: string): boolean => {
+ if (
+ includesSearchText(variable.variable, searchTextLower)
+ || includesSearchText(variable.des, searchTextLower)
+ || includesSearchText(variable.schemaType, searchTextLower)
+ ) {
+ return true
+ }
+
+ if (!variable.children)
+ return false
+
+ if (Array.isArray(variable.children))
+ return getVisibleChildren(variable.children).some(child => matchesVariableSearch(child, searchTextLower))
+
+ if (isStructuredOutputChildren(variable.children))
+ return Object.entries(variable.children.schema.properties).some(([fieldName, field]) => matchesStructuredField(fieldName, field, searchTextLower))
+
+ return false
+}
+
export const filterReferenceVars = (vars: NodeOutPutVar[], searchText: string) => {
const searchTextLower = searchText.toLowerCase()
@@ -85,7 +131,7 @@ export const filterReferenceVars = (vars: NodeOutPutVar[], searchText: string) =
.filter((node) => {
if (!searchText)
return true
- return node.vars.some(variable => variable.variable.toLowerCase().includes(searchTextLower))
+ return node.vars.some(variable => matchesVariableSearch(variable, searchTextLower))
|| node.title.toLowerCase().includes(searchTextLower)
})
.map((node) => {
@@ -94,7 +140,7 @@ export const filterReferenceVars = (vars: NodeOutPutVar[], searchText: string) =
return {
...node,
- vars: node.vars.filter(variable => variable.variable.toLowerCase().includes(searchTextLower)),
+ vars: node.vars.filter(variable => matchesVariableSearch(variable, searchTextLower)),
}
})
}
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
index 5c67723d78..28ad104ed7 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
@@ -4,6 +4,11 @@ import type { StructuredOutput } from '../../../llm/types'
import type { Field } from '@/app/components/workflow/nodes/llm/types'
import type { NodeOutPutVar, ValueSelector, Var } from '@/app/components/workflow/types'
import { cn } from '@langgenius/dify-ui/cn'
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from '@langgenius/dify-ui/popover'
import { useHover } from 'ahooks'
import { noop } from 'es-toolkit/function'
import * as React from 'react'
@@ -13,11 +18,6 @@ import { ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows
import { CodeAssistant, MagicEdit } from '@/app/components/base/icons/src/vender/line/general'
import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
import Input from '@/app/components/base/input'
-import {
- PortalToFollowElem,
- PortalToFollowElemContent,
- PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
import PickerStructurePanel from '@/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker'
import { VariableIconWithColor } from '@/app/components/workflow/nodes/_base/components/variable/variable-label'
import { VarType } from '@/app/components/workflow/types'
@@ -143,7 +143,7 @@ const Item: FC {
+ e.preventDefault()
+ e.stopPropagation()
+ e.nativeEvent.stopImmediatePropagation()
+ }}
+ >
+
+ )
+
return (
-
+ {!isFlat && (
+
+ {varName}
+ )}
+ {isEnv && (
+ {itemData.variable.replace('env.', '')}
+ )}
+ {isChatVar && (
+ {itemData.variable.replace('conversation.', '')}
+ )}
+ {isRagVariable && (
+ {itemData.variable.split('.').slice(-1)[0]}
+ )}
+ {(preferSchemaType && itemData.schemaType) ? itemData.schemaType : itemData.type}
+ {
+ (isObj || isStructureOutput) && (
+ {
- e.preventDefault()
- e.stopPropagation()
- e.nativeEvent.stopImmediatePropagation()
- }}
- >
-
-
- {!isFlat && (
-
- {varName}
- )}
- {isEnv && (
- {itemData.variable.replace('env.', '')}
- )}
- {isChatVar && (
- {itemData.variable.replace('conversation.', '')}
- )}
- {isRagVariable && (
- {itemData.variable.split('.').slice(-1)[0]}
- )}
- {(preferSchemaType && itemData.schemaType) ? itemData.schemaType : itemData.type}
- {
- (isObj || isStructureOutput) && (
-
-
- {value.name}
-
+
+ {value.name}
+ = ({
))}
setOpen(!open)}>
+ {render}
+
+ )
+ }
+
+ const PopoverContent = ({ children }: { children: import('react').ReactNode }) => {
+ const { open } = React.useContext(PopoverContext)
+ return open ? {children}
: null
+ }
+
+ return {
+ Popover,
+ PopoverTrigger,
+ PopoverContent,
+ }
+})
+
const mockMemberList = vi.hoisted(() => vi.fn())
vi.mock('../member-list', () => ({
diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/email-input.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/email-input.tsx
index 1f18ef076d..cb8de634a2 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/email-input.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/email-input.tsx
@@ -1,14 +1,13 @@
import type { Recipient as RecipientItem } from '../../../types'
import type { Member } from '@/models/common'
import { cn } from '@langgenius/dify-ui/cn'
+import {
+ Popover,
+ PopoverContent,
+} from '@langgenius/dify-ui/popover'
import * as React from 'react'
import { useCallback, useMemo, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
-import {
- PortalToFollowElem,
- PortalToFollowElemContent,
- PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
import EmailItem from './email-item'
import MemberList from './member-list'
@@ -58,8 +57,7 @@ const EmailInput = ({
if (disabled)
return
setIsFocus(true)
- const input = inputRef.current?.children[0] as HTMLInputElement
- input?.focus()
+ inputRef.current?.focus()
}
const handleValueChange = (e: React.ChangeEvent{t(`${i18nPrefix}.deliveryMethod.emailConfigure.memberSelector.trigger`, { ns: 'workflow' })}
+
+ )}
+ />
+
-
-
- {
- filteredMetadataList?.map(metadata => (
-
-
-
+
+
)
}
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-common-variable-selector.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-common-variable-selector.tsx
index dd0858942d..d4aedbd8b9 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-common-variable-selector.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-common-variable-selector.tsx
@@ -1,12 +1,12 @@
import type { VarType } from '@/app/components/workflow/types'
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from '@langgenius/dify-ui/popover'
import { useCallback, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
-import {
- PortalToFollowElem,
- PortalToFollowElemContent,
- PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
type ConditionCommonVariableSelectorProps = {
variables?: { name: string, type: string, value: string }[]
@@ -31,34 +31,17 @@ const ConditionCommonVariableSelector = ({
}, [onChange])
return (
-
-
-
- handleAddConditionWrapped(metadata)}
- >
- {metadata.name}
-
- {metadata.type}
+ {filteredMetadataList?.map(metadata => (
+
+
+ ))}
+
- ))
- }
+ handleAddConditionWrapped(metadata)}
+ >
+ {metadata.name}
+
+ {metadata.type}
+
- {
- selected && (
+
+
+ {selected && (
-
- {
- variables.map(v => (
-
- handleChange(v.value)}
- >
-
- ))
- }
+ {variables.map(v => (
+ handleChange(v.value)}
+ >
+
+ ))}
- {
- !!valueSelector.length && (
+
+
+ {!!valueSelector.length && (
-
-
- {children}
: null
+ }
+
+ return {
+ Popover,
+ PopoverTrigger,
+ PopoverContent,
+ }
+})
+
+const ControlledSearchInput = () => {
+ const [value, setValue] = useState('')
+ return
- {
- schools.map((school, index) => (
-
- )
- }
- {
- onChange(school)
- setOpen(false)
- }}
- >
- {school}
-
- ))
- }
-
+ {schools.map(school => (
+
+ {
+ onChange(school)
+ setOpen(false)
+ }}
+ >
+ {school}
+
+ ))}
+