🚀 Chatbot UI Package - @integrate.team/react-chatbot-types

The @integrate.team/react-chatbot-types package provides two main components, ChatsWebs and ChatIcons, to help you easily integrate a chat interface into your project.

📥 Installation

Install the package via npm:

npm install @integrate.team/react-chatbot-types

🔧 Usage

To use the components in your project, import them as follows:

import { ChatsWebs, ChatIcons } from '@integrate.team/react-chatbot-types';

🧩 Components

This package includes two main components:

ChatsWebs: A component for displaying the chatbot in full-screen format.

ChatIcons: A component for displaying the chatbot icon in a popup format.

🎛️ Props

These components can be configured by passing the following props:

| Prop | Description | | ----------------------------- | --------------------------------------------------| | END_POINT_CONVERSTATION | The domain of the chatbot server | | imgUrl | Image URL (icon for the chatbot) | | input_channel | "livechat" | | access_token | Token from coreB | | metadata | {} | | sender_id | Usermis | | title | Title in Header chatbot (default "Trợ lý chatbot")| | integrate_channel | knowledge_sources_blacklist |

📝 Example Configuration

Here’s an example of how to use these components:

import React from 'react';
import { ChatsWebs, ChatIcons } from '@integrate.team/react-chatbot-types';

function App() {

const params = {
    imgUrl : YOUR URL
    input_channel : "livechat",
    END_POINT_CONVERSTATION : YOUR END_POINT,
    access_token : YOUR ACCESS TOKEN,
    sender_id: YOUR USERMIS,
    title = YOUR NAME BOT, 
    metadata : {}
    }

return (
<div>
 <ChatIcons {...params}/>
 <ChatsWebs {...params}/>
</div>
);
}

export default App;

🤝 Contributions and Support

If you have any questions or suggestions, please open an issue or submit a pull request.