React Chatbot Teco

A customizable AI-powered chatbot component for React applications with Gemini AI integration. This component provides a beautiful, responsive chat interface that can be easily integrated into any React project.

Features

• 🤖 AI Integration: Powered by Google's Gemini AI
• 🎨 Customizable: Fully customizable colors, positioning, and styling
• 📱 Responsive: Works perfectly on desktop and mobile devices
• ⚡ Real-time: Real-time typing indicators and smooth animations
• 🎯 Easy Integration: Simple props-based configuration
• 📦 TypeScript Support: Full TypeScript definitions included
• 🌙 Dark Mode: Automatic dark mode support

Installation

npm install react-chatbot-teco
# or
yarn add react-chatbot-teco

Quick Start

import React from 'react';
import { ChatBot } from 'react-chatbot-teco';
import 'react-chatbot-teco/dist/style.css';

function App() {
  return (
    <div className="App">
      <h1>My App</h1>
      
      <ChatBot
        primaryColor="#3b82f6"
        secondaryColor="#ffffff"
        textColor="#1e293b"
        position="bottom-right"
        title="AI Assistant"
        placeholder="Ask me anything..."
        enableAI={true}
        systemPrompt="You are a helpful AI assistant. Be friendly, concise, and helpful in your responses."
        API_KEY="your-gemini-api-key-here"
      />
    </div>
  );
}

export default App;

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | primaryColor | string | '#3b82f6' | Primary color for the chatbot theme (supports hex colors and CSS gradients) | | secondaryColor | string | '#ffffff' | Secondary color for the chatbot theme (supports hex colors and CSS gradients) | | textColor | string | '#1e293b' | Text color for the chatbot | | position | 'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left' \| 'center' | 'bottom-right' | Position of the chatbot on the screen | | initialMessages | Array<Message> | [] | Initial messages to display | | title | string | 'AI Assistant' | Title displayed in the chatbot header | | placeholder | string | 'Ask me anything...' | Placeholder text for the input field | | showAvatar | boolean | true | Whether to show the avatar | | avatarUrl | string \| null | null | URL for the avatar image | | borderRadius | string | '16px' | Border radius for the chatbot window | | shadow | string | '0 20px 40px rgba(0, 0, 0, 0.15)' | Box shadow for the chatbot window | | enableAI | boolean | true | Whether to enable AI functionality | | systemPrompt | string | 'You are a helpful AI assistant...' | System prompt for the AI | | API_KEY | string | Required | API key for the Gemini AI service | | chatIcon | string | Default chat icon | URL for the chat icon image | | inputBackgroundColor | string \| null | null | Background color for the input field | | inputTextColor | string \| null | null | Text color for the input field | | inputBorderColor | string \| null | null | Border color for the input field | | inputPlaceholderColor | string \| null | null | Placeholder color for the input field | | botIcon | string | '🤖' | Custom emoji/icon for the bot avatar (supports emoji, text, or image URLs) |

Message Interface

interface Message {
  id: number;
  text: string;
  sender: 'user' | 'bot';
  timestamp: Date;
}

Examples

Basic Usage

import { ChatBot } from 'react-chatbot-teco';

<ChatBot API_KEY="your-gemini-api-key-here" />

Custom Styling

<ChatBot
  API_KEY="your-gemini-api-key-here"
  primaryColor="#ff6b6b"
  secondaryColor="#ffffff"
  textColor="#2c3e50"
  borderRadius="20px"
  shadow="0 10px 30px rgba(255, 107, 107, 0.3)"
/>

Dark Theme Example

<ChatBot
  API_KEY="your-gemini-api-key-here"
  primaryColor="#000000"
  secondaryColor="#1a1a1a"
  textColor="#ffffff"
  title="Dark Bot"
/>

Note: When using dark themes, ensure primaryColor and secondaryColor are different for better contrast and readability.

Different Positions

// Bottom left
<ChatBot API_KEY="your-gemini-api-key-here" position="bottom-left" />

// Top right
<ChatBot API_KEY="your-gemini-api-key-here" position="top-right" />

// Center
<ChatBot API_KEY="your-gemini-api-key-here" position="center" />

With Custom Avatar

<ChatBot
  API_KEY="your-gemini-api-key-here"
  avatarUrl="https://example.com/avatar.png"
  title="Custom Bot"
/>

With Custom Chat Icon

<ChatBot
  API_KEY="your-gemini-api-key-here"
  chatIcon="https://example.com/custom-chat-icon.png"
  title="Custom Bot"
/>

With Gradient Themes

<ChatBot
  API_KEY="your-gemini-api-key-here"
  primaryColor="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
  secondaryColor="linear-gradient(135deg, #f093fb 0%, #f5576c 100%)"
  title="Gradient Bot"
/>

With Custom Bot Icon

Using Emojis:

<ChatBot
  API_KEY="your-gemini-api-key-here"
  botIcon="🤖"  // Default robot
  title="Robot Assistant"
/>

<ChatBot
  API_KEY="your-gemini-api-key-here"
  botIcon="👨‍💻"  // Developer
  title="Tech Support"
/>

Using Image URLs:

<ChatBot
  API_KEY="your-gemini-api-key-here"
  botIcon="https://example.com/bot-avatar.png"
  title="Custom Bot"
/>

<ChatBot
  API_KEY="your-gemini-api-key-here"
  botIcon="./assets/custom-bot-icon.png"
  title="Local Bot"
/>

With Custom Input Styling

<ChatBot
  API_KEY="your-gemini-api-key-here"
  inputBackgroundColor="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
  inputTextColor="#ffffff"
  inputBorderColor="#667eea"
  inputPlaceholderColor="rgba(255, 255, 255, 0.7)"
  placeholder="Type your message here..."
/>

With Initial Messages

<ChatBot
  API_KEY="your-gemini-api-key-here"
  initialMessages={[
    {
      id: 1,
      text: "Hello! How can I help you today?",
      sender: "bot",
      timestamp: new Date()
    }
  ]}
/>

Custom System Prompt

<ChatBot
  API_KEY="your-gemini-api-key-here"
  systemPrompt="You are a customer service representative. Be helpful and professional in your responses."
  title="Customer Support"
/>

API Key Setup

To use the AI functionality, you'll need to set up your Gemini API key. The component requires the API_KEY prop to be passed to enable AI features.

1. Get your API key from Google AI Studio
2. Pass the API key as a prop to the ChatBot component
3. Make sure to keep your API key secure and never commit it to version control

<ChatBot 
  API_KEY="your-gemini-api-key-here"
  // ... other props
/>

Using Environment Variables (Recommended for production):

<ChatBot 
  API_KEY={process.env.REACT_APP_GEMINI_API_KEY}
  // ... other props
/>

Important: The API_KEY prop is required for AI functionality. If not provided, the component will throw an error.

Styling

The component comes with built-in CSS that you can import:

import 'react-chatbot-teco/dist/style.css';

You can also override the default styles by targeting the CSS classes:

.chatbot-window {
  /* Your custom styles */
}

.chatbot-toggle {
  /* Your custom styles */
}

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Contributing

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

License

MIT License - see the LICENSE file for details.

Support

If you have any questions or need help, please open an issue on GitHub.