@droppii-org/chat-sdk 0.6.49 → 0.6.50

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

@@ -7,7 +7,13 @@ export interface ConversationDetailInputProps {
     onOpenBotMenu?: () => void;
     /** Shows the sticker picker entry in the composer. Defaults to true. */
     showSticker?: boolean;
+    /**
+     * Joins a support thread the viewer handles but isn't a member of (e.g. a
+     * PDP CS). When set, such a viewer gets a join prompt instead of the
+     * composer; the host owns the API, so other apps are unaffected.
+     */
+    onJoinSupportThread?: (conversationId: string) => Promise<unknown>;
 }
-declare const ConversationDetailInput: ({ placeholder, onSendMessage, onInputChange, moreOptions, onOpenBotMenu, showSticker, }: ConversationDetailInputProps) => import("react/jsx-runtime").JSX.Element;
+declare const ConversationDetailInput: ({ placeholder, onSendMessage, onInputChange, moreOptions, onOpenBotMenu, showSticker, onJoinSupportThread, }: 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":"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"}
+{"version":3,"file":"ConversationDetailInput.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-detail/ConversationDetailInput.tsx"],"names":[],"mappings":"AA4BA,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;IACtB;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;CACpE;AAED,QAAA,MAAM,uBAAuB,GAAI,8GAQ9B,4BAA4B,4CAkxB9B,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

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

@@ -4,11 +4,12 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useBoolean } from "ahooks";
 import clsx from "clsx";
-import { Button, message as toastMessage } from "antd";
+import { Button, Spin, 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 { useAgentSupportThreadJoin } from "../../hooks/session/useAgentSupportThreadJoin";
 import useAuthStore from "../../store/auth";
 import useConversationStore from "../../store/conversation";
 import useMessageDraftStore from "../../store/messageDraft";
@@ -33,7 +34,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, showSticker = true, }) => {
+const ConversationDetailInput = ({ placeholder, onSendMessage, onInputChange, moreOptions, onOpenBotMenu, showSticker = true, onJoinSupportThread, }) => {
     var _a;
     const { t } = useTranslation("conversation-inbox");
     const { t: tCommon } = useTranslation("common");
@@ -46,6 +47,7 @@ const ConversationDetailInput = ({ placeholder, onSendMessage, onInputChange, mo
     const getCurrentMemberInGroupByReq = useConversationStore((state) => state.getCurrentMemberInGroupByReq);
     const getSelfGroupPermissionByReq = useConversationStore((state) => state.getSelfGroupPermissionByReq);
     const { mutate: joinPublicGroup, isPending: isJoiningPublicGroup } = useJoinPublicGroup();
+    const supportThreadJoin = useAgentSupportThreadJoin(conversationData, onJoinSupportThread);
     const handleJoinPublicGroup = useCallback(() => {
         const groupID = conversationData === null || conversationData === void 0 ? void 0 : conversationData.groupID;
         if (!groupID)
@@ -487,8 +489,16 @@ const ConversationDetailInput = ({ placeholder, onSendMessage, onInputChange, mo
         event.preventDefault();
         void handleSend();
     };
-    if (isViewOnlyMember) {
-        return (_jsxs("div", { "data-testid": "conversation-detail-input-view-only", className: "flex flex-col w-full shrink-0 items-center justify-center gap-3 bg-chat-bubble-neutral/[0.05] px-4 py-3 ", children: [_jsx("span", { className: "text-sm text-gray-500", children: t("thread_detail.view_only_notice") }), _jsx(Button, { type: "primary", size: "small", loading: isJoiningPublicGroup, onClick: handleJoinPublicGroup, children: tCommon("join_group") })] }));
+    // Don't flash a composer the agent may not be allowed to use.
+    if (supportThreadJoin.isCheckingMembership) {
+        return (_jsx("div", { "data-testid": "conversation-detail-input-checking", className: "flex w-full shrink-0 items-center justify-center bg-chat-bubble-neutral/[0.05] px-4 py-3", children: _jsx(Spin, { size: "small" }) }));
+    }
+    if (isViewOnlyMember || supportThreadJoin.needsJoin) {
+        return (_jsxs("div", { "data-testid": "conversation-detail-input-view-only", className: "flex flex-col w-full shrink-0 items-center justify-center gap-3 bg-chat-bubble-neutral/[0.05] px-4 py-3 ", children: [_jsx("span", { className: "text-sm text-gray-500", children: t("thread_detail.view_only_notice") }), _jsx(Button, { type: "primary", size: "small", loading: supportThreadJoin.needsJoin
+                        ? supportThreadJoin.isJoining
+                        : isJoiningPublicGroup, onClick: supportThreadJoin.needsJoin
+                        ? supportThreadJoin.join
+                        : handleJoinPublicGroup, children: tCommon("join_group") })] }));
     }
     return (_jsxs("div", { ref: containerRef, "data-testid": "conversation-detail-input", "data-cp-name": "ConversationDetailInput", className: "flex w-full shrink-0 flex-col bg-chat-bubble-neutral/[0.05]", children: [_jsx("input", { ref: mediaInputRef, type: "file", accept: "image/jpeg,image/png,image/jpg,video/*", multiple: true, className: "hidden", onChange: handleMediaInputChange }), _jsx("input", { ref: documentInputRef, type: "file", accept: ".pdf,.doc,.docx", multiple: true, className: "hidden", onChange: handleDocumentInputChange }), _jsx(ReplyPreviewBar, {}), listUploadFiles.length > 0 && (_jsx(FilePreviewList, { files: listUploadFiles, onRemove: (file) => handleRemoveFile(file.uid), onVideoReady: (uid) => setPendingVideoUids((prev) => prev.filter((p) => p !== uid)) })), showLinkPreview && previewUrl && (_jsx(LinkInputPreview, { url: previewUrl, onRemove: () => setPreviewDismissed(true) })), _jsxs("div", { className: "flex items-end gap-3 px-3 py-2", children: [_jsx("div", { className: "flex shrink-0 items-center", children: _jsx("button", { type: "button", onClick: handleToggleMoreOption, "aria-label": t("thread_detail.more_option.toggle"), "aria-expanded": isMoreOptionOpen, "data-testid": "conversation-detail-more-option-toggle", className: "flex py-3 items-center justify-center rounded-full", children: isMoreOptionOpen ? (_jsx(Icon, { icon: "close-circle-b", size: 24, className: "text-[var(--dc-color-primary)]" })) : (_jsx(Icon, { icon: "plus-circle-o", size: 24, className: "text-gray-900" })) }) }), _jsx("div", { className: clsx("flex min-w-0 flex-1 overflow-hidden rounded-xl border bg-white transition-shadow", isFocused
                             ? "border-[var(--dc-color-primary-focus)] shadow-[0px_0px_2px_var(--dc-color-primary-focus)]"

package/dist/hooks/session/useAgentSupportThreadJoin.d.ts

@@ -0,0 +1,13 @@
+import { type ConversationItem } from "@droppii-org/wasm-client-sdk";
+/**
+ * CRM's join gate for the thread detail: an agent viewing a support thread
+ * they aren't a member of can't send until they join. Opt-in — only a host
+ * that supplies `joinThread` (PDP Portal) gets it; owners and CRM never do.
+ */
+export declare const useAgentSupportThreadJoin: (conversation?: ConversationItem | null, joinThread?: (conversationId: string) => Promise<unknown>) => {
+    isCheckingMembership: boolean;
+    needsJoin: boolean;
+    join: () => Promise<void>;
+    isJoining: boolean;
+};
+//# sourceMappingURL=useAgentSupportThreadJoin.d.ts.map

package/dist/hooks/session/useAgentSupportThreadJoin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAgentSupportThreadJoin.d.ts","sourceRoot":"","sources":["../../../src/hooks/session/useAgentSupportThreadJoin.ts"],"names":[],"mappings":"AAKA,OAAO,EAEL,KAAK,gBAAgB,EAGtB,MAAM,8BAA8B,CAAC;AAYtC;;;;GAIG;AACH,eAAO,MAAM,yBAAyB,GACpC,eAAe,gBAAgB,GAAG,IAAI,EACtC,aAAa,CAAC,cAAc,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC;;;;;CAuE1D,CAAC"}

package/dist/hooks/session/useAgentSupportThreadJoin.js

@@ -0,0 +1,82 @@
+"use client";
+import { useCallback, useEffect, useState } from "react";
+import { message } from "antd";
+import { useTranslation } from "react-i18next";
+import { CbEvents, } from "@droppii-org/wasm-client-sdk";
+import { DChatSDK } from "../../constants/sdk";
+import useAuthStore from "../../store/auth";
+import { PeerType } from "../../types/conversation";
+import { isSupportSessionAgentView } from "../../utils/conversation";
+import { useIsJoinedGroup } from "./useIsJoinedGroup";
+// The local OpenIM DB learns about a REST join seconds later, so a membership
+// check right after still says "not a member". Joins made in this page
+// session are trusted instead — kept outside React so a remount keeps them.
+const joinedConversationIds = new Set();
+/**
+ * CRM's join gate for the thread detail: an agent viewing a support thread
+ * they aren't a member of can't send until they join. Opt-in — only a host
+ * that supplies `joinThread` (PDP Portal) gets it; owners and CRM never do.
+ */
+export const useAgentSupportThreadJoin = (conversation, joinThread) => {
+    const { t } = useTranslation();
+    const userID = useAuthStore((state) => state.userID);
+    const isCrm = useAuthStore((state) => state.isCrm);
+    const isAgentSupportThread = !!joinThread &&
+        !isCrm &&
+        !!conversation &&
+        conversation.peerType !== PeerType.GROUP &&
+        isSupportSessionAgentView(conversation, userID);
+    const conversationId = conversation === null || conversation === void 0 ? void 0 : conversation.conversationID;
+    const groupId = isAgentSupportThread ? conversation === null || conversation === void 0 ? void 0 : conversation.groupID : undefined;
+    const { isJoined, isError, refetch } = useIsJoinedGroup(groupId);
+    const [joiningConversationId, setJoiningConversationId] = useState(null);
+    const [, setJoinCount] = useState(0);
+    // Membership can also come from elsewhere (auto-assign, another CS adding
+    // this agent) — the group reaching this device is the cue to re-check.
+    useEffect(() => {
+        if (!groupId || isJoined !== false)
+            return undefined;
+        const handleConversations = ({ data }) => {
+            if (data === null || data === void 0 ? void 0 : data.some((item) => item.groupID === groupId))
+                void refetch();
+        };
+        const handleJoinedGroup = ({ data }) => {
+            if ((data === null || data === void 0 ? void 0 : data.groupID) === groupId)
+                void refetch();
+        };
+        DChatSDK.on(CbEvents.OnNewConversation, handleConversations);
+        DChatSDK.on(CbEvents.OnJoinedGroupAdded, handleJoinedGroup);
+        return () => {
+            DChatSDK.off(CbEvents.OnNewConversation, handleConversations);
+            DChatSDK.off(CbEvents.OnJoinedGroupAdded, handleJoinedGroup);
+        };
+    }, [groupId, isJoined, refetch]);
+    const join = useCallback(async () => {
+        if (!conversationId || !joinThread)
+            return;
+        setJoiningConversationId(conversationId);
+        try {
+            await joinThread(conversationId);
+        }
+        catch (_a) {
+            message.error(t("join_group_failed"));
+            return;
+        }
+        finally {
+            setJoiningConversationId(null);
+        }
+        joinedConversationIds.add(conversationId);
+        setJoinCount((count) => count + 1);
+        message.success(t("join_group_success"));
+    }, [conversationId, joinThread, t]);
+    const isJoinedHere = !!conversationId && joinedConversationIds.has(conversationId);
+    const isGated = !!groupId && !isJoinedHere;
+    return {
+        isCheckingMembership: isGated && isJoined === null && !isError,
+        // A failed check falls back to the prompt; the join itself is the
+        // server's call, so this never strands the agent behind a spinner.
+        needsJoin: isGated && (isJoined === false || isError),
+        join,
+        isJoining: !!conversationId && joiningConversationId === conversationId,
+    };
+};

package/dist/hooks/session/useIsJoinedGroup.d.ts

@@ -1,5 +1,6 @@
 export declare const useIsJoinedGroup: (groupId?: string) => {
     isJoined: boolean | null;
+    isError: boolean;
     refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<boolean, Error>>;
 };
 //# sourceMappingURL=useIsJoinedGroup.d.ts.map

package/dist/hooks/session/useIsJoinedGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useIsJoinedGroup.d.ts","sourceRoot":"","sources":["../../../src/hooks/session/useIsJoinedGroup.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,gBAAgB,GAAI,UAAU,MAAM;;;CAchD,CAAC"}
+{"version":3,"file":"useIsJoinedGroup.d.ts","sourceRoot":"","sources":["../../../src/hooks/session/useIsJoinedGroup.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,gBAAgB,GAAI,UAAU,MAAM;;;;CAehD,CAAC"}

package/dist/hooks/session/useIsJoinedGroup.js

@@ -3,7 +3,7 @@ import { useQuery } from "@tanstack/react-query";
 import { DChatSDK } from "../../constants/sdk";
 import { QUERY_KEYS } from "../../services/query";
 export const useIsJoinedGroup = (groupId) => {
-    const { data, isLoading, refetch } = useQuery({
+    const { data, isLoading, isError, refetch } = useQuery({
         queryKey: [QUERY_KEYS.IS_JOINED_GROUP, groupId],
         enabled: Boolean(groupId),
         queryFn: async () => {
@@ -13,6 +13,7 @@ export const useIsJoinedGroup = (groupId) => {
     });
     return {
         isJoined: isLoading ? null : (data !== null && data !== void 0 ? data : null),
+        isError,
         refetch,
     };
 };

package/package.json

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