@droppii-org/chat-sdk
Version:
Droppii React Chat SDK
129 lines (128 loc) • 8.76 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useBoolean } from "ahooks";
import { Button, Layout, Menu } from "antd";
import { useEffect, useMemo } from "react";
import { useTranslation } from "react-i18next";
import { Icon } from "../icon";
import { useGetSessionSummary } from "../../hooks/session/useGetSessionSummary";
import useSessionStore from "../../store/session";
import clsx from "clsx";
import { SessionStatus, SessionTag } from "../../types/chat";
import emitter from "../../utils/events";
const { Sider } = Layout;
const DeskAssignedSession = () => {
const { t } = useTranslation();
const [collapsed, { toggle }] = useBoolean(false);
const setFilterSummary = useSessionStore((state) => state.setFilterSummary);
const { data: sessionSummary, refetch } = useGetSessionSummary();
const menuItems = useMemo(() => {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
return [
{
label: t("active_sessions"),
key: "ACTIVE_SESSIONS",
icon: _jsx(Icon, { icon: "chat-dot-o", size: 20 }),
children: [
{
label: t("unassigned"),
key: SessionStatus.UNASSIGNED,
icon: (_jsx(Icon, { icon: "user-del-o", size: 18, className: "!text-amber-500" })),
onClick: () => {
setFilterSummary({
status: SessionStatus.UNASSIGNED,
tag: undefined,
});
},
itemIcon: !collapsed && (_jsx("span", { className: "text-xs text-gray-500 ", children: ((_b = (_a = sessionSummary === null || sessionSummary === void 0 ? void 0 : sessionSummary.sessionStatuses) === null || _a === void 0 ? void 0 : _a.find((s) => s.type === SessionStatus.UNASSIGNED)) === null || _b === void 0 ? void 0 : _b.count) || "" })),
},
{
label: t("slow_processing"),
key: SessionTag.SLOW_PROCESSING,
icon: (_jsx(Icon, { icon: "warning-square-o", size: 18, className: "!text-red-500" })),
onClick: () => {
setFilterSummary({
status: undefined,
tag: SessionTag.SLOW_PROCESSING,
});
},
itemIcon: !collapsed && (_jsx("span", { className: "text-xs text-gray-500", children: ((_d = (_c = sessionSummary === null || sessionSummary === void 0 ? void 0 : sessionSummary.tagCounts) === null || _c === void 0 ? void 0 : _c.find((s) => s.type === SessionTag.SLOW_PROCESSING)) === null || _d === void 0 ? void 0 : _d.count) || "" })),
},
{
label: t("waiting_process"),
key: SessionStatus.WAITING_PROCESS,
icon: (_jsx(Icon, { icon: "time-circle-o", size: 18, className: "!text-orange-400" })),
onClick: () => {
setFilterSummary({
status: SessionStatus.WAITING_PROCESS,
tag: undefined,
});
},
itemIcon: !collapsed && (_jsx("span", { className: "text-xs text-gray-500", children: ((_f = (_e = sessionSummary === null || sessionSummary === void 0 ? void 0 : sessionSummary.sessionStatuses) === null || _e === void 0 ? void 0 : _e.find((s) => s.type === SessionStatus.WAITING_PROCESS)) === null || _f === void 0 ? void 0 : _f.count) || "" })),
},
{
label: t("awaiting_reply"),
key: SessionTag.AWAITING_REPLY,
icon: (_jsx(Icon, { icon: "arrow-reply-o", size: 18, className: "!text-purple-500" })),
onClick: () => {
setFilterSummary({
status: undefined,
tag: SessionTag.AWAITING_REPLY,
});
},
itemIcon: !collapsed && (_jsx("span", { className: "text-xs text-gray-500", children: ((_h = (_g = sessionSummary === null || sessionSummary === void 0 ? void 0 : sessionSummary.tagCounts) === null || _g === void 0 ? void 0 : _g.find((s) => s.type === SessionTag.AWAITING_REPLY)) === null || _h === void 0 ? void 0 : _h.count) || "" })),
},
{
label: t("in_process"),
key: SessionStatus.IN_PROCESS,
icon: _jsx(Icon, { icon: "play-circle-o", size: 18 }),
onClick: () => {
setFilterSummary({
status: SessionStatus.IN_PROCESS,
tag: undefined,
});
},
itemIcon: !collapsed && (_jsx("span", { className: "text-xs text-gray-500", children: ((_k = (_j = sessionSummary === null || sessionSummary === void 0 ? void 0 : sessionSummary.sessionStatuses) === null || _j === void 0 ? void 0 : _j.find((s) => s.type === SessionStatus.IN_PROCESS)) === null || _k === void 0 ? void 0 : _k.count) || "" })),
},
{
label: t("temporarily_paused"),
key: SessionTag.TEMPORARILY_PAUSED,
icon: _jsx(Icon, { icon: "pause-o", size: 18 }),
onClick: () => {
setFilterSummary({
status: undefined,
tag: SessionTag.TEMPORARILY_PAUSED,
});
},
itemIcon: !collapsed && (_jsx("span", { className: "text-xs text-gray-500", children: ((_m = (_l = sessionSummary === null || sessionSummary === void 0 ? void 0 : sessionSummary.tagCounts) === null || _l === void 0 ? void 0 : _l.find((s) => s.type === SessionTag.TEMPORARILY_PAUSED)) === null || _m === void 0 ? void 0 : _m.count) || "" })),
},
],
itemIcon: !collapsed && (_jsx("span", { className: "text-xs text-gray-500", children: ((_p = (_o = sessionSummary === null || sessionSummary === void 0 ? void 0 : sessionSummary.sessionStatuses) === null || _o === void 0 ? void 0 : _o.find((s) => s.type === SessionStatus.IN_PROCESS)) === null || _p === void 0 ? void 0 : _p.count) || "" })),
},
{
label: t("closed_sessions"),
key: "CLOSED_SESSIONS",
icon: _jsx(Icon, { icon: "check-square-o", size: 20 }),
onClick: () => {
setFilterSummary({
status: SessionStatus.COMPLETED,
tag: undefined,
});
},
itemIcon: !collapsed && (_jsx("span", { className: "text-xs text-gray-500", children: (sessionSummary === null || sessionSummary === void 0 ? void 0 : sessionSummary.completedSessionCount) || "" })),
},
];
}, [sessionSummary, t, collapsed]);
useEffect(() => {
emitter.on("UPDATE_SESSION", () => {
refetch();
});
return () => {
emitter.off("UPDATE_SESSION", () => {
refetch();
});
};
}, []);
return (_jsxs(Sider, { collapsible: true, collapsed: collapsed, onCollapse: toggle, width: 220, className: "bg-white h-full border-r border-gray-200", trigger: null, children: [_jsxs("div", { className: clsx("flex items-center p-4 border-b", collapsed ? "justify-center" : "justify-between"), children: [!collapsed && (_jsx("span", { className: "text-md font-semibold flex-1 truncate", children: "Droppii Livechat" })), _jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", onClick: toggle, children: _jsx(Icon, { icon: collapsed ? "angle-right-o" : "angle-left-o", size: 22 }) })] }), _jsx(Menu, { defaultSelectedKeys: [SessionStatus.IN_PROCESS], defaultOpenKeys: ["ACTIVE_SESSIONS"], mode: "inline", items: menuItems, inlineIndent: 12, expandIcon: _jsx("span", { className: "text-xs text-gray-500", children: sessionSummary === null || sessionSummary === void 0 ? void 0 : sessionSummary.activeSessionCount }) })] }));
};
export default DeskAssignedSession;