From 52553a66ba35fed526defa2b045028de2cf6e67a Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Thu, 9 Jan 2025 14:40:58 +0800
Subject: [PATCH] fix style of agent strategy

---
 .../plugins/plugin-detail-panel/agent-strategy-list.tsx  | 9 ++++++++-
 .../plugins/plugin-detail-panel/strategy-detail.tsx      | 6 ++++--
 .../plugins/plugin-detail-panel/strategy-item.tsx        | 1 +
 .../plugins/plugin-detail-panel/tool-selector/index.tsx  | 4 ++--
 4 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/web/app/components/plugins/plugin-detail-panel/agent-strategy-list.tsx b/web/app/components/plugins/plugin-detail-panel/agent-strategy-list.tsx
index 827a28a95e..fafcf1439c 100644
--- a/web/app/components/plugins/plugin-detail-panel/agent-strategy-list.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/agent-strategy-list.tsx
@@ -18,6 +18,13 @@ const AgentStrategyList = ({
   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 []
@@ -39,7 +46,7 @@ const AgentStrategyList = ({
         {strategyList.map(strategyDetail => (
           <StrategyItem
             key={`${strategyDetail.identity.provider}${strategyDetail.identity.name}`}
-            provider={strategyProviderDetail.declaration.identity}
+            provider={providerDetail as any}
             detail={strategyDetail}
           />
         ))}
diff --git a/web/app/components/plugins/plugin-detail-panel/strategy-detail.tsx b/web/app/components/plugins/plugin-detail-panel/strategy-detail.tsx
index 2b58f620b1..a7f1d84071 100644
--- a/web/app/components/plugins/plugin-detail-panel/strategy-detail.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/strategy-detail.tsx
@@ -16,6 +16,7 @@ import type {
 } from '@/app/components/plugins/types'
 import type { Locale } from '@/i18n'
 import { useRenderI18nObject } from '@/hooks/use-i18n'
+import { API_PREFIX } from '@/config'
 import cn from '@/utils/classnames'
 
 type Props = {
@@ -23,6 +24,7 @@ type Props = {
     author: string
     name: string
     description: Record<Locale, string>
+    tenant_id: string
     icon: string
     label: Record<Locale, string>
     tags: string[]
@@ -94,7 +96,7 @@ const StrategyDetail: FC<Props> = ({
             BACK
           </div>
           <div className='flex items-center gap-1'>
-            <Icon size='tiny' className='w-6 h-6' src={provider.icon} />
+            <Icon size='tiny' className='w-6 h-6' src={`${API_PREFIX}/workspaces/current/plugin/icon?tenant_id=${provider.tenant_id}&filename=${provider.icon}`} />
             <div className=''>{getValueFromI18nObject(provider.label)}</div>
           </div>
           <div className='mt-1 text-text-primary system-md-semibold'>{getValueFromI18nObject(detail.identity.label)}</div>
@@ -135,7 +137,7 @@ const StrategyDetail: FC<Props> = ({
                 </div>
                 <div className='p-4 pb-1 text-text-primary system-sm-semibold-uppercase'>OUTPUT</div>
                 {outputSchema.length > 0 && (
-                  <div className='py-2 space-y-1'>
+                  <div className='px-4 py-2 space-y-1'>
                     {outputSchema.map((outputItem, index) => (
                       <div key={index} className='py-1'>
                         <div className='flex items-center gap-2'>
diff --git a/web/app/components/plugins/plugin-detail-panel/strategy-item.tsx b/web/app/components/plugins/plugin-detail-panel/strategy-item.tsx
index 8cdb7315d8..fd2fea99e0 100644
--- a/web/app/components/plugins/plugin-detail-panel/strategy-item.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/strategy-item.tsx
@@ -13,6 +13,7 @@ type Props = {
     author: string
     name: string
     description: Record<Locale, string>
+    tenant_id: string
     icon: string
     label: Record<Locale, string>
     tags: string[]
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
index e20673f7fa..d00b65f16d 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
@@ -280,7 +280,7 @@ const ToolSelector: FC<Props> = ({
                 {currentProvider && currentProvider.type === CollectionType.builtIn && currentProvider.allow_delete && (
                   <div className='px-4 pt-3 flex flex-col'>
                     <div className='flex items-center gap-2'>
-                      <div className='text-text-tertiary system-xs-medium-uppercase'>{t('plugin.detailPanel.toolSelector.auth')}</div>
+                      <div className='shrink-0 text-text-tertiary system-xs-medium-uppercase'>{t('plugin.detailPanel.toolSelector.auth')}</div>
                       <Divider bgStyle='gradient' className='grow' />
                     </div>
                     <div className='py-2'>
@@ -312,7 +312,7 @@ const ToolSelector: FC<Props> = ({
                 {currentToolParams.length > 0 && currentProvider?.is_team_authorization && (
                   <div className='px-4 pt-3'>
                     <div className='flex items-center gap-2'>
-                      <div className='text-text-tertiary system-xs-medium-uppercase'>{t('plugin.detailPanel.toolSelector.settings')}</div>
+                      <div className='shrink-0 text-text-tertiary system-xs-medium-uppercase'>{t('plugin.detailPanel.toolSelector.settings')}</div>
                       <Divider bgStyle='gradient' className='grow' />
                     </div>
                     <div className='py-2'>