Merge branch 'feat/plugins' into dev/plugin-deploy
This commit is contained in:
JzoNg
commit
f6c1ae52dd
27
web/app/components/base/install-button/index.tsx
Normal file
27
web/app/components/base/install-button/index.tsx
Normal file
@ -0,0 +1,27 @@
|
||||
import Button from '../button'
|
||||
import { RiInstallLine, RiLoader2Line } from '@remixicon/react'
|
||||
|
||||
type InstallButtonProps = {
|
||||
loading: boolean
|
||||
onInstall: () => void
|
||||
t: any
|
||||
}
|
||||
|
||||
const InstallButton = ({ loading, onInstall, t }: InstallButtonProps) => {
|
||||
return (
|
||||
<Button size='small' className='z-[100]' onClick={onInstall}>
|
||||
<div className={`flex px-[3px] justify-center items-center gap-1
|
||||
${loading ? 'text-components-button-secondary-text-disabled' : 'text-components-button-secondary-text'}
|
||||
system-xs-medium`}
|
||||
>
|
||||
{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' />
|
||||
: <RiInstallLine className='w-3.5 h-3.5 text-text-secondary' />
|
||||
}
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
export default InstallButton
|
||||
@ -4,7 +4,7 @@ import type {
|
||||
ModelProvider,
|
||||
} from '../declarations'
|
||||
import { useLanguage } from '../hooks'
|
||||
import { CubeOutline } from '@/app/components/base/icons/src/vender/line/shapes'
|
||||
import { Group } from '@/app/components/base/icons/src/vender/other'
|
||||
import { OpenaiBlue, OpenaiViolet } from '@/app/components/base/icons/src/public/llm'
|
||||
import cn from '@/utils/classnames'
|
||||
|
||||
@ -41,10 +41,12 @@ const ModelIcon: FC<ModelIconProps> = ({
|
||||
|
||||
return (
|
||||
<div className={cn(
|
||||
'flex items-center justify-center w-6 h-6 rounded border-[0.5px] border-black/5 bg-gray-50',
|
||||
'flex items-center justify-center w-5 h-5 rounded-md border-[0.5px] border-components-panel-border-subtle bg-background-default-subtle',
|
||||
className,
|
||||
)}>
|
||||
<CubeOutline className='w-4 h-4 text-text-quaternary' />
|
||||
<div className='flex w-3 h-3 items-center justify-center opacity-35'>
|
||||
<Group className='text-text-tertiary' />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import type { FC } from 'react'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import type {
|
||||
CustomConfigurationModelFixedFields,
|
||||
@ -10,20 +11,24 @@ import {
|
||||
CustomConfigurationStatusEnum,
|
||||
} from '../declarations'
|
||||
import { UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST } from '../provider-added-card'
|
||||
import { ModelStatusEnum } from '../declarations'
|
||||
import type { PluginInfoFromMarketPlace } from '@/app/components/plugins/types'
|
||||
import { useInstallPackageFromMarketPlace } from '@/service/use-plugins'
|
||||
import ConfigurationButton from './configuration-button'
|
||||
import { PluginType } from '@/app/components/plugins/types'
|
||||
import {
|
||||
useUpdateModelList,
|
||||
useUpdateModelProviders,
|
||||
} from '../hooks'
|
||||
import ModelIcon from '../model-icon'
|
||||
import ModelName from '../model-name'
|
||||
import Button from '@/app/components/base/button'
|
||||
import ModelDisplay from './model-display'
|
||||
import InstallButton from '@/app/components/base/install-button'
|
||||
import StatusIndicators from './status-indicators'
|
||||
import cn from '@/utils/classnames'
|
||||
import { useProviderContext } from '@/context/provider-context'
|
||||
import { useModalContextSelector } from '@/context/modal-context'
|
||||
import { useEventEmitterContextContext } from '@/context/event-emitter'
|
||||
import Tooltip from '@/app/components/base/tooltip'
|
||||
import { RiEqualizer2Line, RiErrorWarningFill } from '@remixicon/react'
|
||||
import { RiEqualizer2Line } from '@remixicon/react'
|
||||
import { fetchPluginInfoFromMarketPlace } from '@/service/plugins'
|
||||
|
||||
export type AgentModelTriggerProps = {
|
||||
open?: boolean
|
||||
@ -56,6 +61,36 @@ const AgentModelTrigger: FC<AgentModelTriggerProps> = ({
|
||||
item => item.quota_type === modelProvider.system_configuration.current_quota_type,
|
||||
)
|
||||
)
|
||||
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()
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
if (providerName && !modelProvider) {
|
||||
const parts = providerName.split('/')
|
||||
const org = parts[0]
|
||||
const name = parts[1]
|
||||
try {
|
||||
const pluginInfo = await fetchPluginInfoFromMarketPlace({ org, name })
|
||||
if (pluginInfo.data.plugin.category === PluginType.model)
|
||||
setPluginInfo(pluginInfo.data.plugin)
|
||||
}
|
||||
catch (error) {
|
||||
// pass
|
||||
}
|
||||
setIsPluginChecked(true)
|
||||
}
|
||||
else {
|
||||
setIsPluginChecked(true)
|
||||
}
|
||||
})()
|
||||
}, [providerName, modelProvider])
|
||||
|
||||
if (modelId && !isPluginChecked)
|
||||
return null
|
||||
|
||||
const handleOpenModal = (
|
||||
provider: ModelProvider,
|
||||
@ -97,64 +132,41 @@ const AgentModelTrigger: FC<AgentModelTriggerProps> = ({
|
||||
>
|
||||
{modelId ? (
|
||||
<>
|
||||
{currentProvider && (
|
||||
<ModelIcon
|
||||
className="m-0.5"
|
||||
provider={currentProvider}
|
||||
modelName={currentModel?.model}
|
||||
isDeprecated={hasDeprecated}
|
||||
/>
|
||||
)}
|
||||
{!currentProvider && (
|
||||
<ModelIcon
|
||||
className="m-0.5"
|
||||
provider={modelProvider}
|
||||
modelName={modelId}
|
||||
isDeprecated={hasDeprecated}
|
||||
/>
|
||||
)}
|
||||
{currentModel && (
|
||||
<ModelName
|
||||
className="flex px-1 py-[3px] items-center gap-1 grow"
|
||||
modelItem={currentModel}
|
||||
showMode
|
||||
showFeatures
|
||||
/>
|
||||
)}
|
||||
{!currentModel && (
|
||||
<div className="flex py-[3px] px-1 items-center gap-1 grow opacity-50 truncate">
|
||||
<div className="text-components-input-text-filled text-ellipsis overflow-hidden system-sm-regular">
|
||||
{modelId}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<ModelIcon
|
||||
className="m-0.5"
|
||||
provider={currentProvider || modelProvider}
|
||||
modelName={currentModel?.model || modelId}
|
||||
isDeprecated={hasDeprecated}
|
||||
/>
|
||||
<ModelDisplay
|
||||
currentModel={currentModel}
|
||||
modelId={modelId}
|
||||
/>
|
||||
{needsConfiguration && (
|
||||
<Button
|
||||
size="small"
|
||||
className="z-[100]"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
handleOpenModal(modelProvider, ConfigurationMethodEnum.predefinedModel, undefined)
|
||||
}}
|
||||
>
|
||||
<div className="flex px-[3px] justify-center items-center gap-1">
|
||||
{t('workflow.nodes.agent.notAuthorized')}
|
||||
</div>
|
||||
<div className="flex w-[14px] h-[14px] justify-center items-center">
|
||||
<div className="w-2 h-2 shrink-0 rounded-[3px] border border-components-badge-status-light-warning-border-inner
|
||||
bg-components-badge-status-light-warning-bg shadow-components-badge-status-light-warning-halo" />
|
||||
</div>
|
||||
</Button>
|
||||
<ConfigurationButton
|
||||
modelProvider={modelProvider}
|
||||
handleOpenModal={handleOpenModal}
|
||||
/>
|
||||
)}
|
||||
<StatusIndicators
|
||||
needsConfiguration={needsConfiguration}
|
||||
modelProvider={!!modelProvider}
|
||||
disabled={!!disabled}
|
||||
pluginInfo={pluginInfo}
|
||||
t={t}
|
||||
/>
|
||||
{!installed && !modelProvider && pluginInfo && (
|
||||
<InstallButton
|
||||
loading={loading}
|
||||
onInstall={async () => {
|
||||
setLoading(true)
|
||||
const { all_installed } = await installPackageFromMarketPlace(pluginInfo.latest_package_identifier)
|
||||
if (all_installed)
|
||||
setInstalled(true)
|
||||
}}
|
||||
t={t}
|
||||
/>
|
||||
)}
|
||||
{!needsConfiguration && disabled && (
|
||||
<Tooltip
|
||||
popupContent={t('workflow.nodes.agent.modelSelectorTooltips.deprecated')}
|
||||
asChild={false}
|
||||
>
|
||||
<RiErrorWarningFill className='w-4 h-4 text-text-destructive' />
|
||||
</Tooltip>
|
||||
)
|
||||
}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
@ -168,11 +180,6 @@ const AgentModelTrigger: FC<AgentModelTriggerProps> = ({
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{currentProvider && currentModel && currentModel.status === ModelStatusEnum.active && (
|
||||
<div className="flex pr-1 items-center">
|
||||
<RiEqualizer2Line className="w-4 h-4 text-text-tertiary group-hover:text-text-secondary" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -0,0 +1,32 @@
|
||||
import Button from '@/app/components/base/button'
|
||||
import { ConfigurationMethodEnum } from '../declarations'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
type ConfigurationButtonProps = {
|
||||
modelProvider: any
|
||||
handleOpenModal: any
|
||||
}
|
||||
|
||||
const ConfigurationButton = ({ modelProvider, handleOpenModal }: ConfigurationButtonProps) => {
|
||||
const { t } = useTranslation()
|
||||
return (
|
||||
<Button
|
||||
size="small"
|
||||
className="z-[100]"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
handleOpenModal(modelProvider, ConfigurationMethodEnum.predefinedModel, undefined)
|
||||
}}
|
||||
>
|
||||
<div className="flex px-[3px] justify-center items-center gap-1">
|
||||
{t('workflow.nodes.agent.notAuthorized')}
|
||||
</div>
|
||||
<div className="flex w-[14px] h-[14px] justify-center items-center">
|
||||
<div className="w-2 h-2 shrink-0 rounded-[3px] border border-components-badge-status-light-warning-border-inner
|
||||
bg-components-badge-status-light-warning-bg shadow-components-badge-status-light-warning-halo" />
|
||||
</div>
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
export default ConfigurationButton
|
||||
@ -0,0 +1,25 @@
|
||||
import ModelName from '../model-name'
|
||||
|
||||
type ModelDisplayProps = {
|
||||
currentModel: any
|
||||
modelId: string
|
||||
}
|
||||
|
||||
const ModelDisplay = ({ currentModel, modelId }: ModelDisplayProps) => {
|
||||
return currentModel ? (
|
||||
<ModelName
|
||||
className="flex px-1 py-[3px] items-center gap-1 grow"
|
||||
modelItem={currentModel}
|
||||
showMode
|
||||
showFeatures
|
||||
/>
|
||||
) : (
|
||||
<div className="flex py-[3px] px-1 items-center gap-1 grow opacity-50 truncate">
|
||||
<div className="text-components-input-text-filled text-ellipsis overflow-hidden system-sm-regular">
|
||||
{modelId}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ModelDisplay
|
||||
@ -0,0 +1,44 @@
|
||||
import Tooltip from '@/app/components/base/tooltip'
|
||||
import { RiErrorWarningFill } from '@remixicon/react'
|
||||
|
||||
type StatusIndicatorsProps = {
|
||||
needsConfiguration: boolean
|
||||
modelProvider: boolean
|
||||
disabled: boolean
|
||||
pluginInfo: any
|
||||
t: any
|
||||
}
|
||||
|
||||
const StatusIndicators = ({ needsConfiguration, modelProvider, disabled, pluginInfo, t }: StatusIndicatorsProps) => {
|
||||
return (
|
||||
<>
|
||||
{!needsConfiguration && modelProvider && disabled && (
|
||||
<Tooltip
|
||||
popupContent={t('workflow.nodes.agent.modelSelectorTooltips.deprecated')}
|
||||
asChild={false}
|
||||
>
|
||||
<RiErrorWarningFill className='w-4 h-4 text-text-destructive' />
|
||||
</Tooltip>
|
||||
)}
|
||||
{!modelProvider && !pluginInfo && (
|
||||
<Tooltip
|
||||
popupContent={
|
||||
<div className='flex w-[240px] max-w-[240px] gap-1 flex-col px-1 py-1.5'>
|
||||
<div className='text-text-primary title-xs-semi-bold'>{t('workflow.nodes.agent.modelNotInMarketplace.title')}</div>
|
||||
<div className='min-w-[200px] text-text-secondary body-xs-regular'>
|
||||
{t('workflow.nodes.agent.modelNotInMarketplace.desc')}
|
||||
</div>
|
||||
<div className='text-text-accent body-xs-regular'>{t('workflow.nodes.agent.modelNotInMarketplace.manageInPlugins')}</div>
|
||||
</div>
|
||||
}
|
||||
asChild={false}
|
||||
needsDelay
|
||||
>
|
||||
<RiErrorWarningFill className='w-4 h-4 text-text-destructive' />
|
||||
</Tooltip>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default StatusIndicators
|
||||
@ -7,7 +7,6 @@ import ActionList from './action-list'
|
||||
import ModelList from './model-list'
|
||||
import AgentStrategyList from './agent-strategy-list'
|
||||
import Drawer from '@/app/components/base/drawer'
|
||||
import MultipleToolSelector from '@/app/components/plugins/plugin-detail-panel/multiple-tool-selector'
|
||||
import type { PluginDetail } from '@/app/components/plugins/types'
|
||||
import cn from '@/utils/classnames'
|
||||
|
||||
@ -28,12 +27,6 @@ const PluginDetailPanel: FC<Props> = ({
|
||||
onUpdate()
|
||||
}
|
||||
|
||||
const [value, setValue] = React.useState<any>(undefined)
|
||||
const testChange = (val: any) => {
|
||||
console.log('tool change', val)
|
||||
setValue(val)
|
||||
}
|
||||
|
||||
if (!detail)
|
||||
return null
|
||||
|
||||
@ -59,15 +52,6 @@ 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 py-2'>
|
||||
<MultipleToolSelector
|
||||
value={value || []}
|
||||
label='TOOLS'
|
||||
onChange={testChange}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
@ -0,0 +1,14 @@
|
||||
import {
|
||||
usePluginManifestInfo,
|
||||
} from '@/service/use-plugins'
|
||||
|
||||
export const usePluginInstalledCheck = (providerName = '') => {
|
||||
const pluginID = providerName?.split('/').splice(0, 2).join('/')
|
||||
|
||||
const { data: manifest } = usePluginManifestInfo(pluginID)
|
||||
|
||||
return {
|
||||
inMarketPlace: !!manifest,
|
||||
manifest: manifest?.data.plugin,
|
||||
}
|
||||
}
|
||||
@ -32,12 +32,15 @@ import {
|
||||
useInvalidateAllBuiltInTools,
|
||||
useUpdateProviderCredentials,
|
||||
} from '@/service/use-tools'
|
||||
import { useInstallPackageFromMarketPlace } 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'
|
||||
import type {
|
||||
OffsetOptions,
|
||||
Placement,
|
||||
} from '@floating-ui/react'
|
||||
import { MARKETPLACE_API_PREFIX } from '@/config'
|
||||
import cn from '@/utils/classnames'
|
||||
|
||||
export type ToolValue = {
|
||||
@ -92,6 +95,9 @@ const ToolSelector: FC<Props> = ({
|
||||
const { data: workflowTools } = useAllWorkflowTools()
|
||||
const invalidateAllBuiltinTools = useInvalidateAllBuiltInTools()
|
||||
|
||||
// plugin info check
|
||||
const { inMarketPlace, manifest } = usePluginInstalledCheck(value?.provider_name)
|
||||
|
||||
const currentProvider = useMemo(() => {
|
||||
const mergedTools = [...(buildInTools || []), ...(customTools || []), ...(workflowTools || [])]
|
||||
return mergedTools.find((toolWithProvider) => {
|
||||
@ -164,6 +170,25 @@ const ToolSelector: FC<Props> = ({
|
||||
onSuccess: handleCredentialSettingUpdate,
|
||||
})
|
||||
|
||||
// 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}` })
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<PortalToFollowElem
|
||||
@ -188,7 +213,7 @@ const ToolSelector: FC<Props> = ({
|
||||
{!trigger && value?.provider_name && (
|
||||
<ToolItem
|
||||
open={isShow}
|
||||
icon={currentProvider?.icon}
|
||||
icon={currentProvider?.icon || manifestIcon}
|
||||
providerName={value.provider_name}
|
||||
toolName={value.tool_name}
|
||||
showSwitch={supportEnableSwitch}
|
||||
@ -197,13 +222,15 @@ const ToolSelector: FC<Props> = ({
|
||||
onDelete={onDelete}
|
||||
noAuth={currentProvider && !currentProvider.is_team_authorization}
|
||||
onAuth={() => setShowSettingAuth(true)}
|
||||
// uninstalled TODO
|
||||
// isError TODO
|
||||
errorTip={<div className='space-y-1 text-xs'>
|
||||
<h3 className='text-text-primary font-semibold'>{t('workflow.nodes.agent.pluginNotInstalled')}</h3>
|
||||
<p className='text-text-secondary tracking-tight'>{t('workflow.nodes.agent.pluginNotInstalledDesc')}</p>
|
||||
uninstalled={!currentProvider && inMarketPlace}
|
||||
isInstalling={isPending}
|
||||
onInstall={() => handleInstall()}
|
||||
isError={!currentProvider && !inMarketPlace}
|
||||
errorTip={<div className='space-y-1 max-w-[240px] text-xs'>
|
||||
<h3 className='text-text-primary font-semibold'>{t('plugin.detailPanel.toolSelector.uninstalledTitle')}</h3>
|
||||
<p className='text-text-secondary tracking-tight'>{t('plugin.detailPanel.toolSelector.uninstalledContent')}</p>
|
||||
<p>
|
||||
<Link href={'/plugins'} className='text-text-accent tracking-tight'>{t('workflow.nodes.agent.linkToPlugin')}</Link>
|
||||
<Link href={'/plugins'} className='text-text-accent tracking-tight'>{t('plugin.detailPanel.toolSelector.uninstalledLink')}</Link>
|
||||
</p>
|
||||
</div>}
|
||||
/>
|
||||
|
||||
@ -6,6 +6,7 @@ import {
|
||||
RiEqualizer2Line,
|
||||
RiErrorWarningFill,
|
||||
} from '@remixicon/react'
|
||||
import { Group } from '@/app/components/base/icons/src/vender/other'
|
||||
import AppIcon from '@/app/components/base/app-icon'
|
||||
import Switch from '@/app/components/base/switch'
|
||||
import Button from '@/app/components/base/button'
|
||||
@ -61,10 +62,21 @@ const ToolItem = ({
|
||||
open && 'bg-components-panel-on-panel-item-bg-hover shadow-sm',
|
||||
isDeleting && 'hover:bg-state-destructive-hover border-state-destructive-border shadow-xs',
|
||||
)}>
|
||||
<div className={cn('shrink-0', isTransparent && 'opacity-50')}>
|
||||
{typeof icon === 'string' && <div className='w-7 h-7 bg-cover bg-center border-[0.5px] border-components-panel-border-subtle bg-background-default-dodge rounded-lg' style={{ backgroundImage: `url(${icon})` }} />}
|
||||
{typeof icon !== 'string' && <AppIcon className='w-7 h-7 border-[0.5px] border-components-panel-border-subtle bg-background-default-dodge rounded-lg' size='xs' icon={icon?.content} background={icon?.background} />}
|
||||
</div>
|
||||
{icon && (
|
||||
<div className={cn('shrink-0', isTransparent && 'opacity-50')}>
|
||||
{typeof icon === 'string' && <div className='w-7 h-7 bg-cover bg-center border-[0.5px] border-components-panel-border-subtle bg-background-default-dodge rounded-lg' style={{ backgroundImage: `url(${icon})` }} />}
|
||||
{typeof icon !== 'string' && <AppIcon className='w-7 h-7 border-[0.5px] border-components-panel-border-subtle bg-background-default-dodge rounded-lg' size='xs' icon={icon?.content} background={icon?.background} />}
|
||||
</div>
|
||||
)}
|
||||
{!icon && (
|
||||
<div className={cn(
|
||||
'flex items-center justify-center w-7 h-7 rounded-md border-[0.5px] border-components-panel-border-subtle bg-background-default-subtle',
|
||||
)}>
|
||||
<div className='flex w-5 h-5 items-center justify-center opacity-35'>
|
||||
<Group className='text-text-tertiary' />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className={cn('pl-0.5 grow truncate', isTransparent && 'opacity-50')}>
|
||||
<div className='text-text-tertiary system-2xs-medium-uppercase'>{providerNameText}</div>
|
||||
<div className='text-text-secondary system-xs-medium'>{toolName}</div>
|
||||
|
||||
@ -81,7 +81,7 @@ export type PluginManifestInMarket = {
|
||||
icon: string
|
||||
label: Record<Locale, string>
|
||||
category: PluginType
|
||||
version: string // conbine the other place to it
|
||||
version: string // combine the other place to it
|
||||
latest_version: string
|
||||
brief: Record<Locale, string>
|
||||
introduction: string
|
||||
@ -108,6 +108,11 @@ export type PluginDetail = {
|
||||
meta?: MetaData
|
||||
}
|
||||
|
||||
export type PluginInfoFromMarketPlace = {
|
||||
category: PluginType
|
||||
latest_package_identifier: string
|
||||
}
|
||||
|
||||
export type Plugin = {
|
||||
type: 'plugin' | 'bundle' | 'model' | 'extension' | 'tool' | 'agent_strategy'
|
||||
org: string
|
||||
|
||||
@ -83,7 +83,6 @@ export const AgentStrategySelector = (props: AgentStrategySelectorProps) => {
|
||||
}, [query, list])
|
||||
// TODO: should be replaced by real data
|
||||
const isExternalInstalled = true
|
||||
// TODO: 验证这玩意写对了没
|
||||
const icon = list?.find(
|
||||
coll => coll.tools?.find(tool => tool.name === value?.agent_strategy_name),
|
||||
)?.icon as string | undefined
|
||||
@ -125,9 +124,10 @@ export const AgentStrategySelector = (props: AgentStrategySelectorProps) => {
|
||||
onChange({
|
||||
agent_strategy_name: tool!.tool_name,
|
||||
agent_strategy_provider_name: tool!.provider_name,
|
||||
agent_parameters: tool!.params,
|
||||
agent_strategy_label: tool!.tool_label,
|
||||
agent_output_schema: tool!.output_schema,
|
||||
agent_configurations: {},
|
||||
agent_parameters: {},
|
||||
})
|
||||
setOpen(false)
|
||||
}}
|
||||
|
||||
@ -19,7 +19,8 @@ export type Strategy = {
|
||||
agent_strategy_provider_name: string
|
||||
agent_strategy_name: string
|
||||
agent_strategy_label: string
|
||||
agent_parameters?: ToolVarInputs
|
||||
agent_configurations?: Record<string, any>
|
||||
agent_parameters?: Record<string, ToolVarInputs>
|
||||
agent_output_schema: Record<string, any>
|
||||
}
|
||||
|
||||
|
||||
@ -1,30 +1,40 @@
|
||||
import Tooltip from '@/app/components/base/tooltip'
|
||||
import Indicator from '@/app/components/header/indicator'
|
||||
import classNames from '@/utils/classnames'
|
||||
import { useRef } from 'react'
|
||||
import { useMemo, useRef } from 'react'
|
||||
import { useAllBuiltInTools, useAllCustomTools, useAllWorkflowTools } from '@/service/use-tools'
|
||||
|
||||
export type ToolIconProps = {
|
||||
src: string
|
||||
alt?: string
|
||||
status?: 'error' | 'warning'
|
||||
tooltip?: string
|
||||
providerName: string
|
||||
}
|
||||
|
||||
export const ToolIcon = ({ src, status, tooltip, alt }: ToolIconProps) => {
|
||||
export const ToolIcon = ({ status, tooltip, providerName }: ToolIconProps) => {
|
||||
const indicator = status === 'error' ? 'red' : status === 'warning' ? 'yellow' : undefined
|
||||
const containerRef = useRef<HTMLDivElement>(null)
|
||||
const notSuccess = (['error', 'warning'] as Array<ToolIconProps['status']>).includes(status)
|
||||
const { data: buildInTools } = useAllBuiltInTools()
|
||||
const { data: customTools } = useAllCustomTools()
|
||||
const { data: workflowTools } = useAllWorkflowTools()
|
||||
const currentProvider = useMemo(() => {
|
||||
const mergedTools = [...(buildInTools || []), ...(customTools || []), ...(workflowTools || [])]
|
||||
return mergedTools.find((toolWithProvider) => {
|
||||
return toolWithProvider.name === providerName
|
||||
})
|
||||
}, [providerName, buildInTools, customTools, workflowTools])
|
||||
return <Tooltip triggerMethod='hover' popupContent={tooltip} disabled={!notSuccess}>
|
||||
<div className={classNames(
|
||||
'size-5 border-[0.5px] border-components-panel-border-subtle bg-background-default-dodge relative',
|
||||
'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 */}
|
||||
<img
|
||||
src={src}
|
||||
alt={alt}
|
||||
src={currentProvider?.icon as string}
|
||||
alt='tool icon'
|
||||
className={classNames(
|
||||
'w-full h-full max-w-5 max-h-5 object-cover rounded-[6px]',
|
||||
'w-full h-full size-3.5 object-cover',
|
||||
notSuccess && 'opacity-50',
|
||||
)}
|
||||
/>
|
||||
|
||||
@ -8,14 +8,11 @@ import type { ToolIconProps } from './components/tool-icon'
|
||||
import { ToolIcon } from './components/tool-icon'
|
||||
import useConfig from './use-config'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useInstalledPluginList } from '@/service/use-plugins'
|
||||
import { FormTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
|
||||
|
||||
const AgentNode: FC<NodeProps<AgentNodeType>> = (props) => {
|
||||
const { inputs, currentStrategy } = useConfig(props.id, props.data)
|
||||
const { t } = useTranslation()
|
||||
const pluginList = useInstalledPluginList()
|
||||
// TODO: Implement models
|
||||
const models = useMemo(() => {
|
||||
if (!inputs) return []
|
||||
// if selected, show in node
|
||||
@ -24,7 +21,7 @@ const AgentNode: FC<NodeProps<AgentNodeType>> = (props) => {
|
||||
const models = currentStrategy?.parameters
|
||||
.filter(param => param.type === FormTypeEnum.modelSelector)
|
||||
.reduce((acc, param) => {
|
||||
const item = inputs.agent_parameters?.[param.name]
|
||||
const item = inputs.agent_configurations?.[param.name]
|
||||
if (!item) {
|
||||
if (param.required) {
|
||||
acc.push({ param: param.name })
|
||||
@ -41,18 +38,29 @@ const AgentNode: FC<NodeProps<AgentNodeType>> = (props) => {
|
||||
const tools = useMemo(() => {
|
||||
const tools: Array<ToolIconProps> = []
|
||||
currentStrategy?.parameters.forEach((param) => {
|
||||
if (['array[tool]', 'tool'].includes(param.type)) {
|
||||
const vari = inputs.agent_parameters?.[param.name]
|
||||
if (!vari) return
|
||||
if (Array.isArray(vari.value)) {
|
||||
// TODO: Implement array of tools
|
||||
if (param.type === FormTypeEnum.toolSelector) {
|
||||
const field = param.name
|
||||
const value = inputs.agent_configurations?.[field]
|
||||
if (value) {
|
||||
tools.push({
|
||||
providerName: value.provider_name as any,
|
||||
})
|
||||
}
|
||||
else {
|
||||
// TODO: Implement single tool
|
||||
}
|
||||
if (param.type === FormTypeEnum.multiToolSelector) {
|
||||
const field = param.name
|
||||
const value = inputs.agent_configurations?.[field]
|
||||
if (value) {
|
||||
(value as unknown as any[]).forEach((item) => {
|
||||
tools.push({
|
||||
providerName: item.provider_name,
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}, [currentStrategy, inputs.agent_parameters])
|
||||
return tools
|
||||
}, [currentStrategy?.parameters, inputs.agent_configurations])
|
||||
return <div className='mb-1 px-3 py-1 space-y-1'>
|
||||
{inputs.agent_strategy_name
|
||||
? <SettingItem
|
||||
@ -65,7 +73,7 @@ const AgentNode: FC<NodeProps<AgentNodeType>> = (props) => {
|
||||
{inputs.agent_strategy_label}
|
||||
</SettingItem>
|
||||
: <SettingItem label={t('workflow.nodes.agent.strategyNotSet')} />}
|
||||
{models.length && <Group
|
||||
{models.length > 0 && <Group
|
||||
label={<GroupLabel className='mt-1'>
|
||||
{t('workflow.nodes.agent.model')}
|
||||
</GroupLabel>}
|
||||
@ -85,25 +93,13 @@ const AgentNode: FC<NodeProps<AgentNodeType>> = (props) => {
|
||||
/>
|
||||
})}
|
||||
</Group>}
|
||||
<Group label={<GroupLabel className='mt-1'>
|
||||
{tools.length > 0 && <Group label={<GroupLabel className='mt-1'>
|
||||
{t('workflow.nodes.agent.toolbox')}
|
||||
</GroupLabel>}>
|
||||
<div className='grid grid-cols-10 gap-0.5'>
|
||||
<ToolIcon src='/logo/logo.png' />
|
||||
<ToolIcon
|
||||
src='/logo/logo.png'
|
||||
status='error'
|
||||
tooltip={t('workflow.nodes.agent.toolNotInstallTooltip', {
|
||||
tool: 'Gmail Sender',
|
||||
})} />
|
||||
<ToolIcon
|
||||
src='/logo/logo.png'
|
||||
status='warning'
|
||||
tooltip={t('workflow.nodes.agent.toolNotAuthorizedTooltip', {
|
||||
tool: 'DuckDuckGo AI Search',
|
||||
})} />
|
||||
{tools.map(tool => <ToolIcon {...tool} key={Math.random()} />)}
|
||||
</div>
|
||||
</Group>
|
||||
</Group>}
|
||||
</div>
|
||||
}
|
||||
|
||||
|
||||
@ -28,25 +28,27 @@ const AgentPanel: FC<NodePanelProps<AgentNodeType>> = (props) => {
|
||||
strategy={inputs.agent_strategy_name ? {
|
||||
agent_strategy_provider_name: inputs.agent_strategy_provider_name!,
|
||||
agent_strategy_name: inputs.agent_strategy_name!,
|
||||
agent_parameters: inputs.agent_parameters,
|
||||
agent_configurations: inputs.agent_configurations,
|
||||
agent_strategy_label: inputs.agent_strategy_label!,
|
||||
agent_output_schema: inputs.output_schema,
|
||||
agent_parameters: inputs.agent_parameters,
|
||||
} : undefined}
|
||||
onStrategyChange={(strategy) => {
|
||||
setInputs({
|
||||
...inputs,
|
||||
agent_strategy_provider_name: strategy?.agent_strategy_provider_name,
|
||||
agent_strategy_name: strategy?.agent_strategy_name,
|
||||
agent_configurations: strategy?.agent_configurations,
|
||||
agent_parameters: strategy?.agent_parameters,
|
||||
agent_strategy_label: strategy?.agent_strategy_label,
|
||||
output_schema: strategy!.agent_output_schema,
|
||||
})
|
||||
}}
|
||||
formSchema={currentStrategy?.parameters?.map(strategyParamToCredientialForm) || []}
|
||||
formValue={inputs.agent_parameters || {}}
|
||||
formValue={inputs.agent_configurations || {}}
|
||||
onFormValueChange={value => setInputs({
|
||||
...inputs,
|
||||
agent_parameters: value,
|
||||
agent_configurations: value,
|
||||
})}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
@ -5,7 +5,7 @@ export type AgentNodeType = CommonNodeType & {
|
||||
agent_strategy_provider_name?: string
|
||||
agent_strategy_name?: string
|
||||
agent_strategy_label?: string
|
||||
agent_parameters?: Record<string, any>
|
||||
agent_configurations?: Record<string, ToolVarInputs>
|
||||
agent_parameters?: Record<string, ToolVarInputs>
|
||||
agent_configurations?: Record<string, any>
|
||||
output_schema: Record<string, any>
|
||||
}
|
||||
|
||||
@ -74,6 +74,9 @@ const translation = {
|
||||
auth: 'AUTHORIZATION',
|
||||
settings: 'TOOL SETTINGS',
|
||||
empty: 'Click the \'+\' button to add tools. You can add multiple tools.',
|
||||
uninstalledTitle: 'Tool not installed',
|
||||
uninstalledContent: 'This plugin is installed from the local/GitHub repository. Please use after installation.',
|
||||
uninstalledLink: 'Manage in Plugins',
|
||||
},
|
||||
configureApp: 'Configure App',
|
||||
configureModel: 'Configure model',
|
||||
|
||||
@ -714,6 +714,11 @@ const translation = {
|
||||
install: 'Install',
|
||||
installing: 'Installing',
|
||||
},
|
||||
modelNotInMarketplace: {
|
||||
title: 'Model not installed',
|
||||
desc: 'This model is not installed from the marketplace. Please go to Plugins to reinstall.',
|
||||
manageInPlugins: 'Manage in Plugins',
|
||||
},
|
||||
configureModel: 'Configure Model',
|
||||
notAuthorized: 'Not Authorized',
|
||||
model: 'model',
|
||||
|
||||
@ -74,6 +74,9 @@ const translation = {
|
||||
auth: '授权',
|
||||
settings: '工具设置',
|
||||
empty: '点击 "+" 按钮添加工具。您可以添加多个工具。',
|
||||
uninstalledTitle: '工具未安装',
|
||||
uninstalledContent: '此插件安装自 本地 / GitHub 仓库，请安装后使用。',
|
||||
uninstalledLink: '在插件中管理',
|
||||
},
|
||||
configureApp: '应用设置',
|
||||
configureModel: '模型设置',
|
||||
|
||||
@ -714,6 +714,11 @@ const translation = {
|
||||
install: '安装',
|
||||
installing: '安装中',
|
||||
},
|
||||
modelNotInMarketplace: {
|
||||
title: '模型未安装',
|
||||
desc: '此模型未从市场安装。请转到插件重新安装。',
|
||||
manageInPlugins: '在插件中管理',
|
||||
},
|
||||
model: '模型',
|
||||
toolbox: '工具箱',
|
||||
strategyNotSet: '代理策略未设置',
|
||||
|
||||
@ -5,6 +5,7 @@ import type {
|
||||
InstallPackageResponse,
|
||||
Permissions,
|
||||
PluginDeclaration,
|
||||
PluginInfoFromMarketPlace,
|
||||
PluginManifestInMarket,
|
||||
PluginTasksResponse,
|
||||
TaskStatusResponse,
|
||||
@ -75,6 +76,13 @@ export const fetchBundleInfoFromMarketPlace = async ({
|
||||
return getMarketplace<{ data: { version: { dependencies: Dependency[] } } }>(`/bundles/${org}/${name}/${version}`)
|
||||
}
|
||||
|
||||
export const fetchPluginInfoFromMarketPlace = async ({
|
||||
org,
|
||||
name,
|
||||
}: Record<string, string>) => {
|
||||
return getMarketplace<{ data: { plugin: PluginInfoFromMarketPlace, version: { version: string } } }>(`/plugins/${org}/${name}`)
|
||||
}
|
||||
|
||||
export const fetchMarketplaceCollections: Fetcher<MarketplaceCollectionsResponse, { url: string; }> = ({ url }) => {
|
||||
return get<MarketplaceCollectionsResponse>(url)
|
||||
}
|
||||
|
||||
@ -9,6 +9,7 @@ import type {
|
||||
Permissions,
|
||||
Plugin,
|
||||
PluginDetail,
|
||||
PluginInfoFromMarketPlace,
|
||||
PluginTask,
|
||||
PluginsFromMarketplaceByInfoResponse,
|
||||
PluginsFromMarketplaceResponse,
|
||||
@ -91,6 +92,7 @@ export const useUpdatePackageFromMarketPlace = () => {
|
||||
|
||||
export const useVersionListOfPlugin = (pluginID: string) => {
|
||||
return useQuery<{ data: VersionListResponse }>({
|
||||
enabled: !!pluginID,
|
||||
queryKey: [NAME_SPACE, 'versions', pluginID],
|
||||
queryFn: () => getMarketplace<{ data: VersionListResponse }>(`/plugins/${pluginID}/versions`, { params: { page: 1, page_size: 100 } }),
|
||||
})
|
||||
@ -399,6 +401,15 @@ export const useMutationClearAllTaskPlugin = () => {
|
||||
})
|
||||
}
|
||||
|
||||
export const usePluginManifestInfo = (pluginUID: string) => {
|
||||
return useQuery({
|
||||
enabled: !!pluginUID,
|
||||
queryKey: [[NAME_SPACE, 'manifest', pluginUID]],
|
||||
queryFn: () => getMarketplace<{ data: { plugin: PluginInfoFromMarketPlace, version: { version: string } } }>(`/plugins/${pluginUID}`),
|
||||
retry: 0,
|
||||
})
|
||||
}
|
||||
|
||||
export const useDownloadPlugin = (info: { organization: string; pluginName: string; version: string }, needDownload: boolean) => {
|
||||
return useQuery({
|
||||
queryKey: [NAME_SPACE, 'downloadPlugin', info],
|
||||
|
||||
Loading…
Reference in New Issue
Block a user