stream-chat-react 11.15.0 → 11.15.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.
@@ -46,6 +46,7 @@
46
46
  }
47
47
  }
48
48
 
49
+ .str-chat__attachment-preview-voice-recording,
49
50
  .str-chat__attachment-preview-file {
50
51
  display: flex;
51
52
  justify-content: flex-start;
@@ -57,17 +58,10 @@
57
58
  padding: 0 var(--str-chat__spacing-4);
58
59
  column-gap: var(--str-chat__spacing-2);
59
60
 
60
- .str-chat__attachment-preview-file-icon {
61
- @include utils.flex-row-center;
62
-
63
- svg {
64
- height: calc(var(--str-chat__spacing-px) * 37);
65
- width: unset;
66
- }
67
- }
68
-
69
- .str-chat__attachment-preview-file-end {
61
+ .str-chat__attachment-preview-metadata,
62
+ .str-chat__attachment-preview-file-end{
70
63
  @include utils.ellipsis-text-parent;
64
+ flex: 1;
71
65
  display: flex;
72
66
  flex-direction: column;
73
67
  align-items: flex-start;
@@ -77,7 +71,20 @@
77
71
  @include utils.ellipsis-text;
78
72
  max-width: 100%;
79
73
  }
74
+ }
80
75
 
76
+ .str-chat__attachment-preview-file-icon {
77
+ @include utils.flex-row-center;
78
+
79
+ svg {
80
+ height: calc(var(--str-chat__spacing-px) * 37);
81
+ width: unset;
82
+ }
83
+ }
84
+ }
85
+
86
+ .str-chat__attachment-preview-file {
87
+ .str-chat__attachment-preview-file-end {
81
88
  .str-chat__attachment-preview-file-download {
82
89
  line-height: calc(var(--str-chat__spacing-px) * 13);
83
90
 
@@ -107,6 +107,7 @@
107
107
  }
108
108
  }
109
109
 
110
+ .str-chat__attachment-preview-voice-recording,
110
111
  .str-chat__attachment-preview-file {
111
112
  @include utils.component-layer-overrides('attachment-preview-file');
112
113
 
@@ -121,6 +122,21 @@
121
122
  }
122
123
  }
123
124
 
125
+ .str-chat__attachment-preview-file {
126
+ .str-chat__attachment-preview-file-download {
127
+ svg path {
128
+ fill: var(--str-chat__attachment-preview-download-icon-color);
129
+ }
130
+ }
131
+ }
132
+
133
+ .str-chat__attachment-preview-voice-recording {
134
+ .str-chat__recording-timer {
135
+ color: var(--str-chat__text-low-emphasis-color);
136
+ font: var(--str-chat__caption-medium-text);
137
+ }
138
+ }
139
+
124
140
  .str-chat__attachment-preview-delete {
125
141
  svg {
126
142
  background-color: var(--str-chat__attachment-preview-close-icon-background);
@@ -0,0 +1,89 @@
1
+ @use '../utils';
2
+
3
+ .str-chat__audio_recorder-container {
4
+ bottom: 0;
5
+ display: flex;
6
+ align-items: center;
7
+ justify-content: flex-end;
8
+ width: 100%;
9
+ min-height: 3.25rem;
10
+ padding-inline: 1rem;
11
+ }
12
+
13
+ .str-chat__audio_recorder {
14
+ @include utils.flex-row-center;
15
+ gap: 0.375rem;
16
+
17
+ button {
18
+ @include utils.flex-row-center;
19
+ height: 32px;
20
+ width: 32px;
21
+ padding: 0;
22
+ }
23
+
24
+ .str-chat__audio_recorder__cancel-button svg {
25
+ height: 28px;
26
+ }
27
+
28
+ .str-chat__audio_recorder__toggle-playback-button svg {
29
+ height: 16px;
30
+ }
31
+
32
+ .str-chat__audio_recorder__pause-recording-button svg {
33
+ height: 12px;
34
+ }
35
+
36
+ .str-chat__audio_recorder__resume-recording-button svg {
37
+ height: 24px;
38
+ }
39
+
40
+ .str-chat__audio_recorder__stop-button svg {
41
+ height: 12px;
42
+ }
43
+
44
+ .str-chat__audio_recorder__complete-button svg {
45
+ height: 16px;
46
+ }
47
+
48
+ .str-chat__recording-timer {
49
+ display: flex;
50
+ align-items: center;
51
+ width: 3rem;
52
+ }
53
+
54
+ .str-chat__recording-timer--hours {
55
+ width: 3.75rem;
56
+ }
57
+
58
+ .str-chat__wave-progress-bar__track-container {
59
+ padding-block: 0.5rem;
60
+ overflow-x: auto;
61
+ height: fit-content;
62
+ }
63
+
64
+ .str-chat__waveform-box-container {
65
+ flex: 1;
66
+ display: flex;
67
+ align-items: center;
68
+ justify-content: flex-end;
69
+ width: 100%;
70
+ }
71
+
72
+ .str-chat__audio_recorder__waveform-box,
73
+ .str-chat__wave-progress-bar__track {
74
+ display: flex;
75
+ justify-content: flex-end;
76
+ align-items: center;
77
+ flex-wrap: nowrap;
78
+ height: 2rem;
79
+ margin-inline: 1rem;
80
+ }
81
+
82
+ .str-chat__wave-progress-bar__track {
83
+ width: 120px;
84
+ }
85
+
86
+ .str-chat__audio_recorder__waveform-box {
87
+ overflow-x: hidden;
88
+ }
89
+ }
@@ -0,0 +1,51 @@
1
+ @use '../utils';
2
+
3
+ .str-chat__audio_recorder-container {
4
+ background-color: var(--str-chat__background-color);
5
+ }
6
+
7
+ .str-chat__audio_recorder {
8
+ //@include utils.component-layer-overrides('audio-recorder');
9
+
10
+ button {
11
+ @include utils.button-reset;
12
+ cursor: pointer;
13
+
14
+ &:disabled {
15
+ cursor: default;
16
+ }
17
+ }
18
+
19
+ .str-chat__audio_recorder__cancel-button {
20
+ color: var(--str-chat__text-low-emphasis-color);
21
+ }
22
+
23
+ .str-chat__audio_recorder__toggle-playback-button {
24
+ color: var(--str-chat__text-low-emphasis-color);
25
+ }
26
+
27
+ .str-chat__audio_recorder__pause-recording-button,
28
+ .str-chat__audio_recorder__resume-recording-button {
29
+ color: var(--str-chat__danger-color);
30
+ }
31
+
32
+ .str-chat__audio_recorder__pause-recording-button {
33
+ border: 3px solid var(--str-chat__danger-color);
34
+ border-radius: var(--str-chat__border-radius-circle);
35
+ }
36
+
37
+ .str-chat__audio_recorder__stop-button,
38
+ .str-chat__audio_recorder__complete-button {
39
+ border-radius: var(--str-chat__border-radius-circle);
40
+ color: var(--str-chat__on-primary-color);
41
+ background-color: var(--str-chat__primary-color);
42
+
43
+ .str-chat__loading-indicator svg {
44
+ linearGradient {
45
+ stop:last-child {
46
+ stop-color: var(--str-chat__background-color);
47
+ }
48
+ }
49
+ }
50
+ }
51
+ }
@@ -36,10 +36,9 @@
36
36
  .str-chat__channel-preview-end-first-row {
37
37
  display: flex;
38
38
  column-gap: var(--str-chat__spacing-1);
39
- align-items: center;
39
+ align-items: stretch;
40
40
 
41
41
  .str-chat__channel-preview-unread-badge {
42
- height: 100%;
43
42
  display: flex;
44
43
  align-items: center;
45
44
  padding: 0 var(--str-chat__spacing-2);
@@ -50,6 +49,24 @@
50
49
  }
51
50
  }
52
51
 
52
+ .str-chat__channel-preview-end-second-row {
53
+ @include utils.ellipsis-text-parent;
54
+ display: flex;
55
+ column-gap: var(--str-chat__spacing-1);
56
+ align-items: center;
57
+
58
+ .str-chat__channel-preview-messenger--last-message {
59
+ flex: 1;
60
+ }
61
+
62
+ .str-chat__channel-preview-messenger--status {
63
+ svg {
64
+ width: calc(var(--str-chat__spacing-px) * 15);
65
+ height: calc(var(--str-chat__spacing-px) * 15);
66
+ }
67
+ }
68
+ }
69
+
53
70
  .str-chat__channel-preview-messenger--name,
54
71
  .str-chat__channel-preview-messenger--last-message {
55
72
  @include utils.ellipsis-text;
@@ -56,6 +56,12 @@
56
56
 
57
57
  /* Right (left in RTL layout) border of the unread badge */
58
58
  --str-chat__channel-preview-unread-badge-border-inline-end: none;
59
+
60
+ /* The color of the message status indicator icon (only available in Angular) */
61
+ --str-chat__channel-preview-message-status-color: var(--str-chat__primary-color);
62
+
63
+ /* The color of the text that displays the message time (only available in Angular) */
64
+ --str-chat__channel-preview-message-time-color: var(--str-chat__message-secondary-color);
59
65
  }
60
66
 
61
67
  .str-chat__channel-preview {
@@ -90,6 +96,21 @@
90
96
  }
91
97
  }
92
98
  }
99
+
100
+ .str-chat__channel-preview-messenger--status {
101
+ color: var(--str-chat__channel-preview-message-status-color);
102
+
103
+ svg {
104
+ path {
105
+ fill: var(--str-chat__channel-preview-message-status-color);
106
+ }
107
+ }
108
+ }
109
+
110
+ .str-chat__channel-preview-messenger--time {
111
+ color: var(--str-chat__channel-preview-message-time-color);
112
+ font: var(--str-chat__caption-text);
113
+ }
93
114
  }
94
115
 
95
116
  .str-chat__channel-preview-loading {
@@ -76,7 +76,7 @@
76
76
  '. metadata';
77
77
  column-gap: var(--str-chat__spacing-2);
78
78
  grid-template-columns: auto 1fr;
79
- justify-items: start;
79
+ justify-items: flex-start;
80
80
  }
81
81
 
82
82
  &.str-chat__message--me {
@@ -120,7 +120,7 @@
120
120
 
121
121
  .str-chat__message-options {
122
122
  grid-area: options;
123
- align-items: start;
123
+ align-items: flex-start;
124
124
  justify-content: flex-end;
125
125
  flex-direction: row-reverse;
126
126
  width: calc(3 * var(--str-chat__message-options-button-size));
@@ -2,6 +2,7 @@
2
2
 
3
3
  .str-chat__message-input {
4
4
  $send-button-size: calc(var(--str-chat__spacing-px) * 45);
5
+ $start-audio-recording-button-size: calc(var(--str-chat__spacing-px) * 40);
5
6
 
6
7
  @include utils.flex-col-center;
7
8
  width: 100%;
@@ -145,6 +146,19 @@
145
146
  }
146
147
  }
147
148
 
149
+ .str-chat__start-recording-audio-button {
150
+ @include utils.flex-row-center;
151
+ cursor: pointer;
152
+ padding: 0;
153
+ width: $start-audio-recording-button-size;
154
+ height: $start-audio-recording-button-size;
155
+ min-width: $start-audio-recording-button-size;
156
+
157
+ svg {
158
+ height: calc(var(--str-chat__spacing-px) * 25);
159
+ }
160
+ }
161
+
148
162
  .str-chat__message-input-cooldown {
149
163
  @include utils.flex-row-center;
150
164
  margin-inline-start: var(--str-chat__spacing-2);
@@ -161,6 +175,21 @@
161
175
  .str-chat__quoted-message-preview {
162
176
  padding: var(--str-chat__spacing-2);
163
177
  }
178
+
179
+ .str-chat__recording-permission-denied-notification {
180
+ position: absolute;
181
+ left: 0.5rem;
182
+ max-width: 100%;
183
+ bottom: 100%;
184
+ padding: 1rem;
185
+ margin-inline: 0.5rem;
186
+ z-index: 2;
187
+
188
+ .str-chat__recording-permission-denied-notification__dismiss-button-container {
189
+ display: flex;
190
+ justify-content: flex-end;
191
+ }
192
+ }
164
193
  }
165
194
 
166
195
  .str-chat__message-input-angular-host {
@@ -179,7 +208,7 @@
179
208
  flex-grow: initial;
180
209
  }
181
210
 
182
- [dir='rtl'] .str-chat__send-button {
211
+ [dir='rtl'] .str-chat__send-button, [dir='rtl'] .str-chat__start-recording-audio-button {
183
212
  svg {
184
213
  transform: scale(-1, 1);
185
214
  }
@@ -86,7 +86,37 @@
86
86
  --str-chat__message-send-disabled-color: var(--str-chat__disabled-color);
87
87
 
88
88
  /* The background color of the send button in disabled state */
89
- --str-chat__message-send-disabled-background-color: transparent;
89
+ --str-chat__message-send-disabled-background-color: var(--str-chat__disabled-color);
90
+
91
+ /* The border radius used for the borders of the audio recording button */
92
+ --str-chat__start-recording-audio-button-border-radius: var(--str-chat__border-radius-circle);
93
+
94
+ /* The text/icon color of the audio recording button */
95
+ --str-chat__start-recording-audio-button-color: var(--str-chat__text-low-emphasis-color);
96
+
97
+ /* The background color of the audio recording button */
98
+ --str-chat__start-recording-audio-button-background-color: transparent;
99
+
100
+ /* Top border of the audio recording button */
101
+ --str-chat__start-recording-audio-button-border-block-start: 0;
102
+
103
+ /* Bottom border of the audio recording button */
104
+ --str-chat__start-recording-audio-button-border-block-end: 0;
105
+
106
+ /* Left (right in RTL layout) border of the audio recording button */
107
+ --str-chat__start-recording-audio-button-border-inline-start: 0;
108
+
109
+ /* Right (left in RTL layout) border of the audio recording button */
110
+ --str-chat__start-recording-audio-button-border-inline-end: 0;
111
+
112
+ /* Box shadow applied to the audio recording button */
113
+ --str-chat__start-recording-audio-button-box-shadow: none;
114
+
115
+ /* The color of the audio recording button in disabled state */
116
+ --str-chat__start-recording-audio-button-disabled-color: var(--str-chat__disabled-color);
117
+
118
+ /* The background color of the audio recording button in disabled state */
119
+ --str-chat__start-recording-audio-button-disabled-background-color: transparent;
90
120
 
91
121
  /* The border radius used for the borders of the tool buttons of the message input (such as attachment upload button) */
92
122
  --str-chat__message-input-tools-border-radius: var(--str-chat__border-radius-circle);
@@ -186,7 +216,7 @@
186
216
  }
187
217
 
188
218
  &:disabled {
189
- background-color: var(--str-chat__message-send-disabled-background-color);
219
+ background-color: transparent;
190
220
 
191
221
  svg path {
192
222
  fill: var(--str-chat__message-send-disabled-color);
@@ -194,6 +224,14 @@
194
224
  }
195
225
  }
196
226
 
227
+ .str-chat__start-recording-audio-button {
228
+ @include utils.component-layer-overrides('start-recording-audio-button');
229
+
230
+ &:disabled {
231
+ background-color: var(--str-chat__message-send-disabled-background-color);
232
+ }
233
+ }
234
+
197
235
  .str-chat__message-input-cooldown {
198
236
  @include utils.component-layer-overrides('cooldown');
199
237
  font: var(--str-chat__subtitle-medium-text);
@@ -218,4 +256,26 @@
218
256
  }
219
257
  }
220
258
  }
259
+
260
+ .str-chat__recording-permission-denied-notification {
261
+ background-color: var(--str-chat__text-color);
262
+ border-radius: var(--str-chat__border-radius-md);
263
+ color: var(--str-chat__background-color);
264
+
265
+ .str-chat__recording-permission-denied-notification__heading,
266
+ .str-chat__recording-permission-denied-notification__dismiss-button {
267
+ font: var(--str-chat__subtitle2-medium-text);
268
+ }
269
+
270
+ .str-chat__recording-permission-denied-notification__message {
271
+ font: var(--str-chat__subtitle-text);
272
+ }
273
+
274
+ .str-chat__recording-permission-denied-notification__dismiss-button {
275
+ @include utils.button-reset;
276
+ color: var(--str-chat__background-color);
277
+ cursor: pointer;
278
+ text-transform: uppercase;
279
+ }
280
+ }
221
281
  }
@@ -6,8 +6,8 @@
6
6
  box-sizing: border-box;
7
7
  }
8
8
 
9
- // Overriding styles of ngx-popperjs
10
- .ngxp__container {
9
+ // Overriding styles of ngx-popperjs/ngx-float-ui
10
+ .ngxp__container, .float-ui-container {
11
11
  z-index: 1;
12
12
  padding: 0 !important;
13
13
  box-shadow: none !important;
@@ -6,6 +6,7 @@
6
6
  @use 'AttachmentList/AttachmentList-layout';
7
7
  @use 'AttachmentPreviewList/AttachmentPreviewList-layout';
8
8
  @use 'Autocomplete/Autocomplete-layout';
9
+ @use 'AudioRecorder/AudioRecorder-layout';
9
10
  @use 'BaseImage/BaseImage-layout';
10
11
  @use 'Channel/Channel-layout';
11
12
  @use 'ChannelHeader/ChannelHeader-layout';
@@ -9,6 +9,7 @@
9
9
  @use 'Avatar/Avatar-theme';
10
10
  @use 'AttachmentList/AttachmentList-theme';
11
11
  @use 'AttachmentPreviewList/AttachmentPreviewList-theme';
12
+ @use 'AudioRecorder/AudioRecorder-theme';
12
13
  @use 'Autocomplete/Autocomplete-theme';
13
14
  @use 'BaseImage/BaseImage-theme';
14
15
  @use 'Channel/Channel-theme.scss';
package/dist/version.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- export declare const version = "11.15.0";
1
+ export declare const version = "11.15.1";
2
2
  //# sourceMappingURL=version.d.ts.map
package/dist/version.js CHANGED
@@ -1 +1 @@
1
- export var version = '11.15.0';
1
+ export var version = '11.15.1';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "stream-chat-react",
3
- "version": "11.15.0",
3
+ "version": "11.15.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/",
@@ -148,7 +148,7 @@
148
148
  "@semantic-release/changelog": "^6.0.2",
149
149
  "@semantic-release/git": "^10.0.1",
150
150
  "@stream-io/rollup-plugin-node-builtins": "^2.1.5",
151
- "@stream-io/stream-chat-css": "^4.9.1",
151
+ "@stream-io/stream-chat-css": "^4.14.0",
152
152
  "@testing-library/jest-dom": "^6.1.4",
153
153
  "@testing-library/react": "^13.1.1",
154
154
  "@testing-library/react-hooks": "^8.0.0",