stream-chat-react 14.0.0-beta.3 → 14.0.0-beta.5

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

@@ -1,3 +0,0 @@
-.str-chat__ai-state-indicator-container {
-  padding: 0 8px;
-}

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

@@ -1,7 +0,0 @@
-.str-chat__ai-state-indicator-container {
-  background-color: var(--str-chat__grey300);
-}
-
-.str-chat__ai-state-indicator-text {
-  color: var(--str-chat__text-color);
-}

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

@@ -1,701 +0,0 @@
-@use '../utils';
-
-.str-chat {
-  /* The margin applied to every attachment in the attachment list */
-  --str-chat__attachment-margin: var(--str-chat__spacing-0_5);
-
-  /* The height of GIFs */
-  --str-chat__gif-height: calc(var(--str-chat__spacing-px) * 200);
-
-  /* The width of the amplitude bar of the voice recording wave data */
-  --str-chat__voice-recording-amplitude-bar-width: 2px;
-
-  /* The gap between amplitudes of the wave data of a voice recording */
-  --str-chat__voice-recording-amplitude-bar-gap-width: var(--str-chat__spacing-px);
-}
-
-.str-chat__attachment-list {
-  /* The maximum allowed width and height of attachments, in case of gallery images this is the maximum size of the whole gallery (not just for a single image inside the gallery). There are some constraints for the acceptable values you can provide for this variable, [Angular documentation](https://getstream.io/chat/docs/sdk/angular/components/AttachmentListComponent/#maximum-size), [React documentation](https://getstream.io/chat/docs/sdk/react/message-components/attachment/#image-and-video-sizing). */
-  --str-chat__attachment-max-width: calc(
-    var(--str-chat__message-max-width) - calc(2 * var(--str-chat__attachment-margin))
-  );
-
-  /* The maximum height of videos, the default value is the mase as `--str-chat__attachment-max-width`. The rendered video can be smaller based on the aspect ratio */
-  --str-chat__video-height: var(--str-chat__attachment-max-width);
-
-  /* The height of scraped images, the default value is optimized for 1.91:1 aspect ratio */
-  --str-chat__scraped-image-height: calc(var(--str-chat__attachment-max-width) * calc(1 / 1.91));
-
-  /* The height of scraped videos, the default value is optimized for 16:9 aspect ratio */
-  --str-chat__scraped-video-height: calc(var(--str-chat__attachment-max-width) * calc(9 / 16));
-
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  min-width: 0;
-
-  .str-chat__message-attachment--card {
-    .str-chat__message-attachment-card--header {
-      position: relative;
-    }
-
-    .str-chat__message-attachment-card--source-link {
-      padding-bottom: var(--str-chat__spacing-2);
-    }
-
-    .str-chat__message-attachment-card--text {
-      @include utils.ellipsis-text();
-    }
-  }
-
-  .str-chat__message-attachment--image,
-  .str-chat__message-attachment--video,
-  .str-chat__message-attachment-card--header {
-    width: auto;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    overflow: hidden;
-  }
-
-  // Scraped images
-  .str-chat__message-attachment-card--header {
-    height: var(--str-chat__scraped-image-height);
-
-    img {
-      object-fit: cover;
-      max-height: 100%;
-      max-width: 100%;
-      width: 100%;
-      height: 100%;
-      cursor: default;
-    }
-  }
-
-  // image enlargement available in React SDK only
-  .str-chat__message-attachment-card-react--header {
-    img {
-      cursor: zoom-in;
-    }
-  }
-
-  .str-chat__message-attachment-card--giphy {
-    .str-chat__message-attachment-card--header {
-      height: var(--str-chat__gif-height);
-
-      img {
-        object-fit: contain;
-        max-height: 100%;
-        max-width: 100%;
-        cursor: default;
-      }
-    }
-
-    // image enlargement available in React SDK only
-    .str-chat__message-attachment-card-react--header {
-      img {
-        cursor: zoom-in;
-      }
-    }
-  }
-
-  // Images uploaded from files
-  .str-chat__message-attachment--image:not(.str-chat__message-attachment--card) > img {
-    @include utils.clamped-height-from-original-image-dimensions(
-      '--str-chat__attachment-max-width',
-      '--str-chat__attachment-max-width'
-    );
-
-    // CDN resize requires max-width and height/max-height to be present on this element
-    max-width: var(--str-chat__attachment-max-width);
-    max-height: var(--str-chat__attachment-max-width);
-    object-fit: cover;
-    width: 100%;
-    cursor: zoom-in;
-  }
-
-  // Video files: uploaded from files and scraped
-  .str-chat__message-attachment--video:not(.str-chat__message-attachment--card),
-  .str-chat__message-attachment-card--video .str-chat__message-attachment-card--header {
-    $maxWidth: var(--str-chat__attachment-max-width);
-    max-width: $maxWidth;
-    display: flex;
-
-    .str-chat__player-wrapper {
-      height: 100%;
-      width: 100%;
-      min-width: 0;
-      // CDN resize requires max-width to be present on this element - React
-      max-width: $maxWidth;
-      display: flex;
-      flex-direction: column;
-
-      .react-player,
-      .str-chat__video-angular {
-        height: 100%;
-        width: 100%;
-        // CDN resize requires max-width to be present on this element - Angular
-        max-width: $maxWidth;
-        max-height: 100%;
-        min-height: 0;
-      }
-    }
-  }
-
-  .str-chat__message-attachment--video:not(.str-chat__message-attachment--card):not(.str-chat__message-attachment-dynamic-size) {
-    height: var(--str-chat__video-height);
-  }
-
-  .str-chat__message-attachment--video.str-chat__message-attachment-dynamic-size:not(.str-chat__message-attachment--card) {
-    $maxHeight: var(--str-chat__video-height);
-
-    max-height: $maxHeight;
-
-    .str-chat__player-wrapper {
-      @include utils.clamped-height-from-original-image-dimensions(
-        '--str-chat__video-height',
-        '--str-chat__attachment-max-width'
-      );
-      // CDN resize requires max-height to be present on this element - React
-      max-height: $maxHeight;
-    }
-
-    .str-chat__video-angular {
-      // CDN resize requires max-height to be present on this element - Angular
-      max-height: $maxHeight;
-    }
-  }
-
-  .str-chat__message-attachment-card--video .str-chat__message-attachment-card--header {
-    height: var(--str-chat__scraped-video-height);
-  }
-
-  .str-chat__message-attachment--video:not(.str-chat__message-attachment--card),
-  .str-chat__message-attachment--image:not(.str-chat__message-attachment--card) {
-    margin: var(--str-chat__attachment-margin);
-  }
-
-  .str-chat__message-attachment--gallery {
-    $max-width: var(--str-chat__attachment-max-width);
-    margin: var(--str-chat__attachment-margin);
-
-    .str-chat__gallery {
-      display: grid;
-      grid-template-columns: 50% 50%;
-      overflow: hidden;
-      // Safari needs this
-      width: fit-content;
-      gap: var(--str-chat__spacing-0_5);
-      max-width: $max-width;
-      // CDN resize requires height/max-height to be present on the img element, this rule ensures that
-      height: var(--str-chat__attachment-max-width);
-
-      &.str-chat__gallery-two-rows {
-        grid-template-rows: 50% 50%;
-      }
-
-      .str-chat__gallery-image {
-        padding: 0;
-        margin: 0;
-        position: relative;
-
-        img {
-          width: 100%;
-          height: 100%;
-          object-fit: cover;
-          cursor: zoom-in;
-          // CDN resize requires max-width to be present on this element
-          max-width: $max-width;
-        }
-      }
-
-      .str-chat__gallery-placeholder {
-        position: relative;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background-size: cover;
-        background-position: top left;
-        background-repeat: no-repeat;
-        margin: 0;
-        cursor: zoom-in;
-        // CDN resize requires max-width to be present on this element
-        max-width: $max-width;
-
-        p {
-          position: relative;
-          z-index: 1;
-        }
-
-        &::after {
-          content: '';
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          z-index: 0;
-        }
-      }
-    }
-  }
-
-  .str-chat__gallery .str-chat__message-attachment--svg-image,
-  .str-chat__message-attachment--image.str-chat__message-attachment--svg-image {
-    $padding: var(--str-chat__spacing-6);
-    padding: $padding;
-
-    img {
-      object-fit: contain;
-      // CDN resize requires max-width and height/max-height to be present on this element
-      max-width: calc(var(--str-chat__attachment-max-width) - #{$padding});
-      max-height: calc(var(--str-chat__attachment-max-width) - #{$padding});
-    }
-  }
-
-  .str-chat__message-attachment-unsupported {
-    @include utils.flex-row-center;
-    padding: var(--str-chat__spacing-2);
-    column-gap: var(--str-chat__spacing-4);
-    margin: var(--str-chat__attachment-margin);
-
-    .str-chat__file-icon {
-      width: calc(var(--str-chat__spacing-px) * 30);
-    }
-
-    .str-chat__message-attachment-unsupported__metadata {
-      min-width: 0;
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      justify-content: center;
-    }
-
-    .str-chat__message-attachment-unsupported__title {
-      @include utils.ellipsis-text;
-      max-width: 100%;
-    }
-  }
-
-  .str-chat__message-attachment-file--item,
-  .str-chat__message-attachment-audio-widget {
-    @include utils.flex-row-center;
-    padding: var(--str-chat__spacing-2);
-    column-gap: var(--str-chat__spacing-4);
-    margin: var(--str-chat__attachment-margin);
-
-    .str-chat__message-attachment-file--item-text,
-    .str-chat__message-attachment-audio-widget--text {
-      width: 100%;
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      justify-content: center;
-      row-gap: var(--str-chat__spacing-0_5);
-      min-width: 0;
-
-      .str-chat__message-attachment-file--item-first-row,
-      .str-chat__message-attachment-audio-widget--text-first-row {
-        width: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        column-gap: var(--str-chat__spacing-2);
-
-        .str-chat__message-attachment-file--item-name,
-        .str-chat__message-attachment-audio-widget--title {
-          @include utils.ellipsis-text;
-          min-width: 0;
-        }
-
-        .str-chat__message-attachment-download-icon {
-          svg {
-            width: calc(var(--str-chat__spacing-px) * 24);
-            height: calc(var(--str-chat__spacing-px) * 16);
-          }
-        }
-      }
-    }
-  }
-
-  .str-chat__message-attachment-file--item {
-    .str-chat__file-icon {
-      width: calc(var(--str-chat__spacing-px) * 34);
-    }
-  }
-
-  .str-chat__message-attachment-geolocation {
-    margin: var(--str-chat__attachment-margin);
-    min-width: 200px;
-
-    .str-chat__message-attachment-geolocation__placeholder {
-      position: relative;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      padding: var(--str-chat__spacing-2);
-
-      .str-chat__message-geolocation__icon {
-        height: calc(var(--str-chat__spacing-px) *150);
-      }
-
-      .str-chat__message-attachment-geolocation__placeholder-link {
-        position: absolute;
-        inset-inline-end: 0.75rem;
-        inset-block: 0.75rem;
-        height: calc(var(--str-chat__spacing-px) * 20);
-        width: calc(var(--str-chat__spacing-px) * 20);
-      }
-    }
-
-    .str-chat__message-attachment-geolocation__status {
-      display: flex;
-      justify-content: center;
-      padding: 0.5rem 2rem;
-
-      .str-chat__message-attachment-geolocation__status--active {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: 0.375rem;
-
-        .str-chat__message-attachment-geolocation__stop-sharing-button {
-          color: var(--str-chat__danger-color);
-        }
-
-        .str-chat__message-attachment-geolocation__status--active-status {
-          color: var(--str-chat__info-color);
-        }
-
-        .str-chat__message-attachment-geolocation__status--active-until {
-          text-transform: lowercase;
-        }
-      }
-    }
-  }
-
-  .str-chat__message-attachment-audio-widget {
-    .str-chat__message-attachment-audio-widget--play-controls {
-      @include utils.flex-row-center();
-    }
-
-    .str-chat__message-attachment-audio-widget--progress-track {
-      max-width: calc(var(--str-chat__spacing-px) * 120);
-    }
-
-    .str-chat__message-attachment-audio-widget--text-second-row {
-      display: flex;
-      align-items: center;
-      width: 100%;
-      grid-column-gap: var(--str-chat__spacing-5);
-      padding-top: var(--str-chat__spacing-2_5);
-
-      .str-chat__message-attachment-file--item-size {
-        line-height: calc(var(--str-chat__spacing-px) * 14);
-      }
-    }
-  }
-
-  .str-chat__message-attachment-audio-widget--progress-track {
-    position: relative;
-    height: calc(var(--str-chat__spacing-px) * 5);
-    flex: 1;
-    cursor: pointer;
-
-    .str-chat__message-attachment-audio-widget--progress-indicator {
-      position: absolute;
-      inset-inline-start: 0;
-      height: inherit;
-    }
-  }
-
-  .str-chat__message-attachment__voice-recording-widget {
-    display: grid;
-    grid-template-columns: 36px auto 55px;
-    align-items: center;
-    justify-content: center;
-    gap: calc(var(--str-chat__spacing-px) * 9);
-    padding: var(--str-chat__spacing-2);
-    margin: var(--str-chat__attachment-margin);
-
-    .str-chat__message-attachment__voice-recording-widget__metadata {
-      flex: 1;
-      min-width: 0;
-      display: flex;
-      flex-direction: column;
-      gap: var(--str-chat__spacing-2);
-
-      a {
-        cursor: pointer;
-        text-decoration: none;
-      }
-
-      .str-chat__message-attachment-voice-recording-widget--first-row {
-        @include utils.ellipsis-text-parent;
-
-        width: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: var(--str-chat__spacing-1);
-      }
-
-      .str-chat__message-attachment__voice-recording-widget__title {
-        @include utils.ellipsis-text;
-        min-width: 0;
-      }
-
-      .str-chat__message-attachment-download-icon {
-        svg {
-          width: calc(var(--str-chat__spacing-px) * 24);
-          height: calc(var(--str-chat__spacing-px) * 16);
-        }
-      }
-
-      .str-chat__message-attachment__voice-recording-widget__audio-state {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: var(--str-chat__spacing-1_5);
-        height: 100%;
-      }
-
-      .str-chat__message-attachment__voice-recording-widget__error-message {
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        gap: var(--str-chat__spacing-1);
-      }
-    }
-
-    .str-chat__message-attachment__voice-recording-widget__right-section {
-      justify-self: center;
-    }
-
-    .str-chat__message-attachment__voice-recording-widget__timer {
-      min-width: calc(var(--str-chat__spacing-px) * 45);
-      width: calc(var(--str-chat__spacing-px) * 45);
-    }
-
-    // Angular SDK element, do not remove
-    stream-voice-recording-wavebar {
-      flex: 1;
-    }
-
-    .str-chat__wave-progress-bar__track {
-      $min_amplitude_height: 2px;
-      position: relative;
-      flex: 1;
-      width: 100%;
-      height: calc(var(--str-chat__spacing-px) * 25);
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: var(--str-chat__voice-recording-amplitude-bar-gap-width);
-
-      .str-chat__wave-progress-bar__amplitude-bar {
-        width: var(--str-chat__voice-recording-amplitude-bar-width);
-        min-width: var(--str-chat__voice-recording-amplitude-bar-width);
-        height: calc(
-          var(--str-chat__wave-progress-bar__amplitude-bar-height) + #{$min_amplitude_height}
-        ); // variable set dynamically on element
-      }
-
-      .str-chat__wave-progress-bar__progress-indicator {
-        position: absolute;
-        left: 0;
-        height: calc(100% + #{$min_amplitude_height} + 2px);
-        width: calc(var(--str-chat__spacing-px) * 6);
-      }
-    }
-  }
-
-  .str-chat__message_attachment__playback-rate-button {
-    @include utils.flex-row-center;
-    @include utils.button-reset;
-    padding: var(--str-chat__spacing-1_5) var(--str-chat__spacing-2_5);
-  }
-
-  .str-chat__message-attachment-card {
-    min-width: 0;
-    max-width: var(--str-chat__attachment-max-width);
-    margin: var(--str-chat__attachment-margin);
-
-    .str-chat__message-attachment-card--content {
-      padding: var(--str-chat__spacing-2_5);
-
-      .str-chat__message-attachment-card--title {
-        @include utils.ellipsis-text;
-      }
-    }
-  }
-
-  .str-chat__message-attachment-card--audio {
-    .str-chat__message-attachment-card--content {
-      padding: 0;
-
-      .str-chat__message-attachment-card-audio-widget {
-        display: flex;
-        flex-direction: column;
-        row-gap: var(--str-chat__spacing-2_5);
-        width: 100%;
-        padding: var(--str-chat__spacing-2);
-
-        .str-chat__message-attachment-card-audio-widget--first-row {
-          display: flex;
-          align-items: center;
-          column-gap: var(--str-chat__spacing-3_5);
-        }
-      }
-    }
-  }
-
-  .str-chat__message-attachment-actions {
-    .str-chat__message-attachment-actions-form {
-      display: flex;
-      justify-content: stretch;
-
-      .str-chat__message-attachment-actions-button {
-        cursor: pointer;
-        width: 100%;
-        padding: var(--str-chat__spacing-3) var(--str-chat__spacing-4);
-        white-space: nowrap;
-      }
-    }
-  }
-
-  .str-chat__message-attachment-with-actions.str-chat__message-attachment--giphy {
-    .str-chat__message-attachment-card {
-      .str-chat__message-attachment-card--content {
-        display: none;
-      }
-    }
-  }
-
-  /* Angular has different UI here, the download icon is too small to use on mobile */
-  .str-chat-angular__message-attachment-file-single
-    .str-chat__message-attachment-file--item-first-row {
-    cursor: pointer;
-    text-decoration: none;
-  }
-
-  .str-chat__message-attachment-download-icon {
-    --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 16);
-  }
-
-  .str-chat__attachment-type-icon {
-    --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 37);
-  }
-}
-
-.str-chat__message-attachment-audio-widget--play-button {
-  --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 24);
-  @include utils.flex-row-center();
-  height: calc(var(--str-chat__spacing-px) * 36);
-  width: calc(var(--str-chat__spacing-px) * 36);
-  cursor: pointer;
-
-  svg {
-    width: var(--str-chat__spacing-3);
-  }
-}
-
-.str-chat__quoted-message-preview {
-  /* stylelint-disable-next-line length-zero-no-unit */
-  --str-chat__attachment-margin: 0px;
-
-  * {
-    cursor: pointer !important;
-  }
-
-  .str-chat__message-attachment-card {
-    .str-chat__message-attachment-card--source-link,
-    .str-chat__message-attachment-card--content {
-      display: none;
-    }
-  }
-
-  .str-chat__message-attachment__voice-recording-widget {
-    display: flex;
-    justify-content: space-between;
-
-    .str-chat__wave-progress-bar__track {
-      display: none;
-    }
-
-    .str-chat__message-attachment-audio-widget--play-button {
-      display: none;
-    }
-  }
-
-  .str-chat__message-attachment-file--item-download {
-    display: none;
-  }
-}
-
-.str-chat__message {
-  .str-chat__quoted-message-preview {
-    .str-chat__message-attachment-file--item {
-      padding: 0;
-    }
-  }
-}
-
-.str-chat__audio_recorder__waveform-box,
-.str-chat__wave-progress-bar__track {
-  $min_amplitude_height: 2px;
-  position: relative;
-  flex: 1;
-  width: 120px;
-  height: calc(var(--str-chat__spacing-px) * 25);
-  display: flex;
-  align-items: center;
-  gap: var(--str-chat__spacing-px);
-
-  .str-chat__wave-progress-bar__amplitude-bar {
-    width: 2px;
-    min-width: 2px;
-    height: calc(
-      var(--str-chat__wave-progress-bar__amplitude-bar-height) + $min_amplitude_height
-    ); // variable set dynamically on element
-  }
-
-  .str-chat__wave-progress-bar__progress-indicator {
-    position: absolute;
-    left: 0;
-    height: calc(100% + $min_amplitude_height + 2px);
-    width: calc(var(--str-chat__spacing-px) * 6);
-  }
-}
-
-.str-chat__attachment-list-angular-host {
-  min-width: 0;
-
-  .str-chat__message-attachment-card--video {
-    width: 100%;
-
-    a {
-      display: block;
-      width: 100%;
-      height: 100%;
-      position: relative;
-
-      .str-chat__message-attachment-card--video-play,
-      stream-icon-placeholder {
-        position: absolute;
-        top: 50%;
-        left: 0;
-        right: 0;
-        margin: auto;
-        transform: translateY(-50%);
-        width: calc(var(--str-chat__spacing-px) * 36);
-        height: calc(var(--str-chat__spacing-px) * 36);
-      }
-
-      img {
-        cursor: pointer;
-      }
-    }
-  }
-}