fix: disable Natural Language Search Tab if AI backend is not configu…

…red (#700)

## What type of PR is this?
/kind cleanup

## What this PR does / why we need it:

disable natural language search tab in search page and result page if AI
backend is not configured.

## Which issue(s) this PR fixes:

Fixes #

ui/src/pages/result/index.tsx

@@ -28,6 +28,7 @@ import { ICON_MAP } from '@/utils/images'
 import { searchSqlPrefix, tabsList } from '@/utils/constants'
 import { useAxios } from '@/utils/request'
 import { PodStatusCell } from '@/pages/insightDetail/components/sourceTable'
+import { useSelector } from 'react-redux'
 // import useDebounce from '@/hooks/useDebounce'
 
 import styles from './styles.module.less'
@@ -412,11 +413,19 @@ const Result = () => {
     label: renderOption(val),
   }))
 
+  const { aiOptions } = useSelector((state: any) => state.globalSlice)
+  const isAIEnabled = aiOptions?.AIModel && aiOptions?.AIAuthToken
+
+  const updatedTabsList = tabsList.map(tab => ({
+    ...tab,
+    disabled: tab.value === 'natural' ? !isAIEnabled : tab.disabled,
+  }))
+
   return (
     <div className={styles.container}>
       <div className={styles.searchTab}>
         <KarporTabs
-          list={tabsList}
+          list={updatedTabsList}
           current={searchType}
           onChange={handleTabChange}
         />

ui/src/pages/search/index.tsx

@@ -28,6 +28,7 @@ import logoFull from '@/assets/img/logo-full.svg'
 import SqlSearch from '@/components/sqlSearch'
 import { defaultSqlExamples, tabsList } from '@/utils/constants'
 import { deleteHistoryByItem, getHistoryList } from '@/utils/tools'
+import { useSelector } from 'react-redux'
 
 const { Search } = Input
 
@@ -124,6 +125,14 @@ const SearchPage = () => {
     label: renderOption(val),
   }))
 
+  const { aiOptions } = useSelector((state: any) => state.globalSlice)
+  const isAIEnabled = aiOptions?.AIModel && aiOptions?.AIAuthToken
+
+  const updatedTabsList = tabsList.map(tab => ({
+    ...tab,
+    disabled: tab.value === 'natural' ? !isAIEnabled : tab.disabled,
+  }))
+
   return (
     <div className={styles.search_container}>
       <div className={styles.search}>
@@ -132,7 +141,7 @@ const SearchPage = () => {
         </div>
         <div className={styles.searchTab}>
           <KarporTabs
-            list={tabsList}
+            list={updatedTabsList}
             current={searchType}
             onChange={handleTabChange}
           />