From e792e91777216347a8f98c5963050b9994c8bb08 Mon Sep 17 00:00:00 2001
From: zxhlyh <jasonapring2015@outlook.com>
Date: Mon, 16 Dec 2024 14:56:17 +0800
Subject: [PATCH] fix: model page

---
 .../model-provider-page/hooks.ts              | 55 ++++++++++---------
 .../model-provider-page/index.tsx             | 21 +------
 web/context/app-context.tsx                   |  2 +-
 3 files changed, 30 insertions(+), 48 deletions(-)

diff --git a/web/app/components/header/account-setting/model-provider-page/hooks.ts b/web/app/components/header/account-setting/model-provider-page/hooks.ts
index e6d1cda1c1..612747e42b 100644
--- a/web/app/components/header/account-setting/model-provider-page/hooks.ts
+++ b/web/app/components/header/account-setting/model-provider-page/hooks.ts
@@ -32,8 +32,7 @@ import {
 } from '@/app/components/plugins/marketplace/hooks'
 import type { Plugin } from '@/app/components/plugins/types'
 import { PluginType } from '@/app/components/plugins/types'
-// import { getMarketplacePluginsByCollectionId } from '@/app/components/plugins/marketplace/utils'
-import type { MarketplaceCollection } from '@/app/components/plugins/marketplace/types'
+import { getMarketplacePluginsByCollectionId } from '@/app/components/plugins/marketplace/utils'
 
 type UseDefaultModelAndModelList = (
   defaultModel: DefaultModelResponse | undefined,
@@ -242,34 +241,11 @@ export const useUpdateModelProviders = () => {
   return updateModelProviders
 }
 
-export const useMarketplace = () => {
-  const [marketplaceCollections] = useState<MarketplaceCollection[]>([])
-  const [marketplaceCollectionPluginsMap] = useState<Record<string, Plugin[]>>()
-  const [isLoading] = useState(false)
-
-  // const getCollectionPlugins = useCallback(async () => {
-  //   setIsLoading(true)
-  //   const collectionPlugins = await getMarketplacePluginsByCollectionId('')
-  //   setIsLoading(false)
-
-  //   setCollectionPlugins(collectionPlugins)
-  // }, [])
-
-  // useEffect(() => {
-  //   getCollectionPlugins()
-  // }, [getCollectionPlugins])
-
-  return {
-    isLoading,
-    marketplaceCollections,
-    marketplaceCollectionPluginsMap,
-  }
-}
-
 export const useMarketplaceAllPlugins = (providers: ModelProvider[], searchText: string) => {
   const exclude = useMemo(() => {
     return providers.map(provider => provider.provider.replace(/(.+)\/([^/]+)$/, '$1'))
   }, [providers])
+  const [collectionPlugins, setCollectionPlugins] = useState<Plugin[]>([])
 
   const {
     plugins,
@@ -278,6 +254,16 @@ export const useMarketplaceAllPlugins = (providers: ModelProvider[], searchText:
     isLoading,
   } = useMarketplacePlugins()
 
+  const getCollectionPlugins = useCallback(async () => {
+    const collectionPlugins = await getMarketplacePluginsByCollectionId('__model-settings-pinned-models')
+
+    setCollectionPlugins(collectionPlugins)
+  }, [])
+
+  useEffect(() => {
+    getCollectionPlugins()
+  }, [getCollectionPlugins])
+
   useEffect(() => {
     if (searchText) {
       queryPluginsWithDebounced({
@@ -298,8 +284,23 @@ export const useMarketplaceAllPlugins = (providers: ModelProvider[], searchText:
     }
   }, [queryPlugins, queryPluginsWithDebounced, searchText, exclude])
 
+  const allPlugins = useMemo(() => {
+    const allPlugins = [...collectionPlugins.filter(plugin => !exclude.includes(plugin.plugin_id))]
+
+    if (plugins?.length) {
+      for (let i = 0; i < plugins.length; i++) {
+        const plugin = plugins[i]
+
+        if (plugin.type !== 'bundle' && !allPlugins.find(p => p.plugin_id === plugin.plugin_id))
+          allPlugins.push(plugin)
+      }
+    }
+
+    return allPlugins
+  }, [plugins, collectionPlugins, exclude])
+
   return {
-    plugins: plugins?.filter(plugin => plugin.type !== 'bundle'),
+    plugins: allPlugins,
     isLoading,
   }
 }
diff --git a/web/app/components/header/account-setting/model-provider-page/index.tsx b/web/app/components/header/account-setting/model-provider-page/index.tsx
index f5a61ae1ab..428686efce 100644
--- a/web/app/components/header/account-setting/model-provider-page/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/index.tsx
@@ -21,7 +21,6 @@ import {
 } from './declarations'
 import {
   useDefaultModel,
-  useMarketplace,
   useMarketplaceAllPlugins,
   useUpdateModelList,
   useUpdateModelProviders,
@@ -121,11 +120,6 @@ const ModelProviderPage = ({ searchText }: Props) => {
 
   const [collapse, setCollapse] = useState(false)
   const locale = getLocaleOnClient()
-  const {
-    marketplaceCollections,
-    marketplaceCollectionPluginsMap,
-    isLoading: isPluginsLoading,
-  } = useMarketplace()
   const {
     plugins: allPlugins,
     isLoading: isAllPluginsLoading,
@@ -213,20 +207,7 @@ const ModelProviderPage = ({ searchText }: Props) => {
             </Link>
           </div>
         </div>
-        {!collapse && (isPluginsLoading || isAllPluginsLoading) && <Loading type='area' />}
-        {
-          !isPluginsLoading && !collapse && (
-            <List
-              marketplaceCollections={marketplaceCollections || []}
-              marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap || {}}
-              plugins={undefined}
-              showInstallButton
-              locale={locale}
-              cardContainerClassName='grid grid-cols-2 gap-2'
-              cardRender={cardRender}
-            />
-          )
-        }
+        {!collapse && isAllPluginsLoading && <Loading type='area' />}
         {
           !isAllPluginsLoading && !collapse && (
             <List
diff --git a/web/context/app-context.tsx b/web/context/app-context.tsx
index 94bcc81e89..369fe5af19 100644
--- a/web/context/app-context.tsx
+++ b/web/context/app-context.tsx
@@ -125,7 +125,7 @@ export const AppContextProvider: FC<AppContextProviderProps> = ({ children }) =>
       setCurrentWorkspace(currentWorkspaceResponse)
   }, [currentWorkspaceResponse])
 
-  const [theme, setTheme] = useState<Theme>(Theme.dark)
+  const [theme, setTheme] = useState<Theme>(Theme.light)
   const handleSetTheme = useCallback((theme: Theme) => {
     setTheme(theme)
     globalThis.document.documentElement.setAttribute('data-theme', theme)