@droppii-org/chat-sdk
Version:
Droppii React Chat SDK
96 lines (95 loc) • 5.92 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useEffect, useRef } from "react";
import { useSearchParams } from "next/navigation";
import { Input, Empty, Drawer, Button, Spin } from "antd";
import { Icon } from "../icon";
import useConversationStore from "../../store/conversation";
import { useTranslation } from "react-i18next";
import { useBoolean, useDebounce } from "ahooks";
import SearchConversation from "../searchConversation";
import useSessionStore from "../../store/session";
import InfiniteScroll from "react-infinite-scroll-component";
import ConversationBySessionItem from "./ConversationBySessionItem";
import { useGetSession } from "../../hooks/session/useGetSession";
import { DChatSDK } from "../../constants/sdk";
import emitter from "../../utils/events";
const DeskConversationList = () => {
var _a;
const searchInputRef = useRef(null);
const { t } = useTranslation();
const [search, setSearch] = useState("");
const [showSearch, { setTrue: setShowSearchTrue, setFalse: setShowSearchFalse },] = useBoolean(false);
const searchParams = useSearchParams();
const setConversationData = useConversationStore((state) => state.setConversationData);
const setSelectedConversationId = useConversationStore((state) => state.setSelectedConversationId);
const conversationList = useConversationStore((state) => state.conversationList);
const updateConversationList = useConversationStore((state) => state.updateConversationList);
const filterSummary = useSessionStore((state) => state.filterSummary);
const { dataFlatten: sessions, hasNextPage, fetchNextPage, refetch, } = useGetSession({
filter: filterSummary,
});
const debouncedSearch = useDebounce(search, { wait: 500 });
const onCloseSearch = () => {
setSearch("");
setShowSearchFalse();
setTimeout(() => {
var _a;
(_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
}, 500);
};
useEffect(() => {
if (showSearch) {
setTimeout(() => {
var _a;
(_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
}, 100);
}
}, [showSearch]);
useEffect(() => {
const threadId = searchParams.get("threadId");
if (threadId) {
setSelectedConversationId(threadId);
const selectedConversation = conversationList.find((conv) => conv.conversationID === threadId);
if (selectedConversation) {
setConversationData(selectedConversation);
}
else {
DChatSDK.getMultipleConversation([threadId]).then((res) => {
if (res.data.length > 0) {
setConversationData(res.data[0]);
updateConversationList(res.data, "filter");
}
});
}
}
}, [searchParams, conversationList]);
useEffect(() => {
emitter.on("UPDATE_SESSION", (sessionUpdated) => {
if (sessionUpdated.status !== filterSummary.status ||
sessionUpdated.tag !== filterSummary.tag) {
refetch();
}
});
return () => {
emitter.off("UPDATE_SESSION", () => {
refetch();
});
};
}, [filterSummary]);
return (_jsxs("div", { className: `flex flex-col h-full bg-white border-r border-gray-200 w-[320px]`, children: [_jsx("div", { className: "p-3 border-b border-gray-100", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { ref: searchInputRef, placeholder: t("search"), prefix: _jsx(Icon, { icon: "search-o", size: 18, className: "text-gray-400" }), onChange: (e) => {
if (!showSearch && e.target.value) {
setShowSearchTrue();
}
setSearch(e.target.value);
}, className: "rounded-lg text-sm flex-1 h-[36px]", size: "large", allowClear: true, onClick: setShowSearchTrue, value: search, autoFocus: false, onClear: onCloseSearch }), showSearch && (_jsx(Button, { onClick: onCloseSearch, variant: "outlined", className: "p-0 w-[36px] h-[36px] text-gray-500", children: _jsx(Icon, { icon: "close-b", size: 22 }) }))] }) }), _jsxs("div", { id: "scrollableConversationsDiv", style: {
height: "100%",
overflow: showSearch ? "hidden" : "auto",
position: "relative",
}, children: [_jsx(InfiniteScroll, { dataLength: (sessions === null || sessions === void 0 ? void 0 : sessions.length) || 0, next: fetchNextPage, hasMore: hasNextPage, loader: _jsx("div", { className: "flex items-center justify-center py-2", children: _jsx(Spin, {}) }), scrollableTarget: "scrollableConversationsDiv", children: (sessions === null || sessions === void 0 ? void 0 : sessions.length) === 0 ? (_jsx("div", { className: "flex items-center justify-center py-12", children: _jsx(Empty, { image: _jsx(Icon, { icon: "chat-square-b", size: 80, className: "text-gray-300" }), description: t("no_conversation") }) })) : ((_a = sessions === null || sessions === void 0 ? void 0 : sessions.map) === null || _a === void 0 ? void 0 : _a.call(sessions, (session) => (_jsx(ConversationBySessionItem, { sessionItem: session }, session.conversationId)))) }), _jsx(Drawer, { open: showSearch, mask: false, closeIcon: false, styles: {
body: {
padding: 0,
},
}, getContainer: false, width: "100%", children: _jsx(SearchConversation, { searchTerm: debouncedSearch }) })] })] }));
};
export default DeskConversationList;