stream-chat-react 11.15.0 → 11.15.2

package/dist/scss/v2/AttachmentPreviewList/AttachmentPreviewList-layout.scss

@@ -46,6 +46,7 @@
     }
   }
 
+  .str-chat__attachment-preview-voice-recording,
   .str-chat__attachment-preview-file {
     display: flex;
     justify-content: flex-start;
@@ -57,17 +58,10 @@
     padding: 0 var(--str-chat__spacing-4);
     column-gap: var(--str-chat__spacing-2);
 
-    .str-chat__attachment-preview-file-icon {
-      @include utils.flex-row-center;
-
-      svg {
-        height: calc(var(--str-chat__spacing-px) * 37);
-        width: unset;
-      }
-    }
-
-    .str-chat__attachment-preview-file-end {
+    .str-chat__attachment-preview-metadata,
+    .str-chat__attachment-preview-file-end{
       @include utils.ellipsis-text-parent;
+      flex: 1;
       display: flex;
       flex-direction: column;
       align-items: flex-start;
@@ -77,7 +71,20 @@
         @include utils.ellipsis-text;
         max-width: 100%;
       }
+    }
 
+    .str-chat__attachment-preview-file-icon {
+      @include utils.flex-row-center;
+
+      svg {
+        height: calc(var(--str-chat__spacing-px) * 37);
+        width: unset;
+      }
+    }
+  }
+
+  .str-chat__attachment-preview-file {
+    .str-chat__attachment-preview-file-end {
       .str-chat__attachment-preview-file-download {
         line-height: calc(var(--str-chat__spacing-px) * 13);
 

package/dist/scss/v2/AttachmentPreviewList/AttachmentPreviewList-theme.scss

@@ -107,6 +107,7 @@
     }
   }
 
+  .str-chat__attachment-preview-voice-recording,
   .str-chat__attachment-preview-file {
     @include utils.component-layer-overrides('attachment-preview-file');
 
@@ -121,6 +122,21 @@
     }
   }
 
+  .str-chat__attachment-preview-file {
+    .str-chat__attachment-preview-file-download {
+      svg path {
+        fill: var(--str-chat__attachment-preview-download-icon-color);
+      }
+    }
+  }
+
+  .str-chat__attachment-preview-voice-recording {
+    .str-chat__recording-timer {
+      color: var(--str-chat__text-low-emphasis-color);
+      font: var(--str-chat__caption-medium-text);
+    }
+  }
+
   .str-chat__attachment-preview-delete {
     svg {
       background-color: var(--str-chat__attachment-preview-close-icon-background);

package/dist/scss/v2/AudioRecorder/AudioRecorder-layout.scss

@@ -0,0 +1,89 @@
+@use '../utils';
+
+.str-chat__audio_recorder-container {
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  width: 100%;
+  min-height: 3.25rem;
+  padding-inline: 1rem;
+}
+
+.str-chat__audio_recorder {
+  @include utils.flex-row-center;
+  gap: 0.375rem;
+
+  button {
+    @include utils.flex-row-center;
+    height: 32px;
+    width: 32px;
+    padding: 0;
+  }
+
+  .str-chat__audio_recorder__cancel-button svg {
+    height: 28px;
+  }
+
+  .str-chat__audio_recorder__toggle-playback-button svg {
+    height: 16px;
+  }
+
+  .str-chat__audio_recorder__pause-recording-button svg {
+    height: 12px;
+  }
+
+  .str-chat__audio_recorder__resume-recording-button svg {
+    height: 24px;
+  }
+
+  .str-chat__audio_recorder__stop-button svg {
+    height: 12px;
+  }
+
+  .str-chat__audio_recorder__complete-button svg {
+    height: 16px;
+  }
+
+  .str-chat__recording-timer {
+    display: flex;
+    align-items: center;
+    width: 3rem;
+  }
+
+  .str-chat__recording-timer--hours {
+    width: 3.75rem;
+  }
+
+  .str-chat__wave-progress-bar__track-container {
+    padding-block: 0.5rem;
+    overflow-x: auto;
+    height: fit-content;
+  }
+
+  .str-chat__waveform-box-container {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    width: 100%;
+  }
+
+  .str-chat__audio_recorder__waveform-box,
+  .str-chat__wave-progress-bar__track {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    flex-wrap: nowrap;
+    height: 2rem;
+    margin-inline: 1rem;
+  }
+
+  .str-chat__wave-progress-bar__track {
+    width: 120px;
+  }
+
+  .str-chat__audio_recorder__waveform-box {
+    overflow-x: hidden;
+  }
+}

package/dist/scss/v2/AudioRecorder/AudioRecorder-theme.scss

@@ -0,0 +1,51 @@
+@use '../utils';
+
+.str-chat__audio_recorder-container {
+  background-color: var(--str-chat__background-color);
+}
+
+.str-chat__audio_recorder {
+  //@include utils.component-layer-overrides('audio-recorder');
+
+  button {
+    @include utils.button-reset;
+    cursor: pointer;
+
+    &:disabled {
+      cursor: default;
+    }
+  }
+
+  .str-chat__audio_recorder__cancel-button {
+    color: var(--str-chat__text-low-emphasis-color);
+  }
+
+  .str-chat__audio_recorder__toggle-playback-button {
+    color: var(--str-chat__text-low-emphasis-color);
+  }
+
+  .str-chat__audio_recorder__pause-recording-button,
+  .str-chat__audio_recorder__resume-recording-button {
+    color: var(--str-chat__danger-color);
+  }
+
+  .str-chat__audio_recorder__pause-recording-button {
+    border: 3px solid var(--str-chat__danger-color);
+    border-radius: var(--str-chat__border-radius-circle);
+  }
+
+  .str-chat__audio_recorder__stop-button,
+  .str-chat__audio_recorder__complete-button {
+    border-radius: var(--str-chat__border-radius-circle);
+    color: var(--str-chat__on-primary-color);
+    background-color: var(--str-chat__primary-color);
+
+    .str-chat__loading-indicator svg {
+      linearGradient {
+        stop:last-child {
+          stop-color: var(--str-chat__background-color);
+        }
+      }
+    }
+  }
+}

package/dist/scss/v2/ChannelPreview/ChannelPreview-layout.scss

@@ -36,10 +36,9 @@
     .str-chat__channel-preview-end-first-row {
       display: flex;
       column-gap: var(--str-chat__spacing-1);
-      align-items: center;
+      align-items: stretch;
 
       .str-chat__channel-preview-unread-badge {
-        height: 100%;
         display: flex;
         align-items: center;
         padding: 0 var(--str-chat__spacing-2);
@@ -50,6 +49,24 @@
       }
     }
 
+    .str-chat__channel-preview-end-second-row {
+      @include utils.ellipsis-text-parent;
+      display: flex;
+      column-gap: var(--str-chat__spacing-1);
+      align-items: center;
+
+      .str-chat__channel-preview-messenger--last-message {
+        flex: 1;
+      }
+
+      .str-chat__channel-preview-messenger--status {
+        svg {
+          width: calc(var(--str-chat__spacing-px) * 15);
+          height: calc(var(--str-chat__spacing-px) * 15);
+        }
+      }
+    }
+
     .str-chat__channel-preview-messenger--name,
     .str-chat__channel-preview-messenger--last-message {
       @include utils.ellipsis-text;

package/dist/scss/v2/ChannelPreview/ChannelPreview-theme.scss

@@ -56,6 +56,12 @@
 
   /* Right (left in RTL layout) border of the unread badge */
   --str-chat__channel-preview-unread-badge-border-inline-end: none;
+
+  /* The color of the message status indicator icon (only available in Angular) */
+  --str-chat__channel-preview-message-status-color: var(--str-chat__primary-color);
+
+  /* The color of the text that displays the message time (only available in Angular) */
+  --str-chat__channel-preview-message-time-color: var(--str-chat__message-secondary-color);
 }
 
 .str-chat__channel-preview {
@@ -90,6 +96,21 @@
       }
     }
   }
+
+  .str-chat__channel-preview-messenger--status {
+    color: var(--str-chat__channel-preview-message-status-color);
+
+    svg {
+      path {
+        fill: var(--str-chat__channel-preview-message-status-color);
+      }
+    }
+  }
+
+  .str-chat__channel-preview-messenger--time {
+    color: var(--str-chat__channel-preview-message-time-color);
+    font: var(--str-chat__caption-text);
+  }
 }
 
 .str-chat__channel-preview-loading {

package/dist/scss/v2/Message/Message-layout.scss

@@ -76,7 +76,7 @@
       '. metadata';
     column-gap: var(--str-chat__spacing-2);
     grid-template-columns: auto 1fr;
-    justify-items: start;
+    justify-items: flex-start;
   }
 
   &.str-chat__message--me {
@@ -120,7 +120,7 @@
 
     .str-chat__message-options {
       grid-area: options;
-      align-items: start;
+      align-items: flex-start;
       justify-content: flex-end;
       flex-direction: row-reverse;
       width: calc(3 * var(--str-chat__message-options-button-size));

package/dist/scss/v2/MessageInput/MessageInput-layout.scss

@@ -2,6 +2,7 @@
 
 .str-chat__message-input {
   $send-button-size: calc(var(--str-chat__spacing-px) * 45);
+  $start-audio-recording-button-size: calc(var(--str-chat__spacing-px) * 40);
 
   @include utils.flex-col-center;
   width: 100%;
@@ -145,6 +146,19 @@
     }
   }
 
+  .str-chat__start-recording-audio-button {
+    @include utils.flex-row-center;
+    cursor: pointer;
+    padding: 0;
+    width: $start-audio-recording-button-size;
+    height: $start-audio-recording-button-size;
+    min-width: $start-audio-recording-button-size;
+
+    svg {
+      height: calc(var(--str-chat__spacing-px) * 25);
+    }
+  }
+
   .str-chat__message-input-cooldown {
     @include utils.flex-row-center;
     margin-inline-start: var(--str-chat__spacing-2);
@@ -161,6 +175,21 @@
   .str-chat__quoted-message-preview {
     padding: var(--str-chat__spacing-2);
   }
+
+  .str-chat__recording-permission-denied-notification {
+    position: absolute;
+    left: 0.5rem;
+    max-width: 100%;
+    bottom: 100%;
+    padding: 1rem;
+    margin-inline: 0.5rem;
+    z-index: 2;
+
+    .str-chat__recording-permission-denied-notification__dismiss-button-container {
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
 }
 
 .str-chat__message-input-angular-host {
@@ -179,7 +208,7 @@
   flex-grow: initial;
 }
 
-[dir='rtl'] .str-chat__send-button {
+[dir='rtl'] .str-chat__send-button, [dir='rtl'] .str-chat__start-recording-audio-button {
   svg {
     transform: scale(-1, 1);
   }

package/dist/scss/v2/MessageInput/MessageInput-theme.scss

@@ -86,7 +86,37 @@
   --str-chat__message-send-disabled-color: var(--str-chat__disabled-color);
 
   /* The background color of the send button in disabled state */
-  --str-chat__message-send-disabled-background-color: transparent;
+  --str-chat__message-send-disabled-background-color: var(--str-chat__disabled-color);
+
+  /* The border radius used for the borders of the audio recording button */
+  --str-chat__start-recording-audio-button-border-radius: var(--str-chat__border-radius-circle);
+
+  /* The text/icon color of the audio recording button */
+  --str-chat__start-recording-audio-button-color: var(--str-chat__text-low-emphasis-color);
+
+  /* The background color of the audio recording button */
+  --str-chat__start-recording-audio-button-background-color: transparent;
+
+  /* Top border of the audio recording button */
+  --str-chat__start-recording-audio-button-border-block-start: 0;
+
+  /* Bottom border of the audio recording button */
+  --str-chat__start-recording-audio-button-border-block-end: 0;
+
+  /* Left (right in RTL layout) border of the audio recording button */
+  --str-chat__start-recording-audio-button-border-inline-start: 0;
+
+  /* Right (left in RTL layout) border of the audio recording button */
+  --str-chat__start-recording-audio-button-border-inline-end: 0;
+
+  /* Box shadow applied to the audio recording button */
+  --str-chat__start-recording-audio-button-box-shadow: none;
+
+  /* The color of the audio recording button in disabled state */
+  --str-chat__start-recording-audio-button-disabled-color: var(--str-chat__disabled-color);
+
+  /* The background color of the audio recording button in disabled state */
+  --str-chat__start-recording-audio-button-disabled-background-color: transparent;
 
   /* The border radius used for the borders of the tool buttons of the message input (such as attachment upload button) */
   --str-chat__message-input-tools-border-radius: var(--str-chat__border-radius-circle);
@@ -186,7 +216,7 @@
     }
 
     &:disabled {
-      background-color: var(--str-chat__message-send-disabled-background-color);
+      background-color: transparent;
 
       svg path {
         fill: var(--str-chat__message-send-disabled-color);
@@ -194,6 +224,14 @@
     }
   }
 
+  .str-chat__start-recording-audio-button {
+    @include utils.component-layer-overrides('start-recording-audio-button');
+
+    &:disabled {
+      background-color: var(--str-chat__message-send-disabled-background-color);
+    }
+  }
+
   .str-chat__message-input-cooldown {
     @include utils.component-layer-overrides('cooldown');
     font: var(--str-chat__subtitle-medium-text);
@@ -218,4 +256,26 @@
       }
     }
   }
+
+  .str-chat__recording-permission-denied-notification {
+    background-color: var(--str-chat__text-color);
+    border-radius: var(--str-chat__border-radius-md);
+    color: var(--str-chat__background-color);
+
+    .str-chat__recording-permission-denied-notification__heading,
+    .str-chat__recording-permission-denied-notification__dismiss-button {
+      font: var(--str-chat__subtitle2-medium-text);
+    }
+
+    .str-chat__recording-permission-denied-notification__message {
+      font: var(--str-chat__subtitle-text);
+    }
+
+    .str-chat__recording-permission-denied-notification__dismiss-button {
+      @include utils.button-reset;
+      color: var(--str-chat__background-color);
+      cursor: pointer;
+      text-transform: uppercase;
+    }
+  }
 }

package/dist/scss/v2/_base.scss

@@ -6,8 +6,8 @@
     box-sizing: border-box;
   }
 
-  // Overriding styles of ngx-popperjs
-  .ngxp__container {
+  // Overriding styles of ngx-popperjs/ngx-float-ui
+  .ngxp__container, .float-ui-container {
     z-index: 1;
     padding: 0 !important;
     box-shadow: none !important;

package/dist/scss/v2/index.layout.scss

@@ -6,6 +6,7 @@
 @use 'AttachmentList/AttachmentList-layout';
 @use 'AttachmentPreviewList/AttachmentPreviewList-layout';
 @use 'Autocomplete/Autocomplete-layout';
+@use 'AudioRecorder/AudioRecorder-layout';
 @use 'BaseImage/BaseImage-layout';
 @use 'Channel/Channel-layout';
 @use 'ChannelHeader/ChannelHeader-layout';

package/dist/scss/v2/index.scss

@@ -9,6 +9,7 @@
 @use 'Avatar/Avatar-theme';
 @use 'AttachmentList/AttachmentList-theme';
 @use 'AttachmentPreviewList/AttachmentPreviewList-theme';
+@use 'AudioRecorder/AudioRecorder-theme';
 @use 'Autocomplete/Autocomplete-theme';
 @use 'BaseImage/BaseImage-theme';
 @use 'Channel/Channel-theme.scss';

package/dist/version.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "11.15.0";
+export declare const version = "11.15.2";
 //# sourceMappingURL=version.d.ts.map

package/dist/version.js

@@ -1 +1 @@
-export var version = '11.15.0';
+export var version = '11.15.2';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stream-chat-react",
-  "version": "11.15.0",
+  "version": "11.15.2",
   "description": "React components to create chat conversations or livestream style chat",
   "author": "GetStream",
   "homepage": "https://getstream.io/chat/",
@@ -148,7 +148,7 @@
     "@semantic-release/changelog": "^6.0.2",
     "@semantic-release/git": "^10.0.1",
     "@stream-io/rollup-plugin-node-builtins": "^2.1.5",
-    "@stream-io/stream-chat-css": "^4.9.1",
+    "@stream-io/stream-chat-css": "^4.14.0",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^13.1.1",
     "@testing-library/react-hooks": "^8.0.0",