"use client"; import { Archive, Loader2, MessageSquare, MoreVertical, Pencil, Plus, Search, Trash2, } from "lucide-react"; import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { cn } from "@/lib/utils"; import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from "@/registry/new-york/ui/alert-dialog"; import { Button } from "@/registry/new-york/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/registry/new-york/ui/card"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/registry/new-york/ui/dropdown-menu"; import { InputGroup, InputGroupAddon, InputGroupInput, } from "@/registry/new-york/ui/input-group"; import { Separator } from "@/registry/new-york/ui/separator"; export interface Conversation { id: string; title: string; lastMessage?: string; lastMessageAt?: Date; messageCount?: number; isArchived?: boolean; isActive?: boolean; } export interface AIChatHistoryProps { conversations: Conversation[]; activeConversationId?: string; onSelect?: (conversationId: string) => void; onNewConversation?: () => void; onRename?: (conversationId: string, newTitle: string) => Promise; onDelete?: (conversationId: string) => Promise; onArchive?: (conversationId: string) => Promise; onUnarchive?: (conversationId: string) => Promise; className?: string; showSearch?: boolean; showNewButton?: boolean; } function formatDate(date: Date): string { const now = new Date(); const today = new Date(now.getFullYear(), now.getMonth(), now.getDate()); const yesterday = new Date(today); yesterday.setDate(yesterday.getDate() - 1); const thisWeek = new Date(today); thisWeek.setDate(thisWeek.getDate() - 7); const dateOnly = new Date( date.getFullYear(), date.getMonth(), date.getDate() ); if (dateOnly.getTime() === today.getTime()) { return "Today"; } if (dateOnly.getTime() === yesterday.getTime()) { return "Yesterday"; } if (dateOnly.getTime() >= thisWeek.getTime()) { return "This Week"; } const month = date.toLocaleString("en-US", { month: "short" }); const day = date.getDate(); const year = date.getFullYear(); const currentYear = now.getFullYear(); if (year === currentYear) { return `${month} ${day}`; } return `${month} ${day}, ${year}`; } function groupConversationsByDate(conversations: Conversation[]): { label: string; conversations: Conversation[]; }[] { const groups: Record = {}; conversations.forEach((conv) => { if (!conv.lastMessageAt) { if (!groups["Older"]) { groups["Older"] = []; } groups["Older"].push(conv); return; } const label = formatDate(conv.lastMessageAt); if (!groups[label]) { groups[label] = []; } groups[label].push(conv); }); const orderedLabels = ["Today", "Yesterday", "This Week"]; const result: { label: string; conversations: Conversation[] }[] = []; orderedLabels.forEach((label) => { if (groups[label]) { result.push({ label, conversations: groups[label] }); delete groups[label]; } }); Object.keys(groups) .sort() .forEach((label) => { result.push({ label, conversations: groups[label] }); }); if (groups["Older"]) { result.push({ label: "Older", conversations: groups["Older"] }); } return result; } interface EmptyStateProps { searchQuery: string; showNewButton: boolean; onNewConversation?: () => void; } function EmptyState({ searchQuery, showNewButton, onNewConversation, }: EmptyStateProps) { return (

{searchQuery ? "No conversations found" : "No conversations"}

{searchQuery ? "Try a different search term" : "Start a new conversation to get started"}

{!searchQuery && showNewButton && onNewConversation && ( )}

); } interface ConversationHeaderProps { conversationsCount: number; showNewButton: boolean; onNewConversation?: () => void; } function ConversationHeader({ conversationsCount, showNewButton, onNewConversation, }: ConversationHeaderProps) { return (

Conversations {conversationsCount} conversation {conversationsCount !== 1 ? "s" : ""}

{showNewButton && onNewConversation && ( )}

); } interface ConversationSearchProps { value: string; onChange: (value: string) => void; placeholder?: string; } function ConversationSearch({ value, onChange, placeholder = "Search conversations…", }: ConversationSearchProps) { const inputRef = useRef(null); useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { if ( (e.metaKey || e.ctrlKey) && e.key === "k" && !e.shiftKey && document.activeElement !== inputRef.current ) { e.preventDefault(); inputRef.current?.focus(); } }; window.addEventListener("keydown", handleKeyDown); return () => window.removeEventListener("keydown", handleKeyDown); }, []); return ( onChange(e.target.value)} onKeyDown={(e) => { if (e.key === "Escape") { onChange(""); inputRef.current?.blur(); } }} placeholder={placeholder} ref={inputRef} type="search" value={value} /> ); } interface ConversationItemProps { conversation: Conversation; isActive: boolean; isEditing: boolean; editValue: string; onSelect: () => void; onRenameStart: () => void; onRenameSubmit: () => void; onRenameCancel: () => void; onEditValueChange: (value: string) => void; onRename?: (conversationId: string, newTitle: string) => Promise; onDelete?: (conversationId: string) => Promise; onArchive?: (conversationId: string) => Promise; onUnarchive?: (conversationId: string) => Promise; isLoading?: boolean; } function ConversationItem({ conversation, isActive, isEditing, editValue, onSelect, onRenameStart, onRenameSubmit, onRenameCancel, onEditValueChange, onRename, onDelete, onArchive, onUnarchive, isLoading = false, }: ConversationItemProps) { const [showDeleteDialog, setShowDeleteDialog] = useState(false); const [isDeleting, setIsDeleting] = useState(false); const inputRef = useRef(null); useEffect(() => { if (isEditing && inputRef.current) { inputRef.current.focus(); inputRef.current.select(); } }, [isEditing]); const handleDelete = useCallback(async () => { if (!onDelete) return; setIsDeleting(true); try { await onDelete(conversation.id); setShowDeleteDialog(false); } catch (error) { console.error("Failed to delete conversation:", error); } finally { setIsDeleting(false); } }, [conversation.id, onDelete]); return ( <>

{!isEditing && (

{onRename && ( Rename )} {conversation.isArchived ? onUnarchive && ( onUnarchive(conversation.id)} > Unarchive ) : onArchive && ( onArchive(conversation.id)} > Archive )} {onDelete && ( <> setShowDeleteDialog(true)} variant="destructive" > Delete )}

)}

Delete conversation? Are you sure you want to delete "{conversation.title}"? This action cannot be undone. Cancel {isDeleting ? ( <> Deleting… ) : ( "Delete" )} ); } interface ConversationGroupProps { label: string; conversations: Conversation[]; activeConversationId?: string; editingId: string | null; editValue: string; onSelect: (conversationId: string) => void; onRenameStart: (conversation: Conversation) => void; onRenameSubmit: (conversationId: string) => void; onRenameCancel: () => void; onEditValueChange: (value: string) => void; onRename?: (conversationId: string, newTitle: string) => Promise; onDelete?: (conversationId: string) => Promise; onArchive?: (conversationId: string) => Promise; onUnarchive?: (conversationId: string) => Promise; isLoading?: Record; } function ConversationGroup({ label, conversations, activeConversationId, editingId, editValue, onSelect, onRenameStart, onRenameSubmit, onRenameCancel, onEditValueChange, onRename, onDelete, onArchive, onUnarchive, isLoading = {}, }: ConversationGroupProps) { return (

{label}

{conversations.map((conversation) => { const isActive = conversation.id === activeConversationId; const isEditing = editingId === conversation.id; return ( onRenameStart(conversation)} onRenameSubmit={() => onRenameSubmit(conversation.id)} onSelect={() => onSelect(conversation.id)} onUnarchive={onUnarchive} /> ); })}

); } export default function AIChatHistory({ conversations, activeConversationId, onSelect, onNewConversation, onRename, onDelete, onArchive, onUnarchive, className, showSearch = true, showNewButton = true, }: AIChatHistoryProps) { const [searchQuery, setSearchQuery] = useState(""); const [editingId, setEditingId] = useState(null); const [editValue, setEditValue] = useState(""); const [loadingStates, setLoadingStates] = useState>( {} ); const containerRef = useRef(null); const filteredConversations = useMemo(() => { if (!searchQuery.trim()) return conversations; const query = searchQuery.toLowerCase().trim(); return conversations.filter( (conv) => conv.title.toLowerCase().includes(query) || conv.lastMessage?.toLowerCase().includes(query) ); }, [conversations, searchQuery]); const groupedConversations = useMemo( () => groupConversationsByDate(filteredConversations), [filteredConversations] ); const handleRenameStart = useCallback((conversation: Conversation) => { setEditingId(conversation.id); setEditValue(conversation.title); }, []); const handleRenameSubmit = useCallback( async (conversationId: string) => { if (!(onRename && editValue.trim())) { setEditingId(null); return; } const trimmedValue = editValue.trim(); if ( trimmedValue === conversations.find((c) => c.id === conversationId)?.title ) { setEditingId(null); return; } setLoadingStates((prev) => ({ ...prev, [conversationId]: true })); try { await onRename(conversationId, trimmedValue); setEditingId(null); } catch (error) { console.error("Failed to rename conversation:", error); } finally { setLoadingStates((prev) => { const next = { ...prev }; delete next[conversationId]; return next; }); } }, [onRename, editValue, conversations] ); const handleRenameCancel = useCallback(() => { setEditingId(null); setEditValue(""); }, []); useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { if ( e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement ) { return; } if (e.key === "ArrowDown" || e.key === "ArrowUp") { e.preventDefault(); const items = containerRef.current?.querySelectorAll( '[role="listitem"] button' ); if (!items || items.length === 0) return; const currentIndex = Array.from(items).findIndex( (item) => item === document.activeElement ); const nextIndex = e.key === "ArrowDown" ? (currentIndex + 1) % items.length : currentIndex === -1 ? items.length - 1 : (currentIndex - 1 + items.length) % items.length; items[nextIndex]?.focus(); } }; window.addEventListener("keydown", handleKeyDown); return () => window.removeEventListener("keydown", handleKeyDown); }, []); return (

{showSearch && ( )}

{filteredConversations.length === 0 ? ( ) : (

{groupedConversations.map((group, groupIdx) => (

{})} onUnarchive={onUnarchive} /> {groupIdx < groupedConversations.length - 1 && ( )}

))}

)} ); }

Nov 18, 2025

React Component Patterns

TypeScript Best Practices

Deploying to Vercel

Nov 18, 2025

React Component Patterns

TypeScript Best Practices

Deploying to Vercel