From a387cfbc9aefae90647d2dedf89075016eefb65c Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Sat, 2 Nov 2024 13:59:02 +0800
Subject: [PATCH] model list in plugin detail

---
 .../plugin-detail-panel/model-list.tsx        | 47 ++++++++++++-------
 1 file changed, 31 insertions(+), 16 deletions(-)

diff --git a/web/app/components/plugins/plugin-detail-panel/model-list.tsx b/web/app/components/plugins/plugin-detail-panel/model-list.tsx
index fcfecd9121..0d79d73020 100644
--- a/web/app/components/plugins/plugin-detail-panel/model-list.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/model-list.tsx
@@ -1,28 +1,43 @@
 import React from 'react'
+import useSWR from 'swr'
 import { useTranslation } from 'react-i18next'
-// import ModelIcon from '@/app/components/header/account-setting/model-provider-page/model-icon'
-// import ModelName from '@/app/components/header/account-setting/model-provider-page/model-name'
+import { usePluginPageContext } from '@/app/components/plugins/plugin-page/context'
+import ModelIcon from '@/app/components/header/account-setting/model-provider-page/model-icon'
+import ModelName from '@/app/components/header/account-setting/model-provider-page/model-name'
+import { fetchModelProviderModelList } from '@/service/common'
 
 const ModelList = () => {
   const { t } = useTranslation()
+  const currentPluginDetail = usePluginPageContext(v => v.currentPluginDetail)
+
+  const { data: res } = useSWR(
+    `/workspaces/current/model-providers/${currentPluginDetail.plugin_id}/${currentPluginDetail.name}/models`,
+    fetchModelProviderModelList,
+  )
+
+  if (!res)
+    return null
 
   return (
     <div className='px-4 py-2'>
-      <div className='mb-1 h-6 flex items-center text-text-secondary system-sm-semibold-uppercase'>{t('plugin.detailPanel.modelNum', { num: 3 })}</div>
+      <div className='mb-1 h-6 flex items-center text-text-secondary system-sm-semibold-uppercase'>{t('plugin.detailPanel.modelNum', { num: res.data.length })}</div>
       <div className='h-8 flex items-center'>
-        {/* <ModelIcon
-          className='shrink-0 mr-2'
-          provider={provider}
-          modelName={model.model}
-        />
-        <ModelName
-          className='grow text-sm font-normal text-gray-900'
-          modelItem={model}
-          showModelType
-          showMode
-          showContextSize
-        >
-        </ModelName> */}
+        {res.data.map(model => (
+          <div key={model.model} className='h-6 py-1 flex items-center'>
+            <ModelIcon
+              className='shrink-0 mr-2'
+              provider={currentPluginDetail.declaration.model}
+              modelName={model.model}
+            />
+            <ModelName
+              className='grow text-text-secondary system-md-regular'
+              modelItem={model}
+              showModelType
+              showMode
+              showContextSize
+            />
+          </div>
+        ))}
       </div>
     </div>
   )