Interface-chatbot NPM

interface-chatbot

interface-chatbot is a React component designed for easy integration of a chatbot interface into your projects. This package provides a customizable chatbot UI that can connect to various backend services through dynamic parameters.

Installation

To install the package, use the following npm command:

npm i interface-chatbot

Usage

To use the Chatbot component in your project, follow these steps:

Import the Component
Import Chatbot into your React component file:
```
import Chatbot from 'interface-chatbot';
```

Integrate the Chatbot Component

Add the Chatbot component to your component's render method. Configure it using the available props as needed:

<Chatbot
    embedToken={chatbotEmbedToken}
    className={""}
    onOpen={() => {}}
    onClose={() => {}}
    threadId={""}
    bridgeName={""}
    variables={}
/>

Configure the chatbot to get the embedToken and set the chatbot configuration
- Go to this website: ai-middleware.com
- Log in or create an account if you haven't already.
- Follow these steps to get your embedToken:
  1. Navigate to the Org or Bridges section.
  2. Give your prompt and chatbot specification.
  3. Look for the Chatbot option.
  4. Generate your chatbot embedToken with the help of given org_id, chatbot_id, user_id and sign the token with access_key
- Once you have the embedToken:
  1. Add it to your configuration script as follows:
```
<Chatbot
    embedToken="eysjadfl********************ladfl2ld"
/>
```
  2. Your embedding is ready, Now you can enjoy AI experience with Chatbot.

Props

Prop Name	Type	Default Value	Required	Description
`embedToken`	`string`	None	true	A JWT token containing the parameters `project_id`, `org_id`, `interface_id`, and `user_id` signed with `auth_key`.
`className`	`string`	""	false	Custom CSS class for styling the chatbot interface. Default styling is applied if not specified.
`onOpen`	`function`	()=>{}	false	Callback function that is called when the chatbot is opened.
`onClose`	`function`	()=>{}	false	Callback function that is called when the chatbot is closed.
`threadId`	`string`	""	true	A unique identifier for the communication channel. This also helps in saving the chat history.
`bridgeName`	`string`	'root'	false	Specifies the bridge name to use. Defaults to 'root' if not provided.
`variables`	`object`	{}	false	Additional or dynamic parameters that you want to send to the bridge.
`iconColor`	`enum`	'dark'	false	Chatbot icon is showing according to theme. Available theme `light`, `dark`
`fullScreen`	`boolean`	false	false	Is Chatbot open in full screen or not
`hideCloseButton`	`boolean`	false	false	Is close button should be visible or not at the top
`hideIcon`	`boolean`	false	false	Is chatbot icon should be visible or not.

Available Methods

Open chatbot explicitly

window.openChatbot()

Close chatbot explicitly

window.closeChatbot()

Refresh Chats

window.reloadChats()

Examples

Here's a simple example of how to integrate the Chatbot component into your React application:

import React from 'react';
import Chatbot from 'interface-chatbot';

function App() {
    const chatbotEmbedToken = 'your_embed_token_here';
    
    return (
        <div className="App">
            <Chatbot
                embedToken={chatbotEmbedToken}
                className="h-100 w-100 pos-abs"
                onOpen={() => console.log("Chatbot opened")}
                onClose={() => console.log("Chatbot closed")}
                threadId="your_thread_id"
                bridgeName="optional_bridge_name"
                variables={your_variables}
            />
        </div>
    );
}

export default App;

Contributing

Contributions are welcome! Please feel free to submit a pull request or open an issue for any bugs or feature requests.

License

MIT.

Make sure to replace placeholders such as your_embed_token_here, your_thread_id, and your_variables with actual values or examples relevant to your implementation. This README aims to provide clear instructions on how to integrate and customize the chatbot, improving user experience and adoption.