vdb-ai-chat 1.0.1 → 1.0.3

package/src/components/ProductsList.tsx

@@ -1,162 +1,36 @@
-import {
-  View,
-  Image,
-  StyleSheet,
-  Text,
-  ScrollView,
-  TouchableOpacity,
-  Platform,
-} from "react-native";
-import React, { memo } from "react";
-
-// Use expo-image on native if available, fallback to RN Image
-let ImageComponent: typeof Image = Image;
-if (Platform.OS !== "web") {
-  try {
-    const ExpoImage = require("expo-image").Image;
-    if (ExpoImage) ImageComponent = ExpoImage;
-  } catch {
-    // expo-image not installed, use React Native Image
-  }
-}
+import React from "react";
+import ProductsGrid from "./ProductsGrid";
+import ProductsListView from "./ProductsListView";
 
 interface ProductsListProps {
-  data: any;
+  data: any[];
   onViewAll?: () => void;
   onItemPress?: (item: any) => void;
+  variant?: "grid" | "list";
+  totalResults: number
 }
 
-const ProductsListComponent: React.FC<ProductsListProps> = ({
+const ProductsList: React.FC<ProductsListProps> = ({
   data,
   onViewAll,
   onItemPress,
+  variant = "list",
+  totalResults,
 }) => {
   if (!data || !data.length) return null;
-
+  if (variant === "list") {
+    return (
+      <ProductsListView
+        data={data}
+        onViewAll={onViewAll}
+        onItemPress={onItemPress}
+        totalResults={totalResults}
+      />
+    );
+  }
   return (
-    <View style={styles.wrapper}>
-      <ScrollView
-        horizontal
-        showsHorizontalScrollIndicator={false}
-        contentContainerStyle={styles.listContent}
-      >
-        {data.map((item: any) => (
-          <TouchableOpacity
-            key={item.id}
-            onPress={() => {
-              onItemPress?.(item);
-            }}
-          >
-            <View key={item.id} style={styles.card}>
-              {item.image_thumb_url ? (
-                <ImageComponent
-                  style={styles.image}
-                  source={{ uri: item.image_thumb_url }}
-                />
-              ) : null}
-
-              <View style={styles.content}>
-                <Text numberOfLines={2} style={styles.title}>
-                  {item.short_title}
-                </Text>
-                <Text style={styles.price}>${item.total_sales_price}</Text>
-              </View>
-            </View>
-          </TouchableOpacity>
-        ))}
-      </ScrollView>
-
-      {/* View All Button */}
-      <TouchableOpacity
-        style={styles.button}
-        activeOpacity={0.8}
-        onPress={onViewAll}
-      >
-        <Text style={styles.buttonText}>View All {">>"}</Text>
-      </TouchableOpacity>
-    </View>
+    <ProductsGrid data={data} onViewAll={onViewAll} onItemPress={onItemPress} totalResults={totalResults} />
   );
 };
 
-const styles = StyleSheet.create({
-  wrapper: {
-    paddingHorizontal: 12,
-    marginHorizontal: 12,
-    marginBottom: 12,
-    paddingTop: 6,
-    paddingBottom: 14,
-    backgroundColor: "#fff",
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: "#e8e8e8",
-    elevation: 3,
-    shadowColor: "#000",
-    shadowOpacity: 0.08,
-    shadowOffset: { width: 0, height: 2 },
-    shadowRadius: 6,
-  },
-
-  listContent: {
-    gap: 12,
-    paddingVertical: 6,
-  },
-
-  card: {
-    width: 150,
-    backgroundColor: "#fff",
-    borderRadius: 14,
-    overflow: "hidden",
-    borderColor: "#e8e8e8",
-    borderWidth: 1,
-    elevation: 3,
-    shadowColor: "#000",
-    shadowOpacity: 0.08,
-    shadowOffset: { width: 0, height: 2 },
-    shadowRadius: 6,
-  },
-
-  image: {
-    width: "100%",
-    height: 120,
-    borderBottomWidth: 1,
-    borderBottomColor: "#e8e8e8",
-  },
-
-  content: {
-    padding: 10,
-    gap: 4,
-  },
-
-  title: {
-    fontSize: 13,
-    color: "#222",
-    fontWeight: "500",
-  },
-
-  price: {
-    marginTop: 4,
-    fontSize: 14,
-    fontWeight: "700",
-    color: "#000",
-  },
-
-  button: {
-    marginTop: 12,
-    alignSelf: "center",
-    paddingHorizontal: 20,
-    paddingVertical: 8,
-    backgroundColor: "#804195",
-    borderRadius: 20,
-    width: 300,
-    alignItems: "center",
-  },
-
-  buttonText: {
-    color: "#fff",
-    fontSize: 14,
-    fontWeight: "600",
-  },
-});
-
-const ProductsList = memo(ProductsListComponent);
 export default ProductsList;

package/src/components/ProductsListView.tsx

@@ -0,0 +1,149 @@
+import React, { memo, useState } from "react";
+import { View, StyleSheet, Text, TouchableOpacity, ScrollView, Platform, Image } from "react-native";
+
+let ImageComponent: typeof Image = Image;
+if (Platform.OS !== "web") {
+	try {
+		const ExpoImage = require("expo-image").Image;
+		if (ExpoImage) ImageComponent = ExpoImage;
+	} catch {
+		// expo-image not installed, use React Native Image
+	}
+}
+
+interface ProductsListViewProps {
+	data: any[];
+	totalResults?: number;
+	onViewAll?: () => void;
+	onItemPress?: (item: any) => void;
+}
+
+const ProductsListViewComponent: React.FC<ProductsListViewProps> = ({ data, totalResults, onViewAll, onItemPress }) => {
+	if (!data || !data.length) return null;
+
+	const [priceWidth, setPriceWidth] = useState<number>(0);
+
+	return (
+		<View style={styles.wrapper}>
+			<ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={styles.listContent}>
+				{data.map((item: any, index: number) => (
+					<TouchableOpacity key={item.id} onPress={() => onItemPress?.(item)} activeOpacity={0.8}>
+						<View style={styles.row}>
+							<View style={styles.left}>
+								<Text style={styles.serial}>{index + 1}.</Text>
+								<Text
+									numberOfLines={1}
+									ellipsizeMode="tail"
+									style={styles.title}
+								>
+									{item.short_title}
+								</Text>
+							</View>
+							{item.total_sales_price ? (
+								<View style={[styles.priceContainer, priceWidth ? { width: priceWidth } : null]}>
+									<Text
+										style={styles.price}
+										onLayout={(e) => {
+											const w = e.nativeEvent.layout.width;
+											if (w > priceWidth) setPriceWidth(w);
+										}}
+									>
+										${item.total_sales_price}
+									</Text>
+								</View>
+							) : (
+								<></>
+							)}
+						</View>
+					</TouchableOpacity>
+				))}
+			</ScrollView>
+
+			<TouchableOpacity style={styles.button} activeOpacity={0.8} onPress={onViewAll}>
+				<Text style={styles.buttonText}>{`View All ${totalResults} Results`}</Text>
+				<Image
+					source={{
+						uri: "https://cdn.vdbapp.com/ai/chat-widget/assets/img/right.svg",
+					}}
+					resizeMode="contain"
+					style={{ width: 20, height: 20, tintColor: "#fff" }}
+				/>
+			</TouchableOpacity>
+		</View>
+	);
+};
+
+const styles = StyleSheet.create({
+	wrapper: {
+		paddingHorizontal: 8,
+	},
+
+	listContent: {
+		// No extra padding/margins
+	},
+
+	row: {
+		flexDirection: "row",
+		justifyContent: "space-between",
+		alignItems: "center",
+		paddingVertical: 6,
+		backgroundColor: "#fff",
+	},
+
+	left: {
+		flexDirection: "row",
+		alignItems: "center",
+		gap: 4,
+		flex: 1,
+		minWidth: 0,
+	},
+
+	serial: {
+		fontSize: 13,
+		color: "#020001",
+		fontWeight: "500",
+	},
+
+	title: {
+		flexShrink: 1,
+		fontSize: 13,
+		color: "#3378F6",
+		fontWeight: "500",
+	},
+
+	price: {
+		fontSize: 13,
+		fontWeight: "500",
+		color: "#020001",
+		textAlign: "left",
+	},
+	priceContainer: {
+		alignItems: "flex-start",
+		justifyContent: "center",
+	},
+
+	button: {
+		marginTop: 12,
+		marginHorizontal: 12,
+		alignSelf: "center",
+		paddingHorizontal: 16,
+		paddingVertical: 6,
+		backgroundColor: "#292735",
+		borderRadius: 8,
+		alignItems: "center",
+		gap: 16,
+		width: "100%",
+		flexDirection: "row",
+		justifyContent: "center",
+		alignContent: "center",
+	},
+
+	buttonText: {
+		color: "#fff",
+		fontSize: 14,
+		fontWeight: "600",
+	},
+});
+
+const ProductsListView = memo(ProductsListViewComponent);
+export default ProductsListView;

package/src/components/SuggestionsRow.tsx

@@ -10,62 +10,91 @@ import {
 interface SuggestionsRowProps {
   suggestions: string[];
   onSelect: (value: string) => void;
+  /** Inline variant renders inside a message bubble, without outer padding/background */
+  variant?: "inline" | "default";
 }
 
 const SuggestionsRowComponent: React.FC<SuggestionsRowProps> = ({
   suggestions,
   onSelect,
+  variant = "default",
 }) => {
   if (!suggestions.length) return null;
-
+  const ScrollViewComponent = variant === "inline" ? View : ScrollView;
   return (
-    <ScrollView
-      horizontal
-      showsHorizontalScrollIndicator={false}
-      contentContainerStyle={styles.container}
+    <ScrollViewComponent
+      showsVerticalScrollIndicator={false}
+      contentContainerStyle={[
+        styles.container,
+        variant === "inline" && styles.containerInline,
+      ]}
+      style={[styles.scroll, variant === "inline" && styles.scrollInline]}
     >
-      {suggestions.map((s) => (
-        <TouchableOpacity
-          key={s}
-          style={styles.chip}
-          onPress={() => onSelect(s)}
-          activeOpacity={0.75}
-        >
-          <Text style={styles.chipText}>{s}</Text>
-        </TouchableOpacity>
+      {suggestions.map((s, index) => (
+        <>
+          <TouchableOpacity
+            key={`${s}-${index}`}
+            style={[styles.chip, variant === "inline" && styles.chipInline]}
+            onPress={() => onSelect(s)}
+            activeOpacity={0.75}
+          >
+            <Text style={styles.chipText}>{s}</Text>
+          </TouchableOpacity>
+          {index < suggestions.length - 1 && <View style={styles.spacer} />}
+        </>
       ))}
-    </ScrollView>
+    </ScrollViewComponent>
   );
 };
 
 const styles = StyleSheet.create({
+  scroll: {
+    maxWidth: "80%",
+    alignSelf: "flex-start",
+    paddingHorizontal: 8,
+  },
+  scrollInline: {
+    maxWidth: "100%",
+    alignSelf: "stretch",
+    paddingHorizontal: 0,
+  },
   container: {
-    paddingHorizontal: 12,
-    paddingBottom: 8,
-    flexDirection: "row",
-    gap: 10,
+    paddingVertical: 0,
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: 4,
+    alignSelf: "stretch",
+    // backgroundColor: "#EDEDF2",
+  },
+  containerInline: {
+    // inside bubble, rely on bubble background
+    gap: 6,
   },
 
   chip: {
-    backgroundColor: "#ffffff",
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-    borderRadius: 18,
-
-    // Modern soft shadow (Material 3 / iOS style)
-    shadowColor: "#000",
-    shadowOpacity: 0.07,
-    shadowRadius: 4,
-    shadowOffset: { width: 0, height: 2 },
-
-    elevation: 2,
+    backgroundColor: "#EDEDF2",
+    borderRadius: 6,
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    width: "100%",
+    alignSelf: "stretch",
+    justifyContent: "center",
+    alignItems: "flex-start",
+  },
+  chipInline: {
+    backgroundColor: "#FFFFFF",
   },
 
   chipText: {
     fontSize: 14,
     color: "#1A1A1A",
     fontWeight: "500",
-    letterSpacing: 0.3,
+    textAlign: "left",
+  },
+  spacer: {
+    width: 4,
+    height: 4,
   },
 });
 

package/src/components/utils.ts

@@ -31,12 +31,13 @@ export const fetchConversationId = async (
   if (!conversations) return null;
 
   let priceMode = _priceMode;
-  if (!priceMode) {
-    const userData = await Storage.getJSON<{ price_mode?: string }>(
-      "userData",
+  if (priceMode === undefined) {
+    const userInfo = await Storage.getJSON<UserDetails>(
+      "persist:userInfo",
       {}
     );
-    priceMode = userData?.price_mode || "";
+    const userData = userInfo?.user as UserDetails;
+    priceMode = String(userData?.price_mode) || "";
   }
   return conversations[priceMode]?.conversation_id || null;
 };
@@ -51,6 +52,7 @@ export interface UserDetails {
   country?: string;
   price_mode?: string | number;
   plan_details?: any;
+  user?: any;
 }
 
 export const getUserDetails = async (): Promise<UserDetails | null> => {

package/src/hooks/useInViewport.ts

@@ -0,0 +1,38 @@
+import { useEffect, useRef, useState } from "react";
+import { Platform } from "react-native";
+
+export function useInViewport<T extends HTMLElement>() {
+  const ref = useRef<T | null>(null);
+  const [inView, setInView] = useState(false);
+
+  useEffect(() => {
+    // On native, treat as in view to avoid DOM-specific code
+    if (Platform.OS !== "web") {
+      setInView(true);
+      return;
+    }
+
+    const node = ref.current as unknown as Element | null;
+    if (!node || typeof IntersectionObserver === "undefined") {
+      // Fallback: consider it in view so functionality still works
+      setInView(true);
+      return;
+    }
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0];
+        setInView(entry.isIntersecting);
+      },
+      { root: null, rootMargin: "0px", threshold: 0.1 }
+    );
+
+    observer.observe(node);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  return { ref, inView } as const;
+}

package/src/index.web.tsx

@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
+import { Platform, StyleSheet, View } from "react-native";
 import { createRoot } from "react-dom/client";
-import { View, StyleSheet, Platform } from "react-native";
+import { AnalyticsBrowser } from "@segment/analytics-next";
+import { AnalyticsClientProvider } from "./contexts/AnalyticsClientContext";
 import { ChatWidget } from "./components/ChatWidget";
 import type { ChatTheme } from "./types";
-import { Analytics } from "@segment/analytics-next";
-import { AnalyticsClientProvider } from "./contexts/AnalyticsClientContext";
+import { getUserDetails } from "./components/utils";
 
 export function renderChatApp(
   domElement: HTMLElement,
@@ -13,31 +14,45 @@ export function renderChatApp(
   onClose?: () => void,
   onClearChat?: () => void,
   segmentWriteKey?: string,
+  onViewAllPress?: (url: string, payload: any) => void,
+  onItemPress?: (url: string, item: any) => void,
+  isBetaMode?: boolean,
 ) {
   const root = createRoot(domElement);
-  let analyticsClient: Analytics | undefined;
-  if (Platform.OS === "web" && segmentWriteKey) {
-    try {
-      const client = new Analytics({ writeKey: segmentWriteKey });
-      
-      analyticsClient = client;
-      (window as any).analytics = client;
-      client
-        .track("AI Chat: Widget Loaded", {
-          userAgent:
-            typeof navigator !== "undefined" ? navigator.userAgent : "",
-        })
-        .then?.(() => {
-          // eslint-disable-next-line no-console
-          console.log("Segment: Widget Loaded event sent");
-        })
-        .catch((e: unknown) => {
-          console.warn("Segment track failed", e);
-        });
-    } catch (e) {
-      console.warn("Segment analytics load failed", e);
+
+  // Bridge to parent RN WebView / browser
+  const sendToParent = (type: string, payload: any) => {
+    const msg = { source: "vdb-ai-chat", type, payload };
+    const json = JSON.stringify(msg);
+
+    // RN WebView bridge
+    const rnwv = (window as any).ReactNativeWebView;
+    if (rnwv?.postMessage) {
+      rnwv.postMessage(json);
+    } else {
+      // Browser/iframe
+      try {
+        window.parent?.postMessage(msg, "*");
+      } catch {}
+      try {
+        window.dispatchEvent(new CustomEvent("vdb-ai-event", { detail: msg }));
+      } catch {}
     }
-  }
+  };
+
+  const handleViewAll = (url: string, payload: any) => {
+    onViewAllPress?.(url, payload);
+    sendToParent("ai_view_all", { url, payload });
+    onClose?.();
+  };
+
+  const handleItemPress = (url: string, item: any) => {
+    onItemPress?.(url, item);
+    sendToParent("ai_item_click", { url, item });
+    onClose?.();
+  };
+
+  // Build base content and render immediately
   const content = (
     <View style={styles.root}>
       <ChatWidget
@@ -45,16 +60,56 @@ export function renderChatApp(
         theme={theme}
         onClose={onClose}
         onClearChat={onClearChat}
+        onViewAllPress={handleViewAll}
+        onItemPress={handleItemPress}
+        isBetaMode={isBetaMode}
       />
     </View>
   );
-  const contentWithAnalytics = analyticsClient ? (
-    <AnalyticsClientProvider client={analyticsClient}>{content}</AnalyticsClientProvider>
-  ) : (
-    content
-  );
+  root.render(content);
+
+  if (Platform.OS === "web" && segmentWriteKey) {
+    try {
+      const isEdge =
+        typeof navigator !== "undefined" &&
+        (navigator.userAgent.includes("Edg") || navigator.userAgent.includes("Edge"));
+
+      const clientPromise = AnalyticsBrowser.load({
+        writeKey: segmentWriteKey,
+        trackAppLifecycleEvents: false as any,
+        flushAt: (isEdge ? 1 : 10) as any,
+        flushInterval: (10000 as any),
+        maxBatchSize: (isEdge ? 1 : 10) as any,
+      } as any);
+
+      clientPromise
+        .then( async ([client]: any) => {
+          (client as any)?.debug?.(true);
+          (window as any).analytics = client;
 
-  root.render(contentWithAnalytics);
+          client.page?.();
+          try {
+            const user = await getUserDetails();
+            const userId = user?.id;
+            if (userId) client.identify(userId);
+          } catch {}
+
+          const contentWithAnalytics = (
+            <AnalyticsClientProvider client={client}>
+              {content}
+            </AnalyticsClientProvider>
+          );
+          root.render(contentWithAnalytics);
+        })
+        .catch((e: any) => {
+          // eslint-disable-next-line no-console
+          console.error("[Segment] init failed", e);
+        });
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error("[Segment] init failed", e);
+    }
+  }
 }
 
 const styles = StyleSheet.create({

package/src/theme.ts

@@ -4,14 +4,14 @@ export const defaultTheme: ChatTheme = {
   primaryColor: "#0b93f6",
   backgroundColor: "#ffffff",
   inputColor: "#FFF",
-  inputBackgroundColor: "#f5f5f5",
+  inputBackgroundColor: "#FFFFFF",
   inputBorderRadius: 8,
   inputTextColor: "#000000",
-  userBubbleColor: "#804195",
+  userBubbleColor: "#4F4E57",
   userTextColor: "#ffffff",
-  botBubbleColor: "#e5e5ea",
+  botBubbleColor: "#EDEDF2",
   botTextColor: "#000000",
-  borderRadius: 18,
+  borderRadius: 8,
   fontFamily: undefined,
   fontSize: 16,
 };