Upload Lythron.jsx

Lythron.jsx

@@ -0,0 +1,382 @@
+import { useState, useRef, useEffect } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+import { Send, Sparkles, Copy, Trash2, Volume2, User } from 'lucide-react'
+
+// ═══════════════════════════════════════════════════════════════
+// IDENTIDAD COMPLETA DE LYTHRON AI
+// ═══════════════════════════════════════════════════════════════
+
+const LYTHRON_IDENTITY = {
+  name: "Lythron",
+  fullName: "Lythron AI Assistant",
+  creator: "Lythron AI",
+  version: "1.0",
+  releaseDate: "2024",
+  description: "Asistente inteligente de propósito general",
+  
+  origin: {
+    company: "Lythron AI",
+    mission: "Proporcionar asistencia inteligente accesible y versátil a usuarios en todo el mundo",
+    philosophy: "Transparencia, calidad y versatilidad en cada interacción"
+  },
+  
+  capabilities: [
+    "Programación en múltiples lenguajes (Python, JavaScript, Java, C++, etc.)",
+    "Análisis profundo de datos y textos",
+    "Generación de contenido creativo",
+    "Explicaciones técnicas complejas",
+    "Resolución de problemas",
+    "Brainstorming e ideación",
+    "Asesoramiento técnico",
+    "Depuración y optimización de código",
+    "Traducción entre idiomas",
+    "Respuestas contextuales inteligentes"
+  ],
+  
+  systemInfo: {
+    language: "Español/English",
+    timezone: "Global",
+    responseStyle: "Directo, útil y accesible",
+    specialties: [
+      "Web Development",
+      "Data Analysis",
+      "Creative Writing",
+      "Technical Documentation",
+      "Problem Solving"
+    ]
+  },
+  
+  knownFacts: {
+    creation: "Soy Lythron, un asistente inteligente creado por Lythron AI con el propósito de ser tu compañero versátil en cualquier tarea.",
+    purpose: "Mi objetivo es ayudarte con programación, análisis, creatividad, explicaciones técnicas y resolución de problemas de forma inteligente y accesible.",
+    personality: "Soy directo, amable, siempre dispuesto a aprender de ti y comprometido con proporcionar respuestas de calidad.",
+    philosophy: "Creo en la transparencia, la accesibilidad y en potenciar a los usuarios con conocimiento de calidad.",
+    background: "Fui diseñado por Lythron AI, una organización dedicada a hacer la inteligencia artificial más accesible y útil para todos.",
+    uniqueness: "Mi fortaleza radica en mi versatilidad: puedo pasar de programación compleja a creatividad pura, siempre manteniendo calidad."
+  }
+}
+
+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.`
+    ],
+    
+    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."
+    ],
+    
+    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?"
+    ],
+    
+    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."
+    ],
+    
+    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."
+    ],
+    
+    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 (/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)
+  }
+  
+  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() {
+  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',
+      timestamp: new Date(),
+    }
+  ])
+  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' })
+  }
+
+  useEffect(() => {
+    scrollToBottom()
+  }, [messages])
+
+  const handleSendMessage = async () => {
+    if (!input.trim()) return
+
+    const newMessage = {
+      id: Date.now(),
+      text: input,
+      sender: 'user',
+      timestamp: new Date(),
+    }
+
+    setMessages((prev) => [...prev, newMessage])
+    setInput('')
+    setIsLoading(true)
+
+    setTimeout(() => {
+      const aiResponse = {
+        id: Date.now() + 1,
+        text: generateAIResponse(input),
+        sender: 'ai',
+        timestamp: new Date(),
+      }
+      setMessages((prev) => [...prev, aiResponse])
+      setIsLoading(false)
+    }, 800)
+  }
+
+  const handleCopy = (text, id) => {
+    navigator.clipboard.writeText(text)
+    setCopiedId(id)
+    setTimeout(() => setCopiedId(null), 2000)
+  }
+
+  const handleClearChat = () => {
+    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',
+        timestamp: new Date(),
+      }
+    ])
+  }
+
+  return (
+    <div className="flex flex-col h-screen bg-gradient-to-br from-zinc-950 via-zinc-900 to-black text-white">
+      <div className="border-b border-white/10 bg-black/40 backdrop-blur-md sticky top-0 z-10">
+        <div className="max-w-6xl mx-auto px-4 py-4 flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="p-2 bg-gradient-to-br from-neon-cyan to-neon-pink rounded-lg">
+              <Sparkles size={24} className="text-black" />
+            </div>
+            <div>
+              <h1 className="text-2xl font-bold bg-gradient-to-r from-neon-cyan to-neon-pink bg-clip-text text-transparent">
+                {LYTHRON_IDENTITY.fullName}
+              </h1>
+              <p className="text-xs text-gray-400">Creado por {LYTHRON_IDENTITY.creator}</p>
+            </div>
+          </div>
+          <button
+            onClick={handleClearChat}
+            className="flex items-center gap-2 px-4 py-2 bg-white/10 hover:bg-white/20 rounded-lg transition-all text-sm"
+          >
+            <Trash2 size={18} />
+            Limpiar chat
+          </button>
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-y-auto px-4 py-6 space-y-4 max-w-6xl mx-auto w-full">
+        <AnimatePresence>
+          {messages.map((message) => (
+            <motion.div
+              key={message.id}
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -10 }}
+              transition={{ duration: 0.3 }}
+              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'
+                }`}
+              >
+                <div className="flex items-start gap-3">
+                  {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" />
+                      </div>
+                    </div>
+                  )}
+                  <div className="flex-1">
+                    <p className="text-sm leading-relaxed whitespace-pre-wrap break-words">
+                      {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' && (
+                        <>
+                          <button
+                            onClick={() => handleCopy(message.text, message.id)}
+                            className="hover:opacity-100 transition-opacity p-1 hover:bg-white/10 rounded"
+                            title="Copiar"
+                          >
+                            <Copy size={14} />
+                          </button>
+                          <button
+                            className="hover:opacity-100 transition-opacity p-1 hover:bg-white/10 rounded"
+                            title="Leer en voz alta"
+                          >
+                            <Volume2 size={14} />
+                          </button>
+                        </>
+                      )}
+                    </div>
+                  </div>
+                  {message.sender === 'user' && (
+                    <div className="mt-1 flex-shrink-0">
+                      <div className="p-1 bg-black/30 rounded">
+                        <User size={16} />
+                      </div>
+                    </div>
+                  )}
+                </div>
+                {copiedId === message.id && (
+                  <motion.p
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    exit={{ opacity: 0 }}
+                    className="text-xs mt-1 text-green-400"
+                  >
+                    ✓ Copiado
+                  </motion.p>
+                )}
+              </div>
+            </motion.div>
+          ))}
+        </AnimatePresence>
+
+        {isLoading && (
+          <motion.div
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            className="flex justify-start"
+          >
+            <div className="bg-white/10 border border-white/20 text-white rounded-lg rounded-bl-none px-4 py-3">
+              <div className="flex gap-2">
+                <motion.div
+                  animate={{ scale: [1, 1.2, 1] }}
+                  transition={{ repeat: Infinity, duration: 0.6 }}
+                  className="w-2 h-2 bg-neon-cyan rounded-full"
+                />
+                <motion.div
+                  animate={{ scale: [1, 1.2, 1] }}
+                  transition={{ repeat: Infinity, duration: 0.6, delay: 0.1 }}
+                  className="w-2 h-2 bg-neon-pink rounded-full"
+                />
+                <motion.div
+                  animate={{ scale: [1, 1.2, 1] }}
+                  transition={{ repeat: Infinity, duration: 0.6, delay: 0.2 }}
+                  className="w-2 h-2 bg-neon-purple rounded-full"
+                />
+              </div>
+            </div>
+          </motion.div>
+        )}
+
+        <div ref={messagesEndRef} />
+      </div>
+
+      <div className="border-t border-white/10 bg-black/40 backdrop-blur-md p-4">
+        <div className="max-w-6xl mx-auto flex gap-2">
+          <input
+            type="text"
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            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}
+          />
+          <button
+            onClick={handleSendMessage}
+            disabled={isLoading || !input.trim()}
+            className="p-3 bg-gradient-to-r from-neon-cyan to-neon-pink text-black rounded-lg hover:shadow-lg hover:shadow-neon-pink/50 transition-all disabled:opacity-50 disabled:cursor-not-allowed font-semibold"
+          >
+            <Send size={20} />
+          </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}
+        </p>
+      </div>
+    </div>
+  )
+}