mr-chat-bird 1.0.9 → 1.0.11

package/dist/index.js

@@ -38,7 +38,7 @@ module.exports = __toCommonJS(index_exports);
 var import_styles = require("@mantine/core/styles.css");
 var import_styles2 = require("@mantine/tiptap/styles.css");
 var import_styles3 = require("@mantine/notifications/styles.css");
-var import_react10 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 var import_core9 = require("@mantine/core");
 var import_notifications2 = require("@mantine/notifications");
 
@@ -331,7 +331,7 @@ function ReduxProvider({ children }) {
 }
 
 // src/store/socket/index.tsx
-var import_react2 = require("react");
+var import_react2 = __toESM(require("react"));
 
 // src/lib/socket.ts
 var import_socket = require("socket.io-client");
@@ -374,7 +374,7 @@ function SocketProvider({ children, userId }) {
       }
     };
   }, [userId]);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
+  return /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, children);
 }
 
 // src/components/ChatUserList/ChatUserList.tsx
@@ -387,7 +387,7 @@ var import_core7 = require("@mantine/core");
 var import_icons_react3 = require("@tabler/icons-react");
 
 // src/components/RichTextEditor/RichTextEditor.tsx
-var import_react4 = require("react");
+var import_react4 = __toESM(require("react"));
 var import_icons_react = require("@tabler/icons-react");
 var import_extension_highlight = __toESM(require("@tiptap/extension-highlight"));
 var import_extension_subscript = __toESM(require("@tiptap/extension-subscript"));
@@ -4752,7 +4752,7 @@ var import_tiptap = require("@mantine/tiptap");
 var import_core5 = require("@mantine/core");
 
 // src/components/EmojiPickerPopover/EmojiPickerPopover.tsx
-var import_react3 = require("react");
+var import_react3 = __toESM(require("react"));
 var import_core3 = require("@mantine/core");
 var import_data = __toESM(require("@emoji-mart/data"));
 var EmojiPicker = (0, import_react3.lazy)(() => import("@emoji-mart/react"));
@@ -4764,7 +4764,7 @@ function EmojiPickerPopover({
   position = "bottom-start"
 }) {
   const [opened, setOpened] = (0, import_react3.useState)(false);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ import_react3.default.createElement(
     import_core3.Popover,
     {
       opened,
@@ -4777,18 +4777,18 @@ function EmojiPickerPopover({
       trapFocus: false,
       closeOnEscape: true
     },
-    /* @__PURE__ */ React.createElement(import_core3.Popover.Target, null, (0, import_react3.cloneElement)(action, {
+    /* @__PURE__ */ import_react3.default.createElement(import_core3.Popover.Target, null, (0, import_react3.cloneElement)(action, {
       onClick: (e) => {
         action.props?.onClick?.(e);
         setOpened((prev) => !prev);
       }
     })),
-    /* @__PURE__ */ React.createElement(import_core3.Popover.Dropdown, { p: 0 }, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ import_react3.default.createElement(import_core3.Popover.Dropdown, { p: 0 }, /* @__PURE__ */ import_react3.default.createElement(
       import_react3.Suspense,
       {
-        fallback: /* @__PURE__ */ React.createElement("div", { style: { padding: 12, width: 320 } }, /* @__PURE__ */ React.createElement(import_core3.Skeleton, { height: 280, radius: "md" }))
+        fallback: /* @__PURE__ */ import_react3.default.createElement("div", { style: { padding: 12, width: 320 } }, /* @__PURE__ */ import_react3.default.createElement(import_core3.Skeleton, { height: 280, radius: "md" }))
       },
-      /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ import_react3.default.createElement(
         EmojiPicker,
         {
           previewPosition: "none",
@@ -4886,15 +4886,15 @@ function CustomRichTextEditor({
     editor.commands.focus();
     setCharCount(0);
   };
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement(
     import_tiptap.RichTextEditor,
     {
       editor,
       w: "100%",
       className: "mrchat-richTextEditorContainer"
     },
-    /* @__PURE__ */ React.createElement(import_tiptap.RichTextEditor.Content, null),
-    /* @__PURE__ */ React.createElement(import_tiptap.RichTextEditor.Toolbar, { sticky: true, stickyOffset: "var(--docs-header-height)" }, /* @__PURE__ */ React.createElement("div", { className: "mrchat-mainActionContainer" }, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ import_react4.default.createElement(import_tiptap.RichTextEditor.Content, null),
+    /* @__PURE__ */ import_react4.default.createElement(import_tiptap.RichTextEditor.Toolbar, { sticky: true, stickyOffset: "var(--docs-header-height)" }, /* @__PURE__ */ import_react4.default.createElement("div", { className: "mrchat-mainActionContainer" }, /* @__PURE__ */ import_react4.default.createElement(
       EmojiPickerPopover,
       {
         onSelect: (emoji) => {
@@ -4905,7 +4905,7 @@ function CustomRichTextEditor({
             }
           }).run();
         },
-        action: /* @__PURE__ */ React.createElement(
+        action: /* @__PURE__ */ import_react4.default.createElement(
           import_core5.ActionIcon,
           {
             radius: "lg",
@@ -4914,10 +4914,10 @@ function CustomRichTextEditor({
             color: "#333",
             className: "mrchat-mainActionEmojiIcon"
           },
-          /* @__PURE__ */ React.createElement(AddReaction_default, null)
+          /* @__PURE__ */ import_react4.default.createElement(AddReaction_default, null)
         )
       }
-    ), /* @__PURE__ */ React.createElement(
+    ), /* @__PURE__ */ import_react4.default.createElement(
       import_core5.ActionIcon,
       {
         radius: "lg",
@@ -4927,8 +4927,8 @@ function CustomRichTextEditor({
         className: "mrchat-mainTextFormatIcon",
         onClick: () => setShowToolbar((prev) => !prev)
       },
-      /* @__PURE__ */ React.createElement(TextFormat_default, null)
-    ), /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ import_react4.default.createElement(TextFormat_default, null)
+    ), /* @__PURE__ */ import_react4.default.createElement(
       import_core5.ActionIcon,
       {
         radius: "lg",
@@ -4937,15 +4937,15 @@ function CustomRichTextEditor({
         className: "mrchat-mainSendMsgIcon",
         onClick: () => handleSubmitMsg()
       },
-      /* @__PURE__ */ React.createElement(import_icons_react.IconSend, { size: 18 })
-    )), showToolbar && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(import_tiptap.RichTextEditor.ControlsGroup, null, /* @__PURE__ */ React.createElement(import_tiptap.RichTextEditor.Bold, null), /* @__PURE__ */ React.createElement(import_tiptap.RichTextEditor.Italic, null), /* @__PURE__ */ React.createElement(import_tiptap.RichTextEditor.Underline, null), /* @__PURE__ */ React.createElement(import_tiptap.RichTextEditor.Strikethrough, null), /* @__PURE__ */ React.createElement(import_tiptap.RichTextEditor.Code, null), /* @__PURE__ */ React.createElement(import_tiptap.RichTextEditor.Highlight, null)), /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ import_react4.default.createElement(import_icons_react.IconSend, { size: 18 })
+    )), showToolbar && /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement(import_tiptap.RichTextEditor.ControlsGroup, null, /* @__PURE__ */ import_react4.default.createElement(import_tiptap.RichTextEditor.Bold, null), /* @__PURE__ */ import_react4.default.createElement(import_tiptap.RichTextEditor.Italic, null), /* @__PURE__ */ import_react4.default.createElement(import_tiptap.RichTextEditor.Underline, null), /* @__PURE__ */ import_react4.default.createElement(import_tiptap.RichTextEditor.Strikethrough, null), /* @__PURE__ */ import_react4.default.createElement(import_tiptap.RichTextEditor.Code, null), /* @__PURE__ */ import_react4.default.createElement(import_tiptap.RichTextEditor.Highlight, null)), /* @__PURE__ */ import_react4.default.createElement(
       import_tiptap.RichTextEditor.ControlsGroup,
       {
         className: "mrchat-secondRichTextEditorToolBar"
       },
-      /* @__PURE__ */ React.createElement(import_tiptap.RichTextEditor.BulletList, null),
-      /* @__PURE__ */ React.createElement(import_tiptap.RichTextEditor.OrderedList, null),
-      /* @__PURE__ */ React.createElement(import_core5.Menu, { trigger: "hover", openDelay: 200 }, /* @__PURE__ */ React.createElement(import_core5.Menu.Target, null, /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ import_react4.default.createElement(import_tiptap.RichTextEditor.BulletList, null),
+      /* @__PURE__ */ import_react4.default.createElement(import_tiptap.RichTextEditor.OrderedList, null),
+      /* @__PURE__ */ import_react4.default.createElement(import_core5.Menu, { trigger: "hover", openDelay: 200 }, /* @__PURE__ */ import_react4.default.createElement(import_core5.Menu.Target, null, /* @__PURE__ */ import_react4.default.createElement(
         import_core5.ActionIcon,
         {
           variant: "outline",
@@ -4953,35 +4953,35 @@ function CustomRichTextEditor({
           color: "#495057",
           className: "mrchat-customToolActionItem"
         },
-        /* @__PURE__ */ React.createElement(import_icons_react.IconAlignLeft, { size: 16, stroke: 1.5 })
-      )), /* @__PURE__ */ React.createElement(import_core5.Menu.Dropdown, null, /* @__PURE__ */ React.createElement(
+        /* @__PURE__ */ import_react4.default.createElement(import_icons_react.IconAlignLeft, { size: 16, stroke: 1.5 })
+      )), /* @__PURE__ */ import_react4.default.createElement(import_core5.Menu.Dropdown, null, /* @__PURE__ */ import_react4.default.createElement(
         import_core5.Menu.Item,
         {
           onClick: () => editor?.chain().focus().setTextAlign("left").run()
         },
-        /* @__PURE__ */ React.createElement(import_icons_react.IconAlignLeft, { size: 14 })
-      ), /* @__PURE__ */ React.createElement(
+        /* @__PURE__ */ import_react4.default.createElement(import_icons_react.IconAlignLeft, { size: 14 })
+      ), /* @__PURE__ */ import_react4.default.createElement(
         import_core5.Menu.Item,
         {
           onClick: () => editor?.chain().focus().setTextAlign("center").run()
         },
-        /* @__PURE__ */ React.createElement(import_icons_react.IconAlignCenter, { size: 14 })
-      ), /* @__PURE__ */ React.createElement(
+        /* @__PURE__ */ import_react4.default.createElement(import_icons_react.IconAlignCenter, { size: 14 })
+      ), /* @__PURE__ */ import_react4.default.createElement(
         import_core5.Menu.Item,
         {
           onClick: () => editor?.chain().focus().setTextAlign("right").run()
         },
-        /* @__PURE__ */ React.createElement(import_icons_react.IconAlignRight, { size: 14 })
+        /* @__PURE__ */ import_react4.default.createElement(import_icons_react.IconAlignRight, { size: 14 })
       ))),
-      /* @__PURE__ */ React.createElement(import_tiptap.RichTextEditor.Link, null)
-    ), /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ import_react4.default.createElement(import_tiptap.RichTextEditor.Link, null)
+    ), /* @__PURE__ */ import_react4.default.createElement(
       import_tiptap.RichTextEditor.ControlsGroup,
       {
         className: "mrchat-secondRichTextEditorToolBar"
       },
-      /* @__PURE__ */ React.createElement(import_tiptap.RichTextEditor.ClearFormatting, null)
+      /* @__PURE__ */ import_react4.default.createElement(import_tiptap.RichTextEditor.ClearFormatting, null)
     ))),
-    showWarning && /* @__PURE__ */ React.createElement(
+    showWarning && /* @__PURE__ */ import_react4.default.createElement(
       "div",
       {
         style: {
@@ -5002,7 +5002,7 @@ function CustomRichTextEditor({
 
 // src/components/ChatUserList/ChatUserMessage.tsx
 var import_react_redux2 = require("react-redux");
-var import_react8 = require("react");
+var import_react8 = __toESM(require("react"));
 var import_dompurify = __toESM(require("dompurify"));
 
 // src/components/VirtualizedList/ChatScrollContainer.tsx
@@ -5072,7 +5072,7 @@ function ChatScrollContainer({
 }
 
 // src/components/UserProfile/UserProfileDrawer.tsx
-var import_react7 = require("react");
+var import_react7 = __toESM(require("react"));
 var import_core6 = require("@mantine/core");
 var import_icons_react2 = require("@tabler/icons-react");
 function UserProfileDrawer({
@@ -5092,14 +5092,14 @@ function UserProfileDrawer({
     setTimeout(onClose, 250);
   };
   if (!opened && !visible) return null;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "mrchat-overlay", onClick: handleClose }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, /* @__PURE__ */ import_react7.default.createElement("div", { className: "mrchat-overlay", onClick: handleClose }, /* @__PURE__ */ import_react7.default.createElement(
     "div",
     {
       className: `${"mrchat-drawer"} ${visible ? "mrchat-open" : "mrchat-close"}`,
       onClick: (e) => e.stopPropagation()
     },
-    /* @__PURE__ */ React.createElement("div", { className: "mrchat-header" }, /* @__PURE__ */ React.createElement("div", { className: "mrchat-backBtn", onClick: handleClose }, /* @__PURE__ */ React.createElement(import_icons_react2.IconArrowLeft, { size: 20 })), /* @__PURE__ */ React.createElement(import_core6.Text, { fw: 600 }, "Contact info")),
-    /* @__PURE__ */ React.createElement("div", { className: "mrchat-profileSection" }, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ import_react7.default.createElement("div", { className: "mrchat-header" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "mrchat-backBtn", onClick: handleClose }, /* @__PURE__ */ import_react7.default.createElement(import_icons_react2.IconArrowLeft, { size: 20 })), /* @__PURE__ */ import_react7.default.createElement(import_core6.Text, { fw: 600 }, "Contact info")),
+    /* @__PURE__ */ import_react7.default.createElement("div", { className: "mrchat-profileSection" }, /* @__PURE__ */ import_react7.default.createElement(
       import_core6.Avatar,
       {
         src: user?.avatar,
@@ -5108,31 +5108,31 @@ function UserProfileDrawer({
         style: { cursor: "pointer" },
         onClick: () => user?.avatar ? setShowImagePreview(true) : {}
       }
-    ), /* @__PURE__ */ React.createElement(import_core6.Text, { fw: 700, size: "lg", mt: "sm" }, user?.displayName), /* @__PURE__ */ React.createElement(import_core6.Text, { size: "sm", c: "dimmed" }, "@", user?.username)),
-    /* @__PURE__ */ React.createElement("div", { className: "mrchat-actions" }, /* @__PURE__ */ React.createElement(
+    ), /* @__PURE__ */ import_react7.default.createElement(import_core6.Text, { fw: 700, size: "lg", mt: "sm" }, user?.displayName), /* @__PURE__ */ import_react7.default.createElement(import_core6.Text, { size: "sm", c: "dimmed" }, "@", user?.username)),
+    /* @__PURE__ */ import_react7.default.createElement("div", { className: "mrchat-actions" }, /* @__PURE__ */ import_react7.default.createElement(
       "div",
       {
         className: `${"mrchat-item"} ${"mrchat-itemDanger"}`,
         onClick: onDeleteMessages
       },
-      /* @__PURE__ */ React.createElement(import_icons_react2.IconTrash, { size: 18 }),
-      /* @__PURE__ */ React.createElement("span", null, "Delete all messages")
-    ), /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ import_react7.default.createElement(import_icons_react2.IconTrash, { size: 18 }),
+      /* @__PURE__ */ import_react7.default.createElement("span", null, "Delete all messages")
+    ), /* @__PURE__ */ import_react7.default.createElement(
       "div",
       {
         className: `${"mrchat-item"} ${"mrchat-itemDanger"}`,
         onClick: onBlock
       },
-      /* @__PURE__ */ React.createElement(import_icons_react2.IconBan, { size: 18 }),
-      /* @__PURE__ */ React.createElement("span", null, "Block")
+      /* @__PURE__ */ import_react7.default.createElement(import_icons_react2.IconBan, { size: 18 }),
+      /* @__PURE__ */ import_react7.default.createElement("span", null, "Block")
     ))
-  )), showImagePreview && /* @__PURE__ */ React.createElement(
+  )), showImagePreview && /* @__PURE__ */ import_react7.default.createElement(
     "div",
     {
       className: "mrchat-imagePreview",
       onClick: () => setShowImagePreview(false)
     },
-    /* @__PURE__ */ React.createElement("img", { src: user?.avatar, alt: "profile" })
+    /* @__PURE__ */ import_react7.default.createElement("img", { src: user?.avatar, alt: "profile" })
   ));
 }
 
@@ -5283,13 +5283,13 @@ function ChatUserMessage({
       deleteMessagesByChatId({ chatId, userId: senderDetails?.userId })
     );
   };
-  return /* @__PURE__ */ React.createElement("div", { className: "mrchat-mainArea" }, /* @__PURE__ */ React.createElement("div", { className: "mrchat-chatHeader" }, receiverDetails && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ import_react8.default.createElement("div", { className: "mrchat-mainArea" }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "mrchat-chatHeader" }, receiverDetails && /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, /* @__PURE__ */ import_react8.default.createElement(
     "div",
     {
       className: "mrchat-receiverInfo",
       onClick: () => setShowUserInfo(true)
     },
-    receiverDetails?.avatar ? /* @__PURE__ */ React.createElement(import_core7.Avatar, { src: receiverDetails.avatar, size: 36, radius: "xl" }) : /* @__PURE__ */ React.createElement(
+    receiverDetails?.avatar ? /* @__PURE__ */ import_react8.default.createElement(import_core7.Avatar, { src: receiverDetails.avatar, size: 36, radius: "xl" }) : /* @__PURE__ */ import_react8.default.createElement(
       import_core7.Avatar,
       {
         key: receiverDetails?.displayName || receiverDetails?.username,
@@ -5297,16 +5297,16 @@ function ChatUserMessage({
         color: "initials"
       }
     ),
-    /* @__PURE__ */ React.createElement(import_core7.Text, { fw: 600, size: "md" }, receiverDetails?.displayName || receiverDetails?.username)
-  ), /* @__PURE__ */ React.createElement(import_core7.Menu, { shadow: "md", width: 200, position: "bottom-end" }, /* @__PURE__ */ React.createElement(import_core7.Menu.Target, null, /* @__PURE__ */ React.createElement(import_icons_react3.IconDotsVertical, { size: 20, style: { cursor: "pointer" } })), /* @__PURE__ */ React.createElement(import_core7.Menu.Dropdown, null, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ import_react8.default.createElement(import_core7.Text, { fw: 600, size: "md" }, receiverDetails?.displayName || receiverDetails?.username)
+  ), /* @__PURE__ */ import_react8.default.createElement(import_core7.Menu, { shadow: "md", width: 200, position: "bottom-end" }, /* @__PURE__ */ import_react8.default.createElement(import_core7.Menu.Target, null, /* @__PURE__ */ import_react8.default.createElement(import_icons_react3.IconDotsVertical, { size: 20, style: { cursor: "pointer" } })), /* @__PURE__ */ import_react8.default.createElement(import_core7.Menu.Dropdown, null, /* @__PURE__ */ import_react8.default.createElement(
     import_core7.Menu.Item,
     {
       color: "red",
-      leftSection: /* @__PURE__ */ React.createElement(import_icons_react3.IconTrash, { size: 16 }),
+      leftSection: /* @__PURE__ */ import_react8.default.createElement(import_icons_react3.IconTrash, { size: 16 }),
       onClick: handleDeleteMessages
     },
     "Delete all messages"
-  ), /* @__PURE__ */ React.createElement(import_core7.Menu.Item, { color: "red", leftSection: /* @__PURE__ */ React.createElement(import_icons_react3.IconBan, { size: 16 }) }, "Block"))))), /* @__PURE__ */ React.createElement("div", { className: "mrchat-messageArea" }, isEmpty ? /* @__PURE__ */ React.createElement("div", { className: "mrchat-emptyState" }, /* @__PURE__ */ React.createElement("div", { className: "mrchat-encryptionMinimal" }, /* @__PURE__ */ React.createElement(import_icons_react3.IconLock, { size: 20, stroke: 1.8 }), /* @__PURE__ */ React.createElement(import_core7.Text, { className: "mrchat-encryptionText", size: "md" }, "End-to-end encrypted"))) : /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ import_react8.default.createElement(import_core7.Menu.Item, { color: "red", leftSection: /* @__PURE__ */ import_react8.default.createElement(import_icons_react3.IconBan, { size: 16 }) }, "Block"))))), /* @__PURE__ */ import_react8.default.createElement("div", { className: "mrchat-messageArea" }, isEmpty ? /* @__PURE__ */ import_react8.default.createElement("div", { className: "mrchat-emptyState" }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "mrchat-encryptionMinimal" }, /* @__PURE__ */ import_react8.default.createElement(import_icons_react3.IconLock, { size: 20, stroke: 1.8 }), /* @__PURE__ */ import_react8.default.createElement(import_core7.Text, { className: "mrchat-encryptionText", size: "md" }, "End-to-end encrypted"))) : /* @__PURE__ */ import_react8.default.createElement(
     ChatScrollContainer,
     {
       data: messages,
@@ -5340,7 +5340,7 @@ function ChatUserMessage({
           minute: "2-digit",
           hour12: false
         });
-        return /* @__PURE__ */ React.createElement("div", { key: item?.id + "_" + index }, showDate && /* @__PURE__ */ React.createElement("div", { className: "mrchat-dateSeparator" }, formattedDate), /* @__PURE__ */ React.createElement(
+        return /* @__PURE__ */ import_react8.default.createElement("div", { key: item?.id + "_" + index }, showDate && /* @__PURE__ */ import_react8.default.createElement("div", { className: "mrchat-dateSeparator" }, formattedDate), /* @__PURE__ */ import_react8.default.createElement(
           "div",
           {
             style: {
@@ -5348,7 +5348,7 @@ function ChatUserMessage({
             },
             className: `${"mrchat-messageBubble"} ${isOutgoing ? "mrchat-outgoing" : "mrchat-incoming"}`
           },
-          /* @__PURE__ */ React.createElement(
+          /* @__PURE__ */ import_react8.default.createElement(
             "div",
             {
               className: "mrchat-messageContent",
@@ -5357,11 +5357,11 @@ function ChatUserMessage({
               }
             }
           ),
-          /* @__PURE__ */ React.createElement("div", { className: "mrchat-messageTime" }, time)
+          /* @__PURE__ */ import_react8.default.createElement("div", { className: "mrchat-messageTime" }, time)
         ));
       }
     }
-  )), (chatId || enableChat) && /* @__PURE__ */ React.createElement("div", { className: "mrchat-inputBar" }, /* @__PURE__ */ React.createElement(CustomRichTextEditor, { onSubmit: handleSendMessage })), /* @__PURE__ */ React.createElement(
+  )), (chatId || enableChat) && /* @__PURE__ */ import_react8.default.createElement("div", { className: "mrchat-inputBar" }, /* @__PURE__ */ import_react8.default.createElement(CustomRichTextEditor, { onSubmit: handleSendMessage })), /* @__PURE__ */ import_react8.default.createElement(
     UserProfileDrawer,
     {
       opened: showUserInfo,
@@ -5383,7 +5383,7 @@ function ChatUserMessage({
 
 // src/components/ChatUserList/ChatUserList.tsx
 var import_react_redux3 = require("react-redux");
-var import_react9 = require("react");
+var import_react10 = __toESM(require("react"));
 
 // src/components/ChatUserList/users_list.json
 var users_list_default = [
@@ -6036,6 +6036,7 @@ var users_list_default = [
 ];
 
 // src/components/VirtualizedList/index.tsx
+var import_react9 = __toESM(require("react"));
 var import_react_virtuoso = require("react-virtuoso");
 function VirtualizedList({
   data: data2,
@@ -6045,7 +6046,7 @@ function VirtualizedList({
   endReached,
   ...props
 }) {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ import_react9.default.createElement(
     import_react_virtuoso.Virtuoso,
     {
       style: { height },
@@ -6094,21 +6095,21 @@ function ChatUserList() {
   const chatList = (0, import_react_redux3.useSelector)(
     (state) => state.chat.messagedUserList
   );
-  const [page, setPage] = (0, import_react9.useState)(0);
-  const [chatId, setChatId] = (0, import_react9.useState)("");
-  const [enableChat, setEnableChat] = (0, import_react9.useState)(false);
-  const [receiverSearchValue, setReceiverSearchValue] = (0, import_react9.useState)("");
-  const [receiverDetails, setReceiverDetails] = (0, import_react9.useState)();
-  const [receiverUserDetails, setReceiverUserDetails] = (0, import_react9.useState)();
-  const [senderSearchValue, setSenderSearchValue] = (0, import_react9.useState)("");
-  const [senderDetails, setSenderDetails] = (0, import_react9.useState)("");
-  const [senderUserDetails, setSenderUserDetails] = (0, import_react9.useState)();
-  (0, import_react9.useEffect)(() => {
+  const [page, setPage] = (0, import_react10.useState)(0);
+  const [chatId, setChatId] = (0, import_react10.useState)("");
+  const [enableChat, setEnableChat] = (0, import_react10.useState)(false);
+  const [receiverSearchValue, setReceiverSearchValue] = (0, import_react10.useState)("");
+  const [receiverDetails, setReceiverDetails] = (0, import_react10.useState)();
+  const [receiverUserDetails, setReceiverUserDetails] = (0, import_react10.useState)();
+  const [senderSearchValue, setSenderSearchValue] = (0, import_react10.useState)("");
+  const [senderDetails, setSenderDetails] = (0, import_react10.useState)("");
+  const [senderUserDetails, setSenderUserDetails] = (0, import_react10.useState)();
+  (0, import_react10.useEffect)(() => {
     if (senderUserDetails) {
       setSenderDetails(senderUserDetails);
     }
   }, [senderUserDetails]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!senderUserDetails) return;
     dispatch(
       fetchMessageListByUserId({ userId: senderUserDetails.userId, page: 0 })
@@ -6140,7 +6141,7 @@ function ChatUserList() {
     setChatId("");
     setEnableChat(true);
   };
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!senderDetails?.userId) return;
     const socket2 = getSocket(senderDetails.userId);
     if (!socket2) return;
@@ -6148,7 +6149,7 @@ function ChatUserList() {
       socket2.connect();
     }
   }, [senderDetails?.userId]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!senderUserDetails?.userId) return;
     const socket2 = getSocket(senderDetails.userId);
     if (!socket2) return;
@@ -6170,7 +6171,7 @@ function ChatUserList() {
       socket2.off("newChat", handleNewChat);
     };
   }, [senderDetails.userId]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!senderDetails?.userId) return;
     const socket2 = getSocket(senderDetails?.userId || "");
     if (!socket2) return;
@@ -6259,7 +6260,7 @@ function ChatUserList() {
     label: user.displayName || user.username,
     user
   }));
-  return /* @__PURE__ */ React.createElement("div", { className: "mrchat-chatWrapper" }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ import_react10.default.createElement("div", { className: "mrchat-chatWrapper" }, /* @__PURE__ */ import_react10.default.createElement(
     import_core8.Modal,
     {
       opened,
@@ -6271,7 +6272,7 @@ function ChatUserList() {
       centered: true,
       withCloseButton: true
     },
-    /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ import_react10.default.createElement(
       import_core8.Autocomplete,
       {
         mb: 12,
@@ -6290,11 +6291,11 @@ function ChatUserList() {
         },
         renderOption: ({ option }) => {
           const user = option.user;
-          return /* @__PURE__ */ React.createElement(import_core8.Group, { gap: "sm" }, /* @__PURE__ */ React.createElement(import_core8.Avatar, { src: user.avatar, size: 36, radius: "xl" }), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(import_core8.Text, { size: "sm" }, user.displayName || user.username), user.displayName && /* @__PURE__ */ React.createElement(import_core8.Text, { size: "xs", opacity: 0.5 }, "@", user.username)));
+          return /* @__PURE__ */ import_react10.default.createElement(import_core8.Group, { gap: "sm" }, /* @__PURE__ */ import_react10.default.createElement(import_core8.Avatar, { src: user.avatar, size: 36, radius: "xl" }), /* @__PURE__ */ import_react10.default.createElement("div", null, /* @__PURE__ */ import_react10.default.createElement(import_core8.Text, { size: "sm" }, user.displayName || user.username), user.displayName && /* @__PURE__ */ import_react10.default.createElement(import_core8.Text, { size: "xs", opacity: 0.5 }, "@", user.username)));
         }
       }
     ),
-    /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ import_react10.default.createElement(
       import_core8.Autocomplete,
       {
         mb: 12,
@@ -6313,11 +6314,11 @@ function ChatUserList() {
         },
         renderOption: ({ option }) => {
           const user = option.user;
-          return /* @__PURE__ */ React.createElement(import_core8.Group, { gap: "sm" }, /* @__PURE__ */ React.createElement(import_core8.Avatar, { src: user.avatar, size: 36, radius: "xl" }), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(import_core8.Text, { size: "sm" }, user.displayName || user.username), user.displayName && /* @__PURE__ */ React.createElement(import_core8.Text, { size: "xs", opacity: 0.5 }, "@", user.username)));
+          return /* @__PURE__ */ import_react10.default.createElement(import_core8.Group, { gap: "sm" }, /* @__PURE__ */ import_react10.default.createElement(import_core8.Avatar, { src: user.avatar, size: 36, radius: "xl" }), /* @__PURE__ */ import_react10.default.createElement("div", null, /* @__PURE__ */ import_react10.default.createElement(import_core8.Text, { size: "sm" }, user.displayName || user.username), user.displayName && /* @__PURE__ */ import_react10.default.createElement(import_core8.Text, { size: "xs", opacity: 0.5 }, "@", user.username)));
         }
       }
     ),
-    /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ import_react10.default.createElement(
       import_core8.Button,
       {
         fullWidth: true,
@@ -6326,7 +6327,7 @@ function ChatUserList() {
       },
       "Start Chat"
     )
-  ), /* @__PURE__ */ React.createElement("div", { className: "mrchat-chatContainer" }, /* @__PURE__ */ React.createElement("div", { className: "mrchat-sidebar" }, /* @__PURE__ */ React.createElement("div", { className: "mrchat-sidebarTop" }, /* @__PURE__ */ React.createElement("div", { className: "mrchat-topBar" }, /* @__PURE__ */ React.createElement(import_core8.Text, { size: "lg", fw: 600 }, "MrChat"), /* @__PURE__ */ React.createElement("div", { className: "mrchat-topActions" }, /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ import_react10.default.createElement("div", { className: "mrchat-chatContainer" }, /* @__PURE__ */ import_react10.default.createElement("div", { className: "mrchat-sidebar" }, /* @__PURE__ */ import_react10.default.createElement("div", { className: "mrchat-sidebarTop" }, /* @__PURE__ */ import_react10.default.createElement("div", { className: "mrchat-topBar" }, /* @__PURE__ */ import_react10.default.createElement(import_core8.Text, { size: "lg", fw: 600 }, "MrChat"), /* @__PURE__ */ import_react10.default.createElement("div", { className: "mrchat-topActions" }, /* @__PURE__ */ import_react10.default.createElement(
     import_core8.ActionIcon,
     {
       variant: "subtle",
@@ -6336,15 +6337,15 @@ function ChatUserList() {
       },
       radius: "lg"
     },
-    /* @__PURE__ */ React.createElement(import_icons_react4.IconPlus, { size: 20, stroke: 3 })
-  )))), /* @__PURE__ */ React.createElement(import_core8.Text, { size: "xs", c: "dimmed", mt: "sm", mb: "xs", ml: 12 }, "All Messages"), /* @__PURE__ */ React.createElement("div", { className: "mrchat-scrollWrapper" }, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ import_react10.default.createElement(import_icons_react4.IconPlus, { size: 20, stroke: 3 })
+  )))), /* @__PURE__ */ import_react10.default.createElement(import_core8.Text, { size: "xs", c: "dimmed", mt: "sm", mb: "xs", ml: 12 }, "All Messages"), /* @__PURE__ */ import_react10.default.createElement("div", { className: "mrchat-scrollWrapper" }, /* @__PURE__ */ import_react10.default.createElement(
     VirtualizedList,
     {
       data: chatList?.rows?.data || [],
       endReached: loadMoreChats,
       itemContent: (_, item) => {
         const isActive = item.chatId === chatId;
-        return /* @__PURE__ */ React.createElement(
+        return /* @__PURE__ */ import_react10.default.createElement(
           "div",
           {
             className: `${"mrchat-chatItem"} ${isActive ? "mrchat-activeChatItem" : ""}`,
@@ -6353,7 +6354,7 @@ function ChatUserList() {
               handleJoinChat(item);
             }
           },
-          item.avatar ? /* @__PURE__ */ React.createElement(import_core8.Avatar, { src: item.avatar, size: 36, radius: "xl" }) : /* @__PURE__ */ React.createElement(
+          item.avatar ? /* @__PURE__ */ import_react10.default.createElement(import_core8.Avatar, { src: item.avatar, size: 36, radius: "xl" }) : /* @__PURE__ */ import_react10.default.createElement(
             import_core8.Avatar,
             {
               key: item.displayName || item.username,
@@ -6361,7 +6362,7 @@ function ChatUserList() {
               color: "initials"
             }
           ),
-          /* @__PURE__ */ React.createElement("div", { className: "mrchat-chatInfo" }, /* @__PURE__ */ React.createElement(import_core8.Text, { className: "mrchat-chatLabelItem", truncate: true }, item.displayName || item.username), item.unreadCount > 0 && /* @__PURE__ */ React.createElement("div", { className: "mrchat-unreadBadge" }, item.unreadCount || 10), /* @__PURE__ */ React.createElement("div", { className: "mrchat-messagePreview" }, /* @__PURE__ */ React.createElement(
+          /* @__PURE__ */ import_react10.default.createElement("div", { className: "mrchat-chatInfo" }, /* @__PURE__ */ import_react10.default.createElement(import_core8.Text, { className: "mrchat-chatLabelItem", truncate: true }, item.displayName || item.username), item.unreadCount > 0 && /* @__PURE__ */ import_react10.default.createElement("div", { className: "mrchat-unreadBadge" }, item.unreadCount || 10), /* @__PURE__ */ import_react10.default.createElement("div", { className: "mrchat-messagePreview" }, /* @__PURE__ */ import_react10.default.createElement(
             import_core8.Text,
             {
               truncate: true,
@@ -6371,7 +6372,7 @@ function ChatUserList() {
               className: "mrchat-messagePreviewContent"
             },
             stripHtml(import_dompurify2.default.sanitize(item.message))
-          ), /* @__PURE__ */ React.createElement(
+          ), /* @__PURE__ */ import_react10.default.createElement(
             import_core8.Text,
             {
               size: "xs",
@@ -6383,7 +6384,7 @@ function ChatUserList() {
         );
       }
     }
-  ))), /* @__PURE__ */ React.createElement(
+  ))), /* @__PURE__ */ import_react10.default.createElement(
     ChatUserMessage,
     {
       chatId,
@@ -6405,9 +6406,9 @@ function ChatUserList() {
 
 // src/components/MrChat/index.tsx
 function MrChat(props) {
-  const [primaryColor] = (0, import_react10.useState)("customBrand");
+  const [primaryColor] = (0, import_react11.useState)("customBrand");
   const theme = createAppTheme(primaryColor);
-  return /* @__PURE__ */ import_react10.default.createElement(ReduxProvider, null, /* @__PURE__ */ import_react10.default.createElement(SocketProvider, null, /* @__PURE__ */ import_react10.default.createElement(import_core9.MantineProvider, { defaultColorScheme: "light", theme }, /* @__PURE__ */ import_react10.default.createElement(import_notifications2.Notifications, null), /* @__PURE__ */ import_react10.default.createElement(ChatUserList, { ...props }))));
+  return /* @__PURE__ */ import_react11.default.createElement(ReduxProvider, null, /* @__PURE__ */ import_react11.default.createElement(SocketProvider, null, /* @__PURE__ */ import_react11.default.createElement(import_core9.MantineProvider, { defaultColorScheme: "light", theme }, /* @__PURE__ */ import_react11.default.createElement(import_notifications2.Notifications, null), /* @__PURE__ */ import_react11.default.createElement(ChatUserList, { ...props }))));
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.mjs

@@ -2,7 +2,7 @@
 import "@mantine/core/styles.css";
 import "@mantine/tiptap/styles.css";
 import "@mantine/notifications/styles.css";
-import React4, { useState as useState6 } from "react";
+import React10, { useState as useState6 } from "react";
 import { MantineProvider } from "@mantine/core";
 import { Notifications } from "@mantine/notifications";
 
@@ -83,7 +83,7 @@ var createAppTheme = (primaryColor) => createTheme({
 });
 
 // src/store/provider.tsx
-import React2 from "react";
+import React from "react";
 import { Provider } from "react-redux";
 
 // src/store/store.ts
@@ -291,11 +291,11 @@ var store = configureStore({
 
 // src/store/provider.tsx
 function ReduxProvider({ children }) {
-  return /* @__PURE__ */ React2.createElement(Provider, { store }, children);
+  return /* @__PURE__ */ React.createElement(Provider, { store }, children);
 }
 
 // src/store/socket/index.tsx
-import { useEffect } from "react";
+import React2, { useEffect } from "react";
 
 // src/lib/socket.ts
 import { io } from "socket.io-client";
@@ -338,7 +338,7 @@ function SocketProvider({ children, userId }) {
       }
     };
   }, [userId]);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, children);
 }
 
 // src/components/ChatUserList/ChatUserList.tsx
@@ -364,7 +364,7 @@ import {
 } from "@tabler/icons-react";
 
 // src/components/RichTextEditor/RichTextEditor.tsx
-import { useState as useState2 } from "react";
+import React4, { useState as useState2 } from "react";
 import {
   IconSend,
   IconAlignLeft,
@@ -4739,7 +4739,7 @@ import { Link, RichTextEditor } from "@mantine/tiptap";
 import { ActionIcon, Menu } from "@mantine/core";
 
 // src/components/EmojiPickerPopover/EmojiPickerPopover.tsx
-import {
+import React3, {
   useState,
   lazy,
   Suspense,
@@ -4756,7 +4756,7 @@ function EmojiPickerPopover({
   position = "bottom-start"
 }) {
   const [opened, setOpened] = useState(false);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React3.createElement(
     Popover,
     {
       opened,
@@ -4769,18 +4769,18 @@ function EmojiPickerPopover({
       trapFocus: false,
       closeOnEscape: true
     },
-    /* @__PURE__ */ React.createElement(Popover.Target, null, cloneElement(action, {
+    /* @__PURE__ */ React3.createElement(Popover.Target, null, cloneElement(action, {
       onClick: (e) => {
         action.props?.onClick?.(e);
         setOpened((prev) => !prev);
       }
     })),
-    /* @__PURE__ */ React.createElement(Popover.Dropdown, { p: 0 }, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React3.createElement(Popover.Dropdown, { p: 0 }, /* @__PURE__ */ React3.createElement(
       Suspense,
       {
-        fallback: /* @__PURE__ */ React.createElement("div", { style: { padding: 12, width: 320 } }, /* @__PURE__ */ React.createElement(Skeleton, { height: 280, radius: "md" }))
+        fallback: /* @__PURE__ */ React3.createElement("div", { style: { padding: 12, width: 320 } }, /* @__PURE__ */ React3.createElement(Skeleton, { height: 280, radius: "md" }))
       },
-      /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React3.createElement(
         EmojiPicker,
         {
           previewPosition: "none",
@@ -4878,15 +4878,15 @@ function CustomRichTextEditor({
     editor.commands.focus();
     setCharCount(0);
   };
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(
     RichTextEditor,
     {
       editor,
       w: "100%",
       className: "mrchat-richTextEditorContainer"
     },
-    /* @__PURE__ */ React.createElement(RichTextEditor.Content, null),
-    /* @__PURE__ */ React.createElement(RichTextEditor.Toolbar, { sticky: true, stickyOffset: "var(--docs-header-height)" }, /* @__PURE__ */ React.createElement("div", { className: "mrchat-mainActionContainer" }, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React4.createElement(RichTextEditor.Content, null),
+    /* @__PURE__ */ React4.createElement(RichTextEditor.Toolbar, { sticky: true, stickyOffset: "var(--docs-header-height)" }, /* @__PURE__ */ React4.createElement("div", { className: "mrchat-mainActionContainer" }, /* @__PURE__ */ React4.createElement(
       EmojiPickerPopover,
       {
         onSelect: (emoji) => {
@@ -4897,7 +4897,7 @@ function CustomRichTextEditor({
             }
           }).run();
         },
-        action: /* @__PURE__ */ React.createElement(
+        action: /* @__PURE__ */ React4.createElement(
           ActionIcon,
           {
             radius: "lg",
@@ -4906,10 +4906,10 @@ function CustomRichTextEditor({
             color: "#333",
             className: "mrchat-mainActionEmojiIcon"
           },
-          /* @__PURE__ */ React.createElement(AddReaction_default, null)
+          /* @__PURE__ */ React4.createElement(AddReaction_default, null)
         )
       }
-    ), /* @__PURE__ */ React.createElement(
+    ), /* @__PURE__ */ React4.createElement(
       ActionIcon,
       {
         radius: "lg",
@@ -4919,8 +4919,8 @@ function CustomRichTextEditor({
         className: "mrchat-mainTextFormatIcon",
         onClick: () => setShowToolbar((prev) => !prev)
       },
-      /* @__PURE__ */ React.createElement(TextFormat_default, null)
-    ), /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React4.createElement(TextFormat_default, null)
+    ), /* @__PURE__ */ React4.createElement(
       ActionIcon,
       {
         radius: "lg",
@@ -4929,15 +4929,15 @@ function CustomRichTextEditor({
         className: "mrchat-mainSendMsgIcon",
         onClick: () => handleSubmitMsg()
       },
-      /* @__PURE__ */ React.createElement(IconSend, { size: 18 })
-    )), showToolbar && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(RichTextEditor.ControlsGroup, null, /* @__PURE__ */ React.createElement(RichTextEditor.Bold, null), /* @__PURE__ */ React.createElement(RichTextEditor.Italic, null), /* @__PURE__ */ React.createElement(RichTextEditor.Underline, null), /* @__PURE__ */ React.createElement(RichTextEditor.Strikethrough, null), /* @__PURE__ */ React.createElement(RichTextEditor.Code, null), /* @__PURE__ */ React.createElement(RichTextEditor.Highlight, null)), /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React4.createElement(IconSend, { size: 18 })
+    )), showToolbar && /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(RichTextEditor.ControlsGroup, null, /* @__PURE__ */ React4.createElement(RichTextEditor.Bold, null), /* @__PURE__ */ React4.createElement(RichTextEditor.Italic, null), /* @__PURE__ */ React4.createElement(RichTextEditor.Underline, null), /* @__PURE__ */ React4.createElement(RichTextEditor.Strikethrough, null), /* @__PURE__ */ React4.createElement(RichTextEditor.Code, null), /* @__PURE__ */ React4.createElement(RichTextEditor.Highlight, null)), /* @__PURE__ */ React4.createElement(
       RichTextEditor.ControlsGroup,
       {
         className: "mrchat-secondRichTextEditorToolBar"
       },
-      /* @__PURE__ */ React.createElement(RichTextEditor.BulletList, null),
-      /* @__PURE__ */ React.createElement(RichTextEditor.OrderedList, null),
-      /* @__PURE__ */ React.createElement(Menu, { trigger: "hover", openDelay: 200 }, /* @__PURE__ */ React.createElement(Menu.Target, null, /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React4.createElement(RichTextEditor.BulletList, null),
+      /* @__PURE__ */ React4.createElement(RichTextEditor.OrderedList, null),
+      /* @__PURE__ */ React4.createElement(Menu, { trigger: "hover", openDelay: 200 }, /* @__PURE__ */ React4.createElement(Menu.Target, null, /* @__PURE__ */ React4.createElement(
         ActionIcon,
         {
           variant: "outline",
@@ -4945,35 +4945,35 @@ function CustomRichTextEditor({
           color: "#495057",
           className: "mrchat-customToolActionItem"
         },
-        /* @__PURE__ */ React.createElement(IconAlignLeft, { size: 16, stroke: 1.5 })
-      )), /* @__PURE__ */ React.createElement(Menu.Dropdown, null, /* @__PURE__ */ React.createElement(
+        /* @__PURE__ */ React4.createElement(IconAlignLeft, { size: 16, stroke: 1.5 })
+      )), /* @__PURE__ */ React4.createElement(Menu.Dropdown, null, /* @__PURE__ */ React4.createElement(
         Menu.Item,
         {
           onClick: () => editor?.chain().focus().setTextAlign("left").run()
         },
-        /* @__PURE__ */ React.createElement(IconAlignLeft, { size: 14 })
-      ), /* @__PURE__ */ React.createElement(
+        /* @__PURE__ */ React4.createElement(IconAlignLeft, { size: 14 })
+      ), /* @__PURE__ */ React4.createElement(
         Menu.Item,
         {
           onClick: () => editor?.chain().focus().setTextAlign("center").run()
         },
-        /* @__PURE__ */ React.createElement(IconAlignCenter, { size: 14 })
-      ), /* @__PURE__ */ React.createElement(
+        /* @__PURE__ */ React4.createElement(IconAlignCenter, { size: 14 })
+      ), /* @__PURE__ */ React4.createElement(
         Menu.Item,
         {
           onClick: () => editor?.chain().focus().setTextAlign("right").run()
         },
-        /* @__PURE__ */ React.createElement(IconAlignRight, { size: 14 })
+        /* @__PURE__ */ React4.createElement(IconAlignRight, { size: 14 })
       ))),
-      /* @__PURE__ */ React.createElement(RichTextEditor.Link, null)
-    ), /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React4.createElement(RichTextEditor.Link, null)
+    ), /* @__PURE__ */ React4.createElement(
       RichTextEditor.ControlsGroup,
       {
         className: "mrchat-secondRichTextEditorToolBar"
       },
-      /* @__PURE__ */ React.createElement(RichTextEditor.ClearFormatting, null)
+      /* @__PURE__ */ React4.createElement(RichTextEditor.ClearFormatting, null)
     ))),
-    showWarning && /* @__PURE__ */ React.createElement(
+    showWarning && /* @__PURE__ */ React4.createElement(
       "div",
       {
         style: {
@@ -4994,11 +4994,11 @@ function CustomRichTextEditor({
 
 // src/components/ChatUserList/ChatUserMessage.tsx
 import { useDispatch, useSelector } from "react-redux";
-import { useEffect as useEffect4, useState as useState4 } from "react";
+import React7, { useEffect as useEffect4, useState as useState4 } from "react";
 import DOMPurify from "dompurify";
 
 // src/components/VirtualizedList/ChatScrollContainer.tsx
-import React3, { useRef, useEffect as useEffect2 } from "react";
+import React5, { useRef, useEffect as useEffect2 } from "react";
 function ChatScrollContainer({
   data: data2,
   renderItem,
@@ -5047,7 +5047,7 @@ function ChatScrollContainer({
       isFetchingRef.current = false;
     }, 0);
   };
-  return /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React5.createElement(
     "div",
     {
       ref: containerRef,
@@ -5059,12 +5059,12 @@ function ChatScrollContainer({
         flexDirection: "column"
       }
     },
-    data2.map((item, index) => /* @__PURE__ */ React3.createElement("div", { key: item?.id || index }, renderItem(item, index)))
+    data2.map((item, index) => /* @__PURE__ */ React5.createElement("div", { key: item?.id || index }, renderItem(item, index)))
   );
 }
 
 // src/components/UserProfile/UserProfileDrawer.tsx
-import { useEffect as useEffect3, useState as useState3 } from "react";
+import React6, { useEffect as useEffect3, useState as useState3 } from "react";
 import { Avatar, Text } from "@mantine/core";
 import {
   IconArrowLeft,
@@ -5088,14 +5088,14 @@ function UserProfileDrawer({
     setTimeout(onClose, 250);
   };
   if (!opened && !visible) return null;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "mrchat-overlay", onClick: handleClose }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement("div", { className: "mrchat-overlay", onClick: handleClose }, /* @__PURE__ */ React6.createElement(
     "div",
     {
       className: `${"mrchat-drawer"} ${visible ? "mrchat-open" : "mrchat-close"}`,
       onClick: (e) => e.stopPropagation()
     },
-    /* @__PURE__ */ React.createElement("div", { className: "mrchat-header" }, /* @__PURE__ */ React.createElement("div", { className: "mrchat-backBtn", onClick: handleClose }, /* @__PURE__ */ React.createElement(IconArrowLeft, { size: 20 })), /* @__PURE__ */ React.createElement(Text, { fw: 600 }, "Contact info")),
-    /* @__PURE__ */ React.createElement("div", { className: "mrchat-profileSection" }, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React6.createElement("div", { className: "mrchat-header" }, /* @__PURE__ */ React6.createElement("div", { className: "mrchat-backBtn", onClick: handleClose }, /* @__PURE__ */ React6.createElement(IconArrowLeft, { size: 20 })), /* @__PURE__ */ React6.createElement(Text, { fw: 600 }, "Contact info")),
+    /* @__PURE__ */ React6.createElement("div", { className: "mrchat-profileSection" }, /* @__PURE__ */ React6.createElement(
       Avatar,
       {
         src: user?.avatar,
@@ -5104,31 +5104,31 @@ function UserProfileDrawer({
         style: { cursor: "pointer" },
         onClick: () => user?.avatar ? setShowImagePreview(true) : {}
       }
-    ), /* @__PURE__ */ React.createElement(Text, { fw: 700, size: "lg", mt: "sm" }, user?.displayName), /* @__PURE__ */ React.createElement(Text, { size: "sm", c: "dimmed" }, "@", user?.username)),
-    /* @__PURE__ */ React.createElement("div", { className: "mrchat-actions" }, /* @__PURE__ */ React.createElement(
+    ), /* @__PURE__ */ React6.createElement(Text, { fw: 700, size: "lg", mt: "sm" }, user?.displayName), /* @__PURE__ */ React6.createElement(Text, { size: "sm", c: "dimmed" }, "@", user?.username)),
+    /* @__PURE__ */ React6.createElement("div", { className: "mrchat-actions" }, /* @__PURE__ */ React6.createElement(
       "div",
       {
         className: `${"mrchat-item"} ${"mrchat-itemDanger"}`,
         onClick: onDeleteMessages
       },
-      /* @__PURE__ */ React.createElement(IconTrash, { size: 18 }),
-      /* @__PURE__ */ React.createElement("span", null, "Delete all messages")
-    ), /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React6.createElement(IconTrash, { size: 18 }),
+      /* @__PURE__ */ React6.createElement("span", null, "Delete all messages")
+    ), /* @__PURE__ */ React6.createElement(
       "div",
       {
         className: `${"mrchat-item"} ${"mrchat-itemDanger"}`,
         onClick: onBlock
       },
-      /* @__PURE__ */ React.createElement(IconBan, { size: 18 }),
-      /* @__PURE__ */ React.createElement("span", null, "Block")
+      /* @__PURE__ */ React6.createElement(IconBan, { size: 18 }),
+      /* @__PURE__ */ React6.createElement("span", null, "Block")
     ))
-  )), showImagePreview && /* @__PURE__ */ React.createElement(
+  )), showImagePreview && /* @__PURE__ */ React6.createElement(
     "div",
     {
       className: "mrchat-imagePreview",
       onClick: () => setShowImagePreview(false)
     },
-    /* @__PURE__ */ React.createElement("img", { src: user?.avatar, alt: "profile" })
+    /* @__PURE__ */ React6.createElement("img", { src: user?.avatar, alt: "profile" })
   ));
 }
 
@@ -5279,13 +5279,13 @@ function ChatUserMessage({
       deleteMessagesByChatId({ chatId, userId: senderDetails?.userId })
     );
   };
-  return /* @__PURE__ */ React.createElement("div", { className: "mrchat-mainArea" }, /* @__PURE__ */ React.createElement("div", { className: "mrchat-chatHeader" }, receiverDetails && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React7.createElement("div", { className: "mrchat-mainArea" }, /* @__PURE__ */ React7.createElement("div", { className: "mrchat-chatHeader" }, receiverDetails && /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(
     "div",
     {
       className: "mrchat-receiverInfo",
       onClick: () => setShowUserInfo(true)
     },
-    receiverDetails?.avatar ? /* @__PURE__ */ React.createElement(Avatar2, { src: receiverDetails.avatar, size: 36, radius: "xl" }) : /* @__PURE__ */ React.createElement(
+    receiverDetails?.avatar ? /* @__PURE__ */ React7.createElement(Avatar2, { src: receiverDetails.avatar, size: 36, radius: "xl" }) : /* @__PURE__ */ React7.createElement(
       Avatar2,
       {
         key: receiverDetails?.displayName || receiverDetails?.username,
@@ -5293,16 +5293,16 @@ function ChatUserMessage({
         color: "initials"
       }
     ),
-    /* @__PURE__ */ React.createElement(Text2, { fw: 600, size: "md" }, receiverDetails?.displayName || receiverDetails?.username)
-  ), /* @__PURE__ */ React.createElement(Menu2, { shadow: "md", width: 200, position: "bottom-end" }, /* @__PURE__ */ React.createElement(Menu2.Target, null, /* @__PURE__ */ React.createElement(IconDotsVertical, { size: 20, style: { cursor: "pointer" } })), /* @__PURE__ */ React.createElement(Menu2.Dropdown, null, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React7.createElement(Text2, { fw: 600, size: "md" }, receiverDetails?.displayName || receiverDetails?.username)
+  ), /* @__PURE__ */ React7.createElement(Menu2, { shadow: "md", width: 200, position: "bottom-end" }, /* @__PURE__ */ React7.createElement(Menu2.Target, null, /* @__PURE__ */ React7.createElement(IconDotsVertical, { size: 20, style: { cursor: "pointer" } })), /* @__PURE__ */ React7.createElement(Menu2.Dropdown, null, /* @__PURE__ */ React7.createElement(
     Menu2.Item,
     {
       color: "red",
-      leftSection: /* @__PURE__ */ React.createElement(IconTrash2, { size: 16 }),
+      leftSection: /* @__PURE__ */ React7.createElement(IconTrash2, { size: 16 }),
       onClick: handleDeleteMessages
     },
     "Delete all messages"
-  ), /* @__PURE__ */ React.createElement(Menu2.Item, { color: "red", leftSection: /* @__PURE__ */ React.createElement(IconBan2, { size: 16 }) }, "Block"))))), /* @__PURE__ */ React.createElement("div", { className: "mrchat-messageArea" }, isEmpty ? /* @__PURE__ */ React.createElement("div", { className: "mrchat-emptyState" }, /* @__PURE__ */ React.createElement("div", { className: "mrchat-encryptionMinimal" }, /* @__PURE__ */ React.createElement(IconLock, { size: 20, stroke: 1.8 }), /* @__PURE__ */ React.createElement(Text2, { className: "mrchat-encryptionText", size: "md" }, "End-to-end encrypted"))) : /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React7.createElement(Menu2.Item, { color: "red", leftSection: /* @__PURE__ */ React7.createElement(IconBan2, { size: 16 }) }, "Block"))))), /* @__PURE__ */ React7.createElement("div", { className: "mrchat-messageArea" }, isEmpty ? /* @__PURE__ */ React7.createElement("div", { className: "mrchat-emptyState" }, /* @__PURE__ */ React7.createElement("div", { className: "mrchat-encryptionMinimal" }, /* @__PURE__ */ React7.createElement(IconLock, { size: 20, stroke: 1.8 }), /* @__PURE__ */ React7.createElement(Text2, { className: "mrchat-encryptionText", size: "md" }, "End-to-end encrypted"))) : /* @__PURE__ */ React7.createElement(
     ChatScrollContainer,
     {
       data: messages,
@@ -5336,7 +5336,7 @@ function ChatUserMessage({
           minute: "2-digit",
           hour12: false
         });
-        return /* @__PURE__ */ React.createElement("div", { key: item?.id + "_" + index }, showDate && /* @__PURE__ */ React.createElement("div", { className: "mrchat-dateSeparator" }, formattedDate), /* @__PURE__ */ React.createElement(
+        return /* @__PURE__ */ React7.createElement("div", { key: item?.id + "_" + index }, showDate && /* @__PURE__ */ React7.createElement("div", { className: "mrchat-dateSeparator" }, formattedDate), /* @__PURE__ */ React7.createElement(
           "div",
           {
             style: {
@@ -5344,7 +5344,7 @@ function ChatUserMessage({
             },
             className: `${"mrchat-messageBubble"} ${isOutgoing ? "mrchat-outgoing" : "mrchat-incoming"}`
           },
-          /* @__PURE__ */ React.createElement(
+          /* @__PURE__ */ React7.createElement(
             "div",
             {
               className: "mrchat-messageContent",
@@ -5353,11 +5353,11 @@ function ChatUserMessage({
               }
             }
           ),
-          /* @__PURE__ */ React.createElement("div", { className: "mrchat-messageTime" }, time)
+          /* @__PURE__ */ React7.createElement("div", { className: "mrchat-messageTime" }, time)
         ));
       }
     }
-  )), (chatId || enableChat) && /* @__PURE__ */ React.createElement("div", { className: "mrchat-inputBar" }, /* @__PURE__ */ React.createElement(CustomRichTextEditor, { onSubmit: handleSendMessage })), /* @__PURE__ */ React.createElement(
+  )), (chatId || enableChat) && /* @__PURE__ */ React7.createElement("div", { className: "mrchat-inputBar" }, /* @__PURE__ */ React7.createElement(CustomRichTextEditor, { onSubmit: handleSendMessage })), /* @__PURE__ */ React7.createElement(
     UserProfileDrawer,
     {
       opened: showUserInfo,
@@ -5379,7 +5379,7 @@ function ChatUserMessage({
 
 // src/components/ChatUserList/ChatUserList.tsx
 import { useDispatch as useDispatch2, useSelector as useSelector2 } from "react-redux";
-import { useEffect as useEffect5, useState as useState5 } from "react";
+import React9, { useEffect as useEffect5, useState as useState5 } from "react";
 
 // src/components/ChatUserList/users_list.json
 var users_list_default = [
@@ -6032,6 +6032,7 @@ var users_list_default = [
 ];
 
 // src/components/VirtualizedList/index.tsx
+import React8 from "react";
 import { Virtuoso } from "react-virtuoso";
 function VirtualizedList({
   data: data2,
@@ -6041,7 +6042,7 @@ function VirtualizedList({
   endReached,
   ...props
 }) {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React8.createElement(
     Virtuoso,
     {
       style: { height },
@@ -6255,7 +6256,7 @@ function ChatUserList() {
     label: user.displayName || user.username,
     user
   }));
-  return /* @__PURE__ */ React.createElement("div", { className: "mrchat-chatWrapper" }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React9.createElement("div", { className: "mrchat-chatWrapper" }, /* @__PURE__ */ React9.createElement(
     Modal,
     {
       opened,
@@ -6267,7 +6268,7 @@ function ChatUserList() {
       centered: true,
       withCloseButton: true
     },
-    /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React9.createElement(
       Autocomplete,
       {
         mb: 12,
@@ -6286,11 +6287,11 @@ function ChatUserList() {
         },
         renderOption: ({ option }) => {
           const user = option.user;
-          return /* @__PURE__ */ React.createElement(Group, { gap: "sm" }, /* @__PURE__ */ React.createElement(Avatar3, { src: user.avatar, size: 36, radius: "xl" }), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Text3, { size: "sm" }, user.displayName || user.username), user.displayName && /* @__PURE__ */ React.createElement(Text3, { size: "xs", opacity: 0.5 }, "@", user.username)));
+          return /* @__PURE__ */ React9.createElement(Group, { gap: "sm" }, /* @__PURE__ */ React9.createElement(Avatar3, { src: user.avatar, size: 36, radius: "xl" }), /* @__PURE__ */ React9.createElement("div", null, /* @__PURE__ */ React9.createElement(Text3, { size: "sm" }, user.displayName || user.username), user.displayName && /* @__PURE__ */ React9.createElement(Text3, { size: "xs", opacity: 0.5 }, "@", user.username)));
         }
       }
     ),
-    /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React9.createElement(
       Autocomplete,
       {
         mb: 12,
@@ -6309,11 +6310,11 @@ function ChatUserList() {
         },
         renderOption: ({ option }) => {
           const user = option.user;
-          return /* @__PURE__ */ React.createElement(Group, { gap: "sm" }, /* @__PURE__ */ React.createElement(Avatar3, { src: user.avatar, size: 36, radius: "xl" }), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Text3, { size: "sm" }, user.displayName || user.username), user.displayName && /* @__PURE__ */ React.createElement(Text3, { size: "xs", opacity: 0.5 }, "@", user.username)));
+          return /* @__PURE__ */ React9.createElement(Group, { gap: "sm" }, /* @__PURE__ */ React9.createElement(Avatar3, { src: user.avatar, size: 36, radius: "xl" }), /* @__PURE__ */ React9.createElement("div", null, /* @__PURE__ */ React9.createElement(Text3, { size: "sm" }, user.displayName || user.username), user.displayName && /* @__PURE__ */ React9.createElement(Text3, { size: "xs", opacity: 0.5 }, "@", user.username)));
         }
       }
     ),
-    /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React9.createElement(
       Button,
       {
         fullWidth: true,
@@ -6322,7 +6323,7 @@ function ChatUserList() {
       },
       "Start Chat"
     )
-  ), /* @__PURE__ */ React.createElement("div", { className: "mrchat-chatContainer" }, /* @__PURE__ */ React.createElement("div", { className: "mrchat-sidebar" }, /* @__PURE__ */ React.createElement("div", { className: "mrchat-sidebarTop" }, /* @__PURE__ */ React.createElement("div", { className: "mrchat-topBar" }, /* @__PURE__ */ React.createElement(Text3, { size: "lg", fw: 600 }, "MrChat"), /* @__PURE__ */ React.createElement("div", { className: "mrchat-topActions" }, /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React9.createElement("div", { className: "mrchat-chatContainer" }, /* @__PURE__ */ React9.createElement("div", { className: "mrchat-sidebar" }, /* @__PURE__ */ React9.createElement("div", { className: "mrchat-sidebarTop" }, /* @__PURE__ */ React9.createElement("div", { className: "mrchat-topBar" }, /* @__PURE__ */ React9.createElement(Text3, { size: "lg", fw: 600 }, "MrChat"), /* @__PURE__ */ React9.createElement("div", { className: "mrchat-topActions" }, /* @__PURE__ */ React9.createElement(
     ActionIcon2,
     {
       variant: "subtle",
@@ -6332,15 +6333,15 @@ function ChatUserList() {
       },
       radius: "lg"
     },
-    /* @__PURE__ */ React.createElement(IconPlus, { size: 20, stroke: 3 })
-  )))), /* @__PURE__ */ React.createElement(Text3, { size: "xs", c: "dimmed", mt: "sm", mb: "xs", ml: 12 }, "All Messages"), /* @__PURE__ */ React.createElement("div", { className: "mrchat-scrollWrapper" }, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React9.createElement(IconPlus, { size: 20, stroke: 3 })
+  )))), /* @__PURE__ */ React9.createElement(Text3, { size: "xs", c: "dimmed", mt: "sm", mb: "xs", ml: 12 }, "All Messages"), /* @__PURE__ */ React9.createElement("div", { className: "mrchat-scrollWrapper" }, /* @__PURE__ */ React9.createElement(
     VirtualizedList,
     {
       data: chatList?.rows?.data || [],
       endReached: loadMoreChats,
       itemContent: (_, item) => {
         const isActive = item.chatId === chatId;
-        return /* @__PURE__ */ React.createElement(
+        return /* @__PURE__ */ React9.createElement(
           "div",
           {
             className: `${"mrchat-chatItem"} ${isActive ? "mrchat-activeChatItem" : ""}`,
@@ -6349,7 +6350,7 @@ function ChatUserList() {
               handleJoinChat(item);
             }
           },
-          item.avatar ? /* @__PURE__ */ React.createElement(Avatar3, { src: item.avatar, size: 36, radius: "xl" }) : /* @__PURE__ */ React.createElement(
+          item.avatar ? /* @__PURE__ */ React9.createElement(Avatar3, { src: item.avatar, size: 36, radius: "xl" }) : /* @__PURE__ */ React9.createElement(
             Avatar3,
             {
               key: item.displayName || item.username,
@@ -6357,7 +6358,7 @@ function ChatUserList() {
               color: "initials"
             }
           ),
-          /* @__PURE__ */ React.createElement("div", { className: "mrchat-chatInfo" }, /* @__PURE__ */ React.createElement(Text3, { className: "mrchat-chatLabelItem", truncate: true }, item.displayName || item.username), item.unreadCount > 0 && /* @__PURE__ */ React.createElement("div", { className: "mrchat-unreadBadge" }, item.unreadCount || 10), /* @__PURE__ */ React.createElement("div", { className: "mrchat-messagePreview" }, /* @__PURE__ */ React.createElement(
+          /* @__PURE__ */ React9.createElement("div", { className: "mrchat-chatInfo" }, /* @__PURE__ */ React9.createElement(Text3, { className: "mrchat-chatLabelItem", truncate: true }, item.displayName || item.username), item.unreadCount > 0 && /* @__PURE__ */ React9.createElement("div", { className: "mrchat-unreadBadge" }, item.unreadCount || 10), /* @__PURE__ */ React9.createElement("div", { className: "mrchat-messagePreview" }, /* @__PURE__ */ React9.createElement(
             Text3,
             {
               truncate: true,
@@ -6367,7 +6368,7 @@ function ChatUserList() {
               className: "mrchat-messagePreviewContent"
             },
             stripHtml(DOMPurify2.sanitize(item.message))
-          ), /* @__PURE__ */ React.createElement(
+          ), /* @__PURE__ */ React9.createElement(
             Text3,
             {
               size: "xs",
@@ -6379,7 +6380,7 @@ function ChatUserList() {
         );
       }
     }
-  ))), /* @__PURE__ */ React.createElement(
+  ))), /* @__PURE__ */ React9.createElement(
     ChatUserMessage,
     {
       chatId,
@@ -6403,7 +6404,7 @@ function ChatUserList() {
 function MrChat(props) {
   const [primaryColor] = useState6("customBrand");
   const theme = createAppTheme(primaryColor);
-  return /* @__PURE__ */ React4.createElement(ReduxProvider, null, /* @__PURE__ */ React4.createElement(SocketProvider, null, /* @__PURE__ */ React4.createElement(MantineProvider, { defaultColorScheme: "light", theme }, /* @__PURE__ */ React4.createElement(Notifications, null), /* @__PURE__ */ React4.createElement(ChatUserList, { ...props }))));
+  return /* @__PURE__ */ React10.createElement(ReduxProvider, null, /* @__PURE__ */ React10.createElement(SocketProvider, null, /* @__PURE__ */ React10.createElement(MantineProvider, { defaultColorScheme: "light", theme }, /* @__PURE__ */ React10.createElement(Notifications, null), /* @__PURE__ */ React10.createElement(ChatUserList, { ...props }))));
 }
 export {
   MrChat

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mr-chat-bird",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "private": false,
   "license": "MIT",
   "main": "./dist/index.js",