mp70-react-component

# AplisayWidget Integration Guide

This guide is designed for developers looking to integrate the `AplisayWidget` into a React application, with flexible options for applying both Tailwind CSS and traditional CSS styling directly through props.

## Setup

### Dependencies

Ensure you have `react` installed in your project. If you plan to use Tailwind CSS, make sure it's also set up:

```bash
npm install react tailwindcss@latest postcss@latest autoprefixer@latest --save-dev
```

Configure Tailwind by generating a config file:

```bash
npx tailwindcss init
```

Include Tailwind in your project's CSS:

```css
/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
```

### Environment Configuration

Set the necessary environment variables for API connectivity:

- `REACT_APP_APLISAY_URL`: API URL.
- `REACT_APP_APLISAY_AGENT`: Listener ID.
- `REACT_APP_APLISAY_KEY`: Room authentication key.

## Component Integration

Import `AplisayWidget` into your application and control its presentation through state hooks and style props. Below is a full example including dynamic style passing:

```javascript
import React, { useState } from 'react';
import AplisayWidget from './components/AplisayWidget';

const AgentPopout = () => {
  const [open, setOpen] = useState(false);
  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);

  // Styling options: Tailwind CSS for utility classes, inline styles for specific attributes
  const widgetStyles = {
    style: { color: 'blue', backgroundColor: 'white', padding: '20px' },
    className: "text-lg bg-gray-100 p-5 border border-gray-200 rounded shadow-lg"
  };

  return (
    <>
      <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" onClick={handleOpen}>
        Open Widget
      </button>
      {open && (
        <div className="fixed inset-0 flex items-center justify-center p-4">
          <AplisayWidget
            url={process.env.REACT_APP_APLISAY_URL}
            listenerId={process.env.REACT_APP_APLISAY_AGENT}
            roomKey={process.env.REACT_APP_APLISAY_KEY}
            open={open}
            setOpen={setOpen}
            verbose={true}
            {...widgetStyles}
          />
          <button className="absolute top-0 right-0 p-2" onClick={handleClose}>Close</button>
        </div>
      )}
    </>
  );
};

export default AgentPopout;
```

## Styling Flexibility

The `widgetStyles` object is used to pass inline styles and Tailwind utility classes. Adjust these properties to match the styling requirements of your project. This method ensures that the widget can be easily themed to align with various design systems or preferences.

## Notes

- Ensure that your build process includes CSS processing for Tailwind if used.
- Customize environment variables and styling as needed to fit the application context.