@droppii-org/chat-sdk 0.0.22 → 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/footer/ActionBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionBar.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/ActionBar.tsx"],"names":[],"mappings":"AAgEA,QAAA,MAAM,SAAS,+CA+Nd,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"ActionBar.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/ActionBar.tsx"],"names":[],"mappings":"AAgEA,QAAA,MAAM,SAAS,+CAiOd,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/components/message/footer/ActionBar.js

@@ -109,22 +109,24 @@ const ActionBar = () => {
                 return Upload.LIST_IGNORE;
             }
         }
-        return true;
+        return false;
     };
     const beforeUploadFile = (file) => {
         const isAllowed = documentTypes.includes(file.type);
         if (!isAllowed) {
             message.error(`${file.name} không đúng định dạng (chỉ hỗ trợ PDF, DOC, DOCX)`);
+            return Upload.LIST_IGNORE;
         }
-        return isAllowed;
+        return false;
     };
     const handleChange = (info) => {
+        var _a;
         let newList = [...info.fileList];
-        // Nếu file mới là tài liệu -> chỉ giữ 1 cái (file cuối)
         const lastFile = info.file;
         if (documentTypes.includes(lastFile.type || "")) {
-            newList = newList.filter((f) => documentTypes.includes(f.type || "") === false); // remove doc cũ
-            newList.push(lastFile); // add doc mới
+            newList = newList.filter((f) => !documentTypes.includes(f.type || ""));
+            const originFile = ((_a = lastFile.originFileObj) !== null && _a !== void 0 ? _a : lastFile);
+            newList.push(Object.assign(Object.assign({}, lastFile), { originFileObj: originFile }));
         }
         setListUploadFiles(newList);
     };

package/dist/components/message/footer/FilePreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilePreview.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/FilePreview.tsx"],"names":[],"mappings":"AAYA,eAAO,MAAM,YAAY,yCAoCxB,CAAC;AAEF,UAAU,cAAc;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,eAAe,GAAI,MAAM,MAAM,EAAE,UAAS,cAAmB,WAkBzE,CAAC;AAEF,QAAA,MAAM,WAAW,+CAgFhB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"FilePreview.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/FilePreview.tsx"],"names":[],"mappings":"AAYA,eAAO,MAAM,YAAY,yCAoCxB,CAAC;AAEF,UAAU,cAAc;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,eAAe,GAAI,MAAM,MAAM,EAAE,UAAS,cAAmB,WAkBzE,CAAC;AAEF,QAAA,MAAM,WAAW,+CAkFhB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/message/footer/FilePreview.js

@@ -31,9 +31,9 @@ const FilePreview = () => {
         setListUploadFiles(listUploadFiles.filter((f) => f.uid !== file.uid));
     };
     const renderFilePreview = useCallback((file) => {
-        var _a;
-        const isDocument = documentTypes.includes(file.type || "");
-        const isVideo = (_a = file.type) === null || _a === void 0 ? void 0 : _a.startsWith("video/");
+        var _a, _b;
+        const isDocument = documentTypes.includes(((_a = file === null || file === void 0 ? void 0 : file.originFileObj) === null || _a === void 0 ? void 0 : _a.type) || "");
+        const isVideo = (_b = file.type) === null || _b === void 0 ? void 0 : _b.startsWith("video/");
         let src = file.url;
         if (!src && file.originFileObj) {
             src = URL.createObjectURL(file.originFileObj);

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

@@ -18,6 +18,6 @@ const ImageMessageItem = (props) => {
         minHeight: `${adaptedHight}px`,
         minWidth: `${adaptedWidth}px`,
     };
-    return (_jsx(Spin, { spinning: isSending, children: _jsx("div", { className: "relative max-w-[200px]", style: minStyle, children: _jsx(Image, { rootClassName: "message-image cursor-pointer", className: "max-w-[200px] rounded-md", src: sourceUrl, preview: true, placeholder: _jsx("div", { style: minStyle, className: "flex items-center justify-center", children: _jsx(Spin, {}) }) }) }) }));
+    return (_jsx(Spin, { spinning: isSending, children: _jsx("div", { className: "relative max-w-[200px]", style: minStyle, children: _jsx(Image, { rootClassName: "message-image cursor-pointer", className: "rounded-md", src: sourceUrl, preview: true, placeholder: _jsx("div", { style: minStyle, className: "flex items-center justify-center", children: _jsx(Spin, {}) }) }) }) }));
 };
 export default ImageMessageItem;

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

@@ -15,6 +15,6 @@ const VideoMessageItem = (props) => {
         minHeight: `${adaptedHight}px`,
         minWidth: `${adaptedWidth}px`,
     };
-    return (_jsx(Spin, { spinning: isSending, children: _jsx("div", { className: "relative max-w-[200px]", style: minStyle, children: _jsx("video", { className: "max-w-[200px] rounded-md", src: sourceUrl, controls: true }) }) }));
+    return (_jsx(Spin, { spinning: isSending, children: _jsx("div", { className: "relative max-w-[200px]", style: minStyle, children: _jsx("video", { className: "rounded-md", src: sourceUrl, controls: true }) }) }));
 };
 export default VideoMessageItem;

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/hooks/message/useSendMessage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSendMessage.d.ts","sourceRoot":"","sources":["../../../src/hooks/message/useSendMessage.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,WAAW,EAGZ,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EACL,iBAAiB,EACjB,mBAAmB,EACnB,oBAAoB,EACpB,oBAAoB,EACrB,MAAM,kBAAkB,CAAC;AAQ1B,OAAO,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AAGlC,eAAO,MAAM,iBAAiB,GAAU,MAAM,MAAM,gCAanD,CAAC;AAEF,eAAO,MAAM,wBAAwB,GAAU,MAAM,oBAAoB,gCAaxE,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAU,iBAAiB,eAAe,gCAazE,CAAC;AAEF,eAAO,MAAM,wBAAwB,GAAU,MAAM,oBAAoB,gCAaxE,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAU,MAAM,mBAAmB,gCAatE,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,cAAc,WAAW;gDAiCjD;QACD,SAAS,EAAE,MAAM,CAAC;QAClB,QAAQ,EAAE,MAAM,CAAC;KAClB;wDAwBE;QACD,QAAQ,EAAE,MAAM,CAAC;QACjB,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,EAAE,UAAU,EAAE,CAAC;KACrB;CA4FJ,CAAC;AAEF,eAAO,MAAM,yBAAyB,GAAI,2CAIvC;IACD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B,KAmBM,iBACN,CAAC"}
+{"version":3,"file":"useSendMessage.d.ts","sourceRoot":"","sources":["../../../src/hooks/message/useSendMessage.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,WAAW,EAGZ,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EACL,iBAAiB,EACjB,mBAAmB,EACnB,oBAAoB,EACpB,oBAAoB,EACrB,MAAM,kBAAkB,CAAC;AAQ1B,OAAO,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AAGlC,eAAO,MAAM,iBAAiB,GAAU,MAAM,MAAM,gCAanD,CAAC;AAEF,eAAO,MAAM,wBAAwB,GAAU,MAAM,oBAAoB,gCAaxE,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAU,iBAAiB,eAAe,gCAazE,CAAC;AAEF,eAAO,MAAM,wBAAwB,GAAU,MAAM,oBAAoB,gCAaxE,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAU,MAAM,mBAAmB,gCAatE,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,cAAc,WAAW;gDAiCjD;QACD,SAAS,EAAE,MAAM,CAAC;QAClB,QAAQ,EAAE,MAAM,CAAC;KAClB;wDAwBE;QACD,QAAQ,EAAE,MAAM,CAAC;QACjB,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,EAAE,UAAU,EAAE,CAAC;KACrB;CAwIJ,CAAC;AAEF,eAAO,MAAM,yBAAyB,GAAI,2CAIvC;IACD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B,KAmBM,iBACN,CAAC"}

package/dist/hooks/message/useSendMessage.js

@@ -109,17 +109,31 @@ export const useSendMessage = (lastMessage) => {
             try {
                 if (isImage) {
                     const picInfo = await createPicBaseInfoFromFile(file);
+                    const baseInfo = {
+                        uuid: uuidv4(),
+                        type: file.type,
+                        size: file.size,
+                        width: picInfo.width,
+                        height: picInfo.height,
+                        url: URL.createObjectURL(file),
+                    };
                     const parsedImage = {
-                        sourcePicture: picInfo,
-                        bigPicture: picInfo,
-                        snapshotPicture: picInfo,
+                        sourcePicture: baseInfo,
+                        bigPicture: baseInfo,
+                        snapshotPicture: baseInfo,
                         sourcePath: "",
                         file: file,
                     };
                     const imageMessage = await createImageMessageByFile(parsedImage);
                     if (!imageMessage)
                         continue;
-                    messageList.push(imageMessage);
+                    const extendMessageInfo = generateExtendMessageInfo({
+                        currentUserID: (user === null || user === void 0 ? void 0 : user.userID) || "",
+                        lastMessage: messageList.length > 0
+                            ? messageList[messageList.length - 1]
+                            : lastMessage,
+                    });
+                    messageList.push(Object.assign(Object.assign({}, imageMessage), { ex: JSON.stringify(extendMessageInfo) || "{}" }));
                 }
                 else if (isVideo) {
                     const videoBaseInfo = await createVideoBaseInfoFromFile(file);
@@ -142,7 +156,13 @@ export const useSendMessage = (lastMessage) => {
                     });
                     if (!videoMessage)
                         continue;
-                    messageList.push(videoMessage);
+                    const extendMessageInfo = generateExtendMessageInfo({
+                        currentUserID: (user === null || user === void 0 ? void 0 : user.userID) || "",
+                        lastMessage: messageList.length > 0
+                            ? messageList[messageList.length - 1]
+                            : lastMessage,
+                    });
+                    messageList.push(Object.assign(Object.assign({}, videoMessage), { ex: JSON.stringify(extendMessageInfo) || "{}" }));
                 }
                 else if (isDocument) {
                     const fileMessage = await createFileMessageByFile({
@@ -156,28 +176,36 @@ export const useSendMessage = (lastMessage) => {
                     });
                     if (!fileMessage)
                         continue;
-                    messageList.push(fileMessage);
+                    const extendMessageInfo = generateExtendMessageInfo({
+                        currentUserID: (user === null || user === void 0 ? void 0 : user.userID) || "",
+                        lastMessage: messageList.length > 0
+                            ? messageList[messageList.length - 1]
+                            : lastMessage,
+                    });
+                    messageList.push(Object.assign(Object.assign({}, fileMessage), { ex: JSON.stringify(extendMessageInfo) || "{}" }));
                 }
             }
             catch (err) {
                 console.error("Lỗi xử lý tin nhắn:", err);
             }
         }
-        const mergerMsgParams = {
-            messageList,
-            title: plainText,
-            summaryList: [],
-        };
-        const mergerMessage = await createMergerMessage(mergerMsgParams);
-        if (!mergerMessage)
-            return;
-        const extendMessageInfo = generateExtendMessageInfo({
-            richText,
-            currentUserID: (user === null || user === void 0 ? void 0 : user.userID) || "",
-            lastMessage,
-        });
-        const messageItem = Object.assign(Object.assign({}, mergerMessage), { ex: JSON.stringify(extendMessageInfo) || "{}" });
-        sendMessage(messageItem);
+        if (!!plainText && plainText.trim() !== "") {
+            const extendMessageInfo = generateExtendMessageInfo({
+                richText,
+                currentUserID: (user === null || user === void 0 ? void 0 : user.userID) || "",
+                lastMessage: messageList.length > 0
+                    ? messageList[messageList.length - 1]
+                    : lastMessage,
+            });
+            const textMessage = await createTextMessage(plainText);
+            if (!textMessage)
+                return;
+            const messageItem = Object.assign(Object.assign({}, textMessage), { ex: JSON.stringify(extendMessageInfo) || "{}" });
+            messageList.push(messageItem);
+        }
+        for (const message of messageList) {
+            await sendMessage(message);
+        }
     }, [recvID, groupID, lastMessage, sendMessage]);
     return {
         sendTextMessage,
@@ -201,28 +229,14 @@ export const generateExtendMessageInfo = ({ richText, currentUserID, lastMessage
         },
     };
 };
-const createPicBaseInfoFromFile = (file, url = "") => {
-    return new Promise((resolve, reject) => {
-        const img = new Image();
-        const objectUrl = URL.createObjectURL(file);
-        img.onload = () => {
-            URL.revokeObjectURL(objectUrl);
-            resolve({
-                uuid: uuidv4(),
-                type: file.type,
-                size: file.size,
-                width: img.width,
-                height: img.height,
-                url: url, // để trống nếu không cần dùng
-            });
-        };
-        img.onerror = (err) => {
-            URL.revokeObjectURL(objectUrl);
-            reject(err);
-        };
-        img.src = objectUrl;
-    });
-};
+const createPicBaseInfoFromFile = (file) => new Promise((resolve, reject) => {
+    const _URL = window.URL || window.webkitURL;
+    const img = new Image();
+    img.onload = function () {
+        resolve(img);
+    };
+    img.src = _URL.createObjectURL(file);
+});
 function createVideoBaseInfoFromFile(file) {
     return new Promise((resolve, reject) => {
         try {

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.22",
+  "version": "0.0.24",
   "description": "Droppii React Chat SDK",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",