vdb-ai-chat 1.0.3 → 1.0.5

package/src/components/ChatWidget.tsx

@@ -38,6 +38,7 @@ import {
   FeedbackAction,
   formatToTime,
   getUserDetails,
+  useDeviceType,
   UserDetails,
 } from "./utils";
 import { useUserAnalytics } from "../hooks/useAnalytics";
@@ -86,13 +87,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);
             }
@@ -305,7 +312,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 =
@@ -425,7 +433,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);
@@ -598,13 +606,13 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
       <View
         style={[styles.container, { backgroundColor: theme.backgroundColor }]}
       >
-        {Platform.OS === "web" && (
+        {/* {Platform.OS === "web" && (
           <ChatHeader
             onClose={onClose}
             onClearChat={handleClearChat}
             isBetaMode={betaActive}
           />
-        )}
+        )} */}
         <KeyboardAvoidingView
           style={{ flex: 1 }}
           behavior={Platform.OS === "ios" ? "padding" : "height"}
@@ -625,6 +633,9 @@ 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 });
@@ -673,6 +684,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) => {
@@ -735,7 +747,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 +803,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;
 }
 
 const LazyProductsFetcher: React.FC<LazyProductsFetcherProps> = ({
   messageId,
   payload,
   onFetched,
+  priceMode,
 }) => {
   const { ref, inView } = useInViewport<HTMLDivElement>();
   const fetchedRef = useRef(false);
@@ -25,7 +27,7 @@ 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

package/src/components/utils.ts

@@ -1,4 +1,8 @@
+import { Dimensions } from "react-native";
 import { Storage } from "../storage";
+import { useMediaQuery } from "react-responsive";
+
+export const DEVICE_SIZE = Dimensions.get("window");
 
 export function formatToTime(timestamp: number): string {
   const date = new Date(timestamp);
@@ -32,10 +36,7 @@ export const fetchConversationId = async (
 
   let priceMode = _priceMode;
   if (priceMode === undefined) {
-    const userInfo = await Storage.getJSON<UserDetails>(
-      "persist:userInfo",
-      {}
-    );
+    const userInfo = await Storage.getJSON<UserDetails>("persist:userInfo", {});
     const userData = userInfo?.user as UserDetails;
     priceMode = String(userData?.price_mode) || "";
   }
@@ -53,6 +54,7 @@ export interface UserDetails {
   price_mode?: string | number;
   plan_details?: any;
   user?: any;
+  searchResultViewType?: string;
 }
 
 export const getUserDetails = async (): Promise<UserDetails | null> => {
@@ -102,3 +104,31 @@ export enum AnalyticsEventNames {
   WIDGET_CLOSED = "ai_chat_widget_closed",
   CHAT_CLEARED = "ai_chat_cleared",
 }
+
+export const isIpad = () => {
+  // const userAgent = navigator.userAgent || navigator.vendor || window.opera;
+  // return (
+  //   /iPad/.test(userAgent) ||
+  //   (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1)
+  // );
+  const userAgent =
+    navigator.userAgent || navigator.vendor || (window as any).opera;
+  return (
+    /iPad/.test(userAgent) ||
+    (/\bMac/.test(userAgent) &&
+      navigator.maxTouchPoints > 0 &&
+      !/iPhone/.test(userAgent))
+  );
+};
+
+export const useDeviceType = () => {
+  const { width } = DEVICE_SIZE;
+  const isMobile = useMediaQuery({ maxWidth: 767 }) || width < 767;
+  const isTablet =
+    useMediaQuery({ minWidth: 767, maxWidth: 1279 }) ||
+    (width > 767 && width <= 1279) ||
+    isIpad();
+  const isDesktop = useMediaQuery({ minWidth: 1279 }) || width > 1279;
+  const isLargeScreen = isDesktop && !isTablet && !isMobile;
+  return { isMobile, isTablet, isDesktop, isLargeScreen };
+};

package/src/storage.ts

@@ -15,10 +15,23 @@ function getLocalStorage(): Storage | null {
   return null;
 }
 
+// Helper to safely get sessionStorage (only available on web)
+function getSessionStorage(): Storage | null {
+  if (typeof window !== "undefined" && window.sessionStorage) {
+    return window.sessionStorage;
+  }
+  return null;
+}
+
 // Web storage implementation using localStorage (lazy access)
 const webStorage: StorageInterface = {
   getItem: async (key: string) => {
     try {
+      // Use sessionStorage for persist:searchFilters key
+      if (key === "persist:searchFilters") {
+        const sessionStore = getSessionStorage();
+        return sessionStore ? sessionStore.getItem(key) : null;
+      }
       const storage = getLocalStorage();
       return storage ? storage.getItem(key) : null;
     } catch {