@xinghunm/ai-chat 1.1.0 → 1.1.2

package/dist/index.d.mts

@@ -394,6 +394,7 @@ interface AiChatLabels {
     sendButton?: string;
     stopButton?: string;
     retryButton?: string;
+    scrollToLatest?: string;
     placeholder?: string;
     modeLabelAsk?: string;
     modeLabelPlan?: string;

package/dist/index.d.ts

@@ -394,6 +394,7 @@ interface AiChatLabels {
     sendButton?: string;
     stopButton?: string;
     retryButton?: string;
+    scrollToLatest?: string;
     placeholder?: string;
     modeLabelAsk?: string;
     modeLabelPlan?: string;

package/dist/index.js

@@ -68,6 +68,7 @@ var DEFAULT_AI_CHAT_LABELS = {
   sendButton: "Send",
   stopButton: "Stop",
   retryButton: "Retry",
+  scrollToLatest: "Jump to latest",
   placeholder: "Ask something...",
   modeLabelAsk: "Ask",
   modeLabelPlan: "Plan",
@@ -2338,11 +2339,11 @@ var TextInput = import_styled4.default.input`
     color: rgba(255, 255, 255, 0.34);
   }
 `;
-var InlineOtherInput = (0, import_styled4.default)(import_compass_ui.InputField)`
+var InlineOtherInput = (0, import_styled4.default)(import_compass_ui.Input)`
   width: 100%;
   margin-top: 0;
 
-  .compass-input-field-wrapper {
+  .compass-input-wrapper {
     min-height: 30px;
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 10px;
@@ -2351,22 +2352,22 @@ var InlineOtherInput = (0, import_styled4.default)(import_compass_ui.InputField)
     padding: 2px 9px;
   }
 
-  .compass-input-field-wrapper:hover {
+  .compass-input-wrapper:hover {
     border-color: rgba(126, 160, 255, 0.28);
   }
 
-  .compass-input-field-wrapper:focus-within {
+  .compass-input-wrapper:focus-within {
     border-color: rgba(126, 160, 255, 0.42);
     box-shadow: 0 0 0 1px rgba(126, 160, 255, 0.14);
   }
 
-  .compass-input-field-input {
+  .compass-input-input {
     color: rgba(255, 255, 255, 0.92);
     font-size: 13px;
     line-height: 1.2;
   }
 
-  .compass-input-field-input::placeholder {
+  .compass-input-input::placeholder {
     color: rgba(255, 255, 255, 0.34);
   }
 `;
@@ -3360,6 +3361,8 @@ var HeroSubtitle = import_styled8.default.p`
 
 // src/components/chat-thread/index.tsx
 var import_jsx_runtime10 = require("@emotion/react/jsx-runtime");
+var CHAT_THREAD_PINNED_THRESHOLD_PX = 32;
+var isThreadPinnedToBottom = (container) => container.scrollHeight - container.clientHeight - container.scrollTop <= CHAT_THREAD_PINNED_THRESHOLD_PX;
 var renderChatMessage = ({
   message,
   mode,
@@ -3433,6 +3436,7 @@ var ChatThreadView = ({
   streamingMessage,
   error,
   retryButtonLabel,
+  scrollToLatestLabel,
   onRetry,
   onConfirmationSubmit,
   onQuestionnaireSubmit,
@@ -3446,9 +3450,15 @@ var ChatThreadView = ({
   const latestTurn = conversationTurns[conversationTurns.length - 1];
   const previousTurns = conversationTurns.slice(0, -1);
   const latestUserMessageId = latestTurn?.userMessage?.id;
-  const latestUserMessageRef = (0, import_react11.useRef)(null);
+  const latestHistoryMessage = historyMessages[historyMessages.length - 1];
+  const latestTurnRef = (0, import_react11.useRef)(null);
   const reservedSpaceFrameRef = (0, import_react11.useRef)(null);
+  const isPinnedRef = (0, import_react11.useRef)(true);
+  const lastHistoryMessageIdRef = (0, import_react11.useRef)(latestHistoryMessage?.id);
+  const lastStreamingMessageIdRef = (0, import_react11.useRef)(streamingMessage?.id);
   const [latestTurnMinHeight, setLatestTurnMinHeight] = (0, import_react11.useState)(0);
+  const [isDetached, setIsDetached] = (0, import_react11.useState)(false);
+  const [pendingNewMessageCount, setPendingNewMessageCount] = (0, import_react11.useState)(0);
   const measureLatestTurnMinHeight = (0, import_react11.useCallback)(() => {
     const container = containerRef.current;
     if (!container)
@@ -3459,26 +3469,86 @@ var ChatThreadView = ({
     const nextMinHeight = Math.max(0, container.clientHeight - paddingTop - paddingBottom);
     setLatestTurnMinHeight((current) => current === nextMinHeight ? current : nextMinHeight);
   }, []);
-  const scrollLatestUserMessageToTop = (0, import_react11.useCallback)(() => {
+  const scrollToBottom = (0, import_react11.useCallback)((force = false) => {
     const container = containerRef.current;
-    const target = latestUserMessageRef.current;
-    if (!container || !target)
-      return;
-    const containerRect = container.getBoundingClientRect();
-    const targetRect = target.getBoundingClientRect();
-    const nextScrollTop = Math.max(
-      0,
-      container.scrollTop + (targetRect.top - containerRect.top) - CHAT_THREAD_SCROLL_TOP_GAP
-    );
+    if (!container)
+      return false;
+    if (!force && !isPinnedRef.current)
+      return false;
+    const nextScrollTop = Math.max(0, container.scrollHeight - container.clientHeight);
+    container.scrollTop = nextScrollTop;
     if (typeof container.scrollTo === "function") {
       container.scrollTo({
         top: nextScrollTop,
         behavior: "auto"
       });
+    }
+    return true;
+  }, []);
+  const markThreadPinned = (0, import_react11.useCallback)(() => {
+    isPinnedRef.current = true;
+    setIsDetached(false);
+    setPendingNewMessageCount(0);
+  }, []);
+  const scrollToBottomAndPin = (0, import_react11.useCallback)(
+    (force = false) => {
+      const didScroll = scrollToBottom(force);
+      if (!didScroll)
+        return;
+      markThreadPinned();
+    },
+    [markThreadPinned, scrollToBottom]
+  );
+  const handleContainerScroll = (0, import_react11.useCallback)(() => {
+    const container = containerRef.current;
+    if (!container)
       return;
+    const nextPinned = isThreadPinnedToBottom(container);
+    isPinnedRef.current = nextPinned;
+    setIsDetached(!nextPinned);
+    if (nextPinned) {
+      setPendingNewMessageCount(0);
     }
-    container.scrollTop = nextScrollTop;
   }, []);
+  (0, import_react11.useLayoutEffect)(() => {
+    const nextHistoryMessageId = latestHistoryMessage?.id;
+    if (lastHistoryMessageIdRef.current === nextHistoryMessageId) {
+      return;
+    }
+    lastHistoryMessageIdRef.current = nextHistoryMessageId;
+    if (!latestHistoryMessage) {
+      return;
+    }
+    if (latestHistoryMessage.role === "user") {
+      window.requestAnimationFrame(() => {
+        if (!scrollToBottom(true)) {
+          return;
+        }
+        markThreadPinned();
+      });
+      return;
+    }
+    if (!isPinnedRef.current && latestHistoryMessage.role === "assistant" && latestHistoryMessage.id !== lastStreamingMessageIdRef.current) {
+      window.requestAnimationFrame(() => {
+        setPendingNewMessageCount((current) => current + 1);
+      });
+    }
+  }, [latestHistoryMessage, markThreadPinned, scrollToBottom]);
+  (0, import_react11.useLayoutEffect)(() => {
+    const nextStreamingMessageId = streamingMessage?.id;
+    if (lastStreamingMessageIdRef.current === nextStreamingMessageId) {
+      return;
+    }
+    lastStreamingMessageIdRef.current = nextStreamingMessageId;
+    if (!streamingMessage || streamingMessage.role !== "assistant") {
+      return;
+    }
+    if (!isPinnedRef.current) {
+      window.requestAnimationFrame(() => {
+        setPendingNewMessageCount((current) => current + 1);
+      });
+    }
+  }, [streamingMessage]);
   (0, import_react11.useLayoutEffect)(() => {
     if (reservedSpaceFrameRef.current !== null) {
       window.cancelAnimationFrame(reservedSpaceFrameRef.current);
@@ -3488,6 +3558,7 @@ var ChatThreadView = ({
       reservedSpaceFrameRef.current = window.requestAnimationFrame(() => {
         reservedSpaceFrameRef.current = null;
         setLatestTurnMinHeight((current) => current === 0 ? current : 0);
+        scrollToBottom();
       });
       return () => {
         if (reservedSpaceFrameRef.current !== null) {
@@ -3499,7 +3570,7 @@ var ChatThreadView = ({
     reservedSpaceFrameRef.current = window.requestAnimationFrame(() => {
       reservedSpaceFrameRef.current = null;
       measureLatestTurnMinHeight();
-      scrollLatestUserMessageToTop();
+      scrollToBottom();
     });
     return () => {
       if (reservedSpaceFrameRef.current !== null) {
@@ -3507,13 +3578,18 @@ var ChatThreadView = ({
         reservedSpaceFrameRef.current = null;
       }
     };
-  }, [latestUserMessageId, measureLatestTurnMinHeight, scrollLatestUserMessageToTop]);
+  }, [latestTurn, latestUserMessageId, error, measureLatestTurnMinHeight, scrollToBottom]);
   (0, import_react11.useLayoutEffect)(() => {
-    if (!latestUserMessageId)
+    if (!latestTurn)
       return;
     const handleResize = () => {
+      if (!latestUserMessageId) {
+        setLatestTurnMinHeight((current) => current === 0 ? current : 0);
+        scrollToBottom();
+        return;
+      }
       measureLatestTurnMinHeight();
-      scrollLatestUserMessageToTop();
+      scrollToBottom();
     };
     const container = containerRef.current;
     let resizeObserver = null;
@@ -3528,57 +3604,101 @@ var ChatThreadView = ({
       resizeObserver?.disconnect();
       window.removeEventListener("resize", handleResize);
     };
-  }, [latestUserMessageId, measureLatestTurnMinHeight, scrollLatestUserMessageToTop]);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Container, { ref: containerRef, "data-testid": "chat-thread", children: [
-    previousTurns.map((turn) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(ConversationTurn, { "data-testid": "chat-thread-turn", children: [
-      turn.userMessage ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MessageSlot, { children: renderChatMessage({
-        message: turn.userMessage,
-        mode: activeSessionMode,
-        onConfirmationSubmit,
-        onQuestionnaireSubmit,
-        renderMessageBlock
-      }) }) : null,
-      turn.responseMessages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MessageSlot, { children: renderChatMessage({
-        message,
-        mode: activeSessionMode,
-        onConfirmationSubmit,
-        onQuestionnaireSubmit,
-        renderMessageBlock
-      }) }, message.id))
-    ] }, turn.id)),
-    latestTurn ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-      ConversationTurn,
+  }, [latestTurn, latestUserMessageId, measureLatestTurnMinHeight, scrollToBottom]);
+  (0, import_react11.useLayoutEffect)(() => {
+    const latestTurnElement = latestTurnRef.current;
+    if (!latestTurnElement || typeof ResizeObserver === "undefined") {
+      return;
+    }
+    const observer = new ResizeObserver(() => {
+      scrollToBottom();
+    });
+    observer.observe(latestTurnElement);
+    return () => {
+      observer.disconnect();
+    };
+  }, [latestTurn, scrollToBottom]);
+  (0, import_react11.useLayoutEffect)(() => {
+    const latestTurnElement = latestTurnRef.current;
+    if (!latestTurnElement || typeof MutationObserver === "undefined") {
+      return;
+    }
+    const observer = new MutationObserver(() => {
+      scrollToBottom();
+    });
+    observer.observe(latestTurnElement, {
+      childList: true,
+      subtree: true,
+      characterData: true
+    });
+    return () => {
+      observer.disconnect();
+    };
+  }, [latestTurn, scrollToBottom]);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(ThreadViewport, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Container, { ref: containerRef, "data-testid": "chat-thread", onScroll: handleContainerScroll, children: [
+      previousTurns.map((turn) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(ConversationTurn, { "data-testid": "chat-thread-turn", children: [
+        turn.userMessage ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MessageSlot, { children: renderChatMessage({
+          message: turn.userMessage,
+          mode: activeSessionMode,
+          onConfirmationSubmit,
+          onQuestionnaireSubmit,
+          renderMessageBlock
+        }) }) : null,
+        turn.responseMessages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MessageSlot, { children: renderChatMessage({
+          message,
+          mode: activeSessionMode,
+          onConfirmationSubmit,
+          onQuestionnaireSubmit,
+          renderMessageBlock
+        }) }, message.id))
+      ] }, turn.id)),
+      latestTurn ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+        ConversationTurn,
+        {
+          ref: latestTurnRef,
+          "data-testid": "chat-thread-latest-turn",
+          style: latestTurnMinHeight > 0 ? { minHeight: `${latestTurnMinHeight}px` } : void 0,
+          children: [
+            latestTurn.userMessage ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              MessageSlot,
+              {
+                "data-testid": "chat-latest-user-anchor",
+                style: { scrollMarginTop: `${CHAT_THREAD_SCROLL_TOP_GAP}px` },
+                children: renderChatMessage({
+                  message: latestTurn.userMessage,
+                  mode: activeSessionMode,
+                  onConfirmationSubmit,
+                  onQuestionnaireSubmit,
+                  renderMessageBlock
+                })
+              }
+            ) : null,
+            latestTurn.responseMessages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MessageSlot, { children: renderChatMessage({
+              message,
+              mode: activeSessionMode,
+              onConfirmationSubmit,
+              onQuestionnaireSubmit,
+              renderMessageBlock
+            }) }, message.id)),
+            error ? renderErrorState({ error, onRetry, retryButtonLabel }) : null
+          ]
+        }
+      ) : null,
+      !latestTurn && error ? renderErrorState({ error, onRetry, retryButtonLabel }) : null
+    ] }),
+    isDetached ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ScrollToLatestOverlay, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      ScrollToLatestButton,
       {
-        "data-testid": "chat-thread-latest-turn",
-        style: latestTurnMinHeight > 0 ? { minHeight: `${latestTurnMinHeight}px` } : void 0,
+        type: "button",
+        "data-testid": "chat-thread-scroll-to-latest",
+        onClick: () => scrollToBottomAndPin(true),
         children: [
-          latestTurn.userMessage ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-            MessageSlot,
-            {
-              ref: latestUserMessageRef,
-              "data-testid": "chat-latest-user-anchor",
-              style: { scrollMarginTop: `${CHAT_THREAD_SCROLL_TOP_GAP}px` },
-              children: renderChatMessage({
-                message: latestTurn.userMessage,
-                mode: activeSessionMode,
-                onConfirmationSubmit,
-                onQuestionnaireSubmit,
-                renderMessageBlock
-              })
-            }
-          ) : null,
-          latestTurn.responseMessages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MessageSlot, { children: renderChatMessage({
-            message,
-            mode: activeSessionMode,
-            onConfirmationSubmit,
-            onQuestionnaireSubmit,
-            renderMessageBlock
-          }) }, message.id)),
-          error ? renderErrorState({ error, onRetry, retryButtonLabel }) : null
+          scrollToLatestLabel,
+          pendingNewMessageCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ScrollToLatestBadge, { "data-testid": "chat-thread-scroll-to-latest-count", children: pendingNewMessageCount }) : null
         ]
       }
-    ) : null,
-    !latestTurn && error ? renderErrorState({ error, onRetry, retryButtonLabel }) : null
+    ) }) : null
   ] });
 };
 var EMPTY_MESSAGES = [];
@@ -3666,13 +3786,21 @@ var ChatThread = () => {
       streamingMessage,
       error,
       retryButtonLabel: labels.retryButton,
+      scrollToLatestLabel: labels.scrollToLatest,
       onRetry: handleRetry,
       onConfirmationSubmit: handleConfirmation,
       onQuestionnaireSubmit: handleQuestionnaireSubmit,
       renderMessageBlock
-    }
+    },
+    activeSessionId ?? "chat-thread-empty"
   );
 };
+var ThreadViewport = import_styled9.default.div`
+  position: relative;
+  display: flex;
+  flex: 1;
+  min-height: 0;
+`;
 var Container = import_styled9.default.div`
   display: flex;
   flex: 1;
@@ -3680,8 +3808,7 @@ var Container = import_styled9.default.div`
   gap: 18px;
   min-height: 0;
   overflow: auto;
-  padding: 24px;
-  margin-bottom: 24px;
+  padding: 24px 24px 88px;
   overscroll-behavior: contain;
 
   &::-webkit-scrollbar {
@@ -3733,6 +3860,48 @@ var RetryButton = import_styled9.default.button`
     background: rgba(255, 255, 255, 0.08);
   }
 `;
+var ScrollToLatestOverlay = import_styled9.default.div`
+  position: absolute;
+  right: 24px;
+  bottom: 24px;
+  left: 24px;
+  display: flex;
+  justify-content: center;
+  pointer-events: none;
+`;
+var ScrollToLatestButton = import_styled9.default.button`
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  border-radius: 999px;
+  background: rgba(17, 18, 21, 0.92);
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 12px;
+  line-height: 1;
+  padding: 10px 14px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
+  cursor: pointer;
+  z-index: 1;
+  pointer-events: auto;
+
+  &:hover {
+    background: rgba(28, 30, 36, 0.96);
+  }
+`;
+var ScrollToLatestBadge = import_styled9.default.span`
+  display: inline-flex;
+  min-width: 18px;
+  height: 18px;
+  align-items: center;
+  justify-content: center;
+  padding: 0 6px;
+  border-radius: 999px;
+  background: rgba(109, 170, 255, 0.2);
+  color: #9ac0ff;
+  font-size: 11px;
+  font-weight: 600;
+`;
 
 // src/components/chat-composer/index.tsx
 var import_react15 = require("react");
@@ -4940,7 +5109,7 @@ var ChatComposerView = ({
         }
       ) : null,
       /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-        Input,
+        Input2,
         {
           ref: inputRef,
           "data-testid": "chat-composer-input",
@@ -5084,7 +5253,7 @@ var InputArea = import_styled14.default.div`
   grid-area: input;
   position: relative;
 `;
-var Input = import_styled14.default.textarea`
+var Input2 = import_styled14.default.textarea`
   --textarea-line-height: ${CHAT_COMPOSER_LINE_HEIGHT_PX}px;
   --textarea-min-rows: ${CHAT_COMPOSER_MIN_ROWS};
   --textarea-max-rows: ${CHAT_COMPOSER_MAX_ROWS};

package/dist/index.mjs

@@ -21,6 +21,7 @@ var DEFAULT_AI_CHAT_LABELS = {
   sendButton: "Send",
   stopButton: "Stop",
   retryButton: "Retry",
+  scrollToLatest: "Jump to latest",
   placeholder: "Ask something...",
   modeLabelAsk: "Ask",
   modeLabelPlan: "Plan",
@@ -1494,7 +1495,7 @@ import {
   useState as useState2
 } from "react";
 import styled4 from "@emotion/styled";
-import { InputField } from "@xinghunm/compass-ui";
+import { Input } from "@xinghunm/compass-ui";
 
 // src/components/chat-thread/components/questionnaire-card-helpers.ts
 var OTHER_OPTION_VALUE = "__other__";
@@ -2295,11 +2296,11 @@ var TextInput = styled4.input`
     color: rgba(255, 255, 255, 0.34);
   }
 `;
-var InlineOtherInput = styled4(InputField)`
+var InlineOtherInput = styled4(Input)`
   width: 100%;
   margin-top: 0;
 
-  .compass-input-field-wrapper {
+  .compass-input-wrapper {
     min-height: 30px;
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 10px;
@@ -2308,22 +2309,22 @@ var InlineOtherInput = styled4(InputField)`
     padding: 2px 9px;
   }
 
-  .compass-input-field-wrapper:hover {
+  .compass-input-wrapper:hover {
     border-color: rgba(126, 160, 255, 0.28);
   }
 
-  .compass-input-field-wrapper:focus-within {
+  .compass-input-wrapper:focus-within {
     border-color: rgba(126, 160, 255, 0.42);
     box-shadow: 0 0 0 1px rgba(126, 160, 255, 0.14);
   }
 
-  .compass-input-field-input {
+  .compass-input-input {
     color: rgba(255, 255, 255, 0.92);
     font-size: 13px;
     line-height: 1.2;
   }
 
-  .compass-input-field-input::placeholder {
+  .compass-input-input::placeholder {
     color: rgba(255, 255, 255, 0.34);
   }
 `;
@@ -3317,6 +3318,8 @@ var HeroSubtitle = styled8.p`
 
 // src/components/chat-thread/index.tsx
 import { jsx as jsx10, jsxs as jsxs7 } from "@emotion/react/jsx-runtime";
+var CHAT_THREAD_PINNED_THRESHOLD_PX = 32;
+var isThreadPinnedToBottom = (container) => container.scrollHeight - container.clientHeight - container.scrollTop <= CHAT_THREAD_PINNED_THRESHOLD_PX;
 var renderChatMessage = ({
   message,
   mode,
@@ -3390,6 +3393,7 @@ var ChatThreadView = ({
   streamingMessage,
   error,
   retryButtonLabel,
+  scrollToLatestLabel,
   onRetry,
   onConfirmationSubmit,
   onQuestionnaireSubmit,
@@ -3403,9 +3407,15 @@ var ChatThreadView = ({
   const latestTurn = conversationTurns[conversationTurns.length - 1];
   const previousTurns = conversationTurns.slice(0, -1);
   const latestUserMessageId = latestTurn?.userMessage?.id;
-  const latestUserMessageRef = useRef5(null);
+  const latestHistoryMessage = historyMessages[historyMessages.length - 1];
+  const latestTurnRef = useRef5(null);
   const reservedSpaceFrameRef = useRef5(null);
+  const isPinnedRef = useRef5(true);
+  const lastHistoryMessageIdRef = useRef5(latestHistoryMessage?.id);
+  const lastStreamingMessageIdRef = useRef5(streamingMessage?.id);
   const [latestTurnMinHeight, setLatestTurnMinHeight] = useState4(0);
+  const [isDetached, setIsDetached] = useState4(false);
+  const [pendingNewMessageCount, setPendingNewMessageCount] = useState4(0);
   const measureLatestTurnMinHeight = useCallback3(() => {
     const container = containerRef.current;
     if (!container)
@@ -3416,26 +3426,86 @@ var ChatThreadView = ({
     const nextMinHeight = Math.max(0, container.clientHeight - paddingTop - paddingBottom);
     setLatestTurnMinHeight((current) => current === nextMinHeight ? current : nextMinHeight);
   }, []);
-  const scrollLatestUserMessageToTop = useCallback3(() => {
+  const scrollToBottom = useCallback3((force = false) => {
     const container = containerRef.current;
-    const target = latestUserMessageRef.current;
-    if (!container || !target)
-      return;
-    const containerRect = container.getBoundingClientRect();
-    const targetRect = target.getBoundingClientRect();
-    const nextScrollTop = Math.max(
-      0,
-      container.scrollTop + (targetRect.top - containerRect.top) - CHAT_THREAD_SCROLL_TOP_GAP
-    );
+    if (!container)
+      return false;
+    if (!force && !isPinnedRef.current)
+      return false;
+    const nextScrollTop = Math.max(0, container.scrollHeight - container.clientHeight);
+    container.scrollTop = nextScrollTop;
     if (typeof container.scrollTo === "function") {
       container.scrollTo({
         top: nextScrollTop,
         behavior: "auto"
       });
+    }
+    return true;
+  }, []);
+  const markThreadPinned = useCallback3(() => {
+    isPinnedRef.current = true;
+    setIsDetached(false);
+    setPendingNewMessageCount(0);
+  }, []);
+  const scrollToBottomAndPin = useCallback3(
+    (force = false) => {
+      const didScroll = scrollToBottom(force);
+      if (!didScroll)
+        return;
+      markThreadPinned();
+    },
+    [markThreadPinned, scrollToBottom]
+  );
+  const handleContainerScroll = useCallback3(() => {
+    const container = containerRef.current;
+    if (!container)
       return;
+    const nextPinned = isThreadPinnedToBottom(container);
+    isPinnedRef.current = nextPinned;
+    setIsDetached(!nextPinned);
+    if (nextPinned) {
+      setPendingNewMessageCount(0);
     }
-    container.scrollTop = nextScrollTop;
   }, []);
+  useLayoutEffect2(() => {
+    const nextHistoryMessageId = latestHistoryMessage?.id;
+    if (lastHistoryMessageIdRef.current === nextHistoryMessageId) {
+      return;
+    }
+    lastHistoryMessageIdRef.current = nextHistoryMessageId;
+    if (!latestHistoryMessage) {
+      return;
+    }
+    if (latestHistoryMessage.role === "user") {
+      window.requestAnimationFrame(() => {
+        if (!scrollToBottom(true)) {
+          return;
+        }
+        markThreadPinned();
+      });
+      return;
+    }
+    if (!isPinnedRef.current && latestHistoryMessage.role === "assistant" && latestHistoryMessage.id !== lastStreamingMessageIdRef.current) {
+      window.requestAnimationFrame(() => {
+        setPendingNewMessageCount((current) => current + 1);
+      });
+    }
+  }, [latestHistoryMessage, markThreadPinned, scrollToBottom]);
+  useLayoutEffect2(() => {
+    const nextStreamingMessageId = streamingMessage?.id;
+    if (lastStreamingMessageIdRef.current === nextStreamingMessageId) {
+      return;
+    }
+    lastStreamingMessageIdRef.current = nextStreamingMessageId;
+    if (!streamingMessage || streamingMessage.role !== "assistant") {
+      return;
+    }
+    if (!isPinnedRef.current) {
+      window.requestAnimationFrame(() => {
+        setPendingNewMessageCount((current) => current + 1);
+      });
+    }
+  }, [streamingMessage]);
   useLayoutEffect2(() => {
     if (reservedSpaceFrameRef.current !== null) {
       window.cancelAnimationFrame(reservedSpaceFrameRef.current);
@@ -3445,6 +3515,7 @@ var ChatThreadView = ({
       reservedSpaceFrameRef.current = window.requestAnimationFrame(() => {
         reservedSpaceFrameRef.current = null;
         setLatestTurnMinHeight((current) => current === 0 ? current : 0);
+        scrollToBottom();
       });
       return () => {
         if (reservedSpaceFrameRef.current !== null) {
@@ -3456,7 +3527,7 @@ var ChatThreadView = ({
     reservedSpaceFrameRef.current = window.requestAnimationFrame(() => {
       reservedSpaceFrameRef.current = null;
       measureLatestTurnMinHeight();
-      scrollLatestUserMessageToTop();
+      scrollToBottom();
     });
     return () => {
       if (reservedSpaceFrameRef.current !== null) {
@@ -3464,13 +3535,18 @@ var ChatThreadView = ({
         reservedSpaceFrameRef.current = null;
       }
     };
-  }, [latestUserMessageId, measureLatestTurnMinHeight, scrollLatestUserMessageToTop]);
+  }, [latestTurn, latestUserMessageId, error, measureLatestTurnMinHeight, scrollToBottom]);
   useLayoutEffect2(() => {
-    if (!latestUserMessageId)
+    if (!latestTurn)
       return;
     const handleResize = () => {
+      if (!latestUserMessageId) {
+        setLatestTurnMinHeight((current) => current === 0 ? current : 0);
+        scrollToBottom();
+        return;
+      }
       measureLatestTurnMinHeight();
-      scrollLatestUserMessageToTop();
+      scrollToBottom();
     };
     const container = containerRef.current;
     let resizeObserver = null;
@@ -3485,57 +3561,101 @@ var ChatThreadView = ({
       resizeObserver?.disconnect();
       window.removeEventListener("resize", handleResize);
     };
-  }, [latestUserMessageId, measureLatestTurnMinHeight, scrollLatestUserMessageToTop]);
-  return /* @__PURE__ */ jsxs7(Container, { ref: containerRef, "data-testid": "chat-thread", children: [
-    previousTurns.map((turn) => /* @__PURE__ */ jsxs7(ConversationTurn, { "data-testid": "chat-thread-turn", children: [
-      turn.userMessage ? /* @__PURE__ */ jsx10(MessageSlot, { children: renderChatMessage({
-        message: turn.userMessage,
-        mode: activeSessionMode,
-        onConfirmationSubmit,
-        onQuestionnaireSubmit,
-        renderMessageBlock
-      }) }) : null,
-      turn.responseMessages.map((message) => /* @__PURE__ */ jsx10(MessageSlot, { children: renderChatMessage({
-        message,
-        mode: activeSessionMode,
-        onConfirmationSubmit,
-        onQuestionnaireSubmit,
-        renderMessageBlock
-      }) }, message.id))
-    ] }, turn.id)),
-    latestTurn ? /* @__PURE__ */ jsxs7(
-      ConversationTurn,
+  }, [latestTurn, latestUserMessageId, measureLatestTurnMinHeight, scrollToBottom]);
+  useLayoutEffect2(() => {
+    const latestTurnElement = latestTurnRef.current;
+    if (!latestTurnElement || typeof ResizeObserver === "undefined") {
+      return;
+    }
+    const observer = new ResizeObserver(() => {
+      scrollToBottom();
+    });
+    observer.observe(latestTurnElement);
+    return () => {
+      observer.disconnect();
+    };
+  }, [latestTurn, scrollToBottom]);
+  useLayoutEffect2(() => {
+    const latestTurnElement = latestTurnRef.current;
+    if (!latestTurnElement || typeof MutationObserver === "undefined") {
+      return;
+    }
+    const observer = new MutationObserver(() => {
+      scrollToBottom();
+    });
+    observer.observe(latestTurnElement, {
+      childList: true,
+      subtree: true,
+      characterData: true
+    });
+    return () => {
+      observer.disconnect();
+    };
+  }, [latestTurn, scrollToBottom]);
+  return /* @__PURE__ */ jsxs7(ThreadViewport, { children: [
+    /* @__PURE__ */ jsxs7(Container, { ref: containerRef, "data-testid": "chat-thread", onScroll: handleContainerScroll, children: [
+      previousTurns.map((turn) => /* @__PURE__ */ jsxs7(ConversationTurn, { "data-testid": "chat-thread-turn", children: [
+        turn.userMessage ? /* @__PURE__ */ jsx10(MessageSlot, { children: renderChatMessage({
+          message: turn.userMessage,
+          mode: activeSessionMode,
+          onConfirmationSubmit,
+          onQuestionnaireSubmit,
+          renderMessageBlock
+        }) }) : null,
+        turn.responseMessages.map((message) => /* @__PURE__ */ jsx10(MessageSlot, { children: renderChatMessage({
+          message,
+          mode: activeSessionMode,
+          onConfirmationSubmit,
+          onQuestionnaireSubmit,
+          renderMessageBlock
+        }) }, message.id))
+      ] }, turn.id)),
+      latestTurn ? /* @__PURE__ */ jsxs7(
+        ConversationTurn,
+        {
+          ref: latestTurnRef,
+          "data-testid": "chat-thread-latest-turn",
+          style: latestTurnMinHeight > 0 ? { minHeight: `${latestTurnMinHeight}px` } : void 0,
+          children: [
+            latestTurn.userMessage ? /* @__PURE__ */ jsx10(
+              MessageSlot,
+              {
+                "data-testid": "chat-latest-user-anchor",
+                style: { scrollMarginTop: `${CHAT_THREAD_SCROLL_TOP_GAP}px` },
+                children: renderChatMessage({
+                  message: latestTurn.userMessage,
+                  mode: activeSessionMode,
+                  onConfirmationSubmit,
+                  onQuestionnaireSubmit,
+                  renderMessageBlock
+                })
+              }
+            ) : null,
+            latestTurn.responseMessages.map((message) => /* @__PURE__ */ jsx10(MessageSlot, { children: renderChatMessage({
+              message,
+              mode: activeSessionMode,
+              onConfirmationSubmit,
+              onQuestionnaireSubmit,
+              renderMessageBlock
+            }) }, message.id)),
+            error ? renderErrorState({ error, onRetry, retryButtonLabel }) : null
+          ]
+        }
+      ) : null,
+      !latestTurn && error ? renderErrorState({ error, onRetry, retryButtonLabel }) : null
+    ] }),
+    isDetached ? /* @__PURE__ */ jsx10(ScrollToLatestOverlay, { children: /* @__PURE__ */ jsxs7(
+      ScrollToLatestButton,
       {
-        "data-testid": "chat-thread-latest-turn",
-        style: latestTurnMinHeight > 0 ? { minHeight: `${latestTurnMinHeight}px` } : void 0,
+        type: "button",
+        "data-testid": "chat-thread-scroll-to-latest",
+        onClick: () => scrollToBottomAndPin(true),
         children: [
-          latestTurn.userMessage ? /* @__PURE__ */ jsx10(
-            MessageSlot,
-            {
-              ref: latestUserMessageRef,
-              "data-testid": "chat-latest-user-anchor",
-              style: { scrollMarginTop: `${CHAT_THREAD_SCROLL_TOP_GAP}px` },
-              children: renderChatMessage({
-                message: latestTurn.userMessage,
-                mode: activeSessionMode,
-                onConfirmationSubmit,
-                onQuestionnaireSubmit,
-                renderMessageBlock
-              })
-            }
-          ) : null,
-          latestTurn.responseMessages.map((message) => /* @__PURE__ */ jsx10(MessageSlot, { children: renderChatMessage({
-            message,
-            mode: activeSessionMode,
-            onConfirmationSubmit,
-            onQuestionnaireSubmit,
-            renderMessageBlock
-          }) }, message.id)),
-          error ? renderErrorState({ error, onRetry, retryButtonLabel }) : null
+          scrollToLatestLabel,
+          pendingNewMessageCount > 0 ? /* @__PURE__ */ jsx10(ScrollToLatestBadge, { "data-testid": "chat-thread-scroll-to-latest-count", children: pendingNewMessageCount }) : null
         ]
       }
-    ) : null,
-    !latestTurn && error ? renderErrorState({ error, onRetry, retryButtonLabel }) : null
+    ) }) : null
   ] });
 };
 var EMPTY_MESSAGES = [];
@@ -3623,13 +3743,21 @@ var ChatThread = () => {
       streamingMessage,
       error,
       retryButtonLabel: labels.retryButton,
+      scrollToLatestLabel: labels.scrollToLatest,
       onRetry: handleRetry,
       onConfirmationSubmit: handleConfirmation,
       onQuestionnaireSubmit: handleQuestionnaireSubmit,
       renderMessageBlock
-    }
+    },
+    activeSessionId ?? "chat-thread-empty"
   );
 };
+var ThreadViewport = styled9.div`
+  position: relative;
+  display: flex;
+  flex: 1;
+  min-height: 0;
+`;
 var Container = styled9.div`
   display: flex;
   flex: 1;
@@ -3637,8 +3765,7 @@ var Container = styled9.div`
   gap: 18px;
   min-height: 0;
   overflow: auto;
-  padding: 24px;
-  margin-bottom: 24px;
+  padding: 24px 24px 88px;
   overscroll-behavior: contain;
 
   &::-webkit-scrollbar {
@@ -3690,6 +3817,48 @@ var RetryButton = styled9.button`
     background: rgba(255, 255, 255, 0.08);
   }
 `;
+var ScrollToLatestOverlay = styled9.div`
+  position: absolute;
+  right: 24px;
+  bottom: 24px;
+  left: 24px;
+  display: flex;
+  justify-content: center;
+  pointer-events: none;
+`;
+var ScrollToLatestButton = styled9.button`
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  border-radius: 999px;
+  background: rgba(17, 18, 21, 0.92);
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 12px;
+  line-height: 1;
+  padding: 10px 14px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
+  cursor: pointer;
+  z-index: 1;
+  pointer-events: auto;
+
+  &:hover {
+    background: rgba(28, 30, 36, 0.96);
+  }
+`;
+var ScrollToLatestBadge = styled9.span`
+  display: inline-flex;
+  min-width: 18px;
+  height: 18px;
+  align-items: center;
+  justify-content: center;
+  padding: 0 6px;
+  border-radius: 999px;
+  background: rgba(109, 170, 255, 0.2);
+  color: #9ac0ff;
+  font-size: 11px;
+  font-weight: 600;
+`;
 
 // src/components/chat-composer/index.tsx
 import { useEffect as useEffect7, useLayoutEffect as useLayoutEffect3, useRef as useRef8, useState as useState8 } from "react";
@@ -4897,7 +5066,7 @@ var ChatComposerView = ({
         }
       ) : null,
       /* @__PURE__ */ jsx15(
-        Input,
+        Input2,
         {
           ref: inputRef,
           "data-testid": "chat-composer-input",
@@ -5041,7 +5210,7 @@ var InputArea = styled14.div`
   grid-area: input;
   position: relative;
 `;
-var Input = styled14.textarea`
+var Input2 = styled14.textarea`
   --textarea-line-height: ${CHAT_COMPOSER_LINE_HEIGHT_PX}px;
   --textarea-min-rows: ${CHAT_COMPOSER_MIN_ROWS};
   --textarea-max-rows: ${CHAT_COMPOSER_MAX_ROWS};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xinghunm/ai-chat",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "AI chat React component library",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -19,7 +19,7 @@
   "peerDependencies": {
     "@emotion/react": ">=11",
     "@emotion/styled": ">=11",
-    "@xinghunm/compass-ui": ">=0.8.0",
+    "@xinghunm/compass-ui": ">=0.9.0",
     "axios": ">=1.0",
     "react": ">=18",
     "react-dom": ">=18",
@@ -53,7 +53,7 @@
     "tsup": "^8.0.0",
     "typescript": "^5.2.2",
     "zustand": "^5.0.0",
-    "@xinghunm/compass-ui": "^0.8.3"
+    "@xinghunm/compass-ui": "^0.9.0"
   },
   "publishConfig": {
     "access": "public"