VDM Chatbot Library

A standalone React chatbot component library with streaming support, speech recognition, and markdown rendering. Designed for easy integration into any React application.

Features

• 🗣️ Real-time Streaming: Support for streaming responses with real-time updates
• 🤖 AI-Powered: Built for integration with AI chat services
• 📱 Responsive Design: Works seamlessly on desktop and mobile devices
• 🎨 Customizable UI: Easily customizable with Tailwind CSS
• 🔧 Extensible Components: Modular components for flexible customization
• 📝 Markdown Rendering: Rich text display with markdown support
• 🎤 Speech Recognition: Voice input support (via hooks)
• 🧠 Thinking Blocks: Visual representation of AI thought processes
• 🔧 Tool Integration: Support for external tools and device integration

Installation

npm install @vdmhealth/chatbot

Basic Usage

import React from 'react';
import { ChatBot } from '@vdmhealth/chatbot';

const MyApp = () => {
  return (
    <div style={{ height: '600px', width: '400px' }}>
      <ChatBot 
        token="your-api-token-here" 
        title="My Chat Assistant"
        className="bg-white"
      />
    </div>
  );
};

export default MyApp;

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | token | string | Yes | API authentication token | | title | string | No | Chatbot title displayed at the top | | className | string | No | Additional CSS classes for custom styling | | apiEndpoint | string | No | API endpoint (for backward compatibility) | | headers | Record<string, string> | No | Additional headers to include in API requests | | toolApiBaseUrl | string | No | Base URL for tool integrations |

Advanced Usage

With Custom Headers

<ChatBot 
  token="your-api-token"
  headers={{
    'X-Custom-Header': 'custom-value',
    'Authorization': 'Bearer custom-auth'
  }}
/>

Embedded Mode (iframe)

The library supports embedding via postMessage for secure token passing:

<iframe 
  src="path-to-embedded-chat" 
  width="400" 
  height="600"
  onload="this.contentWindow.postMessage({type: 'SET_TOKEN', token: 'your-token'}, '*')"
/>

Components

The library exports several components for flexible usage:

• ChatBot - Main chatbot component
• ChatInput - Input component with file upload support
• MessageBubble - Individual message display components
• ChatStreaming - Streaming response visualization
• ChatTyping - Typing indicator
• ThinkingBlock - AI thinking visualization
• ToolBlock - Tool execution visualization
• WavelensConfigModal - Configuration modal for advanced features

Hooks

• useSpeechRecognition - Hook for speech-to-text functionality

Utilities

• stream-parser - Utility for parsing streaming API responses

Types

The library includes comprehensive TypeScript definitions:

• ChatConfig - Configuration interface
• Question - Question message type
• Answer - Answer message type
• StreamingEvent - Event types for streaming
• Device - Device integration types

Development

Prerequisites

• Node.js >= 18.0.0
• npm or yarn

Setup

# Clone and install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

Project Structure

components/           # React components
hooks/               # React hooks
types/               # TypeScript definitions  
utils/               # Utility functions
index.ts             # Main entry point
embedApp.tsx         # Embedded app entry point

Docker

docker build -t chatbot-app .
docker run -p 3002:3002 chatbot-app

Publishing to NPM

This library is published as a scoped package: @vdmhealth/chatbot.

First time setup

1. Login to your NPM account:

   npm login

Publishing the library

1. Build the library (generates ESM, UMD, and types in dist/):

   npm run build:lib

2. Publish to NPM (using public access since it's a scoped package):

   npm publish --access public

Updating the Library

When you make changes and want to release a new version:

1. Update the version in package.json manually or use npm commands:

   # Increment patch version (1.0.2 -> 1.0.3)
   npm version patch
      
   # Or for bigger changes:
   # npm version minor
   # npm version major

2. Rebuild the library:

   npm run build:lib

3. Publish again:

   npm publish --access public

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

MIT © VDM