@droppii-org/chat-sdk 0.6.37 → 0.6.39

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":"AAwBA,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,4CA8rB9B,CAAC;AAEF,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"ConversationDetailInput.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-detail/ConversationDetailInput.tsx"],"names":[],"mappings":"AA0BA,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,4CAkvB9B,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

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

@@ -7,6 +7,7 @@ import clsx from "clsx";
 import { Button, message as toastMessage } from "antd";
 import { Icon } from "../../components/icon";
 import { useSendMessage } from "../../hooks/message/useSendMessage";
+import { useReportTypingState } from "../../hooks/message/useReportTypingState";
 import { useJoinPublicGroup } from "../../hooks/group/useJoinPublicGroup";
 import useAuthStore from "../../store/auth";
 import useConversationStore from "../../store/conversation";
@@ -19,6 +20,7 @@ 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";
@@ -30,7 +32,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");
@@ -74,7 +76,8 @@ 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);
     const clearDraft = useMessageDraftStore((state) => state.clearDraft);
@@ -93,6 +96,7 @@ 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);
     const [caretIndex, setCaretIndex] = useState(0);
     const rawMentionTrigger = useMentionTrigger(value, caretIndex);
     // Escape dismisses the menu for the CURRENT trigger span without erasing
@@ -167,10 +171,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]);
@@ -284,6 +289,7 @@ const ConversationDetailInput = ({ placeholder, onSendMessage, onInputChange, mo
         if (conversationId && userID) {
             setDraft(userID, conversationId, nextValue);
         }
+        reportTyping(nextValue);
         onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(nextValue);
     };
     // Covers caret-only movement (click, arrow keys) with no value change,
@@ -294,6 +300,7 @@ const ConversationDetailInput = ({ placeholder, onSendMessage, onInputChange, mo
         setCaretIndex((_a = event.currentTarget.selectionStart) !== null && _a !== void 0 ? _a : 0);
     };
     const resetComposer = () => {
+        stopTyping();
         setValue("");
         setListUploadFiles([]);
         setPendingVideoUids([]);
@@ -345,18 +352,35 @@ const ConversationDetailInput = ({ placeholder, onSendMessage, onInputChange, mo
     const handleFocus = () => {
         setIsFocused(true);
         closeMoreOption();
+        closeSticker();
         emit("CONVERSATION_CHAT_SCROLL_TO_BOTTOM_IF_AT_BOTTOM");
     };
     const handleBlur = () => {
         setIsFocused(false);
+        stopTyping();
     };
     const handleToggleMoreOption = () => {
         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);
@@ -388,6 +412,7 @@ const ConversationDetailInput = ({ placeholder, onSendMessage, onInputChange, mo
         if (conversationId && userID) {
             setDraft(userID, conversationId, nextValue);
         }
+        reportTyping(nextValue);
         onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(nextValue);
         const nextCaret = mentionTrigger.triggerStart + insertedText.length + 1;
         // Update caretIndex synchronously (not deferred to the RAF below) so
@@ -461,8 +486,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/TypingIndicatorBar.d.ts

@@ -0,0 +1,10 @@
+export interface TypingIndicatorBarProps {
+    conversationId?: string;
+}
+/**
+ * Overlays the bottom edge of the message list rather than taking layout
+ * space, so showing/hiding it never shifts the viewer's scroll position.
+ */
+declare const TypingIndicatorBar: ({ conversationId }: TypingIndicatorBarProps) => import("react/jsx-runtime").JSX.Element | null;
+export default TypingIndicatorBar;
+//# sourceMappingURL=TypingIndicatorBar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TypingIndicatorBar.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-detail/TypingIndicatorBar.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,uBAAuB;IACtC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAqBD;;;GAGG;AACH,QAAA,MAAM,kBAAkB,GAAI,oBAAoB,uBAAuB,mDAkCtE,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

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

@@ -0,0 +1,24 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment } from "react";
+import { useTranslation } from "react-i18next";
+import { useTypingState } from "../../hooks/message/useTypingStatus";
+const TYPING_DOT_DELAYS_MS = [0, 150, 300];
+// Sampled from the design: name + text share one gray, dots are lighter.
+const TEXT_COLOR = "text-[#747B7E]";
+const TypingDots = () => (_jsx("span", { "aria-hidden": "true", className: "ml-1 inline-flex items-end gap-[2px] pb-[4px]", children: TYPING_DOT_DELAYS_MS.map((delay) => (_jsx("span", { className: "h-[3px] w-[3px] animate-bounce rounded-full bg-[#8D8E90]", style: { animationDelay: `${delay}ms` } }, delay))) }));
+/**
+ * Overlays the bottom edge of the message list rather than taking layout
+ * space, so showing/hiding it never shifts the viewer's scroll position.
+ */
+const TypingIndicatorBar = ({ conversationId }) => {
+    const { t } = useTranslation("conversation-inbox");
+    const { names, count } = useTypingState(conversationId);
+    if (count === 0)
+        return null;
+    // Names are rendered as JSX (not interpolated markup) so user-supplied
+    // nicknames can never be parsed as formatting tags.
+    const content = count > names.length ? (t("typing.many_label")) : (_jsxs(_Fragment, { children: [names.map((name, index) => (_jsxs(Fragment, { children: [index > 0 && ` ${t("typing.and")} `, _jsx("strong", { className: "font-semibold", children: name })] }, `${index}-${name}`))), " ", t("typing.suffix")] }));
+    return (_jsxs("div", { "data-testid": "conversation-typing-indicator", "data-cp-name": "TypingIndicatorBar", "aria-live": "polite", className: `pointer-events-none absolute inset-x-0 bottom-0 z-10 truncate bg-white/90 px-4 py-1 text-[13px] leading-[1.6] ${TEXT_COLOR}`, children: [content, _jsx(TypingDots, {})] }));
+};
+export default TypingIndicatorBar;

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/context/ChatContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatContext.d.ts","sourceRoot":"","sources":["../../src/context/ChatContext.tsx"],"names":[],"mappings":"AAEA,OAAO,sBAAsB,CAAC;AAG9B,OAAO,EACL,eAAe,EACf,iBAAiB,EAGlB,MAAM,cAAc,CAAC;AAUtB,eAAO,MAAM,WAAW,0CAStB,CAAC;AAEH,eAAO,MAAM,cAAc,uBAAgC,CAAC;AAc5D,eAAO,MAAM,YAAY,GAAI,sIAS1B,iBAAiB,4CAsJnB,CAAC"}
+{"version":3,"file":"ChatContext.d.ts","sourceRoot":"","sources":["../../src/context/ChatContext.tsx"],"names":[],"mappings":"AAEA,OAAO,sBAAsB,CAAC;AAG9B,OAAO,EACL,eAAe,EACf,iBAAiB,EAGlB,MAAM,cAAc,CAAC;AAUtB,eAAO,MAAM,WAAW,0CAStB,CAAC;AAEH,eAAO,MAAM,cAAc,uBAAgC,CAAC;AAc5D,eAAO,MAAM,YAAY,GAAI,sIAS1B,iBAAiB,4CA2JnB,CAAC"}

package/dist/context/ChatContext.js

@@ -141,5 +141,5 @@ export const ChatProvider = ({ children, config, renderCustomMessage, onNavigate
             useUrlState,
             allowPinMessageWithoutPermission,
             renderGroupAccessModal,
-        }, children: _jsx(ConfigProvider, { getPopupContainer: () => { var _a; return (_a = rootRef.current) !== null && _a !== void 0 ? _a : document.body; }, children: _jsx(QueryClientProvider, { client: queryClient, children: _jsx("div", { ref: rootRef, style: themeStyle, className: "contents", children: _jsx(MainLayout, { children: children }) }) }) }) }));
+        }, children: _jsx(ConfigProvider, { getPopupContainer: () => { var _a; return (_a = rootRef.current) !== null && _a !== void 0 ? _a : document.body; }, children: _jsx(QueryClientProvider, { client: queryClient, children: _jsx("div", { ref: rootRef, style: themeStyle, className: "contents", "data-dchat-root": "", children: _jsx(MainLayout, { children: children }) }) }) }) }));
 };

package/dist/hooks/global/useGlobalEvent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useGlobalEvent.d.ts","sourceRoot":"","sources":["../../../src/hooks/global/useGlobalEvent.ts"],"names":[],"mappings":"AA0CA,eAAO,MAAM,cAAc,YA8iB1B,CAAC"}
+{"version":3,"file":"useGlobalEvent.d.ts","sourceRoot":"","sources":["../../../src/hooks/global/useGlobalEvent.ts"],"names":[],"mappings":"AA+CA,eAAO,MAAM,cAAc,YA+jB1B,CAAC"}

package/dist/hooks/global/useGlobalEvent.js

@@ -6,6 +6,7 @@ import { BusinessNotificationType, ConnectStatus, CustomType, SyncStatus, } from
 import { pushNewMessage, updateOneMessage } from "../../hooks/message/useMessage";
 import { fetchPinnedMessages } from "../../hooks/message/usePinnedMessages";
 import { applyRevokedMessage } from "../../hooks/message/useRevokeMessage";
+import { handleInputStatusChanged, removeTyperOnNewMessage, } from "../../hooks/message/useTypingStatus";
 import { useChatContext } from "../../context/ChatContext";
 import { useChatNavigate } from "../../hooks/conversation/useChatNavigate";
 import useConversationStore from "../../store/conversation";
@@ -152,7 +153,13 @@ export const useGlobalEvent = () => {
     };
     const newMessageHandler = ({ data }) => {
         var _a;
-        (_a = data === null || data === void 0 ? void 0 : data.map) === null || _a === void 0 ? void 0 : _a.call(data, (message) => handleNewMessage(message));
+        (_a = data === null || data === void 0 ? void 0 : data.map) === null || _a === void 0 ? void 0 : _a.call(data, (message) => {
+            removeTyperOnNewMessage(message);
+            handleNewMessage(message);
+        });
+    };
+    const inputStatusChangedHandler = ({ data, }) => {
+        handleInputStatusChanged(data);
     };
     const userTokenHandler = () => {
         refetchChatToken(undefined, {
@@ -387,6 +394,7 @@ export const useGlobalEvent = () => {
         DChatSDK.on(CbEvents.OnRecvNewMessages, newMessageHandler);
         DChatSDK.on(CbEvents.OnNewRecvMessageRevoked, revokedMessageHandler);
         DChatSDK.on(CbEvents.OnRecvMessagePinned, messagePinnedHandler);
+        DChatSDK.on(CbEvents.OnConversationUserInputStatusChanged, inputStatusChangedHandler);
         // conversation
         DChatSDK.on(CbEvents.OnConversationChanged, conversationChangeHandler);
         DChatSDK.on(CbEvents.OnNewConversation, newConversationHandler);
@@ -421,6 +429,7 @@ export const useGlobalEvent = () => {
         DChatSDK.off(CbEvents.OnRecvNewMessages, newMessageHandler);
         DChatSDK.off(CbEvents.OnNewRecvMessageRevoked, revokedMessageHandler);
         DChatSDK.off(CbEvents.OnRecvMessagePinned, messagePinnedHandler);
+        DChatSDK.off(CbEvents.OnConversationUserInputStatusChanged, inputStatusChangedHandler);
         // conversation
         DChatSDK.off(CbEvents.OnConversationChanged, conversationChangeHandler);
         DChatSDK.off(CbEvents.OnNewConversation, newConversationHandler);

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

@@ -0,0 +1,10 @@
+/**
+ * Reports the viewer's own composer activity for `conversationId` so other
+ * participants see a typing indicator. `reportActivity` on every edit,
+ * `stopTyping` when the composer is cleared, blurred or the message is sent.
+ */
+export declare const useReportTypingState: (conversationId: string) => {
+    reportActivity: (composerValue: string) => void;
+    stopTyping: () => void;
+};
+//# sourceMappingURL=useReportTypingState.d.ts.map