3. Streaming de Respuestas en Tiempo Real con SSE (Server-Sent Events)

/**
 * sse-streaming-client.js - Consumo en vivo con Fetch y ReadableStream
 */
async function streamAssistantReply(userPrompt, outputElement) {
  outputElement.textContent = "";

  try {
    const response = await fetch("/api/chat-stream.php", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ message: userPrompt })
    });

    if (!response.ok) {
      throw new Error(`HTTP Error ${response.status}: Fallo al conectar con el asistente`);
    }

    // Obtenemos el lector de flujos binarios del cuerpo HTTP
    const reader = response.body.getReader();
    const decoder = new TextDecoder("utf-8");
    let buffer = "";

    while (true) {
      const { done, value } = await reader.read();
      if (done) break;

      // Decodificamos el bloque binario a texto legible
      buffer += decoder.decode(value, { stream: true });

      // Dividimos las líneas según la especificación SSE (\n\n)
      const lines = buffer.split("\n\n");
      buffer = lines.pop(); // Guardamos el fragmento incompleto

      for (const line of lines) {
        const trimmed = line.trim();
        if (!trimmed.startsWith("data: ")) continue;

        const payload = trimmed.replace("data: ", "");
        if (payload === "[DONE]") {
          console.log("Stream completado exitosamente.");
          return;
        }

        try {
          const parsed = JSON.parse(payload);
          const chunkText = parsed.choices?.[0]?.delta?.content || "";
          outputElement.textContent += chunkText;
        } catch (e) {
          console.warn("Línea SSE no interpretable:", payload);
        }
      }
    }
  } catch (err) {
    outputElement.textContent = `Error: ${err.message}`;
  }
}