chat AI
import { useState, useRef, useEffect } from "react";
const SYSTEM_PROMPT = `Eres un asistente de IA inteligente, amigable y útil. Responde de forma clara, concisa y en el idioma del usuario. Si te hablan en español, responde en español.`;
function TypingIndicator() {
return (
{[0, 1, 2].map(i => (
width: 8, height: 8, borderRadius: "50%",
background: "#a78bfa",
animation: "bounce 1.2s infinite",
animationDelay: `${i * 0.2}s`
}} />
))}
);
}
function Message({ msg }) {
const isUser = msg.role === "user";
return (
display: "flex",
justifyContent: isUser ? "flex-end" : "flex-start",
marginBottom: "12px",
animation: "fadeSlide 0.3s ease"
}}>
{!isUser && (
width: 32, height: 32, borderRadius: "50%",
background: "linear-gradient(135deg, #7c3aed, #a78bfa)",
display: "flex", alignItems: "center", justifyContent: "center",
fontSize: 14, marginRight: 8, flexShrink: 0, alignSelf: "flex-end",
boxShadow: "0 0 12px rgba(124,58,237,0.4)"
}}>🤖
)}
maxWidth: "72%",
padding: "12px 16px",
borderRadius: isUser ? "18px 18px 4px 18px" : "18px 18px 18px 4px",
background: isUser
? "linear-gradient(135deg, #7c3aed, #6d28d9)"
: "rgba(255,255,255,0.07)",
color: "#f1f0ff",
fontSize: 14.5,
lineHeight: 1.6,
boxShadow: isUser
? "0 4px 20px rgba(124,58,237,0.35)"
: "0 2px 10px rgba(0,0,0,0.2)",
border: isUser ? "none" : "1px solid rgba(255,255,255,0.08)",
whiteSpace: "pre-wrap"
}}>
{msg.content}
{isUser && (
width: 32, height: 32, borderRadius: "50%",
background: "linear-gradient(135deg, #4f46e5, #7c3aed)",
display: "flex", alignItems: "center", justifyContent: "center",
fontSize: 14, marginLeft: 8, flexShrink: 0, alignSelf: "flex-end"
}}>👤
)}
);
}
export default function AIChat() {
const [messages, setMessages] = useState([
{ role: "assistant", content: "¡Hola! Soy tu asistente de IA. ¿En qué puedo ayudarte hoy? 😊" }
]);
const [input, setInput] = useState("");
const [loading, setLoading] = useState(false);
const bottomRef = useRef(null);
const inputRef = useRef(null);
useEffect(() => {
bottomRef.current?.scrollIntoView({ behavior: "smooth" });
}, [messages, loading]);
async function sendMessage() {
const text = input.trim();
if (!text || loading) return;
const newMessages = [...messages, { role: "user", content: text }];
setMessages(newMessages);
setInput("");
setLoading(true);
try {
const apiMessages = newMessages.map(m => ({ role: m.role, content: m.content }));
const res = 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: 1000,
system: SYSTEM_PROMPT,
messages: apiMessages
})
});
const data = await res.json();
const reply = data?.content?.[0]?.text || "No pude obtener una respuesta.";
setMessages(prev => [...prev, { role: "assistant", content: reply }]);
} catch (err) {
setMessages(prev => [...prev, { role: "assistant", content: "⚠️ Error al conectar con la IA. Intenta de nuevo." }]);
}
setLoading(false);
setTimeout(() => inputRef.current?.focus(), 100);
}
function handleKey(e) {
if (e.key === "Enter" && !e.shiftKey) {
e.preventDefault();
sendMessage();
}
}
return (
minHeight: "100vh",
background: "linear-gradient(135deg, #0f0a1e 0%, #1a0d35 50%, #0d1b2a 100%)",
display: "flex",
alignItems: "center",
justifyContent: "center",
fontFamily: "'Segoe UI', system-ui, sans-serif",
padding: 16
}}>
@keyframes bounce {
0%, 60%, 100% { transform: translateY(0); }
30% { transform: translateY(-8px); }
}
@keyframes fadeSlide {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
0%, 100% { box-shadow: 0 0 20px rgba(124,58,237,0.3); }
50% { box-shadow: 0 0 40px rgba(124,58,237,0.6); }
}
textarea:focus { outline: none; }
textarea::placeholder { color: rgba(167,139,250,0.4); }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(124,58,237,0.4); border-radius: 2px; }
`}
width: "100%",
maxWidth: 680,
height: "88vh",
display: "flex",
flexDirection: "column",
background: "rgba(15,10,30,0.8)",
backdropFilter: "blur(20px)",
borderRadius: 24,
border: "1px solid rgba(124,58,237,0.25)",
boxShadow: "0 25px 80px rgba(0,0,0,0.6), 0 0 60px rgba(124,58,237,0.1)",
animation: "pulse 4s ease-in-out infinite",
overflow: "hidden"
}}>
{/* Header */}
padding: "20px 24px",
borderBottom: "1px solid rgba(124,58,237,0.2)",
background: "rgba(124,58,237,0.08)",
display: "flex", alignItems: "center", gap: 12
}}>
width: 44, height: 44, borderRadius: "50%",
background: "linear-gradient(135deg, #7c3aed, #a78bfa)",
display: "flex", alignItems: "center", justifyContent: "center",
fontSize: 20, boxShadow: "0 0 20px rgba(124,58,237,0.5)"
}}>✨
Chat IA
En línea · Impulsado por Claude
{/* Messages */}
flex: 1, overflowY: "auto",
padding: "20px 20px 8px",
display: "flex", flexDirection: "column"
}}>
{messages.map((msg, i) => (
))}
{loading &&
{/* Input */}
padding: "14px 16px",
borderTop: "1px solid rgba(124,58,237,0.15)",
background: "rgba(124,58,237,0.05)"
}}>
display: "flex", gap: 10, alignItems: "flex-end",
background: "rgba(255,255,255,0.05)",
border: "1px solid rgba(124,58,237,0.3)",
borderRadius: 16, padding: "10px 14px",
transition: "border-color 0.2s"
}}>
);
}
