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:

1. Import the Component

   Import Chatbot into your React component file:

   import Chatbot from 'interface-chatbot';

2. 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={}
   />

3. 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

1. Open chatbot explicitly

window.openChatbot()

2. Close chatbot explicitly

window.closeChatbot()

3. 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.