mr-chat-bird 1.0.3 → 1.0.4

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_react9 = __toESM(require("react"));
+var import_react9 = require("react");
 var import_core9 = require("@mantine/core");
 var import_notifications2 = require("@mantine/notifications");
 
@@ -325,8 +325,9 @@ var store = (0, import_toolkit2.configureStore)({
 });
 
 // src/store/provider.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
 function ReduxProvider({ children }) {
-  return /* @__PURE__ */ React.createElement(import_react_redux.Provider, { store }, children);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_redux.Provider, { store, children });
 }
 
 // src/store/socket/index.tsx
@@ -357,6 +358,7 @@ var getSocket = (userId) => {
 };
 
 // src/store/socket/index.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
 function SocketProvider({ children, userId }) {
   (0, import_react.useEffect)(() => {
     if (!userId) return;
@@ -373,7 +375,7 @@ function SocketProvider({ children, userId }) {
       }
     };
   }, [userId]);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children });
 }
 
 // src/components/ChatUserList/ChatUserList.tsx
@@ -4757,6 +4759,7 @@ var import_core5 = require("@mantine/core");
 var import_react2 = require("react");
 var import_core3 = require("@mantine/core");
 var import_data = __toESM(require("@emoji-mart/data"));
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var EmojiPicker = (0, import_react2.lazy)(() => import("@emoji-mart/react"));
 function EmojiPickerPopover({
   onSelect,
@@ -4766,7 +4769,7 @@ function EmojiPickerPopover({
   position = "bottom-start"
 }) {
   const [opened, setOpened] = (0, import_react2.useState)(false);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     import_core3.Popover,
     {
       opened,
@@ -4777,32 +4780,34 @@ function EmojiPickerPopover({
       withArrow: true,
       shadow: "md",
       trapFocus: false,
-      closeOnEscape: true
-    },
-    /* @__PURE__ */ React.createElement(import_core3.Popover.Target, null, (0, import_react2.cloneElement)(action, {
-      onClick: (e) => {
-        action.props?.onClick?.(e);
-        setOpened((prev) => !prev);
-      }
-    })),
-    /* @__PURE__ */ React.createElement(import_core3.Popover.Dropdown, { p: 0 }, /* @__PURE__ */ React.createElement(
-      import_react2.Suspense,
-      {
-        fallback: /* @__PURE__ */ React.createElement("div", { style: { padding: 12, width: 320 } }, /* @__PURE__ */ React.createElement(import_core3.Skeleton, { height: 280, radius: "md" }))
-      },
-      /* @__PURE__ */ React.createElement(
-        EmojiPicker,
-        {
-          previewPosition: "none",
-          theme: "light",
-          data: import_data.default,
-          onEmojiSelect: (emoji) => {
-            onSelect(emoji.native);
-            setOpened(false);
+      closeOnEscape: true,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core3.Popover.Target, { children: (0, import_react2.cloneElement)(action, {
+          onClick: (e) => {
+            action.props?.onClick?.(e);
+            setOpened((prev) => !prev);
           }
-        }
-      )
-    ))
+        }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core3.Popover.Dropdown, { p: 0, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_react2.Suspense,
+          {
+            fallback: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { padding: 12, width: 320 }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core3.Skeleton, { height: 280, radius: "md" }) }),
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              EmojiPicker,
+              {
+                previewPosition: "none",
+                theme: "light",
+                data: import_data.default,
+                onEmojiSelect: (emoji) => {
+                  onSelect(emoji.native);
+                  setOpened(false);
+                }
+              }
+            )
+          }
+        ) })
+      ]
+    }
   );
 }
 
@@ -4849,6 +4854,7 @@ var EmojiNode = Node3.create({
 });
 
 // src/components/RichTextEditor/RichTextEditor.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function CustomRichTextEditor({
   content = "",
   maxLength = 3e3,
@@ -4891,118 +4897,149 @@ function CustomRichTextEditor({
     editor.commands.focus();
     setCharCount(0);
   };
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     import_tiptap.RichTextEditor,
     {
       editor,
       w: "100%",
-      className: RichTextEditor_default.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: RichTextEditor_default.mainActionContainer }, /* @__PURE__ */ React.createElement(
-      EmojiPickerPopover,
-      {
-        onSelect: (emoji) => {
-          editor?.chain().focus().insertContent({
-            type: "emoji",
-            attrs: {
-              emoji
-            }
-          }).run();
-        },
-        action: /* @__PURE__ */ React.createElement(
-          import_core5.ActionIcon,
+      className: RichTextEditor_default.richTextEditorContainer,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_tiptap.RichTextEditor.Content, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_tiptap.RichTextEditor.Toolbar, { sticky: true, stickyOffset: "var(--docs-header-height)", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: RichTextEditor_default.mainActionContainer, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              EmojiPickerPopover,
+              {
+                onSelect: (emoji) => {
+                  editor?.chain().focus().insertContent({
+                    type: "emoji",
+                    attrs: {
+                      emoji
+                    }
+                  }).run();
+                },
+                action: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  import_core5.ActionIcon,
+                  {
+                    radius: "lg",
+                    variant: "subtle",
+                    "aria-label": "add",
+                    color: "#333",
+                    className: RichTextEditor_default.mainActionEmojiIcon,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AddReaction_default, {})
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              import_core5.ActionIcon,
+              {
+                radius: "lg",
+                variant: "subtle",
+                "aria-label": "text_format",
+                color: "#333",
+                className: RichTextEditor_default.mainTextFormatIcon,
+                onClick: () => setShowToolbar((prev) => !prev),
+                children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TextFormat_default, {})
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              import_core5.ActionIcon,
+              {
+                radius: "lg",
+                variant: "filled",
+                "aria-label": "send",
+                className: RichTextEditor_default.mainSendMsgIcon,
+                onClick: () => handleSubmitMsg(),
+                children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons_react.IconSend, { size: 18 })
+              }
+            )
+          ] }),
+          showToolbar && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_tiptap.RichTextEditor.ControlsGroup, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_tiptap.RichTextEditor.Bold, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_tiptap.RichTextEditor.Italic, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_tiptap.RichTextEditor.Underline, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_tiptap.RichTextEditor.Strikethrough, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_tiptap.RichTextEditor.Code, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_tiptap.RichTextEditor.Highlight, {})
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+              import_tiptap.RichTextEditor.ControlsGroup,
+              {
+                className: RichTextEditor_default.secondRichTextEditorToolBar,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_tiptap.RichTextEditor.BulletList, {}),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_tiptap.RichTextEditor.OrderedList, {}),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_core5.Menu, { trigger: "hover", openDelay: 200, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core5.Menu.Target, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      import_core5.ActionIcon,
+                      {
+                        variant: "outline",
+                        size: "md",
+                        color: "#495057",
+                        className: RichTextEditor_default.customToolActionItem,
+                        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons_react.IconAlignLeft, { size: 16, stroke: 1.5 })
+                      }
+                    ) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_core5.Menu.Dropdown, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                        import_core5.Menu.Item,
+                        {
+                          onClick: () => editor?.chain().focus().setTextAlign("left").run(),
+                          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons_react.IconAlignLeft, { size: 14 })
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                        import_core5.Menu.Item,
+                        {
+                          onClick: () => editor?.chain().focus().setTextAlign("center").run(),
+                          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons_react.IconAlignCenter, { size: 14 })
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                        import_core5.Menu.Item,
+                        {
+                          onClick: () => editor?.chain().focus().setTextAlign("right").run(),
+                          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons_react.IconAlignRight, { size: 14 })
+                        }
+                      )
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_tiptap.RichTextEditor.Link, {})
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              import_tiptap.RichTextEditor.ControlsGroup,
+              {
+                className: RichTextEditor_default.secondRichTextEditorToolBar,
+                children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_tiptap.RichTextEditor.ClearFormatting, {})
+              }
+            )
+          ] })
+        ] }),
+        showWarning && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          "div",
           {
-            radius: "lg",
-            variant: "subtle",
-            "aria-label": "add",
-            color: "#333",
-            className: RichTextEditor_default.mainActionEmojiIcon
-          },
-          /* @__PURE__ */ React.createElement(AddReaction_default, null)
+            style: {
+              textAlign: "right",
+              color: "red",
+              fontSize: 12,
+              marginTop: 4
+            },
+            children: [
+              "Character limit reached (",
+              charCount,
+              "/",
+              maxLength,
+              ")"
+            ]
+          }
         )
-      }
-    ), /* @__PURE__ */ React.createElement(
-      import_core5.ActionIcon,
-      {
-        radius: "lg",
-        variant: "subtle",
-        "aria-label": "text_format",
-        color: "#333",
-        className: RichTextEditor_default.mainTextFormatIcon,
-        onClick: () => setShowToolbar((prev) => !prev)
-      },
-      /* @__PURE__ */ React.createElement(TextFormat_default, null)
-    ), /* @__PURE__ */ React.createElement(
-      import_core5.ActionIcon,
-      {
-        radius: "lg",
-        variant: "filled",
-        "aria-label": "send",
-        className: RichTextEditor_default.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(
-      import_tiptap.RichTextEditor.ControlsGroup,
-      {
-        className: RichTextEditor_default.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(
-        import_core5.ActionIcon,
-        {
-          variant: "outline",
-          size: "md",
-          color: "#495057",
-          className: RichTextEditor_default.customToolActionItem
-        },
-        /* @__PURE__ */ React.createElement(import_icons_react.IconAlignLeft, { size: 16, stroke: 1.5 })
-      )), /* @__PURE__ */ React.createElement(import_core5.Menu.Dropdown, null, /* @__PURE__ */ React.createElement(
-        import_core5.Menu.Item,
-        {
-          onClick: () => editor?.chain().focus().setTextAlign("left").run()
-        },
-        /* @__PURE__ */ React.createElement(import_icons_react.IconAlignLeft, { size: 14 })
-      ), /* @__PURE__ */ React.createElement(
-        import_core5.Menu.Item,
-        {
-          onClick: () => editor?.chain().focus().setTextAlign("center").run()
-        },
-        /* @__PURE__ */ React.createElement(import_icons_react.IconAlignCenter, { size: 14 })
-      ), /* @__PURE__ */ React.createElement(
-        import_core5.Menu.Item,
-        {
-          onClick: () => editor?.chain().focus().setTextAlign("right").run()
-        },
-        /* @__PURE__ */ React.createElement(import_icons_react.IconAlignRight, { size: 14 })
-      ))),
-      /* @__PURE__ */ React.createElement(import_tiptap.RichTextEditor.Link, null)
-    ), /* @__PURE__ */ React.createElement(
-      import_tiptap.RichTextEditor.ControlsGroup,
-      {
-        className: RichTextEditor_default.secondRichTextEditorToolBar
-      },
-      /* @__PURE__ */ React.createElement(import_tiptap.RichTextEditor.ClearFormatting, null)
-    ))),
-    showWarning && /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        style: {
-          textAlign: "right",
-          color: "red",
-          fontSize: 12,
-          marginTop: 4
-        }
-      },
-      "Character limit reached (",
-      charCount,
-      "/",
-      maxLength,
-      ")"
-    )
-  ));
+      ]
+    }
+  ) });
 }
 
 // src/components/ChatUserList/ChatUserMessage.tsx
@@ -5011,7 +5048,8 @@ var import_react7 = require("react");
 var import_dompurify = __toESM(require("dompurify"));
 
 // src/components/VirtualizedList/ChatScrollContainer.tsx
-var import_react5 = __toESM(require("react"));
+var import_react5 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function ChatScrollContainer({
   data: data2,
   renderItem,
@@ -5060,7 +5098,7 @@ function ChatScrollContainer({
       isFetchingRef.current = false;
     }, 0);
   };
-  return /* @__PURE__ */ import_react5.default.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "div",
     {
       ref: containerRef,
@@ -5070,9 +5108,9 @@ function ChatScrollContainer({
         height: "100%",
         display: "flex",
         flexDirection: "column"
-      }
-    },
-    data2.map((item, index) => /* @__PURE__ */ import_react5.default.createElement("div", { key: item?.id || index }, renderItem(item, index)))
+      },
+      children: data2.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { children: renderItem(item, index) }, item?.id || index))
+    }
   );
 }
 
@@ -5085,6 +5123,7 @@ var import_icons_react2 = require("@tabler/icons-react");
 var UserProfileDrawer_default = {};
 
 // src/components/UserProfile/UserProfileDrawer.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function UserProfileDrawer({
   opened,
   onClose,
@@ -5102,51 +5141,74 @@ function UserProfileDrawer({
     setTimeout(onClose, 250);
   };
   if (!opened && !visible) return null;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: UserProfileDrawer_default.overlay, onClick: handleClose }, /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: `${UserProfileDrawer_default.drawer} ${visible ? UserProfileDrawer_default.open : UserProfileDrawer_default.close}`,
-      onClick: (e) => e.stopPropagation()
-    },
-    /* @__PURE__ */ React.createElement("div", { className: UserProfileDrawer_default.header }, /* @__PURE__ */ React.createElement("div", { className: UserProfileDrawer_default.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: UserProfileDrawer_default.profileSection }, /* @__PURE__ */ React.createElement(
-      import_core6.Avatar,
-      {
-        src: user?.avatar,
-        size: 150,
-        radius: "xl",
-        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: UserProfileDrawer_default.actions }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: UserProfileDrawer_default.overlay, onClick: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       "div",
       {
-        className: `${UserProfileDrawer_default.item} ${UserProfileDrawer_default.itemDanger}`,
-        onClick: onDeleteMessages
-      },
-      /* @__PURE__ */ React.createElement(import_icons_react2.IconTrash, { size: 18 }),
-      /* @__PURE__ */ React.createElement("span", null, "Delete all messages")
-    ), /* @__PURE__ */ React.createElement(
+        className: `${UserProfileDrawer_default.drawer} ${visible ? UserProfileDrawer_default.open : UserProfileDrawer_default.close}`,
+        onClick: (e) => e.stopPropagation(),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: UserProfileDrawer_default.header, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: UserProfileDrawer_default.backBtn, onClick: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons_react2.IconArrowLeft, { size: 20 }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core6.Text, { fw: 600, children: "Contact info" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: UserProfileDrawer_default.profileSection, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              import_core6.Avatar,
+              {
+                src: user?.avatar,
+                size: 150,
+                radius: "xl",
+                style: { cursor: "pointer" },
+                onClick: () => user?.avatar ? setShowImagePreview(true) : {}
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core6.Text, { fw: 700, size: "lg", mt: "sm", children: user?.displayName }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_core6.Text, { size: "sm", c: "dimmed", children: [
+              "@",
+              user?.username
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: UserProfileDrawer_default.actions, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+              "div",
+              {
+                className: `${UserProfileDrawer_default.item} ${UserProfileDrawer_default.itemDanger}`,
+                onClick: onDeleteMessages,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons_react2.IconTrash, { size: 18 }),
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "Delete all messages" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+              "div",
+              {
+                className: `${UserProfileDrawer_default.item} ${UserProfileDrawer_default.itemDanger}`,
+                onClick: onBlock,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons_react2.IconBan, { size: 18 }),
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "Block" })
+                ]
+              }
+            )
+          ] })
+        ]
+      }
+    ) }),
+    showImagePreview && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "div",
       {
-        className: `${UserProfileDrawer_default.item} ${UserProfileDrawer_default.itemDanger}`,
-        onClick: onBlock
-      },
-      /* @__PURE__ */ React.createElement(import_icons_react2.IconBan, { size: 18 }),
-      /* @__PURE__ */ React.createElement("span", null, "Block")
-    ))
-  )), showImagePreview && /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: UserProfileDrawer_default.imagePreview,
-      onClick: () => setShowImagePreview(false)
-    },
-    /* @__PURE__ */ React.createElement("img", { src: user?.avatar, alt: "profile" })
-  ));
+        className: UserProfileDrawer_default.imagePreview,
+        onClick: () => setShowImagePreview(false),
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("img", { src: user?.avatar, alt: "profile" })
+      }
+    )
+  ] });
 }
 
 // src/components/ChatUserList/ChatUserMessage.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function ChatUserMessage({
   chatId,
   enableChat,
@@ -5293,102 +5355,126 @@ function ChatUserMessage({
       deleteMessagesByChatId({ chatId, userId: senderDetails?.userId })
     );
   };
-  return /* @__PURE__ */ React.createElement("div", { className: ChatUserList_default.mainArea }, /* @__PURE__ */ React.createElement("div", { className: ChatUserList_default.chatHeader }, receiverDetails && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: ChatUserList_default.receiverInfo,
-      onClick: () => setShowUserInfo(true)
-    },
-    receiverDetails?.avatar ? /* @__PURE__ */ React.createElement(import_core7.Avatar, { src: receiverDetails.avatar, size: 36, radius: "xl" }) : /* @__PURE__ */ React.createElement(
-      import_core7.Avatar,
-      {
-        key: receiverDetails?.displayName || receiverDetails?.username,
-        name: receiverDetails?.displayName || receiverDetails?.username,
-        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(
-    import_core7.Menu.Item,
-    {
-      color: "red",
-      leftSection: /* @__PURE__ */ React.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: ChatUserList_default.messageArea }, isEmpty ? /* @__PURE__ */ React.createElement("div", { className: ChatUserList_default.emptyState }, /* @__PURE__ */ React.createElement("div", { className: ChatUserList_default.encryptionMinimal }, /* @__PURE__ */ React.createElement(import_icons_react3.IconLock, { size: 20, stroke: 1.8 }), /* @__PURE__ */ React.createElement(import_core7.Text, { className: ChatUserList_default.encryptionText, size: "md" }, "End-to-end encrypted"))) : /* @__PURE__ */ React.createElement(
-    ChatScrollContainer,
-    {
-      data: messages,
-      hasMore: messageList?.hasMore,
-      loadMore: handleLoadOlderMessages,
-      scrollToBottomTrigger: scrollTrigger,
-      renderItem: (item, index) => {
-        const isOutgoing = item?.sender === senderDetails?.userId;
-        const currentDate = new Date(item?.createdAt);
-        const prevItem = messages[index - 1];
-        const showDate = index === 0 || new Date(prevItem?.createdAt).toDateString() !== currentDate.toDateString();
-        const today = /* @__PURE__ */ new Date();
-        const yesterday = /* @__PURE__ */ new Date();
-        yesterday.setDate(today.getDate() - 1);
-        const isToday = currentDate.toDateString() === today.toDateString();
-        const isYesterday = currentDate.toDateString() === yesterday.toDateString();
-        let formattedDate = "";
-        if (isToday) {
-          formattedDate = "Today";
-        } else if (isYesterday) {
-          formattedDate = "Yesterday";
-        } else {
-          formattedDate = currentDate.toLocaleDateString(void 0, {
-            weekday: "short",
-            month: "short",
-            day: "numeric"
-          });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: ChatUserList_default.mainArea, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: ChatUserList_default.chatHeader, children: receiverDetails && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        "div",
+        {
+          className: ChatUserList_default.receiverInfo,
+          onClick: () => setShowUserInfo(true),
+          children: [
+            receiverDetails?.avatar ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core7.Avatar, { src: receiverDetails.avatar, size: 36, radius: "xl" }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              import_core7.Avatar,
+              {
+                name: receiverDetails?.displayName || receiverDetails?.username,
+                color: "initials"
+              },
+              receiverDetails?.displayName || receiverDetails?.username
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core7.Text, { fw: 600, size: "md", children: receiverDetails?.displayName || receiverDetails?.username })
+          ]
         }
-        const time = currentDate.toLocaleTimeString([], {
-          hour: "2-digit",
-          minute: "2-digit",
-          hour12: false
-        });
-        return /* @__PURE__ */ React.createElement("div", { key: item?.id + "_" + index }, showDate && /* @__PURE__ */ React.createElement("div", { className: ChatUserList_default.dateSeparator }, formattedDate), /* @__PURE__ */ React.createElement(
-          "div",
-          {
-            style: {
-              borderRadius: item.sender === senderDetails?.userId ? "16px 16px 1px 16px" : "16px 16px 16px 1px"
-            },
-            className: `${ChatUserList_default.messageBubble} ${isOutgoing ? ChatUserList_default.outgoing : ChatUserList_default.incoming}`
-          },
-          /* @__PURE__ */ React.createElement(
-            "div",
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_core7.Menu, { shadow: "md", width: 200, position: "bottom-end", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core7.Menu.Target, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons_react3.IconDotsVertical, { size: 20, style: { cursor: "pointer" } }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_core7.Menu.Dropdown, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            import_core7.Menu.Item,
             {
-              className: ChatUserList_default.messageContent,
-              dangerouslySetInnerHTML: {
-                __html: import_dompurify.default.sanitize(item?.message)
-              }
+              color: "red",
+              leftSection: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons_react3.IconTrash, { size: 16 }),
+              onClick: handleDeleteMessages,
+              children: "Delete all messages"
             }
           ),
-          /* @__PURE__ */ React.createElement("div", { className: ChatUserList_default.messageTime }, time)
-        ));
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core7.Menu.Item, { color: "red", leftSection: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons_react3.IconBan, { size: 16 }), children: "Block" })
+        ] })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: ChatUserList_default.messageArea, children: isEmpty ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: ChatUserList_default.emptyState, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: ChatUserList_default.encryptionMinimal, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons_react3.IconLock, { size: 20, stroke: 1.8 }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core7.Text, { className: ChatUserList_default.encryptionText, size: "md", children: "End-to-end encrypted" })
+    ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      ChatScrollContainer,
+      {
+        data: messages,
+        hasMore: messageList?.hasMore,
+        loadMore: handleLoadOlderMessages,
+        scrollToBottomTrigger: scrollTrigger,
+        renderItem: (item, index) => {
+          const isOutgoing = item?.sender === senderDetails?.userId;
+          const currentDate = new Date(item?.createdAt);
+          const prevItem = messages[index - 1];
+          const showDate = index === 0 || new Date(prevItem?.createdAt).toDateString() !== currentDate.toDateString();
+          const today = /* @__PURE__ */ new Date();
+          const yesterday = /* @__PURE__ */ new Date();
+          yesterday.setDate(today.getDate() - 1);
+          const isToday = currentDate.toDateString() === today.toDateString();
+          const isYesterday = currentDate.toDateString() === yesterday.toDateString();
+          let formattedDate = "";
+          if (isToday) {
+            formattedDate = "Today";
+          } else if (isYesterday) {
+            formattedDate = "Yesterday";
+          } else {
+            formattedDate = currentDate.toLocaleDateString(void 0, {
+              weekday: "short",
+              month: "short",
+              day: "numeric"
+            });
+          }
+          const time = currentDate.toLocaleTimeString([], {
+            hour: "2-digit",
+            minute: "2-digit",
+            hour12: false
+          });
+          return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { children: [
+            showDate && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: ChatUserList_default.dateSeparator, children: formattedDate }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+              "div",
+              {
+                style: {
+                  borderRadius: item.sender === senderDetails?.userId ? "16px 16px 1px 16px" : "16px 16px 16px 1px"
+                },
+                className: `${ChatUserList_default.messageBubble} ${isOutgoing ? ChatUserList_default.outgoing : ChatUserList_default.incoming}`,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                    "div",
+                    {
+                      className: ChatUserList_default.messageContent,
+                      dangerouslySetInnerHTML: {
+                        __html: import_dompurify.default.sanitize(item?.message)
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: ChatUserList_default.messageTime, children: time })
+                ]
+              }
+            )
+          ] }, item?.id + "_" + index);
+        }
       }
-    }
-  )), (chatId || enableChat) && /* @__PURE__ */ React.createElement("div", { className: ChatUserList_default.inputBar }, /* @__PURE__ */ React.createElement(CustomRichTextEditor, { onSubmit: handleSendMessage })), /* @__PURE__ */ React.createElement(
-    UserProfileDrawer,
-    {
-      opened: showUserInfo,
-      onClose: () => setShowUserInfo(false),
-      user: {
-        avatar: receiverDetails?.avatar,
-        username: receiverDetails?.username,
-        displayName: receiverDetails?.displayName
-      },
-      onDeleteMessages: () => {
-        handleDeleteMessages();
-      },
-      onBlock: () => {
-        console.log("block user");
+    ) }),
+    (chatId || enableChat) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: ChatUserList_default.inputBar, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CustomRichTextEditor, { onSubmit: handleSendMessage }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      UserProfileDrawer,
+      {
+        opened: showUserInfo,
+        onClose: () => setShowUserInfo(false),
+        user: {
+          avatar: receiverDetails?.avatar,
+          username: receiverDetails?.username,
+          displayName: receiverDetails?.displayName
+        },
+        onDeleteMessages: () => {
+          handleDeleteMessages();
+        },
+        onBlock: () => {
+          console.log("block user");
+        }
       }
-    }
-  ));
+    )
+  ] });
 }
 
 // src/components/ChatUserList/ChatUserList.tsx
@@ -6047,6 +6133,7 @@ var users_list_default = [
 
 // src/components/VirtualizedList/index.tsx
 var import_react_virtuoso = require("react-virtuoso");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function VirtualizedList({
   data: data2,
   itemContent,
@@ -6055,7 +6142,7 @@ function VirtualizedList({
   endReached,
   ...props
 }) {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     import_react_virtuoso.Virtuoso,
     {
       style: { height },
@@ -6098,6 +6185,7 @@ var getChatDisplayTime = (timestamp) => {
 };
 
 // src/components/ChatUserList/ChatUserList.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function ChatUserList() {
   const [opened, { open, close }] = (0, import_hooks.useDisclosure)(false);
   const dispatch = (0, import_react_redux3.useDispatch)();
@@ -6269,155 +6357,201 @@ function ChatUserList() {
     label: user.displayName || user.username,
     user
   }));
-  return /* @__PURE__ */ React.createElement("div", { className: ChatUserList_default.chatWrapper }, /* @__PURE__ */ React.createElement(
-    import_core8.Modal,
-    {
-      opened,
-      onClose: () => {
-        close();
-        setReceiverSearchValue("");
-      },
-      title: "Find User",
-      centered: true,
-      withCloseButton: true
-    },
-    /* @__PURE__ */ React.createElement(
-      import_core8.Autocomplete,
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: ChatUserList_default.chatWrapper, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+      import_core8.Modal,
       {
-        mb: 12,
-        label: "Sender",
-        placeholder: "Type username...",
-        limit: 20,
-        data: userOptions,
-        value: senderSearchValue,
-        onChange: setSenderSearchValue,
-        onOptionSubmit: (val) => {
-          const selected = users_list_default.find((u) => u.username === val);
-          if (selected) {
-            setSenderSearchValue("");
-            setSenderUserDetails(selected);
-          }
-        },
-        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)));
-        }
-      }
-    ),
-    /* @__PURE__ */ React.createElement(
-      import_core8.Autocomplete,
-      {
-        mb: 12,
-        label: "Receiver",
-        placeholder: "Type username...",
-        limit: 20,
-        data: userOptions,
-        value: receiverSearchValue,
-        onChange: setReceiverSearchValue,
-        onOptionSubmit: (val) => {
-          const selected = users_list_default.find((u) => u.username === val);
-          if (selected) {
-            setReceiverSearchValue("");
-            setReceiverUserDetails(selected);
-          }
+        opened,
+        onClose: () => {
+          close();
+          setReceiverSearchValue("");
         },
-        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)));
-        }
-      }
-    ),
-    /* @__PURE__ */ React.createElement(
-      import_core8.Button,
-      {
-        fullWidth: true,
-        onClick: handleStartChat,
-        disabled: !Boolean(receiverUserDetails?.username)
-      },
-      "Start Chat"
-    )
-  ), /* @__PURE__ */ React.createElement("div", { className: ChatUserList_default.chatContainer }, /* @__PURE__ */ React.createElement("div", { className: ChatUserList_default.sidebar }, /* @__PURE__ */ React.createElement("div", { className: ChatUserList_default.sidebarTop }, /* @__PURE__ */ React.createElement("div", { className: ChatUserList_default.topBar }, /* @__PURE__ */ React.createElement(import_core8.Text, { size: "lg", fw: 600 }, "MrChat"), /* @__PURE__ */ React.createElement("div", { className: ChatUserList_default.topActions }, /* @__PURE__ */ React.createElement(
-    import_core8.ActionIcon,
-    {
-      variant: "subtle",
-      onClick: () => {
-        setReceiverUserDetails(null);
-        open();
-      },
-      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: ChatUserList_default.scrollWrapper }, /* @__PURE__ */ React.createElement(
-    VirtualizedList,
-    {
-      data: chatList?.rows?.data || [],
-      endReached: loadMoreChats,
-      itemContent: (_, item) => {
-        const isActive = item.chatId === chatId;
-        return /* @__PURE__ */ React.createElement(
-          "div",
-          {
-            className: `${ChatUserList_default.chatItem} ${isActive ? ChatUserList_default.activeChatItem : ""}`,
-            onClick: () => {
-              if (isActive) return;
-              handleJoinChat(item);
-            }
-          },
-          item.avatar ? /* @__PURE__ */ React.createElement(import_core8.Avatar, { src: item.avatar, size: 36, radius: "xl" }) : /* @__PURE__ */ React.createElement(
-            import_core8.Avatar,
+        title: "Find User",
+        centered: true,
+        withCloseButton: true,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            import_core8.Autocomplete,
             {
-              key: item.displayName || item.username,
-              name: item.displayName || item.username,
-              color: "initials"
+              mb: 12,
+              label: "Sender",
+              placeholder: "Type username...",
+              limit: 20,
+              data: userOptions,
+              value: senderSearchValue,
+              onChange: setSenderSearchValue,
+              onOptionSubmit: (val) => {
+                const selected = users_list_default.find((u) => u.username === val);
+                if (selected) {
+                  setSenderSearchValue("");
+                  setSenderUserDetails(selected);
+                }
+              },
+              renderOption: ({ option }) => {
+                const user = option.user;
+                return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core8.Group, { gap: "sm", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core8.Avatar, { src: user.avatar, size: 36, radius: "xl" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core8.Text, { size: "sm", children: user.displayName || user.username }),
+                    user.displayName && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core8.Text, { size: "xs", opacity: 0.5, children: [
+                      "@",
+                      user.username
+                    ] })
+                  ] })
+                ] });
+              }
             }
           ),
-          /* @__PURE__ */ React.createElement("div", { className: ChatUserList_default.chatInfo }, /* @__PURE__ */ React.createElement(import_core8.Text, { className: ChatUserList_default.chatLabelItem, truncate: true }, item.displayName || item.username), item.unreadCount > 0 && /* @__PURE__ */ React.createElement("div", { className: ChatUserList_default.unreadBadge }, item.unreadCount || 10), /* @__PURE__ */ React.createElement("div", { className: ChatUserList_default.messagePreview }, /* @__PURE__ */ React.createElement(
-            import_core8.Text,
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            import_core8.Autocomplete,
             {
-              truncate: true,
-              size: "xs",
-              c: "dimmed",
-              style: { maxWidth: 150 },
-              className: ChatUserList_default.messagePreviewContent
-            },
-            stripHtml(import_dompurify2.default.sanitize(item.message))
-          ), /* @__PURE__ */ React.createElement(
-            import_core8.Text,
+              mb: 12,
+              label: "Receiver",
+              placeholder: "Type username...",
+              limit: 20,
+              data: userOptions,
+              value: receiverSearchValue,
+              onChange: setReceiverSearchValue,
+              onOptionSubmit: (val) => {
+                const selected = users_list_default.find((u) => u.username === val);
+                if (selected) {
+                  setReceiverSearchValue("");
+                  setReceiverUserDetails(selected);
+                }
+              },
+              renderOption: ({ option }) => {
+                const user = option.user;
+                return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core8.Group, { gap: "sm", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core8.Avatar, { src: user.avatar, size: 36, radius: "xl" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core8.Text, { size: "sm", children: user.displayName || user.username }),
+                    user.displayName && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core8.Text, { size: "xs", opacity: 0.5, children: [
+                      "@",
+                      user.username
+                    ] })
+                  ] })
+                ] });
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            import_core8.Button,
             {
-              size: "xs",
-              c: "dimmed",
-              className: ChatUserList_default.messagePreviewTime
-            },
-            getChatDisplayTime(item.updatedAt || item.createdAt)
-          )))
-        );
-      }
-    }
-  ))), /* @__PURE__ */ React.createElement(
-    ChatUserMessage,
-    {
-      chatId,
-      enableChat,
-      senderDetails,
-      receiverDetails,
-      onChatInitialized: (data2) => {
-        handleJoinChat({
-          chatId: data2.chatId,
-          userId: receiverDetails?.userId,
-          username: receiverDetails?.username,
-          displayName: receiverDetails?.displayName,
-          avatar: receiverDetails?.avatar
-        });
+              fullWidth: true,
+              onClick: handleStartChat,
+              disabled: !Boolean(receiverUserDetails?.username),
+              children: "Start Chat"
+            }
+          )
+        ]
       }
-    }
-  )));
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: ChatUserList_default.chatContainer, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: ChatUserList_default.sidebar, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: ChatUserList_default.sidebarTop, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: ChatUserList_default.topBar, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core8.Text, { size: "lg", fw: 600, children: "MrChat" }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: ChatUserList_default.topActions, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            import_core8.ActionIcon,
+            {
+              variant: "subtle",
+              onClick: () => {
+                setReceiverUserDetails(null);
+                open();
+              },
+              radius: "lg",
+              children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons_react4.IconPlus, { size: 20, stroke: 3 })
+            }
+          ) })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core8.Text, { size: "xs", c: "dimmed", mt: "sm", mb: "xs", ml: 12, children: "All Messages" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: ChatUserList_default.scrollWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          VirtualizedList,
+          {
+            data: chatList?.rows?.data || [],
+            endReached: loadMoreChats,
+            itemContent: (_, item) => {
+              const isActive = item.chatId === chatId;
+              return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                "div",
+                {
+                  className: `${ChatUserList_default.chatItem} ${isActive ? ChatUserList_default.activeChatItem : ""}`,
+                  onClick: () => {
+                    if (isActive) return;
+                    handleJoinChat(item);
+                  },
+                  children: [
+                    item.avatar ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core8.Avatar, { src: item.avatar, size: 36, radius: "xl" }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                      import_core8.Avatar,
+                      {
+                        name: item.displayName || item.username,
+                        color: "initials"
+                      },
+                      item.displayName || item.username
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: ChatUserList_default.chatInfo, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core8.Text, { className: ChatUserList_default.chatLabelItem, truncate: true, children: item.displayName || item.username }),
+                      item.unreadCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: ChatUserList_default.unreadBadge, children: item.unreadCount || 10 }),
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: ChatUserList_default.messagePreview, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                          import_core8.Text,
+                          {
+                            truncate: true,
+                            size: "xs",
+                            c: "dimmed",
+                            style: { maxWidth: 150 },
+                            className: ChatUserList_default.messagePreviewContent,
+                            children: stripHtml(import_dompurify2.default.sanitize(item.message))
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                          import_core8.Text,
+                          {
+                            size: "xs",
+                            c: "dimmed",
+                            className: ChatUserList_default.messagePreviewTime,
+                            children: getChatDisplayTime(item.updatedAt || item.createdAt)
+                          }
+                        )
+                      ] })
+                    ] })
+                  ]
+                }
+              );
+            }
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        ChatUserMessage,
+        {
+          chatId,
+          enableChat,
+          senderDetails,
+          receiverDetails,
+          onChatInitialized: (data2) => {
+            handleJoinChat({
+              chatId: data2.chatId,
+              userId: receiverDetails?.userId,
+              username: receiverDetails?.username,
+              displayName: receiverDetails?.displayName,
+              avatar: receiverDetails?.avatar
+            });
+          }
+        }
+      )
+    ] })
+  ] });
 }
 
 // src/components/MrChat/index.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function MrChat(props) {
   const [primaryColor] = (0, import_react9.useState)("customBrand");
   const theme = createAppTheme(primaryColor);
-  return /* @__PURE__ */ import_react9.default.createElement(ReduxProvider, null, /* @__PURE__ */ import_react9.default.createElement(SocketProvider, null, /* @__PURE__ */ import_react9.default.createElement(import_core9.MantineProvider, { defaultColorScheme: "light", theme }, /* @__PURE__ */ import_react9.default.createElement(import_notifications2.Notifications, null), /* @__PURE__ */ import_react9.default.createElement(ChatUserList, { ...props }))));
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ReduxProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SocketProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_core9.MantineProvider, { defaultColorScheme: "light", theme, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_notifications2.Notifications, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChatUserList, { ...props })
+  ] }) }) });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {