vdb-ai-chat 1.0.21 → 1.0.22

package/src/components/Button.tsx

@@ -0,0 +1,85 @@
+import { ActivityIndicator } from "react-native";
+import styled, { DefaultTheme, useTheme } from "styled-components/native";
+import React, { useState } from "react";
+import { ButtonCategory, ButtonType, getStyleForCategory } from "./utils";
+import { ButtonProps } from "src/types";
+
+const Button: React.FC<ButtonProps> = ({
+  category = ButtonCategory.default,
+  type = ButtonType.primary,
+  disabled = false,
+  loading,
+  onPress,
+  height,
+  width,
+  borderRadius,
+  isDisableInteraction = false,
+  maxWidth,
+  style,
+  children,
+}: ButtonProps) => {
+  const theme = useTheme();
+  const [hovered, setHovered] = useState<boolean | null>(false);
+  const { textColor, background, borderColor, hover } = getStyleForCategory(
+    category,
+    type,
+    disabled
+  );
+
+  return (
+    <CustomButton
+      onPress={onPress}
+      disabled={disabled || loading || isDisableInteraction}
+      textColor={textColor}
+      background={background}
+      borderColor={borderColor}
+      borderRadius={borderRadius}
+      onHoverIn={() => setHovered(true)}
+      onHoverOut={() => setHovered(false)}
+      height={height}
+      width={width}
+      maxWidth={maxWidth}
+      type={type}
+      style={({ pressed }: { pressed: boolean }) => [
+        {
+					...style,
+          backgroundColor:
+            pressed || hovered
+              ? (theme[hover as keyof DefaultTheme] as string)
+              : (theme[background as keyof DefaultTheme] as string),
+        }
+      ]}
+    >
+      {/*TODO: Replace with the custom text component*/}
+      {loading ? (
+        <ActivityIndicator
+          color={theme[textColor as keyof DefaultTheme] as string}
+        />
+      ) : (
+        children
+      )}
+    </CustomButton>
+  );
+};
+
+const CustomButton = styled.Pressable<any>`
+  justify-content: center;
+  align-items: center;
+  width: ${({ width }: any) => (width ? width : "100%")};
+  max-width: ${({ maxWidth }: any) => (maxWidth ? maxWidth : "100%")};
+  padding-horizontal: 16px;
+  height: ${({ height }: any) => (height > 0 ? height : 40)}px;
+  border-radius: ${({ borderRadius }: any) =>
+    borderRadius > 0 ? borderRadius : 8}px;
+  border-width: ${({ type }: any) => (type === ButtonType.secondary ? 2 : 0)}px;
+  border-color: ${({ borderColor, theme }: any) => theme[borderColor]};
+`;
+const StyledText = styled.Text<any>`
+  color: ${({ color }: any) => color || "#FFFFFF"};
+  font-family: ${({ isBold }: any) => (isBold ? "Roboto-Medium" : "Roboto-Regular")};
+  font-weight: ${({ isBold }: any) => (isBold ? "500" : "400")};
+  font-size: 14px;
+  font-style: normal;
+`;
+
+export default Button;

package/src/components/ChatWidget.tsx

@@ -29,6 +29,7 @@ import {
   fetchInitialMessages,
   fetchOlderMessages,
   getProducts,
+  getProductsPaginated,
   handleFeedbackActionApi,
   normaliseMessages,
   sendUserMessage,
@@ -40,6 +41,7 @@ import {
   FeedbackAction,
   formatToTime,
   getUserDetails,
+  ProductCategory,
   UserDetails,
 } from "./utils";
 import { useUserAnalytics } from "../hooks/useAnalytics";
@@ -92,6 +94,9 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
       undefined
     );
     const [currentPage, setCurrentPage] = useState(1);
+    // Search results pagination state
+    const [searchResultsPages, setSearchResultsPages] = useState<Record<string, number>>({});
+    const [loadingMoreResults, setLoadingMoreResults] = useState<Set<string>>(new Set());
     const scrollRef = useRef<ScrollView | null>(null);
     const inputRef = useRef<TextInput | null>(null);
     // Scroll management refs - using refs instead of state to avoid re-renders
@@ -154,7 +159,7 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
       const deepLinkUrl = `${apiUrl}webapp/${
         isLabgrown ? "lab-grown-diamonds" : "natural-diamonds"
       }/search?priceMode=${priceMode}&productType=${
-        isLabgrown ? "lab_grown_diamond" : "diamond"
+        isLabgrown ? ProductCategory.LAB_GROWN_DIAMOND : ProductCategory.DIAMOND
       }&fromNewFilterScreen=false&filterSplitStep=1&sectionName=${
         searchPayload.pair === "pair" ? "Pairs" : "Single Stones"
       }&breadCrumbLabel=Stone%20Search&enterSecondFlow=false&saved_search=${stringifiedSearchPayload}`;
@@ -169,7 +174,7 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
     const onItemPress = useCallback(
       (item: any) => {
         const deepLinkUrl = `${apiUrl}webapp/${
-          item.type === "lab_grown_diamond"
+          item.type === ProductCategory.LAB_GROWN_DIAMOND
             ? "lab-grown-diamonds"
             : "natural-diamonds"
         }/item-detail/${item.id}?productType=${
@@ -489,6 +494,83 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
       }
     }, []);
 
+    // Handle show more results for search pagination
+    const handleShowMoreResults = useCallback(async (messageId: string, searchPayload: any) => {
+      if (loadingMoreResults.has(messageId)) return;
+      
+      const currentPageForMessage = searchResultsPages[messageId] || 1;
+      const nextPage = currentPageForMessage + 1;
+      
+      // Limit to maximum 3 pages
+      if (nextPage > 3) return;
+      
+      try {
+        setLoadingMoreResults(prev => new Set(prev).add(messageId));
+        
+        const newResults = await getProductsPaginated(apiUrl, searchPayload, nextPage);
+        
+        if (newResults?.response?.body?.diamonds) {
+          setProductsByMsg(prev => {
+            const currentData = prev[messageId];
+            if (!currentData) return prev;
+            
+            const existingDiamonds = currentData.response?.body?.diamonds || [];
+            const newDiamonds = newResults.response.body.diamonds;
+            
+            return {
+              ...prev,
+              [messageId]: {
+                ...currentData,
+                response: {
+                  ...currentData.response,
+                  body: {
+                    ...currentData.response.body,
+                    diamonds: [...existingDiamonds, ...newDiamonds]
+                  }
+                }
+              }
+            };
+          });
+          
+          setSearchResultsPages(prev => ({
+            ...prev,
+            [messageId]: nextPage
+          }));
+        }
+      } catch (error) {
+        console.error('Failed to load more results:', error);
+      } finally {
+        setLoadingMoreResults(prev => {
+          const next = new Set(prev);
+          next.delete(messageId);
+          return next;
+        });
+      }
+    }, [apiUrl, loadingMoreResults, searchResultsPages]);
+
+    // Handle show less results to revert to first 5 results
+    const handleShowLessResults = useCallback(async (messageId: string, searchPayload: any) => {
+      try {
+        // Reset to first page and fetch only initial 5 results
+        const initialResults = await getProducts(apiUrl, searchPayload);
+        
+        if (initialResults?.response?.body?.diamonds) {
+          setProductsByMsg(prev => ({
+            ...prev,
+            [messageId]: initialResults
+          }));
+          
+          // Reset to page 1
+          setSearchResultsPages(prev => ({
+            ...prev,
+            [messageId]: 1
+          }));
+        }
+      } catch (error) {
+        console.error('Failed to show less results:', error);
+      }
+    }, [apiUrl]);
+
     // Load older messages when user scrolls to top
     const loadOlderMessages = useCallback(async () => {
       if (loadingOlder || !hasMoreMessages || !hasAuth) return;
@@ -921,6 +1003,10 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
                           onViewAll={onViewAll}
                           onItemPress={onItemPress}
                           item={item}
+                          showMoreResults={() => handleShowMoreResults(item.id, item.search_payload)}
+                          showLessResults={() => handleShowLessResults(item.id, item.search_payload)}
+                          currentPage={searchResultsPages[item.id] || 1}
+                          isLoadingMore={loadingMoreResults.has(item.id)}
                         />
                       )}
                       {/* Suggestions are now rendered inside MessageBubble */}

package/src/components/LabelContainer.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import styled from "styled-components/native";
+import { DefaultTheme } from "styled-components/native";
+import { useTheme } from "styled-components/native";
+
+interface Props {
+  backgroundColor: string;
+  productName: string;
+  productColor: string;
+  height?: number;
+}
+
+const LabelContainer: React.FC<Props> = ({
+  backgroundColor,
+  productName,
+  productColor,
+  height = 24,
+}: any) => {
+  const theme = useTheme();
+  return (
+    <Container backgroundColor={backgroundColor} height={height}>
+      <StyledText
+        color={theme[productColor as keyof DefaultTheme]}
+        selectable={true}
+      >
+        {productName ?? ""}
+      </StyledText>
+    </Container>
+  );
+};
+
+const Container = styled.View<any>`
+  background-color: ${({ theme, backgroundColor }: any) => theme[backgroundColor]};
+  align-items: center;
+  justify-content: center;
+  padding-left: 6px;
+  padding-right: 6px;
+  border-radius: 7px;
+  height: ${({ height }: any) => height}px;
+`;
+
+const StyledText = styled.Text<any>`
+  color: ${({ color }: any) => color || "#9138AE"};
+  font-family: Roboto;
+	font-size: 13px;
+	font-style: normal;
+	font-weight: 500;
+`;
+
+export default LabelContainer;

package/src/components/MessageBubble.tsx

@@ -6,7 +6,8 @@ import { useTheme } from "styled-components/native";
 import styled from "styled-components/native";
 import { DefaultTheme } from "styled-components/native";
 import { css } from "styled-components/native";
-import { generateSavedSearchName } from "./utils";
+import { generateSavedSearchName, getProductAlphaColor, getProductColor, ProductCategory } from "./utils";
+import LabelContainer from "./LabelContainer";
 
 interface Props {
   message: ChatMessage;
@@ -41,23 +42,45 @@ const MessageBubbleComponent: React.FC<Props> = ({
       : typeof message?.search_payload?.lab_grown === "boolean"
       ? message?.search_payload?.lab_grown
       : false;
+  const productType = isLabgrown ? ProductCategory.LAB_GROWN_DIAMOND : ProductCategory.DIAMOND;
 
   return (
     <Container theme={theme} userTheme={userTheme} isUser={isUser}>
       <BubbleContainer theme={theme} userTheme={userTheme} isUser={isUser}>
-        <MessageText isUser={isUser} userTheme={userTheme} theme={theme}>
-          {!(message.role === "assistant" && hasResults) &&
-            (message.text || "")}
-          {message.role === "assistant" &&
-          hasResults &&
-          typeof totalResults === "number"
-            ? `Found ${Number(totalResults).toLocaleString()} ${
-                isLabgrown ? "Lab-Grown" : "Natural"
-              } Diamond matches for ${
-                generateSavedSearchName(message.search_payload)?.title
-              } (showing first ${shownResults})`
-            : null}
-        </MessageText>
+        {message.role === "assistant" && hasResults && typeof totalResults === "number" ? 
+          <>
+            <InlineContainer>
+              <MessageText isUser={isUser} isBold={false} theme={theme}>
+                {`Found `}
+              </MessageText>
+              <MessageText isUser={isUser} isBold={true} theme={theme}>
+                {`${Number(totalResults).toLocaleString()} `}
+              </MessageText>
+              <LabelContainer productName={isLabgrown ? "Lab-Grown Diamonds" : "Natural Diamonds"} productColor={getProductColor(productType)} backgroundColor={getProductAlphaColor(productType)} />
+              <MessageText isUser={isUser} isBold={false} theme={theme}>
+                {` that `}
+              </MessageText>
+              <MessageText isUser={isUser} isBold={false} theme={theme}>
+                {`match `}
+              </MessageText>
+              <MessageText isUser={isUser} isBold={false} theme={theme}>
+                {`your `}
+              </MessageText>
+              <MessageText isUser={isUser} isBold={false} theme={theme}>
+                {`preferences:`}
+              </MessageText>
+            </InlineContainer>
+
+            <MessageText isUser={isUser} isBold={true} theme={theme}>
+              {`${generateSavedSearchName(message.search_payload, true)?.title}`}
+            </MessageText>
+          </>
+         : null}
+         {!(message.role === "assistant" && hasResults) &&
+          <MessageText isUser={isUser} theme={theme}>
+            {(message.text || "")}
+          </MessageText>
+         }
         {message.role === "assistant" &&
           Array.isArray(message.suggestions) &&
           message.suggestions.length > 0 &&
@@ -140,28 +163,12 @@ const BubbleContainer = styled.View<{
   }) => (isUser ? userTheme.borderRadius : 0)}px;
 `;
 
-const MessageText = styled.Text<{
-  theme: DefaultTheme;
-  userTheme: ChatTheme;
-  isUser: Boolean;
-}>`
-  color: ${({
-    userTheme,
-    theme,
-    isUser,
-  }: {
-    userTheme: ChatTheme;
-    theme: DefaultTheme;
-    isUser: Boolean;
-  }) =>
-    isUser
-      ? theme["core-01"] || userTheme.userTextColor || "#FFFFFF"
-      : theme["core-05"] || userTheme.botTextColor || "#000000"};
-  font-family: ${({ userTheme }: { userTheme: ChatTheme }) =>
-    userTheme.fontFamily || "Roboto"};
-  font-size: ${({ userTheme }: { userTheme: ChatTheme }) =>
-    userTheme.fontSize || 16}px;
-  line-height: 20px;
+const MessageText = styled.Text`
+  color: ${({ theme, isUser }: any) => isUser ? theme["core-01"] || "#FFFFFF" : theme["core-05"] || "#000000"};
+  font-family: ${({ isBold }: any) => (isBold ? "Roboto-Medium" : "Roboto")};
+  font-size: 14px;
+  font-style: normal;
+  font-weight: ${({ isBold }: any) => (isBold ? "500" : "400")};
 `;
 
 const SuggestionsWrapper = styled.View<{
@@ -169,3 +176,10 @@ const SuggestionsWrapper = styled.View<{
 }>`
   margin-top: 8px;
 `;
+
+const InlineContainer = styled.View`
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: wrap;
+  margin-bottom: 4px;
+`;

package/src/components/MessageMetaRow.tsx

@@ -55,15 +55,11 @@ export const MessageMetaRow: React.FC<Props> = ({
     message.role === "assistant" &&
     !message.isLoading &&
     isValidMessageId &&
+    Object.keys(message.search_payload || {}).length > 0 &&
     !!conversationId;
 
   return (
-    <View
-      style={[
-        styles.rowContainer,
-        isUser ? styles.alignRight : styles.alignLeft,
-      ]}
-    >
+    <RowContainer isUser={isUser}>
       <View style={styles.timeContainer}>
         <TimeText theme={theme}>{formatToTime(message.createdAt)}</TimeText>
       </View>
@@ -153,7 +149,7 @@ export const MessageMetaRow: React.FC<Props> = ({
             />
           </Pressable>
         ))} */}
-    </View>
+    </RowContainer>
   );
 };
 
@@ -198,15 +194,36 @@ const TimeText = styled.Text<{ theme: DefaultTheme }>`
   color: ${({ theme }: { theme: DefaultTheme }) => theme["core-06"] || "#666"};
 `;
 
+const RowContainer = styled.View<{
+  theme: DefaultTheme;
+  isUser: Boolean;
+}>`
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding-horizontal: 8px;
+  margin-top: 0;
+  margin-bottom: 12px;
+  ${({ isUser }: { isUser: Boolean }) =>
+    isUser
+      ? css`
+          align-self: flex-end;
+        `
+      : css`
+          align-self: flex-start;
+          width: 100%;
+        `};
+`;
+
 const styles = StyleSheet.create({
   rowContainer: {
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center",
-    gap: 6,
-    marginHorizontal: 8,
+    paddingHorizontal: 8,
     marginTop: 0,
     marginBottom: 12,
+    width: "100%",
   },
   alignRight: {
     alignSelf: "flex-end",

package/src/components/ProductsList.tsx

@@ -9,6 +9,10 @@ interface ProductsListProps {
   variant?: "grid" | "list";
   totalResults: number;
   item: any;
+  showMoreResults?: () => void;
+  showLessResults?: () => void;
+  currentPage?: number;
+  isLoadingMore?: boolean;
 }
 
 const ProductsList: React.FC<ProductsListProps> = ({
@@ -18,6 +22,10 @@ const ProductsList: React.FC<ProductsListProps> = ({
   variant = "list",
   totalResults,
   item,
+  showMoreResults,
+  showLessResults,
+  currentPage = 1,
+  isLoadingMore = false,
 }) => {
   if (!data || !data.length) return null;
   if (variant === "list") {
@@ -29,6 +37,10 @@ const ProductsList: React.FC<ProductsListProps> = ({
         onItemPress={onItemPress}
         totalResults={totalResults}
         item={item}
+        showMoreResults={showMoreResults}
+        showLessResults={showLessResults}
+        currentPage={currentPage}
+        isLoadingMore={isLoadingMore}
       />
     );
   }