feat(frontend): support need migration bootstrap status (#405)

depends on: - #403 - #404 blocks: - #419
pingcap · Dec 2, 2024 · 6fc6c72 · 6fc6c72
1 parent 98d2472
commit 6fc6c72
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 8 deletions.
diff --git a/frontend/app/src/api/system.ts b/frontend/app/src/api/system.ts
@@ -4,6 +4,7 @@ import { z } from 'zod';
 export interface RequiredBootstrapStatus {
   default_llm: boolean;
   default_embedding_model: boolean;
+  default_chat_engine: boolean;
   knowledge_base: boolean;
   datasource: boolean;
 }
@@ -13,14 +14,20 @@ export interface OptionalBootstrapStatus {
   default_reranker: boolean;
 }
 
+export interface NeedMigrationStatus {
+  chat_engines_without_kb_configured?: number[];
+}
+
 export interface BootstrapStatus {
   required: RequiredBootstrapStatus;
   optional: OptionalBootstrapStatus;
+  need_migration: NeedMigrationStatus;
 }
 
 const requiredBootstrapStatusSchema = z.object({
   default_llm: z.boolean(),
   default_embedding_model: z.boolean(),
+  default_chat_engine: z.boolean(),
   knowledge_base: z.boolean(),
   datasource: z.boolean(),
 });
@@ -30,9 +37,14 @@ const optionalBootstrapStatusSchema = z.object({
   default_reranker: z.boolean(),
 });
 
+const needMigrationStatusSchema = z.object({
+  chat_engines_without_kb_configured: z.number().array().optional(),
+});
+
 const bootstrapStatusSchema = z.object({
   required: requiredBootstrapStatusSchema,
   optional: optionalBootstrapStatusSchema,
+  need_migration: needMigrationStatusSchema,
 });
 
 export async function getBootstrapStatus (): Promise<BootstrapStatus> {

diff --git a/frontend/app/src/app/(main)/nav.tsx b/frontend/app/src/app/(main)/nav.tsx
@@ -40,7 +40,7 @@ export function SiteSidebar ({ setting }: { setting: PublicWebsiteSettings }) {
 }
 
 function NavContent () {
-  const { required } = useBootstrapStatus();
+  const { required, need_migration } = useBootstrapStatus();
   const href = useHref();
   const auth = useAuth();
   const user = auth.me;
@@ -64,8 +64,26 @@ function NavContent () {
       title: 'Admin',
       items: [
         { href: '/stats/trending', title: 'Dashboard', icon: ActivitySquareIcon },
-        { href: '/knowledge-bases', title: 'Knowledge Bases', icon: LibraryBigIcon, details: !required.knowledge_base ? <NavWarningDetails>You need to configure at least one knowledge base.</NavWarningDetails> : <KnowledgeBaseNavDetails /> },
-        { href: '/chat-engines', title: 'Chat Engines', icon: BotMessageSquareIcon, details: <ChatEnginesNavDetails /> },
+        {
+          href: '/knowledge-bases',
+          title: 'Knowledge Bases',
+          icon: LibraryBigIcon,
+          details: !required.knowledge_base
+            ? <NavWarningDetails>You need to configure at least one Knowledge Base.</NavWarningDetails>
+            : <KnowledgeBaseNavDetails />,
+        },
+        {
+          href: '/chat-engines',
+          title: 'Chat Engines',
+          icon: BotMessageSquareIcon,
+          details: !!need_migration.chat_engines_without_kb_configured?.length
+            ? <NavWarningDetails>
+              Some ChatEngine need to <a href="/releases/0.3.0#manual-migration" className="underline">configure KnowledgeBase</a>.
+            </NavWarningDetails>
+            : !required.default_chat_engine
+              ? <NavWarningDetails>You need to configure default Chat Engine.</NavWarningDetails>
+              : <ChatEnginesNavDetails />,
+        },
         {
           parent: true,
           key: 'models',

diff --git a/frontend/app/src/components/chat-engine/chat-engines-table.tsx b/frontend/app/src/components/chat-engine/chat-engines-table.tsx
@@ -4,19 +4,21 @@ import { type ChatEngine, createChatEngine, deleteChatEngine, listChatEngines }
 import { actions } from '@/components/cells/actions';
 import { boolean } from '@/components/cells/boolean';
 import { datetime } from '@/components/cells/datetime';
-import { link } from '@/components/cells/link';
 import { mono } from '@/components/cells/mono';
 import { DataTableRemote } from '@/components/data-table-remote';
+import { useBootstrapStatus } from '@/components/system/BootstrapStatusProvider';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import type { ColumnDef } from '@tanstack/react-table';
 import { createColumnHelper } from '@tanstack/table-core';
-import { CopyIcon, TrashIcon } from 'lucide-react';
+import { AlertTriangleIcon, CopyIcon, TrashIcon } from 'lucide-react';
+import Link from 'next/link';
 import { toast } from 'sonner';
 
 const helper = createColumnHelper<ChatEngine>();
 
 const columns = [
   helper.accessor('id', { cell: mono }),
-  helper.accessor('name', { cell: link({ url: row => `/chat-engines/${row.id}` }) }),
+  helper.accessor('name', { cell: context => <NameLink chatEngine={context.row.original} /> }),
   helper.accessor('created_at', { cell: datetime }),
   helper.accessor('updated_at', { cell: datetime }),
   helper.accessor('is_default', { cell: boolean }),
@@ -65,3 +67,28 @@ export function ChatEnginesTable () {
     />
   );
 }
+
+function NameLink ({ chatEngine }: { chatEngine: ChatEngine }) {
+  const { need_migration } = useBootstrapStatus();
+
+  const kbNotConfigured = !!need_migration.chat_engines_without_kb_configured?.includes(chatEngine.id);
+
+  return (
+    <Link
+      className="underline font-mono"
+      href={`/chat-engines/${chatEngine.id}`}
+    >
+      {kbNotConfigured && <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <AlertTriangleIcon className="text-warning inline-flex mr-1 size-3" />
+          </TooltipTrigger>
+          <TooltipContent className="text-xs" align="start">
+            Knowledge Base not configured.
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>}
+      {chatEngine.name}
+    </Link>
+  );
+}
diff --git a/frontend/app/src/components/site-nav.tsx b/frontend/app/src/components/site-nav.tsx
@@ -242,7 +242,7 @@ function SiteNavLinkItem ({ item, active, sub = false }: { item: NavLinkItem, ac
           {el}
         </Link>
       </MenuButton>
-      {badge && <SidebarMenuBadge>{badge}</SidebarMenuBadge>}
+      {badge && <SidebarMenuBadge className='pointer-events-auto'>{badge}</SidebarMenuBadge>}
     </MenuItem>
   );
 }
diff --git a/frontend/app/src/components/system/BootstrapStatusProvider.tsx b/frontend/app/src/components/system/BootstrapStatusProvider.tsx
@@ -1,19 +1,23 @@
 'use client';
 
-import type { BootstrapStatus, RequiredBootstrapStatus } from '@/api/system';
+import type { BootstrapStatus } from '@/api/system';
 import { createContext, type ReactNode, useContext } from 'react';
 
 const BootstrapStatusContext = createContext<BootstrapStatus>({
   required: {
     knowledge_base: false,
     datasource: false,
     default_embedding_model: false,
+    default_chat_engine: false,
     default_llm: false,
   },
   optional: {
     langfuse: false,
     default_reranker: false,
   },
+  need_migration: {
+    chat_engines_without_kb_configured: [-1],
+  },
 });
 
 export function BootstrapStatusProvider ({ bootstrapStatus, children }: { bootstrapStatus: BootstrapStatus, children: ReactNode }) {