fix(appkit-ui): chat primitives robustness

- responses-api-transport: normalize CRLF to LF in the SSE line parser
  so the "\n\n" frame-boundary split works behind proxies that re-emit
  events with CRLF line endings. Adds a CRLF-stream unit test.

- use-scroll-to-bottom: switch from useRef + listener-attach-on-mount
  to a state-backed ref callback. The listener-attach effect now
  re-runs when the container DOM node changes, so consumers that
  conditionally render the scroll container (e.g. behind a loading
  gate) still get auto-stick. The public ref type changes from
  RefObject<T | null> to (node: T | null) => void; JSX
  `ref={containerRef}` keeps working because React accepts both
  shapes, and no consumer reads `.current` (verified across the repo).

Signed-off-by: Hubert Zub <hubert.zub@databricks.com>

Author: hubertzub-db

packages/appkit-ui/src/react/chat/hooks/use-scroll-to-bottom.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 export interface UseScrollToBottomOptions {
   /** Pixels from the bottom that still count as "at bottom". Default 50. */
@@ -8,7 +8,13 @@ export interface UseScrollToBottomOptions {
 }
 
 export interface UseScrollToBottomReturn<T extends HTMLElement> {
-  containerRef: React.RefObject<T | null>;
+  /**
+   * Ref callback. Attach with `ref={containerRef}` on the scroll
+   * container. Re-runs the listener-attach effect whenever the
+   * underlying DOM node changes — so containers that mount after the
+   * first render (e.g. behind a `loading` gate) still get the listener.
+   */
+  containerRef: (node: T | null) => void;
   isAtBottom: boolean;
   scrollToBottom: (behavior?: ScrollBehavior) => void;
 }
@@ -21,42 +27,49 @@ export function useScrollToBottom<T extends HTMLElement = HTMLDivElement>({
   threshold = 50,
   trigger,
 }: UseScrollToBottomOptions = {}): UseScrollToBottomReturn<T> {
-  const containerRef = useRef<T | null>(null);
+  // State-backed so changes to the underlying DOM node re-run the
+  // listener-attach effect (e.g. when the container mounts after the
+  // first render).
+  const [element, setElement] = useState<T | null>(null);
   const [isAtBottom, setIsAtBottom] = useState(true);
 
-  const handleScroll = useCallback(() => {
-    const el = containerRef.current;
-    if (!el) return;
-    setIsAtBottom(el.scrollHeight - el.scrollTop - el.clientHeight < threshold);
-  }, [threshold]);
+  const containerRef = useCallback((node: T | null) => {
+    setElement(node);
+  }, []);
 
   useEffect(() => {
-    const el = containerRef.current;
-    if (!el) return;
-    el.addEventListener("scroll", handleScroll, { passive: true });
+    if (!element) return;
+    const handleScroll = () => {
+      setIsAtBottom(
+        element.scrollHeight - element.scrollTop - element.clientHeight <
+          threshold,
+      );
+    };
+    element.addEventListener("scroll", handleScroll, { passive: true });
     handleScroll();
-    return () => el.removeEventListener("scroll", handleScroll);
-  }, [handleScroll]);
+    return () => element.removeEventListener("scroll", handleScroll);
+  }, [element, threshold]);
 
   useEffect(() => {
     // `trigger` is referenced only to opt the effect into a re-run when
     // its identity changes (e.g. on every new message during streaming).
     void trigger;
-    if (isAtBottom && containerRef.current) {
+    if (isAtBottom && element) {
       // `instant` here so streaming re-renders don't queue smooth animations.
-      containerRef.current.scrollTo({
-        top: containerRef.current.scrollHeight,
+      element.scrollTo({
+        top: element.scrollHeight,
         behavior: "instant",
       });
     }
-  }, [trigger, isAtBottom]);
+  }, [trigger, isAtBottom, element]);
 
-  const scrollToBottom = useCallback((behavior: ScrollBehavior = "smooth") => {
-    containerRef.current?.scrollTo({
-      top: containerRef.current.scrollHeight,
-      behavior,
-    });
-  }, []);
+  const scrollToBottom = useCallback(
+    (behavior: ScrollBehavior = "smooth") => {
+      if (!element) return;
+      element.scrollTo({ top: element.scrollHeight, behavior });
+    },
+    [element],
+  );
 
   return { containerRef, isAtBottom, scrollToBottom };
 }

packages/appkit-ui/src/react/chat/lib/responses-api-transport.test.ts

@@ -566,4 +566,54 @@ describe("ResponsesApiTransport", () => {
     }
     expect(chunks.map((c) => c.type)).toEqual(["start", "finish"]);
   });
+
+  test("parses CRLF-encoded SSE frames (proxy normalization)", async () => {
+    const encoder = new TextEncoder();
+    const body =
+      `id: 1\r\nevent: response.output_item.added\r\ndata: ${JSON.stringify({
+        type: "response.output_item.added",
+        output_index: 0,
+        item: messageItem("msg_a"),
+        sequence_number: 0,
+      })}\r\n\r\n` +
+      `id: 2\r\nevent: response.output_text.delta\r\ndata: ${JSON.stringify({
+        type: "response.output_text.delta",
+        item_id: "msg_a",
+        output_index: 0,
+        content_index: 0,
+        delta: "hi",
+        sequence_number: 1,
+      })}\r\n\r\n` +
+      `id: 3\r\nevent: response.completed\r\ndata: ${JSON.stringify({
+        type: "response.completed",
+        sequence_number: 2,
+        response: {},
+      })}\r\n\r\n`;
+    const stream = new ReadableStream<Uint8Array>({
+      start(controller) {
+        controller.enqueue(encoder.encode(body));
+        controller.close();
+      },
+    });
+    const transport = new TestableTransport<UIMessage>({ api: "/test" });
+    const out = transport.process(stream);
+    const reader = out.getReader();
+    const chunks: UIMessageChunk[] = [];
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      chunks.push(value);
+    }
+    expect(chunks.map((c) => c.type)).toEqual([
+      "start",
+      "text-start",
+      "text-delta",
+      "finish",
+    ]);
+    expect(chunks).toContainEqual({
+      type: "text-delta",
+      id: "msg_a",
+      delta: "hi",
+    });
+  });
 });

packages/appkit-ui/src/react/chat/lib/responses-api-transport.ts

@@ -123,7 +123,9 @@ function sseEventLineParser(): TransformStream<string, ResponseStreamEvent> {
   let buffer = "";
   return new TransformStream({
     transform(chunk, controller) {
-      buffer += chunk;
+      // Normalize CRLF → LF so the `\n\n` boundary split works behind
+      // intermediaries that re-emit SSE frames with CRLF line endings.
+      buffer += chunk.replace(/\r\n/g, "\n");
       let separatorIdx: number;
       // biome-ignore lint/suspicious/noAssignInExpressions: standard SSE buffer drain pattern
       while ((separatorIdx = buffer.indexOf("\n\n")) !== -1) {