import React, { useState, useCallback } from 'react'; import { MessageSquare, ChefHat, Plus, History } from 'lucide-react'; import { motion, AnimatePresence } from 'framer-motion'; import { SessionIndicators } from '../../SessionIndicators'; import { InlineEditText } from '../../common/InlineEditText'; import { cn } from '../../../utils'; import { getSessionDisplayName } from '../../../hooks/useNavigationSessions'; import { updateSessionName } from '../../../api'; import type { Session } from '../../../api'; import type { SessionStatus } from './types'; import { defineMessages, useIntl } from '../../../i18n'; const i18n = defineMessages({ startNewChat: { id: 'sessionsList.startNewChat', defaultMessage: 'Start New Chat', }, untitledSession: { id: 'sessionsList.untitledSession', defaultMessage: 'Untitled session', }, showAll: { id: 'sessionsList.showAll', defaultMessage: 'Show All', }, }); interface SessionsListProps { sessions: Session[]; activeSessionId?: string; isExpanded: boolean; getSessionStatus: (sessionId: string) => SessionStatus | undefined; clearUnread: (sessionId: string) => void; onSessionClick: (sessionId: string) => void; onSessionRenamed?: () => void; onNewChat?: () => void; onShowAll?: () => void; } export const SessionsList: React.FC = ({ sessions, activeSessionId, isExpanded, getSessionStatus, clearUnread, onSessionClick, onSessionRenamed, onNewChat, onShowAll, }) => { const intl = useIntl(); const [editingSessionId, setEditingSessionId] = useState(null); const handleSaveSessionName = useCallback( async (sessionId: string, newName: string) => { await updateSessionName({ path: { session_id: sessionId }, body: { name: newName }, }); onSessionRenamed?.(); }, [onSessionRenamed] ); return ( {isExpanded && (

{/* New Chat button as first item */} {onNewChat && (

{intl.formatMessage(i18n.startNewChat)}

)} {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; const isEditing = editingSessionId === session.id; return (

{ if (!isEditing) { clearUnread(session.id); onSessionClick(session.id); } }} className={cn( 'w-full text-left py-1.5 px-2 text-xs rounded-md', 'hover:bg-background-tertiary transition-colors', 'flex items-center gap-2 cursor-pointer', isActiveSession && 'bg-background-tertiary' )} >

{session.recipe ? ( ) : ( )} handleSaveSessionName(session.id, newName)} placeholder={intl.formatMessage(i18n.untitledSession)} disabled={isStreaming} singleClickEdit={false} className="truncate text-text-primary flex-1 !px-0 !py-0 hover:bg-transparent" editClassName="!text-xs" onEditStart={() => setEditingSessionId(session.id)} onEditEnd={() => setEditingSessionId(null)} />

); })} {/* Show All button at bottom */} {onShowAll && sessions.length > 0 && (

{intl.formatMessage(i18n.showAll)}

)}

)} ); };