gts-chatbot

A plug-and-play AI chatbot React component with voice call support, speech-to-text input, and a built-in Developer Console for RAG (Retrieval-Augmented Generation) configuration.

Features

• 💬 Chat interface with typing indicators
• 🎤 Speech-to-text mic input (hold-to-record)
• 🔊 Text-to-speech bot responses
• 📞 Voice call mode with AI agent "Sera"
• 🧠 Developer Console to configure:
  • Document & URL ingestion (RAG preprocessing)
  • Embedding model selection
  • Vector database selection (Chroma, FAISS, Pinecone, etc.)
  • Chat model selection (LLaMA, Qwen, OpenAI, Gemini, etc.)
  • Custom prompts, temperature, top-k, max tokens

Installation

npm install gts-chatbot

Peer Dependencies

Make sure these are installed in your project:

npm install react react-dom @mui/material @mui/icons-material @emotion/react @emotion/styled react-icons

Usage

Basic Usage

import React from 'react';
import { Chatbot } from 'gts-chatbot';

function App() {
  return (
    <div>
      <h1>My Website</h1>

      {/* Drop-in chatbot widget — renders a floating chat icon */}
      <Chatbot
        config={{
          API_BASE_URL: "https://your-backend-url.com",
          PROJECT_NAME: "your-project-name"
        }}
      />
    </div>
  );
}

export default App;

Using DeveloperConsole Standalone

import React from 'react';
import { DeveloperConsole } from 'gts-chatbot';

function AdminPage() {
  return (
    <DeveloperConsole
      config={{
        API_BASE_URL: "https://your-backend-url.com",
        PROJECT_NAME: "your-project-name"
      }}
      closeConsole={() => console.log("Console closed")}
      openChatbot={() => console.log("Open chatbot")}
    />
  );
}

export default AdminPage;

Config Options

| Prop | Type | Default | Description | |------|------|---------|-------------| | config.API_BASE_URL | string | "https://genaitechsol.shop" | Your backend API base URL | | config.PROJECT_NAME | string | "genaitechsol.com" | Your project identifier |

Backend API Endpoints Expected

Your backend must expose:

| Method | Endpoint | Description | |--------|----------|-------------| | POST | /preprocess | Ingest documents and URLs | | POST | /select_vectordb | Select the vector database | | POST | /select_chat_model | Set the chat model and prompt config | | POST | /chat | Send a user message, receive a response | | GET | /get_config | Fetch current chatbot title and welcome message |

Accessing the Developer Console (In-Chat)

1. Click the chatbot icon to open it
2. Triple-click the chat title bar — a ⚙️ settings icon will appear
3. Click the settings icon and enter the admin key (admin123 by default — change this in your fork)
4. The Developer Console will open inside the chat window

Publishing to npm (For Maintainers)

1. Install dependencies and build

cd gts-chatbot
npm install
npm run build

2. Login to npm

npm login

3. Publish

npm publish

Make sure the package name in package.json is unique on npm. Consider scoping it: @yourorg/gts-chatbot

Project Structure

gts-chatbot/
├── src/
│   ├── index.js            # Package entry — exports Chatbot & DeveloperConsole
│   ├── Chatbot.js          # Main chatbot widget component
│   ├── Chatbot.css         # Chatbot styles
│   ├── DeveloperConsole.js # Developer configuration panel
│   └── DeveloperConsole.css
├── dist/                   # Built output (generated by rollup)
├── rollup.config.js
├── package.json
└── README.md

License

MIT