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.
Files changed (49) hide show
  1. package/dist/browser.full-bundle.js +163 -159
  2. package/dist/browser.full-bundle.js.map +1 -1
  3. package/dist/browser.full-bundle.min.js +1 -1
  4. package/dist/browser.full-bundle.min.js.map +1 -1
  5. package/dist/components/ChannelPreview/ChannelPreview.d.ts +0 -2
  6. package/dist/components/ChannelPreview/ChannelPreview.d.ts.map +1 -1
  7. package/dist/components/ChannelPreview/hooks/index.d.ts +2 -0
  8. package/dist/components/ChannelPreview/hooks/index.d.ts.map +1 -0
  9. package/dist/components/ChannelPreview/hooks/index.js +1 -0
  10. package/dist/components/ChannelPreview/index.d.ts +1 -0
  11. package/dist/components/ChannelPreview/index.d.ts.map +1 -1
  12. package/dist/components/ChannelPreview/index.js +1 -0
  13. package/dist/components/LoadMore/LoadMorePaginator.d.ts +4 -1
  14. package/dist/components/LoadMore/LoadMorePaginator.d.ts.map +1 -1
  15. package/dist/components/Message/hooks/usePinHandler.d.ts.map +1 -1
  16. package/dist/components/Message/hooks/usePinHandler.js +3 -5
  17. package/dist/components/MessageInput/index.d.ts +2 -1
  18. package/dist/components/MessageInput/index.d.ts.map +1 -1
  19. package/dist/components/MessageInput/index.js +2 -1
  20. package/dist/components/Tooltip/Tooltip.d.ts +1 -1
  21. package/dist/components/Tooltip/Tooltip.d.ts.map +1 -1
  22. package/dist/components/TypingIndicator/TypingIndicator.d.ts +1 -1
  23. package/dist/components/TypingIndicator/TypingIndicator.d.ts.map +1 -1
  24. package/dist/components/index.d.ts +2 -2
  25. package/dist/components/index.d.ts.map +1 -1
  26. package/dist/components/index.js +2 -2
  27. package/dist/css/index.css +1 -1
  28. package/dist/css/index.css.map +1 -1
  29. package/dist/index.cjs.js +159 -159
  30. package/dist/index.cjs.js.map +1 -1
  31. package/dist/scss/Attachment.scss +5 -3
  32. package/dist/scss/Message.scss +16 -30
  33. package/dist/scss/MessageCommerce.scss +1 -1
  34. package/dist/scss/Thread.scss +39 -2
  35. package/dist/scss/VirtualMessage.scss +2 -6
  36. package/dist/stories/edit-message.stories.d.ts.map +1 -1
  37. package/dist/stories/edit-message.stories.js +0 -4
  38. package/dist/stories/pin-message.stories.d.ts +2 -0
  39. package/dist/stories/pin-message.stories.d.ts.map +1 -0
  40. package/dist/stories/pin-message.stories.js +98 -0
  41. package/dist/stories/utils.d.ts +1 -1
  42. package/dist/stories/utils.d.ts.map +1 -1
  43. package/dist/stories/utils.js +30 -19
  44. package/dist/version.d.ts +1 -1
  45. package/dist/version.js +1 -1
  46. package/package.json +2 -2
  47. package/dist/components/MessageList/Center.d.ts +0 -3
  48. package/dist/components/MessageList/Center.d.ts.map +0 -1
  49. 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
- margin: var(--xs-m) auto var(--xs-m) 0;
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
  }
@@ -65,7 +65,7 @@
65
65
  /* group styling */
66
66
  &--top,
67
67
  &--single {
68
- margin: 24px 0 0;
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
- margin: 0 0 24px;
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
- margin-bottom: var(--md-m);
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
- margin: calc(var(--xxs-m) / 2) 0;
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
- margin-top: var(--md-m);
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
- margin-top: var(--lg-m);
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);
@@ -176,7 +176,7 @@
176
176
  }
177
177
 
178
178
  &--with-reactions {
179
- margin-top: 30px;
179
+ padding-top: 30px;
180
180
 
181
181
  .str-chat__message-commerce__actions__action--reactions {
182
182
  display: none;
@@ -10,11 +10,48 @@
10
10
  flex-direction: column;
11
11
  padding-top: 0;
12
12
 
13
- .str-chat__thread-container {
14
- height: 100%;
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: 1px var(--xl-p);
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":"AAyEA,eAAO,MAAM,KAAK,mBAUjB,CAAC"}
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,2 @@
1
+ export declare const User1: () => JSX.Element;
2
+ //# sourceMappingURL=pin-message.stories.d.ts.map
@@ -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
+ };
@@ -1,6 +1,6 @@
1
1
  import { PropsWithChildren } from 'react';
2
2
  import { DefaultGenerics } from 'stream-chat';
3
- export declare const apiKey: string;
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,EAAE,eAAe,EAAqB,MAAM,aAAa,CAAC;AAMjE,eAAO,MAAM,MAAM,QAAS,CAAC;AAE7B,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;AAEH,eAAO,MAAM,aAAa,mFAIvB,kBAAkB,gBAiCpB,CAAC"}
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"}
@@ -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 apiKey = appKey;
9
- export var ConnectedUser = function (_a) {
10
- var children = _a.children, token = _a.token, userId = _a.userId;
11
- var _b = useState(null), client = _b[0], setClient = _b[1];
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 c = new StreamChat(apiKey);
14
- var handleConnectionChange = function (_a) {
15
- var _b = _a.online, online = _b === void 0 ? false : _b;
16
- if (!online)
17
- console.log('connection lost');
18
- setClient(c);
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
- c.off('connection.changed', handleConnectionChange);
24
- c.disconnectUser().then(function () { return console.log('connection closed'); });
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
- }, [userId, token]);
27
- if (!client) {
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";
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';
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.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.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,3 +0,0 @@
1
- import type { PropsWithChildrenOnly } from '../../types/types';
2
- export declare const Center: ({ children }: PropsWithChildrenOnly) => JSX.Element;
3
- //# sourceMappingURL=Center.d.ts.map
@@ -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"}
@@ -1,6 +0,0 @@
1
- import React from 'react';
2
- var UnMemoizedCenter = function (_a) {
3
- var children = _a.children;
4
- return (React.createElement("div", { className: 'str-chat__list__center' }, children));
5
- };
6
- export var Center = React.memo(UnMemoizedCenter);