mr-chat-bird 1.0.12 → 1.0.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.css +52 -36
  2. package/dist/index.d.mts +13 -1
  3. package/dist/index.d.ts +13 -1
  4. package/dist/index.js +84 -740
  5. package/dist/index.mjs +92 -750
  6. package/package.json +1 -1
package/dist/index.css CHANGED
@@ -41,25 +41,26 @@
41
41
  margin: 0 4px 0 3px;
42
42
  }
43
43
  .mrchat-mainActionEmojiIcon svg {
44
- padding: 2.3px;
44
+ padding: 2px;
45
+ color: var(--mantine-color-text);
45
46
  }
46
- .mrchat-mainActionAddIcon svg,
47
- .mrchat-mainTextFormatIcon svg,
48
- .mrchat-mainActionEmojiIcon svg {
49
- fill: #495057;
47
+ .mrchat-mainActionAddIcon svg {
48
+ color: var(--mantine-color-text);
50
49
  }
51
50
  .mrchat-mainTextFormatIcon svg {
52
51
  position: relative;
53
52
  top: 1.2px;
53
+ padding: 0.7px;
54
+ color: var(--mantine-color-text);
54
55
  }
55
56
  .mrchat-mainSendMsgIcon {
56
57
  position: absolute;
57
58
  right: 6px;
58
59
  }
59
60
  .mrchat-customToolActionItem {
60
- background-color: var(--mantine-color-white);
61
- border-color: var(--mantine-color-gray-4);
62
- color: var(--mantine-color-gray-7);
61
+ background-color: var(--mantine-color-body);
62
+ border-color: var(--mantine-color-default-border);
63
+ color: var(--mantine-color-text);
63
64
  border-radius: 0px;
64
65
  height: 26px;
65
66
  min-height: 26px;
@@ -92,7 +93,8 @@
92
93
  width: 100%;
93
94
  max-width: 400px;
94
95
  height: 100%;
95
- background: #fff;
96
+ background: var(--mantine-color-body);
97
+ color: var(--mantine-color-text);
96
98
  display: flex;
97
99
  flex-direction: column;
98
100
  }
@@ -124,16 +126,18 @@
124
126
  align-items: center;
125
127
  gap: 15px;
126
128
  padding: 0 16px;
127
- border-bottom: 1px solid #eee;
129
+ border-bottom: 1px solid var(--mantine-color-default-border);
130
+ background-color: var(--mantine-color-default);
128
131
  }
129
132
  .mrchat-backBtn {
130
133
  cursor: pointer;
131
134
  display: flex;
132
135
  align-items: center;
136
+ color: var(--mantine-color-text);
133
137
  }
134
138
  .mrchat-profileSection {
135
139
  padding: 30px 20px;
136
- border-bottom: 1px solid #f0f0f0;
140
+ border-bottom: 1px solid var(--mantine-color-default-border);
137
141
  display: flex;
138
142
  flex-direction: column;
139
143
  align-items: center;
@@ -149,15 +153,16 @@
149
153
  padding: 14px;
150
154
  border-radius: 10px;
151
155
  cursor: pointer;
156
+ color: var(--mantine-color-text);
152
157
  }
153
158
  .mrchat-item:hover {
154
- background: #f5f5f5;
159
+ background: var(--mantine-color-default-hover);
155
160
  }
156
161
  .mrchat-itemDanger {
157
- color: #fa5252;
162
+ color: var(--mantine-color-red-filled);
158
163
  }
159
164
  .mrchat-itemDanger:hover {
160
- background: rgba(250, 82, 82, 0.1);
165
+ background-color: color-mix(in srgb, var(--mantine-color-red-filled) 12%, transparent);
161
166
  }
162
167
  .mrchat-imagePreview {
163
168
  position: fixed;
@@ -179,26 +184,33 @@
179
184
  display: flex;
180
185
  flex-direction: column;
181
186
  align-items: center;
182
- height: 100vh;
183
- background: #f1f3f5;
187
+ min-height: 500px;
188
+ height: 100%;
189
+ flex: 1;
190
+ background-color: var(--mantine-color-body);
191
+ color: var(--mantine-color-text);
184
192
  }
185
193
  .mrchat-chatContainer {
186
194
  display: flex;
187
195
  width: 100%;
188
196
  max-width: 1260px;
189
- background: white;
190
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
191
- border-radius: 8px;
197
+ min-height: 500px;
198
+ height: 100%;
199
+ flex: 1;
192
200
  overflow: hidden;
201
+ border-radius: 8px;
202
+ background-color: var(--mantine-color-body);
203
+ border: 1px solid color-mix(in srgb, var(--mantine-color-text) 12%, transparent);
193
204
  }
194
205
  .mrchat-sidebar {
195
206
  width: 280px;
196
207
  display: flex;
197
208
  flex-direction: column;
198
- height: 100vh;
199
- border-right: 1px solid #eee;
200
- background-color: #fff;
209
+ min-height: 0;
210
+ flex-shrink: 0;
211
+ border-right: 1px solid color-mix(in srgb, var(--mantine-color-text) 12%, transparent);
201
212
  padding-top: 12px;
213
+ background-color: var(--mantine-color-body);
202
214
  }
203
215
  @media (max-width: 760px) {
204
216
  .mrchat-sidebar {
@@ -225,7 +237,7 @@
225
237
  }
226
238
  .mrchat-scrollArea {
227
239
  flex: 1;
228
- height: 100%;
240
+ min-height: 0;
229
241
  overflow-y: auto;
230
242
  }
231
243
  .mrchat-scrollArea .mantine-ScrollArea-content {
@@ -241,12 +253,14 @@
241
253
  flex: 1;
242
254
  display: flex;
243
255
  flex-direction: column;
256
+ min-height: 0;
244
257
  }
245
258
  .mrchat-messageArea {
246
259
  flex: 1;
247
260
  padding: 16px;
248
261
  overflow-y: auto;
249
262
  padding-bottom: 10px;
263
+ min-height: 0;
250
264
  }
251
265
  .mrchat-messageBubble {
252
266
  max-width: fit-content;
@@ -255,19 +269,20 @@
255
269
  position: relative;
256
270
  }
257
271
  .mrchat-outgoing {
258
- color: white;
259
- background-color: #366ca4;
272
+ color: var(--mantine-color-white);
273
+ background-color: var(--mantine-primary-color-filled);
260
274
  margin-left: auto;
261
275
  }
262
276
  .mrchat-incoming {
263
- background-color: #eeeeee;
277
+ background-color: var(--mantine-color-default-hover);
278
+ color: var(--mantine-color-text);
264
279
  margin-right: auto;
265
280
  }
266
281
  .mrchat-inputBar {
267
282
  display: flex;
268
283
  align-items: end;
269
284
  gap: 8px;
270
- padding: 0px 16px 16px;
285
+ padding: 0px 12px 12px;
271
286
  }
272
287
  .mrchat-chatItem {
273
288
  display: flex;
@@ -278,9 +293,10 @@
278
293
  transition: background 0.2s;
279
294
  margin: 2px 4px;
280
295
  border-radius: 6px;
296
+ color: var(--mantine-color-text);
281
297
  }
282
298
  .mrchat-chatItem:hover {
283
- background-color: #f6f6f6;
299
+ background-color: var(--mantine-color-default-hover);
284
300
  }
285
301
  .mrchat-chatLabelItem {
286
302
  font-size: 15px;
@@ -290,8 +306,8 @@
290
306
  justify-content: space-between;
291
307
  align-items: center;
292
308
  padding: 12px 16px;
293
- border-bottom: 1px solid #eee;
294
- background-color: #f8f9fa;
309
+ border-bottom: 1px solid color-mix(in srgb, var(--mantine-color-text) 12%, transparent);
310
+ background-color: var(--mantine-color-default);
295
311
  position: sticky;
296
312
  top: 0;
297
313
  z-index: 2;
@@ -315,8 +331,8 @@
315
331
  gap: 6px;
316
332
  padding: 6px 10px;
317
333
  border-radius: 12px;
318
- background: rgba(0, 0, 0, 0.04);
319
- color: #666;
334
+ background: var(--mantine-color-default-hover);
335
+ color: var(--mantine-color-dimmed);
320
336
  font-size: 12px;
321
337
  }
322
338
  .mrchat-encryptionText {
@@ -335,10 +351,10 @@
335
351
  padding: 0;
336
352
  }
337
353
  .mrchat-activeChatItem {
338
- background-color: #eee;
354
+ background-color: var(--mantine-color-default-hover);
339
355
  }
340
356
  .mrchat-chatItem:hover {
341
- background-color: #eee;
357
+ background-color: var(--mantine-color-default-hover);
342
358
  }
343
359
  .mrchat-messageTime {
344
360
  font-size: 11px;
@@ -372,8 +388,8 @@
372
388
  right: 0;
373
389
  }
374
390
  .mrchat-unreadBadge {
375
- background: #366ca4;
376
- color: white;
391
+ background: var(--mantine-primary-color-filled);
392
+ color: var(--mantine-color-white);
377
393
  font-size: 10px;
378
394
  border-radius: 50%;
379
395
  padding: 3px 5px;
package/dist/index.d.mts CHANGED
@@ -1,5 +1,17 @@
1
1
  import React from 'react';
2
2
 
3
- declare function MrChat(props: any): React.JSX.Element;
3
+ type UserData = {
4
+ userId: string;
5
+ username: string;
6
+ displayName?: string;
7
+ avatar?: string;
8
+ };
9
+ type ChatUserListProps = {
10
+ currentUser?: UserData;
11
+ onSearchUsers?: (query: string) => UserData[] | Promise<UserData[]>;
12
+ colorScheme?: "light" | "dark";
13
+ };
14
+
15
+ declare function MrChat({ colorScheme, ...props }: ChatUserListProps): React.JSX.Element;
4
16
 
5
17
  export { MrChat };
package/dist/index.d.ts CHANGED
@@ -1,5 +1,17 @@
1
1
  import React from 'react';
2
2
 
3
- declare function MrChat(props: any): React.JSX.Element;
3
+ type UserData = {
4
+ userId: string;
5
+ username: string;
6
+ displayName?: string;
7
+ avatar?: string;
8
+ };
9
+ type ChatUserListProps = {
10
+ currentUser?: UserData;
11
+ onSearchUsers?: (query: string) => UserData[] | Promise<UserData[]>;
12
+ colorScheme?: "light" | "dark";
13
+ };
14
+
15
+ declare function MrChat({ colorScheme, ...props }: ChatUserListProps): React.JSX.Element;
4
16
 
5
17
  export { MrChat };