(              ))}      );}function Message({ msg }) {  const isUser = msg.role === "user";  return (          {!isUser && (        🤖      )}              {msg.content}            {isUser && (        👤      )}      );}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 (          {`        @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; }      `}              {/* Header */}                  ✨                                    Chat IA                                                    En línea · Impulsado por Claude                                      {/* Messages */}                  {messages.map((msg, i) => (                      ))}          {loading && }                          {/* Input */}                              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";              }}            />                          {loading ? "⏳" : "➤"}                                            Shift+Enter para nueva línea                              );} ">