A standalone React chatbot component library with streaming support, speech recognition, and markdown rendering
npm install @vdmhealth/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:
- Main chatbot component with full functionality
- ChatHeader - Header with title and menu controls
- ChatInputArea - Input area with file upload support
- ChatStreaming - Streaming response visualization with markdown
- Conversation - Scrollable conversation container
- ConversationEmptyState - Empty state placeholder
- ConversationSidebar - Session management sidebar
- PromptInput* - Composable prompt input components
- ToolBlock - Tool execution visualization$3
- Message / MessageContent - Message display components
- ThinkingBlock - AI reasoning visualization
- OrchestrationBlock - Multi-agent delegation visualization
- ErrorBlock - Error display component
- ExpandableBlock / ExpandableHeader - Expandable sections
- ImageTool - Image handling components$3
- CheckIcon / SpinnerIcon - Status icons
- IconButton - Reusable icon button
- ProcessingSpinner - Loading indicator$3
- BaseModal - Reusable modal base component
- CitationModal - Source citation display
- ImageModal - Image viewer with rotation/navigation
- ConfirmDialog - Confirmation dialogHooks
-
useBedrockChat - Hook for AWS Bedrock Agent integration with streamingUtilities
-
bedrock-helpers - Utility functions for parsing Bedrock traces and eventsTypes
The library includes comprehensive TypeScript definitions:
-
ChatConfig - Configuration interface
- ChatMessage - Message type with content, traces, citations
- StreamingEvent - Event types for streaming (data, thinking, tool, orchestration, error, citation)
- Session - Session management type
- ThinkingBlockData / ToolBlockData / OrchestrationBlockData - Block data typesDevelopment
$3
- Node.js >= 18.0.0
- npm or yarn
$3
`bash
Clone and install dependencies
npm installStart development server
npm run devBuild for production
npm run build
`$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