@droppii-org/chat-sdk 0.6.39 → 0.6.40

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":"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"}
+{"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,6 +15,7 @@ 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";
@@ -97,6 +98,14 @@ const ConversationDetailInput = ({ placeholder, onSendMessage, onInputChange, mo
     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

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/screens/conversation-detail/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/screens/conversation-detail/index.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,kCAAkC,CAAC;AAWrF,OAAO,EAEL,KAAK,4BAA4B,EAClC,MAAM,6CAA6C,CAAC;AAGrD,MAAM,WAAW,4BACf,SAAQ,4BAA4B,EAClC,4BAA4B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1E,kGAAkG;IAClG,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;CACrC;AAED,QAAA,MAAM,uBAAuB,GAAI,8IAc9B,4BAA4B,mDAsO9B,CAAC;AAEF,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/screens/conversation-detail/index.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,kCAAkC,CAAC;AAWrF,OAAO,EAEL,KAAK,4BAA4B,EAClC,MAAM,6CAA6C,CAAC;AAIrD,MAAM,WAAW,4BACf,SAAQ,4BAA4B,EAClC,4BAA4B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1E,kGAAkG;IAClG,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;CACrC;AAED,QAAA,MAAM,uBAAuB,GAAI,8IAc9B,4BAA4B,mDAyO9B,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

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

@@ -30,6 +30,7 @@ import { useBotFlow } from "../../hooks/conversation/useBotFlow";
 import { BOT_TYPE } from "../../constants/botFlow";
 import { useResolveConversation, } from "../../hooks/conversation/useResolveConversation";
 import { isBotPeer } from "../../utils/conversation";
+import { COMPOSER_DISMISS_ZONE_ATTR } from "../../hooks/common/useOutsideTapDismiss";
 const DChatConversationDetail = (_a) => {
     var _b;
     var { className, children, onBack, conversationId, messageId, userId, groupId, botId, 
@@ -114,6 +115,6 @@ const DChatConversationDetail = (_a) => {
         !botFlow.flowIsEnd &&
         botFlow.shouldShowButtons &&
         botFlow.currentButtonsBlock ? (_jsx(BotButtonMessage, { buttons: botFlow.currentButtonsBlock.data.buttons, disabled: botFlow.isProcessing, onSelect: botFlow.selectButton, onRestart: botFlow.restart })) : null;
-    return (_jsxs("div", { "data-testid": "conversation-detail-root", className: clsx("relative flex h-full w-full flex-col overflow-hidden bg-white", className), children: [_jsx(ConversationDetailHeader, { conversation: conversation, onBack: handleBack, onProfileClick: openProfile }), _jsx(PinnedMessageBar, {}), _jsxs("div", { className: "relative flex min-h-0 flex-1 flex-col", children: [children !== null && children !== void 0 ? children : (_jsx(ConversationMessageList, { bottomSlot: botButtonsSlot, onCopyMessageLink: onCopyMessageLink, onSearchMessageRevoked: onSearchMessageRevoked })), _jsx(TypingIndicatorBar, { conversationId: conversation.conversationID })] }), footer, isBotThread && (_jsxs(_Fragment, { children: [_jsx(BotMenuSheet, { open: isMenuOpen, items: botFlow.menuItems, disabled: botFlow.isProcessing, onClose: closeMenu, onSelect: botFlow.selectMenuOption }), _jsx(CsSessionConfirmModal, { open: botFlow.isCsConfirmOpen, loading: botFlow.isProcessing, onCancel: botFlow.cancelMenuOption, onConfirm: botFlow.confirmEndCsSession })] })), _jsx(ThreadProfilePanel, { open: isProfileOpen, conversation: conversation, onClose: closeProfile, onSelectResource: setResourceTab }), _jsx(MediaResourcePanel, { open: resourceTab !== null, initialTab: resourceTab !== null && resourceTab !== void 0 ? resourceTab : MediaResourceTabKey.Image, onClose: () => setResourceTab(null) })] }));
+    return (_jsxs("div", { "data-testid": "conversation-detail-root", className: clsx("relative flex h-full w-full flex-col overflow-hidden bg-white", className), children: [_jsx(ConversationDetailHeader, { conversation: conversation, onBack: handleBack, onProfileClick: openProfile }), _jsx(PinnedMessageBar, {}), _jsxs("div", { [COMPOSER_DISMISS_ZONE_ATTR]: "", className: "relative flex min-h-0 flex-1 flex-col", children: [children !== null && children !== void 0 ? children : (_jsx(ConversationMessageList, { bottomSlot: botButtonsSlot, onCopyMessageLink: onCopyMessageLink, onSearchMessageRevoked: onSearchMessageRevoked })), _jsx(TypingIndicatorBar, { conversationId: conversation.conversationID })] }), footer, isBotThread && (_jsxs(_Fragment, { children: [_jsx(BotMenuSheet, { open: isMenuOpen, items: botFlow.menuItems, disabled: botFlow.isProcessing, onClose: closeMenu, onSelect: botFlow.selectMenuOption }), _jsx(CsSessionConfirmModal, { open: botFlow.isCsConfirmOpen, loading: botFlow.isProcessing, onCancel: botFlow.cancelMenuOption, onConfirm: botFlow.confirmEndCsSession })] })), _jsx(ThreadProfilePanel, { open: isProfileOpen, conversation: conversation, onClose: closeProfile, onSelectResource: setResourceTab }), _jsx(MediaResourcePanel, { open: resourceTab !== null, initialTab: resourceTab !== null && resourceTab !== void 0 ? resourceTab : MediaResourceTabKey.Image, onClose: () => setResourceTab(null) })] }));
 };
 export default DChatConversationDetail;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@droppii-org/chat-sdk",
-  "version": "0.6.39",
+  "version": "0.6.40",
   "description": "Droppii React Chat SDK",
   "repository": {
     "type": "git",