@droppii-org/chat-sdk 0.1.72 → 0.1.73

package/dist/src/components/media-collection/ImageCollection.d.ts

@@ -0,0 +1,3 @@
+declare const ImageCollection: () => import("react/jsx-runtime").JSX.Element;
+export default ImageCollection;
+//# sourceMappingURL=ImageCollection.d.ts.map

package/dist/src/components/media-collection/ImageCollection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageCollection.d.ts","sourceRoot":"","sources":["../../../../src/components/media-collection/ImageCollection.tsx"],"names":[],"mappings":"AAYA,QAAA,MAAM,eAAe,+CAqFpB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/src/components/media-collection/ImageCollection.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MessageType } from "@openim/wasm-client-sdk";
+import { useSearchMessage } from "../../hooks/search/useSearchMessage";
+import InfiniteScroll from "react-infinite-scroll-component";
+import { Empty, Image, Spin } from "antd";
+import { useCallback } from "react";
+import dayjs from "dayjs";
+import useConversationStore from "../../store/conversation";
+import { images } from "../../constants/images";
+import { useTranslation } from "react-i18next";
+import { renderImagePreviewToolbar } from "../../components/message/item/imagePreviewToolbar";
+const ImageCollection = () => {
+    const { t } = useTranslation();
+    const selectedSourceId = useConversationStore((state) => state.selectedSourceId);
+    const { groupedData, fetchNextPage, hasNextPage, dataFlatten, isLoading } = useSearchMessage({
+        payload: {
+            recvID: selectedSourceId,
+            contentType: MessageType.PictureMessage,
+        },
+    });
+    const renderItem = useCallback((date, items) => {
+        return (_jsxs("div", { className: "mb-2", children: [_jsx("span", { className: "text-sm font-medium text-gray-500 px-3", children: dayjs(date).format("DD MMMM, YYYY") }), _jsx("div", { className: "grid grid-cols-3 justify-start gap-px py-2", children: items.map((item) => {
+                        var _a, _b, _c, _d;
+                        const imageContent = JSON.parse(((_a = item === null || item === void 0 ? void 0 : item.chatLog) === null || _a === void 0 ? void 0 : _a.content) || "{}");
+                        const sourceUrl = ((_b = imageContent.sourcePicture) === null || _b === void 0 ? void 0 : _b.url) ||
+                            ((_c = imageContent.snapshotPicture) === null || _c === void 0 ? void 0 : _c.url);
+                        return (_jsx("div", { className: "border inline-block w-full h-full aspect-square", children: _jsx(Image, { rootClassName: "cursor-pointer w-full h-full", className: "w-full !h-full object-cover", src: sourceUrl, preview: true, placeholder: _jsx("div", { className: "flex items-center justify-center", children: _jsx(Spin, {}) }), fallback: images.imageFailed }) }, (_d = item === null || item === void 0 ? void 0 : item.chatLog) === null || _d === void 0 ? void 0 : _d.clientMsgID));
+                    }) })] }, date));
+    }, []);
+    if (dataFlatten.length === 0 && !isLoading)
+        return _jsx(Empty, { description: t("no_media_files") });
+    if (isLoading)
+        return (_jsx("div", { className: "flex items-center justify-center", children: _jsx(Spin, {}) }));
+    return (_jsx("div", { id: "scrollableImageDiv", className: "h-full overflow-auto", children: _jsx(Image.PreviewGroup, { preview: {
+                toolbarRender: (originalNode, info) => { var _a; return renderImagePreviewToolbar(originalNode, (_a = info === null || info === void 0 ? void 0 : info.image) === null || _a === void 0 ? void 0 : _a.url, t); },
+            }, children: _jsx(InfiniteScroll, { dataLength: dataFlatten.length, next: fetchNextPage, hasMore: hasNextPage, loader: _jsx("div", { className: "flex items-center justify-center py-2", children: _jsx(Spin, {}) }), scrollableTarget: "scrollableImageDiv", children: Object.entries(groupedData).map(([date, items]) => renderItem(date, items)) }) }) }));
+};
+export default ImageCollection;

package/dist/src/components/media-collection/LinkCollection.d.ts

@@ -0,0 +1,5 @@
+declare const LinkCollection: ({ onClose }: {
+    onClose: () => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export default LinkCollection;
+//# sourceMappingURL=LinkCollection.d.ts.map

package/dist/src/components/media-collection/LinkCollection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkCollection.d.ts","sourceRoot":"","sources":["../../../../src/components/media-collection/LinkCollection.tsx"],"names":[],"mappings":"AA8DA,QAAA,MAAM,cAAc,GAAI,aAAa;IAAE,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,4CAyH3D,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/src/components/media-collection/LinkCollection.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dropdown, Empty, Spin } from "antd";
+import { useTranslation } from "react-i18next";
+import useConversationStore from "../../store/conversation";
+import { useSearchMessage } from "../../hooks/search/useSearchMessage";
+import { useCallback, useEffect, useState } from "react";
+import dayjs from "dayjs";
+import InfiniteScroll from "react-infinite-scroll-component";
+import { MessageType, SessionType } from "@openim/wasm-client-sdk";
+import { Icon } from "../../components/icon";
+import { DChatSDK } from "../../constants/sdk";
+import { useChatContext } from "../../context/ChatContext";
+import { message as antdMessage } from "antd";
+const LinkPreview = ({ url }) => {
+    const [title, setTitle] = useState("");
+    const [isLoading, setIsLoading] = useState(true);
+    useEffect(() => {
+        if (!url)
+            return;
+        setIsLoading(true);
+        fetch(`https://api.microlink.io?url=${encodeURIComponent(url)}`)
+            .then((res) => res.json())
+            .then((res) => {
+            var _a;
+            if ((_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.title) {
+                setTitle(res.data.title);
+            }
+        })
+            .catch(() => {
+            setTitle("");
+        })
+            .finally(() => {
+            setIsLoading(false);
+        });
+    }, [url]);
+    return (_jsxs("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: "flex flex-col truncate text-blue-600 cursor-pointer", title: title || url, children: [isLoading && (_jsx("span", { className: "font-medium truncate text-gray-900", children: url })), !isLoading &&
+                (title ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "font-medium truncate text-gray-900", children: title }), _jsx("span", { className: "text-sm text-gray-500 truncate", children: url })] })) : (_jsx("span", { className: "font-medium truncate text-gray-900", children: url })))] }));
+};
+const LinkCollection = ({ onClose }) => {
+    const { t } = useTranslation();
+    const selectedSourceId = useConversationStore((state) => state.selectedSourceId);
+    const { user } = useChatContext();
+    const onPressItem = async (message) => {
+        const { data } = await DChatSDK.getOneConversation({
+            sourceID: message.sessionType === SessionType.Group
+                ? message.groupID
+                : (user === null || user === void 0 ? void 0 : user.userID) !== message.sendID
+                    ? message.sendID
+                    : message.recvID,
+            sessionType: message.sessionType,
+        });
+        if (!data) {
+            return antdMessage.error(t("err_get_conversation"));
+        }
+        useConversationStore
+            .getState()
+            .setConversationData(data, message.clientMsgID);
+        useConversationStore
+            .getState()
+            .setSelectedConversationId(data.conversationID);
+        onClose();
+    };
+    const { groupedData, fetchNextPage, hasNextPage, dataFlatten, isLoading } = useSearchMessage({
+        payload: {
+            recvID: selectedSourceId,
+            contentType: MessageType.UrlTextMessage,
+        },
+    });
+    const renderItem = useCallback((date, items) => {
+        return (_jsxs("div", { className: "px-3", children: [_jsx("span", { className: "text-sm font-medium text-gray-500 px-3", children: dayjs(date).format("DD MMMM, YYYY") }), _jsx("div", { className: "flex flex-col gap-1 mt-2", children: items.map((item) => {
+                        var _a, _b, _c;
+                        const urls = ((_b = JSON.parse(((_a = item === null || item === void 0 ? void 0 : item.chatLog) === null || _a === void 0 ? void 0 : _a.content) || "{}")) === null || _b === void 0 ? void 0 : _b.urls) || [];
+                        const menuItems = [
+                            {
+                                key: "open",
+                                label: t("view_message"),
+                                onClick: () => onPressItem(item.chatLog),
+                            },
+                        ];
+                        return (_jsx("div", { children: urls.map((url, index) => {
+                                var _a;
+                                return (_jsxs("div", { className: "bg-gray-100 flex gap-2 items-center p-2 mb-1", children: [_jsx("div", { className: "flex items-center justify-center shrink-0", children: _jsx(Icon, { icon: "link-b", size: 16 }) }), _jsx("div", { className: "flex-1 min-w-0", children: _jsx(LinkPreview, { url: url }) }), _jsx(Dropdown, { menu: { items: menuItems }, trigger: ["click"], placement: "bottomRight", children: _jsx("div", { className: "flex items-center justify-center shrink-0 cursor-pointer p-1 hover:bg-gray-200 rounded ml-2", onClick: (e) => e.stopPropagation(), children: _jsx(Icon, { icon: "more-horizontal-b", size: 16 }) }) })] }, `${(_a = item.chatLog) === null || _a === void 0 ? void 0 : _a.clientMsgID}-${index}`));
+                            }) }, (_c = item.chatLog) === null || _c === void 0 ? void 0 : _c.clientMsgID));
+                    }) })] }, date));
+    }, []);
+    if (dataFlatten.length === 0 && !isLoading)
+        return _jsx(Empty, { description: t("no_media_files") });
+    if (isLoading)
+        return (_jsx("div", { className: "flex items-center justify-center", children: _jsx(Spin, {}) }));
+    return (_jsx("div", { id: "scrollableFileDiv", className: "h-full overflow-auto", children: _jsx(InfiniteScroll, { dataLength: Object.keys(groupedData).length, next: fetchNextPage, hasMore: hasNextPage, loader: _jsx("div", { className: "flex items-center justify-center py-2", children: _jsx(Spin, {}) }), scrollableTarget: "scrollableFileDiv", children: Object.entries(groupedData).map(([date, items]) => renderItem(date, items)) }) }));
+};
+export default LinkCollection;

package/dist/src/components/media-collection/VideoCollection.d.ts

@@ -0,0 +1,3 @@
+declare const VideoCollection: () => import("react/jsx-runtime").JSX.Element;
+export default VideoCollection;
+//# sourceMappingURL=VideoCollection.d.ts.map

package/dist/src/components/media-collection/VideoCollection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoCollection.d.ts","sourceRoot":"","sources":["../../../../src/components/media-collection/VideoCollection.tsx"],"names":[],"mappings":"AAaA,QAAA,MAAM,eAAe,+CAyHpB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/src/components/media-collection/VideoCollection.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MessageType } from "@openim/wasm-client-sdk";
+import { useSearchMessage } from "../../hooks/search/useSearchMessage";
+import InfiniteScroll from "react-infinite-scroll-component";
+import { Carousel, Empty, Image, Modal, Spin } from "antd";
+import { useCallback, useState } from "react";
+import dayjs from "dayjs";
+import useConversationStore from "../../store/conversation";
+import { useBoolean } from "ahooks";
+import { images } from "../../constants/images";
+import { Icon } from "../../components/icon";
+import { useTranslation } from "react-i18next";
+const VideoCollection = () => {
+    const { t } = useTranslation();
+    const selectedSourceId = useConversationStore((state) => state.selectedSourceId);
+    const { groupedData, fetchNextPage, hasNextPage, dataFlatten, isLoading } = useSearchMessage({
+        payload: {
+            recvID: selectedSourceId,
+            contentType: MessageType.VideoMessage,
+        },
+    });
+    const [open, { setTrue, setFalse }] = useBoolean(false);
+    const [currentIndex, setCurrentIndex] = useState(0);
+    const handleOpenPreview = (index) => {
+        setCurrentIndex(index);
+        setTrue();
+    };
+    const renderItem = useCallback((date, items) => {
+        return (_jsxs("div", { className: "mb-2", children: [_jsx("span", { className: "text-sm font-medium text-gray-500 px-3", children: dayjs(date).format("DD MMMM, YYYY") }), _jsx("div", { className: "grid grid-cols-3 justify-start gap-px py-2", children: items.map((item) => {
+                        var _a, _b;
+                        const videoContent = JSON.parse(((_a = item === null || item === void 0 ? void 0 : item.chatLog) === null || _a === void 0 ? void 0 : _a.content) || "{}");
+                        const globalIndex = dataFlatten.findIndex((v) => { var _a, _b; return ((_a = v.chatLog) === null || _a === void 0 ? void 0 : _a.clientMsgID) === ((_b = item.chatLog) === null || _b === void 0 ? void 0 : _b.clientMsgID); });
+                        return (_jsxs("div", { className: "border relative w-full h-full aspect-square cursor-pointer", onClick: () => handleOpenPreview(globalIndex), children: [_jsx(Image, { rootClassName: "w-full h-full", src: videoContent.snapshotUrl, alt: "video thumbnail", className: "w-full !h-full object-cover", fallback: images.imageFailed }), _jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/30 text-white text-2xl", children: _jsx(Icon, { icon: "play-b", size: 24, color: "white" }) })] }, (_b = item === null || item === void 0 ? void 0 : item.chatLog) === null || _b === void 0 ? void 0 : _b.clientMsgID));
+                    }) })] }, date));
+    }, []);
+    if (dataFlatten.length === 0 && !isLoading)
+        return _jsx(Empty, { description: t("no_media_files") });
+    if (isLoading)
+        return (_jsx("div", { className: "flex items-center justify-center", children: _jsx(Spin, {}) }));
+    return (_jsxs("div", { id: "scrollableVideoDiv", className: "h-full overflow-auto", children: [_jsx(InfiniteScroll, { dataLength: Object.keys(groupedData).length, next: fetchNextPage, hasMore: hasNextPage, loader: _jsx("div", { className: "flex items-center justify-center py-2", children: _jsx(Spin, {}) }), scrollableTarget: "scrollableVideoDiv", children: Object.entries(groupedData).map(([date, items]) => renderItem(date, items)) }), _jsx(Modal, { open: open, onCancel: setFalse, footer: null, centered: true, styles: {
+                    content: {
+                        padding: 0,
+                    },
+                }, children: _jsx(Carousel, { dots: true, infinite: false, initialSlide: currentIndex, afterChange: (i) => setCurrentIndex(i), children: dataFlatten.map((item, idx) => {
+                        var _a;
+                        const videoContent = JSON.parse(((_a = item === null || item === void 0 ? void 0 : item.chatLog) === null || _a === void 0 ? void 0 : _a.content) || "{}");
+                        const sourceUrl = videoContent.videoUrl;
+                        return (_jsx("div", { style: { textAlign: "center" }, children: _jsx("video", { src: sourceUrl, controls: true, autoPlay: idx === currentIndex, style: { width: "100%", maxHeight: "80vh" } }) }, idx));
+                    }) }) })] }));
+};
+export default VideoCollection;

package/dist/src/components/media-collection/index.d.ts

@@ -0,0 +1,9 @@
+export declare enum MediaCollectionTabKey {
+    Image = "image",
+    Video = "video",
+    File = "file",
+    Link = "link"
+}
+declare const MediaCollection: () => import("react/jsx-runtime").JSX.Element;
+export default MediaCollection;
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/media-collection/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/media-collection/index.tsx"],"names":[],"mappings":"AAaA,oBAAY,qBAAqB;IAC/B,KAAK,UAAU;IACf,KAAK,UAAU;IACf,IAAI,SAAS;IACb,IAAI,SAAS;CACd;AAED,QAAA,MAAM,eAAe,+CA8EpB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/src/components/media-collection/index.js

@@ -0,0 +1,57 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useBoolean } from "ahooks";
+import { Button, Drawer, Tabs } from "antd";
+import { Icon } from "../../components/icon";
+import { useTranslation } from "react-i18next";
+import ImageCollection from "./ImageCollection";
+import VideoCollection from "./VideoCollection";
+import { useIsMobile } from "../../hooks/common/useIsMobile";
+import { useMemo } from "react";
+import FileCollection from "./FileCollection";
+import LinkCollection from "./LinkCollection";
+export var MediaCollectionTabKey;
+(function (MediaCollectionTabKey) {
+    MediaCollectionTabKey["Image"] = "image";
+    MediaCollectionTabKey["Video"] = "video";
+    MediaCollectionTabKey["File"] = "file";
+    MediaCollectionTabKey["Link"] = "link";
+})(MediaCollectionTabKey || (MediaCollectionTabKey = {}));
+const MediaCollection = () => {
+    const { t } = useTranslation();
+    const [isOpen, { toggle }] = useBoolean(false);
+    const isMobile = useIsMobile();
+    const items = useMemo(() => {
+        if (!isOpen)
+            return [];
+        return [
+            {
+                key: MediaCollectionTabKey.Image,
+                label: t("image"),
+                children: _jsx(ImageCollection, {}),
+            },
+            {
+                key: MediaCollectionTabKey.Video,
+                label: t("video"),
+                children: _jsx(VideoCollection, {}),
+            },
+            {
+                key: MediaCollectionTabKey.File,
+                label: t("file"),
+                children: _jsx(FileCollection, {}),
+            },
+            {
+                key: MediaCollectionTabKey.Link,
+                label: t("link"),
+                children: _jsx(LinkCollection, { onClose: toggle }),
+            },
+        ];
+    }, [isOpen, t]);
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", onClick: toggle, children: _jsx(Icon, { icon: "folder-o", size: 22 }) }), _jsx(Drawer, { open: isOpen, onClose: toggle, mask: false, closeIcon: false, styles: {
+                    body: {
+                        padding: 0,
+                        height: "100%",
+                    },
+                }, getContainer: false, width: isMobile ? "100%" : 360, children: _jsxs("div", { className: "flex flex-col h-full", children: [_jsxs("div", { className: "flex items-center justify-between p-3", children: [_jsx("span", { className: "text-lg font-medium", children: t("library") }), _jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", onClick: toggle, children: _jsx(Icon, { icon: "close-b", size: 22 }) })] }), _jsx("div", { className: "flex-1 overflow-hidden", children: _jsx(Tabs, { defaultActiveKey: MediaCollectionTabKey.Image, items: items, className: "h-full" }) })] }) })] }));
+};
+export default MediaCollection;

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

@@ -0,0 +1,10 @@
+import { ISessionResponse } from "../../types/dto";
+interface GroupMembersDrawerProps {
+    groupID?: string;
+    conversationId?: string;
+    currentSession?: ISessionResponse;
+    disabled?: boolean;
+}
+declare const GroupMembersDrawer: ({ groupID, conversationId, currentSession, disabled, }: GroupMembersDrawerProps) => import("react/jsx-runtime").JSX.Element;
+export default GroupMembersDrawer;
+//# sourceMappingURL=GroupMembersDrawer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GroupMembersDrawer.d.ts","sourceRoot":"","sources":["../../../../src/components/message/GroupMembersDrawer.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAK/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;AAsCD,QAAA,MAAM,kBAAkB,GAAI,wDAKzB,uBAAuB,4CA0OzB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/src/components/message/GroupMembersDrawer.js

@@ -0,0 +1,138 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { GroupMemberRole } from "@openim/wasm-client-sdk";
+import { Avatar, Button, Drawer, Dropdown, Empty, message, Modal, Spin } from "antd";
+import { useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { usePathname, useRouter } from "next/navigation";
+import useAuthStore from "../../store/auth";
+import useConversationStore from "../../store/conversation";
+import { useGroupMembers } from "../../hooks/group/useGroupMembers";
+import { useLeaveConversation } from "../../hooks/session/useLeaveConversation";
+import { Icon } from "../../components/icon";
+const getMemberDisplayName = (member) => {
+    return member.nickname || member.userID || "";
+};
+const getMemberRoleLabel = ({ member, customerUserID, t, }) => {
+    if (member.userID === customerUserID ||
+        member.roleLevel === GroupMemberRole.Owner) {
+        return t("group_creator");
+    }
+    if (member.roleLevel === GroupMemberRole.Admin) {
+        return t("group_admin");
+    }
+    return t("group_member");
+};
+const GroupMembersDrawer = ({ groupID, conversationId, currentSession, disabled = false, }) => {
+    var _a, _b;
+    const { t } = useTranslation();
+    const router = useRouter();
+    const pathname = usePathname();
+    const [isOpen, setIsOpen] = useState(false);
+    const [showLeaveConfirm, setShowLeaveConfirm] = useState(false);
+    const authUserID = useAuthStore((state) => state.userID);
+    const conversationData = useConversationStore((state) => state.conversationData);
+    const { members, isLoading, error, refetch } = useGroupMembers(groupID);
+    const { mutateAsync: leaveConversation, isPending: isLeaving } = useLeaveConversation();
+    let customerUserID = "";
+    try {
+        const exConversationInfo = JSON.parse((conversationData === null || conversationData === void 0 ? void 0 : conversationData.ex) || "{}");
+        customerUserID = ((_b = (_a = exConversationInfo === null || exConversationInfo === void 0 ? void 0 : exConversationInfo.sessionInfo) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.ownerId) || "";
+    }
+    catch (error) {
+        console.error("Error parsing conversation extra info:", error);
+    }
+    const sortedMembers = useMemo(() => {
+        return [...members]
+            .map((member) => ({
+            userID: member.userID,
+            nickname: getMemberDisplayName(member),
+            faceURL: member.faceURL,
+            isCustomer: Boolean(customerUserID) && member.userID === customerUserID,
+            isCurrentUser: member.userID === authUserID,
+            roleLabel: getMemberRoleLabel({
+                member,
+                customerUserID,
+                t,
+            }),
+        }))
+            .sort((memberA, memberB) => {
+            if (memberA.isCustomer !== memberB.isCustomer) {
+                return memberA.isCustomer ? -1 : 1;
+            }
+            return memberA.nickname.localeCompare(memberB.nickname, "vi", {
+                sensitivity: "base",
+            });
+        });
+    }, [authUserID, members, customerUserID, t]);
+    const handleOpenDrawer = () => {
+        if (!groupID || disabled) {
+            return;
+        }
+        setIsOpen(true);
+        void refetch();
+    };
+    const handleCloseDrawer = () => {
+        setIsOpen(false);
+    };
+    const isCurrentUserAssigneeOfActiveSession = useMemo(() => {
+        if (!currentSession || currentSession.isClosed)
+            return false;
+        return currentSession.supporterId === authUserID;
+    }, [currentSession, authUserID]);
+    const handleLeaveGroup = () => {
+        if (isCurrentUserAssigneeOfActiveSession) {
+            message.error(t("leave_group_assignee_error"));
+            return;
+        }
+        setShowLeaveConfirm(true);
+    };
+    const handleConfirmLeave = async () => {
+        var _a, _b;
+        if (!conversationId || !groupID)
+            return;
+        try {
+            await leaveConversation({ conversationId });
+            message.success(t("leave_group_success"));
+            router.replace(pathname);
+            setShowLeaveConfirm(false);
+            setIsOpen(false);
+        }
+        catch (error) {
+            const errorMessage = ((_b = (_a = error === null || error === void 0 ? void 0 : error.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.message) || t("leave_group_failed");
+            message.error(errorMessage);
+        }
+    };
+    useEffect(() => {
+        setIsOpen(false);
+    }, [groupID]);
+    const renderContent = () => {
+        if (isLoading) {
+            return (_jsx("div", { className: "flex items-center justify-center h-full min-h-40", children: _jsx(Spin, {}) }));
+        }
+        if (error) {
+            return (_jsx("div", { className: "flex items-center justify-center h-full min-h-40 px-6 text-center text-sm text-gray-500", children: t(error) }));
+        }
+        if (!sortedMembers.length) {
+            return _jsx(Empty, { description: t("no_group_members") });
+        }
+        return (_jsx("div", { className: "flex flex-col", children: sortedMembers.map((member) => {
+                const menuItems = [
+                    {
+                        key: "leave-group",
+                        label: t("leave_group"),
+                        icon: _jsx(Icon, { icon: "logout-b", size: 16 }),
+                        onClick: handleLeaveGroup,
+                        danger: true,
+                    },
+                ];
+                return (_jsxs("div", { className: "flex items-center gap-3 px-4 py-3 border-b border-gray-100", 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-medium text-gray-900 truncate", children: member.nickname }), member.isCurrentUser && (_jsx("span", { className: "text-xs text-blue-500 shrink-0", children: t("current_account") }))] }), _jsx("p", { className: "text-sm text-gray-500 truncate", children: member.roleLabel })] }), member.isCurrentUser && (_jsx(Dropdown, { menu: { items: menuItems }, trigger: ["click"], placement: "bottomRight", children: _jsx("button", { type: "button", 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(_Fragment, { children: [_jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", onClick: handleOpenDrawer, disabled: disabled || !groupID, children: _jsx(Icon, { icon: "user-two-check-b", size: 22 }) }), _jsx(Drawer, { open: isOpen, onClose: handleCloseDrawer, mask: false, closeIcon: false, styles: {
+                    body: {
+                        padding: 0,
+                        height: "100%",
+                    },
+                }, getContainer: false, width: 360, children: _jsxs("div", { className: "flex flex-col h-full bg-white", children: [_jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b border-gray-100", children: [_jsx("span", { className: "text-lg font-medium", children: t("members") }), _jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", onClick: handleCloseDrawer, children: _jsx(Icon, { icon: "close-b", size: 22 }) })] }), _jsx("div", { className: "flex-1 overflow-y-auto", children: renderContent() })] }) }), _jsx(Modal, { centered: true, open: showLeaveConfirm, onOk: handleConfirmLeave, onCancel: () => setShowLeaveConfirm(false), title: t("leave_group_confirm_title"), okText: t("leave_group"), cancelText: t("cancel"), okType: "danger", confirmLoading: isLeaving, getContainer: false, children: _jsx("p", { children: t("leave_group_confirm_message") }) })] }));
+};
+export default GroupMembersDrawer;

package/dist/src/components/message/MediaPreviewIcon.d.ts

@@ -0,0 +1,7 @@
+import { MessageItem } from "@openim/wasm-client-sdk";
+interface MediaPreviewIconProps {
+    message?: MessageItem;
+}
+declare const MediaPreviewIcon: ({ message }: MediaPreviewIconProps) => import("react/jsx-runtime").JSX.Element | null;
+export default MediaPreviewIcon;
+//# sourceMappingURL=MediaPreviewIcon.d.ts.map

package/dist/src/components/message/MediaPreviewIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaPreviewIcon.d.ts","sourceRoot":"","sources":["../../../../src/components/message/MediaPreviewIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAe,MAAM,yBAAyB,CAAC;AAInE,UAAU,qBAAqB;IAC7B,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAED,QAAA,MAAM,gBAAgB,GAAI,aAAa,qBAAqB,mDA8B3D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/src/components/message/MediaPreviewIcon.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MessageType } from "@openim/wasm-client-sdk";
+import { Image } from "antd";
+import { documentIcon } from "../../assets/svg";
+const MediaPreviewIcon = ({ message }) => {
+    var _a, _b;
+    if (!message) {
+        return null;
+    }
+    if (message.contentType === MessageType.FileMessage) {
+        return _jsx("div", { children: documentIcon });
+    }
+    if (message.contentType === MessageType.PictureMessage) {
+        const imageUrl = ((_a = message.pictureElem.sourcePicture) === null || _a === void 0 ? void 0 : _a.url) ||
+            ((_b = message.pictureElem.snapshotPicture) === null || _b === void 0 ? void 0 : _b.url);
+        return (_jsx("div", { className: "w-10 h-10", children: _jsx(Image, { rootClassName: "message-image cursor-pointer", className: "rounded-md", src: imageUrl }) }));
+    }
+    if (message.contentType === MessageType.VideoMessage) {
+        const videoUrl = message.videoElem.videoUrl;
+        return (_jsx("div", { className: "flex flex-col justify-center items-center w-10 h-10 bg-black rounded-md", children: _jsx("video", { src: videoUrl, controls: false, autoPlay: false, muted: true }) }));
+    }
+    return null;
+};
+export default MediaPreviewIcon;

package/dist/src/components/message/MessageHeader.d.ts

@@ -0,0 +1,18 @@
+import { SessionStatus, SessionTag } from "../../types/chat";
+import { ISessionResponse } from "../../types/dto";
+interface MessageHeaderProps {
+    onClose?: () => void;
+    currentSession?: ISessionResponse;
+    isJoined?: boolean | null;
+}
+type SelectSessionValueType = SessionStatus | SessionTag;
+export interface SelectSessionOption {
+    label: string;
+    value: SelectSessionValueType;
+    tintColorClassname: string;
+    tintColorClassnameBg: string;
+    bgTintColorClassname: string;
+}
+declare const MessageHeader: ({ onClose, currentSession, isJoined, }: MessageHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export default MessageHeader;
+//# sourceMappingURL=MessageHeader.d.ts.map

package/dist/src/components/message/MessageHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/message/MessageHeader.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAGzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAM/C,UAAU,kBAAkB;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,cAAc,CAAC,EAAE,gBAAgB,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;CAC3B;AAED,KAAK,sBAAsB,GAAG,aAAa,GAAG,UAAU,CAAC;AAEzD,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,sBAAsB,CAAC;IAC9B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,oBAAoB,EAAE,MAAM,CAAC;CAC9B;AAED,QAAA,MAAM,aAAa,GAAI,wCAIpB,kBAAkB,4CA6MpB,CAAC;AAEF,eAAe,aAAa,CAAC"}