vdb-ai-chat 1.0.14 → 1.0.15

package/src/components/ChatWidget.tsx

@@ -17,6 +17,7 @@ import {
   Keyboard,
   DeviceEventEmitter,
   Platform,
+  ActivityIndicator,
 } from "react-native";
 import { ChatInput } from "./ChatInput";
 import { MessageBubble } from "./MessageBubble";
@@ -26,6 +27,7 @@ import { mergeTheme } from "../theme";
 import {
   ChatApiParams,
   fetchInitialMessages,
+  fetchOlderMessages,
   getProducts,
   handleFeedbackActionApi,
   normaliseMessages,
@@ -75,8 +77,6 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
     );
     const [typingMessageId, setTypingMessageId] = useState<string | null>(null);
     const [typingFullText, setTypingFullText] = useState<string>("");
-    const [scrollY, setScrollY] = useState(0);
-    const [autoScroll, setAutoScroll] = useState(true);
     const [productsByMsg, setProductsByMsg] = useState<Record<string, any>>({});
     const [reloadLoadingIds, setReloadLoadingIds] = useState<Set<string>>(
       new Set()
@@ -85,8 +85,21 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
       priceModeProp || null
     );
     const [userToken, setUserToken] = useState<string>(userTokenProp || "");
+    // Pagination state
+    const [loadingOlder, setLoadingOlder] = useState(false);
+    const [hasMoreMessages, setHasMoreMessages] = useState(true);
+    const [nextCursor, setNextCursor] = useState<string | number | undefined>(
+      undefined
+    );
+    const [currentPage, setCurrentPage] = useState(1);
     const scrollRef = useRef<ScrollView | null>(null);
     const inputRef = useRef<TextInput | null>(null);
+    // Scroll management refs - using refs instead of state to avoid re-renders
+    const scrollYRef = useRef(0);
+    const contentHeightRef = useRef(0);
+    const isUserScrollingRef = useRef(false);
+    const isPaginatingRef = useRef(false);
+    const initialScrollDoneRef = useRef(false);
     const themeProps = useMemo(
       () => mergeTheme(themeOverrides),
       [themeOverrides]
@@ -123,17 +136,24 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
         if (activeProductType) {
           await Storage.setJSON("external_context", activeProductType);
         }
-      }
+      };
       setActiveProduct();
     }, [activeProductType]);
 
     const onViewAll = (item: any) => {
       let searchPayload = item?.search_payload;
-      if(searchPayload?.cut_from || searchPayload?.cut_to || searchPayload?.polish_from || searchPayload?.polish_to || searchPayload?.symmetry_from || searchPayload?.symmetry_to) {
+      if (
+        searchPayload?.cut_from ||
+        searchPayload?.cut_to ||
+        searchPayload?.polish_from ||
+        searchPayload?.polish_to ||
+        searchPayload?.symmetry_from ||
+        searchPayload?.symmetry_to
+      ) {
         searchPayload.cutGrades = [];
         searchPayload.polishes = [];
         searchPayload.symmetries = [];
-        if(!searchPayload?.shapes) {
+        if (!searchPayload?.shapes) {
           searchPayload.shapes = [];
         }
       }
@@ -155,14 +175,19 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
       if (searchPayload?.symmetry_to) {
         searchPayload.symmetries.push(searchPayload?.symmetry_to);
       }
-      if(searchPayload?.three_x) {
+      if (searchPayload?.three_x) {
         delete searchPayload.three_x;
       }
 
       const stringifiedSearchPayload = JSON.stringify(searchPayload);
       const payload = item?.search_payload;
       if (!payload) return;
-      const isLabgrown = (typeof payload.lab_grown === "string" ? payload.lab_grown === "true" : typeof payload.lab_grown === "boolean" ? payload.lab_grown : false);
+      const isLabgrown =
+        typeof payload.lab_grown === "string"
+          ? payload.lab_grown === "true"
+          : typeof payload.lab_grown === "boolean"
+          ? payload.lab_grown
+          : false;
       const domain = apiUrl.split("v3");
       const deepLinkUrl = `${domain[0]}webapp/${
         isLabgrown ? "lab-grown-diamonds" : "natural-diamonds"
@@ -258,11 +283,23 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
           );
           if (!cancelled) {
             const normalised = normaliseMessages(initial).reverse();
+            // Capture pagination info from initial response
+            if (initial?.has_more !== undefined) {
+              setHasMoreMessages(initial.has_more);
+            }
+            if (initial?.next_cursor !== undefined) {
+              setNextCursor(initial.next_cursor);
+            }
+
+            // Reset scroll tracking for fresh load
+            initialScrollDoneRef.current = false;
+            isUserScrollingRef.current = false;
+
             if (normalised.length === 0) {
               const initialAssistant: ChatMessage = {
                 id: "",
                 role: "assistant",
-                text: "Describe the diamond you’re looking for — for example, “2ct F VS2 under $10,000” or “1–2ct D–F VS pear” — and I’ll take it from there.",
+                text: 'Describe the diamond you\'re looking for — for example, "2ct F VS2 under $10,000" or "1–2ct D–F VS pear" — and I\'ll take it from there.',
                 createdAt: Date.now(),
                 isLoading: false,
                 suggestions: [],
@@ -270,15 +307,11 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
                 reaction: "0",
               };
               setMessages([initialAssistant]);
-              setTimeout(() => {
-                scrollRef.current?.scrollToEnd({ animated: false });
-              }, 0);
+              setHasMoreMessages(false);
             } else {
               setMessages(normalised);
-              setTimeout(() => {
-                scrollRef.current?.scrollToEnd({ animated: false });
-              }, 0);
             }
+            // onContentSizeChange will handle scrollToEnd
           }
         } catch (error) {
           console.error("Failed to fetch initial messages", error);
@@ -298,14 +331,16 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
       async (rawText: string) => {
         const trimmed = rawText.trim();
         if (!trimmed || loading) return;
-        const external_context = await Storage.getJSON<string>("external_context");
+        const external_context = await Storage.getJSON<string>(
+          "external_context"
+        );
 
         const userMessage: ChatMessage = {
           id: `user-${Date.now()}`,
           role: "user",
           text: trimmed,
           createdAt: Date.now(),
-          external_context: external_context || null
+          external_context: external_context || null,
         };
 
         const loadingId = `bot-loading-${Date.now()}`;
@@ -496,6 +531,71 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
       }
     }, []);
 
+    // Load older messages when user scrolls to top
+    const loadOlderMessages = useCallback(async () => {
+      if (loadingOlder || !hasMoreMessages || !hasAuth) return;
+
+      // Mark that we're paginating - this prevents auto-scroll to bottom
+      isPaginatingRef.current = true;
+      const prevHeight = contentHeightRef.current;
+      setLoadingOlder(true);
+
+      try {
+        const result = await fetchOlderMessages(
+          apiUrl,
+          priceMode,
+          nextCursor,
+          currentPage + 1
+        );
+
+        const olderMessages = normaliseMessages(result);
+        if (olderMessages.length > 0) {
+          // Prepend older messages to the beginning
+          setMessages((prev) => {
+            // Filter out duplicates by id
+            const existingIds = new Set(prev.map((m) => m.id));
+            const newMessages = olderMessages.filter(
+              (m) => !existingIds.has(m.id)
+            );
+            return [...newMessages, ...prev];
+          });
+          setCurrentPage((prev) => prev + 1);
+
+          // After state update, adjust scroll to maintain position
+          // Use requestAnimationFrame to wait for layout
+          requestAnimationFrame(() => {
+            const newHeight = contentHeightRef.current;
+            const heightDiff = newHeight - prevHeight;
+            if (heightDiff > 0 && scrollRef.current) {
+              scrollRef.current.scrollTo({
+                y: scrollYRef.current + heightDiff,
+                animated: false,
+              });
+            }
+            isPaginatingRef.current = false;
+          });
+        } else {
+          isPaginatingRef.current = false;
+        }
+
+        setHasMoreMessages(result.has_more ?? olderMessages.length > 0);
+        setNextCursor(result.next_cursor);
+      } catch (e) {
+        console.error("Failed to load older messages", e);
+        isPaginatingRef.current = false;
+      } finally {
+        setLoadingOlder(false);
+      }
+    }, [
+      loadingOlder,
+      hasMoreMessages,
+      hasAuth,
+      apiUrl,
+      priceMode,
+      nextCursor,
+      currentPage,
+    ]);
+
     useEffect(() => {
       const scrollToBottom = () => {
         setTimeout(() => {
@@ -505,8 +605,10 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
         }, 100);
       };
 
-      const showEvent = Platform.OS === "ios" ? "keyboardWillShow" : "keyboardDidShow";
-      const hideEvent = Platform.OS === "ios" ? "keyboardWillHide" : "keyboardDidHide";
+      const showEvent =
+        Platform.OS === "ios" ? "keyboardWillShow" : "keyboardDidShow";
+      const hideEvent =
+        Platform.OS === "ios" ? "keyboardWillHide" : "keyboardDidHide";
 
       const subShow = Keyboard.addListener(showEvent, scrollToBottom);
       const subHide = Keyboard.addListener(hideEvent, scrollToBottom);
@@ -574,6 +676,14 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
         setLoadingMessageId(null);
         setTypingMessageId(null);
         setTypingFullText("");
+        // Reset pagination state
+        setHasMoreMessages(true);
+        setNextCursor(undefined);
+        setCurrentPage(1);
+        // Reset scroll tracking
+        initialScrollDoneRef.current = false;
+        isUserScrollingRef.current = false;
+        isPaginatingRef.current = false;
 
         const fresh = await fetchInitialMessages(apiUrl, undefined, priceMode);
         const normalised = normaliseMessages(fresh).reverse();
@@ -581,7 +691,7 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
           const initialAssistant: ChatMessage = {
             id: "",
             role: "assistant",
-            text: "Describe the diamond you’re looking for — for example, “2ct F VS2 under $10,000” or “1–2ct D–F VS pear” — and I’ll take it from there.",
+            text: 'Describe the diamond you\'re looking for — for example, "2ct F VS2 under $10,000" or "1–2ct D–F VS pear" — and I\'ll take it from there.',
             createdAt: Date.now(),
             isLoading: false,
             suggestions: [],
@@ -592,9 +702,7 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
         } else {
           setMessages(normalised);
         }
-        setTimeout(() => {
-          scrollRef.current?.scrollToEnd({ animated: false });
-        }, 500);
+        // onContentSizeChange will handle scrollToEnd
         onClearChat?.();
       } catch (err) {
         console.error("Failed to clear chat", err);
@@ -698,12 +806,22 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
               onScroll={(e) => {
                 const { contentOffset, contentSize, layoutMeasurement } =
                   e.nativeEvent;
-                setScrollY(contentOffset.y);
+                scrollYRef.current = contentOffset.y;
                 const distanceFromBottom =
                   contentSize.height -
                   (layoutMeasurement.height + contentOffset.y);
-                // Enable auto-scroll when user is near the bottom; disable when scrolled up
-                setAutoScroll(distanceFromBottom < 48);
+                // Track if user has scrolled away from bottom
+                isUserScrollingRef.current = distanceFromBottom > 100;
+
+                // Load older messages when scrolled near the top (within 50px)
+                if (
+                  contentOffset.y < 50 &&
+                  hasMoreMessages &&
+                  !loadingOlder &&
+                  !isPaginatingRef.current
+                ) {
+                  loadOlderMessages();
+                }
               }}
               scrollEventThrottle={16}
               style={
@@ -726,12 +844,38 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
                   ? { maxWidth: 608, alignSelf: "center", width: "100%" }
                   : {}),
               }}
-              onContentSizeChange={() => {
-                if (autoScroll) {
+              onContentSizeChange={(_width, height) => {
+                contentHeightRef.current = height;
+
+                // Skip auto-scroll during pagination - scroll is handled in loadOlderMessages
+                if (isPaginatingRef.current || loadingOlder) {
+                  return;
+                }
+
+                // Only auto-scroll to bottom if:
+                // 1. Initial scroll hasn't been done yet, OR
+                // 2. User is near the bottom (not scrolled up to view history)
+                if (!initialScrollDoneRef.current) {
+                  scrollRef.current?.scrollToEnd({ animated: false });
+                  initialScrollDoneRef.current = true;
+                } else if (!isUserScrollingRef.current) {
+                  // User is near bottom, auto-scroll for new messages
                   scrollRef.current?.scrollToEnd({ animated: false });
                 }
               }}
             >
+              {/* Loading indicator for pagination */}
+              {loadingOlder && (
+                <LoadingOlderContainer>
+                  <ActivityIndicator
+                    size="small"
+                    color={theme["core-06"] || "#4F4E57"}
+                  />
+                  <LoadingOlderText theme={theme}>
+                    Loading older messages...
+                  </LoadingOlderText>
+                </LoadingOlderContainer>
+              )}
               {messages?.[0]?.createdAt && (
                 <EmptyContainer theme={theme}>
                   <EmptyText theme={theme}>
@@ -787,15 +931,7 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
                               const diamonds = result?.response?.body?.diamonds;
                               const hasAny =
                                 Array.isArray(diamonds) && diamonds.length > 0;
-                              if (hasAny) {
-                                try {
-                                  scrollRef.current?.scrollTo({
-                                    x: 0,
-                                    y: scrollY + 120,
-                                    animated: true,
-                                  });
-                                } catch (_) {}
-                              } else {
+                              if (!hasAny) {
                                 setMessages((prev) =>
                                   prev.map((msg) =>
                                     msg.id === id
@@ -809,6 +945,7 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
                                   )
                                 );
                               }
+                              // Let onContentSizeChange handle scrolling naturally
                             }}
                           />
                         )}
@@ -908,6 +1045,20 @@ const LineView = styled.View<{ theme: DefaultTheme }>`
   border-top-width: 1;
 `;
 
+const LoadingOlderContainer = styled.View`
+  padding: 12px;
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
+  gap: 8px;
+`;
+
+const LoadingOlderText = styled.Text<{ theme: DefaultTheme }>`
+  font-size: 12px;
+  color: ${({ theme }: { theme: DefaultTheme }) =>
+    theme["core-06"] || "#4F4E57"};
+`;
+
 const styles = StyleSheet.create({
   listContent: {
     paddingVertical: 8,