strategy list

web/app/components/plugins/plugin-detail-panel/agent-strategy-list.tsx

@@ -1,10 +1,9 @@
 import React, { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import ToolItem from '@/app/components/tools/provider/tool-item'
+import StrategyItem from '@/app/components/plugins/plugin-detail-panel/strategy-item'
 import {
-  useAllToolProviders,
-  useBuiltinTools,
-} from '@/service/use-tools'
+  useStrategyProviderDetail,
+} from '@/service/use-strategy'
 import type { PluginDetail } from '@/app/components/plugins/types'
 
 type Props = {
@@ -17,31 +16,30 @@ const AgentStrategyList = ({
   const { t } = useTranslation()
   const providerBriefInfo = detail.declaration.agent_strategy.identity
   const providerKey = `${detail.plugin_id}/${providerBriefInfo.name}`
-  const { data: collectionList = [] } = useAllToolProviders()
+  const { data: strategyProviderDetail } = useStrategyProviderDetail(providerKey)
 
-  const provider = useMemo(() => {
-    return collectionList.find(collection => collection.name === providerKey)
-  }, [collectionList, providerKey])
-  const { data } = useBuiltinTools(providerKey)
+  const strategyList = useMemo(() => {
+    if (!strategyProviderDetail)
+      return []
 
-  if (!data || !provider)
+    return strategyProviderDetail.declaration.strategies
+  }, [strategyProviderDetail])
+
+  if (!strategyProviderDetail)
     return null
 
   return (
     <div className='px-4 pt-2 pb-4'>
       <div className='mb-1 py-1'>
         <div className='mb-1 h-6 flex items-center justify-between text-text-secondary system-sm-semibold-uppercase'>
-          {t('plugin.detailPanel.strategyNum', { num: data.length, strategy: data.length > 1 ? 'strategies' : 'strategy' })}
+          {t('plugin.detailPanel.strategyNum', { num: strategyList.length, strategy: strategyList.length > 1 ? 'strategies' : 'strategy' })}
         </div>
       </div>
       <div className='flex flex-col gap-2'>
-        {data.map(tool => (
-          <ToolItem
-            key={`${detail.plugin_id}${tool.name}`}
-            collection={provider}
-            tool={tool}
-            isBuiltIn
-            isModel={false}
+        {strategyList.map(strategyDetail => (
+          <StrategyItem
+            key={`${strategyDetail.identity.provider}${strategyDetail.identity.name}`}
+            detail={strategyDetail}
           />
         ))}
       </div>

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

@@ -0,0 +1,34 @@
+'use client'
+import React, { useState } from 'react'
+import { useContext } from 'use-context-selector'
+import type {
+  StrategyDetail,
+} from '@/app/components/plugins/types'
+import I18n from '@/context/i18n'
+import { getLanguage } from '@/i18n/language'
+import cn from '@/utils/classnames'
+
+type Props = {
+  detail: StrategyDetail
+}
+
+const StrategyItem = ({
+  detail,
+}: Props) => {
+  const { locale } = useContext(I18n)
+  const language = getLanguage(locale)
+  const [showDetail, setShowDetail] = useState(false)
+
+  return (
+    <>
+      <div
+        className={cn('mb-2 px-4 py-3 bg-components-panel-item-bg rounded-xl border-[0.5px] border-components-panel-border-subtle shadow-xs cursor-pointer hover:bg-components-panel-on-panel-item-bg-hover')}
+        onClick={() => setShowDetail(true)}
+      >
+        <div className='pb-0.5 text-text-secondary system-md-semibold'>{detail.identity.label[language]}</div>
+        <div className='text-text-tertiary system-xs-regular line-clamp-2' title={detail.description[language]}>{detail.description[language]}</div>
+      </div>
+    </>
+  )
+}
+export default StrategyItem