vdb-ai-chat 1.0.0 → 1.0.1

package/src/components/ChatHeader.tsx

@@ -7,6 +7,8 @@ import {
   Image,
 } from "react-native";
 import React from "react";
+import { useUserAnalytics } from "../hooks/useAnalytics";
+import { AnalyticsEventNames } from "./utils";
 
 // Use expo-image on native if available, fallback to RN Image
 let ImageComponent: typeof Image = Image;
@@ -38,6 +40,7 @@ const ChatHeader = ({
   onClose?: () => void;
   onClearChat?: () => void;
 }) => {
+  const { trackEvent } = useUserAnalytics();
   return (
     <View style={styles.container}>
       <View style={styles.logoContainer}>
@@ -49,12 +52,20 @@ const ChatHeader = ({
         <Text style={styles.title}>AI Search</Text>
       </View>
       <View style={styles.buttonContainer}>
-        <TouchableOpacity onPress={() => onClearChat?.()}>
+        <TouchableOpacity onPress={() => {
+          trackEvent?.(AnalyticsEventNames.CHAT_CLEARED, {});
+            console.log("Segment: Clear Chat tracked");
+            onClearChat?.();
+        }}>
           <Text style={styles.clearChatText}>Clear Chat</Text>
         </TouchableOpacity>
         <TouchableOpacity
           style={styles.closeButton}
-          onPress={() => onClose?.()}
+          onPress={() => {
+            trackEvent?.(AnalyticsEventNames.WIDGET_CLOSED, {});
+              console.log("Segment: Widget Close tracked");
+              onClose?.();
+          }}
         >
           <CloseIcon />
         </TouchableOpacity>

package/src/components/ChatWidget.tsx

@@ -31,7 +31,8 @@ import {
 import ChatHeader from "./ChatHeader";
 import SuggestionsRow from "./SuggestionsRow";
 import ProductsList from "./ProductsList";
-import { FeedbackAction, formatToTime } from "./utils";
+import { FeedbackAction, formatToTime, getUserDetails } from "./utils";
+import { useUserAnalytics } from "../hooks/useAnalytics";
 import { Storage } from "../storage";
 
 export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
@@ -63,10 +64,10 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
     const [assistantResponse, setAssistantResponse] = useState<
       ChatMessage | undefined
     >(undefined);
-    const [products, setProducts] = useState<{
-      messageId: string;
-      data: any;
-    } | null>(null);
+    const [productsByMsg, setProductsByMsg] = useState<Record<string, any>>({});
+    const [reloadLoadingIds, setReloadLoadingIds] = useState<Set<string>>(
+      new Set()
+    );
     const [priceMode, setPriceMode] = useState<string | null>(
       priceModeProp || null
     );
@@ -76,7 +77,7 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
     const scrollRef = useRef<ScrollView | null>(null);
     const inputRef = useRef<TextInput | null>(null);
     const theme = useMemo(() => mergeTheme(themeOverrides), [themeOverrides]);
-
+    const { _identify } = useUserAnalytics();
     // Load user auth data from storage on mount
     useEffect(() => {
       const loadAuthData = async () => {
@@ -104,10 +105,8 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
     }, [userIdProp, userTokenProp]);
 
     const onViewAll = useCallback(() => {
-      const searchPayload = JSON.stringify(
-        assistantResponse?.agent_response?.payload
-      );
-      const payload = assistantResponse?.agent_response?.payload;
+      const searchPayload = JSON.stringify(assistantResponse?.search_payload);
+      const payload = assistantResponse?.search_payload;
       if (!payload) return;
 
       const domain = apiUrl.split("v3");
@@ -231,9 +230,7 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
       async (rawText: string) => {
         const trimmed = rawText.trim();
         if (!trimmed || loading) return;
-        if (products) {
-          setProducts(null);
-        }
+
         const userMessage: ChatMessage = {
           id: `user-${Date.now()}`,
           role: "user",
@@ -289,12 +286,12 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
           if (latestAssistant?.text) {
             // If there is an agent_response, try to fetch products first
             if (
-              latestAssistant?.agent_response &&
-              typeof latestAssistant.agent_response === "object" &&
-              Object.keys(latestAssistant.agent_response).length > 0
+              latestAssistant?.search_payload &&
+              typeof latestAssistant.search_payload === "object" &&
+              Object.keys(latestAssistant.search_payload).length > 0
             ) {
               const productsResult = await getProducts(
-                latestAssistant.agent_response.payload
+                latestAssistant.search_payload
               );
 
               const hasDiamonds =
@@ -311,7 +308,6 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
                 setLoadingMessageId(null);
                 setTypingMessageId(null);
                 setTypingFullText("");
-                setProducts(null);
 
                 setMessages((prev) =>
                   prev.map((msg) =>
@@ -329,7 +325,7 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
                 inputRef.current?.focus();
                 return;
               }
-              setProducts({
+              setProductsByMsg({
                 messageId: latestAssistant.id,
                 data: productsResult,
               });
@@ -386,9 +382,19 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
           inputRef.current?.focus();
         }
       },
-      [apiUrl, loading, messages, apiParams, hasAuth, priceMode, products]
+      [apiUrl, loading, messages, apiParams, hasAuth, priceMode, productsByMsg]
     );
 
+    const identifySegmentUser = async () => {
+      const user = await getUserDetails();
+      const userId = user?.id;
+      const email = JSON.stringify(user?.email) ?? undefined;
+      if (userId) {
+        _identify(`${userId}`, {
+          email: email,
+        }).then();
+      }
+    };
     const handleSend = useCallback(async () => {
       const trimmed = input.trim();
       if (!trimmed) return;
@@ -404,13 +410,21 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
     );
 
     const handleReloadResults = useCallback(async (msg: ChatMessage) => {
+      const id = msg.id;
       try {
-        const payload = msg?.agent_response?.payload;
-        if (!payload) return;
+        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);
-        setProducts({ messageId: msg.id, data: productsResult });
+        setProductsByMsg((prev) => ({ ...prev, [id]: productsResult }));
       } catch (e) {
         console.error("Reload results failed", e);
+      } finally {
+        setReloadLoadingIds((prev) => {
+          const next = new Set(prev);
+          next.delete(id);
+          return next;
+        });
       }
     }, []);
 
@@ -421,6 +435,7 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
         (data: { priceMode: string }) => changePriceMode(data.priceMode)
       );
       changePriceMode(undefined);
+      identifySegmentUser();
 
       return () => {
         DeviceEventEmitter.removeAllListeners("clearChat");
@@ -475,7 +490,8 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
         }
         setMessages([]);
         setAssistantResponse(undefined);
-        setProducts(null);
+        setProductsByMsg({});
+        setReloadLoadingIds(new Set());
         setLoading(false);
         setLoadingMessageId(null);
         setTypingMessageId(null);
@@ -581,7 +597,11 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
         )}
         <ScrollView
           ref={scrollRef}
-          style={modalHeight ? { height: modalHeight } : undefined}
+          style={
+            modalHeight
+              ? { height: modalHeight, backgroundColor: "#f5f5f5" }
+              : { backgroundColor: "#f5f5f5" }
+          }
           contentContainerStyle={{
             backgroundColor: theme?.listContentBackgroundColor || "#f5f5f5",
             ...styles.listContent,
@@ -611,12 +631,17 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
                     conversationId={conversationId}
                     handleFeedbackAction={handleFeedbackAction}
                     onReloadResults={handleReloadResults}
+                    reloading={reloadLoadingIds.has(item.id)}
+                    hasResults={Boolean(
+                      productsByMsg[item.id]?.response?.body?.diamonds &&
+                        productsByMsg[item.id].response.body.diamonds.length > 0
+                    )}
                   />
                   {item.role === "assistant" &&
-                    products &&
-                    products.messageId === item.id && (
+                    productsByMsg &&
+                    productsByMsg.messageId === item.id && (
                       <ProductsList
-                        data={products?.data?.response?.body?.diamonds}
+                        data={productsByMsg?.data?.response?.body?.diamonds}
                         onViewAll={onViewAll}
                         onItemPress={onItemPress}
                       />

package/src/components/MessageBubble.tsx

@@ -1,5 +1,13 @@
 import React, { memo } from "react";
-import { View, Text, StyleSheet, Image, TouchableOpacity, Platform } from "react-native";
+import {
+  View,
+  Text,
+  StyleSheet,
+  Image,
+  TouchableOpacity,
+  Platform,
+  ActivityIndicator,
+} from "react-native";
 import type { ChatMessage, ChatTheme } from "../types";
 import { FeedbackAction, formatToTime } from "./utils";
 
@@ -24,6 +32,8 @@ interface Props {
     message_id: string
   ) => void;
   onReloadResults?: (message: ChatMessage) => void;
+  reloading?: boolean;
+  hasResults?: boolean;
 }
 
 const MessageBubbleComponent: React.FC<Props> = ({
@@ -32,6 +42,8 @@ const MessageBubbleComponent: React.FC<Props> = ({
   conversationId,
   handleFeedbackAction,
   onReloadResults,
+  reloading,
+  hasResults,
 }) => {
   const isUser = message.role === "user";
   const isValidMessageId =
@@ -75,18 +87,48 @@ const MessageBubbleComponent: React.FC<Props> = ({
         </Text>
       </View>
       {(canFeedback ||
-        (message.agent_response &&
-          typeof message.agent_response === "object")) && (
+        (message.search_payload &&
+          typeof message.search_payload === "object" &&
+          Object.keys(message.search_payload).length > 0)) && (
         <View style={styles.rowContainer}>
           <View style={styles.time}>
             <Text>{formatToTime(message.createdAt)}</Text>
           </View>
-          {message.agent_response &&
-            typeof message.agent_response === "object" && (
-              <TouchableOpacity onPress={() => onReloadResults?.(message)}>
-                <Text>Reload Results</Text>
+          {message.search_payload &&
+            typeof message.search_payload === "object" &&
+            Object.keys(message.search_payload).length > 0 &&
+            !hasResults &&
+            (reloading ? (
+              <View
+                style={{ flexDirection: "row", alignItems: "center", gap: 6 }}
+              >
+                <ActivityIndicator size="small" color="#1a73e8" />
+                <Text
+                  style={{
+                    fontSize: 12,
+                    color: "#1a73e8",
+                    textDecorationLine: "underline",
+                  }}
+                >
+                  Loading…
+                </Text>
+              </View>
+            ) : (
+              <TouchableOpacity
+                onPress={() => onReloadResults?.(message)}
+                disabled={reloading}
+              >
+                <Text
+                  style={{
+                    fontSize: 12,
+                    color: "#1a73e8",
+                    textDecorationLine: "underline",
+                  }}
+                >
+                  Reload Results
+                </Text>
               </TouchableOpacity>
-            )}
+            ))}
           <View style={styles.likeDislikeContainer}>
             <TouchableOpacity
               onPress={() =>
@@ -151,12 +193,12 @@ const styles = StyleSheet.create({
     justifyContent: "space-between",
     alignItems: "center",
     gap: 12,
+    marginTop: 8,
+    marginBottom: 8,
   },
   likeDislikeContainer: {
     flexDirection: "row",
     gap: 12,
-    marginTop: 4,
-    marginBottom: 4,
   },
   alignRight: {
     alignItems: "flex-end",

package/src/components/ProductsList.tsx

@@ -48,17 +48,19 @@ const ProductsListComponent: React.FC<ProductsListProps> = ({
             }}
           >
             <View key={item.id} style={styles.card}>
-              <ImageComponent
-                style={styles.image}
-                source={{ uri: item.image_thumb_url }}
-              />
+              {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>
             </View>
           </TouchableOpacity>
         ))}
@@ -72,7 +74,7 @@ const ProductsListComponent: React.FC<ProductsListProps> = ({
       >
         <Text style={styles.buttonText}>View All {">>"}</Text>
       </TouchableOpacity>
-      </View>
+    </View>
   );
 };
 

package/src/components/utils.ts

@@ -38,6 +38,65 @@ export const fetchConversationId = async (
     );
     priceMode = 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;
+}
+
+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/contexts/SegmentClientContext.tsx

@@ -0,0 +1,20 @@
+import React, { createContext, useContext } from "react";
+import { SegmentClient } from "@segment/analytics-react-native";
+
+export const SegmentClientContext = createContext<SegmentClient | undefined>(
+  undefined
+);
+
+export const useSegmentClient = () => useContext(SegmentClientContext);
+
+export const SegmentClientProvider = ({
+  client,
+  children,
+}: {
+  client: SegmentClient;
+  children: React.ReactNode;
+}) => (
+  <SegmentClientContext.Provider value={client}>
+    {children}
+  </SegmentClientContext.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,
+  };
+};

package/src/index.native.tsx

@@ -1,6 +1,6 @@
 // React Native entry point - re-export everything from main index
-export { ChatWidget } from './components/ChatWidget';
-export * from './types';
-export * from './theme';
-export { normaliseMessages } from './api';
-export { initStorage, isStorageInitialized, Storage } from './storage';
+export { ChatWidget } from "./components/ChatWidget";
+export * from "./types";
+export * from "./theme";
+export { normaliseMessages } from "./api";
+export { initStorage, isStorageInitialized, Storage } from "./storage";