@droppii-org/chat-sdk 0.1.6 → 0.1.7

package/dist/components/message/footer/EnterHandler.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EnterHandler.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/EnterHandler.tsx"],"names":[],"mappings":"AAuBA,MAAM,CAAC,OAAO,UAAU,YAAY,SAmGnC"}
+{"version":3,"file":"EnterHandler.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/EnterHandler.tsx"],"names":[],"mappings":"AAuBA,MAAM,CAAC,OAAO,UAAU,YAAY,SAiHnC"}

package/dist/components/message/footer/EnterHandler.js

@@ -7,9 +7,10 @@ import { $isListNode, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND
 import { $isQuoteNode } from "@lexical/rich-text";
 import { useMessageFooterContext } from ".";
 import useConversationStore from "../../../store/conversation";
+import { emit } from "../../../utils/events";
 export default function EnterHandler() {
     const [editor] = useLexicalComposerContext();
-    const { onSendMessage, listUploadFiles } = useMessageFooterContext();
+    const { onSendMessage, isInternal, listUploadFiles, isOpenCanned, activeCannedIndex, } = useMessageFooterContext();
     const shiftEnterCount = useRef(0);
     const quotedMessage = useConversationStore((state) => state.quotedMessage);
     useEffect(() => {
@@ -18,6 +19,10 @@ export default function EnterHandler() {
             if (!event.shiftKey) {
                 event.preventDefault();
                 shiftEnterCount.current = 0;
+                if (isOpenCanned) {
+                    emit("CANNED_RESPONSE_SELECT", activeCannedIndex);
+                    return true;
+                }
                 let plainText = "";
                 let richText = "";
                 // lấy plain text & html
@@ -34,6 +39,7 @@ export default function EnterHandler() {
                         plainText,
                         richText,
                         type: hasFiles ? "file" : "text",
+                        isInternal,
                     });
                 }
                 editor.update(() => {
@@ -85,6 +91,9 @@ export default function EnterHandler() {
         listUploadFiles,
         quotedMessage,
         quotedMessage === null || quotedMessage === void 0 ? void 0 : quotedMessage.clientMsgID,
+        isInternal,
+        isOpenCanned,
+        activeCannedIndex,
     ]);
     return null;
 }

package/dist/components/message/footer/index.d.ts

@@ -1,7 +1,7 @@
 import { MessageFooterContextType } from "../../../types/chat";
-import { ISessionByStatus } from "../../../store/type";
+import { ISessionResponse } from "../../../types/dto";
 interface MessageFooterProps {
-    currentSession?: ISessionByStatus;
+    currentSession?: ISessionResponse;
     openCreateCannedModal?: () => void;
 }
 export declare const MessageFooterContext: import("react").Context<MessageFooterContextType>;

package/dist/components/message/footer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/index.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAK/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAQvD,UAAU,kBAAkB;IAC1B,cAAc,CAAC,EAAE,gBAAgB,CAAC;IAClC,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;CACpC;AASD,eAAO,MAAM,oBAAoB,mDAM/B,CAAC;AAEH,eAAO,MAAM,uBAAuB,gCAAyC,CAAC;AAE9E,QAAA,MAAM,qBAAqB,GAAI,4CAG5B,kBAAkB,4CAiHpB,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/index.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAEL,wBAAwB,EACzB,MAAM,qBAAqB,CAAC;AAK7B,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAWtD,UAAU,kBAAkB;IAC1B,cAAc,CAAC,EAAE,gBAAgB,CAAC;IAClC,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;CACpC;AASD,eAAO,MAAM,oBAAoB,mDAY/B,CAAC;AAEH,eAAO,MAAM,uBAAuB,gCAAyC,CAAC;AAE9E,QAAA,MAAM,qBAAqB,GAAI,4CAG5B,kBAAkB,4CAkJpB,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/dist/components/message/footer/index.js

@@ -1,16 +1,14 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { LexicalComposer } from "@lexical/react/LexicalComposer";
-import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
-import { ContentEditable } from "@lexical/react/LexicalContentEditable";
-import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
 import { ToolbarPlugin } from "./ToolbarPlugin";
 import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
 import { ListPlugin } from "@lexical/react/LexicalListPlugin";
 import { editorTheme, editorNodes, editorOnError } from "./editorConfig";
-import { createContext, useCallback, useContext, useState } from "react";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState, } from "react";
 import EnterHandler from "./EnterHandler";
 import ActionBar from "./ActionBar";
+import { AccountType, } from "../../../types/chat";
 import { useSendMessage } from "../../../hooks/message/useSendMessage";
 import { Popover } from "antd";
 import FilePreview from "./FilePreview";
@@ -21,6 +19,9 @@ import CannedResponse from "../../cannedResponse";
 import { CannedResponseTriggerPlugin } from "./CannedResponsePlugin";
 import { useBoolean } from "ahooks";
 import useAuthStore from "../../../store/auth";
+import { useCurrentUserAccountType } from "../../../hooks/user/useCurrentUserAccountType";
+import ComposerTabs from "./ComposerTabs";
+import ComposerEditor from "./ComposerEditor";
 const initialConfig = {
     namespace: "ChatInput",
     theme: editorTheme,
@@ -29,22 +30,43 @@ const initialConfig = {
 };
 export const MessageFooterContext = createContext({
     onSendMessage: () => { },
+    isInternal: false,
+    setIsInternal: () => { },
     listUploadFiles: [],
     setListUploadFiles: () => { },
     isOpenCanned: false,
     setIsOpenCanned: () => { },
+    activeCannedIndex: 0,
+    setActiveCannedIndex: () => { },
+    maxActiveCannedIndex: 0,
+    setMaxActiveCannedIndex: () => { },
 });
 export const useMessageFooterContext = () => useContext(MessageFooterContext);
 const MessageFooterProvider = ({ currentSession, openCreateCannedModal, }) => {
     const { t } = useTranslation();
     const { sendTextMessage, sendMergeMessage } = useSendMessage();
+    const accountType = useCurrentUserAccountType();
     const [listUploadFiles, setListUploadFiles] = useState([]);
-    const [isOpenCanned, { setTrue: openCanned, setFalse: closeCanned, toggle: toggleCanned },] = useBoolean(false);
+    const [isOpenCanned, { setTrue: openCanned, setFalse: closeCanned },] = useBoolean(false);
     const isCrm = useAuthStore((state) => state.isCrm);
     const [cannedQuery, setCannedQuery] = useState("");
-    const onSendMessage = useCallback(async ({ plainText, richText, type, }) => {
+    const [activeCannedIndex, setActiveCannedIndex] = useState(0);
+    const [maxActiveCannedIndex, setMaxActiveCannedIndex] = useState(0);
+    const [isInternal, setIsInternal] = useState(false);
+    const canUseInternal = accountType === AccountType.Staff;
+    useEffect(() => {
+        if (!canUseInternal && isInternal) {
+            setIsInternal(false);
+        }
+    }, [canUseInternal, isInternal]);
+    const placeholderText = useMemo(() => {
+        return isInternal
+            ? t("enter_internal_message")
+            : t("enter_message");
+    }, [isInternal, t]);
+    const onSendMessage = useCallback(async ({ plainText, richText, type, isInternal, }) => {
         if (type === "text") {
-            sendTextMessage({ plainText, richText, currentSession });
+            sendTextMessage({ plainText, richText, currentSession, isInternal });
         }
         else {
             sendMergeMessage({
@@ -52,6 +74,7 @@ const MessageFooterProvider = ({ currentSession, openCreateCannedModal, }) => {
                 richText,
                 files: listUploadFiles,
                 currentSession,
+                isInternal,
             });
         }
         setListUploadFiles([]);
@@ -64,14 +87,27 @@ const MessageFooterProvider = ({ currentSession, openCreateCannedModal, }) => {
         setCannedQuery(query);
         openCanned();
     }, [openCanned]);
+    const setIsOpenCanned = useCallback((open) => {
+        if (open) {
+            openCanned();
+            return;
+        }
+        closeCanned();
+    }, [closeCanned, openCanned]);
     return (_jsx(MessageFooterContext.Provider, { value: {
             onSendMessage,
+            isInternal,
+            setIsInternal,
             listUploadFiles,
             setListUploadFiles,
             isOpenCanned,
-            setIsOpenCanned: toggleCanned,
+            setIsOpenCanned,
+            activeCannedIndex,
+            setActiveCannedIndex,
+            maxActiveCannedIndex,
+            setMaxActiveCannedIndex,
         }, children: _jsxs(LexicalComposer, { initialConfig: initialConfig, children: [_jsx(Popover, { open: isOpenCanned, content: _jsx(CannedResponse, { onClose: closeCanned, openCreateCannedModal: onOpenCreateCannedModal, cannedQuery: cannedQuery }), placement: "topLeft", trigger: "click", arrow: false, classNames: {
                         body: "mx-1 !p-0",
-                    }, destroyOnHidden: true, children: _jsxs("div", { className: "border-t pb-2 flex flex-col gap-1 bg-white", children: [_jsx(QuotedMessageFooter, {}), listUploadFiles.length > 0 && _jsx(FilePreview, {}), _jsx(ToolbarPlugin, {}), _jsx("div", { className: "relative px-4", children: _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: "border border-indigo-500 rounded-md bg-blue-100 min-h-[64px] max-h-[140px] overflow-y-auto px-3 py-2 text-sm" }), ErrorBoundary: LexicalErrorBoundary, "aria-placeholder": t("enter_message"), placeholder: _jsx("div", { className: "absolute top-2 left-7 pointer-events-none", children: _jsx("p", { className: "text-gray-500 text-sm", children: t("enter_message") }) }) }) }), _jsx(ActionBar, {})] }) }), _jsx(LinkPlugin, {}), _jsx(ListPlugin, {}), _jsx(EnterHandler, {}), _jsx(PasteAndDropPlugin, {}), isCrm && (_jsx(CannedResponseTriggerPlugin, { onClose: closeCanned, onOpen: onOpenCanned }))] }) }));
+                    }, destroyOnHidden: true, children: _jsxs("div", { className: "border-t pb-2 flex flex-col gap-1 bg-white", children: [_jsx(QuotedMessageFooter, {}), listUploadFiles.length > 0 && _jsx(FilePreview, {}), _jsx(ToolbarPlugin, {}), _jsxs("div", { children: [_jsx(ComposerTabs, { canUseInternal: canUseInternal, hintText: t("canned_response_hint"), isInternal: isInternal, setIsInternal: setIsInternal }), _jsx(ComposerEditor, { isInternal: isInternal, placeholderText: placeholderText })] }), _jsx(ActionBar, {})] }) }), _jsx(LinkPlugin, {}), _jsx(ListPlugin, {}), _jsx(EnterHandler, {}), _jsx(PasteAndDropPlugin, {}), isCrm && (_jsx(CannedResponseTriggerPlugin, { onClose: closeCanned, onOpen: onOpenCanned }))] }) }));
 };
 export default MessageFooterProvider;

package/dist/components/message/item/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,WAAW,IAAI,eAAe,EAG/B,MAAM,yBAAyB,CAAC;AA2BjC,UAAU,gBAAgB;IACxB,OAAO,EAAE,eAAe,CAAC;IACzB,WAAW,EAAE,eAAe,EAAE,CAAC;IAC/B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,uBAAuB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAClD,eAAe,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;IACpD,mBAAmB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CACrD;AAED,QAAA,MAAM,WAAW,GAAI,2HAQlB,gBAAgB,mDA0PlB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,WAAW,IAAI,eAAe,EAG/B,MAAM,yBAAyB,CAAC;AA2BjC,UAAU,gBAAgB;IACxB,OAAO,EAAE,eAAe,CAAC;IACzB,WAAW,EAAE,eAAe,EAAE,CAAC;IAC/B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,uBAAuB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAClD,eAAe,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;IACpD,mBAAmB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CACrD;AAED,QAAA,MAAM,WAAW,GAAI,2HAQlB,gBAAgB,mDAsQlB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/message/item/index.js

@@ -102,6 +102,7 @@ const MessageItem = ({ message, allMessages, contextMenuOpen, onContextMenuOpenC
             console.log("Failed to parse conversationData.ex");
         }
     }, [conversationData === null || conversationData === void 0 ? void 0 : conversationData.ex, isCrm, isMine]);
+    const isInternalMessage = Boolean(message === null || message === void 0 ? void 0 : message.isInternal);
     const hasContextMenu = contextMenuItems.length > 0;
     const isLatestMine = ((_a = allMessages.find((m) => m.sendID === userID)) === null || _a === void 0 ? void 0 : _a.clientMsgID) ===
         message.clientMsgID;
@@ -114,6 +115,9 @@ const MessageItem = ({ message, allMessages, contextMenuOpen, onContextMenuOpenC
     const showTimeBreak = prevTimeBreak;
     const showSenderAvatar = !nextSameUser;
     const showSenderName = !prevSameUser && !isMine;
+    if (!isCrm && isInternalMessage) {
+        return null;
+    }
     if (!isCrm &&
         (MessageType.CustomMessage === (message === null || message === void 0 ? void 0 : message.contentType) ||
             !visibleTypeMessage.includes(message === null || message === void 0 ? void 0 : message.contentType))) {
@@ -121,7 +125,13 @@ const MessageItem = ({ message, allMessages, contextMenuOpen, onContextMenuOpenC
     }
     return (_jsxs("div", { className: "flex flex-col gap-2 py-1 px-3 sm:px-4 min-w-0", id: `${MSG_ITEM_PREFIX}${message === null || message === void 0 ? void 0 : message.clientMsgID}`, children: [showTimeBreak && (_jsx("div", { className: "flex justify-center", children: _jsx("span", { className: "text-xs text-gray-600 text-center bg-neutral-100 px-2 py-1 rounded-full", children: formatTimestamp(message.sendTime, {
                         dateMonthFormat: "DD MMMM",
-                    }) }) })), _jsx("div", { className: clsx("flex min-w-0", isMine ? "justify-end" : "justify-start"), children: _jsxs("div", { className: clsx("flex flex-1 items-end gap-2 min-w-0", isMine ? "justify-end" : "justify-start"), children: [showSenderInfo && (_jsx("div", { className: "flex items-center justify-center w-[32px] h-[32px]", children: showSenderAvatar && (_jsx(Avatar, { src: message === null || message === void 0 ? void 0 : message.senderFaceUrl, children: ((_c = (_b = message === null || message === void 0 ? void 0 : message.senderNickname) === null || _b === void 0 ? void 0 : _b.charAt) === null || _c === void 0 ? void 0 : _c.call(_b, 0)) || "A" })) })), _jsxs("div", { className: clsx("flex flex-col max-w-[75%] min-w-0", isMine ? "items-end" : "items-start"), children: [showSenderName && showSenderInfo && (_jsx("span", { className: "text-xs font-bold mb-1 px-3 mt-2", children: message === null || message === void 0 ? void 0 : message.senderNickname })), _jsxs("div", { className: clsx("flex flex-col flex-1 w-full", isMine ? "items-end" : "items-start"), children: [(message === null || message === void 0 ? void 0 : message.quoteElem) && (_jsx(QuoteMessageItem, { message: message, isMine: isMine, onPressQuoteMessage: onPressQuoteMessage })), _jsxs("div", { className: "flex items-end gap-1.5", children: [isMine && (_jsx(MessageStatusIndicator, { message: message, isLatest: isLatestMine })), _jsx(Dropdown, { menu: { items: contextMenuItems }, trigger: hasContextMenu ? ["contextMenu"] : [], open: contextMenuOpen, onOpenChange: onContextMenuOpenChange, children: _jsxs("div", { className: clsx("px-3 py-2 rounded-2xl max-w-full min-w-0 break-normal flex flex-col flex-1 text-gray-900 gap-1 w-fit", isMine ? "bg-blue-100" : "bg-white"), style: {
+                    }) }) })), _jsx("div", { className: clsx("flex min-w-0", isMine ? "justify-end" : "justify-start"), children: _jsxs("div", { className: clsx("flex flex-1 items-end gap-2 min-w-0", isMine ? "justify-end" : "justify-start"), children: [showSenderInfo && (_jsx("div", { className: "flex items-center justify-center w-[32px] h-[32px]", children: showSenderAvatar && (_jsx(Avatar, { src: message === null || message === void 0 ? void 0 : message.senderFaceUrl, children: ((_c = (_b = message === null || message === void 0 ? void 0 : message.senderNickname) === null || _b === void 0 ? void 0 : _b.charAt) === null || _c === void 0 ? void 0 : _c.call(_b, 0)) || "A" })) })), _jsxs("div", { className: clsx("flex flex-col max-w-[75%] min-w-0", isMine ? "items-end" : "items-start"), children: [showSenderName && showSenderInfo && (_jsx("span", { className: "text-xs font-bold mb-1 px-3 mt-2", children: message === null || message === void 0 ? void 0 : message.senderNickname })), _jsxs("div", { className: clsx("flex flex-col flex-1 w-full", isMine ? "items-end" : "items-start"), children: [(message === null || message === void 0 ? void 0 : message.quoteElem) && (_jsx(QuoteMessageItem, { message: message, isMine: isMine, onPressQuoteMessage: onPressQuoteMessage })), _jsxs("div", { className: "flex items-end gap-1.5", children: [isMine && (_jsx(MessageStatusIndicator, { message: message, isLatest: isLatestMine })), _jsx(Dropdown, { menu: { items: contextMenuItems }, trigger: hasContextMenu ? ["contextMenu"] : [], open: contextMenuOpen, onOpenChange: onContextMenuOpenChange, children: _jsxs("div", { className: clsx("px-3 py-2 rounded-2xl max-w-full min-w-0 break-normal flex flex-col flex-1 text-gray-900 gap-1 w-fit", isMine
+                                                            ? isInternalMessage
+                                                                ? "bg-orange-100"
+                                                                : "bg-blue-100"
+                                                            : isInternalMessage
+                                                                ? "bg-orange-100"
+                                                                : "bg-white"), style: {
                                                             wordBreak: "break-word",
                                                             overflowWrap: "anywhere",
                                                         }, id: `${MSG_ITEM_CONTENT_PREFIX}${message === null || message === void 0 ? void 0 : message.clientMsgID}`, children: [(message === null || message === void 0 ? void 0 : message.contentType) === MessageType.MergeMessage ? (_jsxs("div", { children: [(_e = (_d = message === null || message === void 0 ? void 0 : message.mergeElem) === null || _d === void 0 ? void 0 : _d.multiMessage) === null || _e === void 0 ? void 0 : _e.map((item) => {

package/dist/components/session/DeskAssignedSession.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DeskAssignedSession.d.ts","sourceRoot":"","sources":["../../../src/components/session/DeskAssignedSession.tsx"],"names":[],"mappings":"AAgBA,QAAA,MAAM,mBAAmB,+CA+NxB,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"DeskAssignedSession.d.ts","sourceRoot":"","sources":["../../../src/components/session/DeskAssignedSession.tsx"],"names":[],"mappings":"AAeA,QAAA,MAAM,mBAAmB,+CA2ExB,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/components/session/DeskAssignedSession.js

@@ -1,128 +1,33 @@
 "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 { Button, Layout } from "antd";
+import { useCallback, useEffect } 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";
+import DeskTeamInbox from "./DeskTeamInbox";
+import SessionFilterMenu from "./SessionFilterMenu";
 const { Sider } = Layout;
 const DeskAssignedSession = () => {
     const { t } = useTranslation();
     const [collapsed, { toggle }] = useBoolean(false);
     const setFilterSummary = useSessionStore((state) => state.setFilterSummary);
+    const filterSummary = useSessionStore((state) => state.filterSummary);
     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]);
+    const onFilterSelect = useCallback((filter) => setFilterSummary(filter), [setFilterSummary]);
     useEffect(() => {
-        emitter.on("UPDATE_SESSION", () => {
-            refetch();
-        });
+        const handler = () => refetch();
+        emitter.on("UPDATE_SESSION", handler);
         return () => {
-            emitter.off("UPDATE_SESSION", () => {
-                refetch();
-            });
+            emitter.off("UPDATE_SESSION", handler);
         };
-    }, []);
-    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 }) })] }));
+    }, [refetch]);
+    if (collapsed) {
+        return (_jsx("div", { className: "flex flex-col items-center pt-4 border-r border-gray-200 bg-white", children: _jsx(Button, { type: "text", shape: "circle", className: "text-gray-500 w-8 h-8 p-0", onClick: toggle, children: _jsx(Icon, { icon: "angle-right-o", size: 22 }) }) }));
+    }
+    return (_jsx(Sider, { collapsible: true, collapsed: false, width: 220, className: "bg-white h-full border-r border-gray-200", trigger: null, children: _jsxs("div", { className: "flex flex-col h-full", children: [_jsxs("div", { className: "flex items-center justify-between p-4 border-b shrink-0", children: [_jsx("span", { className: "text-md font-semibold flex-1 truncate", children: "Droppii Livechat" }), _jsx(Button, { type: "text", className: "text-gray-500 w-8 h-8 p-0", onClick: toggle, children: _jsx(Icon, { icon: "angle-left-o", size: 22 }) })] }), _jsxs("div", { className: "flex-1 overflow-y-auto min-h-0", children: [_jsx("div", { className: "px-4 pt-4 pb-2 text-xs font-semibold text-gray-400 tracking-wider", children: t("my_messages") }), sessionSummary && (_jsx(SessionFilterMenu, { summary: sessionSummary, isActive: !filterSummary.teamId, filterSummary: filterSummary, onFilterSelect: onFilterSelect, activeCount: sessionSummary.activeSessionCount })), _jsx(DeskTeamInbox, {})] })] }) }));
 };
 export default DeskAssignedSession;

package/dist/components/session/DeskTeamInbox.d.ts

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

package/dist/components/session/DeskTeamInbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeskTeamInbox.d.ts","sourceRoot":"","sources":["../../../src/components/session/DeskTeamInbox.tsx"],"names":[],"mappings":"AAuDA,QAAA,MAAM,aAAa,sDAyElB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/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 "../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/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/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,kBAAkB,CAAC;AAClD,OAAO,EAAE,uBAAuB,EAAE,MAAM,iBAAiB,CAAC;AAG1D,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/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/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/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,kBAAkB,CAAC;AAClD,OAAO,EAAE,uBAAuB,EAAE,MAAM,iBAAiB,CAAC;AAE1D,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/components/session/sessionMenuItems.js

@@ -0,0 +1,108 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Icon } from "../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);
+};