JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 39
  • Score
    100M100P100Q104587F
  • License MIT

A plug-and-play AI chatbot widget with voice call support and a developer console for RAG configuration.

Package Exports

  • gts-chatbot
  • gts-chatbot/dist/index.esm.js
  • gts-chatbot/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (gts-chatbot) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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