Chat API

POST /api/chat

curl -X POST https://zongolica.gob.mx/api/chat \
  -H "Content-Type: application/json" \
  -d '{
    "message": "¿Qué cascadas hay en Zongolica?"
  }'

{
  "reply": "¡Tenemos cascadas espectaculares! 🏞️ Las principales son:\n\n- **[Cascada Atlahuitzía](/turismo/atractivos/cascada-atlahuitzia)** — 120 metros de altura, es la más impresionante y visitada.\n- **Cascada del Nacimiento del Río Tonto** — Ideal para combinar con espeleismo y kayak.\n\nTe recomiendo el **Tour Cascada Atlahuitzía** ($750 MXN) que incluye transporte, guías y todos los accesos. ¿Te gustaría saber más sobre alguna ruta?"
}

const response = await fetch('/api/chat', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    message: '¿Cuánto cuesta el tour?',
    history: [
      {
        role: 'user',
        content: '¿Qué cascadas hay?'
      },
      {
        role: 'assistant',
        content: 'Tenemos la Cascada Atlahuitzía de 120 metros...'
      }
    ]
  })
});

const data = await response.json();
console.log(data.reply);

// Get user location
navigator.geolocation.getCurrentPosition(async (position) => {
  const response = await fetch('/api/chat', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      message: '¿Dónde puedo comer cerca?',
      location: {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      }
    })
  });

  const data = await response.json();
  console.log(data.reply);
});

{
  "reply": "No recibí un mensaje válido."
}

{
  "reply": "Has enviado muchos mensajes. Espera un momento antes de volver a preguntar 😊"
}

{
  "reply": "Hmm, estoy teniendo problemas para responder. Intenta de nuevo en un momento 🙏"
}

{
  "reply": "El servicio de chat no está disponible en este momento. Disculpa las molestias."
}

{
  "reply": "Ocurrió un error de conexión. Por favor intenta más tarde."
}

import { useState } from 'react';

type Message = {
  role: 'user' | 'assistant';
  content: string;
};

export function ChatWidget() {
  const [messages, setMessages] = useState<Message[]>([]);
  const [input, setInput] = useState('');
  const [loading, setLoading] = useState(false);

  const sendMessage = async () => {
    if (!input.trim() || loading) return;

    const userMessage = input.trim();
    setInput('');
    setLoading(true);

    // Add user message
    const newMessages = [...messages, { role: 'user' as const, content: userMessage }];
    setMessages(newMessages);

    try {
      // Get user location (optional)
      let location = undefined;
      if (navigator.geolocation) {
        const position = await new Promise<GeolocationPosition>((resolve, reject) => {
          navigator.geolocation.getCurrentPosition(resolve, reject);
        }).catch(() => null);
        
        if (position) {
          location = {
            lat: position.coords.latitude,
            lng: position.coords.longitude
          };
        }
      }

      const response = await fetch('/api/chat', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          message: userMessage,
          history: newMessages.slice(-6), // Last 6 messages for context
          location
        })
      });

      const data = await response.json();
      
      // Add assistant message
      setMessages([...newMessages, { role: 'assistant', content: data.reply }]);
    } catch (error) {
      console.error('Chat error:', error);
      setMessages([...newMessages, {
        role: 'assistant',
        content: 'Error de conexión. Por favor intenta de nuevo.'
      }]);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="chat-widget">
      <div className="messages">
        {messages.map((msg, i) => (
          <div key={i} className={msg.role}>
            {msg.content}
          </div>
        ))}
      </div>
      
      <input
        value={input}
        onChange={(e) => setInput(e.target.value)}
        onKeyPress={(e) => e.key === 'Enter' && sendMessage()}
        placeholder="Pregunta a Nachito..."
        disabled={loading}
      />
      
      <button onClick={sendMessage} disabled={loading}>
        {loading ? 'Enviando...' : 'Enviar'}
      </button>
    </div>
  );
}

history: messages.slice(-6)

const lastRequest = Date.now();
if (Date.now() - lastRequest < 3000) {
  alert('Por favor espera unos segundos');
  return;
}

navigator.geolocation.getCurrentPosition(
  (position) => {
    // Include in chat request
  },
  (error) => {
    // Continue without location
  }
);

import ReactMarkdown from 'react-markdown';

<ReactMarkdown>{message.content}</ReactMarkdown>

{loading && <div className="typing-indicator">Nachito está escribiendo...</div>}