@ash-cloud/ash-ui 0.2.2 → 0.2.4

package/dist/index.cjs

@@ -423,11 +423,17 @@ function Conversation({
   children,
   className,
   autoScroll: initialAutoScroll = true,
-  scrollThreshold = 100
+  scrollThreshold = 100,
+  onLoadMore,
+  hasMore = false,
+  isLoadingMore = false,
+  loadMoreThreshold = 100
 }) {
   const containerRef = react.useRef(null);
   const [isScrolledUp, setIsScrolledUp] = react.useState(false);
   const [autoScroll, setAutoScroll] = react.useState(initialAutoScroll);
+  const prevScrollHeightRef = react.useRef(0);
+  const wasLoadingMoreRef = react.useRef(false);
   const scrollToBottom = react.useCallback((behavior = "smooth") => {
     if (containerRef.current) {
       containerRef.current.scrollTo({
@@ -445,7 +451,26 @@ function Conversation({
     if (isAtBottom && !autoScroll) {
       setAutoScroll(true);
     }
-  }, [scrollThreshold, autoScroll]);
+    if (scrollTop < loadMoreThreshold && hasMore && !isLoadingMore && onLoadMore) {
+      onLoadMore();
+    }
+  }, [scrollThreshold, autoScroll, loadMoreThreshold, hasMore, isLoadingMore, onLoadMore]);
+  react.useEffect(() => {
+    if (isLoadingMore && !wasLoadingMoreRef.current && containerRef.current) {
+      prevScrollHeightRef.current = containerRef.current.scrollHeight;
+    }
+    wasLoadingMoreRef.current = isLoadingMore;
+  }, [isLoadingMore]);
+  react.useLayoutEffect(() => {
+    if (!isLoadingMore && prevScrollHeightRef.current > 0 && containerRef.current) {
+      const newScrollHeight = containerRef.current.scrollHeight;
+      const scrollDelta = newScrollHeight - prevScrollHeightRef.current;
+      if (scrollDelta > 0) {
+        containerRef.current.scrollTop += scrollDelta;
+      }
+      prevScrollHeightRef.current = 0;
+    }
+  }, [isLoadingMore]);
   react.useEffect(() => {
     if (autoScroll && !isScrolledUp) {
       scrollToBottom("instant");
@@ -456,7 +481,9 @@ function Conversation({
     scrollToBottom,
     isScrolledUp,
     autoScroll,
-    setAutoScroll
+    setAutoScroll,
+    hasMore,
+    isLoadingMore
   };
   return /* @__PURE__ */ jsxRuntime.jsx(ConversationContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -554,6 +581,50 @@ function ConversationScrollButton({
     }
   );
 }
+function ConversationLoadMore({
+  className
+}) {
+  const { hasMore, isLoadingMore } = useConversation();
+  if (!hasMore && !isLoadingMore) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "ash-conversation-load-more flex items-center justify-center py-3",
+        className
+      ),
+      children: isLoadingMore && /* @__PURE__ */ jsxRuntime.jsxs(
+        "svg",
+        {
+          className: "w-5 h-5 animate-spin text-[var(--ash-text-muted,rgba(255,255,255,0.5))]",
+          fill: "none",
+          viewBox: "0 0 24 24",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "circle",
+              {
+                className: "opacity-25",
+                cx: "12",
+                cy: "12",
+                r: "10",
+                stroke: "currentColor",
+                strokeWidth: "4"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                className: "opacity-75",
+                fill: "currentColor",
+                d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
 var ReactMarkdown = react.lazy(() => import('react-markdown'));
 function LazyMarkdown({ children, fallback, components, className }) {
   const [mounted, setMounted] = react.useState(false);
@@ -4335,6 +4406,7 @@ exports.CodeIcon = CodeIcon;
 exports.Conversation = Conversation;
 exports.ConversationContent = ConversationContent;
 exports.ConversationEmptyState = ConversationEmptyState;
+exports.ConversationLoadMore = ConversationLoadMore;
 exports.ConversationScrollButton = ConversationScrollButton;
 exports.CopyIcon = CopyIcon;
 exports.DEFAULT_STYLE_CONFIG = DEFAULT_STYLE_CONFIG;