@han_zzpw/chatbot 1.0.0

package/README.md

@@ -0,0 +1,154 @@
+# 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 @vdm/chatbot
+```
+
+## Basic Usage
+
+```jsx
+import React from 'react';
+import { ChatBot } from '@vdm/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
+```
+
+## 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