@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

$3

Main container component that provides complete messaging interface.

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


capabilities={{
showStartConversation: true,
participantSource: followersSource,
participantLabel: 'followers'
}}
/>

`

$3

- 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

$3

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

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

$3


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

$3

`tsx
// Use individual components in existing layouts

`

Capability System

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

`typescript
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

$3

Interface for loading conversation participants:

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

$3

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)