@linktr.ee/messaging-react 1.0.0 → 1.0.2

package/src/components/MessagingShell/ErrorState.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import { ErrorState } from './ErrorState'
+import React from 'react'
+
+type ComponentProps = React.ComponentProps<typeof ErrorState>
+
+const meta: Meta<ComponentProps> = {
+  title: 'States/ErrorState',
+  component: ErrorState,
+  parameters: {
+    layout: 'fullscreen',
+  },
+}
+
+export default meta
+
+const Template: StoryFn<ComponentProps> = (args) => {
+  return (
+    <div className="h-screen w-full bg-white">
+      <ErrorState {...args} />
+    </div>
+  )
+}
+
+export const ConnectionError: StoryFn<ComponentProps> = Template.bind({})
+ConnectionError.args = {
+  error: 'Unable to connect to messaging service. Please check your connection and try again.',
+  onRetry: () => console.log('Retry clicked'),
+}
+
+export const NoRetry: StoryFn<ComponentProps> = Template.bind({})
+NoRetry.args = {
+  error: 'Failed to load messages.',
+  onRetry: undefined,
+}
+
+export const CustomError: StoryFn<ComponentProps> = Template.bind({})
+CustomError.args = {
+  error: 'Your session has expired. Please refresh the page to continue.',
+  onRetry: () => console.log('Retry clicked'),
+}
+

package/src/components/MessagingShell/ErrorState.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+/**
+ * Error state component
+ */
+export const ErrorState: React.FC<{ error: string; onRetry?: () => void }> = ({ error, onRetry }) => (
+  <div className="flex items-center justify-center h-full p-8">
+    <div className="text-center max-w-md">
+      <div className="w-24 h-24 bg-danger-alt rounded-full flex items-center justify-center mx-auto mb-6">
+        <span className="text-4xl">⚠️</span>
+      </div>
+      
+      <h2 className="text-xl font-semibold text-charcoal mb-3">
+        Connection Error
+      </h2>
+      
+      <p className="text-stone text-sm mb-6">
+        {error}
+      </p>
+
+      {onRetry && (
+        <button
+          type="button"
+          onClick={onRetry}
+          className="inline-flex items-center px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-alt focus:outline-none focus:ring-2 focus:ring-primary transition-colors"
+        >
+          Try Again
+        </button>
+      )}
+    </div>
+  </div>
+);
+

package/src/components/MessagingShell/LoadingState.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import { LoadingState } from './LoadingState'
+import React from 'react'
+
+type ComponentProps = React.ComponentProps<typeof LoadingState>
+
+const meta: Meta<ComponentProps> = {
+  title: 'States/LoadingState',
+  component: LoadingState,
+  parameters: {
+    layout: 'fullscreen',
+  },
+}
+
+export default meta
+
+const Template: StoryFn<ComponentProps> = () => {
+  return (
+    <div className="h-screen w-full bg-white">
+      <LoadingState />
+    </div>
+  )
+}
+
+export const Default: StoryFn<ComponentProps> = Template.bind({})
+

package/src/components/MessagingShell/LoadingState.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import Loading from '../Loading';
+
+/**
+ * Loading state component
+ */
+export const LoadingState = () => (
+  <div className="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>
+);
+

package/src/components/MessagingShell/index.tsx

@@ -0,0 +1,298 @@
+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';
+
+/**
+ * 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, 
+    refreshConnection,
+    debug,
+  } = 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 participantPickerRef = useRef<HTMLDialogElement>(null);
+  
+  const {
+    showStartConversation = false,
+    participantSource,
+    participantLabel = 'participants',
+  } = capabilities;
+
+  // Track if we've already synced channels to prevent repeated API calls
+  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;
+
+    try {
+      if (debug) {
+        console.log('[MessagingShell] Syncing channels for user:', userId);
+      }
+      
+      const channels = await client.queryChannels(
+        {
+          type: 'messaging',
+          members: { $in: [userId] },
+        },
+        {},
+        { limit: 100 }
+      );
+
+      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;
+          if (memberId && memberId !== userId) {
+            memberIds.add(memberId);
+          }
+        });
+      });
+
+      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
+        });
+      }
+    } catch (error) {
+      console.error('[MessagingShell] Failed to sync channels:', error);
+      // Don't mark as synced on error, allow retry
+    }
+  }, [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;
+    
+    // Prevent repeated sync for the same user
+    if (syncedRef.current === userId) return;
+
+    syncChannels();
+  }, [client, isConnected, syncChannels]);
+
+  const handleChannelSelect = useCallback((channel: Channel) => {
+    setSelectedChannel(channel);
+    onChannelSelect?.(channel);
+  }, [onChannelSelect]);
+
+  const handleBackToChannelList = useCallback(() => {
+    setSelectedChannel(null);
+  }, []);
+
+  const handleStartConversation = useCallback(() => {
+    if (participantSource) {
+      setPickerKey(prev => prev + 1); // Increment key to force remount
+      setShowParticipantPicker(true);
+      participantPickerRef.current?.showModal();
+    }
+  }, [participantSource]);
+
+  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();
+      } catch (error) {
+        console.warn('[MessagingShell] Failed to unhide channel:', error);
+      }
+
+      setSelectedChannel(channel);
+      setShowParticipantPicker(false);
+      participantPickerRef.current?.close();
+      
+      onParticipantSelect?.(participant);
+    } catch (error) {
+      console.error('[MessagingShell] Failed to start conversation:', error);
+    }
+  }, [service, onParticipantSelect, debug]);
+
+  const handleCloseParticipantPicker = useCallback(() => {
+    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 isChannelSelected = Boolean(selectedChannel);
+
+  // Show loading state
+  if (isLoading) {
+    return (
+      <div className={classNames('h-full', className)}>
+        <LoadingState />
+      </div>
+    );
+  }
+
+  // Show error state
+  if (error) {
+    return (
+      <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} 
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className={classNames('h-full bg-white overflow-hidden', className)}>
+      <div className="flex h-full min-h-0">
+        {/* Channel List Sidebar */}
+        <div
+          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,
+              'flex flex-col w-full lg:flex-1 lg:max-w-2xl': !isChannelSelected,
+            }
+          )}
+        >
+          <ChannelList
+            onChannelSelect={handleChannelSelect}
+            selectedChannel={selectedChannel || undefined}
+            showStartConversation={showStartConversation && Boolean(participantSource)}
+            onStartConversation={handleStartConversation}
+            participantLabel={participantLabel}
+          />
+        </div>
+
+        {/* Channel View */}
+        <div
+          className={classNames('flex-1 flex-col min-w-0 min-h-0', {
+            'hidden lg:flex': !isChannelSelected,
+            'flex': isChannelSelected,
+          })}
+        >
+          {selectedChannel ? (
+            <div className="flex-1 min-h-0 flex flex-col">
+              <ChannelView
+                channel={selectedChannel}
+                key={selectedChannel.id}
+                onBack={handleBackToChannelList}
+                showBackButton
+                renderMessageInputActions={renderMessageInputActions}
+                onLeaveConversation={handleLeaveConversation}
+                onBlockParticipant={handleBlockParticipant}
+              />
+            </div>
+          ) : (
+            <EmptyState
+              hasChannels={hasChannels}
+              onStartConversation={showStartConversation ? handleStartConversation : undefined}
+              participantLabel={participantLabel}
+            />
+          )}
+        </div>
+      </div>
+
+      {/* Participant Picker Dialog */}
+      {participantSource && (
+        <dialog
+          ref={participantPickerRef}
+          className="mes-dialog"
+          onClick={(e) => {
+            if (e.target === participantPickerRef.current) {
+              handleCloseParticipantPicker();
+            }
+          }}
+          onClose={handleCloseParticipantPicker}
+        >
+          <div className="h-full w-full bg-white shadow-max-elevation-light">
+            <ParticipantPicker
+              key={pickerKey}
+              participantSource={participantSource}
+              onSelectParticipant={handleSelectParticipant}
+              onClose={handleCloseParticipantPicker}
+              existingParticipantIds={existingParticipantIds}
+              participantLabel={participantLabel}
+              searchPlaceholder={`Search ${participantLabel}...`}
+            />
+          </div>
+        </dialog>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,188 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ParticipantItem } from './ParticipantItem';
+import type { Participant } from '../../types';
+import React from 'react';
+
+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

@@ -0,0 +1,59 @@
+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';
+
+
+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>
+  )