@droppii-org/chat-sdk 0.7.22 → 0.8.0

package/dist/components/message/GroupMembersDrawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GroupMembersDrawer.d.ts","sourceRoot":"","sources":["../../../src/components/message/GroupMembersDrawer.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AA6B/C,UAAU,uBAAuB;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,gBAAgB,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA6BD,QAAA,MAAM,kBAAkB,GAAI,wDAKzB,uBAAuB,4CA6rBzB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"GroupMembersDrawer.d.ts","sourceRoot":"","sources":["../../../src/components/message/GroupMembersDrawer.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AA8B/C,UAAU,uBAAuB;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,gBAAgB,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA6BD,QAAA,MAAM,kBAAkB,GAAI,wDAKzB,uBAAuB,4CAusBzB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/components/message/GroupMembersDrawer.js

@@ -26,6 +26,7 @@ import useDeskPanelHostStore from "../../store/deskPanelHost";
 import DeskSidePanel from "../../components/common/DeskSidePanel";
 import GroupMembersPanelCrm from "./GroupMembersPanelCrm";
 import { buildCrmMemberMenu } from "./groupMemberMenuCrm";
+import { useUsersUsernames } from "../../hooks/user/useUserUsername";
 // A group's list loads page by page as the reader scrolls.
 const MEMBER_PAGE_SIZE = 50;
 const LOAD_MORE_THRESHOLD_PX = 80;
@@ -104,6 +105,8 @@ const GroupMembersDrawer = ({ groupID, conversationId, currentSession, disabled
         ? [actingMember, ...members]
         : members, [isPagedList, actingMember, members]);
     const sourceMembers = isSearchActive ? searchResults : listedMembers;
+    // Looked up only while the list is open: the drawer stays mounted in every thread header.
+    const usernames = useUsersUsernames(isOpen ? sourceMembers.map((member) => member.userID) : []);
     const sortedMembers = useMemo(() => {
         return [...sourceMembers]
             .map((member) => {
@@ -114,6 +117,7 @@ const GroupMembersDrawer = ({ groupID, conversationId, currentSession, disabled
             return {
                 userID: member.userID,
                 nickname: getMemberDisplayName(member),
+                username: usernames[member.userID],
                 faceURL: member.faceURL,
                 isCustomer: Boolean(customerUserID) && member.userID === customerUserID,
                 isCurrentUser: member.userID === authUserID,
@@ -148,7 +152,7 @@ const GroupMembersDrawer = ({ groupID, conversationId, currentSession, disabled
                 sensitivity: "base",
             });
         });
-    }, [authUserID, sourceMembers, customerUserID, t, isPagedList, isSearchActive]);
+    }, [authUserID, sourceMembers, usernames, customerUserID, t, isPagedList, isSearchActive]);
     const handleListScroll = (event) => {
         if (isSearchActive || !hasMore || isLoadingMore)
             return;
@@ -430,7 +434,7 @@ const GroupMembersDrawer = ({ groupID, conversationId, currentSession, disabled
                             disabled: true,
                         },
                     ];
-                return (_jsxs("div", { className: "flex items-center gap-3 px-4 py-2", children: [_jsx(Avatar, { src: member.faceURL, size: 40, className: "shrink-0", children: member.nickname.charAt(0) || "A" }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [_jsx("p", { className: "text-sm font-semibold text-gray-900 truncate", children: member.nickname }), member.isCurrentUser && (_jsx("span", { className: "text-xs text-blue-500 shrink-0", children: t("current_account") }))] }), member.roleLabel && (_jsx("p", { className: "text-sm text-gray-500 truncate", children: member.roleLabel }))] }), (isRealGroup || member.isCurrentUser) && (_jsx(Dropdown, { menu: { items: menuItems }, trigger: ["click"], placement: "bottomRight", children: _jsx("button", { type: "button", "aria-label": t("member_actions"), title: t("member_actions"), className: "flex items-center justify-center w-8 h-8 rounded-full text-gray-500 hover:bg-gray-100", onClick: (event) => event.stopPropagation(), children: _jsx(Icon, { icon: "more-horizontal-b", size: 18 }) }) }))] }, member.userID));
+                return (_jsxs("div", { className: "flex items-center gap-3 px-4 py-2", children: [_jsx(Avatar, { src: member.faceURL, size: 40, className: "shrink-0", children: member.nickname.charAt(0) || "A" }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [_jsx("p", { className: "text-sm font-semibold text-gray-900 truncate", children: member.nickname }), member.isCurrentUser && (_jsx("span", { className: "text-xs text-blue-500 shrink-0", children: t("current_account") }))] }), member.username && (_jsx("p", { className: "text-xs text-gray-500 truncate", title: member.username, children: member.username })), member.roleLabel && (_jsx("p", { className: "text-sm text-gray-500 truncate", children: member.roleLabel }))] }), (isRealGroup || member.isCurrentUser) && (_jsx(Dropdown, { menu: { items: menuItems }, trigger: ["click"], placement: "bottomRight", children: _jsx("button", { type: "button", "aria-label": t("member_actions"), title: t("member_actions"), className: "flex items-center justify-center w-8 h-8 rounded-full text-gray-500 hover:bg-gray-100", onClick: (event) => event.stopPropagation(), children: _jsx(Icon, { icon: "more-horizontal-b", size: 18 }) }) }))] }, member.userID));
             }) }));
     };
     return (_jsxs("div", { className: "inline-flex shrink-0", "data-cp-name": "GroupMembersDrawer", children: [_jsx(Button, { ref: triggerRef, type: "text", shape: "default", className: headerIconButtonClass(isCrm, isOpen), onClick: handleOpenDrawer, disabled: disabled || !groupID, "aria-label": t("members"), title: t("members"), children: _jsx(HeaderIcon, { isCrm: isCrm, stroke: "users", font: "user-two-check-o" }) }), isCrm && (host.workspace || host.slot) ? (renderCrmHost()) : (_jsx(Drawer, { open: isOpen, "aria-label": t("members"), onClose: handleCloseDrawer, mask: false, closeIcon: false, styles: {

package/dist/components/message/GroupMembersPanelCrm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GroupMembersPanelCrm.d.ts","sourceRoot":"","sources":["../../../src/components/message/GroupMembersPanelCrm.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAA4B,OAAO,EAAE,MAAM,OAAO,CAAC;AAE/D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,MAAM,CAAC;AAMtC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,UAAU,yBAAyB;IACjC,8EAA8E;IAC9E,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,mFAAmF;IACnF,WAAW,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,OAAO,CAAC;IACvB,YAAY,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,OAAO,CAAC;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,YAAY,EAAE,OAAO,CAAC;IACtB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,oEAAoE;IACpE,aAAa,EAAE,OAAO,CAAC;IACvB,SAAS,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,SAAS,CAAC,OAAO,CAAC,CAAC;CAC9D;AAQD,gGAAgG;AAChG,QAAA,MAAM,oBAAoB,GAAI,4LAgB3B,yBAAyB,4CAiI3B,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"GroupMembersPanelCrm.d.ts","sourceRoot":"","sources":["../../../src/components/message/GroupMembersPanelCrm.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAA4B,OAAO,EAAE,MAAM,OAAO,CAAC;AAE/D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,MAAM,CAAC;AAMtC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,UAAU,yBAAyB;IACjC,8EAA8E;IAC9E,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,mFAAmF;IACnF,WAAW,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,OAAO,CAAC;IACvB,YAAY,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,OAAO,CAAC;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,YAAY,EAAE,OAAO,CAAC;IACtB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,oEAAoE;IACpE,aAAa,EAAE,OAAO,CAAC;IACvB,SAAS,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,SAAS,CAAC,OAAO,CAAC,CAAC;CAC9D;AAQD,gGAAgG;AAChG,QAAA,MAAM,oBAAoB,GAAI,4LAgB3B,yBAAyB,4CAwI3B,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/dist/components/message/GroupMembersPanelCrm.js

@@ -39,7 +39,7 @@ const GroupMembersPanelCrm = ({ totalCount, members, isRealGroup, isLoading, isL
                 : member.isAdmin
                     ? _jsx("span", { className: `${CHIP} bg-gray-25 text-gray-900`, children: t("group_admin") })
                     : null;
-        return (_jsxs("li", { className: "flex items-center gap-2.5 rounded-lg p-2", children: [_jsx(PersonAvatar, { name: member.nickname, src: member.faceURL, size: 36 }), _jsxs("span", { className: "flex min-w-0 flex-1 items-baseline gap-1 text-sm font-medium text-gray-900", children: [_jsx("span", { className: "truncate", title: member.nickname, children: member.nickname }), member.isCurrentUser && (_jsxs("span", { className: "shrink-0 text-xs font-normal text-gray-600", children: ["(", t("you"), ")"] }))] }), roleChip, member.isSendMessageDisabled && !member.isOwner && (_jsxs("span", { className: `${CHIP} bg-warning-25 text-warning-800`, children: [_jsx(Icon, { icon: "bell-off-o", size: 12 }), t("send_disabled_chip")] })), items && items.length > 0 && (_jsx(Dropdown, { menu: { items, style: { width: 260 } }, trigger: ["click"], placement: "bottomRight", children: _jsx("button", { type: "button", "aria-label": t("member_actions_for", { name: member.nickname }), title: t("member_actions_for", { name: member.nickname }), className: `flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-gray-600 hover:bg-gray-5 aria-expanded:bg-gray-25 aria-expanded:text-gray-900 ${FOCUS_RING_CLASS}`, children: _jsx(Icon, { icon: "more-horizontal-b", size: 18 }) }) }))] }, member.userID));
+        return (_jsxs("li", { className: "flex items-center gap-2.5 rounded-lg p-2", children: [_jsx(PersonAvatar, { name: member.nickname, src: member.faceURL, size: 36 }), _jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsxs("span", { className: "flex min-w-0 items-baseline gap-1 text-sm font-medium text-gray-900", children: [_jsx("span", { className: "truncate", title: member.nickname, children: member.nickname }), member.isCurrentUser && (_jsxs("span", { className: "shrink-0 text-xs font-normal text-gray-600", children: ["(", t("you"), ")"] }))] }), member.username && (_jsx("span", { className: "truncate text-xs leading-4 text-gray-600", title: member.username, children: member.username }))] }), roleChip, member.isSendMessageDisabled && !member.isOwner && (_jsxs("span", { className: `${CHIP} bg-warning-25 text-warning-800`, children: [_jsx(Icon, { icon: "bell-off-o", size: 12 }), t("send_disabled_chip")] })), items && items.length > 0 && (_jsx(Dropdown, { menu: { items, style: { width: 260 } }, trigger: ["click"], placement: "bottomRight", children: _jsx("button", { type: "button", "aria-label": t("member_actions_for", { name: member.nickname }), title: t("member_actions_for", { name: member.nickname }), className: `flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-gray-600 hover:bg-gray-5 aria-expanded:bg-gray-25 aria-expanded:text-gray-900 ${FOCUS_RING_CLASS}`, children: _jsx(Icon, { icon: "more-horizontal-b", size: 18 }) }) }))] }, member.userID));
     };
     const renderList = (list) => (_jsx("ul", { className: "m-0 flex list-none flex-col gap-0.5 p-0", children: list.map(renderRow) }));
     const renderBody = () => {

package/dist/components/message/groupMemberTypes.d.ts

@@ -1,6 +1,8 @@
 export interface MemberDisplayItem {
     userID: string;
     nickname: string;
+    /** Tells apart members with the same name; missing until user info loads. */
+    username?: string;
     faceURL?: string;
     isCustomer: boolean;
     isCurrentUser: boolean;

package/dist/components/message/groupMemberTypes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"groupMemberTypes.d.ts","sourceRoot":"","sources":["../../../src/components/message/groupMemberTypes.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,OAAO,CAAC;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,qBAAqB,EAAE,OAAO,CAAC;IAC/B,SAAS,EAAE,MAAM,CAAC;CACnB"}
+{"version":3,"file":"groupMemberTypes.d.ts","sourceRoot":"","sources":["../../../src/components/message/groupMemberTypes.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,OAAO,CAAC;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,qBAAqB,EAAE,OAAO,CAAC;IAC/B,SAAS,EAAE,MAAM,CAAC;CACnB"}

package/dist/hooks/user/useUserUsername.d.ts

@@ -1,3 +1,5 @@
 /** Username from the user's public info `ex`; undefined until known. */
 export declare const useUserUsername: (userId?: string) => string | undefined;
+/** Usernames for a list of users, fetched in one call; an entry is missing until known. */
+export declare const useUsersUsernames: (userIds: string[]) => Record<string, string>;
 //# sourceMappingURL=useUserUsername.d.ts.map

package/dist/hooks/user/useUserUsername.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useUserUsername.d.ts","sourceRoot":"","sources":["../../../src/hooks/user/useUserUsername.ts"],"names":[],"mappings":"AA+BA,wEAAwE;AACxE,eAAO,MAAM,eAAe,GAAI,SAAS,MAAM,KAAG,MAAM,GAAG,SAoB1D,CAAC"}
+{"version":3,"file":"useUserUsername.d.ts","sourceRoot":"","sources":["../../../src/hooks/user/useUserUsername.ts"],"names":[],"mappings":"AAwCA,wEAAwE;AACxE,eAAO,MAAM,eAAe,GAAI,SAAS,MAAM,KAAG,MAAM,GAAG,SAe1D,CAAC;AAEF,2FAA2F;AAC3F,eAAO,MAAM,iBAAiB,GAAI,SAAS,MAAM,EAAE,KAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAoC1E,CAAC"}

package/dist/hooks/user/useUserUsername.js

@@ -1,5 +1,5 @@
 "use client";
-import { useEffect } from "react";
+import { useEffect, useMemo } from "react";
 import { DChatSDK } from "../../constants/sdk";
 import { useChatContext } from "../../context/ChatContext";
 import useUsersInfoStore from "../../store/usersInfo";
@@ -26,9 +26,18 @@ const loadUserInfo = (userId, attempt = 0) => {
         setTimeout(() => loadUserInfo(userId, attempt + 1), delay);
     });
 };
+const readUsername = (ex) => {
+    var _a, _b, _c;
+    try {
+        const info = JSON.parse(ex || "{}");
+        return ((_c = (_b = (_a = info === null || info === void 0 ? void 0 : info.userInfo) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.username) === null || _c === void 0 ? void 0 : _c.trim()) || undefined;
+    }
+    catch (_d) {
+        return undefined;
+    }
+};
 /** Username from the user's public info `ex`; undefined until known. */
 export const useUserUsername = (userId) => {
-    var _a, _b, _c;
     const { connectStatus } = useChatContext();
     const user = useUsersInfoStore((state) => userId ? state.usersInfo[userId] : undefined);
     useEffect(() => {
@@ -39,11 +48,42 @@ export const useUserUsername = (userId) => {
         pendingUserIds.add(userId);
         loadUserInfo(userId);
     }, [userId, user, connectStatus]);
-    try {
-        const ex = JSON.parse((user === null || user === void 0 ? void 0 : user.ex) || "{}");
-        return ((_c = (_b = (_a = ex === null || ex === void 0 ? void 0 : ex.userInfo) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.username) === null || _c === void 0 ? void 0 : _c.trim()) || undefined;
-    }
-    catch (_d) {
-        return undefined;
-    }
+    return readUsername(user === null || user === void 0 ? void 0 : user.ex);
+};
+/** Usernames for a list of users, fetched in one call; an entry is missing until known. */
+export const useUsersUsernames = (userIds) => {
+    const { connectStatus } = useChatContext();
+    const usersInfo = useUsersInfoStore((state) => state.usersInfo);
+    const idsKey = userIds.join(",");
+    useEffect(() => {
+        if (connectStatus !== ConnectStatus.Connected)
+            return;
+        const { usersInfo: known } = useUsersInfoStore.getState();
+        const missing = Array.from(new Set(userIds)).filter((id) => id && !known[id] && !pendingUserIds.has(id));
+        if (!missing.length)
+            return;
+        missing.forEach((id) => pendingUserIds.add(id));
+        // Ids the server doesn't return stay pending, so they aren't asked for again.
+        DChatSDK.getUsersInfo(missing)
+            .then(({ data }) => {
+            useUsersInfoStore.getState().upsertUsers(data !== null && data !== void 0 ? data : []);
+            (data !== null && data !== void 0 ? data : []).forEach((user) => pendingUserIds.delete(user.userID));
+        })
+            .catch((error) => {
+            missing.forEach((id) => pendingUserIds.delete(id));
+            console.error("Error fetching users info:", error);
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [idsKey, connectStatus]);
+    return useMemo(() => {
+        const usernames = {};
+        userIds.forEach((id) => {
+            var _a;
+            const username = readUsername((_a = usersInfo[id]) === null || _a === void 0 ? void 0 : _a.ex);
+            if (username)
+                usernames[id] = username;
+        });
+        return usernames;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [idsKey, usersInfo]);
 };

package/package.json

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