feat(apollo-vertex): ai chat scroll

Author: pieman1313

apps/apollo-vertex/locales/en.json

@@ -75,6 +75,7 @@
   "rows_per_page": "Rows per page",
   "rows_selected": "{{selected}} of {{total}} row(s) selected.",
   "russian": "Russian",
+  "scroll_to_bottom": "Scroll to bottom",
   "search": "Search...",
   "search_frameworks": "Search frameworks",
   "secondary": "Secondary",

apps/apollo-vertex/package.json

@@ -26,6 +26,7 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@hookform/resolvers": "^5.2.2",
+    "@mantine/hooks": "^9.0.0",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-aspect-ratio": "^1.1.8",

apps/apollo-vertex/registry.json

@@ -250,6 +250,7 @@
       "title": "AI Chat",
       "description": "A composable AI chat UI component for TanStack AI with AgentHub adapter, markdown rendering, suggestion buttons, and error display",
       "dependencies": [
+        "@mantine/hooks@^9.0.0",
         "@tanstack/ai@^0.8.1",
         "@tanstack/ai-client@^0.7.2",
         "@tanstack/ai-react@^0.7.2",
@@ -297,6 +298,11 @@
           "type": "registry:lib",
           "target": "components/ui/ai-chat/adapters/agenthub/tools.ts"
         },
+        {
+          "path": "registry/ai-chat/hooks/use-sticky-scroll.ts",
+          "type": "registry:lib",
+          "target": "components/ui/ai-chat/hooks/use-sticky-scroll.ts"
+        },
         {
           "path": "registry/ai-chat/components/ai-chat.tsx",
           "type": "registry:ui",

apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx

@@ -1,9 +1,10 @@
 "use client";
 
 import type { UIMessage } from "@tanstack/ai-client";
-import { AlertCircle, Sparkles } from "lucide-react";
-import { type ReactNode, useEffect, useRef, useState } from "react";
+import { AlertCircle, ArrowDown, Sparkles } from "lucide-react";
+import { type ReactNode, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { useStickyScroll } from "../hooks/use-sticky-scroll";
 import type { ChoiceOption } from "../types";
 import { findLatestChoices } from "../utils/ai-chat-utils";
 import { AiChatInput } from "./ai-chat-input";
@@ -43,28 +44,14 @@ export function AiChat({
 }: AiChatProps) {
   const { t } = useTranslation();
   const [input, setInput] = useState("");
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const contentRef = useRef<HTMLDivElement>(null);
+  const { scrollRef, contentRef, isStuck, scrollToBottom } = useStickyScroll();
   const displayName = assistantName ?? t("ai_assistant");
 
-  const scrollToBottom = () => {
-    const el = scrollRef.current;
-    if (el) el.scrollTop = el.scrollHeight;
-  };
-
-  useEffect(() => {
-    scrollToBottom();
-    const last = contentRef.current?.lastElementChild;
-    if (!last) return;
-    const observer = new ResizeObserver(scrollToBottom);
-    observer.observe(last);
-    return () => observer.disconnect();
-  }, [messages]);
-
   const handleSubmit = () => {
     if (!input.trim() || isLoading) return;
     onSendMessage(input.trim());
     setInput("");
+    scrollToBottom();
   };
 
   const latestChoices = findLatestChoices(messages);
@@ -112,38 +99,51 @@ export function AiChat({
         </div>
       )}
 
-      <div
-        ref={scrollRef}
-        role="log"
-        aria-label={t("chat_messages")}
-        aria-live="polite"
-        aria-atomic="false"
-        className="flex-1 overflow-y-auto p-4"
-      >
-        {messages.length === 0 ? (
-          (emptyState ?? defaultEmptyState)
-        ) : (
-          <div ref={contentRef} className="space-y-4">
-            {children}
+      <div className="relative flex-1 min-h-0">
+        <div
+          ref={scrollRef}
+          role="log"
+          aria-label={t("chat_messages")}
+          aria-live="polite"
+          aria-atomic="false"
+          className="h-full overflow-y-auto p-4"
+        >
+          {messages.length === 0 ? (
+            (emptyState ?? defaultEmptyState)
+          ) : (
+            <div ref={contentRef} className="space-y-4">
+              {children}
 
-            {latestChoices && !isLoading && (
-              <AiChatSuggestions
-                prompt={latestChoices.prompt}
-                options={latestChoices.options}
-                onSelect={(option) => {
-                  if (onChoiceSelect) {
-                    onChoiceSelect(option);
-                  } else {
-                    onSendMessage(option.label);
-                  }
-                }}
-              />
-            )}
+              {latestChoices && !isLoading && (
+                <AiChatSuggestions
+                  prompt={latestChoices.prompt}
+                  options={latestChoices.options}
+                  onSelect={(option) => {
+                    if (onChoiceSelect) {
+                      onChoiceSelect(option);
+                    } else {
+                      onSendMessage(option.label);
+                    }
+                  }}
+                />
+              )}
+
+              {showLoadingIndicator && (
+                <AiChatLoading assistantName={displayName} />
+              )}
+            </div>
+          )}
+        </div>
 
-            {showLoadingIndicator && (
-              <AiChatLoading assistantName={displayName} />
-            )}
-          </div>
+        {!isStuck && (
+          <button
+            type="button"
+            onClick={scrollToBottom}
+            aria-label={t("scroll_to_bottom")}
+            className="absolute bottom-2 left-1/2 -translate-x-1/2 z-10 flex items-center justify-center size-8 rounded-full border bg-background shadow-md hover:bg-accent"
+          >
+            <ArrowDown className="size-4" />
+          </button>
         )}
       </div>
 

apps/apollo-vertex/registry/ai-chat/hooks/use-sticky-scroll.ts

@@ -0,0 +1,60 @@
+import {
+  useEventListener,
+  useMergedRef,
+  useResizeObserver,
+} from "@mantine/hooks";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+export function useStickyScroll() {
+  const [isStuck, setIsStuck] = useState(true);
+  const isStuckRef = useRef(true);
+  const scrollElRef = useRef<HTMLDivElement | null>(null);
+
+  const setStuck = useCallback((stuck: boolean) => {
+    isStuckRef.current = stuck;
+    setIsStuck(stuck);
+  }, []);
+
+  const scrollToBottom = useCallback(() => {
+    const el = scrollElRef.current;
+    if (!el) return;
+    el.scrollTop = el.scrollHeight;
+    setStuck(true);
+  }, [setStuck]);
+
+  const handleWheel = useCallback(
+    (e: WheelEvent) => {
+      if (e.deltaY < 0) setStuck(false);
+    },
+    [setStuck],
+  );
+
+  const handleScroll = useCallback(() => {
+    if (isStuckRef.current) return;
+    const el = scrollElRef.current;
+    if (!el) return;
+    const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 1;
+    if (atBottom) setStuck(true);
+  }, [setStuck]);
+
+  const storeRef = useCallback((node: HTMLDivElement | null) => {
+    scrollElRef.current = node;
+  }, []);
+
+  const wheelRef = useEventListener("wheel", handleWheel, { passive: true });
+  const scrollListenerRef = useEventListener("scroll", handleScroll, {
+    passive: true,
+  });
+  const scrollRef = useMergedRef(storeRef, wheelRef, scrollListenerRef);
+
+  const [contentRef, contentRect] = useResizeObserver();
+
+  useEffect(() => {
+    if (isStuckRef.current) {
+      const el = scrollElRef.current;
+      if (el) el.scrollTop = el.scrollHeight;
+    }
+  }, [contentRect.height]);
+
+  return { scrollRef, contentRef, isStuck, scrollToBottom };
+}