React Chat SDK

A simple, reusable React Chat Component!

Install

npm install react-chat-sdk
# or
yarn add react-chat-sdk

Getting Started

import ChatComponent from "react-chat-sdk";
import "react-chat-sdk/dist/style.css";

<ChatComponent
  serverUrl={{
    chatURL: "API endpoint that fetches history",
    audioURL: "Audio transcript endpoint",
    webSocketURL: "WebSocket URL that can load live messages",
  }}
  headers={{
    Authorization: "Auth token if needed",
  }}
  userName={"Full Name"}
  userId={"Mail ID"}
/>;

Options

serverUrl={{
        chatURL:
          "url that fetches history",
        audioURL:
          "audio url that translate audio",
        audioOutputURL:
          "url that gives audio transcript should be wav file",
        webSocketURL:
          "[email protected]&agent_id=0",
      }}
      headers={{
        Authorization: `Bearer token`,
      }}
      userName={"Full Name"}
      userId={"[email protected]"}
      entityId={"uuid"}
      width={"500"}
      height={"500"}
      open={"need to pass true to open chat window"}
      onClose={"callback function to close chat window"}
      appId={"your appid string"}
      initialMessage={"Send a welcome message"}
      session_id={"uuid"}
      welcomeMessage={'Hi'}
      agent_ids={[]}

Request and Response for chaturl that fetches history (chatURL)

Request formdata that accept at server side (which already being sent from sdk)


"user_id": "mail-id",
"page": 1,
"page_size": 10,
"order": "desc"


Response

"data": {
        "history": [
            {
                "id": "uuid",
                "session_id": "uuid",
                "user_id": "mail-id",
                "agent_ids": [],
                "user_type": "agent || user",
                "action_type": "",
                "message_type": "text",
                "message": "",
                "meta_data": null,
                "created_at": "",
                "parent_message_id": "",
                "message_read": false
            }
        ],
        "total": 58
    },

Request and Response for audioURL

Request formdata that accept at server side (which already being sent from sdk)

"audio": binary
"user_id":"mail-id"
"src_lang":"en-IN"

Response

{
    "language_code": "en-IN",
    "provider": "sarvam",
    "success": true,
    "transcript": "",
    "translation": ""
}

Request and Response for websocket

Request params thatb accept st server side (which already being sent from sdk)

{
  "user_id": "userId",
  "query": "message",
  "transcript_query": "translated_message",
  "entity_id": "uuid",
  "agent_ids": [],
  "session_id":"",
  "type": "agent_chat",
  "agent_type": "",
  "audio_enabled": false,
  "language_code": "en-IN"
},

Response

{
  "id": "uuid",
  "type": "agent_response",
  "session_id": "uuid",
  "user_id": "[email protected]",
  "user_type": "agent | user",
  "agent_response": {
    "reasoning": "",
    "message": "",
    "message_type": "text",
    "content": {
      "text": "",
      "headers": null,
      "rows": null,
      "type": null,
      "labels": null,
      "data": null,
      "items": null,
      "markdown": "",
      "file_size": 0,
      "file_name": ""
    },
    "followup_questions": null,
    "actions": null,
    "audio_urls": null,
    "language_code": "",
    "audio_storage_prefix": "example.wav",
    "translated_message": ""
  },
  "message_type": "text"
}

configure audio output url at server side with audio_storage_prefix param which should accept .wav file and it will be handle at sdk