@linktr.ee/messaging-react 3.6.2 → 3.7.0-rc-1783305846

package/src/components/ChannelView.tsx

@@ -25,7 +25,6 @@ import { resolveParticipantDisplayName } from '../utils/resolveParticipantDispla
 
 import { Avatar } from './Avatar'
 import { ChannelActionsMenu } from './ChannelActionsMenu'
-import { ChannelHeaderRedesign } from './ChannelHeaderRedesign'
 import { CustomDateSeparator } from './CustomDateSeparator'
 import { CustomMessage } from './CustomMessage'
 import { CustomMessageActions } from './CustomMessage/CustomMessageActions'
@@ -465,34 +464,6 @@ const ChannelViewInner: React.FC<{
     dmAgentEnabled &&
     currentUserIsAccount === false &&
     participantIsAccount === true
-  const hasVisibleMessages = channel.state.messages.some(
-    (message) => message.type !== 'deleted'
-  )
-  const channelBanner = renderChannelBanner ? (
-    <React.Fragment key="lt-channel-banner">
-      {renderChannelBanner()}
-    </React.Fragment>
-  ) : null
-  const redesignedHeader = onParticipantNameClick ? (
-    <ChannelHeaderRedesign
-      onBack={onBack}
-      showBackButton={showBackButton}
-      showChannelInfo={showChannelInfo}
-      showStarButton={showStarButton}
-      dmAgentEnabled={showDmAgentHeader}
-      onLeaveConversation={onLeaveConversation}
-      onBlockParticipant={onBlockParticipant}
-      showDeleteConversation={showDeleteConversation}
-      showBlockParticipant={showBlockParticipant}
-      showReportParticipant={showReportParticipant}
-      onDeleteConversationClick={onDeleteConversationClick}
-      onBlockParticipantClick={onBlockParticipantClick}
-      onReportParticipantClick={onReportParticipantClick}
-      customChannelActions={customChannelActions}
-      renderChannelActions={renderChannelActions}
-      onParticipantNameClick={onParticipantNameClick}
-    />
-  ) : null
 
   // Prevents all message instances from unmounting when ChannelViewInner re-renders
   const MessageOverride = useCallback(
@@ -526,58 +497,41 @@ const ChannelViewInner: React.FC<{
       >
         <Window>
           {/* Custom Channel Header */}
-          {!onParticipantNameClick && (
-            <>
-              <div key="lt-channel-header">
-                <CustomChannelHeader
-                  onBack={onBack}
-                  showBackButton={showBackButton}
-                  showChannelInfo={showChannelInfo}
-                  showStarButton={showStarButton}
-                  dmAgentEnabled={showDmAgentHeader}
-                  onLeaveConversation={onLeaveConversation}
-                  onBlockParticipant={onBlockParticipant}
-                  showDeleteConversation={showDeleteConversation}
-                  showBlockParticipant={showBlockParticipant}
-                  showReportParticipant={showReportParticipant}
-                  onDeleteConversationClick={onDeleteConversationClick}
-                  onBlockParticipantClick={onBlockParticipantClick}
-                  onReportParticipantClick={onReportParticipantClick}
-                  customChannelActions={customChannelActions}
-                  renderChannelActions={renderChannelActions}
-                  renderHeaderTitleBadges={renderHeaderTitleBadges}
-                />
-              </div>
-              {channelBanner}
-            </>
-          )}
+          <div key="lt-channel-header">
+            <CustomChannelHeader
+              onBack={onBack}
+              showBackButton={showBackButton}
+              showChannelInfo={showChannelInfo}
+              showStarButton={showStarButton}
+              dmAgentEnabled={showDmAgentHeader}
+              onLeaveConversation={onLeaveConversation}
+              onBlockParticipant={onBlockParticipant}
+              showDeleteConversation={showDeleteConversation}
+              showBlockParticipant={showBlockParticipant}
+              showReportParticipant={showReportParticipant}
+              onDeleteConversationClick={onDeleteConversationClick}
+              onBlockParticipantClick={onBlockParticipantClick}
+              onReportParticipantClick={onReportParticipantClick}
+              customChannelActions={customChannelActions}
+              renderChannelActions={renderChannelActions}
+              onParticipantNameClick={onParticipantNameClick}
+              renderHeaderTitleBadges={renderHeaderTitleBadges}
+            />
+          </div>
 
-          {/* Stream only renders MessageList.head when there are messages, so
-              empty redesigned channels need the header and banner in normal flow. */}
-          {onParticipantNameClick && !hasVisibleMessages && (
-            <div className="px-4 @lg:px-6">
-              {redesignedHeader}
-              {channelBanner}
-            </div>
-          )}
+          {/* Custom Banner/Summary */}
+          {renderChannelBanner ? (
+            <React.Fragment key="lt-channel-banner">
+              {renderChannelBanner()}
+            </React.Fragment>
+          ) : null}
 
           {/* Message List */}
           <div
             key="lt-channel-message-list"
             className="flex-1 overflow-hidden relative"
           >
-            <MessageList
-              head={
-                onParticipantNameClick && hasVisibleMessages ? (
-                  <div className="sticky top-0 z-10">
-                    {redesignedHeader}
-                    {channelBanner}
-                  </div>
-                ) : undefined
-              }
-              hideDeletedMessages
-              hideNewMessageSeparator={false}
-            />
+            <MessageList hideDeletedMessages hideNewMessageSeparator={false} />
           </div>
 
           {renderConversationFooter ? (

package/src/providers/MessagingProvider.test.tsx

@@ -258,4 +258,34 @@ describe('MessagingProvider', () => {
     await waitFor(() => expect(connectUser).toHaveBeenCalledTimes(2))
     expect(connectUser).toHaveBeenLastCalledWith(authedUser)
   })
+
+  it('uses an injected client directly and never connects a service', async () => {
+    const { connectUser, disconnectUser } = setupServiceMock()
+    const injectedClient = {
+      userID: 'injected-user',
+    } as unknown as StreamChat
+    const states: unknown[] = []
+
+    render(
+      <MessagingProvider client={injectedClient} user={null}>
+        <Probe onState={(s) => states.push(s)} />
+      </MessagingProvider>
+    )
+
+    // Injected client is reported connected immediately, and its instance is
+    // surfaced on the context.
+    await waitFor(() => {
+      const last = states[states.length - 1] as {
+        isConnected: boolean
+        hasClient: boolean
+      }
+      expect(last.isConnected).toBe(true)
+      expect(last.hasClient).toBe(true)
+    })
+
+    // The caller owns the injected client's lifecycle — the provider must not
+    // spin up a StreamChatService or connect/disconnect it.
+    expect(connectUser).not.toHaveBeenCalled()
+    expect(disconnectUser).not.toHaveBeenCalled()
+  })
 })

package/src/providers/MessagingProvider.tsx

@@ -52,6 +52,7 @@ export const MessagingProvider: React.FC<MessagingProviderProps> = ({
   apiKey,
   capabilities = {},
   debug = false,
+  client: injectedClient,
 }) => {
   // Create debug logger that respects the debug prop
   const debugLog = useCallback(
@@ -137,10 +138,18 @@ export const MessagingProvider: React.FC<MessagingProviderProps> = ({
   // not the process-wide StreamChat.getInstance, which is shared across keys and
   // provider instances.
   const clientRef = useRef<{ apiKey: string; client: StreamChat } | null>(null)
-  if (apiKey && clientRef.current?.apiKey !== apiKey) {
+  if (!injectedClient && apiKey && clientRef.current?.apiKey !== apiKey) {
     clientRef.current = { apiKey, client: new StreamChat(apiKey) }
   }
-  const chatClient = apiKey ? (clientRef.current?.client ?? null) : null
+  // An injected client takes precedence and short-circuits the apiKey-derived
+  // client, the service, and the connect/disconnect lifecycle below — the
+  // caller owns that instance (offline/dev via `createMockMessagingClient`, or
+  // a test). Otherwise fall back to the apiKey-derived client as before.
+  const chatClient = injectedClient
+    ? injectedClient
+    : apiKey
+      ? (clientRef.current?.client ?? null)
+      : null
 
   // Create the service once per client lifetime (apiKey). Keyed on `chatClient`
   // — NOT on serviceConfig/debug — so those changing does not spin up a second
@@ -152,6 +161,12 @@ export const MessagingProvider: React.FC<MessagingProviderProps> = ({
     const currentRender = renderCountRef.current
     const currentConfig = serviceConfigRef.current
 
+    // An injected client owns its own connection — never create a service or
+    // connect for it.
+    if (injectedClient) {
+      return
+    }
+
     if (!apiKey || !chatClient || !currentConfig) {
       debugLog('⚠️ SERVICE INIT SKIPPED', {
         renderCount: currentRender,
@@ -182,7 +197,7 @@ export const MessagingProvider: React.FC<MessagingProviderProps> = ({
     // No disconnect on cleanup here — disconnection is owned by the
     // client-cleanup effect below, keyed on `chatClient` (apiKey) and unmount.
     // eslint-disable-next-line react-hooks/exhaustive-deps -- serviceConfig/debug/debugLog are read via refs by design (see above); recreating on them would re-adopt the live client
-  }, [apiKey, chatClient])
+  }, [apiKey, chatClient, injectedClient])
 
   // Track if we've already connected this user with this service to prevent duplicate connections
   const connectedUserRef = useRef<{
@@ -324,8 +339,11 @@ export const MessagingProvider: React.FC<MessagingProviderProps> = ({
 
     return {
       service,
-      client,
-      isConnected,
+      // An injected client is already connected and owns its lifecycle, so
+      // surface it directly and report connected — the apiKey path's `client`
+      // state (set by connectUser) is never populated in that mode.
+      client: injectedClient ?? client,
+      isConnected: injectedClient ? true : isConnected,
       isLoading,
       error,
       capabilities,
@@ -335,6 +353,7 @@ export const MessagingProvider: React.FC<MessagingProviderProps> = ({
   }, [
     service,
     client,
+    injectedClient,
     isConnected,
     isLoading,
     error,

package/src/testing/createMockMessagingClient.stories.tsx

@@ -0,0 +1,77 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import React from 'react'
+
+import { MessagingShell } from '../components/MessagingShell'
+import { MessagingProvider } from '../providers/MessagingProvider'
+
+import { createMockMessagingClient } from './createMockMessagingClient'
+
+/**
+ * Exercises the real MessagingProvider → MessagingShell → ChannelView stack
+ * against an injected mock client (the `dev:mock-messaging` path). Use this to
+ * visually verify send-echo, which the unit tests can't cover because they stub
+ * stream-chat-react.
+ */
+const meta: Meta = {
+  title: 'testing/createMockMessagingClient',
+  parameters: { layout: 'fullscreen' },
+}
+export default meta
+
+const currentUser = { id: 'viewer-1', name: 'You' }
+const participant = {
+  id: 'creator-1',
+  name: 'Ava Creator',
+  image: 'https://i.pravatar.cc/150?img=5',
+}
+
+const Template: StoryFn = () => {
+  const [mock] = React.useState(() =>
+    createMockMessagingClient({
+      currentUser,
+      participant,
+      messages: [
+        {
+          id: 'w1',
+          from: 'them',
+          text: 'Welcome! Thanks for reaching out 👋',
+          metadata: { custom_type: 'MESSAGE_WELCOME' },
+        },
+        {
+          id: 'l1',
+          from: 'them',
+          text: 'Check out my latest drop:',
+          attachments: [
+            {
+              type: 'image',
+              og_scrape_url: 'https://tr.ee/example',
+              title: 'My latest drop',
+              text: 'Limited edition',
+              image_url: 'https://picsum.photos/seed/mockdrop/560/360',
+            },
+          ],
+        },
+        { id: 'm1', from: 'me', text: 'Love it — just grabbed one!' },
+      ],
+      onSend: (text) => `Thanks for saying "${text}"! 🎉`,
+    })
+  )
+
+  return (
+    <MessagingProvider client={mock.client} user={null}>
+      <div className="h-screen w-full bg-[#FBFAF9]">
+        <MessagingShell initialParticipantFilter={mock.participantFilterId} />
+      </div>
+    </MessagingProvider>
+  )
+}
+
+export const Default: StoryFn = Template.bind({})
+Default.parameters = {
+  docs: {
+    description: {
+      story:
+        'Seeded direct conversation rendered through the real shell. Type a message and send it — the mock echoes a canned reply (send-echo).',
+    },
+  },
+}

package/src/testing/createMockMessagingClient.ts

@@ -0,0 +1,231 @@
+import type {
+  Channel,
+  MessageResponse,
+  QueryChannelAPIResponse,
+  SendMessageAPIResponse,
+} from 'stream-chat'
+import { StreamChat } from 'stream-chat'
+
+/** A participant in the mock conversation. */
+export interface MockMessagingUser {
+  id: string
+  name?: string
+  image?: string
+}
+
+/**
+ * A seed message, authored from the viewer's perspective. `from: 'me'` is the
+ * connected user (the viewer); `from: 'them'` is the other participant.
+ */
+export interface MockMessage {
+  id?: string
+  text?: string
+  from: 'me' | 'them'
+  /** Stream attachment payloads, rendered by the toolkit's attachment gate. */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  attachments?: any[]
+  /** e.g. `{ custom_type: 'MESSAGE_WELCOME' }`. */
+  metadata?: Record<string, unknown>
+}
+
+export interface CreateMockMessagingClientOptions {
+  /** The connected/viewing user. */
+  currentUser: MockMessagingUser
+  /** The other party in the direct conversation (e.g. the creator/linker). */
+  participant: MockMessagingUser
+  /** Seed conversation, oldest-first. */
+  messages?: MockMessage[]
+  /** Channel id; defaults to `mock-dm`. */
+  channelId?: string
+  /**
+   * Optional canned reply. Called after the viewer sends a message; return the
+   * reply text (or a partial message) to have `participant` echo a response, or
+   * a falsy value for no reply. Drives the "send echo" in `dev:mock-messaging`.
+   */
+  onSend?: (
+    text: string
+  ) => string | { text?: string; attachments?: unknown[] } | null | undefined
+}
+
+export interface MockMessagingClient {
+  /** Pass to `<MessagingProvider client={...}>`. */
+  client: StreamChat
+  /** The seeded direct-conversation channel. */
+  channel: Channel
+  /** Pass to `<MessagingShell initialParticipantFilter={...}>`. */
+  participantFilterId: string
+}
+
+const REPLY_DELAY_MS = 600
+
+/**
+ * Builds an offline Stream client seeded with a single direct conversation, so
+ * consumers can render the **real** messaging UI (MessagingProvider →
+ * MessagingShell → ChannelView) without a Stream backend — for `dev:mock-*`
+ * surfaces and Storybook. It is a real `StreamChat` whose network calls
+ * (`connectUser`, `queryChannels`, `channel.watch`, `channel.sendMessage`) are
+ * replaced with in-memory behaviour driven by Stream's own channel-state
+ * machinery, so rendering fidelity matches production.
+ *
+ * Ships from `@linktr.ee/messaging-react/testing` and must never be imported by
+ * production code.
+ */
+export function createMockMessagingClient({
+  currentUser,
+  participant,
+  messages = [],
+  channelId = 'mock-dm',
+  onSend,
+}: CreateMockMessagingClientOptions): MockMessagingClient {
+  const client = new StreamChat('mock-api-key', {
+    allowServerSideConnect: true,
+  })
+
+  // Mark connected without opening a WebSocket. `MessagingProvider` renders
+  // `<Chat client={client}>` directly for an injected client, so it never
+  // calls connectUser itself.
+  client.connectUser = async () => ({ me: currentUser }) as never
+  client.disconnectUser = async () => undefined
+  client.userID = currentUser.id
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  client.user = currentUser as any
+
+  const cid = `messaging:${channelId}`
+
+  const toStreamMessage = (
+    message: MockMessage,
+    index: number
+  ): MessageResponse => {
+    const author = message.from === 'me' ? currentUser : participant
+    // Stagger timestamps oldest-first so the list orders naturally.
+    const createdAt = new Date(
+      Date.now() - (messages.length - index) * 60_000
+    ).toISOString()
+    return {
+      id: message.id ?? `mock-msg-${index}`,
+      text: message.text ?? '',
+      type: 'regular',
+      html: message.text ? `<p>${message.text}</p>` : '',
+      user: author,
+      attachments: message.attachments ?? [],
+      latest_reactions: [],
+      own_reactions: [],
+      reaction_counts: {},
+      reaction_scores: {},
+      reply_count: 0,
+      status: 'received',
+      cid,
+      created_at: createdAt,
+      updated_at: createdAt,
+      mentioned_users: [],
+      ...(message.metadata ? { metadata: message.metadata } : {}),
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } as any
+  }
+
+  const seededMessages = messages.map(toStreamMessage)
+
+  const memberState = {
+    [currentUser.id]: {
+      user: { ...currentUser, is_account: false },
+      user_id: currentUser.id,
+      role: 'owner',
+      is_account: false,
+    },
+    [participant.id]: {
+      user: { ...participant, is_account: true },
+      user_id: participant.id,
+      role: 'member',
+      is_account: true,
+    },
+  }
+
+  const channel = client.channel('messaging', channelId, {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    members: [currentUser.id, participant.id] as any,
+  })
+
+  // Seed state locally instead of fetching. Mirrors the proven ChannelView
+  // story mock: override `watch` to populate `state` and return a canned
+  // QueryChannelAPIResponse.
+  channel.watch = async () => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    channel.state.messages = seededMessages as unknown as any[]
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    channel.state.members = memberState as unknown as any
+    return {
+      channel: { members: [currentUser.id, participant.id] },
+      members: [],
+      messages: seededMessages,
+      watchers: [],
+      pinned_messages: [],
+      duration: '0ms',
+    } as unknown as QueryChannelAPIResponse
+  }
+
+  const appendMessage = (message: MessageResponse) => {
+    // addMessageSorted is Stream's own state mutation (dedupes by id), so the
+    // toolkit re-renders through the real channel-state path.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    channel.state.addMessageSorted(message as any)
+    client.dispatchEvent({
+      type: 'message.new',
+      cid,
+      message,
+      user: message.user ?? undefined,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } as any)
+  }
+
+  let sentCount = 0
+  channel.sendMessage = async (message) => {
+    const text =
+      typeof message === 'string'
+        ? message
+        : ((message as { text?: string })?.text ?? '')
+    const sent = {
+      ...toStreamMessage({ text, from: 'me', id: `mock-sent-${sentCount++}` }, seededMessages.length),
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      ...(typeof message === 'object' ? (message as any) : {}),
+      user: currentUser,
+      cid,
+    } as MessageResponse
+
+    // stream-chat-react adds the outgoing message optimistically; addMessageSorted
+    // dedupes by id, so confirming here is safe and idempotent.
+    appendMessage(sent)
+
+    const reply = onSend?.(text)
+    if (reply) {
+      const replyText = typeof reply === 'string' ? reply : reply.text
+      const replyAttachments =
+        typeof reply === 'string' ? undefined : reply.attachments
+      setTimeout(() => {
+        appendMessage(
+          toStreamMessage(
+            {
+              text: replyText,
+              from: 'them',
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              attachments: replyAttachments as any,
+              id: `mock-reply-${sentCount}`,
+            },
+            seededMessages.length
+          )
+        )
+      }, REPLY_DELAY_MS)
+    }
+
+    return { message: sent } as unknown as SendMessageAPIResponse
+  }
+
+  // MessagingShell finds the direct conversation via queryChannels; always
+  // return the one seeded channel regardless of the filter.
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  client.queryChannels = async () => [channel] as any
+
+  // Initialise state up-front so first render already has the conversation.
+  void channel.watch()
+
+  return { client, channel, participantFilterId: participant.id }
+}

package/src/testing/index.ts

@@ -0,0 +1,7 @@
+export {
+  createMockMessagingClient,
+  type CreateMockMessagingClientOptions,
+  type MockMessage,
+  type MockMessagingClient,
+  type MockMessagingUser,
+} from './createMockMessagingClient'

package/src/types.ts

@@ -10,6 +10,7 @@ import type {
   ChannelSort,
   LocalMessage,
   SendMessageAPIResponse,
+  StreamChat,
 } from 'stream-chat'
 import type {
   ChannelPreviewUIComponentProps,
@@ -448,8 +449,20 @@ export interface MessagingShellProps extends ChannelViewPassthroughProps {
 export interface MessagingProviderProps {
   children: React.ReactNode
   user: MessagingUser | null
-  serviceConfig: Omit<StreamChatServiceConfig, 'apiKey'>
-  apiKey: string
+  /**
+   * An already-constructed Stream client. When provided it takes precedence
+   * over `apiKey`: the provider renders `<Chat>` against this exact instance
+   * and does NOT create a StreamChatService or call `connectUser` — the caller
+   * owns the client's connection lifecycle. This is the seam for offline/dev
+   * (`createMockMessagingClient` from `@linktr.ee/messaging-react/testing`) and
+   * for tests, so consumers render the real UI instead of forking it.
+   * `apiKey`/`serviceConfig` are ignored while `client` is set.
+   */
+  client?: StreamChat
+  /** Required unless `client` is provided. */
+  serviceConfig?: Omit<StreamChatServiceConfig, 'apiKey'>
+  /** Required unless `client` is provided. */
+  apiKey?: string
   capabilities?: MessagingCapabilities
   debug?: boolean
 }