@linktr.ee/messaging-react 4.2.0-rc-1787083791 → 4.2.0-rc-1787181113

package/src/providers/MessagingProvider.test.tsx

@@ -1,10 +1,16 @@
 import { StreamChatService } from '@linktr.ee/messaging-core'
-import type { MessagingUser } from '@linktr.ee/messaging-core'
+import type {
+  Logger,
+  MessagingUser,
+  StreamChatServiceConfig,
+} 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
@@ -486,4 +492,110 @@ 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)).toBe(sink)
+
+      const error = new Error('boom')
+      logger.error?.('[MessagingShell] Failed:', error)
+      expect(sink.error).toHaveBeenCalledWith('[MessagingShell] Failed:', error)
+    })
+
+    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,6 +13,7 @@ import React, {
 import { StreamChat } from 'stream-chat'
 import { Chat } from 'stream-chat-react'
 
+import { MessagingLoggerProvider } from '../logging'
 import type { MessagingProviderProps, MessagingCapabilities } from '../types'
 
 /**
@@ -56,6 +57,7 @@ export const MessagingProvider: React.FC<MessagingProviderProps> = ({
   capabilities = {},
   debug = false,
   client: injectedClient,
+  logger,
 }) => {
   // Create debug logger that respects the debug prop
   const debugLog = useCallback(
@@ -94,6 +96,8 @@ 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({
@@ -199,6 +203,10 @@ export const MessagingProvider: React.FC<MessagingProviderProps> = ({
       apiKey,
       debug: debugRef.current,
       client: chatClient,
+      // An explicit serviceConfig.logger wins — existing injectors keep working.
+      ...(currentConfig.logger || !loggerRef.current
+        ? {}
+        : { logger: loggerRef.current }),
     })
 
     serviceRef.current = newService
@@ -404,20 +412,22 @@ export const MessagingProvider: React.FC<MessagingProviderProps> = ({
   })
 
   return (
-    <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 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>
   )
 }

package/src/stories/customMessageStoryTemplate.tsx

@@ -0,0 +1,199 @@
+import '../stream-custom-data'
+
+import type { StoryFn } from '@storybook/react'
+import React, { useEffect } from 'react'
+import {
+  Channel as ChannelType,
+  QueryChannelAPIResponse,
+  StreamChat,
+} from 'stream-chat'
+import {
+  Channel,
+  Chat,
+  MessageList,
+  MessageUIComponentProps,
+  Window,
+} from 'stream-chat-react'
+
+import { CustomMessage } from '../components/CustomMessage'
+import { OutboundContext, buildOutboundsByRecordId } from '../components/CustomMessage/OutboundContext'
+import CustomTypingIndicator from '../components/CustomTypingIndicator'
+import { createMockStreamChatClient } from '../testing/createMockStreamChatClient'
+import type { OutboundResolver } from '../types'
+
+import { minutesAgo } from './decorators/storyTime'
+import { StoryUser, storyUsers } from './decorators/storyUser'
+
+export const createMockChannel = async (
+  client: StreamChat,
+  messages: TemplateProps['messages']
+) => {
+  const mockMessages = messages.map((msg, index) => ({
+    ...msg,
+    type: msg.type ?? ('regular' as const),
+    created_at: minutesAgo(messages.length - index),
+    updated_at: minutesAgo(messages.length - index),
+    attachments: msg.attachments ?? [],
+    latest_reactions: [],
+    own_reactions: [],
+    reaction_counts: {},
+    reaction_scores: {},
+    reply_count: 0,
+    status: 'received',
+    cid: 'messaging:storybook-channel-1',
+    mentioned_users: msg.mentioned_users ?? [],
+  }))
+
+  const channelData = {
+    members: [storyUsers.creator.id, storyUsers.visitor.id],
+    // Required for useUserRole: canDelete needs delete-own-message, canFlag needs flag-message
+    own_capabilities: ['delete-own-message', 'flag-message'],
+  }
+
+  const channel = client.channel(
+    'messaging',
+    'storybook-channel-1',
+    channelData
+  )
+
+  channel.watch = async () => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    channel.state.messages = mockMessages as unknown as any[]
+    channel.state.members = {
+      [storyUsers.creator.id]: {
+        user: storyUsers.creator,
+        user_id: storyUsers.creator.id,
+      },
+      [storyUsers.visitor.id]: {
+        user: storyUsers.visitor,
+        user_id: storyUsers.visitor.id,
+      },
+    }
+    return {
+      channel: channelData,
+      members: [],
+      messages: mockMessages,
+      watchers: [],
+      pinned_messages: [],
+      duration: '0ms',
+    } as unknown as QueryChannelAPIResponse
+  }
+
+  try {
+    await channel.watch()
+  } catch {
+    // Ignore errors in mock mode
+  }
+
+  return channel
+}
+
+export interface TemplateProps {
+  currentUser: StoryUser
+  typingUser?: StoryUser
+  resolveOutbound?: OutboundResolver
+  messages: Array<{
+    id: string
+    text: string
+    user: StoryUser
+    mentioned_users?: StoryUser[]
+    type?: 'regular' | 'system'
+    attachments?: Array<Record<string, unknown>>
+    metadata?: {
+      custom_type?:
+        | 'MESSAGE_TIP'
+        | 'MESSAGE_PAID'
+        | 'MESSAGE_CHATBOT'
+        | 'MESSAGE_ATTACHMENT'
+        | 'MESSAGE_OUTBOUND'
+      payment_status?: 'pending' | 'paid' | 'failed' | 'refunded'
+      amount_text?: string
+      attachment_title?: string
+      attachment_mime_type?: string
+      attachment_thumbnail?: string
+      attachment_detail?: string
+      attachment_content_type?: 'text' | 'media'
+      outbound_id?: string
+    }
+  }>
+}
+
+const TemplateInner: React.FC<{
+  currentUser: StoryUser
+  typingUser?: StoryUser
+  messages: TemplateProps['messages']
+  resolveOutbound?: OutboundResolver
+}> = ({ currentUser, typingUser, messages, resolveOutbound }) => {
+  const [client] = React.useState(() => createMockStreamChatClient(currentUser))
+
+  const [channel, setChannel] = React.useState<ChannelType | null>(null)
+
+  useEffect(() => {
+    createMockChannel(client, messages).then(setChannel)
+  }, [client, messages])
+
+  useEffect(() => {
+    if (!channel || !typingUser) {
+      return
+    }
+
+    // Stream Channel UI only updates typing context from typing.start/typing.stop events.
+    const timer = setTimeout(() => {
+      client.dispatchEvent({
+        type: 'typing.start',
+        cid: channel.cid,
+        user: typingUser,
+      })
+    }, 0)
+
+    return () => clearTimeout(timer)
+  }, [channel, client, typingUser])
+
+  const outboundsByRecordId = React.useMemo(
+    () => buildOutboundsByRecordId(messages, resolveOutbound),
+    [messages, resolveOutbound]
+  )
+
+  const MessageComponent = React.useMemo(() => {
+    return function CustomMessageComponent(props: MessageUIComponentProps) {
+      return <CustomMessage {...props} onOutboundClick={() => undefined} />
+    }
+  }, [])
+
+  if (!channel) {
+    return <div className="p-4">Loading...</div>
+  }
+
+  return (
+    <OutboundContext.Provider value={outboundsByRecordId}>
+      <Chat client={client}>
+        <div className="h-screen w-full bg-white">
+          <Channel
+            channel={channel}
+            Message={MessageComponent}
+            TypingIndicator={CustomTypingIndicator}
+          >
+            <Window>
+              <MessageList />
+            </Window>
+          </Channel>
+        </div>
+      </Chat>
+    </OutboundContext.Provider>
+  )
+}
+
+export const Template: StoryFn<TemplateProps> = ({
+  currentUser = storyUsers.creator,
+  typingUser,
+  messages,
+  resolveOutbound,
+}) => (
+  <TemplateInner
+    key={currentUser.id}
+    currentUser={currentUser}
+    typingUser={typingUser}
+    messages={messages}
+    resolveOutbound={resolveOutbound}
+  />
+)

package/src/styles.css

@@ -924,12 +924,21 @@
   align-items: flex-start;
 }
 
-/* Gap between locked attachment card and accompanying text bubble */
+/* Gap between a wrapper's stacked bubbles (e.g. StreamAttachmentMessage's
+   media + caption, MediaMessage's card + text) */
 .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
@@ -941,123 +950,3 @@
 .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,4 +1,5 @@
 import type {
+  Logger,
   MessagingUser,
   StreamChatServiceConfig,
 } from '@linktr.ee/messaging-core'
@@ -453,6 +454,7 @@ export type ChannelViewPassthroughProps = Pick<
   | 'resolveOutbound'
   | 'showChannelInfo'
   | 'composerInput'
+  | 'attachmentPreviewList'
 >
 
 /**
@@ -500,6 +502,13 @@ 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
 }
 
 /**