65 lines
2.1 KiB
TypeScript
65 lines
2.1 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { MessageCircle } from 'lucide-react';
|
|
import type { NewWhatsChat, PresenceState } from '../types/inboxTypes';
|
|
import ChatListItem from './ChatListItem';
|
|
|
|
interface ChatListProps {
|
|
chats: NewWhatsChat[];
|
|
loading: boolean;
|
|
selectedChat: NewWhatsChat | null;
|
|
onSelectChat: (chat: NewWhatsChat) => void;
|
|
onMenuAction: (action: any, chat: NewWhatsChat) => void;
|
|
presenceByJid: Record<string, PresenceState>;
|
|
isFavoriteChat: (chat: NewWhatsChat) => boolean;
|
|
drafts?: Record<string, string>;
|
|
}
|
|
|
|
export default function ChatList({
|
|
chats,
|
|
loading,
|
|
selectedChat,
|
|
onSelectChat,
|
|
onMenuAction,
|
|
presenceByJid,
|
|
isFavoriteChat,
|
|
drafts = {},
|
|
}: ChatListProps) {
|
|
if (loading) {
|
|
return (
|
|
<div className="flex items-center justify-center h-40">
|
|
<div className="w-8 h-8 border-3 border-[#00a884] border-t-transparent rounded-full animate-spin"></div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (chats.length === 0) {
|
|
return (
|
|
<div className="flex flex-col items-center justify-center h-64 px-10 text-center">
|
|
<div className="w-16 h-16 bg-[#f0f2f5] rounded-full flex items-center justify-center mb-4">
|
|
<MessageCircle className="w-8 h-8 text-[#8696a0]" />
|
|
</div>
|
|
<p className="text-[#667781] text-sm font-normal">Nenhuma conversa encontrada</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex-1 overflow-y-auto bg-white custom-scrollbar">
|
|
{chats.map((chat) => (
|
|
<ChatListItem
|
|
key={`${chat.instance_name}-${chat.remote_jid}`}
|
|
chat={chat}
|
|
isActive={selectedChat?.id === chat.id}
|
|
onSelect={onSelectChat}
|
|
onMenuAction={onMenuAction}
|
|
presenceByJid={presenceByJid}
|
|
isFavorite={isFavoriteChat(chat)}
|
|
draft={drafts[chat.remote_jid]}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|