@linktr.ee/messaging-react 1.0.2 → 1.1.0-rc-1760927977

package/src/components/MessagingShell/index.tsx

@@ -1,65 +1,68 @@
-import React, { useState, useCallback, useRef, useEffect } from 'react';
-import classNames from 'classnames';
-import type { Channel } from 'stream-chat';
-import { ChannelList } from '../ChannelList';
-import { ChannelView } from '../ChannelView';
-import { ParticipantPicker } from '../ParticipantPicker';
-import { useMessaging } from '../../hooks/useMessaging';
-import type { MessagingShellProps, Participant } from '../../types';
-import { EmptyState } from './EmptyState';
-import { LoadingState } from './LoadingState';
-import { ErrorState } from './ErrorState';
+import classNames from 'classnames'
+import React, { useState, useCallback, useRef, useEffect } from 'react'
+import type { Channel } from 'stream-chat'
+
+import { useMessaging } from '../../hooks/useMessaging'
+import type { MessagingShellProps, Participant } from '../../types'
+import { ChannelList } from '../ChannelList'
+import { ChannelView } from '../ChannelView'
+import { ParticipantPicker } from '../ParticipantPicker'
+
+import { EmptyState } from './EmptyState'
+import { ErrorState } from './ErrorState'
+import { LoadingState } from './LoadingState'
 
 /**
  * Main messaging interface component that combines channel list and channel view
  */
 export const MessagingShell: React.FC<MessagingShellProps> = ({
   capabilities = {},
-  customization = {},
   className,
   renderMessageInputActions,
   onChannelSelect,
   onParticipantSelect,
 }) => {
-  const { 
-    service, 
-    client, 
-    isConnected, 
-    isLoading, 
-    error, 
+  const {
+    service,
+    client,
+    isConnected,
+    isLoading,
+    error,
     refreshConnection,
     debug,
-  } = useMessaging();
+  } = useMessaging()
+
+  const [selectedChannel, setSelectedChannel] = useState<Channel | null>(null)
+  const [hasChannels, setHasChannels] = useState(false)
+  const [_showParticipantPicker, setShowParticipantPicker] = useState(false)
+  const [existingParticipantIds, setExistingParticipantIds] = useState<
+    Set<string>
+  >(new Set())
+  const [pickerKey, setPickerKey] = useState(0) // Key to force remount of ParticipantPicker
 
-  const [selectedChannel, setSelectedChannel] = useState<Channel | null>(null);
-  const [hasChannels, setHasChannels] = useState(false);
-  const [showParticipantPicker, setShowParticipantPicker] = useState(false);
-  const [existingParticipantIds, setExistingParticipantIds] = useState<Set<string>>(new Set());
-  const [pickerKey, setPickerKey] = useState(0); // Key to force remount of ParticipantPicker
+  const participantPickerRef = useRef<HTMLDialogElement>(null)
 
-  const participantPickerRef = useRef<HTMLDialogElement>(null);
-  
   const {
     showStartConversation = false,
     participantSource,
     participantLabel = 'participants',
-  } = capabilities;
+  } = capabilities
 
   // Track if we've already synced channels to prevent repeated API calls
-  const syncedRef = useRef<string | null>(null);
-  
+  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;
+    if (!client || !isConnected) return
+
+    const userId = client.userID
+    if (!userId) return
 
     try {
       if (debug) {
-        console.log('[MessagingShell] Syncing channels for user:', userId);
+        console.log('[MessagingShell] Syncing channels for user:', userId)
       }
-      
+
       const channels = await client.queryChannels(
         {
           type: 'messaging',
@@ -67,125 +70,140 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
         },
         {},
         { limit: 100 }
-      );
+      )
 
-      const memberIds = new Set<string>();
+      const memberIds = new Set<string>()
       channels.forEach((channel: Channel) => {
-        const members = channel.state.members || {};
-        Object.values(members).forEach((member: any) => {
-          const memberId = member.user?.id;
+        const members = channel.state.members
+        Object.values(members).forEach((member) => {
+          const memberId = member.user?.id
           if (memberId && memberId !== userId) {
-            memberIds.add(memberId);
+            memberIds.add(memberId)
           }
-        });
-      });
+        })
+      })
+
+      setExistingParticipantIds(memberIds)
+      setHasChannels(channels.length > 0)
+      syncedRef.current = userId // Mark as synced for this user
 
-      setExistingParticipantIds(memberIds);
-      setHasChannels(channels.length > 0);
-      syncedRef.current = userId; // Mark as synced for this user
-      
       if (debug) {
         console.log('[MessagingShell] Channels synced successfully:', {
           channelCount: channels.length,
-          memberCount: memberIds.size
-        });
+          memberCount: memberIds.size,
+        })
       }
     } catch (error) {
-      console.error('[MessagingShell] Failed to sync channels:', error);
+      console.error('[MessagingShell] Failed to sync channels:', error)
       // Don't mark as synced on error, allow retry
     }
-  }, [client, isConnected, debug]);
-  
+  }, [client, isConnected, debug])
+
   // Sync existing channels to track which participants we can already message
   useEffect(() => {
-    if (!client || !isConnected) return;
-    
-    const userId = client.userID;
-    if (!userId) return;
-    
+    if (!client || !isConnected) return
+
+    const userId = client.userID
+    if (!userId) return
+
     // Prevent repeated sync for the same user
-    if (syncedRef.current === userId) return;
+    if (syncedRef.current === userId) return
 
-    syncChannels();
-  }, [client, isConnected, syncChannels]);
+    syncChannels()
+  }, [client, isConnected, syncChannels])
 
-  const handleChannelSelect = useCallback((channel: Channel) => {
-    setSelectedChannel(channel);
-    onChannelSelect?.(channel);
-  }, [onChannelSelect]);
+  const handleChannelSelect = useCallback(
+    (channel: Channel) => {
+      setSelectedChannel(channel)
+      onChannelSelect?.(channel)
+    },
+    [onChannelSelect]
+  )
 
   const handleBackToChannelList = useCallback(() => {
-    setSelectedChannel(null);
-  }, []);
+    setSelectedChannel(null)
+  }, [])
 
   const handleStartConversation = useCallback(() => {
     if (participantSource) {
-      setPickerKey(prev => prev + 1); // Increment key to force remount
-      setShowParticipantPicker(true);
-      participantPickerRef.current?.showModal();
+      setPickerKey((prev) => prev + 1) // Increment key to force remount
+      setShowParticipantPicker(true)
+      participantPickerRef.current?.showModal()
     }
-  }, [participantSource]);
+  }, [participantSource])
 
-  const handleSelectParticipant = useCallback(async (participant: Participant) => {
-    if (!service) return;
+  const handleSelectParticipant = useCallback(
+    async (participant: Participant) => {
+      if (!service) return
 
-    try {
-      if (debug) {
-        console.log('[MessagingShell] Starting conversation with:', participant.id);
-      }
-      
-      const channel = await service.startChannelWithFollower({
-        id: participant.id,
-        name: participant.name,
-        email: participant.email,
-        phone: participant.phone,
-      });
-
-      // Show the channel
       try {
-        await channel.show();
+        if (debug) {
+          console.log(
+            '[MessagingShell] Starting conversation with:',
+            participant.id
+          )
+        }
+
+        const channel = await service.startChannelWithFollower({
+          id: participant.id,
+          name: participant.name,
+          email: participant.email,
+          phone: participant.phone,
+        })
+
+        // Show the channel
+        try {
+          await channel.show()
+        } catch (error) {
+          console.warn('[MessagingShell] Failed to unhide channel:', error)
+        }
+
+        setSelectedChannel(channel)
+        setShowParticipantPicker(false)
+        participantPickerRef.current?.close()
+
+        onParticipantSelect?.(participant)
       } catch (error) {
-        console.warn('[MessagingShell] Failed to unhide channel:', error);
+        console.error('[MessagingShell] Failed to start conversation:', error)
       }
-
-      setSelectedChannel(channel);
-      setShowParticipantPicker(false);
-      participantPickerRef.current?.close();
-      
-      onParticipantSelect?.(participant);
-    } catch (error) {
-      console.error('[MessagingShell] Failed to start conversation:', error);
-    }
-  }, [service, onParticipantSelect, debug]);
+    },
+    [service, onParticipantSelect, debug]
+  )
 
   const handleCloseParticipantPicker = useCallback(() => {
-    setShowParticipantPicker(false);
-    participantPickerRef.current?.close();
-  }, []);
+    setShowParticipantPicker(false)
+    participantPickerRef.current?.close()
+  }, [])
 
-  const handleLeaveConversation = useCallback(async (channel: Channel) => {
-    if (debug) {
-      console.log('[MessagingShell] Leaving conversation:', channel.id);
-    }
-    setSelectedChannel(null);
-    
-    // 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);
-    
-    // Force re-sync to update the existing participants list
-    syncedRef.current = null;
-    await syncChannels();
-  }, [syncChannels, debug]);
+  const handleLeaveConversation = useCallback(
+    async (channel: Channel) => {
+      if (debug) {
+        console.log('[MessagingShell] Leaving conversation:', channel.id)
+      }
+      setSelectedChannel(null)
+
+      // Force re-sync to update the existing participants list
+      syncedRef.current = null
+      await syncChannels()
+    },
+    [syncChannels, debug]
+  )
 
-  const isChannelSelected = Boolean(selectedChannel);
+  const handleBlockParticipant = useCallback(
+    async (participantId?: string) => {
+      if (debug) {
+        console.log('[MessagingShell] Blocking participant:', participantId)
+      }
+      setSelectedChannel(null)
+
+      // Force re-sync to update the existing participants list
+      syncedRef.current = null
+      await syncChannels()
+    },
+    [syncChannels, debug]
+  )
+
+  const isChannelSelected = Boolean(selectedChannel)
 
   // Show loading state
   if (isLoading) {
@@ -193,7 +211,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
       <div className={classNames('h-full', className)}>
         <LoadingState />
       </div>
-    );
+    )
   }
 
   // Show error state
@@ -202,19 +220,19 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
       <div className={classNames('h-full', className)}>
         <ErrorState error={error} onRetry={refreshConnection} />
       </div>
-    );
+    )
   }
 
   // Show not connected state
   if (!isConnected || !client) {
     return (
       <div className={classNames('h-full', className)}>
-        <ErrorState 
-          error="Not connected to messaging service" 
-          onRetry={refreshConnection} 
+        <ErrorState
+          error="Not connected to messaging service"
+          onRetry={refreshConnection}
         />
       </div>
-    );
+    )
   }
 
   return (
@@ -225,7 +243,8 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
           className={classNames(
             'min-h-0 min-w-0 bg-white lg:bg-chalk lg:flex lg:flex-col lg:border-r lg:border-sand',
             {
-              'hidden lg:flex lg:w-80 lg:min-w-[280px] lg:max-w-[360px]': isChannelSelected,
+              'hidden lg:flex lg:w-80 lg:min-w-[280px] lg:max-w-[360px]':
+                isChannelSelected,
               'flex flex-col w-full lg:flex-1 lg:max-w-2xl': !isChannelSelected,
             }
           )}
@@ -233,7 +252,9 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
           <ChannelList
             onChannelSelect={handleChannelSelect}
             selectedChannel={selectedChannel || undefined}
-            showStartConversation={showStartConversation && Boolean(participantSource)}
+            showStartConversation={
+              showStartConversation && Boolean(participantSource)
+            }
             onStartConversation={handleStartConversation}
             participantLabel={participantLabel}
           />
@@ -243,7 +264,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
         <div
           className={classNames('flex-1 flex-col min-w-0 min-h-0', {
             'hidden lg:flex': !isChannelSelected,
-            'flex': isChannelSelected,
+            flex: isChannelSelected,
           })}
         >
           {selectedChannel ? (
@@ -261,7 +282,9 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
           ) : (
             <EmptyState
               hasChannels={hasChannels}
-              onStartConversation={showStartConversation ? handleStartConversation : undefined}
+              onStartConversation={
+                showStartConversation ? handleStartConversation : undefined
+              }
               participantLabel={participantLabel}
             />
           )}
@@ -270,12 +293,13 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
 
       {/* Participant Picker Dialog */}
       {participantSource && (
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
         <dialog
           ref={participantPickerRef}
           className="mes-dialog"
           onClick={(e) => {
             if (e.target === participantPickerRef.current) {
-              handleCloseParticipantPicker();
+              handleCloseParticipantPicker()
             }
           }}
           onClose={handleCloseParticipantPicker}
@@ -294,5 +318,5 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
         </dialog>
       )}
     </div>
-  );
-};
+  )
+}

package/src/components/ParticipantPicker/ParticipantItem.stories.tsx

@@ -1,8 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { ParticipantItem } from './ParticipantItem';
-import type { Participant } from '../../types';
 import React from 'react';
 
+import type { Participant } from '../../types';
+
+import { ParticipantItem } from './ParticipantItem';
+
 const meta: Meta<typeof ParticipantItem> = {
   title: 'ParticipantItem',
   component: ParticipantItem,

package/src/components/ParticipantPicker/ParticipantItem.tsx

@@ -1,21 +1,27 @@
-import React from 'react';
-import type { Participant } from '../../types';
-import { SpinnerGapIcon } from '@phosphor-icons/react/dist/csr/SpinnerGap';
-import { ChatCircleDotsIcon } from '@phosphor-icons/react/dist/csr/ChatCircleDots';
-import { Avatar } from '../Avatar';
+import { ChatCircleDotsIcon, SpinnerGapIcon } from '@phosphor-icons/react'
+import React from 'react'
 
+import type { Participant } from '../../types'
+import { Avatar } from '../Avatar'
 
 type ParticipantItemProps = {
-    participant: Participant;
-    handleSelectParticipant: (participant: Participant) => void;
-    handleKeyDown: (event: React.KeyboardEvent, participant: Participant) => void;
-    displayName: string;
-    displaySecondary?: string;
-    startingChatWithId?: string | null;
-}   
+  participant: Participant
+  handleSelectParticipant: (participant: Participant) => void
+  handleKeyDown: (event: React.KeyboardEvent, participant: Participant) => void
+  displayName: string
+  displaySecondary?: string
+  startingChatWithId?: string | null
+}
 
-export const ParticipantItem: React.FC<ParticipantItemProps> = ({ participant, handleSelectParticipant, handleKeyDown, displayName, displaySecondary, startingChatWithId }) => (
-    <li key={participant.id}>
+export const ParticipantItem: React.FC<ParticipantItemProps> = ({
+  participant,
+  handleSelectParticipant,
+  handleKeyDown,
+  displayName,
+  displaySecondary,
+  startingChatWithId,
+}) => (
+  <li key={participant.id}>
     <button
       type="button"
       onClick={() => handleSelectParticipant(participant)}
@@ -31,20 +37,18 @@ export const ParticipantItem: React.FC<ParticipantItemProps> = ({ participant, h
             image={participant.image}
             size={40}
           />
-  
+
           {/* Info */}
           <div className="flex-1 min-w-0">
             <h4 className="text-sm font-medium text-charcoal truncate">
               {displayName}
             </h4>
             {displaySecondary && (
-              <p className="text-xs text-stone truncate">
-                {displaySecondary}
-              </p>
+              <p className="text-xs text-stone truncate">{displaySecondary}</p>
             )}
           </div>
         </div>
-  
+
         {/* Icon */}
         <div className="flex-shrink-0">
           {startingChatWithId === participant.id ? (
@@ -52,8 +56,8 @@ export const ParticipantItem: React.FC<ParticipantItemProps> = ({ participant, h
           ) : (
             <ChatCircleDotsIcon className="h-5 w-5 text-stone" />
           )}
-        </div>  
+        </div>
       </div>
     </button>
   </li>
-  )
+)

package/src/components/ParticipantPicker/ParticipantPicker.stories.tsx

@@ -1,8 +1,10 @@
 import type { Meta, StoryFn } from '@storybook/react'
-import { ParticipantPicker } from './index'
-import { mockParticipantSource } from '../../stories/mocks'
 import React from 'react'
 
+import { mockParticipantSource } from '../../stories/mocks'
+
+import { ParticipantPicker } from './index'
+
 type ComponentProps = React.ComponentProps<typeof ParticipantPicker>
 
 const meta: Meta<ComponentProps> = {