mr-chat-bird 1.0.17 → 1.0.19

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 (4) hide show
  1. package/dist/index.css +1 -462
  2. package/dist/index.js +16 -5933
  3. package/dist/index.mjs +16 -5927
  4. package/package.json +2 -2
package/dist/index.css CHANGED
@@ -1,462 +1 @@
1
- /* src/components/RichTextEditor/RichTextEditor.css */
2
- .mrchat-richTextEditorContainer {
3
- position: relative;
4
- border-radius: 16px;
5
- }
6
- .mrchat-richTextEditorContainer .mantine-RichTextEditor-toolbar {
7
- border: none;
8
- background-color: transparent;
9
- padding: 0;
10
- margin-bottom: 4px;
11
- margin-left: 3px;
12
- gap: 0.5rem;
13
- }
14
- .mrchat-richTextEditorContainer .emoji-big {
15
- font-size: 18px;
16
- line-height: 1;
17
- vertical-align: middle;
18
- display: inline-block;
19
- }
20
- .mrchat-richTextEditorContainer .mantine-RichTextEditor-Typography {
21
- font-size: 15px;
22
- }
23
- .mrchat-richTextEditorContainer .mantine-RichTextEditor-Typography,
24
- .mrchat-richTextEditorContainer .mantine-RichTextEditor-content {
25
- border-radius: 16px;
26
- min-height: 41px;
27
- max-height: 200px;
28
- overflow: scroll;
29
- }
30
- .mrchat-richTextEditorContainer .ProseMirror {
31
- padding: 12px 16px 4px;
32
- overflow-wrap: anywhere;
33
- word-break: break-word;
34
- }
35
- .mrchat-mainActionContainer {
36
- height: 24px;
37
- margin-bottom: 4px;
38
- }
39
- .mrchat-mainActionAddIcon {
40
- margin-left: 3px;
41
- }
42
- .mrchat-mainActionEmojiIcon {
43
- margin: 0 4px 0 3px;
44
- }
45
- .mrchat-mainActionEmojiIcon svg {
46
- padding: 2px;
47
- color: var(--mantine-color-text);
48
- }
49
- .mrchat-mainActionAddIcon svg {
50
- color: var(--mantine-color-text);
51
- }
52
- .mrchat-mainTextFormatIcon svg {
53
- position: relative;
54
- top: 1.2px;
55
- padding: 0.7px;
56
- color: var(--mantine-color-text);
57
- }
58
- .mrchat-mainSendMsgIcon {
59
- position: absolute;
60
- right: 6px;
61
- }
62
- .mrchat-sm-mainSendMsgIcon {
63
- display: none;
64
- position: absolute;
65
- right: 4px;
66
- bottom: 1.5px;
67
- }
68
- .mrchat-customToolActionItem {
69
- background-color: var(--mantine-color-body);
70
- border-color: var(--mantine-color-default-border);
71
- color: var(--mantine-color-text);
72
- border-radius: 0px;
73
- height: 26px;
74
- min-height: 26px;
75
- border-right: none;
76
- }
77
- .mrchat-mainAddLabels {
78
- font-size: 15px;
79
- }
80
- .mrchat-mainAddLabels svg {
81
- width: 19px;
82
- height: 19px;
83
- }
84
- @media (max-width: 950px) {
85
- .mrchat-secondRichTextEditorToolBar {
86
- display: none;
87
- }
88
- }
89
- @media (max-width: 475px) {
90
- .mrchat-mainActionContainer {
91
- display: none;
92
- }
93
- .mrchat-richTextEditorContainer .mantine-RichTextEditor-Typography,
94
- .mrchat-richTextEditorContainer .mantine-RichTextEditor-content {
95
- min-height: 30px;
96
- border-radius: 12px;
97
- }
98
- .mrchat-richTextEditorContainer {
99
- border-radius: 12px;
100
- }
101
- .mrchat-richTextEditorContainer .ProseMirror {
102
- padding: 8px 12px 4px;
103
- }
104
- .mrchat-sm-mainSendMsgIcon {
105
- display: block;
106
- }
107
- }
108
- :where([data-mantine-color-scheme=dark]) .mantine-RichTextEditor-control {
109
- background-color: var(--mantine-color-body);
110
- }
111
-
112
- /* src/components/UserProfile/UserProfileDrawer.css */
113
- .mrchat-overlay {
114
- position: absolute;
115
- inset: 0;
116
- background: rgba(0, 0, 0, 0.3);
117
- z-index: 50;
118
- }
119
- .mrchat-drawer {
120
- position: absolute;
121
- top: 0;
122
- right: 0;
123
- width: 100%;
124
- max-width: 400px;
125
- height: 100%;
126
- background: var(--mantine-color-body);
127
- color: var(--mantine-color-text);
128
- display: flex;
129
- flex-direction: column;
130
- }
131
- .mrchat-open {
132
- animation: slideIn 0.25s ease forwards;
133
- }
134
- .mrchat-close {
135
- animation: slideOut 0.25s ease forwards;
136
- }
137
- @keyframes slideIn {
138
- from {
139
- transform: translateX(100%);
140
- }
141
- to {
142
- transform: translateX(0);
143
- }
144
- }
145
- @keyframes slideOut {
146
- from {
147
- transform: translateX(0);
148
- }
149
- to {
150
- transform: translateX(100%);
151
- }
152
- }
153
- .mrchat-header {
154
- height: 60px;
155
- display: flex;
156
- align-items: center;
157
- gap: 15px;
158
- padding: 0 16px;
159
- border-bottom: 1px solid var(--mantine-color-default-border);
160
- }
161
- .mrchat-backBtn {
162
- cursor: pointer;
163
- display: flex;
164
- align-items: center;
165
- color: var(--mantine-color-text);
166
- }
167
- .mrchat-profileSection {
168
- padding: 30px 20px;
169
- border-bottom: 1px solid var(--mantine-color-default-border);
170
- display: flex;
171
- flex-direction: column;
172
- align-items: center;
173
- text-align: center;
174
- }
175
- .mrchat-actions {
176
- padding: 10px;
177
- }
178
- .mrchat-item {
179
- display: flex;
180
- align-items: center;
181
- gap: 12px;
182
- padding: 14px;
183
- border-radius: 10px;
184
- cursor: pointer;
185
- color: var(--mantine-color-text);
186
- }
187
- .mrchat-item:hover {
188
- background: var(--mantine-color-default-hover);
189
- }
190
- .mrchat-itemDanger {
191
- color: var(--mantine-color-red-filled);
192
- }
193
- .mrchat-itemDanger:hover {
194
- background-color: color-mix(in srgb, var(--mantine-color-red-filled) 12%, transparent);
195
- }
196
- .mrchat-imagePreview {
197
- position: fixed;
198
- inset: 0;
199
- background: black;
200
- z-index: 100;
201
- display: flex;
202
- justify-content: center;
203
- align-items: center;
204
- }
205
- .mrchat-imagePreview img {
206
- max-width: 90%;
207
- max-height: 90%;
208
- border-radius: 12px;
209
- }
210
-
211
- /* src/components/ChatUserList/ChatUserList.css */
212
- .mrchat-chatWrapper {
213
- display: flex;
214
- flex-direction: column;
215
- align-items: center;
216
- min-height: 500px;
217
- height: 100%;
218
- flex: 1;
219
- background-color: var(--mantine-color-body);
220
- color: var(--mantine-color-text);
221
- }
222
- .mrchat-chatContainer {
223
- display: flex;
224
- width: 100%;
225
- max-width: 1260px;
226
- min-height: 500px;
227
- height: 100%;
228
- flex: 1;
229
- overflow: hidden;
230
- border-radius: 8px;
231
- background-color: var(--mantine-color-body);
232
- border: 1px solid color-mix(in srgb, var(--mantine-color-text) 12%, transparent);
233
- }
234
- .mrchat-sidebar {
235
- width: 280px;
236
- display: flex;
237
- flex-direction: column;
238
- min-height: 0;
239
- height: 100%;
240
- flex-shrink: 0;
241
- border-right: 1px solid color-mix(in srgb, var(--mantine-color-text) 12%, transparent);
242
- padding-top: 12px;
243
- background-color: var(--mantine-color-body);
244
- }
245
- .mrchat-sidebarTop {
246
- padding: 0 12px;
247
- }
248
- .mrchat-topBar {
249
- display: flex;
250
- justify-content: space-between;
251
- align-items: center;
252
- }
253
- .mrchat-topActions {
254
- display: flex;
255
- align-items: center;
256
- gap: 10px;
257
- }
258
- .mrchat-scrollWrapper {
259
- flex: 1;
260
- min-height: 0;
261
- height: 100%;
262
- overflow-y: auto;
263
- }
264
- .mrchat-mainAreaWrapper {
265
- flex: 1;
266
- display: flex;
267
- min-height: 0;
268
- }
269
- .mrchat-hiddenOnMobile {
270
- display: none !important;
271
- }
272
- .mrchat-scrollArea {
273
- flex: 1;
274
- min-height: 0;
275
- overflow-y: auto;
276
- }
277
- .mrchat-scrollArea .mantine-ScrollArea-content {
278
- padding-bottom: 60px;
279
- }
280
- .mrchat-avatar {
281
- width: 34px;
282
- height: 34px;
283
- border-radius: 50%;
284
- object-fit: cover;
285
- }
286
- .mrchat-mainArea {
287
- flex: 1;
288
- display: flex;
289
- flex-direction: column;
290
- min-height: 0;
291
- }
292
- .mrchat-messageArea {
293
- flex: 1;
294
- padding: 16px;
295
- overflow-y: auto;
296
- padding-bottom: 10px;
297
- min-height: 0;
298
- }
299
- .mrchat-messageBubble {
300
- max-width: fit-content;
301
- padding: 8px 45px 8px 16px;
302
- margin-bottom: 8px;
303
- position: relative;
304
- }
305
- .mrchat-outgoing {
306
- color: var(--mantine-color-white);
307
- background-color: var(--mantine-primary-color-filled);
308
- margin-left: auto;
309
- }
310
- .mrchat-incoming {
311
- background-color: var(--mantine-color-default-hover);
312
- color: var(--mantine-color-text);
313
- margin-right: auto;
314
- }
315
- .mrchat-inputBar {
316
- display: flex;
317
- align-items: end;
318
- gap: 8px;
319
- padding: 0px 12px 12px;
320
- }
321
- @media (max-width: 599px) {
322
- .mrchat-chatContainer {
323
- flex-direction: column;
324
- min-height: 100%;
325
- }
326
- .mrchat-sidebar {
327
- width: 100%;
328
- height: 100%;
329
- border-right: none;
330
- border-bottom: 1px solid color-mix(in srgb, var(--mantine-color-text) 12%, transparent);
331
- border-radius: 0;
332
- }
333
- .mrchat-chatItem {
334
- margin: 2px 0;
335
- }
336
- .mrchat-messageArea {
337
- padding: 12px;
338
- }
339
- .mrchat-mainArea {
340
- min-height: calc(100vh - 74px);
341
- }
342
- }
343
- .mrchat-chatItem {
344
- display: flex;
345
- align-items: center;
346
- gap: 6px;
347
- padding: 8px 12px;
348
- cursor: pointer;
349
- transition: background 0.2s;
350
- margin: 2px 4px;
351
- border-radius: 6px;
352
- color: var(--mantine-color-text);
353
- }
354
- .mrchat-chatItem:hover {
355
- background-color: var(--mantine-color-default-hover);
356
- }
357
- .mrchat-chatLabelItem {
358
- font-size: 15px;
359
- }
360
- .mrchat-chatHeader {
361
- display: flex;
362
- justify-content: flex-start;
363
- align-items: center;
364
- padding: 12px 16px;
365
- border-bottom: 1px solid color-mix(in srgb, var(--mantine-color-text) 12%, transparent);
366
- position: sticky;
367
- top: 0;
368
- z-index: 2;
369
- min-height: 63px;
370
- gap: 10px;
371
- }
372
- .mrchat-backButton {
373
- padding: 4px;
374
- }
375
- .mrchat-receiverInfo {
376
- display: flex;
377
- align-items: center;
378
- gap: 12px;
379
- cursor: pointer;
380
- }
381
- .mrchat-emptyState {
382
- height: 100%;
383
- display: flex;
384
- align-items: center;
385
- justify-content: center;
386
- }
387
- .mrchat-encryptionMinimal {
388
- display: flex;
389
- align-items: center;
390
- gap: 6px;
391
- padding: 6px 10px;
392
- border-radius: 12px;
393
- background: var(--mantine-color-default-hover);
394
- color: var(--mantine-color-dimmed);
395
- font-size: 12px;
396
- }
397
- .mrchat-encryptionText {
398
- font-size: 16px;
399
- margin-left: 3px;
400
- }
401
- .mrchat-messageContent {
402
- max-width: 370px;
403
- word-wrap: break-word;
404
- font-size: 14px;
405
- }
406
- .mrchat-messagePreviewContent p,
407
- .mrchat-messageContent p {
408
- margin: 0;
409
- padding: 0;
410
- }
411
- .mrchat-activeChatItem {
412
- background-color: var(--mantine-color-default-hover);
413
- }
414
- .mrchat-chatItem:hover {
415
- background-color: var(--mantine-color-default-hover);
416
- }
417
- .mrchat-messageTime {
418
- font-size: 11px;
419
- opacity: 0.6;
420
- text-align: right;
421
- margin-top: 4px;
422
- position: absolute;
423
- bottom: 4px;
424
- right: 8px;
425
- z-index: 1;
426
- }
427
- .mrchat-dateSeparator {
428
- text-align: center;
429
- font-size: 13px;
430
- margin: 12px 0;
431
- color: #888;
432
- }
433
- .mrchat-chatInfo {
434
- width: 100%;
435
- position: relative;
436
- }
437
- .mrchat-messagePreview {
438
- display: flex;
439
- justify-content: space-between;
440
- align-items: end;
441
- margin-top: 1px;
442
- }
443
- .mrchat-messagePreviewTime {
444
- position: relative;
445
- top: 1px;
446
- right: 0;
447
- }
448
- .mrchat-unreadBadge {
449
- background: var(--mantine-primary-color-filled);
450
- color: var(--mantine-color-white);
451
- font-size: 10px;
452
- border-radius: 50%;
453
- padding: 3px 5px;
454
- min-width: 18px;
455
- text-align: center;
456
- position: absolute;
457
- top: 1px;
458
- right: 0px;
459
- }
460
- .mrchat-messagePreviewContent {
461
- font-size: 14px;
462
- }
1
+ .mrchat-richTextEditorContainer{position:relative;border-radius:16px}.mrchat-richTextEditorContainer .mantine-RichTextEditor-toolbar{border:none;background-color:transparent;padding:0;margin-bottom:4px;margin-left:3px;gap:.5rem}.mrchat-richTextEditorContainer .emoji-big{font-size:18px;line-height:1;vertical-align:middle;display:inline-block}.mrchat-richTextEditorContainer .mantine-RichTextEditor-Typography{font-size:15px}.mrchat-richTextEditorContainer .mantine-RichTextEditor-Typography,.mrchat-richTextEditorContainer .mantine-RichTextEditor-content{border-radius:16px;min-height:41px;max-height:200px;overflow:scroll}.mrchat-richTextEditorContainer .ProseMirror{padding:12px 16px 4px;overflow-wrap:anywhere;word-break:break-word}.mrchat-mainActionContainer{height:24px;margin-bottom:4px}.mrchat-mainActionAddIcon{margin-left:3px}.mrchat-mainActionEmojiIcon{margin:0 4px 0 3px}.mrchat-mainActionEmojiIcon svg{padding:2px;color:var(--mantine-color-text)}.mrchat-mainActionAddIcon svg{color:var(--mantine-color-text)}.mrchat-mainTextFormatIcon svg{position:relative;top:1.2px;padding:.7px;color:var(--mantine-color-text)}.mrchat-mainSendMsgIcon{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);color:var(--mantine-color-text);border-radius:0;height:26px;min-height:26px;border-right:none}.mrchat-mainAddLabels{font-size:15px}.mrchat-mainAddLabels svg{width:19px;height:19px}@media(max-width:950px){.mrchat-secondRichTextEditorToolBar{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)}.mrchat-overlay{position:absolute;inset:0;background:#0000004d;z-index:50}.mrchat-drawer{position:absolute;top:0;right:0;width:100%;max-width:400px;height:100%;background:var(--mantine-color-body);color:var(--mantine-color-text);display:flex;flex-direction:column}.mrchat-open{animation:slideIn .25s ease forwards}.mrchat-close{animation:slideOut .25s ease forwards}@keyframes slideIn{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes slideOut{0%{transform:translate(0)}to{transform:translate(100%)}}.mrchat-header{height:60px;display:flex;align-items:center;gap:15px;padding:0 16px;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 var(--mantine-color-default-border);display:flex;flex-direction:column;align-items:center;text-align:center}.mrchat-actions{padding:10px}.mrchat-item{display:flex;align-items:center;gap:12px;padding:14px;border-radius:10px;cursor:pointer;color:var(--mantine-color-text)}.mrchat-item:hover{background:var(--mantine-color-default-hover)}.mrchat-itemDanger{color:var(--mantine-color-red-filled)}.mrchat-itemDanger:hover{background-color:color-mix(in srgb,var(--mantine-color-red-filled) 12%,transparent)}.mrchat-imagePreview{position:fixed;inset:0;background:#000;z-index:100;display:flex;justify-content:center;align-items:center}.mrchat-imagePreview img{max-width:90%;max-height:90%;border-radius:12px}.mrchat-chatWrapper{display:flex;flex-direction:column;align-items:center;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;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;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)}.mrchat-sidebarTop{padding:0 12px}.mrchat-topBar{display:flex;justify-content:space-between;align-items:center}.mrchat-topActions{display:flex;align-items:center;gap:10px}.mrchat-scrollWrapper{flex:1;min-height:0;height:100%;overflow-y:auto}.mrchat-mainAreaWrapper{flex:1;display:flex;min-height:0}.mrchat-hiddenOnMobile{display:none!important}.mrchat-scrollArea{flex:1;min-height:0;overflow-y:auto}.mrchat-scrollArea .mantine-ScrollArea-content{padding-bottom:60px}.mrchat-avatar{width:34px;height:34px;border-radius:50%;object-fit:cover}.mrchat-mainArea{flex:1;display:flex;flex-direction:column;min-height:0}.mrchat-messageArea{flex:1;padding:16px 16px 10px;overflow-y:auto;min-height:0}.mrchat-messageBubble{max-width:fit-content;padding:8px 45px 8px 16px;margin-bottom:8px;position:relative}.mrchat-outgoing{color:var(--mantine-color-white);background-color:var(--mantine-primary-color-filled);margin-left:auto}.mrchat-incoming{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:0 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;gap:6px;padding:8px 12px;cursor:pointer;transition:background .2s;margin:2px 4px;border-radius:6px;color:var(--mantine-color-text)}.mrchat-chatItem:hover{background-color:var(--mantine-color-default-hover)}.mrchat-chatLabelItem{font-size:15px}.mrchat-chatHeader{display:flex;justify-content:flex-start;align-items:center;padding:12px 16px;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;align-items:center;gap:12px;cursor:pointer}.mrchat-emptyState{height:100%;display:flex;align-items:center;justify-content:center}.mrchat-encryptionMinimal{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:12px;background:var(--mantine-color-default-hover);color:var(--mantine-color-dimmed);font-size:12px}.mrchat-encryptionText{font-size:16px;margin-left:3px}.mrchat-messageContent{max-width:370px;word-wrap:break-word;font-size:14px}.mrchat-messagePreviewContent p,.mrchat-messageContent p{margin:0;padding:0}.mrchat-activeChatItem,.mrchat-chatItem:hover{background-color:var(--mantine-color-default-hover)}.mrchat-messageTime{font-size:11px;opacity:.6;text-align:right;margin-top:4px;position:absolute;bottom:4px;right:8px;z-index:1}.mrchat-dateSeparator{text-align:center;font-size:13px;margin:12px 0;color:#888}.mrchat-chatInfo{width:100%;position:relative}.mrchat-messagePreview{display:flex;justify-content:space-between;align-items:end;margin-top:1px}.mrchat-messagePreviewTime{position:relative;top:1px;right:0}.mrchat-unreadBadge{background:var(--mantine-primary-color-filled);color:var(--mantine-color-white);font-size:10px;border-radius:50%;padding:3px 5px;min-width:18px;text-align:center;position:absolute;top:1px;right:0}.mrchat-messagePreviewContent{font-size:14px}