mr-chat-bird 1.0.2 → 1.0.4

package/dist/index.mjs

@@ -289,8 +289,9 @@ var store = configureStore({
 });
 
 // src/store/provider.tsx
+import { jsx } from "react/jsx-runtime";
 function ReduxProvider({ children }) {
-  return /* @__PURE__ */ React.createElement(Provider, { store }, children);
+  return /* @__PURE__ */ jsx(Provider, { store, children });
 }
 
 // src/store/socket/index.tsx
@@ -321,6 +322,7 @@ var getSocket = (userId) => {
 };
 
 // src/store/socket/index.tsx
+import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
 function SocketProvider({ children, userId }) {
   useEffect(() => {
     if (!userId) return;
@@ -337,7 +339,7 @@ function SocketProvider({ children, userId }) {
       }
     };
   }, [userId]);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
+  return /* @__PURE__ */ jsx2(Fragment, { children });
 }
 
 // src/components/ChatUserList/ChatUserList.tsx
@@ -387,7 +389,7 @@ import { TextSelection as TextSelection2 } from "@tiptap/pm/state";
 import { TextSelection as TextSelection3 } from "@tiptap/pm/state";
 import { Selection, TextSelection as TextSelection4 } from "@tiptap/pm/state";
 import { Fragment as Fragment2 } from "@tiptap/pm/model";
-import { DOMParser, Fragment, Node as ProseMirrorNode, Schema } from "@tiptap/pm/model";
+import { DOMParser, Fragment as Fragment3, Node as ProseMirrorNode, Schema } from "@tiptap/pm/model";
 import { Selection as Selection2 } from "@tiptap/pm/state";
 import { ReplaceAroundStep, ReplaceStep } from "@tiptap/pm/transform";
 import {
@@ -423,7 +425,7 @@ import { TextSelection as TextSelection5 } from "@tiptap/pm/state";
 import { sinkListItem as originalSinkListItem } from "@tiptap/pm/schema-list";
 import { NodeSelection as NodeSelection3, TextSelection as TextSelection6 } from "@tiptap/pm/state";
 import { canSplit } from "@tiptap/pm/transform";
-import { Fragment as Fragment3, Slice } from "@tiptap/pm/model";
+import { Fragment as Fragment32, Slice } from "@tiptap/pm/model";
 import { TextSelection as TextSelection7 } from "@tiptap/pm/state";
 import { canSplit as canSplit2 } from "@tiptap/pm/transform";
 import { TextSelection as TextSelection8 } from "@tiptap/pm/state";
@@ -1013,7 +1015,7 @@ function elementFromString(value) {
   return removeWhitespaces(html);
 }
 function createNodeFromContent(content, schema, options) {
-  if (content instanceof ProseMirrorNode || content instanceof Fragment) {
+  if (content instanceof ProseMirrorNode || content instanceof Fragment3) {
     return content;
   }
   options = {
@@ -1027,7 +1029,7 @@ function createNodeFromContent(content, schema, options) {
     try {
       const isArrayContent = Array.isArray(content) && content.length > 0;
       if (isArrayContent) {
-        return Fragment.fromArray(content.map((item) => schema.nodeFromJSON(item)));
+        return Fragment3.fromArray(content.map((item) => schema.nodeFromJSON(item)));
       }
       const node = schema.nodeFromJSON(content);
       if (options.errorOnInvalidContent) {
@@ -2451,10 +2453,10 @@ var splitListItem = (typeOrName, overrideAttrs = {}) => ({ tr, state, dispatch,
       return false;
     }
     if (dispatch) {
-      let wrap = Fragment3.empty;
+      let wrap = Fragment32.empty;
       const depthBefore = $from.index(-1) ? 1 : $from.index(-2) ? 2 : 3;
       for (let d = $from.depth - depthBefore; d >= $from.depth - 3; d -= 1) {
-        wrap = Fragment3.from($from.node(d).copy(wrap));
+        wrap = Fragment32.from($from.node(d).copy(wrap));
       }
       const depthAfter = (
         // eslint-disable-next-line no-nested-ternary
@@ -2465,7 +2467,7 @@ var splitListItem = (typeOrName, overrideAttrs = {}) => ({ tr, state, dispatch,
         ...overrideAttrs
       };
       const nextType2 = ((_a = type.contentMatch.defaultType) == null ? void 0 : _a.createAndFill(newNextTypeAttributes2)) || void 0;
-      wrap = wrap.append(Fragment3.from(type.createAndFill(null, nextType2) || void 0));
+      wrap = wrap.append(Fragment32.from(type.createAndFill(null, nextType2) || void 0));
       const start = $from.before($from.depth - (depthBefore - 1));
       tr.replace(start, $from.after(-depthAfter), new Slice(wrap, 4 - depthBefore, 0));
       let sel = -1;
@@ -4749,6 +4751,7 @@ import {
 } from "react";
 import { Popover, Skeleton } from "@mantine/core";
 import data from "@emoji-mart/data";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 var EmojiPicker = lazy(() => import("@emoji-mart/react"));
 function EmojiPickerPopover({
   onSelect,
@@ -4758,7 +4761,7 @@ function EmojiPickerPopover({
   position = "bottom-start"
 }) {
   const [opened, setOpened] = useState(false);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     Popover,
     {
       opened,
@@ -4769,32 +4772,34 @@ function EmojiPickerPopover({
       withArrow: true,
       shadow: "md",
       trapFocus: false,
-      closeOnEscape: true
-    },
-    /* @__PURE__ */ React.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(
-      Suspense,
-      {
-        fallback: /* @__PURE__ */ React.createElement("div", { style: { padding: 12, width: 320 } }, /* @__PURE__ */ React.createElement(Skeleton, { height: 280, radius: "md" }))
-      },
-      /* @__PURE__ */ React.createElement(
-        EmojiPicker,
-        {
-          previewPosition: "none",
-          theme: "light",
-          data,
-          onEmojiSelect: (emoji) => {
-            onSelect(emoji.native);
-            setOpened(false);
+      closeOnEscape: true,
+      children: [
+        /* @__PURE__ */ jsx3(Popover.Target, { children: cloneElement(action, {
+          onClick: (e) => {
+            action.props?.onClick?.(e);
+            setOpened((prev) => !prev);
           }
-        }
-      )
-    ))
+        }) }),
+        /* @__PURE__ */ jsx3(Popover.Dropdown, { p: 0, children: /* @__PURE__ */ jsx3(
+          Suspense,
+          {
+            fallback: /* @__PURE__ */ jsx3("div", { style: { padding: 12, width: 320 }, children: /* @__PURE__ */ jsx3(Skeleton, { height: 280, radius: "md" }) }),
+            children: /* @__PURE__ */ jsx3(
+              EmojiPicker,
+              {
+                previewPosition: "none",
+                theme: "light",
+                data,
+                onEmojiSelect: (emoji) => {
+                  onSelect(emoji.native);
+                  setOpened(false);
+                }
+              }
+            )
+          }
+        ) })
+      ]
+    }
   );
 }
 
@@ -4841,6 +4846,7 @@ var EmojiNode = Node3.create({
 });
 
 // src/components/RichTextEditor/RichTextEditor.tsx
+import { Fragment as Fragment6, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 function CustomRichTextEditor({
   content = "",
   maxLength = 3e3,
@@ -4883,118 +4889,149 @@ function CustomRichTextEditor({
     editor.commands.focus();
     setCharCount(0);
   };
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx4(Fragment6, { children: /* @__PURE__ */ jsxs2(
     RichTextEditor,
     {
       editor,
       w: "100%",
-      className: RichTextEditor_default.richTextEditorContainer
-    },
-    /* @__PURE__ */ React.createElement(RichTextEditor.Content, null),
-    /* @__PURE__ */ React.createElement(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(
-          ActionIcon,
+      className: RichTextEditor_default.richTextEditorContainer,
+      children: [
+        /* @__PURE__ */ jsx4(RichTextEditor.Content, {}),
+        /* @__PURE__ */ jsxs2(RichTextEditor.Toolbar, { sticky: true, stickyOffset: "var(--docs-header-height)", children: [
+          /* @__PURE__ */ jsxs2("div", { className: RichTextEditor_default.mainActionContainer, children: [
+            /* @__PURE__ */ jsx4(
+              EmojiPickerPopover,
+              {
+                onSelect: (emoji) => {
+                  editor?.chain().focus().insertContent({
+                    type: "emoji",
+                    attrs: {
+                      emoji
+                    }
+                  }).run();
+                },
+                action: /* @__PURE__ */ jsx4(
+                  ActionIcon,
+                  {
+                    radius: "lg",
+                    variant: "subtle",
+                    "aria-label": "add",
+                    color: "#333",
+                    className: RichTextEditor_default.mainActionEmojiIcon,
+                    children: /* @__PURE__ */ jsx4(AddReaction_default, {})
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx4(
+              ActionIcon,
+              {
+                radius: "lg",
+                variant: "subtle",
+                "aria-label": "text_format",
+                color: "#333",
+                className: RichTextEditor_default.mainTextFormatIcon,
+                onClick: () => setShowToolbar((prev) => !prev),
+                children: /* @__PURE__ */ jsx4(TextFormat_default, {})
+              }
+            ),
+            /* @__PURE__ */ jsx4(
+              ActionIcon,
+              {
+                radius: "lg",
+                variant: "filled",
+                "aria-label": "send",
+                className: RichTextEditor_default.mainSendMsgIcon,
+                onClick: () => handleSubmitMsg(),
+                children: /* @__PURE__ */ jsx4(IconSend, { size: 18 })
+              }
+            )
+          ] }),
+          showToolbar && /* @__PURE__ */ jsxs2(Fragment6, { children: [
+            /* @__PURE__ */ jsxs2(RichTextEditor.ControlsGroup, { children: [
+              /* @__PURE__ */ jsx4(RichTextEditor.Bold, {}),
+              /* @__PURE__ */ jsx4(RichTextEditor.Italic, {}),
+              /* @__PURE__ */ jsx4(RichTextEditor.Underline, {}),
+              /* @__PURE__ */ jsx4(RichTextEditor.Strikethrough, {}),
+              /* @__PURE__ */ jsx4(RichTextEditor.Code, {}),
+              /* @__PURE__ */ jsx4(RichTextEditor.Highlight, {})
+            ] }),
+            /* @__PURE__ */ jsxs2(
+              RichTextEditor.ControlsGroup,
+              {
+                className: RichTextEditor_default.secondRichTextEditorToolBar,
+                children: [
+                  /* @__PURE__ */ jsx4(RichTextEditor.BulletList, {}),
+                  /* @__PURE__ */ jsx4(RichTextEditor.OrderedList, {}),
+                  /* @__PURE__ */ jsxs2(Menu, { trigger: "hover", openDelay: 200, children: [
+                    /* @__PURE__ */ jsx4(Menu.Target, { children: /* @__PURE__ */ jsx4(
+                      ActionIcon,
+                      {
+                        variant: "outline",
+                        size: "md",
+                        color: "#495057",
+                        className: RichTextEditor_default.customToolActionItem,
+                        children: /* @__PURE__ */ jsx4(IconAlignLeft, { size: 16, stroke: 1.5 })
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsxs2(Menu.Dropdown, { children: [
+                      /* @__PURE__ */ jsx4(
+                        Menu.Item,
+                        {
+                          onClick: () => editor?.chain().focus().setTextAlign("left").run(),
+                          children: /* @__PURE__ */ jsx4(IconAlignLeft, { size: 14 })
+                        }
+                      ),
+                      /* @__PURE__ */ jsx4(
+                        Menu.Item,
+                        {
+                          onClick: () => editor?.chain().focus().setTextAlign("center").run(),
+                          children: /* @__PURE__ */ jsx4(IconAlignCenter, { size: 14 })
+                        }
+                      ),
+                      /* @__PURE__ */ jsx4(
+                        Menu.Item,
+                        {
+                          onClick: () => editor?.chain().focus().setTextAlign("right").run(),
+                          children: /* @__PURE__ */ jsx4(IconAlignRight, { size: 14 })
+                        }
+                      )
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsx4(RichTextEditor.Link, {})
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx4(
+              RichTextEditor.ControlsGroup,
+              {
+                className: RichTextEditor_default.secondRichTextEditorToolBar,
+                children: /* @__PURE__ */ jsx4(RichTextEditor.ClearFormatting, {})
+              }
+            )
+          ] })
+        ] }),
+        showWarning && /* @__PURE__ */ jsxs2(
+          "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(
-      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(
-      ActionIcon,
-      {
-        radius: "lg",
-        variant: "filled",
-        "aria-label": "send",
-        className: RichTextEditor_default.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(
-      RichTextEditor.ControlsGroup,
-      {
-        className: RichTextEditor_default.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(
-        ActionIcon,
-        {
-          variant: "outline",
-          size: "md",
-          color: "#495057",
-          className: RichTextEditor_default.customToolActionItem
-        },
-        /* @__PURE__ */ React.createElement(IconAlignLeft, { size: 16, stroke: 1.5 })
-      )), /* @__PURE__ */ React.createElement(Menu.Dropdown, null, /* @__PURE__ */ React.createElement(
-        Menu.Item,
-        {
-          onClick: () => editor?.chain().focus().setTextAlign("left").run()
-        },
-        /* @__PURE__ */ React.createElement(IconAlignLeft, { size: 14 })
-      ), /* @__PURE__ */ React.createElement(
-        Menu.Item,
-        {
-          onClick: () => editor?.chain().focus().setTextAlign("center").run()
-        },
-        /* @__PURE__ */ React.createElement(IconAlignCenter, { size: 14 })
-      ), /* @__PURE__ */ React.createElement(
-        Menu.Item,
-        {
-          onClick: () => editor?.chain().focus().setTextAlign("right").run()
-        },
-        /* @__PURE__ */ React.createElement(IconAlignRight, { size: 14 })
-      ))),
-      /* @__PURE__ */ React.createElement(RichTextEditor.Link, null)
-    ), /* @__PURE__ */ React.createElement(
-      RichTextEditor.ControlsGroup,
-      {
-        className: RichTextEditor_default.secondRichTextEditorToolBar
-      },
-      /* @__PURE__ */ React.createElement(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
@@ -5003,7 +5040,8 @@ import { useEffect as useEffect4, useState as useState4 } from "react";
 import DOMPurify from "dompurify";
 
 // src/components/VirtualizedList/ChatScrollContainer.tsx
-import React2, { useRef, useEffect as useEffect2 } from "react";
+import { useRef, useEffect as useEffect2 } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
 function ChatScrollContainer({
   data: data2,
   renderItem,
@@ -5052,7 +5090,7 @@ function ChatScrollContainer({
       isFetchingRef.current = false;
     }, 0);
   };
-  return /* @__PURE__ */ React2.createElement(
+  return /* @__PURE__ */ jsx5(
     "div",
     {
       ref: containerRef,
@@ -5062,9 +5100,9 @@ function ChatScrollContainer({
         height: "100%",
         display: "flex",
         flexDirection: "column"
-      }
-    },
-    data2.map((item, index) => /* @__PURE__ */ React2.createElement("div", { key: item?.id || index }, renderItem(item, index)))
+      },
+      children: data2.map((item, index) => /* @__PURE__ */ jsx5("div", { children: renderItem(item, index) }, item?.id || index))
+    }
   );
 }
 
@@ -5081,6 +5119,7 @@ import {
 var UserProfileDrawer_default = {};
 
 // src/components/UserProfile/UserProfileDrawer.tsx
+import { Fragment as Fragment7, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 function UserProfileDrawer({
   opened,
   onClose,
@@ -5098,51 +5137,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(IconArrowLeft, { size: 20 })), /* @__PURE__ */ React.createElement(Text, { fw: 600 }, "Contact info")),
-    /* @__PURE__ */ React.createElement("div", { className: UserProfileDrawer_default.profileSection }, /* @__PURE__ */ React.createElement(
-      Avatar,
-      {
-        src: user?.avatar,
-        size: 150,
-        radius: "xl",
-        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: UserProfileDrawer_default.actions }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs3(Fragment7, { children: [
+    /* @__PURE__ */ jsx6("div", { className: UserProfileDrawer_default.overlay, onClick: handleClose, children: /* @__PURE__ */ jsxs3(
       "div",
       {
-        className: `${UserProfileDrawer_default.item} ${UserProfileDrawer_default.itemDanger}`,
-        onClick: onDeleteMessages
-      },
-      /* @__PURE__ */ React.createElement(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__ */ jsxs3("div", { className: UserProfileDrawer_default.header, children: [
+            /* @__PURE__ */ jsx6("div", { className: UserProfileDrawer_default.backBtn, onClick: handleClose, children: /* @__PURE__ */ jsx6(IconArrowLeft, { size: 20 }) }),
+            /* @__PURE__ */ jsx6(Text, { fw: 600, children: "Contact info" })
+          ] }),
+          /* @__PURE__ */ jsxs3("div", { className: UserProfileDrawer_default.profileSection, children: [
+            /* @__PURE__ */ jsx6(
+              Avatar,
+              {
+                src: user?.avatar,
+                size: 150,
+                radius: "xl",
+                style: { cursor: "pointer" },
+                onClick: () => user?.avatar ? setShowImagePreview(true) : {}
+              }
+            ),
+            /* @__PURE__ */ jsx6(Text, { fw: 700, size: "lg", mt: "sm", children: user?.displayName }),
+            /* @__PURE__ */ jsxs3(Text, { size: "sm", c: "dimmed", children: [
+              "@",
+              user?.username
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs3("div", { className: UserProfileDrawer_default.actions, children: [
+            /* @__PURE__ */ jsxs3(
+              "div",
+              {
+                className: `${UserProfileDrawer_default.item} ${UserProfileDrawer_default.itemDanger}`,
+                onClick: onDeleteMessages,
+                children: [
+                  /* @__PURE__ */ jsx6(IconTrash, { size: 18 }),
+                  /* @__PURE__ */ jsx6("span", { children: "Delete all messages" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs3(
+              "div",
+              {
+                className: `${UserProfileDrawer_default.item} ${UserProfileDrawer_default.itemDanger}`,
+                onClick: onBlock,
+                children: [
+                  /* @__PURE__ */ jsx6(IconBan, { size: 18 }),
+                  /* @__PURE__ */ jsx6("span", { children: "Block" })
+                ]
+              }
+            )
+          ] })
+        ]
+      }
+    ) }),
+    showImagePreview && /* @__PURE__ */ jsx6(
       "div",
       {
-        className: `${UserProfileDrawer_default.item} ${UserProfileDrawer_default.itemDanger}`,
-        onClick: onBlock
-      },
-      /* @__PURE__ */ React.createElement(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__ */ jsx6("img", { src: user?.avatar, alt: "profile" })
+      }
+    )
+  ] });
 }
 
 // src/components/ChatUserList/ChatUserMessage.tsx
+import { Fragment as Fragment8, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 function ChatUserMessage({
   chatId,
   enableChat,
@@ -5289,102 +5351,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(Avatar2, { src: receiverDetails.avatar, size: 36, radius: "xl" }) : /* @__PURE__ */ React.createElement(
-      Avatar2,
-      {
-        key: receiverDetails?.displayName || receiverDetails?.username,
-        name: receiverDetails?.displayName || receiverDetails?.username,
-        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(
-    Menu2.Item,
-    {
-      color: "red",
-      leftSection: /* @__PURE__ */ React.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: ChatUserList_default.messageArea }, isEmpty ? /* @__PURE__ */ React.createElement("div", { className: ChatUserList_default.emptyState }, /* @__PURE__ */ React.createElement("div", { className: ChatUserList_default.encryptionMinimal }, /* @__PURE__ */ React.createElement(IconLock, { size: 20, stroke: 1.8 }), /* @__PURE__ */ React.createElement(Text2, { 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__ */ jsxs4("div", { className: ChatUserList_default.mainArea, children: [
+    /* @__PURE__ */ jsx7("div", { className: ChatUserList_default.chatHeader, children: receiverDetails && /* @__PURE__ */ jsxs4(Fragment8, { children: [
+      /* @__PURE__ */ jsxs4(
+        "div",
+        {
+          className: ChatUserList_default.receiverInfo,
+          onClick: () => setShowUserInfo(true),
+          children: [
+            receiverDetails?.avatar ? /* @__PURE__ */ jsx7(Avatar2, { src: receiverDetails.avatar, size: 36, radius: "xl" }) : /* @__PURE__ */ jsx7(
+              Avatar2,
+              {
+                name: receiverDetails?.displayName || receiverDetails?.username,
+                color: "initials"
+              },
+              receiverDetails?.displayName || receiverDetails?.username
+            ),
+            /* @__PURE__ */ jsx7(Text2, { 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__ */ jsxs4(Menu2, { shadow: "md", width: 200, position: "bottom-end", children: [
+        /* @__PURE__ */ jsx7(Menu2.Target, { children: /* @__PURE__ */ jsx7(IconDotsVertical, { size: 20, style: { cursor: "pointer" } }) }),
+        /* @__PURE__ */ jsxs4(Menu2.Dropdown, { children: [
+          /* @__PURE__ */ jsx7(
+            Menu2.Item,
             {
-              className: ChatUserList_default.messageContent,
-              dangerouslySetInnerHTML: {
-                __html: DOMPurify.sanitize(item?.message)
-              }
+              color: "red",
+              leftSection: /* @__PURE__ */ jsx7(IconTrash2, { size: 16 }),
+              onClick: handleDeleteMessages,
+              children: "Delete all messages"
             }
           ),
-          /* @__PURE__ */ React.createElement("div", { className: ChatUserList_default.messageTime }, time)
-        ));
+          /* @__PURE__ */ jsx7(Menu2.Item, { color: "red", leftSection: /* @__PURE__ */ jsx7(IconBan2, { size: 16 }), children: "Block" })
+        ] })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx7("div", { className: ChatUserList_default.messageArea, children: isEmpty ? /* @__PURE__ */ jsx7("div", { className: ChatUserList_default.emptyState, children: /* @__PURE__ */ jsxs4("div", { className: ChatUserList_default.encryptionMinimal, children: [
+      /* @__PURE__ */ jsx7(IconLock, { size: 20, stroke: 1.8 }),
+      /* @__PURE__ */ jsx7(Text2, { className: ChatUserList_default.encryptionText, size: "md", children: "End-to-end encrypted" })
+    ] }) }) : /* @__PURE__ */ jsx7(
+      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__ */ jsxs4("div", { children: [
+            showDate && /* @__PURE__ */ jsx7("div", { className: ChatUserList_default.dateSeparator, children: formattedDate }),
+            /* @__PURE__ */ jsxs4(
+              "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__ */ jsx7(
+                    "div",
+                    {
+                      className: ChatUserList_default.messageContent,
+                      dangerouslySetInnerHTML: {
+                        __html: DOMPurify.sanitize(item?.message)
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx7("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__ */ jsx7("div", { className: ChatUserList_default.inputBar, children: /* @__PURE__ */ jsx7(CustomRichTextEditor, { onSubmit: handleSendMessage }) }),
+    /* @__PURE__ */ jsx7(
+      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
@@ -6043,6 +6129,7 @@ var users_list_default = [
 
 // src/components/VirtualizedList/index.tsx
 import { Virtuoso } from "react-virtuoso";
+import { jsx as jsx8 } from "react/jsx-runtime";
 function VirtualizedList({
   data: data2,
   itemContent,
@@ -6051,7 +6138,7 @@ function VirtualizedList({
   endReached,
   ...props
 }) {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx8(
     Virtuoso,
     {
       style: { height },
@@ -6094,6 +6181,7 @@ var getChatDisplayTime = (timestamp) => {
 };
 
 // src/components/ChatUserList/ChatUserList.tsx
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 function ChatUserList() {
   const [opened, { open, close }] = useDisclosure(false);
   const dispatch = useDispatch2();
@@ -6265,155 +6353,201 @@ function ChatUserList() {
     label: user.displayName || user.username,
     user
   }));
-  return /* @__PURE__ */ React.createElement("div", { className: ChatUserList_default.chatWrapper }, /* @__PURE__ */ React.createElement(
-    Modal,
-    {
-      opened,
-      onClose: () => {
-        close();
-        setReceiverSearchValue("");
-      },
-      title: "Find User",
-      centered: true,
-      withCloseButton: true
-    },
-    /* @__PURE__ */ React.createElement(
-      Autocomplete,
+  return /* @__PURE__ */ jsxs5("div", { className: ChatUserList_default.chatWrapper, children: [
+    /* @__PURE__ */ jsxs5(
+      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(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)));
-        }
-      }
-    ),
-    /* @__PURE__ */ React.createElement(
-      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(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)));
-        }
-      }
-    ),
-    /* @__PURE__ */ React.createElement(
-      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(Text3, { size: "lg", fw: 600 }, "MrChat"), /* @__PURE__ */ React.createElement("div", { className: ChatUserList_default.topActions }, /* @__PURE__ */ React.createElement(
-    ActionIcon2,
-    {
-      variant: "subtle",
-      onClick: () => {
-        setReceiverUserDetails(null);
-        open();
-      },
-      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: 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(Avatar3, { src: item.avatar, size: 36, radius: "xl" }) : /* @__PURE__ */ React.createElement(
-            Avatar3,
+        title: "Find User",
+        centered: true,
+        withCloseButton: true,
+        children: [
+          /* @__PURE__ */ jsx9(
+            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__ */ jsxs5(Group, { gap: "sm", children: [
+                  /* @__PURE__ */ jsx9(Avatar3, { src: user.avatar, size: 36, radius: "xl" }),
+                  /* @__PURE__ */ jsxs5("div", { children: [
+                    /* @__PURE__ */ jsx9(Text3, { size: "sm", children: user.displayName || user.username }),
+                    user.displayName && /* @__PURE__ */ jsxs5(Text3, { size: "xs", opacity: 0.5, children: [
+                      "@",
+                      user.username
+                    ] })
+                  ] })
+                ] });
+              }
             }
           ),
-          /* @__PURE__ */ React.createElement("div", { className: ChatUserList_default.chatInfo }, /* @__PURE__ */ React.createElement(Text3, { 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(
-            Text3,
+          /* @__PURE__ */ jsx9(
+            Autocomplete,
             {
-              truncate: true,
-              size: "xs",
-              c: "dimmed",
-              style: { maxWidth: 150 },
-              className: ChatUserList_default.messagePreviewContent
-            },
-            stripHtml(DOMPurify2.sanitize(item.message))
-          ), /* @__PURE__ */ React.createElement(
-            Text3,
+              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__ */ jsxs5(Group, { gap: "sm", children: [
+                  /* @__PURE__ */ jsx9(Avatar3, { src: user.avatar, size: 36, radius: "xl" }),
+                  /* @__PURE__ */ jsxs5("div", { children: [
+                    /* @__PURE__ */ jsx9(Text3, { size: "sm", children: user.displayName || user.username }),
+                    user.displayName && /* @__PURE__ */ jsxs5(Text3, { size: "xs", opacity: 0.5, children: [
+                      "@",
+                      user.username
+                    ] })
+                  ] })
+                ] });
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx9(
+            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__ */ jsxs5("div", { className: ChatUserList_default.chatContainer, children: [
+      /* @__PURE__ */ jsxs5("div", { className: ChatUserList_default.sidebar, children: [
+        /* @__PURE__ */ jsx9("div", { className: ChatUserList_default.sidebarTop, children: /* @__PURE__ */ jsxs5("div", { className: ChatUserList_default.topBar, children: [
+          /* @__PURE__ */ jsx9(Text3, { size: "lg", fw: 600, children: "MrChat" }),
+          /* @__PURE__ */ jsx9("div", { className: ChatUserList_default.topActions, children: /* @__PURE__ */ jsx9(
+            ActionIcon2,
+            {
+              variant: "subtle",
+              onClick: () => {
+                setReceiverUserDetails(null);
+                open();
+              },
+              radius: "lg",
+              children: /* @__PURE__ */ jsx9(IconPlus, { size: 20, stroke: 3 })
+            }
+          ) })
+        ] }) }),
+        /* @__PURE__ */ jsx9(Text3, { size: "xs", c: "dimmed", mt: "sm", mb: "xs", ml: 12, children: "All Messages" }),
+        /* @__PURE__ */ jsx9("div", { className: ChatUserList_default.scrollWrapper, children: /* @__PURE__ */ jsx9(
+          VirtualizedList,
+          {
+            data: chatList?.rows?.data || [],
+            endReached: loadMoreChats,
+            itemContent: (_, item) => {
+              const isActive = item.chatId === chatId;
+              return /* @__PURE__ */ jsxs5(
+                "div",
+                {
+                  className: `${ChatUserList_default.chatItem} ${isActive ? ChatUserList_default.activeChatItem : ""}`,
+                  onClick: () => {
+                    if (isActive) return;
+                    handleJoinChat(item);
+                  },
+                  children: [
+                    item.avatar ? /* @__PURE__ */ jsx9(Avatar3, { src: item.avatar, size: 36, radius: "xl" }) : /* @__PURE__ */ jsx9(
+                      Avatar3,
+                      {
+                        name: item.displayName || item.username,
+                        color: "initials"
+                      },
+                      item.displayName || item.username
+                    ),
+                    /* @__PURE__ */ jsxs5("div", { className: ChatUserList_default.chatInfo, children: [
+                      /* @__PURE__ */ jsx9(Text3, { className: ChatUserList_default.chatLabelItem, truncate: true, children: item.displayName || item.username }),
+                      item.unreadCount > 0 && /* @__PURE__ */ jsx9("div", { className: ChatUserList_default.unreadBadge, children: item.unreadCount || 10 }),
+                      /* @__PURE__ */ jsxs5("div", { className: ChatUserList_default.messagePreview, children: [
+                        /* @__PURE__ */ jsx9(
+                          Text3,
+                          {
+                            truncate: true,
+                            size: "xs",
+                            c: "dimmed",
+                            style: { maxWidth: 150 },
+                            className: ChatUserList_default.messagePreviewContent,
+                            children: stripHtml(DOMPurify2.sanitize(item.message))
+                          }
+                        ),
+                        /* @__PURE__ */ jsx9(
+                          Text3,
+                          {
+                            size: "xs",
+                            c: "dimmed",
+                            className: ChatUserList_default.messagePreviewTime,
+                            children: getChatDisplayTime(item.updatedAt || item.createdAt)
+                          }
+                        )
+                      ] })
+                    ] })
+                  ]
+                }
+              );
+            }
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsx9(
+        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
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 function MrChat(props) {
   const [primaryColor] = useState6("customBrand");
   const theme = createAppTheme(primaryColor);
-  return /* @__PURE__ */ React.createElement(ReduxProvider, null, /* @__PURE__ */ React.createElement(SocketProvider, null, /* @__PURE__ */ React.createElement(MantineProvider, { defaultColorScheme: "light", theme }, /* @__PURE__ */ React.createElement(Notifications, null), /* @__PURE__ */ React.createElement(ChatUserList, { ...props }))));
+  return /* @__PURE__ */ jsx10(ReduxProvider, { children: /* @__PURE__ */ jsx10(SocketProvider, { children: /* @__PURE__ */ jsxs6(MantineProvider, { defaultColorScheme: "light", theme, children: [
+    /* @__PURE__ */ jsx10(Notifications, {}),
+    /* @__PURE__ */ jsx10(ChatUserList, { ...props })
+  ] }) }) });
 }
 export {
   MrChat