mr-chat-bird 1.0.16 → 1.0.18

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