feat: chceck serapi key

web/app/components/explore/universal-chat/config/plugins-config/index.tsx

 'use client'
 import type { FC } from 'react'
-import React from 'react'
+import React, { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import Item from './item'
 import FeaturePanel from '@/app/components/app/configuration/base/feature-panel'
 import { Google, WebReader, Wikipedia } from '@/app/components/base/icons/src/public/plugins'
+import { getToolProviders } from '@/service/explore'
+import Loading from '@/app/components/base/loading'
+
 export type IPluginsProps = {
   readonly?: boolean
   config: Record<string, boolean>
@@ -22,6 +25,17 @@ const Plugins: FC<IPluginsProps> = ({
   onChange,
 }) => {
   const { t } = useTranslation()
+  const [isLoading, setIsLoading] = React.useState(true)
+  const [isSerpapiValid, setIsSerpapiValid] = React.useState(false)
+  const init = async () => {
+    const provides: any = await getToolProviders()
+    const isSerapiValid = !!provides.find((v: any) => v.tool_name === 'serpapi' && v.is_enabled)
+    setIsSerpapiValid(isSerapiValid)
+    setIsLoading(false)
+  }
+  useEffect(() => {
+    init()
+  }, [])
 
   const itemConfigs = plugins.map((plugin) => {
     const res: Record<string, any> = { ...plugin }
@@ -30,7 +44,8 @@ const Plugins: FC<IPluginsProps> = ({
     if (key === 'web_reader')
       res.description = t(`explore.universalChat.plugins.${key}.description`)
 
-    if (key === 'google_search' && !readonly) {
+    if (key === 'google_search' && !isSerpapiValid && !readonly) {
+      res.readonly = true
       res.more = (
         <div className='border-t border-[#FEF0C7] flex items-center h-[34px] pl-2 bg-[#FFFAEB] text-gray-700 text-xs '>
           <span className='whitespace-pre'>{t('explore.universalChat.plugins.google_search.more.left')}</span>
@@ -54,7 +69,13 @@ const Plugins: FC<IPluginsProps> = ({
         </div>}
       hasHeaderBottomBorder={false}
     >
-      <div className='space-y-2'>
+      {isLoading
+        ? (
+          <div className='flex items-center h-[200px]'>
+            <Loading type='area' />
+          </div>
+        )
+        : (<div className='space-y-2'>
           {itemConfigs.map(item => (
             <Item
               key={item.key}
@@ -64,10 +85,11 @@ const Plugins: FC<IPluginsProps> = ({
               more={item.more}
               enabled={config[item.key]}
               onChange={enabled => onChange?.(item.key, enabled)}
-            readonly={readonly}
+              readonly={readonly || item.readonly}
             />
           ))}
-      </div>
+        </div>)}
+
     </FeaturePanel>
   )
 }

web/service/explore.ts

@@ -31,3 +31,7 @@ export const updatePinStatus = (id: string, isPinned: boolean) => {
     },
   })
 }
+
+export const getToolProviders = () => {
+  return get('/workspaces/current/tool-providers')
+}