A customizable React chatbot component for IOTA SDK
npm install @iotauz/ai-chatA customizable React chatbot component that integrates with IOTA SDK's backend for AI-powered conversations.
- Multi-language support (EN, RU, UZ)
- Customizable chatbot interface
- Quick reply suggestions
- Callback request functionality
- Session persistence
- Mobile-responsive design
- Typing indicators
- Error handling
- Message submission callback function
``bashInstall with npm
npm install @iotauz/ai-chat
Quick Start
1. Set up your IOTA SDK backend endpoint in the
apiEndpoint prop2. Import the component and CSS:
`jsx
import { ChatbotInterface } from '@iotauz/ai-chat';
// Import the pre-compiled CSS styles
import '@iotauz/ai-chat/dist/styles.css';
import { MessagesSquare } from 'lucide-react'; // or any other icon libraryfunction App() {
return (
locale="en"
apiEndpoint="https://your-iota-sdk-server.com/website/ai-chat"
title="Custom Title"
subtitle="Custom Subtitle"
chatIcon={ }
soundOptions={{
// Optional: customize sound effects
submitSoundPath: "/sounds/custom-submit.mp3",
operatorSoundPath: "/sounds/custom-operator.mp3",
volume: 0.4,
enabled: true
}}
onMessageSubmit={(message) => {
console.log("User submitted message:", message);
// Perform actions when a user submits a message
}}
/>
);
}
`API Reference
$3
The main component that renders the chatbot UI.
#### Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
|
locale | string | "ru" | Language code for translations ("en", "ru", "oz", "uz") |
| apiEndpoint | string | Required | Direct URL to your IOTA SDK chat backend |
| faqItems | FAQItem[] | undefined | Custom FAQ items for quick replies |
| title | string | undefined | Custom chatbot title (falls back to translation) |
| subtitle | string | undefined | Custom chatbot subtitle (falls back to translation) |
| chatIcon | React.ReactNode | undefined | Custom icon for the chat button and header |
| soundOptions | SoundOptions | undefined | Customize sound effects (see below) |
| onMessageSubmit | (message: string) => void | undefined | Callback function that is called when a user submits a message |$3
`typescript
// Quick reply item
export interface FAQItem {
id: string;
question: string;
}// Message in chat
export type ChatMessage = {
id: string;
content: string;
sender: "user" | "bot";
timestamp: Date;
};
// Sound options configuration
export interface SoundOptions {
enabled?: boolean; // Enable/disable sound effects (default: true)
volume?: number; // Sound volume from 0.0 to 1.0 (default: 0.5)
submitSoundPath?: string; // Path to submit sound file (default: '/sounds/submit.mp3')
operatorSoundPath?: string; // Path to operator sound file (default: '/sounds/operator.mp3')
}
`Backend Integration
This component requires an IOTA SDK backend API with the following endpoints:
$3
`
POST /messages
`Request body:
`json
{
"message": "Initial message",
"phone": "Phone number"
}
`Response:
`json
{
"thread_id": "unique-thread-id"
}
`$3
`
GET /messages/{threadId}
`Response:
`json
{
"messages": [
{
"role": "user",
"message": "User message content"
},
{
"role": "assistant",
"message": "Assistant response content"
}
]
}
`$3
`
POST /messages/{threadId}
`Request body:
`json
{
"message": "New message content"
}
`Development
`bash
Run the development server
npm run dev
or
yarn dev
or
pnpm dev
`Visit http://localhost:3000 to see the demo.
Customization
$3
The component uses Tailwind CSS for styling. The package now includes a pre-compiled CSS file that you must import in your application:
`js
// Import the pre-compiled CSS styles
import '@iotauz/ai-chat/dist/styles.css';
`This CSS file contains all the necessary styles for the component, including Tailwind utilities used by the chatbot interface.
For custom styling, you can override these styles in your application's CSS files.
$3
Translations are stored in
lib/translations.ts. You can add additional languages or modify existing translations as needed.$3
The chatbot includes sound effects for message submission and operator responses. You can:
1. Customize the sound file paths:
`jsx
apiEndpoint="/api/chat"
soundOptions={{
submitSoundPath: "/my-custom-sounds/submit.mp3",
operatorSoundPath: "/my-custom-sounds/operator.mp3",
volume: 0.5
}}
/>
`2. Disable sounds:
`jsx
apiEndpoint="/api/chat"
soundOptions={{ enabled: false }}
/>
``Make sure to place your custom sound files in the public directory of your Next.js application.
Since the component now makes direct API calls to your IOTA SDK backend, you need to ensure that your backend server has CORS properly configured to allow requests from the domains where this component will be used.
See the LICENSE file in the root directory of this project.