@linktr.ee/messaging-react 1.11.3 → 1.11.5-rc-1765005296

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "1.11.3",
+  "version": "1.11.5-rc-1765005296",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.js",

package/src/components/ChannelList/CustomChannelPreview.tsx

@@ -6,123 +6,126 @@ import { ChannelPreviewUIComponentProps } from 'stream-chat-react'
 import { formatRelativeTime } from '../../utils/formatRelativeTime'
 import { Avatar } from '../Avatar'
 
+type CustomChannelPreviewProps = ChannelPreviewUIComponentProps & {
+  selectedChannel?: Channel | null
+  onChannelSelect: (channel: Channel) => void
+  debug?: boolean
+}
+
 /**
  * Custom channel preview that handles selection
  */
-const CustomChannelPreview: React.FC<
-  ChannelPreviewUIComponentProps & {
-    selectedChannel?: Channel | null
-    onChannelSelect: (channel: Channel) => void
-    debug?: boolean
-  }
-> = ({ channel, selectedChannel, onChannelSelect, debug = false, unread }) => {
-  const isSelected = selectedChannel?.id === channel?.id
+const CustomChannelPreview = React.memo<CustomChannelPreviewProps>(
+  ({ channel, selectedChannel, onChannelSelect, debug = false, unread }) => {
+    const isSelected = selectedChannel?.id === channel?.id
 
-  const handleClick = () => {
-    if (channel) {
-      onChannelSelect(channel)
+    const handleClick = () => {
+      if (channel) {
+        onChannelSelect(channel)
+      }
     }
-  }
 
-  // Get participant info
-  const members = Object.values(channel?.state?.members || {})
-  const participant = members.find(
-    (member) => member.user?.id && member.user.id !== channel?._client?.userID
-  )
-  const participantName = participant?.user?.name || 'Conversation'
-  const participantImage = participant?.user?.image
-
-  // Get last message and format timestamp
-  const lastMessage =
-    channel?.state?.messages?.[channel.state.messages.length - 1]
-
-  // Fallback order: text -> attachment URL -> "No messages yet"
-  const getLastMessageText = () => {
-    if (lastMessage?.text) return lastMessage.text
-
-    const attachment = lastMessage?.attachments?.[0]
-    if (attachment?.asset_url) return attachment.asset_url
-    if (attachment?.image_url) return attachment.image_url
-    if (attachment?.og_scrape_url) return attachment.og_scrape_url
-    if (attachment?.thumb_url) return attachment.thumb_url
-
-    return 'No messages yet'
-  }
+    // Get participant info
+    const members = Object.values(channel?.state?.members || {})
+    const participant = members.find(
+      (member) => member.user?.id && member.user.id !== channel?._client?.userID
+    )
+    const participantName = participant?.user?.name || 'Conversation'
+    const participantImage = participant?.user?.image
 
-  const lastMessageText = getLastMessageText()
-  const lastMessageTime = lastMessage?.created_at
-    ? formatRelativeTime(new Date(lastMessage.created_at))
-    : ''
-
-  // Use the unread prop passed by Stream Chat (reactive and updates automatically)
-  const unreadCount = unread ?? 0
-
-  if (debug) {
-    console.log('📺 [ChannelList] 📋 CHANNEL PREVIEW RENDER', {
-      channelId: channel?.id,
-      isSelected,
-      participantName,
-      unreadCount,
-      hasTimestamp: !!lastMessageTime,
-    })
-  }
+    // Get last message and format timestamp
+    const lastMessage =
+      channel?.state?.messages?.[channel.state.messages.length - 1]
+
+    // Fallback order: text -> attachment URL -> "No messages yet"
+    const getLastMessageText = () => {
+      if (lastMessage?.text) return lastMessage.text
+
+      const attachment = lastMessage?.attachments?.[0]
+      if (attachment?.asset_url) return attachment.asset_url
+      if (attachment?.image_url) return attachment.image_url
+      if (attachment?.og_scrape_url) return attachment.og_scrape_url
+      if (attachment?.thumb_url) return attachment.thumb_url
+
+      return 'No messages yet'
+    }
 
-  return (
-    <button
-      type="button"
-      onClick={handleClick}
-      className={classNames(
-        'group w-full px-4 py-3 transition-colors text-left max-w-full overflow-hidden focus-ring',
-        {
-          'bg-primary-alt/10 border-l-4 border-l-primary': isSelected,
-          'hover:bg-sand': !isSelected,
-        }
-      )}
-    >
-      <div className="flex items-start gap-3">
-        {/* Avatar */}
-        <Avatar
-          id={participant?.user?.id || channel.id || 'unknown'}
-          name={participantName}
-          image={participantImage}
-          size={44}
-          className="[&_.avatar-fallback]:group-hover:bg-[#eeeeee]"
-        />
-
-        {/* Content column */}
-        <div className="flex-1 min-w-0 flex flex-col gap-1">
-          {/* Name and timestamp row */}
-          <div className="flex items-center justify-between gap-2">
-            <h3
-              className={classNames(
-                'text-sm font-medium truncate',
-                isSelected ? 'text-primary' : 'text-charcoal'
+    const lastMessageText = getLastMessageText()
+    const lastMessageTime = lastMessage?.created_at
+      ? formatRelativeTime(new Date(lastMessage.created_at))
+      : ''
+
+    // Use the unread prop passed by Stream Chat (reactive and updates automatically)
+    const unreadCount = unread ?? 0
+
+    if (debug) {
+      console.log('📺 [ChannelList] 📋 CHANNEL PREVIEW RENDER', {
+        channelId: channel?.id,
+        isSelected,
+        participantName,
+        unreadCount,
+        hasTimestamp: !!lastMessageTime,
+      })
+    }
+
+    return (
+      <button
+        type="button"
+        onClick={handleClick}
+        className={classNames(
+          'group w-full px-4 py-3 transition-colors text-left max-w-full overflow-hidden focus-ring',
+          {
+            'bg-primary-alt/10 border-l-4 border-l-primary': isSelected,
+            'hover:bg-sand': !isSelected,
+          }
+        )}
+      >
+        <div className="flex items-start gap-3">
+          {/* Avatar */}
+          <Avatar
+            id={participant?.user?.id || channel.id || 'unknown'}
+            name={participantName}
+            image={participantImage}
+            size={44}
+            className="[&_.avatar-fallback]:group-hover:bg-[#eeeeee]"
+          />
+
+          {/* Content column */}
+          <div className="flex-1 min-w-0 flex flex-col gap-1">
+            {/* Name and timestamp row */}
+            <div className="flex items-center justify-between gap-2">
+              <h3
+                className={classNames(
+                  'text-sm font-medium truncate',
+                  isSelected ? 'text-primary' : 'text-charcoal'
+                )}
+              >
+                {participantName}
+              </h3>
+              {lastMessageTime && (
+                <span className="text-xs text-stone flex-shrink-0">
+                  {lastMessageTime}
+                </span>
               )}
-            >
-              {participantName}
-            </h3>
-            {lastMessageTime && (
-              <span className="text-xs text-stone flex-shrink-0">
-                {lastMessageTime}
-              </span>
-            )}
-          </div>
+            </div>
 
-          {/* Message and unread badge row */}
-          <div className="flex items-center justify-between gap-2 min-w-0">
-            <p className="text-xs text-stone mr-2 flex-1 line-clamp-2">
-              {lastMessageText}
-            </p>
-            {unreadCount > 0 && (
-              <span className="bg-[#7f22fe] text-white text-xs px-2 py-0.5 rounded-full min-w-[20px] text-center flex-shrink-0">
-                {unreadCount > 99 ? '99+' : unreadCount}
-              </span>
-            )}
+            {/* Message and unread badge row */}
+            <div className="flex items-center justify-between gap-2 min-w-0">
+              <p className="text-xs text-stone mr-2 flex-1 line-clamp-2">
+                {lastMessageText}
+              </p>
+              {unreadCount > 0 && (
+                <span className="bg-[#7f22fe] text-white text-xs px-2 py-0.5 rounded-full min-w-[20px] text-center flex-shrink-0">
+                  {unreadCount > 99 ? '99+' : unreadCount}
+                </span>
+              )}
+            </div>
           </div>
         </div>
-      </div>
-    </button>
-  )
-}
+      </button>
+    )
+  }
+)
 
 export default CustomChannelPreview
+CustomChannelPreview.displayName = 'CustomChannelPreview'

package/src/components/ChannelList/index.tsx

@@ -1,5 +1,6 @@
 import classNames from 'classnames'
 import React from 'react'
+import type { ChannelPreviewUIComponentProps } from 'stream-chat-react'
 import { ChannelList as StreamChannelList } from 'stream-chat-react'
 
 import { useMessagingContext } from '../../providers/MessagingProvider'
@@ -10,74 +11,62 @@ import CustomChannelPreview from './CustomChannelPreview'
 /**
  * Channel list component with customizable header and actions
  */
-export const ChannelList: React.FC<ChannelListProps> = ({
-  onChannelSelect,
-  selectedChannel,
-  filters,
-  className,
-  customEmptyStateIndicator,
-}) => {
-  // Track renders
-  const renderCountRef = React.useRef(0)
-  renderCountRef.current++
+export const ChannelList = React.memo<ChannelListProps>(
+  ({
+    onChannelSelect,
+    selectedChannel,
+    filters,
+    className,
+    customEmptyStateIndicator,
+  }) => {
+    // Track renders
+    const renderCountRef = React.useRef(0)
+    renderCountRef.current++
 
-  // Get debug flag from context
-  const { debug = false } = useMessagingContext()
+    // Get debug flag from context
+    const { debug = false } = useMessagingContext()
 
-  if (debug) {
-    console.log('📺 [ChannelList] 🔄 RENDER START', {
-      renderCount: renderCountRef.current,
-      selectedChannelId: selectedChannel?.id,
-      filters,
-    })
-  }
-
-  return (
-    <div
-      className={classNames(
-        'messaging-channel-list h-full flex flex-col min-w-0 overflow-hidden',
-        className
-      )}
-    >
-      {/* Channel List */}
-      <div className="flex-1 overflow-hidden min-w-0">
-        {(() => {
-          if (debug) {
-            console.log('📺 [ChannelList] 🎬 RENDERING STREAM CHANNEL LIST', {
-              renderCount: renderCountRef.current,
-              filters,
-            })
-          }
+    if (debug) {
+      console.log('📺 [ChannelList] 🔄 RENDER START', {
+        renderCount: renderCountRef.current,
+        selectedChannelId: selectedChannel?.id,
+        filters,
+      })
+    }
 
-          return (
-            <StreamChannelList
-              key={JSON.stringify(filters)}
-              filters={filters}
-              sort={{ last_message_at: -1 }}
-              options={{ limit: 30 }}
-              Preview={(props) => {
-                if (debug) {
-                  console.log('📺 [ChannelList] 📋 CHANNEL PREVIEW RENDER', {
-                    channelId: props.channel?.id,
-                    selectedChannelId: selectedChannel?.id,
-                    isSelected: selectedChannel?.id === props.channel?.id,
-                  })
-                }
+    // Memoize Preview component to prevent re-renders
+    const PreviewComponent = React.useMemo(() => {
+      const Preview = (props: ChannelPreviewUIComponentProps) => (
+        <CustomChannelPreview
+          {...props}
+          selectedChannel={selectedChannel}
+          onChannelSelect={onChannelSelect}
+          debug={debug}
+        />
+      )
+      return Preview
+    }, [selectedChannel, onChannelSelect, debug])
 
-                return (
-                  <CustomChannelPreview
-                    {...props}
-                    selectedChannel={selectedChannel}
-                    onChannelSelect={onChannelSelect}
-                    debug={debug}
-                  />
-                )
-              }}
-              EmptyStateIndicator={customEmptyStateIndicator}
-            />
-          )
-        })()}
+    return (
+      <div
+        className={classNames(
+          'messaging-channel-list h-full flex flex-col min-w-0 overflow-hidden',
+          className
+        )}
+      >
+        {/* Channel List */}
+        <div className="flex-1 overflow-hidden min-w-0">
+          <StreamChannelList
+            key={JSON.stringify(filters)}
+            filters={filters}
+            sort={{ last_message_at: -1 }}
+            options={{ limit: 30 }}
+            Preview={PreviewComponent}
+            EmptyStateIndicator={customEmptyStateIndicator}
+          />
+        </div>
       </div>
-    </div>
-  )
-}
+    )
+  }
+)
+ChannelList.displayName = 'ChannelList'

package/src/components/ChannelView.tsx

@@ -424,14 +424,10 @@ const ChannelViewInner: React.FC<{
   renderMessageInputActions,
   onLeaveConversation,
   onBlockParticipant,
-  CustomChannelEmptyState = ChannelEmptyState,
 }) => {
   const { channel } = useChannelStateContext()
   const [showInfo, setShowInfo] = useState(false)
 
-  // Check if channel has messages - using context to reactively subscribe to message updates
-  const hasMessages = (channel?.state?.messages?.length ?? 0) > 0
-
   // Get participant info for info dialog
   const participant = React.useMemo(() => {
     const members = Object.values(channel.state.members || {})
@@ -481,13 +477,6 @@ const ChannelViewInner: React.FC<{
             hideNewMessageSeparator={false}
             messageActions={[]}
           />
-
-          {/* Show custom empty state when no messages */}
-          {!hasMessages && CustomChannelEmptyState && (
-            <div className="absolute inset-0 w-full h-full">
-              <CustomChannelEmptyState />
-            </div>
-          )}
         </div>
 
         {/* Message Input */}
@@ -513,33 +502,40 @@ const ChannelViewInner: React.FC<{
 /**
  * Channel view component with message list and input
  */
-export const ChannelView: React.FC<ChannelViewProps> = ({
-  channel,
-  onBack,
-  showBackButton = false,
-  renderMessageInputActions,
-  onLeaveConversation,
-  onBlockParticipant,
-  className,
-  CustomChannelEmptyState = ChannelEmptyState,
-}) => {
-  return (
-    <div
-      className={classNames(
-        'messaging-channel-view h-full flex flex-col',
-        className
-      )}
-    >
-      <Channel channel={channel} MessageSystem={CustomSystemMessage}>
-        <ChannelViewInner
-          onBack={onBack}
-          showBackButton={showBackButton}
-          renderMessageInputActions={renderMessageInputActions}
-          onLeaveConversation={onLeaveConversation}
-          onBlockParticipant={onBlockParticipant}
-          CustomChannelEmptyState={CustomChannelEmptyState}
-        />
-      </Channel>
-    </div>
-  )
-}
+export const ChannelView = React.memo<ChannelViewProps>(
+  ({
+    channel,
+    onBack,
+    showBackButton = false,
+    renderMessageInputActions,
+    onLeaveConversation,
+    onBlockParticipant,
+    className,
+    CustomChannelEmptyState = ChannelEmptyState,
+  }) => {
+    return (
+      <div
+        className={classNames(
+          'messaging-channel-view h-full flex flex-col',
+          className
+        )}
+      >
+        <Channel
+          channel={channel}
+          MessageSystem={CustomSystemMessage}
+          EmptyStateIndicator={CustomChannelEmptyState}
+        >
+          <ChannelViewInner
+            onBack={onBack}
+            showBackButton={showBackButton}
+            renderMessageInputActions={renderMessageInputActions}
+            onLeaveConversation={onLeaveConversation}
+            onBlockParticipant={onBlockParticipant}
+            CustomChannelEmptyState={CustomChannelEmptyState}
+          />
+        </Channel>
+      </div>
+    )
+  }
+)
+ChannelView.displayName = 'ChannelView'

package/src/components/MessagingShell/ChannelEmptyState.tsx

@@ -3,15 +3,4 @@ import React from 'react'
 /**
  * Empty state component shown when a channel has no messages
  */
-export const ChannelEmptyState: React.FC = () => (
-  <div className="messaging-channel-empty-state flex items-center justify-center h-full p-8 text-balance">
-    <div className="text-center max-w-sm">
-      <h2 className="font-semibold text-charcoal mb-2">No messages yet 👀</h2>
-
-      <p className="text-stone text-xs">
-        Share to social media to generate more conversations
-      </p>
-    </div>
-  </div>
-)
-
+export const ChannelEmptyState: React.FC = () => null

package/src/components/MessagingShell/EmptyState.tsx

@@ -96,9 +96,8 @@ const ChatBubblesIllustration = ({ className }: { className?: string }) => (
 /**
  * Empty state component shown when no channel is selected
  */
-export const EmptyState: React.FC<{
-  hasChannels: boolean
-}> = ({ hasChannels }) => (
+export const EmptyState = React.memo<{ hasChannels: boolean }>(
+  ({ hasChannels }) => (
   <div className="messaging-empty-state flex items-center justify-center h-full p-8 text-balance">
     <div className="flex flex-col items-center max-w-sm text-center">
       <ChatBubblesIllustration />
@@ -114,4 +113,5 @@ export const EmptyState: React.FC<{
       )}
     </div>
   </div>
-)
+))
+EmptyState.displayName = 'EmptyState'

package/src/components/MessagingShell/ErrorState.tsx

@@ -1,12 +1,14 @@
 import React from 'react'
 
+type ErrorStateProps = {
+  message: string
+  onBack?: () => void
+}
+
 /**
  * Error state component shown when something goes wrong
  */
-export const ErrorState: React.FC<{
-  message: string
-  onBack?: () => void
-}> = ({ message, onBack }) => (
+export const ErrorState = React.memo<ErrorStateProps>(({ message, onBack }) => (
   <div className="messaging-error-state flex items-center justify-center h-full p-8">
     <div className="text-center max-w-sm">
       <div className="w-24 h-24 bg-danger-alt/20 rounded-full flex items-center justify-center mx-auto mb-6">
@@ -28,4 +30,5 @@ export const ErrorState: React.FC<{
       )}
     </div>
   </div>
-)
+))
+ErrorState.displayName = 'ErrorState'

package/src/components/MessagingShell/LoadingState.tsx

@@ -1,13 +1,16 @@
+import React from 'react'
+
 import Loading from '../Loading'
 
 /**
  * Loading state component
  */
-export const LoadingState = () => (
+export const LoadingState = React.memo(() => (
   <div className="messaging-loading-state flex items-center justify-center h-full">
     <div className="flex items-center">
       <Loading className="w-6 h-6" />
       <span className="text-sm text-stone">Loading messages</span>
     </div>
   </div>
-)
+))
+LoadingState.displayName = 'LoadingState'

package/src/components/MessagingShell/index.tsx

@@ -111,7 +111,16 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
         })
       })
 
-      setExistingParticipantIds(memberIds)
+      // Only update if the set contents have changed to prevent re-renders
+      setExistingParticipantIds((prev) => {
+        if (
+          prev.size === memberIds.size &&
+          [...prev].every((id) => memberIds.has(id))
+        ) {
+          return prev
+        }
+        return memberIds
+      })
       setHasChannels(channels.length > 0)
       syncedRef.current = userId // Mark as synced for this user
 
@@ -315,6 +324,15 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
     participantPickerRef.current?.close()
   }, [])
 
+  const handleDialogBackdropClick = useCallback(
+    (e: React.MouseEvent<HTMLDialogElement>) => {
+      if (e.target === participantPickerRef.current) {
+        handleCloseParticipantPicker()
+      }
+    },
+    [handleCloseParticipantPicker]
+  )
+
   const handleLeaveConversation = useCallback(
     async (channel: Channel) => {
       if (debug) {
@@ -459,11 +477,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
         <dialog
           ref={participantPickerRef}
           className="mes-dialog"
-          onClick={(e) => {
-            if (e.target === participantPickerRef.current) {
-              handleCloseParticipantPicker()
-            }
-          }}
+          onClick={handleDialogBackdropClick}
           onClose={handleCloseParticipantPicker}
         >
           <div className="h-full w-full bg-white shadow-max-elevation-light">