import React, { useState } from 'react'; import { GripVertical, ChevronDown, ChevronRight, Plus } from 'lucide-react'; import { motion } from 'framer-motion'; import { defineMessages, useIntl } from '../../i18n'; import { cn } from '../../utils'; import { DropdownMenu, DropdownMenuTrigger } from '../ui/dropdown-menu'; import { ChatSessionsDropdown, SessionsList } from './navigation'; import type { NavigationRendererProps } from './navigation/types'; const i18n = defineMessages({ newChat: { id: 'condensedRenderer.newChat', defaultMessage: 'New Chat', }, }); export const CondensedRenderer: React.FC = ({ isOverlayMode, navigationPosition, isCondensedIconOnly, className, visibleItems, isActive, recentSessions, activeSessionId, onNavClick, onNewChat, onSessionClick, onFetchSessions, getSessionStatus, clearUnread, isChatExpanded, onToggleChatExpanded, drag, navFocusRef, }) => { const intl = useIntl(); const [chatPopoverOpen, setChatPopoverOpen] = useState(false); const isVertical = navigationPosition === 'left' || navigationPosition === 'right'; const isTopPosition = navigationPosition === 'top'; const isBottomPosition = navigationPosition === 'bottom'; return ( {/* Top spacer (vertical only) */} {isVertical && (

)} {/* Left spacer (horizontal top position only) */} {!isVertical && isTopPosition && (

)} {/* Navigation items */} {isVertical ? (

{visibleItems.map((item, index) => { const Icon = item.icon; const active = isActive(item.path); const isDragging = drag.draggedItem === item.id; const isDragOver = drag.dragOverItem === item.id; const isChatItem = item.id === 'chat'; return ( drag.onDragStart(e as unknown as React.DragEvent, item.id)} onDragOver={(e) => drag.onDragOver(e as unknown as React.DragEvent, item.id)} onDrop={(e) => drag.onDrop(e as unknown as React.DragEvent, item.id)} onDragEnd={drag.onDragEnd} initial={{ opacity: 0 }} animate={{ opacity: isDragging ? 0.5 : 1 }} transition={{ duration: 0.15, delay: index * 0.02 }} className={cn( 'relative cursor-move group', isCondensedIconOnly ? 'flex-shrink-0' : 'w-full flex-shrink-0', isDragOver && 'ring-2 ring-blue-500 rounded-lg', isChatItem && !isCondensedIconOnly && 'overflow-visible' )} >

{/* Chat item with dropdown in icon-only mode */} {isChatItem && isCondensedIconOnly ? ( onNavClick('/sessions')} /> ) : ( <> {isChatItem && !isCondensedIconOnly ? (

{item.label}

{isChatExpanded ? ( ) : ( )}

{!isChatExpanded && ( { e.stopPropagation(); onNewChat(); }} whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.95 }} className={cn( 'absolute -right-9 top-1/2 -translate-y-1/2 p-1.5 rounded-md z-10', 'opacity-0 group-hover:opacity-100 transition-opacity', 'bg-background-tertiary hover:bg-background-inverse hover:text-text-inverse', 'flex items-center justify-center' )} title={intl.formatMessage(i18n.newChat)} > )}

) : ( onNavClick(item.path)} whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }} className={cn( 'flex flex-row items-center gap-2', 'relative rounded-lg transition-colors duration-200 no-drag', isCondensedIconOnly ? 'justify-center p-2.5' : 'w-full pl-2 pr-4 py-2.5', active ? 'bg-background-inverse text-text-inverse' : 'bg-background-primary hover:bg-background-tertiary' )} > {!isCondensedIconOnly && (

)} {!isCondensedIconOnly && ( {item.label} )} {!isCondensedIconOnly && item.getTag && (

{item.getTag()}

)} )} )} {isChatItem && !isCondensedIconOnly && ( onNavClick('/sessions')} /> )}

); })}

) : ( /* Horizontal navigation items */ visibleItems.map((item, index) => { const Icon = item.icon; const active = isActive(item.path); const isDragging = drag.draggedItem === item.id; const isDragOver = drag.dragOverItem === item.id; const isChatItem = item.id === 'chat'; return ( drag.onDragStart(e as unknown as React.DragEvent, item.id)} onDragOver={(e) => drag.onDragOver(e as unknown as React.DragEvent, item.id)} onDrop={(e) => drag.onDrop(e as unknown as React.DragEvent, item.id)} onDragEnd={drag.onDragEnd} initial={{ opacity: 0 }} animate={{ opacity: isDragging ? 0.5 : 1 }} transition={{ duration: 0.15, delay: index * 0.02 }} className={cn( 'relative cursor-move group flex-shrink-0', isDragOver && 'ring-2 ring-blue-500 rounded-lg', isChatItem && !isCondensedIconOnly && 'overflow-visible' )} >

{isChatItem ? ( {item.label} onNavClick('/sessions')} /> ) : ( onNavClick(item.path)} whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }} className={cn( 'flex flex-row items-center gap-2 px-3 py-2.5', 'relative rounded-lg transition-colors duration-200 no-drag', active ? 'bg-background-inverse text-text-inverse' : 'bg-background-primary hover:bg-background-tertiary' )} > {item.label} )}

); }) )} {/* Right spacer (horizontal only) */} {!isVertical && (

)} ); };