mr-chat-bird 1.0.12 → 1.0.14

package/dist/index.css

@@ -41,25 +41,26 @@
   margin: 0 4px 0 3px;
 }
 .mrchat-mainActionEmojiIcon svg {
-  padding: 2.3px;
+  padding: 2px;
+  color: var(--mantine-color-text);
 }
-.mrchat-mainActionAddIcon svg,
-.mrchat-mainTextFormatIcon svg,
-.mrchat-mainActionEmojiIcon svg {
-  fill: #495057;
+.mrchat-mainActionAddIcon svg {
+  color: var(--mantine-color-text);
 }
 .mrchat-mainTextFormatIcon svg {
   position: relative;
   top: 1.2px;
+  padding: 0.7px;
+  color: var(--mantine-color-text);
 }
 .mrchat-mainSendMsgIcon {
   position: absolute;
   right: 6px;
 }
 .mrchat-customToolActionItem {
-  background-color: var(--mantine-color-white);
-  border-color: var(--mantine-color-gray-4);
-  color: var(--mantine-color-gray-7);
+  background-color: var(--mantine-color-body);
+  border-color: var(--mantine-color-default-border);
+  color: var(--mantine-color-text);
   border-radius: 0px;
   height: 26px;
   min-height: 26px;
@@ -77,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 {
@@ -92,7 +96,8 @@
   width: 100%;
   max-width: 400px;
   height: 100%;
-  background: #fff;
+  background: var(--mantine-color-body);
+  color: var(--mantine-color-text);
   display: flex;
   flex-direction: column;
 }
@@ -124,16 +129,17 @@
   align-items: center;
   gap: 15px;
   padding: 0 16px;
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid var(--mantine-color-default-border);
 }
 .mrchat-backBtn {
   cursor: pointer;
   display: flex;
   align-items: center;
+  color: var(--mantine-color-text);
 }
 .mrchat-profileSection {
   padding: 30px 20px;
-  border-bottom: 1px solid #f0f0f0;
+  border-bottom: 1px solid var(--mantine-color-default-border);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -149,15 +155,16 @@
   padding: 14px;
   border-radius: 10px;
   cursor: pointer;
+  color: var(--mantine-color-text);
 }
 .mrchat-item:hover {
-  background: #f5f5f5;
+  background: var(--mantine-color-default-hover);
 }
 .mrchat-itemDanger {
-  color: #fa5252;
+  color: var(--mantine-color-red-filled);
 }
 .mrchat-itemDanger:hover {
-  background: rgba(250, 82, 82, 0.1);
+  background-color: color-mix(in srgb, var(--mantine-color-red-filled) 12%, transparent);
 }
 .mrchat-imagePreview {
   position: fixed;
@@ -179,31 +186,34 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  height: 100vh;
-  background: #f1f3f5;
+  min-height: 500px;
+  height: 100%;
+  flex: 1;
+  background-color: var(--mantine-color-body);
+  color: var(--mantine-color-text);
 }
 .mrchat-chatContainer {
   display: flex;
   width: 100%;
   max-width: 1260px;
-  background: white;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
-  border-radius: 8px;
+  min-height: 500px;
+  height: 100%;
+  flex: 1;
   overflow: hidden;
+  border-radius: 8px;
+  background-color: var(--mantine-color-body);
+  border: 1px solid color-mix(in srgb, var(--mantine-color-text) 12%, transparent);
 }
 .mrchat-sidebar {
   width: 280px;
   display: flex;
   flex-direction: column;
-  height: 100vh;
-  border-right: 1px solid #eee;
-  background-color: #fff;
+  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;
-}
-@media (max-width: 760px) {
-  .mrchat-sidebar {
-    width: 180px;
-  }
+  background-color: var(--mantine-color-body);
 }
 .mrchat-sidebarTop {
   padding: 0 12px;
@@ -221,11 +231,20 @@
 .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;
-  height: 100%;
+  min-height: 0;
   overflow-y: auto;
 }
 .mrchat-scrollArea .mantine-ScrollArea-content {
@@ -241,12 +260,14 @@
   flex: 1;
   display: flex;
   flex-direction: column;
+  min-height: 0;
 }
 .mrchat-messageArea {
   flex: 1;
   padding: 16px;
   overflow-y: auto;
   padding-bottom: 10px;
+  min-height: 0;
 }
 .mrchat-messageBubble {
   max-width: fit-content;
@@ -255,19 +276,42 @@
   position: relative;
 }
 .mrchat-outgoing {
-  color: white;
-  background-color: #366ca4;
+  color: var(--mantine-color-white);
+  background-color: var(--mantine-primary-color-filled);
   margin-left: auto;
 }
 .mrchat-incoming {
-  background-color: #eeeeee;
+  background-color: var(--mantine-color-default-hover);
+  color: var(--mantine-color-text);
   margin-right: auto;
 }
 .mrchat-inputBar {
   display: flex;
   align-items: end;
   gap: 8px;
-  padding: 0px 16px 16px;
+  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;
@@ -278,24 +322,28 @@
   transition: background 0.2s;
   margin: 2px 4px;
   border-radius: 6px;
+  color: var(--mantine-color-text);
 }
 .mrchat-chatItem:hover {
-  background-color: #f6f6f6;
+  background-color: var(--mantine-color-default-hover);
 }
 .mrchat-chatLabelItem {
   font-size: 15px;
 }
 .mrchat-chatHeader {
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-start;
   align-items: center;
   padding: 12px 16px;
-  border-bottom: 1px solid #eee;
-  background-color: #f8f9fa;
+  border-bottom: 1px solid color-mix(in srgb, var(--mantine-color-text) 12%, transparent);
   position: sticky;
   top: 0;
   z-index: 2;
   min-height: 63px;
+  gap: 10px;
+}
+.mrchat-backButton {
+  padding: 4px;
 }
 .mrchat-receiverInfo {
   display: flex;
@@ -315,13 +363,12 @@
   gap: 6px;
   padding: 6px 10px;
   border-radius: 12px;
-  background: rgba(0, 0, 0, 0.04);
-  color: #666;
+  background: var(--mantine-color-default-hover);
+  color: var(--mantine-color-dimmed);
   font-size: 12px;
 }
 .mrchat-encryptionText {
   font-size: 16px;
-  color: #666;
   margin-left: 3px;
 }
 .mrchat-messageContent {
@@ -335,10 +382,10 @@
   padding: 0;
 }
 .mrchat-activeChatItem {
-  background-color: #eee;
+  background-color: var(--mantine-color-default-hover);
 }
 .mrchat-chatItem:hover {
-  background-color: #eee;
+  background-color: var(--mantine-color-default-hover);
 }
 .mrchat-messageTime {
   font-size: 11px;
@@ -372,8 +419,8 @@
   right: 0;
 }
 .mrchat-unreadBadge {
-  background: #366ca4;
-  color: white;
+  background: var(--mantine-primary-color-filled);
+  color: var(--mantine-color-white);
   font-size: 10px;
   border-radius: 50%;
   padding: 3px 5px;

package/dist/index.d.mts

@@ -1,5 +1,19 @@
 import React from 'react';
 
-declare function MrChat(props: any): React.JSX.Element;
+type UserData = {
+    userId: string;
+    username: string;
+    displayName?: string;
+    avatar?: string;
+};
+type ChatUserListProps = {
+    currentUser?: UserData;
+    onSearchUsers?: (query: string) => UserData[] | Promise<UserData[]>;
+    colorScheme?: "light" | "dark";
+    primaryColor?: string;
+    darkColor?: string;
+};
+
+declare function MrChat({ colorScheme, primaryColor, darkColor, ...props }: ChatUserListProps): React.JSX.Element;
 
 export { MrChat };

package/dist/index.d.ts

@@ -1,5 +1,19 @@
 import React from 'react';
 
-declare function MrChat(props: any): React.JSX.Element;
+type UserData = {
+    userId: string;
+    username: string;
+    displayName?: string;
+    avatar?: string;
+};
+type ChatUserListProps = {
+    currentUser?: UserData;
+    onSearchUsers?: (query: string) => UserData[] | Promise<UserData[]>;
+    colorScheme?: "light" | "dark";
+    primaryColor?: string;
+    darkColor?: string;
+};
+
+declare function MrChat({ colorScheme, primaryColor, darkColor, ...props }: ChatUserListProps): React.JSX.Element;
 
 export { MrChat };