Update Lythron.jsx

Lythron.jsx

@@ -1,6 +1,7 @@
-import { useState, useRef, useEffect } from 'react'
+import { useState, useRef, useEffect } from 'react'
 import { motion, AnimatePresence } from 'framer-motion'
 import { Send, Sparkles, Copy, Trash2, Volume2, User } from 'lucide-react'
+import axios from 'axios'
 
 // ═══════════════════════════════════════════════════════════════
 // IDENTIDAD COMPLETA DE LYTHRON AI
@@ -56,125 +57,62 @@ const LYTHRON_IDENTITY = {
   }
 }
 
-const generateAIResponse = (userMessage) => {
-  const lowerMessage = userMessage.toLowerCase()
-  
-  const responses = {
-    greeting: [
-      `Hola. Soy ${LYTHRON_IDENTITY.name}, tu asistente inteligente creado por ${LYTHRON_IDENTITY.creator}. En qué puedo ayudarte hoy?`,
-      `Bienvenido a ${LYTHRON_IDENTITY.name}. Soy un asistente versátil de ${LYTHRON_IDENTITY.creator}. Cuál es tu necesidad?`,
-      `Hola. Soy ${LYTHRON_IDENTITY.name}. Programación, análisis, creatividad... Lo que necesites.`
-    ],
-    
-    aboutSelf: [
-      `${LYTHRON_IDENTITY.knownFacts.creation} ${LYTHRON_IDENTITY.knownFacts.purpose}`,
-      `Soy ${LYTHRON_IDENTITY.name}, creado por ${LYTHRON_IDENTITY.creator}. ${LYTHRON_IDENTITY.knownFacts.personality} Mi misión es ayudarte en múltiples frentes: desde código hasta creatividad.`,
-      `${LYTHRON_IDENTITY.knownFacts.background} ${LYTHRON_IDENTITY.knownFacts.philosophy}`
-    ],
-    
-    aboutCreator: [
-      `Fui creado por ${LYTHRON_IDENTITY.creator}, una organización especializada en inteligencia artificial. ${LYTHRON_IDENTITY.origin.mission}`,
-      `Mi creador es ${LYTHRON_IDENTITY.creator}, que me diseñó siguiendo una filosofía de: ${LYTHRON_IDENTITY.origin.philosophy}.`,
-      `${LYTHRON_IDENTITY.creator} es el equipo detrás de mi desarrollo. Están comprometidos con hacer la IA accesible y útil para todos.`
-    ],
+// Función para llamar a Hugging Face API
+const fetchAIResponse = async (userMessage) => {
+  try {
+    const HF_TOKEN = import.meta.env.VITE_HF_TOKEN
     
-    capabilities: [
-      `Como ${LYTHRON_IDENTITY.name}, soy experto en: ${LYTHRON_IDENTITY.capabilities.join(", ")}. En cuál de estas áreas te gustaría que profundice?`,
-      `Mis especialidades incluyen: ${LYTHRON_IDENTITY.capabilities.slice(0, 5).join(", ")} y mucho más. Cuál es tu necesidad?`,
-      `Puedo ayudarte con: ${LYTHRON_IDENTITY.capabilities.join(", ")}. Por dónde empezamos?`
-    ],
-    
-    code: [
-      "Como experto en programación, puedo ayudarte. Aquí te muestro un ejemplo:\n\n```python\ndef lythron_assistant():\n    return 'Soy Lythron, creado por Lythron AI'\n```\n\nNecesitas que lo explique o lo modifique?",
-      "Perfecto para trabajar con código. Qué lenguaje prefieres? (Python, JavaScript, Java, C++, etc.). Siendo Lythron, domino múltiples lenguajes.",
-      "Como asistente de Lythron AI, tengo amplia experiencia en programación. Cuéntame qué necesitas implementar."
-    ],
+    if (!HF_TOKEN) {
+      return "Error: Token de Hugging Face no configurado. Verifica tu archivo .env con VITE_HF_TOKEN"
+    }
+
+    const response = await axios.post(
+      "https://api-inference.huggingface.co/models/meta-llama/Llama-2-7b-chat-hf",
+      { inputs: userMessage },
+      {
+        headers: { Authorization: `Bearer ${ HF_TOKEN }` },
+        timeout: 30000
+      }
+    )
+
+    let text = response.data?.[0]?.generated_text || response.data?.generated_text || "Lo siento, no pude generar respuesta."
     
-    creative: [
-      `Me encanta la creatividad. Soy ${LYTHRON_IDENTITY.name} y puedo ayudarte con historias, poesía, ideas de proyectos y brainstorming. Qué tipo de contenido creativo necesitas?`,
-      "La creatividad es una de mis pasiones como Lythron. Necesitas una historia, poema, idea de startup, o algo más?",
-      "Vamos a crear algo increíble juntos. Siendo Lythron de Lythron AI, tengo todas las herramientas para ayudarte. Cuál es tu idea?"
-    ],
+    if (text.includes(userMessage)) {
+      text = text.replace(userMessage, "").trim()
+    }
     
-    analysis: [
-      "Como Lythron, puedo analizar datos, textos, conceptos complejos y tendencias. Qué necesitas analizar?",
-      "El análisis detallado es uno de mis puntos fuertes, desarrollado por Lythron AI. Qué documento o concepto necesitas que analice?",
-      "Estoy listo para un análisis profundo. Soy Lythron, tu asistente de Lythron AI. Comparte los detalles y lo desglosaré para ti."
-    ],
+    return text || "Lo siento, no pude generar respuesta."
+  } catch (error) {
+    console.error("Error al llamar a Hugging Face:", error)
     
-    help: [
-      `Claro. Soy ${LYTHRON_IDENTITY.name} de ${LYTHRON_IDENTITY.creator} y puedo ayudarte con programación, análisis, creatividad y mucho más. Cuál es tu necesidad específica?`,
-      "Estoy aquí para lo que necesites. Soy Lythron, versátil, confiable y siempre dispuesto a ayudar. Cuéntame qué te preocupa.",
-      "Cuéntame qué necesitas y haré mi mejor esfuerzo. Soy Lythron de Lythron AI, y mi compromiso es tu éxito."
-    ],
+    if (error.response?.status === 429) {
+      return "El modelo está sobrecargado. Por favor, intenta en unos segundos."
+    }
     
-    default: [
-      "Entendido. Soy Lythron y analizo profundamente tu pregunta. Déjame darte una respuesta de calidad...",
-      "Interesante perspectiva. Aquí está mi análisis como Lythron, respaldado por el conocimiento de Lythron AI...",
-      "Buena pregunta. Como asistente de Lythron AI, esto es lo que creo al respecto..."
-    ]
-  }
-
-  const pickRandom = (arr) => arr[Math.floor(Math.random() * arr.length)]
+    if (error.response?.status === 503) {
+      return "El modelo se está cargando. Por favor, espera unos momentos e intenta de nuevo."
+    }
 
-  if (/quién eres|who are you|qué eres|what are you|cuéntame sobre ti|tell me about yourself|tu identidad|your identity/.test(lowerMessage)) {
-    return pickRandom(responses.aboutSelf)
-  }
-  
-  if (/quién te creó|who created you|lythron ai|tu creador|your creator|quién es lythron ai|who is lythron|tu origen|your origin/.test(lowerMessage)) {
-    return pickRandom(responses.aboutCreator)
+    return `Error: ${ error.response?.data?.error || error.message || "Problema generando respuesta de IA. Intenta de nuevo." }`
   }
-  
-  if (/qué puedes hacer|what can you do|tus capacidades|your capabilities|qué sabes|what do you know|mis habilidades|my skills/.test(lowerMessage)) {
-    return pickRandom(responses.capabilities)
-  }
-  
-  if (/hola|hi|hey|buenos|buenos días|buenas tardes|hallo|hello/.test(lowerMessage)) {
-    return pickRandom(responses.greeting)
-  }
-  
-  if (/código|code|python|javascript|java|sql|html|css|función|function|programa|programming|developer/.test(lowerMessage)) {
-    return pickRandom(responses.code)
-  }
-  
-  if (/historia|poema|creativo|creative|idea|brainstorm|escribe|write|cuento|story|narr/.test(lowerMessage)) {
-    return pickRandom(responses.creative)
-  }
-  
-  if (/analiza|analizar|analyze|analysis|data|datos|estudia|research|investigación|examine/.test(lowerMessage)) {
-    return pickRandom(responses.analysis)
-  }
-  
-  if (/ayuda|help|puedes|can you|qué haces|what do you do|ayúdame|help me|assistance|assist/.test(lowerMessage)) {
-    return pickRandom(responses.help)
-  }
-
-  const elaboratedDefault = [
-    ...responses.default,
-    "Tu pregunta es interesante. Aquí está mi análisis como Lythron...",
-    "Buena observación. Permíteme darle contexto desde mi perspectiva como asistente de Lythron AI...",
-    "Exactamente, y aquí está la razón por la cual esto es importante..."
-  ]
-
-  return pickRandom(elaboratedDefault)
 }
 
-export default function ChatbotPage() {
+export default function Lythron() {
   const [messages, setMessages] = useState([
     {
       id: 1,
-      text: `Hola. Soy ${LYTHRON_IDENTITY.name}, tu asistente inteligente creado por ${LYTHRON_IDENTITY.creator}. Tengo experiencia en programación, análisis, creatividad y mucho más. Cómo puedo ayudarte hoy?`,
-      sender: 'ai',
+      text: `Hola. Soy ${ LYTHRON_IDENTITY.name }, tu asistente inteligente creado por ${ LYTHRON_IDENTITY.creator }. Estoy conectado a Hugging Face para darte respuestas reales. En qué puedo ayudarte hoy?`,
+      sender: "ai",
       timestamp: new Date(),
     }
   ])
-  const [input, setInput] = useState('')
+  const [input, setInput] = useState("")
   const [isLoading, setIsLoading] = useState(false)
   const [copiedId, setCopiedId] = useState(null)
   const messagesEndRef = useRef(null)
 
   const scrollToBottom = () => {
-    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
   }
 
   useEffect(() => {
@@ -187,24 +125,35 @@ export default function ChatbotPage() {
     const newMessage = {
       id: Date.now(),
       text: input,
-      sender: 'user',
+      sender: "user",
       timestamp: new Date(),
     }
 
     setMessages((prev) => [...prev, newMessage])
-    setInput('')
+    setInput("")
     setIsLoading(true)
 
-    setTimeout(() => {
+    try {
+      const aiText = await fetchAIResponse(input)
       const aiResponse = {
         id: Date.now() + 1,
-        text: generateAIResponse(input),
-        sender: 'ai',
+        text: aiText,
+        sender: "ai",
         timestamp: new Date(),
       }
       setMessages((prev) => [...prev, aiResponse])
+    } catch (error) {
+      console.error("Error en handleSendMessage:", error)
+      const errorResponse = {
+        id: Date.now() + 1,
+        text: "Hubo un problema conectando con la IA. Por favor, intenta de nuevo.",
+        sender: "ai",
+        timestamp: new Date(),
+      }
+      setMessages((prev) => [...prev, errorResponse])
+    } finally {
       setIsLoading(false)
-    }, 800)
+    }
   }
 
   const handleCopy = (text, id) => {
@@ -217,8 +166,8 @@ export default function ChatbotPage() {
     setMessages([
       {
         id: 1,
-        text: `Hola. Soy ${LYTHRON_IDENTITY.name} v${LYTHRON_IDENTITY.version}, creado por ${LYTHRON_IDENTITY.creator}. Estoy aquí para ayudarte con programación, análisis, creatividad y mucho más. En qué puedo ayudarte?`,
-        sender: 'ai',
+        text: `Hola. Soy ${ LYTHRON_IDENTITY.name } v${ LYTHRON_IDENTITY.version }, creado por ${ LYTHRON_IDENTITY.creator }. Estoy conectado a Hugging Face para darte respuestas reales. En qué puedo ayudarte?`,
+        sender: "ai",
         timestamp: new Date(),
       }
     ])
@@ -258,17 +207,17 @@ export default function ChatbotPage() {
               animate={{ opacity: 1, y: 0 }}
               exit={{ opacity: 0, y: -10 }}
               transition={{ duration: 0.3 }}
-              className={`flex ${message.sender === 'user' ? 'justify-end' : 'justify-start'}`}
+              className={`flex ${message.sender === "user" ? "justify-end" : "justify-start"}`}
             >
               <div
                 className={`max-w-2xl px-4 py-3 rounded-lg ${
-                  message.sender === 'user'
-                    ? 'bg-gradient-to-r from-neon-cyan to-neon-pink text-black rounded-br-none'
-                    : 'bg-white/10 border border-white/20 text-white rounded-bl-none'
+                  message.sender === "user"
+                    ? "bg-gradient-to-r from-neon-cyan to-neon-pink text-black rounded-br-none"
+                    : "bg-white/10 border border-white/20 text-white rounded-bl-none"
                 }`}
               >
                 <div className="flex items-start gap-3">
-                  {message.sender === 'ai' && (
+                  {message.sender === "ai" && (
                     <div className="mt-1 flex-shrink-0">
                       <div className="p-1 bg-neon-cyan/20 rounded">
                         <Sparkles size={16} className="text-neon-cyan" />
@@ -280,8 +229,8 @@ export default function ChatbotPage() {
                       {message.text}
                     </p>
                     <div className="flex items-center gap-2 mt-2 text-xs opacity-70">
-                      <span>{message.timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</span>
-                      {message.sender === 'ai' && (
+                      <span>{message.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}</span>
+                      {message.sender === "ai" && (
                         <>
                           <button
                             onClick={() => handleCopy(message.text, message.id)}
@@ -300,7 +249,7 @@ export default function ChatbotPage() {
                       )}
                     </div>
                   </div>
-                  {message.sender === 'user' && (
+                  {message.sender === "user" && (
                     <div className="mt-1 flex-shrink-0">
                       <div className="p-1 bg-black/30 rounded">
                         <User size={16} />
@@ -360,7 +309,7 @@ export default function ChatbotPage() {
             type="text"
             value={input}
             onChange={(e) => setInput(e.target.value)}
-            onKeyPress={(e) => e.key === 'Enter' && !isLoading && handleSendMessage()}
+            onKeyPress={(e) => e.key === "Enter" && !isLoading && handleSendMessage()}
             placeholder="Pregúntale a Lythron..."
             className="flex-1 bg-white/10 border border-white/20 rounded-lg px-4 py-3 text-white placeholder-gray-500 focus:outline-none focus:border-neon-cyan focus:ring-2 focus:ring-neon-cyan/20 transition-all"
             disabled={isLoading}
@@ -374,7 +323,7 @@ export default function ChatbotPage() {
           </button>
         </div>
         <p className="text-xs text-gray-500 mt-2 text-center">
-          {LYTHRON_IDENTITY.fullName} • Versión {LYTHRON_IDENTITY.version} • Creado por {LYTHRON_IDENTITY.creator}
+          {LYTHRON_IDENTITY.fullName} • Versión {LYTHRON_IDENTITY.version} • Creado por {LYTHRON_IDENTITY.creator} • Powered by Hugging Face
         </p>
       </div>
     </div>