/* eslint-disable @typescript-eslint/no-explicit-any */ import { Button } from "@/src/elements/ui/button"; import { Input } from "@/src/elements/ui/input"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/src/elements/ui/select"; import { Tooltip, TooltipContent, TooltipTrigger } from "@/src/elements/ui/tooltip"; import { cn } from "@/src/lib/utils"; import { useGetRecentChatsQuery, useTogglePinChatMutation } from "@/src/redux/api/chatApi"; import { useGetWabaPhoneNumbersQuery } from "@/src/redux/api/whatsappApi"; import { useAppDispatch, useAppSelector } from "@/src/redux/hooks"; import { rehydrateChat, selectChat, selSelectPhoneNumber, setLeftSidebartoggle } from "@/src/redux/reducers/messenger/chatSlice"; import { RootState } from "@/src/redux/store"; import ConfirmModal from "@/src/shared/ConfirmModal"; import { RecentChatResponseItem } from "@/src/types/components/chat"; import { useChatSelection } from "@/src/utils/hooks/useChatSelection"; import useDebounce from "@/src/utils/hooks/useDebounce"; import { useNotifications } from "@/src/utils/hooks/useNotifications"; import { maskSensitiveData } from "@/src/utils/masking"; import { BellRing, CheckSquare, Filter, ListChecks, Search, Trash2, X } from "lucide-react"; import { useSearchParams } from "next/navigation"; import { useEffect, useMemo, useState } from "react"; import ChatFilterModal from "./ChatFilterModal"; import ChatSidebarItem from "./ChatSidebarItem"; import { ChatSidebarSkeleton } from "./ChatSkeleton"; import { NotificationSettingsModal } from "./NotificationSettingsModal"; const ChatSidebar = () => { const dispatch = useAppDispatch(); const { selectedPhoneNumberId, selectedChat, isRehydrated, isMobileScreen } = useAppSelector((state: RootState) => state.chat); const { app_name } = useAppSelector((state: RootState) => state.setting); const { user } = useAppSelector((state) => state.auth); const { is_demo_mode } = useAppSelector((state) => state.setting); const { selectedWorkspace } = useAppSelector((state) => state.workspace); const selectedWabaId = selectedWorkspace?.waba_id; const isAgent = user?.role === "agent"; const selectedChatId = selectedChat?.contact.id; const [searchQuery, setSearchQuery] = useState(""); const debouncedSearch = useDebounce(searchQuery, 500); const [activeTab, setActiveTab] = useState("all"); const { permission } = useNotifications(); const searchParams = useSearchParams(); const contactIdFromQuery = searchParams.get("contact_id"); const { userSetting } = useAppSelector((state) => state.setting); const userSettingData = userSetting?.data; const [isFilterModalOpen, setIsFilterModalOpen] = useState(false); const [filters, setFilters] = useState<{ startDate?: string; endDate?: string; tagLabel?: string; hasNotes?: boolean; agentId?: string }>({}); const activeFilterCount = Object.keys(filters).length; const { data: phoneNumbersData, isLoading: isLoadingPhones } = useGetWabaPhoneNumbersQuery(selectedWabaId || "", { skip: !selectedWabaId }); const phoneNumbers = useMemo(() => { const list = (phoneNumbersData as any)?.data || []; return list; }, [phoneNumbersData]); useEffect(() => { dispatch(rehydrateChat()); }, [dispatch]); useEffect(() => { if (isRehydrated && phoneNumbers.length > 0) { const isCurrentlySelectedValid = selectedPhoneNumberId && phoneNumbers.find((p: any) => String(p.id) === String(selectedPhoneNumberId)); if (!isCurrentlySelectedValid) { const firstId = String(phoneNumbers[0].id); dispatch(selSelectPhoneNumber(firstId)); } } }, [phoneNumbers, selectedPhoneNumberId, dispatch, isRehydrated]); const { data: chatsData, isLoading } = useGetRecentChatsQuery( { search: debouncedSearch || undefined, whatsapp_phone_number_id: selectedPhoneNumberId || undefined, start_date: filters.startDate, end_date: filters.endDate, tags: filters.tagLabel, has_notes: filters.hasNotes, agent_id: filters.agentId, last_message_read: activeTab === "unread" ? false : undefined, is_assigned: activeTab === "assigned" ? true : activeTab === "unassigned" ? false : undefined, }, { skip: !selectedPhoneNumberId, } ); const [togglePinChat] = useTogglePinChatMutation(); const sortedChats = useMemo(() => { if (!chatsData?.data) return []; return [...chatsData.data].sort((a, b) => { if (a.is_pinned && !b.is_pinned) return -1; if (!a.is_pinned && b.is_pinned) return 1; const dateA = new Date(a.lastMessage.createdAt).getTime(); const dateB = new Date(b.lastMessage.createdAt).getTime(); return dateB - dateA; }); }, [chatsData]); useEffect(() => { if (contactIdFromQuery && sortedChats.length > 0 && isRehydrated) { const targetChat = sortedChats.find((c) => c.contact.id === contactIdFromQuery); if (targetChat && selectedChatId !== contactIdFromQuery) { handleSelectChat(targetChat); } } // eslint-disable-next-line react-hooks/exhaustive-deps }, [contactIdFromQuery, sortedChats, isRehydrated]); const handleTogglePin = async (e: React.MouseEvent, chat: RecentChatResponseItem) => { e.stopPropagation(); try { await togglePinChat({ contact_id: chat.contact.id, phone_number: chat.contact.number, }).unwrap(); } catch (error) { console.error("Failed to toggle pin chat:", error); } }; const handleSelectChat = (chat: RecentChatResponseItem) => { dispatch(selectChat(chat)); if (window.innerWidth <= 991) { dispatch( setLeftSidebartoggle({ isMobile: true, forceState: false, }) ); } }; const handlePhoneNumberChange = (value: string) => { dispatch(selSelectPhoneNumber(value)); }; const handleSidebar = () => { dispatch( setLeftSidebartoggle({ isMobile: window.innerWidth <= 991, }) ); }; const { isSelectionMode, selectedContactIds, isDeleteModalOpen, isDeleting, setIsDeleteModalOpen, handleToggleSelectionMode, handleToggleChatSelection, handleSelectAll, handleDeleteChats } = useChatSelection({ workspaceId: selectedWorkspace?._id, sortedChats, }); const [isNotificationModalOpen, setIsNotificationModalOpen] = useState(false); return (

{isSelectionMode ? `${selectedContactIds.length} Selected` : "Chats"}

{isSelectionMode ? (

Select All

Delete Selected

Cancel
) : ( <>

Select Chats

Notification Settings

 )} {isMobileScreen && ( )}
{!isRehydrated ? (
) : ( )}
setSearchQuery(e.target.value)} />
{[ { id: "all", label: "All" }, { id: "unread", label: "Unread" }, { id: "active", label: "Active" }, { id: "assigned", label: "Assigned" }, { id: "unassigned", label: "Unassigned" }, ].map((tab) => ( ))}
{isLoading ? ( ) : sortedChats.length === 0 ? (

No chats found

) : ( sortedChats.map((chat: RecentChatResponseItem, index: number) => ) )}
setIsFilterModalOpen(false)} onApply={setFilters} initialFilters={filters} /> setIsNotificationModalOpen(false)} /> setIsDeleteModalOpen(false)} onConfirm={handleDeleteChats} isLoading={isDeleting} title={selectedContactIds.length > 1 ? `Delete ${selectedContactIds.length} Chats?` : "Delete Chat?"} subtitle={selectedContactIds.length > 1 ? `Are you sure you want to delete these ${selectedContactIds.length} conversations? This action cannot be undone.` : "Are you sure you want to delete this conversation? This action cannot be undone."} confirmText="Delete" variant="danger" />
); }; export default ChatSidebar;