React Chat Agent

Clean, production-ready React chat component. Bring your own API - you control everything.

Features

• ✅ External Token Management - You control authentication
• ✅ Automatic Token Refresh - Handles expiry seamlessly
• ✅ Dual Mode - WebSocket or SSE streaming
• ✅ Session Management - Clean session lifecycle
• ✅ Type Safety - Full TypeScript support
• ✅ Customizable - Dark/light themes, custom styling
• ✅ Production Ready - Error handling, retry logic, file uploads

Installation

npm install react-chat-agent

Then import the ui in your app:

import 'react-chat-agent/ui.css';

Quick Start

import { 
  ChatProvider, 
  DefaultPanel, 
  tokenManager, 
  sessionManager 
} from 'react-chat-agent';

function App() {
  // 1. Configure token refresh
  tokenManager.setRefreshCallback(async (refreshToken) => {
    const res = await fetch('/api/token/refresh', {
      method: 'POST',
      body: JSON.stringify({ refreshToken })
    });
    return await res.json(); // { accessToken, refreshToken, expiresIn }
  });

  // 2. Configure session creation
  sessionManager.setCreateSessionCallback(async () => {
    const res = await fetch('/api/session/create', { method: 'POST' });
    return await res.json(); // { sessionId, accessToken, refreshToken, expiresIn }
  });

  // 3. Initialize tokens
  tokenManager.setTokens({
    sessionId: 'your-session-id',
    accessToken: 'your-token',
    refreshToken: 'your-refresh-token',
    expiresIn: 900
  });

  return (
    <ChatProvider useWebSocket={false}>
      <DefaultPanel 
        onCreateSession={async () => await sessionManager.createSession()}
        config={{
          chatUrl: 'https://api.example.com/chat',
          historyUrl: 'https://api.example.com/history'
        }}
      />
    </ChatProvider>
  );
}

Documentation

See INTEGRATION_GUIDE.md for complete documentation including:

• Architecture overview
• API reference
• Backend requirements
• Message format specifications
• Complete examples

Package Exports

import {
  ChatProvider,      // Context provider
  DefaultPanel,         // Main chat component
  useChatContext,    // Hook to access chat state
  tokenManager,      // Token lifecycle management
  sessionManager,    // Session lifecycle management
  chatApi,          // API client
  streamService,    // Stream handler
  webSocketService  // WebSocket client
} from 'react-chat-agent';

Examples

• examples/App.jsx - Simple SSE example
• examples/App-with-session.jsx - Complete session management example

License

MIT