'use client'; import { useMemo } from 'react'; import { useRouter } from 'next/navigation'; import { Box, Flex, Text, Button, VStack } from '@chakra-ui/react'; import { useChatStore } from '../_store/useChatStore'; import { useNewConversation } from '../_hooks/useNewConversation'; import { useConversationList } from '../_hooks/useConversationList'; import { TradeLockerSpinner } from './TradeLockerSpinner'; import type { ConversationSummary } from '../_types/chat'; function timeAgo(ts: number): string { const diff = Date.now() / 1000 - ts; if (diff < 60) return 'just now'; if (diff < 3600) return `${Math.floor(diff / 60)}m ago`; if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`; if (diff < 604800) return `${Math.floor(diff / 86400)}d ago`; return new Date(ts * 1000).toLocaleDateString(); } export function ConversationSidebar() { const router = useRouter(); const newConversation = useNewConversation(); const sidebarOpen = useChatStore((s) => s.sidebarOpen); const setSidebarOpen = useChatStore((s) => s.setSidebarOpen); const activeId = useChatStore((s) => s.conversationId); const messages = useChatStore((s) => s.messages); const selectedEnvironment = useChatStore((s) => s.selectedEnvironment); const { data: conversationList = [], isLoading: conversationListLoading } = useConversationList(); const effectiveList = useMemo((): ConversationSummary[] => { const inList = conversationList.some((c) => c.conversation_id === activeId); if (inList) return conversationList; const firstUserMsg = messages.find((m) => m.type === 'user'); if (!firstUserMsg) return conversationList; const now = Math.floor(Date.now() / 1000); return [{ conversation_id: activeId, title: firstUserMsg.content, environment: selectedEnvironment, created_at: now, updated_at: now }, ...conversationList]; }, [conversationList, activeId, messages, selectedEnvironment]); const handleSelect = (id: string) => { router.push(`${window.location.pathname}?conversation=${id}`); setSidebarOpen(false); }; return ( <> {/* Mobile backdrop */} {sidebarOpen && ( setSidebarOpen(false)} /> )} {/* Sidebar panel */} History {conversationListLoading && } {effectiveList.length === 0 && ( No conversations yet )} {effectiveList.map((conv) => { const isActive = conv.conversation_id === activeId; return ( handleSelect(conv.conversation_id)} > {conv.title || 'New conversation'} {timeAgo(conv.updated_at)} {conv.environment && ( {conv.environment} )} ); })} ); }