@droppii-org/chat-sdk 0.1.71 → 0.1.73

package/dist/src/components/message/MessageHeader.js

@@ -0,0 +1,132 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar, Button, message } from "antd";
+import { Icon } from "../../components/icon";
+import { useConversationDisplayData } from "../../hooks/conversation/useConversation";
+import useConversationStore from "../../store/conversation";
+import MediaCollection from "../../components/media-collection";
+import { useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { SessionStatus, SessionTag } from "../../types/chat";
+import SelectSession from "./SelectSession";
+import { useUpdateSession } from "../../hooks/session/useUpdateSession";
+import useAuthStore from "../../store/auth";
+import SearchDrawer from "../../components/search-conversation/SearchDrawer";
+import { isGroupSession } from "../../utils/imCommon";
+import GroupMembersDrawer from "./GroupMembersDrawer";
+const MessageHeader = ({ onClose, currentSession, isJoined, }) => {
+    var _a, _b;
+    const { t } = useTranslation();
+    const isCx = useAuthStore((state) => state.isCx);
+    const isCrm = useAuthStore((state) => state.isCrm);
+    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(() => {
+        return [
+            {
+                label: t("unassigned"),
+                value: SessionStatus.UNASSIGNED,
+                tintColorClassname: "!text-amber-500",
+                tintColorClassnameBg: "!bg-amber-500",
+                bgTintColorClassname: "!bg-amber-100",
+            },
+            {
+                label: t("waiting_process"),
+                value: SessionStatus.WAITING_PROCESS,
+                tintColorClassname: "!text-orange-500",
+                tintColorClassnameBg: "!bg-orange-500",
+                bgTintColorClassname: "!bg-orange-100",
+            },
+            {
+                label: t("in_process"),
+                value: SessionStatus.IN_PROCESS,
+                tintColorClassname: "!text-blue-500",
+                tintColorClassnameBg: "!bg-blue-500",
+                bgTintColorClassname: "!bg-blue-100",
+            },
+            {
+                label: t("completed"),
+                value: SessionStatus.COMPLETED,
+                tintColorClassname: "!text-green-500",
+                tintColorClassnameBg: "!bg-green-500",
+                bgTintColorClassname: "!bg-green-100",
+            },
+        ];
+    }, [t]);
+    const tagOptions = useMemo(() => {
+        return [
+            {
+                label: t("select_tag"),
+                value: SessionTag.NONE,
+                tintColorClassname: "!text-gray-500",
+                tintColorClassnameBg: "!bg-gray-500",
+                bgTintColorClassname: "!bg-gray-100",
+            },
+            {
+                label: t("awaiting_reply"),
+                value: SessionTag.AWAITING_REPLY,
+                tintColorClassname: "!text-purple-500",
+                tintColorClassnameBg: "!bg-purple-500",
+                bgTintColorClassname: "!bg-purple-100",
+            },
+            {
+                label: t("slow_processing"),
+                value: SessionTag.SLOW_PROCESSING,
+                tintColorClassname: "!text-red-500",
+                tintColorClassnameBg: "!bg-red-500",
+                bgTintColorClassname: "!bg-red-100",
+            },
+            {
+                label: t("temporarily_paused"),
+                value: SessionTag.TEMPORARILY_PAUSED,
+                tintColorClassname: "!text-gray-500",
+                tintColorClassnameBg: "!bg-gray-500",
+                bgTintColorClassname: "!bg-gray-100",
+            },
+        ];
+    }, [t]);
+    const handleUpdateSession = (value, type, isSameValue) => {
+        let newValue = value;
+        if (type === "tag" &&
+            value === SessionTag.TEMPORARILY_PAUSED &&
+            isSameValue) {
+            newValue = SessionTag.NONE;
+        }
+        if (currentSession) {
+            if (!isSameValue ||
+                (type === "tag" && value === SessionTag.TEMPORARILY_PAUSED)) {
+                updateSession({
+                    sessionId: currentSession.id,
+                    [type]: newValue,
+                }, {
+                    onError(error) {
+                        var _a, _b;
+                        message.error(((_b = (_a = error === null || error === void 0 ? void 0 : error.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.message) ||
+                            t(`update_session_${type}_failed`));
+                    },
+                    onSuccess() {
+                        if (type === "status") {
+                            setCurrentSessionStatus(newValue);
+                        }
+                        else {
+                            setCurrentSessionTag(newValue);
+                        }
+                    },
+                });
+            }
+        }
+    };
+    useEffect(() => {
+        if (currentSession) {
+            setCurrentSessionTag(currentSession.tag);
+            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 || "" }), 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, {}), shouldShowMemberCount && isJoined === true && isCrm && (_jsx(GroupMembersDrawer, { groupID: conversationData === null || conversationData === void 0 ? void 0 : conversationData.groupID, conversationId: conversationData === null || conversationData === void 0 ? void 0 : conversationData.conversationID, currentSession: currentSession })), _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/src/components/message/MessageInfiniteScroll.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode, Ref } from "react";
+import type { MessageListLoadState } from "../../hooks/message/useMessageListScroll";
+export interface MessageInfiniteScrollProps {
+    scrollRef: Ref<HTMLDivElement>;
+    scrollableTargetId: string;
+    loadState: MessageListLoadState;
+    moreOldLoading?: boolean;
+    onLoadMoreOld: () => void;
+    onScroll: (e: React.UIEvent<HTMLDivElement>) => void;
+    children: ReactNode;
+    empty?: ReactNode;
+    containerClassName?: string;
+}
+declare const MessageInfiniteScroll: ({ scrollRef, scrollableTargetId, loadState, moreOldLoading, onLoadMoreOld, onScroll, children, empty, containerClassName, }: MessageInfiniteScrollProps) => import("react/jsx-runtime").JSX.Element;
+export default MessageInfiniteScroll;
+//# sourceMappingURL=MessageInfiniteScroll.d.ts.map

package/dist/src/components/message/MessageInfiniteScroll.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageInfiniteScroll.d.ts","sourceRoot":"","sources":["../../../../src/components/message/MessageInfiniteScroll.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAEjF,MAAM,WAAW,0BAA0B;IACzC,SAAS,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC/B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,SAAS,EAAE,oBAAoB,CAAC;IAChC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACrD,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,QAAA,MAAM,qBAAqB,GAAI,6HAU5B,0BAA0B,4CAoC5B,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/dist/src/components/message/MessageInfiniteScroll.js

@@ -0,0 +1,7 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Spin } from "antd";
+import clsx from "clsx";
+import InfiniteScroll from "react-infinite-scroll-component";
+const MessageInfiniteScroll = ({ scrollRef, scrollableTargetId, loadState, moreOldLoading = false, onLoadMoreOld, onScroll, children, empty, containerClassName, }) => (_jsx("div", { id: scrollableTargetId, ref: scrollRef, className: clsx("flex h-full flex-col-reverse overflow-x-hidden overflow-y-auto pb-3", containerClassName), children: empty && loadState.messageList.length === 0 ? (empty) : (_jsx(InfiniteScroll, { dataLength: loadState.messageList.length, next: onLoadMoreOld, className: "flex w-full min-w-0 flex-col-reverse", inverse: true, hasMore: loadState.hasMoreOld, loader: moreOldLoading ? (_jsx("div", { className: "flex w-full items-center justify-center py-2", children: _jsx(Spin, { size: "small" }) })) : (_jsx("span", { className: "sr-only" })), scrollableTarget: scrollableTargetId, onScroll: (e) => onScroll(e), children: children })) }));
+export default MessageInfiniteScroll;

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

@@ -0,0 +1,10 @@
+interface MessageListProps {
+    conversationId: string;
+    searchClientMsgID?: string;
+    className?: string;
+    onClose?: () => void;
+    openCreateCannedModal?: () => void;
+}
+declare const MessageList: (props: MessageListProps) => import("react/jsx-runtime").JSX.Element;
+export default MessageList;
+//# sourceMappingURL=MessageList.d.ts.map

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

@@ -0,0 +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;AAED,QAAA,MAAM,WAAW,GAAI,OAAO,gBAAgB,4CAgO3C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/src/components/message/MessageList.js

@@ -0,0 +1,112 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useConversationMessages } from "../../hooks/message/useConversationMessages";
+import { Button, Empty, Modal, Spin } from "antd";
+import { useCallback, useEffect, useState } from "react";
+import dayjs from "dayjs";
+import isToday from "dayjs/plugin/isToday";
+import emitter from "../../utils/events";
+import MessageItem from "./item";
+import MessageInfiniteScroll from "./MessageInfiniteScroll";
+import MessageHeader from "./MessageHeader";
+import MessageFooter from "./footer";
+import UnassignedSessionFooter from "./UnassignedSessionFooter";
+import { useTranslation } from "react-i18next";
+import useConversationStore from "../../store/conversation";
+import { useBoolean } from "ahooks";
+import { useMessageListScroll } from "../../hooks/message/useMessageListScroll";
+import { useChatContext } from "../../context/ChatContext";
+import { useRevokeMessage } from "../../hooks/message/useRevokeMessage";
+import { useConversationSessionState } from "../../hooks/session/useConversationSessionState";
+import { useJoinGroupFlow } from "../../hooks/session/useJoinGroupFlow";
+import { ConnectStatus, SessionStatus } from "../../types/chat";
+dayjs.extend(isToday);
+const MessageList = (props) => {
+    const { t } = useTranslation();
+    const { user, connectStatus } = useChatContext();
+    const { onClose, conversationId, searchClientMsgID, openCreateCannedModal } = props;
+    const conversationData = useConversationStore((state) => state.conversationData);
+    const setQuotedMessage = useConversationStore((state) => state.setQuotedMessage);
+    const setSearchClientMsgID = useConversationStore((state) => state.setSearchClientMsgID);
+    const [openMenuId, setOpenMenuId] = useState(null);
+    const [selectedItem, setSelectedItem] = useState(null);
+    const [showConfirmRevoke, { setTrue: openConfirmRevoke, setFalse: closeConfirmRevoke },] = useBoolean(false);
+    const { revokeMessage, loading: isRevoking } = useRevokeMessage();
+    const { groupId, latestConversationSession, customerUserID, refetchConversationSessions, } = useConversationSessionState({
+        conversationId,
+        conversationType: conversationData === null || conversationData === void 0 ? void 0 : conversationData.conversationType,
+        groupId: conversationData === null || conversationData === void 0 ? void 0 : conversationData.groupID,
+    });
+    const { isJoined, isCheckingMembership, shouldRestrictToLastSession, joinGroup, isJoining, } = useJoinGroupFlow({
+        groupId,
+        sessionId: latestConversationSession === null || latestConversationSession === void 0 ? void 0 : latestConversationSession.id,
+    });
+    const messageController = useConversationMessages({
+        conversationId,
+        searchClientMsgID,
+        restrictToLastSession: shouldRestrictToLastSession,
+        customerUserID,
+    });
+    const { loadState, moreOldLoading, moreNewLoading } = messageController;
+    const { scrollRef, loadMoreOldMessage, handleInfiniteScroll, scrollToBottom, scrollToMessage, } = useMessageListScroll(Object.assign({ conversationId, userId: user === null || user === void 0 ? void 0 : user.userID }, messageController));
+    const handleOpenRevoke = useCallback((clientMsgID) => {
+        setSelectedItem(clientMsgID);
+        openConfirmRevoke();
+    }, [openConfirmRevoke]);
+    const handleCloseRevoke = useCallback(() => {
+        setSelectedItem(null);
+        closeConfirmRevoke();
+    }, [closeConfirmRevoke]);
+    const onRevokeMessage = useCallback(async () => {
+        await revokeMessage((conversationData === null || conversationData === void 0 ? void 0 : conversationData.conversationID) || "", selectedItem || "");
+        handleCloseRevoke();
+    }, [
+        conversationData === null || conversationData === void 0 ? void 0 : conversationData.conversationID,
+        selectedItem,
+        revokeMessage,
+        handleCloseRevoke,
+    ]);
+    const onPressQuoteMessage = useCallback((clientMsgID) => {
+        const hasMessage = loadState.messageList.some((msg) => msg.clientMsgID === clientMsgID);
+        if (hasMessage) {
+            scrollToMessage(clientMsgID);
+        }
+        else {
+            setSearchClientMsgID(clientMsgID);
+        }
+    }, [scrollToMessage, loadState.messageList, setSearchClientMsgID]);
+    useEffect(() => {
+        emitter.on("CHAT_LIST_SCROLL_TO_BOTTOM", scrollToBottom);
+        emitter.on("CHAT_LIST_SCROLL_TO_MESSAGE", scrollToMessage);
+        return () => {
+            emitter.off("CHAT_LIST_SCROLL_TO_BOTTOM", scrollToBottom);
+            emitter.off("CHAT_LIST_SCROLL_TO_MESSAGE", scrollToMessage);
+        };
+    }, []);
+    useEffect(() => {
+        const handler = (sessionUpdated) => {
+            if (sessionUpdated.conversationId === conversationId) {
+                refetchConversationSessions();
+            }
+        };
+        emitter.on("UPDATE_SESSION", handler);
+        return () => {
+            emitter.off("UPDATE_SESSION", handler);
+        };
+    }, [conversationId, refetchConversationSessions]);
+    useEffect(() => {
+        if (!openMenuId)
+            return;
+        const scrollContainer = scrollRef.current;
+        if (!scrollContainer)
+            return;
+        const close = () => setOpenMenuId(null);
+        scrollContainer.addEventListener("scroll", close);
+        return () => scrollContainer.removeEventListener("scroll", close);
+    }, [openMenuId]);
+    if (!conversationData) {
+        return (_jsx("div", { className: "flex flex-1 items-center justify-center h-full", children: connectStatus !== ConnectStatus.Connected ? (_jsx(Spin, {})) : (_jsx(Empty, { description: t("no_conversation_data") })) }));
+    }
+    return (_jsxs("div", { className: "flex flex-col flex-1 relative h-full min-w-0 bg-white", style: { overflowX: "hidden" }, children: [_jsx(MessageHeader, { onClose: onClose, currentSession: latestConversationSession, isJoined: isJoined }), _jsx(MessageInfiniteScroll, { scrollRef: scrollRef, scrollableTargetId: "scrollableMessagesDiv", loadState: loadState, moreOldLoading: moreOldLoading, onLoadMoreOld: loadMoreOldMessage, onScroll: handleInfiniteScroll, 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, {}) })), isCheckingMembership ? (_jsx("div", { className: "border-t bg-white py-4 flex items-center justify-center", children: _jsx(Spin, {}) })) : (latestConversationSession === null || latestConversationSession === void 0 ? void 0 : latestConversationSession.status) === SessionStatus.UNASSIGNED ? (_jsx(UnassignedSessionFooter, { sessionId: latestConversationSession.id, teamId: latestConversationSession.teamId })) : shouldRestrictToLastSession ? (_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: joinGroup, 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/src/components/message/SelectSession.d.ts

@@ -0,0 +1,11 @@
+import type { SelectSessionOption } from "./MessageHeader";
+interface SelectSessionProps {
+    options: SelectSessionOption[];
+    value: SelectSessionOption["value"];
+    onChange: (value: SelectSessionOption["value"]) => void;
+    excludeOptions?: SelectSessionOption["value"][];
+    placeholder?: string;
+}
+declare const SelectSession: ({ options, value, onChange, excludeOptions, placeholder, }: SelectSessionProps) => import("react/jsx-runtime").JSX.Element;
+export default SelectSession;
+//# sourceMappingURL=SelectSession.d.ts.map

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

@@ -0,0 +1 @@
+{"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/src/components/message/SelectSession.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Select } from "antd";
+import { Icon } from "../../components/icon";
+import clsx from "clsx";
+const SelectSession = ({ options, value, onChange, excludeOptions, placeholder, }) => {
+    const selectedOption = options.find((option) => option.value === value);
+    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: renderOptionLabel(option),
+        value: option.value,
+    }));
+    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: () => ["NONE", ""].includes(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value)
+                ? placeholder
+                : selectedOption
+                    ? renderOptionLabel(selectedOption)
+                    : undefined }) }));
+};
+export default SelectSession;

package/dist/src/components/message/UnassignedSessionFooter.d.ts

@@ -0,0 +1,7 @@
+interface UnassignedSessionFooterProps {
+    sessionId: string;
+    teamId?: string;
+}
+declare const UnassignedSessionFooter: ({ sessionId, teamId, }: UnassignedSessionFooterProps) => import("react/jsx-runtime").JSX.Element | null;
+export default UnassignedSessionFooter;
+//# sourceMappingURL=UnassignedSessionFooter.d.ts.map

package/dist/src/components/message/UnassignedSessionFooter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnassignedSessionFooter.d.ts","sourceRoot":"","sources":["../../../../src/components/message/UnassignedSessionFooter.tsx"],"names":[],"mappings":"AASA,UAAU,4BAA4B;IACpC,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,uBAAuB,GAAI,wBAG9B,4BAA4B,mDA2C9B,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

package/dist/src/components/message/UnassignedSessionFooter.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, message as antdMessage } from "antd";
+import { useTranslation } from "react-i18next";
+import { useAssignSession } from "../../hooks/session/useAssignSession";
+import useAuthStore from "../../store/auth";
+import ManualAssignPopover from "../../components/thread/ManualAssignPopover";
+import { Icon } from "../../components/icon";
+const UnassignedSessionFooter = ({ sessionId, teamId, }) => {
+    const { t } = useTranslation();
+    const userID = useAuthStore((state) => state.userID);
+    const isCrm = useAuthStore((state) => state.isCrm);
+    const { mutateAsync: assignSession, isPending: isAssigning } = useAssignSession();
+    if (!isCrm)
+        return null;
+    const handleAssignToMe = async () => {
+        try {
+            await assignSession({ sessionId, supporterId: userID });
+        }
+        catch (_a) {
+            antdMessage.error(t("manual_assign_failed"));
+        }
+    };
+    return (_jsxs("div", { className: "border-t bg-white py-4 flex flex-col items-center gap-2", children: [_jsxs("div", { className: "flex items-center gap-1.5 text-amber-500", children: [_jsx(Icon, { icon: "user-del-o", size: 16 }), _jsx("p", { className: "text-sm text-gray-500", children: t("unassigned_thread_notice") })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { type: "primary", onClick: handleAssignToMe, loading: isAssigning, disabled: isAssigning, children: t("assign_to_me") }), _jsx(ManualAssignPopover, { sessionId: sessionId, teamId: teamId, excludeCurrentUser: true, children: _jsx(Button, { disabled: isAssigning, children: t("assign_to_others") }) })] })] }));
+};
+export default UnassignedSessionFooter;

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

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

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

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

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

@@ -0,0 +1,90 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Button } from "antd";
+import { Icon } from "../../../components/icon";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $createParagraphNode, $getRoot, $getSelection, $isRangeSelection, } from "lexical";
+import { $generateHtmlFromNodes } from "@lexical/html";
+import { $isListNode, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, } from "@lexical/list";
+import { $isQuoteNode } from "@lexical/rich-text";
+import { useMessageFooterContext } from ".";
+import MediaActions from "./MediaActions";
+import useConversationStore from "../../../store/conversation";
+const ActionBar = () => {
+    const [editor] = useLexicalComposerContext();
+    const { onSendMessage, isInternal, listUploadFiles, setListUploadFiles } = useMessageFooterContext();
+    const quotedMessage = useConversationStore((state) => state.quotedMessage);
+    const [isEmptyInput, setIsEmptyInput] = useState(true);
+    const canSend = useMemo(() => {
+        const hasQuote = !!(quotedMessage === null || quotedMessage === void 0 ? void 0 : quotedMessage.clientMsgID);
+        return hasQuote
+            ? !isEmptyInput
+            : !isEmptyInput || listUploadFiles.length > 0;
+    }, [isEmptyInput, listUploadFiles === null || listUploadFiles === void 0 ? void 0 : listUploadFiles.length, quotedMessage === null || quotedMessage === void 0 ? void 0 : quotedMessage.clientMsgID]);
+    const handleSend = useCallback(() => {
+        let plainText = "";
+        let richText = "";
+        editor.getEditorState().read(() => {
+            plainText = $getRoot().getTextContent();
+            richText = $generateHtmlFromNodes(editor);
+        });
+        if (canSend) {
+            const sent = onSendMessage({
+                plainText,
+                richText,
+                type: listUploadFiles.length > 0 ? "file" : "text",
+                isInternal,
+            });
+            if (!sent) {
+                return;
+            }
+        }
+        editor.update(() => {
+            const root = $getRoot();
+            root.clear();
+            const paragraph = $createParagraphNode();
+            root.append(paragraph);
+            paragraph.select();
+            const selection = $getSelection();
+            if ($isRangeSelection(selection)) {
+                const anchorNode = selection.anchor.getNode();
+                const topLevelNode = anchorNode.getTopLevelElementOrThrow();
+                const isListNode = $isListNode(topLevelNode);
+                const isQuoteNode = $isQuoteNode(topLevelNode);
+                const listType = isListNode ? topLevelNode.getListType() : undefined;
+                if (selection.hasFormat("bold")) {
+                    selection.formatText("bold");
+                }
+                if (selection.hasFormat("italic")) {
+                    selection.formatText("italic");
+                }
+                if (selection.hasFormat("strikethrough")) {
+                    selection.formatText("strikethrough");
+                }
+                if (isQuoteNode) {
+                    const paragraph = $createParagraphNode();
+                    const children = topLevelNode.getChildren();
+                    children.forEach((child) => paragraph.append(child));
+                    topLevelNode.replace(paragraph);
+                }
+                if (isListNode && listType) {
+                    editor.dispatchCommand(listType === "number"
+                        ? INSERT_ORDERED_LIST_COMMAND
+                        : INSERT_UNORDERED_LIST_COMMAND, undefined);
+                }
+            }
+        });
+    }, [editor, onSendMessage, canSend, isInternal, listUploadFiles.length]);
+    useEffect(() => {
+        return editor.registerUpdateListener(({ editorState }) => {
+            editorState.read(() => {
+                const root = $getRoot();
+                const textContent = root.getTextContent().trim();
+                setIsEmptyInput(textContent.length <= 0);
+            });
+        });
+    }, [editor]);
+    return (_jsxs("div", { className: "flex items-center justify-between px-4", children: [_jsx(MediaActions, { listUploadFiles: listUploadFiles, onFilesChange: setListUploadFiles, buttonClassName: "text-gray-500 w-8 h-8 p-0" }), _jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", onClick: handleSend, disabled: !canSend, children: _jsx(Icon, { icon: "send-b", size: 28, className: `${canSend ? "text-blue-500" : "text-gray-400"}` }) })] }));
+};
+export default ActionBar;

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

@@ -0,0 +1,7 @@
+type Props = {
+    onOpen: (query: string) => void;
+    onClose: () => void;
+};
+export declare function CannedResponseTriggerPlugin({ onOpen, onClose }: Props): null;
+export {};
+//# sourceMappingURL=CannedResponsePlugin.d.ts.map

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

@@ -0,0 +1 @@
+{"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/src/components/message/footer/CannedResponsePlugin.js

@@ -0,0 +1,67 @@
+import { useEffect } from "react";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+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(() => {
+                const selection = $getSelection();
+                if (!$isRangeSelection(selection) || !selection.isCollapsed()) {
+                    onClose();
+                    return;
+                }
+                const anchor = selection.anchor;
+                const node = anchor.getNode();
+                const text = node.getTextContent();
+                const offset = anchor.offset;
+                const before = text.slice(0, offset);
+                // match #abc (KHÔNG có space phía sau)
+                const match = before.match(/(^|\s)#(\w*)$/);
+                if (match) {
+                    onOpen(match[2] || "");
+                }
+                else {
+                    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/src/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/src/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/src/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/src/components/message/footer/ComposerTabs.d.ts

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

package/dist/src/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,cAAc,EAAE,OAAO,CAAC;IACxB,aAAa,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C;AAeD,QAAA,MAAM,YAAY,GAAI,0EAMnB,iBAAiB,mDAoDnB,CAAC;AAEF,eAAe,YAAY,CAAC"}