vdb-ai-chat 1.0.0 → 1.0.2

package/src/components/ProductsList.tsx

@@ -1,160 +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}>
-              <ImageComponent
-                style={styles.image}
-                source={{ uri: item.image_thumb_url }}
-              />
-
-              <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,24 +10,30 @@ 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;
 
   return (
     <ScrollView
-      horizontal
-      showsHorizontalScrollIndicator={false}
-      contentContainerStyle={styles.container}
+      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}
+          style={[styles.chip, variant === "inline" && styles.chipInline]}
           onPress={() => onSelect(s)}
           activeOpacity={0.75}
         >
@@ -39,33 +45,51 @@ const SuggestionsRowComponent: React.FC<SuggestionsRowProps> = ({
 };
 
 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: 4,
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    width: "100%",
+    alignSelf: "stretch",
+    justifyContent: "center",
+    alignItems: "flex-start",
+    borderWidth: 1,
+    borderColor: "#E0E0E0",
+  },
+  chipInline: {
+    backgroundColor: "#FFFFFF",
   },
 
   chipText: {
     fontSize: 14,
     color: "#1A1A1A",
     fontWeight: "500",
-    letterSpacing: 0.3,
+    textAlign: "left",
   },
 });
 

package/src/components/utils.ts

@@ -31,13 +31,74 @@ 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;
 };
+
+export interface UserDetails {
+  id?: string | number;
+  email?: string;
+  first_name?: string;
+  last_name?: string;
+  company?: string;
+  company_id?: string | number;
+  country?: string;
+  price_mode?: string | number;
+  plan_details?: any;
+  user?: any;
+}
+
+export const getUserDetails = async (): Promise<UserDetails | null> => {
+  try {
+    const stored = await Storage.getJSON<{ user?: string | UserDetails }>(
+      "persist:userInfo",
+      {}
+    );
+    if (!stored?.user) return null;
+
+    // If user is stored as a JSON string, parse it
+    if (typeof stored.user === "string") {
+      try {
+        return JSON.parse(stored.user) as UserDetails;
+      } catch {
+        return null;
+      }
+    }
+
+    return stored.user as UserDetails;
+  } catch {
+    return null;
+  }
+};
+
+export enum DeviceType {
+  WEB = "web",
+  IOS = "ios",
+  ANDROID = "android",
+}
+
+export const getDeviceType = (platform?: string) => {
+  switch (platform) {
+    case DeviceType.WEB:
+      return 0;
+    case DeviceType.IOS:
+      return 1;
+    case DeviceType.ANDROID:
+      return 2;
+    default:
+      return 2;
+  }
+};
+
+export enum AnalyticsEventNames {
+  WIDGET_OPENED = "ai_chat_widget_opened",
+  WIDGET_CLOSED = "ai_chat_widget_closed",
+  CHAT_CLEARED = "ai_chat_cleared",
+}

package/src/contexts/AnalyticsClientContext.tsx

@@ -0,0 +1,20 @@
+import React, { createContext, useContext } from "react";
+import type { Analytics } from "@segment/analytics-next";
+
+export const AnalyticsClientContext = createContext<Analytics | undefined>(
+  undefined
+);
+
+export const useAnalyticsClient = () => useContext(AnalyticsClientContext);
+
+export const AnalyticsClientProvider = ({
+  client,
+  children,
+}: {
+  client: Analytics;
+  children: React.ReactNode;
+}) => (
+  <AnalyticsClientContext.Provider value={client}>
+    {children}
+  </AnalyticsClientContext.Provider>
+);

package/src/hooks/useAnalytics.tsx

@@ -0,0 +1,176 @@
+type JsonMap = Record<string, unknown>;
+import { Platform } from "react-native";
+import { DeviceType, getDeviceType, getUserDetails } from "../components/utils";
+import { useAnalyticsClient } from "../contexts/AnalyticsClientContext";
+
+const getSystemTypeEnum = (deviceType: any) => {
+  let type: string = "web";
+  if (deviceType) {
+    switch (deviceType) {
+      case "Linux":
+        type = "android";
+        break;
+      case "iPhone":
+        type = "ios";
+        break;
+      default:
+        type = "web";
+        break;
+    }
+  } else {
+    type = String(Platform.OS);
+  }
+  return getDeviceType(type).toString();
+};
+
+export const formatOSName = (rawOsName: string) => {
+  if (!rawOsName) return "";
+
+  const osName = rawOsName.toLowerCase();
+
+  const osMap = {
+    android: "Android",
+    ios: "iOS",
+    ipad: "iPadOS",
+    ipados: "iPadOS",
+    windows: "Windows",
+    macos: "macOS",
+    mac: "macOS",
+    linux: "Linux",
+    web: "Web",
+    tizen: "Tizen",
+    harmonyos: "HarmonyOS",
+    fireos: "Fire OS",
+  };
+
+  for (const key of Object.keys(osMap) as Array<keyof typeof osMap>) {
+    if (osName.includes(key)) {
+      return osMap[key];
+    }
+  }
+
+  return rawOsName.charAt(0).toUpperCase() + rawOsName.slice(1);
+};
+
+export const getUserAnalyticsPayload = async () => {
+  const user = await getUserDetails();
+  const deviceDetails =
+    Platform.OS === "web"
+      ? {
+          system_type_enum: getSystemTypeEnum(null),
+          platform_action_enum: "0",
+        }
+      : {};
+  return {
+    user_company_id: user?.company_id?.toString(),
+    user_company_name: user?.company,
+    user_email: user?.email,
+    user_id: user?.id?.toString(),
+    user_name: user?.first_name
+      ? `${user?.first_name} ${user?.last_name}`
+      : undefined,
+    user_price_mode: user?.price_mode?.toString(),
+    price_mode: user?.price_mode?.toString(),
+    has_plan_details: user?.plan_details ? true : false,
+    userAgent: Platform.OS === "web" ? navigator.userAgent : "",
+    ...deviceDetails,
+  };
+};
+
+export const isSegmentUserAgent = (userAgent: string) => {
+  if (!userAgent) return false;
+
+  // Regex to match Segment's specific Safari-like pattern
+  const segmentPattern =
+    /^Mozilla\/5\.0 \([^;]+; CPU [^)]+ like Mac OS X\) AppleWebKit\/600\.1\.4 \(KHTML, like Gecko\) Version\/\d\.0 Mobile\/10B329 Safari\/8536\.25$/;
+
+  return segmentPattern.test(userAgent);
+};
+
+export function isBot(userAgent = "") {
+  if (!userAgent && Platform.OS === "web") return true;
+
+  const botPatterns = [
+    /bot/i, // "Googlebot", "Bingbot"
+    /crawl/i, // "crawler"
+    /spider/i, // "spider"
+    /HeadlessChrome/i, // Puppeteer/Headless
+    /PhantomJS/i, // Old automation
+    /slurp/i, // Yahoo Slurp bot
+    /curl/i, // CLI traffic
+    /wget/i, // CLI downloads
+    /httpclient/i, // Generic clients
+  ];
+
+  return botPatterns.some((pattern) => pattern.test(userAgent));
+}
+
+export const useUserAnalytics = () => {
+  // This will return undefined if not wrapped in provider, which is fine
+  const analyticsClient = useAnalyticsClient();
+
+  const _track = async (eventName: string, options: any) => {
+    const userAnalyticsPayload = await getUserAnalyticsPayload();
+    if (isSegmentUserAgent(userAnalyticsPayload?.userAgent)) {
+      console.warn(
+        "Skipping tracking for Segment user agent:",
+        userAnalyticsPayload.userAgent
+      );
+      return;
+    }
+    if (isBot(userAnalyticsPayload?.userAgent)) {
+      console.warn(
+        "Skipping tracking for bot user agent:",
+        userAnalyticsPayload.userAgent
+      );
+      return;
+    }
+    const client = analyticsClient || (window as any).analytics;
+    if (!client) return;
+    
+    const user = await getUserDetails();
+    if (!user?.id) {
+      console.error(
+        "Track Event tracked without user:",
+        eventName,
+        JSON.stringify(options)
+      );
+      console.error(
+        "Can't identify as user is not logged in",
+        JSON.stringify(user)
+      );
+    } else {
+      await client.identify(`${user.id}`, {
+        name: `${user.first_name} ${user.last_name}`,
+        email: user.email,
+        country: user.country,
+      });
+    }
+    await client.track(eventName, {
+      ...userAnalyticsPayload,
+      ...options,
+    });
+  };
+
+  const _identify = async (userId?: string, userTraits?: JsonMap) => {
+    const client = analyticsClient || (window as any).analytics;
+    if (!client) return;
+    await client.identify(userId, userTraits);
+  };
+
+  const trackEvent = async (eventName: string, options: any) => {
+    const userAnalyticsPayload = await getUserAnalyticsPayload();
+    const client = analyticsClient || (window as any).analytics;
+    if (!client) return;
+    await client.track(eventName, {
+      ...userAnalyticsPayload,
+      ...options,
+    });
+  };
+
+  return {
+    trackEvent,
+    _identify,
+    _track,
+  };
+};