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

The @integrate.team/react-chatbot package provides two main components, ChatsWebs and ChatIcons, to help you easily integrate a chat interface into your project. You can customize colors, user and bot images, and more.

📥 Installation

Install the package via npm:

npm install @integrate.team/react-chatbot

🔧 Usage

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

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

🧩 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 | | ----------------------- | ------------------------------------- | | handleSubmit | Function to handle message submission | | jwt | User authentication token (JWT) | | URL_DOMAINS | An object containing various URLs related to the chatbot: ROOT_URL as the web path, SOCKET_URL as the domain of the chatbot server, and FEEDBACK_URL as the domain for calling the API to send feedback. | | imgUrl | Image URL (icon for the chatbot) | | imgUser | Avatar for the user | | imgChatbot | Avatar for the chatbot | | chatTextUserColor | Color for user message text | | chatTextBotColor | Color for bot message text |

📝 Example Configuration

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

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

function App() {
const handleSubmit = (message) => {
console.log("Message sent: ", message);
};

const URL_DOMAINS = {
ROOT_URL: "https://example.com",
SOCKET_URL: "https://your-chatbot-server.com",
FEEDBACK_URL: "https://example.com/feedback",
}

return (
<div>
<ChatIcons
        handleSubmit={handleSubmit}
        jwt="your_jwt_token"
        URL_DOMAINS={URL_DOMAINS}
        imgUrl="https://example.com/default-avatar.png"
        imgUser="https://example.com/user-avatar.png"
        imgChatbot="https://example.com/chatbot-avatar.png"
        chatTextUserColor="#4CAF50"
        chatTextBotColor="#FF9800"/>
    
<ChatsWebs
        handleSubmit={handleSubmit}
        jwt="your_jwt_token"
        URL_DOMAINS={URL_DOMAINS}
        imgUrl="https://example.com/default-avatar.png"
        imgUser="https://example.com/user-avatar.png"
        imgChatbot="https://example.com/chatbot-avatar.png"
        chatTextUserColor="#4CAF50"
        chatTextBotColor="#FF9800"
    />
</div>
);
}

export default App;

📁 Folder Structure

src
├── components
│ ├── ChatsWebs.jsx
│ └── ChatIcons.jsx
├── globals.css
└── index.js

🤝 Contributions and Support

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