@linktr.ee/messaging-react 1.11.4 → 1.11.5-rc-1765008275

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "1.11.4",
+  "version": "1.11.5-rc-1765008275",
   "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

@@ -43,7 +43,7 @@ type BlockedUser = {
 const CustomChannelHeader: React.FC<{
   onBack?: () => void
   showBackButton: boolean
-  onShowInfo?: () => void
+  onShowInfo: () => void
   canShowInfo: boolean
 }> = ({ onBack, showBackButton, onShowInfo, canShowInfo }) => {
   const { channel } = useChannelStateContext()
@@ -69,6 +69,8 @@ const CustomChannelHeader: React.FC<{
             !showBackButton && 'invisible'
           )}
           onClick={onBack || (() => {})}
+          type="button"
+          aria-label="Back to conversations"
         >
           <ArrowLeftIcon className="size-5 text-black/90" />
         </button>
@@ -87,7 +89,9 @@ const CustomChannelHeader: React.FC<{
           className={classNames(
             'size-10 rounded-full bg-[#F1F0EE] flex items-center justify-center'
           )}
-          onClick={onShowInfo || (() => {})}
+          onClick={onShowInfo}
+          type="button"
+          aria-label="Show info"
         >
           <DotsThreeIcon className="size-5 text-black/90" />
         </button>
@@ -136,7 +140,7 @@ const CustomChannelHeader: React.FC<{
  * Channel info dialog (matching original implementation)
  */
 const ChannelInfoDialog: React.FC<{
-  isOpen: boolean
+  dialogRef: React.RefObject<HTMLDialogElement>
   onClose: () => void
   participant: ChannelMemberResponse | undefined
   channel: ChannelType
@@ -144,7 +148,7 @@ const ChannelInfoDialog: React.FC<{
   onLeaveConversation?: (channel: ChannelType) => void
   onBlockParticipant?: (participantId?: string) => void
 }> = ({
-  isOpen,
+  dialogRef,
   onClose,
   participant,
   channel,
@@ -153,24 +157,11 @@ const ChannelInfoDialog: React.FC<{
   onBlockParticipant,
 }) => {
   const { service, debug } = useMessagingContext()
-  const dialogRef = useRef<HTMLDialogElement>(null)
   const [isParticipantBlocked, setIsParticipantBlocked] = useState(false)
   const [isLeaving, setIsLeaving] = useState(false)
   const [isUpdatingBlockStatus, setIsUpdatingBlockStatus] = useState(false)
 
-  // Sync dialog open state with prop
-  useEffect(() => {
-    const dialog = dialogRef.current
-    if (!dialog) return
-
-    if (isOpen) {
-      dialog.showModal()
-    } else {
-      dialog.close()
-    }
-  }, [isOpen])
-
-  // Check if participant is blocked
+  // Check if participant is blocked when participant changes
   const checkIsParticipantBlocked = useCallback(async () => {
     if (!service || !participant?.user?.id) return
 
@@ -189,10 +180,8 @@ const ChannelInfoDialog: React.FC<{
   }, [service, participant?.user?.id])
 
   useEffect(() => {
-    if (isOpen) {
-      checkIsParticipantBlocked()
-    }
-  }, [isOpen, checkIsParticipantBlocked])
+    checkIsParticipantBlocked()
+  }, [checkIsParticipantBlocked])
 
   const handleLeaveConversation = async () => {
     if (isLeaving) return
@@ -426,7 +415,7 @@ const ChannelViewInner: React.FC<{
   onBlockParticipant,
 }) => {
   const { channel } = useChannelStateContext()
-  const [showInfo, setShowInfo] = useState(false)
+  const infoDialogRef = useRef<HTMLDialogElement>(null)
 
   // Get participant info for info dialog
   const participant = React.useMemo(() => {
@@ -457,6 +446,14 @@ const ChannelViewInner: React.FC<{
     return undefined
   }, [channel.data])
 
+  const handleShowInfo = useCallback(() => {
+    infoDialogRef.current?.showModal()
+  }, [])
+
+  const handleCloseInfo = useCallback(() => {
+    infoDialogRef.current?.close()
+  }, [])
+
   return (
     <>
       <Window>
@@ -465,7 +462,7 @@ const ChannelViewInner: React.FC<{
           <CustomChannelHeader
             onBack={onBack}
             showBackButton={showBackButton}
-            onShowInfo={() => setShowInfo(true)}
+            onShowInfo={handleShowInfo}
             canShowInfo={Boolean(participant)}
           />
         </div>
@@ -487,8 +484,8 @@ const ChannelViewInner: React.FC<{
 
       {/* Channel Info Dialog */}
       <ChannelInfoDialog
-        isOpen={showInfo}
-        onClose={() => setShowInfo(false)}
+        dialogRef={infoDialogRef}
+        onClose={handleCloseInfo}
         participant={participant}
         channel={channel}
         followerStatusLabel={followerStatusLabel}
@@ -502,37 +499,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}
-        EmptyStateIndicator={CustomChannelEmptyState}
+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
+        )}
       >
-        <ChannelViewInner
-          onBack={onBack}
-          showBackButton={showBackButton}
-          renderMessageInputActions={renderMessageInputActions}
-          onLeaveConversation={onLeaveConversation}
-          onBlockParticipant={onBlockParticipant}
-          CustomChannelEmptyState={CustomChannelEmptyState}
-        />
-      </Channel>
-    </div>
-  )
-}
+        <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/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'