add welcome page and move popup state to url

Author: josefbender

frontend/src/App.tsx

@@ -20,7 +20,7 @@ import { InAppDocsProvider } from './components/InAppDocsProvider';
 import { MantineThemeProvider } from './components/MantineThemeProvider';
 import { RouteWhenLoggedOut } from './components/RouteWhenLoggedOut';
 import { AdminPage } from './pages/admin/AdminPage';
-import { ChatPage } from './pages/chat/ChatPage';
+import { ChatOrWelcomePage } from './pages/chat/ChatOrWelcomePage';
 import { LoginPage } from './pages/login/LoginPage';
 import { i18next } from './texts/i18n';
 
@@ -61,7 +61,7 @@ export function App() {
                           path="/chat/*"
                           element={
                             <RouteWhenPrivate>
-                              <ChatPage />
+                              <ChatOrWelcomePage />
                             </RouteWhenPrivate>
                           }
                         />

frontend/src/pages/admin/extensions/ConfigurationPage.tsx

@@ -1,7 +1,7 @@
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Route, Routes } from 'react-router-dom';
+import { Route, Routes, useSearchParams } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import { ConfigurationDto, useApi } from 'src/api';
 import { Icon, Page } from 'src/components';
@@ -19,7 +19,19 @@ export function ConfigurationPage() {
   const { i18n } = useTranslation();
 
   const navigate = useTransientNavigate();
-  const [toCreate, setToCreate] = useState<boolean>();
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const setToCreate = (value: boolean) => {
+    const newParams = new URLSearchParams(searchParams);
+    if (value) {
+      newParams.set('create', 'true');
+    } else {
+      newParams.delete('create');
+    }
+    setSearchParams(newParams);
+  };
+  const toCreate = searchParams.get('create') === 'true';
+
   const [toUpdate, setToUpdate] = useState<ConfigurationDto | null>(null);
   const { configurations, removeConfiguration, setConfiguration, setConfigurations } = useConfigurationStore();
 

frontend/src/pages/chat/ChatOrWelcomePage.tsx

@@ -0,0 +1,14 @@
+import { useQuery } from '@tanstack/react-query';
+import { useApi } from 'src/api';
+import { ChatPage } from './ChatPage';
+import { WelcomePage } from './WelcomePage';
+
+export const ChatOrWelcomePage = () => {
+  const api = useApi();
+  const { data: loadedConfigurations } = useQuery({
+    queryKey: ['enabled-configurations'],
+    queryFn: () => api.extensions.getConfigurations(true),
+  });
+  if (!loadedConfigurations) return <></>;
+  return loadedConfigurations.items.length > 0 ? <ChatPage /> : <WelcomePage />;
+};

frontend/src/pages/chat/WelcomePage.tsx

@@ -0,0 +1,24 @@
+import { Button, Text, Title } from '@mantine/core';
+import { IconArrowRight } from '@tabler/icons-react';
+import { useProfile } from 'src/hooks';
+
+export const WelcomePage = () => {
+  const profile = useProfile();
+  if (!profile) return <></>;
+  return (
+    <div className="flex h-screen items-center justify-center p-4">
+      <div className="max-w-[500px] [&>*]:pb-2">
+        <Title>Welcome to c4 GenAI Suite</Title>
+        <Text c="dimmed">An AI chatbot with Model Context Provider (MCP) integration. Powered by Langchain.</Text>
+        <br />
+        {profile.isAdmin ? (
+          <Button component="a" href="/admin/assistants?create=true" rightSection={<IconArrowRight className="w-4" />}>
+            Setup an Assistent
+          </Button>
+        ) : (
+          <Text c="dimmed">No Assistent is set up yet. Ask your Admin to set up an Assistent get started.</Text>
+        )}
+      </div>
+    </div>
+  );
+};