@xpert-ai/chatkit-ui 0.0.15 → 0.0.16

package/dist/index.cjs

@@ -89,6 +89,15 @@ function createMessageId() {
   return globalThis.crypto?.randomUUID?.() ?? `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`;
 }
 
+// src/lib/scroll.ts
+var BOTTOM_FOLLOW_THRESHOLD_PX = 48;
+function getDistanceFromBottom(element) {
+  return Math.max(0, element.scrollHeight - element.clientHeight - element.scrollTop);
+}
+function isNearBottom(element, threshold = BOTTOM_FOLLOW_THRESHOLD_PX) {
+  return getDistanceFromBottom(element) <= threshold;
+}
+
 // src/providers/Stream.tsx
 var import_react3 = require("react");
 var import_nuqs = require("nuqs");
@@ -327,11 +336,41 @@ function useParentMessenger({ onSetOptions } = {}) {
   return messenger;
 }
 
+// src/lib/thread-context-usage.ts
+function normalizeContextUsageNumber(value) {
+  if (typeof value === "number" && Number.isFinite(value) && value >= 0) {
+    return Math.floor(value);
+  }
+  if (typeof value === "string") {
+    const parsed = Number.parseFloat(value);
+    if (Number.isFinite(parsed) && parsed >= 0) {
+      return Math.floor(parsed);
+    }
+  }
+  return null;
+}
+function getThreadContextUsage(state, agentKey) {
+  if (!agentKey) return null;
+  return state[agentKey] ?? null;
+}
+function getThreadContextUsageTotalTokens(event) {
+  return normalizeContextUsageNumber(event?.usage?.totalTokens);
+}
+function resolveUsedContextSize(options) {
+  const realtimeUsedTokens = getThreadContextUsageTotalTokens(
+    options.realtimeUsage
+  );
+  if (realtimeUsedTokens != null) {
+    return realtimeUsedTokens;
+  }
+  return normalizeContextUsageNumber(options.fallbackUsedTokens) ?? 0;
+}
+
 // src/providers/Stream.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var import_meta = {};
 var StreamContext = (0, import_react3.createContext)(void 0);
-var defaultApiUrl = import_meta.env.VITE_XPERTAI_API_URL ?? "https://api.mtda.cloud/api/ai";
+var defaultApiUrl = import_meta.env.VITE_XPERTAI_API_URL ?? "https://api.xpertai.cn/api/ai";
 var useStreamContext = () => {
   const context = (0, import_react3.useContext)(StreamContext);
   if (!context) {
@@ -451,6 +490,7 @@ var en_US_default = {
     loadingThread: "Loading thread...",
     stop: "Stop",
     send: "Send message",
+    scrollToBottom: "Scroll to bottom",
     retryUpload: "Retry upload",
     poweredBy: "Powered by Xpert AI",
     errors: {
@@ -509,6 +549,7 @@ var zh_CN_default = {
     loadingThread: "\u6B63\u5728\u52A0\u8F7D\u7EBF\u7A0B...",
     stop: "\u505C\u6B62",
     send: "\u53D1\u9001\u6D88\u606F",
+    scrollToBottom: "\u56DE\u5230\u5E95\u90E8",
     retryUpload: "\u91CD\u65B0\u4E0A\u4F20",
     poweredBy: "\u7531 Xpert AI \u9A71\u52A8",
     errors: {
@@ -1607,6 +1648,12 @@ TooltipIconButton.displayName = "TooltipIconButton";
 // src/components/thread/markdown-text.tsx
 var import_katex_min = require("katex/dist/katex.min.css");
 var import_jsx_runtime17 = require("react/jsx-runtime");
+var getTextContent = (children) => import_react6.Children.toArray(children).map((child) => {
+  if (typeof child === "string" || typeof child === "number") {
+    return String(child);
+  }
+  return "";
+}).join("");
 var useCopyToClipboard = ({
   copiedDuration = 3e3
 } = {}) => {
@@ -1643,7 +1690,7 @@ var CodeHeader = ({ language, code }) => {
   ] });
 };
 var defaultComponents = {
-  h1: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  h1: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "h1",
     {
       className: cn(
@@ -1653,7 +1700,7 @@ var defaultComponents = {
       ...props
     }
   ),
-  h2: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  h2: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "h2",
     {
       className: cn(
@@ -1663,7 +1710,7 @@ var defaultComponents = {
       ...props
     }
   ),
-  h3: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  h3: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "h3",
     {
       className: cn(
@@ -1673,7 +1720,7 @@ var defaultComponents = {
       ...props
     }
   ),
-  h4: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  h4: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "h4",
     {
       className: cn(
@@ -1683,7 +1730,7 @@ var defaultComponents = {
       ...props
     }
   ),
-  h5: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  h5: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "h5",
     {
       className: cn(
@@ -1693,21 +1740,21 @@ var defaultComponents = {
       ...props
     }
   ),
-  h6: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  h6: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "h6",
     {
       className: cn("my-4 font-semibold first:mt-0 last:mb-0", className),
       ...props
     }
   ),
-  p: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  p: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "p",
     {
       className: cn("mt-5 mb-5 leading-7 first:mt-0 last:mb-0", className),
       ...props
     }
   ),
-  a: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  a: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "a",
     {
       className: cn(
@@ -1719,35 +1766,46 @@ var defaultComponents = {
       ...props
     }
   ),
-  blockquote: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  blockquote: ({
+    className,
+    node: _node,
+    ...props
+  }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "blockquote",
     {
-      className: cn("border-l-2 pl-6 italic", className),
+      className: cn(
+        "border-l-4 border-border pl-6 italic text-muted-foreground",
+        className
+      ),
       ...props
     }
   ),
-  ul: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  ul: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "ul",
     {
       className: cn("my-5 list-outside list-disc pl-6 [&>li]:mt-2", className),
       ...props
     }
   ),
-  ol: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  ol: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "ol",
     {
       className: cn("my-5 list-outside list-decimal pl-8 [&>li]:mt-2", className),
       ...props
     }
   ),
-  hr: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  hr: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "hr",
     {
       className: cn("my-5 border-b", className),
       ...props
     }
   ),
-  table: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  table: ({
+    className,
+    node: _node,
+    ...props
+  }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "table",
     {
       className: cn(
@@ -1757,48 +1815,48 @@ var defaultComponents = {
       ...props
     }
   ),
-  th: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  th: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "th",
     {
       className: cn(
-        "bg-muted px-4 py-2 text-left font-bold first:rounded-tl-lg last:rounded-tr-lg [&[align=center]]:text-center [&[align=right]]:text-right",
+        "bg-muted border-border border-y border-l px-4 py-2 text-left font-bold first:rounded-tl-lg last:rounded-tr-lg last:border-r [&[align=center]]:text-center [&[align=right]]:text-right",
         className
       ),
       ...props
     }
   ),
-  td: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  td: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "td",
     {
       className: cn(
-        "border-b border-l px-4 py-2 text-left last:border-r [&[align=center]]:text-center [&[align=right]]:text-right",
+        "border-border border-b border-l px-4 py-2 text-left last:border-r [&[align=center]]:text-center [&[align=right]]:text-right",
         className
       ),
       ...props
     }
   ),
-  tr: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  tr: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "tr",
     {
       className: cn(
-        "m-0 border-b p-0 first:border-t [&:last-child>td:first-child]:rounded-bl-lg [&:last-child>td:last-child]:rounded-br-lg",
+        "m-0 p-0 even:bg-muted/50 [&:last-child>td:first-child]:rounded-bl-lg [&:last-child>td:last-child]:rounded-br-lg",
         className
       ),
       ...props
     }
   ),
-  sup: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  sup: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "sup",
     {
       className: cn("[&>a]:text-xs [&>a]:no-underline", className),
       ...props
     }
   ),
-  pre: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-    "pre",
+  pre: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    "div",
     {
       className: cn(
-        "max-w-4xl overflow-x-auto rounded-lg text-sm bg-black text-white dark:bg-zinc-800 ",
+        "max-w-4xl overflow-x-auto rounded-lg text-sm bg-black text-white dark:bg-zinc-800",
         className
       ),
       ...props
@@ -1807,18 +1865,21 @@ var defaultComponents = {
   code: ({
     className,
     children,
+    node: _node,
     ...props
   }) => {
     const match = /language-(\w+)/.exec(className || "");
+    const code = getTextContent(children);
+    const isBlockCode = code.includes("\n");
     if (match) {
       const language = match[1];
-      const code = String(children).replace(/\n$/, "");
+      const normalizedCode = code.replace(/\n$/, "");
       return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           CodeHeader,
           {
             language,
-            code
+            code: normalizedCode
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
@@ -1826,15 +1887,31 @@ var defaultComponents = {
           {
             language,
             className,
-            children: code
+            children: normalizedCode
           }
         )
       ] });
     }
+    if (isBlockCode) {
+      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        "code",
+        {
+          className: cn(
+            "block min-w-full whitespace-pre px-4 py-4 font-mono text-inherit",
+            className
+          ),
+          ...props,
+          children: code.replace(/\n$/, "")
+        }
+      );
+    }
     return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       "code",
       {
-        className: cn("rounded font-semibold", className),
+        className: cn(
+          "bg-muted rounded px-1.5 py-0.5 font-mono text-[0.9em] font-semibold",
+          className
+        ),
         ...props,
         children
       }
@@ -1954,6 +2031,8 @@ function MemoryBlock({ content }) {
 function ComponentBlock({ content }) {
   const [isExpanded, setIsExpanded] = React13.useState(false);
   const contentRef = React13.useRef(null);
+  const shouldAutoScrollRef = React13.useRef(true);
+  const previousScrollTopRef = React13.useRef(0);
   const data = content.data ?? {};
   const category = data.category ?? "Component";
   const title = data.tool && category === "Tool" ? data.tool : data.title ?? data.type ?? "Component";
@@ -1967,10 +2046,36 @@ function ComponentBlock({ content }) {
     if (status === "running" && output !== null) setIsExpanded(true);
   }, [status, output]);
   React13.useEffect(() => {
-    if (status === "running" && contentRef.current) {
-      contentRef.current.scrollTop = contentRef.current.scrollHeight;
+    const element = contentRef.current;
+    if (!element) return;
+    previousScrollTopRef.current = element.scrollTop;
+    const updateAutoScrollState = () => {
+      const nextScrollTop = element.scrollTop;
+      const isScrollingUp = nextScrollTop < previousScrollTopRef.current - 1;
+      previousScrollTopRef.current = nextScrollTop;
+      if (isScrollingUp) {
+        shouldAutoScrollRef.current = false;
+        return;
+      }
+      shouldAutoScrollRef.current = isNearBottom(element);
+    };
+    updateAutoScrollState();
+    element.addEventListener("scroll", updateAutoScrollState, { passive: true });
+    return () => {
+      element.removeEventListener("scroll", updateAutoScrollState);
+    };
+  }, [isExpanded]);
+  React13.useEffect(() => {
+    if (status !== "running") {
+      shouldAutoScrollRef.current = true;
+      return;
     }
-  }, [status, output]);
+    const element = contentRef.current;
+    if (!element || !shouldAutoScrollRef.current) {
+      return;
+    }
+    element.scrollTop = element.scrollHeight;
+  }, [isExpanded, output, status]);
   const config = status ? statusConfig[status] : null;
   const StatusIcon = config?.icon;
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Card, { children: [
@@ -2391,18 +2496,6 @@ var kNumberFormatter = new Intl.NumberFormat("en-US", {
   minimumFractionDigits: 0,
   maximumFractionDigits: 1
 });
-function normalizeContextSize(value) {
-  if (typeof value === "number" && Number.isFinite(value) && value >= 0) {
-    return Math.floor(value);
-  }
-  if (typeof value === "string") {
-    const parsed = Number.parseInt(value, 10);
-    if (Number.isFinite(parsed) && parsed >= 0) {
-      return parsed;
-    }
-  }
-  return null;
-}
 function normalizeAgentKey(value) {
   if (typeof value !== "string") {
     return null;
@@ -2411,7 +2504,7 @@ function normalizeAgentKey(value) {
   return normalized ? normalized : null;
 }
 function resolveAssistantContextSize(assistant) {
-  return normalizeContextSize(assistant.metadata?.context_size) ?? normalizeContextSize(assistant.config?.configurable?.context_size);
+  return normalizeContextUsageNumber(assistant.metadata?.context_size) ?? normalizeContextUsageNumber(assistant.config?.configurable?.context_size);
 }
 function resolveAssistantAgentKey(assistant) {
   return normalizeAgentKey(assistant.metadata?.agent_key) ?? normalizeAgentKey(assistant.config?.configurable?.agentKey);
@@ -2434,6 +2527,16 @@ function ContextUsageIndicator({
   const [maxContextSize, setMaxContextSize] = React17.useState(null);
   const [usedContextSize, setUsedContextSize] = React17.useState(null);
   const [assistantAgentKey, setAssistantAgentKey] = React17.useState(null);
+  const latestRealtimeUsageRef = React17.useRef({
+    threadId: null,
+    agentKey: null,
+    usedTokens: null
+  });
+  const realtimeUsage = React17.useMemo(
+    () => getThreadContextUsage(stream.contextUsageByAgentKey, assistantAgentKey),
+    [assistantAgentKey, stream.contextUsageByAgentKey]
+  );
+  const realtimeUsedContextSize = getThreadContextUsageTotalTokens(realtimeUsage);
   React17.useEffect(() => {
     if (!stream.client || !stream.assistantId) {
       setMaxContextSize(null);
@@ -2454,6 +2557,17 @@ function ContextUsageIndicator({
       cancelled = true;
     };
   }, [stream.client, stream.assistantId]);
+  React17.useEffect(() => {
+    latestRealtimeUsageRef.current = {
+      threadId: stream.threadId ?? null,
+      agentKey: assistantAgentKey,
+      usedTokens: realtimeUsedContextSize
+    };
+  }, [assistantAgentKey, realtimeUsedContextSize, stream.threadId]);
+  React17.useEffect(() => {
+    if (realtimeUsedContextSize == null) return;
+    setUsedContextSize(realtimeUsedContextSize);
+  }, [realtimeUsedContextSize]);
   React17.useEffect(() => {
     if (!stream.client) {
       setUsedContextSize(null);
@@ -2463,14 +2577,25 @@ function ContextUsageIndicator({
       setUsedContextSize(0);
       return;
     }
+    if (realtimeUsedContextSize != null) return;
     if (stream.isLoading) return;
     let cancelled = false;
+    const requestThreadId = stream.threadId;
+    const requestAgentKey = assistantAgentKey;
     stream.client.threads.getContextUsage(
-      stream.threadId,
-      assistantAgentKey ? { agentKey: assistantAgentKey } : void 0
-    ).then((result) => normalizeContextSize(result?.usage?.context_tokens)).then((result) => {
+      requestThreadId,
+      requestAgentKey ? { agentKey: requestAgentKey } : void 0
+    ).then((result) => normalizeContextUsageNumber(result?.usage?.context_tokens)).then((result) => {
       if (cancelled) return;
-      setUsedContextSize(result ?? 0);
+      const latestRealtimeUsage = latestRealtimeUsageRef.current;
+      if (latestRealtimeUsage.usedTokens != null && latestRealtimeUsage.threadId === requestThreadId && latestRealtimeUsage.agentKey === requestAgentKey) {
+        return;
+      }
+      setUsedContextSize(
+        resolveUsedContextSize({
+          fallbackUsedTokens: result
+        })
+      );
     }).catch((err) => {
       if (cancelled) return;
       console.warn("[Chat] Failed to load thread context usage:", err);
@@ -2478,7 +2603,15 @@ function ContextUsageIndicator({
     return () => {
       cancelled = true;
     };
-  }, [assistantAgentKey, stream.apiKey, stream.apiUrl, stream.client, stream.threadId, stream.isLoading]);
+  }, [
+    assistantAgentKey,
+    realtimeUsedContextSize,
+    stream.apiKey,
+    stream.apiUrl,
+    stream.client,
+    stream.threadId,
+    stream.isLoading
+  ]);
   if (typeof maxContextSize !== "number" || !Number.isFinite(maxContextSize) || maxContextSize <= 0) {
     return null;
   }
@@ -2597,6 +2730,8 @@ function Chat({
   const [draft, setDraft] = React18.useState("");
   const [selectedTool, setSelectedTool] = React18.useState(null);
   const [attachments, setAttachments] = React18.useState([]);
+  const [isAtBottom, setIsAtBottom] = React18.useState(true);
+  const [hasUpdatesBelow, setHasUpdatesBelow] = React18.useState(false);
   const {
     threads,
     deleteThread,
@@ -2605,27 +2740,141 @@ function Chat({
   } = useThreads();
   const viewportRef = React18.useRef(null);
   const fileInputRef = React18.useRef(null);
+  const shouldAutoScrollRef = React18.useRef(true);
+  const forceFollowRef = React18.useRef(false);
+  const previousMessageCountRef = React18.useRef(0);
+  const previousScrollTopRef = React18.useRef(0);
+  const autoScrollFrameRef = React18.useRef(null);
+  const isPointerDownRef = React18.useRef(false);
+  const lastTouchYRef = React18.useRef(null);
   const resolvedTitle = title ?? t("chat.title");
   const resolvedPlaceholder = placeholder ?? t("chat.placeholder");
   const inputPlaceholder = selectedTool?.placeholderOverride ?? composer?.placeholder ?? resolvedPlaceholder;
-  const messages = stream.messages ?? [];
+  const messages = React18.useMemo(() => stream.messages ?? [], [stream.messages]);
   const trimmedDraft = draft.trim();
-  const scrollToBottom = React18.useCallback((smooth = false) => {
-    requestAnimationFrame(() => {
+  const cancelPendingAutoScroll = React18.useCallback(() => {
+    if (autoScrollFrameRef.current !== null) {
+      cancelAnimationFrame(autoScrollFrameRef.current);
+      autoScrollFrameRef.current = null;
+    }
+  }, []);
+  const disableAutoFollow = React18.useCallback(() => {
+    forceFollowRef.current = false;
+    shouldAutoScrollRef.current = false;
+    cancelPendingAutoScroll();
+  }, [cancelPendingAutoScroll]);
+  const enableAutoFollow = React18.useCallback(() => {
+    forceFollowRef.current = true;
+    shouldAutoScrollRef.current = true;
+    setHasUpdatesBelow(false);
+  }, []);
+  const scrollToBottom = React18.useCallback((smooth = false, force = false) => {
+    if (force) {
+      enableAutoFollow();
+    }
+    cancelPendingAutoScroll();
+    autoScrollFrameRef.current = requestAnimationFrame(() => {
+      autoScrollFrameRef.current = null;
       const viewport = viewportRef.current;
       if (viewport) {
+        if (!force && !shouldAutoScrollRef.current) {
+          return;
+        }
         viewport.scrollTo({
           top: viewport.scrollHeight,
           behavior: smooth ? "smooth" : "instant"
         });
       }
     });
-  }, []);
+  }, [cancelPendingAutoScroll, enableAutoFollow]);
+  React18.useEffect(() => {
+    const viewport = viewportRef.current;
+    if (!viewport) return;
+    previousScrollTopRef.current = viewport.scrollTop;
+    const stopPointerTracking = () => {
+      isPointerDownRef.current = false;
+    };
+    const updateAutoScrollState = () => {
+      const nextScrollTop = viewport.scrollTop;
+      const isScrollingUp = nextScrollTop < previousScrollTopRef.current - 1;
+      previousScrollTopRef.current = nextScrollTop;
+      const nearBottom = isNearBottom(viewport);
+      setIsAtBottom(nearBottom);
+      if (nearBottom) {
+        shouldAutoScrollRef.current = true;
+        setHasUpdatesBelow(false);
+        return;
+      }
+      if (forceFollowRef.current) {
+        shouldAutoScrollRef.current = true;
+        return;
+      }
+      if (isPointerDownRef.current && isScrollingUp) {
+        disableAutoFollow();
+        return;
+      }
+      shouldAutoScrollRef.current = false;
+    };
+    const handleWheel = (event) => {
+      if (event.deltaY < 0) {
+        disableAutoFollow();
+      }
+    };
+    const handlePointerDown = () => {
+      isPointerDownRef.current = true;
+    };
+    const handleTouchStart = (event) => {
+      lastTouchYRef.current = event.touches[0]?.clientY ?? null;
+    };
+    const handleTouchMove = (event) => {
+      const nextTouchY = event.touches[0]?.clientY;
+      if (typeof nextTouchY !== "number") return;
+      if (lastTouchYRef.current !== null && nextTouchY > lastTouchYRef.current + 1) {
+        disableAutoFollow();
+      }
+      lastTouchYRef.current = nextTouchY;
+    };
+    const handleTouchEnd = () => {
+      lastTouchYRef.current = null;
+    };
+    updateAutoScrollState();
+    viewport.addEventListener("wheel", handleWheel, { passive: true });
+    viewport.addEventListener("pointerdown", handlePointerDown, { passive: true });
+    viewport.addEventListener("scroll", updateAutoScrollState, { passive: true });
+    viewport.addEventListener("touchstart", handleTouchStart, { passive: true });
+    viewport.addEventListener("touchmove", handleTouchMove, { passive: true });
+    viewport.addEventListener("touchend", handleTouchEnd, { passive: true });
+    window.addEventListener("pointerup", stopPointerTracking, { passive: true });
+    window.addEventListener("pointercancel", stopPointerTracking, { passive: true });
+    return () => {
+      cancelPendingAutoScroll();
+      viewport.removeEventListener("wheel", handleWheel);
+      viewport.removeEventListener("pointerdown", handlePointerDown);
+      viewport.removeEventListener("scroll", updateAutoScrollState);
+      viewport.removeEventListener("touchstart", handleTouchStart);
+      viewport.removeEventListener("touchmove", handleTouchMove);
+      viewport.removeEventListener("touchend", handleTouchEnd);
+      window.removeEventListener("pointerup", stopPointerTracking);
+      window.removeEventListener("pointercancel", stopPointerTracking);
+    };
+  }, [cancelPendingAutoScroll, disableAutoFollow]);
   React18.useEffect(() => {
-    scrollToBottom();
-  }, [messages.length, scrollToBottom]);
+    shouldAutoScrollRef.current = true;
+    forceFollowRef.current = false;
+    previousScrollTopRef.current = 0;
+    setIsAtBottom(true);
+    setHasUpdatesBelow(false);
+  }, [stream.threadId]);
   React18.useEffect(() => {
-    if (stream.isLoading) {
+    const messageCountChanged = messages.length !== previousMessageCountRef.current;
+    previousMessageCountRef.current = messages.length;
+    if (!shouldAutoScrollRef.current) {
+      if (messageCountChanged || stream.isLoading) {
+        setHasUpdatesBelow(true);
+      }
+      return;
+    }
+    if (messageCountChanged || stream.isLoading) {
       scrollToBottom();
     }
   }, [stream.isLoading, messages, scrollToBottom]);
@@ -2683,7 +2932,7 @@ function Chat({
         }
       }
     );
-    scrollToBottom(true);
+    scrollToBottom(true, true);
     if (selectedTool && !selectedTool.pinned) {
       setSelectedTool(null);
     }
@@ -2785,7 +3034,7 @@ function Chat({
         }
       }
     );
-    scrollToBottom(true);
+    scrollToBottom(true, true);
   };
   const loadConversationMessages = React18.useCallback(
     async (recordId) => {
@@ -2865,6 +3114,7 @@ function Chat({
           }
         }
       );
+      scrollToBottom(true, true);
     }
   };
   const acceptMimes = composer?.attachments?.accept ? Object.entries(composer.attachments.accept).map(([mime, exts]) => [mime, ...exts.map((e) => `.${e}`)].join(",")).join(",") : void 0;
@@ -2883,7 +3133,7 @@ function Chat({
     {
       ref: viewportRef,
       className: cn(
-        "flex h-full w-full flex-col flex-1 overflow-y-auto bg-background shadow-sm",
+        "relative flex h-full w-full flex-col flex-1 overflow-y-auto bg-background shadow-sm",
         className
       ),
       children: [
@@ -3020,6 +3270,22 @@ function Chat({
             })()
           ] })
         ] }),
+        !isAtBottom && messages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "sticky bottom-20 z-20 flex justify-center px-4 pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          Button,
+          {
+            type: "button",
+            size: "icon-sm",
+            variant: hasUpdatesBelow ? "default" : "outline",
+            className: cn(
+              "pointer-events-auto rounded-full shadow-md dark:border-white/20 dark:ring-1 dark:ring-white/15 dark:shadow-[0_0_0_1px_rgba(255,255,255,0.06),0_10px_30px_rgba(0,0,0,0.45)]",
+              hasUpdatesBelow && "animate-bounce"
+            ),
+            onClick: () => scrollToBottom(true, true),
+            "aria-label": t("chat.scrollToBottom"),
+            title: t("chat.scrollToBottom"),
+            children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react9.ArrowDown, { size: 16 })
+          }
+        ) }),
         /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "p-2 sticky bottom-0 z-10 bg-background", children: [
           threadErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "mb-3 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive", children: threadErrorMessage }),
           /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(