@droppii-org/chat-sdk 0.6.38 → 0.6.40

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

@@ -5,7 +5,9 @@ export interface ConversationDetailInputProps {
     onInputChange?: (value: string) => void;
     moreOptions?: MoreOptionConfig[];
     onOpenBotMenu?: () => void;
+    /** Shows the sticker picker entry in the composer. Defaults to true. */
+    showSticker?: boolean;
 }
-declare const ConversationDetailInput: ({ placeholder, onSendMessage, onInputChange, moreOptions, onOpenBotMenu, }: ConversationDetailInputProps) => import("react/jsx-runtime").JSX.Element;
+declare const ConversationDetailInput: ({ placeholder, onSendMessage, onInputChange, moreOptions, onOpenBotMenu, showSticker, }: ConversationDetailInputProps) => import("react/jsx-runtime").JSX.Element;
 export default ConversationDetailInput;
 //# sourceMappingURL=ConversationDetailInput.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ConversationDetailInput.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-detail/ConversationDetailInput.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAmB/D,MAAM,WAAW,4BAA4B;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACjC,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,QAAA,MAAM,uBAAuB,GAAI,4EAM9B,4BAA4B,4CAosB9B,CAAC;AAEF,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"ConversationDetailInput.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-detail/ConversationDetailInput.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAoB/D,MAAM,WAAW,4BAA4B;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACjC,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,wEAAwE;IACxE,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,QAAA,MAAM,uBAAuB,GAAI,yFAO9B,4BAA4B,4CA0vB9B,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

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

@@ -15,11 +15,13 @@ import useMessageDraftStore from "../../store/messageDraft";
 import { emit } from "../../utils/events";
 import { extractLinkUrls } from "../../utils/link";
 import { useFetchUrlMetadata } from "../../hooks/common/useFetchUrlMetadata";
+import { useOutsideTapDismiss } from "../../hooks/common/useOutsideTapDismiss";
 import { processAndValidateDocuments, processAndValidateFiles, } from "../../utils/fileValidation";
 import { FilePreviewList } from "../../components/message/footer/FilePreview";
 import LinkInputPreview from "../../components/message/footer/LinkInputPreview";
 import { ReplyPreviewBar } from "../../components/message/reply/ReplyPreviewBar";
 import ConversationMoreOptionPanel from "./ConversationMoreOptionPanel";
+import StickerPicker from "./sticker-picker/StickerPicker";
 import { useMentionTrigger } from "./mention/useMentionTrigger";
 import { useMentionOptions } from "../../components/message/footer/mention/useMentionOptions";
 import { useMentionTokens } from "./mention/useMentionTokens";
@@ -31,7 +33,7 @@ const MAX_LINES = 5;
 const CONTAINER_MIN_HEIGHT = 48;
 const FALLBACK_LINE_HEIGHT = 25.6;
 const MAX_MENTIONED_USERS = 10;
-const ConversationDetailInput = ({ placeholder, onSendMessage, onInputChange, moreOptions, onOpenBotMenu, }) => {
+const ConversationDetailInput = ({ placeholder, onSendMessage, onInputChange, moreOptions, onOpenBotMenu, showSticker = true, }) => {
     var _a;
     const { t } = useTranslation("conversation-inbox");
     const { t: tCommon } = useTranslation("common");
@@ -75,7 +77,7 @@ const ConversationDetailInput = ({ placeholder, onSendMessage, onInputChange, mo
     const sendMessageOptions = useMemo(() => ({
         scrollEvent: "CONVERSATION_CHAT_SCROLL_TO_BOTTOM_IF_AT_BOTTOM",
     }), []);
-    const { sendMergeMessage } = useSendMessage(sendMessageOptions);
+    const { sendMergeMessage, sendStickerMessage } = useSendMessage(sendMessageOptions);
     const { reportActivity: reportTyping, stopTyping } = useReportTypingState(conversationId);
     const userID = useAuthStore((state) => state.userID);
     const setDraft = useMessageDraftStore((state) => state.setDraft);
@@ -95,6 +97,15 @@ const ConversationDetailInput = ({ placeholder, onSendMessage, onInputChange, mo
     const [isSending, setIsSending] = useState(false);
     const [previewDismissed, setPreviewDismissed] = useState(false);
     const [isMoreOptionOpen, { setFalse: closeMoreOption, toggle: toggleMoreOption },] = useBoolean(false);
+    const [isStickerOpen, { setFalse: closeSticker, toggle: toggleSticker },] = useBoolean(false);
+    useOutsideTapDismiss({
+        enabled: isMoreOptionOpen || isStickerOpen,
+        insideRef: containerRef,
+        onDismiss: () => {
+            closeMoreOption();
+            closeSticker();
+        },
+    });
     const [caretIndex, setCaretIndex] = useState(0);
     const rawMentionTrigger = useMentionTrigger(value, caretIndex);
     // Escape dismisses the menu for the CURRENT trigger span without erasing
@@ -169,10 +180,11 @@ const ConversationDetailInput = ({ placeholder, onSendMessage, onInputChange, mo
     }, [getTextareaHeights]);
     useEffect(() => {
         closeMoreOption();
+        closeSticker();
         setListUploadFiles([]);
         setPendingVideoUids([]);
         resetTokens();
-    }, [conversationId, userID, closeMoreOption, resetTokens]);
+    }, [conversationId, userID, closeMoreOption, closeSticker, resetTokens]);
     useEffect(() => {
         setSelectedMentionIndex(0);
     }, [mentionTrigger === null || mentionTrigger === void 0 ? void 0 : mentionTrigger.triggerStart, mentionTrigger === null || mentionTrigger === void 0 ? void 0 : mentionTrigger.query]);
@@ -349,6 +361,7 @@ const ConversationDetailInput = ({ placeholder, onSendMessage, onInputChange, mo
     const handleFocus = () => {
         setIsFocused(true);
         closeMoreOption();
+        closeSticker();
         emit("CONVERSATION_CHAT_SCROLL_TO_BOTTOM_IF_AT_BOTTOM");
     };
     const handleBlur = () => {
@@ -359,9 +372,24 @@ const ConversationDetailInput = ({ placeholder, onSendMessage, onInputChange, mo
         var _a;
         if (!isMoreOptionOpen) {
             (_a = textareaRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+            closeSticker();
         }
         toggleMoreOption();
     };
+    const handleToggleSticker = () => {
+        var _a;
+        if (!isStickerOpen) {
+            (_a = textareaRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+            closeMoreOption();
+        }
+        toggleSticker();
+    };
+    // Picker stays open after a send so several stickers can go out in a row.
+    const handleSelectSticker = (sticker) => {
+        if (!isConversationReady)
+            return;
+        void sendStickerMessage(sticker);
+    };
     const insertNewline = (textarea) => {
         const { selectionStart, selectionEnd } = textarea;
         const nextValue = value.slice(0, selectionStart) + "\n" + value.slice(selectionEnd);
@@ -467,8 +495,10 @@ const ConversationDetailInput = ({ placeholder, onSendMessage, onInputChange, mo
                             : "border-gray-50"), style: { minHeight: CONTAINER_MIN_HEIGHT }, children: _jsxs("div", { className: "flex min-w-0 flex-[1_0_0] items-center gap-2 self-stretch px-3 py-1", children: [onOpenBotMenu && (_jsx("button", { type: "button", onClick: onOpenBotMenu, "aria-label": t("thread_detail.bot.menu.open_menu"), "data-testid": "conversation-detail-open-bot-menu", className: "flex shrink-0 items-center justify-center", children: _jsx(Icon, { icon: "chat-suggest-o", size: 24, className: "text-gray-600" }) })), _jsx("textarea", { ref: textareaRef, value: value, rows: 1, onChange: (event) => {
                                         var _a;
                                         return handleChange(event.target.value, (_a = event.target.selectionStart) !== null && _a !== void 0 ? _a : event.target.value.length);
-                                    }, onSelect: handleSelectionChange, 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" }), isMentionMenuOpen && mentionMenuPosition && (_jsx(BizMentionMenu, { options: mentionOptions, selectedIndex: selectedMentionIndex, onSelect: selectMentionOption, onHoverIndex: setSelectedMentionIndex, position: mentionMenuPosition, limitReached: mentionLimitReached, limitMax: MAX_MENTIONED_USERS, visible: true }))] }) }), _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
+                                    }, onSelect: handleSelectionChange, 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" }), isMentionMenuOpen && mentionMenuPosition && (_jsx(BizMentionMenu, { options: mentionOptions, selectedIndex: selectedMentionIndex, onSelect: selectMentionOption, onHoverIndex: setSelectedMentionIndex, position: mentionMenuPosition, limitReached: mentionLimitReached, limitMax: MAX_MENTIONED_USERS, visible: true })), showSticker && (_jsx("button", { type: "button", onClick: handleToggleSticker, "aria-label": t("thread_detail.sticker.toggle"), "aria-expanded": isStickerOpen, "data-testid": "conversation-detail-sticker-toggle", className: "flex shrink-0 items-center justify-center", children: _jsx(Icon, { icon: isStickerOpen ? "sticker-b" : "sticker-o", size: 24, className: isStickerOpen
+                                            ? "text-[var(--dc-color-primary)]"
+                                            : "text-gray-600" }) }))] }) }), _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-[var(--dc-color-primary)]"
-                                : "bg-[var(--dc-color-primary)] opacity-25"), children: _jsx(Icon, { icon: "send-b", size: 20, className: "text-white" }) }) })] }), isMoreOptionOpen && (_jsx(ConversationMoreOptionPanel, { disabled: !isConversationReady, options: moreOptions, 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(); } }))] }));
+                                : "bg-[var(--dc-color-primary)] opacity-25"), children: _jsx(Icon, { icon: "send-b", size: 20, className: "text-white" }) }) })] }), isMoreOptionOpen && (_jsx(ConversationMoreOptionPanel, { disabled: !isConversationReady, options: moreOptions, 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(); } })), showSticker && isStickerOpen && (_jsx(StickerPicker, { onSelectSticker: handleSelectSticker }))] }));
 };
 export default ConversationDetailInput;

package/dist/components/conversation-detail/sticker-picker/StickerCategoryTabs.d.ts

@@ -0,0 +1,9 @@
+import { type StickerTab } from "./constants";
+interface StickerCategoryTabsProps {
+    tabs: StickerTab[];
+    activeTabId: string | null;
+    onSelectTab: (tabId: string) => void;
+}
+declare const StickerCategoryTabs: ({ tabs, activeTabId, onSelectTab, }: StickerCategoryTabsProps) => import("react/jsx-runtime").JSX.Element;
+export default StickerCategoryTabs;
+//# sourceMappingURL=StickerCategoryTabs.d.ts.map

package/dist/components/conversation-detail/sticker-picker/StickerCategoryTabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StickerCategoryTabs.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation-detail/sticker-picker/StickerCategoryTabs.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAyB,KAAK,UAAU,EAAE,MAAM,aAAa,CAAC;AAErE,UAAU,wBAAwB;IAChC,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAID,QAAA,MAAM,mBAAmB,GAAI,qCAI1B,wBAAwB,4CAiE1B,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/components/conversation-detail/sticker-picker/StickerCategoryTabs.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import clsx from "clsx";
+import { Icon } from "../../../components/icon";
+import { RECENT_STICKER_TAB_ID } from "./constants";
+const TAB_ROW_PADDING = 12;
+const StickerCategoryTabs = ({ tabs, activeTabId, onSelectTab, }) => {
+    const rowRef = useRef(null);
+    const tabRefs = useRef(new Map());
+    // Scrolls only the tab row: scrollIntoView would also drag the host page
+    // when the picker sits partly off-screen.
+    useEffect(() => {
+        const row = rowRef.current;
+        const tab = activeTabId ? tabRefs.current.get(activeTabId) : undefined;
+        if (!row || !tab)
+            return;
+        const tabRight = tab.offsetLeft + tab.offsetWidth;
+        if (tab.offsetLeft < row.scrollLeft) {
+            row.scrollLeft = tab.offsetLeft - TAB_ROW_PADDING;
+        }
+        else if (tabRight > row.scrollLeft + row.clientWidth) {
+            row.scrollLeft = tabRight - row.clientWidth + TAB_ROW_PADDING;
+        }
+    }, [activeTabId]);
+    return (_jsx("div", { ref: rowRef, role: "tablist", "data-testid": "sticker-picker-tabs", className: "relative flex h-[52px] shrink-0 items-center gap-3 overflow-x-auto px-3 py-2 [scrollbar-width:none]", children: tabs.map((tab) => {
+            const isActive = tab.id === activeTabId;
+            return (_jsx("button", { ref: (element) => {
+                    if (element)
+                        tabRefs.current.set(tab.id, element);
+                    else
+                        tabRefs.current.delete(tab.id);
+                }, type: "button", role: "tab", "aria-selected": isActive, "aria-label": tab.name, "data-testid": "sticker-picker-tab", "data-tab-id": tab.id, onClick: () => onSelectTab(tab.id), className: clsx("flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border p-1", isActive
+                    ? "border-[#505759] bg-[#393E40]/10"
+                    : "border-transparent"), children: tab.id === RECENT_STICKER_TAB_ID ? (_jsx(Icon, { icon: "time-circle-b", size: 24, className: "text-[#393E40]" })) : tab.iconUrl ? (_jsx("img", { src: tab.iconUrl, alt: "", className: "h-7 w-7 object-contain" })) : (_jsx("span", { className: "h-7 w-7 rounded bg-gray-100" })) }, tab.id));
+        }) }));
+};
+export default StickerCategoryTabs;

package/dist/components/conversation-detail/sticker-picker/StickerPicker.d.ts

@@ -0,0 +1,7 @@
+import type { StickerItem } from "../../../types/sticker";
+interface StickerPickerProps {
+    onSelectSticker: (sticker: StickerItem) => void;
+}
+declare const StickerPicker: ({ onSelectSticker }: StickerPickerProps) => import("react/jsx-runtime").JSX.Element;
+export default StickerPicker;
+//# sourceMappingURL=StickerPicker.d.ts.map

package/dist/components/conversation-detail/sticker-picker/StickerPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StickerPicker.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation-detail/sticker-picker/StickerPicker.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAKnD,UAAU,kBAAkB;IAC1B,eAAe,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CACjD;AAMD,QAAA,MAAM,aAAa,GAAI,qBAAqB,kBAAkB,4CA0J7D,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/conversation-detail/sticker-picker/StickerPicker.js

@@ -0,0 +1,113 @@
+"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 { useStickerCategories, useStickerHistory, } from "../../../hooks/sticker/useStickers";
+import StickerCategoryTabs from "./StickerCategoryTabs";
+import StickerSection from "./StickerSection";
+import { RECENT_STICKER_TAB_ID } from "./constants";
+// Long enough for a smooth scrollTo to finish, so the scroll-spy doesn't
+// flick the active tab through every section passed on the way.
+const TAB_SCROLL_LOCK_MS = 600;
+const StickerPicker = ({ onSelectSticker }) => {
+    const { t } = useTranslation("conversation-inbox");
+    const categoriesQuery = useStickerCategories();
+    const historyQuery = useStickerHistory();
+    const recentStickers = useMemo(() => { var _a; return (_a = historyQuery.data) !== null && _a !== void 0 ? _a : []; }, [historyQuery.data]);
+    const tabs = useMemo(() => {
+        var _a;
+        const categoryTabs = ((_a = categoriesQuery.data) !== null && _a !== void 0 ? _a : []).map((category) => {
+            var _a;
+            return ({
+                id: category.id,
+                name: category.name,
+                iconUrl: (_a = category.icon) === null || _a === void 0 ? void 0 : _a.fullUrl,
+                stickerCount: category.stickerCount,
+            });
+        });
+        if (recentStickers.length === 0)
+            return categoryTabs;
+        return [
+            {
+                id: RECENT_STICKER_TAB_ID,
+                name: t("thread_detail.sticker.recent"),
+                stickerCount: recentStickers.length,
+            },
+            ...categoryTabs,
+        ];
+    }, [categoriesQuery.data, recentStickers.length, t]);
+    // Wait for history too: a Recent tab arriving after the categories would
+    // shove every section down and flip the default tab under the user.
+    const isLoading = categoriesQuery.isLoading ||
+        (historyQuery.isLoading && !historyQuery.isError);
+    const [activeTabId, setActiveTabId] = useState(null);
+    const [scrollRoot, setScrollRoot] = useState(null);
+    const sectionRefs = useRef(new Map());
+    const isTabScrollLockedRef = useRef(false);
+    const lockTimerRef = useRef(null);
+    useEffect(() => {
+        var _a, _b;
+        if (isLoading)
+            return;
+        if (!activeTabId || !tabs.some((tab) => tab.id === activeTabId)) {
+            setActiveTabId((_b = (_a = tabs[0]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : null);
+        }
+    }, [activeTabId, isLoading, tabs]);
+    useEffect(() => () => {
+        if (lockTimerRef.current)
+            clearTimeout(lockTimerRef.current);
+    }, []);
+    const registerSectionRef = useCallback((tabId, element) => {
+        if (element)
+            sectionRefs.current.set(tabId, element);
+        else
+            sectionRefs.current.delete(tabId);
+    }, []);
+    const handleScroll = useCallback(() => {
+        var _a, _b;
+        if (!scrollRoot || isTabScrollLockedRef.current)
+            return;
+        const { scrollTop, clientHeight, scrollHeight } = scrollRoot;
+        const isAtBottom = scrollTop + clientHeight >= scrollHeight - 1;
+        let nextTabId = (_b = (_a = tabs[0]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : null;
+        for (const tab of tabs) {
+            const section = sectionRefs.current.get(tab.id);
+            if (section && section.offsetTop <= scrollTop + 1)
+                nextTabId = tab.id;
+        }
+        if (isAtBottom && tabs.length > 0)
+            nextTabId = tabs[tabs.length - 1].id;
+        setActiveTabId(nextTabId);
+    }, [scrollRoot, tabs]);
+    const handleSelectTab = useCallback((tabId) => {
+        setActiveTabId(tabId);
+        const section = sectionRefs.current.get(tabId);
+        if (!scrollRoot || !section)
+            return;
+        isTabScrollLockedRef.current = true;
+        if (lockTimerRef.current)
+            clearTimeout(lockTimerRef.current);
+        lockTimerRef.current = setTimeout(() => {
+            isTabScrollLockedRef.current = false;
+        }, TAB_SCROLL_LOCK_MS);
+        if (typeof scrollRoot.scrollTo === "function") {
+            scrollRoot.scrollTo({ top: section.offsetTop, behavior: "smooth" });
+        }
+        else {
+            scrollRoot.scrollTop = section.offsetTop;
+        }
+    }, [scrollRoot]);
+    const renderBody = () => {
+        if (isLoading) {
+            return (_jsx("div", { className: "grid grid-cols-4 gap-2 px-3 py-3", children: Array.from({ length: 8 }, (_, index) => (_jsx("div", { "data-testid": "sticker-picker-skeleton", className: "aspect-square w-full animate-pulse rounded-lg bg-gray-100" }, index))) }));
+        }
+        if (categoriesQuery.isError || tabs.length === 0) {
+            return (_jsx("p", { className: "px-3 py-6 text-center text-sm text-gray-500", children: categoriesQuery.isError
+                    ? t("thread_detail.sticker.load_failed")
+                    : t("thread_detail.sticker.empty") }));
+        }
+        return tabs.map((tab) => (_jsx(StickerSection, { tab: tab, recentStickers: recentStickers, scrollRoot: scrollRoot, registerRef: registerSectionRef, onSelectSticker: onSelectSticker }, tab.id)));
+    };
+    return (_jsxs("div", { "data-testid": "sticker-picker", "data-cp-name": "StickerPicker", className: "flex h-[312px] flex-col bg-white", children: [!isLoading && tabs.length > 0 && (_jsx(StickerCategoryTabs, { tabs: tabs, activeTabId: activeTabId, onSelectTab: handleSelectTab })), _jsx("div", { ref: setScrollRoot, onScroll: handleScroll, "data-testid": "sticker-picker-scroll", className: "relative min-h-0 flex-1 overflow-y-auto", children: renderBody() })] }));
+};
+export default StickerPicker;

package/dist/components/conversation-detail/sticker-picker/StickerSection.d.ts

@@ -0,0 +1,12 @@
+import type { StickerItem } from "../../../types/sticker";
+import { type StickerTab } from "./constants";
+interface StickerSectionProps {
+    tab: StickerTab;
+    recentStickers: StickerItem[];
+    scrollRoot: HTMLElement | null;
+    registerRef: (tabId: string, element: HTMLElement | null) => void;
+    onSelectSticker: (sticker: StickerItem) => void;
+}
+declare const StickerSection: ({ tab, recentStickers, scrollRoot, registerRef, onSelectSticker, }: StickerSectionProps) => import("react/jsx-runtime").JSX.Element;
+export default StickerSection;
+//# sourceMappingURL=StickerSection.d.ts.map

package/dist/components/conversation-detail/sticker-picker/StickerSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StickerSection.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation-detail/sticker-picker/StickerSection.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAAyB,KAAK,UAAU,EAAE,MAAM,aAAa,CAAC;AAIrE,UAAU,mBAAmB;IAC3B,GAAG,EAAE,UAAU,CAAC;IAChB,cAAc,EAAE,WAAW,EAAE,CAAC;IAC9B,UAAU,EAAE,WAAW,GAAG,IAAI,CAAC;IAC/B,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAClE,eAAe,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CACjD;AAyCD,QAAA,MAAM,cAAc,GAAI,oEAMrB,mBAAmB,4CAiErB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/conversation-detail/sticker-picker/StickerSection.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import clsx from "clsx";
+import { images } from "../../../constants/images";
+import { useStickersByCategory } from "../../../hooks/sticker/useStickers";
+import { RECENT_STICKER_TAB_ID } from "./constants";
+const PLACEHOLDER_CELL_COUNT = 4;
+const StickerCell = ({ sticker, onSelect, }) => {
+    var _a;
+    const [isLoaded, setIsLoaded] = useState(false);
+    const [hasError, setHasError] = useState(false);
+    return (_jsx("button", { type: "button", "aria-label": sticker.name, "data-testid": "sticker-picker-item", onClick: () => onSelect(sticker), className: clsx("relative aspect-square w-full rounded-lg", !isLoaded && "animate-pulse bg-gray-100"), children: _jsx("img", { src: hasError ? images.stickerInvalid : (_a = sticker.file) === null || _a === void 0 ? void 0 : _a.fullUrl, alt: "", loading: "lazy", onLoad: () => setIsLoaded(true), onError: () => {
+                setHasError(true);
+                setIsLoaded(true);
+            }, className: clsx("h-full w-full object-contain", !isLoaded && "opacity-0") }) }));
+};
+const StickerSection = ({ tab, recentStickers, scrollRoot, registerRef, onSelectSticker, }) => {
+    const sectionRef = useRef(null);
+    const isRecent = tab.id === RECENT_STICKER_TAB_ID;
+    const [hasBeenVisible, setHasBeenVisible] = useState(() => typeof IntersectionObserver === "undefined");
+    // Categories load on first approach, like chat-mobile, so opening the
+    // picker doesn't fire one request per category up front.
+    useEffect(() => {
+        const element = sectionRef.current;
+        if (hasBeenVisible || isRecent || !element || !scrollRoot)
+            return;
+        const observer = new IntersectionObserver((entries) => {
+            if (entries.some((entry) => entry.isIntersecting)) {
+                setHasBeenVisible(true);
+            }
+        }, { root: scrollRoot, rootMargin: "200px 0px" });
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [hasBeenVisible, isRecent, scrollRoot]);
+    const { data: categoryStickers, isError } = useStickersByCategory(tab.id, !isRecent && hasBeenVisible);
+    const stickers = isRecent ? recentStickers : categoryStickers;
+    const placeholderCount = tab.stickerCount || PLACEHOLDER_CELL_COUNT;
+    return (_jsxs("div", { ref: (element) => {
+            sectionRef.current = element;
+            registerRef(tab.id, element);
+        }, "data-testid": "sticker-picker-section", "data-tab-id": tab.id, children: [_jsx("p", { className: "px-3 py-1 text-[14px] font-bold leading-[22px] text-[#747B7E]", children: tab.name }), isError ? null : (_jsx("div", { className: "grid grid-cols-4 gap-2 px-3 pb-3", children: stickers
+                    ? stickers.map((sticker) => (_jsx(StickerCell, { sticker: sticker, onSelect: onSelectSticker }, sticker.id)))
+                    : Array.from({ length: placeholderCount }, (_, index) => (_jsx("div", { "data-testid": "sticker-picker-skeleton", className: "aspect-square w-full animate-pulse rounded-lg bg-gray-100" }, index))) }))] }));
+};
+export default StickerSection;

package/dist/components/conversation-detail/sticker-picker/constants.d.ts

@@ -0,0 +1,8 @@
+export declare const RECENT_STICKER_TAB_ID = "recent";
+export interface StickerTab {
+    id: string;
+    name: string;
+    iconUrl?: string;
+    stickerCount: number;
+}
+//# sourceMappingURL=constants.d.ts.map

package/dist/components/conversation-detail/sticker-picker/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation-detail/sticker-picker/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,qBAAqB,WAAW,CAAC;AAE9C,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;CACtB"}

package/dist/components/conversation-detail/sticker-picker/constants.js

@@ -0,0 +1 @@
+export const RECENT_STICKER_TAB_ID = "recent";

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

@@ -1 +1 @@
-{"version":3,"file":"StickerMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/StickerMessage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAG3D,UAAU,uBAAuB;IAC/B,OAAO,EAAE,WAAW,CAAC;CACtB;AAID,QAAA,MAAM,kBAAkB,GAAI,aAAa,uBAAuB,4CAyB/D,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"StickerMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/StickerMessage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAG3D,UAAU,uBAAuB;IAC/B,OAAO,EAAE,WAAW,CAAC;CACtB;AAID,QAAA,MAAM,kBAAkB,GAAI,aAAa,uBAAuB,4CAe/D,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

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

@@ -1,15 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from "react";
 import clsx from "clsx";
-import { Icon } from "../../../components/icon";
+import { images } from "../../../constants/images";
 const STICKER_SIZE_CLASS = "h-[120px] w-[120px]";
 const StickerMessageItem = ({ message }) => {
     var _a;
     const [hasLoadError, setHasLoadError] = useState(false);
     const stickerUrl = (_a = message.stickerElem) === null || _a === void 0 ? void 0 : _a.content;
-    if (!stickerUrl || hasLoadError) {
-        return (_jsx("div", { className: clsx("flex items-center justify-center rounded-xl bg-black/5", STICKER_SIZE_CLASS), children: _jsx(Icon, { icon: "image-o", size: 32, className: "text-gray-400" }) }));
-    }
-    return (_jsx("img", { src: stickerUrl, alt: "", className: clsx("block object-cover", STICKER_SIZE_CLASS), onError: () => setHasLoadError(true) }));
+    const isInvalid = !stickerUrl || hasLoadError;
+    return (_jsx("img", { src: isInvalid ? images.stickerInvalid : stickerUrl, alt: "", "data-testid": "sticker-message-image", "data-invalid": isInvalid || undefined, className: clsx("block object-contain", STICKER_SIZE_CLASS), onError: () => setHasLoadError(true) }));
 };
 export default StickerMessageItem;

package/dist/components/message/reply/ReplyPreviewMedia.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReplyPreviewMedia.d.ts","sourceRoot":"","sources":["../../../../src/components/message/reply/ReplyPreviewMedia.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAe,MAAM,8BAA8B,CAAC;AAKxE,UAAU,sBAAsB;IAC9B,OAAO,EAAE,WAAW,CAAC;CACtB;AAED,QAAA,MAAM,iBAAiB,GAAI,aAAa,sBAAsB,mDAoD7D,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"ReplyPreviewMedia.d.ts","sourceRoot":"","sources":["../../../../src/components/message/reply/ReplyPreviewMedia.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAe,MAAM,8BAA8B,CAAC;AAKxE,UAAU,sBAAsB;IAC9B,OAAO,EAAE,WAAW,CAAC;CACtB;AAED,QAAA,MAAM,iBAAiB,GAAI,aAAa,sBAAsB,mDAgE7D,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/message/reply/ReplyPreviewMedia.js

@@ -4,7 +4,7 @@ import { documentIcon } from "../../../assets/svg";
 import { Icon } from "../../../components/icon";
 import { parseUrlMetadata } from "../../../utils/common";
 const ReplyPreviewMedia = ({ message }) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g;
     if (message.contentType === MessageType.FileMessage) {
         return (_jsx("div", { className: "flex h-6 w-6 shrink-0 items-center justify-center overflow-hidden [&>svg]:h-6 [&>svg]:w-6", children: documentIcon }));
     }
@@ -19,8 +19,14 @@ const ReplyPreviewMedia = ({ message }) => {
         const posterUrl = (_e = message.videoElem) === null || _e === void 0 ? void 0 : _e.snapshotUrl;
         return (_jsxs("div", { className: "relative h-[42px] w-[42px] shrink-0 overflow-hidden rounded-lg bg-gray-900", children: [posterUrl && (_jsx("img", { src: posterUrl, alt: "", className: "h-full w-full object-cover" })), _jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: _jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-black/60", children: _jsx(Icon, { icon: "play-o", size: 12, className: "text-white" }) }) })] }));
     }
+    if (message.contentType === MessageType.StickerMessage) {
+        const stickerUrl = (_f = message.stickerElem) === null || _f === void 0 ? void 0 : _f.content;
+        if (!stickerUrl)
+            return null;
+        return (_jsx("img", { src: stickerUrl, alt: "", className: "h-[42px] w-[42px] shrink-0 object-contain" }));
+    }
     if (message.contentType === MessageType.UrlTextMessage) {
-        const imageUrl = (_f = parseUrlMetadata(message.ex)) === null || _f === void 0 ? void 0 : _f.image;
+        const imageUrl = (_g = parseUrlMetadata(message.ex)) === null || _g === void 0 ? void 0 : _g.image;
         if (!imageUrl)
             return null;
         return (_jsx("img", { src: imageUrl, alt: "", className: "h-[42px] w-[42px] shrink-0 rounded-lg object-cover" }));

package/dist/constants/images.d.ts

@@ -4,5 +4,6 @@ export declare const images: {
     emptyResources: string;
     muteNotificationWarning: string;
     searchEmpty: string;
+    stickerInvalid: string;
 };
 //# sourceMappingURL=images.d.ts.map

package/dist/constants/images.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"images.d.ts","sourceRoot":"","sources":["../../src/constants/images.ts"],"names":[],"mappings":"AAmBA,eAAO,MAAM,MAAM;;;;;;CAMlB,CAAC"}
+{"version":3,"file":"images.d.ts","sourceRoot":"","sources":["../../src/constants/images.ts"],"names":[],"mappings":"AAwBA,eAAO,MAAM,MAAM;;;;;;;CAOlB,CAAC"}

package/dist/constants/images.js

@@ -4,10 +4,12 @@ const imageFailed = new URL("../assets/images/imageFailed.png", import.meta.url)
 const emptyResources = new URL("../assets/images/emptyResources.png", import.meta.url).href;
 const muteNotificationWarning = new URL("../assets/images/muteNotificationWarning.png", import.meta.url).href;
 const searchEmpty = new URL("../assets/images/searchEmpty.png", import.meta.url).href;
+const stickerInvalid = new URL("../assets/images/stickerInvalid.png", import.meta.url).href;
 export const images = {
     conversationBg,
     imageFailed,
     emptyResources,
     muteNotificationWarning,
     searchEmpty,
+    stickerInvalid,
 };

package/dist/hooks/common/useOutsideTapDismiss.d.ts

@@ -0,0 +1,12 @@
+import { type RefObject } from "react";
+/** Marks the area where a tap closes the open composer panel (the thread timeline). */
+export declare const COMPOSER_DISMISS_ZONE_ATTR = "data-composer-dismiss-zone";
+interface UseOutsideTapDismissOptions {
+    enabled: boolean;
+    /** Taps inside this element never dismiss (the composer and its panels). */
+    insideRef: RefObject<HTMLElement | null>;
+    onDismiss: () => void;
+}
+export declare const useOutsideTapDismiss: ({ enabled, insideRef, onDismiss, }: UseOutsideTapDismissOptions) => void;
+export {};
+//# sourceMappingURL=useOutsideTapDismiss.d.ts.map

package/dist/hooks/common/useOutsideTapDismiss.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOutsideTapDismiss.d.ts","sourceRoot":"","sources":["../../../src/hooks/common/useOutsideTapDismiss.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE1D,uFAAuF;AACvF,eAAO,MAAM,0BAA0B,+BAA+B,CAAC;AAOvE,UAAU,2BAA2B;IACnC,OAAO,EAAE,OAAO,CAAC;IACjB,4EAA4E;IAC5E,SAAS,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACzC,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AA6BD,eAAO,MAAM,oBAAoB,GAAI,oCAIlC,2BAA2B,SAuD7B,CAAC"}

package/dist/hooks/common/useOutsideTapDismiss.js

@@ -0,0 +1,81 @@
+import { useEffect, useRef } from "react";
+/** Marks the area where a tap closes the open composer panel (the thread timeline). */
+export const COMPOSER_DISMISS_ZONE_ATTR = "data-composer-dismiss-zone";
+// Past this much pointer travel the gesture is a scroll/drag, not a tap.
+const TAP_MOVE_TOLERANCE_PX = 10;
+// Upper bound for a click that never arrives (pointerup on another element).
+const SWALLOW_FALLBACK_MS = 1000;
+const isInDismissZone = (target, inside) => {
+    if (!(target instanceof Element))
+        return false;
+    if (inside === null || inside === void 0 ? void 0 : inside.contains(target))
+        return false;
+    return target.closest(`[${COMPOSER_DISMISS_ZONE_ATTR}]`) !== null;
+};
+// The dismissing tap's click must not hit what sits under it; the window ends at
+// the next pointerdown, so a browser-delayed click is still swallowed.
+const swallowNextClick = () => {
+    const stop = () => {
+        window.removeEventListener("click", swallow, { capture: true });
+        window.removeEventListener("pointerdown", stop, { capture: true });
+        clearTimeout(fallbackTimer);
+    };
+    const swallow = (event) => {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        stop();
+    };
+    window.addEventListener("click", swallow, { capture: true });
+    window.addEventListener("pointerdown", stop, { capture: true });
+    const fallbackTimer = setTimeout(stop, SWALLOW_FALLBACK_MS);
+};
+export const useOutsideTapDismiss = ({ enabled, insideRef, onDismiss, }) => {
+    const onDismissRef = useRef(onDismiss);
+    onDismissRef.current = onDismiss;
+    useEffect(() => {
+        if (!enabled)
+            return;
+        let tapStart = null;
+        const hasMoved = (event) => !!tapStart &&
+            Math.hypot(event.clientX - tapStart.x, event.clientY - tapStart.y) >
+                TAP_MOVE_TOLERANCE_PX;
+        // A second pointer landing mid-tap (pinch, two-finger touch) makes this a
+        // multi-touch gesture, so the pending tap is dropped rather than resumed.
+        const handlePointerDown = (event) => {
+            const isPrimaryTap = event.isPrimary !== false && event.button === 0;
+            tapStart =
+                isPrimaryTap && isInDismissZone(event.target, insideRef.current)
+                    ? { x: event.clientX, y: event.clientY, pointerId: event.pointerId }
+                    : null;
+        };
+        const handlePointerMove = (event) => {
+            if ((tapStart === null || tapStart === void 0 ? void 0 : tapStart.pointerId) === event.pointerId && hasMoved(event)) {
+                tapStart = null;
+            }
+        };
+        const handlePointerUp = (event) => {
+            if (!tapStart || tapStart.pointerId !== event.pointerId)
+                return;
+            const isTap = !hasMoved(event) && isInDismissZone(event.target, insideRef.current);
+            tapStart = null;
+            if (!isTap)
+                return;
+            swallowNextClick();
+            onDismissRef.current();
+        };
+        // Touch scrolling cancels the pointer once the browser takes over the pan.
+        const handlePointerCancel = () => {
+            tapStart = null;
+        };
+        document.addEventListener("pointerdown", handlePointerDown, true);
+        document.addEventListener("pointermove", handlePointerMove, true);
+        document.addEventListener("pointerup", handlePointerUp, true);
+        document.addEventListener("pointercancel", handlePointerCancel, true);
+        return () => {
+            document.removeEventListener("pointerdown", handlePointerDown, true);
+            document.removeEventListener("pointermove", handlePointerMove, true);
+            document.removeEventListener("pointerup", handlePointerUp, true);
+            document.removeEventListener("pointercancel", handlePointerCancel, true);
+        };
+    }, [enabled, insideRef]);
+};

package/dist/hooks/message/useSendMessage.d.ts

@@ -3,6 +3,7 @@ import { type CustomMessagePayload } from "../../types/customMessage";
 import { BotFlowMeta, ExtendMessageInfo, FileMsgParamsByFile, ImageMsgParamsByFile, MentionOffset, MentionSendPayload, UrlMetadataInfo, VideoMsgParamsByFile } from "../../types/chat";
 import { UploadFile } from "antd";
 import { ISessionResponse } from "../../types/dto";
+import type { StickerItem } from "../../types/sticker";
 export declare const isMediaResendable: (message: {
     clientMsgID: string;
     contentType: number;
@@ -15,6 +16,7 @@ export declare const createFileMessageByFile: (file: FileMsgParamsByFile) => Pro
 export declare const AT_ALL_TAG = "AtAllTag";
 export declare const createAtTextMessage: (params: AtMsgParams) => Promise<MessageItem | null>;
 export declare const createUrlTextMessage: (text: string, urls: string[]) => Promise<MessageItem | null>;
+export declare const createStickerMessage: (stickerUrl: string) => Promise<MessageItem | null>;
 export declare const createCustomMessageByParams: (params: CustomMsgParams) => Promise<MessageItem | null>;
 export declare const createCustomMessage: (payload: CustomMessagePayload) => Promise<MessageItem | null>;
 export declare const createQuoteMessage: (text: string, quotedMessage: MessageItem, urls?: string[]) => Promise<MessageItem | null>;
@@ -37,13 +39,17 @@ export declare const useSendMessage: (options?: UseSendMessageOptions) => {
     sendCustomMessage: (payload: CustomMessagePayload, sendOptions?: {
         currentSession?: ISessionResponse;
     }) => Promise<boolean>;
+    sendStickerMessage: (sticker: StickerItem, sendOptions?: {
+        currentSession?: ISessionResponse;
+    }) => Promise<boolean>;
     resendMessage: (failedMessage: MessageItem) => Promise<void>;
 };
-export declare const generateExtendMessageInfo: ({ richText, urlMetadata, currentSession, flow, mentionOffsets, }: {
+export declare const generateExtendMessageInfo: ({ richText, urlMetadata, currentSession, flow, mentionOffsets, stickerId, }: {
     richText?: string;
     urlMetadata?: UrlMetadataInfo;
     currentSession?: ISessionResponse;
     flow?: BotFlowMeta;
     mentionOffsets?: MentionOffset[];
+    stickerId?: string;
 }) => ExtendMessageInfo;
 //# sourceMappingURL=useSendMessage.d.ts.map