@ermis-network/ermis-chat-react 1.0.0

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 (88) hide show
  1. package/dist/index.cjs +6593 -0
  2. package/dist/index.cjs.map +1 -0
  3. package/dist/index.css +3375 -0
  4. package/dist/index.css.map +1 -0
  5. package/dist/index.d.mts +1138 -0
  6. package/dist/index.d.ts +1138 -0
  7. package/dist/index.mjs +6500 -0
  8. package/dist/index.mjs.map +1 -0
  9. package/package.json +42 -0
  10. package/src/components/Avatar.tsx +102 -0
  11. package/src/components/Channel.tsx +77 -0
  12. package/src/components/ChannelHeader.tsx +85 -0
  13. package/src/components/ChannelInfo/AddMemberModal.tsx +204 -0
  14. package/src/components/ChannelInfo/ChannelInfo.tsx +455 -0
  15. package/src/components/ChannelInfo/ChannelInfoTabs.tsx +282 -0
  16. package/src/components/ChannelInfo/ChannelSettingsPanel.tsx +479 -0
  17. package/src/components/ChannelInfo/EditChannelModal.tsx +272 -0
  18. package/src/components/ChannelInfo/FileListItem.tsx +49 -0
  19. package/src/components/ChannelInfo/LinkListItem.tsx +62 -0
  20. package/src/components/ChannelInfo/MediaGridItem.tsx +90 -0
  21. package/src/components/ChannelInfo/MemberListItem.tsx +85 -0
  22. package/src/components/ChannelInfo/MessageSearchPanel.tsx +333 -0
  23. package/src/components/ChannelInfo/States.tsx +36 -0
  24. package/src/components/ChannelInfo/index.ts +10 -0
  25. package/src/components/ChannelInfo/utils.tsx +49 -0
  26. package/src/components/ChannelList.tsx +395 -0
  27. package/src/components/Dropdown.tsx +120 -0
  28. package/src/components/EditPreview.tsx +102 -0
  29. package/src/components/FilesPreview.tsx +108 -0
  30. package/src/components/ForwardMessageModal.tsx +234 -0
  31. package/src/components/MentionSuggestions.tsx +59 -0
  32. package/src/components/MessageActionsBox.tsx +186 -0
  33. package/src/components/MessageInput.tsx +513 -0
  34. package/src/components/MessageInputDefaults.tsx +50 -0
  35. package/src/components/MessageItem.tsx +218 -0
  36. package/src/components/MessageQuickReactions.tsx +73 -0
  37. package/src/components/MessageReactions.tsx +59 -0
  38. package/src/components/MessageRenderers.tsx +565 -0
  39. package/src/components/Modal.tsx +58 -0
  40. package/src/components/Panel.tsx +64 -0
  41. package/src/components/PinnedMessages.tsx +165 -0
  42. package/src/components/QuotedMessagePreview.tsx +55 -0
  43. package/src/components/ReadReceipts.tsx +80 -0
  44. package/src/components/ReplyPreview.tsx +98 -0
  45. package/src/components/TypingIndicator.tsx +57 -0
  46. package/src/components/VirtualMessageList.tsx +425 -0
  47. package/src/context/ChatProvider.tsx +73 -0
  48. package/src/hooks/useBannedState.ts +48 -0
  49. package/src/hooks/useBlockedState.ts +55 -0
  50. package/src/hooks/useChannel.ts +18 -0
  51. package/src/hooks/useChannelCapabilities.ts +42 -0
  52. package/src/hooks/useChannelData.ts +55 -0
  53. package/src/hooks/useChannelListUpdates.ts +224 -0
  54. package/src/hooks/useChannelMessages.ts +159 -0
  55. package/src/hooks/useChannelRowUpdates.ts +78 -0
  56. package/src/hooks/useChatClient.ts +11 -0
  57. package/src/hooks/useEmojiPicker.ts +53 -0
  58. package/src/hooks/useFileUpload.ts +128 -0
  59. package/src/hooks/useLoadMessages.ts +178 -0
  60. package/src/hooks/useMentions.ts +287 -0
  61. package/src/hooks/useMessageActions.ts +87 -0
  62. package/src/hooks/useMessageSend.ts +164 -0
  63. package/src/hooks/usePendingState.ts +63 -0
  64. package/src/hooks/useScrollToMessage.ts +155 -0
  65. package/src/hooks/useTypingIndicator.ts +86 -0
  66. package/src/index.ts +129 -0
  67. package/src/styles/_add-member-modal.css +122 -0
  68. package/src/styles/_base.css +32 -0
  69. package/src/styles/_channel-info.css +941 -0
  70. package/src/styles/_channel-list.css +217 -0
  71. package/src/styles/_dropdown.css +69 -0
  72. package/src/styles/_forward-modal.css +191 -0
  73. package/src/styles/_mentions.css +102 -0
  74. package/src/styles/_message-actions.css +61 -0
  75. package/src/styles/_message-bubble.css +656 -0
  76. package/src/styles/_message-input.css +389 -0
  77. package/src/styles/_message-list.css +416 -0
  78. package/src/styles/_message-quick-reactions.css +62 -0
  79. package/src/styles/_message-reactions.css +67 -0
  80. package/src/styles/_modal.css +113 -0
  81. package/src/styles/_panel.css +69 -0
  82. package/src/styles/_pinned-messages.css +140 -0
  83. package/src/styles/_search-panel.css +219 -0
  84. package/src/styles/_tokens.css +92 -0
  85. package/src/styles/_typing-indicator.css +59 -0
  86. package/src/styles/index.css +24 -0
  87. package/src/types.ts +955 -0
  88. package/src/utils.ts +242 -0
package/src/styles/_message-input.css ADDED
@@ -0,0 +1,389 @@
1
+ /* ----------------------------------------------------------
2
+ MessageInput
3
+ ---------------------------------------------------------- */
4
+ .ermis-message-input {
5
+ display: flex;
6
+ flex-direction: column;
7
+ gap: var(--ermis-spacing-sm);
8
+ padding: var(--ermis-spacing-md);
9
+ border-top: 1px solid var(--ermis-border);
10
+ background-color: var(--ermis-bg-secondary);
11
+ font-family: var(--ermis-font-family);
12
+ position: relative;
13
+ }
14
+
15
+ .ermis-message-input__row {
16
+ display: flex;
17
+ align-items: flex-end;
18
+ gap: var(--ermis-spacing-sm);
19
+ }
20
+
21
+ .ermis-message-input__textarea {
22
+ flex: 1;
23
+ resize: none;
24
+ border: 1px solid var(--ermis-border);
25
+ border-radius: var(--ermis-radius-md);
26
+ padding: var(--ermis-spacing-sm) var(--ermis-spacing-md);
27
+ font-size: var(--ermis-font-size-sm);
28
+ font-family: var(--ermis-font-family);
29
+ color: var(--ermis-text-primary);
30
+ background-color: var(--ermis-bg-primary);
31
+ outline: none;
32
+ transition: border-color var(--ermis-transition);
33
+ line-height: 1.5;
34
+ min-height: 2.25rem;
35
+ max-height: 8rem;
36
+ }
37
+
38
+ .ermis-message-input__textarea::placeholder {
39
+ color: var(--ermis-text-muted);
40
+ }
41
+
42
+ .ermis-message-input__textarea:focus {
43
+ border-color: var(--ermis-accent);
44
+ }
45
+
46
+ .ermis-message-input__send-btn {
47
+ display: inline-flex;
48
+ align-items: center;
49
+ justify-content: center;
50
+ padding: var(--ermis-spacing-sm) var(--ermis-spacing-lg);
51
+ border: none;
52
+ border-radius: var(--ermis-radius-md);
53
+ background-color: var(--ermis-accent);
54
+ color: #fff;
55
+ font-size: var(--ermis-font-size-sm);
56
+ font-weight: 600;
57
+ font-family: var(--ermis-font-family);
58
+ cursor: pointer;
59
+ white-space: nowrap;
60
+ transition: background-color var(--ermis-transition), opacity var(--ermis-transition);
61
+ }
62
+
63
+ .ermis-message-input__send-btn:hover:not(:disabled) {
64
+ background-color: var(--ermis-accent-hover);
65
+ }
66
+
67
+ .ermis-message-input__send-btn:disabled {
68
+ opacity: 0.4;
69
+ cursor: not-allowed;
70
+ }
71
+
72
+ /* --- Attach button --- */
73
+ .ermis-message-input__attach-btn {
74
+ display: inline-flex;
75
+ align-items: center;
76
+ justify-content: center;
77
+ padding: 4px;
78
+ border: none;
79
+ background: none;
80
+ font-size: 1.25rem;
81
+ cursor: pointer;
82
+ color: var(--ermis-text-secondary);
83
+ transition: color var(--ermis-transition);
84
+ flex-shrink: 0;
85
+ }
86
+
87
+ .ermis-message-input__attach-btn:hover {
88
+ color: var(--ermis-accent);
89
+ }
90
+
91
+ .ermis-message-input__attach-btn:disabled {
92
+ opacity: 0.4;
93
+ cursor: not-allowed;
94
+ }
95
+
96
+ .ermis-message-input__file-input {
97
+ display: none;
98
+ }
99
+
100
+ /* --- Emoji button --- */
101
+ .ermis-message-input__emoji-btn {
102
+ display: inline-flex;
103
+ align-items: center;
104
+ justify-content: center;
105
+ padding: 4px;
106
+ border: none;
107
+ background: none;
108
+ font-size: 1.25rem;
109
+ cursor: pointer;
110
+ color: var(--ermis-text-secondary);
111
+ transition: color var(--ermis-transition);
112
+ flex-shrink: 0;
113
+ }
114
+
115
+ .ermis-message-input__emoji-btn:hover,
116
+ .ermis-message-input__emoji-btn--active {
117
+ color: var(--ermis-accent);
118
+ }
119
+
120
+ /* --- Emoji picker container --- */
121
+ .ermis-message-input__emoji-picker {
122
+ position: absolute;
123
+ bottom: 100%;
124
+ right: 0;
125
+ margin-bottom: var(--ermis-spacing-xs);
126
+ z-index: 100;
127
+ border-radius: var(--ermis-radius-md);
128
+ box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
129
+ overflow: hidden;
130
+ }
131
+
132
+ /* --- Files preview --- */
133
+ .ermis-files-preview {
134
+ display: flex;
135
+ gap: var(--ermis-spacing-sm);
136
+ overflow-x: auto;
137
+ overflow-y: hidden;
138
+ scrollbar-width: thin;
139
+ min-width: 0;
140
+ }
141
+ .ermis-files-preview__item {
142
+ position: relative;
143
+ display: flex;
144
+ flex-direction: column;
145
+ width: 80px;
146
+ min-width: 80px;
147
+ border-radius: var(--ermis-radius-md);
148
+ border: 1px solid var(--ermis-border);
149
+ overflow: hidden;
150
+ background: var(--ermis-bg-primary);
151
+ }
152
+
153
+ .ermis-files-preview__item--error {
154
+ border-color: #e74c3c;
155
+ }
156
+
157
+ .ermis-files-preview__remove {
158
+ position: absolute;
159
+ top: 2px;
160
+ right: 2px;
161
+ width: 18px;
162
+ height: 18px;
163
+ border-radius: 50%;
164
+ border: none;
165
+ background: rgba(0, 0, 0, 0.6);
166
+ color: #fff;
167
+ font-size: 10px;
168
+ line-height: 1;
169
+ cursor: pointer;
170
+ display: flex;
171
+ align-items: center;
172
+ justify-content: center;
173
+ z-index: 1;
174
+ padding: 0;
175
+ }
176
+
177
+ .ermis-files-preview__remove:hover {
178
+ background: rgba(0, 0, 0, 0.8);
179
+ }
180
+
181
+ .ermis-files-preview__thumb {
182
+ width: 100%;
183
+ height: 60px;
184
+ object-fit: cover;
185
+ display: block;
186
+ }
187
+
188
+ .ermis-files-preview__file-icon {
189
+ width: 100%;
190
+ height: 60px;
191
+ display: flex;
192
+ align-items: center;
193
+ justify-content: center;
194
+ font-size: 1.5rem;
195
+ background: var(--ermis-bg-hover);
196
+ }
197
+
198
+ .ermis-files-preview__info {
199
+ display: flex;
200
+ flex-direction: column;
201
+ padding: 2px 4px;
202
+ gap: 1px;
203
+ }
204
+
205
+ .ermis-files-preview__name {
206
+ font-size: 10px;
207
+ white-space: nowrap;
208
+ overflow: hidden;
209
+ text-overflow: ellipsis;
210
+ color: var(--ermis-text-primary);
211
+ }
212
+
213
+ .ermis-files-preview__size {
214
+ font-size: 9px;
215
+ color: var(--ermis-text-muted);
216
+ }
217
+
218
+ .ermis-files-preview__uploading {
219
+ position: absolute;
220
+ inset: 0;
221
+ background: rgba(0, 0, 0, 0.3);
222
+ display: flex;
223
+ align-items: center;
224
+ justify-content: center;
225
+ }
226
+
227
+ .ermis-files-preview__spinner {
228
+ width: 20px;
229
+ height: 20px;
230
+ border: 2px solid rgba(255, 255, 255, 0.4);
231
+ border-top-color: #fff;
232
+ border-radius: 50%;
233
+ animation: ermis-spin 0.6s linear infinite;
234
+ }
235
+
236
+ @keyframes ermis-spin {
237
+ to {
238
+ transform: rotate(360deg);
239
+ }
240
+ }
241
+
242
+ .ermis-files-preview__error-badge {
243
+ position: absolute;
244
+ bottom: 2px;
245
+ right: 2px;
246
+ font-size: 14px;
247
+ color: #e74c3c;
248
+ }
249
+
250
+ /* ----------------------------------------------------------
251
+ Reply Preview
252
+ ---------------------------------------------------------- */
253
+ .ermis-message-input__reply-preview {
254
+ display: flex;
255
+ align-items: center;
256
+ justify-content: space-between;
257
+ padding: var(--ermis-spacing-xs) var(--ermis-spacing-md);
258
+ background-color: var(--ermis-bg-primary);
259
+ border-left: 3px solid var(--ermis-accent);
260
+ border-radius: var(--ermis-radius-sm);
261
+ gap: var(--ermis-spacing-sm);
262
+ }
263
+
264
+ .ermis-message-input__reply-preview-body {
265
+ display: flex;
266
+ flex-direction: column;
267
+ min-width: 0;
268
+ flex: 1;
269
+ }
270
+
271
+ .ermis-message-input__reply-preview-label {
272
+ font-size: var(--ermis-font-size-xs);
273
+ color: var(--ermis-accent);
274
+ font-weight: 600;
275
+ }
276
+
277
+ .ermis-message-input__reply-preview-user {
278
+ font-size: var(--ermis-font-size-sm);
279
+ font-weight: 600;
280
+ color: var(--ermis-text-primary);
281
+ }
282
+
283
+ .ermis-message-input__reply-preview-text {
284
+ font-size: var(--ermis-font-size-xs);
285
+ color: var(--ermis-text-secondary);
286
+ white-space: nowrap;
287
+ overflow: hidden;
288
+ text-overflow: ellipsis;
289
+ }
290
+
291
+ .ermis-message-input__reply-preview-dismiss {
292
+ display: inline-flex;
293
+ align-items: center;
294
+ justify-content: center;
295
+ background: none;
296
+ border: none;
297
+ cursor: pointer;
298
+ color: var(--ermis-text-secondary);
299
+ padding: 4px;
300
+ border-radius: var(--ermis-radius-sm);
301
+ flex-shrink: 0;
302
+ transition: background-color 0.15s, color 0.15s;
303
+ }
304
+
305
+ .ermis-message-input__reply-preview-dismiss:hover {
306
+ background-color: var(--ermis-bg-hover);
307
+ color: var(--ermis-text-primary);
308
+ }
309
+
310
+ /* ----------------------------------------------------------
311
+ Banned State
312
+ ---------------------------------------------------------- */
313
+ .ermis-message-input--banned {
314
+ pointer-events: none;
315
+ }
316
+
317
+ .ermis-message-input__banned-banner {
318
+ display: flex;
319
+ align-items: center;
320
+ justify-content: center;
321
+ gap: var(--ermis-spacing-sm);
322
+ padding: var(--ermis-spacing-md) var(--ermis-spacing-lg);
323
+ color: #ef4444;
324
+ font-size: var(--ermis-font-size-sm);
325
+ font-weight: 500;
326
+ user-select: none;
327
+ opacity: 0.8;
328
+ }
329
+
330
+ .ermis-message-input__banned-banner svg {
331
+ flex-shrink: 0;
332
+ }
333
+
334
+ /* ----------------------------------------------------------
335
+ Blocked State (messaging channels — user-initiated block)
336
+ ---------------------------------------------------------- */
337
+ .ermis-message-input--blocked {
338
+ pointer-events: none;
339
+ }
340
+
341
+ .ermis-message-input__blocked-banner {
342
+ display: flex;
343
+ align-items: center;
344
+ justify-content: center;
345
+ gap: var(--ermis-spacing-sm);
346
+ padding: var(--ermis-spacing-md) var(--ermis-spacing-lg);
347
+ color: var(--ermis-text-secondary, #9ca3af);
348
+ font-size: var(--ermis-font-size-sm);
349
+ font-weight: 500;
350
+ user-select: none;
351
+ opacity: 0.8;
352
+ }
353
+
354
+ .ermis-message-input__blocked-banner svg {
355
+ flex-shrink: 0;
356
+ }
357
+
358
+ /* ----------------------------------------------------------
359
+ Banners
360
+ ---------------------------------------------------------- */
361
+ .ermis-message-input__keyword-banner {
362
+ padding: var(--ermis-spacing-sm) var(--ermis-spacing-md);
363
+ background-color: var(--ermis-bg-danger-light, #fee2e2);
364
+ border-radius: var(--ermis-radius-md) var(--ermis-radius-md) 0 0;
365
+ font-size: var(--ermis-font-size-sm, 13px);
366
+ color: var(--ermis-text-danger, #ef4444);
367
+ display: flex;
368
+ align-items: center;
369
+ gap: var(--ermis-spacing-sm);
370
+ border-bottom: 1px solid var(--ermis-border-danger, #fca5a5);
371
+ }
372
+
373
+ .ermis-message-input__permission-banner,
374
+ .ermis-message-input__slow-mode-banner {
375
+ padding: var(--ermis-spacing-sm) var(--ermis-spacing-md);
376
+ background-color: var(--ermis-bg-secondary);
377
+ border-radius: var(--ermis-radius-md) var(--ermis-radius-md) 0 0;
378
+ font-size: var(--ermis-font-size-sm, 13px);
379
+ color: var(--ermis-text-secondary);
380
+ display: flex;
381
+ align-items: center;
382
+ gap: var(--ermis-spacing-sm);
383
+ border-bottom: 1px solid var(--ermis-border-color);
384
+ }
385
+
386
+ .ermis-message-input__row--banners-active {
387
+ border-top-left-radius: 0;
388
+ border-top-right-radius: 0;
389
+ }