vdb-ai-chat 1.0.1 → 1.0.3

package/src/components/ChatWidget.tsx

@@ -13,11 +13,13 @@ import {
   ScrollView,
   Text,
   TextInput,
+  KeyboardAvoidingView,
   DeviceEventEmitter,
   Platform,
 } from "react-native";
 import { ChatInput } from "./ChatInput";
 import { MessageBubble } from "./MessageBubble";
+import MessageMetaRow from "./MessageMetaRow";
 import type { ChatMessage, ChatWidgetProps, ChatWidgetRef } from "../types";
 import { mergeTheme } from "../theme";
 import {
@@ -29,9 +31,15 @@ import {
   sendUserMessage,
 } from "../api";
 import ChatHeader from "./ChatHeader";
-import SuggestionsRow from "./SuggestionsRow";
+import BetaNotice from "./BetaNotice";
 import ProductsList from "./ProductsList";
-import { FeedbackAction, formatToTime, getUserDetails } from "./utils";
+import LazyProductsFetcher from "./LazyProductsFetcher";
+import {
+  FeedbackAction,
+  formatToTime,
+  getUserDetails,
+  UserDetails,
+} from "./utils";
 import { useUserAnalytics } from "../hooks/useAnalytics";
 import { Storage } from "../storage";
 
@@ -39,7 +47,6 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
   (
     {
       apiUrl,
-      userId: userIdProp,
       userToken: userTokenProp,
       priceMode: priceModeProp,
       modalHeight,
@@ -50,6 +57,7 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
       onClearChat,
       onViewAllPress,
       onItemPress: onItemPressProp,
+      isBetaMode: isBetaModeProp,
     },
     ref
   ) => {
@@ -64,6 +72,7 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
     const [assistantResponse, setAssistantResponse] = useState<
       ChatMessage | undefined
     >(undefined);
+    const [scrollY, setScrollY] = useState(0);
     const [productsByMsg, setProductsByMsg] = useState<Record<string, any>>({});
     const [reloadLoadingIds, setReloadLoadingIds] = useState<Set<string>>(
       new Set()
@@ -71,26 +80,17 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
     const [priceMode, setPriceMode] = useState<string | null>(
       priceModeProp || null
     );
-    const [conversationId, setConversationId] = useState<string | null>(null);
-    const [userId, setUserId] = useState<string>(userIdProp || "");
     const [userToken, setUserToken] = useState<string>(userTokenProp || "");
     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
+    const betaActive = Boolean(isBetaModeProp);
+    const noResultsText =
+      "No results found for your search. Try adjusting your filters or query.";
     useEffect(() => {
       const loadAuthData = async () => {
         try {
-          if (!userIdProp) {
-            const userData = await Storage.getJSON<{ id?: string }>(
-              "userData",
-              {}
-            );
-            if (userData?.id) {
-              setUserId(userData.id);
-            }
-          }
           if (!userTokenProp) {
             const token = await Storage.getItem("token");
             if (token) {
@@ -102,7 +102,7 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
         }
       };
       loadAuthData();
-    }, [userIdProp, userTokenProp]);
+    }, [userTokenProp]);
 
     const onViewAll = useCallback(() => {
       const searchPayload = JSON.stringify(assistantResponse?.search_payload);
@@ -116,11 +116,9 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
         payload.lab_grown === "true" ? "lab_grown_diamond" : "diamond"
       }&fromNewFilterScreen=false&filterSplitStep=1&sectionName=Single%20Stones&breadCrumbLabel=Stone%20Search&enterSecondFlow=false&saved_search=${searchPayload}`;
 
-      // If custom handler is provided (React Native), use it
       if (onViewAllPress) {
         onViewAllPress(deepLinkUrl, payload);
       } else if (Platform.OS === "web") {
-        // Default behavior for web
         window.open(deepLinkUrl, "_parent");
       }
     }, [assistantResponse, apiUrl, priceMode, onViewAllPress]);
@@ -136,27 +134,22 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
           item.type
         }&priceMode=${priceMode}&breadCrumbLabel=Stone%20Details`;
 
-        // If custom handler is provided (React Native), use it
         if (onItemPressProp) {
           onItemPressProp(deepLinkUrl, item);
         } else if (Platform.OS === "web") {
-          // Default behavior for web
           window.open(deepLinkUrl, "_parent");
         }
       },
       [apiUrl, priceMode, onItemPressProp]
     );
 
-    const hasAuth = useMemo(
-      () => Boolean(userId || userToken),
-      [userId, userToken]
-    );
+    const hasAuth = useMemo(() => Boolean(userToken), [userToken]);
 
     const apiParams: ChatApiParams = useMemo(
       () => ({
-        conversationId: userToken || userId,
+        conversationId: userToken,
       }),
-      [userId, userToken]
+      [userToken]
     );
 
     const handleFeedbackAction = useCallback(
@@ -166,7 +159,6 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
         message_id: string
       ) => {
         try {
-          // Use functional update to get current messages without dependency
           let currentReaction = "0";
           setMessages((prev) => {
             const msg = prev.find((m) => m.id === message_id);
@@ -197,7 +189,6 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
       []
     );
 
-    // Load initial history on mount
     useEffect(() => {
       let cancelled = false;
 
@@ -210,7 +201,30 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
             priceMode
           );
           if (!cancelled) {
-            setMessages(normaliseMessages(initial).reverse());
+            const normalised = normaliseMessages(initial).reverse();
+            if (normalised.length === 0) {
+              const initialAssistant: ChatMessage = {
+                id: "",
+                role: "assistant",
+                text: "Hello! How can I help you today?",
+                createdAt: Date.now(),
+                isLoading: false,
+                suggestions: [
+                  "Search Natural Diamonds",
+                  "Search Lab-Grown Diamonds",
+                ],
+                reaction: "0",
+              };
+              setMessages([initialAssistant]);
+              setTimeout(() => {
+                scrollRef.current?.scrollToEnd({ animated: false });
+              }, 0);
+            } else {
+              setMessages(normalised);
+              setTimeout(() => {
+                scrollRef.current?.scrollToEnd({ animated: false });
+              }, 0);
+            }
           }
         } catch (error) {
           console.error("Failed to fetch initial messages", error);
@@ -244,6 +258,7 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
           role: "assistant",
           text: "Thinking",
           createdAt: Date.now(),
+          reaction: "0",
           isLoading: true,
         };
 
@@ -284,7 +299,6 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
           setAssistantResponse(latestAssistant);
 
           if (latestAssistant?.text) {
-            // If there is an agent_response, try to fetch products first
             if (
               latestAssistant?.search_payload &&
               typeof latestAssistant.search_payload === "object" &&
@@ -302,9 +316,6 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
                 productsResult.response.body.diamonds.length > 0;
 
               if (!hasDiamonds) {
-                const noResultsText =
-                  "No results found for your search. Try adjusting your filters or query.";
-
                 setLoadingMessageId(null);
                 setTypingMessageId(null);
                 setTypingFullText("");
@@ -317,7 +328,6 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
                           id: latestAssistant?.id ?? msg.id,
                           text: noResultsText,
                           isLoading: false,
-                          suggestions: [],
                         }
                       : msg
                   )
@@ -325,10 +335,10 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
                 inputRef.current?.focus();
                 return;
               }
-              setProductsByMsg({
-                messageId: latestAssistant.id,
-                data: productsResult,
-              });
+              setProductsByMsg((prev) => ({
+                ...prev,
+                [latestAssistant.id]: productsResult,
+              }));
             }
             setLoadingMessageId(null);
 
@@ -346,10 +356,10 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
               )
             );
 
-            // Use setTimeout to ensure state is updated before starting typewriter
             setTimeout(() => {
               setTypingMessageId(latestAssistant.id);
               setTypingFullText(latestAssistant.text);
+              scrollRef.current?.scrollToEnd({ animated: true });
             }, 50);
           } else {
             setMessages((prev) =>
@@ -434,7 +444,7 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
         "changePriceMode",
         (data: { priceMode: string }) => changePriceMode(data.priceMode)
       );
-      changePriceMode(undefined);
+      changePriceMode();
       identifySegmentUser();
 
       return () => {
@@ -444,47 +454,30 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
     }, []);
 
     const changePriceMode = async (_priceMode?: any) => {
-      // Priority: passed argument > prop > storage
       if (!_priceMode && priceModeProp) {
         _priceMode = priceModeProp;
       }
       if (!_priceMode) {
-        const userData = await Storage.getJSON<{ price_mode?: string }>(
-          "userData",
-          {}
-        );
-        _priceMode = userData?.price_mode;
+        let userData = await Storage.getJSON("persist:userInfo", {
+          user: undefined,
+        } as { user?: string });
+        userData = userData && userData.user ? JSON.parse(userData.user) : {};
+        _priceMode = (userData as UserDetails)?.price_mode;
       }
-      setPriceMode(_priceMode || null);
+      setPriceMode(_priceMode === undefined ? null : String(_priceMode));
     };
 
-    // Update conversationId when priceMode changes
-    useEffect(() => {
-      const loadConversationId = async () => {
-        if (!priceMode) {
-          setConversationId(null);
-          return;
-        }
-        const conversations = await Storage.getJSON<Record<string, any>>(
-          "vdbchat_conversations",
-          {}
-        );
-        const storedId = conversations?.[priceMode]?.conversation_id ?? null;
-        setConversationId(storedId ? String(storedId) : null);
-      };
-      loadConversationId();
-    }, [priceMode, messages]); // Re-fetch when messages change (new conversation might be created)
-
     const handleClearChat = useCallback(async () => {
       try {
         const conversations = await Storage.getJSON<Record<string, any>>(
           "vdbchat_conversations",
           {}
         );
-        const storedId =
-          conversations?.[priceMode as string]?.conversation_id ?? null;
+        const storedId = conversations
+          ? conversations[priceMode as any]?.conversation_id
+          : null;
         if (storedId && priceMode) {
-          const updatedConversations = conversations || {};
+          const updatedConversations = conversations ?? {};
           delete updatedConversations[priceMode];
           await Storage.setJSON("vdbchat_conversations", updatedConversations);
         }
@@ -498,38 +491,44 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
         setTypingFullText("");
 
         const fresh = await fetchInitialMessages(apiUrl, undefined, priceMode);
-        setMessages(normaliseMessages(fresh).reverse());
+        const normalised = normaliseMessages(fresh).reverse();
+        if (normalised.length === 0) {
+          const initialAssistant: ChatMessage = {
+            id: "",
+            role: "assistant",
+            text: "Hello! How can I help you today?",
+            createdAt: Date.now(),
+            isLoading: false,
+            suggestions: [
+              "Search Natural Diamonds",
+              "Search Lab-Grown Diamonds",
+            ],
+            reaction: "0",
+          };
+          setMessages([initialAssistant]);
+        } else {
+          setMessages(normalised);
+        }
+        setTimeout(() => {
+          scrollRef.current?.scrollToEnd({ animated: false });
+        }, 500);
         onClearChat?.();
       } catch (err) {
         console.error("Failed to clear chat", err);
       }
-    }, [apiUrl, onClearChat, priceMode]);
-
-    // Expose clearChat method via ref for external use (React Native)
-    useImperativeHandle(
-      ref,
-      () => ({
-        clearChat: handleClearChat,
-      }),
-      [handleClearChat]
-    );
+    }, [apiUrl, priceMode]);
 
-    // "Thinking..." dot animation while waiting for the API
     useEffect(() => {
-      if (!loadingMessageId || typingMessageId) {
-        return;
-      }
+      if (!loadingMessageId || typingMessageId) return;
 
       let step = 0;
       const base = "Thinking";
-      const msgId = loadingMessageId;
-
       const interval = setInterval(() => {
         step = (step + 1) % 3;
         const dots = ".".repeat(step + 1);
         setMessages((prev) =>
           prev.map((msg) =>
-            msg.id === msgId && msg.isLoading
+            msg.id === loadingMessageId && msg.isLoading
               ? { ...msg, text: `${base}${dots}` }
               : msg
           )
@@ -541,7 +540,14 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
       };
     }, [loadingMessageId, typingMessageId]);
 
-    // Typewriter-style animation for assistant reply once it arrives
+    useImperativeHandle(
+      ref,
+      () => ({
+        clearChat: handleClearChat,
+      }),
+      [handleClearChat]
+    );
+
     const typingIndexRef = useRef(0);
 
     useEffect(() => {
@@ -593,82 +599,155 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
         style={[styles.container, { backgroundColor: theme.backgroundColor }]}
       >
         {Platform.OS === "web" && (
-          <ChatHeader onClose={onClose} onClearChat={handleClearChat} />
+          <ChatHeader
+            onClose={onClose}
+            onClearChat={handleClearChat}
+            isBetaMode={betaActive}
+          />
         )}
-        <ScrollView
-          ref={scrollRef}
-          style={
-            modalHeight
-              ? { height: modalHeight, backgroundColor: "#f5f5f5" }
-              : { backgroundColor: "#f5f5f5" }
-          }
-          contentContainerStyle={{
-            backgroundColor: theme?.listContentBackgroundColor || "#f5f5f5",
-            ...styles.listContent,
-            justifyContent: messages.length === 0 ? "center" : "flex-end",
-            minHeight: modalHeight ? modalHeight : undefined,
-          }}
-          onContentSizeChange={() => {
-            scrollRef.current?.scrollToEnd({ animated: false });
-          }}
+        <KeyboardAvoidingView
+          style={{ flex: 1 }}
+          behavior={Platform.OS === "ios" ? "padding" : "height"}
+          keyboardVerticalOffset={Platform.OS === "ios" ? 100 : -16}
         >
-          <View style={styles.emptyContainer}>
-            <Text style={styles.emptyText}>
-              {messages.length === 0
-                ? "Start a conversation to Find the Perfect Diamond"
-                : `Chat Started at ${formatToTime(messages[0].createdAt)}`}
-            </Text>
-          </View>
-          {(() => {
-            const ordered = [...messages];
-            return ordered.map((item, index) => {
-              const isLatest = index === ordered.length - 1;
-              return (
-                <View key={item.id + index}>
-                  <MessageBubble
-                    message={item}
-                    theme={theme}
-                    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" &&
-                    productsByMsg &&
-                    productsByMsg.messageId === item.id && (
+          <ScrollView
+            ref={scrollRef}
+            keyboardShouldPersistTaps="handled"
+            onScroll={(e) => setScrollY(e.nativeEvent.contentOffset.y)}
+            scrollEventThrottle={16}
+            style={
+              modalHeight
+                ? { height: modalHeight, backgroundColor: "#FFFFFF" }
+                : { backgroundColor: "#FFFFFF" }
+            }
+            contentContainerStyle={{
+              backgroundColor: theme?.listContentBackgroundColor || "#FFFFFF",
+              ...styles.listContent,
+              justifyContent: messages.length === 0 ? "center" : "flex-end",
+              minHeight: modalHeight ? modalHeight : undefined,
+            }}
+            onContentSizeChange={() => {
+              scrollRef.current?.scrollToEnd({ animated: false });
+            }}
+          >
+            <View style={styles.emptyContainer}>
+              <Text style={styles.emptyText}>
+                {messages.length === 0
+                  ? "Start a conversation to Find the Perfect Diamond"
+                  : `Chat Started at ${formatToTime(messages[0].createdAt)}`}
+              </Text>
+            </View>
+            {(() => {
+              const ordered = [...messages];
+              return ordered.map((item, index) => {
+                const isLatest = index === ordered.length - 1;
+                const hasDiamonds = Boolean(
+                  productsByMsg[item.id]?.response?.body?.diamonds &&
+                    productsByMsg[item.id]?.response?.body?.diamonds.length > 0
+                );
+                return (
+                  <View key={item.id + index} style={{ gap: 12 }}>
+                    <MessageBubble
+                      message={item}
+                      theme={theme}
+                      priceMode={priceMode as string}
+                      handleFeedbackAction={handleFeedbackAction}
+                      onReloadResults={handleReloadResults}
+                      reloading={reloadLoadingIds.has(item.id)}
+                      hasResults={hasDiamonds}
+                      totalResults={
+                        productsByMsg[item.id]?.response?.header
+                          ?.total_diamonds_found || 0
+                      }
+                      shownResults={
+                        productsByMsg[item.id]?.response?.body?.diamonds
+                          .length || 0
+                      }
+                      onSuggestionSelect={handleSuggestionSelect}
+                      isLatest={isLatest}
+                      isTyping={typingMessageId === item.id}
+                    />
+                    {/* Trigger product fetch when this area enters viewport */}
+                    {item.role === "assistant" &&
+                      item.search_payload &&
+                      Object.keys(item.search_payload).length > 0 &&
+                      !productsByMsg[item.id] && (
+                        <LazyProductsFetcher
+                          messageId={item.id}
+                          payload={item.search_payload}
+                          onFetched={(id, result) => {
+                            setProductsByMsg((prev) => ({
+                              ...prev,
+                              [id]: result,
+                            }));
+                            const diamonds = result?.response?.body?.diamonds;
+                            const hasAny =
+                              Array.isArray(diamonds) && diamonds.length > 0;
+                            if (hasAny) {
+                              try {
+                                scrollRef.current?.scrollTo({
+                                  x: 0,
+                                  y: scrollY + 120,
+                                  animated: true,
+                                });
+                              } catch (_) {}
+                            } else {
+                              setMessages((prev) =>
+                                prev.map((msg) =>
+                                  msg.id === id
+                                    ? {
+                                        ...msg,
+                                        id: msg.id,
+                                        text: noResultsText,
+                                        isLoading: false,
+                                      }
+                                    : msg
+                                )
+                              );
+                            }
+                          }}
+                        />
+                      )}
+                    {item.role === "assistant" && hasDiamonds && (
                       <ProductsList
-                        data={productsByMsg?.data?.response?.body?.diamonds}
+                        data={
+                          productsByMsg[item.id]?.response?.body?.diamonds || []
+                        }
+                        totalResults={
+                          productsByMsg[item.id]?.response?.header
+                            ?.total_diamonds_found || 0
+                        }
                         onViewAll={onViewAll}
                         onItemPress={onItemPress}
                       />
                     )}
-                  {item.role === "assistant" &&
-                    item.suggestions &&
-                    item.suggestions.length > 0 &&
-                    isLatest && (
-                      <SuggestionsRow
-                        suggestions={item.suggestions || []}
-                        onSelect={handleSuggestionSelect}
-                      />
-                    )}
-                </View>
-              );
-            });
-          })()}
-        </ScrollView>
-        <ChatInput
-          value={input}
-          onChangeText={setInput}
-          onSend={handleSend}
-          disabled={loading}
-          placeholder={placeholder}
-          theme={theme}
-          inputRef={inputRef}
-        />
+                    {/* Suggestions are now rendered inside MessageBubble */}
+                    <MessageMetaRow
+                      message={item}
+                      priceMode={priceMode || ""}
+                      handleFeedbackAction={handleFeedbackAction}
+                      onReloadResults={handleReloadResults}
+                      reloading={reloadLoadingIds.has(item.id)}
+                      hasResults={hasDiamonds}
+                    />
+                  </View>
+                );
+              });
+            })()}
+          </ScrollView>
+          <View style={styles.bottomContainer}>
+            <ChatInput
+              value={input}
+              onChangeText={setInput}
+              onSend={handleSend}
+              disabled={loading}
+              placeholder={placeholder}
+              theme={theme}
+              inputRef={inputRef}
+            />
+            <BetaNotice active={betaActive} />
+          </View>
+        </KeyboardAvoidingView>
       </View>
     );
   }
@@ -694,11 +773,22 @@ const styles = StyleSheet.create({
     padding: 16,
     alignItems: "center",
     justifyContent: "center",
-    backgroundColor: "#f5f5f5",
+    backgroundColor: "#FFFFFF",
   },
   emptyText: {
-    fontSize: 14,
-    fontWeight: "500",
-    color: "#666666",
+    fontSize: 13,
+    fontWeight: "400",
+    color: "#4F4E57",
+  },
+  bottomContainer: {
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    borderTopColor: "#E0E0E0",
+    borderTopWidth: 1,
+    flexDirection: "column",
+    justifyContent: "space-between",
+    alignItems: "center",
+    alignSelf: "stretch",
+    gap: 12,
   },
 });

package/src/components/LazyProductsFetcher.tsx

@@ -0,0 +1,41 @@
+import React, { useEffect, useRef } from "react";
+import { View } from "react-native";
+import { getProducts } from "../api";
+import { useInViewport } from "../hooks/useInViewport";
+
+interface LazyProductsFetcherProps {
+  messageId: string;
+  payload: Record<string, any> | undefined | null;
+  onFetched: (messageId: string, data: any) => void;
+}
+
+const LazyProductsFetcher: React.FC<LazyProductsFetcherProps> = ({
+  messageId,
+  payload,
+  onFetched,
+}) => {
+  const { ref, inView } = useInViewport<HTMLDivElement>();
+  const fetchedRef = useRef(false);
+
+  useEffect(() => {
+    if (fetchedRef.current) return;
+    if (!payload || typeof payload !== "object") return;
+    if (!inView) return;
+
+    fetchedRef.current = true;
+    (async () => {
+      try {
+        const result = await getProducts(payload);
+        onFetched(messageId, result);
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.error("Lazy fetch products failed", e);
+      }
+    })();
+  }, [inView, messageId, onFetched, payload]);
+
+  // Sentinel element; no visible UI needed
+  return <View ref={ref as any} style={{ height: 1 }} />;
+};
+
+export default LazyProductsFetcher;