vdb-ai-chat 1.0.4 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vdb-ai-chat",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "Cross-platform AI chat widget for React Native and Web",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -40,11 +40,11 @@
     "url": ""
   },
   "peerDependencies": {
-    "react": ">=17.0.0",
-    "react-native": ">=0.64.0",
-    "expo-image": ">=1.0.0",
     "@segment/analytics-next": ">=1.0.0",
-    "@segment/analytics-react-native": ">=2.0.0"
+    "@segment/analytics-react-native": ">=2.0.0",
+    "expo-image": ">=1.0.0",
+    "react": ">=17.0.0",
+    "react-native": ">=0.64.0"
   },
   "peerDependenciesMeta": {
     "react-native": {
@@ -61,7 +61,8 @@
     }
   },
   "dependencies": {
-    "react-native-web": "^0.19.13"
+    "react-native-web": "^0.19.13",
+    "react-responsive": "^10.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.26.0",

package/src/api.ts

@@ -1,4 +1,4 @@
-import { FeedbackAction } from "./components/utils";
+import { FeedbackAction, UserDetails } from "./components/utils";
 import { Storage } from "./storage";
 import type { ChatMessage } from "./types";
 
@@ -6,7 +6,9 @@ import type { ChatMessage } from "./types";
 export type ChatApiParams = Record<string, any>;
 
 async function buildHeaders() {
-  const token = (await Storage.getItem("token")) || "";
+  const userInfo = await Storage.getJSON<UserDetails>("persist:userInfo", {});
+  const userData = JSON.parse(userInfo?.user || "{}");
+  const token = userData?.token || "";
   const iid = (await Storage.getItem("persist:appState")) || "{}";
   let installationId = "";
   try {
@@ -41,7 +43,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,
   }));
@@ -168,7 +170,50 @@ export async function clearChatHistory(
   await Storage.setJSON("vdbchat_conversations", updatedConversations);
 }
 
-export async function getProducts(params: ChatApiParams): Promise<any> {
+export async function getProducts(
+  params: ChatApiParams,
+  priceMode: string | null
+): Promise<any> {
+  const userInfo = await Storage.getJSON<UserDetails>("persist:userInfo", {});
+  const { activeProduct } = JSON.parse(
+    (await Storage.getItem("persist:appState")) || "{}"
+  ) as { activeProduct?: string };
+  const searchResultViewTypeMap = JSON.parse(
+    userInfo?.searchResultViewType || "{}"
+  );
+  const searchResultViewType =
+    searchResultViewTypeMap?.[activeProduct ?? "default"];
+  const rawState = JSON.parse(
+    (await Storage.getItem("persist:searchFilters")) || "{}"
+  );
+
+  const sectionName =
+    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",
     {
@@ -177,9 +222,15 @@ export async function getProducts(params: ChatApiParams): Promise<any> {
       body: JSON.stringify({
         vdb: {
           ...params,
+          ...queryParamList,
           page_size: 5,
-          price_mode: 1,
-          vdb_setting: "true",
+          price_mode: priceMode,
+          vdb_setting: vdbSetting ? "true" : "false",
+          results_view_type: searchResultViewType || "grid",
+          featured: "false",
+          pair: sectionName === "Single Stones" ? "other" : "pair",
+          with_available_items: false,
+          page_number: 1,
         },
       }),
     }

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

@@ -38,6 +38,7 @@ import {
   FeedbackAction,
   formatToTime,
   getUserDetails,
+  useDeviceType,
   UserDetails,
 } from "./utils";
 import { useUserAnalytics } from "../hooks/useAnalytics";
@@ -69,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()
@@ -86,13 +85,19 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
     const theme = useMemo(() => mergeTheme(themeOverrides), [themeOverrides]);
     const { _identify } = useUserAnalytics();
     const betaActive = Boolean(isBetaModeProp);
+    const { isTablet } = useDeviceType();
     const noResultsText =
       "No results found for your search. Try adjusting your filters or query.";
     useEffect(() => {
       const loadAuthData = async () => {
         try {
           if (!userTokenProp) {
-            const token = await Storage.getItem("token");
+            const userInfo = await Storage.getJSON<UserDetails>(
+              "persist:userInfo",
+              {}
+            );
+            const userData = JSON.parse(userInfo?.user || "{}");
+            const token = userData?.token || "";
             if (token) {
               setUserToken(token);
             }
@@ -104,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"
@@ -121,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) => {
@@ -213,6 +217,7 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
                   "Search Natural Diamonds",
                   "Search Lab-Grown Diamonds",
                 ],
+                search_payload: {},
                 reaction: "0",
               };
               setMessages([initialAssistant]);
@@ -260,6 +265,7 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
           createdAt: Date.now(),
           reaction: "0",
           isLoading: true,
+          search_payload: {},
         };
 
         setMessages((prev) => [...prev, userMessage, loadingMessage]);
@@ -296,8 +302,6 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
             (m) => m.role === "assistant"
           );
 
-          setAssistantResponse(latestAssistant);
-
           if (latestAssistant?.text) {
             if (
               latestAssistant?.search_payload &&
@@ -305,7 +309,8 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
               Object.keys(latestAssistant.search_payload).length > 0
             ) {
               const productsResult = await getProducts(
-                latestAssistant.search_payload
+                latestAssistant.search_payload,
+                priceMode as string
               );
 
               const hasDiamonds =
@@ -328,6 +333,7 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
                           id: latestAssistant?.id ?? msg.id,
                           text: noResultsText,
                           isLoading: false,
+                          search_payload: latestAssistant.search_payload ?? {},
                         }
                       : msg
                   )
@@ -351,6 +357,7 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
                       text: "",
                       isLoading: false,
                       suggestions: latestAssistant.suggestions,
+                      search_payload: latestAssistant.search_payload ?? {},
                     }
                   : msg
               )
@@ -425,7 +432,7 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
         setReloadLoadingIds((prev) => new Set(prev).add(id));
         const payload = msg?.search_payload;
         if (!payload || Object.keys(payload).length === 0) return;
-        const productsResult = await getProducts(payload);
+        const productsResult = await getProducts(payload, priceMode as string);
         setProductsByMsg((prev) => ({ ...prev, [id]: productsResult }));
       } catch (e) {
         console.error("Reload results failed", e);
@@ -482,7 +489,6 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
           await Storage.setJSON("vdbchat_conversations", updatedConversations);
         }
         setMessages([]);
-        setAssistantResponse(undefined);
         setProductsByMsg({});
         setReloadLoadingIds(new Set());
         setLoading(false);
@@ -504,6 +510,7 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
               "Search Lab-Grown Diamonds",
             ],
             reaction: "0",
+            search_payload: {},
           };
           setMessages([initialAssistant]);
         } else {
@@ -613,7 +620,16 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
           <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
@@ -625,9 +641,14 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
               ...styles.listContent,
               justifyContent: messages.length === 0 ? "center" : "flex-end",
               minHeight: modalHeight ? modalHeight : undefined,
+              ...(isTablet
+                ? { maxWidth: 608, alignSelf: "center", width: "100%" }
+                : {}),
             }}
             onContentSizeChange={() => {
-              scrollRef.current?.scrollToEnd({ animated: false });
+              if (autoScroll) {
+                scrollRef.current?.scrollToEnd({ animated: false });
+              }
             }}
           >
             <View style={styles.emptyContainer}>
@@ -673,6 +694,7 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
                       Object.keys(item.search_payload).length > 0 &&
                       !productsByMsg[item.id] && (
                         <LazyProductsFetcher
+                          priceMode={priceMode as string}
                           messageId={item.id}
                           payload={item.search_payload}
                           onFetched={(id, result) => {
@@ -719,6 +741,7 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
                         }
                         onViewAll={onViewAll}
                         onItemPress={onItemPress}
+                        item={item}
                       />
                     )}
                     {/* Suggestions are now rendered inside MessageBubble */}
@@ -735,7 +758,15 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
               });
             })()}
           </ScrollView>
-          <View style={styles.bottomContainer}>
+          <View style={styles.borderTop} />
+          <View
+            style={[
+              styles.bottomContainer,
+              isTablet
+                ? { maxWidth: 608, alignSelf: "center", width: "100%" }
+                : {},
+            ]}
+          >
             <ChatInput
               value={input}
               onChangeText={setInput}
@@ -783,12 +814,14 @@ const styles = StyleSheet.create({
   bottomContainer: {
     paddingVertical: 12,
     paddingHorizontal: 16,
-    borderTopColor: "#E0E0E0",
-    borderTopWidth: 1,
     flexDirection: "column",
     justifyContent: "space-between",
     alignItems: "center",
     alignSelf: "stretch",
     gap: 12,
   },
+  borderTop: {
+    borderTopColor: "#E0E0E0",
+    borderTopWidth: 1,
+  },
 });

package/src/components/LazyProductsFetcher.tsx

@@ -7,12 +7,14 @@ interface LazyProductsFetcherProps {
   messageId: string;
   payload: Record<string, any> | undefined | null;
   onFetched: (messageId: string, data: any) => void;
+  priceMode: string | null;
 }
 
 const LazyProductsFetcher: React.FC<LazyProductsFetcherProps> = ({
   messageId,
   payload,
   onFetched,
+  priceMode,
 }) => {
   const { ref, inView } = useInViewport<HTMLDivElement>();
   const fetchedRef = useRef(false);
@@ -25,14 +27,14 @@ const LazyProductsFetcher: React.FC<LazyProductsFetcherProps> = ({
     fetchedRef.current = true;
     (async () => {
       try {
-        const result = await getProducts(payload);
+        const result = await getProducts(payload, priceMode as string);
         onFetched(messageId, result);
       } catch (e) {
         // eslint-disable-next-line no-console
         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}
+    />
   );
 };