ui(frontend): refine ux

pingcap · Aug 9, 2024 · 3eb8d4e · 3eb8d4e
1 parent 8a4541c
commit 3eb8d4e
Show file tree

Hide file tree

Showing 22 changed files with 264 additions and 221 deletions.
diff --git a/frontend/.nvmrc b/frontend/.nvmrc
@@ -1 +1 @@
-v20.15.0
+v20.16.0
diff --git a/frontend/app/package.json b/frontend/app/package.json
@@ -105,13 +105,13 @@
     "next-sitemap": "^4.2.3",
     "nextra": "^2.13.4",
     "nextra-theme-docs": "^2.13.4",
-    "postcss": "^8",
+    "postcss": "^8.4.41",
     "react-json-view-lite": "^1.4.0",
     "react-lowlight": "^3.0.0",
     "react-textarea-autosize": "^8.5.3",
     "sass": "^1.77.6",
     "swr": "^2.2.5",
-    "tailwindcss": "^3.4.7",
+    "tailwindcss": "^3.4.9",
     "ts-node": "^10.9.2",
     "typescript": "^5",
     "undici": "^6.19.2",

diff --git a/frontend/app/src/app/(main)/(.)auth/login/page.client.tsx b/frontend/app/src/app/(main)/(.)auth/login/page.client.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { Signin } from '@/components/signin';
-import { Dialog, DialogContent, DialogDescription, DialogHeader } from '@/components/ui/dialog';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { useRouter } from 'next/navigation';
 
 export function SigninDialog ({ callbackUrl }: { callbackUrl?: string }) {
@@ -17,10 +17,14 @@ export function SigninDialog ({ callbackUrl }: { callbackUrl?: string }) {
       }}
     >
       <DialogContent>
-        <DialogHeader className="text-2xl font-normal">Sign In</DialogHeader>
-        <DialogDescription>
-          Sign in to continue to your account.
-        </DialogDescription>
+        <DialogHeader>
+          <DialogTitle className="text-2xl font-normal">
+            Sign In
+          </DialogTitle>
+          <DialogDescription>
+            Sign in to continue to your account.
+          </DialogDescription>
+        </DialogHeader>
         <Signin callbackUrl={callbackUrl} />
       </DialogContent>
     </Dialog>

diff --git a/frontend/app/src/app/(main)/(admin)/reranker-models/create/page.tsx b/frontend/app/src/app/(main)/(admin)/reranker-models/create/page.tsx
@@ -1,13 +1,11 @@
 'use client';
 
 import { AdminPageHeading } from '@/components/admin-page-heading';
+import { usePush } from '@/components/nextjs/app-router-hooks';
 import { CreateRerankerForm } from '@/components/reranker/CreateRerankerForm';
-import { useRouter } from 'next/navigation';
-import { useTransition } from 'react';
 
 export default function Page () {
-  const router = useRouter();
-  const [transitioning, startTransition] = useTransition();
+  const [navigating, push] = usePush();
 
   return (
     <>
@@ -18,11 +16,9 @@ export default function Page () {
         ]}
       />
       <CreateRerankerForm
-        transitioning={transitioning}
+        transitioning={navigating}
         onCreated={reranker => {
-          startTransition(() => {
-            router.push(`/reranker-models/${reranker.id}`);
-          });
+          push(`/reranker-models/${reranker.id}`);
         }}
       />
     </>

diff --git a/frontend/app/src/app/(main)/(admin)/site-settings/layout.tsx b/frontend/app/src/app/(main)/(admin)/site-settings/layout.tsx
@@ -2,25 +2,22 @@
 
 import { AdminPageHeading } from '@/components/admin-page-heading';
 import { Loader } from '@/components/loader';
+import { usePush } from '@/components/nextjs/app-router-hooks';
 import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { useRouter, useSelectedLayoutSegment } from 'next/navigation';
-import { type ReactNode, useTransition } from 'react';
+import { useSelectedLayoutSegment } from 'next/navigation';
+import { type ReactNode } from 'react';
 
 export default function SiteSettingsLayout ({ children }: { children: ReactNode }) {
   const segment = useSelectedLayoutSegment() ?? 'website';
-  const router = useRouter();
-  const [navigating, starTransition] = useTransition();
+  const [navigating, push] = usePush(true);
 
   return (
     <div className="relative">
       <AdminPageHeading title="Site Settings" />
       <Tabs
         value={segment}
         onValueChange={value => {
-          starTransition(() => {
-            router.push(`/site-settings${value === 'website' ? '' : `/${value}`}`);
-            router.refresh();
-          });
+          push(`/site-settings${value === 'website' ? '' : `/${value}`}`);
         }}
       >
         <TabsList>

diff --git a/frontend/app/src/app/RootProviders.tsx b/frontend/app/src/app/RootProviders.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import type { PublicWebsiteSettings } from '@/api/site-settings';
-import type { BootstrapStatus, RequiredBootstrapStatus } from '@/api/system';
+import type { BootstrapStatus } from '@/api/system';
 import { getMe, type MeInfo } from '@/api/users';
 import { AuthProvider } from '@/components/auth/AuthProvider';
 import { ChatsProvider } from '@/components/chat/chat-hooks';
@@ -20,9 +20,9 @@ export interface RootProvidersProps {
 }
 
 export function RootProviders ({ me, settings, bootstrapStatus, children }: RootProvidersProps) {
-  const { data, isValidating, isLoading } = useSWR('api.users.me', getMe, {
+  const { data, isValidating, isLoading, mutate } = useSWR('api.users.me', getMe, {
     fallbackData: me,
-    revalidateOnMount: !me,
+    revalidateOnMount: false,
     revalidateOnFocus: false,
     errorRetryCount: 0,
   });
@@ -37,7 +37,7 @@ export function RootProviders ({ me, settings, bootstrapStatus, children }: Root
       >
         <SettingProvider
           value={settings}>
-          <AuthProvider me={data} isLoading={isLoading} isValidating={isValidating}>
+          <AuthProvider me={data} isLoading={isLoading} isValidating={isValidating} reload={() => mutate(data, { revalidate: true })}>
             <ChatsProvider>
               {children}
               <Toaster />

diff --git a/frontend/app/src/app/layout.tsx b/frontend/app/src/app/layout.tsx
@@ -2,7 +2,6 @@ import { getPublicSiteSettings } from '@/api/site-settings';
 import { getBootstrapStatus } from '@/api/system';
 import { RootProviders } from '@/app/RootProviders';
 import { SystemWizardDialog } from '@/components/system/SystemWizardDialog';
-import { Toaster } from '@/components/ui/sonner';
 import { auth } from '@/lib/auth';
 import { GoogleAnalytics } from '@next/third-parties/google';
 import type { Metadata } from 'next';

diff --git a/frontend/app/src/components/auth/AuthProvider.tsx b/frontend/app/src/components/auth/AuthProvider.tsx
@@ -5,9 +5,10 @@ export interface AuthContextValues {
   me: MeInfo | undefined;
   isLoading: boolean;
   isValidating: boolean;
+  reload: () => void;
 }
 
-const AuthContext = createContext<AuthContextValues>({ me: undefined, isLoading: false, isValidating: false, });
+const AuthContext = createContext<AuthContextValues>({ me: undefined, isLoading: false, isValidating: false, reload: () => {}, });
 
 export function AuthProvider ({ children, ...context }: AuthContextValues & { children: ReactNode }) {
   return (

diff --git a/frontend/app/src/components/chat-engine/edit-boolean-form.tsx b/frontend/app/src/components/chat-engine/edit-boolean-form.tsx
@@ -3,8 +3,7 @@
 import { type ChatEngine, updateChatEngine } from '@/api/chat-engines';
 import { EditPropertyForm } from '@/components/chat-engine/edit-property-form';
 import { FormSwitch } from '@/components/form/control-widget';
-import { useRouter } from 'next/navigation';
-import { useTransition } from 'react';
+import { useRefresh } from '@/components/nextjs/app-router-hooks';
 import { toast } from 'sonner';
 import { z } from 'zod';
 
@@ -18,8 +17,7 @@ export interface EditBooleanFormProps {
 }
 
 export function EditBooleanForm ({ type, chatEngine }: EditBooleanFormProps) {
-  const router = useRouter();
-  const [transitioning, startTransition] = useTransition();
+  const [refreshing, refresh] = useRefresh();
 
   return (
     <>
@@ -30,12 +28,10 @@ export function EditBooleanForm ({ type, chatEngine }: EditBooleanFormProps) {
         schema={booleanSchema}
         onSubmit={async (data) => {
           await updateChatEngine(chatEngine.id, data);
-          startTransition(() => {
-            router.refresh();
-          });
+          refresh();
           toast('ChatEngine successfully updated.');
         }}
-        disabled={transitioning}
+        disabled={refreshing}
       >
         <FormSwitch />
       </EditPropertyForm>

diff --git a/frontend/app/src/components/chat-engine/edit-kg-boolean-form.tsx b/frontend/app/src/components/chat-engine/edit-kg-boolean-form.tsx
@@ -3,8 +3,7 @@
 import { type ChatEngine, type ChatEngineOptions, updateChatEngine } from '@/api/chat-engines';
 import { EditPropertyForm } from '@/components/chat-engine/edit-property-form';
 import { FormSwitch } from '@/components/form/control-widget';
-import { useRouter } from 'next/navigation';
-import { useTransition } from 'react';
+import { useRefresh } from '@/components/nextjs/app-router-hooks';
 import { toast } from 'sonner';
 import { z } from 'zod';
 
@@ -18,8 +17,7 @@ export interface EditBooleanFormProps {
 }
 
 export function EditKgBooleanForm ({ type, chatEngine }: EditBooleanFormProps) {
-  const router = useRouter();
-  const [transitioning, startTransition] = useTransition();
+  const [refreshing, refresh] = useRefresh();
 
   return (
     <>
@@ -39,12 +37,10 @@ export function EditKgBooleanForm ({ type, chatEngine }: EditBooleanFormProps) {
           await updateChatEngine(chatEngine.id, {
             engine_options: options,
           });
-          startTransition(() => {
-            router.refresh();
-          });
+          refresh();
           toast('ChatEngine successfully updated.');
         }}
-        disabled={transitioning}
+        disabled={refreshing}
       >
         <FormSwitch />
       </EditPropertyForm>

diff --git a/frontend/app/src/components/chat-engine/edit-kg-integer-form.tsx b/frontend/app/src/components/chat-engine/edit-kg-integer-form.tsx
@@ -3,8 +3,7 @@
 import { type ChatEngine, type ChatEngineOptions, updateChatEngine } from '@/api/chat-engines';
 import { EditPropertyForm } from '@/components/chat-engine/edit-property-form';
 import { FormInput } from '@/components/form/control-widget';
-import { useRouter } from 'next/navigation';
-import { useTransition } from 'react';
+import { useRefresh } from '@/components/nextjs/app-router-hooks';
 import { toast } from 'sonner';
 import { z } from 'zod';
 
@@ -18,8 +17,7 @@ export interface EditIntegerFormProps {
 }
 
 export function EditKgIntegerForm ({ type, chatEngine }: EditIntegerFormProps) {
-  const router = useRouter();
-  const [transitioning, startTransition] = useTransition();
+  const [refreshing, refresh] = useRefresh();
 
   return (
     <>
@@ -39,12 +37,10 @@ export function EditKgIntegerForm ({ type, chatEngine }: EditIntegerFormProps) {
           await updateChatEngine(chatEngine.id, {
             engine_options: options,
           });
-          startTransition(() => {
-            router.refresh();
-          });
+          refresh();
           toast('ChatEngine successfully updated.');
         }}
-        disabled={transitioning}
+        disabled={refreshing}
       >
         <FormInput type="number" min={0} step={1} />
       </EditPropertyForm>

diff --git a/frontend/app/src/components/chat-engine/edit-llm-form.tsx b/frontend/app/src/components/chat-engine/edit-llm-form.tsx
@@ -3,8 +3,7 @@
 import { type ChatEngine, updateChatEngine } from '@/api/chat-engines';
 import { EditPropertyForm } from '@/components/chat-engine/edit-property-form';
 import { LLMSelect } from '@/components/form/biz';
-import { useRouter } from 'next/navigation';
-import { useTransition } from 'react';
+import { useRefresh } from '@/components/nextjs/app-router-hooks';
 import { toast } from 'sonner';
 import { z } from 'zod';
 
@@ -16,8 +15,7 @@ export interface EditLlmFormProps {
 }
 
 export function EditLlmForm ({ type, chatEngine }: EditLlmFormProps) {
-  const router = useRouter();
-  const [transitioning, startTransition] = useTransition();
+  const [refreshing, refresh] = useRefresh();
 
   return (
     <>
@@ -27,13 +25,11 @@ export function EditLlmForm ({ type, chatEngine }: EditLlmFormProps) {
         schema={schema}
         onSubmit={async data => {
           await updateChatEngine(chatEngine.id, data);
-          startTransition(() => {
-            router.refresh();
-          });
+          refresh();
           toast(`ChatEngine successfully updated.`);
         }}
         inline
-        disabled={transitioning}
+        disabled={refreshing}
       >
         <LLMSelect reverse={false} />
       </EditPropertyForm>

diff --git a/frontend/app/src/components/chat-engine/edit-name-form.tsx b/frontend/app/src/components/chat-engine/edit-name-form.tsx
@@ -3,8 +3,7 @@
 import { type ChatEngine, updateChatEngine } from '@/api/chat-engines';
 import { EditPropertyForm } from '@/components/chat-engine/edit-property-form';
 import { FormInput } from '@/components/form/control-widget';
-import { useRouter } from 'next/navigation';
-import { useTransition } from 'react';
+import { useRefresh } from '@/components/nextjs/app-router-hooks';
 import { toast } from 'sonner';
 import { z } from 'zod';
 
@@ -15,8 +14,7 @@ export interface EditNameFormProps {
 const stringSchema = z.string();
 
 export function EditNameForm ({ chatEngine }: EditNameFormProps) {
-  const router = useRouter();
-  const [transitioning, startTransition] = useTransition();
+  const [refreshing, refresh] = useRefresh();
 
   return (
     <EditPropertyForm
@@ -26,12 +24,10 @@ export function EditNameForm ({ chatEngine }: EditNameFormProps) {
       schema={stringSchema}
       onSubmit={async (data) => {
         await updateChatEngine(chatEngine.id, data);
-        startTransition(() => {
-          router.refresh();
-        });
+        refresh();
         toast('ChatEngine\'s name successfully updated.');
       }}
-      disabled={transitioning}
+      disabled={refreshing}
     >
       <FormInput />
     </EditPropertyForm>

diff --git a/frontend/app/src/components/chat-engine/edit-options-llm-prompt-form.tsx b/frontend/app/src/components/chat-engine/edit-options-llm-prompt-form.tsx
@@ -3,8 +3,7 @@
 import { type ChatEngine, updateChatEngine } from '@/api/chat-engines';
 import { EditPropertyForm } from '@/components/chat-engine/edit-property-form';
 import { FormTextarea } from '@/components/form/control-widget';
-import { useRouter } from 'next/navigation';
-import { useTransition } from 'react';
+import { useRefresh } from '@/components/nextjs/app-router-hooks';
 import { toast } from 'sonner';
 import { z } from 'zod';
 
@@ -20,13 +19,12 @@ export interface EditOptionsLlmPromptFormProps {
 const schema = z.string().min(1);
 
 export function EditOptionsLlmPromptForm ({ chatEngine, type }: EditOptionsLlmPromptFormProps) {
-  const router = useRouter();
-  const [transitioning, startTransition] = useTransition();
+  const [refreshing, refresh] = useRefresh();
 
   return (
     <>
       <EditPropertyForm
-        className='w-full'
+        className="w-full"
         object={chatEngine.engine_options.llm}
         property={type}
         schema={schema}
@@ -39,14 +37,12 @@ export function EditOptionsLlmPromptForm ({ chatEngine, type }: EditOptionsLlmPr
             },
           };
           await updateChatEngine(chatEngine.id, { engine_options: chatEngineOptions });
-          startTransition(() => {
-            router.refresh();
-          });
+          refresh();
           toast(`ChatEngine successfully updated.`);
         }}
-        disabled={transitioning}
+        disabled={refreshing}
       >
-        <FormTextarea className='min-h-64' />
+        <FormTextarea className="min-h-64" />
       </EditPropertyForm>
     </>
   );

diff --git a/frontend/app/src/components/chat-engine/edit-property-form.tsx b/frontend/app/src/components/chat-engine/edit-property-form.tsx
@@ -22,8 +22,6 @@ export interface EditPropertyFormProps<T, P extends keyof T & string> {
 }
 
 export function EditPropertyForm<T, P extends keyof T & string> ({ className, object, property, schema, onSubmit, inline, disabled, description, children }: EditPropertyFormProps<T, P>) {
-  // const router = useRouter();
-  // const [transitioning, startTransition] = useTransition();
   const { setOpen } = useManagedDialog();
 
   const resolver = useMemo(() => {
@@ -42,10 +40,6 @@ export function EditPropertyForm<T, P extends keyof T & string> ({ className, ob
 
   const handleSubmit = form.handleSubmit(async (data) => {
     onSubmit(data);
-    // startTransition(() => {
-    //   router.refresh();
-    // });
-    // toast('ChatEngine\'s name successfully updated.');
     setOpen(false);
   });