vdb-ai-chat 1.0.5 → 1.0.7

package/src/api.ts

@@ -5,10 +5,14 @@ import type { ChatMessage } from "./types";
 // Generic params type reused for downstream APIs (e.g. product search payload)
 export type ChatApiParams = Record<string, any>;
 
-async function buildHeaders() {
+async function getUserToken(): Promise<string> {
   const userInfo = await Storage.getJSON<UserDetails>("persist:userInfo", {});
   const userData = JSON.parse(userInfo?.user || "{}");
-  const token = userData?.token || "";
+  return userData?.token || "";
+}
+
+async function buildHeaders() {
+  const token = await getUserToken();
   const iid = (await Storage.getItem("persist:appState")) || "{}";
   let installationId = "";
   try {
@@ -29,6 +33,45 @@ async function buildHeaders() {
   };
 }
 
+// Structure for storing conversations with session token
+interface StoredConversations {
+  token: string;
+  conversations: Record<string, { conversation_id: string | number }>;
+}
+
+// Validates that stored conversations belong to current session
+// If token changed (user re-logged), clears old data and returns empty
+async function getValidConversations(): Promise<
+  Record<string, { conversation_id: string | number }>
+> {
+  const currentToken = await getUserToken();
+  const stored = await Storage.getJSON<StoredConversations>(
+    "vdbchat_conversations",
+    null
+  );
+
+  // If no stored data or token doesn't match, clear and return empty
+  if (!stored || stored.token !== currentToken) {
+    // Clear old conversation data since session changed
+    await Storage.removeItem("vdbchat_conversations");
+    return {};
+  }
+
+  return stored.conversations || {};
+}
+
+// Saves conversations with current session token
+async function saveConversations(
+  conversations: Record<string, { conversation_id: string | number }>
+): Promise<void> {
+  const currentToken = await getUserToken();
+  const data: StoredConversations = {
+    token: currentToken,
+    conversations,
+  };
+  await Storage.setJSON("vdbchat_conversations", data);
+}
+
 export function normaliseMessages(raw: any): ChatMessage[] {
   const messages = Array.isArray(raw) ? raw : raw?.messages;
   if (!Array.isArray(messages)) return [];
@@ -43,7 +86,7 @@ export function normaliseMessages(raw: any): ChatMessage[] {
         : typeof m.createdAt === "number"
         ? m.createdAt
         : Date.now(),
-    search_payload: m.search_payload,
+    search_payload: m.search_payload ?? {},
     reaction: String(m.reaction ?? "0"),
     suggestions: Array.isArray(m.suggestions) ? m.suggestions : undefined,
   }));
@@ -54,10 +97,8 @@ export async function fetchInitialMessages(
   _params?: ChatApiParams,
   priceMode?: string | null
 ): Promise<any> {
-  const conversations = await Storage.getJSON<Record<string, any>>(
-    "vdbchat_conversations",
-    {}
-  );
+  // Get conversations valid for current session (auto-clears if token changed)
+  const conversations = await getValidConversations();
   const storedId = conversations?.[priceMode ?? ""]?.conversation_id ?? null;
   if (priceMode === undefined) return;
 
@@ -82,11 +123,11 @@ export async function fetchInitialMessages(
 
   // Persist conversation_id returned by the server for future calls
   if (data && data.conversation_id != null && priceMode) {
-    const updatedConversations = conversations || {};
+    const updatedConversations = { ...conversations };
     updatedConversations[priceMode] = {
       conversation_id: data.conversation_id,
     };
-    await Storage.setJSON("vdbchat_conversations", updatedConversations);
+    await saveConversations(updatedConversations);
   }
 
   return data;
@@ -99,10 +140,8 @@ export async function sendUserMessage(
   _history: ChatMessage[],
   priceMode: any
 ): Promise<any> {
-  const conversations = await Storage.getJSON<Record<string, any>>(
-    "vdbchat_conversations",
-    {}
-  );
+  // Get conversations valid for current session
+  const conversations = await getValidConversations();
   const storedId = conversations?.[priceMode]?.conversation_id ?? null;
 
   if (priceMode === undefined) {
@@ -131,11 +170,11 @@ export async function sendUserMessage(
   const data = await res.json();
 
   if (data && data.conversation_id != null && priceMode) {
-    const updatedConversations = conversations || {};
+    const updatedConversations = { ...conversations };
     updatedConversations[priceMode] = {
       conversation_id: data.conversation_id,
     };
-    await Storage.setJSON("vdbchat_conversations", updatedConversations);
+    await saveConversations(updatedConversations);
   }
 
   return data;
@@ -145,15 +184,13 @@ export async function clearChatHistory(
   apiUrl: string,
   priceMode: any
 ): Promise<void> {
-  const conversations = await Storage.getJSON<Record<string, any>>(
-    "vdbchat_conversations",
-    {}
-  );
+  // Get conversations valid for current session
+  const conversations = await getValidConversations();
   const storedId = conversations?.[priceMode]?.conversation_id ?? null;
   if (!storedId || priceMode === undefined) return;
 
   const url = new URL(apiUrl);
-  url.searchParams.set("conversation_id", storedId);
+  url.searchParams.set("conversation_id", String(storedId));
 
   const res = await fetch(url.toString(), {
     method: "DELETE",
@@ -165,14 +202,14 @@ export async function clearChatHistory(
   }
 
   // Clear from storage as well
-  const updatedConversations = conversations || {};
+  const updatedConversations = { ...conversations };
   delete updatedConversations[priceMode];
-  await Storage.setJSON("vdbchat_conversations", updatedConversations);
+  await saveConversations(updatedConversations);
 }
 
 export async function getProducts(
   params: ChatApiParams,
-  priceMode: string
+  priceMode: string | null
 ): Promise<any> {
   const userInfo = await Storage.getJSON<UserDetails>("persist:userInfo", {});
   const { activeProduct } = JSON.parse(
@@ -191,6 +228,29 @@ export async function getProducts(
     typeof rawState?.sectionName === "string"
       ? JSON.parse(rawState.sectionName)
       : rawState?.sectionName;
+
+  const rootState = JSON.parse((await Storage.getItem("persist:root")) || "{}");
+  const selectedGroups =
+    typeof rootState?.selectedGroups === "string"
+      ? JSON.parse(rootState.selectedGroups)
+      : rootState?.selectedGroups || {};
+
+  let mGroupIds = selectedGroups[activeProduct ?? ""];
+  let vdbSetting = false;
+  if (mGroupIds) {
+    if (mGroupIds.includes(0)) {
+      vdbSetting = true;
+      mGroupIds = mGroupIds.filter((groupId: number) => groupId !== 0);
+    }
+  }
+
+  let queryParamList: Record<string, any> = {};
+  if (mGroupIds && mGroupIds.length > 0) {
+    queryParamList = Object.assign(queryParamList, {
+      group_ids: mGroupIds,
+    });
+  }
+
   const res = await fetch(
     "https://pdpdemo1.demo.customvirtual.app/v3/vdb/search_diamonds",
     {
@@ -199,9 +259,10 @@ export async function getProducts(
       body: JSON.stringify({
         vdb: {
           ...params,
+          ...queryParamList,
           page_size: 5,
           price_mode: priceMode,
-          vdb_setting: "true",
+          vdb_setting: vdbSetting ? "true" : "false",
           results_view_type: searchResultViewType || "grid",
           featured: "false",
           pair: sectionName === "Single Stones" ? "other" : "pair",

package/src/components/BetaNotice.tsx

@@ -18,6 +18,8 @@ const styles = StyleSheet.create({
     paddingVertical: 6,
     paddingHorizontal: 16,
     backgroundColor: "transparent",
+    alignItems: "center",
+    justifyContent: "center",
   },
   text: {
     color: "#4F4E57",
@@ -26,6 +28,7 @@ const styles = StyleSheet.create({
     fontStyle: "normal",
     fontWeight: "400",
     lineHeight: 18,
+    textAlign: "center",
   },
 });
 

package/src/components/ChatHeader.tsx

@@ -61,7 +61,10 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
     <View style={styles.container}>
       <View style={styles.logoContainer}>
         <VDBLogo />
-        <Text style={styles.title}>{isBetaMode ? "AI Search Beta" : "AI Search"}</Text>
+        <Text style={styles.title}>
+          AI Search
+          {isBetaMode && <Text style={styles.betaSup}>Beta</Text>}
+        </Text>
       </View>
       <View style={styles.buttonContainer}>
         <TouchableOpacity onPress={() => {
@@ -79,6 +82,7 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
               onClose?.();
           }}
         >
+          <Text style={styles.clearChatText}>Minimize</Text>
           <CloseIcon />
         </TouchableOpacity>
       </View>
@@ -105,13 +109,24 @@ const styles = StyleSheet.create({
     fontWeight: "500",
     color: "#020001",
   },
+  betaSup: {
+    fontSize: 13,
+    fontWeight: "400",
+    color: "#4F4E57",
+    marginLeft: 4,
+    position: "relative",
+    top: -6,
+  },
   closeButton: {
     backgroundColor: "#FFF",
-    width: 24,
     height: 24,
     borderRadius: 12,
+    paddingHorizontal: 8,
     justifyContent: "center",
     alignItems: "center",
+    display: "flex",
+    flexDirection: "row",
+    gap: 4,
   },
   closeIconText: {
     fontSize: 14,
@@ -126,7 +141,7 @@ const styles = StyleSheet.create({
   clearChatText: {
     color: "#4F4E57",
     fontSize: 14,
-    fontWeight: "500",
+    fontWeight: "400",
     textDecorationLine: "none",
   },
   buttonContainer: {

package/src/components/ChatWidget.tsx

@@ -70,10 +70,8 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
     );
     const [typingMessageId, setTypingMessageId] = useState<string | null>(null);
     const [typingFullText, setTypingFullText] = useState<string>("");
-    const [assistantResponse, setAssistantResponse] = useState<
-      ChatMessage | undefined
-    >(undefined);
     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()
@@ -111,11 +109,10 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
       loadAuthData();
     }, [userTokenProp]);
 
-    const onViewAll = useCallback(() => {
-      const searchPayload = JSON.stringify(assistantResponse?.search_payload);
-      const payload = assistantResponse?.search_payload;
+    const onViewAll = (item: any) => {
+      const searchPayload = JSON.stringify(item?.search_payload);
+      const payload = item?.search_payload;
       if (!payload) return;
-
       const domain = apiUrl.split("v3");
       const deepLinkUrl = `${domain[0]}webapp/${
         payload.lab_grown === "true" ? "lab-grown-diamonds" : "natural-diamonds"
@@ -128,7 +125,7 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
       } else if (Platform.OS === "web") {
         window.open(deepLinkUrl, "_parent");
       }
-    }, [assistantResponse, apiUrl, priceMode, onViewAllPress]);
+    };
 
     const onItemPress = useCallback(
       (item: any) => {
@@ -220,6 +217,7 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
                   "Search Natural Diamonds",
                   "Search Lab-Grown Diamonds",
                 ],
+                search_payload: {},
                 reaction: "0",
               };
               setMessages([initialAssistant]);
@@ -267,6 +265,7 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
           createdAt: Date.now(),
           reaction: "0",
           isLoading: true,
+          search_payload: {},
         };
 
         setMessages((prev) => [...prev, userMessage, loadingMessage]);
@@ -303,8 +302,6 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
             (m) => m.role === "assistant"
           );
 
-          setAssistantResponse(latestAssistant);
-
           if (latestAssistant?.text) {
             if (
               latestAssistant?.search_payload &&
@@ -336,6 +333,7 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
                           id: latestAssistant?.id ?? msg.id,
                           text: noResultsText,
                           isLoading: false,
+                          search_payload: latestAssistant.search_payload ?? {},
                         }
                       : msg
                   )
@@ -359,6 +357,7 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
                       text: "",
                       isLoading: false,
                       suggestions: latestAssistant.suggestions,
+                      search_payload: latestAssistant.search_payload ?? {},
                     }
                   : msg
               )
@@ -490,7 +489,6 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
           await Storage.setJSON("vdbchat_conversations", updatedConversations);
         }
         setMessages([]);
-        setAssistantResponse(undefined);
         setProductsByMsg({});
         setReloadLoadingIds(new Set());
         setLoading(false);
@@ -512,6 +510,7 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
               "Search Lab-Grown Diamonds",
             ],
             reaction: "0",
+            search_payload: {},
           };
           setMessages([initialAssistant]);
         } else {
@@ -616,12 +615,21 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
         <KeyboardAvoidingView
           style={{ flex: 1 }}
           behavior={Platform.OS === "ios" ? "padding" : "height"}
-          keyboardVerticalOffset={Platform.OS === "ios" ? 100 : -16}
+          keyboardVerticalOffset={100}
         >
           <ScrollView
             ref={scrollRef}
             keyboardShouldPersistTaps="handled"
-            onScroll={(e) => setScrollY(e.nativeEvent.contentOffset.y)}
+            onScroll={(e) => {
+              const { contentOffset, contentSize, layoutMeasurement } =
+                e.nativeEvent;
+              setScrollY(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);
+            }}
             scrollEventThrottle={16}
             style={
               modalHeight
@@ -638,16 +646,18 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
                 : {}),
             }}
             onContentSizeChange={() => {
-              scrollRef.current?.scrollToEnd({ animated: false });
+              if (autoScroll) {
+                scrollRef.current?.scrollToEnd({ animated: false });
+              }
             }}
           >
-            <View style={styles.emptyContainer}>
-              <Text style={styles.emptyText}>
-                {messages.length === 0
-                  ? "Start a conversation to Find the Perfect Diamond"
-                  : `Chat Started at ${formatToTime(messages[0].createdAt)}`}
-              </Text>
-            </View>
+            {messages?.[0]?.createdAt && (
+              <View style={styles.emptyContainer}>
+                <Text style={styles.emptyText}>
+                  {`Chat Started at ${formatToTime(messages[0].createdAt)}`}
+                </Text>
+              </View>
+            )}
             {(() => {
               const ordered = [...messages];
               return ordered.map((item, index) => {
@@ -731,6 +741,7 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
                         }
                         onViewAll={onViewAll}
                         onItemPress={onItemPress}
+                        item={item}
                       />
                     )}
                     {/* Suggestions are now rendered inside MessageBubble */}

package/src/components/LazyProductsFetcher.tsx

@@ -7,7 +7,7 @@ interface LazyProductsFetcherProps {
   messageId: string;
   payload: Record<string, any> | undefined | null;
   onFetched: (messageId: string, data: any) => void;
-  priceMode: string;
+  priceMode: string | null;
 }
 
 const LazyProductsFetcher: React.FC<LazyProductsFetcherProps> = ({
@@ -34,7 +34,7 @@ const LazyProductsFetcher: React.FC<LazyProductsFetcherProps> = ({
         console.error("Lazy fetch products failed", e);
       }
     })();
-  }, [inView, messageId, onFetched, payload]);
+  }, [inView, messageId, onFetched, payload, priceMode]);
 
   // Sentinel element; no visible UI needed
   return <View ref={ref as any} style={{ height: 1 }} />;

package/src/components/MessageMetaRow.tsx

@@ -79,6 +79,7 @@ export const MessageMetaRow: React.FC<Props> = ({
             style={(state: any) => [
               styles.borderButton,
               state?.hovered && styles.borderButtonHover,
+              message.reaction === FeedbackAction.LIKE && styles.borderButtonLike,
             ]}
             onPress={() =>
               handleFeedbackAction(
@@ -90,20 +91,16 @@ export const MessageMetaRow: React.FC<Props> = ({
             disabled={!canFeedback}
           >
             <ImageComponent
-              source={{
-                uri:
-                  message.reaction === FeedbackAction.LIKE
-                    ? "https://cdn.vdbapp.com/ai/chat-widget/assets/img/like-filled.svg"
-                    : "https://cdn.vdbapp.com/ai/chat-widget/assets/img/like.svg",
-              }}
+              source={{ uri: "https://cdn.vdbapp.com/ai/chat-widget/assets/img/like.svg" }}
               resizeMode="contain"
-              style={{ width: 16, height: 16 }}
+              style={{ width: 20, height: 20, tintColor: message.reaction === FeedbackAction.LIKE ?"#00B140" : "#020001" }}
             />
           </Pressable>
           <Pressable
             style={(state: any) => [
               styles.borderButton,
               state?.hovered && styles.borderButtonHover,
+              message.reaction === FeedbackAction.DISLIKE && styles.borderButtonDislike,
             ]}
             onPress={() =>
               handleFeedbackAction(
@@ -115,14 +112,9 @@ export const MessageMetaRow: React.FC<Props> = ({
             disabled={!canFeedback}
           >
             <ImageComponent
-              source={{
-                uri:
-                  message.reaction === FeedbackAction.DISLIKE
-                    ? "https://cdn.vdbapp.com/ai/chat-widget/assets/img/dislike-filled.svg"
-                    : "https://cdn.vdbapp.com/ai/chat-widget/assets/img/dislike.svg",
-              }}
+              source={{ uri: "https://cdn.vdbapp.com/ai/chat-widget/assets/img/dislike.svg" }}
               resizeMode="contain"
-              style={{ width: 16, height: 16 }}
+              style={{ width: 20, height: 20, tintColor: message.reaction === FeedbackAction.DISLIKE ? "#D0021B" : "#020001" }}
             />
           </Pressable>
         </View>
@@ -190,6 +182,14 @@ const styles = StyleSheet.create({
   borderButtonHover: {
     backgroundColor: "#EDEDF2",
   },
+  borderButtonLike: {
+    backgroundColor: "#DBFFE4",
+    borderColor: "#00B140",
+  },
+  borderButtonDislike: {
+    backgroundColor: "#FFE2E0",
+    borderColor: "#D0021B",
+  },
   timeText: {
     fontSize: 12,
     color: "#666",

package/src/components/ProductsList.tsx

@@ -4,10 +4,11 @@ import ProductsListView from "./ProductsListView";
 
 interface ProductsListProps {
   data: any[];
-  onViewAll?: () => void;
+  onViewAll?: (item: any) => void;
   onItemPress?: (item: any) => void;
   variant?: "grid" | "list";
-  totalResults: number
+  totalResults: number;
+  item: any;
 }
 
 const ProductsList: React.FC<ProductsListProps> = ({
@@ -16,20 +17,30 @@ const ProductsList: React.FC<ProductsListProps> = ({
   onItemPress,
   variant = "list",
   totalResults,
+  item,
 }) => {
   if (!data || !data.length) return null;
   if (variant === "list") {
     return (
       <ProductsListView
         data={data}
+        // @ts-ignore
         onViewAll={onViewAll}
         onItemPress={onItemPress}
         totalResults={totalResults}
+        item={item}
       />
     );
   }
   return (
-    <ProductsGrid data={data} onViewAll={onViewAll} onItemPress={onItemPress} totalResults={totalResults} />
+    <ProductsGrid
+      data={data}
+      // @ts-ignore
+      onViewAll={onViewAll}
+      onItemPress={onItemPress}
+      totalResults={totalResults}
+      item={item}
+    />
   );
 };