fix: down arrow not shown not agent strategy selector

This commit is contained in:
AkaraChen 2025-01-09 15:47:50 +08:00
parent 566dc9b4a8
commit 0fe4fd65e2
2 changed files with 33 additions and 22 deletions

View File

@ -105,16 +105,16 @@ export const AgentStrategySelector = memo((props: AgentStrategySelectorProps) =>
) )
const showPluginNotInstalledWarn = strategyStatus?.plugin?.source === 'external' const showPluginNotInstalledWarn = strategyStatus?.plugin?.source === 'external'
&& !strategyStatus.plugin.installed && !strategyStatus.plugin.installed && !!value
const showUnsupportedStrategy = strategyStatus?.plugin.source === 'external' const showUnsupportedStrategy = strategyStatus?.plugin.source === 'external'
&& !strategyStatus?.isExistInPlugin && !strategyStatus?.isExistInPlugin && !!value
const showSwitchVersion = !strategyStatus?.isExistInPlugin const showSwitchVersion = !strategyStatus?.isExistInPlugin
&& strategyStatus?.plugin.source === 'marketplace' && strategyStatus.plugin.installed && strategyStatus?.plugin.source === 'marketplace' && strategyStatus.plugin.installed && !!value
const showInstallButton = !strategyStatus?.isExistInPlugin const showInstallButton = !strategyStatus?.isExistInPlugin
&& strategyStatus?.plugin.source === 'marketplace' && !strategyStatus.plugin.installed && strategyStatus?.plugin.source === 'marketplace' && !strategyStatus.plugin.installed && !!value
const icon = list?.find( const icon = list?.find(
coll => coll.tools?.find(tool => tool.name === value?.agent_strategy_name), coll => coll.tools?.find(tool => tool.name === value?.agent_strategy_name),
@ -159,8 +159,8 @@ export const AgentStrategySelector = memo((props: AgentStrategySelectorProps) =>
> >
{value?.agent_strategy_label || t('workflow.nodes.agent.strategy.selectTip')} {value?.agent_strategy_label || t('workflow.nodes.agent.strategy.selectTip')}
</p> </p>
{value && <div className='ml-auto flex items-center gap-1'> <div className='ml-auto flex items-center gap-1'>
{showInstallButton && <InstallPluginButton {showInstallButton && value && <InstallPluginButton
onClick={e => e.stopPropagation()} onClick={e => e.stopPropagation()}
size={'small'} size={'small'}
uniqueIdentifier={value.plugin_unique_identifier} uniqueIdentifier={value.plugin_unique_identifier}
@ -187,7 +187,7 @@ export const AgentStrategySelector = memo((props: AgentStrategySelectorProps) =>
// TODO: refresh all strategies // TODO: refresh all strategies
}} }}
/>} />}
</div>} </div>
</div> </div>
</PortalToFollowElemTrigger> </PortalToFollowElemTrigger>
<PortalToFollowElemContent className='z-10'> <PortalToFollowElemContent className='z-10'>

View File

@ -1,10 +1,11 @@
import Tooltip from '@/app/components/base/tooltip' import Tooltip from '@/app/components/base/tooltip'
import Indicator from '@/app/components/header/indicator' import Indicator from '@/app/components/header/indicator'
import classNames from '@/utils/classnames' import classNames from '@/utils/classnames'
import { memo, useMemo, useRef } from 'react' import { memo, useMemo, useRef, useState } from 'react'
import { useAllBuiltInTools, useAllCustomTools, useAllWorkflowTools } from '@/service/use-tools' import { useAllBuiltInTools, useAllCustomTools, useAllWorkflowTools } from '@/service/use-tools'
import { getIconFromMarketPlace } from '@/utils/get-icon' import { getIconFromMarketPlace } from '@/utils/get-icon'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { Group } from '@/app/components/base/icons/src/vender/other'
type Status = 'not-installed' | 'not-authorized' | undefined type Status = 'not-installed' | 'not-authorized' | undefined
@ -45,21 +46,31 @@ export const ToolIcon = memo(({ providerName }: ToolIconProps) => {
if (status === 'not-authorized') return t('workflow.nodes.agent.toolNotAuthorizedTooltip', { tool: name }) if (status === 'not-authorized') return t('workflow.nodes.agent.toolNotAuthorizedTooltip', { tool: name })
throw new Error('Unknown status') throw new Error('Unknown status')
}, [name, notSuccess, status, t]) }, [name, notSuccess, status, t])
return <Tooltip triggerMethod='hover' popupContent={tooltip} disabled={!notSuccess}> const [iconFetchError, setIconFetchError] = useState(false)
<div className={classNames( return <Tooltip
'size-5 border-[0.5px] border-components-panel-border-subtle bg-background-default-dodge relative flex items-center justify-center rounded-[6px]', triggerMethod='hover'
)} popupContent={tooltip}
ref={containerRef} disabled={!notSuccess}
>
<div
className={classNames(
'size-5 border-[0.5px] border-components-panel-border-subtle bg-background-default-dodge relative flex items-center justify-center rounded-[6px]',
)}
ref={containerRef}
> >
{/* eslint-disable-next-line @next/next/no-img-element */} {!iconFetchError
<img // eslint-disable-next-line @next/next/no-img-element
src={icon} ? <img
alt='tool icon' src={icon}
className={classNames( alt='tool icon'
'w-full h-full size-3.5 object-cover', className={classNames(
notSuccess && 'opacity-50', 'w-full h-full size-3.5 object-cover',
)} notSuccess && 'opacity-50',
/> )}
onError={() => setIconFetchError(true)}
/>
: <Group className="w-3 h-3 opacity-35" />
}
{indicator && <Indicator color={indicator} className="absolute right-[-1px] top-[-1px]" />} {indicator && <Indicator color={indicator} className="absolute right-[-1px] top-[-1px]" />}
</div> </div>
</Tooltip> </Tooltip>