feat: AI provider testing page + multi-provider support + UX design spec
- Add AI Provider Testing page (/admin/ai-test) with Tags and Embeddings tests - Add new AI providers: CustomOpenAI, DeepSeek, OpenRouter - Add API routes for AI config, models listing, and testing endpoints - Add UX Design Specification document for Phase 1 MVP AI - Add PRD Phase 1 MVP AI planning document - Update admin settings and sidebar navigation - Fix AI factory for multi-provider support
This commit is contained in:
@@ -1,19 +1,32 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useState } from 'react'
|
||||
import Link from 'next/link'
|
||||
import { usePathname, useSearchParams } from 'next/navigation'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { StickyNote, Bell, Archive, Trash2, Tag, ChevronDown, ChevronUp, Settings, User, Shield, Coffee } from 'lucide-react'
|
||||
import { StickyNote, Bell, Archive, Trash2, Tag, ChevronDown, ChevronUp, Settings, User, Shield, Coffee, LogOut } from 'lucide-react'
|
||||
import { useLabels } from '@/context/LabelContext'
|
||||
import { LabelManagementDialog } from './label-management-dialog'
|
||||
import { useSession } from 'next-auth/react'
|
||||
import { useSession, signOut } from 'next-auth/react'
|
||||
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu'
|
||||
import { Button } from '@/components/ui/button'
|
||||
|
||||
import { LABEL_COLORS } from '@/lib/types'
|
||||
|
||||
export function Sidebar({ className, user }: { className?: string, user?: any }) {
|
||||
const pathname = usePathname()
|
||||
const searchParams = useSearchParams()
|
||||
const router = useRouter()
|
||||
const { labels, getLabelColor } = useLabels()
|
||||
const [isLabelsExpanded, setIsLabelsExpanded] = useState(false)
|
||||
const { data: session } = useSession()
|
||||
@@ -27,6 +40,11 @@ export function Sidebar({ className, user }: { className?: string, user?: any })
|
||||
const displayedLabels = isLabelsExpanded ? labels : labels.slice(0, 5)
|
||||
const hasMoreLabels = labels.length > 5
|
||||
|
||||
const userRole = (currentUser as any)?.role || 'USER'
|
||||
const userInitials = currentUser?.name
|
||||
? currentUser.name.split(' ').map((n: string) => n[0]).join('').toUpperCase().substring(0, 2)
|
||||
: 'U'
|
||||
|
||||
const NavItem = ({ href, icon: Icon, label, active, onClick, iconColorClass }: any) => (
|
||||
<Link
|
||||
href={href}
|
||||
@@ -44,8 +62,68 @@ export function Sidebar({ className, user }: { className?: string, user?: any })
|
||||
)
|
||||
|
||||
return (
|
||||
<aside className={cn("w-[280px] flex-col gap-1 py-2 overflow-y-auto overflow-x-hidden hidden md:flex", className)}>
|
||||
<NavItem
|
||||
<aside className={cn("w-[280px] flex-col gap-1 overflow-y-auto overflow-x-hidden hidden md:flex", className)}>
|
||||
{/* User Profile Section - Top of Sidebar */}
|
||||
{currentUser && (
|
||||
<div className="p-4 border-b border-gray-200 dark:border-zinc-800 bg-gray-50/50 dark:bg-zinc-900/50">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button className="flex items-center gap-3 w-full p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-zinc-800 transition-colors text-left">
|
||||
<Avatar className="h-10 w-10 ring-2 ring-amber-500/20">
|
||||
<AvatarImage src={currentUser.image || ''} alt={currentUser.name || ''} />
|
||||
<AvatarFallback className="bg-amber-500 text-white font-medium">
|
||||
{userInitials}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">
|
||||
{currentUser.name}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 truncate">
|
||||
{currentUser.email}
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="start" className="w-56" forceMount>
|
||||
<DropdownMenuLabel className="font-normal">
|
||||
<div className="flex flex-col space-y-1">
|
||||
<p className="text-sm font-medium leading-none">{currentUser.name}</p>
|
||||
<p className="text-xs leading-none text-muted-foreground">
|
||||
{currentUser.email}
|
||||
</p>
|
||||
</div>
|
||||
</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuGroup>
|
||||
<DropdownMenuItem onClick={() => router.push('/settings/profile')}>
|
||||
<User className="mr-2 h-4 w-4" />
|
||||
<span>Profile</span>
|
||||
</DropdownMenuItem>
|
||||
{userRole === 'ADMIN' && (
|
||||
<DropdownMenuItem onClick={() => router.push('/admin')}>
|
||||
<Shield className="mr-2 h-4 w-4" />
|
||||
<span>Admin Dashboard</span>
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
<DropdownMenuItem onClick={() => router.push('/settings')}>
|
||||
<Settings className="mr-2 h-4 w-4" />
|
||||
<span>Diagnostics</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuGroup>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem onClick={() => signOut({ callbackUrl: '/login' })}>
|
||||
<LogOut className="mr-2 h-4 w-4" />
|
||||
<span>Log out</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Navigation Items */}
|
||||
<div className="py-2">
|
||||
<NavItem
|
||||
href="/"
|
||||
icon={StickyNote}
|
||||
label="Notes"
|
||||
@@ -103,30 +181,12 @@ export function Sidebar({ className, user }: { className?: string, user?: any })
|
||||
label="Archive"
|
||||
active={pathname === '/archive'}
|
||||
/>
|
||||
<NavItem
|
||||
href="/trash"
|
||||
icon={Trash2}
|
||||
label="Trash"
|
||||
active={pathname === '/trash'}
|
||||
<NavItem
|
||||
href="/trash"
|
||||
icon={Trash2}
|
||||
label="Trash"
|
||||
active={pathname === '/trash'}
|
||||
/>
|
||||
|
||||
<div className="my-2 border-t border-gray-200 dark:border-zinc-800" />
|
||||
|
||||
<NavItem
|
||||
href="/settings/profile"
|
||||
icon={User}
|
||||
label="Profile"
|
||||
active={pathname === '/settings/profile'}
|
||||
/>
|
||||
|
||||
{(currentUser as any)?.role === 'ADMIN' && (
|
||||
<NavItem
|
||||
href="/admin"
|
||||
icon={Shield}
|
||||
label="Admin"
|
||||
active={pathname === '/admin'}
|
||||
/>
|
||||
)}
|
||||
|
||||
<NavItem
|
||||
href="/support"
|
||||
@@ -134,13 +194,7 @@ export function Sidebar({ className, user }: { className?: string, user?: any })
|
||||
label="Support Memento ☕"
|
||||
active={pathname === '/support'}
|
||||
/>
|
||||
|
||||
<NavItem
|
||||
href="/settings"
|
||||
icon={Settings}
|
||||
label="Diagnostics"
|
||||
active={pathname === '/settings'}
|
||||
/>
|
||||
</div>
|
||||
</aside>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user