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

2026-05-03 17:08:03 +08:00 · 2024-12-27 14:25:12 +08:00
parent 1cc15d1ce8 31cca291b7
commit a071d2cd1b
25 changed files with 463 additions and 300 deletions
--- a/web/app/components/plugins/card/index.tsx
+++ b/web/app/components/plugins/card/index.tsx
@ -44,7 +44,7 @@ const Card = ({
  const locale = localeFromProps ? getLanguage(localeFromProps) : defaultLocale
  const { categoriesMap } = useCategories()
  const { category, type, name, org, label, brief, icon, verified } = payload
-  const isBundle = !['plugin', 'model', 'tool', 'extension', 'agent-strategy'].includes(type)
+  const isBundle = !['plugin', 'model', 'tool', 'extension', 'agent_strategy'].includes(type)
  const cornerMark = isBundle ? categoriesMap.bundle?.label : categoriesMap[category]?.label
  const getLocalizedText = (obj: Record<string, string> | undefined) =>
    obj?.[locale] || obj?.['en-US'] || obj?.en_US || ''
--- a/web/app/components/plugins/hooks.ts
+++ b/web/app/components/plugins/hooks.ts
@ -44,7 +44,7 @@ export const useCategories = (translateFromOut?: TFunction) => {
  const categories = categoryKeys.map((category) => {
    if (category === 'agent') {
      return {
-        name: 'agent-strategy',
+        name: 'agent_strategy',
        label: t(`plugin.category.${category}s`),
      }
    }
--- a/web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx
@ -38,7 +38,6 @@ const InstallFromMarketplace: React.FC<InstallFromMarketplaceProps> = ({
  const updateModelProviders = useUpdateModelProviders()
  const invalidateAllToolProviders = useInvalidateAllToolProviders()
  const invalidateInstalledPluginList = useInvalidateInstalledPluginList()
-  // TODO: check installed in beta version.

  const getTitle = useCallback(() => {
    if (isBundle && step === InstallStep.installed)
--- a/web/app/components/plugins/marketplace/utils.ts
+++ b/web/app/components/plugins/marketplace/utils.ts
@ -102,7 +102,7 @@ export const getMarketplaceListCondition = (pluginType: string) => {
    return 'category=tool'

  if (pluginType === PluginType.agent)
-    return 'category=agent-strategy'
+    return 'category=agent_strategy'

  if (pluginType === PluginType.model)
    return 'category=model'
--- a/web/app/components/plugins/plugin-detail-panel/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/index.tsx
@ -33,6 +33,9 @@ const PluginDetailPanel: FC<Props> = ({
    console.log('tool change', val)
    setValue(val)
  }
+  const testDelete = () => {
+    setValue(undefined)
+  }

  if (!detail)
    return null
@ -63,6 +66,7 @@ const PluginDetailPanel: FC<Props> = ({
              <ToolSelector
                value={value}
                onSelect={item => testChange(item)}
+                onDelete={testDelete}
              />
            </div>
          </div>
--- a/web/app/components/plugins/plugin-detail-panel/model-selector/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/model-selector/index.tsx
@ -13,6 +13,7 @@ import ModelSelector from '@/app/components/header/account-setting/model-provide
 import {
  useModelList,
 } from '@/app/components/header/account-setting/model-provider-page/hooks'
+import AgentModelTrigger from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal/agent-model-trigger'
 import Trigger from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal/trigger'
 import type { TriggerProps } from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal/trigger'
 import {
@ -34,6 +35,7 @@ export type ModelParameterModalProps = {
  renderTrigger?: (v: TriggerProps) => ReactNode
  readonly?: boolean
  isInWorkflow?: boolean
+  isAgentStrategy?: boolean
  scope?: string
 }

@ -46,13 +48,25 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
  renderTrigger,
  readonly,
  isInWorkflow,
+  isAgentStrategy,
  scope = ModelTypeEnum.textGeneration,
 }) => {
  const { t } = useTranslation()
  const { isAPIKeySet } = useProviderContext()
  const [open, setOpen] = useState(false)
  const scopeArray = scope.split('&')
-  const scopeFeatures = scopeArray.slice(1) || []
+  const scopeFeatures = useMemo(() => {
+    if (scopeArray.includes('all'))
+      return []
+    return scopeArray.filter(item => ![
+      ModelTypeEnum.textGeneration,
+      ModelTypeEnum.textEmbedding,
+      ModelTypeEnum.rerank,
+      ModelTypeEnum.moderation,
+      ModelTypeEnum.speech2text,
+      ModelTypeEnum.tts,
+    ].includes(item as ModelTypeEnum))
+  }, [scopeArray])

  const { data: textGenerationList } = useModelList(ModelTypeEnum.textGeneration)
  const { data: textEmbeddingList } = useModelList(ModelTypeEnum.textEmbedding)
@ -168,8 +182,16 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
                providerName: value?.provider,
                modelId: value?.model,
              })
-              : (
-                <Trigger
+              : (isAgentStrategy
+                ? <AgentModelTrigger
+                  disabled={disabled}
+                  hasDeprecated={hasDeprecated}
+                  currentProvider={currentProvider}
+                  currentModel={currentModel}
+                  providerName={value?.provider}
+                  modelId={value?.model}
+                />
+                : <Trigger
                  disabled={disabled}
                  isInWorkflow={isInWorkflow}
                  modelDisabled={modelDisabled}
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
@ -2,6 +2,7 @@
 import type { FC } from 'react'
 import React, { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import Link from 'next/link'
 import {
  RiArrowLeftLine,
  RiArrowRightUpLine,
@ -12,6 +13,7 @@ import {
  PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import ToolTrigger from '@/app/components/plugins/plugin-detail-panel/tool-selector/tool-trigger'
+import ToolItem from '@/app/components/plugins/plugin-detail-panel/tool-selector/tool-item'
 import ToolPicker from '@/app/components/workflow/block-selector/tool-picker'
 import Button from '@/app/components/base/button'
 import Indicator from '@/app/components/header/indicator'
@ -54,6 +56,7 @@ type Props = {
    parameters?: Record<string, any>
    extra?: Record<string, any>
  }) => void
+  onDelete?: () => void
  supportAddCustomTool?: boolean
  scope?: string
 }
@ -63,6 +66,7 @@ const ToolSelector: FC<Props> = ({
  placement = 'left',
  offset = 4,
  onSelect,
+  onDelete,
  scope,
 }) => {
  const { t } = useTranslation()
@ -155,12 +159,33 @@ const ToolSelector: FC<Props> = ({
          className='w-full'
          onClick={handleTriggerClick}
        >
-          <ToolTrigger
-            isConfigure
-            open={isShow}
-            value={value}
-            provider={currentProvider}
-          />
+          {!value?.provider_name && (
+            <ToolTrigger
+              isConfigure
+              open={isShow}
+              value={value}
+              provider={currentProvider}
+            />
+          )}
+          {value?.provider_name && (
+            <ToolItem
+              open={isShow}
+              icon={currentProvider?.icon}
+              providerName={value.provider_name}
+              toolName={value.tool_name}
+              onDelete={onDelete}
+              noAuth={currentProvider && !currentProvider.is_team_authorization}
+              onAuth={() => setShowSettingAuth(true)}
+              // uninstalled
+              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>
+                <p>
+                  <Link href={'/plugins'} className='text-text-accent tracking-tight'>{t('workflow.nodes.agent.linkToPlugin')}</Link>
+                </p>
+              </div>}
+            />
+          )}
        </PortalToFollowElemTrigger>
        <PortalToFollowElemContent className='z-[1000]'>
          <div className={cn('relative w-[361px] min-h-20 max-h-[642px] pb-4 rounded-xl backdrop-blur-sm bg-components-panel-bg-blur border-[0.5px] border-components-panel-border shadow-lg', !isShowSettingAuth && 'overflow-y-auto pb-2')}>
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-item.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-item.tsx
@ -0,0 +1,120 @@
+'use client'
+import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  RiDeleteBinLine,
+  RiEqualizer2Line,
+  RiErrorWarningFill,
+} from '@remixicon/react'
+import AppIcon from '@/app/components/base/app-icon'
+import Switch from '@/app/components/base/switch'
+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 = {
+  icon?: any
+  providerName?: string
+  toolName?: string
+  showSwitch?: boolean
+  switchValue?: boolean
+  onSwitchChange?: (value: boolean) => void
+  onDelete?: () => void
+  noAuth?: boolean
+  onAuth?: () => void
+  isError?: boolean
+  errorTip?: any
+  uninstalled?: boolean
+  isInstalling?: boolean
+  onInstall?: () => void
+  open: boolean
+}
+
+const ToolItem = ({
+  open,
+  icon,
+  providerName,
+  toolName,
+  showSwitch,
+  switchValue,
+  onSwitchChange,
+  onDelete,
+  noAuth,
+  onAuth,
+  uninstalled,
+  isInstalling,
+  onInstall,
+  isError,
+  errorTip,
+}: Props) => {
+  const { t } = useTranslation()
+  const providerNameText = providerName?.split('/').pop()
+  const isTransparent = uninstalled || isError
+  const [isDeleting, setIsDeleting] = useState(false)
+
+  return (
+    <div className={cn(
+      'group p-1.5 pr-2 flex items-center gap-1 bg-components-panel-on-panel-item-bg border-[0.5px] border-components-panel-border-subtle rounded-lg shadow-xs cursor-default hover:bg-components-panel-on-panel-item-bg-hover hover:shadow-sm',
+      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>
+      <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>
+      </div>
+      <div className='hidden group-hover:flex items-center gap-1'>
+        {!noAuth && !isError && !uninstalled && (
+          <ActionButton>
+            <RiEqualizer2Line className='w-4 h-4' />
+          </ActionButton>
+        )}
+        <div
+          className='p-1 rounded-md text-text-tertiary cursor-pointer hover:text-text-destructive'
+          onClick={onDelete}
+          onMouseOver={() => setIsDeleting(true)}
+          onMouseLeave={() => setIsDeleting(false)}
+        >
+          <RiDeleteBinLine className='w-4 h-4' />
+        </div>
+      </div>
+      {!isError && !uninstalled && !noAuth && showSwitch && (
+        <Switch
+          className='mr-1'
+          size='md'
+          defaultValue={switchValue}
+          onChange={onSwitchChange} />
+      )}
+      {!isError && !uninstalled && noAuth && (
+        <Button variant='secondary' size='small' onClick={onAuth}>
+          {t('tools.notAuthorized')}
+          <Indicator className='ml-2' color='orange' />
+        </Button>
+      )}
+      {!isError && uninstalled && (
+        <InstallPluginButton size={'small'} loading={isInstalling} onClick={(e) => {
+          e.stopPropagation()
+          onInstall?.()
+        }} />
+      )}
+      {isError && (
+        <Tooltip
+          popupContent={errorTip}
+          needsDelay
+        >
+          <div>
+            <RiErrorWarningFill className='w-4 h-4 text-text-destructive' />
+          </div>
+        </Tooltip>
+      )}
+    </div>
+  )
+}
+
+export default ToolItem
--- a/web/app/components/plugins/types.ts
+++ b/web/app/components/plugins/types.ts
@ -6,7 +6,7 @@ export enum PluginType {
  tool = 'tool',
  model = 'model',
  extension = 'extension',
-  agent = 'agent-strategy',
+  agent = 'agent_strategy',
 }

 export enum PluginSource {
@ -109,7 +109,7 @@ export type PluginDetail = {
 }

 export type Plugin = {
-  type: 'plugin' | 'bundle' | 'model' | 'extension' | 'tool'
+  type: 'plugin' | 'bundle' | 'model' | 'extension' | 'tool' | 'agent_strategy'
  org: string
  author?: string
  name: string