@nonso_nwabueze/chat-sdk

An enterprise-grade, offline-first React Chat SDK powered by NestJS and WebSockets.

Features

• Offline-First Resilience: Seamlessly queues messages while offline and persists data locally using IndexedDB.
• Enterprise Real-Time UX: Features instantaneous typing indicators, read receipts, and presence awareness powered by Socket.io.
• Secure by Default: Utilizes HMAC SHA-256 request signatures, dynamic getSignature callbacks, API key authentication, and strict timestamp replay protection.
• React Optimization: Built on top of @tanstack/react-query to eliminate unnecessary re-renders with surgical cache rollbacks and infinite scroll support out of the box.
• Drop-in UI Components: Rapidly build chat interfaces with fully-styled, customizable React components (<Chat>, <ChannelList>, <MessageList>, <MessageInput>).

Installation

npm install @nonso_nwabueze/chat-sdk

Quick Start

The quickest way to get started is by using the <Chat> provider and our drop-in UI components:

import React, { useState, useEffect } from "react";
import {
  Chat,
  ChatClient,
  ChannelList,
  ChatWindow,
  MessageList,
  MessageInput,
  generateClientSignature,
} from "@nonso_nwabueze/chat-sdk";
import "@nonso_nwabueze/chat-sdk/dist/index.css";

// 1. Initialize the client
const chatClient = new ChatClient({
  appId: "YOUR_APP_ID",
  apiKey: "YOUR_API_KEY",
  userId: "user-123",
  // Use a callback to securely fetch signatures (e.g. from your backend)
  getSignature: async () => {
    // Example: const res = await fetch('/api/get-signature'); return res.json();
    const timestamp = Date.now().toString();
    const signature = await generateClientSignature(
      "user-123",
      timestamp,
      "YOUR_API_SECRET",
    );
    return { signature, timestamp };
  },
});

export default function App() {
  const [activeChannelId, setActiveChannelId] = useState<string>();

  useEffect(() => {
    chatClient.connect();
    return () => chatClient.disconnect();
  }, []);

  return (
    <Chat
      client={chatClient}
      activeConversationId={activeChannelId}
      onConversationSelect={setActiveChannelId}
    >
      <div style={{ display: "flex", height: "100vh" }}>
        <div style={{ width: "300px", borderRight: "1px solid #eee" }}>
          <ChannelList />
        </div>
        <div style={{ flex: 1 }}>
          <ChatWindow>
            <MessageList />
            <MessageInput />
          </ChatWindow>
        </div>
      </div>
    </Chat>
  );
}

Documentation

Hooks

The SDK exposes fully-managed React hooks for instantaneous UI updates. They must be used within a <Chat> provider:

• useChatContext(): Access the underlying chatClient and active context state.
• useChannels(): Fetch and manage the user's channels.
• useMessages(channelId): Fetch and manage messages for a specific channel.

Repositories

Direct access to the underlying APIs (via chatClient):

• chatClient.messagesRepo: sendMessage, editMessage, deleteMessage, pinMessage, unpinMessage
• chatClient.channelsRepo: getChannels, createChannel, addMembers, markAsRead, getPinnedMessages

License

MIT