b52318eeae
- Add intelligent-router.sh hook for automatic agent routing - Add AUTO-TRIGGER-SUMMARY.md documentation - Add FINAL-INTEGRATION-SUMMARY.md documentation - Complete Prometheus integration (6 commands + 4 tools) - Complete Dexto integration (12 commands + 5 tools) - Enhanced Ralph with access to all agents - Fix /clawd command (removed disable-model-invocation) - Update hooks.json to v5 with intelligent routing - 291 total skills now available - All 21 commands with automatic routing 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
689 lines
30 KiB
TypeScript
689 lines
30 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import {
|
|
useSessions,
|
|
useCreateSession,
|
|
useDeleteSession,
|
|
useRenameSession,
|
|
type Session,
|
|
} from './hooks/useSessions';
|
|
import { Button } from './ui/button';
|
|
import { Input } from './ui/input';
|
|
import { Label } from './ui/label';
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogFooter,
|
|
DialogDescription,
|
|
} from './ui/dialog';
|
|
import { ScrollArea } from './ui/scroll-area';
|
|
import {
|
|
Trash2,
|
|
AlertTriangle,
|
|
RefreshCw,
|
|
History,
|
|
Search,
|
|
Plus,
|
|
MoreHorizontal,
|
|
Pencil,
|
|
Copy,
|
|
Check,
|
|
ChevronLeft,
|
|
Settings,
|
|
FlaskConical,
|
|
Moon,
|
|
Sun,
|
|
} from 'lucide-react';
|
|
import { Alert, AlertDescription } from './ui/alert';
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuTrigger,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuSeparator,
|
|
} from './ui/dropdown-menu';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
interface SessionPanelProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
onExpand?: () => void;
|
|
currentSessionId?: string | null;
|
|
onSessionChange: (sessionId: string) => void;
|
|
returnToWelcome: () => void;
|
|
variant?: 'inline' | 'overlay';
|
|
onSearchOpen?: () => void;
|
|
onNewChat?: () => void;
|
|
// App-level actions
|
|
onSettingsOpen?: () => void;
|
|
onPlaygroundOpen?: () => void;
|
|
onThemeToggle?: () => void;
|
|
theme?: 'light' | 'dark';
|
|
}
|
|
|
|
function sortSessions(sessions: Session[]): Session[] {
|
|
return sessions.sort((a, b) => {
|
|
const timeA = a.lastActivity ? new Date(a.lastActivity).getTime() : 0;
|
|
const timeB = b.lastActivity ? new Date(b.lastActivity).getTime() : 0;
|
|
return timeB - timeA;
|
|
});
|
|
}
|
|
|
|
export default function SessionPanel({
|
|
isOpen,
|
|
onClose,
|
|
onExpand,
|
|
currentSessionId,
|
|
onSessionChange,
|
|
returnToWelcome,
|
|
variant = 'overlay',
|
|
onSearchOpen,
|
|
onNewChat,
|
|
onSettingsOpen,
|
|
onPlaygroundOpen,
|
|
onThemeToggle,
|
|
theme,
|
|
}: SessionPanelProps) {
|
|
const [isNewSessionOpen, setNewSessionOpen] = useState(false);
|
|
const [newSessionId, setNewSessionId] = useState('');
|
|
const [isDeleteConversationDialogOpen, setDeleteConversationDialogOpen] = useState(false);
|
|
const [selectedSessionForAction, setSelectedSessionForAction] = useState<string | null>(null);
|
|
const [isRenameDialogOpen, setRenameDialogOpen] = useState(false);
|
|
const [renameValue, setRenameValue] = useState('');
|
|
const [copiedSessionId, setCopiedSessionId] = useState<string | null>(null);
|
|
|
|
const { data: sessionsData = [], isLoading: loading, error } = useSessions(isOpen);
|
|
|
|
// Sort sessions by last activity for display
|
|
const sessions = sortSessions([...sessionsData]);
|
|
|
|
const createSessionMutation = useCreateSession();
|
|
const deleteSessionMutation = useDeleteSession();
|
|
const renameSessionMutation = useRenameSession();
|
|
|
|
// Note: Agent switch invalidation is now handled centrally in AgentSelector
|
|
// Message/response/title events are handled in useChat via direct cache updates
|
|
|
|
const handleCreateSession = async () => {
|
|
const newSession = await createSessionMutation.mutateAsync({
|
|
sessionId: newSessionId.trim() || undefined,
|
|
});
|
|
setNewSessionId('');
|
|
setNewSessionOpen(false);
|
|
onSessionChange(newSession.id);
|
|
};
|
|
|
|
const handleDeleteSession = async (sessionId: string) => {
|
|
await deleteSessionMutation.mutateAsync({ sessionId });
|
|
const isDeletingCurrentSession = currentSessionId === sessionId;
|
|
if (isDeletingCurrentSession) {
|
|
returnToWelcome();
|
|
}
|
|
};
|
|
|
|
const handleDeleteConversation = async () => {
|
|
if (!selectedSessionForAction) return;
|
|
await deleteSessionMutation.mutateAsync({ sessionId: selectedSessionForAction });
|
|
const isDeletingCurrentSession = currentSessionId === selectedSessionForAction;
|
|
if (isDeletingCurrentSession) {
|
|
returnToWelcome();
|
|
}
|
|
setDeleteConversationDialogOpen(false);
|
|
setSelectedSessionForAction(null);
|
|
};
|
|
|
|
const handleOpenRenameDialog = (sessionId: string, currentTitle: string | null) => {
|
|
setSelectedSessionForAction(sessionId);
|
|
setRenameValue(currentTitle || '');
|
|
setRenameDialogOpen(true);
|
|
};
|
|
|
|
const handleRenameSession = async () => {
|
|
if (!selectedSessionForAction || !renameValue.trim()) return;
|
|
try {
|
|
await renameSessionMutation.mutateAsync({
|
|
sessionId: selectedSessionForAction,
|
|
title: renameValue.trim(),
|
|
});
|
|
setRenameDialogOpen(false);
|
|
setSelectedSessionForAction(null);
|
|
setRenameValue('');
|
|
} catch (error) {
|
|
// Error is already logged by React Query, keep dialog open for retry
|
|
console.error(`Failed to rename session: ${error}`);
|
|
}
|
|
};
|
|
|
|
const handleCopySessionId = async (sessionId: string) => {
|
|
try {
|
|
await navigator.clipboard.writeText(sessionId);
|
|
setCopiedSessionId(sessionId);
|
|
} catch (error) {
|
|
console.error(`Failed to copy session ID: ${error}`);
|
|
}
|
|
};
|
|
|
|
// Clean up copy feedback timeout
|
|
useEffect(() => {
|
|
if (copiedSessionId) {
|
|
const timeoutId = setTimeout(() => setCopiedSessionId(null), 2000);
|
|
return () => clearTimeout(timeoutId);
|
|
}
|
|
}, [copiedSessionId]);
|
|
|
|
const formatRelativeTime = (timestamp: number | null) => {
|
|
if (!timestamp) return 'Unknown';
|
|
const now = Date.now();
|
|
const diff = now - timestamp;
|
|
const minutes = Math.floor(diff / 60000);
|
|
const hours = Math.floor(diff / 3600000);
|
|
const days = Math.floor(diff / 86400000);
|
|
|
|
if (minutes < 1) return 'Just now';
|
|
if (minutes < 60) return `${minutes}m ago`;
|
|
if (hours < 24) return `${hours}h ago`;
|
|
return `${days}d ago`;
|
|
};
|
|
|
|
const content = (
|
|
<div className="flex flex-col h-full">
|
|
{/* Header with Dexto branding */}
|
|
<div className="px-4 py-5">
|
|
<div className="flex items-center justify-between">
|
|
{/* Dexto logo */}
|
|
<div id="sessionpanel-title" className="flex items-center px-2">
|
|
{/* Light mode logo */}
|
|
<img
|
|
src="/logos/dexto/dexto_logo_light.svg"
|
|
alt="Dexto"
|
|
className="h-6 w-auto dark:hidden"
|
|
/>
|
|
{/* Dark mode logo */}
|
|
<img
|
|
src="/logos/dexto/dexto_logo.svg"
|
|
alt="Dexto"
|
|
className="h-6 w-auto hidden dark:block"
|
|
/>
|
|
</div>
|
|
|
|
{/* Collapse button */}
|
|
<button
|
|
onClick={onClose}
|
|
className="flex items-center justify-center w-8 h-8 rounded-lg text-muted-foreground hover:bg-muted/40 hover:text-foreground transition-colors"
|
|
aria-label="Collapse panel"
|
|
>
|
|
<ChevronLeft className="h-5 w-5" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Error Display */}
|
|
{error && (
|
|
<div className="p-4">
|
|
<Alert variant="destructive">
|
|
<AlertTriangle className="h-4 w-4" />
|
|
<AlertDescription>{error.message}</AlertDescription>
|
|
</Alert>
|
|
</div>
|
|
)}
|
|
|
|
{/* Sessions List */}
|
|
<ScrollArea className="flex-1 scrollbar-thin">
|
|
{/* Action items at top of list */}
|
|
<div className="px-3 pt-2 pb-1 space-y-0.5">
|
|
{onNewChat && (
|
|
<button
|
|
onClick={onNewChat}
|
|
className="w-full flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm text-muted-foreground hover:bg-muted/40 hover:text-foreground transition-colors"
|
|
>
|
|
<Plus className="h-4 w-4" />
|
|
<span>New Chat</span>
|
|
</button>
|
|
)}
|
|
{onSearchOpen && (
|
|
<button
|
|
onClick={onSearchOpen}
|
|
className="w-full flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm text-muted-foreground hover:bg-muted/40 hover:text-foreground transition-colors"
|
|
>
|
|
<Search className="h-4 w-4" />
|
|
<span>Search</span>
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{/* Spacer */}
|
|
{(onNewChat || onSearchOpen) && <div className="h-2" />}
|
|
|
|
{/* History Header */}
|
|
{!loading && sessions.length > 0 && (
|
|
<div className="px-4 py-2">
|
|
<h2 className="text-xs font-semibold text-muted-foreground/70 uppercase tracking-wider">
|
|
History
|
|
</h2>
|
|
</div>
|
|
)}
|
|
|
|
{loading ? (
|
|
<div className="flex items-center justify-center py-12">
|
|
<RefreshCw className="h-5 w-5 animate-spin text-muted-foreground" />
|
|
</div>
|
|
) : sessions.length === 0 ? (
|
|
<div className="text-center py-12 px-6">
|
|
<History className="h-10 w-10 mx-auto mb-3 text-muted-foreground/30" />
|
|
<p className="text-sm text-muted-foreground">No conversations yet</p>
|
|
<p className="text-xs text-muted-foreground/60 mt-1">
|
|
Start chatting to see your history
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div className="px-3 py-2 space-y-0.5">
|
|
{sessions.map((session) => {
|
|
const title =
|
|
session.title && session.title.trim().length > 0
|
|
? session.title
|
|
: session.id;
|
|
const isActive = currentSessionId === session.id;
|
|
return (
|
|
<div
|
|
key={session.id}
|
|
className={cn(
|
|
'group relative px-3 py-1.5 rounded-lg transition-all cursor-pointer',
|
|
isActive
|
|
? 'bg-primary/5 before:absolute before:left-0 before:top-1.5 before:bottom-1.5 before:w-0.5 before:bg-primary before:rounded-full'
|
|
: 'hover:bg-muted/40'
|
|
)}
|
|
role="button"
|
|
tabIndex={0}
|
|
aria-current={isActive ? 'page' : undefined}
|
|
onClick={() => onSessionChange(session.id)}
|
|
onKeyDown={(e) => {
|
|
if (e.target !== e.currentTarget) return;
|
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
e.preventDefault();
|
|
onSessionChange(session.id);
|
|
}
|
|
}}
|
|
>
|
|
<div className="flex items-center justify-between gap-2">
|
|
<h3
|
|
className={cn(
|
|
'text-sm truncate flex-1 min-w-0',
|
|
isActive
|
|
? 'font-medium text-foreground'
|
|
: 'text-muted-foreground'
|
|
)}
|
|
>
|
|
{title}
|
|
</h3>
|
|
|
|
{/* Timestamp - hidden on hover */}
|
|
<span className="text-[10px] text-muted-foreground/50 shrink-0 group-hover:opacity-0 transition-opacity">
|
|
{formatRelativeTime(session.lastActivity)}
|
|
</span>
|
|
|
|
{/* Dropdown - shown on hover, positioned to overlap timestamp */}
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={(e) => e.stopPropagation()}
|
|
className="h-7 w-7 p-0 absolute right-2 opacity-0 group-hover:opacity-100 focus-visible:opacity-100 transition-opacity"
|
|
aria-label="Session options"
|
|
>
|
|
<MoreHorizontal className="h-4 w-4 text-muted-foreground" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent
|
|
align="end"
|
|
className="w-48"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<DropdownMenuItem
|
|
onClick={() =>
|
|
handleOpenRenameDialog(
|
|
session.id,
|
|
session.title ?? null
|
|
)
|
|
}
|
|
>
|
|
<Pencil className="h-4 w-4 mr-2" />
|
|
Rename
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem
|
|
onClick={() => handleCopySessionId(session.id)}
|
|
>
|
|
{copiedSessionId === session.id ? (
|
|
<Check className="h-4 w-4 mr-2 text-green-500" />
|
|
) : (
|
|
<Copy className="h-4 w-4 mr-2" />
|
|
)}
|
|
{copiedSessionId === session.id
|
|
? 'Copied!'
|
|
: 'Copy Session ID'}
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem
|
|
onClick={() => {
|
|
if (session.messageCount > 0) {
|
|
setSelectedSessionForAction(session.id);
|
|
setDeleteConversationDialogOpen(true);
|
|
} else {
|
|
handleDeleteSession(session.id);
|
|
}
|
|
}}
|
|
className="text-destructive focus:text-destructive"
|
|
>
|
|
<Trash2 className="h-4 w-4 mr-2" />
|
|
Delete
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</ScrollArea>
|
|
|
|
{/* Footer with app-level actions */}
|
|
<div className="border-t border-border/30 p-3 space-y-1">
|
|
{/* Developer Tools */}
|
|
{onPlaygroundOpen && (
|
|
<button
|
|
onClick={onPlaygroundOpen}
|
|
className="w-full flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm text-muted-foreground hover:bg-muted/40 hover:text-foreground transition-colors"
|
|
>
|
|
<FlaskConical className="h-4 w-4" />
|
|
<span>MCP Playground</span>
|
|
</button>
|
|
)}
|
|
|
|
{/* Separator */}
|
|
{onPlaygroundOpen && (onThemeToggle || onSettingsOpen) && (
|
|
<div className="h-px bg-border/30 my-1" />
|
|
)}
|
|
|
|
{/* Theme Toggle */}
|
|
{onThemeToggle && (
|
|
<button
|
|
onClick={onThemeToggle}
|
|
className="w-full flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm text-muted-foreground hover:bg-muted/40 hover:text-foreground transition-colors"
|
|
>
|
|
{theme === 'dark' ? (
|
|
<Sun className="h-4 w-4 transition-transform duration-200 hover:rotate-180" />
|
|
) : (
|
|
<Moon className="h-4 w-4 transition-transform duration-200 hover:rotate-12" />
|
|
)}
|
|
<span>{theme === 'dark' ? 'Light Mode' : 'Dark Mode'}</span>
|
|
</button>
|
|
)}
|
|
|
|
{/* Settings */}
|
|
{onSettingsOpen && (
|
|
<button
|
|
onClick={onSettingsOpen}
|
|
className="w-full flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm text-muted-foreground hover:bg-muted/40 hover:text-foreground transition-colors"
|
|
>
|
|
<Settings className="h-4 w-4" />
|
|
<span>Settings</span>
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{/* New Chat Dialog */}
|
|
<Dialog open={isNewSessionOpen} onOpenChange={setNewSessionOpen}>
|
|
<DialogContent className="sm:max-w-md">
|
|
<DialogHeader>
|
|
<DialogTitle>Start New Chat</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
<div className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="sessionId">Chat ID</Label>
|
|
<Input
|
|
id="sessionId"
|
|
value={newSessionId}
|
|
onChange={(e) => setNewSessionId(e.target.value)}
|
|
placeholder="e.g., user-123, project-alpha"
|
|
className="font-mono"
|
|
/>
|
|
<p className="text-xs text-muted-foreground">
|
|
Leave empty to auto-generate a unique ID
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => setNewSessionOpen(false)}>
|
|
Cancel
|
|
</Button>
|
|
<Button onClick={handleCreateSession}>Start Chat</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
{/* Delete Conversation Confirmation Dialog */}
|
|
<Dialog
|
|
open={isDeleteConversationDialogOpen}
|
|
onOpenChange={setDeleteConversationDialogOpen}
|
|
>
|
|
<DialogContent className="sm:max-w-md">
|
|
<DialogHeader>
|
|
<DialogTitle className="flex items-center space-x-2">
|
|
<Trash2 className="h-5 w-5 text-destructive" />
|
|
<span>Delete Conversation</span>
|
|
</DialogTitle>
|
|
<DialogDescription>
|
|
This will permanently delete this conversation and all its messages.
|
|
This action cannot be undone.
|
|
{selectedSessionForAction && (
|
|
<span className="block mt-2 font-medium">
|
|
Session:{' '}
|
|
<span className="font-mono">{selectedSessionForAction}</span>
|
|
</span>
|
|
)}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<DialogFooter>
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => setDeleteConversationDialogOpen(false)}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
variant="destructive"
|
|
onClick={handleDeleteConversation}
|
|
disabled={
|
|
deleteSessionMutation.isPending &&
|
|
deleteSessionMutation.variables?.sessionId ===
|
|
selectedSessionForAction
|
|
}
|
|
className="flex items-center space-x-2"
|
|
>
|
|
<Trash2 className="h-4 w-4" />
|
|
<span>
|
|
{deleteSessionMutation.isPending &&
|
|
deleteSessionMutation.variables?.sessionId ===
|
|
selectedSessionForAction
|
|
? 'Deleting...'
|
|
: 'Delete Conversation'}
|
|
</span>
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
{/* Rename Session Dialog */}
|
|
<Dialog open={isRenameDialogOpen} onOpenChange={setRenameDialogOpen}>
|
|
<DialogContent className="sm:max-w-md">
|
|
<DialogHeader>
|
|
<DialogTitle className="flex items-center space-x-2">
|
|
<Pencil className="h-5 w-5" />
|
|
<span>Rename Chat</span>
|
|
</DialogTitle>
|
|
<DialogDescription>
|
|
Enter a new name for this conversation.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="renameTitle">Chat Name</Label>
|
|
<Input
|
|
id="renameTitle"
|
|
value={renameValue}
|
|
onChange={(e) => setRenameValue(e.target.value)}
|
|
placeholder="Enter chat name..."
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Enter' && renameValue.trim()) {
|
|
handleRenameSession();
|
|
}
|
|
}}
|
|
autoFocus
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => setRenameDialogOpen(false)}>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
onClick={handleRenameSession}
|
|
disabled={!renameValue.trim() || renameSessionMutation.isPending}
|
|
>
|
|
{renameSessionMutation.isPending ? 'Saving...' : 'Save'}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
);
|
|
|
|
// Collapsed sidebar content - thin bar with icon buttons
|
|
const collapsedContent = (
|
|
<div className="flex flex-col h-full py-3 px-2 items-center">
|
|
{/* Dexto icon - click to expand */}
|
|
<button
|
|
onClick={onExpand}
|
|
className="flex items-center justify-center w-10 h-10 rounded-lg hover:bg-muted/40 transition-colors mb-3"
|
|
aria-label="Expand panel"
|
|
>
|
|
<img src="/logos/dexto/dexto_logo_icon.svg" alt="Dexto" className="h-7 w-7" />
|
|
</button>
|
|
|
|
{/* Action items with subtle spacing */}
|
|
<div className="flex flex-col gap-1 flex-1">
|
|
{/* New Chat */}
|
|
{onNewChat && (
|
|
<button
|
|
onClick={onNewChat}
|
|
className="flex items-center justify-center w-10 h-10 rounded-lg text-muted-foreground hover:bg-muted/40 hover:text-foreground transition-colors"
|
|
aria-label="New chat"
|
|
>
|
|
<Plus className="h-5 w-5" />
|
|
</button>
|
|
)}
|
|
|
|
{/* Search */}
|
|
{onSearchOpen && (
|
|
<button
|
|
onClick={onSearchOpen}
|
|
className="flex items-center justify-center w-10 h-10 rounded-lg text-muted-foreground hover:bg-muted/40 hover:text-foreground transition-colors"
|
|
aria-label="Search"
|
|
>
|
|
<Search className="h-5 w-5" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{/* Footer actions - playground, theme, settings */}
|
|
<div className="flex flex-col gap-1 pt-2 border-t border-border/30">
|
|
{/* Playground */}
|
|
{onPlaygroundOpen && (
|
|
<button
|
|
onClick={onPlaygroundOpen}
|
|
className="flex items-center justify-center w-10 h-10 rounded-lg text-muted-foreground hover:bg-muted/40 hover:text-foreground transition-colors"
|
|
aria-label="MCP Playground"
|
|
>
|
|
<FlaskConical className="h-5 w-5" />
|
|
</button>
|
|
)}
|
|
|
|
{/* Theme Toggle */}
|
|
{onThemeToggle && (
|
|
<button
|
|
onClick={onThemeToggle}
|
|
className="flex items-center justify-center w-10 h-10 rounded-lg text-muted-foreground hover:bg-muted/40 hover:text-foreground transition-colors"
|
|
aria-label={theme === 'dark' ? 'Light mode' : 'Dark mode'}
|
|
>
|
|
{theme === 'dark' ? (
|
|
<Sun className="h-5 w-5" />
|
|
) : (
|
|
<Moon className="h-5 w-5" />
|
|
)}
|
|
</button>
|
|
)}
|
|
|
|
{/* Settings */}
|
|
{onSettingsOpen && (
|
|
<button
|
|
onClick={onSettingsOpen}
|
|
className="flex items-center justify-center w-10 h-10 rounded-lg text-muted-foreground hover:bg-muted/40 hover:text-foreground transition-colors"
|
|
aria-label="Settings"
|
|
>
|
|
<Settings className="h-5 w-5" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
// For inline variant, show collapsed or expanded
|
|
if (variant === 'inline') {
|
|
if (!isOpen) {
|
|
// Collapsed state - thin bar
|
|
return (
|
|
<div className="h-full flex flex-col bg-card border-r border-border/30">
|
|
{collapsedContent}
|
|
</div>
|
|
);
|
|
}
|
|
// Expanded state - full panel
|
|
return <div className="h-full w-full flex flex-col bg-card">{content}</div>;
|
|
}
|
|
|
|
// Overlay variant with slide animation
|
|
return (
|
|
<>
|
|
{/* Backdrop */}
|
|
<div
|
|
className={cn(
|
|
'fixed inset-0 bg-black/50 z-30 transition-opacity duration-300',
|
|
isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
|
|
)}
|
|
onClick={onClose}
|
|
/>
|
|
|
|
{/* Panel */}
|
|
<aside
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby="sessionpanel-title"
|
|
tabIndex={-1}
|
|
className={cn(
|
|
'fixed top-0 left-0 z-40 h-screen w-72 bg-card border-r border-border shadow-xl transition-transform duration-300 ease-in-out flex flex-col',
|
|
isOpen ? 'translate-x-0' : '-translate-x-full'
|
|
)}
|
|
>
|
|
{content}
|
|
</aside>
|
|
</>
|
|
);
|
|
}
|