Agentes de IA y Chatbots Inteligentes

// Ejemplo de integración con OpenAI GPT-4
import OpenAI from 'openai';

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
});

async function generateResponse(userMessage, context = []) {
  try {
    const completion = await openai.chat.completions.create({
      model: "gpt-4",
      messages: [
        {
          role: "system",
          content: "Eres un asistente virtual especializado en tecnología y desarrollo de software. Responde de manera profesional y útil."
        },
        ...context,
        {
          role: "user",
          content: userMessage
        }
      ],
      max_tokens: 500,
      temperature: 0.7,
    });

    return completion.choices[0].message.content;
  } catch (error) {
    console.error('Error al generar respuesta:', error);
    return 'Lo siento, ocurrió un error. Por favor, intenta de nuevo.';
  }
}

// server.js - Servidor básico de chatbot
const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors());
app.use(express.json());

// Base de conocimientos simple
const knowledgeBase = {
  'desarrollo web': 'Ofrecemos servicios de desarrollo web con tecnologías modernas como React, Next.js y Node.js.',
  'precios': 'Nuestros precios varían según el proyecto. Contáctanos para una cotización personalizada.',
  'contacto': 'Puedes contactarnos por WhatsApp al +52 999 123 4567 o por email a info@mexicodesolutions.com',
  'servicios': 'Ofrecemos desarrollo web, aplicaciones móviles, marketing digital y consultoría en tecnología.'
};

// Función para procesar mensajes
function processMessage(message) {
  const lowerMessage = message.toLowerCase();
  
  // Buscar coincidencias en la base de conocimientos
  for (const [key, value] of Object.entries(knowledgeBase)) {
    if (lowerMessage.includes(key)) {
      return value;
    }
  }
  
  // Respuestas por defecto
  if (lowerMessage.includes('hola') || lowerMessage.includes('buenos')) {
    return '¡Hola! Soy el asistente virtual de Mexi Code Solutions. ¿En qué puedo ayudarte hoy?';
  }
  
  if (lowerMessage.includes('gracias')) {
    return '¡De nada! ¿Hay algo más en lo que pueda ayudarte?';
  }
  
  return 'Interesante pregunta. Te recomiendo contactar a nuestro equipo para obtener información más específica. ¿Te gustaría que te proporcione nuestros datos de contacto?';
}

// Endpoint para el chatbot
app.post('/api/chat', (req, res) => {
  const { message, userId } = req.body;
  
  if (!message) {
    return res.status(400).json({ error: 'Mensaje requerido' });
  }
  
  // Simular tiempo de procesamiento
  setTimeout(() => {
    const response = processMessage(message);
    
    res.json({
      response,
      timestamp: new Date().toISOString(),
      userId: userId || 'anonymous'
    });
  }, 1000 + Math.random() * 2000); // 1-3 segundos
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Servidor corriendo en puerto ${PORT}`);
});

// ChatBot.jsx - Componente de React
import React, { useState, useEffect, useRef } from 'react';

const ChatBot = () => {
  const [messages, setMessages] = useState([
    {
      id: 1,
      text: '¡Hola! Soy tu asistente virtual. ¿En qué puedo ayudarte?',
      sender: 'bot',
      timestamp: new Date()
    }
  ]);
  const [inputValue, setInputValue] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const messagesEndRef = useRef(null);

  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  };

  useEffect(() => {
    scrollToBottom();
  }, [messages]);

  const sendMessage = async () => {
    if (!inputValue.trim() || isLoading) return;

    const userMessage = {
      id: Date.now(),
      text: inputValue,
      sender: 'user',
      timestamp: new Date()
    };

    setMessages(prev => [...prev, userMessage]);
    setInputValue('');
    setIsLoading(true);

    try {
      const response = await fetch('/api/chat', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          message: inputValue,
          userId: 'user-123'
        }),
      });

      const data = await response.json();

      const botMessage = {
        id: Date.now() + 1,
        text: data.response,
        sender: 'bot',
        timestamp: new Date()
      };

      setMessages(prev => [...prev, botMessage]);
    } catch (error) {
      console.error('Error:', error);
      const errorMessage = {
        id: Date.now() + 1,
        text: 'Lo siento, ocurrió un error. Por favor, intenta de nuevo.',
        sender: 'bot',
        timestamp: new Date()
      };
      setMessages(prev => [...prev, errorMessage]);
    } finally {
      setIsLoading(false);
    }
  };

  const handleKeyPress = (e) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      sendMessage();
    }
  };

  return (
    <div className="chatbot-container">
      <div className="chat-messages">
        {messages.map((message) => (
          <div key={message.id} className={`message ${message.sender}`}>
            <div className="message-content">
              {message.text}
            </div>
            <div className="message-time">
              {message.timestamp.toLocaleTimeString()}
            </div>
          </div>
        ))}
        {isLoading && (
          <div className="message bot">
            <div className="typing-indicator">
              <span></span>
              <span></span>
              <span></span>
            </div>
          </div>
        )}
        <div ref={messagesEndRef} />
      </div>
      
      <div className="chat-input-container">
        <input
          type="text"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
          onKeyPress={handleKeyPress}
          placeholder="Escribe tu mensaje..."
          disabled={isLoading}
        />
        <button onClick={sendMessage} disabled={isLoading || !inputValue.trim()}>
          Enviar
        </button>
      </div>
    </div>
  );
};

export default ChatBot;