# 🚀 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")|

## 📝 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.