@droppii-org/chat-sdk/dist/components/conversation/ConversationBySessionItem.js

Droppii React Chat SDK

"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useTranslation } from "react-i18next";
import useConversationStore from "../../store/conversation";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { Avatar, Badge } from "antd";
import { useChatContext } from "../../context/ChatContext";
import { useConversationDisplayData } from "../../hooks/conversation/useConversation";
import { formatTimestamp, parseLatestMessage } from "../../utils/common";
const ConversationBySessionItem = ({ sessionItem, }) => {
    var _a;
    const { t } = useTranslation();
    const { user } = useChatContext();
    const isSelected = useConversationStore((state) => { var _a; return state.selectedConversationId === ((_a = sessionItem === null || sessionItem === void 0 ? void 0 : sessionItem.conversation) === null || _a === void 0 ? void 0 : _a.conversationID); });
    const conversation = sessionItem === null || sessionItem === void 0 ? void 0 : sessionItem.conversation;
    const router = useRouter();
    const pathname = usePathname();
    const searchParams = useSearchParams();
    const setConversationData = useConversationStore((state) => state.setConversationData);
    const setSelectedConversationId = useConversationStore((state) => state.setSelectedConversationId);
    const handleConversationClick = (conversation) => {
        setConversationData(conversation);
        const newSearchParams = new URLSearchParams(searchParams);
        newSearchParams.set("threadId", conversation.conversationID);
        router.push(`${pathname}?${newSearchParams.toString()}`);
        setSelectedConversationId(conversation.conversationID);
    };
    const { avatar, displayName = "" } = useConversationDisplayData(conversation || null);
    if (!conversation)
        return null;
    return (_jsxs("div", { onClick: () => handleConversationClick(conversation), className: `relative p-3 border-b border-gray-100 hover:bg-gray-100 cursor-pointer transition-colors ${isSelected ? "bg-blue-50" : "bg-white"}`, children: [isSelected && (_jsx("div", { className: "absolute left-0 top-0 bottom-0 w-1 bg-blue-500" })), _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "relative flex-shrink-0", children: _jsx(Badge, { dot: true, status: "success", offset: [-2, 36], children: _jsx(Avatar, { size: 48, src: avatar, children: ((_a = displayName === null || displayName === void 0 ? void 0 : displayName.charAt) === null || _a === void 0 ? void 0 : _a.call(displayName, 0)) || "A" }) }) }), _jsx("div", { className: "flex-1 min-w-0", children: _jsxs("div", { className: "flex items-start justify-between", children: [_jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("h3", { className: "font-semibold text-gray-900 text-sm truncate", children: displayName }), _jsx("p", { className: "text-xs text-gray-500 truncate mt-0.5", children: parseLatestMessage(conversation.latestMsg, user === null || user === void 0 ? void 0 : user.userID, t) })] }), _jsxs("div", { className: "flex flex-col items-end gap-1 ml-2", children: [_jsx("span", { className: "text-xs text-gray-400", children: formatTimestamp(conversation.latestMsgSendTime, {
                                                hasTime: true,
                                            }) }), _jsx("div", { className: "flex items-center gap-1", children: conversation.unreadCount > 0 && (_jsx(Badge, { count: conversation.unreadCount })) })] })] }) })] })] }, conversation.conversationID));
};
export default ConversationBySessionItem;