stream-chat-react 10.1.1 → 10.1.2
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.
- package/dist/browser.full-bundle.js +163 -159
- package/dist/browser.full-bundle.js.map +1 -1
- package/dist/browser.full-bundle.min.js +1 -1
- package/dist/browser.full-bundle.min.js.map +1 -1
- package/dist/components/ChannelPreview/ChannelPreview.d.ts +0 -2
- package/dist/components/ChannelPreview/ChannelPreview.d.ts.map +1 -1
- package/dist/components/ChannelPreview/hooks/index.d.ts +2 -0
- package/dist/components/ChannelPreview/hooks/index.d.ts.map +1 -0
- package/dist/components/ChannelPreview/hooks/index.js +1 -0
- package/dist/components/ChannelPreview/index.d.ts +1 -0
- package/dist/components/ChannelPreview/index.d.ts.map +1 -1
- package/dist/components/ChannelPreview/index.js +1 -0
- package/dist/components/LoadMore/LoadMorePaginator.d.ts +4 -1
- package/dist/components/LoadMore/LoadMorePaginator.d.ts.map +1 -1
- package/dist/components/Message/hooks/usePinHandler.d.ts.map +1 -1
- package/dist/components/Message/hooks/usePinHandler.js +3 -5
- package/dist/components/MessageInput/index.d.ts +2 -1
- package/dist/components/MessageInput/index.d.ts.map +1 -1
- package/dist/components/MessageInput/index.js +2 -1
- package/dist/components/Tooltip/Tooltip.d.ts +1 -1
- package/dist/components/Tooltip/Tooltip.d.ts.map +1 -1
- package/dist/components/TypingIndicator/TypingIndicator.d.ts +1 -1
- package/dist/components/TypingIndicator/TypingIndicator.d.ts.map +1 -1
- package/dist/components/index.d.ts +2 -2
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +2 -2
- package/dist/css/index.css +1 -1
- package/dist/css/index.css.map +1 -1
- package/dist/index.cjs.js +159 -159
- package/dist/index.cjs.js.map +1 -1
- package/dist/scss/Attachment.scss +5 -3
- package/dist/scss/Message.scss +16 -30
- package/dist/scss/MessageCommerce.scss +1 -1
- package/dist/scss/Thread.scss +39 -2
- package/dist/scss/VirtualMessage.scss +2 -6
- package/dist/stories/edit-message.stories.d.ts.map +1 -1
- package/dist/stories/edit-message.stories.js +0 -4
- package/dist/stories/pin-message.stories.d.ts +2 -0
- package/dist/stories/pin-message.stories.d.ts.map +1 -0
- package/dist/stories/pin-message.stories.js +98 -0
- package/dist/stories/utils.d.ts +1 -1
- package/dist/stories/utils.d.ts.map +1 -1
- package/dist/stories/utils.js +30 -19
- package/dist/version.d.ts +1 -1
- package/dist/version.js +1 -1
- package/package.json +2 -2
- package/dist/components/MessageList/Center.d.ts +0 -3
- package/dist/components/MessageList/Center.d.ts.map +0 -1
- package/dist/components/MessageList/Center.js +0 -6
|
@@ -56,8 +56,7 @@ $video-width: 300px;
|
|
|
56
56
|
max-width: 375px;
|
|
57
57
|
|
|
58
58
|
border-radius: var(--border-radius);
|
|
59
|
-
|
|
60
|
-
padding: 0;
|
|
59
|
+
padding: var(--xs-m) auto var(--xs-m) 0;
|
|
61
60
|
}
|
|
62
61
|
|
|
63
62
|
/** Let giphies stretch their containers */
|
|
@@ -65,10 +64,13 @@ $video-width: 300px;
|
|
|
65
64
|
max-width: unset;
|
|
66
65
|
}
|
|
67
66
|
|
|
67
|
+
.str-chat__message-attachment {
|
|
68
|
+
margin: var(--xs-m) 0 var(--xs-m) auto;
|
|
69
|
+
}
|
|
70
|
+
|
|
68
71
|
&--me {
|
|
69
72
|
.str-chat__message-attachment {
|
|
70
73
|
padding-left: 0;
|
|
71
|
-
margin: var(--xs-m) 0 var(--xs-m) auto;
|
|
72
74
|
}
|
|
73
75
|
}
|
|
74
76
|
}
|
package/dist/scss/Message.scss
CHANGED
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
/* group styling */
|
|
66
66
|
&--top,
|
|
67
67
|
&--single {
|
|
68
|
-
|
|
68
|
+
padding-top: calc(var(--md-p)/2);
|
|
69
69
|
|
|
70
70
|
.str-chat__message {
|
|
71
71
|
&-attachment--img,
|
|
@@ -158,7 +158,7 @@
|
|
|
158
158
|
}
|
|
159
159
|
|
|
160
160
|
&--bottom {
|
|
161
|
-
|
|
161
|
+
padding-bottom: calc(var(--md-p)/2);
|
|
162
162
|
|
|
163
163
|
.str-chat__message {
|
|
164
164
|
&-attachment--img,
|
|
@@ -199,7 +199,7 @@
|
|
|
199
199
|
}
|
|
200
200
|
|
|
201
201
|
&--single {
|
|
202
|
-
|
|
202
|
+
padding-bottom: calc(var(--md-m)/2);
|
|
203
203
|
}
|
|
204
204
|
|
|
205
205
|
&--top,
|
|
@@ -215,16 +215,14 @@
|
|
|
215
215
|
.str-chat__message {
|
|
216
216
|
&-text {
|
|
217
217
|
&-inner {
|
|
218
|
-
border-radius: var(--border-radius) var(--border-radius) var(--border-radius)
|
|
219
|
-
calc(var(--border-radius-sm) / 2);
|
|
218
|
+
border-radius: var(--border-radius) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
|
|
220
219
|
}
|
|
221
220
|
}
|
|
222
221
|
|
|
223
222
|
&--me {
|
|
224
223
|
.str-chat__message-text {
|
|
225
224
|
&-inner {
|
|
226
|
-
border-radius: var(--border-radius) var(--border-radius)
|
|
227
|
-
calc(var(--border-radius-sm) / 2) var(--border-radius);
|
|
225
|
+
border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
|
|
228
226
|
}
|
|
229
227
|
}
|
|
230
228
|
}
|
|
@@ -235,12 +233,10 @@
|
|
|
235
233
|
.str-chat__message {
|
|
236
234
|
&-text {
|
|
237
235
|
&-inner {
|
|
238
|
-
border-radius: var(--border-radius) var(--border-radius) var(--border-radius)
|
|
239
|
-
calc(var(--border-radius-sm) / 2);
|
|
236
|
+
border-radius: var(--border-radius) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
|
|
240
237
|
|
|
241
238
|
&--has-attachment {
|
|
242
|
-
border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius)
|
|
243
|
-
var(--border-radius) calc(var(--border-radius-sm) / 2);
|
|
239
|
+
border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
|
|
244
240
|
}
|
|
245
241
|
}
|
|
246
242
|
}
|
|
@@ -248,12 +244,10 @@
|
|
|
248
244
|
&--me {
|
|
249
245
|
.str-chat__message-text {
|
|
250
246
|
&-inner {
|
|
251
|
-
border-radius: var(--border-radius) var(--border-radius)
|
|
252
|
-
calc(var(--border-radius-sm) / 2) var(--border-radius);
|
|
247
|
+
border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
|
|
253
248
|
|
|
254
249
|
&--has-attachment {
|
|
255
|
-
border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2)
|
|
256
|
-
calc(var(--border-radius-sm) / 2) var(--border-radius);
|
|
250
|
+
border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2) calc(var(--border-radius-sm) / 2) var(--border-radius);
|
|
257
251
|
}
|
|
258
252
|
}
|
|
259
253
|
}
|
|
@@ -266,16 +260,14 @@
|
|
|
266
260
|
.str-chat__message {
|
|
267
261
|
&-text {
|
|
268
262
|
&-inner {
|
|
269
|
-
border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius)
|
|
270
|
-
calc(var(--border-radius-sm) / 2);
|
|
263
|
+
border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
|
|
271
264
|
}
|
|
272
265
|
}
|
|
273
266
|
|
|
274
267
|
&--me {
|
|
275
268
|
.str-chat__message-text {
|
|
276
269
|
&-inner {
|
|
277
|
-
border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2)
|
|
278
|
-
calc(var(--border-radius-sm) / 2) var(--border-radius);
|
|
270
|
+
border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2) calc(var(--border-radius-sm) / 2) var(--border-radius);
|
|
279
271
|
|
|
280
272
|
&--has-attachment {
|
|
281
273
|
margin: 0;
|
|
@@ -286,8 +278,7 @@
|
|
|
286
278
|
.str-chat__message-attachment-card {
|
|
287
279
|
margin: 0;
|
|
288
280
|
padding: 0;
|
|
289
|
-
border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2)
|
|
290
|
-
calc(var(--border-radius-sm) / 2) var(--border-radius);
|
|
281
|
+
border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2) calc(var(--border-radius-sm) / 2) var(--border-radius);
|
|
291
282
|
}
|
|
292
283
|
}
|
|
293
284
|
}
|
|
@@ -301,7 +292,8 @@
|
|
|
301
292
|
align-items: flex-end;
|
|
302
293
|
padding: 0;
|
|
303
294
|
position: relative;
|
|
304
|
-
|
|
295
|
+
padding-top: var(--xxs-p);
|
|
296
|
+
padding-bottom: var(--xxs-p);
|
|
305
297
|
width: 100%;
|
|
306
298
|
transition: background-color 0.5s ease-out;
|
|
307
299
|
|
|
@@ -463,7 +455,6 @@
|
|
|
463
455
|
/* me */
|
|
464
456
|
&--me {
|
|
465
457
|
display: inline-flex;
|
|
466
|
-
margin: var(--xxs-m) 0;
|
|
467
458
|
justify-content: flex-end;
|
|
468
459
|
|
|
469
460
|
.str-chat__message {
|
|
@@ -549,7 +540,7 @@
|
|
|
549
540
|
}
|
|
550
541
|
|
|
551
542
|
&--with-reactions {
|
|
552
|
-
|
|
543
|
+
padding-top: var(--md-p);
|
|
553
544
|
}
|
|
554
545
|
|
|
555
546
|
&--highlighted {
|
|
@@ -578,20 +569,16 @@
|
|
|
578
569
|
.str-chat {
|
|
579
570
|
&__message,
|
|
580
571
|
&__message--me {
|
|
581
|
-
margin: calc(var(--xxs-m) / 2) 0;
|
|
582
|
-
|
|
583
572
|
&--with-reactions {
|
|
584
|
-
|
|
573
|
+
padding-top: var(--lg-p);
|
|
585
574
|
}
|
|
586
575
|
}
|
|
587
576
|
|
|
588
577
|
&__message-attachment--image {
|
|
589
|
-
margin: calc(var(--xxs-m) / 2) 0;
|
|
590
578
|
max-width: 480px;
|
|
591
579
|
}
|
|
592
580
|
|
|
593
581
|
&__message-attachment--card {
|
|
594
|
-
margin: calc(var(--xxs-m) / 2) 0;
|
|
595
582
|
line-height: normal;
|
|
596
583
|
}
|
|
597
584
|
|
|
@@ -945,7 +932,6 @@
|
|
|
945
932
|
}
|
|
946
933
|
|
|
947
934
|
.str-chat__message-attachment--file {
|
|
948
|
-
margin: 0;
|
|
949
935
|
background: var(--white);
|
|
950
936
|
border-color: transparent;
|
|
951
937
|
border: 1px solid var(--grey-gainsboro);
|
package/dist/scss/Thread.scss
CHANGED
|
@@ -10,11 +10,48 @@
|
|
|
10
10
|
flex-direction: column;
|
|
11
11
|
padding-top: 0;
|
|
12
12
|
|
|
13
|
-
.str-
|
|
14
|
-
|
|
13
|
+
.str-chat__virtual-list .str-chat__virtual-list-message-wrapper {
|
|
14
|
+
padding-left: var(--md-p);
|
|
15
|
+
padding-right: var(--md-p);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
&.str-chat__thread-container {
|
|
19
|
+
max-height: 100%;
|
|
15
20
|
display: flex;
|
|
16
21
|
flex-direction: column;
|
|
17
22
|
width: 100%;
|
|
23
|
+
|
|
24
|
+
.str-chat__parent-message-li {
|
|
25
|
+
.str-chat__message {
|
|
26
|
+
padding-left: var(--md-p);
|
|
27
|
+
padding-right: var(--md-p);
|
|
28
|
+
|
|
29
|
+
.str-chat__message-inner {
|
|
30
|
+
min-width: 0;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.str-chat__message-attachment--image,
|
|
34
|
+
.str-chat__message-attachment-card {
|
|
35
|
+
border-radius: var(--border-radius) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) ;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.str-chat__message--me {
|
|
40
|
+
.str-chat__message-attachment--img,
|
|
41
|
+
.str-chat__message-attachment-card {
|
|
42
|
+
border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.str-chat__message--with-reactions {
|
|
47
|
+
padding-top: var(--xl-p);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.str-chat__message:not(.str-chat__message--has-attachment) {
|
|
51
|
+
padding-top: var(--xs-p);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
}
|
|
18
55
|
}
|
|
19
56
|
|
|
20
57
|
&--full {
|
|
@@ -3,12 +3,11 @@
|
|
|
3
3
|
font-size: 0;
|
|
4
4
|
|
|
5
5
|
.str-chat__virtual-list-message-wrapper {
|
|
6
|
-
padding:
|
|
6
|
+
padding-left: var(--xl-p);
|
|
7
|
+
padding-right: var(--xl-p);
|
|
7
8
|
width: 100%;
|
|
8
9
|
|
|
9
10
|
.str-chat__message-simple {
|
|
10
|
-
padding-bottom: var(--sm-p);
|
|
11
|
-
|
|
12
11
|
&.str-chat__virtual-message__wrapper--first {
|
|
13
12
|
padding-bottom: 0;
|
|
14
13
|
padding-left: var(--xl-p);
|
|
@@ -40,7 +39,6 @@
|
|
|
40
39
|
|
|
41
40
|
&.str-chat__virtual-message__wrapper--group {
|
|
42
41
|
align-items: center;
|
|
43
|
-
padding-bottom: 0;
|
|
44
42
|
padding-left: var(--xl-p);
|
|
45
43
|
|
|
46
44
|
&.str-chat__message-simple--me {
|
|
@@ -254,8 +252,6 @@
|
|
|
254
252
|
}
|
|
255
253
|
|
|
256
254
|
.str-chat__virtual-message__wrapper--group {
|
|
257
|
-
padding-top: 0;
|
|
258
|
-
|
|
259
255
|
> .str-chat__avatar {
|
|
260
256
|
display: none;
|
|
261
257
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"edit-message.stories.d.ts","sourceRoot":"","sources":["../../src/stories/edit-message.stories.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"edit-message.stories.d.ts","sourceRoot":"","sources":["../../src/stories/edit-message.stories.tsx"],"names":[],"mappings":"AAoEA,eAAO,MAAM,KAAK,mBAUjB,CAAC"}
|
|
@@ -1,10 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { Channel, ChannelHeader, ChannelList, MessageList, Thread, useChannelStateContext, Window, } from '../index';
|
|
3
3
|
import { ConnectedUser } from './utils';
|
|
4
|
-
var channelId = import.meta.env.E2E_ADD_MESSAGE_CHANNEL;
|
|
5
|
-
if (!channelId || typeof channelId !== 'string') {
|
|
6
|
-
throw new Error('expected ADD_MESSAGE_CHANNEL');
|
|
7
|
-
}
|
|
8
4
|
var Controls = function () {
|
|
9
5
|
var channel = useChannelStateContext().channel;
|
|
10
6
|
return (React.createElement("div", null,
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pin-message.stories.d.ts","sourceRoot":"","sources":["../../src/stories/pin-message.stories.tsx"],"names":[],"mappings":"AA6EA,eAAO,MAAM,KAAK,mBAUjB,CAAC"}
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
2
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
+
});
|
|
9
|
+
};
|
|
10
|
+
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
11
|
+
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
12
|
+
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
13
|
+
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
14
|
+
function step(op) {
|
|
15
|
+
if (f) throw new TypeError("Generator is already executing.");
|
|
16
|
+
while (_) try {
|
|
17
|
+
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
18
|
+
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
19
|
+
switch (op[0]) {
|
|
20
|
+
case 0: case 1: t = op; break;
|
|
21
|
+
case 4: _.label++; return { value: op[1], done: false };
|
|
22
|
+
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
23
|
+
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
24
|
+
default:
|
|
25
|
+
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
26
|
+
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
27
|
+
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
28
|
+
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
29
|
+
if (t[2]) _.ops.pop();
|
|
30
|
+
_.trys.pop(); continue;
|
|
31
|
+
}
|
|
32
|
+
op = body.call(thisArg, _);
|
|
33
|
+
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
34
|
+
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
35
|
+
}
|
|
36
|
+
};
|
|
37
|
+
import React from 'react';
|
|
38
|
+
import { Channel, ChannelHeader, ChannelList, MessageList, Thread, useChannelStateContext, Window, } from '../index';
|
|
39
|
+
import { ConnectedUser } from './utils';
|
|
40
|
+
var PinnedMessagesList = function () {
|
|
41
|
+
var pinnedMessages = useChannelStateContext().pinnedMessages;
|
|
42
|
+
if (!(pinnedMessages === null || pinnedMessages === void 0 ? void 0 : pinnedMessages.length))
|
|
43
|
+
return null;
|
|
44
|
+
return (React.createElement("ul", { "data-testid": 'pinned-messages-list' }, pinnedMessages === null || pinnedMessages === void 0 ? void 0 : pinnedMessages.map(function (pm) { return (React.createElement("li", { key: pm.id }, pm.text)); })));
|
|
45
|
+
};
|
|
46
|
+
var Controls = function () {
|
|
47
|
+
var channel = useChannelStateContext().channel;
|
|
48
|
+
return (React.createElement("div", null,
|
|
49
|
+
React.createElement("button", { "data-testid": 'truncate', onClick: function () { return channel.truncate(); } }, "Truncate"),
|
|
50
|
+
React.createElement("button", { "data-testid": 'add-message', onClick: function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
51
|
+
return __generator(this, function (_a) {
|
|
52
|
+
switch (_a.label) {
|
|
53
|
+
case 0: return [4 /*yield*/, channel.sendMessage({
|
|
54
|
+
text: 'pin-message-0',
|
|
55
|
+
})];
|
|
56
|
+
case 1:
|
|
57
|
+
_a.sent();
|
|
58
|
+
return [4 /*yield*/, channel.sendMessage({
|
|
59
|
+
pinned: true,
|
|
60
|
+
pinned_at: new Date().toISOString(),
|
|
61
|
+
text: 'pin-message-1',
|
|
62
|
+
})];
|
|
63
|
+
case 2:
|
|
64
|
+
_a.sent();
|
|
65
|
+
return [4 /*yield*/, channel.sendMessage({
|
|
66
|
+
text: 'pin-message-2',
|
|
67
|
+
})];
|
|
68
|
+
case 3:
|
|
69
|
+
_a.sent();
|
|
70
|
+
return [2 /*return*/];
|
|
71
|
+
}
|
|
72
|
+
});
|
|
73
|
+
}); } }, "Add message")));
|
|
74
|
+
};
|
|
75
|
+
var App = function (_a) {
|
|
76
|
+
var token = _a.token, userId = _a.userId;
|
|
77
|
+
return (React.createElement(React.Fragment, null,
|
|
78
|
+
React.createElement(ConnectedUser, { token: token, userId: userId },
|
|
79
|
+
React.createElement(ChannelList, { filters: { id: { $eq: 'pin-message-channel' }, members: { $in: [userId] } }, setActiveChannelOnMount: true }),
|
|
80
|
+
React.createElement(Channel, null,
|
|
81
|
+
React.createElement(PinnedMessagesList, null),
|
|
82
|
+
React.createElement(Window, null,
|
|
83
|
+
React.createElement(ChannelHeader, null),
|
|
84
|
+
React.createElement(MessageList, null)),
|
|
85
|
+
React.createElement(Thread, null),
|
|
86
|
+
React.createElement(Controls, null)))));
|
|
87
|
+
};
|
|
88
|
+
export var User1 = function () {
|
|
89
|
+
var userId = import.meta.env.E2E_TEST_USER_1;
|
|
90
|
+
var token = import.meta.env.E2E_TEST_USER_1_TOKEN;
|
|
91
|
+
if (!userId || typeof userId !== 'string') {
|
|
92
|
+
throw new Error('expected TEST_USER_1');
|
|
93
|
+
}
|
|
94
|
+
if (!token || typeof token !== 'string') {
|
|
95
|
+
throw new Error('expected TEST_USER_1_TOKEN');
|
|
96
|
+
}
|
|
97
|
+
return React.createElement(App, { token: token, userId: userId });
|
|
98
|
+
};
|
package/dist/stories/utils.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { PropsWithChildren } from 'react';
|
|
2
2
|
import { DefaultGenerics } from 'stream-chat';
|
|
3
|
-
export declare const
|
|
3
|
+
export declare const streamAPIKey: string;
|
|
4
4
|
declare type LocalAttachmentType = Record<string, unknown>;
|
|
5
5
|
declare type LocalChannelType = Record<string, unknown>;
|
|
6
6
|
declare type LocalCommandType = string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/stories/utils.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,iBAAiB,EAAuB,MAAM,OAAO,CAAC;AAEtE,OAAO,
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/stories/utils.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,iBAAiB,EAAuB,MAAM,OAAO,CAAC;AAEtE,OAAO,EACL,eAAe,EAMhB,MAAM,aAAa,CAAC;AAMrB,eAAO,MAAM,YAAY,QAAS,CAAC;AAEnC,aAAK,mBAAmB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AACnD,aAAK,gBAAgB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAChD,aAAK,gBAAgB,GAAG,MAAM,CAAC;AAC/B,aAAK,cAAc,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAC9C,aAAK,gBAAgB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAChD,aAAK,iBAAiB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AACjD,aAAK,aAAa,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAE7C,oBAAY,kBAAkB,GAAG;IAC/B,cAAc,EAAE,mBAAmB,CAAC;IACpC,WAAW,EAAE,gBAAgB,CAAC;IAC9B,WAAW,EAAE,gBAAgB,CAAC;IAC9B,SAAS,EAAE,cAAc,CAAC;IAC1B,WAAW,EAAE,gBAAgB,CAAC;IAC9B,YAAY,EAAE,iBAAiB,CAAC;IAChC,QAAQ,EAAE,aAAa,CAAC;CACzB,CAAC;AAEF,oBAAY,kBAAkB,GAAG,iBAAiB,CAAC;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC,CAAC;AAoCH,eAAO,MAAM,aAAa,mFAIvB,kBAAkB,gBAiBpB,CAAC"}
|
package/dist/stories/utils.js
CHANGED
|
@@ -1,35 +1,46 @@
|
|
|
1
1
|
import React, { useEffect, useState } from 'react';
|
|
2
2
|
import { Chat } from '../';
|
|
3
|
-
import { StreamChat } from 'stream-chat';
|
|
3
|
+
import { StreamChat, } from 'stream-chat';
|
|
4
4
|
var appKey = import.meta.env.E2E_APP_KEY;
|
|
5
5
|
if (!appKey || typeof appKey !== 'string') {
|
|
6
6
|
throw new Error('expected APP_KEY');
|
|
7
7
|
}
|
|
8
|
-
export var
|
|
9
|
-
|
|
10
|
-
var
|
|
11
|
-
var _b = useState(null),
|
|
8
|
+
export var streamAPIKey = appKey;
|
|
9
|
+
var useClient = function (_a) {
|
|
10
|
+
var apiKey = _a.apiKey, tokenOrProvider = _a.tokenOrProvider, userData = _a.userData;
|
|
11
|
+
var _b = useState(null), chatClient = _b[0], setChatClient = _b[1];
|
|
12
12
|
useEffect(function () {
|
|
13
|
-
var
|
|
14
|
-
var
|
|
15
|
-
|
|
16
|
-
if (!
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
};
|
|
20
|
-
c.on('connection.changed', handleConnectionChange);
|
|
21
|
-
c.connectUser({ id: userId }, token);
|
|
13
|
+
var client = new StreamChat(apiKey);
|
|
14
|
+
var didUserConnectInterrupt = false;
|
|
15
|
+
var connectionPromise = client.connectUser(userData, tokenOrProvider).then(function () {
|
|
16
|
+
if (!didUserConnectInterrupt)
|
|
17
|
+
setChatClient(client);
|
|
18
|
+
});
|
|
22
19
|
return function () {
|
|
23
|
-
|
|
24
|
-
|
|
20
|
+
didUserConnectInterrupt = true;
|
|
21
|
+
setChatClient(null);
|
|
22
|
+
connectionPromise
|
|
23
|
+
.then(function () { return client.disconnectUser(); })
|
|
24
|
+
.then(function () {
|
|
25
|
+
console.log('connection closed');
|
|
26
|
+
});
|
|
25
27
|
};
|
|
26
|
-
|
|
27
|
-
|
|
28
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
29
|
+
}, [apiKey, userData.id, tokenOrProvider]);
|
|
30
|
+
return chatClient;
|
|
31
|
+
};
|
|
32
|
+
export var ConnectedUser = function (_a) {
|
|
33
|
+
var children = _a.children, token = _a.token, userId = _a.userId;
|
|
34
|
+
var client = useClient({
|
|
35
|
+
apiKey: streamAPIKey,
|
|
36
|
+
tokenOrProvider: token,
|
|
37
|
+
userData: { id: userId },
|
|
38
|
+
});
|
|
39
|
+
if (!client)
|
|
28
40
|
return React.createElement("p", null,
|
|
29
41
|
"Waiting for connection to be established with user: ",
|
|
30
42
|
userId,
|
|
31
43
|
"...");
|
|
32
|
-
}
|
|
33
44
|
return (React.createElement(React.Fragment, null,
|
|
34
45
|
React.createElement("h3", null,
|
|
35
46
|
"User: ",
|
package/dist/version.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare const version = "10.1.
|
|
1
|
+
export declare const version = "10.1.2";
|
|
2
2
|
//# sourceMappingURL=version.d.ts.map
|
package/dist/version.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export var version = '10.1.
|
|
1
|
+
export var version = '10.1.2';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "stream-chat-react",
|
|
3
|
-
"version": "10.1.
|
|
3
|
+
"version": "10.1.2",
|
|
4
4
|
"description": "React components to create chat conversations or livestream style chat",
|
|
5
5
|
"author": "GetStream",
|
|
6
6
|
"homepage": "https://getstream.io/chat/",
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"dependencies": {
|
|
31
31
|
"@braintree/sanitize-url": "6.0.0",
|
|
32
32
|
"@popperjs/core": "^2.11.5",
|
|
33
|
-
"@stream-io/stream-chat-css": "3.1.
|
|
33
|
+
"@stream-io/stream-chat-css": "3.1.2",
|
|
34
34
|
"clsx": "^1.1.1",
|
|
35
35
|
"dayjs": "^1.10.4",
|
|
36
36
|
"emoji-mart": "3.0.1",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Center.d.ts","sourceRoot":"","sources":["../../../src/components/MessageList/Center.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAM/D,eAAO,MAAM,MAAM,iBAJqB,qBAAqB,gBAIgB,CAAC"}
|