Chat AI Plugin

A modern, animated chat interface component for React applications with TypeScript support.

Installation

1. Install the package and its peer dependencies:

# Using npm
npm install @hola-ai/chat-widget @heroicons/react framer-motion

# Using yarn
yarn add @hola-ai/chat-widget @heroicons/react framer-motion

2. Add Tailwind CSS configuration:

Make sure you have Tailwind CSS installed and add these configurations to your tailwind.config.js:

module.exports = {
  content: [
    // ...your content configuration
    './node_modules/@hola-ai/chat-widget/**/*.{js,ts,jsx,tsx}'
  ],
  theme: {
    extend: {
      colors: {
        'hola': '#FF6B00',
        'hola-light': '#FF8A33',
        'hola-dark': '#E65D00',
      },
      animation: {
        'fadeIn': 'fadeIn 0.5s ease-in-out',
        'slideDown': 'slideDown 0.3s ease-out',
        'slideUp': 'slideUp 0.3s ease-out',
        'spin-once': 'spin 0.5s ease-in-out',
      },
      keyframes: {
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
        slideDown: {
          '0%': { transform: 'translateY(-100%)', opacity: '0' },
          '100%': { transform: 'translateY(0)', opacity: '1' },
        },
        slideUp: {
          '0%': { transform: 'translateY(100%)', opacity: '0' },
          '100%': { transform: 'translateY(0)', opacity: '1' },
        },
      },
    },
  },
  plugins: [],
}

Usage

1. Copy the following components to your project:

• src/components/ChatWidget/ChatBox.tsx
• src/components/ChatWidget/MessageBubble.tsx
• src/components/ChatWidget/WelcomeMessage.tsx
• src/components/Icons/HolaAILogo.tsx

2. Import and use the ChatBox component in your React application:

import { useState } from 'react';
import ChatBox from './components/ChatWidget/ChatBox';

const App = () => {
  const [showChat, setShowChat] = useState(false);

  return (
    <div className="relative">
      {/* Chat toggle button */}
      <button
        onClick={() => setShowChat(!showChat)}
        className="fixed bottom-4 right-4 p-4 bg-hola text-white rounded-full shadow-lg hover:bg-hola-dark transition-colors"
      >
        Chat with AI
      </button>

      {/* Chat box */}
      {showChat && (
        <div className="fixed bottom-20 right-4 w-[400px] h-[600px]">
          <ChatBox 
            onClose={() => setShowChat(false)}
            title="Chat with Hola-AI"
          />
        </div>
      )}
    </div>
  );
};

export default App;

Features

• 🎨 Modern UI with smooth animations
• 💬 Welcome message with typing effect
• 🚀 Quick action buttons
• ⌨️ Real-time typing indicators
• 📱 Responsive design
• 🎯 Easy to customize

Props

The ChatBox component accepts the following props:

| Prop | Type | Description | |------|------|-------------| | onClose | () => void | Callback function when the close button is clicked | | title | string | Title displayed in the chat header |

Customization

1. Quick Actions: Modify the quick action buttons in ChatBox.tsx:

<button 
  onClick={() => handleQuickAction("Your custom message")}
  className="px-4 py-2 bg-white rounded-full text-sm text-hola whitespace-nowrap border border-hola hover:bg-orange-50 transition-all hover:scale-105"
>
  Custom Button
</button>

2. AI Response: Update the response messages in the simulateResponse function in ChatBox.tsx:

const responses = [
  "Your custom response 1",
  "Your custom response 2",
  // Add more responses
];

3. Styling:

• Modify colors in tailwind.config.js
• Update component styles using Tailwind classes
• Customize animations in the theme configuration

Integration with AI Backend

To integrate with your AI backend:

1. Replace the simulateResponse function in ChatBox.tsx:

const simulateResponse = async () => {
  setIsTyping(true);
  try {
    const response = await fetch('your-api-endpoint', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ message }),
    });
    
    const data = await response.json();
    
    setMessages(prev => [...prev, {
      id: Date.now().toString(),
      text: data.response,
      isUser: false,
      timestamp: formatTimestamp()
    }]);
  } catch (error) {
    console.error('Error:', error);
    // Handle error appropriately
  } finally {
    setIsTyping(false);
  }
};

Notes

• The component uses Tailwind CSS for styling
• Framer Motion is used for animations
• The chat interface is designed to be responsive and mobile-friendly
• Make sure to handle API errors and loading states appropriately when integrating with your backend