Provide basic empty state for ai tab (#1541)

assets/src/components/ai/AI.tsx

@@ -17,8 +17,45 @@ import { useNavigate } from 'react-router-dom'
 import { GLOBAL_SETTINGS_ABS_PATH } from '../../routes/settingsRoutesConst.tsx'
 import { AIPinsTable } from './AIPinsTable.tsx'
 import { AIThreadsTable } from './AIThreadsTable.tsx'
+import { useDeploymentSettings } from 'components/contexts/DeploymentSettingsContext.tsx'
+import { GlobalSettingsAiProvider } from 'components/settings/global/GlobalSettingsAiProvider.tsx'
 
 export default function AI() {
+  const settings = useDeploymentSettings()
+  if (!settings.ai?.enabled) {
+    return <AiDisabled />
+  }
+
+  return <AIEnabled />
+}
+
+function AiDisabled() {
+  return (
+    <Flex
+      direction="column"
+      gap="medium"
+      padding="large"
+      marginBottom={30}
+      height="100%"
+      overflow="hidden"
+    >
+      <Flex
+        justify="space-between"
+        align="center"
+      >
+        <StackedText
+          first="Plural AI"
+          second="You have yet to enable AI, set everything up below"
+          firstPartialType="subtitle1"
+          secondPartialType="body2"
+        />
+      </Flex>
+      <GlobalSettingsAiProvider />
+    </Flex>
+  )
+}
+
+function AIEnabled() {
   const threadsQuery = useFetchPaginatedData({
     queryHook: useChatThreadsQuery,
     keyPath: ['chatThreads'],

assets/src/components/ai/chatbot/Chatbot.tsx

@@ -22,6 +22,7 @@ import { useChatbot, useChatbotContext } from '../AIContext.tsx'
 import { ChatbotIconButton } from './ChatbotButton.tsx'
 import { ChatbotPanelThread } from './ChatbotPanelThread.tsx'
 import { AllThreadsTable } from '../AIThreadsTable.tsx'
+import { useDeploymentSettings } from 'components/contexts/DeploymentSettingsContext.tsx'
 
 type ChatbotPanelInnerProps = ComponentPropsWithRef<typeof ChatbotFrameSC> & {
   fullscreen: boolean
@@ -31,6 +32,11 @@ type ChatbotPanelInnerProps = ComponentPropsWithRef<typeof ChatbotFrameSC> & {
 
 export function Chatbot() {
   const { open, setOpen, fullscreen, currentThread } = useChatbotContext()
+  const settings = useDeploymentSettings()
+
+  if (!settings.ai?.enabled) {
+    return null
+  }
 
   return (
     <div css={{ position: 'relative' }}>