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

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-BE8tWSEx.cjs");exports.ActionButton=e.ActionButton;exports.Avatar=e.Avatar;exports.ChannelEmptyState=e.ChannelEmptyState;exports.ChannelList=e.ChannelList;exports.ChannelView=e.ChannelView;exports.CustomMessageProvider=e.CustomMessageProvider;exports.FaqList=e.FaqList;exports.FaqListItem=e.FaqListItem;exports.LinkAttachment=e.LinkAttachment;exports.LockedAttachment=e.LockedAttachment;exports.MediaMessage=e.MediaMessage;exports.MessageAttachment=e.MessageAttachment;exports.MessageBubble=e.MessageBubble;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.RichCard=e.RichCard;exports.TipMessage=e.TipMessage;exports.buildCompactMetaLabel=e.buildCompactMetaLabel;exports.formatFileSize=e.formatFileSize;exports.formatRelativeTime=e.formatRelativeTime;exports.getFileExtensionLabel=e.getFileExtensionLabel;exports.getMessageDisplayText=e.getMessageDisplayText;exports.isLinkAttachment=e.isLinkAttachment;exports.isTipMessage=e.isTipMessage;exports.isUuidLike=e.isUuidLike;exports.messageAttachmentGroupPositionFromStream=e.bubbleGroupPositionFromStream;exports.normalizeLanguageCode=e.normalizeLanguageCode;exports.optimizeMessagingAttachmentUrl=e.optimizeMessagingAttachmentUrl;exports.resolveConversationParticipant=e.resolveConversationParticipant;exports.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useComposerLocked=e.useComposerLocked;exports.useCustomMessage=e.useCustomMessage;exports.useMessaging=e.useMessaging;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-BcU18EjV.cjs");exports.ActionButton=e.ActionButton;exports.Avatar=e.Avatar;exports.ChannelEmptyState=e.ChannelEmptyState;exports.ChannelList=e.ChannelList;exports.ChannelView=e.ChannelView;exports.CustomMessageProvider=e.CustomMessageProvider;exports.FaqList=e.FaqList;exports.FaqListItem=e.FaqListItem;exports.LinkAttachment=e.LinkAttachment;exports.LockedAttachment=e.LockedAttachment;exports.MediaMessage=e.MediaMessage;exports.MessageAttachment=e.MessageAttachment;exports.MessageBubble=e.MessageBubble;exports.MessagingLoggerProvider=e.MessagingLoggerProvider;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.RichCard=e.RichCard;exports.TipMessage=e.TipMessage;exports.buildCompactMetaLabel=e.buildCompactMetaLabel;exports.formatFileSize=e.formatFileSize;exports.formatRelativeTime=e.formatRelativeTime;exports.getFileExtensionLabel=e.getFileExtensionLabel;exports.getMessageDisplayText=e.getMessageDisplayText;exports.isLinkAttachment=e.isLinkAttachment;exports.isTipMessage=e.isTipMessage;exports.isUuidLike=e.isUuidLike;exports.messageAttachmentGroupPositionFromStream=e.bubbleGroupPositionFromStream;exports.normalizeLanguageCode=e.normalizeLanguageCode;exports.optimizeMessagingAttachmentUrl=e.optimizeMessagingAttachmentUrl;exports.resolveConversationParticipant=e.resolveConversationParticipant;exports.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useComposerLocked=e.useComposerLocked;exports.useCustomMessage=e.useCustomMessage;exports.useMessaging=e.useMessaging;exports.useMessagingLogger=e.useMessagingLogger;
 //# sourceMappingURL=index.cjs.map

package/dist/index.d.ts

@@ -13,6 +13,7 @@ import { FC } from 'react';
 import { InfiniteScrollProps } from 'stream-chat-react';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { LocalMessage } from 'stream-chat';
+import { Logger } from '@linktr.ee/messaging-core';
 import { MessageCustomType } from '@linktr.ee/messaging-taxonomy';
 import { MessagingUser } from '@linktr.ee/messaging-core';
 import { OfficialCtaActionKind } from '@linktr.ee/messaging-taxonomy';
@@ -872,6 +873,8 @@ export declare interface LockedAttachmentSource {
     thumbnailUrl?: string;
 }
 
+export { Logger }
+
 declare interface MediaCardBaseProps {
     /** Attachment title. */
     title?: string;
@@ -1442,6 +1445,16 @@ declare interface MessagingContextValue {
     debug: boolean;
 }
 
+/**
+ * Provides the resolved logger sink to the messaging subtree. Rendered by
+ * `MessagingProvider`; usable standalone in tests or in a subtree that needs a
+ * different sink.
+ */
+export declare const MessagingLoggerProvider: default_2.FC<{
+    logger?: Logger;
+    children: default_2.ReactNode;
+}>;
+
 /**
  * Provider component that wraps messaging-core with React state management
  */
@@ -1463,6 +1476,13 @@ declare 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;
 }
 
 /**
@@ -1825,6 +1845,12 @@ export declare function useCustomMessage<K extends keyof CustomMessageRegistry>(
  */
 export declare const useMessaging: () => MessagingContextValue;
 
+/**
+ * The logger sink for the current subtree. Falls back to console when no
+ * provider (or no `logger` prop) is present, so call sites never branch.
+ */
+export declare const useMessagingLogger: () => Required<Logger>;
+
 declare interface VideoAttachmentSharedProps extends MessageAttachmentBaseProps {
     /** Single video — convenience for the most common case. */
     src?: string;

package/dist/index.js

@@ -1,39 +1,41 @@
-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 g, F as r, f as m, L as l, h as M, M as c, i as L, j as h, k as p, l as u, m as d, R as v, T as C, 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, y as z, o as S, z as q, B, D, E, G as R, H as w, I as G, J as I } from "./index-6RdyZh6F.js";
 export {
   e as ActionButton,
   t as Avatar,
   i as ChannelEmptyState,
   n as ChannelList,
   o as ChannelView,
-  m as CustomMessageProvider,
+  g as CustomMessageProvider,
   r as FaqList,
-  g as FaqListItem,
+  m as FaqListItem,
   l as LinkAttachment,
   M as LockedAttachment,
   c as MediaMessage,
-  h as MessageAttachment,
-  p as MessageBubble,
-  L as MessagingProvider,
-  u as MessagingShell,
-  d as RichCard,
+  L as MessageAttachment,
+  h as MessageBubble,
+  p as MessagingLoggerProvider,
+  u as MessagingProvider,
+  d as MessagingShell,
+  v as RichCard,
   C as TipMessage,
-  v as buildCompactMetaLabel,
-  A as formatFileSize,
-  k as formatRelativeTime,
-  F as getFileExtensionLabel,
-  b as getMessageDisplayText,
-  P as isLinkAttachment,
-  T as isTipMessage,
-  f as isUuidLike,
-  x as messageAttachmentGroupPositionFromStream,
-  y as normalizeLanguageCode,
-  z as optimizeMessagingAttachmentUrl,
-  S as resolveConversationParticipant,
-  q as resolveLinkAttachment,
-  B as resolveMediaFromMessage,
-  D as resolveParticipantDisplayName,
-  E as useComposerLocked,
-  R as useCustomMessage,
-  w as useMessaging
+  A as buildCompactMetaLabel,
+  k as formatFileSize,
+  F as formatRelativeTime,
+  b as getFileExtensionLabel,
+  P as getMessageDisplayText,
+  T as isLinkAttachment,
+  f as isTipMessage,
+  x as isUuidLike,
+  y as messageAttachmentGroupPositionFromStream,
+  z as normalizeLanguageCode,
+  S as optimizeMessagingAttachmentUrl,
+  q as resolveConversationParticipant,
+  B as resolveLinkAttachment,
+  D as resolveMediaFromMessage,
+  E as resolveParticipantDisplayName,
+  R as useComposerLocked,
+  w as useCustomMessage,
+  G as useMessaging,
+  I as useMessagingLogger
 };
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "4.1.7",
+  "version": "4.2.0-rc-1787181113",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",
@@ -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-1787181113",
     "@linktr.ee/messaging-taxonomy": "^0.10.0",
     "@phosphor-icons/react": "^2.1.10"
   },

package/src/index.ts

@@ -29,11 +29,13 @@ 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
@@ -136,3 +138,4 @@ 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/logging/index.test.tsx

@@ -0,0 +1,136 @@
+import type { Logger } from '@linktr.ee/messaging-core'
+import { render } from '@testing-library/react'
+import React from 'react'
+import { describe, it, expect, vi, afterEach } from 'vitest'
+
+import {
+  MessagingLoggerProvider,
+  consoleLogger,
+  resolveLogger,
+  useMessagingLogger,
+} from './index'
+
+const ERROR_MESSAGE = '[MessagingShell] Failed to load channels:'
+
+/** Logs one error through the seam the way a call site would. */
+const ErrorEmitter: React.FC<{ error: Error }> = ({ error }) => {
+  const logger = useMessagingLogger()
+  logger.error(ERROR_MESSAGE, error)
+  return null
+}
+
+/** Emits one line at every level so partial-sink fallback is observable. */
+const AllLevelsEmitter: React.FC = () => {
+  const logger = useMessagingLogger()
+  logger.debug('debug line', 1)
+  logger.info('info line', 2)
+  logger.warn('warn line', 3)
+  logger.error('error line', 4)
+  return null
+}
+
+afterEach(() => {
+  vi.restoreAllMocks()
+})
+
+describe('logger seam', () => {
+  it('routes error to an injected sink with the exact message and raw error object', () => {
+    const error = new Error('boom')
+    const sink = { error: vi.fn() }
+
+    render(
+      <MessagingLoggerProvider logger={sink}>
+        <ErrorEmitter error={error} />
+      </MessagingLoggerProvider>
+    )
+
+    expect(sink.error).toHaveBeenCalledTimes(1)
+    expect(sink.error).toHaveBeenCalledWith(ERROR_MESSAGE, error)
+    // The raw Error instance, not a serialized copy.
+    expect(sink.error.mock.calls[0][1]).toBe(error)
+  })
+
+  it('passes identical arguments to console.error when no sink is injected', () => {
+    const error = new Error('boom')
+    const consoleError = vi.spyOn(console, 'error').mockImplementation(() => {})
+    const sink = { error: vi.fn() }
+
+    render(
+      <MessagingLoggerProvider logger={sink}>
+        <ErrorEmitter error={error} />
+      </MessagingLoggerProvider>
+    )
+    const injectedArgs = sink.error.mock.calls[0]
+
+    // No provider at all, and a provider with no logger prop: both must produce
+    // byte-identical console output to what the injected sink received.
+    render(<ErrorEmitter error={error} />)
+    render(
+      <MessagingLoggerProvider>
+        <ErrorEmitter error={error} />
+      </MessagingLoggerProvider>
+    )
+
+    expect(consoleError).toHaveBeenCalledTimes(2)
+    expect(consoleError.mock.calls[0]).toEqual(injectedArgs)
+    expect(consoleError.mock.calls[1]).toEqual(injectedArgs)
+    expect(consoleError.mock.calls[0][1]).toBe(error)
+  })
+
+  it('falls back to console for the levels a partial sink omits', () => {
+    const consoleLog = vi.spyOn(console, 'log').mockImplementation(() => {})
+    const consoleWarn = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    const consoleError = vi.spyOn(console, 'error').mockImplementation(() => {})
+    const sink: Logger = { warn: vi.fn(), error: vi.fn() }
+
+    render(
+      <MessagingLoggerProvider logger={sink}>
+        <AllLevelsEmitter />
+      </MessagingLoggerProvider>
+    )
+
+    expect(sink.warn).toHaveBeenCalledWith('warn line', 3)
+    expect(sink.error).toHaveBeenCalledWith('error line', 4)
+    expect(consoleWarn).not.toHaveBeenCalled()
+    expect(consoleError).not.toHaveBeenCalled()
+    // debug and info are unset on the sink, so both land on console.log.
+    expect(consoleLog.mock.calls).toEqual([
+      ['debug line', 1],
+      ['info line', 2],
+    ])
+  })
+
+  it('defaults every level to console when the hook is used with no provider', () => {
+    const consoleLog = vi.spyOn(console, 'log').mockImplementation(() => {})
+    const consoleWarn = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    const consoleError = vi.spyOn(console, 'error').mockImplementation(() => {})
+
+    render(<AllLevelsEmitter />)
+
+    expect(consoleLog.mock.calls).toEqual([
+      ['debug line', 1],
+      ['info line', 2],
+    ])
+    expect(consoleWarn).toHaveBeenCalledWith('warn line', 3)
+    expect(consoleError).toHaveBeenCalledWith('error line', 4)
+  })
+
+  it('resolveLogger keeps provided levels and fills the rest from console', () => {
+    const warn = vi.fn()
+    const resolved = resolveLogger({ warn })
+
+    expect(resolved.warn).toBe(warn)
+    expect(resolved.debug).toBe(consoleLogger.debug)
+    expect(resolved.info).toBe(consoleLogger.info)
+    expect(resolved.error).toBe(consoleLogger.error)
+    expect(resolveLogger()).toEqual(consoleLogger)
+  })
+
+  it('consoleLogger dispatches through console at call time, not bind time', () => {
+    const consoleError = vi.spyOn(console, 'error').mockImplementation(() => {})
+
+    consoleLogger.error('late spy', 'arg')
+
+    expect(consoleError).toHaveBeenCalledWith('late spy', 'arg')
+  })
+})

package/src/logging/index.tsx

@@ -0,0 +1,48 @@
+import type { Logger } from '@linktr.ee/messaging-core'
+import React, { createContext, useContext, useMemo } from 'react'
+
+/**
+ * Default sink: the console calls the package makes today. Wrappers, not
+ * `console.error.bind(console)`, so a later-installed spy is still observed.
+ */
+export const consoleLogger: Required<Logger> = {
+  debug: (message, ...args) => console.log(message, ...args),
+  info: (message, ...args) => console.log(message, ...args),
+  warn: (message, ...args) => console.warn(message, ...args),
+  error: (message, ...args) => console.error(message, ...args),
+}
+
+/**
+ * Merge a partial sink over the console defaults, so a consumer can route only
+ * the levels it cares about (e.g. `error`) and leave the rest on console.
+ */
+export const resolveLogger = (logger?: Logger): Required<Logger> => ({
+  debug: logger?.debug ?? consoleLogger.debug,
+  info: logger?.info ?? consoleLogger.info,
+  warn: logger?.warn ?? consoleLogger.warn,
+  error: logger?.error ?? consoleLogger.error,
+})
+
+const LoggerContext = createContext<Required<Logger>>(consoleLogger)
+
+/**
+ * Provides the resolved logger sink to the messaging subtree. Rendered by
+ * `MessagingProvider`; usable standalone in tests or in a subtree that needs a
+ * different sink.
+ */
+export const MessagingLoggerProvider: React.FC<{
+  logger?: Logger
+  children: React.ReactNode
+}> = ({ logger, children }) => {
+  const value = useMemo(() => resolveLogger(logger), [logger])
+  return (
+    <LoggerContext.Provider value={value}>{children}</LoggerContext.Provider>
+  )
+}
+
+/**
+ * The logger sink for the current subtree. Falls back to console when no
+ * provider (or no `logger` prop) is present, so call sites never branch.
+ */
+export const useMessagingLogger = (): Required<Logger> =>
+  useContext(LoggerContext)

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/types.ts

@@ -1,4 +1,5 @@
 import type {
+  Logger,
   MessagingUser,
   StreamChatServiceConfig,
 } from '@linktr.ee/messaging-core'
@@ -501,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
 }
 
 /**