vdb-ai-chat 1.0.6 → 1.0.8

package/src/components/ChatWidget.tsx

@@ -30,7 +30,6 @@ import {
   normaliseMessages,
   sendUserMessage,
 } from "../api";
-import ChatHeader from "./ChatHeader";
 import BetaNotice from "./BetaNotice";
 import ProductsList from "./ProductsList";
 import LazyProductsFetcher from "./LazyProductsFetcher";
@@ -38,11 +37,15 @@ import {
   FeedbackAction,
   formatToTime,
   getUserDetails,
-  useDeviceType,
   UserDetails,
 } from "./utils";
 import { useUserAnalytics } from "../hooks/useAnalytics";
 import { Storage } from "../storage";
+import ThemeProvider from "../contexts/ThemeProvider";
+import { useTheme } from "styled-components/native";
+import styled from "styled-components/native";
+import { DefaultTheme } from "styled-components/native";
+import { css } from "styled-components/native";
 
 export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
   (
@@ -82,10 +85,14 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
     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 themeProps = useMemo(
+      () => mergeTheme(themeOverrides),
+      [themeOverrides]
+    );
     const { _identify } = useUserAnalytics();
     const betaActive = Boolean(isBetaModeProp);
-    const { isTablet } = useDeviceType();
+    const theme = useTheme();
+    const isTablet = theme.isTablet;
     const noResultsText =
       "No results found for your search. Try adjusting your filters or query.";
     useEffect(() => {
@@ -476,18 +483,25 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
 
     const handleClearChat = useCallback(async () => {
       try {
-        const conversations = await Storage.getJSON<Record<string, any>>(
+        interface StoredConversations {
+          token: string;
+          conversations: Record<string, { conversation_id: string | number }>;
+        }
+
+        const stored = await Storage.getJSON<StoredConversations>(
           "vdbchat_conversations",
-          {}
+          null
         );
-        const storedId = conversations
-          ? conversations[priceMode as any]?.conversation_id
-          : null;
-        if (storedId && priceMode) {
-          const updatedConversations = conversations ?? {};
+
+        if (stored && priceMode && stored.conversations?.[priceMode]) {
+          const updatedConversations = { ...stored.conversations };
           delete updatedConversations[priceMode];
-          await Storage.setJSON("vdbchat_conversations", updatedConversations);
+          await Storage.setJSON("vdbchat_conversations", {
+            token: stored.token,
+            conversations: updatedConversations,
+          });
         }
+
         setMessages([]);
         setProductsByMsg({});
         setReloadLoadingIds(new Set());
@@ -602,195 +616,237 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
     }, [typingMessageId, typingFullText]);
 
     return (
-      <View
-        style={[styles.container, { backgroundColor: theme.backgroundColor }]}
-      >
-        {/* {Platform.OS === "web" && (
+      <ThemeProvider>
+        <Container theme={theme}>
+          {/* {Platform.OS === "web" && (
           <ChatHeader
             onClose={onClose}
             onClearChat={handleClearChat}
             isBetaMode={betaActive}
           />
         )} */}
-        <KeyboardAvoidingView
-          style={{ flex: 1 }}
-          behavior={Platform.OS === "ios" ? "padding" : "height"}
-          keyboardVerticalOffset={Platform.OS === "ios" ? 100 : -16}
-        >
-          <ScrollView
-            ref={scrollRef}
-            keyboardShouldPersistTaps="handled"
-            onScroll={(e) => {
-              const { contentOffset, contentSize, layoutMeasurement } =
-                e.nativeEvent;
-              setScrollY(contentOffset.y);
-              const distanceFromBottom =
-                contentSize.height -
-                (layoutMeasurement.height + contentOffset.y);
-              // Enable auto-scroll when user is near the bottom; disable when scrolled up
-              setAutoScroll(distanceFromBottom < 48);
-            }}
-            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,
-              ...(isTablet
-                ? { maxWidth: 608, alignSelf: "center", width: "100%" }
-                : {}),
-            }}
-            onContentSizeChange={() => {
-              if (autoScroll) {
-                scrollRef.current?.scrollToEnd({ animated: false });
-              }
-            }}
+          <KeyboardAvoidingView
+            style={{ flex: 1 }}
+            behavior={Platform.OS === "ios" ? "padding" : "height"}
+            keyboardVerticalOffset={100}
           >
-            <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
-                          priceMode={priceMode as string}
-                          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[item.id]?.response?.body?.diamonds || []
-                        }
+            <ScrollView
+              ref={scrollRef}
+              keyboardShouldPersistTaps="handled"
+              onScroll={(e) => {
+                const { contentOffset, contentSize, layoutMeasurement } =
+                  e.nativeEvent;
+                setScrollY(contentOffset.y);
+                const distanceFromBottom =
+                  contentSize.height -
+                  (layoutMeasurement.height + contentOffset.y);
+                // Enable auto-scroll when user is near the bottom; disable when scrolled up
+                setAutoScroll(distanceFromBottom < 48);
+              }}
+              scrollEventThrottle={16}
+              style={
+                modalHeight
+                  ? {
+                      height: modalHeight,
+                      backgroundColor: theme["core-01"] || "#FFFFFF",
+                    }
+                  : { backgroundColor: theme["core-01"] || "#FFFFFF" }
+              }
+              contentContainerStyle={{
+                backgroundColor:
+                  theme["core-01"] ||
+                  themeProps?.listContentBackgroundColor ||
+                  "#FFFFFF",
+                ...styles.listContent,
+                justifyContent: messages.length === 0 ? "center" : "flex-end",
+                minHeight: modalHeight ? modalHeight : undefined,
+                ...(isTablet
+                  ? { maxWidth: 608, alignSelf: "center", width: "100%" }
+                  : {}),
+              }}
+              onContentSizeChange={() => {
+                if (autoScroll) {
+                  scrollRef.current?.scrollToEnd({ animated: false });
+                }
+              }}
+            >
+              {messages?.[0]?.createdAt && (
+                <EmptyContainer theme={theme}>
+                  <EmptyText theme={theme}>
+                    {`Chat Started at ${formatToTime(messages[0].createdAt)}`}
+                  </EmptyText>
+                </EmptyContainer>
+              )}
+              {(() => {
+                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}
+                        userTheme={themeProps}
+                        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
                         }
-                        onViewAll={onViewAll}
-                        onItemPress={onItemPress}
-                        item={item}
+                        shownResults={
+                          productsByMsg[item.id]?.response?.body?.diamonds
+                            .length || 0
+                        }
+                        onSuggestionSelect={handleSuggestionSelect}
+                        isLatest={isLatest}
+                        isTyping={typingMessageId === item.id}
                       />
-                    )}
-                    {/* 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.borderTop} />
-          <View
-            style={[
-              styles.bottomContainer,
-              isTablet
-                ? { maxWidth: 608, alignSelf: "center", width: "100%" }
-                : {},
-            ]}
-          >
-            <ChatInput
-              value={input}
-              onChangeText={setInput}
-              onSend={handleSend}
-              disabled={loading}
-              placeholder={placeholder}
-              theme={theme}
-              inputRef={inputRef}
-            />
-            <BetaNotice active={betaActive} />
-          </View>
-        </KeyboardAvoidingView>
-      </View>
+                      {/* 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
+                            priceMode={priceMode as string}
+                            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[item.id]?.response?.body?.diamonds ||
+                            []
+                          }
+                          totalResults={
+                            productsByMsg[item.id]?.response?.header
+                              ?.total_diamonds_found || 0
+                          }
+                          onViewAll={onViewAll}
+                          onItemPress={onItemPress}
+                          item={item}
+                        />
+                      )}
+                      {/* Suggestions are now rendered inside MessageBubble */}
+                      <MessageMetaRow
+                        message={item}
+                        priceMode={priceMode || ""}
+                        handleFeedbackAction={handleFeedbackAction}
+                        onReloadResults={handleReloadResults}
+                        reloading={reloadLoadingIds.has(item.id)}
+                        hasResults={hasDiamonds}
+                      />
+                    </View>
+                  );
+                });
+              })()}
+            </ScrollView>
+            <LineView />
+            <BottomContainer theme={theme}>
+              <ChatInput
+                value={input}
+                onChangeText={setInput}
+                onSend={handleSend}
+                disabled={loading}
+                placeholder={placeholder}
+                theme={themeProps}
+                inputRef={inputRef}
+              />
+              <BetaNotice active={betaActive} />
+            </BottomContainer>
+          </KeyboardAvoidingView>
+        </Container>
+      </ThemeProvider>
     );
   }
 );
 
 ChatWidget.displayName = "ChatWidget";
 
+const Container = styled.View<{ theme: DefaultTheme }>`
+  background-color: ${({ theme }: { theme: DefaultTheme }) =>
+    theme["core-01"] || "#FFFFFF"};
+  flex: 1;
+  width: 100%;
+`;
+
+const EmptyContainer = styled.View<{ theme: DefaultTheme }>`
+  padding: 16px;
+  align-items: center;
+  justify-content: center;
+  background-color: ${({ theme }: { theme: DefaultTheme }) =>
+    theme["core-01"] || "#FFFFFF"};
+`;
+
+const EmptyText = styled.Text<{ theme: DefaultTheme }>`
+  font-size: 13px;
+  font-weight: 400;
+  color: ${({ theme }: { theme: DefaultTheme }) =>
+    theme["core-06"] || "#4F4E57"};
+`;
+
+const BottomContainer = styled.View<{ theme: DefaultTheme }>`
+  padding-vertical: 12px;
+  padding-horizontal: 16px;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  align-self: stretch;
+  gap: 12px;
+  ${({ theme }: { theme: DefaultTheme }) =>
+    theme.isTablet &&
+    css`
+      maxWidth: 608,
+      align-self: center;
+      width: 100%;
+    `}
+`;
+
+const LineView = styled.View<{ theme: DefaultTheme }>`
+  border-top-color: ${({ theme }: { theme: DefaultTheme }) =>
+    theme["core-03"] || "#E0E0E0"};
+  border-top-width: 1;
+`;
+
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    width: "100%",
-  },
   listContent: {
     paddingVertical: 8,
     flexGrow: 1,
@@ -800,28 +856,4 @@ const styles = StyleSheet.create({
     paddingVertical: 8,
     alignItems: "center",
   },
-  emptyContainer: {
-    padding: 16,
-    alignItems: "center",
-    justifyContent: "center",
-    backgroundColor: "#FFFFFF",
-  },
-  emptyText: {
-    fontSize: 13,
-    fontWeight: "400",
-    color: "#4F4E57",
-  },
-  bottomContainer: {
-    paddingVertical: 12,
-    paddingHorizontal: 16,
-    flexDirection: "column",
-    justifyContent: "space-between",
-    alignItems: "center",
-    alignSelf: "stretch",
-    gap: 12,
-  },
-  borderTop: {
-    borderTopColor: "#E0E0E0",
-    borderTopWidth: 1,
-  },
 });