react-chatbot-koodums/README.md

A customizable chatbot component for React applications

# Koodums Chatbot

A customizable React chatbot component built with Material-UI, supporting dynamic conversations, quick replies, and Google Maps integration.

## Installation

### Step 1: Install koodums-chatbot
Install via npm (if published):
```bash
npm install koodums-chatbot
```
Or, if you received a tarball (`koodums-chatbot-1.0.0.tgz`):
```bash
npm install /path/to/koodums-chatbot-1.0.0.tgz
```

### Step 2: Install Peer Dependencies
Run the following to install required peer dependencies:
```bash
npm install \
  @emotion/react@^11.10.4 \
  @emotion/styled@^11.10.4 \
  @google-cloud/dialogflow-cx@^4.7.0 \
  @mui/icons-material@^7.0.1 \
  @mui/material@^7.0.1 \
  @reduxjs/toolkit@^1.8.6 \
  @vis.gl/react-google-maps@^1.5.2 \
  firebase@^11.1.0 \
  formik@^2.4.6 \
  lottie-react@^2.4.0 \
  react@^18.2.0 \
  react-bootstrap@2.10.4 \
  react-calendly@^4.3.1 \
  react-device-detect@^2.2.3 \
  react-div-100vh@^0.7.0 \
  react-dom@^18.2.0 \
  react-helmet@^6.1.0 \
  react-player@^2.16.0 \
  react-redux@^8.0.4 \
  react-router-dom@^6.4.2 \
  react-youtube@^10.1.0 \
  redux-persist@^6.0.0 \
  swiper@^9.0.5 \
  typeit@^8.7.1 \
  typeit-react@2.6.4 \
  use-sound@^4.0.1 \
  uuid@^9.0.0 \
  yup@^1.6.1
```

### Step 3: Set Up Environment Variables
Create a `.env` file in your project root with:
```
VITE_URL_PREFIX=https://agent-dev.genaisolutions.ai
VITE_USER=YourName
VITE_COMPANY_NAME=Koodums
VITE_APP_VERSION=1.0.0
VITE_INPUT_HELPER_TEXT=Type your request/question...
```
Alternatively, pass these via the `config` prop (see Usage).

### Step 4: Ensure Backend API
The chatbot requires a backend API at the `VITE_URL_PREFIX` (e.g., `/api/initialize`). Contact the package author for API access or set up a local server at `http://localhost:8888`.

## Usage
Import and use the `ChatBot` component in your React app:

```jsx
import { ChatBot } from 'koodums-chatbot';
import { Container } from '@mui/material';

function App() {
  const config = {
    urlPrefix: process.env.VITE_URL_PREFIX || 'https://agent-dev.genaisolutions.ai',
    user: process.env.VITE_USER || 'Test User',
    companyName: process.env.VITE_COMPANY_NAME || 'Koodums',
    appVersion: process.env.VITE_APP_VERSION || '1.0.0',
    inputHelperText: process.env.VITE_INPUT_HELPER_TEXT || 'Type your request/question...',
    latitude: 38.8977,
    longitude: -77.0365,
  };

  return (
    <Container sx={{ height: '100vh', display: 'flex', flexDirection: 'column' }}>
      <ChatBot
        uniqueCode="WWWW"
        agentId="5NEhhLI8BDjecDNRoDSV"
        isMobile={false}
        config={config}
      />
    </Container>
  );
}

export default App;
```

## Props
- `uniqueCode` (string): Unique identifier for the chatbot session (e.g., `"WWWW"`).
- `agentId` (string): Agent identifier (e.g., `"5NEhhLI8BDjecDNRoDSV"`).
- `isMobile` (boolean): Set to `true` for mobile layouts.
- `config` (object): Configuration object with:
  - `urlPrefix`: API endpoint (e.g., `https://agent-dev.genaisolutions.ai`).
  - `user`: User name.
  - `companyName`: Company name.
  - `appVersion`: App version.
  - `inputHelperText`: Input placeholder.
  - `latitude`, `longitude`: Optional location coordinates.

## Notes
- Ensure the backend API is accessible and configured correctly.
- For mobile apps (e.g., Capacitor), set `isMobile={true}` and test API connectivity.
- The chatbot height is optimized with `height: '100vh'` on the parent `Container`.

## Troubleshooting
- **API Errors**: Check the browser console for `/api/initialize` failures. Verify `urlPrefix`.
- **Missing Dependencies**: Ensure all peer dependencies are installed with correct versions.
- **Contact**: Reach out to the package author (Kevin) for support.

## License
MIT