oxios 1.5.2

Oxios Agent OS — Agent Operating System powered by oxi-sdk
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

import { Link, useRouterState } from '@tanstack/react-router'
import { LayoutDashboard, MessageSquare, NotebookPen } from 'lucide-react'
import { useTranslation } from 'react-i18next'
import { cn } from '@/lib/utils'
import type { SidebarMode } from '@/stores/sidebar'

const MODES: {
  key: SidebarMode
  icon: typeof LayoutDashboard
  labelKey: string
  href: string
}[] = [
  { key: 'console', icon: LayoutDashboard, labelKey: 'sidebar.console', href: '/' },
  { key: 'knowledge', icon: NotebookPen, labelKey: 'sidebar.knowledge', href: '/knowledge' },
  { key: 'chat', icon: MessageSquare, labelKey: 'sidebar.chat', href: '/chat' },
]

interface ModeTabsProps {
  variant?: 'header' | 'sidebar'
}

export function ModeTabs({ variant = 'header' }: ModeTabsProps) {
  const { t } = useTranslation()
  const router = useRouterState()
  const pathname = router.location.pathname

  const currentMode: SidebarMode = pathname.startsWith('/knowledge')
    ? 'knowledge'
    : pathname === '/chat'
      ? 'chat'
      : 'console'

  return (
    <nav
      aria-label={t('common.modeNavigation', 'Mode navigation')}
      className={cn(
        'flex items-center',
        variant === 'header' ? 'gap-0.5 rounded-lg bg-muted/60 p-0.5' : 'gap-0.5',
      )}
    >
      {MODES.map(({ key, icon: Icon, labelKey, href }) => {
        const isActive = currentMode === key
        return (
          <Link
            key={key}
            to={href}
            aria-current={isActive ? 'page' : undefined}
            className={cn(
              'flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium select-none transition-all',
              variant === 'header' && [
                'rounded-md',
                isActive
                  ? 'bg-background shadow-sm text-foreground'
                  : 'text-muted-foreground hover:text-foreground',
              ],
              variant === 'sidebar' && [
                'flex-1 justify-center rounded-md',
                isActive
                  ? 'bg-sidebar-accent text-sidebar-accent-foreground'
                  : 'text-sidebar-foreground/50 hover:bg-sidebar-accent/50',
              ],
            )}
          >
            <Icon className="h-3.5 w-3.5" />
            <span>{t(labelKey)}</span>
          </Link>
        )
      })}
    </nav>
  )
}