A standalone React chatbot component library with streaming support, speech recognition, and markdown rendering
npm install @han_zzpw/chatbotA standalone React chatbot component library with streaming support, speech recognition, and markdown rendering. Designed for easy integration into any React application.
- 🗣️ 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
``bash`
npm install @vdmhealth/chatbot
`jsx
import React from 'react';
import { ChatBot } from '@vdmhealth/chatbot';
const MyApp = () => {
return (
export default MyApp;
`
| 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 | No | Additional headers to include in API requests |toolApiBaseUrl
| | string | No | Base URL for tool integrations |
`jsx`
headers={{
'X-Custom-Header': 'custom-value',
'Authorization': 'Bearer custom-auth'
}}
/>
The library supports embedding via postMessage for secure token passing:
`html`
src="path-to-embedded-chat"
width="400"
height="600"
onload="this.contentWindow.postMessage({type: 'SET_TOKEN', token: 'your-token'}, '*')"
/>
The library exports several components for flexible usage:
- ChatBot - Main chatbot componentChatInput
- - Input component with file upload supportMessageBubble
- - Individual message display componentsChatStreaming
- - Streaming response visualizationChatTyping
- - Typing indicatorThinkingBlock
- - AI thinking visualizationToolBlock
- - Tool execution visualizationWavelensConfigModal
- - Configuration modal for advanced features
- useSpeechRecognition - Hook for speech-to-text functionality
- stream-parser - Utility for parsing streaming API responses
The library includes comprehensive TypeScript definitions:
- ChatConfig - Configuration interfaceQuestion
- - Question message typeAnswer
- - Answer message type StreamingEvent
- - Event types for streamingDevice
- - Device integration types
- Node.js >= 18.0.0
- npm or yarn
`bashClone and install dependencies
npm install
$3
components/ # React components
hooks/ # React hooks
types/ # TypeScript definitions
utils/ # Utility functions
index.ts # Main entry point
embedApp.tsx # Embedded app entry point
$3
bash
docker build -t chatbot-app .
docker run -p 3002:3002 chatbot-app
`Publishing to NPM
This library is published as a scoped package:
.$3
1. Login to your NPM account:
`bash
npm login
`$3
1. Build the library (generates ESM, UMD, and types in ):
`bash
npm run build:lib
`
2. Publish to NPM (using public access since it's a scoped package):
bash
npm publish --access public
`Updating the Library
When you make changes and want to release a new version:
1. Update the version in
manually or use npm commands:
`bash
# 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:
bash
npm run build:lib
`3. Publish again:
bash
npm publish --access public
`Contributing
1. Fork the repository
2. Create a feature branch (
)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature`)MIT © VDM