Nexus Al
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
}}>
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"
}}>
ref={inputRef}
value={input}
onChange={e => setInput(e.target.value)}
onKeyDown={handleKey}
placeholder="Escribe tu mensaje... (Enter para enviar)"
rows={1}
style={{
flex: 1, background: "transparent", border: "none",
color: "#f1f0ff", fontSize: 14.5, resize: "none",
lineHeight: 1.5, maxHeight: 120, overflowY: "auto",
fontFamily: "inherit"
}}
onInput={e => {
e.target.style.height = "auto";
e.target.style.height = Math.min(e.target.scrollHeight, 120) + "px";
}}
/>
onClick={sendMessage}
disabled={loading || !input.trim()}
style={{
width: 38, height: 38, borderRadius: "50%", border: "none",
background: loading || !input.trim()
? "rgba(124,58,237,0.2)"
: "linear-gradient(135deg, #7c3aed, #a78bfa)",
cursor: loading || !input.trim() ? "not-allowed" : "pointer",
display: "flex", alignItems: "center", justifyContent: "center",
fontSize: 16, flexShrink: 0,
transition: "all 0.2s",
boxShadow: loading || !input.trim() ? "none" : "0 4px 15px rgba(124,58,237,0.4)"
}}
>
{loading ? "⏳" : "➤"}
Shift+Enter para nueva línea
);
}
Share:
This site was designed with Websites.co.in - Website Builder
IMPORTANT NOTICE
DISCLAIMER
This website was created by a user of Websites.co.in, a free instant website builder. Websites.co.in does NOT endorse, verify, or guarantee the accuracy, safety, or legality of this site's content, products, or services. Always exercise caution do not share sensitive data or make payments without independent verification. Report suspicious activity by clicking the report abuse below.
X
Safety and Abuse Reporting
Thanks for being awesome!
We appreciate you contacting us. Our support will get back in touch with you soon!
Have a great day!
Are you sure you want to report abuse against this website?
Please note that your query will be processed only if we find it relevant. Rest all requests will be ignored. If you need help with the website, please login to your dashboard and connect to support