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!

✨ 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

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

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

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

{
  "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

<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

<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

<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

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

Custom Components

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

Custom Message Processing

<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

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

🌍 Multi-Language Support

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

📊 TypeScript Support

Full TypeScript definitions included:

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
• 🐛 Report Issues
• 💬 Discussions

🌟 Show Your Support

Give a ⭐️ if this project helped you!

Made with ❤️ for the developer community