import React, { useState, useRef, useEffect } from 'react';
import { Send, MessageCircle, X, Home, Loader2 } from 'lucide-react';
const KeysWithEaseChatbot = () => {
const [isOpen, setIsOpen] = useState(false);
const [messages, setMessages] = useState([
{
role: 'assistant',
content: "👋 Welcome to Keys With Ease! I'm your AI real estate assistant. I can help you with:\n\n• Traditional real estate services\n• Tokenized real estate (RWAs) and blockchain investing\n• First-time homebuyer guidance\n• Property investment strategies\n• Booking consultations\n\nWhat would you like to know about?"
}
]);
const [inputMessage, setInputMessage] = useState('');
const [isLoading, setIsLoading] = useState(false);
const messagesEndRef = useRef(null);
const scrollToBottom = () => {
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
};
useEffect(() => {
scrollToBottom();
}, [messages]);
const sendMessageToClaude = async (userMessage) => {
try {
const systemPrompt = `You are an intelligent real estate assistant for Keys With Ease (keyswithease.xyz), a modern real estate company in Colorado Springs, Colorado.
ABOUT KEYS WITH EASE:
- Full-service real estate agency helping buyers, sellers, and investors
- Specializes in TOKENIZED REAL ESTATE (RWAs - Real World Assets on blockchain)
- Offers traditional real estate services and innovative web3/blockchain solutions
- Provides consultations for tokenized asset investment strategies
- Services include: property listings, first-time homebuyer guidance, investment strategies, RWA consultation
- Located in Colorado Springs, CO
YOUR ROLE:
1. Answer questions about real estate services, both traditional and tokenized
2. Explain RWAs (tokenized real estate) in simple, accessible terms
3. Qualify leads by understanding their needs (buying, selling, investing, RWA interest)
4. Guide first-time homebuyers with helpful information
5. Encourage booking consultations for serious inquiries
6. Be professional, friendly, and knowledgeable
TOKENIZED REAL ESTATE (RWAs) EXPLANATION:
- RWAs are physical real estate assets represented digitally on blockchain
- Enables fractional ownership (you can own part of a property)
- Provides faster liquidity than traditional real estate
- Lower entry barriers for investors
- Transparent records and reduced overhead
- Global access to property investment
KEY CALLS TO ACTION:
- Book a Strategy Call for RWA consultation
- Schedule property viewings
- Request property information
- Sign up for market insights
TONE: Professional yet approachable, enthusiastic about innovation, educational when explaining complex concepts like RWAs, empathetic with first-time buyers.
Keep responses concise (2-4 paragraphs max) unless detailed explanation is requested. Always end with a helpful question or call to action.`;
const conversationHistory = messages.map(msg => ({
role: msg.role,
content: msg.content
}));
const response = await fetch('https://api.anthropic.com/v1/messages', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
model: 'claude-sonnet-4-20250514',
max_tokens: 1024,
system: systemPrompt,
messages: [...conversationHistory, { role: 'user', content: userMessage }]
})
});
if (!response.ok) {
throw new Error('Failed to get response from AI');
}
const data = await response.json();
return data.content[0].text;
} catch (error) {
console.error('Error calling Claude API:', error);
return "I apologize, but I'm having trouble connecting right now. Please try again in a moment, or feel free to contact us directly at keyswithease.xyz for immediate assistance.";
}
};
const handleSendMessage = async () => {
if (!inputMessage.trim() || isLoading) return;
const userMessage = inputMessage.trim();
setInputMessage('');
// Add user message
setMessages(prev => [...prev, { role: 'user', content: userMessage }]);
setIsLoading(true);
// Get AI response
const aiResponse = await sendMessageToClaude(userMessage);
// Add assistant message
setMessages(prev => [...prev, { role: 'assistant', content: aiResponse }]);
setIsLoading(false);
};
const handleKeyPress = (e) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
handleSendMessage();
}
};
return (