@linktr.ee/messaging-react 4.2.0-rc-1787325521 → 4.2.0-rc-1787599724

package/src/styles.css

@@ -120,6 +120,10 @@
   }
 }
 
+.messaging-channel-layout {
+  --messaging-composer-fade-height: 2rem;
+}
+
 .messaging-composer-chrome--floating {
   position: relative;
   right: 0;
@@ -134,10 +138,21 @@
 
 .messaging-composer-chrome--floating .messaging-composer-backdrop {
   position: absolute;
-  inset: 0;
+  top: calc(-1 * var(--messaging-composer-fade-height));
+  right: 0;
+  bottom: 0;
+  left: 0;
   overflow: hidden;
   isolation: isolate;
   pointer-events: none;
+  /* Frosted band height, from the backdrop's top edge down to the composer
+     pill: the fade-height above the chrome plus the chrome's own top padding
+     (p-4 = 1rem). Blur/gradient stops are anchored to this fixed band so the
+     frosting stays in the gap above the composer and does not scale with the
+     (opaque) composer height. */
+  --messaging-composer-fade-band: calc(
+    var(--messaging-composer-fade-height) + 1rem
+  );
 }
 
 .messaging-composer-backdrop-blur {
@@ -146,71 +161,99 @@
   pointer-events: none;
 }
 
-/* Figma progressive background blur: (50%, 0%) → (50%, 100%), 0 → 16.
-   CSS has no spatially-varying blur, so five evenly spaced masked layers
-   approximate the linear ramp across the full parent height. */
 .messaging-composer-backdrop-blur:nth-child(1) {
-  --messaging-composer-blur-mask: linear-gradient(
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
+  mask: linear-gradient(
     to bottom,
-    transparent 0%,
-    black 20%,
-    transparent 40%
+    transparent 0,
+    black calc(var(--messaging-composer-fade-band) * 0.12),
+    black calc(var(--messaging-composer-fade-band) * 0.32),
+    transparent calc(var(--messaging-composer-fade-band) * 0.5)
+  );
+  -webkit-mask: linear-gradient(
+    to bottom,
+    transparent 0,
+    black calc(var(--messaging-composer-fade-band) * 0.12),
+    black calc(var(--messaging-composer-fade-band) * 0.32),
+    transparent calc(var(--messaging-composer-fade-band) * 0.5)
   );
-  backdrop-filter: blur(3.2px);
-  -webkit-backdrop-filter: blur(3.2px);
-  mask: var(--messaging-composer-blur-mask);
-  -webkit-mask: var(--messaging-composer-blur-mask);
 }
 
 .messaging-composer-backdrop-blur:nth-child(2) {
-  --messaging-composer-blur-mask: linear-gradient(
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  mask: linear-gradient(
     to bottom,
-    transparent 20%,
-    black 40%,
-    transparent 60%
+    transparent calc(var(--messaging-composer-fade-band) * 0.2),
+    black calc(var(--messaging-composer-fade-band) * 0.38),
+    black calc(var(--messaging-composer-fade-band) * 0.55),
+    transparent calc(var(--messaging-composer-fade-band) * 0.7)
+  );
+  -webkit-mask: linear-gradient(
+    to bottom,
+    transparent calc(var(--messaging-composer-fade-band) * 0.2),
+    black calc(var(--messaging-composer-fade-band) * 0.38),
+    black calc(var(--messaging-composer-fade-band) * 0.55),
+    transparent calc(var(--messaging-composer-fade-band) * 0.7)
   );
-  backdrop-filter: blur(6.4px);
-  -webkit-backdrop-filter: blur(6.4px);
-  mask: var(--messaging-composer-blur-mask);
-  -webkit-mask: var(--messaging-composer-blur-mask);
 }
 
 .messaging-composer-backdrop-blur:nth-child(3) {
-  --messaging-composer-blur-mask: linear-gradient(
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  mask: linear-gradient(
+    to bottom,
+    transparent calc(var(--messaging-composer-fade-band) * 0.4),
+    black calc(var(--messaging-composer-fade-band) * 0.58),
+    black calc(var(--messaging-composer-fade-band) * 0.72),
+    transparent calc(var(--messaging-composer-fade-band) * 0.85)
+  );
+  -webkit-mask: linear-gradient(
     to bottom,
-    transparent 40%,
-    black 60%,
-    transparent 80%
+    transparent calc(var(--messaging-composer-fade-band) * 0.4),
+    black calc(var(--messaging-composer-fade-band) * 0.58),
+    black calc(var(--messaging-composer-fade-band) * 0.72),
+    transparent calc(var(--messaging-composer-fade-band) * 0.85)
   );
-  backdrop-filter: blur(9.6px);
-  -webkit-backdrop-filter: blur(9.6px);
-  mask: var(--messaging-composer-blur-mask);
-  -webkit-mask: var(--messaging-composer-blur-mask);
 }
 
 .messaging-composer-backdrop-blur:nth-child(4) {
-  --messaging-composer-blur-mask: linear-gradient(
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  mask: linear-gradient(
+    to bottom,
+    transparent calc(var(--messaging-composer-fade-band) * 0.55),
+    black calc(var(--messaging-composer-fade-band) * 0.72),
+    black calc(var(--messaging-composer-fade-band) * 0.88),
+    transparent var(--messaging-composer-fade-band)
+  );
+  -webkit-mask: linear-gradient(
     to bottom,
-    transparent 60%,
-    black 80%,
-    transparent 100%
+    transparent calc(var(--messaging-composer-fade-band) * 0.55),
+    black calc(var(--messaging-composer-fade-band) * 0.72),
+    black calc(var(--messaging-composer-fade-band) * 0.88),
+    transparent var(--messaging-composer-fade-band)
   );
-  backdrop-filter: blur(12.8px);
-  -webkit-backdrop-filter: blur(12.8px);
-  mask: var(--messaging-composer-blur-mask);
-  -webkit-mask: var(--messaging-composer-blur-mask);
 }
 
 .messaging-composer-backdrop-blur:nth-child(5) {
-  --messaging-composer-blur-mask: linear-gradient(
-    to bottom,
-    transparent 80%,
-    black 100%
-  );
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
-  mask: var(--messaging-composer-blur-mask);
-  -webkit-mask: var(--messaging-composer-blur-mask);
+  mask: linear-gradient(
+    to bottom,
+    transparent calc(var(--messaging-composer-fade-band) * 0.7),
+    black calc(var(--messaging-composer-fade-band) * 0.9),
+    black var(--messaging-composer-fade-band),
+    transparent var(--messaging-composer-fade-band)
+  );
+  -webkit-mask: linear-gradient(
+    to bottom,
+    transparent calc(var(--messaging-composer-fade-band) * 0.7),
+    black calc(var(--messaging-composer-fade-band) * 0.9),
+    black var(--messaging-composer-fade-band),
+    transparent var(--messaging-composer-fade-band)
+  );
 }
 
 .messaging-composer-backdrop-gradient {
@@ -218,9 +261,9 @@
   inset: 0;
   pointer-events: none;
   background: linear-gradient(
-    to bottom,
-    rgba(251, 250, 249, 0) 0%,
-    #fbfaf9 100%
+    180deg,
+    rgba(251, 250, 249, 0) 0,
+    #fbfaf9 var(--messaging-composer-fade-band)
   );
 }
 
@@ -881,22 +924,12 @@
   align-items: flex-start;
 }
 
-/* Gap between a wrapper's stacked bubbles (e.g. StreamAttachmentMessage's
-   media + caption, MediaMessage's card + text) */
+/* Gap between locked attachment card and accompanying text bubble */
 .str-chat__message-bubble-wrapper
   > .str-chat__message-bubble:not(:first-child) {
   margin-top: 4px;
 }
 
-/* Tighter gap for the locked-attachment card + text bubble and the tip
-   pill + text bubble — same margin-top mechanism, smaller value. Must come
-   after the rule above: equal specificity, so source order decides. */
-.message-locked-attachment-wrapper
-  > .str-chat__message-bubble:not(:first-child),
-.message-tip-wrapper > .str-chat__message-bubble:not(:first-child) {
-  margin-top: 2px;
-}
-
 /** Remove padding from the text inside the locked attachment text shell,
     and inherit TextShell's explicit colour — stream-chat-react's own
     `MessageText` sets its own (black) colour that only gets overridden by
@@ -908,3 +941,123 @@
 .message-locked-attachment-text .str-chat__message-text-inner {
   color: inherit;
 }
+
+/* Audio attachment waveform — `MessageAttachment.Audio` (MES-1360).
+
+   Plain CSS rather than Tailwind utilities for two reasons: the per-bar
+   height is a floored custom property that has to be authored once
+   rather than repeated on 35 elements, and the played / unplayed fills
+   are the one design decision Figma left open (it draws the idle state
+   only), so keeping them in a single place is what makes them reviewable.
+   Follows the existing `.mes-media-viewer*` / `.mes-dialog` convention:
+   the package's shipped stylesheet is enough, with no Tailwind
+   dependency in the consumer.
+
+   Geometry is Figma `2754:17710` → `sound-wave` (`…;2754:8065`): a
+   138×30 track holding 35 bars at 2px with 2px gaps
+   (35 x 2 + 34 x 2 = 138). Bars flex from a zero basis, so the exact
+   2px falls out of the 138px track and a narrower container degrades
+   proportionally instead of clipping. */
+.mes-audio-wave {
+  position: relative;
+  display: flex;
+  flex: 1 1 0;
+  min-width: 0;
+  align-items: center;
+  height: 30px;
+}
+
+.mes-audio-wave__track {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  gap: 2px;
+}
+
+/* Figma's bars run 4px..30px on a 30px track, so the amplitude
+   percentage is floored at that 4px minimum: a silent sample — or the
+   all-zero fallback used when no waveform could be produced — still
+   draws the shortest bar the design already contains, keeping the
+   card's silhouette identical instead of collapsing it. */
+.mes-audio-wave__bar {
+  flex: 1 1 0;
+  min-width: 0;
+  height: max(4px, var(--mes-audio-wave-bar, 0%));
+  border-radius: 9999px;
+  background: rgb(255 255 255 / 0.4);
+}
+
+.mes-audio-wave__bar--played {
+  background: #ffffff;
+}
+
+.mes-audio-wave--light .mes-audio-wave__bar {
+  background: rgb(4 4 3 / 0.5);
+}
+
+.mes-audio-wave--light .mes-audio-wave__bar--played {
+  background: #040403;
+}
+
+/* Seek is a real `<input type="range">` stretched over the bars, which
+   supplies click, drag, arrow keys, Home / End and a screen-reader
+   slider role natively. The bars are the visible track, so the input
+   itself must not paint — but it must stay focusable, which is why the
+   thumb and track are cleared individually rather than the whole input
+   being given `opacity: 0`. */
+.mes-audio-wave__seek {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  cursor: pointer;
+  background: transparent;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.mes-audio-wave__seek:disabled {
+  cursor: default;
+}
+
+.mes-audio-wave__seek::-webkit-slider-runnable-track {
+  background: transparent;
+}
+
+.mes-audio-wave__seek::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 1px;
+  height: 100%;
+  opacity: 0;
+}
+
+.mes-audio-wave__seek::-moz-range-track {
+  background: transparent;
+}
+
+.mes-audio-wave__seek::-moz-range-thumb {
+  width: 1px;
+  height: 100%;
+  border: 0;
+  opacity: 0;
+}
+
+.mes-audio-wave__seek:focus {
+  outline: none;
+}
+
+/* The input is transparent, so the focus ring has to render on the
+   wrapper that actually has pixels. */
+.mes-audio-wave:has(.mes-audio-wave__seek:focus-visible) {
+  outline: 2px solid rgb(255 255 255 / 0.6);
+  outline-offset: 4px;
+  border-radius: 4px;
+}
+
+.mes-audio-wave--light:has(.mes-audio-wave__seek:focus-visible) {
+  outline-color: rgb(4 4 3 / 0.6);
+}

package/src/testing/createMockMessagingClient.ts

@@ -141,11 +141,11 @@ export function createMockMessagingClient({
   })
   // Read/unread bookkeeping consults channel mute status; without a live
   // connection the real method throws, so report "not muted".
-  channel.muteStatus = () => ({
+  channel.muteStatus = (() => ({
     muted: false,
     createdAt: null,
     expiresAt: null,
-  })
+  })) as any
 
   // Neutralise the rest of the connection-dependent channel API that
   // stream-chat-react calls during the chat lifecycle. Each of these POSTs to

package/src/types.ts

@@ -1,5 +1,4 @@
 import type {
-  Logger,
   MessagingUser,
   StreamChatServiceConfig,
 } from '@linktr.ee/messaging-core'
@@ -454,7 +453,6 @@ export type ChannelViewPassthroughProps = Pick<
   | 'resolveOutbound'
   | 'showChannelInfo'
   | 'composerInput'
-  | 'attachmentPreviewList'
 >
 
 /**
@@ -502,13 +500,6 @@ interface MessagingProviderBaseProps {
   user: MessagingUser | null
   capabilities?: MessagingCapabilities
   debug?: boolean
-  /**
-   * Optional sink for the package's own log output. Levels left undefined fall
-   * back to console, which is also the default when the prop is omitted. In
-   * apiKey mode it is forwarded to the underlying StreamChatService unless
-   * `serviceConfig.logger` is set, which wins.
-   */
-  logger?: Logger
 }
 
 /**