@linktr.ee/messaging-react 2.6.2-rc-1780478292 → 3.0.0

package/src/components/MessagingShell/index.tsx

@@ -1,149 +1,73 @@
-import classNames from 'classnames'
-import React, { useState, useCallback, useRef, useEffect } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import type { Channel } from 'stream-chat'
 
 import { useMessaging } from '../../hooks/useMessaging'
 import type { MessagingShellProps } from '../../types'
-import { ChannelList } from '../ChannelList'
 import { ChannelView } from '../ChannelView'
 
-import { EmptyState } from './EmptyState'
 import { ErrorState } from './ErrorState'
 import { LoadingState } from './LoadingState'
 
 /**
- * Main messaging interface component that combines channel list and channel view
+ * Direct-conversation surface for one specific participant.
+ *
+ * Renders a single ChannelView for the channel between the connected user and
+ * `initialParticipantFilter`. If no channel exists yet and
+ * `initialParticipantData` is supplied, the configured StreamChatService
+ * channel creator is invoked to create one.
  */
 export const MessagingShell: React.FC<MessagingShellProps> = ({
   capabilities = {},
-  className,
   renderMessageInputActions,
-  renderMessageInputFooter,
   renderConversationFooter,
   onChannelSelect,
+  onExitConversation,
   initialParticipantFilter,
   initialParticipantData,
   CustomChannelEmptyState,
-  showChannelList = true,
-  filters,
-  channelRenderFilterFn,
-  channelListCustomEmptyStateIndicator,
-  onDeleteConversationClick,
   onBlockParticipantClick,
   onReportParticipantClick,
   dmAgentEnabled,
-  messageMetadata,
   onMessageSent,
-  showStarButton = false,
   chatbotVotingEnabled = false,
   viewerLanguage,
-  renderMessagePreview,
   renderChannelBanner,
-  customProfileContent,
   customChannelActions,
   renderMessage,
   onMessageLinkClick,
-  sendButton,
-  attachmentPreviewList,
 }) => {
   const {
-    service,
     client,
     isConnected,
     isLoading,
     error,
     refreshConnection,
+    service,
     debug,
   } = useMessaging()
 
   const [selectedChannel, setSelectedChannel] = useState<Channel | null>(null)
-  const [hasChannels, setHasChannels] = useState(false)
-  const [channelsLoaded, setChannelsLoaded] = useState(false)
-  const [directConversationMode, setDirectConversationMode] = useState(false)
   const [directConversationError, setDirectConversationError] = useState<
     string | null
   >(null)
+  const [didExit, setDidExit] = useState(false)
 
   const { showDeleteConversation = true } = capabilities
 
-  // Create default filters and merge with provided filters
-  const channelFilters = React.useMemo(() => {
-    const userId = client?.userID
-
-    // Base filters that should always be present
-    const baseFilters = {
-      type: 'messaging',
-      last_message_at: { $exists: true },
-      ...(userId && {
-        members: { $in: [userId] },
-        hidden: false,
-      }),
-    }
-
-    // Merge provided filters with base filters
-    // Provided filters can override base filters if needed
-    return {
-      ...baseFilters,
-      ...filters,
-    }
-  }, [filters, client?.userID])
-
-  // Track if we've already synced channels to prevent repeated API calls
-  const syncedRef = useRef<string | null>(null)
-
-  // Function to sync channels (extracted for reuse)
-  const syncChannels = useCallback(async () => {
-    if (!client || !isConnected) return
-
-    const userId = client.userID
-    if (!userId) return
-
-    try {
-      if (debug) {
-        console.log('[MessagingShell] Syncing channels for user:', userId)
-      }
-
-      const channels = await client.queryChannels(
-        {
-          type: 'messaging',
-          members: { $in: [userId] },
-        },
-        {},
-        { limit: 100 }
-      )
-
-      setHasChannels(channels.length > 0)
-      setChannelsLoaded(true)
-      syncedRef.current = userId // Mark as synced for this user
+  // Stash consumer props that are unstable when passed inline (object
+  // literals, arrow-function callbacks) so the load effect's deps stay
+  // identity-stable. Without this, the documented usage pattern in the
+  // README — passing `initialParticipantData={{ ... }}` and
+  // `onChannelSelect={(ch) => ...}` — re-fires the effect on every render
+  // and triggers a queryChannels call each time.
+  const initialParticipantDataRef = useRef(initialParticipantData)
+  initialParticipantDataRef.current = initialParticipantData
+  const onChannelSelectRef = useRef(onChannelSelect)
+  onChannelSelectRef.current = onChannelSelect
 
-      if (debug) {
-        console.log('[MessagingShell] Channels synced successfully:', {
-          channelCount: channels.length,
-        })
-      }
-    } catch (error) {
-      console.error('[MessagingShell] Failed to sync channels:', error)
-      // Don't mark as synced on error, allow retry
-    }
-  }, [client, isConnected, debug])
-
-  // Sync existing channels to drive empty-state behavior.
   useEffect(() => {
     if (!client || !isConnected) return
 
-    const userId = client.userID
-    if (!userId) return
-
-    // Prevent repeated sync for the same user
-    if (syncedRef.current === userId) return
-
-    syncChannels()
-  }, [client, isConnected, syncChannels])
-
-  // Load initial channel for direct conversation mode
-  useEffect(() => {
-    if (!initialParticipantFilter || !client || !isConnected) return
-
     const loadInitialChannel = async () => {
       const userId = client.userID
       if (!userId) return
@@ -167,13 +91,8 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
 
         if (channels.length > 0) {
           setSelectedChannel(channels[0])
-          setDirectConversationMode(true)
           setDirectConversationError(null)
-
-          // Notify parent component of channel selection
-          if (onChannelSelect) {
-            onChannelSelect(channels[0])
-          }
+          onChannelSelectRef.current?.(channels[0])
 
           if (debug) {
             console.log(
@@ -181,59 +100,43 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
               channels[0].id
             )
           }
-        } else {
-          // No channel found - try to create one if participant data is provided
-          if (initialParticipantData && service) {
-            if (debug) {
-              console.log(
-                '[MessagingShell] No conversation found, creating one for:',
-                initialParticipantData
-              )
-            }
-
-            try {
-              // Use the existing service method to create the channel
-              const channel = await service.startChannelWithParticipant({
-                id: initialParticipantData.id,
-                name: initialParticipantData.name,
-                phone: initialParticipantData.phone,
-              })
+          return
+        }
 
-              setSelectedChannel(channel)
-              setDirectConversationMode(true)
-              setDirectConversationError(null)
+        const participantData = initialParticipantDataRef.current
+        if (!participantData || !service) {
+          setDirectConversationError('No conversation found with this account')
+          if (debug) {
+            console.log(
+              '[MessagingShell] No conversation found for:',
+              initialParticipantFilter
+            )
+          }
+          return
+        }
 
-              // Notify parent component of channel selection
-              if (onChannelSelect) {
-                onChannelSelect(channel)
-              }
+        try {
+          const channel = await service.startChannelWithParticipant({
+            id: participantData.id,
+            name: participantData.name,
+            phone: participantData.phone,
+          })
+          setSelectedChannel(channel)
+          setDirectConversationError(null)
+          onChannelSelectRef.current?.(channel)
 
-              if (debug) {
-                console.log(
-                  '[MessagingShell] Channel created and loaded:',
-                  channel.id
-                )
-              }
-            } catch (createErr) {
-              console.error(
-                '[MessagingShell] Failed to create conversation:',
-                createErr
-              )
-              setDirectConversationError('Failed to create conversation')
-            }
-          } else {
-            // No participant data provided, show error
-            setDirectConversationError(
-              'No conversation found with this account'
+          if (debug) {
+            console.log(
+              '[MessagingShell] Channel created and loaded:',
+              channel.id
             )
-
-            if (debug) {
-              console.log(
-                '[MessagingShell] No conversation found for:',
-                initialParticipantFilter
-              )
-            }
           }
+        } catch (createErr) {
+          console.error(
+            '[MessagingShell] Failed to create conversation:',
+            createErr
+          )
+          setDirectConversationError('Failed to create conversation')
         }
       } catch (err) {
         console.error(
@@ -244,202 +147,74 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
       }
     }
 
-    loadInitialChannel()
-  }, [
-    initialParticipantFilter,
-    initialParticipantData,
-    client,
-    isConnected,
-    service,
-    debug,
-    onChannelSelect,
-  ])
-
-  const handleChannelSelect = useCallback(
-    (channel: Channel) => {
-      setSelectedChannel(channel)
-      onChannelSelect?.(channel)
-    },
-    [onChannelSelect]
-  )
-
-  const handleBackToChannelList = useCallback(() => {
-    // In direct conversation mode, don't allow going back to channel list
-    // The parent component should handle navigation
-    if (directConversationMode) return
-
+    void loadInitialChannel()
+  }, [initialParticipantFilter, client, isConnected, service, debug])
+
+  // Leave / block clears the selected channel and notifies the consumer.
+  // The consumer owns what happens next — typically unmounting MessagingShell
+  // or re-rendering with new participant data. When no callback is provided,
+  // the shell renders an "ended" state rather than an indefinite spinner so
+  // the surface remains honest about why no conversation is shown.
+  const onExitConversationRef = useRef(onExitConversation)
+  onExitConversationRef.current = onExitConversation
+  const handleExitConversation = useCallback(() => {
     setSelectedChannel(null)
-  }, [directConversationMode])
-
-  const handleLeaveConversation = useCallback(
-    async (channel: Channel) => {
-      if (debug) {
-        console.log('[MessagingShell] Leaving conversation:', channel.id)
-      }
-      setSelectedChannel(null)
-      setDirectConversationMode(false) // Exit direct conversation mode
-
-      // Force re-sync to update the existing participants list
-      syncedRef.current = null
-      await syncChannels()
-    },
-    [syncChannels, debug]
-  )
-
-  const handleBlockParticipant = useCallback(
-    async (participantId?: string) => {
-      if (debug) {
-        console.log('[MessagingShell] Blocking participant:', participantId)
-      }
-      setSelectedChannel(null)
-      setDirectConversationMode(false) // Exit direct conversation mode
-
-      // Force re-sync to update the existing participants list
-      syncedRef.current = null
-      await syncChannels()
-    },
-    [syncChannels, debug]
-  )
-
-  const isChannelSelected = Boolean(selectedChannel)
+    setDidExit(true)
+    onExitConversationRef.current?.()
+  }, [])
 
-  // Show loading state
   if (isLoading) {
-    return (
-      <div className={classNames('h-full', className)}>
-        <LoadingState />
-      </div>
-    )
+    return <LoadingState />
   }
 
-  // Show error state
   if (error) {
-    return (
-      <div className={classNames('h-full', className)}>
-        <ErrorState message={error} onBack={refreshConnection} />
-      </div>
-    )
+    return <ErrorState message={error} onBack={refreshConnection} />
   }
 
-  // Show not connected state
   if (!isConnected || !client) {
     return (
-      <div className={classNames('h-full', className)}>
-        <ErrorState
-          message="Not connected to messaging service"
-          onBack={refreshConnection}
-        />
-      </div>
+      <ErrorState
+        message="Not connected to messaging service"
+        onBack={refreshConnection}
+      />
     )
   }
 
-  // Show direct conversation error state
   if (directConversationError) {
-    return (
-      <div className={classNames('h-full', className)}>
-        <ErrorState message={directConversationError} />
-      </div>
-    )
+    return <ErrorState message={directConversationError} />
   }
 
-  return (
-    <div
-      className={classNames(
-        'messaging-shell h-full bg-background-primary overflow-hidden',
-        className
-      )}
-    >
-      <div className="flex h-full min-h-0">
-        {/* Channel List Sidebar */}
-        <div
-          className={classNames(
-            'messaging-channel-list-sidebar min-h-0 min-w-0 lg:flex lg:flex-col',
-            {
-              '!hidden': showChannelList === false || directConversationMode,
-              // Hide on mobile when channel selected, show on desktop with consistent wide width
-              'hidden lg:flex lg:flex-1 lg:max-w-2xl':
-                showChannelList !== false &&
-                !directConversationMode &&
-                isChannelSelected,
-              // Show on mobile when no channel selected, use same wide width on desktop
-              'flex flex-col w-full lg:flex-1 lg:max-w-2xl':
-                showChannelList !== false &&
-                !directConversationMode &&
-                !isChannelSelected,
-            }
-          )}
-        >
-          <ChannelList
-            onChannelSelect={handleChannelSelect}
-            selectedChannel={selectedChannel || undefined}
-            filters={channelFilters}
-            channelRenderFilterFn={channelRenderFilterFn}
-            customEmptyStateIndicator={channelListCustomEmptyStateIndicator}
-            renderMessagePreview={renderMessagePreview}
-            viewerLanguage={viewerLanguage}
-          />
-        </div>
+  if (didExit && !selectedChannel) {
+    return <ErrorState message="Conversation ended" />
+  }
 
-        {/* Channel View */}
-        <div
-          className={classNames(
-            'messaging-conversation-view flex-1 flex-col min-w-0 min-h-0',
-            {
-              // In direct conversation mode (or waiting for it), always show (full width)
-              flex:
-                directConversationMode ||
-                isChannelSelected ||
-                initialParticipantFilter,
-              // Normal mode: hide on mobile when no channel selected
-              'hidden lg:flex':
-                !directConversationMode &&
-                !isChannelSelected &&
-                !initialParticipantFilter,
-            }
-          )}
-        >
-          {selectedChannel ? (
-            <div className="flex-1 min-h-0 flex flex-col">
-              <ChannelView
-                channel={selectedChannel}
-                key={selectedChannel.id}
-                onBack={handleBackToChannelList}
-                showBackButton={!directConversationMode}
-                renderMessageInputActions={renderMessageInputActions}
-                renderMessageInputFooter={renderMessageInputFooter}
-                renderConversationFooter={renderConversationFooter}
-                renderChannelBanner={renderChannelBanner}
-                onLeaveConversation={handleLeaveConversation}
-                onBlockParticipant={handleBlockParticipant}
-                CustomChannelEmptyState={CustomChannelEmptyState}
-                showDeleteConversation={showDeleteConversation}
-                onDeleteConversationClick={onDeleteConversationClick}
-                onBlockParticipantClick={onBlockParticipantClick}
-                onReportParticipantClick={onReportParticipantClick}
-                dmAgentEnabled={dmAgentEnabled}
-                messageMetadata={messageMetadata}
-                onMessageSent={onMessageSent}
-                showStarButton={showStarButton}
-                chatbotVotingEnabled={chatbotVotingEnabled}
-                viewerLanguage={viewerLanguage}
-                customProfileContent={customProfileContent}
-                customChannelActions={customChannelActions}
-                renderMessage={renderMessage}
-                onMessageLinkClick={onMessageLinkClick}
-                sendButton={sendButton}
-                attachmentPreviewList={attachmentPreviewList}
-              />
-            </div>
-          ) : initialParticipantFilter ? (
-            // Show loading while creating/loading direct conversation channel
-            <LoadingState />
-          ) : (
-            <EmptyState
-              hasChannels={hasChannels}
-              channelsLoaded={channelsLoaded}
-            />
-          )}
-        </div>
+  if (!selectedChannel) {
+    return <LoadingState />
+  }
+
+  return (
+    <div className="messaging-shell h-full bg-background-primary overflow-hidden">
+      <div className="flex h-full min-h-0 flex-col">
+        <ChannelView
+          channel={selectedChannel}
+          key={selectedChannel.id}
+          renderMessageInputActions={renderMessageInputActions}
+          renderConversationFooter={renderConversationFooter}
+          renderChannelBanner={renderChannelBanner}
+          onLeaveConversation={handleExitConversation}
+          onBlockParticipant={handleExitConversation}
+          CustomChannelEmptyState={CustomChannelEmptyState}
+          showDeleteConversation={showDeleteConversation}
+          onBlockParticipantClick={onBlockParticipantClick}
+          onReportParticipantClick={onReportParticipantClick}
+          dmAgentEnabled={dmAgentEnabled}
+          onMessageSent={onMessageSent}
+          chatbotVotingEnabled={chatbotVotingEnabled}
+          viewerLanguage={viewerLanguage}
+          customChannelActions={customChannelActions}
+          renderMessage={renderMessage}
+          onMessageLinkClick={onMessageLinkClick}
+        />
       </div>
     </div>
   )