import { useState, useRef, useEffect } from 'react'; import { Send, Code, Sparkles, Eye } from 'lucide-react'; export default function BumbleAI() { const [messages, setMessages] = useState([ { role: 'assistant', content: 'Hi! I\'m Bumble AI 🐝 - your friendly coding assistant! Ask me to create any code or website you need, and I\'ll generate it for you. Try asking me to build something!' } ]); const [input, setInput] = useState(''); const [isTyping, setIsTyping] = useState(false); const [previewMode, setPreviewMode] = useState({}); const messagesEndRef = useRef(null); const scrollToBottom = () => { messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' }); }; useEffect(() => { scrollToBottom(); }, [messages]); const generateCodeResponse = (userMessage) => { const msg = userMessage.toLowerCase(); // Business website if (msg.includes('business website') || msg.includes('business site')) { return { text: 'Here\'s a complete business website for you:', code: ` My Business - Professional Services

Welcome to Our Business

Professional solutions for your success

Get Started

Our Services

🚀 Consulting

Expert advice to help your business grow and succeed in today's competitive market.

💼 Strategy

Develop winning strategies that align with your business goals and vision.

📊 Analytics

Data-driven insights to make informed decisions and optimize performance.

`, language: 'html', isHTML: true }; } // IP address website else if (msg.includes('ip') && (msg.includes('website') || msg.includes('html') || msg.includes('show'))) { return { text: 'Here\'s an HTML page that displays your IP address:', code: ` Your IP Address

🌐 Your IP Address

`, language: 'html', isHTML: true }; } // Generic HTML/website request else if (msg.includes('html') || msg.includes('website') || msg.includes('webpage')) { const topic = userMessage.replace(/make|create|build|html|website|webpage|a|an|for|me/gi, '').trim() || 'My Website'; return { text: `Here's a custom HTML website about "${topic}":`, code: ` ${topic}

${topic}

Welcome to this amazing page!

This is a custom-generated website created by Bumble AI. This page is all about ${topic} and provides you with everything you need to know!

✨

Feature One

Amazing capability that makes things better

🚀

Feature Two

Fast and efficient performance

💎

Feature Three

Premium quality you can trust

Get Started Now

`, language: 'html', isHTML: true }; } // Calculator else if (msg.includes('calculator') || msg.includes('calc')) { return { text: 'Here\'s a working calculator:', code: ` Calculator

`, language: 'html', isHTML: true }; } // Default response else { return { text: `I'll create custom code for: "${userMessage}"`, code: `// Custom code for: ${userMessage} function main() { console.log("Code generated by Bumble AI 🐝"); // Your custom implementation const result = performTask(); return result; } function performTask() { // Add your logic here based on: ${userMessage} return "Task completed successfully!"; } // Execute main();`, language: 'javascript', isHTML: false }; } }; const handleSend = () => { if (!input.trim()) return; const userMessage = input; setMessages(prev => [...prev, { role: 'user', content: userMessage }]); setInput(''); setIsTyping(true); setTimeout(() => { const response = generateCodeResponse(userMessage); const msgId = Date.now(); setMessages(prev => [...prev, { role: 'assistant', content: response.text, code: response.code, language: response.language, isHTML: response.isHTML, id: msgId }]); setIsTyping(false); }, 1000); }; const handleKeyPress = (e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleSend(); } }; const togglePreview = (msgId) => { setPreviewMode(prev => ({ ...prev, [msgId]: !prev[msgId] })); }; return (

{/* Header */}

Bumble AI 🐝

Your friendly coding assistant

{/* Messages */}

{messages.map((msg, idx) => (

{msg.content}

{msg.code && (


                        {msg.language}


                      {msg.isHTML && (
                        
                      )}


                    {msg.isHTML && previewMode[msg.id] ? (
                      
                        
                      </div>
                    ) : (
                      <pre className="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto text-sm">
                        <code>{msg.code}</code>
                      </pre>
                    )}
                  </div>
                )}
              </div>
            </div>
          ))}
          {isTyping && (
            <div className="flex justify-start">
              <div className="bg-white shadow-md border border-amber-100 rounded-2xl p-4">
                <div className="flex gap-2">
                  <div className="w-2 h-2 bg-amber-400 rounded-full animate-bounce"></div>
                  <div className="w-2 h-2 bg-amber-400 rounded-full animate-bounce" style={{ animationDelay: '0.2s' }}></div>
                  <div className="w-2 h-2 bg-amber-400 rounded-full animate-bounce" style={{ animationDelay: '0.4s' }}></div>
                </div>
              </div>
            </div>
          )}
          <div ref={messagesEndRef} />
        </div>
      </div>

      {/* Input */}
      <div className="border-t border-amber-200 bg-white p-4 shadow-lg">
        <div className="max-w-4xl mx-auto flex gap-2">
          <input
            type="text"
            value={input}
            onChange={(e) => setInput(e.target.value)}
            onKeyPress={handleKeyPress}
            placeholder="Ask me to create anything... (e.g., 'make a business website' or 'html that shows my ip')"
            className="flex-1 border-2 border-amber-300 rounded-full px-6 py-3 focus:outline-none focus:border-amber-500 focus:ring-2 focus:ring-amber-200"
          />
          <button
            onClick={handleSend}
            disabled={!input.trim()}
            className="bg-gradient-to-r from-amber-400 to-yellow-500 text-white rounded-full p-3 hover:from-amber-500 hover:to-yellow-600 disabled:opacity-50 disabled:cursor-not-allowed transition-all shadow-md hover:shadow-lg"
          >
            <Send className="w-6 h-6" />
          </button>
        </div>
      </div>
    </div>
  );
}

<script defer data-domain="html.cafe" src="https://milkymouse.com/js/script.js"></script>