npm package: @onkar-patil-01/reusable-ai-chatbot-krita
Description: A fully reusable, configurable AI chatbot component for React. Works with any domain - e-commerce, healthcare, education, banking, and more. Just configure your API and go!
Author: Onkar Patil
Latest version: 1.1.0

# Reusable AI Chatbot Component

A fully configurable, production-ready AI chatbot component for React. Works with **any domain** - e-commerce, healthcare, education, banking, government, and more!

[![npm version](https://badge.fury.io/js/%40onkar-patil-01%2Freusable-ai-chatbot-krita.svg)](https://www.npmjs.com/package/@onkar-patil-01/reusable-ai-chatbot-krita)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

## ✨ Features

- 🎯 **100% Reusable** - Works with any app or domain
- 🎨 **Fully Customizable** - 73+ configuration options
- 🎤 **Voice Support** - Built-in voice conversation with Gemini
- 📤 **Export & Content Generation** - Export chats as PDFs, generate content
- 🌍 **Multi-language** - Support for any language
- 📱 **Responsive** - Works on desktop, tablet, and mobile
- 🔌 **API Agnostic** - Works with any backend following standard response format
- 💪 **TypeScript** - Full TypeScript support
- 🎨 **Themeable** - Customize colors, labels, and UI

## 📦 Installation

```bash
npm install @onkar-patil-01/reusable-ai-chatbot-krita
# or
yarn add @onkar-patil-01/reusable-ai-chatbot-krita
# or
pnpm add @onkar-patil-01/reusable-ai-chatbot-krita
```

## 🚀 Quick Start

```tsx
import { Chatbot } from '@onkar-patil-01/reusable-ai-chatbot-krita';
import '@onkar-patil-01/reusable-ai-chatbot-krita/styles.css';

function App() {
  return (
    <Chatbot
      apiConfig={{
        baseUrl: 'https://your-api.com',
        campaignId: 'your-project-id',
        agentCode: 'YOUR_AGENT_CODE',
        authPayload: { /* your credentials */ }
      }}
      uiLabels={{
        title: 'Your AI Assistant',
        placeholder: 'Ask me anything...'
      }}
    />
  );
}
```

That's it! Your chatbot is ready! 🎉

## 📚 Documentation

### Basic Configuration

```tsx
<Chatbot
  // Basic text
  placeholder="Type your message..."
  welcomeMessage="Hello! How can I help?"
  language="english"
  
  // API Configuration
  apiConfig={{
    baseUrl: 'https://your-api.com',
    authEndpoint: '/auth/getToken',
    queryEndpoint: '/agent/executeFlow',
    authPayload: { data: 'your-credentials' },
    campaignId: 'your-project-id',
    agentCode: 'YOUR_AGENT_CODE',
    customQueryParams: { /* any extra params */ }
  }}
  
  // Theme
  theme={{
    primaryColor: '#4c3794',
    backgroundColor: '#ffffff',
    headerBackground: '#000000'
  }}
  
  // Features
  enableVoice={true}
  enableGovAPI={true}
  
  // Callbacks
  callbacks={{
    onMessageSent: (msg) => console.log('User:', msg),
    onResponseReceived: (res) => console.log('AI:', res),
    onError: (err) => console.error('Error:', err)
  }}
/>
```

### API Requirements

Your API should return responses in this structure:

```json
{
  "status": 200,
  "data": [
    {
      "objectType": "PARAGRAPH",
      "key": "response",
      "value": "Your response text here..."
    },
    {
      "objectType": "MULTITEXTOPTIONS",
      "key": "followupQuestions",
      "value": ["Question 1?", "Question 2?"]
    },
    {
      "objectType": "MULTITEXTOPTIONS",
      "key": "sourceLinks",
      "value": ["https://source1.com", "https://source2.com"]
    }
  ]
}
```

## 🎯 Real-World Examples

### E-Commerce Assistant

```tsx
<Chatbot
  uiLabels={{
    title: 'ShopMart AI',
    placeholder: 'Search products, track orders...'
  }}
  apiConfig={{
    baseUrl: 'https://api.shopmart.com',
    campaignId: 'products-2024',
    agentCode: 'PRODUCT_SEARCH'
  }}
  theme={{
    primaryColor: '#FF6B35'
  }}
  customQuickActions={[
    { text: 'Track order', icon: <Package /> },
    { text: 'New arrivals', icon: <Star /> }
  ]}
/>
```

### Healthcare Portal

```tsx
<Chatbot
  uiLabels={{
    title: 'MedCare Assistant',
    placeholder: 'Ask about symptoms, medications...'
  }}
  apiConfig={{
    baseUrl: 'https://api.medcare.com',
    campaignId: 'patient-support',
    agentCode: 'MEDICAL_INFO'
  }}
  theme={{
    primaryColor: '#00A4BD'
  }}
/>
```

### Banking Support

```tsx
<Chatbot
  uiLabels={{
    title: 'SecureBank Assistant',
    placeholder: 'Ask about accounts, transactions...'
  }}
  apiConfig={{
    baseUrl: 'https://api.bank.com',
    campaignId: 'customer-support',
    agentCode: 'BANKING_SUPPORT'
  }}
  theme={{
    primaryColor: '#004B87'
  }}
/>
```

## 🔧 Configuration Options

### APIConfig (11 options)
- `baseUrl` - Your API base URL
- `authEndpoint` - Authentication endpoint
- `queryEndpoint` - Query endpoint
- `contentTypesEndpoint` - Content types endpoint
- `generateContentEndpoint` - Content generation endpoint
- `authPayload` - Authentication credentials
- `headers` - Custom headers
- `campaignId` - Your project/campaign ID
- `agentCode` - Your agent code
- `generateAgentCode` - Content generation agent code
- `language` - Query languages
- `customQueryParams` - Any extra parameters

### UILabels (24 options)
Control all text displayed in the UI:
- `title`, `subtitle`, `placeholder`
- `connecting`, `connected`, `listening`, `speaking`
- `processing`, `generatingContent`
- `exportTitle`, `downloadPDF`, `copyContent`
- And 13 more labels...

### ThemeConfig (7 options)
- `primaryColor`, `secondaryColor`
- `backgroundColor`, `textColor`
- `borderColor`, `headerBackground`
- `buttonStyle` ('rounded' | 'square')

### VoiceConfig (6 options)
- `lang`, `rate`, `pitch`, `volume`
- `geminiApiKey`, `geminiWsUrl`

### ExportConfig (8 options)
- `enableExport`, `enableContentGeneration`
- `defaultContentTypes`, `brandDetails`

### Callbacks (7 events)
- `onMessageSent`, `onResponseReceived`
- `onSourceLinksReceived`, `onFollowupQuestionsReceived`
- `onInteractionIdReceived`, `onError`
- `onConnectionStateChange`

## 📱 Responsive Design

The chatbot is fully responsive and works on:
- 📱 Mobile (portrait & landscape)
- 📱 Tablets
- 💻 Desktop
- 🖥️ Large screens

## 🎨 Customization

### Custom Quick Actions

```tsx
<Chatbot
  customQuickActions={[
    { text: 'Your action', icon: <YourIcon /> },
    { text: 'Another action', icon: <AnotherIcon /> }
  ]}
/>
```

### Custom Components

```tsx
<Chatbot
  customHeader={<YourCustomHeader />}
  customFooter={<YourCustomFooter />}
/>
```

### Custom Message Processing

```tsx
<Chatbot
  customMessageProcessor={(msg) => {
    // Transform message before display
    return { ...msg, content: msg.content.toUpperCase() };
  }}
  customResponseParser={(response) => {
    // Parse API response your way
    return {
      text: response.data.answer,
      sourceLinks: response.data.links
    };
  }}
/>
```

## 🔒 Authentication

```tsx
<Chatbot
  getAuthToken={async () => {
    // Your authentication logic
    const token = await fetchYourToken();
    return token;
  }}
/>
```

## 🌍 Multi-Language Support

```tsx
<Chatbot
  language="marathi"
  voiceConfig={{
    lang: 'mr-IN'
  }}
/>
```

## 📊 TypeScript Support

Full TypeScript definitions included:

```typescript
import type { ChatbotProps, Message, APIConfig } from '@onkar-patil-01/reusable-ai-chatbot-krita';
```

## 🎯 Use Cases

- ✅ E-commerce product search & recommendations
- ✅ Healthcare patient portals
- ✅ Banking customer support
- ✅ Education learning platforms
- ✅ Government services
- ✅ Customer support chatbots
- ✅ Internal company assistants
- ✅ Document query systems
- ✅ And more!

## 🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

## 📄 License

MIT © Onkar Patil

## 🆘 Support

- 📖 [Documentation](https://github.com/onkar-patil-01/reusable-ai-chatbot-krita)
- 🐛 [Report Issues](https://github.com/onkar-patil-01/reusable-ai-chatbot-krita/issues)
- 💬 [Discussions](https://github.com/onkar-patil-01/reusable-ai-chatbot-krita/discussions)

## 🌟 Show Your Support

Give a ⭐️ if this project helped you!

---

**Made with ❤️ for the developer community**