@cometchat/chat-uikit-react 6.0.6 → 6.1.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 (70) hide show
  1. package/dist/assets/audio_filter_icon.svg +3 -0
  2. package/dist/assets/chats_filter_icon.svg +1 -0
  3. package/dist/assets/file_filter_icon.svg +4 -0
  4. package/dist/assets/group_filter_icon.svg +3 -0
  5. package/dist/assets/link_filter_icon.svg +3 -0
  6. package/dist/assets/link_icon_2x.svg +3 -0
  7. package/dist/assets/messages_filter_icon.svg +1 -0
  8. package/dist/assets/photo_filter_icon.svg +3 -0
  9. package/dist/assets/search_message_icon.svg +14 -0
  10. package/dist/assets/unread_filter_icon.svg +7 -0
  11. package/dist/assets/video_filter_icon.svg +3 -0
  12. package/dist/index.d.ts +493 -5
  13. package/dist/index.js +1 -1
  14. package/dist/index.js.map +1 -1
  15. package/dist/styles/CometChatActionSheet.css +1 -4
  16. package/dist/styles/CometChatChangeScope.css +1 -4
  17. package/dist/styles/CometChatConversations.css +16 -1
  18. package/dist/styles/CometChatEmojiKeyboard.css +1 -6
  19. package/dist/styles/CometChatGroupMembers.css +7 -2
  20. package/dist/styles/CometChatList.css +12 -3
  21. package/dist/styles/CometChatMessageComposer.css +34 -1
  22. package/dist/styles/CometChatMessageHeader.css +55 -12
  23. package/dist/styles/CometChatMessageInformation.css +7 -7
  24. package/dist/styles/CometChatMessageList.css +42 -13
  25. package/dist/styles/CometChatReactionList.css +0 -6
  26. package/dist/styles/CometChatSearch.css +948 -0
  27. package/dist/styles/CometChatThreadHeader.css +18 -3
  28. package/dist/styles/StickersKeyboard.css +0 -20
  29. package/dist/styles/components/CometChatActionSheet.css +1 -4
  30. package/dist/styles/components/CometChatChangeScope.css +1 -4
  31. package/dist/styles/components/CometChatConversations.css +16 -1
  32. package/dist/styles/components/CometChatEmojiKeyboard.css +1 -6
  33. package/dist/styles/components/CometChatGroupMembers.css +7 -2
  34. package/dist/styles/components/CometChatList.css +12 -3
  35. package/dist/styles/components/CometChatMessageComposer.css +34 -1
  36. package/dist/styles/components/CometChatMessageHeader.css +55 -12
  37. package/dist/styles/components/CometChatMessageInformation.css +7 -7
  38. package/dist/styles/components/CometChatMessageList.css +42 -13
  39. package/dist/styles/components/CometChatReactionList.css +0 -6
  40. package/dist/styles/components/CometChatSearch.css +948 -0
  41. package/dist/styles/components/CometChatThreadHeader.css +18 -3
  42. package/dist/styles/components/StickersKeyboard.css +0 -20
  43. package/dist/styles/components/index.css +5 -0
  44. package/dist/styles/index.css +5 -0
  45. package/dist/types/Enums/Enums.d.ts +37 -0
  46. package/dist/types/components/BaseComponents/CometChatContextMenu/CometChatContextMenu.d.ts +1 -0
  47. package/dist/types/components/BaseComponents/CometChatList/CometChatList.d.ts +29 -4
  48. package/dist/types/components/Calling/CometChatCallLogs/CometChatCallLogs.d.ts +5 -0
  49. package/dist/types/components/CometChatConversations/CometChatConversations.d.ts +18 -0
  50. package/dist/types/components/CometChatGroupMembers/CometChatGroupMembers.d.ts +5 -0
  51. package/dist/types/components/CometChatGroups/CometChatGroups.d.ts +5 -0
  52. package/dist/types/components/CometChatMessageComposer/CometChatMessageComposer.d.ts +5 -0
  53. package/dist/types/components/CometChatMessageHeader/CometChatMessageHeader.d.ts +15 -0
  54. package/dist/types/components/CometChatMessageInformation/CometChatMessageInformation.d.ts +5 -0
  55. package/dist/types/components/CometChatMessageList/CometChatMessageList.d.ts +11 -0
  56. package/dist/types/components/CometChatMessageList/useCometChatMessageList.d.ts +1 -1
  57. package/dist/types/components/CometChatSearch/CometChatSearch.d.ts +240 -0
  58. package/dist/types/components/CometChatSearch/SearchConversationsManager.d.ts +50 -0
  59. package/dist/types/components/CometChatSearch/useCometChatSearchConversationsList.d.ts +207 -0
  60. package/dist/types/components/CometChatSearch/useCometChatSearchMessagesList.d.ts +127 -0
  61. package/dist/types/components/CometChatThreadHeader/CometChatThreadHeader.d.ts +13 -0
  62. package/dist/types/components/CometChatUserMemberWrapper/CometChatUserMemberWrapper.d.ts +48 -0
  63. package/dist/types/components/CometChatUsers/CometChatUsers.d.ts +6 -0
  64. package/dist/types/formatters/CometChatFormatters/CometChatTextHighlightFormatter/CometChatTextHighlightFormatter.d.ts +26 -0
  65. package/dist/types/formatters/index.d.ts +1 -0
  66. package/dist/types/index.d.ts +2 -0
  67. package/dist/types/modals/CometChatSearchFilterOption.d.ts +34 -0
  68. package/dist/types/utils/SearchUtils.d.ts +30 -0
  69. package/dist/types/utils/util.d.ts +7 -0
  70. package/package.json +4 -3
@@ -15,10 +15,7 @@
15
15
  justify-content: flex-start;
16
16
  }
17
17
 
18
- .cometchat-action-sheet::-webkit-scrollbar,
19
- .cometchat-action-sheet::-webkit-scrollbar-thumb {
20
- display: none;
21
- }
18
+
22
19
 
23
20
  .cometchat-action-sheet__item-icon {
24
21
  display: flex;
@@ -81,10 +81,7 @@
81
81
  overflow: auto;
82
82
  }
83
83
 
84
- .cometchat-change-scope__list::-webkit-scrollbar,
85
- .cometchat-change-scope__list::-webkit-scrollbar-thumb {
86
- display: none;
87
- }
84
+
88
85
 
89
86
  .cometchat-change-scope__list-item {
90
87
  display: flex;
@@ -573,7 +573,22 @@ width: 100%;
573
573
  display: none;
574
574
  }
575
575
 
576
-
576
+ .cometchat-conversations .cometchat-search-bar__input{
577
+ cursor: pointer;
578
+ }
579
+ .cometchat-conversations .cometchat-list-item__body{
580
+ position: relative;
581
+ }
582
+ .cometchat-conversations .cometchat-list-item__menu-view{
583
+ position: absolute;
584
+ top: 0;
585
+ right: 0;
586
+ z-index: 1;
587
+ }
588
+ .cometchat-conversations .cometchat-list-item__trailing-view-hidden {
589
+ visibility: hidden;
590
+ display: initial;
591
+ }
577
592
  @keyframes shimmerAnimation {
578
593
  0% {
579
594
  background-position: -468px 0;
@@ -109,12 +109,7 @@
109
109
  border-radius: var(--cometchat-radius-2, 8px);
110
110
  }
111
111
 
112
- .cometchat-emoji-keyboard__list::-webkit-scrollbar,
113
- .cometchat-emoji-keyboard__list::-webkit-scrollbar-thumb,
114
- .cometchat-emoji-keyboard__tabs::-webkit-scrollbar,
115
- .cometchat-emoji-keyboard__tabs::-webkit-scrollbar-thumb {
116
- display: none;
117
- }
112
+
118
113
 
119
114
  .cometchat-emoji-keyboard__list {
120
115
  width: 100%;
@@ -23,13 +23,13 @@
23
23
  }
24
24
 
25
25
 
26
- .cometchat-group-members .cometchat-list__body::-webkit-scrollbar {
26
+ .cometchat-group-members-hide-scrollbar .cometchat-list__body::-webkit-scrollbar {
27
27
  background: transparent;
28
28
  height: 0px;
29
29
  width: 0px;
30
30
  }
31
31
 
32
- .cometchat-group-members .cometchat-list__body::-webkit-scrollbar-thumb {
32
+ .cometchat-group-members-hide-scrollbar .cometchat-list__body::-webkit-scrollbar-thumb {
33
33
  background: transparent;
34
34
  border-radius: 8px;
35
35
  }
@@ -224,4 +224,9 @@
224
224
  100% {
225
225
  background-position: 468px 0;
226
226
  }
227
+ }
228
+
229
+ .cometchat-group-members-hide-scrollbar .cometchat-change-scope__list::-webkit-scrollbar,
230
+ .cometchat-group-members-hide-scrollbar .cometchat-change-scope__list::-webkit-scrollbar-thumb {
231
+ display: none;
227
232
  }
@@ -64,7 +64,8 @@
64
64
  width: 100%;
65
65
  height: 100%;
66
66
  box-sizing: border-box;
67
- border-right: 1px solid var(--cometchat-border-color-light)
67
+ border-right: 1px solid var(--cometchat-border-color-light);
68
+ position: relative;
68
69
  }
69
70
 
70
71
  /* Styles for loading, error, and empty views, taking up the remaining space */
@@ -75,6 +76,14 @@
75
76
  overflow: hidden;
76
77
  width: 100%;
77
78
  }
79
+ .cometchat-list__loading-view-top{
80
+ position: absolute;
81
+ top: 0;
82
+ bottom: 0;
83
+ height: 100%;
84
+ width: 100%;
85
+ z-index: 2;
86
+ }
78
87
 
79
88
  /* Section header text styling */
80
89
  .cometchat-list__section-header {
@@ -96,8 +105,8 @@
96
105
  justify-content: flex-start;
97
106
  }
98
107
 
99
- .cometchat-list__body::-webkit-scrollbar,
100
- .cometchat-list__body::-webkit-scrollbar-thumb {
108
+ .cometchat-list-hide-scrollbar .cometchat-list__body::-webkit-scrollbar,
109
+ .cometchat-list-hide-scrollbar .cometchat-list__body::-webkit-scrollbar-thumb {
101
110
  display: none;
102
111
  }
103
112
 
@@ -324,6 +324,39 @@ height: 58px;
324
324
  height: fit-content;
325
325
  max-height: 100px;
326
326
  overflow: hidden;
327
- text-overflow: ellipsis;
327
+ text-overflow: ellipsis;
328
328
  white-space: nowrap;
329
+ }
330
+ .cometchat-message-composer-hide-scrollbar .cometchat-action-sheet::-webkit-scrollbar,
331
+ .cometchat-message-composer-hide-scrollbar .cometchat-action-sheet::-webkit-scrollbar-thumb {
332
+ display: none;
333
+ }
334
+
335
+ .cometchat-message-composer-hide-scrollbar .cometchat-emoji-keyboard__list::-webkit-scrollbar,
336
+ .cometchat-message-composer-hide-scrollbar .cometchat-emoji-keyboard__list::-webkit-scrollbar-thumb,
337
+ .cometchat-message-composer-hide-scrollbar .cometchat-emoji-keyboard__tabs::-webkit-scrollbar,
338
+ .cometchat-message-composer-hide-scrollbar .cometchat-emoji-keyboard__tabs::-webkit-scrollbar-thumb {
339
+ display: none;
340
+ }
341
+
342
+
343
+ .cometchat-message-composer-hide-scrollbar .cometchat-sticker-keyboard__tabs::-webkit-scrollbar {
344
+ background: transparent;
345
+ height: 0px;
346
+ width: 0px;
347
+ }
348
+
349
+ .cometchat-message-composer-hide-scrollbar .cometchat-sticker-keyboard__tabs::-webkit-scrollbar-thumb {
350
+ background: rgb(232, 229, 229);
351
+ border-radius: 8px;
352
+ }
353
+
354
+ .cometchat-message-composer-hide-scrollbar .cometchat-sticker-keyboard__list::-webkit-scrollbar {
355
+ background: transparent;
356
+ width: 0px;
357
+ }
358
+
359
+ .cometchat-message-composer-hide-scrollbar .cometchat-sticker-keyboard__list::-webkit-scrollbar-thumb {
360
+ background: rgb(232, 229, 229);
361
+ border-radius: 8px;
329
362
  }
@@ -55,7 +55,8 @@
55
55
  width: 100%;
56
56
  overflow: hidden;
57
57
  }
58
- .cometchat-message-header .cometchat-list-item__trailing-view{
58
+
59
+ .cometchat-message-header .cometchat-list-item__trailing-view {
59
60
  display: none;
60
61
  }
61
62
 
@@ -73,19 +74,60 @@
73
74
  cursor: pointer;
74
75
  }
75
76
 
76
- .cometchat-message-header .cometchat-message-header__conversation-summary-button .cometchat-button{
77
- background: transparent;
78
- border: none;
79
- justify-content: center;
80
- align-items: center;
81
- height: fit-content;
82
- width: fit-content;
83
- padding: 0;
77
+ .cometchat-message-header .cometchat-message-header__conversation-summary-button .cometchat-button {
78
+ background: transparent;
79
+ border: none;
80
+ justify-content: center;
81
+ align-items: center;
82
+ height: fit-content;
83
+ width: fit-content;
84
+ padding: 0;
85
+ }
86
+
87
+ .cometchat-message-header .cometchat-message-header__conversation-summary-button .cometchat-button .cometchat-button__icon {
88
+ height: 24px;
89
+ width: 24px;
90
+ background: var(--cometchat-icon-color-primary, #141414);
91
+ }
92
+
93
+ /* Styling for the search button in the message header */
94
+ .cometchat-message-header .cometchat-message-header__search-button .cometchat-button {
95
+ background: transparent;
96
+ border: none;
97
+ justify-content: center;
98
+ align-items: center;
99
+ height: fit-content;
100
+ width: fit-content;
101
+ padding: 0;
102
+ }
103
+
104
+ .cometchat-message-header .cometchat-message-header__search-button .cometchat-button__icon,.cometchat-message-header .cometchat-menu-list__sub-menu-icon {
105
+ height: 24px;
106
+ width: 24px;
107
+ background: var(--cometchat-icon-color-primary, #141414);
84
108
  }
85
- .cometchat-message-header .cometchat-message-header__conversation-summary-button .cometchat-button .cometchat-button__icon{
109
+
110
+ /* Styling for the menu in the message header */
111
+ .cometchat-message-header .cometchat-message-header__menu {
112
+ display: flex;
113
+ justify-content: center;
114
+ align-items: center;
115
+ height: fit-content;
116
+ width: fit-content;
117
+ }
118
+
119
+ .cometchat-message-header .cometchat-message-header__menu .cometchat-button {
120
+ background: transparent;
121
+ border: none;
122
+ justify-content: center;
123
+ align-items: center;
86
124
  height: 24px;
87
125
  width: 24px;
88
- background: var(--cometchat-icon-color-primary, #141414);;
126
+ padding: 0;
127
+ }
128
+
129
+ .cometchat-message-header .cometchat-menu-list__sub-menu-list {
130
+ width: max-content;
89
131
  }
90
132
  /* List item container within the message header */
91
133
 
@@ -173,7 +215,8 @@ padding: 0;
173
215
  .cometchat-message-header__back-button {
174
216
  display: block;
175
217
  }
218
+
176
219
  .cometchat-message-header .cometchat-list-item .cometchat-list-item__body-title {
177
- display: initial;
220
+ display: initial;
178
221
  }
179
222
  }
@@ -81,10 +81,7 @@
81
81
  border-bottom: 1px solid var(--cometchat-border-color-light);
82
82
  }
83
83
 
84
- .cometchat-message-information__message::-webkit-scrollbar,
85
- .cometchat-message-information__message::-webkit-scrollbar-thumb {
86
- display: none;
87
- }
84
+
88
85
 
89
86
 
90
87
  .cometchat-message-information__message .cometchat-message-bubble__wrapper {
@@ -106,12 +103,15 @@
106
103
  flex-direction: column;
107
104
  gap: 0px;
108
105
  }
109
-
110
- .cometchat-message-information__receipts::-webkit-scrollbar,
111
- .cometchat-message-information__receipts::-webkit-scrollbar-thumb {
106
+ .cometchat-message-information-hide-scrollbar .cometchat-message-information__receipts::-webkit-scrollbar,
107
+ .cometchat-message-information-hide-scrollbar .cometchat-message-information__receipts::-webkit-scrollbar-thumb {
112
108
  display: none;
113
109
  }
114
110
 
111
+ .cometchat-message-information-hide-scrollbar .cometchat-message-information__message::-webkit-scrollbar,
112
+ .cometchat-message-information-hide-scrollbar .cometchat-message-information__message::-webkit-scrollbar-thumb {
113
+ display: none;
114
+ }
115
115
  .cometchat-message-information__receipts .cometchat-list-item__body {
116
116
  padding: 0px;
117
117
  }
@@ -312,12 +312,9 @@ width: fit-content;
312
312
 
313
313
  /* Message indicator inside message list */
314
314
  .cometchat-message-list__message-indicator {
315
- margin-bottom: 8px;
316
- display: flex;
317
- width: 100;
318
- justify-content: center;
319
- align-items: center;
320
- width: 100%;
315
+ position: absolute;
316
+ right: 12px;
317
+ bottom: 8px;
321
318
  }
322
319
 
323
320
  .cometchat-message-list__message-indicator>.cometchat {
@@ -330,13 +327,13 @@ width: fit-content;
330
327
  height: fit-content;
331
328
  width: fit-content;
332
329
  display: flex;
333
- padding: 8px var(--cometchat-padding-2, 8px);
334
- flex-direction: column;
330
+ padding: var(--cometchat-padding-2, 8px);
331
+ flex-direction: column-reverse;
335
332
  align-items: flex-start;
336
333
  border-radius: var(--cometchat-radius-max, 4px);
337
- flex-direction: row;
338
334
  justify-content: center;
339
335
  align-items: center;
336
+ gap: 4px;
340
337
  }
341
338
 
342
339
  /* Text inside message indicator button */
@@ -344,13 +341,20 @@ width: fit-content;
344
341
  color: var(--cometchat-static-white);
345
342
  text-align: center;
346
343
  font: var(--cometchat-font-caption1-regular);
344
+ background: var(--cometchat-primary-color, #6852D6);
345
+ border-radius: var(--cometchat-radius-max);
346
+ height: 20px;
347
+ padding: 0px var(--cometchat-padding-2, 8px);
348
+ justify-content: center;
349
+ align-items: center;
350
+ display: flex;
347
351
  }
348
352
 
349
353
  /* Icon inside message indicator button */
350
354
  .cometchat-message-list__message-indicator .cometchat-button__icon {
351
355
  display: flex;
352
- width: 16px;
353
- height: 16px;
356
+ width: 24px;
357
+ height: 24px;
354
358
  justify-content: center;
355
359
  align-items: center;
356
360
  background: var(--cometchat-static-white);
@@ -363,6 +367,7 @@ width: fit-content;
363
367
  width: 100%;
364
368
  box-sizing: border-box;
365
369
  background: transparent;
370
+ z-index: 1;
366
371
  }
367
372
 
368
373
  /* Leading view inside message bubble */
@@ -720,12 +725,36 @@ width: fit-content;
720
725
  justify-content: flex-end;
721
726
  }
722
727
 
723
- .cometchat-message-list .cometchat-message-list__body .cometchat-list__body{
728
+ .cometchat-message-list-loaded .cometchat-message-list__body .cometchat-list__body{
724
729
  height: fit-content;
725
730
  max-height: 100%;
726
731
  }
727
732
 
728
- .cometchat-message-list > .cometchat-message-list__body > .cometchat {
733
+ .cometchat-message-list-loaded > .cometchat-message-list__body > .cometchat {
729
734
  height: fit-content !important;
730
735
  max-height: 100%;
736
+ }
737
+
738
+ @keyframes backgroundFade {
739
+ 0% { background-color: var(--cometchat-extended-primary-color-200); }
740
+ 50% { background-color: var(--cometchat-extended-primary-color-100); }
741
+ 75%, 100% { background-color: transparent; }
742
+ }
743
+
744
+ .cometchat-message-list__bubble-highlight {
745
+ animation: backgroundFade 3s ease-out forwards;
746
+ }
747
+
748
+ .cometchat-message-list-hide-scrollbar .cometchat-reaction-list__list::-webkit-scrollbar,
749
+ .cometchat-message-list-hide-scrollbar .cometchat-reaction-list__list::-webkit-scrollbar-thumb,
750
+ .cometchat-message-list-hide-scrollbar .cometchat-reaction-list__tabs::-webkit-scrollbar,
751
+ .cometchat-message-list-hide-scrollbar .cometchat-reaction-list__tabs::-webkit-scrollbar-thumb {
752
+ display: none;
753
+ }
754
+
755
+ .cometchat-message-list-hide-scrollbar .cometchat-emoji-keyboard__list::-webkit-scrollbar,
756
+ .cometchat-message-list-hide-scrollbar .cometchat-emoji-keyboard__list::-webkit-scrollbar-thumb,
757
+ .cometchat-message-list-hide-scrollbar .cometchat-emoji-keyboard__tabs::-webkit-scrollbar,
758
+ .cometchat-message-list-hide-scrollbar .cometchat-emoji-keyboard__tabs::-webkit-scrollbar-thumb {
759
+ display: none;
731
760
  }
@@ -34,12 +34,6 @@
34
34
  background: var(--cometchat-background-color-01, #FFF);
35
35
  }
36
36
 
37
- .cometchat-reaction-list__list::-webkit-scrollbar,
38
- .cometchat-reaction-list__list::-webkit-scrollbar-thumb,
39
- .cometchat-reaction-list__tabs::-webkit-scrollbar,
40
- .cometchat-reaction-list__tabs::-webkit-scrollbar-thumb {
41
- display: none;
42
- }
43
37
 
44
38
  .cometchat-reaction-list__tabs-tab {
45
39
  display: flex;