@droppii-org/chat-sdk 0.1.6 → 0.1.7

package/dist/components/cannedResponse/CannedResponseBody.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CannedResponseBody.d.ts","sourceRoot":"","sources":["../../../src/components/cannedResponse/CannedResponseBody.tsx"],"names":[],"mappings":"AAaA,UAAU,wBAAwB;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sBAAsB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,kBAAkB,GAAI,OAAO,wBAAwB,4CA6J1D,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"CannedResponseBody.d.ts","sourceRoot":"","sources":["../../../src/components/cannedResponse/CannedResponseBody.tsx"],"names":[],"mappings":"AAiBA,UAAU,wBAAwB;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sBAAsB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AASD,QAAA,MAAM,kBAAkB,GAAI,OAAO,wBAAwB,4CA8M1D,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/components/cannedResponse/CannedResponseBody.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Empty, Segmented, Spin } from "antd";
 import { useFetchMyTeams } from "../../hooks/team/useFetchMyTeam";
 import { useTranslation } from "react-i18next";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { CannedResponseVisibleScope } from "../../types/chat";
 import TeamItem from "./team/TeamItem";
 import { useFetchCannedResponse } from "../../hooks/cannedResponse/useFetchCannedResponse";
@@ -10,9 +10,24 @@ import InfiniteScroll from "react-infinite-scroll-component";
 import { Icon } from "../icon";
 import { sanitizeHtml } from "../../utils/common";
 import { useDebounce } from "ahooks";
+import clsx from "clsx";
+import emitter from "../../utils/events";
+import { isArray } from "lodash";
+import { useMessageFooterContext } from "../message/footer";
+const parseIndex = (index, length) => {
+    if (index === null)
+        return null;
+    if (index < 0)
+        return 0;
+    if (index >= length)
+        return length - 1;
+    return index;
+};
 const CannedResponseBody = (props) => {
     var _a, _b;
     const { search, onSelectCannedResponse, cannedQuery } = props;
+    const { activeCannedIndex, setActiveCannedIndex, setMaxActiveCannedIndex } = useMessageFooterContext();
+    const itemRefs = useRef([]);
     const { t } = useTranslation();
     const { data: myTeams, isLoading: isLoadingTeams } = useFetchMyTeams();
     const [scope, setScope] = useState(CannedResponseVisibleScope.TEAM);
@@ -25,6 +40,9 @@ const CannedResponseBody = (props) => {
         categoryId: selectedCategoryId,
         shortcut: search || cannedQueryDebounced || "",
     });
+    const validActiveCannedIndex = useMemo(() => {
+        return parseIndex(activeCannedIndex, (cannedResponses === null || cannedResponses === void 0 ? void 0 : cannedResponses.length) || 0);
+    }, [activeCannedIndex, cannedResponses === null || cannedResponses === void 0 ? void 0 : cannedResponses.length]);
     const options = useMemo(() => {
         return [
             { label: t("team"), value: CannedResponseVisibleScope.TEAM },
@@ -43,12 +61,45 @@ const CannedResponseBody = (props) => {
             setSelectedTeamId(myTeams[0].teamId);
         }
     }, [isLoadingTeams, myTeams]);
-    return (_jsxs("div", { className: "flex flex-1 flex-row h-[400px]", children: [_jsxs("div", { className: "w-[170px] p-2 border-r border-gray-200", children: [_jsx(Segmented, { options: options, block: true, size: "small", value: scope, onChange: setScope }), _jsx("div", { className: "overflow-y-auto h-full", children: scope === CannedResponseVisibleScope.TEAM && (_jsx("div", { className: "mt-1 flex flex-col", children: (_a = myTeams === null || myTeams === void 0 ? void 0 : myTeams.map) === null || _a === void 0 ? void 0 : _a.call(myTeams, (team, index) => renderTeamItem(team, index)) })) })] }), _jsxs("div", { id: "scrollableCannedDiv", className: "flex flex-col flex-1 h-full overflow-y-auto", children: [!!cannedQuery && !search && (_jsx("div", { className: "px-3 py-2 border-b border-gray-200", children: _jsxs("span", { className: "text-sm text-gray-500", children: [t("canned_response_quick_search_placeholder"), _jsx("span", { className: "text-blue-600", children: ` #${cannedQuery}` })] }) })), _jsx(InfiniteScroll, { dataLength: (cannedResponses === null || cannedResponses === void 0 ? void 0 : cannedResponses.length) || 0, next: fetchNextPage, hasMore: hasNextPage, loader: _jsx("div", { className: "flex items-center justify-center py-2", children: _jsx(Spin, {}) }), scrollableTarget: "scrollableCannedDiv", children: (cannedResponses === null || cannedResponses === void 0 ? void 0 : cannedResponses.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_canned_response") }) })) : ((_b = cannedResponses === null || cannedResponses === void 0 ? void 0 : cannedResponses.map) === null || _b === void 0 ? void 0 : _b.call(cannedResponses, (canned) => {
+    useEffect(() => {
+        const handler = (index) => {
+            var _a;
+            const validIndex = parseIndex(index, cannedResponses === null || cannedResponses === void 0 ? void 0 : cannedResponses.length);
+            if (validIndex !== null && !!(cannedResponses === null || cannedResponses === void 0 ? void 0 : cannedResponses[validIndex])) {
+                const htmlContent = ((_a = cannedResponses === null || cannedResponses === void 0 ? void 0 : cannedResponses[validIndex]) === null || _a === void 0 ? void 0 : _a.content) || "";
+                // 🔒 Sanitize HTML to prevent XSS attacks
+                const sanitizedContent = sanitizeHtml(htmlContent);
+                onSelectCannedResponse === null || onSelectCannedResponse === void 0 ? void 0 : onSelectCannedResponse(sanitizedContent);
+            }
+        };
+        emitter.on("CANNED_RESPONSE_SELECT", handler);
+        return () => {
+            emitter.off("CANNED_RESPONSE_SELECT", handler);
+        };
+    }, [cannedResponses, onSelectCannedResponse]);
+    useEffect(() => {
+        setActiveCannedIndex(0);
+    }, [search, cannedQueryDebounced, setActiveCannedIndex]);
+    useEffect(() => {
+        var _a, _b;
+        if (activeCannedIndex !== null) {
+            (_b = (_a = itemRefs.current) === null || _a === void 0 ? void 0 : _a[activeCannedIndex]) === null || _b === void 0 ? void 0 : _b.scrollIntoView({
+                block: "nearest",
+            });
+        }
+    }, [activeCannedIndex]);
+    useEffect(() => {
+        setMaxActiveCannedIndex((cannedResponses === null || cannedResponses === void 0 ? void 0 : cannedResponses.length) - 1 > 0 ? (cannedResponses === null || cannedResponses === void 0 ? void 0 : cannedResponses.length) - 1 : 0);
+    }, [cannedResponses, setMaxActiveCannedIndex]);
+    return (_jsxs("div", { className: "flex flex-1 flex-row h-[400px]", children: [_jsxs("div", { className: "w-[170px] p-2 border-r border-gray-200", children: [_jsx(Segmented, { options: options, block: true, size: "small", value: scope, onChange: setScope }), _jsx("div", { className: "overflow-y-auto h-full", children: scope === CannedResponseVisibleScope.TEAM && (_jsx("div", { className: "mt-1 flex flex-col", children: (_a = myTeams === null || myTeams === void 0 ? void 0 : myTeams.map) === null || _a === void 0 ? void 0 : _a.call(myTeams, (team, index) => renderTeamItem(team, index)) })) })] }), _jsxs("div", { id: "scrollableCannedDiv", className: "flex flex-col flex-1 h-full overflow-y-auto", children: [!!cannedQuery && !search && (_jsx("div", { className: "px-3 py-2 border-b border-gray-200", children: _jsxs("span", { className: "text-sm text-gray-500", children: [t("canned_response_quick_search_placeholder"), _jsx("span", { className: "text-blue-600", children: ` #${cannedQuery}` })] }) })), _jsx(InfiniteScroll, { dataLength: (cannedResponses === null || cannedResponses === void 0 ? void 0 : cannedResponses.length) || 0, next: fetchNextPage, hasMore: hasNextPage, loader: _jsx("div", { className: "flex items-center justify-center py-2", children: _jsx(Spin, {}) }), scrollableTarget: "scrollableCannedDiv", children: !isArray(cannedResponses) || (cannedResponses === null || cannedResponses === void 0 ? void 0 : cannedResponses.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_canned_response") }) })) : ((_b = cannedResponses === null || cannedResponses === void 0 ? void 0 : cannedResponses.map) === null || _b === void 0 ? void 0 : _b.call(cannedResponses, (canned, index) => {
                             var _a, _b;
+                            const isActive = index === validActiveCannedIndex;
                             const htmlContent = (canned === null || canned === void 0 ? void 0 : canned.content) || "";
                             // 🔒 Sanitize HTML to prevent XSS attacks
                             const sanitizedContent = sanitizeHtml(htmlContent);
-                            return (_jsxs("div", { className: "flex flex-col flex-1 px-3 py-2 cursor-pointer hover:bg-blue-100 w-full border-b border-gray-200", onClick: () => onSelectCannedResponse === null || onSelectCannedResponse === void 0 ? void 0 : onSelectCannedResponse(sanitizedContent), children: [_jsxs("span", { className: "text-xs truncate text-gray-500", children: [`${((_a = canned === null || canned === void 0 ? void 0 : canned.category) === null || _a === void 0 ? void 0 : _a.name)
+                            return (_jsxs("div", { ref: (el) => {
+                                    itemRefs.current[index] = el;
+                                }, className: clsx("flex flex-col flex-1 px-3 py-2 cursor-pointer hover:bg-blue-100 w-full border-b border-gray-200", isActive && "bg-blue-100"), onClick: () => onSelectCannedResponse === null || onSelectCannedResponse === void 0 ? void 0 : onSelectCannedResponse(sanitizedContent), children: [_jsxs("span", { className: "text-xs truncate text-gray-500", children: [`${((_a = canned === null || canned === void 0 ? void 0 : canned.category) === null || _a === void 0 ? void 0 : _a.name)
                                                 ? `${(_b = canned === null || canned === void 0 ? void 0 : canned.category) === null || _b === void 0 ? void 0 : _b.name} / `
                                                 : ""}`, _jsx("span", { className: "text-black", children: `${(canned === null || canned === void 0 ? void 0 : canned.name) || ""} ` }), _jsx("span", { children: "/" }), _jsx("span", { className: "text-blue-500", children: ` #${(canned === null || canned === void 0 ? void 0 : canned.shortcut) || ""}` })] }), _jsx("div", { dangerouslySetInnerHTML: {
                                             __html: sanitizedContent,

package/dist/components/conversation/ConversationBySessionItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConversationBySessionItem.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/ConversationBySessionItem.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAQpD,UAAU,8BAA8B;IACtC,WAAW,EAAE,gBAAgB,CAAC;CAC/B;AAED,QAAA,MAAM,yBAAyB,GAAI,kBAEhC,8BAA8B,mDA2FhC,CAAC;AAEF,eAAe,yBAAyB,CAAC"}
+{"version":3,"file":"ConversationBySessionItem.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/ConversationBySessionItem.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AASpD,UAAU,8BAA8B;IACtC,WAAW,EAAE,gBAAgB,CAAC;CAC/B;AAED,QAAA,MAAM,yBAAyB,GAAI,kBAEhC,8BAA8B,mDAgGhC,CAAC;AAEF,eAAe,yBAAyB,CAAC"}

package/dist/components/conversation/ConversationBySessionItem.js

@@ -6,6 +6,7 @@ import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { Avatar, Badge } from "antd";
 import { useChatContext } from "../../context/ChatContext";
 import { useConversationDisplayData } from "../../hooks/conversation/useConversation";
+import { useConversationPreview } from "../../hooks/conversation/useConversationPreview";
 import { formatTimestamp, parseLatestMessage } from "../../utils/common";
 const ConversationBySessionItem = ({ sessionItem, }) => {
     var _a;
@@ -30,10 +31,14 @@ const ConversationBySessionItem = ({ sessionItem, }) => {
         setSelectedConversationId(conversation.conversationID);
     };
     const { avatar, displayName = "" } = useConversationDisplayData(conversation || null);
+    const { latestMsg, latestMsgSendTime } = useConversationPreview({
+        conversation,
+        ownerUserID: sessionItem.ownerId,
+    });
     if (!conversation)
         return null;
-    return (_jsxs("div", { onClick: () => handleConversationClick(conversation), className: `relative p-3 border-b border-gray-100 hover:bg-gray-100 cursor-pointer transition-colors ${isSelected ? "bg-blue-50" : "bg-white"}`, children: [isSelected && (_jsx("div", { className: "absolute left-0 top-0 bottom-0 w-1 bg-blue-500" })), _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "relative flex-shrink-0", children: _jsx(Badge, { dot: true, status: "success", offset: [-2, 36], children: _jsx(Avatar, { size: 48, src: avatar, children: ((_a = displayName === null || displayName === void 0 ? void 0 : displayName.charAt) === null || _a === void 0 ? void 0 : _a.call(displayName, 0)) || "A" }) }) }), _jsx("div", { className: "flex-1 min-w-0", children: _jsxs("div", { className: "flex items-start justify-between", children: [_jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("h3", { className: "font-semibold text-gray-900 text-sm truncate", children: displayName }), _jsx("p", { className: "text-xs text-gray-500 truncate mt-0.5", children: parseLatestMessage(conversation.latestMsg, user === null || user === void 0 ? void 0 : user.userID, t) })] }), _jsxs("div", { className: "flex flex-col items-end gap-1 ml-2", children: [_jsx("span", { className: "text-xs text-gray-400", children: formatTimestamp(conversation.latestMsgSendTime, {
+    return (_jsxs("div", { onClick: () => handleConversationClick(conversation), className: `relative p-3 border-b border-gray-100 hover:bg-gray-100 cursor-pointer transition-colors ${isSelected ? "bg-blue-50" : "bg-white"}`, children: [isSelected && (_jsx("div", { className: "absolute left-0 top-0 bottom-0 w-1 bg-blue-500" })), _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "relative flex-shrink-0", children: _jsx(Badge, { dot: true, status: "success", offset: [-2, 36], children: _jsx(Avatar, { size: 48, src: avatar, children: ((_a = displayName === null || displayName === void 0 ? void 0 : displayName.charAt) === null || _a === void 0 ? void 0 : _a.call(displayName, 0)) || "A" }) }) }), _jsx("div", { className: "flex-1 min-w-0", children: _jsxs("div", { className: "flex items-start justify-between", children: [_jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("h3", { className: "font-semibold text-gray-900 text-sm truncate", children: displayName }), _jsx("p", { className: "text-xs text-gray-500 truncate mt-0.5", children: parseLatestMessage(latestMsg, user === null || user === void 0 ? void 0 : user.userID, t) })] }), _jsxs("div", { className: "flex flex-col items-end gap-1 ml-2", children: [latestMsgSendTime > 0 && (_jsx("span", { className: "text-xs text-gray-400", children: formatTimestamp(latestMsgSendTime, {
                                                 hasTime: true,
-                                            }) }), _jsx("div", { className: "flex items-center gap-1", children: conversation.unreadCount > 0 && (_jsx(Badge, { count: conversation.unreadCount })) })] })] }) })] })] }, conversation.conversationID));
+                                            }) })), _jsx("div", { className: "flex items-center gap-1", children: conversation.unreadCount > 0 && (_jsx(Badge, { count: conversation.unreadCount })) })] })] }) })] })] }, conversation.conversationID));
 };
 export default ConversationBySessionItem;

package/dist/components/conversation/DeskConversationList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DeskConversationList.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/DeskConversationList.tsx"],"names":[],"mappings":"AAkBA,QAAA,MAAM,oBAAoB,+CAwLzB,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"DeskConversationList.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/DeskConversationList.tsx"],"names":[],"mappings":"AAoBA,QAAA,MAAM,oBAAoB,+CAoMzB,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/dist/components/conversation/DeskConversationList.js

@@ -12,10 +12,12 @@ import useSessionStore from "../../store/session";
 import InfiniteScroll from "react-infinite-scroll-component";
 import ConversationBySessionItem from "./ConversationBySessionItem";
 import { useGetSession } from "../../hooks/session/useGetSession";
+import { useGetTeamSessionSummary } from "../../hooks/session/useGetTeamSessionSummary";
 import { DChatSDK } from "../../constants/sdk";
 import emitter from "../../utils/events";
+import { getFilterConfig } from "../session/sessionMenuItems";
 const DeskConversationList = () => {
-    var _a;
+    var _a, _b;
     const searchInputRef = useRef(null);
     const { t } = useTranslation();
     const [search, setSearch] = useState("");
@@ -26,9 +28,13 @@ const DeskConversationList = () => {
     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 { data: teamSummaries } = useGetTeamSessionSummary();
+    const { dataFlatten: sessions, hasNextPage, fetchNextPage, refetch } = useGetSession({ filter: filterSummary });
+    const currentFilterKey = filterSummary.status || filterSummary.tag || "";
+    const filterConfig = getFilterConfig(currentFilterKey);
+    const pathName = filterSummary.teamId
+        ? ((_a = teamSummaries === null || teamSummaries === void 0 ? void 0 : teamSummaries.find((team) => team.teamId === filterSummary.teamId)) === null || _a === void 0 ? void 0 : _a.teamName) || ""
+        : t("my_messages");
     const debouncedSearch = useDebounce(search, { wait: 500 });
     const onCloseSearch = () => {
         setSearch("");
@@ -65,28 +71,27 @@ const DeskConversationList = () => {
         }
     }, [searchParams, conversationList]);
     useEffect(() => {
-        emitter.on("UPDATE_SESSION", (sessionUpdated) => {
+        const handler = (sessionUpdated) => {
             if (sessionUpdated.status !== filterSummary.status ||
                 sessionUpdated.tag !== filterSummary.tag) {
                 refetch();
             }
-        });
+        };
+        emitter.on("UPDATE_SESSION", handler);
         return () => {
-            emitter.off("UPDATE_SESSION", () => {
-                refetch();
-            });
+            emitter.off("UPDATE_SESSION", handler);
         };
-    }, [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: {
+    }, [filterSummary, refetch]);
+    return (_jsxs("div", { className: "flex flex-col h-full bg-white border-r border-gray-200 w-[320px]", children: [_jsxs("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", { className: "flex items-center justify-between mt-2", children: [_jsx("span", { className: "text-sm font-semibold text-blue-500 truncate", children: pathName }), filterConfig && (_jsxs("span", { className: "flex items-center gap-1.5 shrink-0", children: [_jsx(Icon, { icon: filterConfig.iconName, size: 16, className: "text-gray-500" }), _jsx("span", { className: "text-sm font-semibold text-gray-800", children: t(filterConfig.labelKey) })] }))] })] }), _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: {
+                }, 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") }) })) : ((_b = sessions === null || sessions === void 0 ? void 0 : sessions.map) === null || _b === void 0 ? void 0 : _b.call(sessions, (session) => (_jsx(ConversationBySessionItem, { sessionItem: session }, session.conversationId)))) }), _jsx(Drawer, { open: showSearch, mask: false, closeIcon: false, styles: {
                             body: {
                                 padding: 0,
                             },

package/dist/components/message/MessageHeader.d.ts

@@ -1,8 +1,8 @@
 import { SessionStatus, SessionTag } from "../../types/chat";
-import { ISessionByStatus } from "../../store/type";
+import { ISessionResponse } from "../../types/dto";
 interface MessageHeaderProps {
     onClose?: () => void;
-    currentSession?: ISessionByStatus;
+    currentSession?: ISessionResponse;
 }
 type SelectSessionValueType = SessionStatus | SessionTag;
 export interface SelectSessionOption {

package/dist/components/message/MessageHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageHeader.d.ts","sourceRoot":"","sources":["../../../src/components/message/MessageHeader.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAG7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAIpD,UAAU,kBAAkB;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,cAAc,CAAC,EAAE,gBAAgB,CAAC;CACnC;AAED,KAAK,sBAAsB,GAAG,aAAa,GAAG,UAAU,CAAC;AAEzD,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,sBAAsB,CAAC;IAC9B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,oBAAoB,EAAE,MAAM,CAAC;CAC9B;AAED,QAAA,MAAM,aAAa,GAAI,6BAA6B,kBAAkB,4CA4LrE,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"MessageHeader.d.ts","sourceRoot":"","sources":["../../../src/components/message/MessageHeader.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAG7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAKnD,UAAU,kBAAkB;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,cAAc,CAAC,EAAE,gBAAgB,CAAC;CACnC;AAED,KAAK,sBAAsB,GAAG,aAAa,GAAG,UAAU,CAAC;AAEzD,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,sBAAsB,CAAC;IAC9B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,oBAAoB,EAAE,MAAM,CAAC;CAC9B;AAED,QAAA,MAAM,aAAa,GAAI,6BAA6B,kBAAkB,4CAoMrE,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/message/MessageHeader.js

@@ -12,13 +12,16 @@ import SelectSession from "./SelectSession";
 import { useUpdateSession } from "../../hooks/session/useUpdateSession";
 import useAuthStore from "../../store/auth";
 import SearchDrawer from "../searchConversation/SearchDrawer";
+import { isGroupSession } from "../../utils/imCommon";
 const MessageHeader = ({ onClose, currentSession }) => {
-    var _a;
+    var _a, _b;
     const { t } = useTranslation();
     const isCx = useAuthStore((state) => state.isCx);
     const conversationData = useConversationStore((state) => state.conversationData);
+    const currentGroupInfo = useConversationStore((state) => state.currentGroupInfo);
     const { mutate: updateSession } = useUpdateSession();
     const { avatar, displayName } = useConversationDisplayData(conversationData);
+    const shouldShowMemberCount = isGroupSession(conversationData === null || conversationData === void 0 ? void 0 : conversationData.conversationType);
     const [currentSessionStatus, setCurrentSessionStatus] = useState(SessionStatus.UNASSIGNED);
     const [currentSessionTag, setCurrentSessionTag] = useState(SessionTag.NONE);
     const statusOptions = useMemo(() => {
@@ -122,6 +125,6 @@ const MessageHeader = ({ onClose, currentSession }) => {
             setCurrentSessionStatus(currentSession.status);
         }
     }, [currentSession]);
-    return (_jsxs("div", { className: "px-4 py-3 flex items-center border-b gap-3 bg-white flex-wrap", children: [_jsx(Avatar, { src: avatar, size: "large", className: "min-w-10 min-h-10", children: ((_a = displayName === null || displayName === void 0 ? void 0 : displayName.charAt) === null || _a === void 0 ? void 0 : _a.call(displayName, 0)) || "A" }), _jsxs("div", { className: "flex flex-col overflow-hidden flex-1", children: [_jsx("p", { className: "text-base truncate", children: displayName || "" }), _jsx("p", { className: "text-xs text-gray-500 truncate", children: t("member_count", { count: 2 }) })] }), _jsxs("div", { className: "flex items-center gap-2 justify-end overflow-hidden", children: [isCx && (_jsx(SelectSession, { placeholder: t("select_tag"), options: tagOptions, value: currentSessionTag, onChange: (value) => handleUpdateSession(value, "tag", value === currentSessionTag), excludeOptions: [SessionTag.SLOW_PROCESSING, SessionTag.NONE] })), isCx && (_jsx(SelectSession, { placeholder: t("select_status"), options: statusOptions, value: currentSessionStatus, onChange: (value) => handleUpdateSession(value, "status", value === currentSessionStatus) })), _jsx(SearchDrawer, {}), _jsx(MediaCollection, {}), _jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", children: _jsx(Icon, { icon: "align-justify-o", size: 22 }) }), !!onClose && (_jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", onClick: onClose, children: _jsx(Icon, { icon: "close-b", size: 22 }) }))] })] }));
+    return (_jsxs("div", { className: "px-4 py-3 flex items-center border-b gap-3 bg-white flex-wrap", children: [_jsx(Avatar, { src: avatar, size: "large", className: "min-w-10 min-h-10", children: ((_a = displayName === null || displayName === void 0 ? void 0 : displayName.charAt) === null || _a === void 0 ? void 0 : _a.call(displayName, 0)) || "A" }), _jsxs("div", { className: "flex flex-col overflow-hidden flex-1", children: [_jsx("p", { className: "text-base truncate", children: displayName || "" }), shouldShowMemberCount && (_jsx("p", { className: "text-xs text-gray-500 truncate", children: t("member_count", { count: (_b = currentGroupInfo === null || currentGroupInfo === void 0 ? void 0 : currentGroupInfo.memberCount) !== null && _b !== void 0 ? _b : 0 }) }))] }), _jsxs("div", { className: "flex items-center gap-2 justify-end overflow-hidden", children: [isCx && (_jsx(SelectSession, { placeholder: t("select_tag"), options: tagOptions, value: currentSessionTag, onChange: (value) => handleUpdateSession(value, "tag", value === currentSessionTag), excludeOptions: [SessionTag.SLOW_PROCESSING, SessionTag.NONE] })), isCx && (_jsx(SelectSession, { placeholder: t("select_status"), options: statusOptions, value: currentSessionStatus, onChange: (value) => handleUpdateSession(value, "status", value === currentSessionStatus) })), _jsx(SearchDrawer, {}), _jsx(MediaCollection, {}), _jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", children: _jsx(Icon, { icon: "align-justify-o", size: 22 }) }), !!onClose && (_jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", onClick: onClose, children: _jsx(Icon, { icon: "close-b", size: 22 }) }))] })] }));
 };
 export default MessageHeader;

package/dist/components/message/MessageList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageList.d.ts","sourceRoot":"","sources":["../../../src/components/message/MessageList.tsx"],"names":[],"mappings":"AAyBA,UAAU,gBAAgB;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;CACpC;AAGD,QAAA,MAAM,WAAW,GAAI,OAAO,gBAAgB,4CAiT3C,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"MessageList.d.ts","sourceRoot":"","sources":["../../../src/components/message/MessageList.tsx"],"names":[],"mappings":"AA0BA,UAAU,gBAAgB;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;CACpC;AAGD,QAAA,MAAM,WAAW,GAAI,OAAO,gBAAgB,4CA4U3C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/message/MessageList.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMessage } from "../../hooks/message/useMessage";
-import { Empty, Modal, Spin } from "antd";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useConversationMessages } from "../../hooks/message/useConversationMessages";
+import { Button, Empty, Modal, Spin } from "antd";
+import { useCallback, useEffect, useRef, useState } from "react";
 import dayjs from "dayjs";
 import isToday from "dayjs/plugin/isToday";
 import emitter from "../../utils/events";
@@ -18,8 +18,9 @@ import { useBoolean, useDebounceFn } from "ahooks";
 import { MSG_ITEM_CONTENT_PREFIX, MSG_ITEM_PREFIX } from "../../constants";
 import { markConversationMessageAsRead } from "../../hooks/conversation/useConversation";
 import { useChatContext } from "../../context/ChatContext";
-import { useGetSession } from "../../hooks/session/useGetSession";
 import { useRevokeMessage } from "../../hooks/message/useRevokeMessage";
+import { useConversationSessionState } from "../../hooks/session/useConversationSessionState";
+import { useJoinGroupFlow } from "../../hooks/session/useJoinGroupFlow";
 dayjs.extend(isToday);
 const BOTTOM_THRESHOLD = -5;
 const MessageList = (props) => {
@@ -28,19 +29,31 @@ const MessageList = (props) => {
     const { user } = useChatContext();
     const { onClose, conversationId, searchClientMsgID, openCreateCannedModal } = props;
     const scrollRef = useRef(null);
-    const { getMoreOldMessages, moreOldLoading, loadState, getMoreNewMessages, moreNewLoading, latestLoadState, } = useMessage(conversationId, searchClientMsgID);
     const conversationData = useConversationStore((state) => state.conversationData);
     const setQuotedMessage = useConversationStore((state) => state.setQuotedMessage);
     const setSearchClientMsgID = useConversationStore((state) => state.setSearchClientMsgID);
-    const { dataFlatten: sessions, refetch: refetchSession } = useGetSession({
-        filter: {
-            conversationIds: !!conversationId ? [conversationId] : [],
-        },
-    });
     const [openMenuId, setOpenMenuId] = useState(null);
     const [selectedItem, setSelectedItem] = useState(null);
     const [showConfirmRevoke, { setTrue: openConfirmRevoke, setFalse: closeConfirmRevoke },] = useBoolean(false);
     const { revokeMessage, loading: isRevoking } = useRevokeMessage();
+    const { isNotGroupMember, latestConversationSession, customerUserID, refetchConversationSessions, refetchIsJoined, } = useConversationSessionState({
+        conversationId,
+        conversationType: conversationData === null || conversationData === void 0 ? void 0 : conversationData.conversationType,
+        groupId: conversationData === null || conversationData === void 0 ? void 0 : conversationData.groupID,
+        userID: user === null || user === void 0 ? void 0 : user.userID,
+    });
+    const { getMoreOldMessages, moreOldLoading, loadState, getMoreNewMessages, moreNewLoading, latestLoadState, } = useConversationMessages({
+        conversationId,
+        searchClientMsgID,
+        restrictToLastSession: isNotGroupMember,
+        customerUserID,
+    });
+    const { handleJoinGroup, isJoining } = useJoinGroupFlow({
+        groupId: conversationData === null || conversationData === void 0 ? void 0 : conversationData.groupID,
+        latestConversationSessionId: latestConversationSession === null || latestConversationSession === void 0 ? void 0 : latestConversationSession.id,
+        refetchConversationSessions,
+        refetchIsJoined,
+    });
     const handleOpenRevoke = useCallback((clientMsgID) => {
         setSelectedItem(clientMsgID);
         openConfirmRevoke();
@@ -58,9 +71,6 @@ const MessageList = (props) => {
         revokeMessage,
         handleCloseRevoke,
     ]);
-    const currentSession = useMemo(() => {
-        return sessions === null || sessions === void 0 ? void 0 : sessions.find((session) => session.conversationId === conversationId);
-    }, [sessions, conversationId]);
     const handleMarkConversationMessageAsRead = () => {
         var _a, _b, _c, _d, _e;
         const lastMessage = (_b = (_a = latestLoadState === null || latestLoadState === void 0 ? void 0 : latestLoadState.current) === null || _a === void 0 ? void 0 : _a.messageList) === null || _b === void 0 ? void 0 : _b[0];
@@ -136,17 +146,16 @@ const MessageList = (props) => {
         };
     }, []);
     useEffect(() => {
-        emitter.on("UPDATE_SESSION", (sessionUpdated) => {
+        const handler = (sessionUpdated) => {
             if (sessionUpdated.conversationId === conversationId) {
-                refetchSession();
+                refetchConversationSessions();
             }
-        });
+        };
+        emitter.on("UPDATE_SESSION", handler);
         return () => {
-            emitter.off("UPDATE_SESSION", () => {
-                refetchSession();
-            });
+            emitter.off("UPDATE_SESSION", handler);
         };
-    }, [conversationId]);
+    }, [conversationId, refetchConversationSessions]);
     useEffect(() => {
         if (!loadState.hasMoreNew && !loadState.initLoading) {
             handleMarkConversationMessageAsRead();
@@ -174,7 +183,7 @@ const MessageList = (props) => {
             backgroundSize: "cover",
             backgroundPosition: "center",
             overflowX: "hidden",
-        }, children: [_jsx(MessageHeader, { onClose: onClose, currentSession: currentSession }), _jsx("div", { id: "scrollableMessagesDiv", ref: scrollRef, style: {
+        }, children: [_jsx(MessageHeader, { onClose: onClose, currentSession: latestConversationSession }), _jsx("div", { id: "scrollableMessagesDiv", ref: scrollRef, style: {
                     height: "100%",
                     overflowY: "auto",
                     overflowX: "hidden",
@@ -192,6 +201,6 @@ const MessageList = (props) => {
                             handleMarkConversationMessageAsRead();
                             loadMoreNewMessage();
                         }
-                    }, children: loadState.messageList.map((message, _, array) => (_jsx(MessageItem, { message: message, allMessages: array, contextMenuOpen: openMenuId === message.clientMsgID, onContextMenuOpenChange: (open) => setOpenMenuId(open ? message.clientMsgID : null), onRevokeMessage: handleOpenRevoke, onQuoteMessage: setQuotedMessage, onPressQuoteMessage: onPressQuoteMessage }, message.clientMsgID))) }) }), moreNewLoading && (_jsx("div", { className: "flex items-center justify-center py-2", children: _jsx(Spin, {}) })), _jsx(MessageFooter, { currentSession: currentSession, openCreateCannedModal: openCreateCannedModal }), _jsx(Modal, { centered: true, open: showConfirmRevoke, onOk: onRevokeMessage, onCancel: handleCloseRevoke, title: t("revoke_message_confirm_title"), okText: t("revoke"), cancelText: t("cancel"), okType: "danger", confirmLoading: isRevoking, getContainer: false, forceRender: true, children: _jsx("p", { children: t("revoke_message_confirm_message") }) })] }));
+                    }, children: loadState.messageList.map((message, _, array) => (_jsx(MessageItem, { message: message, allMessages: array, contextMenuOpen: openMenuId === message.clientMsgID, onContextMenuOpenChange: (open) => setOpenMenuId(open ? message.clientMsgID : null), onRevokeMessage: handleOpenRevoke, onQuoteMessage: setQuotedMessage, onPressQuoteMessage: onPressQuoteMessage }, message.clientMsgID))) }) }), moreNewLoading && (_jsx("div", { className: "flex items-center justify-center py-2", children: _jsx(Spin, {}) })), isNotGroupMember ? (_jsxs("div", { className: "border-t bg-white py-4 flex flex-col items-center gap-2", children: [_jsx("p", { className: "text-sm text-gray-500", children: t("join_group_required") }), _jsx(Button, { type: "primary", onClick: handleJoinGroup, loading: isJoining, children: t("join_group") })] })) : (_jsx(MessageFooter, { currentSession: latestConversationSession, openCreateCannedModal: openCreateCannedModal })), _jsx(Modal, { centered: true, open: showConfirmRevoke, onOk: onRevokeMessage, onCancel: handleCloseRevoke, title: t("revoke_message_confirm_title"), okText: t("revoke"), cancelText: t("cancel"), okType: "danger", confirmLoading: isRevoking, getContainer: false, forceRender: true, children: _jsx("p", { children: t("revoke_message_confirm_message") }) })] }));
 };
 export default MessageList;

package/dist/components/message/SelectSession.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectSession.d.ts","sourceRoot":"","sources":["../../../src/components/message/SelectSession.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAE3D,UAAU,kBAAkB;IAC1B,OAAO,EAAE,mBAAmB,EAAE,CAAC;IAC/B,KAAK,EAAE,mBAAmB,CAAC,OAAO,CAAC,CAAC;IACpC,QAAQ,EAAE,CAAC,KAAK,EAAE,mBAAmB,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IACxD,cAAc,CAAC,EAAE,mBAAmB,CAAC,OAAO,CAAC,EAAE,CAAC;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,aAAa,GAAI,4DAMpB,kBAAkB,4CAwDpB,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"SelectSession.d.ts","sourceRoot":"","sources":["../../../src/components/message/SelectSession.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAE3D,UAAU,kBAAkB;IAC1B,OAAO,EAAE,mBAAmB,EAAE,CAAC;IAC/B,KAAK,EAAE,mBAAmB,CAAC,OAAO,CAAC,CAAC;IACpC,QAAQ,EAAE,CAAC,KAAK,EAAE,mBAAmB,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IACxD,cAAc,CAAC,EAAE,mBAAmB,CAAC,OAAO,CAAC,EAAE,CAAC;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,aAAa,GAAI,4DAMpB,kBAAkB,4CAwDpB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/message/SelectSession.js

@@ -3,23 +3,21 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Select } from "antd";
 import { Icon } from "../icon";
 import clsx from "clsx";
-import { useTranslation } from "react-i18next";
 const SelectSession = ({ options, value, onChange, excludeOptions, placeholder, }) => {
-    const { t } = useTranslation();
     const selectedOption = options.find((option) => option.value === value);
-    // Filter out excluded options
-    const filteredOptions = options.filter((option) => !(excludeOptions === null || excludeOptions === void 0 ? void 0 : excludeOptions.includes(option.value)));
-    // Transform options for Ant Design Select
+    const renderOptionLabel = (option) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: clsx("w-2 h-2 rounded-full", option.tintColorClassnameBg) }), _jsx("span", { className: clsx("text-xs truncate flex-1", option.tintColorClassname), children: option.label })] }));
+    const filteredOptions = options.filter((option) => option.value === value || !(excludeOptions === null || excludeOptions === void 0 ? void 0 : excludeOptions.includes(option.value)));
     const selectOptions = filteredOptions.map((option) => ({
-        label: (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: clsx("w-2 h-2 rounded-full", option.tintColorClassnameBg) }), _jsx("span", { className: clsx("text-xs truncate flex-1", option.tintColorClassname), children: option.label })] })),
+        label: renderOptionLabel(option),
         value: option.value,
     }));
-    // Handle selection change
     const handleSelect = (val) => {
         onChange(val);
     };
-    return (_jsx("div", { className: "relative", children: _jsx(Select, { className: `${selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.bgTintColorClassname} custom-select min-w-[100px]`, placement: "bottomLeft", placeholder: placeholder, options: selectOptions, value: selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value, onSelect: handleSelect, suffixIcon: _jsx(Icon, { icon: "angle-down-o", className: `${selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.tintColorClassname} mt-[2px]`, size: 14 }), menuItemSelectedIcon: null, labelRender: (option) => ["NONE", ""].includes(option.value)
+    return (_jsx("div", { className: "relative", children: _jsx(Select, { className: `${selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.bgTintColorClassname} custom-select min-w-[100px]`, placement: "bottomLeft", placeholder: placeholder, options: selectOptions, value: selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value, onSelect: handleSelect, suffixIcon: _jsx(Icon, { icon: "angle-down-o", className: `${selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.tintColorClassname} mt-[2px]`, size: 14 }), menuItemSelectedIcon: null, labelRender: () => ["NONE", ""].includes(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value)
                 ? placeholder
-                : option.label }) }));
+                : selectedOption
+                    ? renderOptionLabel(selectedOption)
+                    : undefined }) }));
 };
 export default SelectSession;

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

@@ -1 +1 @@
-{"version":3,"file":"ActionBar.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/ActionBar.tsx"],"names":[],"mappings":"AAsBA,QAAA,MAAM,SAAS,+CA0Gd,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"ActionBar.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/ActionBar.tsx"],"names":[],"mappings":"AAsBA,QAAA,MAAM,SAAS,+CA2Gd,CAAC;AAEF,eAAe,SAAS,CAAC"}

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

@@ -13,7 +13,7 @@ import MediaActions from "./MediaActions";
 import useConversationStore from "../../../store/conversation";
 const ActionBar = () => {
     const [editor] = useLexicalComposerContext();
-    const { onSendMessage, listUploadFiles, setListUploadFiles } = useMessageFooterContext();
+    const { onSendMessage, isInternal, listUploadFiles, setListUploadFiles } = useMessageFooterContext();
     const quotedMessage = useConversationStore((state) => state.quotedMessage);
     const [isEmptyInput, setIsEmptyInput] = useState(true);
     const canSend = useMemo(() => {
@@ -34,6 +34,7 @@ const ActionBar = () => {
                 plainText,
                 richText,
                 type: listUploadFiles.length > 0 ? "file" : "text",
+                isInternal,
             });
         }
         editor.update(() => {
@@ -71,7 +72,7 @@ const ActionBar = () => {
                 }
             }
         });
-    }, [editor, onSendMessage, canSend]);
+    }, [editor, onSendMessage, canSend, isInternal, listUploadFiles.length]);
     useEffect(() => {
         return editor.registerUpdateListener(({ editorState }) => {
             editorState.read(() => {

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

@@ -1 +1 @@
-{"version":3,"file":"CannedResponsePlugin.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/CannedResponsePlugin.tsx"],"names":[],"mappings":"AAIA,KAAK,KAAK,GAAG;IACX,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,wBAAgB,2BAA2B,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,KAAK,QAiCrE"}
+{"version":3,"file":"CannedResponsePlugin.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/CannedResponsePlugin.tsx"],"names":[],"mappings":"AAWA,KAAK,KAAK,GAAG;IACX,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,wBAAgB,2BAA2B,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,KAAK,QAsFrE"}

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

@@ -1,8 +1,10 @@
 import { useEffect } from "react";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import { $getSelection, $isRangeSelection } from "lexical";
+import { $getSelection, $isRangeSelection, COMMAND_PRIORITY_LOW, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_UP_COMMAND, } from "lexical";
+import { useMessageFooterContext } from ".";
 export function CannedResponseTriggerPlugin({ onOpen, onClose }) {
     const [editor] = useLexicalComposerContext();
+    const { activeCannedIndex, setActiveCannedIndex, isOpenCanned, maxActiveCannedIndex, } = useMessageFooterContext();
     useEffect(() => {
         return editor.registerUpdateListener(({ editorState }) => {
             editorState.read(() => {
@@ -27,5 +29,39 @@ export function CannedResponseTriggerPlugin({ onOpen, onClose }) {
             });
         });
     }, [editor, onOpen, onClose]);
+    useEffect(() => {
+        const unregisterUp = editor.registerCommand(KEY_ARROW_UP_COMMAND, (e) => {
+            if (!isOpenCanned)
+                return false;
+            e.preventDefault();
+            setActiveCannedIndex(activeCannedIndex === null
+                ? null
+                : activeCannedIndex - 1 < 0
+                    ? 0
+                    : activeCannedIndex - 1);
+            return true;
+        }, COMMAND_PRIORITY_LOW);
+        const unregisterDown = editor.registerCommand(KEY_ARROW_DOWN_COMMAND, (e) => {
+            if (!isOpenCanned)
+                return false;
+            e.preventDefault();
+            setActiveCannedIndex(activeCannedIndex === null
+                ? 0
+                : activeCannedIndex + 1 > maxActiveCannedIndex
+                    ? maxActiveCannedIndex
+                    : activeCannedIndex + 1);
+            return true;
+        }, COMMAND_PRIORITY_LOW);
+        return () => {
+            unregisterUp();
+            unregisterDown();
+        };
+    }, [
+        editor,
+        isOpenCanned,
+        activeCannedIndex,
+        setActiveCannedIndex,
+        maxActiveCannedIndex,
+    ]);
     return null;
 }

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

@@ -0,0 +1,7 @@
+interface ComposerEditorProps {
+    isInternal: boolean;
+    placeholderText: string;
+}
+declare const ComposerEditor: ({ isInternal, placeholderText, }: ComposerEditorProps) => import("react/jsx-runtime").JSX.Element;
+export default ComposerEditor;
+//# sourceMappingURL=ComposerEditor.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ComposerEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/ComposerEditor.tsx"],"names":[],"mappings":"AAOA,UAAU,mBAAmB;IAC3B,UAAU,EAAE,OAAO,CAAC;IACpB,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,QAAA,MAAM,cAAc,GAAI,kCAGrB,mBAAmB,4CAwBrB,CAAC;AAEF,eAAe,cAAc,CAAC"}

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

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
+import clsx from "clsx";
+const ComposerEditor = ({ isInternal, placeholderText, }) => {
+    const editorClasses = clsx("min-h-[64px] max-h-[140px] overflow-y-auto rounded-md border px-3 py-2 text-sm", isInternal
+        ? "border-orange-300 bg-orange-50"
+        : "border-indigo-500 bg-blue-100");
+    return (_jsx("div", { className: "px-4", children: _jsx("div", { className: "relative", children: _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: editorClasses }), ErrorBoundary: LexicalErrorBoundary, "aria-placeholder": placeholderText, placeholder: _jsx("div", { className: "absolute left-3 top-2 pointer-events-none", children: _jsx("p", { className: "text-gray-500 text-sm", children: placeholderText }) }) }) }) }));
+};
+export default ComposerEditor;

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

@@ -0,0 +1,9 @@
+interface ComposerTabsProps {
+    canUseInternal: boolean;
+    hintText: string;
+    isInternal: boolean;
+    setIsInternal: (isInternal: boolean) => void;
+}
+declare const ComposerTabs: ({ canUseInternal, hintText, isInternal, setIsInternal, }: ComposerTabsProps) => import("react/jsx-runtime").JSX.Element | null;
+export default ComposerTabs;
+//# sourceMappingURL=ComposerTabs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ComposerTabs.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/ComposerTabs.tsx"],"names":[],"mappings":"AAOA,UAAU,iBAAiB;IACzB,cAAc,EAAE,OAAO,CAAC;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C;AAeD,QAAA,MAAM,YAAY,GAAI,0DAKnB,iBAAiB,mDA2CnB,CAAC;AAEF,eAAe,YAAY,CAAC"}

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

@@ -0,0 +1,37 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { Tabs } from "antd";
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+const COMPOSER_TABS = [
+    {
+        isInternal: false,
+        activeClassName: "text-indigo-600",
+        labelKey: "reply",
+    },
+    {
+        isInternal: true,
+        activeClassName: "text-orange-600",
+        labelKey: "internal",
+    },
+];
+const ComposerTabs = ({ canUseInternal, hintText, isInternal, setIsInternal, }) => {
+    const { t } = useTranslation();
+    const items = useMemo(() => COMPOSER_TABS.map((tab) => ({
+        key: String(tab.isInternal),
+        label: (_jsx("span", { className: clsx("text-sm font-semibold", isInternal === tab.isInternal
+                ? tab.activeClassName
+                : "text-gray-500"), children: t(tab.labelKey) })),
+        children: null,
+    })), [isInternal, t]);
+    if (!canUseInternal) {
+        return null;
+    }
+    return (_jsx(Tabs, { activeKey: String(isInternal), items: items, onChange: (value) => setIsInternal(value === "true"), tabBarExtraContent: {
+            left: _jsx("p", { className: "pr-4 text-sm text-gray-500", children: hintText }),
+        }, className: clsx("[&_.ant-tabs-content-holder]:hidden [&_.ant-tabs-ink-bar]:hidden [&_.ant-tabs-nav]:mb-0 [&_.ant-tabs-nav]:px-4 [&_.ant-tabs-nav]:pt-0 [&_.ant-tabs-nav]:before:border-b-0 [&_.ant-tabs-nav-wrap]:justify-end [&_.ant-tabs-extra-content]:flex [&_.ant-tabs-extra-content]:items-center [&_.ant-tabs-extra-content]:overflow-hidden [&_.ant-tabs-extra-content]:text-ellipsis [&_.ant-tabs-tab]:mb-0 [&_.ant-tabs-tab]:rounded-t-[16px] [&_.ant-tabs-tab]:border [&_.ant-tabs-tab]:border-b-0 [&_.ant-tabs-tab]:border-transparent [&_.ant-tabs-tab]:px-3 [&_.ant-tabs-tab]:py-1.5 [&_.ant-tabs-tab]:leading-5 [&_.ant-tabs-tab-btn]:leading-5", isInternal
+            ? "[&_.ant-tabs-tab-active]:border-orange-200 [&_.ant-tabs-tab-active]:bg-orange-50"
+            : "[&_.ant-tabs-tab-active]:border-indigo-200 [&_.ant-tabs-tab-active]:bg-indigo-50") }));
+};
+export default ComposerTabs;