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

``bash npm install react-chat-agent`

Then import the ui in your app:

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

`Quick Start`

`javascript 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 ( onCreateSession={async () => await sessionManager.createSession()} config={{ chatUrl: 'https://api.example.com/chat', historyUrl: 'https://api.example.com/history' }} /> ); }`

`Documentation`

See INTEGRATION_GUIDE.md for complete documentation including: - Architecture overview - API reference - Backend requirements - Message format specifications - Complete examples

`Package Exports`

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

Features

Quick Start

javascript
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 (
    
              onCreateSession={async () => await sessionManager.createSession()}
        config={{
          chatUrl: 'https://api.example.com/chat',
          historyUrl: 'https://api.example.com/history'
        }}
      />
    
  );
}

Package Exports

javascript
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';