import React from 'react'; import { MessageSquare, History, Plus, ChefHat } from 'lucide-react'; import { DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, } from '../../ui/dropdown-menu'; import { SessionIndicators } from '../../SessionIndicators'; import { cn } from '../../../utils'; import { getSessionDisplayName, truncateMessage } from '../../../hooks/useNavigationSessions'; import { defineMessages, useIntl } from '../../../i18n'; import type { Session } from '../../../api'; import type { SessionStatus } from './types'; const i18n = defineMessages({ newChat: { id: 'chatSessionsDropdown.newChat', defaultMessage: 'New Chat', }, showAll: { id: 'chatSessionsDropdown.showAll', defaultMessage: 'Show All', }, }); interface ChatSessionsDropdownProps { sessions: Session[]; activeSessionId?: string; side?: 'top' | 'bottom' | 'left' | 'right'; zIndex?: number; getSessionStatus: (sessionId: string) => SessionStatus | undefined; clearUnread: (sessionId: string) => void; onNewChat: () => void; onSessionClick: (sessionId: string) => void; onShowAll: () => void; } export const ChatSessionsDropdown: React.FC = ({ sessions, activeSessionId, side = 'right', zIndex, getSessionStatus, clearUnread, onNewChat, onSessionClick, onShowAll, }) => { const intl = useIntl(); return ( {intl.formatMessage(i18n.newChat)} {sessions.length > 0 && } {sessions.map((session) => { const status = getSessionStatus(session.id); const isStreaming = status?.streamState === 'streaming'; const hasError = status?.streamState === 'error'; const hasUnread = status?.hasUnreadActivity ?? false; const isActiveSession = session.id === activeSessionId; return ( { clearUnread(session.id); onSessionClick(session.id); }} className={cn( 'flex items-center gap-2 px-3 py-2 text-sm rounded-lg cursor-pointer', isActiveSession && 'bg-background-tertiary' )} > {session.recipe ? ( ) : ( )} {truncateMessage(getSessionDisplayName(session), 30)} ); })} {sessions.length > 0 && ( <> {intl.formatMessage(i18n.showAll)} )} ); };