Luca AI Chatbot

A modern, responsive AI chatbot with dark/light mode support, designed for seamless integration into websites.

🚀 Features

• Modern UI/UX with smooth animations and transitions
• Dark/Light Mode toggle with persistent preferences
• Responsive Design that works on all devices
• Accessibility compliant with proper contrast ratios
• Performance Optimized with 60fps animations
• Easy Integration for embedding in any website

📦 Deployment to Netlify

Option 1: Drag & Drop (Easiest)

1. Go to netlify.com
2. Sign up/login to your account
3. Drag and drop the entire project folder to the Netlify dashboard
4. Your site will be deployed automatically!

Option 2: Git Integration

1. Push your code to GitHub/GitLab
2. Connect your repository to Netlify
3. Deploy automatically on every push

🔗 Embedding in Framer Website

Method 1: iFrame Embed (Recommended)

Add this code to your Framer website:

<iframe 
  src="YOUR_NETLIFY_URL" 
  style="
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 100%;
    height: 100%;
    border: none;
    z-index: 9999;
    pointer-events: none;
  "
  allow="microphone"
  title="Luca AI Assistant"
></iframe>

Method 2: Direct Script Embed

Add this script to your Framer website's HTML:

<script>
  // Create chatbot container
  const chatbotContainer = document.createElement('div');
  chatbotContainer.id = 'luca-chatbot-container';
  chatbotContainer.style.cssText = `
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    pointer-events: none;
  `;
  document.body.appendChild(chatbotContainer);

  // Load chatbot
  const iframe = document.createElement('iframe');
  iframe.src = 'YOUR_NETLIFY_URL';
  iframe.style.cssText = `
    width: 100%;
    height: 100%;
    border: none;
    pointer-events: auto;
  `;
  iframe.allow = 'microphone';
  iframe.title = 'Luca AI Assistant';
  
  chatbotContainer.appendChild(iframe);
</script>

⚙️ Configuration

Customizing the Chatbot

• Colors: Modify CSS variables in style.css
• API Key: Update the OpenAI API key in script.js
• Assistant ID: Change the assistant ID in script.js

Environment Variables (Optional)

For production, consider using environment variables:

// In script.js, replace the hardcoded API key with:
const API_KEY = process.env.OPENAI_API_KEY || "your-api-key";

🎨 Customization

Changing Colors

Edit the CSS variables in style.css:

:root {
  --accent-primary: #512feb;    /* Main purple */
  --accent-secondary: #6a5acd;  /* Secondary purple */
  --accent-hover: #4a1fd1;      /* Hover state */
}

Modifying Animations

Adjust animation timing and easing in style.css:

transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

🔧 Troubleshooting

Common Issues

1. Chatbot not appearing: Check z-index and pointer-events
2. API errors: Verify your OpenAI API key is valid
3. Styling conflicts: Ensure no CSS conflicts with your main site

Performance Tips

• Use the iframe method for better isolation
• Consider lazy loading for better initial page load
• Test on different devices and browsers

📱 Mobile Optimization

The chatbot is fully responsive and optimized for:

• ✅ iOS Safari
• ✅ Android Chrome
• ✅ All modern browsers
• ✅ Touch interactions

🔒 Security

• API calls are made directly from the client
• Consider implementing a backend proxy for production
• Use environment variables for sensitive data

📄 License

This project is open source and available under the MIT License.

🤝 Support

For issues or questions:

1. Check the troubleshooting section
2. Review the code comments
3. Test in different environments

Ready to deploy! 🚀