File size: 4,682 Bytes
0e5f52f ce48dbe beccf5b 0e5f52f 29ee1c2 11b4cc9 29ee1c2 77ca676 c114561 11b4cc9 98c48d2 0e5f52f 93cbd1b 29ee1c2 77ca676 29ee1c2 93cbd1b 77ca676 93cbd1b 77ca676 93cbd1b 77ca676 93cbd1b 77ca676 93cbd1b 77ca676 98c48d2 073193f 11b4cc9 c114561 11b4cc9 0e5f52f 98c48d2 9f458f4 98c48d2 9f458f4 0e5f52f 9f458f4 93cbd1b 270cb30 0e5f52f 9f458f4 beccf5b 98c48d2 beccf5b d919945 33eb1fa d919945 beccf5b 0e5f52f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 |
import Button from '@/components/ui/Button'
import { SiteInfo, webuiPrefix } from '@/lib/constants'
import AppSettings from '@/components/AppSettings'
import { TabsList, TabsTrigger } from '@/components/ui/Tabs'
import { useSettingsStore } from '@/stores/settings'
import { useAuthStore } from '@/stores/state'
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
currentTab: string
children: React.ReactNode
}
function NavigationTab({ value, currentTab, children }: NavigationTabProps) {
return (
<TabsTrigger
value={value}
className={cn(
'cursor-pointer px-2 py-1 transition-all',
currentTab === value ? '!bg-emerald-400 !text-zinc-50' : 'hover:bg-background/60'
)}
>
{children}
</TabsTrigger>
)
}
function TabsNavigation() {
const currentTab = useSettingsStore.use.currentTab()
const { t } = useTranslation()
return (
<div className="flex h-8 self-center">
<TabsList className="h-full gap-2">
<NavigationTab value="documents" currentTab={currentTab}>
{t('header.documents')}
</NavigationTab>
<NavigationTab value="knowledge-graph" currentTab={currentTab}>
{t('header.knowledgeGraph')}
</NavigationTab>
<NavigationTab value="retrieval" currentTab={currentTab}>
{t('header.retrieval')}
</NavigationTab>
<NavigationTab value="api" currentTab={currentTab}>
{t('header.api')}
</NavigationTab>
</TabsList>
</div>
)
}
export default function SiteHeader() {
const { t } = useTranslation()
const { isGuestMode, coreVersion, apiVersion, username, webuiTitle, webuiDescription } = useAuthStore()
const versionDisplay = (coreVersion && apiVersion)
? `${coreVersion}/${apiVersion}`
: null;
const handleLogout = () => {
navigationService.navigateToLogin();
}
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="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" />
<span className="font-bold md:inline-block">{SiteInfo.name}</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">
<TabsNavigation />
{isGuestMode && (
<div className="ml-2 self-center px-2 py-1 text-xs bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-200 rounded-md">
{t('login.guestMode', 'Guest Mode')}
</div>
)}
</div>
<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" />
</a>
</Button>
<AppSettings />
{!isGuestMode && (
<Button
variant="ghost"
size="icon"
side="bottom"
tooltip={`${t('header.logout')} (${username})`}
onClick={handleLogout}
>
<LogOutIcon className="size-4" aria-hidden="true" />
</Button>
)}
</div>
</nav>
</header>
)
}
|