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

1npm install koodums-chatbot

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

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

Step 2: Install Peer Dependencies

Run the following to install required peer dependencies:

1npm install \
2  @emotion/react@^11.10.4 \
3  @emotion/styled@^11.10.4 \
4  @google-cloud/dialogflow-cx@^4.7.0 \
5  @mui/icons-material@^7.0.1 \
6  @mui/material@^7.0.1 \
7  @reduxjs/toolkit@^1.8.6 \
8  @vis.gl/react-google-maps@^1.5.2 \
9  firebase@^11.1.0 \
10  formik@^2.4.6 \
11  lottie-react@^2.4.0 \
12  react@^18.2.0 \
13  react-bootstrap@2.10.4 \
14  react-calendly@^4.3.1 \
15  react-device-detect@^2.2.3 \
16  react-div-100vh@^0.7.0 \
17  react-dom@^18.2.0 \
18  react-helmet@^6.1.0 \
19  react-player@^2.16.0 \
20  react-redux@^8.0.4 \
21  react-router-dom@^6.4.2 \
22  react-youtube@^10.1.0 \
23  redux-persist@^6.0.0 \
24  swiper@^9.0.5 \
25  typeit@^8.7.1 \
26  typeit-react@2.6.4 \
27  use-sound@^4.0.1 \
28  uuid@^9.0.0 \
29  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:

1import { ChatBot } from 'koodums-chatbot';
2import { Container } from '@mui/material';
3
4function App() {
5  const config = {
6    urlPrefix: process.env.VITE_URL_PREFIX || 'https://agent-dev.genaisolutions.ai',
7    user: process.env.VITE_USER || 'Test User',
8    companyName: process.env.VITE_COMPANY_NAME || 'Koodums',
9    appVersion: process.env.VITE_APP_VERSION || '1.0.0',
10    inputHelperText: process.env.VITE_INPUT_HELPER_TEXT || 'Type your request/question...',
11    latitude: 38.8977,
12    longitude: -77.0365,
13  };
14
15  return (
16    <Container sx={{ height: '100vh', display: 'flex', flexDirection: 'column' }}>
17      <ChatBot
18        uniqueCode="WWWW"
19        agentId="5NEhhLI8BDjecDNRoDSV"
20        isMobile={false}
21        config={config}
22      />
23    </Container>
24  );
25}
26
27export 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