"use client"; import { Archive, MessageSquare, MoreVertical, Pencil, Plus, Search, Trash2, X, } from "lucide-react"; import { useMemo, useState } from "react"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { InputGroup, InputGroupAddon, InputGroupInput, } from "@/components/ui/input-group"; import { Separator } from "@/components/ui/separator"; import { cn } from "@/lib/utils"; 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; } 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 filteredConversations = useMemo(() => { if (!searchQuery.trim()) return conversations; const query = searchQuery.toLowerCase(); return conversations.filter( (conv) => conv.title.toLowerCase().includes(query) || conv.lastMessage?.toLowerCase().includes(query) ); }, [conversations, searchQuery]); const groupedConversations = useMemo( () => groupConversationsByDate(filteredConversations), [filteredConversations] ); const handleRenameStart = (conversation: Conversation) => { setEditingId(conversation.id); setEditValue(conversation.title); }; const handleRenameSubmit = async (conversationId: string) => { if (!(onRename && editValue.trim())) { setEditingId(null); return; } await onRename(conversationId, editValue.trim()); setEditingId(null); }; const handleRenameCancel = () => { setEditingId(null); setEditValue(""); }; return (

Conversations {conversations.length} conversation {conversations.length !== 1 ? "s" : ""}

{showNewButton && onNewConversation && ( )}

{showSearch && ( setSearchQuery(e.target.value)} placeholder="Search conversations…" type="search" value={searchQuery} /> {searchQuery && ( )} )}

{filteredConversations.length === 0 ? (

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

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

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

) : (

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

{group.label}

{group.conversations.map((conversation, idx) => { const isActive = conversation.id === activeConversationId; const isEditing = editingId === conversation.id; return (

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

); })}

{groupIdx < groupedConversations.length - 1 && ( )}

))}

)} ); }

{group.label}

{conversation.title}

Today

React Component Patterns

TypeScript Best Practices

Deploying to Vercel

Example Usage