@droppii-org/chat-sdk 0.1.55 → 0.1.57

package/dist/components/conversation-detail/ConversationDetailInput.js

@@ -0,0 +1,258 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useBoolean } from "ahooks";
+import clsx from "clsx";
+import { Icon } from "../../components/icon";
+import { useSendMessage } from "../../hooks/message/useSendMessage";
+import useAuthStore from "../../store/auth";
+import useConversationStore from "../../store/conversation";
+import useMessageDraftStore from "../../store/messageDraft";
+import { resolveConversationAvatarUrl, resolveConversationDisplayName, } from "../../utils/conversation";
+import { emit } from "../../utils/events";
+import { extractLinkUrls } from "../../utils/link";
+import { useFetchUrlMetadata } from "../../hooks/common/useFetchUrlMetadata";
+import { processAndValidateDocuments, processAndValidateFiles, } from "../../utils/fileValidation";
+import { FilePreviewList } from "../../components/message/footer/FilePreview";
+import LinkInputPreview from "../../components/message/footer/LinkInputPreview";
+import ConversationMoreOptionPanel from "./ConversationMoreOptionPanel";
+const MAX_LINES = 5;
+const CONTAINER_MIN_HEIGHT = 48;
+const ConversationDetailInput = ({ placeholder, onSendMessage, onInputChange, }) => {
+    const { t } = useTranslation("conversation-inbox");
+    const { t: tCommon } = useTranslation("common");
+    const conversationData = useConversationStore((state) => state.conversationData);
+    const selectedConversationId = useConversationStore((state) => state.selectedConversationId);
+    const conversationId = selectedConversationId || (conversationData === null || conversationData === void 0 ? void 0 : conversationData.conversationID) || "";
+    const isConversationReady = !!conversationData && (!!conversationData.userID || !!conversationData.groupID);
+    const sendMessageOptions = useMemo(() => ({
+        scrollEvent: "CONVERSATION_CHAT_SCROLL_TO_BOTTOM_IF_AT_BOTTOM",
+        resolveOfflinePushMeta: () => ({
+            title: conversationData
+                ? resolveConversationDisplayName(conversationData, t)
+                : "Droppii Chat",
+            icon: (conversationData && resolveConversationAvatarUrl(conversationData)) ||
+                "",
+            conversationId: (conversationData === null || conversationData === void 0 ? void 0 : conversationData.conversationID) || "",
+        }),
+    }), [conversationData, t]);
+    const { sendMergeMessage } = useSendMessage(sendMessageOptions);
+    const userID = useAuthStore((state) => state.userID);
+    const setDraft = useMessageDraftStore((state) => state.setDraft);
+    const clearDraft = useMessageDraftStore((state) => state.clearDraft);
+    const containerRef = useRef(null);
+    const textareaRef = useRef(null);
+    const mediaInputRef = useRef(null);
+    const documentInputRef = useRef(null);
+    const [value, setValue] = useState("");
+    const [listUploadFiles, setListUploadFiles] = useState([]);
+    const [isVideoLoading, setIsVideoLoading] = useState(false);
+    const [isFocused, setIsFocused] = useState(false);
+    const [isSending, setIsSending] = useState(false);
+    const [previewDismissed, setPreviewDismissed] = useState(false);
+    const [isMoreOptionOpen, { setFalse: closeMoreOption, toggle: toggleMoreOption },] = useBoolean(false);
+    const previewUrl = useMemo(() => {
+        const urls = extractLinkUrls(value);
+        return urls.length === 1 ? urls[0] : null;
+    }, [value]);
+    const showLinkPreview = !!previewUrl && !previewDismissed;
+    const { data: previewMetadata } = useFetchUrlMetadata(previewUrl !== null && previewUrl !== void 0 ? previewUrl : "", showLinkPreview);
+    useEffect(() => {
+        setPreviewDismissed(false);
+    }, [previewUrl]);
+    const hasFiles = listUploadFiles.length > 0;
+    const canSend = (value.trim().length > 0 || hasFiles) &&
+        !isSending &&
+        isConversationReady &&
+        !isVideoLoading;
+    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(() => {
+        closeMoreOption();
+        setListUploadFiles([]);
+        setIsVideoLoading(false);
+    }, [conversationId, userID, closeMoreOption]);
+    useEffect(() => {
+        var _a;
+        if (!conversationId || !userID) {
+            setValue("");
+            return;
+        }
+        const draft = (_a = useMessageDraftStore.getState().drafts[`${userID}:${conversationId}`]) !== null && _a !== void 0 ? _a : "";
+        setValue(draft);
+        requestAnimationFrame(adjustTextareaHeight);
+    }, [conversationId, userID, 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("CONVERSATION_CHAT_SCROLL_TO_BOTTOM_IF_AT_BOTTOM");
+            }
+        };
+        viewport.addEventListener("resize", handleViewportChange);
+        return () => viewport.removeEventListener("resize", handleViewportChange);
+    }, []);
+    const handleMediaInputChange = useCallback((event) => {
+        var _a;
+        const files = Array.from((_a = event.target.files) !== null && _a !== void 0 ? _a : []);
+        if (files.length === 0)
+            return;
+        const validFiles = processAndValidateFiles(files, {
+            t: tCommon,
+            currentUploadedFiles: listUploadFiles,
+        });
+        if (validFiles.length > 0) {
+            setListUploadFiles((prev) => [...prev, ...validFiles]);
+            const hasVideo = validFiles.some((f) => { var _a; return (_a = f.originFileObj) === null || _a === void 0 ? void 0 : _a.type.startsWith("video/"); });
+            if (hasVideo)
+                setIsVideoLoading(true);
+        }
+        event.target.value = "";
+    }, [tCommon, listUploadFiles]);
+    const handleDocumentInputChange = useCallback((event) => {
+        var _a;
+        const files = Array.from((_a = event.target.files) !== null && _a !== void 0 ? _a : []);
+        if (files.length === 0)
+            return;
+        const validFiles = processAndValidateDocuments(files, tCommon);
+        if (validFiles.length > 0) {
+            setListUploadFiles((prev) => [...prev, ...validFiles]);
+        }
+        event.target.value = "";
+    }, [tCommon]);
+    const handleRemoveFile = useCallback((uid) => {
+        setListUploadFiles((prev) => prev.filter((f) => f.uid !== uid));
+        setIsVideoLoading(false);
+    }, []);
+    const handleChange = (nextValue) => {
+        setValue(nextValue);
+        if (conversationId && userID) {
+            setDraft(userID, conversationId, nextValue);
+        }
+        onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(nextValue);
+    };
+    const resetComposer = () => {
+        setValue("");
+        setListUploadFiles([]);
+        setIsVideoLoading(false);
+        setPreviewDismissed(false);
+        if (conversationId && userID) {
+            clearDraft(userID, conversationId);
+        }
+        requestAnimationFrame(adjustTextareaHeight);
+    };
+    const handleSend = async () => {
+        const text = value.trim();
+        if ((!text && !hasFiles) || isSending)
+            return;
+        const filesToSend = listUploadFiles;
+        const urlMetadata = showLinkPreview && previewUrl && previewMetadata
+            ? {
+                url: previewUrl,
+                title: previewMetadata.title,
+                description: previewMetadata.description,
+                image: previewMetadata.image,
+            }
+            : undefined;
+        resetComposer();
+        setIsSending(true);
+        try {
+            if (onSendMessage) {
+                onSendMessage(text);
+            }
+            else {
+                await sendMergeMessage({
+                    plainText: text,
+                    richText: "",
+                    files: filesToSend,
+                    isInternal: false,
+                    urlMetadata,
+                });
+            }
+        }
+        catch (error) {
+            console.error("handleSend", error);
+        }
+        finally {
+            setIsSending(false);
+        }
+    };
+    const handleFocus = () => {
+        setIsFocused(true);
+        closeMoreOption();
+        emit("CONVERSATION_CHAT_SCROLL_TO_BOTTOM_IF_AT_BOTTOM");
+    };
+    const handleBlur = () => {
+        setIsFocused(false);
+    };
+    const handleToggleMoreOption = () => {
+        var _a;
+        if (!isMoreOptionOpen) {
+            (_a = textareaRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+        }
+        toggleMoreOption();
+    };
+    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 (_jsxs("div", { ref: containerRef, "data-testid": "conversation-detail-input", className: "flex w-full shrink-0 flex-col bg-chat-bubble-neutral/[0.05]", children: [_jsx("input", { ref: mediaInputRef, type: "file", accept: "image/jpeg,image/png,image/jpg,video/*", multiple: true, className: "hidden", onChange: handleMediaInputChange }), _jsx("input", { ref: documentInputRef, type: "file", accept: ".pdf,.doc,.docx", multiple: true, className: "hidden", onChange: handleDocumentInputChange }), listUploadFiles.length > 0 && (_jsx(FilePreviewList, { files: listUploadFiles, onRemove: (file) => handleRemoveFile(file.uid), onVideoReady: () => setIsVideoLoading(false) })), showLinkPreview && previewUrl && (_jsx(LinkInputPreview, { url: previewUrl, onRemove: () => setPreviewDismissed(true) })), _jsxs("div", { className: "flex items-end gap-3 px-3 py-2", children: [_jsx("div", { className: "flex shrink-0 items-center", children: _jsx("button", { type: "button", onClick: handleToggleMoreOption, "aria-label": t("thread_detail.more_option.toggle"), "aria-expanded": isMoreOptionOpen, "data-testid": "conversation-detail-more-option-toggle", className: "flex py-3 items-center justify-center rounded-full", children: isMoreOptionOpen ? (_jsx(Icon, { icon: "close-circle-o", size: 24, className: "text-primary-400" })) : (_jsx(Icon, { icon: "plus-circle-o", size: 24, className: "text-gray-900" })) }) }), _jsx("div", { className: clsx("flex min-w-0 flex-1 overflow-hidden rounded-xl border bg-white transition-shadow", isFocused
+                            ? "border-primary-200 shadow-primary-focus"
+                            : "border-gray-50"), 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": "conversation-detail-message-input", className: "conversation-message-input-scrollbar min-h-0 min-w-0 flex-1 resize-none appearance-none border-0 bg-transparent p-0 text-[16px] leading-[1.6] tracking-[0.16px] text-black outline-none ring-0 placeholder:text-gray-400 focus:border-0 focus:outline-none focus:ring-0" }) }) }), _jsx("div", { className: "flex shrink-0 items-center pb-1", children: _jsx("button", { type: "button", onClick: () => void handleSend(), disabled: !canSend, "data-testid": "conversation-detail-send", className: clsx("flex h-10 w-10 items-center justify-center rounded-full", canSend ? "bg-chat-send" : "bg-chat-send opacity-25"), children: _jsx(Icon, { icon: "send-b", size: 20, className: "text-white" }) }) })] }), isMoreOptionOpen && (_jsx(ConversationMoreOptionPanel, { disabled: !isConversationReady, onTriggerMediaInput: () => { var _a; return (_a = mediaInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, onTriggerDocumentInput: () => { var _a; return (_a = documentInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); } }))] }));
+};
+export default ConversationDetailInput;

package/dist/components/conversation-detail/ConversationMessageList.d.ts

@@ -0,0 +1,7 @@
+import { type ReactNode } from "react";
+export interface ConversationMessageListProps {
+    bottomSlot?: ReactNode;
+}
+declare const ConversationMessageList: ({ bottomSlot }: ConversationMessageListProps) => import("react/jsx-runtime").JSX.Element;
+export default ConversationMessageList;
+//# sourceMappingURL=ConversationMessageList.d.ts.map

package/dist/components/conversation-detail/ConversationMessageList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConversationMessageList.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-detail/ConversationMessageList.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAoC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAczE,MAAM,WAAW,4BAA4B;IAC3C,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED,QAAA,MAAM,uBAAuB,GAAI,gBAAgB,4BAA4B,4CA2F5E,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

package/dist/components/conversation-detail/ConversationMessageList.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
+import { Empty, Spin } from "antd";
+import { useEventListener } from "ahooks";
+import { useTranslation } from "react-i18next";
+import { useChatContext } from "../../context/ChatContext";
+import MessageInfiniteScroll from "../../components/message/MessageInfiniteScroll";
+import { useMessage } from "../../hooks/message/useMessage";
+import { useMessageListScroll } from "../../hooks/message/useMessageListScroll";
+import useConversationStore from "../../store/conversation";
+import useAuthStore from "../../store/auth";
+import { isGroupChat as resolveIsGroupChat } from "../../utils/conversation";
+import emitter from "../../utils/events";
+import MessageItem from "../../components/message/item";
+const ConversationMessageList = ({ bottomSlot }) => {
+    const { t } = useTranslation("conversation-inbox");
+    const { user } = useChatContext();
+    const authUserID = useAuthStore((state) => state.userID);
+    const conversation = useConversationStore((state) => state.conversationData);
+    const selectedConversationId = useConversationStore((state) => state.selectedConversationId);
+    const conversationId = selectedConversationId || (conversation === null || conversation === void 0 ? void 0 : conversation.conversationID) || "";
+    const isGroupChat = conversation ? resolveIsGroupChat(conversation) : false;
+    const messageController = useMessage(conversationId);
+    const { scrollRef, loadMoreOldMessage, handleInfiniteScroll, scrollToBottomIfAtBottom, } = useMessageListScroll(Object.assign({ conversationId, userId: (user === null || user === void 0 ? void 0 : user.userID) || authUserID }, messageController));
+    const { loadState, moreOldLoading } = messageController;
+    const isMessageLoading = !conversationId || loadState.initLoading;
+    const [openToolboxMessageId, setOpenToolboxMessageId] = useState(null);
+    const closeToolbox = useCallback(() => setOpenToolboxMessageId(null), []);
+    useEffect(() => {
+        emitter.on("CONVERSATION_CHAT_SCROLL_TO_BOTTOM_IF_AT_BOTTOM", scrollToBottomIfAtBottom);
+        return () => {
+            emitter.off("CONVERSATION_CHAT_SCROLL_TO_BOTTOM_IF_AT_BOTTOM", scrollToBottomIfAtBottom);
+        };
+    }, [scrollToBottomIfAtBottom]);
+    useEventListener("scroll", closeToolbox, {
+        target: scrollRef,
+        enable: !!openToolboxMessageId,
+    });
+    return (_jsx("div", { "data-testid": "conversation-message-list", className: "relative flex min-h-0 min-w-0 flex-1 flex-col overflow-x-hidden bg-white", children: isMessageLoading ? (_jsx("div", { className: "flex flex-1 items-center justify-center py-12", children: _jsx(Spin, {}) })) : (_jsxs(MessageInfiniteScroll, { scrollRef: scrollRef, scrollableTargetId: "scrollableConversationMessagesDiv", loadState: loadState, moreOldLoading: moreOldLoading, onLoadMoreOld: loadMoreOldMessage, onScroll: handleInfiniteScroll, containerClassName: "h-full", empty: _jsx("div", { className: "flex flex-1 items-center justify-center py-12", children: _jsx(Empty, { description: t("empty.no_messages") }) }), children: [bottomSlot, loadState.messageList.map((message, index, array) => (_jsx(MessageItem, { message: message, allMessages: array, isGroupChat: isGroupChat, forceHideTip: index === 0 && !!bottomSlot, contextMenuOpen: openToolboxMessageId === message.clientMsgID, onContextMenuOpenChange: (open) => setOpenToolboxMessageId(open ? message.clientMsgID : null), onQuoteMessage: closeToolbox, onRevokeMessage: closeToolbox, enableLongPress: true }, message.clientMsgID)))] })) }));
+};
+export default ConversationMessageList;

package/dist/components/conversation-detail/ConversationMoreOptionItem.d.ts

@@ -0,0 +1,8 @@
+import type { MoreOptionConfig } from "../../constants/moreOption";
+export interface ConversationMoreOptionItemProps {
+    option: MoreOptionConfig;
+    onSelect: (option: MoreOptionConfig) => void;
+}
+declare const ConversationMoreOptionItem: ({ option, onSelect }: ConversationMoreOptionItemProps) => import("react/jsx-runtime").JSX.Element;
+export default ConversationMoreOptionItem;
+//# sourceMappingURL=ConversationMoreOptionItem.d.ts.map

package/dist/components/conversation-detail/ConversationMoreOptionItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConversationMoreOptionItem.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-detail/ConversationMoreOptionItem.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAI/D,MAAM,WAAW,+BAA+B;IAC9C,MAAM,EAAE,gBAAgB,CAAC;IACzB,QAAQ,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAC9C;AAED,QAAA,MAAM,0BAA0B,GAAI,sBAAsB,+BAA+B,4CA+BxF,CAAC;AAEF,eAAe,0BAA0B,CAAC"}

package/dist/components/conversation-detail/ConversationMoreOptionItem.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import { Icon } from "../../components/icon";
+const ICON_SIZE = 24;
+const ConversationMoreOptionItem = ({ option, onSelect }) => {
+    const { t } = useTranslation("conversation-inbox");
+    const label = t(option.labelKey);
+    const handleClick = () => {
+        if (!option.enabled)
+            return;
+        onSelect(option);
+    };
+    return (_jsxs("button", { type: "button", onClick: handleClick, disabled: !option.enabled, "aria-label": label, "data-testid": `biz-more-option-${option.labelKey}`, className: clsx("flex flex-col items-center gap-1 rounded-xl px-1 transition-colors", option.enabled
+            ? "active:bg-chat-bubble-neutral/[0.08]"
+            : "cursor-not-allowed opacity-40"), children: [_jsx("span", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-gray-200/10", children: _jsx(Icon, { icon: option.icon, size: ICON_SIZE, className: "text-gray-900" }) }), _jsx("span", { className: "line-clamp-2 text-center text-[12px] leading-[1.4] text-gray-900", children: label })] }));
+};
+export default ConversationMoreOptionItem;

package/dist/components/conversation-detail/ConversationMoreOptionPanel.d.ts

@@ -0,0 +1,10 @@
+import { MoreOptionConfig } from "../../constants/moreOption";
+export interface ConversationMoreOptionPanelProps {
+    disabled?: boolean;
+    onSelectOption?: (option: MoreOptionConfig) => void;
+    onTriggerMediaInput?: () => void;
+    onTriggerDocumentInput?: () => void;
+}
+declare const ConversationMoreOptionPanel: ({ disabled, onSelectOption, onTriggerMediaInput, onTriggerDocumentInput, }: ConversationMoreOptionPanelProps) => import("react/jsx-runtime").JSX.Element;
+export default ConversationMoreOptionPanel;
+//# sourceMappingURL=ConversationMoreOptionPanel.d.ts.map

package/dist/components/conversation-detail/ConversationMoreOptionPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConversationMoreOptionPanel.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-detail/ConversationMoreOptionPanel.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,gBAAgB,EACjB,MAAM,wBAAwB,CAAC;AAGhC,MAAM,WAAW,gCAAgC;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACpD,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;CACrC;AAED,QAAA,MAAM,2BAA2B,GAAI,4EAKlC,gCAAgC,4CA8BlC,CAAC;AAEF,eAAe,2BAA2B,CAAC"}

package/dist/components/conversation-detail/ConversationMoreOptionPanel.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { MORE_OPTIONS, } from "../../constants/moreOption";
+import ConversationMoreOptionItem from "./ConversationMoreOptionItem";
+const ConversationMoreOptionPanel = ({ disabled = false, onSelectOption, onTriggerMediaInput, onTriggerDocumentInput, }) => {
+    const handleSelectOption = useCallback((option) => {
+        if (option.labelKey === "thread_detail.more_option.media") {
+            onTriggerMediaInput === null || onTriggerMediaInput === void 0 ? void 0 : onTriggerMediaInput();
+            return;
+        }
+        if (option.labelKey === "thread_detail.more_option.document") {
+            onTriggerDocumentInput === null || onTriggerDocumentInput === void 0 ? void 0 : onTriggerDocumentInput();
+            return;
+        }
+        onSelectOption === null || onSelectOption === void 0 ? void 0 : onSelectOption(option);
+    }, [onSelectOption, onTriggerMediaInput, onTriggerDocumentInput]);
+    return (_jsx("div", { "data-testid": "conversation-more-option-panel", className: "grid grid-cols-4 gap-y-5 bg-white py-5", children: MORE_OPTIONS.map((option) => (_jsx(ConversationMoreOptionItem, { option: Object.assign(Object.assign({}, option), { enabled: option.enabled && !disabled }), onSelect: handleSelectOption }, option.labelKey))) }));
+};
+export default ConversationMoreOptionPanel;

package/dist/components/conversation-detail/bot/BotButtonMessage.d.ts

@@ -0,0 +1,10 @@
+import type { BotButtonOption } from "../../../types/conversation";
+export interface BotButtonMessageProps {
+    buttons: BotButtonOption[];
+    disabled?: boolean;
+    onSelect: (actionId: string) => void;
+    onRestart: () => void;
+}
+declare const BotButtonMessage: ({ buttons, disabled, onSelect, onRestart, }: BotButtonMessageProps) => import("react/jsx-runtime").JSX.Element | null;
+export default BotButtonMessage;
+//# sourceMappingURL=BotButtonMessage.d.ts.map

package/dist/components/conversation-detail/bot/BotButtonMessage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BotButtonMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation-detail/bot/BotButtonMessage.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAI5D,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,QAAA,MAAM,gBAAgB,GAAI,6CAKvB,qBAAqB,mDA4EvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/conversation-detail/bot/BotButtonMessage.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import { Icon } from "../../../components/icon";
+import MessageBubble from "../../../components/message/item/MessageBubble";
+import { BOT_BUTTON_MENU_THRESHOLD, BOT_DEFAULT_BUTTON_ID, } from "../../../constants/botFlow";
+const CHEVRON_SIZE = 20;
+const BotButtonMessage = ({ buttons, disabled, onSelect, onRestart, }) => {
+    const { t } = useTranslation("conversation-inbox");
+    if (buttons.length === 0)
+        return null;
+    const isMenuStyle = buttons.length > BOT_BUTTON_MENU_THRESHOLD;
+    const handleSelect = (actionId) => {
+        if (disabled)
+            return;
+        if (actionId === BOT_DEFAULT_BUTTON_ID) {
+            onRestart();
+            return;
+        }
+        onSelect(actionId);
+    };
+    const optionsNode = isMenuStyle ? (_jsx("div", { className: "flex flex-col overflow-hidden rounded-xl bg-white", children: buttons.map((option, index) => (_jsxs("button", { type: "button", disabled: disabled, onClick: () => handleSelect(option.id), className: clsx("flex items-center gap-4 px-3 py-2 text-left transition-colors", index !== buttons.length - 1 && "border-b border-gray-25", disabled && "cursor-not-allowed opacity-60"), children: [_jsx("span", { className: "flex-1 text-[16px] font-medium leading-[1.6] text-gray-900", children: option.id === BOT_DEFAULT_BUTTON_ID
+                        ? t("thread_detail.bot.restart")
+                        : option.label }), _jsx(Icon, { icon: "angle-right-o", size: CHEVRON_SIZE, className: "text-gray-900" })] }, option.id))) })) : (_jsx("div", { className: "flex flex-col gap-2", children: buttons.map((option) => (_jsx("button", { type: "button", disabled: disabled, onClick: () => handleSelect(option.id), className: clsx("flex flex-1 items-center justify-center gap-2 rounded-lg border border-primary-400 bg-primary-25 px-3 py-2", "text-center text-[14px] font-[510] leading-[160%] text-primary-400 transition-colors", disabled && "cursor-not-allowed opacity-60"), children: _jsx("span", { children: option.id === BOT_DEFAULT_BUTTON_ID
+                    ? t("thread_detail.bot.restart")
+                    : option.label }) }, option.id))) }));
+    return (_jsx("div", { className: "flex min-w-0 flex-col gap-2 px-3 py-1 sm:px-4", children: _jsx("div", { className: "flex min-w-0 items-end justify-start pl-3 pr-12", children: _jsx("div", { className: "flex min-w-0 max-w-[75%] flex-col items-start", children: _jsx(MessageBubble, { isMine: false, content: optionsNode }) }) }) }));
+};
+export default BotButtonMessage;

package/dist/components/conversation-detail/bot/BotStartButton.d.ts

@@ -0,0 +1,8 @@
+export interface BotStartButtonProps {
+    label: string;
+    onClick: () => void;
+    disabled?: boolean;
+}
+declare const BotStartButton: ({ label, onClick, disabled }: BotStartButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default BotStartButton;
+//# sourceMappingURL=BotStartButton.d.ts.map

package/dist/components/conversation-detail/bot/BotStartButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BotStartButton.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation-detail/bot/BotStartButton.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,cAAc,GAAI,8BAA8B,mBAAmB,4CAkBxE,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/conversation-detail/bot/BotStartButton.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { Icon } from "../../../components/icon";
+const ICON_SIZE = 20;
+const BotStartButton = ({ label, onClick, disabled }) => {
+    return (_jsxs("button", { type: "button", onClick: onClick, disabled: disabled, className: clsx("flex h-12 w-full items-center justify-center gap-2 rounded-lg", "text-[16px] font-medium leading-[1.6] text-white transition-colors", disabled
+            ? "cursor-not-allowed bg-primary-400/60"
+            : "bg-primary-400 active:bg-primary-400/90"), children: [_jsx(Icon, { icon: "chat-square-o", size: ICON_SIZE, className: "text-white" }), _jsx("span", { children: label })] }));
+};
+export default BotStartButton;

package/dist/components/conversation-detail/bot/BotSuggest.d.ts

@@ -0,0 +1,7 @@
+export interface BotSuggestProps {
+    disabled?: boolean;
+    onRestart: () => void;
+}
+declare const BotSuggest: ({ disabled, onRestart }: BotSuggestProps) => import("react/jsx-runtime").JSX.Element;
+export default BotSuggest;
+//# sourceMappingURL=BotSuggest.d.ts.map

package/dist/components/conversation-detail/bot/BotSuggest.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BotSuggest.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation-detail/bot/BotSuggest.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,QAAA,MAAM,UAAU,GAAI,yBAAyB,eAAe,4CAyB3D,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/conversation-detail/bot/BotSuggest.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import { Icon } from "../../../components/icon";
+const CHIP_ICON_SIZE = 14;
+const BotSuggest = ({ disabled, onRestart }) => {
+    const { t } = useTranslation("conversation-inbox");
+    return (_jsx("div", { "data-testid": "conversation-bot-suggest", className: "flex w-full items-center gap-2 overflow-x-auto bg-chat-bubble-neutral/[0.05] px-2 pt-2", children: _jsxs("button", { type: "button", disabled: disabled, onClick: onRestart, className: clsx("flex h-7 shrink-0 items-center gap-1 rounded-lg bg-gray-25 px-3", "text-[12px] font-[510] leading-[1.6] tracking-[0.12px] text-gray-900 transition-colors", disabled && "cursor-not-allowed opacity-60"), children: [_jsx(Icon, { icon: "arrow-reload-o", size: CHIP_ICON_SIZE, className: "text-gray-900" }), _jsx("span", { className: "whitespace-nowrap", children: t("thread_detail.bot.restart") })] }) }));
+};
+export default BotSuggest;

package/dist/components/conversation-detail/bot/index.d.ts

@@ -0,0 +1,7 @@
+export { default as BotStartButton } from "./BotStartButton";
+export type { BotStartButtonProps } from "./BotStartButton";
+export { default as BotButtonMessage } from "./BotButtonMessage";
+export type { BotButtonMessageProps } from "./BotButtonMessage";
+export { default as BotSuggest } from "./BotSuggest";
+export type { BotSuggestProps } from "./BotSuggest";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/conversation-detail/bot/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation-detail/bot/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAE5D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAEhE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC"}

package/dist/components/conversation-detail/bot/index.js

@@ -0,0 +1,3 @@
+export { default as BotStartButton } from "./BotStartButton";
+export { default as BotButtonMessage } from "./BotButtonMessage";
+export { default as BotSuggest } from "./BotSuggest";

package/dist/components/conversation-detail/index.d.ts

@@ -0,0 +1,10 @@
+export { default as ConversationDetailHeader } from "./ConversationDetailHeader";
+export type { ConversationDetailHeaderProps } from "./ConversationDetailHeader";
+export { default as ConversationDetailInput } from "./ConversationDetailInput";
+export type { ConversationDetailInputProps } from "./ConversationDetailInput";
+export { default as ConversationMessageList } from "./ConversationMessageList";
+export { default as ConversationMoreOptionPanel } from "./ConversationMoreOptionPanel";
+export type { ConversationMoreOptionPanelProps } from "./ConversationMoreOptionPanel";
+export { default as ConversationMoreOptionItem } from "./ConversationMoreOptionItem";
+export type { ConversationMoreOptionItemProps } from "./ConversationMoreOptionItem";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/conversation-detail/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-detail/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACjF,YAAY,EAAE,6BAA6B,EAAE,MAAM,4BAA4B,CAAC;AAEhF,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAC/E,YAAY,EAAE,4BAA4B,EAAE,MAAM,2BAA2B,CAAC;AAE9E,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAE/E,OAAO,EAAE,OAAO,IAAI,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;AACvF,YAAY,EAAE,gCAAgC,EAAE,MAAM,+BAA+B,CAAC;AACtF,OAAO,EAAE,OAAO,IAAI,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AACrF,YAAY,EAAE,+BAA+B,EAAE,MAAM,8BAA8B,CAAC"}

package/dist/components/conversation-detail/index.js

@@ -0,0 +1,5 @@
+export { default as ConversationDetailHeader } from "./ConversationDetailHeader";
+export { default as ConversationDetailInput } from "./ConversationDetailInput";
+export { default as ConversationMessageList } from "./ConversationMessageList";
+export { default as ConversationMoreOptionPanel } from "./ConversationMoreOptionPanel";
+export { default as ConversationMoreOptionItem } from "./ConversationMoreOptionItem";

package/dist/components/conversation-inbox/ConversationInboxHeader.d.ts

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

package/dist/components/conversation-inbox/ConversationInboxHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConversationInboxHeader.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-inbox/ConversationInboxHeader.tsx"],"names":[],"mappings":"AAIA,QAAA,MAAM,uBAAuB,+CAkB5B,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

package/dist/components/conversation-inbox/ConversationInboxHeader.js

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+const ConversationInboxHeader = () => {
+    const { t } = useTranslation("conversation-inbox");
+    return (_jsx("div", { "data-testid": "conversation-inbox-header", className: "flex w-full flex-col border-b border-gray-100 bg-white", children: _jsx("div", { className: "flex h-12 items-end px-3", children: _jsxs("div", { className: "flex h-full flex-col items-center justify-end px-3", children: [_jsx("span", { className: "pb-1.5 text-center text-[16px] font-bold leading-[160%] tracking-[0.16px] text-primary-400", children: t("tabs.messages") }), _jsx("span", { className: "h-[3px] w-full rounded-t bg-primary-400" })] }) }) }));
+};
+export default ConversationInboxHeader;

package/dist/components/conversation-inbox/ConversationInboxItem.d.ts

@@ -0,0 +1,8 @@
+import type { ConversationListItem } from "../../types/conversation";
+export interface ConversationInboxItemProps {
+    item: ConversationListItem;
+    onClick: (item: ConversationListItem) => void;
+}
+declare const ConversationInboxItem: ({ item, onClick }: ConversationInboxItemProps) => import("react/jsx-runtime").JSX.Element;
+export default ConversationInboxItem;
+//# sourceMappingURL=ConversationInboxItem.d.ts.map

package/dist/components/conversation-inbox/ConversationInboxItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConversationInboxItem.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-inbox/ConversationInboxItem.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAajE,MAAM,WAAW,0BAA0B;IACzC,IAAI,EAAE,oBAAoB,CAAC;IAC3B,OAAO,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;CAC/C;AAQD,QAAA,MAAM,qBAAqB,GAAI,mBAAmB,0BAA0B,4CA2C3E,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/dist/components/conversation-inbox/ConversationInboxItem.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import dayjs from "dayjs";
+import { useTranslation } from "react-i18next";
+import useAuthStore from "../../store/auth";
+import { formatTimestamp, parseLatestMessage } from "../../utils/common";
+import { isBotPeer, resolveConversationAvatarUrl, resolvePeerBadgeLabel, resolveConversationDisplayName, } from "../../utils/conversation";
+import ThreadCard from "../../components/conversation/ThreadCard";
+import ConversationPeerAvatar from "./ConversationPeerAvatar";
+import ConversationInboxTitle from "./ConversationInboxTitle";
+const formatLatestMessageTime = (sendTime) => {
+    if (!sendTime)
+        return "";
+    const isToday = dayjs(sendTime).isSame(dayjs(), "day");
+    return formatTimestamp(sendTime, { hasTime: isToday });
+};
+const ConversationInboxItem = ({ item, onClick }) => {
+    var _a;
+    const { t } = useTranslation("conversation-inbox");
+    const { t: tCommon } = useTranslation("common");
+    const currentUserId = useAuthStore((state) => state.userID);
+    const displayName = resolveConversationDisplayName(item, t);
+    const avatarUrl = resolveConversationAvatarUrl(item);
+    const badgeLabel = resolvePeerBadgeLabel(item.peerType, t);
+    const latestMessagePreview = parseLatestMessage(item.latestMsg, currentUserId, tCommon, isBotPeer(item));
+    const latestMessageTime = formatLatestMessageTime(item.latestMsgSendTime || null);
+    const unreadCount = (_a = item.unreadCount) !== null && _a !== void 0 ? _a : 0;
+    return (_jsx(ThreadCard, { testId: "conversation-inbox-thread-card", onClick: () => onClick(item), unreadCount: unreadCount, time: latestMessageTime, preview: latestMessagePreview, avatar: _jsx(ConversationPeerAvatar, { peerType: item.peerType, displayName: displayName, avatarUrl: avatarUrl, badgeLabel: badgeLabel }), title: _jsx(ConversationInboxTitle, { peerType: item.peerType, displayName: displayName, hasUnread: unreadCount > 0 }) }));
+};
+export default ConversationInboxItem;

package/dist/components/conversation-inbox/ConversationInboxList.d.ts

@@ -0,0 +1,12 @@
+import type { ConversationListItem } from "../../types/conversation";
+export interface ConversationInboxListProps {
+    items: ConversationListItem[];
+    isLoading: boolean;
+    isFetchingNextPage: boolean;
+    hasNextPage: boolean;
+    onLoadMore: () => void;
+    onSelectThread?: (item: ConversationListItem) => void;
+}
+declare const ConversationInboxList: ({ items, isLoading, isFetchingNextPage, hasNextPage, onLoadMore, onSelectThread, }: ConversationInboxListProps) => import("react/jsx-runtime").JSX.Element;
+export default ConversationInboxList;
+//# sourceMappingURL=ConversationInboxList.d.ts.map

package/dist/components/conversation-inbox/ConversationInboxList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConversationInboxList.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-inbox/ConversationInboxList.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAKjE,MAAM,WAAW,0BAA0B;IACzC,KAAK,EAAE,oBAAoB,EAAE,CAAC;IAC9B,SAAS,EAAE,OAAO,CAAC;IACnB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;CACvD;AAYD,QAAA,MAAM,qBAAqB,GAAI,oFAO5B,0BAA0B,4CA8E5B,CAAC;AAEF,eAAe,qBAAqB,CAAC"}