@linktr.ee/messaging-react 1.0.0 → 1.0.1

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

@@ -0,0 +1,54 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import { ParticipantPicker } from './index'
+import { mockParticipantSource } from '../../stories/mocks'
+import React from 'react'
+
+type ComponentProps = React.ComponentProps<typeof ParticipantPicker>
+
+const meta: Meta<ComponentProps> = {
+  title: 'ParticipantPicker',
+  component: ParticipantPicker,
+  parameters: {
+    layout: 'fullscreen',
+  },
+}
+export default meta
+
+const Template: StoryFn<ComponentProps> = (args) => {
+  return (
+    <div className="h-screen w-full">
+      <ParticipantPicker {...args} />
+    </div>
+  )
+}
+
+export const Default: StoryFn<ComponentProps> = Template.bind({})
+Default.args = {
+  participantSource: mockParticipantSource,
+  participantLabel: 'participants',
+  searchPlaceholder: 'Search participants...',
+  onClose: () => console.log('Close clicked'),
+  onSelectParticipant: (participant) => console.log('Selected:', participant),
+  existingParticipantIds: new Set(),
+}
+
+export const WithExistingParticipants: StoryFn<ComponentProps> = Template.bind({})
+WithExistingParticipants.args = {
+  participantSource: mockParticipantSource,
+  participantLabel: 'participants',
+  searchPlaceholder: 'Search participants...',
+  onClose: () => console.log('Close clicked'),
+  onSelectParticipant: (participant) => console.log('Selected:', participant),
+  existingParticipantIds: new Set(['participant-1', 'participant-3']),
+}
+
+export const CustomLabels: StoryFn<ComponentProps> = Template.bind({})
+CustomLabels.args = {
+  participantSource: mockParticipantSource,
+  participantLabel: 'followers',
+  searchPlaceholder: 'Search followers...',
+  onClose: () => console.log('Close clicked'),
+  onSelectParticipant: (participant) => console.log('Selected:', participant),
+  existingParticipantIds: new Set(),
+}
+

package/src/components/ParticipantPicker/ParticipantPicker.tsx

@@ -0,0 +1,196 @@
+import React, { useCallback, useEffect, useState, useRef } from 'react';
+import { ChatCircleDotsIcon } from "@phosphor-icons/react/dist/csr/ChatCircleDots";
+import classNames from 'classnames';
+
+import type { ParticipantPickerProps, Participant } from '../../types';
+import { CloseButton } from '../CloseButton';
+import { SearchInput } from '../SearchInput';
+import Loading from '../Loading';
+import { ParticipantItem } from './ParticipantItem';
+import { useMessagingContext } from '../../providers/MessagingProvider';
+
+/**
+ * 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);
+  
+  // 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.loading, debug]); // Re-run when loading state changes
+
+  // 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 (
+                <ParticipantItem key={participant.id} participant={participant} handleSelectParticipant={handleSelectParticipant} handleKeyDown={handleKeyDown} displayName={displayName} displaySecondary={displaySecondary} />
+              );
+            })}
+
+            {/* Loading indicator */}
+            {loading && (
+              <li className="p-4 flex justify-center">
+                <div className="flex items-center space-x-2">
+                  <Loading className='w-6 h-6' />
+                  <span className="text-sm text-stone">Loading more...</span>
+                </div>
+              </li>
+            )}
+          </ul>
+        )}
+      </div>
+    </div>
+  );
+};
+
+

package/src/components/ParticipantPicker/index.tsx

@@ -0,0 +1,234 @@
+import React, { useCallback, useEffect, useState, useRef } from 'react';
+import { ChatCircleDotsIcon } from "@phosphor-icons/react/dist/csr/ChatCircleDots";
+import { SpinnerGapIcon } from "@phosphor-icons/react/dist/csr/SpinnerGap";
+import classNames from 'classnames';
+
+import type { ParticipantPickerProps, Participant } from '../../types';
+import { CloseButton } from '../CloseButton';
+import { SearchInput } from '../SearchInput';
+import { useMessagingContext } from '../../providers/MessagingProvider';
+import { Avatar } from '../Avatar';
+
+/**
+ * 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);
+  
+  // 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.loading, debug]); // Re-run when loading state changes
+
+  // 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:outline-none focus:ring-2 focus:ring-black"
+                  >
+                    <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/components/SearchInput/SearchInput.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import { SearchInput } from '.'
+import React from 'react'
+
+type ComponentProps = React.ComponentProps<typeof SearchInput>
+
+const meta: Meta<ComponentProps> = {
+  title: 'SearchInput',
+  component: SearchInput,
+  parameters: {
+    layout: 'centered',
+  },
+}
+export default meta
+
+const Template: StoryFn<ComponentProps> = (args) => {
+  return (
+    <div className="p-12 w-[400px]">
+      <SearchInput {...args} />
+    </div>
+  )
+}
+
+export const Default: StoryFn<ComponentProps> = Template.bind({})
+Default.args = {
+  placeholder: 'Search...',
+}
+
+export const CustomPlaceholder: StoryFn<ComponentProps> = Template.bind({})
+CustomPlaceholder.args = {
+  placeholder: 'Find a conversation...',
+}
+

package/src/components/SearchInput/SearchInput.test.tsx

@@ -0,0 +1,108 @@
+import { describe, it, expect, vi } from 'vitest';
+import { renderWithProviders, screen, userEvent } from '../../test/utils';
+import { SearchInput } from './index';
+
+describe('SearchInput', () => {
+  describe('Rendering', () => {
+    it('renders with placeholder', () => {
+      renderWithProviders(
+        <SearchInput 
+          searchQuery="" 
+          setSearchQuery={vi.fn()} 
+          placeholder="Search messages..." 
+        />
+      );
+      expect(screen.getByPlaceholderText('Search messages...')).toBeInTheDocument();
+    });
+
+    it('renders with search icon', () => {
+      renderWithProviders(
+        <SearchInput searchQuery="" setSearchQuery={vi.fn()} placeholder="Search" />
+      );
+      const searchIcon = document.querySelector('svg');
+      expect(searchIcon).toBeInTheDocument();
+    });
+
+    it('displays the current value', () => {
+      renderWithProviders(
+        <SearchInput searchQuery="test query" setSearchQuery={vi.fn()} placeholder="Search" />
+      );
+      const input = screen.getByRole('textbox');
+      expect(input).toHaveValue('test query');
+    });
+  });
+
+  describe('User Interaction', () => {
+    it('calls setSearchQuery when user types', async () => {
+      const handleChange = vi.fn();
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <SearchInput searchQuery="" setSearchQuery={handleChange} placeholder="Search" />
+      );
+
+      const input = screen.getByRole('textbox');
+      await user.type(input, 'hello');
+
+      expect(handleChange).toHaveBeenCalledTimes(5); // Once per character
+    });
+  });
+
+  describe('Clear Functionality', () => {
+    it('shows clear button when there is a value', () => {
+      renderWithProviders(
+        <SearchInput searchQuery="test" setSearchQuery={vi.fn()} placeholder="Search" />
+      );
+      
+      const clearButton = screen.getByLabelText(/clear/i);
+      expect(clearButton).toBeInTheDocument();
+    });
+
+    it('does not show clear button when value is empty', () => {
+      renderWithProviders(
+        <SearchInput searchQuery="" setSearchQuery={vi.fn()} placeholder="Search" />
+      );
+      
+      const clearButton = screen.queryByLabelText(/clear/i);
+      expect(clearButton).not.toBeInTheDocument();
+    });
+
+    it('calls setSearchQuery with empty string when clear is clicked', async () => {
+      const handleChange = vi.fn();
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <SearchInput searchQuery="test" setSearchQuery={handleChange} placeholder="Search" />
+      );
+
+      const clearButton = screen.getByLabelText(/clear/i);
+      await user.click(clearButton);
+
+      expect(handleChange).toHaveBeenCalledWith('');
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('clear button has accessible label', () => {
+      renderWithProviders(
+        <SearchInput searchQuery="test" setSearchQuery={vi.fn()} placeholder="Search" />
+      );
+
+      const clearButton = screen.getByRole('button', { name: /clear search/i });
+      expect(clearButton).toBeInTheDocument();
+    });
+
+    it('is keyboard navigable', async () => {
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <SearchInput searchQuery="" setSearchQuery={vi.fn()} placeholder="Search" />
+      );
+
+      await user.tab();
+      const input = screen.getByRole('textbox');
+      expect(input).toHaveFocus();
+    });
+  });
+});
+

package/src/components/SearchInput/index.tsx

@@ -0,0 +1,50 @@
+import React, { useRef } from 'react';
+import { IconButton } from '../IconButton';
+import { MagnifyingGlassIcon } from "@phosphor-icons/react/dist/csr/MagnifyingGlass";
+import { XIcon } from "@phosphor-icons/react/dist/csr/X";
+
+interface SearchInputProps {
+  searchQuery: string;
+  setSearchQuery: (value: string) => void;
+  placeholder: string;
+}
+
+export function SearchInput({
+  searchQuery,
+  setSearchQuery,
+  placeholder,
+}: SearchInputProps) {
+  const searchInputRef = useRef<HTMLInputElement>(null);
+
+  return (
+    <div className="relative">
+      <MagnifyingGlassIcon
+        className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-stone"
+        weight="bold"
+      />
+      
+      <input
+        ref={searchInputRef}
+        type="text"
+        placeholder={placeholder}
+        value={searchQuery}
+        onChange={(e) => setSearchQuery(e.target.value)}
+        className="w-full pl-10 pr-10 py-3 text-sm border border-sand rounded-xl focus:outline-none focus:ring-2 focus:ring-black focus:border-transparent"
+      />
+      
+      {searchQuery && (
+        <IconButton
+          label="Clear search"
+          onClick={() => {
+            setSearchQuery('');
+            searchInputRef.current?.focus();
+          }}
+          className="absolute right-3 top-1/2 -translate-y-1/2 p-1 text-stone hover:text-charcoal"
+        >
+            <XIcon className="h-4 w-4" weight="bold" />
+        </IconButton>
+      )}
+    </div>
+  );
+}
+

package/src/hooks/useMessaging.ts

@@ -0,0 +1,9 @@
+import { useMessagingContext } from '../providers/MessagingProvider';
+import type { MessagingContextValue } from '../providers/MessagingProvider';
+
+/**
+ * Hook to access messaging service and state
+ */
+export const useMessaging = (): MessagingContextValue => {
+  return useMessagingContext();
+};