@droppii-org/chat-sdk 0.1.71 → 0.1.73

package/dist/src/components/session/DeskTeamInbox.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Icon } from "../../components/icon";
+import { useGetTeamSessionSummary } from "../../hooks/session/useGetTeamSessionSummary";
+import useSessionStore from "../../store/session";
+import emitter from "../../utils/events";
+import SessionFilterMenu from "./SessionFilterMenu";
+const TeamGroup = memo(({ team, isExpanded, isSelected, selectedFilter, onToggle, onFilterSelect, }) => (_jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between px-4 py-2 cursor-pointer hover:bg-gray-50", onClick: onToggle, children: [_jsx("span", { className: "text-sm font-semibold text-blue-500 truncate flex-1", children: team.teamName }), _jsx(Icon, { icon: isExpanded ? "angle-up-o" : "angle-down-o", size: 16, className: "text-gray-400 shrink-0" })] }), isExpanded && (_jsx(SessionFilterMenu, { summary: team.summary, isActive: isSelected, filterSummary: selectedFilter, onFilterSelect: onFilterSelect, includeUnassigned: true, activeCount: team.summary.activeSessionCount }))] })));
+const DeskTeamInbox = () => {
+    const { t } = useTranslation();
+    const { data: teamSummaries, refetch } = useGetTeamSessionSummary();
+    const filterSummary = useSessionStore((s) => s.filterSummary);
+    const setFilterSummary = useSessionStore((s) => s.setFilterSummary);
+    const [expandedTeamIds, setExpandedTeamIds] = useState([]);
+    const initializedRef = useRef(false);
+    useEffect(() => {
+        if ((teamSummaries === null || teamSummaries === void 0 ? void 0 : teamSummaries.length) && !initializedRef.current) {
+            setExpandedTeamIds([teamSummaries[0].teamId]);
+            initializedRef.current = true;
+        }
+    }, [teamSummaries]);
+    useEffect(() => {
+        const handler = () => refetch();
+        emitter.on("UPDATE_SESSION", handler);
+        return () => {
+            emitter.off("UPDATE_SESSION", handler);
+        };
+    }, [refetch]);
+    const toggleTeam = useCallback((teamId) => {
+        setExpandedTeamIds((prev) => prev.includes(teamId)
+            ? prev.filter((id) => id !== teamId)
+            : [...prev, teamId]);
+    }, []);
+    const toggleHandlers = useMemo(() => {
+        if (!teamSummaries)
+            return {};
+        return Object.fromEntries(teamSummaries.map((team) => [
+            team.teamId,
+            () => toggleTeam(team.teamId),
+        ]));
+    }, [teamSummaries, toggleTeam]);
+    const filterHandlers = useMemo(() => {
+        if (!teamSummaries)
+            return {};
+        return Object.fromEntries(teamSummaries.map((team) => [
+            team.teamId,
+            (filter) => setFilterSummary(Object.assign(Object.assign({}, filter), { teamId: team.teamId })),
+        ]));
+    }, [teamSummaries, setFilterSummary]);
+    if (!(teamSummaries === null || teamSummaries === void 0 ? void 0 : teamSummaries.length))
+        return null;
+    return (_jsxs("div", { children: [_jsx("div", { className: "px-4 pt-4 pb-2 text-xs font-semibold text-gray-400 tracking-wider", children: t("team_messages") }), teamSummaries.map((team) => (_jsx(TeamGroup, { team: team, isExpanded: expandedTeamIds.includes(team.teamId), isSelected: filterSummary.teamId === team.teamId, selectedFilter: filterSummary, onToggle: toggleHandlers[team.teamId], onFilterSelect: filterHandlers[team.teamId] }, team.teamId)))] }));
+};
+export default DeskTeamInbox;

package/dist/src/components/session/SessionFilterMenu.d.ts

@@ -0,0 +1,13 @@
+import { IFilterSummary } from "../../store/type";
+import { ISessionSummaryResponse } from "../../types/dto";
+interface SessionFilterMenuProps {
+    summary: ISessionSummaryResponse;
+    isActive: boolean;
+    filterSummary: IFilterSummary;
+    onFilterSelect: (filter: IFilterSummary) => void;
+    includeUnassigned?: boolean;
+    activeCount?: number;
+}
+declare const SessionFilterMenu: ({ summary, isActive, filterSummary, onFilterSelect, includeUnassigned, activeCount, }: SessionFilterMenuProps) => import("react/jsx-runtime").JSX.Element;
+export default SessionFilterMenu;
+//# sourceMappingURL=SessionFilterMenu.d.ts.map

package/dist/src/components/session/SessionFilterMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SessionFilterMenu.d.ts","sourceRoot":"","sources":["../../../../src/components/session/SessionFilterMenu.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAGtD,UAAU,sBAAsB;IAC9B,OAAO,EAAE,uBAAuB,CAAC;IACjC,QAAQ,EAAE,OAAO,CAAC;IAClB,aAAa,EAAE,cAAc,CAAC;IAC9B,cAAc,EAAE,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;IACjD,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAaD,QAAA,MAAM,iBAAiB,GAAI,uFAOxB,sBAAsB,4CAiCxB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/src/components/session/SessionFilterMenu.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { Menu } from "antd";
+import { SessionStatus } from "../../types/chat";
+import { buildSessionMenuItems } from "./sessionMenuItems";
+const getSelectedKeys = (isActive, filterSummary) => {
+    if (!isActive)
+        return [];
+    if (filterSummary.status === SessionStatus.COMPLETED)
+        return [SessionStatus.COMPLETED];
+    const key = filterSummary.status || filterSummary.tag;
+    return key ? [key] : [];
+};
+const SessionFilterMenu = ({ summary, isActive, filterSummary, onFilterSelect, includeUnassigned = false, activeCount, }) => {
+    const { t } = useTranslation();
+    const selectedKeys = useMemo(() => getSelectedKeys(isActive, filterSummary), [isActive, filterSummary]);
+    const menuItems = useMemo(() => buildSessionMenuItems({
+        summary,
+        t,
+        onFilterSelect,
+        includeUnassigned,
+    }), [summary, t, onFilterSelect, includeUnassigned]);
+    return (_jsx(Menu, { selectedKeys: selectedKeys, defaultOpenKeys: ["ACTIVE_SESSIONS"], mode: "inline", items: menuItems, inlineIndent: 12, expandIcon: activeCount ? (_jsx("span", { className: "text-xs", children: activeCount })) : undefined }));
+};
+export default SessionFilterMenu;

package/dist/src/components/session/sessionMenuItems.d.ts

@@ -0,0 +1,26 @@
+import { MenuProps } from "antd";
+import { TFunction } from "i18next";
+import { IFilterSummary } from "../../store/type";
+import { ISessionSummaryResponse } from "../../types/dto";
+type MenuItem = Required<MenuProps>["items"][number];
+interface SessionFilterConfig {
+    key: string;
+    labelKey: string;
+    iconName: string;
+    iconClassName?: string;
+    filter: IFilterSummary;
+    countSource: "status" | "tag";
+    teamOnly?: boolean;
+    highlighted?: boolean;
+}
+export declare const SESSION_FILTER_CONFIGS: SessionFilterConfig[];
+export declare const getFilterConfig: (key: string) => SessionFilterConfig | undefined;
+interface BuildSessionMenuItemsOptions {
+    summary: ISessionSummaryResponse;
+    t: TFunction;
+    onFilterSelect: (filter: IFilterSummary) => void;
+    includeUnassigned?: boolean;
+}
+export declare const buildSessionMenuItems: ({ summary, t, onFilterSelect, includeUnassigned, }: BuildSessionMenuItemsOptions) => MenuItem[];
+export {};
+//# sourceMappingURL=sessionMenuItems.d.ts.map

package/dist/src/components/session/sessionMenuItems.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sessionMenuItems.d.ts","sourceRoot":"","sources":["../../../../src/components/session/sessionMenuItems.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,MAAM,CAAC;AACjC,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAGpC,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAEtD,KAAK,QAAQ,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC;AAErD,UAAU,mBAAmB;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,cAAc,CAAC;IACvB,WAAW,EAAE,QAAQ,GAAG,KAAK,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,sBAAsB,EAAE,mBAAmB,EA0DvD,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,KAAK,MAAM,oCACQ,CAAC;AAEpD,UAAU,4BAA4B;IACpC,OAAO,EAAE,uBAAuB,CAAC;IACjC,CAAC,EAAE,SAAS,CAAC;IACb,cAAc,EAAE,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;IACjD,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AA0BD,eAAO,MAAM,qBAAqB,GAAI,oDAKnC,4BAA4B,KAAG,QAAQ,EA4CzC,CAAC"}

package/dist/src/components/session/sessionMenuItems.js

@@ -0,0 +1,108 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Icon } from "../../components/icon";
+import { SessionStatus, SessionTag } from "../../types/chat";
+export const SESSION_FILTER_CONFIGS = [
+    {
+        key: SessionStatus.UNASSIGNED,
+        labelKey: "unassigned",
+        iconName: "user-del-o",
+        iconClassName: "!text-amber-500",
+        filter: { status: SessionStatus.UNASSIGNED, tag: undefined },
+        countSource: "status",
+        teamOnly: true,
+    },
+    {
+        key: SessionTag.SLOW_PROCESSING,
+        labelKey: "slow_processing",
+        iconName: "warning-square-o",
+        iconClassName: "!text-red-500",
+        filter: { status: undefined, tag: SessionTag.SLOW_PROCESSING },
+        countSource: "tag",
+        highlighted: true,
+    },
+    {
+        key: SessionStatus.WAITING_PROCESS,
+        labelKey: "waiting_process",
+        iconName: "time-circle-o",
+        iconClassName: "!text-orange-400",
+        filter: { status: SessionStatus.WAITING_PROCESS, tag: undefined },
+        countSource: "status",
+        highlighted: true,
+    },
+    {
+        key: SessionTag.AWAITING_REPLY,
+        labelKey: "awaiting_reply",
+        iconName: "arrow-reply-o",
+        iconClassName: "!text-purple-500",
+        filter: { status: undefined, tag: SessionTag.AWAITING_REPLY },
+        countSource: "tag",
+        highlighted: true,
+    },
+    {
+        key: SessionStatus.IN_PROCESS,
+        labelKey: "in_process",
+        iconName: "play-circle-o",
+        filter: { status: SessionStatus.IN_PROCESS, tag: undefined },
+        countSource: "status",
+    },
+    {
+        key: SessionTag.TEMPORARILY_PAUSED,
+        labelKey: "temporarily_paused",
+        iconName: "pause-o",
+        filter: { status: undefined, tag: SessionTag.TEMPORARILY_PAUSED },
+        countSource: "tag",
+    },
+    {
+        key: SessionStatus.COMPLETED,
+        labelKey: "closed_sessions",
+        iconName: "check-square-o",
+        filter: { status: SessionStatus.COMPLETED, tag: undefined },
+        countSource: "status",
+    },
+];
+export const getFilterConfig = (key) => SESSION_FILTER_CONFIGS.find((c) => c.key === key);
+const countBadge = (count, highlighted) => {
+    if (!count)
+        return null;
+    if (highlighted) {
+        return (_jsx("span", { className: "text-xs font-medium text-white bg-red-500 rounded-full px-1.5 py-0.5 leading-none -mr-1.5", children: count }));
+    }
+    return _jsx("span", { className: "text-xs text-gray-500", children: count });
+};
+const getCount = (config, summary) => {
+    var _a, _b, _c, _d;
+    if (config.countSource === "status") {
+        return (((_b = (_a = summary.sessionStatuses) === null || _a === void 0 ? void 0 : _a.find((s) => s.type === config.key)) === null || _b === void 0 ? void 0 : _b.count) || "");
+    }
+    return ((_d = (_c = summary.tagCounts) === null || _c === void 0 ? void 0 : _c.find((s) => s.type === config.key)) === null || _d === void 0 ? void 0 : _d.count) || "";
+};
+export const buildSessionMenuItems = ({ summary, t, onFilterSelect, includeUnassigned = false, }) => {
+    const activeConfigs = SESSION_FILTER_CONFIGS.filter((c) => c.key !== SessionStatus.COMPLETED &&
+        (!c.teamOnly || includeUnassigned));
+    const activeChildren = activeConfigs.map((config) => ({
+        label: t(config.labelKey),
+        key: config.key,
+        icon: (_jsx(Icon, { icon: config.iconName, size: 18, className: config.iconClassName })),
+        onClick: () => onFilterSelect(config.filter),
+        itemIcon: countBadge(getCount(config, summary), config.highlighted),
+    }));
+    const closedConfig = SESSION_FILTER_CONFIGS.find((c) => c.key === SessionStatus.COMPLETED);
+    const closedItem = closedConfig
+        ? {
+            label: t(closedConfig.labelKey),
+            key: closedConfig.key,
+            icon: _jsx(Icon, { icon: closedConfig.iconName, size: 20 }),
+            onClick: () => onFilterSelect(closedConfig.filter),
+            itemIcon: countBadge(summary.completedSessionCount),
+        }
+        : null;
+    return [
+        {
+            label: t("active_sessions"),
+            key: "ACTIVE_SESSIONS",
+            icon: _jsx(Icon, { icon: "chat-dot-o", size: 20 }),
+            children: activeChildren,
+        },
+        closedItem,
+    ].filter(Boolean);
+};

package/dist/src/components/thread/AssignConfirmModal.d.ts

@@ -0,0 +1,12 @@
+import { ISupporterResponse } from "../../types/dto";
+interface AssignConfirmModalProps {
+    open: boolean;
+    agent: ISupporterResponse | null;
+    loading: boolean;
+    onCancel: () => void;
+    onConfirm: () => void;
+    afterClose?: () => void;
+}
+declare const AssignConfirmModal: ({ open, agent, loading, onCancel, onConfirm, afterClose, }: AssignConfirmModalProps) => import("react/jsx-runtime").JSX.Element;
+export default AssignConfirmModal;
+//# sourceMappingURL=AssignConfirmModal.d.ts.map

package/dist/src/components/thread/AssignConfirmModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssignConfirmModal.d.ts","sourceRoot":"","sources":["../../../../src/components/thread/AssignConfirmModal.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGjD,UAAU,uBAAuB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACjC,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,QAAA,MAAM,kBAAkB,GAAI,4DAOzB,uBAAuB,4CAwDzB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/src/components/thread/AssignConfirmModal.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Modal, Button, Avatar } from "antd";
+import { useTranslation, Trans } from "react-i18next";
+const AssignConfirmModal = ({ open, agent, loading, onCancel, onConfirm, afterClose, }) => {
+    var _a;
+    const { t } = useTranslation();
+    return (_jsx(Modal, { open: open, onCancel: onCancel, footer: null, closable: !loading, centered: true, forceRender: true, width: 400, maskClosable: !loading, keyboard: !loading, afterClose: afterClose, children: _jsxs("div", { className: "flex flex-col items-center gap-4 pt-2", role: "alertdialog", "aria-label": t("manual_assign_confirm_question", {
+                name: agent === null || agent === void 0 ? void 0 : agent.displayName,
+            }), children: [_jsx(Avatar, { src: agent === null || agent === void 0 ? void 0 : agent.avatar, size: 48, children: ((_a = agent === null || agent === void 0 ? void 0 : agent.displayName) === null || _a === void 0 ? void 0 : _a.charAt(0)) || "A" }), _jsx("p", { className: "text-base text-center", children: _jsx(Trans, { i18nKey: "manual_assign_confirm_question", values: { name: agent === null || agent === void 0 ? void 0 : agent.displayName }, components: { bold: _jsx("strong", {}) } }) }), _jsxs("div", { className: "flex gap-3 w-full", children: [_jsx(Button, { className: "flex-1", size: "large", onClick: onCancel, disabled: loading, children: t("cancel") }), _jsx(Button, { type: "primary", className: "flex-1", size: "large", onClick: onConfirm, loading: loading, disabled: !agent, children: t("manual_assign_button_reassign") })] })] }) }));
+};
+export default AssignConfirmModal;

package/dist/src/components/thread/ManualAssignPopover.d.ts

@@ -0,0 +1,17 @@
+import { type ReactNode } from "react";
+interface SupporterInfo {
+    avatar: string;
+    username: string;
+    fullName: string;
+    id: string;
+}
+interface ManualAssignPopoverProps {
+    sessionId: string;
+    supporter?: SupporterInfo | null;
+    teamId?: string;
+    children?: ReactNode;
+    excludeCurrentUser?: boolean;
+}
+declare const ManualAssignPopover: ({ sessionId, supporter, teamId: propTeamId, children, excludeCurrentUser, }: ManualAssignPopoverProps) => import("react/jsx-runtime").JSX.Element;
+export default ManualAssignPopover;
+//# sourceMappingURL=ManualAssignPopover.d.ts.map

package/dist/src/components/thread/ManualAssignPopover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ManualAssignPopover.d.ts","sourceRoot":"","sources":["../../../../src/components/thread/ManualAssignPopover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAkBjD,UAAU,aAAa;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,UAAU,wBAAwB;IAChC,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AA8CD,QAAA,MAAM,mBAAmB,GAAI,6EAM1B,wBAAwB,4CA4O1B,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/src/components/thread/ManualAssignPopover.js

@@ -0,0 +1,115 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { Popover, Input, Avatar, Spin, Badge, Divider } from "antd";
+import { useTranslation } from "react-i18next";
+import clsx from "clsx";
+import { Icon } from "../../components/icon";
+import { useGetTeamSupporters } from "../../hooks/session/useGetTeamSupporters";
+import { useAssignSession, useAutoAssignSession, } from "../../hooks/session/useAssignSession";
+import { message as antdMessage } from "antd";
+import AssignConfirmModal from "./AssignConfirmModal";
+import { useDebounce } from "ahooks";
+import useAuthStore from "../../store/auth";
+const SEARCH_DEBOUNCE_WAIT = 300;
+const SupporterItem = ({ supporter, onClick, isCurrentUser, }) => {
+    var _a;
+    const { t } = useTranslation();
+    const isOnline = supporter.status === "ONLINE";
+    return (_jsxs("div", { role: "option", tabIndex: 0, className: "flex items-center gap-3 px-3 py-2 rounded-md transition-colors cursor-pointer hover:bg-gray-50", onClick: () => onClick(supporter), children: [_jsx(Badge, { dot: true, color: isOnline ? "#52c41a" : "#d9d9d9", offset: [-2, 24], children: _jsx(Avatar, { src: supporter.avatar, size: 32, children: ((_a = supporter.displayName) === null || _a === void 0 ? void 0 : _a.charAt(0)) || "A" }) }), _jsxs("div", { className: "flex items-center gap-2 min-w-0 flex-1", children: [_jsx("span", { className: "text-sm truncate", children: supporter.displayName }), isCurrentUser && (_jsx("span", { className: "text-xs text-blue-500 shrink-0", children: t("current_account") }))] }), _jsx("div", { className: "flex items-center gap-2 shrink-0", children: !!supporter.openSessionCount && supporter.openSessionCount > 0 && (_jsxs("span", { className: "flex items-center gap-0.5 bg-blue-500 text-white text-xs font-medium px-1.5 py-0.5 rounded-full", children: [_jsx(Icon, { icon: "chat-square-b", size: 11 }), supporter.openSessionCount] })) })] }));
+};
+const ManualAssignPopover = ({ sessionId, supporter, teamId: propTeamId, children, excludeCurrentUser = false, }) => {
+    var _a, _b;
+    const { t } = useTranslation();
+    const authUserID = useAuthStore((state) => state.userID);
+    const [open, setOpen] = useState(false);
+    const [searchText, setSearchText] = useState("");
+    const [selectedAgent, setSelectedAgent] = useState(null);
+    const [confirmModalOpen, setConfirmModalOpen] = useState(false);
+    const debouncedSearch = useDebounce(searchText, {
+        wait: SEARCH_DEBOUNCE_WAIT,
+    });
+    const teamId = propTeamId || "";
+    const { data: supporters, isLoading, isFetching, } = useGetTeamSupporters({
+        teamId,
+        search: debouncedSearch || undefined,
+        enabled: open,
+    });
+    const { mutate: assignSession, isPending: isAssigning } = useAssignSession();
+    const { mutate: autoAssignSession, isPending: isAutoAssigning } = useAutoAssignSession();
+    const isSubmitting = isAssigning || isAutoAssigning;
+    const isAutoAssignDisabled = isSubmitting || isLoading || isFetching;
+    const hasAvailableAutoAssignSupporter = supporters === null || supporters === void 0 ? void 0 : supporters.some((item) => item.status === "ONLINE" && item.memberId !== (supporter === null || supporter === void 0 ? void 0 : supporter.id));
+    const handleSelectAgent = (agent) => {
+        if (isSubmitting)
+            return;
+        setSelectedAgent(agent);
+        setOpen(false);
+        setSearchText("");
+        setConfirmModalOpen(true);
+    };
+    const handleConfirmAssign = () => {
+        if (!selectedAgent || isSubmitting)
+            return;
+        assignSession({ sessionId, supporterId: selectedAgent.memberId }, {
+            onSuccess: () => {
+                antdMessage.success(t("manual_assign_success"));
+                setConfirmModalOpen(false);
+            },
+            onError: () => {
+                antdMessage.error(t("manual_assign_failed"));
+            },
+        });
+    };
+    const handleAutoAssign = () => {
+        if (isAutoAssignDisabled)
+            return;
+        if (!hasAvailableAutoAssignSupporter) {
+            antdMessage.error(t("auto_assign_failed"));
+            return;
+        }
+        autoAssignSession({ sessionId }, {
+            onSuccess: () => {
+                antdMessage.success(t("auto_assign_success"));
+                setOpen(false);
+                setSearchText("");
+            },
+            onError: () => {
+                antdMessage.error(t("auto_assign_failed"));
+            },
+        });
+    };
+    const handleCancelConfirm = () => {
+        setConfirmModalOpen(false);
+    };
+    const handleAfterClose = () => {
+        setSelectedAgent(null);
+    };
+    const handleOpenChange = (newOpen) => {
+        if (isSubmitting)
+            return;
+        setOpen(newOpen);
+        if (!newOpen) {
+            setSearchText("");
+        }
+    };
+    const popoverContent = (_jsxs("div", { className: "w-64", children: [_jsxs("button", { type: "button", className: clsx("flex w-full items-center gap-3 rounded-md px-3 py-2 text-left text-sm transition-colors", isAutoAssignDisabled
+                    ? "cursor-not-allowed text-gray-400"
+                    : "text-gray-700 hover:bg-gray-50"), onClick: handleAutoAssign, disabled: isAutoAssignDisabled, children: [isAutoAssigning ? (_jsx(Spin, { size: "small" })) : (_jsx("span", { className: "text-blue-500", children: _jsx(Icon, { icon: "refresh-b", size: 20 }) })), _jsx("span", { children: t("manual_assign_button_auto_reassign") })] }), _jsx(Divider, { className: "my-2" }), _jsx("div", { className: "mb-2", children: _jsx(Input, { autoFocus: true, placeholder: t("manual_assign_search_placeholder"), value: searchText, onChange: (e) => setSearchText(e.target.value), prefix: _jsx(Icon, { icon: "search-o", size: 16, className: "text-gray-400" }), className: "rounded-lg border-gray-300 focus-within:border-chat-focus focus-within:shadow-chat-focus-ring", allowClear: true }) }), _jsx("div", { className: "max-h-72 overflow-y-auto", role: "listbox", children: isLoading ? (_jsx("div", { className: "flex items-center justify-center py-8", children: _jsx(Spin, {}) })) : supporters && supporters.length > 0 ? (_jsx("div", { className: clsx("flex flex-col transition-opacity duration-200", isFetching && "opacity-50 pointer-events-none"), children: [...supporters]
+                        .filter((item) => item.memberId !== (supporter === null || supporter === void 0 ? void 0 : supporter.id))
+                        .filter((item) => !excludeCurrentUser || item.memberId !== authUserID)
+                        .sort((supporterA, supporterB) => {
+                        const isSupporterACurrentUser = supporterA.memberId === authUserID;
+                        const isSupporterBCurrentUser = supporterB.memberId === authUserID;
+                        if (isSupporterACurrentUser !== isSupporterBCurrentUser) {
+                            return isSupporterACurrentUser ? -1 : 1;
+                        }
+                        return supporterA.displayName.localeCompare(supporterB.displayName, "vi", {
+                            sensitivity: "base",
+                        });
+                    })
+                        .map((item) => (_jsx(SupporterItem, { supporter: item, onClick: handleSelectAgent, isCurrentUser: item.memberId === authUserID }, item.memberId))) })) : (_jsx("div", { className: "flex items-center justify-center py-8", children: _jsx("span", { className: "text-sm text-gray-400", children: t("manual_assign_no_results") }) })) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Popover, { content: popoverContent, trigger: "click", open: open, onOpenChange: handleOpenChange, placement: "topLeft", arrow: false, children: children !== null && children !== void 0 ? children : (_jsxs("div", { role: "button", tabIndex: 0, "aria-label": t("manual_assign_button_reassign"), className: clsx("flex items-center border border-gray-200 rounded-lg p-1 gap-1 transition-opacity", isSubmitting
+                        ? "opacity-50 pointer-events-none"
+                        : "cursor-pointer hover:opacity-80"), children: [_jsx(Avatar, { src: supporter === null || supporter === void 0 ? void 0 : supporter.avatar, size: 28, children: ((_b = (_a = supporter === null || supporter === void 0 ? void 0 : supporter.fullName) === null || _a === void 0 ? void 0 : _a.charAt) === null || _b === void 0 ? void 0 : _b.call(_a, 0)) || "A" }), _jsx("span", { className: "text-blue-500", children: _jsx(Icon, { icon: "shuffle-b", size: 20 }) })] })) }), _jsx(AssignConfirmModal, { open: confirmModalOpen, agent: selectedAgent, loading: isAssigning, onCancel: handleCancelConfirm, onConfirm: handleConfirmAssign, afterClose: handleAfterClose })] }));
+};
+export default ManualAssignPopover;

package/dist/src/components/thread/SessionSection.d.ts

@@ -0,0 +1,12 @@
+import { ISessionResponse } from "../../types/dto";
+export declare const SessionDetailCard: ({ session, isActive, }: {
+    session: ISessionResponse;
+    isActive: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+interface SessionSectionProps {
+    sessions: ISessionResponse[];
+    isLoading: boolean;
+}
+declare const SessionSection: ({ sessions, isLoading }: SessionSectionProps) => import("react/jsx-runtime").JSX.Element;
+export default SessionSection;
+//# sourceMappingURL=SessionSection.d.ts.map

package/dist/src/components/thread/SessionSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SessionSection.d.ts","sourceRoot":"","sources":["../../../../src/components/thread/SessionSection.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAkB,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAqB/D,eAAO,MAAM,iBAAiB,GAAI,wBAG/B;IACD,OAAO,EAAE,gBAAgB,CAAC;IAC1B,QAAQ,EAAE,OAAO,CAAC;CACnB,4CAkNA,CAAC;AAiDF,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,gBAAgB,EAAE,CAAC;IAC7B,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,cAAc,GAAI,yBAAyB,mBAAmB,4CAmDnE,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/src/components/thread/SessionSection.js

@@ -0,0 +1,148 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useBoolean, useDebounce } from "ahooks";
+import { Icon } from "../../components/icon";
+import { Button, Select, Spin, Tag, Input, message, Avatar } from "antd";
+import ManualAssignPopover from "./ManualAssignPopover";
+import { useGetLabelSession } from "../../hooks/session/useGetLabelSession";
+import { useUpdateSessionInfo } from "../../hooks/session/useUpdateSessionInfo";
+import { useCloseSession } from "../../hooks/session/useCloseSession";
+import { useQueryClient } from "@tanstack/react-query";
+import { QUERY_KEYS } from "../../services/query";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { SessionStatus } from "../../types/chat";
+const { TextArea } = Input;
+const formatSessionDate = (dateString) => {
+    if (!dateString)
+        return "";
+    const date = new Date(dateString);
+    const hours = String(date.getHours()).padStart(2, "0");
+    const minutes = String(date.getMinutes()).padStart(2, "0");
+    const day = String(date.getDate()).padStart(2, "0");
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    return `${hours}:${minutes} ${day}/${month}`;
+};
+export const SessionDetailCard = ({ session, isActive, }) => {
+    var _a, _b, _c, _d, _e, _f;
+    const queryClient = useQueryClient();
+    const { t } = useTranslation("common");
+    const { data: availableLabels, isLoading: isLoadingLabels } = useGetLabelSession();
+    const { mutate: updateSession } = useUpdateSessionInfo();
+    const { mutate: closeSession, isPending: isClosing } = useCloseSession();
+    const [noteInput, setNoteInput] = useState({
+        value: session.note || "",
+        sessionId: session.id,
+    });
+    const [issueDetailInput, setIssueDetailInput] = useState({
+        value: session.issueDetail || "",
+        sessionId: session.id,
+    });
+    const debouncedNoteInput = useDebounce(noteInput, { wait: 500 });
+    const debouncedIssueDetailInput = useDebounce(issueDetailInput, {
+        wait: 500,
+    });
+    useEffect(() => {
+        setNoteInput({ value: session.note || "", sessionId: session.id });
+        setIssueDetailInput({
+            value: session.issueDetail || "",
+            sessionId: session.id,
+        });
+    }, [session.id]);
+    useEffect(() => {
+        if (debouncedNoteInput.sessionId === session.id &&
+            debouncedNoteInput.value !== (session.note || "")) {
+            updateSession({ sessionId: session.id, note: debouncedNoteInput.value }, {
+                onSuccess: () => {
+                    queryClient.invalidateQueries({
+                        queryKey: [QUERY_KEYS.GET_LIST_SESSION_BY_CONVERSATION],
+                    });
+                },
+            });
+        }
+    }, [
+        debouncedNoteInput,
+        session.note,
+        session.id,
+        updateSession,
+        queryClient,
+    ]);
+    useEffect(() => {
+        if (debouncedIssueDetailInput.sessionId === session.id &&
+            debouncedIssueDetailInput.value !== (session.issueDetail || "")) {
+            updateSession({
+                sessionId: session.id,
+                issueDetail: debouncedIssueDetailInput.value,
+            }, {
+                onSuccess: () => {
+                    queryClient.invalidateQueries({
+                        queryKey: [QUERY_KEYS.GET_LIST_SESSION_BY_CONVERSATION],
+                    });
+                },
+            });
+        }
+    }, [
+        debouncedIssueDetailInput,
+        session.issueDetail,
+        session.id,
+        updateSession,
+        queryClient,
+    ]);
+    const handleUpdateLabels = (labelIds) => {
+        updateSession({ sessionId: session.id, labelIds }, {
+            onSuccess: () => {
+                queryClient.invalidateQueries({
+                    queryKey: [QUERY_KEYS.GET_LIST_SESSION_BY_CONVERSATION],
+                });
+            },
+        });
+    };
+    const handleCloseSession = () => {
+        closeSession(session.id, {
+            onSuccess: () => {
+                message.success(t("close_session_success"));
+                queryClient.invalidateQueries({
+                    queryKey: [QUERY_KEYS.GET_LIST_SESSION_BY_CONVERSATION],
+                });
+            },
+            onError: () => {
+                message.error(t("close_session_failed"));
+            },
+        });
+    };
+    const labelOptions = availableLabels === null || availableLabels === void 0 ? void 0 : availableLabels.map((label) => ({
+        value: label.id,
+        label: label.name,
+    }));
+    return (_jsxs("div", { className: `p-3 border rounded-lg shadow-md ${isActive ? "border-blue-500" : "border-gray-300"}`, children: [_jsxs("div", { className: "flex justify-between items-start mb-3", children: [_jsx("div", { className: "flex items-center gap-2", children: _jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Icon, { icon: "chat-square-b", size: 16, className: "text-gray-500" }), _jsx("p", { className: "font-semibold text-sm", children: t("session_label", { order: session.order }) })] }), _jsx("p", { className: "text-xs text-gray-400", children: formatSessionDate(session.closedDate || session.createdDate) })] }) }), isActive ? (_jsx(Tag, { color: "processing", children: t("session_active") })) : (_jsx(Avatar, { src: (_a = session.supporter) === null || _a === void 0 ? void 0 : _a.avatar, size: 24, children: ((_d = (_c = (_b = session.supporter) === null || _b === void 0 ? void 0 : _b.fullName) === null || _c === void 0 ? void 0 : _c.charAt) === null || _d === void 0 ? void 0 : _d.call(_c, 0)) || "A" }))] }), _jsxs("div", { className: "flex flex-col gap-3 text-sm", children: [_jsxs("div", { className: "flex items-center gap-2 text-gray-500", children: [_jsx(Icon, { icon: "tag-o", size: 16, className: "mt-1" }), _jsx(Select, { mode: "multiple", loading: isLoadingLabels, className: "w-full", placeholder: t("session_add_tag_placeholder"), options: labelOptions, value: (_e = session.labels) === null || _e === void 0 ? void 0 : _e.map((label) => label.id), onChange: handleUpdateLabels, removeIcon: true })] }), _jsxs("div", { className: "flex items-start gap-2 text-gray-500", children: [_jsx(Icon, { icon: "info-circle-o", size: 16, className: "mt-1" }), _jsx(TextArea, { value: issueDetailInput.value, onChange: (e) => setIssueDetailInput({
+                                    value: e.target.value,
+                                    sessionId: session.id,
+                                }), placeholder: t("session_issue_detail_placeholder"), className: "border-none !shadow-none py-0 px-2", autoSize: { minRows: 1, maxRows: 3 } })] }), _jsxs("div", { className: "flex items-start gap-2 text-gray-500", children: [_jsx(Icon, { icon: "paper-o", size: 16, className: "mt-1" }), _jsx(TextArea, { value: noteInput.value, onChange: (e) => setNoteInput({ value: e.target.value, sessionId: session.id }), placeholder: t("session_note_placeholder"), className: "border-none !shadow-none py-0 px-2", autoSize: { minRows: 1, maxRows: 3 } })] })] }), isActive && (_jsxs("div", { className: "flex items-center gap-2 mt-4 border-t border-gray-200 pt-4", children: [session.status !== SessionStatus.UNASSIGNED &&
+                        ((_f = session.supporter) === null || _f === void 0 ? void 0 : _f.id) && (_jsx(ManualAssignPopover, { sessionId: session.id, supporter: session.supporter, teamId: session.teamId })), _jsx(Button, { type: "primary", className: "flex-1", onClick: handleCloseSession, loading: isClosing, children: t("session_close_button") })] }))] }));
+};
+const ClosedSessionItem = ({ session, expandedSessionId, onToggleExpand, }) => {
+    var _a, _b, _c, _d;
+    const { t } = useTranslation("common");
+    const isExpanded = session.id === expandedSessionId;
+    const handleClick = () => {
+        onToggleExpand(session.id);
+    };
+    if (isExpanded) {
+        return (_jsx("div", { children: _jsx(SessionDetailCard, { session: session, isActive: false }) }));
+    }
+    return (_jsxs("div", { className: "flex justify-between items-center p-2 rounded-md hover:bg-gray-100 cursor-pointer", onClick: handleClick, children: [_jsxs("div", { className: "flex items-center gap-2 text-sm", children: [_jsx(Icon, { icon: "chat-square-b", size: 16, className: "text-gray-500" }), _jsx("span", { className: "font-semibold", children: t("session_label", { order: session.order }) }), _jsx("span", { className: "text-gray-400 text-xs", children: formatSessionDate(session.closedDate || session.createdDate) })] }), _jsx(Avatar, { src: (_a = session.supporter) === null || _a === void 0 ? void 0 : _a.avatar, size: 24, children: ((_d = (_c = (_b = session.supporter) === null || _b === void 0 ? void 0 : _b.fullName) === null || _c === void 0 ? void 0 : _c.charAt) === null || _d === void 0 ? void 0 : _d.call(_c, 0)) || "A" })] }));
+};
+const SessionSection = ({ sessions, isLoading }) => {
+    const { t } = useTranslation("common");
+    const [isOpen, { toggle }] = useBoolean(true);
+    const [expandedSessionId, setExpandedSessionId] = useState(null);
+    const handleToggleExpand = (sessionId) => {
+        setExpandedSessionId((prevId) => (prevId === sessionId ? null : sessionId));
+    };
+    useEffect(() => {
+        if (!isOpen) {
+            setExpandedSessionId(null);
+        }
+    }, [isOpen]);
+    return (_jsxs("div", { className: "flex flex-col border-b", children: [_jsxs("div", { role: "button", onClick: toggle, className: "flex items-center justify-between px-4 py-2 rounded-md hover:bg-gray-100 sticky top-0 bg-white z-10", children: [_jsx("h3", { className: "font-bold text-gray-500 text-xs tracking-wider", children: t("sessions_heading") }), _jsx(Icon, { icon: isOpen ? "angle-up-o" : "angle-down-o", size: 18 })] }), isOpen && (_jsx("div", { className: "px-4 pt-2 pb-4", children: isLoading ? (_jsx("div", { className: "text-center mt-4", children: _jsx(Spin, {}) })) : (_jsx("div", { className: "flex flex-col gap-1", children: sessions.map((session) => (_jsx(ClosedSessionItem, { session: session, expandedSessionId: expandedSessionId, onToggleExpand: handleToggleExpand }, session.id))) })) }))] }));
+};
+export default SessionSection;

package/dist/src/components/thread/ThreadInfo.d.ts

@@ -0,0 +1,3 @@
+declare const ThreadInfo: () => import("react/jsx-runtime").JSX.Element | null;
+export default ThreadInfo;
+//# sourceMappingURL=ThreadInfo.d.ts.map

package/dist/src/components/thread/ThreadInfo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThreadInfo.d.ts","sourceRoot":"","sources":["../../../../src/components/thread/ThreadInfo.tsx"],"names":[],"mappings":"AAOA,QAAA,MAAM,UAAU,sDAsCf,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/src/components/thread/ThreadInfo.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import useConversationStore from "../../store/conversation";
+import UserSection from "./UserSection";
+import SessionSection, { SessionDetailCard } from "./SessionSection";
+import { useGetListSessionByConversation } from "../../hooks/session/useGetListSessionByConversation";
+import { useMemo } from "react";
+import { PAGE_SIZE } from "../../constants";
+const ThreadInfo = () => {
+    const conversationData = useConversationStore((state) => state.conversationData);
+    const conversationId = (conversationData === null || conversationData === void 0 ? void 0 : conversationData.conversationID) || "";
+    const { data: sessions, isLoading } = useGetListSessionByConversation({
+        conversationId,
+        page: 1,
+        pageSize: PAGE_SIZE.large,
+    });
+    const { closedSessions, activeSession } = useMemo(() => {
+        if (!sessions)
+            return { closedSessions: [], activeSession: null };
+        const active = sessions.find((s) => !s.isClosed);
+        const closed = sessions.filter((s) => s.isClosed);
+        return { closedSessions: closed, activeSession: active };
+    }, [sessions]);
+    if (!conversationId) {
+        return null;
+    }
+    return (_jsxs("div", { className: "h-full w-[330px] bg-white shadow-md flex flex-col relative", children: [_jsxs("div", { className: `flex-grow overflow-y-auto ${activeSession ? "pb-60" : ""}`, children: [_jsx(UserSection, {}), _jsx(SessionSection, { sessions: closedSessions, isLoading: isLoading })] }), activeSession && (_jsx("div", { className: "absolute bottom-0 left-0 right-0 p-4 z-20 bg-white backdrop-blur-sm", children: _jsx(SessionDetailCard, { session: activeSession, isActive: true }) }))] }));
+};
+export default ThreadInfo;

package/dist/src/components/thread/UserSection.d.ts

@@ -0,0 +1,3 @@
+declare const UserSection: () => import("react/jsx-runtime").JSX.Element;
+export default UserSection;
+//# sourceMappingURL=UserSection.d.ts.map

package/dist/src/components/thread/UserSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserSection.d.ts","sourceRoot":"","sources":["../../../../src/components/thread/UserSection.tsx"],"names":[],"mappings":"AAYA,QAAA,MAAM,WAAW,+CAwIhB,CAAC;AAEF,eAAe,WAAW,CAAC"}