@deltakit/react 0.2.0 → 0.2.3

package/dist/index.js

@@ -18,25 +18,70 @@ function useAutoScroll(dependencies, options) {
   const isAtBottomRef = useRef(true);
   const [isAtBottom, setIsAtBottom] = useState(true);
   const rafRef = useRef(null);
+  const smoothRafRef = useRef(null);
+  const smoothTargetRef = useRef(null);
+  const lastAutoScrollHeightRef = useRef(null);
+  const cancelSmoothScroll = useCallback(() => {
+    if (smoothRafRef.current != null) {
+      cancelAnimationFrame(smoothRafRef.current);
+      smoothRafRef.current = null;
+    }
+    smoothTargetRef.current = null;
+  }, []);
+  const runSmoothScroll = useCallback(() => {
+    if (smoothRafRef.current != null) return;
+    const tick = () => {
+      const el = ref.current;
+      if (!el || !isAtBottomRef.current) {
+        cancelSmoothScroll();
+        return;
+      }
+      const target = smoothTargetRef.current ?? el.scrollHeight;
+      const delta = target - el.scrollTop;
+      if (delta <= 1) {
+        el.scrollTop = target;
+        lastAutoScrollHeightRef.current = target;
+        smoothRafRef.current = null;
+        return;
+      }
+      const step = Math.min(Math.max(delta * 0.35, 12), 120);
+      el.scrollTop = Math.min(target, el.scrollTop + step);
+      smoothRafRef.current = requestAnimationFrame(tick);
+    };
+    smoothRafRef.current = requestAnimationFrame(tick);
+  }, [cancelSmoothScroll]);
   const scheduleScroll = useCallback(() => {
     if (rafRef.current != null) return;
     rafRef.current = requestAnimationFrame(() => {
       rafRef.current = null;
       const el = ref.current;
-      if (el && isAtBottomRef.current) {
-        el.scrollTo({ top: el.scrollHeight, behavior });
+      if (!el || !isAtBottomRef.current) return;
+      const nextHeight = el.scrollHeight;
+      if (lastAutoScrollHeightRef.current === nextHeight) return;
+      lastAutoScrollHeightRef.current = nextHeight;
+      if (behavior === "smooth") {
+        smoothTargetRef.current = nextHeight;
+        runSmoothScroll();
+        return;
       }
+      cancelSmoothScroll();
+      el.scrollTop = nextHeight;
     });
-  }, [behavior]);
+  }, [behavior, cancelSmoothScroll, runSmoothScroll]);
   useEffect(() => {
     const el = ref.current;
     if (!el || !enabled) return;
     const handleScroll = () => {
       const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight <= threshold;
       isAtBottomRef.current = atBottom;
+      if (!atBottom) {
+        lastAutoScrollHeightRef.current = null;
+        cancelSmoothScroll();
+      }
       setIsAtBottom((prev) => prev === atBottom ? prev : atBottom);
     };
     el.addEventListener("scroll", handleScroll, { passive: true });
+    handleScroll();
     return () => el.removeEventListener("scroll", handleScroll);
   }, [enabled, threshold]);
   useEffect(() => {
@@ -72,21 +117,25 @@ function useAutoScroll(dependencies, options) {
         cancelAnimationFrame(rafRef.current);
         rafRef.current = null;
       }
+      cancelSmoothScroll();
     };
-  }, []);
+  }, [cancelSmoothScroll]);
   const scrollToBottom = useCallback(() => {
     const el = ref.current;
     if (!el) return;
+    cancelSmoothScroll();
     isAtBottomRef.current = true;
+    lastAutoScrollHeightRef.current = el.scrollHeight;
     setIsAtBottom(true);
     el.scrollTo({ top: el.scrollHeight, behavior });
-  }, [behavior]);
+  }, [behavior, cancelSmoothScroll]);
   return { ref, scrollToBottom, isAtBottom };
 }
 
 // src/use-stream-chat.ts
-import { parseSSEStream } from "@deltakit/core";
-import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect2, useMemo, useRef as useRef2, useState as useState2 } from "react";
+
+// src/chat-controller.ts
 var counter = 0;
 function generateId() {
   return `msg_${Date.now()}_${++counter}`;
@@ -94,6 +143,385 @@ function generateId() {
 function createMessage(role, parts) {
   return { id: generateId(), role, parts };
 }
+function createChatTransportContext(options) {
+  const helpers = {
+    appendPart: options.appendPart,
+    appendText: options.appendText,
+    setMessages: options.setMessages
+  };
+  return {
+    emit: (event) => {
+      options.eventHandler(event, helpers);
+    },
+    ensureAssistantMessage: () => {
+      options.setMessages((prev) => {
+        const last = prev[prev.length - 1];
+        if (last?.role === "assistant") {
+          return prev;
+        }
+        return [...prev, createMessage("assistant", [])];
+      });
+    },
+    fail: (error) => {
+      options.setError(error);
+      options.onError?.(error);
+      options.setIsLoading(false);
+      options.setRunId(null);
+    },
+    finish: () => {
+      options.setIsLoading(false);
+      options.setRunId(null);
+      const finalMessages = options.getMessages();
+      const lastMessage = finalMessages[finalMessages.length - 1];
+      if (lastMessage?.role === "assistant") {
+        options.onMessage?.(lastMessage);
+      }
+      options.onFinish?.(finalMessages);
+    },
+    getMessages: options.getMessages,
+    setRunId: (runId) => {
+      options.setRunId(runId);
+    }
+  };
+}
+
+// src/transports.ts
+import { parseSSEStream } from "@deltakit/core";
+function toError(error) {
+  return error instanceof Error ? error : new Error(String(error));
+}
+function isAbortError(error) {
+  return error instanceof DOMException && error.name === "AbortError";
+}
+function resolveRunId(response) {
+  if (!response || typeof response !== "object") {
+    throw new Error("Background SSE start response did not contain a run id");
+  }
+  const maybeRunId = "runId" in response ? response.runId : "job_id" in response ? response.job_id : null;
+  if (typeof maybeRunId !== "string" || maybeRunId.length === 0) {
+    throw new Error("Background SSE start response did not contain a run id");
+  }
+  return maybeRunId;
+}
+function resolveUrl(url, runId) {
+  return typeof url === "function" ? url(runId) : url.replace(":runId", runId);
+}
+async function streamFetchSSE(response, context, signal) {
+  if (!response.ok) {
+    throw new Error(
+      `SSE request failed: ${response.status} ${response.statusText}`
+    );
+  }
+  if (!response.body) {
+    throw new Error("Response body is null \u2014 SSE streaming not supported");
+  }
+  for await (const event of parseSSEStream(response.body, signal)) {
+    context.emit(event);
+  }
+}
+function createDirectSSETransport(config) {
+  return {
+    start: ({ context, message }) => {
+      const controller = new AbortController();
+      const run = {
+        close: () => {
+          controller.abort();
+        },
+        stop: () => {
+          controller.abort();
+        }
+      };
+      const fetchImpl = config.fetch ?? fetch;
+      void (async () => {
+        try {
+          const response = await fetchImpl(config.api, {
+            body: JSON.stringify({ message, ...config.body }),
+            headers: {
+              "Content-Type": "application/json",
+              ...config.headers
+            },
+            method: config.method ?? "POST",
+            signal: controller.signal
+          });
+          await streamFetchSSE(response, context, controller.signal);
+          context.finish();
+        } catch (error) {
+          if (!isAbortError(error)) {
+            context.fail(toError(error));
+          }
+        }
+      })();
+      return run;
+    }
+  };
+}
+function createBackgroundSSETransport(config) {
+  const fetchImpl = config.fetch ?? fetch;
+  const connect = (runId, context) => {
+    const controller = new AbortController();
+    void (async () => {
+      try {
+        context.ensureAssistantMessage();
+        const response = await fetchImpl(resolveUrl(config.eventsApi, runId), {
+          headers: config.eventHeaders,
+          method: "GET",
+          signal: controller.signal
+        });
+        await streamFetchSSE(response, context, controller.signal);
+        context.finish();
+      } catch (error) {
+        if (!isAbortError(error)) {
+          context.fail(toError(error));
+        }
+      }
+    })();
+    return {
+      close: () => {
+        controller.abort();
+      },
+      stop: () => {
+        controller.abort();
+        if (config.cancelApi) {
+          void fetchImpl(resolveUrl(config.cancelApi, runId), {
+            method: "POST"
+          });
+        }
+      },
+      runId
+    };
+  };
+  return {
+    resume: ({ context, runId }) => {
+      context.setRunId(runId);
+      return connect(runId, context);
+    },
+    start: ({ context, message }) => {
+      const startController = new AbortController();
+      let activeRun;
+      void (async () => {
+        try {
+          const response = await fetchImpl(config.startApi, {
+            body: JSON.stringify({ message, ...config.startBody }),
+            headers: {
+              "Content-Type": "application/json",
+              ...config.startHeaders
+            },
+            method: config.startMethod ?? "POST",
+            signal: startController.signal
+          });
+          if (!response.ok) {
+            throw new Error(
+              `Background SSE start failed: ${response.status} ${response.statusText}`
+            );
+          }
+          const data = await response.json();
+          const runId = (config.resolveRunId ?? resolveRunId)(data);
+          context.setRunId(runId);
+          activeRun = connect(runId, context);
+        } catch (error) {
+          if (!isAbortError(error)) {
+            context.fail(toError(error));
+          }
+        }
+      })();
+      return {
+        close: () => {
+          startController.abort();
+          void activeRun?.close?.();
+        },
+        stop: () => {
+          startController.abort();
+          activeRun?.stop?.();
+        },
+        runId: null
+      };
+    }
+  };
+}
+function defaultParseWebSocketMessage(data) {
+  if (typeof data !== "string") {
+    return null;
+  }
+  const parsed = JSON.parse(data);
+  return parsed;
+}
+function createWebSocketTransport(config) {
+  const parseMessage = config.parseMessage ?? defaultParseWebSocketMessage;
+  const serializeMessage = config.serializeMessage ?? JSON.stringify;
+  let resolvedRunId = null;
+  const applyIncomingEvents = (parsed, context) => {
+    const events = Array.isArray(parsed) ? parsed : parsed ? [parsed] : [];
+    for (const item of events) {
+      const nextRunId = config.resolveRunId?.(item) ?? null;
+      if (nextRunId) {
+        resolvedRunId = nextRunId;
+        context.setRunId(nextRunId);
+      }
+      context.emit(item);
+      if (item.type === "done") {
+        context.finish();
+      } else if (item.type === "error") {
+        context.fail(
+          new Error(
+            "message" in item && typeof item.message === "string" ? item.message : "Stream error"
+          )
+        );
+      }
+    }
+  };
+  return {
+    resume: ({ context, runId }) => {
+      context.setRunId(runId);
+      context.ensureAssistantMessage();
+      const socket = new WebSocket(
+        typeof config.url === "function" ? config.url(runId) : config.url,
+        config.protocols
+      );
+      let manuallyClosed = false;
+      let sentResumePayload = false;
+      const sendResumePayload = () => {
+        if (sentResumePayload || socket.readyState !== WebSocket.OPEN) {
+          return;
+        }
+        sentResumePayload = true;
+        const payload = config.buildResumePayload?.(runId) ?? { [config.runIdKey ?? "runId"]: runId };
+        socket.send(serializeMessage(payload));
+      };
+      socket.onopen = sendResumePayload;
+      socket.onmessage = (event) => {
+        try {
+          applyIncomingEvents(parseMessage(event.data), context);
+        } catch (error) {
+          context.fail(toError(error));
+        }
+      };
+      socket.onerror = () => {
+        context.fail(new Error("WebSocket connection failed"));
+      };
+      socket.onclose = () => {
+        if (!manuallyClosed) {
+          context.finish();
+        }
+      };
+      queueMicrotask(sendResumePayload);
+      return {
+        close: () => {
+          manuallyClosed = true;
+          socket.close();
+        },
+        stop: () => {
+          manuallyClosed = true;
+          const stopRunId = resolvedRunId ?? runId;
+          if (stopRunId && config.cancelUrl) {
+            void fetch(resolveUrl(config.cancelUrl, stopRunId), {
+              method: "POST"
+            });
+          }
+          socket.close();
+        },
+        runId
+      };
+    },
+    start: ({ context, message }) => {
+      const runId = config.runId ?? config.getResumeKey?.() ?? null;
+      const socket = new WebSocket(
+        typeof config.url === "function" ? config.url(runId) : config.url,
+        config.protocols
+      );
+      let manuallyClosed = false;
+      let sentStartPayload = false;
+      const sendStartPayload = () => {
+        if (sentStartPayload || socket.readyState !== WebSocket.OPEN) {
+          return;
+        }
+        sentStartPayload = true;
+        context.ensureAssistantMessage();
+        const payload = {
+          message,
+          ...config.body
+        };
+        if (runId) {
+          payload[config.runIdKey ?? "runId"] = runId;
+        }
+        socket.send(serializeMessage(payload));
+      };
+      socket.onopen = sendStartPayload;
+      socket.onmessage = (event) => {
+        try {
+          applyIncomingEvents(parseMessage(event.data), context);
+        } catch (error) {
+          context.fail(toError(error));
+        }
+      };
+      socket.onerror = () => {
+        context.fail(new Error("WebSocket connection failed"));
+      };
+      socket.onclose = () => {
+        if (!manuallyClosed) {
+          context.finish();
+        }
+      };
+      queueMicrotask(sendStartPayload);
+      return {
+        close: () => {
+          manuallyClosed = true;
+          socket.close();
+        },
+        stop: () => {
+          manuallyClosed = true;
+          const stopRunId = resolvedRunId ?? runId;
+          if (stopRunId && config.cancelUrl) {
+            void fetch(resolveUrl(config.cancelUrl, stopRunId), {
+              method: "POST"
+            });
+          }
+          socket.close();
+        },
+        runId
+      };
+    }
+  };
+}
+function resolveTransport(options) {
+  if (typeof options.transport === "object" && options.transport) {
+    return options.transport;
+  }
+  const transportKind = options.transport ?? "sse";
+  if (transportKind === "background-sse") {
+    const config = options.transportOptions?.backgroundSSE;
+    if (!config) {
+      throw new Error(
+        '`transportOptions.backgroundSSE` is required when transport is "background-sse"'
+      );
+    }
+    return createBackgroundSSETransport(config);
+  }
+  if (transportKind === "websocket") {
+    const config = options.transportOptions?.websocket;
+    if (!config) {
+      throw new Error(
+        '`transportOptions.websocket` is required when transport is "websocket"'
+      );
+    }
+    return createWebSocketTransport(config);
+  }
+  const sseConfig = options.transportOptions?.sse ?? {
+    api: options.api,
+    body: options.body,
+    headers: options.headers
+  };
+  if (!sseConfig.api) {
+    throw new Error(
+      "`api` or `transportOptions.sse.api` is required when using the default SSE transport"
+    );
+  }
+  return createDirectSSETransport({
+    ...sseConfig,
+    api: sseConfig.api
+  });
+}
+
+// src/use-stream-chat.ts
 function defaultOnEvent(event, helpers) {
   if (event.type === "text_delta") {
     helpers.appendText(event.delta);
@@ -101,25 +529,45 @@ function defaultOnEvent(event, helpers) {
 }
 function useStreamChat(options) {
   const {
-    api,
-    headers,
-    body,
     initialMessages,
     onEvent,
     onMessage,
     onError,
-    onFinish
+    onFinish,
+    textBatchMs = 0
   } = options;
-  const [messages, setMessages] = useState2(
-    initialMessages ?? []
-  );
+  const [messages, setMessages] = useState2(initialMessages ?? []);
   const [isLoading, setIsLoading] = useState2(false);
   const [error, setError] = useState2(null);
-  const abortRef = useRef2(null);
+  const [runId, setRunId] = useState2(null);
+  const runRef = useRef2(null);
+  const resumedRunIdRef = useRef2(null);
+  const manuallyStoppedRef = useRef2(false);
   const messagesRef = useRef2(messages);
   messagesRef.current = messages;
-  const appendText = useCallback2((delta) => {
-    setMessages((prev) => {
+  const updateMessages = useCallback2(
+    (next) => {
+      setMessages((prev) => {
+        const resolved = typeof next === "function" ? next(prev) : next;
+        messagesRef.current = resolved;
+        return resolved;
+      });
+    },
+    []
+  );
+  const transportOptionsRef = useRef2(options.transportOptions);
+  transportOptionsRef.current = options.transportOptions;
+  const pendingTextRef = useRef2("");
+  const textFlushTimerRef = useRef2(null);
+  const flushPendingText = useCallback2(() => {
+    if (textFlushTimerRef.current !== null) {
+      clearTimeout(textFlushTimerRef.current);
+      textFlushTimerRef.current = null;
+    }
+    const delta = pendingTextRef.current;
+    if (!delta) return;
+    pendingTextRef.current = "";
+    updateMessages((prev) => {
       const last = prev[prev.length - 1];
       if (!last || last.role !== "assistant") return prev;
       const parts = [...last.parts];
@@ -133,122 +581,160 @@ function useStreamChat(options) {
       } else {
         parts.push({ type: "text", text: delta });
       }
-      const updated = { ...last, parts };
-      return [...prev.slice(0, -1), updated];
+      return [...prev.slice(0, -1), { ...last, parts }];
     });
-  }, []);
+  }, [updateMessages]);
+  const appendText = useCallback2((delta) => {
+    if (textBatchMs <= 0) {
+      pendingTextRef.current += delta;
+      flushPendingText();
+      return;
+    }
+    pendingTextRef.current += delta;
+    if (textFlushTimerRef.current !== null) return;
+    textFlushTimerRef.current = setTimeout(() => {
+      flushPendingText();
+    }, textBatchMs);
+  }, [flushPendingText, textBatchMs]);
   const appendPart = useCallback2((part) => {
-    setMessages((prev) => {
+    flushPendingText();
+    updateMessages((prev) => {
       const last = prev[prev.length - 1];
       if (!last || last.role !== "assistant") return prev;
-      const updated = {
-        ...last,
-        parts: [...last.parts, part]
-      };
-      return [...prev.slice(0, -1), updated];
+      return [
+        ...prev.slice(0, -1),
+        {
+          ...last,
+          parts: [...last.parts, part]
+        }
+      ];
     });
-  }, []);
+  }, [flushPendingText, updateMessages]);
+  const transportRef = useRef2(null);
+  if (!transportRef.current) {
+    transportRef.current = resolveTransport(options);
+  }
+  const transport = transportRef.current;
+  const eventHandler = onEvent ?? defaultOnEvent;
+  const eventHandlerRef = useRef2(eventHandler);
+  eventHandlerRef.current = eventHandler;
+  const onErrorRef = useRef2(onError);
+  onErrorRef.current = onError;
+  const onFinishRef = useRef2(onFinish);
+  onFinishRef.current = onFinish;
+  const onMessageRef = useRef2(onMessage);
+  onMessageRef.current = onMessage;
+  const transportContext = useMemo(
+    () => createChatTransportContext({
+      appendPart,
+      appendText,
+      eventHandler: (event, helpers) => eventHandlerRef.current(event, helpers),
+      getMessages: () => {
+        flushPendingText();
+        return messagesRef.current;
+      },
+      onError: (...args) => onErrorRef.current?.(...args),
+      onFinish: (...args) => onFinishRef.current?.(...args),
+      onMessage: (...args) => onMessageRef.current?.(...args),
+      setError,
+      setIsLoading,
+      setMessages: updateMessages,
+      setRunId: (next) => {
+        setRunId(next);
+        transportOptionsRef.current?.backgroundSSE?.onRunIdChange?.(next);
+        transportOptionsRef.current?.websocket?.onRunIdChange?.(next);
+      }
+    }),
+    [appendPart, appendText, flushPendingText, updateMessages]
+  );
   const stop = useCallback2(() => {
-    abortRef.current?.abort();
-    abortRef.current = null;
+    const activeRun = runRef.current;
+    if (!activeRun?.stop) {
+      return;
+    }
+    manuallyStoppedRef.current = true;
+    void activeRun.stop();
+    runRef.current = null;
     setIsLoading(false);
   }, []);
   const sendMessage = useCallback2(
     (text) => {
-      if (abortRef.current) {
+      if (runRef.current || isLoading) {
         return;
       }
       const userMessage = createMessage("user", [
         { type: "text", text }
       ]);
       const assistantMessage = createMessage("assistant", []);
-      setMessages((prev) => {
+      updateMessages((prev) => {
         const next = [...prev, userMessage, assistantMessage];
-        messagesRef.current = next;
         return next;
       });
       onMessage?.(userMessage);
       setError(null);
       setIsLoading(true);
-      const controller = new AbortController();
-      abortRef.current = controller;
-      const eventHandler = onEvent ?? defaultOnEvent;
-      const helpers = {
-        appendText,
-        appendPart,
-        setMessages
-      };
-      (async () => {
-        try {
-          const response = await fetch(api, {
-            method: "POST",
-            headers: {
-              "Content-Type": "application/json",
-              ...headers
-            },
-            body: JSON.stringify({ message: text, ...body }),
-            signal: controller.signal
-          });
-          if (!response.ok) {
-            throw new Error(
-              `SSE request failed: ${response.status} ${response.statusText}`
-            );
-          }
-          if (!response.body) {
-            throw new Error(
-              "Response body is null \u2014 SSE streaming not supported"
-            );
-          }
-          for await (const event of parseSSEStream(
-            response.body,
-            controller.signal
-          )) {
-            eventHandler(event, helpers);
-          }
-          const finalMessages = messagesRef.current;
-          const lastMessage = finalMessages[finalMessages.length - 1];
-          if (lastMessage?.role === "assistant") {
-            onMessage?.(lastMessage);
-          }
-          onFinish?.(finalMessages);
-        } catch (err) {
-          if (err instanceof DOMException && err.name === "AbortError") {
-            return;
-          }
-          const error2 = err instanceof Error ? err : new Error(String(err));
-          setError(error2);
-          onError?.(error2);
-        } finally {
-          abortRef.current = null;
-          setIsLoading(false);
-        }
-      })();
+      resumedRunIdRef.current = null;
+      manuallyStoppedRef.current = false;
+      const run = transport.start({ context: transportContext, message: text });
+      runRef.current = run ?? null;
+      if (run?.runId) {
+        setRunId(run.runId);
+      }
     },
-    [
-      api,
-      headers,
-      body,
-      onEvent,
-      onMessage,
-      onError,
-      onFinish,
-      appendText,
-      appendPart
-    ]
+    [isLoading, onMessage, transport, transportContext, updateMessages]
   );
+  const candidateRunId = options.transportOptions?.backgroundSSE?.runId ?? options.transportOptions?.backgroundSSE?.getResumeKey?.() ?? options.transportOptions?.websocket?.runId ?? options.transportOptions?.websocket?.getResumeKey?.() ?? null;
+  useEffect2(() => {
+    if (runRef.current) {
+      return;
+    }
+    if (!candidateRunId) {
+      return;
+    }
+    if (manuallyStoppedRef.current) {
+      return;
+    }
+    if (resumedRunIdRef.current === candidateRunId) {
+      return;
+    }
+    if (!transport.resume) {
+      return;
+    }
+    resumedRunIdRef.current = candidateRunId;
+    setError(null);
+    setIsLoading(true);
+    const run = transport.resume({
+      context: transportContext,
+      runId: candidateRunId
+    });
+    runRef.current = run ?? null;
+    setRunId(candidateRunId);
+  }, [candidateRunId, transport, transportContext]);
   useEffect2(() => {
     return () => {
-      abortRef.current?.abort();
-      abortRef.current = null;
+      if (textFlushTimerRef.current !== null) {
+        clearTimeout(textFlushTimerRef.current);
+        textFlushTimerRef.current = null;
+      }
+      void runRef.current?.close?.();
+      runRef.current = null;
     };
   }, []);
+  const prevIsLoadingRef = useRef2(isLoading);
+  useEffect2(() => {
+    if (prevIsLoadingRef.current && !isLoading) {
+      runRef.current = null;
+    }
+    prevIsLoadingRef.current = isLoading;
+  }, [isLoading]);
   return {
-    messages,
-    isLoading,
     error,
+    isLoading,
+    messages,
+    runId,
     sendMessage,
-    stop,
-    setMessages
+    setMessages: updateMessages,
+    stop
   };
 }
 export {