@linktr.ee/messaging-react 1.38.0 → 1.39.0

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

@@ -1,190 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
-
-import type { Participant } from '../../types';
-
-import { ParticipantItem } from './ParticipantItem';
-
-const meta: Meta<typeof ParticipantItem> = {
-  title: 'ParticipantItem',
-  component: ParticipantItem,
-  parameters: {
-    // layout: 'centered',
-  },
-  tags: ['autodocs'],
-  decorators: [
-    (Story) => (
-      <ul className="w-96 border border-sand rounded-lg overflow-hidden">
-        <Story />
-      </ul>
-    ),
-  ],
-};
-
-export default meta;
-type Story = StoryObj<typeof ParticipantItem>;
-
-const mockParticipant: Participant = {
-  id: 'user-123',
-  name: 'Sarah Johnson',
-  email: 'sarah.johnson@example.com',
-  image: 'https://picsum.photos/id/237/200/200',
-};
-
-const mockHandleSelect = (participant: Participant) => {
-  console.log('Selected participant:', participant);
-};
-
-const mockHandleKeyDown = (event: React.KeyboardEvent, participant: Participant) => {
-  console.log('Key pressed:', event.key, 'on participant:', participant);
-};
-
-export const Default: Story = {
-  args: {
-    participant: mockParticipant,
-    handleSelectParticipant: mockHandleSelect,
-    handleKeyDown: mockHandleKeyDown,
-    displayName: 'Sarah Johnson',
-    displaySecondary: 'sarah.johnson@example.com',
-  },
-};
-
-export const WithPhone: Story = {
-  args: {
-    participant: {
-      ...mockParticipant,
-      phone: '+1 (555) 123-4567',
-    },
-    handleSelectParticipant: mockHandleSelect,
-    handleKeyDown: mockHandleKeyDown,
-    displayName: 'Sarah Johnson',
-    displaySecondary: '+1 (555) 123-4567',
-  },
-};
-
-export const NoSecondaryInfo: Story = {
-  args: {
-    participant: {
-      id: 'user-456',
-      name: 'John Doe',
-    },
-    handleSelectParticipant: mockHandleSelect,
-    handleKeyDown: mockHandleKeyDown,
-    displayName: 'John Doe',
-  },
-};
-
-export const Loading: Story = {
-  args: {
-    participant: mockParticipant,
-    handleSelectParticipant: mockHandleSelect,
-    handleKeyDown: mockHandleKeyDown,
-    displayName: 'Sarah Johnson',
-    displaySecondary: 'sarah.johnson@example.com',
-    startingChatWithId: 'user-123',
-  },
-};
-
-export const LongName: Story = {
-  args: {
-    participant: {
-      id: 'user-789',
-      name: 'Alexander Christopher Wellington-Montgomery III',
-      email: 'alexander.christopher.wellington@example.com',
-    },
-    handleSelectParticipant: mockHandleSelect,
-    handleKeyDown: mockHandleKeyDown,
-    displayName: 'Alexander Christopher Wellington-Montgomery III',
-    displaySecondary: 'alexander.christopher.wellington@example.com',
-  },
-};
-
-export const DifferentColors: Story = {
-  render: () => (
-    <div className="space-y-0 w-96">
-      <ParticipantItem
-        participant={{ id: '1', name: 'Alice Anderson' }}
-        handleSelectParticipant={mockHandleSelect}
-        handleKeyDown={mockHandleKeyDown}
-        displayName="Alice Anderson"
-        displaySecondary="alice@example.com"
-      />
-      <ParticipantItem
-        participant={{ id: '2', name: 'Bob Brown' }}
-        handleSelectParticipant={mockHandleSelect}
-        handleKeyDown={mockHandleKeyDown}
-        displayName="Bob Brown"
-        displaySecondary="bob@example.com"
-      />
-      <ParticipantItem
-        participant={{ id: '3', name: 'Charlie Chen' }}
-        handleSelectParticipant={mockHandleSelect}
-        handleKeyDown={mockHandleKeyDown}
-        displayName="Charlie Chen"
-        displaySecondary="charlie@example.com"
-      />
-      <ParticipantItem
-        participant={{ id: '4', name: 'Diana Davis' }}
-        handleSelectParticipant={mockHandleSelect}
-        handleKeyDown={mockHandleKeyDown}
-        displayName="Diana Davis"
-        displaySecondary="diana@example.com"
-      />
-    </div>
-  ),
-};
-
-export const MixedAvatars: Story = {
-  render: () => (
-    <div className="space-y-0 w-96">
-      <ParticipantItem
-        participant={{ 
-          id: '1', 
-          name: 'Emma Wilson',
-          image: 'https://picsum.photos/id/64/200/200'
-        }}
-        handleSelectParticipant={mockHandleSelect}
-        handleKeyDown={mockHandleKeyDown}
-        displayName="Emma Wilson"
-        displaySecondary="emma@example.com"
-      />
-      <ParticipantItem
-        participant={{ id: '2', name: 'Frank Miller' }}
-        handleSelectParticipant={mockHandleSelect}
-        handleKeyDown={mockHandleKeyDown}
-        displayName="Frank Miller"
-        displaySecondary="frank@example.com"
-      />
-      <ParticipantItem
-        participant={{ 
-          id: '3', 
-          name: 'Grace Lee',
-          image: 'https://picsum.photos/id/91/200/200'
-        }}
-        handleSelectParticipant={mockHandleSelect}
-        handleKeyDown={mockHandleKeyDown}
-        displayName="Grace Lee"
-        displaySecondary="grace@example.com"
-      />
-      <ParticipantItem
-        participant={{ id: '4', name: 'Henry Taylor' }}
-        handleSelectParticipant={mockHandleSelect}
-        handleKeyDown={mockHandleKeyDown}
-        displayName="Henry Taylor"
-        displaySecondary="henry@example.com"
-      />
-      <ParticipantItem
-        participant={{ 
-          id: '5', 
-          name: 'Iris Chen',
-          image: 'https://picsum.photos/id/177/200/200'
-        }}
-        handleSelectParticipant={mockHandleSelect}
-        handleKeyDown={mockHandleKeyDown}
-        displayName="Iris Chen"
-        displaySecondary="iris@example.com"
-      />
-    </div>
-  ),
-};
-

package/src/components/ParticipantPicker/ParticipantItem.tsx

@@ -1,63 +0,0 @@
-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
-}
-
-export const ParticipantItem: React.FC<ParticipantItemProps> = ({
-  participant,
-  handleSelectParticipant,
-  handleKeyDown,
-  displayName,
-  displaySecondary,
-  startingChatWithId,
-}) => (
-  <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>
-)

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

@@ -1,56 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/react'
-import React from 'react'
-
-import { mockParticipantSource } from '../../stories/mocks'
-
-import { ParticipantPicker } from './index'
-
-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

@@ -1,229 +0,0 @@
-import { ChatCircleDotsIcon } 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 { CloseButton } from '../CloseButton'
-import Loading from '../Loading'
-import { SearchInput } from '../SearchInput'
-
-import { ParticipantItem } from './ParticipantItem'
-
-/**
- * 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, debug]) // Re-run when participantSource or debug 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(
-        'messaging-participant-picker 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>
-  )
-}