@droppii-org/chat-sdk
Version:
Droppii React Chat SDK
36 lines (35 loc) • 2.65 kB
JavaScript
"use client";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { FloatButton, Drawer, Popover } from "antd";
import { MessageOutlined, CloseOutlined } from "@ant-design/icons";
import MessageList from "../message/MessageList";
import useConversationStore from "../../store/conversation";
import { useIsMobile } from "../../hooks/common/useIsMobile";
import { useBoolean } from "ahooks";
const ChatBubble = ({ className }) => {
const isMobile = useIsMobile();
const selectedConversationId = useConversationStore((state) => state.selectedConversationId);
const searchClientMsgID = useConversationStore((state) => state.searchClientMsgID);
const unreadCount = useConversationStore((state) => { var _a; return ((_a = state.conversationData) === null || _a === void 0 ? void 0 : _a.unreadCount) || 0; });
const displayUnread = unreadCount > 99 ? "99+" : unreadCount;
const [isOpen, { setFalse: setOpenFalse, toggle: toggleChat }] = useBoolean(false);
if (isMobile) {
return (_jsxs(_Fragment, { children: [_jsx(FloatButton, { icon: isOpen ? _jsx(CloseOutlined, {}) : _jsx(MessageOutlined, {}), type: "primary", style: {
right: 24,
bottom: 24,
width: 60,
height: 60,
}, onClick: toggleChat, className: className, badge: { count: displayUnread, color: "red" } }), _jsx(Drawer, { placement: "right", onClose: setOpenFalse, open: isOpen, mask: true, closable: false, styles: {
body: { padding: 0 },
}, classNames: {
wrapper: "!z-[9999]",
}, width: "100%", push: false, children: _jsx(MessageList, { conversationId: selectedConversationId, className: "flex-1", onClose: setOpenFalse, searchClientMsgID: searchClientMsgID }) })] }));
}
return (_jsx(Popover, { placement: "topLeft", trigger: "click", open: isOpen, destroyOnHidden: true, content: () => (_jsx("div", { className: "w-[400px] h-[600px]", children: _jsx(MessageList, { conversationId: selectedConversationId, className: "flex-1", onClose: setOpenFalse, searchClientMsgID: searchClientMsgID }) })), styles: { body: { padding: 0 } }, children: _jsx(FloatButton, { icon: isOpen ? _jsx(CloseOutlined, {}) : _jsx(MessageOutlined, {}), type: "primary", style: {
right: 24,
bottom: 24,
width: 60,
height: 60,
}, className: className, badge: { count: displayUnread, color: "red" }, onClick: toggleChat }) }));
};
export default ChatBubble;