AI Chat History

1"use client";
2 
3import {
4  Archive,
5  Loader2,
6  MessageSquare,
7  MoreVertical,
8  Pencil,
9  Plus,
10  Search,
11  Trash2,
12} from "lucide-react";
13import { useCallback, useEffect, useMemo, useRef, useState } from "react";
14import { cn } from "@/lib/utils";
15import {
16  AlertDialog,
17  AlertDialogAction,
18  AlertDialogCancel,
19  AlertDialogContent,
20  AlertDialogDescription,
21  AlertDialogFooter,
22  AlertDialogHeader,
23  AlertDialogTitle,
24} from "@/registry/new-york/ui/alert-dialog";
25import { Button } from "@/registry/new-york/ui/button";
26import {
27  Card,
28  CardContent,
29  CardDescription,
30  CardHeader,
31  CardTitle,
32} from "@/registry/new-york/ui/card";
33import {
34  DropdownMenu,
35  DropdownMenuContent,
36  DropdownMenuItem,
37  DropdownMenuSeparator,
38  DropdownMenuTrigger,
39} from "@/registry/new-york/ui/dropdown-menu";
40import {
41  InputGroup,
42  InputGroupAddon,
43  InputGroupInput,
44} from "@/registry/new-york/ui/input-group";
45import { Separator } from "@/registry/new-york/ui/separator";
46 
47export interface Conversation {
48  id: string;
49  title: string;
50  lastMessage?: string;
51  lastMessageAt?: Date;
52  messageCount?: number;
53  isArchived?: boolean;
54  isActive?: boolean;
55}
56 
57export interface AIChatHistoryProps {
58  conversations: Conversation[];
59  activeConversationId?: string;
60  onSelect?: (conversationId: string) => void;
61  onNewConversation?: () => void;
62  onRename?: (conversationId: string, newTitle: string) => Promise<void>;
63  onDelete?: (conversationId: string) => Promise<void>;
64  onArchive?: (conversationId: string) => Promise<void>;
65  onUnarchive?: (conversationId: string) => Promise<void>;
66  className?: string;
67  showSearch?: boolean;
68  showNewButton?: boolean;
69}
70 
71function formatDate(date: Date): string {
72  const now = new Date();
73  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
74  const yesterday = new Date(today);
75  yesterday.setDate(yesterday.getDate() - 1);
76  const thisWeek = new Date(today);
77  thisWeek.setDate(thisWeek.getDate() - 7);
78 
79  const dateOnly = new Date(
80    date.getFullYear(),
81    date.getMonth(),
82    date.getDate()
83  );
84 
85  if (dateOnly.getTime() === today.getTime()) {
86    return "Today";
87  }
88  if (dateOnly.getTime() === yesterday.getTime()) {
89    return "Yesterday";
90  }
91  if (dateOnly.getTime() >= thisWeek.getTime()) {
92    return "This Week";
93  }
94 
95  const month = date.toLocaleString("en-US", { month: "short" });
96  const day = date.getDate();
97  const year = date.getFullYear();
98  const currentYear = now.getFullYear();
99 
100// … truncated