dify

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

@@ -0,0 +1,58 @@
+import React, { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import StrategyItem from '@/app/components/plugins/plugin-detail-panel/strategy-item'
+import {
+  useStrategyProviderDetail,
+} from '@/service/use-strategy'
+import type { PluginDetail } from '@/app/components/plugins/types'
+
+type Props = {
+  detail: PluginDetail
+}
+
+const AgentStrategyList = ({
+  detail,
+}: Props) => {
+  const { t } = useTranslation()
+  const providerBriefInfo = detail.declaration.agent_strategy.identity
+  const providerKey = `${detail.plugin_id}/${providerBriefInfo.name}`
+  const { data: strategyProviderDetail } = useStrategyProviderDetail(providerKey)
+
+  const providerDetail = useMemo(() => {
+    return {
+      ...strategyProviderDetail?.declaration.identity,
+      tenant_id: detail.tenant_id,
+    }
+  }, [detail.tenant_id, strategyProviderDetail?.declaration.identity])
+
+  const strategyList = useMemo(() => {
+    if (!strategyProviderDetail)
+      return []
+
+    return strategyProviderDetail.declaration.strategies
+  }, [strategyProviderDetail])
+
+  if (!strategyProviderDetail)
+    return null
+
+  return (
+    <div className='px-4 pb-4 pt-2'>
+      <div className='mb-1 py-1'>
+        <div className='system-sm-semibold-uppercase mb-1 flex h-6 items-center justify-between text-text-secondary'>
+          {t('plugin.detailPanel.strategyNum', { num: strategyList.length, strategy: strategyList.length > 1 ? 'strategies' : 'strategy' })}
+        </div>
+      </div>
+      <div className='flex flex-col gap-2'>
+        {strategyList.map(strategyDetail => (
+          <StrategyItem
+            key={`${strategyDetail.identity.provider}${strategyDetail.identity.name}`}
+            provider={providerDetail as any}
+            detail={strategyDetail}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default AgentStrategyList