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):

npm install koodums-chatbot

Or, if you received a tarball (koodums-chatbot-1.0.0.tgz):

npm install /path/to/koodums-chatbot-1.0.0.tgz

Step 2: Install Peer Dependencies

Run the following to install required peer dependencies:

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 \
  [email protected] \
  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 \
  [email protected] \
  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:

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