Spaces:
Sleeping
Sleeping
File size: 2,219 Bytes
01d5a5d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
'use client';
import { DeleteOutlined } from '@ant-design/icons';
interface ChatSession {
id: string;
title: string;
lastMessage: string;
timestamp: string;
}
interface ChatHistoryProps {
sessions: ChatSession[];
activeSessionId: string | null;
onSessionClick: (sessionId: string) => void;
onNewChat: () => void;
onDeleteChat: (sessionId: string) => void;
}
export default function ChatHistory({
sessions,
activeSessionId,
onSessionClick,
onNewChat,
onDeleteChat
}: ChatHistoryProps) {
return (
<div className="w-64 bg-gray-50 border-r h-full flex flex-col">
<div className="p-4">
<button
className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
onClick={onNewChat}
>
<svg
className="h-5 w-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
clipRule="evenodd"
d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
fillRule="evenodd"
/>
</svg>
New Chat
</button>
</div>
<div className="flex-1 overflow-y-auto">
{sessions.map((session) => (
<button
key={session.id}
className={`w-full text-left p-4 border-b hover:bg-gray-100 transition-colors ${
activeSessionId === session.id ? 'bg-gray-100' : ''
}`}
onClick={() => onSessionClick(session.id)}
>
<div className="flex items-center">
<div className="text-sm font-medium truncate">{session.title}</div>
<div className="ml-auto text-gray-400 hover:text-gray-600 transition-colors">
<DeleteOutlined onClick={() => onDeleteChat(session.id)} />
</div>
</div>
<div className="text-xs text-gray-500 mt-1 truncate">{session.lastMessage}</div>
<div className="text-xs text-gray-400 mt-1">{session.timestamp}</div>
</button>
))}
</div>
</div>
);
}
|