opensource
/
dify
mirror of https://github.com/langgenius/dify.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'feat/plugins' into dev/plugin-deploy

This commit is contained in:
JzoNg 2025-01-07 15:57:17 +08:00
parent 485d510e80 130cfaf2a4
commit d7657f4874
17 changed files with 266 additions and 172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/app/components/base/badge.tsx
View File

@ -20,7 +20,7 @@ const Badge = ({
return (
<div
className={cn(
'inline-flex items-center px-[5px] h-5 rounded-[5px] border border-divider-deep leading-3 text-text-tertiary',
'relative inline-flex items-center px-[5px] h-5 rounded-[5px] border border-divider-deep leading-3 text-text-tertiary',
uppercase ? 'system-2xs-medium-uppercase' : 'system-xs-medium',
className,
)}

2
web/app/components/base/install-button/index.tsx
View File

@ -17,7 +17,7 @@ const InstallButton = ({ loading, onInstall, t }: InstallButtonProps) => {
{loading ? t('workflow.nodes.agent.pluginInstaller.installing') : t('workflow.nodes.agent.pluginInstaller.install')}
</div>
{loading
? <RiLoader2Line className='w-3.5 h-3.5 text-text-quaternary' />
? <RiLoader2Line className='w-3.5 h-3.5 text-text-quaternary animate-spin' />
: <RiInstallLine className='w-3.5 h-3.5 text-text-secondary' />
}
</Button>

1
web/app/components/base/qrcode/style.module.css
View File

@ -41,6 +41,7 @@
gap: 4px;
}
.qrcodeform {
z-index: 50;
border: 0.5px solid #eaecf0;
display: flex;
flex-direction: column;

43
web/app/components/header/account-setting/model-provider-page/hooks.ts
View File

@ -16,6 +16,7 @@ import type {
} from './declarations'
import {
ConfigurationMethodEnum,
CustomConfigurationStatusEnum,
ModelStatusEnum,
} from './declarations'
import I18n from '@/context/i18n'
@ -33,6 +34,9 @@ import {
import type { Plugin } from '@/app/components/plugins/types'
import { PluginType } from '@/app/components/plugins/types'
import { getMarketplacePluginsByCollectionId } from '@/app/components/plugins/marketplace/utils'
import { useModalContextSelector } from '@/context/modal-context'
import { useEventEmitterContextContext } from '@/context/event-emitter'
import { UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST } from './provider-added-card'
type UseDefaultModelAndModelList = (
defaultModel: DefaultModelResponse | undefined,
@ -304,3 +308,42 @@ export const useMarketplaceAllPlugins = (providers: ModelProvider[], searchText:
isLoading,
}
}
export const useModelModalHandler = () => {
const setShowModelModal = useModalContextSelector(state => state.setShowModelModal)
const updateModelProviders = useUpdateModelProviders()
const updateModelList = useUpdateModelList()
const { eventEmitter } = useEventEmitterContextContext()
return (
provider: ModelProvider,
configurationMethod: ConfigurationMethodEnum,
CustomConfigurationModelFixedFields?: CustomConfigurationModelFixedFields,
) => {
setShowModelModal({
payload: {
currentProvider: provider,
currentConfigurationMethod: configurationMethod,
currentCustomConfigurationModelFixedFields: CustomConfigurationModelFixedFields,
},
onSaveCallback: () => {
updateModelProviders()
provider.supported_model_types.forEach((type) => {
updateModelList(type)
})
if (configurationMethod === ConfigurationMethodEnum.customizableModel
&& provider.custom_configuration.status === CustomConfigurationStatusEnum.active) {
eventEmitter?.emit({
type: UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST,
payload: provider.provider,
} as any)
if (CustomConfigurationModelFixedFields?.__model_type)
updateModelList(CustomConfigurationModelFixedFields.__model_type)
}
},
})
}
}

38
web/app/components/header/account-setting/model-provider-page/index.tsx
View File

@ -9,19 +9,21 @@ import {
RiBrainLine,
} from '@remixicon/react'
import SystemModelSelector from './system-model-selector'
import ProviderAddedCard, { UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST } from './provider-added-card'
import ProviderAddedCard from './provider-added-card'
import type {
ConfigurationMethodEnum,
CustomConfigurationModelFixedFields,
ModelProvider,
} from './declarations'
import {
ConfigurationMethodEnum,
CustomConfigurationStatusEnum,
ModelTypeEnum,
} from './declarations'
import {
useDefaultModel,
useMarketplaceAllPlugins,
useModelModalHandler,
useUpdateModelList,
useUpdateModelProviders,
} from './hooks'
@ -87,37 +89,7 @@ const ModelProviderPage = ({ searchText }: Props) => {
return [filteredConfiguredProviders, filteredNotConfiguredProviders]
}, [configuredProviders, debouncedSearchText, notConfiguredProviders])
const handleOpenModal = (
provider: ModelProvider,
configurationMethod: ConfigurationMethodEnum,
CustomConfigurationModelFixedFields?: CustomConfigurationModelFixedFields,
) => {
setShowModelModal({
payload: {
currentProvider: provider,
currentConfigurationMethod: configurationMethod,
currentCustomConfigurationModelFixedFields: CustomConfigurationModelFixedFields,
},
onSaveCallback: () => {
updateModelProviders()
provider.supported_model_types.forEach((type) => {
updateModelList(type)
})
if (configurationMethod === ConfigurationMethodEnum.customizableModel && provider.custom_configuration.status === CustomConfigurationStatusEnum.active) {
eventEmitter?.emit({
type: UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST,
payload: provider.provider,
} as any)
if (CustomConfigurationModelFixedFields?.__model_type)
updateModelList(CustomConfigurationModelFixedFields?.__model_type)
}
},
})
}
const handleOpenModal = useModelModalHandler()
const [collapse, setCollapse] = useState(false)
const locale = getLocaleOnClient()
const {

99
web/app/components/header/account-setting/model-provider-page/model-parameter-modal/agent-model-trigger.tsx
View File

@ -2,27 +2,25 @@ import type { FC } from 'react'
import { useEffect, useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next'
import type {
CustomConfigurationModelFixedFields,
ModelItem,
ModelProvider,
} from '../declarations'
import {
ConfigurationMethodEnum,
CustomConfigurationStatusEnum,
ModelTypeEnum,
} from '../declarations'
import { UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST } from '../provider-added-card'
import type { PluginInfoFromMarketPlace } from '@/app/components/plugins/types'
import { useInstallPackageFromMarketPlace } from '@/service/use-plugins'
import { useInvalidateInstalledPluginList } from '@/service/use-plugins'
import ConfigurationButton from './configuration-button'
import { PluginType } from '@/app/components/plugins/types'
import {
useModelModalHandler,
useUpdateModelList,
useUpdateModelProviders,
} from '../hooks'
import ModelIcon from '../model-icon'
import ModelDisplay from './model-display'
import InstallButton from '@/app/components/base/install-button'
import { InstallPluginButton } from '@/app/components/workflow/nodes/_base/components/install-plugin-button'
import StatusIndicators from './status-indicators'
import cn from '@/utils/classnames'
import { useProviderContext } from '@/context/provider-context'
@ -72,10 +70,9 @@ const AgentModelTrigger: FC<AgentModelTriggerProps> = ({
}, [modelProviders, providerName])
const [pluginInfo, setPluginInfo] = useState<PluginInfoFromMarketPlace | null>(null)
const [isPluginChecked, setIsPluginChecked] = useState(false)
const [loading, setLoading] = useState(false)
const [installed, setInstalled] = useState(false)
const { mutateAsync: installPackageFromMarketPlace } = useInstallPackageFromMarketPlace()
const invalidateInstalledPluginList = useInvalidateInstalledPluginList()
const handleOpenModal = useModelModalHandler()
useEffect(() => {
(async () => {
if (providerName && !modelProvider) {
@ -101,66 +98,6 @@ const AgentModelTrigger: FC<AgentModelTriggerProps> = ({
if (modelId && !isPluginChecked)
return null
const handleOpenModal = (
provider: ModelProvider,
configurationMethod: ConfigurationMethodEnum,
CustomConfigurationModelFixedFields?: CustomConfigurationModelFixedFields,
) => {
setShowModelModal({
payload: {
currentProvider: provider,
currentConfigurationMethod: configurationMethod,
currentCustomConfigurationModelFixedFields: CustomConfigurationModelFixedFields,
},
onSaveCallback: () => {
updateModelProviders()
provider.supported_model_types.forEach((type) => {
updateModelList(type)
})
if (configurationMethod === ConfigurationMethodEnum.customizableModel
&& provider.custom_configuration.status === CustomConfigurationStatusEnum.active) {
eventEmitter?.emit({
type: UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST,
payload: provider.provider,
} as any)
if (CustomConfigurationModelFixedFields?.__model_type)
updateModelList(CustomConfigurationModelFixedFields.__model_type)
}
},
})
}
const handleInstall = async (pluginInfo: PluginInfoFromMarketPlace) => {
setLoading(true)
try {
const { all_installed } = await installPackageFromMarketPlace(pluginInfo.latest_package_identifier)
if (all_installed) {
[
ModelTypeEnum.textGeneration,
ModelTypeEnum.textEmbedding,
ModelTypeEnum.rerank,
ModelTypeEnum.moderation,
ModelTypeEnum.speech2text,
ModelTypeEnum.tts,
].forEach((type: ModelTypeEnum) => {
if (scope?.includes(type))
updateModelList(type)
})
updateModelProviders()
setInstalled(true)
}
}
catch (error) {
console.error('Installation failed:', error)
}
finally {
setLoading(false)
}
}
return (
<div
className={cn(
@ -193,13 +130,27 @@ const AgentModelTrigger: FC<AgentModelTriggerProps> = ({
t={t}
/>
{!installed && !modelProvider && pluginInfo && (
<InstallButton
loading={loading}
onInstall={(e) => {
e.stopPropagation()
handleInstall(pluginInfo)
<InstallPluginButton
onClick={e => e.stopPropagation()}
size={'small'}
uniqueIdentifier={pluginInfo.latest_package_identifier}
onSuccess={() => {
[
ModelTypeEnum.textGeneration,
ModelTypeEnum.textEmbedding,
ModelTypeEnum.rerank,
ModelTypeEnum.moderation,
ModelTypeEnum.speech2text,
ModelTypeEnum.tts,
].forEach((type: ModelTypeEnum) => {
if (scope?.includes(type))
updateModelList(type)
},
)
updateModelProviders()
invalidateInstalledPluginList()
setInstalled(true)
}}
t={t}
/>
)}
{modelProvider && !disabled && !needsConfiguration && (

44
web/app/components/header/plugins-nav/downloading-icon.module.css Normal file
View File

@ -0,0 +1,44 @@
@keyframes realistic-blink {
0% { fill: #37ff37; opacity: 0.4; }
15% { fill: #37ff37; opacity: 0.9; }
25% { fill: #37ff37; opacity: 0.3; }
38% { fill: #ff4444; opacity: 0.8; }
42% { fill: #ff4444; opacity: 0.3; }
58% { fill: #37ff37; opacity: 0.9; }
65% { fill: #37ff37; opacity: 0.4; }
79% { fill: #ff4444; opacity: 0.8; }
84% { fill: #ff4444; opacity: 0.3; }
92% { fill: #37ff37; opacity: 0.8; }
100% { fill: #37ff37; opacity: 0.4; }
}
@keyframes drop {
0% {
transform: translateY(-4px);
opacity: 0;
}
5% {
transform: translateY(-4px);
opacity: 1;
}
65% {
transform: translateY(2px);
opacity: 1;
}
80% {
transform: translateY(2px);
opacity: 0;
}
100% {
transform: translateY(2px);
opacity: 0;
}
}
#downloadingIconLight {
animation: realistic-blink 3s infinite ease-in-out;
}
#downloadingIconArrow {
animation: drop 1.2s cubic-bezier(0.4, 0, 1, 1) infinite;
}

17
web/app/components/header/plugins-nav/downloading-icon.tsx Normal file
View File

@ -0,0 +1,17 @@
import s from './downloading-icon.module.css'
const DownloadingIcon = () => {
return (
<div className="inline-flex text-components-button-secondary-text">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="install-icon">
<g id="install-line">
<path d="M8 2V4H5L4.999 14H18.999L19 4H16V2H20C20.5523 2 21 2.44772 21 3V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V3C3 2.44772 3.44772 2 4 2H8ZM18.999 16H4.999L5 20H19L18.999 16Z" fill="currentColor"/>
<path id={s.downloadingIconLight} d="M17 19V17H15V19H17Z"/>
<path id={s.downloadingIconArrow} d="M13 2V7H16L12 11L8 7H11V2H13Z" fill="currentColor"/>
</g>
</svg>
</div>
)
}
export default DownloadingIcon

39
web/app/components/header/plugins-nav/index.tsx
View File

@ -5,6 +5,9 @@ import Link from 'next/link'
import classNames from '@/utils/classnames'
import { Group } from '@/app/components/base/icons/src/vender/other'
import { useSelectedLayoutSegment } from 'next/navigation'
import DownloadingIcon from './downloading-icon'
import { usePluginTaskStatus } from '@/app/components/plugins/plugin-page/plugin-tasks/hooks'
import Indicator from '@/app/components/header/indicator'
type PluginsNavProps = {
className?: string
@ -16,17 +19,43 @@ const PluginsNav = ({
const { t } = useTranslation()
const selectedSegment = useSelectedLayoutSegment()
const activated = selectedSegment === 'plugins'
const {
isInstalling,
isInstallingWithError,
isFailed,
} = usePluginTaskStatus()
return (
<Link href="/plugins" className={classNames(
className, 'group',
)}>
<div className={`flex flex-row h-8 p-1.5 gap-0.5 items-center justify-center
rounded-xl system-sm-medium-uppercase ${activated
? 'border border-components-main-nav-nav-button-border bg-components-main-nav-nav-button-bg-active shadow-md text-components-main-nav-nav-button-text'
: 'text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary'}`}>
<div
className={classNames(
'relative flex flex-row h-8 p-1.5 gap-0.5 border border-transparent items-center justify-center rounded-xl system-sm-medium-uppercase',
activated && 'border-components-main-nav-nav-button-border bg-components-main-nav-nav-button-bg-active shadow-md text-components-main-nav-nav-button-text',
!activated && 'text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
(isInstallingWithError || isFailed) && !activated && 'border-components-panel-border-subtle',
)}
>
{
(isFailed || isInstallingWithError) && !activated && (
<Indicator
color='red'
className='absolute top-[-1px] left-[-1px]'
/>
)
}
<div className='flex mr-0.5 w-5 h-5 justify-center items-center'>
<Group className='w-4 h-4' />
{
(!(isInstalling || isInstallingWithError) || activated) && (
<Group className='w-4 h-4' />
)
}
{
(isInstalling || isInstallingWithError) && !activated && (
<DownloadingIcon />
)
}
</div>
<span className='px-0.5'>{t('common.menus.plugins')}</span>
</div>

22
web/app/components/plugins/plugin-detail-panel/index.tsx
View File

@ -9,6 +9,7 @@ import AgentStrategyList from './agent-strategy-list'
import Drawer from '@/app/components/base/drawer'
import type { PluginDetail } from '@/app/components/plugins/types'
import cn from '@/utils/classnames'
import ToolSelector from '@/app/components/plugins/plugin-detail-panel/tool-selector'
type Props = {
detail?: PluginDetail
@ -27,6 +28,16 @@ const PluginDetailPanel: FC<Props> = ({
onUpdate()
}
const [value, setValue] = React.useState({
provider_name: 'langgenius/google/google',
tool_name: 'google_search',
})
const testHandle = (item: any) => {
console.log(item)
setValue(item)
}
if (!detail)
return null
@ -52,6 +63,17 @@ const PluginDetailPanel: FC<Props> = ({
{!!detail.declaration.agent_strategy && <AgentStrategyList detail={detail} />}
{!!detail.declaration.endpoint && <EndpointList detail={detail} />}
{!!detail.declaration.model && <ModelList detail={detail} />}
{false && (
<div className='px-4'>
<ToolSelector
scope={'all'}
value={value}
onSelect={item => testHandle(item)}
onDelete={() => testHandle(null)}
supportEnableSwitch
/>
</div>
)}
</div>
</>
)}

18
web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
View File

@ -32,7 +32,7 @@ import {
useInvalidateAllBuiltInTools,
useUpdateProviderCredentials,
} from '@/service/use-tools'
import { useInstallPackageFromMarketPlace } from '@/service/use-plugins'
import { useInvalidateInstalledPluginList } from '@/service/use-plugins'
import { usePluginInstalledCheck } from '@/app/components/plugins/plugin-detail-panel/tool-selector/hooks'
import { CollectionType } from '@/app/components/tools/types'
import type { ToolDefaultValue } from '@/app/components/workflow/block-selector/types'
@ -94,6 +94,7 @@ const ToolSelector: FC<Props> = ({
const { data: customTools } = useAllCustomTools()
const { data: workflowTools } = useAllWorkflowTools()
const invalidateAllBuiltinTools = useInvalidateAllBuiltInTools()
const invalidateInstalledPluginList = useInvalidateInstalledPluginList()
// plugin info check
const { inMarketPlace, manifest } = usePluginInstalledCheck(value?.provider_name)
@ -171,22 +172,15 @@ const ToolSelector: FC<Props> = ({
})
// install from marketplace
const { mutateAsync: installPackageFromMarketPlace, isPending } = useInstallPackageFromMarketPlace()
const manifestIcon = useMemo(() => {
if (!manifest)
return ''
return `${MARKETPLACE_API_PREFIX}/plugins/${(manifest as any).plugin_id}/icon`
}, [manifest])
const handleInstall = async () => {
if (!manifest)
return
try {
await installPackageFromMarketPlace(manifest.latest_package_identifier)
invalidateAllBuiltinTools()
}
catch (e: any) {
Toast.notify({ type: 'error', message: `${e.message || e}` })
}
invalidateAllBuiltinTools()
invalidateInstalledPluginList()
}
return (
@ -223,7 +217,7 @@ const ToolSelector: FC<Props> = ({
noAuth={currentProvider && !currentProvider.is_team_authorization}
onAuth={() => setShowSettingAuth(true)}
uninstalled={!currentProvider && inMarketPlace}
isInstalling={isPending}
installInfo={manifest?.latest_package_identifier}
onInstall={() => handleInstall()}
isError={!currentProvider && !inMarketPlace}
errorTip={<div className='space-y-1 max-w-[240px] text-xs'>

26
web/app/components/plugins/plugin-detail-panel/tool-selector/tool-item.tsx
View File

@ -5,8 +5,6 @@ import {
RiDeleteBinLine,
RiEqualizer2Line,
RiErrorWarningFill,
RiInstallLine,
RiLoader2Line,
} from '@remixicon/react'
import { Group } from '@/app/components/base/icons/src/vender/other'
import AppIcon from '@/app/components/base/app-icon'
@ -15,6 +13,7 @@ import Button from '@/app/components/base/button'
import Indicator from '@/app/components/header/indicator'
import ActionButton from '@/app/components/base/action-button'
import Tooltip from '@/app/components/base/tooltip'
import { InstallPluginButton } from '@/app/components/workflow/nodes/_base/components/install-plugin-button'
import cn from '@/utils/classnames'
type Props = {
@ -30,7 +29,7 @@ type Props = {
isError?: boolean
errorTip?: any
uninstalled?: boolean
isInstalling?: boolean
installInfo?: string
onInstall?: () => void
open: boolean
}
@ -47,7 +46,7 @@ const ToolItem = ({
noAuth,
onAuth,
uninstalled,
isInstalling,
installInfo,
onInstall,
isError,
errorTip,
@ -115,20 +114,15 @@ const ToolItem = ({
<Indicator className='ml-2' color='orange' />
</Button>
)}
{!isError && uninstalled && (
<Button
className={cn('flex items-center')}
size='small'
variant='secondary'
disabled={isInstalling}
onClick={(e) => {
e.stopPropagation()
{!isError && uninstalled && installInfo && (
<InstallPluginButton
onClick={e => e.stopPropagation()}
size={'small'}
uniqueIdentifier={installInfo}
onSuccess={() => {
onInstall?.()
}}
>
{!isInstalling ? t('workflow.nodes.agent.pluginInstaller.install') : t('workflow.nodes.agent.pluginInstaller.installing')}
{!isInstalling ? <RiInstallLine className='size-4 ml-1' /> : <RiLoader2Line className='size-4 ml-1 animate-spin' />}
</Button>
/>
)}
{isError && (
<Tooltip

7
web/app/components/plugins/plugin-item/index.tsx
View File

@ -21,7 +21,7 @@ import Action from './action'
import cn from '@/utils/classnames'
import { API_PREFIX, MARKETPLACE_URL_PREFIX } from '@/config'
import { useInvalidateInstalledPluginList } from '@/service/use-plugins'
import { useInvalidateAllToolProviders } from '@/service/use-tools'
import { useInvalidateAllBuiltInTools, useInvalidateAllToolProviders } from '@/service/use-tools'
import { useCategories } from '../hooks'
import { useProviderContext } from '@/context/provider-context'
import { useRenderI18nObject } from '@/hooks/use-i18n'
@ -41,6 +41,7 @@ const PluginItem: FC<Props> = ({
const setCurrentPluginID = usePluginPageContext(v => v.setCurrentPluginID)
const invalidateInstalledPluginList = useInvalidateInstalledPluginList()
const invalidateAllToolProviders = useInvalidateAllToolProviders()
const invalidateAllBuiltinTools = useInvalidateAllBuiltInTools()
const { refreshModelProviders } = useProviderContext()
const {
@ -62,8 +63,10 @@ const PluginItem: FC<Props> = ({
invalidateInstalledPluginList()
if (PluginType.model.includes(category))
refreshModelProviders()
if (PluginType.tool.includes(category))
if (PluginType.tool.includes(category)) {
invalidateAllToolProviders()
invalidateAllBuiltinTools()
}
}
const getValueFromI18nObject = useRenderI18nObject()
const title = getValueFromI18nObject(label)

10
web/app/components/plugins/plugin-page/plugin-tasks/hooks.ts
View File

@ -64,14 +64,16 @@ export const usePluginTaskStatus = () => {
const timerRef = useRef<NodeJS.Timeout | null>(null)
useEffect(() => {
if (isSuccess && opacity > 0) {
if (isSuccess) {
if (timerRef.current) {
clearTimeout(timerRef.current)
timerRef.current = null
}
timerRef.current = setTimeout(() => {
setOpacity(v => v - 0.1)
}, 200)
if (opacity > 0) {
timerRef.current = setTimeout(() => {
setOpacity(v => v - 0.1)
}, 200)
}
}
if (!isSuccess)

17
web/app/components/workflow/block-selector/market-place-plugin/list.tsx
View File

@ -15,14 +15,16 @@ type Props = {
list: Plugin[]
searchText: string
tags: string[]
disableMaxWidth?: boolean
}
const List = ({
const List = forwardRef<{ handleScroll: () => void }, Props>(({
wrapElemRef,
searchText,
tags,
list,
}: Props, ref: any) => {
disableMaxWidth = false,
}, ref) => {
const { t } = useTranslation()
const hasFilter = !searchText
const hasRes = list.length > 0
@ -95,7 +97,7 @@ const List = ({
</Link>
</div>
)}
<div className={cn('p-1', maxWidthClassName)} ref={nextToStickyELemRef}>
<div className={cn('p-1', !disableMaxWidth && maxWidthClassName)} ref={nextToStickyELemRef}>
{list.map((item, index) => (
<Item
key={index}
@ -103,7 +105,7 @@ const List = ({
onAction={() => { }}
/>
))}
<div className='mt-2 mb-3 flex items-center space-x-2'>
<div className='mt-2 mb-3 flex items-center justify-center space-x-2'>
<div className="w-[90px] h-[2px] bg-gradient-to-l from-[rgba(16,24,40,0.08)] to-[rgba(255,255,255,0.01)]"></div>
<Link
href={urlWithSearchText}
@ -118,5 +120,8 @@ const List = ({
</div>
</>
)
}
export default forwardRef(List)
})
List.displayName = 'List'
export default List

51
web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx
View File

@ -1,24 +1,25 @@
import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
import type { ReactNode } from 'react'
import { memo, useMemo, useState } from 'react'
import { memo, useEffect, useMemo, useRef, useState } from 'react'
import type { Strategy } from './agent-strategy'
import classNames from '@/utils/classnames'
import { RiArrowDownSLine, RiArrowRightUpLine, RiErrorWarningFill } from '@remixicon/react'
import { RiArrowDownSLine, RiErrorWarningFill } from '@remixicon/react'
import Tooltip from '@/app/components/base/tooltip'
import Link from 'next/link'
import { InstallPluginButton } from './install-plugin-button'
import ViewTypeSelect, { ViewType } from '../../../block-selector/view-type-select'
import SearchInput from '@/app/components/base/search-input'
import { MARKETPLACE_URL_PREFIX } from '@/config'
import Tools from '../../../block-selector/tools'
import { useTranslation } from 'react-i18next'
import { useStrategyProviders } from '@/service/use-strategy'
import type { StrategyPluginDetail } from '@/app/components/plugins/types'
import { PluginType, type StrategyPluginDetail } from '@/app/components/plugins/types'
import type { ToolWithProvider } from '../../../types'
import { CollectionType } from '@/app/components/tools/types'
import useGetIcon from '@/app/components/plugins/install-plugin/base/use-get-icon'
import { useStrategyInfo } from '../../agent/use-config'
import { SwitchPluginVersion } from './switch-plugin-version'
import PluginList from '@/app/components/workflow/block-selector/market-place-plugin/list'
import { useMarketplacePlugins } from '@/app/components/plugins/marketplace/hooks'
const NotFoundWarn = (props: {
title: ReactNode,
@ -119,6 +120,25 @@ export const AgentStrategySelector = memo((props: AgentStrategySelectorProps) =>
)?.icon as string | undefined
const { t } = useTranslation()
const wrapElemRef = useRef<HTMLDivElement>(null)
const {
queryPluginsWithDebounced: fetchPlugins,
plugins: notInstalledPlugins = [],
} = useMarketplacePlugins()
useEffect(() => {
if (query) {
fetchPlugins({
query,
category: PluginType.agent,
})
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [query])
const pluginRef = useRef(null)
return <PortalToFollowElem open={open} onOpenChange={setOpen} placement='bottom'>
<PortalToFollowElemTrigger className='w-full'>
<div
@ -172,8 +192,7 @@ export const AgentStrategySelector = memo((props: AgentStrategySelectorProps) =>
<SearchInput placeholder={t('workflow.nodes.agent.strategy.searchPlaceholder')} value={query} onChange={setQuery} className={'w-full'} />
<ViewTypeSelect viewType={viewType} onChange={setViewType} />
</header>
<main className="md:h-[300px] xl:h-[400px] 2xl:h-[564px] relative overflow-hidden">
{/* TODO: fix when in list view show workflow as group label */}
<main className="md:max-h-[300px] xl:max-h-[400px] 2xl:max-h-[564px] relative overflow-hidden flex flex-col w-full" ref={wrapElemRef}>
<Tools
tools={filteredTools}
viewType={viewType}
@ -186,18 +205,16 @@ export const AgentStrategySelector = memo((props: AgentStrategySelectorProps) =>
plugin_unique_identifier: tool!.provider_id,
})
setOpen(false)
}}
hasSearchText={false}
showWorkflowEmpty={false}
className='max-w-none'
indexBarClassName='top-0 xl:top-36'
} }
className='max-w-none max-h-full h-full overflow-y-auto'
indexBarClassName='top-0 xl:top-36' showWorkflowEmpty={false} hasSearchText={false} />
<PluginList
wrapElemRef={wrapElemRef}
list={notInstalledPlugins as any} ref={pluginRef}
searchText={query}
tags={[]}
disableMaxWidth
/>
<div className='absolute bottom-0 px-4 py-2 flex items-center justify-center border-t border-divider-subtle text-text-accent-light-mode-only bg-components-panel-bg text-xs'>
Find more in
<Link href={MARKETPLACE_URL_PREFIX} className='flex ml-1'>
Marketplace <RiArrowRightUpLine className='size-3' />
</Link>
</div>
</main>
</div>
</PortalToFollowElemContent>

2
web/app/components/workflow/nodes/_base/components/install-plugin-button.tsx
View File

@ -38,6 +38,6 @@ export const InstallPluginButton = (props: InstallPluginButtonProps) => {
className={classNames('flex items-center', className)}
>
{!isLoading ? t('workflow.nodes.agent.pluginInstaller.install') : t('workflow.nodes.agent.pluginInstaller.installing')}
{!isLoading ? <RiInstallLine className='size-4 ml-1' /> : <RiLoader2Line className='size-4 ml-1 animate-spin' />}
{!isLoading ? <RiInstallLine className='size-3.5 ml-1' /> : <RiLoader2Line className='size-3.5 ml-1 animate-spin' />}
</Button>
}