@talo-chat/chat-sdk

A React SDK for integrating Talo's chat and audio/video call functionality into your applications.

Features

• 🔐 Authentication Required: All features require user authentication
• 💬 Real-time Chat: Send and receive messages in real-time
• 📞 Audio/Video Calls: Make and receive audio and video calls using WebRTC
• 🔧 Easy Integration: Simple React components and hooks
• 🎨 Customizable: Configurable styling and behavior

Installation

npm install @talo-chat/chat-sdk

Development Testing

Use these commands before publishing a new SDK version:

npm run build
npm test
npm pack

Then install the generated .tgz file in a consumer app to verify real integration:

npm i @talo-chat/chat-sdk
import Cookies from "js-cookie";

Quick Start

import {
  TaloProvider,
  ThemeProvider,
  FileProvider,
  StreamProvider,
  Home,
  Chat,
  Contacts,
  CallHistory,
  StarMessage,
  VideoCallPage,
  ImageViewer,
  LoadInitialData,
  ListenAllEvents,
  ForwardMessageModal,
  PinMessageModal,
  SelectAboutModal,
  NavigateToSpesificMessage,
  ReportUserModal,
  PrivacyPolicyDrawer,
  SelectLanguageModal,
  CreatePollModal,
  ViewPollVoteModal,
  SendLocationModal,
  AcceptVideoCall,
  CallDeclinedModal,
  GiphyComponentModal,
  SelectThemeColorModal,
} from '@talo-chat/chat-sdk'


const taloConfig = {
  apiUrl: 'https://chat.thecraftitems.in/api/',
  peerHost: 'chat.thecraftitems.in',
  peerPort: 443,
  peerSecure: true,
  socketUrl: 'https://chat.thecraftitems.in',
  socketPath: '/socket',
  peerPath: '/',
  appName: 'My App',
  defaultChatId: 262,
}

// Set auth token
const TOKEN = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjo2ODcsImlhdCI6MTc3ODMwNjAzMH0.6Wwxu-7-uG8FF0uC-sv__EWQpKVI4dj3G-**********"
localStorage.setItem("whoxa_web_token", TOKEN);
Cookies.set("whoxa_web_token", TOKEN, { path: "/", sameSite: "None", secure: true });

// Set authType to "sdk" so SDK won't render sidebar/bottombar
localStorage.setItem("authType", "sdk");
Cookies.set("authType", "sdk", { path: "/" });
function TaloRoutes() {
  return (
    <>
      <LoadInitialData />


      <ListenAllEvents />
      <ImageViewer />
      <ForwardMessageModal />
      <PinMessageModal />
      <SelectAboutModal />
      <NavigateToSpesificMessage />
      <ReportUserModal />
      <PrivacyPolicyDrawer />
      <SelectLanguageModal />
      <CreatePollModal />
      <ViewPollVoteModal />
      <SendLocationModal />
      <AcceptVideoCall />
      <CallDeclinedModal />
      <GiphyComponentModal />
      <SelectThemeColorModal />

      {/*
        SDK internal routes use its own components.
        We expose a single global close handler via sessionStorage
        so we can close the popup from inside SDK components.
      */}
      <Routes>
        <Route path="/" element={<Home />}>
          <Route index element={<Navigate to="contact-list" replace />} />
          <Route path="chat" element={<Chat />} />
          <Route path="contact-list" element={<Contacts />} />
          <Route path="call-history" element={<CallHistory />} />
          <Route path="star-messages" element={<StarMessage />} />
        </Route>
        <Route path="video-call" element={<VideoCallPage />} />
      </Routes>



    </>
  )
}

function App() {

  const [showChat, setShowChat] = useState(false)
  const closeChat = () => setShowChat(false)

  // Bridge used by SDK back buttons inside the iframe/host tree
  ;(window).__taloOnCloseChat = closeChat


  return (
    <TaloProvider config={taloConfig}>
      <ThemeProvider>
        <StreamProvider>
          <FileProvider>

           <div className="landing-page" id="wa-chat-root">
           {/* Floating Chat Toggle Button */}
            <button className="talo-chat-fab"
              onClick={() => setShowChat(!showChat)}
              aria-label="Toggle chat"
            >
              {showChat ? '✕' : '💬'}
            </button>

            {/* Chat Popup Overlay */}
            {showChat && (
<div className="talo-chat-popup-overlay">
<div className="talo-chat-popup-body">
                  {/* Back button replaces top bar */}

                  <TaloRoutes />
                </div>
              </div>
            )}
</div>

 </FileProvider>
        </StreamProvider>
      </ThemeProvider>
    </TaloProvider>
  );
}

export default App;

Configuration

The SDK requires configuration for API endpoints and WebRTC peer server:

interface TaloConfig {
  apiUrl: string;           // Your API base URL
  peerHost: string;         // PeerJS server host
  peerPort?: number;        // PeerJS server port (default: 443)
  peerPath?: string;        // PeerJS server path (default: '/')
  peerSecure?: boolean;     // Use secure connection (default: true)
  socketUrl?: string;       // Socket.io server URL
  socketPath: '/socket',
  defaultChatId: number,
  appName?: string;         // Your app name
  theme?: {
    primaryColor?: string;
    textColor?: string;
  };
}

Authentication

The SDK requires authentication before using chat or call features. Make sure your users are authenticated with your backend and have a valid JWT token stored in cookies as whoxa_web_token.

Components

TaloProvider

Wraps your app and provides authentication and configuration context.

<TaloProvider config={taloConfig}>
  <YourApp />
</TaloProvider>

Chat

Real-time chat component.

<Chat
  chatId="unique_chat_id"
  className="custom-chat-styles"
/>

VideoCall

Audio/video call component.

<VideoCall
  receiverId={123}
  callType="video" // or "audio"
  className="custom-call-styles"
/>

Hooks

useTaloAuth

Get authentication state.

const { isAuthenticated, user, token } = useTaloAuth();

useTaloChat

Chat functionality for custom implementations.

const { messages, sendMessage, isConnected, error } = useTaloChat(chatId);

useTaloCall

Call functionality for custom implementations.

const {
  startCall,
  endCall,
  acceptCall,
  declineCall,
  isInCall,
  currentCall,
  remoteStream,
  localStream,
  error
} = useTaloCall();

API Reference

Authentication Flow

1. User authenticates with your backend
2. JWT token stored in whoxa_web_token cookie
3. SDK automatically fetches user profile
4. Chat and call features become available

Socket Events

The SDK uses Socket.io for real-time communication:

• join_chat: Join a chat room
• leave_chat: Leave a chat room
• send_message: Send a message
• new_message: Receive a message
• start_call: Initiate a call
• accept_call: Accept an incoming call
• decline_call: Decline an incoming call
• end_call: End a call

PeerJS Configuration

WebRTC calls use PeerJS for peer-to-peer connections. Configure your PeerJS server in the TaloConfig.

Browser Support

• Chrome 70+
• Firefox 65+
• Safari 12+
• Edge 79+

Permissions

The SDK requires the following browser permissions:

• camera (for video calls)
• microphone (for audio calls)

License

MIT