mr-chat-bird 1.0.15 → 1.0.17

package/README.md

@@ -25,4 +25,4 @@ Some features are still being implemented, improved, or may change in future rel
 ## Installation
 
 ```bash
-npm install mr-chat-bird
+npm install mr-chat-bird

package/dist/index.css

@@ -29,6 +29,8 @@
 }
 .mrchat-richTextEditorContainer .ProseMirror {
   padding: 12px 16px 4px;
+  overflow-wrap: anywhere;
+  word-break: break-word;
 }
 .mrchat-mainActionContainer {
   height: 24px;
@@ -57,6 +59,12 @@
   position: absolute;
   right: 6px;
 }
+.mrchat-sm-mainSendMsgIcon {
+  display: none;
+  position: absolute;
+  right: 4px;
+  bottom: 1.5px;
+}
 .mrchat-customToolActionItem {
   background-color: var(--mantine-color-body);
   border-color: var(--mantine-color-default-border);
@@ -78,6 +86,25 @@
     display: none;
   }
 }
+@media (max-width: 475px) {
+  .mrchat-mainActionContainer {
+    display: none;
+  }
+  .mrchat-richTextEditorContainer .mantine-RichTextEditor-Typography,
+  .mrchat-richTextEditorContainer .mantine-RichTextEditor-content {
+    min-height: 30px;
+    border-radius: 12px;
+  }
+  .mrchat-richTextEditorContainer {
+    border-radius: 12px;
+  }
+  .mrchat-richTextEditorContainer .ProseMirror {
+    padding: 8px 12px 4px;
+  }
+  .mrchat-sm-mainSendMsgIcon {
+    display: block;
+  }
+}
 :where([data-mantine-color-scheme=dark]) .mantine-RichTextEditor-control {
   background-color: var(--mantine-color-body);
 }

package/dist/index.d.mts

@@ -13,7 +13,10 @@ type ChatUserListProps = {
     primaryColor?: string;
     darkColor?: string;
 };
+type MrChatProps = ChatUserListProps & {
+    authorization: string;
+};
 
-declare function MrChat({ colorScheme, primaryColor, darkColor, ...props }: ChatUserListProps): React.JSX.Element;
+declare function MrChat({ colorScheme, primaryColor, darkColor, authorization, ...props }: MrChatProps): React.JSX.Element;
 
 export { MrChat };

package/dist/index.d.ts

@@ -13,7 +13,10 @@ type ChatUserListProps = {
     primaryColor?: string;
     darkColor?: string;
 };
+type MrChatProps = ChatUserListProps & {
+    authorization: string;
+};
 
-declare function MrChat({ colorScheme, primaryColor, darkColor, ...props }: ChatUserListProps): React.JSX.Element;
+declare function MrChat({ colorScheme, primaryColor, darkColor, authorization, ...props }: MrChatProps): React.JSX.Element;
 
 export { MrChat };

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_react11 = __toESM(require("react"));
+var import_react12 = __toESM(require("react"));
 var import_core9 = require("@mantine/core");
 var import_notifications2 = require("@mantine/notifications");
 
@@ -162,9 +162,15 @@ var import_toolkit = require("@reduxjs/toolkit");
 // src/utils/environment.ts
 var environment = {
   BASE_URL: "http://localhost:4000",
-  SOCKET_URL: "http://localhost:4000",
-  AUTHORIZATION: "hgshygsydgsydgsydgsyd"
+  SOCKET_URL: "http://localhost:4000"
+  // BASE_URL: 'http://62.171.185.159:4000',
+  // SOCKET_URL: "http://62.171.185.159:4000",
 };
+var authorization = "";
+var setEnvironmentAuthorization = (value) => {
+  authorization = value || "";
+};
+var getEnvironmentAuthorization = () => authorization;
 
 // src/lib/axios.ts
 var import_axios = __toESM(require("axios"));
@@ -172,9 +178,13 @@ var axiosInstance = import_axios.default.create({
   baseURL: environment.BASE_URL,
   headers: {
     "Content-Type": "application/json",
-    Authorization: environment.AUTHORIZATION
+    Authorization: getEnvironmentAuthorization()
   }
 });
+axiosInstance.interceptors.request.use((config) => {
+  config.headers?.set?.("Authorization", getEnvironmentAuthorization());
+  return config;
+});
 var axios_default = axiosInstance;
 
 // src/store/slices/ChatSlice.ts
@@ -338,6 +348,10 @@ var deleteMessagesByChatId = (payload) => async (dispatch) => {
     return err;
   });
 };
+var resetAllMessages = () => async (dispatch) => {
+  dispatch(setMessagedUserList(null));
+  dispatch(resetMessageList());
+};
 var {
   setMessagedUserList,
   setMessageList,
@@ -379,7 +393,7 @@ var getSocket = (userId) => {
       autoConnect: false,
       transports: ["websocket"],
       auth: {
-        apiKey: environment.AUTHORIZATION,
+        apiKey: getEnvironmentAuthorization(),
         userId
       }
     });
@@ -4792,7 +4806,8 @@ function EmojiPickerPopover({
   action,
   size = 320,
   offset = 8,
-  position = "bottom-start"
+  position = "bottom-start",
+  colorScheme = "light"
 }) {
   const [opened, setOpened] = (0, import_react3.useState)(false);
   return /* @__PURE__ */ import_react3.default.createElement(
@@ -4823,7 +4838,7 @@ function EmojiPickerPopover({
         EmojiPicker,
         {
           previewPosition: "none",
-          theme: "light",
+          theme: colorScheme,
           data: import_data.default,
           onEmojiSelect: (emoji) => {
             onSelect(emoji.native);
@@ -4873,11 +4888,36 @@ function CustomRichTextEditor({
   content = "",
   maxLength = 3e3,
   onChange,
-  onSubmit
+  onSubmit,
+  colorScheme = "light"
 }) {
   const [charCount, setCharCount] = (0, import_react4.useState)(0);
+  const [hasContent, setHasContent] = (0, import_react4.useState)(false);
   const [showWarning, setShowWarning] = (0, import_react4.useState)(false);
   const [showToolbar, setShowToolbar] = (0, import_react4.useState)(false);
+  const handleSubmitMsg = () => {
+    if (!editor) return;
+    const message = editor.getHTML();
+    if (!editor.getText().trim()) return;
+    onSubmit?.(message);
+    editor.commands.clearContent();
+    editor.commands.focus();
+    setCharCount(0);
+    setHasContent(false);
+  };
+  const handleEditorKeyDown = (_view, event) => {
+    if (event.key === "Enter" && !event.shiftKey) {
+      event.preventDefault();
+      handleSubmitMsg();
+      return true;
+    }
+    if (event.key === "Enter" && event.shiftKey) {
+      event.preventDefault();
+      editor?.commands.setHardBreak();
+      return true;
+    }
+    return false;
+  };
   const editor = (0, import_react5.useEditor)({
     extensions: [
       import_starter_kit.default,
@@ -4890,9 +4930,14 @@ function CustomRichTextEditor({
       import_extension_text_align.default.configure({ types: ["heading", "paragraph"] })
     ],
     content,
+    editorProps: {
+      handleKeyDown: handleEditorKeyDown
+    },
     onUpdate: ({ editor: editor2 }) => {
       const text = editor2.getText();
+      const nextHasContent = text.trim().length > 0;
       setCharCount(text.length);
+      setHasContent(nextHasContent);
       if (maxLength && text.length >= maxLength) {
         setShowWarning(true);
       } else {
@@ -4902,15 +4947,6 @@ function CustomRichTextEditor({
     },
     immediatelyRender: false
   });
-  const handleSubmitMsg = () => {
-    if (!editor) return;
-    const message = editor.getHTML();
-    if (!editor.getText().trim()) return;
-    onSubmit?.(message);
-    editor.commands.clearContent();
-    editor.commands.focus();
-    setCharCount(0);
-  };
   return /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement(
     import_tiptap.RichTextEditor,
     {
@@ -4922,6 +4958,7 @@ function CustomRichTextEditor({
     /* @__PURE__ */ import_react4.default.createElement(import_tiptap.RichTextEditor.Toolbar, { sticky: true, stickyOffset: "var(--docs-header-height)" }, /* @__PURE__ */ import_react4.default.createElement("div", { className: "mrchat-mainActionContainer" }, /* @__PURE__ */ import_react4.default.createElement(
       EmojiPickerPopover,
       {
+        colorScheme,
         onSelect: (emoji) => {
           editor?.chain().focus().insertContent({
             type: "emoji",
@@ -4958,10 +4995,22 @@ function CustomRichTextEditor({
         variant: "filled",
         "aria-label": "send",
         className: "mrchat-mainSendMsgIcon",
-        onClick: () => handleSubmitMsg()
+        onClick: handleSubmitMsg,
+        disabled: !hasContent
+      },
+      /* @__PURE__ */ import_react4.default.createElement(import_icons_react.IconSend, { size: 18 })
+    )), /* @__PURE__ */ import_react4.default.createElement(
+      import_core5.ActionIcon,
+      {
+        radius: "lg",
+        variant: "filled",
+        "aria-label": "send",
+        className: "mrchat-sm-mainSendMsgIcon",
+        onClick: handleSubmitMsg,
+        disabled: !hasContent
       },
       /* @__PURE__ */ import_react4.default.createElement(import_icons_react.IconSend, { size: 18 })
-    )), showToolbar && /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement(import_tiptap.RichTextEditor.ControlsGroup, null, /* @__PURE__ */ import_react4.default.createElement(import_tiptap.RichTextEditor.Bold, null), /* @__PURE__ */ import_react4.default.createElement(import_tiptap.RichTextEditor.Italic, null), /* @__PURE__ */ import_react4.default.createElement(import_tiptap.RichTextEditor.Underline, null), /* @__PURE__ */ import_react4.default.createElement(import_tiptap.RichTextEditor.Strikethrough, null), /* @__PURE__ */ import_react4.default.createElement(import_tiptap.RichTextEditor.Code, null), /* @__PURE__ */ import_react4.default.createElement(import_tiptap.RichTextEditor.Highlight, null)), /* @__PURE__ */ import_react4.default.createElement(
+    ), showToolbar && /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement(import_tiptap.RichTextEditor.ControlsGroup, null, /* @__PURE__ */ import_react4.default.createElement(import_tiptap.RichTextEditor.Bold, null), /* @__PURE__ */ import_react4.default.createElement(import_tiptap.RichTextEditor.Italic, null), /* @__PURE__ */ import_react4.default.createElement(import_tiptap.RichTextEditor.Underline, null), /* @__PURE__ */ import_react4.default.createElement(import_tiptap.RichTextEditor.Strikethrough, null), /* @__PURE__ */ import_react4.default.createElement(import_tiptap.RichTextEditor.Code, null), /* @__PURE__ */ import_react4.default.createElement(import_tiptap.RichTextEditor.Highlight, null)), /* @__PURE__ */ import_react4.default.createElement(
       import_tiptap.RichTextEditor.ControlsGroup,
       {
         className: "mrchat-secondRichTextEditorToolBar"
@@ -5059,7 +5108,7 @@ function ChatScrollContainer({
   const handleScroll = () => {
     const el = containerRef.current;
     if (!el) return;
-    if (el.scrollTop < 20 && hasMore && !isFetchingRef.current) {
+    if (el.scrollTop < 50 && hasMore && !isFetchingRef.current) {
       loadOlderMessages();
     }
   };
@@ -5075,7 +5124,7 @@ function ChatScrollContainer({
       const heightDiff = newScrollHeight - prevScrollHeight;
       el.scrollTop = prevScrollTop + heightDiff;
       isFetchingRef.current = false;
-    }, 0);
+    }, 50);
   };
   return /* @__PURE__ */ import_react6.default.createElement(
     "div",
@@ -5149,7 +5198,8 @@ function ChatUserMessage({
   receiverDetails,
   onChatInitialized,
   onBack,
-  showBackButton
+  showBackButton,
+  colorScheme
 }) {
   const dispatch = (0, import_react_redux2.useDispatch)();
   const messageList = (0, import_react_redux2.useSelector)(
@@ -5186,7 +5236,7 @@ function ChatUserMessage({
     }
   }, [chatId]);
   (0, import_react8.useEffect)(() => {
-    if (!senderDetails?.userId) return;
+    if (!senderDetails?.userId || !getEnvironmentAuthorization()) return;
     const socket2 = getSocket(senderDetails?.userId || "");
     if (!socket2) return;
     const handleNewMessage = (data2) => {
@@ -5368,7 +5418,7 @@ function ChatUserMessage({
         ));
       }
     }
-  )), (chatId || enableChat) && /* @__PURE__ */ import_react8.default.createElement("div", { className: "mrchat-inputBar" }, /* @__PURE__ */ import_react8.default.createElement(CustomRichTextEditor, { onSubmit: handleSendMessage })), /* @__PURE__ */ import_react8.default.createElement(
+  )), (chatId || enableChat) && /* @__PURE__ */ import_react8.default.createElement("div", { className: "mrchat-inputBar" }, /* @__PURE__ */ import_react8.default.createElement(CustomRichTextEditor, { onSubmit: handleSendMessage, colorScheme })), /* @__PURE__ */ import_react8.default.createElement(
     UserProfileDrawer,
     {
       opened: showUserInfo,
@@ -5448,7 +5498,8 @@ var getChatDisplayTime = (timestamp) => {
 // src/components/ChatUserList/ChatUserList.tsx
 function ChatUserList({
   currentUser,
-  onSearchUsers
+  onSearchUsers,
+  colorScheme
 }) {
   const [opened, { open, close }] = (0, import_hooks.useDisclosure)(false);
   const dispatch = (0, import_react_redux3.useDispatch)();
@@ -5824,21 +5875,40 @@ function ChatUserList({
             displayName: receiverDetails?.displayName,
             avatar: receiverDetails?.avatar
           });
-        }
+        },
+        colorScheme
       }
     )
   )));
 }
 
+// src/store/reset.tsx
+var import_react11 = require("react");
+var import_react_redux4 = require("react-redux");
+function ResetHandler() {
+  const dispatch = (0, import_react_redux4.useDispatch)();
+  (0, import_react11.useEffect)(() => {
+    return () => {
+      dispatch(resetAllMessages());
+    };
+  }, [dispatch]);
+  return null;
+}
+
 // src/components/MrChat/index.tsx
 function MrChat({
   colorScheme,
   primaryColor = "customBrand",
   darkColor,
+  authorization: authorization2,
   ...props
 }) {
   const theme = createAppTheme(primaryColor);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useLayoutEffect)(() => {
+    if (typeof window === "undefined") return;
+    setEnvironmentAuthorization(authorization2 || "");
+  }, [authorization2]);
+  (0, import_react12.useEffect)(() => {
     if (typeof document === "undefined" || !darkColor) return;
     const previousBodyBackground = document.body.style.backgroundColor;
     document.body.style.backgroundColor = colorScheme === "dark" ? darkColor : "";
@@ -5851,15 +5921,15 @@ function MrChat({
       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(
+  return /* @__PURE__ */ import_react12.default.createElement(ReduxProvider, null, /* @__PURE__ */ import_react12.default.createElement(SocketProvider, null, /* @__PURE__ */ import_react12.default.createElement(ResetHandler, null), /* @__PURE__ */ import_react12.default.createElement(
     import_core9.MantineProvider,
     {
       defaultColorScheme: colorScheme ?? "light",
       forceColorScheme: colorScheme,
       theme
     },
-    /* @__PURE__ */ import_react11.default.createElement(import_notifications2.Notifications, null),
-    /* @__PURE__ */ import_react11.default.createElement(ChatUserList, { ...props })
+    /* @__PURE__ */ import_react12.default.createElement(import_notifications2.Notifications, null),
+    /* @__PURE__ */ import_react12.default.createElement(ChatUserList, { colorScheme, ...props })
   )));
 }
 // Annotate the CommonJS export names for ESM import in node:

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, { useEffect as useEffect6 } from "react";
+import React10, { useEffect as useEffect7, useLayoutEffect } from "react";
 import { MantineProvider } from "@mantine/core";
 import { Notifications } from "@mantine/notifications";
 
@@ -126,9 +126,15 @@ import { createSlice } from "@reduxjs/toolkit";
 // src/utils/environment.ts
 var environment = {
   BASE_URL: "http://localhost:4000",
-  SOCKET_URL: "http://localhost:4000",
-  AUTHORIZATION: "hgshygsydgsydgsydgsyd"
+  SOCKET_URL: "http://localhost:4000"
+  // BASE_URL: 'http://62.171.185.159:4000',
+  // SOCKET_URL: "http://62.171.185.159:4000",
 };
+var authorization = "";
+var setEnvironmentAuthorization = (value) => {
+  authorization = value || "";
+};
+var getEnvironmentAuthorization = () => authorization;
 
 // src/lib/axios.ts
 import axios from "axios";
@@ -136,9 +142,13 @@ var axiosInstance = axios.create({
   baseURL: environment.BASE_URL,
   headers: {
     "Content-Type": "application/json",
-    Authorization: environment.AUTHORIZATION
+    Authorization: getEnvironmentAuthorization()
   }
 });
+axiosInstance.interceptors.request.use((config) => {
+  config.headers?.set?.("Authorization", getEnvironmentAuthorization());
+  return config;
+});
 var axios_default = axiosInstance;
 
 // src/store/slices/ChatSlice.ts
@@ -302,6 +312,10 @@ var deleteMessagesByChatId = (payload) => async (dispatch) => {
     return err;
   });
 };
+var resetAllMessages = () => async (dispatch) => {
+  dispatch(setMessagedUserList(null));
+  dispatch(resetMessageList());
+};
 var {
   setMessagedUserList,
   setMessageList,
@@ -343,7 +357,7 @@ var getSocket = (userId) => {
       autoConnect: false,
       transports: ["websocket"],
       auth: {
-        apiKey: environment.AUTHORIZATION,
+        apiKey: getEnvironmentAuthorization(),
         userId
       }
     });
@@ -4785,7 +4799,8 @@ function EmojiPickerPopover({
   action,
   size = 320,
   offset = 8,
-  position = "bottom-start"
+  position = "bottom-start",
+  colorScheme = "light"
 }) {
   const [opened, setOpened] = useState(false);
   return /* @__PURE__ */ React3.createElement(
@@ -4816,7 +4831,7 @@ function EmojiPickerPopover({
         EmojiPicker,
         {
           previewPosition: "none",
-          theme: "light",
+          theme: colorScheme,
           data,
           onEmojiSelect: (emoji) => {
             onSelect(emoji.native);
@@ -4866,11 +4881,36 @@ function CustomRichTextEditor({
   content = "",
   maxLength = 3e3,
   onChange,
-  onSubmit
+  onSubmit,
+  colorScheme = "light"
 }) {
   const [charCount, setCharCount] = useState2(0);
+  const [hasContent, setHasContent] = useState2(false);
   const [showWarning, setShowWarning] = useState2(false);
   const [showToolbar, setShowToolbar] = useState2(false);
+  const handleSubmitMsg = () => {
+    if (!editor) return;
+    const message = editor.getHTML();
+    if (!editor.getText().trim()) return;
+    onSubmit?.(message);
+    editor.commands.clearContent();
+    editor.commands.focus();
+    setCharCount(0);
+    setHasContent(false);
+  };
+  const handleEditorKeyDown = (_view, event) => {
+    if (event.key === "Enter" && !event.shiftKey) {
+      event.preventDefault();
+      handleSubmitMsg();
+      return true;
+    }
+    if (event.key === "Enter" && event.shiftKey) {
+      event.preventDefault();
+      editor?.commands.setHardBreak();
+      return true;
+    }
+    return false;
+  };
   const editor = useEditor({
     extensions: [
       StarterKit,
@@ -4883,9 +4923,14 @@ function CustomRichTextEditor({
       TextAlign.configure({ types: ["heading", "paragraph"] })
     ],
     content,
+    editorProps: {
+      handleKeyDown: handleEditorKeyDown
+    },
     onUpdate: ({ editor: editor2 }) => {
       const text = editor2.getText();
+      const nextHasContent = text.trim().length > 0;
       setCharCount(text.length);
+      setHasContent(nextHasContent);
       if (maxLength && text.length >= maxLength) {
         setShowWarning(true);
       } else {
@@ -4895,15 +4940,6 @@ function CustomRichTextEditor({
     },
     immediatelyRender: false
   });
-  const handleSubmitMsg = () => {
-    if (!editor) return;
-    const message = editor.getHTML();
-    if (!editor.getText().trim()) return;
-    onSubmit?.(message);
-    editor.commands.clearContent();
-    editor.commands.focus();
-    setCharCount(0);
-  };
   return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(
     RichTextEditor,
     {
@@ -4915,6 +4951,7 @@ function CustomRichTextEditor({
     /* @__PURE__ */ React4.createElement(RichTextEditor.Toolbar, { sticky: true, stickyOffset: "var(--docs-header-height)" }, /* @__PURE__ */ React4.createElement("div", { className: "mrchat-mainActionContainer" }, /* @__PURE__ */ React4.createElement(
       EmojiPickerPopover,
       {
+        colorScheme,
         onSelect: (emoji) => {
           editor?.chain().focus().insertContent({
             type: "emoji",
@@ -4951,10 +4988,22 @@ function CustomRichTextEditor({
         variant: "filled",
         "aria-label": "send",
         className: "mrchat-mainSendMsgIcon",
-        onClick: () => handleSubmitMsg()
+        onClick: handleSubmitMsg,
+        disabled: !hasContent
+      },
+      /* @__PURE__ */ React4.createElement(IconSend, { size: 18 })
+    )), /* @__PURE__ */ React4.createElement(
+      ActionIcon,
+      {
+        radius: "lg",
+        variant: "filled",
+        "aria-label": "send",
+        className: "mrchat-sm-mainSendMsgIcon",
+        onClick: handleSubmitMsg,
+        disabled: !hasContent
       },
       /* @__PURE__ */ React4.createElement(IconSend, { size: 18 })
-    )), showToolbar && /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(RichTextEditor.ControlsGroup, null, /* @__PURE__ */ React4.createElement(RichTextEditor.Bold, null), /* @__PURE__ */ React4.createElement(RichTextEditor.Italic, null), /* @__PURE__ */ React4.createElement(RichTextEditor.Underline, null), /* @__PURE__ */ React4.createElement(RichTextEditor.Strikethrough, null), /* @__PURE__ */ React4.createElement(RichTextEditor.Code, null), /* @__PURE__ */ React4.createElement(RichTextEditor.Highlight, null)), /* @__PURE__ */ React4.createElement(
+    ), showToolbar && /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(RichTextEditor.ControlsGroup, null, /* @__PURE__ */ React4.createElement(RichTextEditor.Bold, null), /* @__PURE__ */ React4.createElement(RichTextEditor.Italic, null), /* @__PURE__ */ React4.createElement(RichTextEditor.Underline, null), /* @__PURE__ */ React4.createElement(RichTextEditor.Strikethrough, null), /* @__PURE__ */ React4.createElement(RichTextEditor.Code, null), /* @__PURE__ */ React4.createElement(RichTextEditor.Highlight, null)), /* @__PURE__ */ React4.createElement(
       RichTextEditor.ControlsGroup,
       {
         className: "mrchat-secondRichTextEditorToolBar"
@@ -5052,7 +5101,7 @@ function ChatScrollContainer({
   const handleScroll = () => {
     const el = containerRef.current;
     if (!el) return;
-    if (el.scrollTop < 20 && hasMore && !isFetchingRef.current) {
+    if (el.scrollTop < 50 && hasMore && !isFetchingRef.current) {
       loadOlderMessages();
     }
   };
@@ -5068,7 +5117,7 @@ function ChatScrollContainer({
       const heightDiff = newScrollHeight - prevScrollHeight;
       el.scrollTop = prevScrollTop + heightDiff;
       isFetchingRef.current = false;
-    }, 0);
+    }, 50);
   };
   return /* @__PURE__ */ React5.createElement(
     "div",
@@ -5144,7 +5193,8 @@ function ChatUserMessage({
   receiverDetails,
   onChatInitialized,
   onBack,
-  showBackButton
+  showBackButton,
+  colorScheme
 }) {
   const dispatch = useDispatch();
   const messageList = useSelector(
@@ -5181,7 +5231,7 @@ function ChatUserMessage({
     }
   }, [chatId]);
   useEffect4(() => {
-    if (!senderDetails?.userId) return;
+    if (!senderDetails?.userId || !getEnvironmentAuthorization()) return;
     const socket2 = getSocket(senderDetails?.userId || "");
     if (!socket2) return;
     const handleNewMessage = (data2) => {
@@ -5363,7 +5413,7 @@ function ChatUserMessage({
         ));
       }
     }
-  )), (chatId || enableChat) && /* @__PURE__ */ React7.createElement("div", { className: "mrchat-inputBar" }, /* @__PURE__ */ React7.createElement(CustomRichTextEditor, { onSubmit: handleSendMessage })), /* @__PURE__ */ React7.createElement(
+  )), (chatId || enableChat) && /* @__PURE__ */ React7.createElement("div", { className: "mrchat-inputBar" }, /* @__PURE__ */ React7.createElement(CustomRichTextEditor, { onSubmit: handleSendMessage, colorScheme })), /* @__PURE__ */ React7.createElement(
     UserProfileDrawer,
     {
       opened: showUserInfo,
@@ -5443,7 +5493,8 @@ var getChatDisplayTime = (timestamp) => {
 // src/components/ChatUserList/ChatUserList.tsx
 function ChatUserList({
   currentUser,
-  onSearchUsers
+  onSearchUsers,
+  colorScheme
 }) {
   const [opened, { open, close }] = useDisclosure(false);
   const dispatch = useDispatch2();
@@ -5819,21 +5870,40 @@ function ChatUserList({
             displayName: receiverDetails?.displayName,
             avatar: receiverDetails?.avatar
           });
-        }
+        },
+        colorScheme
       }
     )
   )));
 }
 
+// src/store/reset.tsx
+import { useEffect as useEffect6 } from "react";
+import { useDispatch as useDispatch3 } from "react-redux";
+function ResetHandler() {
+  const dispatch = useDispatch3();
+  useEffect6(() => {
+    return () => {
+      dispatch(resetAllMessages());
+    };
+  }, [dispatch]);
+  return null;
+}
+
 // src/components/MrChat/index.tsx
 function MrChat({
   colorScheme,
   primaryColor = "customBrand",
   darkColor,
+  authorization: authorization2,
   ...props
 }) {
   const theme = createAppTheme(primaryColor);
-  useEffect6(() => {
+  useLayoutEffect(() => {
+    if (typeof window === "undefined") return;
+    setEnvironmentAuthorization(authorization2 || "");
+  }, [authorization2]);
+  useEffect7(() => {
     if (typeof document === "undefined" || !darkColor) return;
     const previousBodyBackground = document.body.style.backgroundColor;
     document.body.style.backgroundColor = colorScheme === "dark" ? darkColor : "";
@@ -5846,7 +5916,7 @@ function MrChat({
       document.documentElement.style.removeProperty("--mantine-color-body");
     };
   }, [colorScheme, darkColor]);
-  return /* @__PURE__ */ React10.createElement(ReduxProvider, null, /* @__PURE__ */ React10.createElement(SocketProvider, null, /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React10.createElement(ReduxProvider, null, /* @__PURE__ */ React10.createElement(SocketProvider, null, /* @__PURE__ */ React10.createElement(ResetHandler, null), /* @__PURE__ */ React10.createElement(
     MantineProvider,
     {
       defaultColorScheme: colorScheme ?? "light",
@@ -5854,7 +5924,7 @@ function MrChat({
       theme
     },
     /* @__PURE__ */ React10.createElement(Notifications, null),
-    /* @__PURE__ */ React10.createElement(ChatUserList, { ...props })
+    /* @__PURE__ */ React10.createElement(ChatUserList, { colorScheme, ...props })
   )));
 }
 export {

package/package.json

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

package/dist/AddReaction-DCDVOMZB.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000"><path d="M480-480Zm0 400q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q33 0 65 5t62 15q23 8 29 23.5t1 30.5q-5 15-18.5 23.5T588-781q-26-9-52.5-14t-55.5-5q-133 0-226.5 93.5T160-480q0 133 93.5 226.5T480-160q133 0 226.5-93.5T800-480q0-18-2-36t-6-35q-5-19 5-31t25-15q15-3 29.5 4.5T871-564q5 20 7 41t2 43q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm320-680h-40q-17 0-28.5-11.5T720-800q0-17 11.5-28.5T760-840h40v-40q0-17 11.5-28.5T840-920q17 0 28.5 11.5T880-880v40h40q17 0 28.5 11.5T960-800q0 17-11.5 28.5T920-760h-40v40q0 17-11.5 28.5T840-680q-17 0-28.5-11.5T800-720v-40ZM620-520q25 0 42.5-17.5T680-580q0-25-17.5-42.5T620-640q-25 0-42.5 17.5T560-580q0 25 17.5 42.5T620-520Zm-280 0q25 0 42.5-17.5T400-580q0-25-17.5-42.5T340-640q-25 0-42.5 17.5T280-580q0 25 17.5 42.5T340-520Zm140 260q58 0 107-28t79-76q6-12-1-24t-21-12H316q-14 0-21 12t-1 24q30 48 79.5 76T480-260Z"/></svg>