vdb-ai-chat 1.0.1 → 1.0.2

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,10 @@ import {
   sendUserMessage,
 } from "../api";
 import ChatHeader from "./ChatHeader";
+import BetaNotice from "./BetaNotice";
 import SuggestionsRow from "./SuggestionsRow";
 import ProductsList from "./ProductsList";
-import { FeedbackAction, formatToTime, getUserDetails } from "./utils";
+import { FeedbackAction, formatToTime, getUserDetails, UserDetails } from "./utils";
 import { useUserAnalytics } from "../hooks/useAnalytics";
 import { Storage } from "../storage";
 
@@ -39,7 +42,6 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
   (
     {
       apiUrl,
-      userId: userIdProp,
       userToken: userTokenProp,
       priceMode: priceModeProp,
       modalHeight,
@@ -50,6 +52,7 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
       onClearChat,
       onViewAllPress,
       onItemPress: onItemPressProp,
+      isBetaMode: isBetaModeProp,
     },
     ref
   ) => {
@@ -71,26 +74,16 @@ 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();
+    const betaActive = Boolean(isBetaModeProp);
     // Load user auth data from storage on mount
     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 +95,7 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
         }
       };
       loadAuthData();
-    }, [userIdProp, userTokenProp]);
+    }, [userTokenProp]);
 
     const onViewAll = useCallback(() => {
       const searchPayload = JSON.stringify(assistantResponse?.search_payload);
@@ -148,15 +141,15 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
     );
 
     const hasAuth = useMemo(
-      () => Boolean(userId || userToken),
-      [userId, userToken]
+      () => Boolean(userToken),
+      [userToken]
     );
 
     const apiParams: ChatApiParams = useMemo(
       () => ({
-        conversationId: userToken || userId,
+        conversationId: userToken,
       }),
-      [userId, userToken]
+      [userToken]
     );
 
     const handleFeedbackAction = useCallback(
@@ -210,7 +203,24 @@ 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]);
+            } else {
+              setMessages(normalised);
+            }
           }
         } catch (error) {
           console.error("Failed to fetch initial messages", error);
@@ -244,6 +254,7 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
           role: "assistant",
           text: "Thinking",
           createdAt: Date.now(),
+          reaction: "0",
           isLoading: true,
         };
 
@@ -325,10 +336,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);
 
@@ -403,108 +414,134 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
     }, [input, sendMessage]);
 
     const handleSuggestionSelect = useCallback(
-      (value: string) => {
-        sendMessage(value);
-      },
-      [sendMessage]
-    );
-
-    const handleReloadResults = useCallback(async (msg: ChatMessage) => {
-      const id = msg.id;
-      try {
-        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);
-        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;
-        });
-      }
-    }, []);
-
-    useEffect(() => {
-      DeviceEventEmitter.addListener("clearChat", handleClearChat);
-      DeviceEventEmitter.addListener(
-        "changePriceMode",
-        (data: { priceMode: string }) => changePriceMode(data.priceMode)
-      );
-      changePriceMode(undefined);
-      identifySegmentUser();
-
-      return () => {
-        DeviceEventEmitter.removeAllListeners("clearChat");
-        DeviceEventEmitter.removeAllListeners("changePriceMode");
-      };
-    }, []);
-
-    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;
-      }
-      setPriceMode(_priceMode || null);
+    (value: string) => {
+      sendMessage(value);
+    },
+    [sendMessage]
+  );
+
+  const handleReloadResults = useCallback(async (msg: ChatMessage) => {
+    const id = msg.id;
+    try {
+      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);
+      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;
+      });
+    }
+  }, []);
+
+  useEffect(() => {
+    DeviceEventEmitter.addListener("clearChat", handleClearChat);
+    DeviceEventEmitter.addListener("changePriceMode", (data: { priceMode: string; }) => changePriceMode(data.priceMode));
+    changePriceMode();
+    identifySegmentUser();
+
+    return () => {
+      DeviceEventEmitter.removeAllListeners("clearChat");
+      DeviceEventEmitter.removeAllListeners("changePriceMode");
     };
-
-    // 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>>(
+  }, []);
+
+  const changePriceMode = async (_priceMode?: any) => {
+    if (!_priceMode && priceModeProp) {
+      _priceMode = priceModeProp;
+    }
+    if (!_priceMode) {
+      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 === undefined ? null : String(_priceMode));
+  };
+
+  const handleClearChat = useCallback(async () => {
+    try {
+      const conversations = await Storage.getJSON<Record<string, any>>(
+        "vdbchat_conversations",
+        {}
+      );
+      const storedId = conversations ? conversations[priceMode as any]?.conversation_id : null;
+      if (storedId && priceMode) {
+        const updatedConversations = conversations ?? {};
+        delete updatedConversations[priceMode];
+        await Storage.setJSON(
           "vdbchat_conversations",
-          {}
+          updatedConversations
         );
-        const storedId =
-          conversations?.[priceMode as string]?.conversation_id ?? null;
-        if (storedId && priceMode) {
-          const updatedConversations = conversations || {};
-          delete updatedConversations[priceMode];
-          await Storage.setJSON("vdbchat_conversations", updatedConversations);
+      }
+      setMessages([]);
+      setAssistantResponse(undefined);
+      setProductsByMsg({});
+      setReloadLoadingIds(new Set());
+      setLoading(false);
+      setLoadingMessageId(null);
+      setTypingMessageId(null);
+      setTypingFullText("");
+
+      const fresh = await fetchInitialMessages(apiUrl, undefined, priceMode);
+      {
+        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);
         }
-        setMessages([]);
-        setAssistantResponse(undefined);
-        setProductsByMsg({});
-        setReloadLoadingIds(new Set());
-        setLoading(false);
-        setLoadingMessageId(null);
-        setTypingMessageId(null);
-        setTypingFullText("");
-
-        const fresh = await fetchInitialMessages(apiUrl, undefined, priceMode);
-        setMessages(normaliseMessages(fresh).reverse());
-        onClearChat?.();
-      } catch (err) {
-        console.error("Failed to clear chat", err);
       }
-    }, [apiUrl, onClearChat, priceMode]);
+      onClearChat?.();
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.error("Failed to clear chat", err);
+    }
+  }, [apiUrl, priceMode]);
+
+  // "Thinking..." dot animation while waiting for the API
+  useEffect(() => {
+    if (!loadingMessageId || typingMessageId) return;
+
+    let step = 0;
+    const base = "Thinking";
+    const interval = setInterval(() => {
+      step = (step + 1) % 3;
+      const dots = ".".repeat(step + 1);
+      setMessages((prev) =>
+        prev.map((msg) =>
+          msg.id === loadingMessageId && msg.isLoading
+            ? { ...msg, text: `${base}${dots}` }
+            : msg
+        )
+      );
+    }, 500);
 
+    return () => {
+      clearInterval(interval);
+    };
+  }, [loadingMessageId, typingMessageId]);
+
+    
     // Expose clearChat method via ref for external use (React Native)
     useImperativeHandle(
       ref,
@@ -514,33 +551,6 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
       [handleClearChat]
     );
 
-    // "Thinking..." dot animation while waiting for the API
-    useEffect(() => {
-      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, text: `${base}${dots}` }
-              : msg
-          )
-        );
-      }, 500);
-
-      return () => {
-        clearInterval(interval);
-      };
-    }, [loadingMessageId, typingMessageId]);
-
     // Typewriter-style animation for assistant reply once it arrives
     const typingIndexRef = useRef(0);
 
@@ -593,82 +603,99 @@ 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 });
-          }}
-        >
-          <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 && (
+        <KeyboardAvoidingView
+          style={{ flex: 1 }}
+          behavior={Platform.OS === "ios" ? "padding" : "height"}
+          keyboardVerticalOffset={-16}
+       >
+          <ScrollView
+            ref={scrollRef}
+            keyboardShouldPersistTaps="handled"
+            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}
+                    />
+                    {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 +721,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,
+  }
 });