@droppii-org/chat-sdk 0.0.23 → 0.0.24

package/dist/components/chatBubble/ChatBubble.d.ts

@@ -1,10 +1,6 @@
-import { SessionType } from "@openim/wasm-client-sdk";
 interface ChatBubbleProps {
-    conversationId: string;
-    sourceID: string;
-    sessionType: SessionType;
     className?: string;
 }
-declare const ChatBubble: ({ conversationId, sourceID, sessionType, className, }: ChatBubbleProps) => import("react/jsx-runtime").JSX.Element;
+declare const ChatBubble: ({ className }: ChatBubbleProps) => import("react/jsx-runtime").JSX.Element;
 export default ChatBubble;
 //# sourceMappingURL=ChatBubble.d.ts.map

package/dist/components/chatBubble/ChatBubble.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatBubble.d.ts","sourceRoot":"","sources":["../../../src/components/chatBubble/ChatBubble.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAGtD,UAAU,eAAe;IACvB,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,WAAW,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,UAAU,GAAI,uDAKjB,eAAe,4CAmDjB,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"ChatBubble.d.ts","sourceRoot":"","sources":["../../../src/components/chatBubble/ChatBubble.tsx"],"names":[],"mappings":"AAOA,UAAU,eAAe;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,UAAU,GAAI,eAAe,eAAe,4CAsDjD,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/chatBubble/ChatBubble.js

@@ -4,12 +4,10 @@ import { useState } from "react";
 import { FloatButton, Drawer } from "antd";
 import { MessageOutlined, CloseOutlined } from "@ant-design/icons";
 import MessageList from "../message/MessageList";
-import { useConversationDetail } from "../../hooks/conversation/useConversation";
-const ChatBubble = ({ conversationId, sourceID, sessionType, className, }) => {
-    const { conversationDetail } = useConversationDetail({
-        sourceID,
-        sessionType,
-    });
+import useConversationStore from "../../hooks/conversation/useConversationStore";
+const ChatBubble = ({ className }) => {
+    const conversationDetail = useConversationStore((state) => state.conversationData);
+    const selectedThreadId = useConversationStore((state) => state.selectedThreadId);
     const [isOpen, setIsOpen] = useState(false);
     const toggleChat = () => {
         setIsOpen(!isOpen);
@@ -23,6 +21,6 @@ const ChatBubble = ({ conversationId, sourceID, sessionType, className, }) => {
                     body: { padding: 0 },
                 }, classNames: {
                     wrapper: "!z-[9999]",
-                }, children: _jsx(MessageList, { conversationId: conversationId, conversationData: conversationDetail, className: "flex-1", onClose: () => setIsOpen(false) }) })] }));
+                }, children: _jsx(MessageList, { conversationId: selectedThreadId, conversationData: conversationDetail, className: "flex-1", onClose: () => setIsOpen(false) }) })] }));
 };
 export default ChatBubble;

package/dist/components/conversation/DeskConversationList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DeskConversationList.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/DeskConversationList.tsx"],"names":[],"mappings":"AAuGA,UAAU,yBAAyB;IACjC,oBAAoB,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,oBAAoB,GAAI,sCAG3B,yBAAyB,4CA8L3B,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"DeskConversationList.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/DeskConversationList.tsx"],"names":[],"mappings":"AAqGA,UAAU,yBAAyB;IACjC,oBAAoB,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,oBAAoB,GAAI,sCAG3B,yBAAyB,4CAgM3B,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/dist/components/conversation/DeskConversationList.js

@@ -64,8 +64,7 @@ const formatTimestamp = (timestamp) => {
 };
 // Transform API data to UI-friendly format
 const transformConversationData = (apiData, currentUserId) => {
-    return apiData.map((conv) => (Object.assign(Object.assign({}, conv), { id: conv.conversationID, threadId: conv.conversationID, name: conv.showName || "Unknown User", username: conv.userID || conv.groupID || "", avatar: conv.faceURL ||
-            "https://i.pinimg.com/736x/55/e5/ed/55e5edbb1a5b5f6e4f3cefc98de629ca.jpg", lastMessage: parseLatestMessage(conv.latestMsg, currentUserId), timestamp: formatTimestamp(conv.latestMsgSendTime), unreadCount: conv.unreadCount, isOnline: true, source: conv.conversationType === 3 ? "group" : "direct" })));
+    return apiData.map((conv) => (Object.assign(Object.assign({}, conv), { id: conv.conversationID, threadId: conv.conversationID, name: conv.showName || "Unknown User", username: conv.userID || conv.groupID || "", avatar: conv.faceURL || "", lastMessage: parseLatestMessage(conv.latestMsg, currentUserId), timestamp: formatTimestamp(conv.latestMsgSendTime), unreadCount: conv.unreadCount, isOnline: true, source: conv.conversationType === 3 ? "group" : "direct" })));
 };
 const DeskConversationList = ({ onConversationSelect, className = "", }) => {
     const [searchQuery, setSearchQuery] = useState("");
@@ -125,7 +124,7 @@ const DeskConversationList = ({ onConversationSelect, className = "", }) => {
     }, [selectedThreadId, onSetSelectedSourceId]);
     return (_jsxs("div", { className: `flex flex-col h-full bg-white border-r border-gray-200 w-[320px] ${className}`, children: [_jsx("div", { className: "p-3 border-b border-gray-200", children: _jsx(Input, { placeholder: "T\u00ECm ki\u1EBFm", prefix: _jsx(Icon, { icon: "search-o", size: 18, className: "text-gray-400" }), value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), className: "rounded-lg" }) }), _jsxs("div", { className: "flex-1 overflow-y-auto", children: [filteredConversations.map((conversation) => (_jsxs("div", { onClick: () => handleConversationClick(conversation), className: `relative p-3 border-b border-gray-100 hover:bg-gray-50 cursor-pointer transition-colors ${selectedThreadId === conversation.threadId
                             ? "bg-blue-50"
-                            : "bg-white"}`, children: [selectedThreadId === conversation.threadId && (_jsx("div", { className: "absolute left-0 top-0 bottom-0 w-1 bg-blue-500" })), _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "relative flex-shrink-0", children: _jsx(Badge, { dot: conversation.isOnline, status: conversation.isOnline ? "success" : "default", offset: [-2, 36], children: _jsx(Avatar, { size: 48, src: conversation.avatar, alt: conversation.name }) }) }), _jsx("div", { className: "flex-1 min-w-0", children: _jsxs("div", { className: "flex items-start justify-between", children: [_jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("h3", { className: "font-semibold text-gray-900 text-sm truncate", children: conversation.name }), _jsx("p", { className: "text-xs text-gray-500 truncate mt-0.5", children: conversation.lastMessage })] }), _jsxs("div", { className: "flex flex-col items-end gap-1 ml-2", children: [_jsx("span", { className: "text-xs text-gray-400", children: conversation.timestamp }), _jsx("div", { className: "flex items-center gap-1", children: conversation.unreadCount > 0 && (_jsx(Badge, { count: conversation.unreadCount })) })] })] }) })] })] }, conversation.id))), filteredConversations.length === 0 && (_jsx("div", { className: "flex items-center justify-center py-12", children: _jsx(Empty, { image: _jsx(Icon, { icon: "chat-square-b", size: 48, className: "text-gray-300" }), description: _jsxs("div", { children: [_jsx("p", { className: "text-lg font-medium mb-2 text-gray-500", children: "Kh\u00F4ng t\u00ECm th\u1EA5y cu\u1ED9c tr\u00F2 chuy\u1EC7n" }), _jsx("p", { className: "text-sm text-gray-400", children: searchQuery
+                            : "bg-white"}`, children: [selectedThreadId === conversation.threadId && (_jsx("div", { className: "absolute left-0 top-0 bottom-0 w-1 bg-blue-500" })), _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "relative flex-shrink-0", children: _jsx(Badge, { dot: conversation.isOnline, status: conversation.isOnline ? "success" : "default", offset: [-2, 36], children: _jsx(Avatar, { size: 48, src: conversation.avatar, alt: conversation.name, children: conversation.name.charAt(0).toUpperCase() }) }) }), _jsx("div", { className: "flex-1 min-w-0", children: _jsxs("div", { className: "flex items-start justify-between", children: [_jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("h3", { className: "font-semibold text-gray-900 text-sm truncate", children: conversation.name }), _jsx("p", { className: "text-xs text-gray-500 truncate mt-0.5", children: conversation.lastMessage })] }), _jsxs("div", { className: "flex flex-col items-end gap-1 ml-2", children: [_jsx("span", { className: "text-xs text-gray-400", children: conversation.timestamp }), _jsx("div", { className: "flex items-center gap-1", children: conversation.unreadCount > 0 && (_jsx(Badge, { count: conversation.unreadCount })) })] })] }) })] })] }, conversation.id))), filteredConversations.length === 0 && (_jsx("div", { className: "flex items-center justify-center py-12", children: _jsx(Empty, { image: _jsx(Icon, { icon: "chat-square-b", size: 48, className: "text-gray-300" }), description: _jsxs("div", { children: [_jsx("p", { className: "text-lg font-medium mb-2 text-gray-500", children: "Kh\u00F4ng t\u00ECm th\u1EA5y cu\u1ED9c tr\u00F2 chuy\u1EC7n" }), _jsx("p", { className: "text-sm text-gray-400", children: searchQuery
                                             ? "Thử tìm kiếm với từ khóa khác"
                                             : "Chưa có cuộc trò chuyện nào" })] }) }) }))] })] }));
 };

package/dist/components/message/item/index.d.ts

@@ -2,6 +2,6 @@ import { GroupMessageItem } from "../../../types/chat";
 interface MessageItemProps {
     groupMessage: GroupMessageItem;
 }
-declare const MessageItem: ({ groupMessage }: MessageItemProps) => import("react/jsx-runtime").JSX.Element;
+declare const MessageItem: ({ groupMessage }: MessageItemProps) => import("react/jsx-runtime").JSX.Element | null;
 export default MessageItem;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/message/item/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAkBvD,UAAU,gBAAgB;IACxB,YAAY,EAAE,gBAAgB,CAAC;CAChC;AACD,QAAA,MAAM,WAAW,GAAI,kBAAkB,gBAAgB,4CAiGtD,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAkBvD,UAAU,gBAAgB;IACxB,YAAY,EAAE,gBAAgB,CAAC;CAChC;AAiBD,QAAA,MAAM,WAAW,GAAI,kBAAkB,gBAAgB,mDA2GtD,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/message/item/index.js

@@ -10,10 +10,25 @@ import ImageMessageItem from "./ImageMessage";
 import FileMessageItem from "./FileMessage";
 import VideoMessageItem from "./VideoMessage";
 dayjs.extend(isToday);
+const visibleTypeMessage = [
+    MessageType.TextMessage,
+    MessageType.PictureMessage,
+    MessageType.VoiceMessage,
+    MessageType.VideoMessage,
+    MessageType.FileMessage,
+    MessageType.AtTextMessage,
+    MessageType.MergeMessage,
+    MessageType.CardMessage,
+    MessageType.LocationMessage,
+    MessageType.CustomMessage,
+    MessageType.QuoteMessage,
+    MessageType.FaceMessage,
+];
 const MessageItem = ({ groupMessage }) => {
     const { user } = useChatContext();
     const messagesInGroup = (groupMessage === null || groupMessage === void 0 ? void 0 : groupMessage.messages) || [];
     const isToday = dayjs(groupMessage === null || groupMessage === void 0 ? void 0 : groupMessage.sendTime).isToday();
+    const isVisibleGroup = messagesInGroup === null || messagesInGroup === void 0 ? void 0 : messagesInGroup.some((message) => visibleTypeMessage.includes(message === null || message === void 0 ? void 0 : message.contentType));
     const renderMessageByType = (message) => {
         switch (message === null || message === void 0 ? void 0 : message.contentType) {
             case MessageType.TextMessage:
@@ -28,12 +43,16 @@ const MessageItem = ({ groupMessage }) => {
                 return _jsx(TextMessageItem, { message: message });
         }
     };
+    if (!isVisibleGroup)
+        return null;
     return (_jsxs("div", { className: "flex flex-col gap-2 my-4 mx-3 sm:mx-4", children: [_jsx("div", { className: "flex justify-center", children: _jsx("span", { className: "text-xs text-gray-600 text-center bg-neutral-100 px-2 py-1 rounded-full", children: dayjs(groupMessage === null || groupMessage === void 0 ? void 0 : groupMessage.sendTime).format(isToday ? "HH:mm" : "HH:mm, DD MMMM") }) }), messagesInGroup === null || messagesInGroup === void 0 ? void 0 : messagesInGroup.map((message, messageIndex) => {
                 var _a, _b, _c, _d;
+                if (!visibleTypeMessage.includes(message === null || message === void 0 ? void 0 : message.contentType))
+                    return null;
                 const isMine = (message === null || message === void 0 ? void 0 : message.sendID) === (user === null || user === void 0 ? void 0 : user.userID);
                 const showAvatar = messageIndex === messagesInGroup.length - 1;
                 const showSenderName = messageIndex === 0 && (message === null || message === void 0 ? void 0 : message.sessionType) === SessionType.Group;
-                return (_jsx("div", { className: clsx("flex", isMine ? "justify-end" : "justify-start"), children: _jsxs("div", { className: clsx("flex flex-1 items-end gap-2", isMine ? "justify-end" : "justify-start"), children: [!isMine && (_jsx("div", { className: "flex items-center justify-center w-[32px] h-[32px]", children: showAvatar && (_jsx(Avatar, { children: ((_b = (_a = message === null || message === void 0 ? void 0 : message.senderNickname) === null || _a === void 0 ? void 0 : _a.charAt) === null || _b === void 0 ? void 0 : _b.call(_a, 0)) || "A" })) })), _jsxs("div", { className: "flex flex-col items-end flex-[0.8]", children: [!isMine && showSenderName && (_jsx("span", { className: "text-xs text-gray-500 mb-1 px-3", children: message === null || message === void 0 ? void 0 : message.senderNickname })), _jsxs("div", { className: clsx("px-3 py-2 rounded-2xl max-w-full break-words flex flex-col flex-1 text-gray-900 gap-1", isMine ? "bg-blue-100" : "bg-gray-100"), children: [(message === null || message === void 0 ? void 0 : message.contentType) === MessageType.MergeMessage ? (_jsxs("div", { children: [(_d = (_c = message === null || message === void 0 ? void 0 : message.mergeElem) === null || _c === void 0 ? void 0 : _c.multiMessage) === null || _d === void 0 ? void 0 : _d.map((item) => {
+                return (_jsx("div", { className: clsx("flex", isMine ? "justify-end" : "justify-start"), children: _jsxs("div", { className: clsx("flex flex-1 items-end gap-2", isMine ? "justify-end" : "justify-start"), children: [!isMine && (_jsx("div", { className: "flex items-center justify-center w-[32px] h-[32px]", children: showAvatar && (_jsx(Avatar, { children: ((_b = (_a = message === null || message === void 0 ? void 0 : message.senderNickname) === null || _a === void 0 ? void 0 : _a.charAt) === null || _b === void 0 ? void 0 : _b.call(_a, 0)) || "A" })) })), _jsxs("div", { className: clsx("flex flex-col flex-[0.8]", isMine ? "items-end" : "items-start"), children: [!isMine && showSenderName && (_jsx("span", { className: "text-xs text-gray-500 mb-1 px-3", children: message === null || message === void 0 ? void 0 : message.senderNickname })), _jsxs("div", { className: clsx("px-3 py-2 rounded-2xl max-w-full break-words flex flex-col flex-1 text-gray-900 gap-1", isMine ? "bg-blue-100" : "bg-gray-100"), children: [(message === null || message === void 0 ? void 0 : message.contentType) === MessageType.MergeMessage ? (_jsxs("div", { children: [(_d = (_c = message === null || message === void 0 ? void 0 : message.mergeElem) === null || _c === void 0 ? void 0 : _c.multiMessage) === null || _d === void 0 ? void 0 : _d.map((item) => {
                                                         return renderMessageByType(item);
                                                     }), (message === null || message === void 0 ? void 0 : message.textElem) && (_jsx(TextMessageItem, { message: message }))] })) : (renderMessageByType(message)), _jsx("span", { className: clsx("text-xs text-gray-500 text-right text-gray-500"), children: dayjs(message === null || message === void 0 ? void 0 : message.sendTime).format("HH:mm") })] })] })] }) }, message === null || message === void 0 ? void 0 : message.clientMsgID));
             })] }, groupMessage === null || groupMessage === void 0 ? void 0 : groupMessage.groupMessageID));

package/dist/screens/chatBubble/index.d.ts

@@ -1,6 +1,5 @@
 import { SessionType } from "@openim/wasm-client-sdk";
 interface DChatBubbleProps {
-    conversationId: string;
     sourceID: string;
     sessionType: SessionType;
     className?: string;

package/dist/screens/chatBubble/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/screens/chatBubble/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAKtD,UAAU,gBAAgB;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,WAAW,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,WAAW,GAAI,OAAO,gBAAgB,mDAY3C,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/screens/chatBubble/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAQtD,UAAU,gBAAgB;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,WAAW,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,WAAW,GAAI,OAAO,gBAAgB,mDAsB3C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/screens/chatBubble/index.js

@@ -2,11 +2,26 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import ChatBubble from "../../components/chatBubble/ChatBubble";
 import { useChatContext } from "../../context/ChatContext";
 import { ConnectStatus } from "../../types/chat";
+import { useConversationDetail } from "../../hooks/conversation/useConversation";
+import useConversationStore from "../../hooks/conversation/useConversationStore";
+import { useEffect } from "react";
 const DChatBubble = (props) => {
-    const { conversationId, sourceID, sessionType, className } = props;
+    const { sourceID, sessionType, className } = props;
     const { connectStatus } = useChatContext();
+    const { conversationDetail } = useConversationDetail({
+        sourceID,
+        sessionType,
+    });
+    const setSelectedThreadId = useConversationStore((state) => state.setSelectedThreadId);
+    const setConversationData = useConversationStore((state) => state.setConversationData);
+    useEffect(() => {
+        if (!conversationDetail)
+            return;
+        setSelectedThreadId(conversationDetail.conversationID);
+        setConversationData(conversationDetail);
+    }, [conversationDetail]);
     if (connectStatus !== ConnectStatus.Connected)
         return null;
-    return (_jsx(ChatBubble, { conversationId: conversationId, sourceID: sourceID, sessionType: sessionType, className: className }));
+    return _jsx(ChatBubble, { className: className });
 };
 export default DChatBubble;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@droppii-org/chat-sdk",
-  "version": "0.0.23",
+  "version": "0.0.24",
   "description": "Droppii React Chat SDK",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",