@copilotz/chat-ui 0.3.3 → 0.3.4

package/dist/index.d.cts

@@ -186,6 +186,8 @@ interface ChatConfig {
         inputHelpText?: string;
         thinking?: string;
         defaultThreadName?: string;
+        loadOlderMessages?: string;
+        loadingOlderMessages?: string;
         showMoreMessage?: string;
         showLessMessage?: string;
     };
@@ -267,7 +269,10 @@ interface ChatV2Props {
     sidebar?: ReactNode;
     isGenerating?: boolean;
     isMessagesLoading?: boolean;
+    isLoadingOlderMessages?: boolean;
+    hasMoreMessagesBefore?: boolean;
     callbacks?: ChatCallbacks;
+    onLoadOlderMessages?: () => void;
     user?: {
         id: string;
         name?: string;

package/dist/index.d.ts

@@ -186,6 +186,8 @@ interface ChatConfig {
         inputHelpText?: string;
         thinking?: string;
         defaultThreadName?: string;
+        loadOlderMessages?: string;
+        loadingOlderMessages?: string;
         showMoreMessage?: string;
         showLessMessage?: string;
     };
@@ -267,7 +269,10 @@ interface ChatV2Props {
     sidebar?: ReactNode;
     isGenerating?: boolean;
     isMessagesLoading?: boolean;
+    isLoadingOlderMessages?: boolean;
+    hasMoreMessagesBefore?: boolean;
     callbacks?: ChatCallbacks;
+    onLoadOlderMessages?: () => void;
     user?: {
         id: string;
         name?: string;

package/dist/index.js

@@ -85,6 +85,8 @@ var defaultChatConfig = {
     inputHelpText: "Press Enter to send, Shift+Enter to add a new line.",
     thinking: "Thinking...",
     defaultThreadName: "Main Thread",
+    loadOlderMessages: "Load older messages",
+    loadingOlderMessages: "Loading older messages...",
     showMoreMessage: "Show more",
     showLessMessage: "Show less"
   },
@@ -5084,7 +5086,10 @@ var ChatUI = ({
   sidebar: _sidebar,
   isGenerating = false,
   isMessagesLoading = false,
+  isLoadingOlderMessages = false,
+  hasMoreMessagesBefore = false,
   callbacks = {},
+  onLoadOlderMessages,
   user,
   assistant,
   suggestions = [],
@@ -5151,6 +5156,7 @@ var ChatUI = ({
     }
   }, [initialInput]);
   const scrollAreaRef = useRef6(null);
+  const prependSnapshotRef = useRef6(null);
   const stateRef = useRef6(state);
   const inputValueRef = useRef6(inputValue);
   const attachmentsRef = useRef6(attachments);
@@ -5208,6 +5214,10 @@ var ChatUI = ({
       prevMessageCountRef.current = 0;
       return;
     }
+    if (prependSnapshotRef.current) {
+      prevMessageCountRef.current = messages.length;
+      return;
+    }
     const wasEmpty = prevMessageCountRef.current === 0;
     prevMessageCountRef.current = messages.length;
     if (wasEmpty) {
@@ -5232,6 +5242,46 @@ var ChatUI = ({
   useEffect10(() => {
     virtualizer.measure();
   }, [expandedMessageIds, virtualizer]);
+  useEffect10(() => {
+    prependSnapshotRef.current = null;
+  }, [currentThreadId]);
+  useEffect10(() => {
+    const snapshot = prependSnapshotRef.current;
+    if (!snapshot) return;
+    if (messages.length <= snapshot.messageCount) {
+      if (!isLoadingOlderMessages) {
+        prependSnapshotRef.current = null;
+      }
+      return;
+    }
+    if ((messages[0]?.id ?? null) === snapshot.firstMessageId) {
+      if (!isLoadingOlderMessages) {
+        prependSnapshotRef.current = null;
+      }
+      return;
+    }
+    requestAnimationFrame(() => {
+      virtualizer.measure();
+      requestAnimationFrame(() => {
+        const viewport = scrollAreaRef.current;
+        if (!viewport) return;
+        const heightDelta = viewport.scrollHeight - snapshot.scrollHeight;
+        viewport.scrollTop = snapshot.scrollTop + heightDelta;
+        prependSnapshotRef.current = null;
+      });
+    });
+  }, [messages, isLoadingOlderMessages, virtualizer]);
+  const requestOlderMessages = useCallback4(() => {
+    if (!onLoadOlderMessages || !hasMoreMessagesBefore || isLoadingOlderMessages) return;
+    const viewport = scrollAreaRef.current;
+    prependSnapshotRef.current = viewport ? {
+      scrollHeight: viewport.scrollHeight,
+      scrollTop: viewport.scrollTop,
+      firstMessageId: messages[0]?.id ?? null,
+      messageCount: messages.length
+    } : null;
+    onLoadOlderMessages();
+  }, [hasMoreMessagesBefore, isLoadingOlderMessages, messages, onLoadOlderMessages]);
   useEffect10(() => {
     const validMessageIds = new Set(messages.map((message) => message.id));
     setExpandedMessageIds((prev) => {
@@ -5250,11 +5300,15 @@ var ChatUI = ({
   const handleScroll = useCallback4((e) => {
     const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
     const isAtBottom = scrollHeight - scrollTop - clientHeight < 50;
+    const isNearTop = scrollTop < 120;
+    if (isNearTop && hasMoreMessagesBefore && !isLoadingOlderMessages) {
+      requestOlderMessages();
+    }
     setState((prev) => {
       if (prev.isAtBottom === isAtBottom) return prev;
       return { ...prev, isAtBottom };
     });
-  }, []);
+  }, [hasMoreMessagesBefore, isLoadingOlderMessages, requestOlderMessages]);
   const handleSendMessage = useCallback4((content, messageAttachments = []) => {
     if (!content.trim() && messageAttachments.length === 0) return;
     callbacks.onSendMessage?.(content, messageAttachments, createStateCallback());
@@ -5510,48 +5564,59 @@ var ChatUI = ({
               viewportClassName: "p-4 overscroll-contain",
               onScrollCapture: handleScroll,
               style: { contain: "strict" },
-              children: /* @__PURE__ */ jsx26("div", { className: "max-w-4xl mx-auto pb-4", children: isMessagesLoading ? renderMessageLoadingSkeleton() : messages.length === 0 ? renderSuggestions() : /* @__PURE__ */ jsx26(
-                "div",
-                {
-                  style: {
-                    height: `${virtualizer.getTotalSize()}px`,
-                    width: "100%",
-                    position: "relative"
-                  },
-                  children: virtualizer.getVirtualItems().map((virtualRow) => {
-                    const message = messages[virtualRow.index];
-                    const prevMessage = virtualRow.index > 0 ? messages[virtualRow.index - 1] : null;
-                    const isGrouped = prevMessage !== null && prevMessage.role === message.role && getMessageSpeakerKey(prevMessage) === getMessageSpeakerKey(message);
-                    return /* @__PURE__ */ jsx26(
-                      "div",
-                      {
-                        "data-index": virtualRow.index,
-                        ref: virtualizer.measureElement,
-                        style: {
-                          position: "absolute",
-                          top: 0,
-                          left: 0,
-                          width: "100%",
-                          transform: `translateY(${virtualRow.start}px)`
+              children: /* @__PURE__ */ jsxs16("div", { className: "max-w-4xl mx-auto pb-4", children: [
+                messages.length > 0 && /* @__PURE__ */ jsx26("div", { className: "flex justify-center py-2", children: isLoadingOlderMessages ? /* @__PURE__ */ jsx26("span", { className: "text-xs text-muted-foreground", children: config.labels.loadingOlderMessages }) : hasMoreMessagesBefore ? /* @__PURE__ */ jsx26(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: requestOlderMessages,
+                    className: "text-xs text-muted-foreground transition-colors hover:text-foreground",
+                    children: config.labels.loadOlderMessages
+                  }
+                ) : null }),
+                isMessagesLoading ? renderMessageLoadingSkeleton() : messages.length === 0 ? renderSuggestions() : /* @__PURE__ */ jsx26(
+                  "div",
+                  {
+                    style: {
+                      height: `${virtualizer.getTotalSize()}px`,
+                      width: "100%",
+                      position: "relative"
+                    },
+                    children: virtualizer.getVirtualItems().map((virtualRow) => {
+                      const message = messages[virtualRow.index];
+                      const prevMessage = virtualRow.index > 0 ? messages[virtualRow.index - 1] : null;
+                      const isGrouped = prevMessage !== null && prevMessage.role === message.role && getMessageSpeakerKey(prevMessage) === getMessageSpeakerKey(message);
+                      return /* @__PURE__ */ jsx26(
+                        "div",
+                        {
+                          "data-index": virtualRow.index,
+                          ref: virtualizer.measureElement,
+                          style: {
+                            position: "absolute",
+                            top: 0,
+                            left: 0,
+                            width: "100%",
+                            transform: `translateY(${virtualRow.start}px)`
+                          },
+                          children: /* @__PURE__ */ jsxs16("div", { className: virtualRow.index === 0 ? "" : isGrouped ? "pt-2" : "pt-4", children: [
+                            /* @__PURE__ */ jsx26(
+                              Message,
+                              {
+                                message,
+                                ...messageProps,
+                                isGrouped,
+                                isExpanded: Boolean(expandedMessageIds[message.id])
+                              }
+                            ),
+                            message.role === "assistant" && renderInlineSuggestions(message.id)
+                          ] })
                         },
-                        children: /* @__PURE__ */ jsxs16("div", { className: virtualRow.index === 0 ? "" : isGrouped ? "pt-2" : "pt-4", children: [
-                          /* @__PURE__ */ jsx26(
-                            Message,
-                            {
-                              message,
-                              ...messageProps,
-                              isGrouped,
-                              isExpanded: Boolean(expandedMessageIds[message.id])
-                            }
-                          ),
-                          message.role === "assistant" && renderInlineSuggestions(message.id)
-                        ] })
-                      },
-                      message.id
-                    );
-                  })
-                }
-              ) })
+                        message.id
+                      );
+                    })
+                  }
+                )
+              ] })
             }
           ),
           /* @__PURE__ */ jsxs16("div", { className: "bg-background pb-[env(safe-area-inset-bottom)]", children: [