Kothon Call Widget

A simple and customizable call widget for React applications.

Installation

Install the package using npm:

npm install kothon-call-widget

or

yarn add kothon-call-widget

Usage

Here's a basic example of how to use the CallWidget in your React application:

import { useState } from "react";
import KothonCallWidget from "kothon-call-widget";
import "kothon-call-widget/styles.css";

function App() {
	const [showCallWidget, setShowCallWidget] = useState(false);
	const [errorList, setErrorList] = useState([]);

	// you can make decision or show toast based on errors
	console.log(errorList);

	return (
		<div>
			<button onClick={() => setShowCallWidget(true)}>Click Here</button>

			{showCallWidget && (
				<KothonCallWidget
					setShowCallWidget={setShowCallWidget}
					connectionUrl={import.meta.env.VITE_WEBRTC_CONNECTION_URL}
					pipelineConfig={{ agent_id: import.meta.env.VITE_AGENT_ID }}
					setErrorList={setErrorList}
				/>
			)}
		</div>
	);
}

export default App;

Props

| Prop | Type | Description | | ------------------- | ------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | | setShowCallWidget | (show: boolean) => void | A function to control the visibility of the widget. | | connectionUrl | string | The URL for the WebRTC connection. | | pipelineConfig | object | An object containing the pipeline configuration. | | setErrorList | (errors: { type: string; message: string }[]) => void | A callback function that receives an array of error objects. This can be used to display connection or media errors to the user. |

Styling

To use the default styles, import the CSS file into your application:

import "kothon-call-widget/styles.css";

License

This project is licensed under the MIT License.

Error Handling

The setErrorList prop allows you to receive and handle errors that occur within the widget. The errorList state will be dynamically updated, with errors being added as they occur and removed once they are resolved.

You can use this to display error messages to the user or for debugging purposes.

Keywords

• call
• widget
• voice
• agent
• kothon
• chat widget
• ai chat widget