npm package: @hola-ai/chat-widget
Description: A modern, animated chat interface component for React applications
Author: Your Name
Latest version: 1.0.0

# Chat AI Plugin

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

## Installation

1. Install the package and its peer dependencies:

```bash
# 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`:

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

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