stream-chat-react 9.4.0 → 9.5.1

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 (32) hide show
  1. package/dist/browser.full-bundle.js +460 -2760
  2. package/dist/browser.full-bundle.js.map +1 -1
  3. package/dist/browser.full-bundle.min.js +4 -4
  4. package/dist/browser.full-bundle.min.js.map +1 -1
  5. package/dist/components/AutoCompleteTextarea/Textarea.d.ts +7 -0
  6. package/dist/components/AutoCompleteTextarea/Textarea.d.ts.map +1 -1
  7. package/dist/components/AutoCompleteTextarea/Textarea.js +10 -1
  8. package/dist/components/Channel/Channel.d.ts.map +1 -1
  9. package/dist/components/Channel/Channel.js +31 -24
  10. package/dist/components/MessageInput/hooks/useAttachments.d.ts.map +1 -1
  11. package/dist/components/MessageInput/hooks/useAttachments.js +8 -1
  12. package/dist/components/MessageInput/hooks/useImageUploads.d.ts.map +1 -1
  13. package/dist/components/MessageInput/hooks/useImageUploads.js +17 -36
  14. package/dist/context/ChannelActionContext.d.ts +1 -1
  15. package/dist/context/ChannelActionContext.d.ts.map +1 -1
  16. package/dist/context/ChannelStateContext.d.ts +1 -1
  17. package/dist/context/DefaultEmoji.d.ts +3 -0
  18. package/dist/context/DefaultEmoji.d.ts.map +1 -0
  19. package/dist/context/DefaultEmoji.js +3 -0
  20. package/dist/context/DefaultEmojiPicker.d.ts +3 -0
  21. package/dist/context/DefaultEmojiPicker.d.ts.map +1 -0
  22. package/dist/context/DefaultEmojiPicker.js +3 -0
  23. package/dist/context/EmojiContext.d.ts.map +1 -1
  24. package/dist/context/EmojiContext.js +2 -58
  25. package/dist/css/index.css +1 -1
  26. package/dist/index.cjs.js +793 -89
  27. package/dist/index.cjs.js.map +1 -1
  28. package/dist/scss/Gallery.scss +6 -0
  29. package/dist/scss/Message.scss +67 -34
  30. package/dist/version.d.ts +1 -1
  31. package/dist/version.js +1 -1
  32. package/package.json +4 -3
package/dist/scss/Gallery.scss CHANGED
@@ -37,6 +37,12 @@
37
37
  }
38
38
  }
39
39
 
40
+ .stream-chat-angular__image-modal-host {
41
+ .str-chat__modal__inner {
42
+ max-width: 80%;
43
+ }
44
+ }
45
+
40
46
  .stream-chat-angular__image-modal {
41
47
  display: flex;
42
48
  justify-content: center;
package/dist/scss/Message.scss CHANGED
@@ -71,13 +71,15 @@
71
71
  &-attachment--img,
72
72
  &-attachment-card,
73
73
  .str-chat__gallery {
74
- border-radius: var(--border-radius) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
74
+ border-radius: var(--border-radius) var(--border-radius) var(--border-radius)
75
+ calc(var(--border-radius-sm) / 2);
75
76
  }
76
77
 
77
78
  &.str-chat__message--has-text.str-chat__message--has-attachment {
78
79
  .str-chat__message-attachment--img,
79
80
  .str-chat__message-attachment-card {
80
- border-radius: var(--border-radius) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
81
+ border-radius: var(--border-radius) var(--border-radius) var(--border-radius)
82
+ calc(var(--border-radius-sm) / 2);
81
83
  }
82
84
  }
83
85
 
@@ -86,24 +88,28 @@
86
88
  .str-chat__message {
87
89
  &-attachment--img,
88
90
  &-attachment-card {
89
- border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
91
+ border-radius: var(--border-radius) var(--border-radius)
92
+ calc(var(--border-radius-sm) / 2) var(--border-radius);
90
93
  }
91
94
  }
92
95
 
93
96
  &.str-chat__message--has-text.str-chat__message--has-attachment {
94
97
  .str-chat__message-attachment--img,
95
98
  .str-chat__message-attachment-card {
96
- border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
99
+ border-radius: var(--border-radius) var(--border-radius)
100
+ calc(var(--border-radius-sm) / 2) var(--border-radius);
97
101
  }
98
102
  }
99
103
 
100
104
  .str-chat__gallery {
101
- border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
105
+ border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2)
106
+ var(--border-radius);
102
107
  }
103
108
 
104
109
  &.str-chat__message--has-text {
105
110
  .str-chat__gallery {
106
- border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
111
+ border-radius: var(--border-radius) var(--border-radius)
112
+ calc(var(--border-radius-sm) / 2) var(--border-radius);
107
113
  }
108
114
  }
109
115
  }
@@ -117,14 +123,16 @@
117
123
  &-attachment--img,
118
124
  &-attachment-card,
119
125
  .str-chat__gallery {
120
- border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
126
+ border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius)
127
+ calc(var(--border-radius-sm) / 2);
121
128
  }
122
129
 
123
130
  &.str-chat__message--has-text.str-chat__message--has-attachment {
124
131
  .str-chat__message-attachment--img,
125
132
  .str-chat__message-attachment-card,
126
133
  .str-chat__gallery {
127
- border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
134
+ border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius)
135
+ calc(var(--border-radius-sm) / 2);
128
136
  }
129
137
  }
130
138
 
@@ -133,7 +141,8 @@
133
141
  &-attachment--img,
134
142
  &-attachment-card,
135
143
  .str-chat__gallery {
136
- border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2) calc(var(--border-radius-sm) / 2) var(--border-radius);
144
+ border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2)
145
+ calc(var(--border-radius-sm) / 2) var(--border-radius);
137
146
  }
138
147
  }
139
148
 
@@ -155,14 +164,16 @@
155
164
  &-attachment--img,
156
165
  &-attachment-card,
157
166
  .str-chat__gallery {
158
- border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
167
+ border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius)
168
+ calc(var(--border-radius-sm) / 2);
159
169
  }
160
170
 
161
171
  &.str-chat__message--has-text.str-chat__message--has-attachment {
162
172
  .str-chat__message-attachment--img,
163
173
  .str-chat__message-attachment-card,
164
174
  .str-chat__gallery {
165
- border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
175
+ border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius)
176
+ calc(var(--border-radius-sm) / 2);
166
177
  }
167
178
  }
168
179
 
@@ -171,7 +182,8 @@
171
182
  &-attachment--img,
172
183
  &-attachment-card,
173
184
  .str-chat__gallery {
174
- border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2) calc(var(--border-radius-sm) / 2) var(--border-radius);
185
+ border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2)
186
+ calc(var(--border-radius-sm) / 2) var(--border-radius);
175
187
  }
176
188
  }
177
189
 
@@ -203,14 +215,16 @@
203
215
  .str-chat__message {
204
216
  &-text {
205
217
  &-inner {
206
- border-radius: var(--border-radius) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
218
+ border-radius: var(--border-radius) var(--border-radius) var(--border-radius)
219
+ calc(var(--border-radius-sm) / 2);
207
220
  }
208
221
  }
209
222
 
210
223
  &--me {
211
224
  .str-chat__message-text {
212
225
  &-inner {
213
- border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
226
+ border-radius: var(--border-radius) var(--border-radius)
227
+ calc(var(--border-radius-sm) / 2) var(--border-radius);
214
228
  }
215
229
  }
216
230
  }
@@ -221,10 +235,12 @@
221
235
  .str-chat__message {
222
236
  &-text {
223
237
  &-inner {
224
- border-radius: var(--border-radius) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
238
+ border-radius: var(--border-radius) var(--border-radius) var(--border-radius)
239
+ calc(var(--border-radius-sm) / 2);
225
240
 
226
241
  &--has-attachment {
227
- border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
242
+ border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius)
243
+ var(--border-radius) calc(var(--border-radius-sm) / 2);
228
244
  }
229
245
  }
230
246
  }
@@ -232,10 +248,12 @@
232
248
  &--me {
233
249
  .str-chat__message-text {
234
250
  &-inner {
235
- border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
251
+ border-radius: var(--border-radius) var(--border-radius)
252
+ calc(var(--border-radius-sm) / 2) var(--border-radius);
236
253
 
237
254
  &--has-attachment {
238
- border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2) calc(var(--border-radius-sm) / 2) var(--border-radius);
255
+ border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2)
256
+ calc(var(--border-radius-sm) / 2) var(--border-radius);
239
257
  }
240
258
  }
241
259
  }
@@ -248,14 +266,16 @@
248
266
  .str-chat__message {
249
267
  &-text {
250
268
  &-inner {
251
- border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
269
+ border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius)
270
+ calc(var(--border-radius-sm) / 2);
252
271
  }
253
272
  }
254
273
 
255
274
  &--me {
256
275
  .str-chat__message-text {
257
276
  &-inner {
258
- border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2) calc(var(--border-radius-sm) / 2) var(--border-radius);
277
+ border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2)
278
+ calc(var(--border-radius-sm) / 2) var(--border-radius);
259
279
 
260
280
  &--has-attachment {
261
281
  margin: 0;
@@ -266,7 +286,8 @@
266
286
  .str-chat__message-attachment-card {
267
287
  margin: 0;
268
288
  padding: 0;
269
- border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2) calc(var(--border-radius-sm) / 2) var(--border-radius);
289
+ border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2)
290
+ calc(var(--border-radius-sm) / 2) var(--border-radius);
270
291
  }
271
292
  }
272
293
  }
@@ -387,7 +408,8 @@
387
408
  }
388
409
 
389
410
  &--has-attachment {
390
- border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
411
+ border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius)
412
+ calc(var(--border-radius-sm) / 2);
391
413
  }
392
414
 
393
415
  /* if text consists of just one emoji */
@@ -477,7 +499,8 @@
477
499
  background: var(--grey-whisper);
478
500
  border-color: transparent;
479
501
  text-align: right;
480
- border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
502
+ border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2)
503
+ var(--border-radius);
481
504
  margin-right: 0; /* set spacing when unfocused */
482
505
 
483
506
  &--focused {
@@ -488,7 +511,8 @@
488
511
  }
489
512
 
490
513
  &--has-attachment {
491
- border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2) calc(var(--border-radius-sm) / 2) var(--border-radius);
514
+ border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2)
515
+ calc(var(--border-radius-sm) / 2) var(--border-radius);
492
516
  }
493
517
 
494
518
  &--is-emoji {
@@ -661,6 +685,11 @@
661
685
  .str-chat__message-attachment-file--item:hover {
662
686
  background: transparent;
663
687
  }
688
+
689
+ // Disable pointer events so that clicking inside quoted message text or attachments doesn't interfere with jump to message
690
+ .quoted-message-inner {
691
+ pointer-events: none;
692
+ }
664
693
  }
665
694
 
666
695
  .str-chat {
@@ -786,7 +815,6 @@
786
815
  color: var(--white);
787
816
  }
788
817
 
789
-
790
818
  &--me {
791
819
  .str-chat__message-simple-reply-button {
792
820
  display: flex;
@@ -955,7 +983,8 @@
955
983
  &:first-of-type {
956
984
  border-bottom: 1px solid var(--grey-gainsboro);
957
985
  border-top: 1px solid var(--grey-gainsboro);
958
- border-radius: var(--border-radius) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
986
+ border-radius: var(--border-radius) var(--border-radius) var(--border-radius)
987
+ calc(var(--border-radius-sm) / 2);
959
988
  }
960
989
  }
961
990
  }
@@ -966,7 +995,8 @@
966
995
 
967
996
  &--me {
968
997
  .str-chat__message-attachment-card {
969
- border-radius: var(--border-radius) var(--border-radius-sm) var(--border-radius-sm) var(--border-radius-sm);
998
+ border-radius: var(--border-radius) var(--border-radius-sm) var(--border-radius-sm)
999
+ var(--border-radius-sm);
970
1000
  }
971
1001
 
972
1002
  .str-chat__message-attachment--file {
@@ -976,7 +1006,8 @@
976
1006
  border-radius: 0 0 calc(var(--border-radius-sm) / 2) var(--border-radius);
977
1007
 
978
1008
  &:first-of-type:not(.str-chat-angular__message-attachment-file-single) {
979
- border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
1009
+ border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2)
1010
+ var(--border-radius);
980
1011
  }
981
1012
  }
982
1013
  }
@@ -993,12 +1024,11 @@
993
1024
  .str-chat__message-actions-box {
994
1025
  right: unset;
995
1026
  left: 100%;
996
- border-radius: var(--border-radius) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
1027
+ border-radius: var(--border-radius) var(--border-radius) var(--border-radius)
1028
+ calc(var(--border-radius-sm) / 2);
997
1029
  }
998
1030
  }
999
1031
  }
1000
-
1001
-
1002
1032
  }
1003
1033
 
1004
1034
  .livestream.str-chat {
@@ -1151,19 +1181,22 @@
1151
1181
  &--reverse {
1152
1182
  right: 100%;
1153
1183
  left: unset;
1154
- border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
1184
+ border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2)
1185
+ var(--border-radius);
1155
1186
  }
1156
1187
  }
1157
1188
 
1158
1189
  .str-chat__message-actions-box--mine {
1159
1190
  right: 100%;
1160
1191
  left: unset;
1161
- border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
1192
+ border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2)
1193
+ var(--border-radius);
1162
1194
 
1163
1195
  &.str-chat__message-actions-box--reverse {
1164
1196
  left: 100%;
1165
1197
  right: unset;
1166
- border-radius: var(--border-radius) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
1198
+ border-radius: var(--border-radius) var(--border-radius) var(--border-radius)
1199
+ calc(var(--border-radius-sm) / 2);
1167
1200
  }
1168
1201
  }
1169
1202
  }
package/dist/version.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- export declare const version = "9.4.0";
1
+ export declare const version = "9.5.1";
2
2
  //# sourceMappingURL=version.d.ts.map
package/dist/version.js CHANGED
@@ -1 +1 @@
1
- export var version = '9.4.0';
1
+ export var version = '9.5.1';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "stream-chat-react",
3
- "version": "9.4.0",
3
+ "version": "9.5.1",
4
4
  "description": "React components to create chat conversations or livestream style chat",
5
5
  "author": "GetStream",
6
6
  "homepage": "https://getstream.io/chat/",
@@ -62,7 +62,7 @@
62
62
  "peerDependencies": {
63
63
  "react": "^18.0.0 || ^17.0.0 || ^16.8.0",
64
64
  "react-dom": "^18.0.0 || ^17.0.0 || ^16.8.0",
65
- "stream-chat": "^6.7.3"
65
+ "stream-chat": "^7.1.0"
66
66
  },
67
67
  "files": [
68
68
  "dist",
@@ -167,7 +167,7 @@
167
167
  "rollup-plugin-visualizer": "^4.2.0",
168
168
  "semantic-release": "^19.0.2",
169
169
  "semantic-release-cli": "^5.4.4",
170
- "stream-chat": "^6.7.3",
170
+ "stream-chat": "^7.1.0",
171
171
  "style-loader": "^2.0.0",
172
172
  "ts-jest": "^26.5.1",
173
173
  "tslib": "2.3.0",
@@ -202,6 +202,7 @@
202
202
  "test": "jest",
203
203
  "types": "tsc --strict",
204
204
  "validate-translations": "node scripts/validate-translations.js",
205
+ "validate-cjs": "node scripts/validate-cjs-bundle.cjs",
205
206
  "semantic-release": "semantic-release",
206
207
  "browse-examples": "ladle serve",
207
208
  "e2e": "playwright test",