vdb-ai-chat 1.0.13 → 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,
@@ -63,6 +65,7 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
       onViewAllPress,
       onItemPress: onItemPressProp,
       isBetaMode: isBetaModeProp,
+      activeProductType,
     },
     ref
   ) => {
@@ -74,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()
@@ -84,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]
@@ -117,13 +131,29 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
       loadAuthData();
     }, [userTokenProp]);
 
+    useEffect(() => {
+      const setActiveProduct = async () => {
+        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 = [];
         }
       }
@@ -145,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"
@@ -248,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: "Search our diamond inventory instantly. Try asking for a 'Natural Diamonds 1.5ct Round under $2,000 VS' or 'Lab Grown Pear 2ct VS2+ $10000'",
+                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: [],
@@ -260,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);
@@ -288,12 +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 userMessage: ChatMessage = {
           id: `user-${Date.now()}`,
           role: "user",
           text: trimmed,
           createdAt: Date.now(),
+          external_context: external_context || null,
         };
 
         const loadingId = `bot-loading-${Date.now()}`;
@@ -484,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(() => {
@@ -493,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);
@@ -562,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();
@@ -569,7 +691,7 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
           const initialAssistant: ChatMessage = {
             id: "",
             role: "assistant",
-            text: "Search our diamond inventory instantly. Try asking for a 'Natural Diamonds 1.5ct Round under $2,000 VS' or 'Lab Grown Pear 2ct VS2+ $10000'",
+            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: [],
@@ -580,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);
@@ -686,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={
@@ -714,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}>
@@ -775,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
@@ -797,6 +945,7 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
                                   )
                                 );
                               }
+                              // Let onContentSizeChange handle scrolling naturally
                             }}
                           />
                         )}
@@ -896,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,

package/src/components/ProductsListView.tsx

@@ -9,7 +9,7 @@ import {
   Image,
   Pressable,
 } from "react-native";
-import { getUserCurrencySymbol } from "./utils";
+import { getUserCurrencySymbol, formatPriceValue, roundUpPrices } from "./utils";
 import { useTheme } from "styled-components/native";
 import { DefaultTheme } from "styled-components/native";
 import styled from "styled-components/native";
@@ -128,7 +128,8 @@ const renderToken = (
   token: TokenConfig,
   item: any,
   userCurrency: string | null,
-  index: number
+  index: number,
+  shouldRound: boolean = false
 ): React.ReactNode => {
   const TextView = token.style === "secondary" ? TextStyleTwo : TextStyleOne;
   const PrefixTextView = token.prefixStyle === "secondary" ? TextStyleTwo : TextStyleOne;
@@ -176,11 +177,14 @@ const renderToken = (
 
     case "priceField": {
       const value = item[token.field!];
+      const formattedPrice = formatPriceValue(token.field!, value, shouldRound);
+      console.log("formattedPrice", formattedPrice);
+      
       return (
         <View key={index} style={styles.rowCenter}>
           {token.prefix && <TextView theme={theme}>{token.prefix}</TextView>}
           {value && <TextView theme={theme}>{currency}</TextView>}
-          <TextView theme={theme}>{value ?? "-"}</TextView>
+          <TextView theme={theme}>{formattedPrice ?? "-"}</TextView>
           {token.suffix && <SuffixTextView theme={theme}>{token.suffix}</SuffixTextView>}
         </View>
       );
@@ -190,7 +194,7 @@ const renderToken = (
       return (
         <View key={index} style={styles.rowCenter}>
           {token.items?.map((subToken, subIndex) =>
-            renderToken(subToken, item, userCurrency, subIndex)
+            renderToken(subToken, item, userCurrency, subIndex, shouldRound)
           )}
         </View>
       );
@@ -210,13 +214,20 @@ const ProductsListViewComponent: React.FC<ProductsListViewProps> = ({
   if (!data || !data.length) return null;
   const theme = useTheme();
   const [userCurrency, setUserCurrency] = useState<string | null>(null);
+  const [shouldRound, setShouldRound] = useState<boolean>(false);
 
   useEffect(() => {
     const fetchCurrency = async () => {
       const currency = await getUserCurrencySymbol();
       setUserCurrency(currency);
     };
+
+    const getRoundOffPrices = async () => {
+      const roundOff = await roundUpPrices();
+      setShouldRound(roundOff);
+    };
     fetchCurrency();
+    getRoundOffPrices();
   }, []);
 
   return (
@@ -229,28 +240,28 @@ const ProductsListViewComponent: React.FC<ProductsListViewProps> = ({
           <Pressable
             key={dataItem.id}
             onPress={() => onItemPress?.(dataItem)}
-            // @ts-ignore - hovered is available on web
-            style={({ hovered }) => [
-              styles.itemContainer,
-              hovered && styles.itemHover,
-            ]}
           >
-            <View style={styles.left}>
-              <View style={styles.serialContainer}>
-                <Serial>{index + 1}.</Serial>
-              </View>
-              <View style={styles.tokens}>
-                {DIAMOND_TOKENS.map((token, tokenIndex) =>
-                  renderToken(token, dataItem, userCurrency, tokenIndex)
-                )}
-              </View>
-            </View>
+            {(state) => (
+              // @ts-ignore
+              <ListItemParent theme={theme} hovered={state.hovered}>
+                <View style={styles.left}>
+                  <View style={styles.serialContainer}>
+                    <Serial>{index + 1}.</Serial>
+                  </View>
+                  <View style={styles.tokens}>
+                    {DIAMOND_TOKENS.map((token, tokenIndex) =>
+                      renderToken(token, dataItem, userCurrency, tokenIndex, shouldRound)
+                    )}
+                  </View>
+                </View>
+              </ListItemParent>
+            )}
           </Pressable>
         ))}
       </ScrollView>
 
       <ButtonView activeOpacity={0.8} onPress={() => onViewAll(item)}>
-        <ButtonText>{`View All ${totalResults} Results`}</ButtonText>
+        <ButtonText>{`View All ${totalResults} diamonds`}</ButtonText>
         <ImageComponent
           source={{
             uri: "https://cdn.vdbapp.com/ai/chat-widget/assets/img/right.svg",
@@ -320,6 +331,14 @@ const ButtonText = styled.Text<{ theme: DefaultTheme }>`
   font-weight: 600;
 `;
 
+const ListItemParent = styled.Pressable<{ theme: DefaultTheme, hovered?: boolean }>`
+  padding-vertical: 2px;
+  background-color: ${({ theme, hovered }: { theme: DefaultTheme, hovered?: boolean }) =>
+    hovered
+      ? theme["core-02"] || "#EDEDF2"
+      : "transparent"};
+`;
+
 const styles = StyleSheet.create({
   listContent: {
     gap: 8,
@@ -351,18 +370,6 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
   },
-  priceContainer: {
-    alignItems: "flex-start",
-    justifyContent: "center",
-  },
-
-  itemContainer: {
-    paddingVertical: 2,
-  },
-
-  itemHover: {
-    backgroundColor: "#EDEDF2",
-  },
 });
 
 const ProductsListView = memo(ProductsListViewComponent);

package/src/components/utils.ts

@@ -68,6 +68,42 @@ export const getUserCurrencySymbol = async (): Promise<string | null> => {
   return userData.currency_symbol || "$";
 };
 
+
+export const roundUpPrices = async (): Promise<boolean> => {
+  const userInfo = await Storage.getJSON<UserDetails>("persist:userInfo", {});
+  const userData = userInfo?.user as UserDetails;
+  // @ts-ignore
+  return true; // org 1
+  // return !!userData?.feature_settings?.round_up_prices;
+};
+
+// Helper to add commas to a number
+export function formatWithCommas(value: number | string): string {
+  const num = typeof value === 'string' ? parseFloat(value) : value;
+  if (isNaN(num)) return String(value);
+  return num.toLocaleString();
+}
+
+// Format price values according to requirements
+export function formatPriceValue(key: string, value: any, shouldRound: boolean) {
+  console.log("formatPriceValue", key, value);
+  
+  if (key === 'price_per_carat') {
+    // Remove decimals, round, add commas
+    const num = Math.round(Number(value));
+    return formatWithCommas(num);
+  }
+  if (key === 'total_sales_price') {
+    let num = Number(value);
+    if (shouldRound) {
+      num = Math.round(num);
+    }
+    return formatWithCommas(num);
+  }
+  // fallback: just add commas if number
+  return formatWithCommas(value);
+}
+
 export interface UserDetails {
   id?: string | number;
   email?: string;

package/src/types.ts

@@ -9,6 +9,7 @@ export interface ChatMessage {
   suggestions?: string[];
   reaction?: string;
   search_payload?: Record<string, any>;
+  external_context?: string | null;
 }
 
 export interface ChatTheme {
@@ -45,6 +46,7 @@ export interface ChatWidgetProps {
   onItemPress?: (deepLinkUrl: string, item: any) => void;
   /** When true, shows beta labels and disclaimer. */
   isBetaMode?: boolean;
+  activeProductType?: string;
 }
 
 export interface ChatWidgetRef {