npm package: @han_zzpw/chatbot
Description: A standalone React chatbot component library with streaming support, speech recognition, and markdown rendering
Latest version: 1.0.3

# 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

```bash
npm install @vdmhealth/chatbot
```

## Basic Usage

```jsx
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

```jsx
<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:

```html
<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

```bash
# 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

```bash
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:
   ```bash
   npm login
   ```

### Publishing the library
1. Build the library (generates ESM, UMD, and types in `dist/`):
   ```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 `package.json` 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 (`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