@linktr.ee/messaging-react 4.1.7 → 4.1.8-rc-1787212854

package/dist/index.js

@@ -1,4 +1,4 @@
-import { a as e, b as t, C as i, c as n, d as o, e as m, F as r, f as g, L as l, h as M, M as c, i as h, j as p, k as L, l as u, R as d, T as C, m as v, n as A, p as k, q as F, s as b, t as P, u as T, v as f, w as x, x as y, o as z, y as S, z as q, B, D, E, G as R, H as w } from "./index-xcIpBghu.js";
+import { a as e, b as t, C as i, c as n, d as o, e as m, F as r, f as g, L as l, h as M, M as c, i as h, j as p, k as L, l as u, R as d, T as C, m as v, n as A, p as k, q as F, s as b, t as P, u as T, v as f, w as x, x as y, o as z, y as S, z as q, B, D, E, G as R, H as w } from "./index-D1KC09no.js";
 export {
   e as ActionButton,
   t as Avatar,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "4.1.7",
+  "version": "4.1.8-rc-1787212854",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",
@@ -40,8 +40,8 @@
     "test:ci": "vitest run",
     "test:ui": "vitest --ui",
     "test:coverage": "vitest --coverage",
-    "lint": "npx --no-install eslint .",
-    "lint:fix": "npx --no-install eslint . --fix",
+    "lint": "cd \"$PROJECT_CWD\" && npx --no-install eslint packages/messaging-react",
+    "lint:fix": "cd \"$PROJECT_CWD\" && npx --no-install eslint packages/messaging-react --fix",
     "verify": "yarn type-check && yarn lint && yarn test:ci && yarn build",
     "storybook": "storybook dev -p 6006",
     "storybook:build": "storybook build --stats-json",
@@ -50,7 +50,7 @@
     "chromatic:local": "yarn storybook:build && chromatic"
   },
   "dependencies": {
-    "@linktr.ee/messaging-core": "^2.5.0",
+    "@linktr.ee/messaging-core": "2.5.0-rc-1787212854",
     "@linktr.ee/messaging-taxonomy": "^0.10.0",
     "@phosphor-icons/react": "^2.1.10"
   },
@@ -71,7 +71,7 @@
     "@types/react": "^18.3.24",
     "@types/react-dom": "^18.3.7",
     "@vitejs/plugin-react": "^4.2.1",
-    "@vitest/ui": "^1.0.4",
+    "@vitest/ui": "^4.1.10",
     "autoprefixer": "^10.4.20",
     "chromatic": "^17.4.0",
     "classnames": "^2.3.2",
@@ -87,7 +87,7 @@
     "typescript": "5.9.2",
     "vite": "^6.0.7",
     "vite-plugin-dts": "^3.7.0",
-    "vitest": "^1.0.4"
+    "vitest": "^4.1.10"
   },
   "peerDependencies": {
     "classnames": "^2.3.2",

package/src/components/AttachmentCard/utils/icons.ts

@@ -18,13 +18,12 @@ import React from 'react'
 import { getDocumentIconType, getSourceType } from './mimeType'
 import type { AttachmentSourceType } from './mimeType'
 
-const MEDIA_TYPE_ICON: Record<AttachmentSourceType, React.ElementType> =
-  {
-    video: VideoCameraIcon,
-    audio: SpeakerHighIcon,
-    image: ImageIcon,
-    document: FileIcon,
-  }
+const MEDIA_TYPE_ICON: Record<AttachmentSourceType, React.ElementType> = {
+  video: VideoCameraIcon,
+  audio: SpeakerHighIcon,
+  image: ImageIcon,
+  document: FileIcon,
+}
 
 const DOCUMENT_ICON_COMPONENT = {
   pdf: FilePdfIcon,

package/src/components/ChannelView.test.tsx

@@ -223,10 +223,14 @@ describe('ChannelView', () => {
 
   it('widens the content column in the official (read-only) channel via the width var', () => {
     const { container } = renderWithProviders(
-      <ChannelView channel={createChannel({ channelType: OFFICIAL_CHANNEL_TYPE })} />
+      <ChannelView
+        channel={createChannel({ channelType: OFFICIAL_CHANNEL_TYPE })}
+      />
     )
 
-    const root = container.querySelector('.messaging-channel-view') as HTMLElement
+    const root = container.querySelector(
+      '.messaging-channel-view'
+    ) as HTMLElement
     expect(root.style.getPropertyValue('--lt-msg-card-width')).toBe('368px')
   })
 
@@ -235,7 +239,9 @@ describe('ChannelView', () => {
       <ChannelView channel={createChannel({ channelType: 'messaging' })} />
     )
 
-    const root = container.querySelector('.messaging-channel-view') as HTMLElement
+    const root = container.querySelector(
+      '.messaging-channel-view'
+    ) as HTMLElement
     expect(root.style.getPropertyValue('--lt-msg-card-width')).toBe('')
   })
 

package/src/components/CustomMessage/StreamAttachmentMessage.tsx

@@ -155,9 +155,7 @@ export function buildOrderedAttachmentSegments(
   return segments
 }
 
-function countMediaSegmentBubbles(
-  segments: AttachmentSegment[]
-): number {
+function countMediaSegmentBubbles(segments: AttachmentSegment[]): number {
   return segments.filter((segment) => segment.type === 'media').length
 }
 
@@ -245,7 +243,9 @@ function buildMediaClusterRenderProps(
 ): Record<string, unknown> {
   if (attachments.length > 1) {
     return {
-      items: attachments.map((attachment) => mediaItemForKind(kind, attachment)),
+      items: attachments.map((attachment) =>
+        mediaItemForKind(kind, attachment)
+      ),
     }
   }
 
@@ -318,8 +318,7 @@ const StreamAttachmentMessage: React.FC<StreamAttachmentMessageProps> = ({
     : groupPosition
   // The trailing caption bubble carries the tail on single / last-in-run
   // messages, matching the in-channel text bubbles.
-  const captionShowsTail =
-    groupPosition === 'single' || groupPosition === 'end'
+  const captionShowsTail = groupPosition === 'single' || groupPosition === 'end'
 
   const pushLinkRow = (
     attachment: Attachment,

package/src/components/CustomSystemMessage/index.tsx

@@ -19,8 +19,9 @@ const DM_AGENT_SYSTEM_MESSAGE_FALLBACK_TEXT: Record<DmAgentSystemType, string> =
  * explicitly added. Keep in sync with the mobile client (cerberus
  * `CustomMessageSystem`); there is no shared package between the two surfaces.
  */
-const SHOW_SYSTEM_MESSAGE_TIMESTAMP_TYPES: readonly AgeSafetySystemType[] =
-  ['SYSTEM_AGE_SAFETY_BLOCKED']
+const SHOW_SYSTEM_MESSAGE_TIMESTAMP_TYPES: readonly AgeSafetySystemType[] = [
+  'SYSTEM_AGE_SAFETY_BLOCKED',
+]
 
 const AGE_SAFETY_SYSTEM_MESSAGE_FALLBACK_TEXT: Record<
   AgeSafetySystemType,

package/src/components/RichCard/RichCard.test.tsx

@@ -29,7 +29,9 @@ describe('RichCard', () => {
     renderWithProviders(
       <RichCard.Received
         title="Welcome"
-        subtitle={'👋 Say hello as people arrive\n✨ Spark conversations\n💬 Add automated FAQs'}
+        subtitle={
+          '👋 Say hello as people arrive\n✨ Spark conversations\n💬 Add automated FAQs'
+        }
         subtitleLines={6}
         images={[HERO]}
       />

package/src/providers/MessagingProvider.test.tsx

@@ -16,7 +16,9 @@ vi.mock('stream-chat-react', () => ({
 // The provider constructs the Chat client via `new StreamChat(apiKey)` and
 // injects it into the service. Stub the constructor so <Chat> sees an instance.
 vi.mock('stream-chat', () => ({
-  StreamChat: vi.fn().mockImplementation(() => ({ userID: 'mock' })),
+  StreamChat: vi.fn().mockImplementation(function () {
+    return { userID: 'mock' }
+  }),
 }))
 
 const setupServiceMock = () => {

package/src/stories/customMessageStoryTemplate.tsx

@@ -16,7 +16,10 @@ import {
 } from 'stream-chat-react'
 
 import { CustomMessage } from '../components/CustomMessage'
-import { OutboundContext, buildOutboundsByRecordId } from '../components/CustomMessage/OutboundContext'
+import {
+  OutboundContext,
+  buildOutboundsByRecordId,
+} from '../components/CustomMessage/OutboundContext'
 import CustomTypingIndicator from '../components/CustomTypingIndicator'
 import { createMockStreamChatClient } from '../testing/createMockStreamChatClient'
 import type { OutboundResolver } from '../types'

package/src/styles.css

@@ -120,10 +120,6 @@
   }
 }
 
-.messaging-channel-layout {
-  --messaging-composer-fade-height: 2rem;
-}
-
 .messaging-composer-chrome--floating {
   position: relative;
   right: 0;
@@ -132,27 +128,27 @@
   z-index: 20;
 }
 
+/* 12/20 above the custom composer — overrides the inner `p-4` top only. */
+.messaging-composer-chrome--floating .p-4 {
+  padding-top: 12px;
+}
+
+@media (min-width: 767px) {
+  .messaging-composer-chrome--floating .p-4 {
+    padding-top: 20px;
+  }
+}
+
 .messaging-channel-layout > .messaging-composer-chrome--floating {
   position: absolute;
 }
 
 .messaging-composer-chrome--floating .messaging-composer-backdrop {
   position: absolute;
-  top: calc(-1 * var(--messaging-composer-fade-height));
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 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 {
@@ -161,99 +157,71 @@
   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) {
-  backdrop-filter: blur(2px);
-  -webkit-backdrop-filter: blur(2px);
-  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)
-  );
-  -webkit-mask: linear-gradient(
+  --messaging-composer-blur-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)
+    transparent 0%,
+    black 20%,
+    transparent 40%
   );
+  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) {
-  backdrop-filter: blur(4px);
-  -webkit-backdrop-filter: blur(4px);
-  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)
-  );
-  -webkit-mask: linear-gradient(
+  --messaging-composer-blur-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)
+    transparent 20%,
+    black 40%,
+    transparent 60%
   );
+  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) {
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
-  mask: linear-gradient(
+  --messaging-composer-blur-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 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)
+    transparent 40%,
+    black 60%,
+    transparent 80%
   );
+  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) {
-  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(
+  --messaging-composer-blur-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)
+    transparent 60%,
+    black 80%,
+    transparent 100%
   );
+  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) {
-  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
-  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(
+  --messaging-composer-blur-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)
+    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);
 }
 
 .messaging-composer-backdrop-gradient {
@@ -261,9 +229,9 @@
   inset: 0;
   pointer-events: none;
   background: linear-gradient(
-    180deg,
-    rgba(251, 250, 249, 0) 0,
-    #fbfaf9 var(--messaging-composer-fade-band)
+    to bottom,
+    rgba(251, 250, 249, 0) 0%,
+    #fbfaf9 100%
   );
 }
 
@@ -934,7 +902,8 @@
 /* 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-locked-attachment-wrapper
+  > .str-chat__message-bubble:not(:first-child),
 .message-tip-wrapper > .str-chat__message-bubble:not(:first-child) {
   margin-top: 2px;
 }