Infernix-ai-chatting-bot NPM

Infernix AI Chat Widget

A customizable AI chat widget that enables websites to integrate Infernix's AI chat service seamlessly. This widget provides an intelligent chatbot that can assist your website visitors in real-time.

Features

🎨 Fully customizable UI
🔒 Secure API integration
💬 Real-time AI responses
🎯 Easy to integrate
�� Responsive design
⌨️ Enter key support
🔄 Loading indicators
🖥️ Mobile-friendly
♿ Accessibility features

Installation

npm install infernix-ai-chatting-bot
# or
yarn add infernix-ai-chatting-bot

Quick Start

import FloatingChatButton from 'infernix-ai-chatting-bot';

function App() {
  return (
    <FloatingChatButton
      infernixID="your-infernix-id"
      apiKey="your-api-key"
    />
  );
}

Props

Prop	Type	Required	Description
infernixID	string	Yes	Your Infernix user ID
apiKey	string	Yes	Your Infernix API key
apiUrl	string	No	Custom API endpoint (default: "https://portal.infernix.ai/api/v2/chat-ai/message")
chatIcon	string	No	Custom chat icon URL
iconSize	number	No	Size of the chat icon (default: 40)
headerText	string	No	Custom header text (default: "Chat with AI")
styles	object	No	Custom styles object

Style Customization

The widget supports comprehensive styling through the styles prop. Here's a complete list of customizable elements:

<FloatingChatButton
  // ... other props
  styles={{
    // Chat header
    chatHeader: {
      backgroundColor: string,
      padding: string,
      borderRadius: string,
      // ... any valid CSS properties
    },
    
    // Header title text
    headerTitle: {
      color: string,
      fontSize: string,
      fontWeight: string,
      // ... any valid CSS properties
    },
    
    // Close button
    closeButton: {
      color: string,
      fontSize: string,
      opacity: number,
      // ... any valid CSS properties
    },
    
    // Floating chat button
    floatingButton: {
      backgroundColor: string,
      boxShadow: string,
      borderRadius: string,
      // ... any valid CSS properties
    },

    // Chat icon in the floating button
    chatIcon: {
      padding: string,
      filter: string,
      // ... any valid CSS properties
    },

    // Main chat box container
    chatBox: {
      width: string,
      height: string,
      borderRadius: string,
      backgroundColor: string,
      boxShadow: string,
      // ... any valid CSS properties
    },

    // Messages container
    chatMessages: {
      padding: string,
      backgroundColor: string,
      // ... any valid CSS properties
    },

    // User message bubble
    userMessage: {
      backgroundColor: string,
      color: string,
      borderRadius: string,
      padding: string,
      fontSize: string,
      // ... any valid CSS properties
    },

    // Bot message bubble
    botMessage: {
      backgroundColor: string,
      color: string,
      borderRadius: string,
      padding: string,
      fontSize: string,
      // ... any valid CSS properties
    },

    // Error message bubble
    errorMessage: {
      backgroundColor: string,
      color: string,
      borderRadius: string,
      border: string,
      // ... any valid CSS properties
    },

    // Input container
    inputContainer: {
      borderTop: string,
      padding: string,
      backgroundColor: string,
      // ... any valid CSS properties
    },

    // Text input
    input: {
      borderRadius: string,
      border: string,
      fontSize: string,
      backgroundColor: string,
      // ... any valid CSS properties
    },

    // Send button
    sendButton: {
      backgroundColor: string,
      borderRadius: string,
      width: string,
      height: string,
      // ... any valid CSS properties
    }
  }}
  headerText="Custom Chat Title" // Optional custom header text
/>

Example Customization

<FloatingChatButton
  infernixID="your-id"
  apiKey="your-key"
  chatIcon="/custom-icon.png"
  iconSize={48}
  headerText="Chat Support"
  styles={{
    chatHeader: {
      backgroundColor: '#4CAF50',
      padding: '12px 20px',
    },
    headerTitle: {
      color: 'white',
      fontSize: '18px',
      fontWeight: '600',
    },
    closeButton: {
      color: 'white',
      fontSize: '24px',
    },
    floatingButton: {
      backgroundColor: '#4CAF50',
      boxShadow: '0 4px 8px rgba(0,0,0,0.2)',
    },
    // ... other styles
  }}
/>

Security Considerations

While the widget accepts API credentials as props, for production deployments, we recommend using a backend proxy to make API calls. This prevents exposing your API credentials in the client-side code.

Backend Proxy Example

// Your backend server
app.post('/api/chat', async (req, res) => {
  const response = await fetch('https://portal.infernix.ai/api/v2/chat-ai/message', {
    method: 'POST',
    headers: {
      'infernix-api-key': process.env.INFERNIX_API_KEY,
      'infernix-user-id': process.env.INFERNIX_ID,
    },
    body: JSON.stringify({ message: req.body.message }),
  });
  
  const data = await response.json();
  res.json(data);
});

Then use your proxy endpoint:

<FloatingChatButton
  apiUrl="/api/chat"  // Point to your backend proxy
  // No need for credentials when using proxy
/>

Environment-based Configuration

You can also use environment variables to switch endpoints:

<FloatingChatButton
  apiUrl={process.env.REACT_APP_CHAT_API_URL}
  infernixID={process.env.REACT_APP_INFERNIX_ID}
  apiKey={process.env.REACT_APP_INFERNIX_API_KEY}
/>

Direct API Usage

If you prefer to integrate directly with our API:

POST https://portal.infernix.ai/api/v2/chat-ai/message

Headers:
  infernix-api-key: your-api-key
  infernix-user-id: your-infernix-id

Body:
{
  "message": "User's message here"
}

Response:
{
  "message": "AI's response here"
}

Error Handling

The API returns appropriate status codes and error messages:

// 403 Unauthorized Error
{
  "message": "unauthorized: Invalid API key or user ID",
  "status": 403
}

// 500 Internal Server Error
{
  "message": "Internal server error",
  "status": 500
}

The widget automatically handles these errors and displays them appropriately in the chat interface. Error messages are styled differently to distinguish them from normal messages.