@cometchat/chat-uikit-react 6.3.4 → 6.3.6

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 (31) hide show
  1. package/dist/assets/file_unsupported.svg +3 -0
  2. package/dist/assets/warning_neutral.svg +3 -0
  3. package/dist/index.d.ts +92 -9
  4. package/dist/index.js +2 -2
  5. package/dist/index.js.map +1 -1
  6. package/dist/styles/CometChatConversations.css +7 -0
  7. package/dist/styles/CometChatFlagMessageDialog.css +207 -0
  8. package/dist/styles/CometChatMessageComposer.css +5 -7
  9. package/dist/styles/CometChatMessageList.css +7 -2
  10. package/dist/styles/CometChatMessagePreview.css +7 -0
  11. package/dist/styles/CometChatUserMemberWrapper.css +25 -0
  12. package/dist/styles/components/CometChatConversations.css +7 -0
  13. package/dist/styles/components/CometChatFlagMessageDialog.css +207 -0
  14. package/dist/styles/components/CometChatMessageComposer.css +5 -7
  15. package/dist/styles/components/CometChatMessageList.css +7 -2
  16. package/dist/styles/components/CometChatMessagePreview.css +7 -0
  17. package/dist/styles/components/CometChatUserMemberWrapper.css +25 -0
  18. package/dist/styles/components/index.css +2 -0
  19. package/dist/styles/index.css +2 -0
  20. package/dist/types/components/CometChatConversations/useCometChatConversations.d.ts +1 -0
  21. package/dist/types/components/CometChatFlagMessageDialog/CometChatFlagMessageDialog.d.ts +29 -0
  22. package/dist/types/components/CometChatMessageComposer/CometChatMessageComposer.d.ts +9 -0
  23. package/dist/types/components/CometChatMessageComposer/useCometChatMessageComposer.d.ts +0 -1
  24. package/dist/types/components/CometChatMessageList/CometChatMessageList.d.ts +10 -0
  25. package/dist/types/components/CometChatUserMemberWrapper/CometChatUserMemberWrapper.d.ts +15 -1
  26. package/dist/types/constants/CometChatUIKitConstants.d.ts +1 -0
  27. package/dist/types/formatters/CometChatFormatters/CometChatMentionsFormatter/CometChatMentionsFormatter.d.ts +22 -5
  28. package/dist/types/formatters/CometChatFormatters/CometChatTextFormatter.d.ts +3 -2
  29. package/dist/types/index.d.ts +1 -0
  30. package/dist/types/utils/MessagesDataSource.d.ts +2 -0
  31. package/package.json +2 -2
package/dist/styles/CometChatConversations.css CHANGED
@@ -238,6 +238,13 @@ box-sizing: border-box;
238
238
  mask-size: contain;
239
239
  }
240
240
 
241
+ .cometchat-conversations__subtitle-icon-unsupported {
242
+ -webkit-mask: url("../../assets/file_unsupported.svg") center center no-repeat;
243
+ mask: url("../../assets/file_unsupported.svg") center center no-repeat;
244
+ -webkit-mask-size: contain;
245
+ mask-size: contain;
246
+ }
247
+
241
248
  .cometchat-conversations__subtitle-icon-thread {
242
249
  -webkit-mask: url("../../assets/conversations_thread.svg") center center no-repeat;
243
250
  mask: url("../../assets/conversations_thread.svg") center center no-repeat;
package/dist/styles/CometChatFlagMessageDialog.css ADDED
@@ -0,0 +1,207 @@
1
+ .cometchat-flag-message-dialog {
2
+ max-width: 400px;
3
+ width: 100%;
4
+ height: fit-content;
5
+ max-height: 100%;
6
+ flex-shrink: 0;
7
+ border-radius: var(--cometchat-radius-5);
8
+ border: 1px solid var(--cometchat-border-color-light);
9
+ background: var(--cometchat-background-color-01);
10
+ box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
11
+ overflow: hidden;
12
+ }
13
+
14
+ .cometchat-flag-message-dialog button {
15
+ cursor: pointer;
16
+ }
17
+
18
+ .cometchat-flag-message-dialog__header {
19
+ padding: var(--cometchat-padding-4) var(--cometchat-padding-4);
20
+ border-bottom: 1px solid var(--cometchat-border-color-light);
21
+ border-left: 1px solid var(--cometchat-border-color-light);
22
+ background: var(--cometchat-background-color-01);
23
+ }
24
+
25
+ .cometchat-flag-message-dialog__header-main {
26
+ display: flex;
27
+ margin-bottom: var(--cometchat-padding-2);
28
+ align-items: center;
29
+ gap: var(--cometchat-padding-3);
30
+ align-self: stretch;
31
+ }
32
+
33
+ .cometchat-flag-message-dialog__body {
34
+ width: calc(100% - var(--cometchat-padding-5) * 2);
35
+ margin-inline: auto;
36
+ display: flex;
37
+ flex-direction: column;
38
+ }
39
+
40
+ .cometchat-flag-message-dialog__header-title {
41
+ display: flex;
42
+ flex-direction: column;
43
+ justify-content: center;
44
+ align-items: flex-start;
45
+ gap: 0px;
46
+ flex: 1 0 0;
47
+ overflow: hidden;
48
+ color: var(--cometchat-text-color-primary);
49
+ text-overflow: ellipsis;
50
+ font: var(--cometchat-font-heading2-medium);
51
+ }
52
+
53
+ .cometchat-flag-message-dialog__header-subtitle {
54
+ text-align: left;
55
+ overflow: hidden;
56
+ color: var(--cometchat-neutral-color-600);
57
+ text-overflow: ellipsis;
58
+ font: var(--cometchat-font-body-regular);
59
+ }
60
+
61
+ .cometchat-flag-message-dialog__reasons {
62
+ display: flex;
63
+ flex-wrap: wrap;
64
+ justify-content: flex-start;
65
+ gap: 8px;
66
+ padding: var(--cometchat-padding-4) 0 0 0;
67
+ }
68
+
69
+ .cometchat-flag-message-dialog__reason {
70
+ color: var(--cometchat-text-color-primary);
71
+ background-color: var(--cometchat-background-color-02);
72
+ border: 1px solid var(--cometchat-border-color-default);
73
+ border-radius: 16px;
74
+ cursor: pointer;
75
+ font: var(--cometchat-font-body-regular);
76
+ padding: 4px 12px;
77
+ }
78
+
79
+ .cometchat-flag-message-dialog__reason:hover {
80
+ background-color: var(--cometchat-neutral-color-200);
81
+ }
82
+
83
+ .cometchat-flag-message-dialog__reasons .cometchat-flag-message-dialog__reason-selected {
84
+ color: var(--cometchat-text-color-highlight);
85
+ background-color: var(--cometchat-extended-primary-color-100);
86
+ border-color: var(--cometchat-extended-primary-color-200);
87
+ }
88
+
89
+ .cometchat-flag-message-dialog__remark {
90
+ display: flex;
91
+ flex-direction: column;
92
+ gap: var(--cometchat-padding-2);
93
+ align-items: flex-start;
94
+ margin-top: var(--cometchat-margin-6)
95
+ }
96
+
97
+ .cometchat-flag-message-dialog__remark-label {
98
+ text-align: left;
99
+ font: var(--cometchat-font-body-medium);
100
+ color: var(--cometchat-text-color-primary);
101
+ }
102
+
103
+ .cometchat-flag-message-dialog__remark-label span {
104
+ color: var(--cometchat-text-color-tertiary);
105
+ font: var(--cometchat-font-body-regular);
106
+ }
107
+
108
+ .cometchat-flag-message-dialog__remark-input {
109
+ resize: none;
110
+ width: 100%;
111
+ overflow: auto;
112
+ height: 84px;
113
+ min-height: 84px;
114
+ max-height: 84px;
115
+ border: 1px solid var(--cometchat-border-color-light);
116
+ border-radius: var(--cometchat-radius-2, 8px);
117
+ background: var(--cometchat-background-color-02);
118
+ color: var(--cometchat-text-color-primary);
119
+ font: var(--cometchat-font-body-regular);
120
+ padding: var(--cometchat-padding-2);
121
+ caret-color: var(--cometchat-text-color-primary);
122
+ }
123
+
124
+ .cometchat-flag-message-dialog__remark-input:focus {
125
+ outline: none;
126
+ }
127
+
128
+ .cometchat-flag-message-dialog__remark-input::placeholder {
129
+ color: var(--cometchat-text-color-tertiary);
130
+ }
131
+
132
+ .cometchat-flag-message-dialog__error{
133
+ text-align: left;
134
+ display: flex;
135
+ flex-direction: column;
136
+ justify-content: flex-end;
137
+ font: var(--cometchat-font-body-regular);
138
+ color: var(--cometchat-error-color);
139
+ padding: var(--cometchat-padding-2) 0 var(--cometchat-padding-4) 0;
140
+ }
141
+
142
+ .cometchat-flag-message-dialog__actions {
143
+ display: flex;
144
+ justify-content: center;
145
+ align-items: center;
146
+ gap: var(--cometchat-padding-3);
147
+ padding: 0 0 var(--cometchat-padding-5) 0;
148
+ }
149
+
150
+ .cometchat-flag-message-dialog__actions-item{
151
+ width: 100%;
152
+ }
153
+
154
+ .cometchat-flag-message-dialog__actions .cometchat:has(> .cometchat-button) {
155
+ width: 100%;
156
+ height: 40px;
157
+ border: none;
158
+ }
159
+
160
+ .cometchat-flag-message-dialog__actions .cometchat-button {
161
+ width: 100%;
162
+ border-radius: var(--cometchat-radius-2, 8px);
163
+ font: var(--cometchat-font-body-medium);
164
+ }
165
+ .cometchat-flag-message-dialog__actions .cometchat-flag-message-dialog__actions-cancel .cometchat-button {
166
+ background-color: var(--cometchat-background-color-01);
167
+ border: 1px solid var(--cometchat-border-color-dark);
168
+ }
169
+ .cometchat-flag-message-dialog__actions .cometchat-flag-message-dialog__actions-cancel .cometchat-button__text {
170
+ color: var(--cometchat-text-color-primary);
171
+ }
172
+
173
+ .cometchat-flag-message-dialog__actions .cometchat-flag-message-dialog__actions-submit .cometchat-button__text {
174
+ color: var(--cometchat-static-white);
175
+ }
176
+
177
+ .cometchat-flag-message-dialog__actions .cometchat-flag-message-dialog__actions-submit .cometchat-button:disabled{
178
+ background-color: var(--cometchat-neutral-color-300);
179
+ border-color: var(--cometchat-neutral-color-300);
180
+ cursor: not-allowed;
181
+ }
182
+
183
+ .cometchat-flag-message-dialog__actions .cometchat-flag-message-dialog__actions-submit .cometchat-button:has(.cometchat-button__loading-view) {
184
+ background: var(--cometchat-primary-button-background, #6852D6);
185
+ }
186
+
187
+ .cometchat-flag-message-dialog__actions .cometchat-flag-message-dialog__actions-submit .cometchat-button:disabled .cometchat-button__text{
188
+ color: var(--cometchat-neutral-color-50);
189
+ }
190
+
191
+ .cometchat-flag-message-dialog__actions .cometchat-flag-message-dialog__actions-submit .cometchat-button:disabled .cometchat-button__icon, .cometchat-flag-message-dialog__actions .cometchat-flag-message-dialog__actions-submit .cometchat-button:disabled .cometchat-button__text{
192
+ cursor: not-allowed;
193
+ }
194
+
195
+ .cometchat-flag-message-dialog__header-close .cometchat-button {
196
+ height: 24px;
197
+ width: 24px;
198
+ padding: 0px;
199
+ gap: 0px;
200
+ background: transparent;
201
+ }
202
+
203
+ @media (max-width: 420px) {
204
+ .cometchat-flag-message-dialog {
205
+ width: 95%;
206
+ }
207
+ }
package/dist/styles/CometChatMessageComposer.css CHANGED
@@ -165,14 +165,13 @@
165
165
 
166
166
  /* Mentions wrapper styling */
167
167
  .cometchat-mention-list {
168
+ overflow: auto;
168
169
  display: flex;
169
170
  flex-direction: column;
170
- justify-content: flex-end;
171
171
  z-index: 2;
172
172
  min-height: 45px;
173
173
  padding: 0 0 1px 0;
174
174
  width: fit-content;
175
- align-self: flex-start;
176
175
  min-width: 320px;
177
176
  bottom: 100%;
178
177
  left: 0;
@@ -182,19 +181,18 @@
182
181
  border: 1px solid var(--cometchat-background-color-01);
183
182
  background: var(--cometchat-background-color-01);
184
183
  box-shadow: 0 12px 16px 4px rgba(16, 24, 40, 0.08), 0 4px 6px 4px rgba(16, 24, 40, 0.03);
185
- }
186
-
187
- .cometchat-mention-list .cometchat-list {
188
- max-height: 336px;
184
+ scrollbar-width: none;
189
185
  }
190
186
 
191
187
  .cometchat-mention-list>.cometchat {
192
- overflow: hidden;
193
188
  border-radius: inherit;
194
189
  }
195
190
  .cometchat-mention-list .cometchat-list .cometchat-list__header-title{
196
191
  display: none;
197
192
  }
193
+ .cometchat-mention-list .cometchat-list__item-wrapper{
194
+ cursor: pointer;
195
+ }
198
196
 
199
197
  /* Message input area */
200
198
  .cometchat-message-composer__input {
package/dist/styles/CometChatMessageList.css CHANGED
@@ -722,9 +722,9 @@
722
722
  }
723
723
 
724
724
  /**
725
- * Styling for the message information popup wrapper to create a centered overlay
725
+ * Styling for the message information popup wrapper and flag message dialog wrapper to create a centered overlay
726
726
  */
727
- .cometchat-message-information__popup-wrapper {
727
+ .cometchat-message-information__popup-wrapper, .cometchat-message-list__flag-message-dialog-wrapper {
728
728
  display: flex;
729
729
  position: fixed;
730
730
  z-index: 3;
@@ -779,4 +779,9 @@
779
779
  .cometchat-message-list-hide-scrollbar .cometchat-emoji-keyboard__tabs::-webkit-scrollbar,
780
780
  .cometchat-message-list-hide-scrollbar .cometchat-emoji-keyboard__tabs::-webkit-scrollbar-thumb {
781
781
  display: none;
782
+ }
783
+
784
+ .cometchat-message-list__flag-message-dialog-hide-scrollbar .cometchat-flag-message-dialog__remark-input::-webkit-scrollbar,
785
+ .cometchat-message-list__flag-message-dialog-hide-scrollbar .cometchat-flag-message-dialog__remark-input::-webkit-scrollbar-thumb {
786
+ display: none;
782
787
  }
package/dist/styles/CometChatMessagePreview.css CHANGED
@@ -270,6 +270,13 @@
270
270
  mask-size: contain;
271
271
  }
272
272
 
273
+ .cometchat-message-preview__subtitle-icon-unsupported {
274
+ -webkit-mask: url("../../assets/file_unsupported.svg") center center no-repeat;
275
+ mask: url("../../assets/file_unsupported.svg") center center no-repeat;
276
+ -webkit-mask-size: contain;
277
+ mask-size: contain;
278
+ }
279
+
273
280
  .cometchat-message-preview__subtitle-icon-none {
274
281
  display: none;
275
282
  }
package/dist/styles/CometChatUserMemberWrapper.css ADDED
@@ -0,0 +1,25 @@
1
+ .cometchat-special-mentions-list .cometchat-special-mentions-list__item {
2
+ display: flex;
3
+ align-items: center;
4
+ gap: 12px;
5
+ padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-4, 16px);
6
+ color: var(--cometchat-text-color-primary, #141414);
7
+ font: var(--cometchat-font-heading4-medium, 500 16px Roboto);
8
+ cursor: pointer;
9
+ }
10
+
11
+ .cometchat-special-mentions-list .cometchat-special-mentions-list__item:hover {
12
+ background: var(--cometchat-white-hover, #FAFAFA);
13
+ }
14
+
15
+ .cometchat-special-mentions-list .cometchat-special-mentions-list__item .cometchat-special-mentions-list__item-name {
16
+ padding: 5px;
17
+ display: inline-flex;
18
+ align-items: center;
19
+ gap: 8px;
20
+ }
21
+
22
+ .cometchat-special-mentions-list .cometchat-special-mentions-list__item .cometchat-special-mentions-list__item-name .cometchat-special-mentions-list__item-name-subtext{
23
+ color: var(--cometchat-neutral-color-700);
24
+ font: var(--cometchat-font-body-regular);
25
+ }
package/dist/styles/components/CometChatConversations.css CHANGED
@@ -238,6 +238,13 @@ box-sizing: border-box;
238
238
  mask-size: contain;
239
239
  }
240
240
 
241
+ .cometchat-conversations__subtitle-icon-unsupported {
242
+ -webkit-mask: url("../../assets/file_unsupported.svg") center center no-repeat;
243
+ mask: url("../../assets/file_unsupported.svg") center center no-repeat;
244
+ -webkit-mask-size: contain;
245
+ mask-size: contain;
246
+ }
247
+
241
248
  .cometchat-conversations__subtitle-icon-thread {
242
249
  -webkit-mask: url("../../assets/conversations_thread.svg") center center no-repeat;
243
250
  mask: url("../../assets/conversations_thread.svg") center center no-repeat;
package/dist/styles/components/CometChatFlagMessageDialog.css ADDED
@@ -0,0 +1,207 @@
1
+ .cometchat-flag-message-dialog {
2
+ max-width: 400px;
3
+ width: 100%;
4
+ height: fit-content;
5
+ max-height: 100%;
6
+ flex-shrink: 0;
7
+ border-radius: var(--cometchat-radius-5);
8
+ border: 1px solid var(--cometchat-border-color-light);
9
+ background: var(--cometchat-background-color-01);
10
+ box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
11
+ overflow: hidden;
12
+ }
13
+
14
+ .cometchat-flag-message-dialog button {
15
+ cursor: pointer;
16
+ }
17
+
18
+ .cometchat-flag-message-dialog__header {
19
+ padding: var(--cometchat-padding-4) var(--cometchat-padding-4);
20
+ border-bottom: 1px solid var(--cometchat-border-color-light);
21
+ border-left: 1px solid var(--cometchat-border-color-light);
22
+ background: var(--cometchat-background-color-01);
23
+ }
24
+
25
+ .cometchat-flag-message-dialog__header-main {
26
+ display: flex;
27
+ margin-bottom: var(--cometchat-padding-2);
28
+ align-items: center;
29
+ gap: var(--cometchat-padding-3);
30
+ align-self: stretch;
31
+ }
32
+
33
+ .cometchat-flag-message-dialog__body {
34
+ width: calc(100% - var(--cometchat-padding-5) * 2);
35
+ margin-inline: auto;
36
+ display: flex;
37
+ flex-direction: column;
38
+ }
39
+
40
+ .cometchat-flag-message-dialog__header-title {
41
+ display: flex;
42
+ flex-direction: column;
43
+ justify-content: center;
44
+ align-items: flex-start;
45
+ gap: 0px;
46
+ flex: 1 0 0;
47
+ overflow: hidden;
48
+ color: var(--cometchat-text-color-primary);
49
+ text-overflow: ellipsis;
50
+ font: var(--cometchat-font-heading2-medium);
51
+ }
52
+
53
+ .cometchat-flag-message-dialog__header-subtitle {
54
+ text-align: left;
55
+ overflow: hidden;
56
+ color: var(--cometchat-neutral-color-600);
57
+ text-overflow: ellipsis;
58
+ font: var(--cometchat-font-body-regular);
59
+ }
60
+
61
+ .cometchat-flag-message-dialog__reasons {
62
+ display: flex;
63
+ flex-wrap: wrap;
64
+ justify-content: flex-start;
65
+ gap: 8px;
66
+ padding: var(--cometchat-padding-4) 0 0 0;
67
+ }
68
+
69
+ .cometchat-flag-message-dialog__reason {
70
+ color: var(--cometchat-text-color-primary);
71
+ background-color: var(--cometchat-background-color-02);
72
+ border: 1px solid var(--cometchat-border-color-default);
73
+ border-radius: 16px;
74
+ cursor: pointer;
75
+ font: var(--cometchat-font-body-regular);
76
+ padding: 4px 12px;
77
+ }
78
+
79
+ .cometchat-flag-message-dialog__reason:hover {
80
+ background-color: var(--cometchat-neutral-color-200);
81
+ }
82
+
83
+ .cometchat-flag-message-dialog__reasons .cometchat-flag-message-dialog__reason-selected {
84
+ color: var(--cometchat-text-color-highlight);
85
+ background-color: var(--cometchat-extended-primary-color-100);
86
+ border-color: var(--cometchat-extended-primary-color-200);
87
+ }
88
+
89
+ .cometchat-flag-message-dialog__remark {
90
+ display: flex;
91
+ flex-direction: column;
92
+ gap: var(--cometchat-padding-2);
93
+ align-items: flex-start;
94
+ margin-top: var(--cometchat-margin-6)
95
+ }
96
+
97
+ .cometchat-flag-message-dialog__remark-label {
98
+ text-align: left;
99
+ font: var(--cometchat-font-body-medium);
100
+ color: var(--cometchat-text-color-primary);
101
+ }
102
+
103
+ .cometchat-flag-message-dialog__remark-label span {
104
+ color: var(--cometchat-text-color-tertiary);
105
+ font: var(--cometchat-font-body-regular);
106
+ }
107
+
108
+ .cometchat-flag-message-dialog__remark-input {
109
+ resize: none;
110
+ width: 100%;
111
+ overflow: auto;
112
+ height: 84px;
113
+ min-height: 84px;
114
+ max-height: 84px;
115
+ border: 1px solid var(--cometchat-border-color-light);
116
+ border-radius: var(--cometchat-radius-2, 8px);
117
+ background: var(--cometchat-background-color-02);
118
+ color: var(--cometchat-text-color-primary);
119
+ font: var(--cometchat-font-body-regular);
120
+ padding: var(--cometchat-padding-2);
121
+ caret-color: var(--cometchat-text-color-primary);
122
+ }
123
+
124
+ .cometchat-flag-message-dialog__remark-input:focus {
125
+ outline: none;
126
+ }
127
+
128
+ .cometchat-flag-message-dialog__remark-input::placeholder {
129
+ color: var(--cometchat-text-color-tertiary);
130
+ }
131
+
132
+ .cometchat-flag-message-dialog__error{
133
+ text-align: left;
134
+ display: flex;
135
+ flex-direction: column;
136
+ justify-content: flex-end;
137
+ font: var(--cometchat-font-body-regular);
138
+ color: var(--cometchat-error-color);
139
+ padding: var(--cometchat-padding-2) 0 var(--cometchat-padding-4) 0;
140
+ }
141
+
142
+ .cometchat-flag-message-dialog__actions {
143
+ display: flex;
144
+ justify-content: center;
145
+ align-items: center;
146
+ gap: var(--cometchat-padding-3);
147
+ padding: 0 0 var(--cometchat-padding-5) 0;
148
+ }
149
+
150
+ .cometchat-flag-message-dialog__actions-item{
151
+ width: 100%;
152
+ }
153
+
154
+ .cometchat-flag-message-dialog__actions .cometchat:has(> .cometchat-button) {
155
+ width: 100%;
156
+ height: 40px;
157
+ border: none;
158
+ }
159
+
160
+ .cometchat-flag-message-dialog__actions .cometchat-button {
161
+ width: 100%;
162
+ border-radius: var(--cometchat-radius-2, 8px);
163
+ font: var(--cometchat-font-body-medium);
164
+ }
165
+ .cometchat-flag-message-dialog__actions .cometchat-flag-message-dialog__actions-cancel .cometchat-button {
166
+ background-color: var(--cometchat-background-color-01);
167
+ border: 1px solid var(--cometchat-border-color-dark);
168
+ }
169
+ .cometchat-flag-message-dialog__actions .cometchat-flag-message-dialog__actions-cancel .cometchat-button__text {
170
+ color: var(--cometchat-text-color-primary);
171
+ }
172
+
173
+ .cometchat-flag-message-dialog__actions .cometchat-flag-message-dialog__actions-submit .cometchat-button__text {
174
+ color: var(--cometchat-static-white);
175
+ }
176
+
177
+ .cometchat-flag-message-dialog__actions .cometchat-flag-message-dialog__actions-submit .cometchat-button:disabled{
178
+ background-color: var(--cometchat-neutral-color-300);
179
+ border-color: var(--cometchat-neutral-color-300);
180
+ cursor: not-allowed;
181
+ }
182
+
183
+ .cometchat-flag-message-dialog__actions .cometchat-flag-message-dialog__actions-submit .cometchat-button:has(.cometchat-button__loading-view) {
184
+ background: var(--cometchat-primary-button-background, #6852D6);
185
+ }
186
+
187
+ .cometchat-flag-message-dialog__actions .cometchat-flag-message-dialog__actions-submit .cometchat-button:disabled .cometchat-button__text{
188
+ color: var(--cometchat-neutral-color-50);
189
+ }
190
+
191
+ .cometchat-flag-message-dialog__actions .cometchat-flag-message-dialog__actions-submit .cometchat-button:disabled .cometchat-button__icon, .cometchat-flag-message-dialog__actions .cometchat-flag-message-dialog__actions-submit .cometchat-button:disabled .cometchat-button__text{
192
+ cursor: not-allowed;
193
+ }
194
+
195
+ .cometchat-flag-message-dialog__header-close .cometchat-button {
196
+ height: 24px;
197
+ width: 24px;
198
+ padding: 0px;
199
+ gap: 0px;
200
+ background: transparent;
201
+ }
202
+
203
+ @media (max-width: 420px) {
204
+ .cometchat-flag-message-dialog {
205
+ width: 95%;
206
+ }
207
+ }
package/dist/styles/components/CometChatMessageComposer.css CHANGED
@@ -165,14 +165,13 @@
165
165
 
166
166
  /* Mentions wrapper styling */
167
167
  .cometchat-mention-list {
168
+ overflow: auto;
168
169
  display: flex;
169
170
  flex-direction: column;
170
- justify-content: flex-end;
171
171
  z-index: 2;
172
172
  min-height: 45px;
173
173
  padding: 0 0 1px 0;
174
174
  width: fit-content;
175
- align-self: flex-start;
176
175
  min-width: 320px;
177
176
  bottom: 100%;
178
177
  left: 0;
@@ -182,19 +181,18 @@
182
181
  border: 1px solid var(--cometchat-background-color-01);
183
182
  background: var(--cometchat-background-color-01);
184
183
  box-shadow: 0 12px 16px 4px rgba(16, 24, 40, 0.08), 0 4px 6px 4px rgba(16, 24, 40, 0.03);
185
- }
186
-
187
- .cometchat-mention-list .cometchat-list {
188
- max-height: 336px;
184
+ scrollbar-width: none;
189
185
  }
190
186
 
191
187
  .cometchat-mention-list>.cometchat {
192
- overflow: hidden;
193
188
  border-radius: inherit;
194
189
  }
195
190
  .cometchat-mention-list .cometchat-list .cometchat-list__header-title{
196
191
  display: none;
197
192
  }
193
+ .cometchat-mention-list .cometchat-list__item-wrapper{
194
+ cursor: pointer;
195
+ }
198
196
 
199
197
  /* Message input area */
200
198
  .cometchat-message-composer__input {
package/dist/styles/components/CometChatMessageList.css CHANGED
@@ -722,9 +722,9 @@
722
722
  }
723
723
 
724
724
  /**
725
- * Styling for the message information popup wrapper to create a centered overlay
725
+ * Styling for the message information popup wrapper and flag message dialog wrapper to create a centered overlay
726
726
  */
727
- .cometchat-message-information__popup-wrapper {
727
+ .cometchat-message-information__popup-wrapper, .cometchat-message-list__flag-message-dialog-wrapper {
728
728
  display: flex;
729
729
  position: fixed;
730
730
  z-index: 3;
@@ -779,4 +779,9 @@
779
779
  .cometchat-message-list-hide-scrollbar .cometchat-emoji-keyboard__tabs::-webkit-scrollbar,
780
780
  .cometchat-message-list-hide-scrollbar .cometchat-emoji-keyboard__tabs::-webkit-scrollbar-thumb {
781
781
  display: none;
782
+ }
783
+
784
+ .cometchat-message-list__flag-message-dialog-hide-scrollbar .cometchat-flag-message-dialog__remark-input::-webkit-scrollbar,
785
+ .cometchat-message-list__flag-message-dialog-hide-scrollbar .cometchat-flag-message-dialog__remark-input::-webkit-scrollbar-thumb {
786
+ display: none;
782
787
  }
package/dist/styles/components/CometChatMessagePreview.css CHANGED
@@ -270,6 +270,13 @@
270
270
  mask-size: contain;
271
271
  }
272
272
 
273
+ .cometchat-message-preview__subtitle-icon-unsupported {
274
+ -webkit-mask: url("../../assets/file_unsupported.svg") center center no-repeat;
275
+ mask: url("../../assets/file_unsupported.svg") center center no-repeat;
276
+ -webkit-mask-size: contain;
277
+ mask-size: contain;
278
+ }
279
+
273
280
  .cometchat-message-preview__subtitle-icon-none {
274
281
  display: none;
275
282
  }
package/dist/styles/components/CometChatUserMemberWrapper.css ADDED
@@ -0,0 +1,25 @@
1
+ .cometchat-special-mentions-list .cometchat-special-mentions-list__item {
2
+ display: flex;
3
+ align-items: center;
4
+ gap: 12px;
5
+ padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-4, 16px);
6
+ color: var(--cometchat-text-color-primary, #141414);
7
+ font: var(--cometchat-font-heading4-medium, 500 16px Roboto);
8
+ cursor: pointer;
9
+ }
10
+
11
+ .cometchat-special-mentions-list .cometchat-special-mentions-list__item:hover {
12
+ background: var(--cometchat-white-hover, #FAFAFA);
13
+ }
14
+
15
+ .cometchat-special-mentions-list .cometchat-special-mentions-list__item .cometchat-special-mentions-list__item-name {
16
+ padding: 5px;
17
+ display: inline-flex;
18
+ align-items: center;
19
+ gap: 8px;
20
+ }
21
+
22
+ .cometchat-special-mentions-list .cometchat-special-mentions-list__item .cometchat-special-mentions-list__item-name .cometchat-special-mentions-list__item-name-subtext{
23
+ color: var(--cometchat-neutral-color-700);
24
+ font: var(--cometchat-font-body-regular);
25
+ }
package/dist/styles/components/index.css CHANGED
@@ -62,6 +62,8 @@
62
62
  @import url('./CometChatAIAssistantChatHistory.css');
63
63
  @import url('./CometChatErrorView.css');
64
64
  @import url('./CometChatMessagePreview.css');
65
+ @import url('./CometChatFlagMessageDialog.css');
66
+ @import url('./CometChatUserMemberWrapper.css');
65
67
  /* @import url('./CometChatToolCallResultBubble.css');
66
68
  @import url('./CometChatToolCallArgumentBubble.css'); */
67
69
  .cometchat * {
package/dist/styles/index.css CHANGED
@@ -62,6 +62,8 @@
62
62
  @import url('./CometChatAIAssistantChatHistory.css');
63
63
  @import url('./CometChatErrorView.css');
64
64
  @import url('./CometChatMessagePreview.css');
65
+ @import url('./CometChatFlagMessageDialog.css');
66
+ @import url('./CometChatUserMemberWrapper.css');
65
67
  /* @import url('./CometChatToolCallResultBubble.css');
66
68
  @import url('./CometChatToolCallArgumentBubble.css'); */
67
69
  .cometchat * {
package/dist/types/components/CometChatConversations/useCometChatConversations.d.ts CHANGED
@@ -17,6 +17,7 @@ type Args = {
17
17
  activeConversation: Conversation | null;
18
18
  setActiveConversationState: React.Dispatch<React.SetStateAction<Conversation | null>>;
19
19
  hideUserStatus?: boolean;
20
+ hideConversation: (conversationsRequest: CometChat.ConversationsRequest | null, message: CometChat.BaseMessage) => boolean;
20
21
  };
21
22
  export declare function useCometChatConversations(args: Args): void;
22
23
  export {};