mr-chat-bird 1.0.13 → 1.0.14

package/dist/index.css

@@ -78,6 +78,9 @@
     display: none;
   }
 }
+:where([data-mantine-color-scheme=dark]) .mantine-RichTextEditor-control {
+  background-color: var(--mantine-color-body);
+}
 
 /* src/components/UserProfile/UserProfileDrawer.css */
 .mrchat-overlay {
@@ -127,7 +130,6 @@
   gap: 15px;
   padding: 0 16px;
   border-bottom: 1px solid var(--mantine-color-default-border);
-  background-color: var(--mantine-color-default);
 }
 .mrchat-backBtn {
   cursor: pointer;
@@ -207,16 +209,12 @@
   display: flex;
   flex-direction: column;
   min-height: 0;
+  height: 100%;
   flex-shrink: 0;
   border-right: 1px solid color-mix(in srgb, var(--mantine-color-text) 12%, transparent);
   padding-top: 12px;
   background-color: var(--mantine-color-body);
 }
-@media (max-width: 760px) {
-  .mrchat-sidebar {
-    width: 180px;
-  }
-}
 .mrchat-sidebarTop {
   padding: 0 12px;
 }
@@ -233,7 +231,16 @@
 .mrchat-scrollWrapper {
   flex: 1;
   min-height: 0;
-  overflow: hidden;
+  height: 100%;
+  overflow-y: auto;
+}
+.mrchat-mainAreaWrapper {
+  flex: 1;
+  display: flex;
+  min-height: 0;
+}
+.mrchat-hiddenOnMobile {
+  display: none !important;
 }
 .mrchat-scrollArea {
   flex: 1;
@@ -284,6 +291,28 @@
   gap: 8px;
   padding: 0px 12px 12px;
 }
+@media (max-width: 599px) {
+  .mrchat-chatContainer {
+    flex-direction: column;
+    min-height: 100%;
+  }
+  .mrchat-sidebar {
+    width: 100%;
+    height: 100%;
+    border-right: none;
+    border-bottom: 1px solid color-mix(in srgb, var(--mantine-color-text) 12%, transparent);
+    border-radius: 0;
+  }
+  .mrchat-chatItem {
+    margin: 2px 0;
+  }
+  .mrchat-messageArea {
+    padding: 12px;
+  }
+  .mrchat-mainArea {
+    min-height: calc(100vh - 74px);
+  }
+}
 .mrchat-chatItem {
   display: flex;
   align-items: center;
@@ -303,15 +332,18 @@
 }
 .mrchat-chatHeader {
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-start;
   align-items: center;
   padding: 12px 16px;
   border-bottom: 1px solid color-mix(in srgb, var(--mantine-color-text) 12%, transparent);
-  background-color: var(--mantine-color-default);
   position: sticky;
   top: 0;
   z-index: 2;
   min-height: 63px;
+  gap: 10px;
+}
+.mrchat-backButton {
+  padding: 4px;
 }
 .mrchat-receiverInfo {
   display: flex;
@@ -337,7 +369,6 @@
 }
 .mrchat-encryptionText {
   font-size: 16px;
-  color: #666;
   margin-left: 3px;
 }
 .mrchat-messageContent {

package/dist/index.d.mts

@@ -10,8 +10,10 @@ type ChatUserListProps = {
     currentUser?: UserData;
     onSearchUsers?: (query: string) => UserData[] | Promise<UserData[]>;
     colorScheme?: "light" | "dark";
+    primaryColor?: string;
+    darkColor?: string;
 };
 
-declare function MrChat({ colorScheme, ...props }: ChatUserListProps): React.JSX.Element;
+declare function MrChat({ colorScheme, primaryColor, darkColor, ...props }: ChatUserListProps): React.JSX.Element;
 
 export { MrChat };

package/dist/index.d.ts

@@ -10,8 +10,10 @@ type ChatUserListProps = {
     currentUser?: UserData;
     onSearchUsers?: (query: string) => UserData[] | Promise<UserData[]>;
     colorScheme?: "light" | "dark";
+    primaryColor?: string;
+    darkColor?: string;
 };
 
-declare function MrChat({ colorScheme, ...props }: ChatUserListProps): React.JSX.Element;
+declare function MrChat({ colorScheme, primaryColor, darkColor, ...props }: ChatUserListProps): React.JSX.Element;
 
 export { MrChat };

package/dist/index.js

@@ -111,12 +111,43 @@ var colorThemes = {
   sunset,
   ocean
 };
-var createAppTheme = (primaryColor) => (0, import_core.createTheme)({
-  primaryColor,
-  colors: {
+var isValidHexColor = (value) => /^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i.test(value);
+var hexToRgb = (hex) => {
+  const normalized = hex.replace("#", "");
+  const fullHex = normalized.length === 3 ? normalized.split("").map((digit) => digit + digit).join("") : normalized;
+  return {
+    r: parseInt(fullHex.slice(0, 2), 16),
+    g: parseInt(fullHex.slice(2, 4), 16),
+    b: parseInt(fullHex.slice(4, 6), 16)
+  };
+};
+var rgbToHex = ({ r, g, b }) => `#${[r, g, b].map((channel) => channel.toString(16).padStart(2, "0")).join("")}`;
+var clampColor = (value) => Math.min(255, Math.max(0, Math.round(value)));
+var createColorPaletteFromHex = (hex) => {
+  const { r, g, b } = hexToRgb(hex);
+  const factors = [0.08, 0.18, 0.3, 0.42, 0.54, 0.66, 0.76, 0.86, 0.92, 0.98];
+  const palette = factors.map(
+    (factor) => rgbToHex({
+      r: clampColor(r * factor + 255 * (1 - factor)),
+      g: clampColor(g * factor + 255 * (1 - factor)),
+      b: clampColor(b * factor + 255 * (1 - factor))
+    })
+  );
+  return palette;
+};
+var createAppTheme = (primaryColor) => {
+  const colors = {
     ...colorThemes
+  };
+  const resolvedPrimaryColor = isValidHexColor(primaryColor) || !(primaryColor in colorThemes) ? "customBrand" : primaryColor;
+  if (isValidHexColor(primaryColor)) {
+    colors.customBrand = createColorPaletteFromHex(primaryColor);
   }
-});
+  return (0, import_core.createTheme)({
+    primaryColor: resolvedPrimaryColor,
+    colors
+  });
+};
 
 // src/store/provider.tsx
 var import_react = __toESM(require("react"));
@@ -5116,7 +5147,9 @@ function ChatUserMessage({
   enableChat,
   senderDetails,
   receiverDetails,
-  onChatInitialized
+  onChatInitialized,
+  onBack,
+  showBackButton
 }) {
   const dispatch = (0, import_react_redux2.useDispatch)();
   const messageList = (0, import_react_redux2.useSelector)(
@@ -5257,7 +5290,15 @@ function ChatUserMessage({
       deleteMessagesByChatId({ chatId, userId: senderDetails?.userId })
     );
   };
-  return /* @__PURE__ */ import_react8.default.createElement("div", { className: "mrchat-mainArea" }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "mrchat-chatHeader" }, receiverDetails && /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, /* @__PURE__ */ import_react8.default.createElement(
+  return /* @__PURE__ */ import_react8.default.createElement("div", { className: "mrchat-mainArea" }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "mrchat-chatHeader" }, showBackButton && onBack && /* @__PURE__ */ import_react8.default.createElement(
+    import_core7.ActionIcon,
+    {
+      variant: "subtle",
+      className: "mrchat-backButton",
+      onClick: onBack
+    },
+    /* @__PURE__ */ import_react8.default.createElement(import_icons_react3.IconArrowLeft, { size: 20 })
+  ), receiverDetails && /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, /* @__PURE__ */ import_react8.default.createElement(
     "div",
     {
       className: "mrchat-receiverInfo",
@@ -5423,6 +5464,8 @@ function ChatUserList({
   const [searchResults, setSearchResults] = (0, import_react10.useState)([]);
   const [isSearching, setIsSearching] = (0, import_react10.useState)(false);
   const [senderDetails, setSenderDetails] = (0, import_react10.useState)(currentUser);
+  const [isMobile, setIsMobile] = (0, import_react10.useState)(false);
+  const [mobileChatOpen, setMobileChatOpen] = (0, import_react10.useState)(false);
   (0, import_react10.useEffect)(() => {
     if (!currentUser?.userId) return;
     setSenderDetails(currentUser);
@@ -5431,6 +5474,30 @@ function ChatUserList({
     if (!currentUser?.userId) return;
     dispatch(fetchMessageListByUserId({ userId: currentUser.userId, page: 0 }));
   }, [currentUser?.userId, dispatch]);
+  (0, import_react10.useEffect)(() => {
+    if (typeof window === "undefined") return;
+    const mediaQuery = window.matchMedia("(max-width: 599px)");
+    const handleMediaChange = (event) => {
+      const matches = "matches" in event ? event.matches : mediaQuery.matches;
+      setIsMobile(matches);
+      if (!matches) {
+        setMobileChatOpen(false);
+      }
+    };
+    handleMediaChange(mediaQuery);
+    if (mediaQuery.addEventListener) {
+      mediaQuery.addEventListener("change", handleMediaChange);
+    } else {
+      mediaQuery.addListener(handleMediaChange);
+    }
+    return () => {
+      if (mediaQuery.removeEventListener) {
+        mediaQuery.removeEventListener("change", handleMediaChange);
+      } else {
+        mediaQuery.removeListener(handleMediaChange);
+      }
+    };
+  }, []);
   const handleStartChat = () => {
     if (!receiverUserDetails?.userId) return;
     const existingChat = chatList?.rows?.data?.find(
@@ -5456,6 +5523,9 @@ function ChatUserList({
     dispatch(resetMessageList());
     setChatId("");
     setEnableChat(true);
+    if (isMobile) {
+      setMobileChatOpen(true);
+    }
   };
   (0, import_react10.useEffect)(() => {
     if (!senderDetails?.userId) return;
@@ -5557,6 +5627,9 @@ function ChatUserList({
     const updatedList = chatList.rows.data.map(
       (chat) => chat.chatId === item.chatId ? { ...chat, unreadCount: 0 } : chat
     );
+    if (isMobile) {
+      setMobileChatOpen(true);
+    }
     dispatch(
       setMessagedUserList({
         ...chatList,
@@ -5570,6 +5643,9 @@ function ChatUserList({
   const handleSearchUsers = (value) => {
     setReceiverSearchValue(value);
   };
+  const handleBackToSidebar = () => {
+    setMobileChatOpen(false);
+  };
   (0, import_react10.useEffect)(() => {
     if (!receiverSearchValue.trim()) {
       setSearchResults([]);
@@ -5660,89 +5736,121 @@ function ChatUserList({
       },
       "Start Chat"
     )
-  ), /* @__PURE__ */ import_react10.default.createElement("div", { className: "mrchat-chatContainer" }, /* @__PURE__ */ import_react10.default.createElement("div", { className: "mrchat-sidebar" }, /* @__PURE__ */ import_react10.default.createElement("div", { className: "mrchat-sidebarTop" }, /* @__PURE__ */ import_react10.default.createElement("div", { className: "mrchat-topBar" }, /* @__PURE__ */ import_react10.default.createElement(import_core8.Text, { size: "xs", c: "dimmed", mt: "sm", mb: "xs", ml: 12 }, "All Messages"), /* @__PURE__ */ import_react10.default.createElement("div", { className: "mrchat-topActions" }, /* @__PURE__ */ import_react10.default.createElement(
-    import_core8.ActionIcon,
+  ), /* @__PURE__ */ import_react10.default.createElement("div", { className: "mrchat-chatContainer" }, /* @__PURE__ */ import_react10.default.createElement(
+    "div",
     {
-      variant: "subtle",
-      onClick: () => {
-        setReceiverUserDetails(null);
-        setReceiverSearchValue("");
-        setSearchResults([]);
-        open();
-      },
-      radius: "lg"
+      className: "mrchat-sidebar " + (isMobile && mobileChatOpen ? "mrchat-hiddenOnMobile" : "")
     },
-    /* @__PURE__ */ import_react10.default.createElement(import_icons_react4.IconPlus, { size: 20, stroke: 3 })
-  )))), /* @__PURE__ */ import_react10.default.createElement("div", { className: "mrchat-scrollWrapper" }, /* @__PURE__ */ import_react10.default.createElement(
-    VirtualizedList,
-    {
-      data: chatList?.rows?.data || [],
-      endReached: loadMoreChats,
-      itemContent: (_, item) => {
-        const isActive = item.chatId === chatId;
-        return /* @__PURE__ */ import_react10.default.createElement(
-          "div",
-          {
-            className: `${"mrchat-chatItem"} ${isActive ? "mrchat-activeChatItem" : ""}`,
-            onClick: () => {
-              if (isActive) return;
-              handleJoinChat(item);
-            }
-          },
-          item.avatar ? /* @__PURE__ */ import_react10.default.createElement(import_core8.Avatar, { src: item.avatar, size: 36, radius: "xl" }) : /* @__PURE__ */ import_react10.default.createElement(
-            import_core8.Avatar,
-            {
-              key: item.displayName || item.username,
-              name: item.displayName || item.username,
-              color: "initials"
-            }
-          ),
-          /* @__PURE__ */ import_react10.default.createElement("div", { className: "mrchat-chatInfo" }, /* @__PURE__ */ import_react10.default.createElement(import_core8.Text, { className: "mrchat-chatLabelItem", truncate: true }, item.displayName || item.username), item.unreadCount > 0 && /* @__PURE__ */ import_react10.default.createElement("div", { className: "mrchat-unreadBadge" }, item.unreadCount || 10), /* @__PURE__ */ import_react10.default.createElement("div", { className: "mrchat-messagePreview" }, /* @__PURE__ */ import_react10.default.createElement(
-            import_core8.Text,
-            {
-              truncate: true,
-              size: "xs",
-              c: "dimmed",
-              style: { maxWidth: 150 },
-              className: "mrchat-messagePreviewContent"
-            },
-            stripHtml(import_dompurify2.default.sanitize(item.message))
-          ), /* @__PURE__ */ import_react10.default.createElement(
-            import_core8.Text,
+    /* @__PURE__ */ import_react10.default.createElement("div", { className: "mrchat-sidebarTop" }, /* @__PURE__ */ import_react10.default.createElement("div", { className: "mrchat-topBar" }, /* @__PURE__ */ import_react10.default.createElement(import_core8.Text, { size: "xs", c: "dimmed", mt: "sm", mb: "xs", ml: 12 }, "All Messages"), /* @__PURE__ */ import_react10.default.createElement("div", { className: "mrchat-topActions" }, /* @__PURE__ */ import_react10.default.createElement(
+      import_core8.ActionIcon,
+      {
+        variant: "subtle",
+        onClick: () => {
+          setReceiverUserDetails(null);
+          setReceiverSearchValue("");
+          setSearchResults([]);
+          open();
+        },
+        radius: "lg"
+      },
+      /* @__PURE__ */ import_react10.default.createElement(import_icons_react4.IconPlus, { size: 20, stroke: 3 })
+    )))),
+    /* @__PURE__ */ import_react10.default.createElement("div", { className: "mrchat-scrollWrapper" }, /* @__PURE__ */ import_react10.default.createElement(
+      VirtualizedList,
+      {
+        data: chatList?.rows?.data || [],
+        endReached: loadMoreChats,
+        itemContent: (_, item) => {
+          const isActive = item.chatId === chatId;
+          return /* @__PURE__ */ import_react10.default.createElement(
+            "div",
             {
-              size: "xs",
-              c: "dimmed",
-              className: "mrchat-messagePreviewTime"
+              className: `${"mrchat-chatItem"} ${isActive ? "mrchat-activeChatItem" : ""}`,
+              onClick: () => {
+                if (isActive) return;
+                handleJoinChat(item);
+              }
             },
-            getChatDisplayTime(item.updatedAt || item.createdAt)
-          )))
-        );
+            item.avatar ? /* @__PURE__ */ import_react10.default.createElement(import_core8.Avatar, { src: item.avatar, size: 36, radius: "xl" }) : /* @__PURE__ */ import_react10.default.createElement(
+              import_core8.Avatar,
+              {
+                key: item.displayName || item.username,
+                name: item.displayName || item.username,
+                color: "initials"
+              }
+            ),
+            /* @__PURE__ */ import_react10.default.createElement("div", { className: "mrchat-chatInfo" }, /* @__PURE__ */ import_react10.default.createElement(import_core8.Text, { className: "mrchat-chatLabelItem", truncate: true }, item.displayName || item.username), item.unreadCount > 0 && /* @__PURE__ */ import_react10.default.createElement("div", { className: "mrchat-unreadBadge" }, item.unreadCount || 10), /* @__PURE__ */ import_react10.default.createElement("div", { className: "mrchat-messagePreview" }, /* @__PURE__ */ import_react10.default.createElement(
+              import_core8.Text,
+              {
+                truncate: true,
+                size: "xs",
+                c: "dimmed",
+                style: { maxWidth: 150 },
+                className: "mrchat-messagePreviewContent"
+              },
+              stripHtml(import_dompurify2.default.sanitize(item.message))
+            ), /* @__PURE__ */ import_react10.default.createElement(
+              import_core8.Text,
+              {
+                size: "xs",
+                c: "dimmed",
+                className: "mrchat-messagePreviewTime"
+              },
+              getChatDisplayTime(item.updatedAt || item.createdAt)
+            )))
+          );
+        }
       }
-    }
-  ))), /* @__PURE__ */ import_react10.default.createElement(
-    ChatUserMessage,
+    ))
+  ), /* @__PURE__ */ import_react10.default.createElement(
+    "div",
     {
-      chatId,
-      enableChat,
-      senderDetails,
-      receiverDetails,
-      onChatInitialized: (data2) => {
-        handleJoinChat({
-          chatId: data2.chatId,
-          userId: receiverDetails?.userId,
-          username: receiverDetails?.username,
-          displayName: receiverDetails?.displayName,
-          avatar: receiverDetails?.avatar
-        });
+      className: "mrchat-mainAreaWrapper " + (isMobile && !mobileChatOpen ? "mrchat-hiddenOnMobile" : "")
+    },
+    /* @__PURE__ */ import_react10.default.createElement(
+      ChatUserMessage,
+      {
+        chatId,
+        enableChat,
+        senderDetails,
+        receiverDetails,
+        onBack: handleBackToSidebar,
+        showBackButton: isMobile,
+        onChatInitialized: (data2) => {
+          handleJoinChat({
+            chatId: data2.chatId,
+            userId: receiverDetails?.userId,
+            username: receiverDetails?.username,
+            displayName: receiverDetails?.displayName,
+            avatar: receiverDetails?.avatar
+          });
+        }
       }
-    }
+    )
   )));
 }
 
 // src/components/MrChat/index.tsx
-function MrChat({ colorScheme, ...props }) {
-  const [primaryColor, setPrimaryColor] = (0, import_react11.useState)("customBrand");
+function MrChat({
+  colorScheme,
+  primaryColor = "customBrand",
+  darkColor,
+  ...props
+}) {
   const theme = createAppTheme(primaryColor);
+  (0, import_react11.useEffect)(() => {
+    if (typeof document === "undefined" || !darkColor) return;
+    const previousBodyBackground = document.body.style.backgroundColor;
+    document.body.style.backgroundColor = colorScheme === "dark" ? darkColor : "";
+    document.documentElement.style.setProperty(
+      "--mantine-color-body",
+      colorScheme === "dark" ? darkColor : ""
+    );
+    return () => {
+      document.body.style.backgroundColor = previousBodyBackground;
+      document.documentElement.style.removeProperty("--mantine-color-body");
+    };
+  }, [colorScheme, darkColor]);
   return /* @__PURE__ */ import_react11.default.createElement(ReduxProvider, null, /* @__PURE__ */ import_react11.default.createElement(SocketProvider, null, /* @__PURE__ */ import_react11.default.createElement(
     import_core9.MantineProvider,
     {

package/dist/index.mjs

@@ -2,7 +2,7 @@
 import "@mantine/core/styles.css";
 import "@mantine/tiptap/styles.css";
 import "@mantine/notifications/styles.css";
-import React10, { useState as useState6 } from "react";
+import React10, { useEffect as useEffect6 } from "react";
 import { MantineProvider } from "@mantine/core";
 import { Notifications } from "@mantine/notifications";
 
@@ -75,12 +75,43 @@ var colorThemes = {
   sunset,
   ocean
 };
-var createAppTheme = (primaryColor) => createTheme({
-  primaryColor,
-  colors: {
+var isValidHexColor = (value) => /^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i.test(value);
+var hexToRgb = (hex) => {
+  const normalized = hex.replace("#", "");
+  const fullHex = normalized.length === 3 ? normalized.split("").map((digit) => digit + digit).join("") : normalized;
+  return {
+    r: parseInt(fullHex.slice(0, 2), 16),
+    g: parseInt(fullHex.slice(2, 4), 16),
+    b: parseInt(fullHex.slice(4, 6), 16)
+  };
+};
+var rgbToHex = ({ r, g, b }) => `#${[r, g, b].map((channel) => channel.toString(16).padStart(2, "0")).join("")}`;
+var clampColor = (value) => Math.min(255, Math.max(0, Math.round(value)));
+var createColorPaletteFromHex = (hex) => {
+  const { r, g, b } = hexToRgb(hex);
+  const factors = [0.08, 0.18, 0.3, 0.42, 0.54, 0.66, 0.76, 0.86, 0.92, 0.98];
+  const palette = factors.map(
+    (factor) => rgbToHex({
+      r: clampColor(r * factor + 255 * (1 - factor)),
+      g: clampColor(g * factor + 255 * (1 - factor)),
+      b: clampColor(b * factor + 255 * (1 - factor))
+    })
+  );
+  return palette;
+};
+var createAppTheme = (primaryColor) => {
+  const colors = {
     ...colorThemes
+  };
+  const resolvedPrimaryColor = isValidHexColor(primaryColor) || !(primaryColor in colorThemes) ? "customBrand" : primaryColor;
+  if (isValidHexColor(primaryColor)) {
+    colors.customBrand = createColorPaletteFromHex(primaryColor);
   }
-});
+  return createTheme({
+    primaryColor: resolvedPrimaryColor,
+    colors
+  });
+};
 
 // src/store/provider.tsx
 import React from "react";
@@ -346,7 +377,7 @@ import {
   Text as Text3,
   Modal,
   Button,
-  ActionIcon as ActionIcon2,
+  ActionIcon as ActionIcon3,
   Autocomplete,
   Group,
   Avatar as Avatar3,
@@ -356,8 +387,9 @@ import { IconPlus } from "@tabler/icons-react";
 import { useDisclosure } from "@mantine/hooks";
 
 // src/components/ChatUserList/ChatUserMessage.tsx
-import { Text as Text2, Avatar as Avatar2 } from "@mantine/core";
+import { Text as Text2, Avatar as Avatar2, ActionIcon as ActionIcon2 } from "@mantine/core";
 import {
+  IconArrowLeft as IconArrowLeft2,
   IconLock
 } from "@tabler/icons-react";
 
@@ -5110,7 +5142,9 @@ function ChatUserMessage({
   enableChat,
   senderDetails,
   receiverDetails,
-  onChatInitialized
+  onChatInitialized,
+  onBack,
+  showBackButton
 }) {
   const dispatch = useDispatch();
   const messageList = useSelector(
@@ -5251,7 +5285,15 @@ function ChatUserMessage({
       deleteMessagesByChatId({ chatId, userId: senderDetails?.userId })
     );
   };
-  return /* @__PURE__ */ React7.createElement("div", { className: "mrchat-mainArea" }, /* @__PURE__ */ React7.createElement("div", { className: "mrchat-chatHeader" }, receiverDetails && /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React7.createElement("div", { className: "mrchat-mainArea" }, /* @__PURE__ */ React7.createElement("div", { className: "mrchat-chatHeader" }, showBackButton && onBack && /* @__PURE__ */ React7.createElement(
+    ActionIcon2,
+    {
+      variant: "subtle",
+      className: "mrchat-backButton",
+      onClick: onBack
+    },
+    /* @__PURE__ */ React7.createElement(IconArrowLeft2, { size: 20 })
+  ), receiverDetails && /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(
     "div",
     {
       className: "mrchat-receiverInfo",
@@ -5417,6 +5459,8 @@ function ChatUserList({
   const [searchResults, setSearchResults] = useState5([]);
   const [isSearching, setIsSearching] = useState5(false);
   const [senderDetails, setSenderDetails] = useState5(currentUser);
+  const [isMobile, setIsMobile] = useState5(false);
+  const [mobileChatOpen, setMobileChatOpen] = useState5(false);
   useEffect5(() => {
     if (!currentUser?.userId) return;
     setSenderDetails(currentUser);
@@ -5425,6 +5469,30 @@ function ChatUserList({
     if (!currentUser?.userId) return;
     dispatch(fetchMessageListByUserId({ userId: currentUser.userId, page: 0 }));
   }, [currentUser?.userId, dispatch]);
+  useEffect5(() => {
+    if (typeof window === "undefined") return;
+    const mediaQuery = window.matchMedia("(max-width: 599px)");
+    const handleMediaChange = (event) => {
+      const matches = "matches" in event ? event.matches : mediaQuery.matches;
+      setIsMobile(matches);
+      if (!matches) {
+        setMobileChatOpen(false);
+      }
+    };
+    handleMediaChange(mediaQuery);
+    if (mediaQuery.addEventListener) {
+      mediaQuery.addEventListener("change", handleMediaChange);
+    } else {
+      mediaQuery.addListener(handleMediaChange);
+    }
+    return () => {
+      if (mediaQuery.removeEventListener) {
+        mediaQuery.removeEventListener("change", handleMediaChange);
+      } else {
+        mediaQuery.removeListener(handleMediaChange);
+      }
+    };
+  }, []);
   const handleStartChat = () => {
     if (!receiverUserDetails?.userId) return;
     const existingChat = chatList?.rows?.data?.find(
@@ -5450,6 +5518,9 @@ function ChatUserList({
     dispatch(resetMessageList());
     setChatId("");
     setEnableChat(true);
+    if (isMobile) {
+      setMobileChatOpen(true);
+    }
   };
   useEffect5(() => {
     if (!senderDetails?.userId) return;
@@ -5551,6 +5622,9 @@ function ChatUserList({
     const updatedList = chatList.rows.data.map(
       (chat) => chat.chatId === item.chatId ? { ...chat, unreadCount: 0 } : chat
     );
+    if (isMobile) {
+      setMobileChatOpen(true);
+    }
     dispatch(
       setMessagedUserList({
         ...chatList,
@@ -5564,6 +5638,9 @@ function ChatUserList({
   const handleSearchUsers = (value) => {
     setReceiverSearchValue(value);
   };
+  const handleBackToSidebar = () => {
+    setMobileChatOpen(false);
+  };
   useEffect5(() => {
     if (!receiverSearchValue.trim()) {
       setSearchResults([]);
@@ -5654,89 +5731,121 @@ function ChatUserList({
       },
       "Start Chat"
     )
-  ), /* @__PURE__ */ React9.createElement("div", { className: "mrchat-chatContainer" }, /* @__PURE__ */ React9.createElement("div", { className: "mrchat-sidebar" }, /* @__PURE__ */ React9.createElement("div", { className: "mrchat-sidebarTop" }, /* @__PURE__ */ React9.createElement("div", { className: "mrchat-topBar" }, /* @__PURE__ */ React9.createElement(Text3, { size: "xs", c: "dimmed", mt: "sm", mb: "xs", ml: 12 }, "All Messages"), /* @__PURE__ */ React9.createElement("div", { className: "mrchat-topActions" }, /* @__PURE__ */ React9.createElement(
-    ActionIcon2,
+  ), /* @__PURE__ */ React9.createElement("div", { className: "mrchat-chatContainer" }, /* @__PURE__ */ React9.createElement(
+    "div",
     {
-      variant: "subtle",
-      onClick: () => {
-        setReceiverUserDetails(null);
-        setReceiverSearchValue("");
-        setSearchResults([]);
-        open();
-      },
-      radius: "lg"
+      className: "mrchat-sidebar " + (isMobile && mobileChatOpen ? "mrchat-hiddenOnMobile" : "")
     },
-    /* @__PURE__ */ React9.createElement(IconPlus, { size: 20, stroke: 3 })
-  )))), /* @__PURE__ */ React9.createElement("div", { className: "mrchat-scrollWrapper" }, /* @__PURE__ */ React9.createElement(
-    VirtualizedList,
-    {
-      data: chatList?.rows?.data || [],
-      endReached: loadMoreChats,
-      itemContent: (_, item) => {
-        const isActive = item.chatId === chatId;
-        return /* @__PURE__ */ React9.createElement(
-          "div",
-          {
-            className: `${"mrchat-chatItem"} ${isActive ? "mrchat-activeChatItem" : ""}`,
-            onClick: () => {
-              if (isActive) return;
-              handleJoinChat(item);
-            }
-          },
-          item.avatar ? /* @__PURE__ */ React9.createElement(Avatar3, { src: item.avatar, size: 36, radius: "xl" }) : /* @__PURE__ */ React9.createElement(
-            Avatar3,
-            {
-              key: item.displayName || item.username,
-              name: item.displayName || item.username,
-              color: "initials"
-            }
-          ),
-          /* @__PURE__ */ React9.createElement("div", { className: "mrchat-chatInfo" }, /* @__PURE__ */ React9.createElement(Text3, { className: "mrchat-chatLabelItem", truncate: true }, item.displayName || item.username), item.unreadCount > 0 && /* @__PURE__ */ React9.createElement("div", { className: "mrchat-unreadBadge" }, item.unreadCount || 10), /* @__PURE__ */ React9.createElement("div", { className: "mrchat-messagePreview" }, /* @__PURE__ */ React9.createElement(
-            Text3,
-            {
-              truncate: true,
-              size: "xs",
-              c: "dimmed",
-              style: { maxWidth: 150 },
-              className: "mrchat-messagePreviewContent"
-            },
-            stripHtml(DOMPurify2.sanitize(item.message))
-          ), /* @__PURE__ */ React9.createElement(
-            Text3,
+    /* @__PURE__ */ React9.createElement("div", { className: "mrchat-sidebarTop" }, /* @__PURE__ */ React9.createElement("div", { className: "mrchat-topBar" }, /* @__PURE__ */ React9.createElement(Text3, { size: "xs", c: "dimmed", mt: "sm", mb: "xs", ml: 12 }, "All Messages"), /* @__PURE__ */ React9.createElement("div", { className: "mrchat-topActions" }, /* @__PURE__ */ React9.createElement(
+      ActionIcon3,
+      {
+        variant: "subtle",
+        onClick: () => {
+          setReceiverUserDetails(null);
+          setReceiverSearchValue("");
+          setSearchResults([]);
+          open();
+        },
+        radius: "lg"
+      },
+      /* @__PURE__ */ React9.createElement(IconPlus, { size: 20, stroke: 3 })
+    )))),
+    /* @__PURE__ */ React9.createElement("div", { className: "mrchat-scrollWrapper" }, /* @__PURE__ */ React9.createElement(
+      VirtualizedList,
+      {
+        data: chatList?.rows?.data || [],
+        endReached: loadMoreChats,
+        itemContent: (_, item) => {
+          const isActive = item.chatId === chatId;
+          return /* @__PURE__ */ React9.createElement(
+            "div",
             {
-              size: "xs",
-              c: "dimmed",
-              className: "mrchat-messagePreviewTime"
+              className: `${"mrchat-chatItem"} ${isActive ? "mrchat-activeChatItem" : ""}`,
+              onClick: () => {
+                if (isActive) return;
+                handleJoinChat(item);
+              }
             },
-            getChatDisplayTime(item.updatedAt || item.createdAt)
-          )))
-        );
+            item.avatar ? /* @__PURE__ */ React9.createElement(Avatar3, { src: item.avatar, size: 36, radius: "xl" }) : /* @__PURE__ */ React9.createElement(
+              Avatar3,
+              {
+                key: item.displayName || item.username,
+                name: item.displayName || item.username,
+                color: "initials"
+              }
+            ),
+            /* @__PURE__ */ React9.createElement("div", { className: "mrchat-chatInfo" }, /* @__PURE__ */ React9.createElement(Text3, { className: "mrchat-chatLabelItem", truncate: true }, item.displayName || item.username), item.unreadCount > 0 && /* @__PURE__ */ React9.createElement("div", { className: "mrchat-unreadBadge" }, item.unreadCount || 10), /* @__PURE__ */ React9.createElement("div", { className: "mrchat-messagePreview" }, /* @__PURE__ */ React9.createElement(
+              Text3,
+              {
+                truncate: true,
+                size: "xs",
+                c: "dimmed",
+                style: { maxWidth: 150 },
+                className: "mrchat-messagePreviewContent"
+              },
+              stripHtml(DOMPurify2.sanitize(item.message))
+            ), /* @__PURE__ */ React9.createElement(
+              Text3,
+              {
+                size: "xs",
+                c: "dimmed",
+                className: "mrchat-messagePreviewTime"
+              },
+              getChatDisplayTime(item.updatedAt || item.createdAt)
+            )))
+          );
+        }
       }
-    }
-  ))), /* @__PURE__ */ React9.createElement(
-    ChatUserMessage,
+    ))
+  ), /* @__PURE__ */ React9.createElement(
+    "div",
     {
-      chatId,
-      enableChat,
-      senderDetails,
-      receiverDetails,
-      onChatInitialized: (data2) => {
-        handleJoinChat({
-          chatId: data2.chatId,
-          userId: receiverDetails?.userId,
-          username: receiverDetails?.username,
-          displayName: receiverDetails?.displayName,
-          avatar: receiverDetails?.avatar
-        });
+      className: "mrchat-mainAreaWrapper " + (isMobile && !mobileChatOpen ? "mrchat-hiddenOnMobile" : "")
+    },
+    /* @__PURE__ */ React9.createElement(
+      ChatUserMessage,
+      {
+        chatId,
+        enableChat,
+        senderDetails,
+        receiverDetails,
+        onBack: handleBackToSidebar,
+        showBackButton: isMobile,
+        onChatInitialized: (data2) => {
+          handleJoinChat({
+            chatId: data2.chatId,
+            userId: receiverDetails?.userId,
+            username: receiverDetails?.username,
+            displayName: receiverDetails?.displayName,
+            avatar: receiverDetails?.avatar
+          });
+        }
       }
-    }
+    )
   )));
 }
 
 // src/components/MrChat/index.tsx
-function MrChat({ colorScheme, ...props }) {
-  const [primaryColor, setPrimaryColor] = useState6("customBrand");
+function MrChat({
+  colorScheme,
+  primaryColor = "customBrand",
+  darkColor,
+  ...props
+}) {
   const theme = createAppTheme(primaryColor);
+  useEffect6(() => {
+    if (typeof document === "undefined" || !darkColor) return;
+    const previousBodyBackground = document.body.style.backgroundColor;
+    document.body.style.backgroundColor = colorScheme === "dark" ? darkColor : "";
+    document.documentElement.style.setProperty(
+      "--mantine-color-body",
+      colorScheme === "dark" ? darkColor : ""
+    );
+    return () => {
+      document.body.style.backgroundColor = previousBodyBackground;
+      document.documentElement.style.removeProperty("--mantine-color-body");
+    };
+  }, [colorScheme, darkColor]);
   return /* @__PURE__ */ React10.createElement(ReduxProvider, null, /* @__PURE__ */ React10.createElement(SocketProvider, null, /* @__PURE__ */ React10.createElement(
     MantineProvider,
     {

package/package.json

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