@chat-saas/react-sdk

Enterprise-grade React SDK for building chat applications with real-time messaging, channels, and WebSocket support.

Features

✅ Real-time Messaging - WebSocket-based instant messaging ✅ Channel Management - Public channels, private channels, and DMs ✅ User Authentication - JWT-based auth with auto-refresh ✅ Reactions - Add emoji reactions to messages ✅ Message Editing - Edit and delete your messages ✅ Pagination - Efficient message loading with infinite scroll ✅ TypeScript - Full TypeScript support ✅ State Management - Built-in Zustand store ✅ UI Components - Ready-to-use React components

Installation

npm install @chat-saas/react-sdk
# or
yarn add @chat-saas/react-sdk

Quick Start

1. Wrap your app with ChatProvider

import { ChatProvider } from '@chat-saas/react-sdk';

function App() {
  return (
    <ChatProvider
      config={{
        apiUrl: 'http://localhost/api/v1',
        wsUrl: 'ws://localhost/api/v1',
        workspaceId: 1,
      }}
    >
      <YourApp />
    </ChatProvider>
  );
}

2. Use hooks in your components

import { useAuth, useChannels, useMessages } from '@chat-saas/react-sdk';

function ChatApp() {
  const { currentUser, login, logout } = useAuth();
  const { channels, selectChannel, currentChannel } = useChannels();
  const { messages, sendMessage, loadMore, hasMore } = useMessages(currentChannel?.id);

  return (
    <div>
      {!currentUser ? (
        <LoginForm onLogin={login} />
      ) : (
        <div style={{ display: 'flex', height: '100vh' }}>
          <ChannelList
            channels={channels}
            currentChannelId={currentChannel?.id}
            onSelectChannel={selectChannel}
          />
          <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
            <MessageList
              messages={messages}
              currentUser={currentUser}
              onLoadMore={loadMore}
              hasMore={hasMore}
            />
            <MessageInput
              onSend={sendMessage}
              placeholder="Type a message..."
            />
          </div>
        </div>
      )}
    </div>
  );
}

API Reference

Hooks

useAuth()

Manages user authentication.

const {
  currentUser,      // Current logged-in user
  isAuthenticated,  // Boolean auth status
  isLoading,        // Loading state
  error,            // Error message
  login,            // (credentials) => Promise<User>
  register,         // (userData) => Promise<User>
  logout,           // () => Promise<void>
} = useAuth();

useChannels()

Manages channels.

const {
  channels,         // Array of channels
  currentChannel,   // Currently selected channel
  isLoading,        // Loading state
  error,            // Error message
  loadChannels,     // () => Promise<void>
  createChannel,    // (name, isPrivate) => Promise<Channel>
  createDM,         // (targetUserId) => Promise<Channel>
  selectChannel,    // (channel) => void
} = useChannels();

useMessages(channelId)

Manages messages for a channel.

const {
  messages,         // Array of messages
  isLoading,        // Loading state
  hasMore,          // More messages available
  error,            // Error message
  sendMessage,      // (content, fileUrl?, fileType?) => Promise<Message>
  editMessage,      // (messageId, content) => Promise<Message>
  deleteMessage,    // (messageId) => Promise<void>
  loadMore,         // () => void
  addReaction,      // (messageId, emoji) => Promise<void>
  removeReaction,   // (reactionId) => Promise<void>
} = useMessages(channelId);

Components

<ChatProvider>

Initializes the SDK with configuration.

<ChatProvider config={{ apiUrl, wsUrl?, workspaceId }}>
  {children}
</ChatProvider>

<MessageList>

Displays a list of messages with auto-scroll and infinite loading.

<MessageList
  messages={messages}
  currentUser={currentUser}
  onLoadMore={loadMore}
  hasMore={hasMore}
  isLoading={isLoading}
/>

<MessageInput>

Input field for sending messages.

<MessageInput
  onSend={sendMessage}
  placeholder="Type a message..."
  disabled={false}
/>

<ChannelList>

Displays a list of channels.

<ChannelList
  channels={channels}
  currentChannelId={currentChannel?.id}
  onSelectChannel={selectChannel}
/>

Advanced Usage

Custom API Client

import { useChatStore } from '@chat-saas/react-sdk';

function MyComponent() {
  const { api } = useChatStore();

  const customAction = async () => {
    const data = await api.client.get('/custom-endpoint');
    return data;
  };
}

WebSocket Events

import { useChatStore } from '@chat-saas/react-sdk';
import { useEffect } from 'react';

function MyComponent() {
  const { ws } = useChatStore();

  useEffect(() => {
    if (!ws) return;

    const unsubscribe = ws.on('typing', (message) => {
      console.log('User is typing:', message.data);
    });

    return unsubscribe;
  }, [ws]);
}

File Uploads

import { useChatStore } from '@chat-saas/react-sdk';

function FileUpload() {
  const { api } = useChatStore();

  const handleUpload = async (file: File) => {
    const { url, filename } = await api.uploadFile(file);
    // Use the URL to send a message with file
    await api.sendMessage(channelId, filename, url, file.type);
  };
}

TypeScript Support

All types are exported:

import type {
  User,
  Channel,
  Message,
  Reaction,
  Workspace,
  AuthTokens,
  ChatConfig,
} from '@chat-saas/react-sdk';

License

MIT

Support

For issues and questions, visit: https://github.com/your-org/chat-saas