@apps-megafy/agentic-chat 0.1.22

package/dist/hooks/useAgentStream.js

@@ -0,0 +1,680 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { createClientBulkAnswerMessage, createClientDocumentMessage, createClientDocumentReferenceMessage, createClientMessage, createClientPingMessage, createClientQuickActionMessage, createClientResetSessionMessage, resolveAgentWebSocketUrl } from "../services/agentClient";
+import { createAgentSocket } from "../services/websocketClient";
+const DEFAULT_CONNECTION_TIMEOUT_MS = 10_000;
+const HEARTBEAT_INTERVAL_MS = 4 * 60 * 1000;
+const RECONNECT_AFTER_OPEN_DELAY_MS = 350;
+export function useAgentStream({ sessionId, websocketUrl, agentBaseUrl, documentUploadUrl, initialMessages = [], connectionTimeoutMs = DEFAULT_CONNECTION_TIMEOUT_MS, onProgress, onError }) {
+    const [messages, setMessages] = useState(initialMessages);
+    const [quickActions, setQuickActions] = useState([]);
+    const [widgets, setWidgets] = useState([]);
+    const [questionCard, setQuestionCard] = useState(null);
+    const [choiceCard, setChoiceCard] = useState(null);
+    const [status, setStatus] = useState("idle");
+    const [error, setError] = useState(null);
+    const [connectionAttempt, setConnectionAttempt] = useState(0);
+    const socketRef = useRef(null);
+    const streamMessageIdRef = useRef(null);
+    const documentProcessingMessageIdRef = useRef(null);
+    const connectionIdRef = useRef(0);
+    const statusRef = useRef("idle");
+    const resolvedUrl = useMemo(() => resolveAgentWebSocketUrl({ sessionId, websocketUrl, agentBaseUrl }), [agentBaseUrl, sessionId, websocketUrl]);
+    const pushError = useCallback((nextError) => {
+        setError(nextError);
+        onError?.(nextError);
+    }, [onError]);
+    const clearError = useCallback(() => {
+        setError(null);
+    }, []);
+    useEffect(() => {
+        statusRef.current = status;
+    }, [status]);
+    const handleServerMessage = useCallback((message) => {
+        switch (message.type) {
+            case "session_ready":
+                clearError();
+                if (message.progress) {
+                    onProgress?.(message.progress);
+                }
+                updateQuickActions(message.quick_actions, setQuickActions);
+                updateFrontendWidgets(message.widgets, setWidgets, setQuestionCard, setChoiceCard);
+                break;
+            case "history":
+                clearError();
+                documentProcessingMessageIdRef.current = null;
+                setMessages(message.messages.map((item, index) => ({
+                    id: `history-${index}`,
+                    role: item.role === "assistant" ? "agent" : "user",
+                    content: item.content,
+                    attachments: item.attachments,
+                    confirmation: item.confirmation,
+                    status: "sent"
+                })));
+                updateQuickActions(message.quick_actions, setQuickActions);
+                updateFrontendWidgets(message.widgets, setWidgets, setQuestionCard, setChoiceCard);
+                break;
+            case "message":
+                clearError();
+                dismissDocumentProcessingMessage(documentProcessingMessageIdRef, setMessages);
+                setMessages((current) => [
+                    ...current,
+                    {
+                        id: createId("agent"),
+                        role: message.role === "assistant" ? "agent" : "user",
+                        content: message.content,
+                        attachments: message.attachments,
+                        confirmation: message.confirmation,
+                        status: "sent"
+                    }
+                ]);
+                updateQuickActions(message.quick_actions, setQuickActions);
+                updateFrontendWidgets(message.widgets, setWidgets, setQuestionCard, setChoiceCard);
+                break;
+            case "stream_start": {
+                clearError();
+                dismissDocumentProcessingMessage(documentProcessingMessageIdRef, setMessages);
+                const id = createId("stream");
+                streamMessageIdRef.current = id;
+                setQuickActions([]);
+                setWidgets([]);
+                setMessages((current) => [
+                    ...current,
+                    {
+                        id,
+                        role: "agent",
+                        content: "",
+                        isStreaming: true,
+                        status: "sent"
+                    }
+                ]);
+                break;
+            }
+            case "stream_token": {
+                clearError();
+                const streamId = ensureStreamingMessage(streamMessageIdRef, setMessages);
+                setMessages((current) => current.map((item) => item.id === streamId ? { ...item, content: item.content + message.token } : item));
+                break;
+            }
+            case "stream_end": {
+                clearError();
+                const streamId = streamMessageIdRef.current;
+                if (!streamId) {
+                    return;
+                }
+                setMessages((current) => current.map((item) => item.id === streamId
+                    ? {
+                        ...item,
+                        content: message.content,
+                        attachments: message.attachments,
+                        confirmation: message.confirmation,
+                        isStreaming: false
+                    }
+                    : item));
+                streamMessageIdRef.current = null;
+                updateQuickActions(message.quick_actions, setQuickActions);
+                updateFrontendWidgets(message.widgets, setWidgets, setQuestionCard, setChoiceCard);
+                break;
+            }
+            case "quick_actions":
+                clearError();
+                setQuickActions(normalizeQuickActions(message.actions));
+                break;
+            case "widgets":
+                clearError();
+                updateFrontendWidgets(message.widgets, setWidgets, setQuestionCard, setChoiceCard);
+                break;
+            case "progress":
+                clearError();
+                dismissDocumentProcessingMessage(documentProcessingMessageIdRef, setMessages);
+                onProgress?.(message.data);
+                updateQuickActions(message.quick_actions, setQuickActions);
+                updateFrontendWidgets(message.widgets, setWidgets, setQuestionCard, setChoiceCard);
+                break;
+            case "pong":
+                clearError();
+                break;
+            case "error":
+                dismissDocumentProcessingMessage(documentProcessingMessageIdRef, setMessages);
+                pushError(new Error(`${message.code}: ${message.message}`));
+                break;
+        }
+    }, [clearError, onProgress, pushError]);
+    useEffect(() => {
+        const connectionId = connectionIdRef.current + 1;
+        connectionIdRef.current = connectionId;
+        let terminalStatus = null;
+        let timeoutId = null;
+        let reconnectTimeoutId = null;
+        let isActive = true;
+        let opened = false;
+        const isCurrentConnection = () => isActive && connectionIdRef.current === connectionId;
+        const clearConnectionTimeout = () => {
+            if (timeoutId) {
+                clearTimeout(timeoutId);
+                timeoutId = null;
+            }
+        };
+        const clearReconnectTimeout = () => {
+            if (reconnectTimeoutId) {
+                clearTimeout(reconnectTimeoutId);
+                reconnectTimeoutId = null;
+            }
+        };
+        const scheduleReconnect = () => {
+            if (!isCurrentConnection() || terminalStatus) {
+                return;
+            }
+            clearConnectionTimeout();
+            clearReconnectTimeout();
+            setStatus("connecting");
+            reconnectTimeoutId = setTimeout(() => {
+                if (isCurrentConnection()) {
+                    setConnectionAttempt((attempt) => attempt + 1);
+                }
+            }, RECONNECT_AFTER_OPEN_DELAY_MS);
+        };
+        const finishConnectionAttempt = (nextStatus, nextError) => {
+            if (!isCurrentConnection() || terminalStatus) {
+                return;
+            }
+            terminalStatus = nextStatus;
+            clearConnectionTimeout();
+            setStatus(nextStatus);
+            pushError(nextError);
+        };
+        setStatus("connecting");
+        clearError();
+        const socket = createAgentSocket(resolvedUrl, {
+            onOpen: () => {
+                if (!isCurrentConnection() || terminalStatus) {
+                    return;
+                }
+                opened = true;
+                clearConnectionTimeout();
+                setStatus("open");
+                clearError();
+            },
+            onMessage: (message) => {
+                if (isCurrentConnection()) {
+                    handleServerMessage(message);
+                }
+            },
+            onError: () => {
+                if (opened) {
+                    pushError(new Error("Se perdió la conexión con el agente. Reconectando..."));
+                    socket.close();
+                    scheduleReconnect();
+                    return;
+                }
+                finishConnectionAttempt("error", new Error("No se pudo conectar con el agente."));
+                socket.close();
+            },
+            onClose: () => {
+                if (!isCurrentConnection() || terminalStatus) {
+                    return;
+                }
+                if (opened) {
+                    scheduleReconnect();
+                    return;
+                }
+                clearConnectionTimeout();
+                setStatus("closed");
+            }
+        });
+        socketRef.current = socket;
+        timeoutId = setTimeout(() => {
+            finishConnectionAttempt("timeout", new Error("El agente no respondió a tiempo. Reintentá la conexión."));
+            socket.close();
+        }, Math.max(connectionTimeoutMs, 1000));
+        return () => {
+            isActive = false;
+            clearConnectionTimeout();
+            clearReconnectTimeout();
+            socket.close();
+            if (socketRef.current === socket) {
+                socketRef.current = null;
+            }
+        };
+    }, [
+        clearError,
+        connectionAttempt,
+        connectionTimeoutMs,
+        handleServerMessage,
+        pushError,
+        resolvedUrl
+    ]);
+    const getOpenSocket = useCallback(() => {
+        const socket = socketRef.current;
+        if (socket?.readyState === WebSocket.OPEN) {
+            return socket;
+        }
+        if (socket?.readyState === WebSocket.CONNECTING) {
+            setStatus("connecting");
+        }
+        else {
+            setStatus("closed");
+            setConnectionAttempt((attempt) => attempt + 1);
+        }
+        pushError(new Error("El agente no está conectado. Reintentá la conexión."));
+        return null;
+    }, [pushError]);
+    const sendSocketPayload = useCallback((payload) => {
+        const socket = getOpenSocket();
+        if (!socket) {
+            return false;
+        }
+        try {
+            socket.send(payload);
+            return true;
+        }
+        catch {
+            setStatus("closed");
+            setConnectionAttempt((attempt) => attempt + 1);
+            pushError(new Error("Se perdió la conexión con el agente. Reintentá la conexión."));
+            return false;
+        }
+    }, [getOpenSocket, pushError]);
+    useEffect(() => {
+        if (status !== "open") {
+            return;
+        }
+        const intervalId = window.setInterval(() => {
+            const socket = socketRef.current;
+            if (!socket || socket.readyState !== WebSocket.OPEN) {
+                setStatus("closed");
+                setConnectionAttempt((attempt) => attempt + 1);
+                return;
+            }
+            try {
+                socket.send(createClientPingMessage());
+            }
+            catch {
+                setStatus("closed");
+                setConnectionAttempt((attempt) => attempt + 1);
+            }
+        }, HEARTBEAT_INTERVAL_MS);
+        return () => window.clearInterval(intervalId);
+    }, [status]);
+    useEffect(() => {
+        const refreshConnectionIfStale = () => {
+            const currentStatus = statusRef.current;
+            if (currentStatus === "connecting" || currentStatus === "idle") {
+                return;
+            }
+            const socket = socketRef.current;
+            if (socket?.readyState === WebSocket.OPEN) {
+                try {
+                    socket.send(createClientPingMessage());
+                }
+                catch {
+                    setStatus("closed");
+                    setConnectionAttempt((attempt) => attempt + 1);
+                }
+                return;
+            }
+            clearError();
+            setStatus("connecting");
+            setConnectionAttempt((attempt) => attempt + 1);
+        };
+        const handleVisibilityChange = () => {
+            if (document.visibilityState === "visible") {
+                refreshConnectionIfStale();
+            }
+        };
+        window.addEventListener("focus", refreshConnectionIfStale);
+        document.addEventListener("visibilitychange", handleVisibilityChange);
+        return () => {
+            window.removeEventListener("focus", refreshConnectionIfStale);
+            document.removeEventListener("visibilitychange", handleVisibilityChange);
+        };
+    }, [clearError]);
+    const sendMessage = useCallback((content) => {
+        const cleanContent = content.trim();
+        if (!cleanContent) {
+            return;
+        }
+        clearError();
+        if (!sendSocketPayload(createClientMessage(cleanContent))) {
+            return;
+        }
+        setMessages((current) => [
+            ...current,
+            {
+                id: createId("user"),
+                role: "user",
+                content: cleanContent,
+                status: "sent"
+            }
+        ]);
+        setQuickActions([]);
+        setWidgets([]);
+    }, [clearError, sendSocketPayload]);
+    const sendDocumentMessage = useCallback(async (attachment, file) => {
+        clearError();
+        if (!getOpenSocket()) {
+            return;
+        }
+        const processingId = createId("document-processing");
+        documentProcessingMessageIdRef.current = processingId;
+        setMessages((current) => [
+            ...current,
+            {
+                id: createId("user-document"),
+                role: "user",
+                content: `Subí el documento **${attachment.name}**.`,
+                attachments: [attachment],
+                status: "sent"
+            },
+            {
+                id: processingId,
+                role: "agent",
+                content: "Procesando documento...",
+                isStreaming: true,
+                status: "sent"
+            }
+        ]);
+        setQuickActions([]);
+        setWidgets([]);
+        try {
+            if (documentUploadUrl) {
+                const documentReference = await uploadDocumentWithPresignedUrl({
+                    uploadUrl: documentUploadUrl,
+                    sessionId,
+                    attachment,
+                    file
+                });
+                if (!sendSocketPayload(createClientDocumentReferenceMessage(documentReference))) {
+                    dismissDocumentProcessingMessage(documentProcessingMessageIdRef, setMessages);
+                }
+                return;
+            }
+            const contentBase64 = await readFileAsBase64(file);
+            if (!sendSocketPayload(createClientDocumentMessage({
+                id: attachment.id,
+                name: attachment.name,
+                kind: attachment.kind,
+                mimeType: attachment.mimeType,
+                sizeBytes: attachment.sizeBytes,
+                contentBase64
+            }))) {
+                dismissDocumentProcessingMessage(documentProcessingMessageIdRef, setMessages);
+            }
+        }
+        catch {
+            dismissDocumentProcessingMessage(documentProcessingMessageIdRef, setMessages);
+            pushError(new Error("No se pudo enviar el documento al agente."));
+        }
+    }, [clearError, documentUploadUrl, getOpenSocket, pushError, sendSocketPayload, sessionId]);
+    const sendQuickAction = useCallback((action) => {
+        const label = action.label.trim();
+        const value = action.value?.trim();
+        const visibleContent = label || value;
+        if (!visibleContent) {
+            return;
+        }
+        clearError();
+        if (!sendSocketPayload(createClientQuickActionMessage({
+            id: action.id,
+            label: label || visibleContent,
+            value
+        }))) {
+            return;
+        }
+        setMessages((current) => [
+            ...current,
+            {
+                id: createId("user-action"),
+                role: "user",
+                content: visibleContent,
+                status: "sent"
+            }
+        ]);
+        setQuickActions([]);
+        setWidgets([]);
+    }, [clearError, sendSocketPayload]);
+    const sendWidgetValue = useCallback((widget, value) => {
+        if (widget.type !== "date_picker" && widget.type !== "location_picker") {
+            return;
+        }
+        const cleanValue = value.trim();
+        if (!cleanValue) {
+            return;
+        }
+        clearError();
+        if (!sendSocketPayload(createClientMessage(cleanValue))) {
+            return;
+        }
+        setMessages((current) => [
+            ...current,
+            {
+                id: createId("user-widget"),
+                role: "user",
+                content: cleanValue,
+                status: "sent"
+            }
+        ]);
+        setQuickActions([]);
+        setWidgets([]);
+    }, [clearError, sendSocketPayload]);
+    const sendBulkAnswer = useCallback((widget, answers) => {
+        clearError();
+        if (!sendSocketPayload(createClientBulkAnswerMessage(widget.id, answers))) {
+            return;
+        }
+        const answerValues = Object.values(answers).filter(Boolean).join(' | ');
+        setMessages((current) => [
+            ...current,
+            {
+                id: createId("user-bulk"),
+                role: "user",
+                content: answerValues || widget.label,
+                status: "sent"
+            }
+        ]);
+        setQuickActions([]);
+        setWidgets([]);
+        setQuestionCard(null);
+        setChoiceCard(null);
+    }, [clearError, sendSocketPayload]);
+    const regenerateLastAgentMessage = useCallback(() => {
+        sendMessage("Regenera tu respuesta anterior, por favor.");
+    }, [sendMessage]);
+    const retryConnection = useCallback(() => {
+        streamMessageIdRef.current = null;
+        documentProcessingMessageIdRef.current = null;
+        clearError();
+        setWidgets([]);
+        setQuestionCard(null);
+        setChoiceCard(null);
+        setStatus("idle");
+        setConnectionAttempt((attempt) => attempt + 1);
+    }, [clearError]);
+    const resetSession = useCallback(() => {
+        clearError();
+        streamMessageIdRef.current = null;
+        documentProcessingMessageIdRef.current = null;
+        const socket = socketRef.current;
+        if (!socket || socket.readyState !== WebSocket.OPEN) {
+            setMessages([]);
+            setQuickActions([]);
+            setWidgets([]);
+            setConnectionAttempt((attempt) => attempt + 1);
+            return;
+        }
+        setMessages([]);
+        setQuickActions([]);
+        setWidgets([]);
+        setQuestionCard(null);
+        setChoiceCard(null);
+        if (!sendSocketPayload(createClientResetSessionMessage())) {
+            setConnectionAttempt((attempt) => attempt + 1);
+        }
+    }, [clearError, sendSocketPayload]);
+    return {
+        messages,
+        quickActions,
+        widgets,
+        questionCard,
+        choiceCard,
+        status,
+        error,
+        sendMessage,
+        sendDocumentMessage,
+        sendQuickAction,
+        sendWidgetValue,
+        sendBulkAnswer,
+        regenerateLastAgentMessage,
+        retryConnection,
+        resetSession
+    };
+}
+function updateQuickActions(actions, setQuickActions) {
+    if (actions === undefined) {
+        return;
+    }
+    setQuickActions(normalizeQuickActions(actions));
+}
+function normalizeQuickActions(actions) {
+    if (!Array.isArray(actions)) {
+        return [];
+    }
+    return actions
+        .filter((action) => typeof action.label === "string" && action.label.trim())
+        .map((action, index) => ({
+        ...action,
+        id: action.id || `action-${index}-${action.label}`
+    }));
+}
+function updateFrontendWidgets(rawWidgets, setWidgets, setQuestionCard, setChoiceCard) {
+    if (rawWidgets === undefined) {
+        return;
+    }
+    if (!Array.isArray(rawWidgets)) {
+        setWidgets([]);
+        setQuestionCard(null);
+        setChoiceCard(null);
+        return;
+    }
+    const standard = [];
+    let questionCard = null;
+    let choiceCard = null;
+    for (const widget of rawWidgets) {
+        if (!widget || typeof widget !== "object")
+            continue;
+        if (widget.type === "date_picker") {
+            if (typeof widget.id === "string" &&
+                typeof widget.fieldId === "string" &&
+                typeof widget.label === "string") {
+                standard.push(widget);
+            }
+        }
+        else if (widget.type === "location_picker") {
+            const lw = widget;
+            if (typeof lw.id === "string" &&
+                typeof lw.fieldId === "string" &&
+                typeof lw.label === "string" &&
+                typeof lw.center?.lat === "number" &&
+                typeof lw.center?.lng === "number") {
+                standard.push(lw);
+            }
+        }
+        else if (widget.type === "question_card") {
+            const qw = widget;
+            if (typeof qw.id === "string" && typeof qw.label === "string" && Array.isArray(qw.fields)) {
+                questionCard = qw;
+            }
+        }
+        else if (widget.type === "choice_card") {
+            const cw = widget;
+            if (typeof cw.id === "string" && typeof cw.label === "string" && Array.isArray(cw.fields)) {
+                choiceCard = cw;
+            }
+        }
+    }
+    setWidgets(standard);
+    setQuestionCard(questionCard);
+    setChoiceCard(choiceCard);
+}
+function ensureStreamingMessage(streamMessageIdRef, setMessages) {
+    if (streamMessageIdRef.current) {
+        return streamMessageIdRef.current;
+    }
+    const id = createId("stream");
+    streamMessageIdRef.current = id;
+    setMessages((current) => [
+        ...current,
+        { id, role: "agent", content: "", isStreaming: true, status: "sent" }
+    ]);
+    return id;
+}
+function dismissDocumentProcessingMessage(documentProcessingMessageIdRef, setMessages) {
+    const processingId = documentProcessingMessageIdRef.current;
+    if (!processingId) {
+        return;
+    }
+    documentProcessingMessageIdRef.current = null;
+    setMessages((current) => current.filter((item) => item.id !== processingId));
+}
+function createId(prefix) {
+    if ("crypto" in globalThis && typeof globalThis.crypto.randomUUID === "function") {
+        return `${prefix}-${globalThis.crypto.randomUUID()}`;
+    }
+    return `${prefix}-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+}
+function readFileAsBase64(file) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => {
+            const result = reader.result;
+            if (typeof result !== "string") {
+                reject(new Error("No se pudo leer el documento."));
+                return;
+            }
+            resolve(result.split(",")[1] ?? "");
+        };
+        reader.onerror = () => reject(new Error("No se pudo leer el documento."));
+        reader.readAsDataURL(file);
+    });
+}
+async function uploadDocumentWithPresignedUrl({ uploadUrl, sessionId, attachment, file }) {
+    const presignResponse = await fetch(uploadUrl, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+            session_id: sessionId,
+            id: attachment.id,
+            name: attachment.name,
+            kind: attachment.kind,
+            mime_type: attachment.mimeType || file.type || "application/octet-stream",
+            size_bytes: attachment.sizeBytes || file.size
+        })
+    });
+    if (!presignResponse.ok) {
+        throw new Error("No se pudo preparar la carga del documento.");
+    }
+    const presign = (await presignResponse.json());
+    if (!presign.uploadUrl || !presign.document?.bucket || !presign.document.key) {
+        throw new Error("La respuesta de carga del documento no es válida.");
+    }
+    const uploadResponse = await fetch(presign.uploadUrl, {
+        method: presign.method || "PUT",
+        headers: presign.headers || {
+            "Content-Type": attachment.mimeType || file.type || "application/octet-stream"
+        },
+        body: file
+    });
+    if (!uploadResponse.ok) {
+        throw new Error("No se pudo cargar el documento.");
+    }
+    return {
+        id: presign.document.id || attachment.id,
+        name: presign.document.name || attachment.name,
+        kind: presign.document.kind || attachment.kind,
+        mimeType: presign.document.mime_type || presign.document.mimeType || attachment.mimeType,
+        sizeBytes: presign.document.size_bytes || presign.document.sizeBytes || attachment.sizeBytes,
+        storage: "s3",
+        bucket: presign.document.bucket,
+        key: presign.document.key
+    };
+}
+//# sourceMappingURL=useAgentStream.js.map