From f03631ff9eeb30f3df49ddff1b27bcd048972aa5 Mon Sep 17 00:00:00 2001
From: AkaraChen <akarachen@outlook.com>
Date: Tue, 7 Jan 2025 15:08:36 +0800
Subject: [PATCH] feat: init agent strategy install from marketplace

---
 .../market-place-plugin/list.tsx              |  6 ++-
 .../components/agent-strategy-selector.tsx    | 47 +++++++++++++------
 2 files changed, 37 insertions(+), 16 deletions(-)

diff --git a/web/app/components/workflow/block-selector/market-place-plugin/list.tsx b/web/app/components/workflow/block-selector/market-place-plugin/list.tsx
index 596b6f21c5..ace5443bd5 100644
--- a/web/app/components/workflow/block-selector/market-place-plugin/list.tsx
+++ b/web/app/components/workflow/block-selector/market-place-plugin/list.tsx
@@ -15,6 +15,7 @@ type Props = {
   list: Plugin[]
   searchText: string
   tags: string[]
+  disableMaxWidth?: boolean
 }
 
 const List = ({
@@ -22,6 +23,7 @@ const List = ({
   searchText,
   tags,
   list,
+  disableMaxWidth = false,
 }: Props, ref: any) => {
   const { t } = useTranslation()
   const hasFilter = !searchText
@@ -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}
diff --git a/web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx b/web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx
index 44bf246cfa..c5862dab02 100644
--- a/web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx
+++ b/web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx
@@ -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,7 +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:max-h-[300px] xl:max-h-[400px] 2xl:max-h-[564px] relative overflow-hidden flex flex-col">
+        <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}
@@ -185,17 +205,16 @@ export const AgentStrategySelector = memo((props: AgentStrategySelectorProps) =>
                 plugin_unique_identifier: tool!.provider_id,
               })
               setOpen(false)
-            }}
-            hasSearchText={false}
-            showWorkflowEmpty={false}
+            } }
             className='max-w-none max-h-full h-full overflow-y-auto'
-            indexBarClassName='top-0 xl:top-36'
+            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='px-4 py-2 flex items-center border-t border-divider-subtle text-text-accent-light-mode-only bg-components-panel-bg text-xs'>
-            <Link href={MARKETPLACE_URL_PREFIX} className='flex ml-1'>
-              {t('plugin.findMoreInMarketplace')} <RiArrowRightUpLine className='size-3' />
-            </Link>
-          </div>
         </main>
       </div>
     </PortalToFollowElemContent>