From 29d01e1c746e1558c52f704bcc42b885992391cd Mon Sep 17 00:00:00 2001
From: yangdx <yangdx@znipower.com>
Date: Fri, 4 Apr 2025 22:51:07 +0800
Subject: [PATCH] Add title support for webui

---
 env.example                                |  4 +-
 lightrag_webui/src/api/lightrag.ts         | 29 +++++++++++
 lightrag_webui/src/features/SiteHeader.tsx | 34 ++++++++++---
 lightrag_webui/src/stores/state.ts         | 58 ++++++++++++++++++++--
 4 files changed, 113 insertions(+), 12 deletions(-)

diff --git a/env.example b/env.example
index 2a6fb3d7..d21bbef6 100644
--- a/env.example
+++ b/env.example
@@ -5,8 +5,8 @@
 # PORT=9621
 # WORKERS=2
 # CORS_ORIGINS=http://localhost:3000,http://localhost:8080
-# WEBUI_TITLE='My Best RAG System'
-# WEBUI_DESCRIPTION="My Knowledge System Based on LightRAG"
+WEBUI_TITLE='Graph RAG Engine'
+WEBUI_DESCRIPTION="Simple and Fast Graph Based RAG System"
 
 ### Optional SSL Configuration
 # SSL=true
diff --git a/lightrag_webui/src/api/lightrag.ts b/lightrag_webui/src/api/lightrag.ts
index 5a68851c..6892cc14 100644
--- a/lightrag_webui/src/api/lightrag.ts
+++ b/lightrag_webui/src/api/lightrag.ts
@@ -3,6 +3,7 @@ import { backendBaseUrl } from '@/lib/constants'
 import { errorMessage } from '@/lib/utils'
 import { useSettingsStore } from '@/stores/settings'
 import { navigationService } from '@/services/navigation'
+import { useAuthStore } from '@/stores/state'
 
 // Types
 export type LightragNodeType = {
@@ -46,6 +47,8 @@ export type LightragStatus = {
   api_version?: string
   auth_mode?: 'enabled' | 'disabled'
   pipeline_busy: boolean
+  webui_title?: string
+  webui_description?: string
 }
 
 export type LightragDocumentsScanProgress = {
@@ -140,6 +143,8 @@ export type AuthStatusResponse = {
   message?: string
   core_version?: string
   api_version?: string
+  webui_title?: string
+  webui_description?: string
 }
 
 export type PipelineStatusResponse = {
@@ -163,6 +168,8 @@ export type LoginResponse = {
   message?: string                    // Optional message
   core_version?: string
   api_version?: string
+  webui_title?: string
+  webui_description?: string
 }
 
 export const InvalidApiKeyError = 'Invalid API Key'
@@ -419,12 +426,26 @@ export const getAuthStatus = async (): Promise<AuthStatusResponse> => {
       // For unconfigured auth, ensure we have an access token
       if (!response.data.auth_configured) {
         if (response.data.access_token && typeof response.data.access_token === 'string') {
+          // Update custom title if available
+          if (response.data.webui_title || response.data.webui_description) {
+            useAuthStore.getState().setCustomTitle(
+              response.data.webui_title || null,
+              response.data.webui_description || null
+            );
+          }
           return response.data;
         } else {
           console.warn('Auth not configured but no valid access token provided');
         }
       } else {
         // For configured auth, just return the data
+        // Update custom title if available
+        if (response.data.webui_title || response.data.webui_description) {
+          useAuthStore.getState().setCustomTitle(
+            response.data.webui_title || null,
+            response.data.webui_description || null
+          );
+        }
         return response.data;
       }
     }
@@ -463,5 +484,13 @@ export const loginToServer = async (username: string, password: string): Promise
     }
   });
 
+  // Update custom title if available
+  if (response.data.webui_title || response.data.webui_description) {
+    useAuthStore.getState().setCustomTitle(
+      response.data.webui_title || null,
+      response.data.webui_description || null
+    );
+  }
+
   return response.data;
 }
diff --git a/lightrag_webui/src/features/SiteHeader.tsx b/lightrag_webui/src/features/SiteHeader.tsx
index 8077d390..4881e4b6 100644
--- a/lightrag_webui/src/features/SiteHeader.tsx
+++ b/lightrag_webui/src/features/SiteHeader.tsx
@@ -8,6 +8,7 @@ import { cn } from '@/lib/utils'
 import { useTranslation } from 'react-i18next'
 import { navigationService } from '@/services/navigation'
 import { ZapIcon, GithubIcon, LogOutIcon } from 'lucide-react'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/Tooltip'
 
 interface NavigationTabProps {
   value: string
@@ -55,7 +56,7 @@ function TabsNavigation() {
 
 export default function SiteHeader() {
   const { t } = useTranslation()
-  const { isGuestMode, coreVersion, apiVersion, username } = useAuthStore()
+  const { isGuestMode, coreVersion, apiVersion, username, webuiTitle, webuiDescription } = useAuthStore()
 
   const versionDisplay = (coreVersion && apiVersion)
     ? `${coreVersion}/${apiVersion}`
@@ -67,17 +68,31 @@ export default function SiteHeader() {
 
   return (
     <header className="border-border/40 bg-background/95 supports-[backdrop-filter]:bg-background/60 sticky top-0 z-50 flex h-10 w-full border-b px-4 backdrop-blur">
-      <div className="w-[200px] flex items-center">
+      <div className="min-w-[200px] w-auto flex items-center">
         <a href={webuiPrefix} className="flex items-center gap-2">
           <ZapIcon className="size-4 text-emerald-400" aria-hidden="true" />
           {/* <img src='/logo.png' className="size-4" /> */}
           <span className="font-bold md:inline-block">{SiteInfo.name}</span>
-          {versionDisplay && (
-            <span className="ml-2 text-xs text-gray-500 dark:text-gray-400">
-              v{versionDisplay}
-            </span>
-          )}
         </a>
+        {webuiTitle && (
+          <div className="flex items-center">
+            <span className="mx-1 text-xs text-gray-500 dark:text-gray-400">|</span>
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <span className="font-medium text-sm cursor-default">
+                    {webuiTitle}
+                  </span>
+                </TooltipTrigger>
+                {webuiDescription && (
+                  <TooltipContent side="bottom">
+                    {webuiDescription}
+                  </TooltipContent>
+                )}
+              </Tooltip>
+            </TooltipProvider>
+          </div>
+        )}
       </div>
 
       <div className="flex h-10 flex-1 items-center justify-center">
@@ -91,6 +106,11 @@ export default function SiteHeader() {
 
       <nav className="w-[200px] flex items-center justify-end">
         <div className="flex items-center gap-2">
+          {versionDisplay && (
+            <span className="text-xs text-gray-500 dark:text-gray-400 mr-1">
+              v{versionDisplay}
+            </span>
+          )}
           <Button variant="ghost" size="icon" side="bottom" tooltip={t('header.projectRepository')}>
             <a href={SiteInfo.github} target="_blank" rel="noopener noreferrer">
               <GithubIcon className="size-4" aria-hidden="true" />
diff --git a/lightrag_webui/src/stores/state.ts b/lightrag_webui/src/stores/state.ts
index a860f84d..c44ae34f 100644
--- a/lightrag_webui/src/stores/state.ts
+++ b/lightrag_webui/src/stores/state.ts
@@ -22,10 +22,13 @@ interface AuthState {
   coreVersion: string | null;
   apiVersion: string | null;
   username: string | null; // login username
+  webuiTitle: string | null; // Custom title
+  webuiDescription: string | null; // Title description
 
-  login: (token: string, isGuest?: boolean, coreVersion?: string | null, apiVersion?: string | null) => void;
+  login: (token: string, isGuest?: boolean, coreVersion?: string | null, apiVersion?: string | null, webuiTitle?: string | null, webuiDescription?: string | null) => void;
   logout: () => void;
   setVersion: (coreVersion: string | null, apiVersion: string | null) => void;
+  setCustomTitle: (webuiTitle: string | null, webuiDescription: string | null) => void;
 }
 
 const useBackendStateStoreBase = create<BackendState>()((set) => ({
@@ -46,6 +49,14 @@ const useBackendStateStoreBase = create<BackendState>()((set) => ({
           health.api_version || null
         );
       }
+      
+      // Update custom title information if health check returns it
+      if (health.webui_title || health.webui_description) {
+        useAuthStore.getState().setCustomTitle(
+          health.webui_title || null,
+          health.webui_description || null
+        );
+      }
 
       set({
         health: true,
@@ -107,10 +118,12 @@ const isGuestToken = (token: string): boolean => {
   return payload.role === 'guest';
 };
 
-const initAuthState = (): { isAuthenticated: boolean; isGuestMode: boolean; coreVersion: string | null; apiVersion: string | null; username: string | null } => {
+const initAuthState = (): { isAuthenticated: boolean; isGuestMode: boolean; coreVersion: string | null; apiVersion: string | null; username: string | null; webuiTitle: string | null; webuiDescription: string | null } => {
   const token = localStorage.getItem('LIGHTRAG-API-TOKEN');
   const coreVersion = localStorage.getItem('LIGHTRAG-CORE-VERSION');
   const apiVersion = localStorage.getItem('LIGHTRAG-API-VERSION');
+  const webuiTitle = localStorage.getItem('LIGHTRAG-WEBUI-TITLE');
+  const webuiDescription = localStorage.getItem('LIGHTRAG-WEBUI-DESCRIPTION');
   const username = token ? getUsernameFromToken(token) : null;
 
   if (!token) {
@@ -120,6 +133,8 @@ const initAuthState = (): { isAuthenticated: boolean; isGuestMode: boolean; core
       coreVersion: coreVersion,
       apiVersion: apiVersion,
       username: null,
+      webuiTitle: webuiTitle,
+      webuiDescription: webuiDescription,
     };
   }
 
@@ -129,6 +144,8 @@ const initAuthState = (): { isAuthenticated: boolean; isGuestMode: boolean; core
     coreVersion: coreVersion,
     apiVersion: apiVersion,
     username: username,
+    webuiTitle: webuiTitle,
+    webuiDescription: webuiDescription,
   };
 };
 
@@ -142,8 +159,10 @@ export const useAuthStore = create<AuthState>(set => {
     coreVersion: initialState.coreVersion,
     apiVersion: initialState.apiVersion,
     username: initialState.username,
+    webuiTitle: initialState.webuiTitle,
+    webuiDescription: initialState.webuiDescription,
 
-    login: (token, isGuest = false, coreVersion = null, apiVersion = null) => {
+    login: (token, isGuest = false, coreVersion = null, apiVersion = null, webuiTitle = null, webuiDescription = null) => {
       localStorage.setItem('LIGHTRAG-API-TOKEN', token);
 
       if (coreVersion) {
@@ -152,6 +171,12 @@ export const useAuthStore = create<AuthState>(set => {
       if (apiVersion) {
         localStorage.setItem('LIGHTRAG-API-VERSION', apiVersion);
       }
+      if (webuiTitle) {
+        localStorage.setItem('LIGHTRAG-WEBUI-TITLE', webuiTitle);
+      }
+      if (webuiDescription) {
+        localStorage.setItem('LIGHTRAG-WEBUI-DESCRIPTION', webuiDescription);
+      }
 
       const username = getUsernameFromToken(token);
       set({
@@ -160,6 +185,8 @@ export const useAuthStore = create<AuthState>(set => {
         username: username,
         coreVersion: coreVersion,
         apiVersion: apiVersion,
+        webuiTitle: webuiTitle,
+        webuiDescription: webuiDescription,
       });
     },
 
@@ -168,6 +195,8 @@ export const useAuthStore = create<AuthState>(set => {
 
       const coreVersion = localStorage.getItem('LIGHTRAG-CORE-VERSION');
       const apiVersion = localStorage.getItem('LIGHTRAG-API-VERSION');
+      const webuiTitle = localStorage.getItem('LIGHTRAG-WEBUI-TITLE');
+      const webuiDescription = localStorage.getItem('LIGHTRAG-WEBUI-DESCRIPTION');
 
       set({
         isAuthenticated: false,
@@ -175,6 +204,8 @@ export const useAuthStore = create<AuthState>(set => {
         username: null,
         coreVersion: coreVersion,
         apiVersion: apiVersion,
+        webuiTitle: webuiTitle,
+        webuiDescription: webuiDescription,
       });
     },
 
@@ -192,6 +223,27 @@ export const useAuthStore = create<AuthState>(set => {
         coreVersion: coreVersion,
         apiVersion: apiVersion
       });
+    },
+
+    setCustomTitle: (webuiTitle, webuiDescription) => {
+      // Update localStorage
+      if (webuiTitle) {
+        localStorage.setItem('LIGHTRAG-WEBUI-TITLE', webuiTitle);
+      } else {
+        localStorage.removeItem('LIGHTRAG-WEBUI-TITLE');
+      }
+      
+      if (webuiDescription) {
+        localStorage.setItem('LIGHTRAG-WEBUI-DESCRIPTION', webuiDescription);
+      } else {
+        localStorage.removeItem('LIGHTRAG-WEBUI-DESCRIPTION');
+      }
+
+      // Update state
+      set({
+        webuiTitle: webuiTitle,
+        webuiDescription: webuiDescription
+      });
     }
   };
 });