@droppii-org/chat-sdk 0.1.23 → 0.1.25

package/dist/components/bizThreadDetail/BizThreadDetailInput.js

@@ -0,0 +1,147 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import clsx from "clsx";
+import { Icon } from "../../components/icon";
+import { useBizSendMessage } from "../../hooks/biz/useBizSendMessage";
+import useBizConversationStore from "../../store/bizConversation";
+import useBizMessageDraftStore from "../../store/bizMessageDraft";
+import { emit } from "../../utils/events";
+const MAX_LINES = 5;
+const CONTAINER_MIN_HEIGHT = 48;
+const BizThreadDetailInput = ({ placeholder, onSendMessage, onInputChange, }) => {
+    const { t } = useTranslation("biz-inbox");
+    const { sendTextMessage } = useBizSendMessage();
+    const conversationId = useBizConversationStore((state) => { var _a; return (_a = state.conversationData) === null || _a === void 0 ? void 0 : _a.conversationId; });
+    const setDraft = useBizMessageDraftStore((state) => state.setDraft);
+    const clearDraft = useBizMessageDraftStore((state) => state.clearDraft);
+    const containerRef = useRef(null);
+    const textareaRef = useRef(null);
+    const [value, setValue] = useState("");
+    const [isFocused, setIsFocused] = useState(false);
+    const [isSending, setIsSending] = useState(false);
+    const canSend = value.trim().length > 0 && !isSending;
+    const getTextareaHeights = useCallback(() => {
+        const textarea = textareaRef.current;
+        if (!textarea)
+            return null;
+        const lineHeight = parseFloat(window.getComputedStyle(textarea).lineHeight);
+        return {
+            lineHeight,
+            maxHeight: lineHeight * MAX_LINES,
+        };
+    }, []);
+    const adjustTextareaHeight = useCallback(() => {
+        const textarea = textareaRef.current;
+        const heights = getTextareaHeights();
+        if (!textarea || !heights)
+            return;
+        textarea.style.height = `${heights.lineHeight}px`;
+        const scrollHeight = textarea.scrollHeight;
+        const nextHeight = Math.min(Math.max(scrollHeight, heights.lineHeight), heights.maxHeight);
+        textarea.style.height = `${nextHeight}px`;
+        textarea.style.overflowY =
+            scrollHeight > heights.maxHeight ? "auto" : "hidden";
+    }, [getTextareaHeights]);
+    useEffect(() => {
+        var _a;
+        if (!conversationId) {
+            setValue("");
+            return;
+        }
+        const draft = (_a = useBizMessageDraftStore.getState().drafts[conversationId]) !== null && _a !== void 0 ? _a : "";
+        setValue(draft);
+        requestAnimationFrame(adjustTextareaHeight);
+    }, [conversationId, adjustTextareaHeight]);
+    useEffect(() => {
+        adjustTextareaHeight();
+    }, [value, adjustTextareaHeight]);
+    useEffect(() => {
+        if (!isFocused)
+            return;
+        const handlePointerDown = (event) => {
+            var _a, _b;
+            if ((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))
+                return;
+            (_b = textareaRef.current) === null || _b === void 0 ? void 0 : _b.blur();
+        };
+        document.addEventListener("pointerdown", handlePointerDown);
+        return () => document.removeEventListener("pointerdown", handlePointerDown);
+    }, [isFocused]);
+    useEffect(() => {
+        const viewport = window.visualViewport;
+        if (!viewport)
+            return;
+        const handleViewportChange = () => {
+            if (document.activeElement === textareaRef.current) {
+                emit("BIZ_CHAT_SCROLL_TO_BOTTOM_IF_AT_BOTTOM");
+            }
+        };
+        viewport.addEventListener("resize", handleViewportChange);
+        return () => viewport.removeEventListener("resize", handleViewportChange);
+    }, []);
+    const handleChange = (nextValue) => {
+        setValue(nextValue);
+        if (conversationId) {
+            setDraft(conversationId, nextValue);
+        }
+        onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(nextValue);
+    };
+    const handleSend = async () => {
+        const text = value.trim();
+        if (!text || isSending)
+            return;
+        setIsSending(true);
+        try {
+            if (onSendMessage) {
+                onSendMessage(text);
+            }
+            else {
+                const sent = await sendTextMessage(text);
+                if (!sent)
+                    return;
+            }
+            setValue("");
+            if (conversationId) {
+                clearDraft(conversationId);
+            }
+            requestAnimationFrame(adjustTextareaHeight);
+        }
+        finally {
+            setIsSending(false);
+        }
+    };
+    const handleFocus = () => {
+        setIsFocused(true);
+        emit("BIZ_CHAT_SCROLL_TO_BOTTOM_IF_AT_BOTTOM");
+    };
+    const handleBlur = () => {
+        setIsFocused(false);
+    };
+    const insertNewline = (textarea) => {
+        const { selectionStart, selectionEnd } = textarea;
+        const nextValue = value.slice(0, selectionStart) + "\n" + value.slice(selectionEnd);
+        handleChange(nextValue);
+        requestAnimationFrame(() => {
+            textarea.selectionStart = selectionStart + 1;
+            textarea.selectionEnd = selectionStart + 1;
+            adjustTextareaHeight();
+        });
+    };
+    const handleKeyDown = (event) => {
+        if (event.key !== "Enter")
+            return;
+        if (event.shiftKey) {
+            event.preventDefault();
+            insertNewline(event.currentTarget);
+            return;
+        }
+        event.preventDefault();
+        void handleSend();
+    };
+    return (_jsx("div", { ref: containerRef, "data-testid": "biz-thread-detail-input", className: "flex w-full shrink-0 flex-col bg-[rgba(131,137,157,0.05)]", children: _jsxs("div", { className: "flex items-end gap-3 px-3 py-2", children: [_jsx("div", { className: clsx("flex min-w-0 flex-1 overflow-hidden rounded-xl border bg-white transition-shadow", isFocused
+                        ? "border-[#607CFB] shadow-[0px_0px_2px_rgba(27,63,228,0.5)]"
+                        : "border-[#DDDEDF]"), style: { minHeight: CONTAINER_MIN_HEIGHT }, children: _jsx("div", { className: "flex min-w-0 flex-[1_0_0] items-center gap-2 self-stretch px-3 py-1", children: _jsx("textarea", { ref: textareaRef, value: value, rows: 1, onChange: (event) => handleChange(event.target.value), onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown, placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : t("thread_detail.input_placeholder"), "data-testid": "biz-thread-detail-message-input", className: "biz-message-input-scrollbar min-h-0 min-w-0 flex-1 resize-none bg-transparent text-[16px] leading-[1.6] tracking-[0.16px] text-black outline-none placeholder:text-[#747B7E]" }) }) }), _jsx("div", { className: "flex shrink-0 items-center pb-1", children: _jsx("button", { type: "button", onClick: () => void handleSend(), disabled: !canSend, "data-testid": "biz-thread-detail-send", className: clsx("flex h-10 w-10 items-center justify-center rounded-full", canSend ? "bg-[#002BEB]" : "bg-[#002BEB] opacity-25"), children: _jsx(Icon, { icon: "send-b", size: 20, className: "text-white" }) }) })] }) }));
+};
+export default BizThreadDetailInput;

package/dist/components/bizThreadDetail/index.d.ts

@@ -0,0 +1,8 @@
+export { default as BizThreadDetailHeader } from "./BizThreadDetailHeader";
+export type { BizThreadDetailHeaderProps } from "./BizThreadDetailHeader";
+export { default as BizThreadDetailInput } from "./BizThreadDetailInput";
+export type { BizThreadDetailInputProps } from "./BizThreadDetailInput";
+export { default as BizMessageList } from "./BizMessageList";
+export { default as BizMessageItem } from "./item/BizMessageItem";
+export type { BizMessageItemProps } from "./item/BizMessageItem";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/bizThreadDetail/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/bizThreadDetail/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAC3E,YAAY,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAE1E,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACzE,YAAY,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAExE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAClE,YAAY,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/components/bizThreadDetail/index.js

@@ -0,0 +1,4 @@
+export { default as BizThreadDetailHeader } from "./BizThreadDetailHeader";
+export { default as BizThreadDetailInput } from "./BizThreadDetailInput";
+export { default as BizMessageList } from "./BizMessageList";
+export { default as BizMessageItem } from "./item/BizMessageItem";

package/dist/components/bizThreadDetail/item/BizMessageItem.d.ts

@@ -0,0 +1,8 @@
+import { MessageItem } from "@openim/wasm-client-sdk";
+export interface BizMessageItemProps {
+    message: MessageItem;
+    allMessages: MessageItem[];
+}
+declare const BizMessageItem: ({ message, allMessages }: BizMessageItemProps) => import("react/jsx-runtime").JSX.Element | null;
+export default BizMessageItem;
+//# sourceMappingURL=BizMessageItem.d.ts.map

package/dist/components/bizThreadDetail/item/BizMessageItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BizMessageItem.d.ts","sourceRoot":"","sources":["../../../../src/components/bizThreadDetail/item/BizMessageItem.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAQtD,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,WAAW,CAAC;IACrB,WAAW,EAAE,WAAW,EAAE,CAAC;CAC5B;AA4BD,QAAA,MAAM,cAAc,GAAI,0BAA0B,mBAAmB,mDA6CpE,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/bizThreadDetail/item/BizMessageItem.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from "../../../components/icon";
+import useAuthStore from "../../../store/auth";
+import { formatTimestamp } from "../../../utils/common";
+import { getBizMessageDisplay } from "../../../utils/bizMessage";
+import BizMessageBubble from "../BizMessageBubble";
+const BizMessageAvatar = ({ avatarUrl }) => (_jsx("div", { className: "flex shrink-0 items-center pb-4", children: avatarUrl ? (_jsx("img", { src: avatarUrl, alt: "", className: "h-6 w-6 rounded-full object-cover" })) : (_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-full bg-[#0C5CFF]", children: _jsx(Icon, { icon: "droppii-o-1", size: 14, className: "text-white" }) })) }));
+const BizMessageTime = ({ sendTime }) => (_jsx("div", { className: "flex w-full items-center px-4 py-1", children: _jsx("div", { className: "flex min-w-0 flex-1 flex-col items-start", children: _jsx("p", { className: "w-full break-words text-center text-[12px] font-normal leading-[160%] tracking-normal text-[#747B7E]", children: formatTimestamp(sendTime, { hasTime: true }) }) }) }));
+const BizMessageItem = ({ message, allMessages }) => {
+    const userID = useAuthStore((state) => state.userID);
+    if (!userID)
+        return null;
+    const display = getBizMessageDisplay(message, allMessages, userID);
+    if (!display.isMine) {
+        return (_jsxs("div", { className: "flex w-full flex-col pb-1", "data-testid": "biz-message-item", children: [display.showTimeBreak && _jsx(BizMessageTime, { sendTime: display.sendTime }), _jsxs("div", { className: "flex w-full items-end pl-3 pr-12", children: [display.showAvatar ? (_jsx(BizMessageAvatar, { avatarUrl: display.senderFaceUrl })) : (_jsx("div", { className: "w-6 shrink-0" })), _jsx("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: _jsx(BizMessageBubble, { isMine: display.isMine, content: display.content, senderName: display.senderName, showSenderName: display.showSenderName, showTip: display.showTip }) })] })] }));
+    }
+    return (_jsxs("div", { className: "flex w-full flex-col pb-1", "data-testid": "biz-message-item", children: [display.showTimeBreak && _jsx(BizMessageTime, { sendTime: display.sendTime }), _jsx("div", { className: "flex w-full justify-end pl-12 pr-3", children: _jsx("div", { className: "flex min-w-0 max-w-[calc(100%-48px)] flex-col items-end gap-1", children: _jsx(BizMessageBubble, { isMine: display.isMine, content: display.content, showTip: display.showTip }) }) })] }));
+};
+export default BizMessageItem;

package/dist/components/cannedResponse/CannedResponseBody.js

@@ -7,13 +7,13 @@ import { CannedResponseVisibleScope } from "../../types/chat";
 import TeamItem from "./team/TeamItem";
 import { useFetchCannedResponse } from "../../hooks/cannedResponse/useFetchCannedResponse";
 import InfiniteScroll from "react-infinite-scroll-component";
-import { Icon } from "../icon";
+import { Icon } from "../../components/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";
+import { useMessageFooterContext } from "../../components/message/footer";
 const parseIndex = (index, length) => {
     if (index === null)
         return null;

package/dist/components/cannedResponse/CannedResponseFooter.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
-import { Icon } from "../icon";
+import { Icon } from "../../components/icon";
 const CannedResponseFooter = ({ openCreateCannedModal, }) => {
     const { t } = useTranslation();
     return (_jsx("div", { className: "flex items-center justify-end border-t border-gray-200 p-2", children: _jsxs("div", { className: "flex cursor-pointer items-center gap-1", onClick: openCreateCannedModal, children: [_jsx(Icon, { icon: "plus-circle-o", size: 16, className: "text-blue-500" }), _jsx("span", { className: "text-sm text-blue-500", children: t("add_canned_response") })] }) }));

package/dist/components/cannedResponse/CannedResponseHeader.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
 import CannedResponseIcon from "../../assets/svg/cannedResponse";
 import { Button, Input } from "antd";
-import { Icon } from "../icon";
+import { Icon } from "../../components/icon";
 const CannedResponseHeader = (props) => {
     const { onClose, search, setSearch } = props;
     const { t } = useTranslation();

package/dist/components/cannedResponse/team/TeamItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TeamItem.d.ts","sourceRoot":"","sources":["../../../../src/components/cannedResponse/team/TeamItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAQrD,UAAU,aAAa;IACrB,IAAI,EAAE,eAAe,CAAC;IACtB,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACjE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,QAAA,MAAM,QAAQ,GAAI,8EAMf,aAAa,4CAiFf,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"TeamItem.d.ts","sourceRoot":"","sources":["../../../../src/components/cannedResponse/team/TeamItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAQ9C,UAAU,aAAa;IACrB,IAAI,EAAE,eAAe,CAAC;IACtB,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACjE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,QAAA,MAAM,QAAQ,GAAI,8EAMf,aAAa,4CAiFf,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/components/cannedResponse/team/TeamItem.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useFetchCannedCategories } from "../../../hooks/cannedResponse/useFetchCannedCategories";
 import { useBoolean } from "ahooks";
-import { Icon } from "../../icon";
+import { Icon } from "../../../components/icon";
 import clsx from "clsx";
 import { useTranslation } from "react-i18next";
 import { useCallback } from "react";

package/dist/components/chatBubble/ChatBubble.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { FloatButton, Drawer, Popover } from "antd";
 import { MessageOutlined, CloseOutlined } from "@ant-design/icons";
-import MessageList from "../message/MessageList";
+import MessageList from "../../components/message/MessageList";
 import useConversationStore from "../../store/conversation";
 import { useIsMobile } from "../../hooks/common/useIsMobile";
 import { useBoolean } from "ahooks";

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":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,6CAA6C,CAAC;AAEjF,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAQpD,UAAU,8BAA8B;IACtC,WAAW,EAAE,gBAAgB,CAAC;IAC9B,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B;AAED,QAAA,MAAM,yBAAyB,GAAI,iCAGhC,8BAA8B,mDAyFhC,CAAC;AAEF,eAAe,yBAAyB,CAAC"}
+{"version":3,"file":"ConversationBySessionItem.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/ConversationBySessionItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AAE7E,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAQhD,UAAU,8BAA8B;IACtC,WAAW,EAAE,gBAAgB,CAAC;IAC9B,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B;AAED,QAAA,MAAM,yBAAyB,GAAI,iCAGhC,8BAA8B,mDAyFhC,CAAC;AAEF,eAAe,yBAAyB,CAAC"}

package/dist/components/conversation/DeskConversationList.js

@@ -3,11 +3,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useRef } from "react";
 import { useSearchParams } from "next/navigation";
 import { Input, Empty, Drawer, Button, Spin } from "antd";
-import { Icon } from "../icon";
+import { Icon } from "../../components/icon";
 import useConversationStore from "../../store/conversation";
 import { useTranslation } from "react-i18next";
 import { useBoolean, useDebounce } from "ahooks";
-import SearchConversation from "../searchConversation";
+import SearchConversation from "../../components/searchConversation";
 import useSessionStore from "../../store/session";
 import InfiniteScroll from "react-infinite-scroll-component";
 import ConversationBySessionItem from "./ConversationBySessionItem";
@@ -17,7 +17,7 @@ import { useSessionLatestPreview } from "../../hooks/session/useSessionLatestPre
 import { useGetTeamSessionSummary } from "../../hooks/session/useGetTeamSessionSummary";
 import { DChatSDK } from "../../constants/sdk";
 import emitter from "../../utils/events";
-import { getFilterConfig } from "../session/sessionMenuItems";
+import { getFilterConfig } from "../../components/session/sessionMenuItems";
 const DeskConversationList = () => {
     var _a, _b;
     const searchInputRef = useRef(null);

package/dist/components/mediaCollection/FileCollection.js

@@ -8,7 +8,7 @@ import dayjs from "dayjs";
 import useConversationStore from "../../store/conversation";
 import { useTranslation } from "react-i18next";
 import { documentIcon } from "../../assets/svg";
-import { shortenFileName } from "../message/footer/FilePreview";
+import { shortenFileName } from "../../components/message/footer/FilePreview";
 import { renderFileSize } from "../../utils/common";
 const FileCollection = () => {
     const { t } = useTranslation();

package/dist/components/mediaCollection/LinkCollection.js

@@ -7,7 +7,7 @@ import { useCallback, useEffect, useState } from "react";
 import dayjs from "dayjs";
 import InfiniteScroll from "react-infinite-scroll-component";
 import { MessageType, SessionType } from "@openim/wasm-client-sdk";
-import { Icon } from "../icon";
+import { Icon } from "../../components/icon";
 import { DChatSDK } from "../../constants/sdk";
 import { useChatContext } from "../../context/ChatContext";
 import { message as antdMessage } from "antd";

package/dist/components/mediaCollection/VideoCollection.js

@@ -8,7 +8,7 @@ import dayjs from "dayjs";
 import useConversationStore from "../../store/conversation";
 import { useBoolean } from "ahooks";
 import { images } from "../../constants/images";
-import { Icon } from "../icon";
+import { Icon } from "../../components/icon";
 import { useTranslation } from "react-i18next";
 const VideoCollection = () => {
     const { t } = useTranslation();

package/dist/components/mediaCollection/index.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useBoolean } from "ahooks";
 import { Button, Drawer, Tabs } from "antd";
-import { Icon } from "../icon";
+import { Icon } from "../../components/icon";
 import { useTranslation } from "react-i18next";
 import ImageCollection from "./ImageCollection";
 import VideoCollection from "./VideoCollection";

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

@@ -1 +1 @@
-{"version":3,"file":"GroupMembersDrawer.d.ts","sourceRoot":"","sources":["../../../src/components/message/GroupMembersDrawer.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAKnD,UAAU,uBAAuB;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,gBAAgB,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAsCD,QAAA,MAAM,kBAAkB,GAAI,wDAKzB,uBAAuB,4CA0OzB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"GroupMembersDrawer.d.ts","sourceRoot":"","sources":["../../../src/components/message/GroupMembersDrawer.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAK/C,UAAU,uBAAuB;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,gBAAgB,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAsCD,QAAA,MAAM,kBAAkB,GAAI,wDAKzB,uBAAuB,4CA0OzB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/components/message/GroupMembersDrawer.js

@@ -8,7 +8,7 @@ import useAuthStore from "../../store/auth";
 import useConversationStore from "../../store/conversation";
 import { useGroupMembers } from "../../hooks/group/useGroupMembers";
 import { useLeaveConversation } from "../../hooks/session/useLeaveConversation";
-import { Icon } from "../icon";
+import { Icon } from "../../components/icon";
 const getMemberDisplayName = (member) => {
     return member.nickname || member.userID || "";
 };

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,iBAAiB,CAAC;AAMnD,UAAU,kBAAkB;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,cAAc,CAAC,EAAE,gBAAgB,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;CAC3B;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,wCAIpB,kBAAkB,4CA6MpB,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,cAAc,CAAC;AAGzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAM/C,UAAU,kBAAkB;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,cAAc,CAAC,EAAE,gBAAgB,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;CAC3B;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,wCAIpB,kBAAkB,4CA6MpB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/message/MessageHeader.js

@@ -1,17 +1,17 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Avatar, Button, message } from "antd";
-import { Icon } from "../icon";
+import { Icon } from "../../components/icon";
 import { useConversationDisplayData } from "../../hooks/conversation/useConversation";
 import useConversationStore from "../../store/conversation";
-import MediaCollection from "../mediaCollection";
+import MediaCollection from "../../components/mediaCollection";
 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 "../searchConversation/SearchDrawer";
+import SearchDrawer from "../../components/searchConversation/SearchDrawer";
 import { isGroupSession } from "../../utils/imCommon";
 import GroupMembersDrawer from "./GroupMembersDrawer";
 const MessageHeader = ({ onClose, currentSession, isJoined, }) => {

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

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

package/dist/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;AAGvC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAkBjF,MAAM,WAAW,0BAA0B;IACzC,SAAS,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC/B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,SAAS,EAAE,oBAAoB,CAAC;IAChC,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,6GAS5B,0BAA0B,4CA8B5B,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/dist/components/message/MessageInfiniteScroll.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Spin } from "antd";
+import InfiniteScroll from "react-infinite-scroll-component";
+const scrollContainerStyle = {
+    height: "100%",
+    overflowY: "auto",
+    overflowX: "hidden",
+    display: "flex",
+    flexDirection: "column-reverse",
+    paddingBottom: 12,
+};
+const infiniteScrollStyle = {
+    display: "flex",
+    flexDirection: "column-reverse",
+    minWidth: 0,
+    width: "100%",
+};
+const MessageInfiniteScroll = ({ scrollRef, scrollableTargetId, loadState, onLoadMoreOld, onScroll, children, empty, containerClassName, }) => (_jsx("div", { id: scrollableTargetId, ref: scrollRef, className: containerClassName, style: scrollContainerStyle, children: empty && loadState.messageList.length === 0 ? (empty) : (_jsx(InfiniteScroll, { dataLength: loadState.messageList.length, next: onLoadMoreOld, style: infiniteScrollStyle, inverse: true, hasMore: loadState.hasMoreOld, loader: _jsx("div", { className: "flex items-center justify-center py-2", children: _jsx(Spin, {}) }), scrollableTarget: scrollableTargetId, onScroll: (e) => onScroll(e), children: children })) }));
+export default MessageInfiniteScroll;

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":"AA4BA,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,4CA6V3C,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"MessageList.d.ts","sourceRoot":"","sources":["../../../src/components/message/MessageList.tsx"],"names":[],"mappings":"AA2BA,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,4CAoQ3C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/message/MessageList.js

@@ -2,35 +2,31 @@
 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, useRef, useState } from "react";
+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 InfiniteScroll from "react-infinite-scroll-component";
+import MessageInfiniteScroll from "./MessageInfiniteScroll";
 import MessageHeader from "./MessageHeader";
 import MessageFooter from "./footer";
 import UnassignedSessionFooter from "./UnassignedSessionFooter";
 import { images } from "../../constants/images";
 import { useTranslation } from "react-i18next";
 import useConversationStore from "../../store/conversation";
-import { isNumber } from "lodash";
-import { useBoolean, useDebounceFn } from "ahooks";
+import { useBoolean } from "ahooks";
+import { useMessageListScroll } from "../../hooks/message/useMessageListScroll";
 import { MSG_ITEM_CONTENT_PREFIX, MSG_ITEM_PREFIX } from "../../constants";
-import { markConversationMessageAsRead } from "../../hooks/conversation/useConversation";
 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 BOTTOM_THRESHOLD = -5;
 const MessageList = (props) => {
-    var _a;
     const { t } = useTranslation();
     const { user, connectStatus } = useChatContext();
     const { onClose, conversationId, searchClientMsgID, openCreateCannedModal } = props;
-    const scrollRef = useRef(null);
     const conversationData = useConversationStore((state) => state.conversationData);
     const setQuotedMessage = useConversationStore((state) => state.setQuotedMessage);
     const setSearchClientMsgID = useConversationStore((state) => state.setSearchClientMsgID);
@@ -47,12 +43,14 @@ const MessageList = (props) => {
         groupId,
         sessionId: latestConversationSession === null || latestConversationSession === void 0 ? void 0 : latestConversationSession.id,
     });
-    const { getMoreOldMessages, moreOldLoading, loadState, getMoreNewMessages, moreNewLoading, latestLoadState, } = useConversationMessages({
+    const messageController = useConversationMessages({
         conversationId,
         searchClientMsgID,
         restrictToLastSession: shouldRestrictToLastSession,
         customerUserID,
     });
+    const { loadState, moreNewLoading } = messageController;
+    const { scrollRef, loadMoreOldMessage, handleInfiniteScroll, scrollToBottom } = useMessageListScroll(Object.assign({ conversationId, userId: user === null || user === void 0 ? void 0 : user.userID }, messageController));
     const handleOpenRevoke = useCallback((clientMsgID) => {
         setSelectedItem(clientMsgID);
         openConfirmRevoke();
@@ -70,32 +68,6 @@ const MessageList = (props) => {
         revokeMessage,
         handleCloseRevoke,
     ]);
-    const handleMarkConversationMessageAsRead = useCallback(() => {
-        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];
-        if (!((_c = latestLoadState === null || latestLoadState === void 0 ? void 0 : latestLoadState.current) === null || _c === void 0 ? void 0 : _c.hasMoreNew) &&
-            !moreNewLoading &&
-            (lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.isRead) === false &&
-            (lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.sendID) !== (user === null || user === void 0 ? void 0 : user.userID) &&
-            isNumber((_d = scrollRef.current) === null || _d === void 0 ? void 0 : _d.scrollTop) &&
-            ((_e = scrollRef.current) === null || _e === void 0 ? void 0 : _e.scrollTop) >= BOTTOM_THRESHOLD) {
-            markConversationMessageAsRead(conversationId);
-        }
-    }, [conversationId, moreNewLoading, user === null || user === void 0 ? void 0 : user.userID]);
-    const scrollToBottom = () => {
-        handleMarkConversationMessageAsRead();
-        setTimeout(() => {
-            var _a, _b, _c, _d;
-            if (isNumber((_a = scrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollTop) &&
-                ((_b = scrollRef.current) === null || _b === void 0 ? void 0 : _b.scrollTop) >= BOTTOM_THRESHOLD) {
-                return;
-            }
-            (_c = scrollRef.current) === null || _c === void 0 ? void 0 : _c.scrollTo({
-                top: (_d = scrollRef.current) === null || _d === void 0 ? void 0 : _d.scrollHeight,
-                behavior: "smooth",
-            });
-        });
-    };
     const scrollToMessage = (clientMsgID) => {
         setTimeout(() => {
             const targetElement = document.getElementById(`${MSG_ITEM_PREFIX}${clientMsgID}`);
@@ -126,16 +98,6 @@ const MessageList = (props) => {
             setSearchClientMsgID(clientMsgID);
         }
     }, [scrollToMessage, loadState.messageList, setSearchClientMsgID]);
-    const loadMoreOldMessage = () => {
-        if (!loadState.hasMoreOld || moreOldLoading)
-            return;
-        getMoreOldMessages();
-    };
-    const { run: loadMoreNewMessage } = useDebounceFn(() => {
-        if (!loadState.hasMoreNew || moreNewLoading)
-            return;
-        getMoreNewMessages();
-    }, { wait: 200 });
     useEffect(() => {
         emitter.on("CHAT_LIST_SCROLL_TO_BOTTOM", scrollToBottom);
         emitter.on("CHAT_LIST_SCROLL_TO_MESSAGE", scrollToMessage);
@@ -155,18 +117,6 @@ const MessageList = (props) => {
             emitter.off("UPDATE_SESSION", handler);
         };
     }, [conversationId, refetchConversationSessions]);
-    useEffect(() => {
-        if (!loadState.hasMoreNew &&
-            !loadState.initLoading &&
-            loadState.messageList.length > 0) {
-            handleMarkConversationMessageAsRead();
-        }
-    }, [
-        loadState.messageList.length,
-        loadState.hasMoreNew,
-        loadState.initLoading,
-        handleMarkConversationMessageAsRead,
-    ]);
     useEffect(() => {
         if (!openMenuId)
             return;
@@ -185,24 +135,6 @@ const MessageList = (props) => {
             backgroundSize: "cover",
             backgroundPosition: "center",
             overflowX: "hidden",
-        }, children: [_jsx(MessageHeader, { onClose: onClose, currentSession: latestConversationSession, isJoined: isJoined }), _jsx("div", { id: "scrollableMessagesDiv", ref: scrollRef, style: {
-                    height: "100%",
-                    overflowY: "auto",
-                    overflowX: "hidden",
-                    display: "flex",
-                    flexDirection: "column-reverse",
-                    paddingBottom: 12,
-                }, children: _jsx(InfiniteScroll, { dataLength: ((_a = loadState.messageList) === null || _a === void 0 ? void 0 : _a.length) || 0, next: loadMoreOldMessage, style: {
-                        display: "flex",
-                        flexDirection: "column-reverse",
-                        minWidth: 0,
-                        width: "100%",
-                    }, inverse: true, hasMore: loadState.hasMoreOld, loader: _jsx("div", { className: "flex items-center justify-center py-2", children: _jsx(Spin, {}) }), scrollableTarget: "scrollableMessagesDiv", onScroll: (e) => {
-                        const target = e.target;
-                        if (target.scrollTop > BOTTOM_THRESHOLD) {
-                            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, {}) })), 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") }) })] }));
+        }, children: [_jsx(MessageHeader, { onClose: onClose, currentSession: latestConversationSession, isJoined: isJoined }), _jsx(MessageInfiniteScroll, { scrollRef: scrollRef, scrollableTargetId: "scrollableMessagesDiv", loadState: loadState, 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/components/message/SelectSession.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Select } from "antd";
-import { Icon } from "../icon";
+import { Icon } from "../../components/icon";
 import clsx from "clsx";
 const SelectSession = ({ options, value, onChange, excludeOptions, placeholder, }) => {
     const selectedOption = options.find((option) => option.value === value);

package/dist/components/message/UnassignedSessionFooter.js

@@ -4,8 +4,8 @@ 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 "../thread/ManualAssignPopover";
-import { Icon } from "../icon";
+import ManualAssignPopover from "../../components/thread/ManualAssignPopover";
+import { Icon } from "../../components/icon";
 const UnassignedSessionFooter = ({ sessionId, teamId, }) => {
     const { t } = useTranslation();
     const userID = useAuthStore((state) => state.userID);