@linktr.ee/messaging-react 1.38.0-rc-1777583423 → 1.39.0

package/src/components/ParticipantPicker/index.tsx

@@ -1,262 +0,0 @@
-import { ChatCircleDotsIcon, SpinnerGapIcon } from '@phosphor-icons/react'
-import classNames from 'classnames'
-import React, { useCallback, useEffect, useState, useRef } from 'react'
-
-import { useMessagingContext } from '../../providers/MessagingProvider'
-import type { ParticipantPickerProps, Participant } from '../../types'
-import { Avatar } from '../Avatar'
-import { CloseButton } from '../CloseButton'
-import { SearchInput } from '../SearchInput'
-
-/**
- * Generic participant picker component for starting conversations
- */
-export const ParticipantPicker: React.FC<ParticipantPickerProps> = ({
-  participantSource,
-  onSelectParticipant,
-  onClose,
-  existingParticipantIds = new Set(),
-  participantLabel = 'participants',
-  searchPlaceholder = 'Search participants...',
-  className,
-}) => {
-  const { debug } = useMessagingContext()
-  const [searchQuery, setSearchQuery] = useState('')
-  const [participants, setParticipants] = useState<Participant[]>([])
-  const [loading, setLoading] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-  const [startingChatWithId, setStartingChatWithId] = useState<string | null>(
-    null
-  )
-
-  // Track if we've already loaded participants to prevent repeated loading
-  const loadedRef = useRef(false)
-
-  // New source instance should be allowed to load again
-  useEffect(() => {
-    loadedRef.current = false
-  }, [participantSource])
-
-  /* eslint-disable react-hooks/exhaustive-deps -- syncs with participantSource + debug; inner async uses participantSource.loadParticipants */
-  // Load participants initially - wait for participantSource to finish loading first
-  useEffect(() => {
-    // Wait for the participantSource to finish loading before we try to load participants
-    if (participantSource.loading) {
-      if (debug) {
-        console.log(
-          '[ParticipantPicker] Waiting for participant source to finish loading...'
-        )
-      }
-      return
-    }
-
-    if (loadedRef.current) return // Prevent multiple loads
-
-    const loadInitialParticipants = async () => {
-      if (debug) {
-        console.log('[ParticipantPicker] Loading initial participants...')
-      }
-      setLoading(true)
-      setError(null)
-
-      try {
-        const result = await participantSource.loadParticipants({
-          search: '', // Load all participants initially
-          limit: 100,
-        })
-        setParticipants(result.participants)
-        loadedRef.current = true // Mark as loaded
-        if (debug) {
-          console.log(
-            '[ParticipantPicker] Participants loaded successfully:',
-            result.participants.length
-          )
-        }
-      } catch (err) {
-        const errorMessage =
-          err instanceof Error ? err.message : 'Failed to load participants'
-        setError(errorMessage)
-        console.error('[ParticipantPicker] Failed to load participants:', err)
-        // Don't mark as loaded on error, allow retry
-      } finally {
-        setLoading(false)
-      }
-    }
-
-    loadInitialParticipants()
-  }, [participantSource, debug])
-  /* eslint-enable react-hooks/exhaustive-deps */
-
-  // Filter participants by search query and existing participants
-  const availableParticipants = participants
-    .filter((participant) => !existingParticipantIds.has(participant.id))
-    .filter((participant) => {
-      if (!searchQuery) return true
-      const searchLower = searchQuery.toLowerCase()
-      return (
-        participant.name.toLowerCase().includes(searchLower) ||
-        participant.email?.toLowerCase().includes(searchLower) ||
-        false
-      )
-    })
-
-  const handleSelectParticipant = useCallback(
-    async (participant: Participant) => {
-      if (startingChatWithId) return // Prevent multiple clicks
-
-      setStartingChatWithId(participant.id)
-      try {
-        await onSelectParticipant(participant)
-      } catch (error) {
-        console.error('[ParticipantPicker] Failed to start chat:', error)
-        // Reset the loading state on error
-        setStartingChatWithId(null)
-      }
-      // Note: Don't reset startingChatWithId on success because the dialog will close
-    },
-    [onSelectParticipant, startingChatWithId]
-  )
-
-  const handleKeyDown = (
-    event: React.KeyboardEvent,
-    participant: Participant
-  ) => {
-    if (event.key === 'Enter' || event.key === ' ') {
-      event.preventDefault()
-      handleSelectParticipant(participant)
-    }
-  }
-
-  return (
-    <div className={classNames('flex flex-col h-full', className)}>
-      {/* Header */}
-      <div className="px-4 py-4 border-b border-sand bg-chalk">
-        <div className="flex items-center justify-between mb-3">
-          <h2 className="text-lg font-semibold text-charcoal">
-            Start a new Conversation
-          </h2>
-          <CloseButton onClick={onClose} />
-        </div>
-
-        <p className="text-xs text-stone mb-3">
-          Select a {participantLabel.slice(0, -1)} to start messaging (
-          {availableParticipants.length} available)
-          {participantSource.totalCount !== undefined &&
-            ` • ${participantSource.totalCount} ${participantLabel} total`}
-        </p>
-
-        <SearchInput
-          searchQuery={searchQuery}
-          setSearchQuery={setSearchQuery}
-          placeholder={searchPlaceholder}
-        />
-      </div>
-
-      {/* Error State */}
-      {error && (
-        <div className="p-4 text-sm text-danger bg-danger-alt">
-          Error loading {participantLabel}: {error}
-        </div>
-      )}
-
-      {/* Participants List */}
-      <div className="flex-1 overflow-auto">
-        {loading && availableParticipants.length === 0 ? (
-          <div className="h-32 flex items-center justify-center">
-            <div className="flex items-center space-x-2">
-              <div className="w-4 h-4 animate-spin rounded-full border-2 border-primary border-t-transparent"></div>
-              <span className="text-sm text-stone">
-                Loading {participantLabel}...
-              </span>
-            </div>
-          </div>
-        ) : availableParticipants.length === 0 ? (
-          <div className="p-6 text-center">
-            <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-sand">
-              <ChatCircleDotsIcon className="h-8 w-8 text-charcoal" />
-            </div>
-            <h3 className="text-sm font-semibold text-charcoal mb-2">
-              {searchQuery
-                ? `No ${participantLabel} found`
-                : participants.length > 0
-                  ? `Already chatting with all ${participantLabel}`
-                  : `No ${participantLabel} yet`}
-            </h3>
-            <p className="text-xs text-stone">
-              {searchQuery
-                ? 'Try a different search term'
-                : participants.length > 0
-                  ? `You have existing conversations with all your ${participantLabel}`
-                  : `${participantLabel.charAt(0).toUpperCase() + participantLabel.slice(1)} will appear here`}
-            </p>
-          </div>
-        ) : (
-          <ul className="space-y-0">
-            {availableParticipants.map((participant) => {
-              const displayName =
-                participant.name || participant.email || participant.id
-              const displaySecondary =
-                participant.email && participant.name
-                  ? participant.email
-                  : participant.phone
-
-              return (
-                <li key={participant.id}>
-                  <button
-                    type="button"
-                    onClick={() => handleSelectParticipant(participant)}
-                    onKeyDown={(e) => handleKeyDown(e, participant)}
-                    className="w-full px-4 py-3 hover:bg-sand transition-colors border-b border-sand text-left focus-ring"
-                  >
-                    <div className="flex items-center justify-between">
-                      <div className="flex items-center space-x-3 flex-1 min-w-0">
-                        {/* Avatar */}
-                        <Avatar
-                          id={participant.id}
-                          name={displayName}
-                          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>
-                          )}
-                        </div>
-                      </div>
-
-                      {/* Icon */}
-                      <div className="flex-shrink-0">
-                        {startingChatWithId === participant.id ? (
-                          <SpinnerGapIcon className="h-5 w-5 text-primary animate-spin" />
-                        ) : (
-                          <ChatCircleDotsIcon className="h-5 w-5 text-stone" />
-                        )}
-                      </div>
-                    </div>
-                  </button>
-                </li>
-              )
-            })}
-
-            {/* Loading indicator */}
-            {loading && (
-              <li className="p-4 flex justify-center">
-                <div className="flex items-center space-x-2">
-                  <div className="w-4 h-4 animate-spin rounded-full border-2 border-primary border-t-transparent"></div>
-                  <span className="text-sm text-stone">Loading more...</span>
-                </div>
-              </li>
-            )}
-          </ul>
-        )}
-      </div>
-    </div>
-  )
-}

package/src/hooks/useParticipants.ts

@@ -1,94 +0,0 @@
-import { useState, useEffect, useCallback } from 'react';
-
-import type { ParticipantSource, Participant } from '../types';
-
-/**
- * Hook for managing participant loading with search and pagination
- */
-export const useParticipants = (
-  participantSource: ParticipantSource,
-  options: {
-    initialSearch?: string;
-    pageSize?: number;
-  } = {}
-) => {
-  const { initialSearch = '', pageSize = 20 } = options;
-  
-  const [participants, setParticipants] = useState<Participant[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [searchQuery, setSearchQuery] = useState(initialSearch);
-  const [hasMore, setHasMore] = useState(true);
-  const [cursor, setCursor] = useState<string | undefined>();
-
-  // Load participants with current search query
-  const loadParticipants = useCallback(async (
-    reset = false,
-    customSearch?: string
-  ) => {
-    if (loading) return;
-    
-    const search = customSearch !== undefined ? customSearch : searchQuery;
-    
-    setLoading(true);
-    setError(null);
-
-    try {
-      const result = await participantSource.loadParticipants({
-        search: search || undefined,
-        limit: pageSize,
-        cursor: reset ? undefined : cursor,
-      });
-
-      setParticipants(prev => 
-        reset ? result.participants : [...prev, ...result.participants]
-      );
-      setHasMore(result.hasMore);
-      setCursor(result.nextCursor);
-    } catch (err) {
-      const errorMessage = err instanceof Error ? err.message : 'Failed to load participants';
-      setError(errorMessage);
-      console.error('[useParticipants] Load error:', err);
-    } finally {
-      setLoading(false);
-    }
-  }, [participantSource, searchQuery, cursor, pageSize, loading]);
-
-  // Load more participants (pagination)
-  const loadMore = useCallback(() => {
-    if (hasMore && !loading) {
-      loadParticipants(false);
-    }
-  }, [hasMore, loading, loadParticipants]);
-
-  // Search participants
-  const search = useCallback((query: string) => {
-    setSearchQuery(query);
-    setCursor(undefined);
-    loadParticipants(true, query);
-  }, [loadParticipants]);
-
-  // Refresh participants
-  const refresh = useCallback(() => {
-    setCursor(undefined);
-    loadParticipants(true);
-  }, [loadParticipants]);
-
-  /* eslint-disable react-hooks/exhaustive-deps -- initial load only; `loadParticipants` changes whenever `loading` flips */
-  useEffect(() => {
-    loadParticipants(true);
-  }, [participantSource.loadParticipants]);
-  /* eslint-enable react-hooks/exhaustive-deps */
-
-  return {
-    participants,
-    loading,
-    error,
-    searchQuery,
-    hasMore,
-    totalCount: participantSource.totalCount,
-    loadMore,
-    search,
-    refresh,
-  };
-};