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

package/src/components/MessageAttachment/index.tsx

@@ -56,7 +56,7 @@ import VideoAttachment, {
  *   - Pdf / Audio / File render their compact rows / players in a
  *     vertical stack with an 8px gap between rows. Each row keeps
  *     its own activation target — Pdf opens the carousel-aware
- *     `PdfViewer` at that index, Audio gets its own native player,
+ *     `PdfViewer` at that index, Audio gets its own waveform player,
  *     and File downloads the asset for that row.
  *
  * The Composer surface accepts only a single attachment at a time,
@@ -74,12 +74,29 @@ import VideoAttachment, {
  * download button to the chrome; the Video viewer relies on the
  * native `<video controls>` download menu, and the Pdf viewer
  * inherits the browser's built-in PDF download. Sibling-row Download
- * buttons on Pdf / File and the native `<audio>` controls expose
+ * buttons on Pdf / File and the Audio card's trailing action expose
  * downloads outside the viewer too. The lightbox chrome is styled
  * with plain CSS (`.mes-media-viewer*`) so the package's shipped
  * stylesheet is enough to render the viewer correctly without a
  * Tailwind dependency in the consumer.
  *
+ * # Audio requires a `<Channel>` ancestor
+ *
+ * `MessageAttachment.Audio.*` renders the waveform player card —
+ * a 32px play toggle, a 35-bar waveform with a progress fill and a
+ * native seek control, the duration, and a 32px trailing action
+ * (Remove in the composer, Download once sent). Playback is
+ * `stream-chat-react`'s pooled `AudioPlayer`, which is what supplies
+ * single-player-at-a-time across a thread, pause-on-navigation and
+ * saved-position restore across virtualized remounts.
+ *
+ * That pool is provided by `<Channel>`. Rendered outside one the card
+ * still draws in full, but its play and seek controls are disabled —
+ * so a story or a new consumer surface must mount `<Channel>` (or
+ * `stream-chat-react`'s `WithAudioPlayback`) for the card to be
+ * playable. The waveform bars themselves are styled with plain CSS
+ * (`.mes-audio-wave*`), so the shipped stylesheet is enough.
+ *
  * # Lazy-loading defaults
  *
  * Media attachments bake in network-friendly defaults for long chat
@@ -100,13 +117,12 @@ import VideoAttachment, {
  *     `VideoItem.preload` per item). Once the viewer is open the
  *     active item bumps to `preload="metadata"` so duration / the
  *     first frame appear immediately.
- *   - **Audio** — a single audio bubble defaults to
- *     `preload="metadata"` so the native player surfaces duration
- *     immediately. A stacked audio bubble (`items.length > 1`)
- *     defaults to `preload="none"` for every player so a thread of
- *     voice memos doesn't fan out N parallel metadata requests on
- *     first paint. Override via the attachment's `preload` prop
- *     (or `AudioItem.preload` per track).
+ *   - **Audio** — no audio bytes are fetched until the user presses
+ *     play: the pooled `AudioPlayer` acquires the shared `<audio>`
+ *     element lazily. A card whose `durationSeconds` is unknown makes
+ *     one `preload="metadata"` header request to fill the duration
+ *     slot; supplying `durationSeconds` (which `StreamAttachmentMessage`
+ *     maps from the attachment's persisted `duration`) avoids even that.
  *   - **Pdf** / **File** — no inline media element to throttle; the
  *     bubble renders compact rows that download / open lazily on
  *     activation. No `loading` / `preload` props on these surfaces.

package/src/components/MessageAttachment/types.ts

@@ -119,21 +119,31 @@ export interface PdfItem {
 /** A single audio file inside an Audio attachment (single or stacked). */
 export interface AudioItem {
   src: string
-  /** MIME type hint — typed onto the inline `<source>` element. */
+  /** MIME type hint — gates playability via the player's `canPlayType` probe. */
   mimeType?: string
   /**
-   * Filename — used as the download default name (consumed by the
-   * native player's kebab menu).
+   * Filename — the download default name for the card's trailing
+   * action, and part of the card's accessible name.
    */
   filename?: string
   /**
-   * Per-track override for the `<audio preload>` hint. Defaults to
-   * the parent attachment's `preload` value, which itself defaults
-   * to `'metadata'` for a single audio (so the native player can
-   * surface duration immediately) and `'none'` for a stacked thread
-   * (so a fan-out of metadata requests doesn't happen on first paint).
+   * Track length in seconds. Rendered as `MM:SS` before playback
+   * starts, so the duration is correct on first paint with no network
+   * request. Sourced from the Stream attachment's `duration` field,
+   * which the composer writes at send time. When omitted the card
+   * shows `--:--` until a one-shot `loadedmetadata` probe resolves.
    */
-  preload?: MediaPreloadMode
+  durationSeconds?: number
+  /**
+   * Waveform amplitudes, each `0..1`, in track order. Resampled to the
+   * rendered bar count, so any length is accepted. Sourced from the
+   * Stream attachment's `waveform_data`, which the composer computes
+   * from the local file and writes at send time.
+   *
+   * When omitted, the card renders a flat placeholder row: every bar at
+   * the minimum height, with the progress fill still tracking playback.
+   */
+  waveformData?: number[]
 }
 
 /** A single generic file inside a File attachment (single or stacked). */

package/src/components/MessagingShell/MessagingShell.test.tsx

@@ -125,26 +125,6 @@ describe('MessagingShell', () => {
     })
   })
 
-  it('forwards attachmentPreviewList to the selected channel view', async () => {
-    queryChannelsMock.mockResolvedValue([makeChannel('existing-1')])
-    const AttachmentPreviewList = () => <div>staged attachment</div>
-
-    renderWithProviders(
-      <MessagingShell
-        initialParticipantFilter="other-1"
-        attachmentPreviewList={AttachmentPreviewList}
-      />
-    )
-
-    await waitFor(() => {
-      expect(screen.getByTestId('channel-view')).toBeInTheDocument()
-    })
-
-    expect(capturedChannelViewProps.attachmentPreviewList).toBe(
-      AttachmentPreviewList
-    )
-  })
-
   it('calls onExitConversation and renders "Conversation ended" when the user leaves the conversation', async () => {
     queryChannelsMock.mockResolvedValue([makeChannel('existing-1')])
     const onExit = vi.fn()

package/src/components/MessagingShell/index.tsx

@@ -43,7 +43,6 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
   onMessageLinkClick,
   showChannelInfo,
   composerInput,
-  attachmentPreviewList,
 }) => {
   const {
     client,
@@ -270,7 +269,6 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
           onMessageLinkClick={onMessageLinkClick}
           showChannelInfo={showChannelInfo}
           composerInput={composerInput}
-          attachmentPreviewList={attachmentPreviewList}
         />
       </div>
     </div>

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

@@ -29,9 +29,7 @@ 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/index.ts

@@ -7,7 +7,6 @@ export { ChannelList } from './components/ChannelList'
 export { ChannelView } from './components/ChannelView'
 export { default as ActionButton } from './components/ActionButton'
 export { default as LockedAttachment } from './components/CustomMessage/LockedAttachment'
-export { TipMessage, isTipMessage } from './components/CustomMessage/TipMessage'
 export { default as LinkAttachment } from './components/LinkAttachment'
 export { default as RichCard } from './components/RichCard'
 export { default as MessageAttachment } from './components/MessageAttachment'
@@ -29,13 +28,11 @@ export type {
 
 // Providers
 export { MessagingProvider } from './providers/MessagingProvider'
-export { MessagingLoggerProvider } from './logging'
 export { CustomMessageProvider } from './components/CustomMessage/context'
 
 // Hooks
 export { useComposerLocked } from './components/CustomMessageInput'
 export { useMessaging } from './hooks/useMessaging'
-export { useMessagingLogger } from './logging'
 export { useCustomMessage } from './components/CustomMessage/context'
 
 // Utils
@@ -138,4 +135,3 @@ export type { CustomMessageRegistry } from './components/CustomMessage/context'
 export type { AttachmentSourceType } from './components/AttachmentCard/utils/mimeType'
 export type { Faq, FaqListProps } from './components/FaqList'
 export type { FaqListItemProps } from './components/FaqList/FaqListItem'
-export type { Logger } from '@linktr.ee/messaging-core'

package/src/providers/MessagingProvider.test.tsx

@@ -1,16 +1,10 @@
 import { StreamChatService } from '@linktr.ee/messaging-core'
-import type {
-  Logger,
-  MessagingUser,
-  StreamChatServiceConfig,
-} from '@linktr.ee/messaging-core'
+import type { MessagingUser } from '@linktr.ee/messaging-core'
 import { render, waitFor, act } from '@testing-library/react'
 import React from 'react'
 import type { StreamChat } from 'stream-chat'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 
-import { useMessagingLogger } from '../logging'
-
 import { MessagingProvider, useMessagingContext } from './MessagingProvider'
 
 // Stub stream-chat-react's <Chat /> so we don't need a real, fully-wired
@@ -22,9 +16,7 @@ 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(function () {
-    return { userID: 'mock' }
-  }),
+  StreamChat: vi.fn().mockImplementation(() => ({ userID: 'mock' })),
 }))
 
 const setupServiceMock = () => {
@@ -494,124 +486,4 @@ describe('MessagingProvider', () => {
     expect(last.hasClient).toBe(false)
     expect(last.error).toBeNull()
   })
-
-  describe('logger seam', () => {
-    const ServiceProbe: React.FC<{
-      onService: (service: StreamChatService | null) => void
-    }> = ({ onService }) => {
-      const { service } = useMessagingContext()
-      React.useEffect(() => {
-        onService(service)
-      }, [service, onService])
-      return null
-    }
-
-    const LoggerProbe: React.FC<{ onLogger: (logger: Logger) => void }> = ({
-      onLogger,
-    }) => {
-      const logger = useMessagingLogger()
-      React.useEffect(() => {
-        onLogger(logger)
-      }, [logger, onLogger])
-      return null
-    }
-
-    // The service stores its resolved sink privately; read it to prove which
-    // logger the provider handed to the constructor.
-    const serviceLogger = (service: StreamChatService) =>
-      (service as unknown as { logger: Logger }).logger
-
-    const renderWithLogger = async (
-      props: Partial<React.ComponentProps<typeof MessagingProvider>> & {
-        serviceConfig: Omit<StreamChatServiceConfig, 'apiKey'>
-      }
-    ) => {
-      setupServiceMock()
-      const services: (StreamChatService | null)[] = []
-      const loggers: Logger[] = []
-
-      render(
-        <MessagingProvider
-          apiKey="mock-api-key"
-          user={
-            { type: 'guest', id: 'guest-1', name: 'Guest' } as MessagingUser
-          }
-          {...props}
-        >
-          <ServiceProbe onService={(s) => services.push(s)} />
-          <LoggerProbe onLogger={(l) => loggers.push(l)} />
-        </MessagingProvider>
-      )
-
-      await waitFor(() => expect(services.filter(Boolean).length).toBe(1))
-      return {
-        service: services.filter(Boolean).pop() as StreamChatService,
-        logger: loggers[loggers.length - 1],
-      }
-    }
-
-    const baseServiceConfig: Omit<StreamChatServiceConfig, 'apiKey'> = {
-      fetchToken: async () => 'token',
-      createChannel: async () => ({ channelId: 'ch-1' }),
-    }
-
-    it('forwards the logger prop into the service and to the subtree', async () => {
-      const sink: Logger = { error: vi.fn() }
-      const { service, logger } = await renderWithLogger({
-        serviceConfig: baseServiceConfig,
-        logger: sink,
-      })
-
-      expect(serviceLogger(service).error).toBe(sink.error)
-
-      const error = new Error('boom')
-      logger.error?.('[MessagingShell] Failed:', error)
-      expect(sink.error).toHaveBeenCalledWith('[MessagingShell] Failed:', error)
-    })
-
-    it('resolves a partial prop sink before handing it to the service', async () => {
-      const consoleWarn = vi.spyOn(console, 'warn').mockImplementation(() => {})
-      const sink: Logger = { error: vi.fn() }
-      const { service } = await renderWithLogger({
-        serviceConfig: baseServiceConfig,
-        logger: sink,
-      })
-
-      // The service swaps its own console defaults out wholesale, so an
-      // unresolved partial sink would silence the levels it omits.
-      serviceLogger(service).warn?.('[StreamChatService] Slow:', 1)
-      expect(consoleWarn).toHaveBeenCalledWith('[StreamChatService] Slow:', 1)
-    })
-
-    it('lets an explicit serviceConfig.logger win over the logger prop', async () => {
-      const configSink: Logger = { error: vi.fn() }
-      const propSink: Logger = { error: vi.fn() }
-      const { service } = await renderWithLogger({
-        serviceConfig: { ...baseServiceConfig, logger: configSink },
-        logger: propSink,
-      })
-
-      expect(serviceLogger(service)).toBe(configSink)
-    })
-
-    it('leaves the service on its console defaults when no logger is given', async () => {
-      const consoleError = vi
-        .spyOn(console, 'error')
-        .mockImplementation(() => {})
-      const { service, logger } = await renderWithLogger({
-        serviceConfig: baseServiceConfig,
-      })
-
-      // Not the react seam object: the service fell back to its own defaults.
-      expect(serviceLogger(service)).not.toBe(logger)
-
-      const error = new Error('boom')
-      logger.error?.('[MessagingShell] Failed:', error)
-      serviceLogger(service).error?.('[StreamChatService] Failed:', error)
-      expect(consoleError.mock.calls).toEqual([
-        ['[MessagingShell] Failed:', error],
-        ['[StreamChatService] Failed:', error],
-      ])
-    })
-  })
 })

package/src/providers/MessagingProvider.tsx

@@ -13,7 +13,6 @@ import React, {
 import { StreamChat } from 'stream-chat'
 import { Chat } from 'stream-chat-react'
 
-import { MessagingLoggerProvider, resolveLogger } from '../logging'
 import type { MessagingProviderProps, MessagingCapabilities } from '../types'
 
 /**
@@ -57,7 +56,6 @@ export const MessagingProvider: React.FC<MessagingProviderProps> = ({
   capabilities = {},
   debug = false,
   client: injectedClient,
-  logger,
 }) => {
   // Create debug logger that respects the debug prop
   const debugLog = useCallback(
@@ -96,8 +94,6 @@ export const MessagingProvider: React.FC<MessagingProviderProps> = ({
   serviceConfigRef.current = serviceConfig
   const debugRef = useRef(debug)
   debugRef.current = debug
-  const loggerRef = useRef(logger)
-  loggerRef.current = logger
 
   // Track renders and prop changes
   const prevPropsRef = useRef({
@@ -203,11 +199,6 @@ export const MessagingProvider: React.FC<MessagingProviderProps> = ({
       apiKey,
       debug: debugRef.current,
       client: chatClient,
-      // An explicit serviceConfig.logger wins — existing injectors keep working.
-      // Resolved, because the service swaps its console defaults out wholesale.
-      ...(currentConfig.logger || !loggerRef.current
-        ? {}
-        : { logger: resolveLogger(loggerRef.current) }),
     })
 
     serviceRef.current = newService
@@ -413,22 +404,20 @@ export const MessagingProvider: React.FC<MessagingProviderProps> = ({
   })
 
   return (
-    <MessagingLoggerProvider logger={logger}>
-      <MessagingContext.Provider value={contextValue}>
-        {chatClient ? (
-          <Chat
-            client={chatClient}
-            customClasses={{
-              channelList:
-                'str-chat__channel-list str-chat__channel-list-react bg-transparent lg:border-r-2 border-r-0 border-[#0000000A]',
-            }}
-          >
-            {children}
-          </Chat>
-        ) : (
-          children
-        )}
-      </MessagingContext.Provider>
-    </MessagingLoggerProvider>
+    <MessagingContext.Provider value={contextValue}>
+      {chatClient ? (
+        <Chat
+          client={chatClient}
+          customClasses={{
+            channelList:
+              'str-chat__channel-list str-chat__channel-list-react bg-transparent lg:border-r-2 border-r-0 border-[#0000000A]',
+          }}
+        >
+          {children}
+        </Chat>
+      ) : (
+        children
+      )}
+    </MessagingContext.Provider>
   )
 }