installation state of tool

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

@@ -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>
         </>
       )}

web/app/components/plugins/plugin-detail-panel/tool-selector/hooks.ts

@@ -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,
+  }
+}

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

@@ -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>}
             />

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

@@ -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>