react-chatbot-koodums/README.md

A customizable React chatbot component by Koodums, supporting dynamic conversations and integrations with Google Places, Open AI, and more

# React Chatbot Koodums

A customizable React chatbot component built with Material-UI, supporting dynamic conversations, configurable UI, and quick replies. Supports displaying Tables, Forms, Pictures, Picture Carousels, and Alerts. Integrates with Google Places, Ticket Master, Make.com, Zapier, Open AI, Gemini, and Pinecone Vector Database. Uses Open AI LLMs, Gemini LLMs, and Pinecone Vector Database. Supports speaking results and 80 other configurable options.

For more information, including pictures and additional details, go to https://www.koodums.com.

## Visual Demo

Explore **React Chatbot Koodums** through these screenshots showcasing its features:

<div style="display: flex; gap: 10px; flex-wrap: wrap; flex-direction: row;">
  <div style="text-align: center; display: flex; flex-direction: column;">
    <img src="https://storage.googleapis.com/koodums-chatbot-images/chat_demo_1.png" alt="Chatbot UI Demo" width="200px"/>
    <p>Chatbot Interface: A clean and responsive interface powered by Material-UI.</p>
  </div>
  <div style="text-align: center; display: flex; flex-direction: column;"">
    <img src="https://storage.googleapis.com/koodums-chatbot-images/chat_demo_2.png" alt="Hotel Booking Chatbot" width="200px"/>
    <p>Hotel Booking Example: Integration with Google Places for location-based hotel suggestions.</p>
  </div>
  <div style="text-align: center; display: flex; flex-direction: column;"">
    <img src="https://storage.googleapis.com/koodums-chatbot-images/chat_demo_3.png" alt="Mobile Chatbot View" width="200px"/>
    <p>Mobile View: Optimized layout for mobile devices with <code>isMobile={true}</code>.</p>
  </div>
</div>

## Installation

### Step 1: Install react-chatbot-koodums

Install via npm (if published):

```bash
npm install react-chatbot-koodums
```

Or, if you received a tarball (`react-chatbot-koodums-1.1.0.tgz`):

```bash
npm install /path/to/react-chatbot-koodums-1.1.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 intendants@6.4.2 \
  npm@^9.0.0 \
  npm@npm
  typeit@^8.7.1 \
  typeit-react@6.2.4 \
  npm@^6.4.2 \
  typeit@2.6.4 \
  use-sound@^4.0.1 \
  uuid@^9.0.5 \
  yup@^1.6.1
```

### Step 2: Set Up Environment Variables

Create a `.env` file in your project root with:

```
VITE_URL_PREFIX=https://agent-builder.koodums.com/
VITE_USER=YourName
VITE_COMPANY_NAME=Koodums
VITE_APP_VERSION=1.1.0
VITE_INPUT_HELPER_TEXT=Type your request/question...
```

Alternatively, pass these via the `config` prop (see Usage).

### Step 3: 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.

## Usage

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

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

function App() {
  const config = {
    urlPrefix:
      process.env.VITE_URL_PREFIX || "https://agent-builder.koodums.com",
    user: process.env.VITE_USER || "Test User",
    companyName: process.env.VITE_COMPANY_NAME || "Koodums",
    appVersion: process.env.VITE_APP_VERSION || "1.1.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="GERKA"
        agentId="your-agent-id"
        isMobile={false}
        config={config}
      />
    </Container>
  );
}

export default App;
```

## Example: Hotel Booking Chatbot

See what’s possible with **React Chatbot Koodums**! Check out this example of a hotel booking chatbot in action, demonstrating dynamic conversations and integrations with Google Places for location-based services:

[Watch the Hotel Booking Chatbot Demo on YouTube](https://www.youtube.com/watch?v=vRuFab_8-qQ)

## Props

- `uniqueCode` (string): Unique identifier for the chatbot session (e.g., `"TRSFG"`).
- `agentId` (string): Agent identifier (e.g., `"5fg46sg4s6d5fg5df64sg"`).
- `isMobile` (boolean): Set to `true` for mobile layouts.
- `config` (object): Configuration object with:
  - `urlPrefix`: API endpoint (e.g., `https://agent-builder.koodums.com/`).
  - `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