@linktr.ee/messaging-react

@linktr.ee/messaging-react

React messaging components built on @linktr.ee/messaging-core for web applications.

Features

• Web-optimized: Uses Tailwind CSS and web APIs for responsive design
• Component-based: Modular components that can be used individually or together
• Capability-driven: Inject different data sources and capabilities per host
• Stream Chat integration: Built on Stream Chat React for reliable messaging
• TypeScript: Full type safety throughout

Components

MessagingShell

Main container component that provides complete messaging interface.

import { MessagingShell, MessagingProvider } from '@linktr.ee/messaging-react';

<MessagingProvider user={user} serviceConfig={config} apiKey={apiKey}>
  <MessagingShell 
    capabilities={{
      showStartConversation: true,
      participantSource: followersSource,
      participantLabel: 'followers'
    }}
  />
</MessagingProvider>

Individual Components

• ChannelList: Sidebar with conversations and start conversation button
• ChannelView: Message interface with customizable actions via render props
• ParticipantPicker: Generic dialog for selecting conversation participants
• MessagingProvider: Context provider for messaging state

Integration Patterns

MFE Pattern (Current)

// Uses existing adapters and data sources
import { createFollowersParticipantSource } from '../adapters/followersAdapter';

const capabilities = {
  showStartConversation: true,
  participantSource: createFollowersParticipantSource(),
  participantLabel: 'followers'
};

Next.js Pattern (Future)

// Custom data sources for Next.js environment
const capabilities = {
  showStartConversation: true,
  participantSource: createCustomParticipantSource(),
  attachmentSource: createLinksAttachmentSource()
};

Embedded Pattern (Future)

// Use individual components in existing layouts
<div className="sidebar">
  <ChannelList onChannelSelect={handleSelect} />
</div>
<div className="main">
  <ChannelView channel={selectedChannel} />
</div>

Capability System

The package uses a capability-based architecture to customize functionality:

interface MessagingCapabilities {
  showStartConversation?: boolean;
  showAttachments?: boolean;
  participantSource?: ParticipantSource;
  attachmentSource?: AttachmentSource;
  participantLabel?: string; // e.g., "followers", "team members"
  attachmentLabel?: string; // e.g., "links", "files"
}

Data Source Interfaces

ParticipantSource

Interface for loading conversation participants:

interface ParticipantSource {
  loadParticipants: (options?: { 
    search?: string; 
    limit?: number; 
    cursor?: string;
  }) => Promise<{
    participants: Participant[];
    hasMore: boolean;
    nextCursor?: string;
  }>;
  totalCount?: number;
  loading?: boolean;
}

AttachmentSource (Future)

Interface for loading attachments like links or files.

Architecture Benefits

• Portability: Works across different host environments
• Customization: Inject different data sources per host
• Consistency: Maintains Linktree design system
• Performance: Web-optimized with lazy loading and pagination
• Maintainability: Clean separation between UI and business logic

Development Status

✅ Core messaging functionality ✅ Follower participant selection ✅ Responsive design ✅ TypeScript safety ⏳ Attachment system (planned) ⏳ Advanced customization options (planned)