vdb-ai-chat 1.0.7 → 1.0.8

package/src/components/ProductsListView.tsx

@@ -10,6 +10,9 @@ import {
   Pressable,
 } from "react-native";
 import { getUserCurrencySymbol } from "./utils";
+import { useTheme } from "styled-components/native";
+import { DefaultTheme } from "styled-components/native";
+import styled from "styled-components/native";
 
 let ImageComponent: typeof Image = Image;
 if (Platform.OS !== "web") {
@@ -21,6 +24,93 @@ if (Platform.OS !== "web") {
   }
 }
 
+// Token configuration for diamond details display
+type TokenStyle = "primary" | "secondary";
+type TokenType =
+  | "field"
+  | "separator"
+  | "lineBreak"
+  | "group"
+  | "fieldWithSuffix"
+  | "priceField";
+
+interface TokenConfig {
+  type: TokenType;
+  field?: string;
+  style?: TokenStyle;
+  suffix?: string;
+  prefix?: string;
+  format?: "percent";
+  showCurrencyIf?: string;
+  items?: TokenConfig[];
+}
+
+const DIAMOND_TOKENS: TokenConfig[] = [
+  // Row 1: Basic specs
+  { type: "field", field: "shape_long", style: "primary" },
+  {
+    type: "fieldWithSuffix",
+    field: "size",
+    style: "secondary",
+    suffix: "ct",
+    showCurrencyIf: "price_per_carat",
+  },
+  { type: "field", field: "color", style: "primary" },
+  { type: "field", field: "clarity_short", style: "primary" },
+  { type: "separator" },
+  {
+    type: "group",
+    items: [
+      { type: "field", field: "cut_short", style: "primary" },
+      { type: "field", field: "polish_short", style: "primary", prefix: "/" },
+      { type: "field", field: "symmetry_short", style: "primary", prefix: "/" },
+    ],
+  },
+  { type: "separator" },
+  { type: "field", field: "fluorescence_intensity_short", style: "primary" },
+  { type: "separator" },
+  { type: "field", field: "lab_short", style: "primary" },
+  { type: "separator" },
+  {
+    type: "field",
+    field: "discount_percent",
+    style: "secondary",
+    format: "percent",
+  },
+  // Row 2: Measurements & Pricing
+  { type: "lineBreak" },
+  {
+    type: "field",
+    field: "depth_percent",
+    style: "secondary",
+    prefix: "D",
+    format: "percent",
+  },
+  { type: "separator" },
+  {
+    type: "field",
+    field: "table_percent",
+    style: "secondary",
+    prefix: "T",
+    format: "percent",
+  },
+  { type: "separator" },
+  { type: "field", field: "measurement", style: "secondary" },
+  { type: "separator" },
+  {
+    type: "priceField",
+    field: "price_per_carat",
+    style: "secondary",
+    suffix: "PC",
+  },
+  {
+    type: "priceField",
+    field: "total_sales_price",
+    style: "secondary",
+    prefix: " =",
+  },
+];
+
 interface ProductsListViewProps {
   data: any[];
   totalResults?: number;
@@ -29,6 +119,80 @@ interface ProductsListViewProps {
   item: any;
 }
 
+const renderToken = (
+  token: TokenConfig,
+  item: any,
+  userCurrency: string | null,
+  index: number
+): React.ReactNode => {
+  const TextView = token.style === "secondary" ? TextStyleTwo : TextStyleOne;
+  const currency = userCurrency || "$";
+  const theme = useTheme();
+  switch (token.type) {
+    case "separator":
+      return (
+        <TextView key={index} theme={theme}>
+          {"·"}
+        </TextView>
+      );
+
+    case "lineBreak":
+      return <View key={index} style={styles.lineBreak} />;
+
+    case "field": {
+      let value = item[token.field!] ?? "-";
+      if (token.format === "percent" && value !== "-") {
+        value = `${value}%`;
+      }
+      return (
+        <React.Fragment key={index}>
+          {token.prefix && <TextView theme={theme}>{token.prefix}</TextView>}
+          <TextView theme={theme}>{value}</TextView>
+        </React.Fragment>
+      );
+    }
+
+    case "fieldWithSuffix": {
+      const value = item[token.field!] ?? "-";
+      const showSuffix = token.showCurrencyIf
+        ? item[token.showCurrencyIf]
+        : true;
+      return (
+        <View key={index} style={styles.rowCenter}>
+          <TextView theme={theme}>{value}</TextView>
+          {showSuffix && token.suffix && (
+            <TextView theme={theme}>{token.suffix}</TextView>
+          )}
+        </View>
+      );
+    }
+
+    case "priceField": {
+      const value = item[token.field!];
+      return (
+        <View key={index} style={styles.rowCenter}>
+          {token.prefix && <TextView theme={theme}>{token.prefix}</TextView>}
+          {value && <TextView theme={theme}>{currency}</TextView>}
+          <TextView theme={theme}>{value ?? "-"}</TextView>
+          {token.suffix && <TextView theme={theme}>{token.suffix}</TextView>}
+        </View>
+      );
+    }
+
+    case "group":
+      return (
+        <View key={index} style={styles.rowCenter}>
+          {token.items?.map((subToken, subIndex) =>
+            renderToken(subToken, item, userCurrency, subIndex)
+          )}
+        </View>
+      );
+
+    default:
+      return null;
+  }
+};
+
 const ProductsListViewComponent: React.FC<ProductsListViewProps> = ({
   data,
   totalResults,
@@ -37,7 +201,7 @@ const ProductsListViewComponent: React.FC<ProductsListViewProps> = ({
   item,
 }) => {
   if (!data || !data.length) return null;
-
+  const theme = useTheme();
   const [userCurrency, setUserCurrency] = useState<string | null>(null);
 
   useEffect(() => {
@@ -49,168 +213,110 @@ const ProductsListViewComponent: React.FC<ProductsListViewProps> = ({
   }, []);
 
   return (
-    <View style={styles.wrapper}>
+    <Wrapper theme={theme}>
       <ScrollView
         showsVerticalScrollIndicator={false}
         contentContainerStyle={styles.listContent}
       >
-        {data.map((item: any, index: number) => (
+        {data.map((dataItem: any, index: number) => (
           <Pressable
-            key={item.id}
-            onPress={() => onItemPress?.(item)}
+            key={dataItem.id}
+            onPress={() => onItemPress?.(dataItem)}
             // @ts-ignore - hovered is available on web
             style={({ hovered }) => [
               styles.itemContainer,
               hovered && styles.itemHover,
             ]}
           >
-            <View>
-              <View style={styles.left}>
-                <View style={styles.serialContainer}>
-                  <Text style={styles.serial}>{index + 1}.</Text>
-                </View>
-                <View style={styles.tokens}>
-                  {/* Shape */}
-                  <Text style={styles.textStyleOne}>
-                    {item.shape_long ?? "-"}
-                  </Text>
-                  {/* Carat size */}
-                  <View style={{ flexDirection: "row", alignItems: "center" }}>
-                    <Text style={styles.textStyleTwo}>{item.size ?? "-"}</Text>
-                    {item.price_per_carat ? (
-                      <Text style={styles.textStyleOne}>ct</Text>
-                    ) : (
-                      <></>
-                    )}
-                  </View>
-                  {/* Color */}
-                  <Text style={styles.textStyleOne}>{item.color ?? "-"}</Text>
-                  {/* Clarity */}
-                  <Text style={styles.textStyleOne}>
-                    {item.clarity_short ?? "-"}
-                  </Text>
-                  <Text style={styles.textStyleOne}>{"·"}</Text>
-                  <View style={{ flexDirection: "row", alignItems: "center" }}>
-                    {/* Cut */}
-                    <Text style={styles.textStyleOne}>
-                      {item.cut_short ?? "-"}
-                    </Text>
-                    <Text style={styles.textStyleOne}>{"/"}</Text>
-                    {/* Polish */}
-                    <Text style={styles.textStyleOne}>
-                      {item.polish_short ?? "-"}
-                    </Text>
-                    <Text style={styles.textStyleOne}>{"/"}</Text>
-                    {/* Symmetry */}
-                    <Text style={styles.textStyleOne}>
-                      {item.symmetry_short ?? "-"}
-                    </Text>
-                  </View>
-                  <Text style={styles.textStyleOne}>{"·"}</Text>
-                  {/* Fluorescence */}
-                  <Text style={styles.textStyleOne}>
-                    {item.fluorescence_intensity_short ?? "-"}
-                  </Text>
-                  <Text style={styles.textStyleOne}>{"·"}</Text>
-                  {/* LAB */}
-                  <Text style={styles.textStyleOne}>
-                    {item.lab_short ?? "-"}
-                  </Text>
-                  <Text style={styles.textStyleOne}>{"·"}</Text>
-                  {/* Discount */}
-                  <Text style={styles.textStyleTwo}>
-                    {item.discount_percent ? item.discount_percent + "%" : "-"}
-                  </Text>
-                  <View style={styles.lineBreak} />
-                  {/* Depth */}
-                  <Text style={styles.textStyleOne}>{"D"}</Text>
-                  <Text style={styles.textStyleTwo}>
-                    {item.depth_percent ? item.depth_percent + "%" : "-"}
-                  </Text>
-                  <Text style={styles.textStyleOne}>{"·"}</Text>
-                  {/* Table */}
-                  <Text style={styles.textStyleOne}>{"T"}</Text>
-                  <Text style={styles.textStyleTwo}>
-                    {item.table_percent ? item.table_percent + "%" : "-"}
-                  </Text>
-                  <Text style={styles.textStyleOne}>{"·"}</Text>
-                  {/* Meas */}
-                  <Text style={styles.textStyleTwo}>
-                    {item.measurement ?? "-"}
-                  </Text>
-                  <Text style={styles.textStyleOne}>{"·"}</Text>
-                  {/* Price Per Carat */}
-                  <View style={{ flexDirection: "row", alignItems: "center" }}>
-                    {item.price_per_carat ? (
-                      <Text style={styles.textStyleTwo}>
-                        {userCurrency ? userCurrency : "$"}
-                      </Text>
-                    ) : (
-                      <></>
-                    )}
-                    <Text style={styles.textStyleTwo}>
-                      {item.price_per_carat ?? "-"}
-                    </Text>
-                    <Text style={styles.textStyleOne}>{"PC"}</Text>
-                  </View>
-                  {/* Total Sales Price */}
-                  <View style={{ flexDirection: "row", alignItems: "center" }}>
-                    <Text style={styles.textStyleOne}>{" ="}</Text>
-                    {item.total_sales_price ? (
-                      <Text style={styles.textStyleTwo}>
-                        {userCurrency ? userCurrency : "$"}
-                      </Text>
-                    ) : (
-                      <></>
-                    )}
-                    <Text style={styles.textStyleTwo}>
-                      {item.total_sales_price ?? "-"}
-                    </Text>
-                  </View>
-                </View>
+            <View style={styles.left}>
+              <View style={styles.serialContainer}>
+                <Serial>{index + 1}.</Serial>
+              </View>
+              <View style={styles.tokens}>
+                {DIAMOND_TOKENS.map((token, tokenIndex) =>
+                  renderToken(token, dataItem, userCurrency, tokenIndex)
+                )}
               </View>
             </View>
           </Pressable>
         ))}
       </ScrollView>
 
-      <TouchableOpacity
-        style={styles.button}
-        activeOpacity={0.8}
-        onPress={() => onViewAll(item)}
-      >
-        <Text
-          style={styles.buttonText}
-        >{`View All ${totalResults} Results`}</Text>
+      <ButtonView activeOpacity={0.8} onPress={() => onViewAll(item)}>
+        <ButtonText>{`View All ${totalResults} Results`}</ButtonText>
         <ImageComponent
           source={{
             uri: "https://cdn.vdbapp.com/ai/chat-widget/assets/img/right.svg",
           }}
           resizeMode="contain"
-          style={{ width: 20, height: 20, tintColor: "#fff" }}
+          style={{
+            width: 20,
+            height: 20,
+            tintColor: theme["primary-cont"] || "#ffffff",
+          }}
         />
-      </TouchableOpacity>
-    </View>
+      </ButtonView>
+    </Wrapper>
   );
 };
 
-const styles = StyleSheet.create({
-  wrapper: {
-    paddingHorizontal: 8,
-  },
+const Wrapper = styled.View<{ theme: DefaultTheme }>`
+  padding-horizontal: 8px;
+`;
+
+const Serial = styled.Text<{ theme: DefaultTheme }>`
+  font-size: 13px;
+  color: ${({ theme }: { theme: DefaultTheme }) =>
+    theme["core-05"] || "#020001"};
+  font-weight: 500;
+`;
 
+const TextStyleOne = styled.Text<{ theme: DefaultTheme }>`
+  font-size: 13px;
+  color: ${({ theme }: { theme: DefaultTheme }) =>
+    theme["core-06"] || "#4F4E57"};
+  font-weight: 400;
+  font-family: "Roboto";
+  font-style: normal;
+`;
+
+const TextStyleTwo = styled.Text<{ theme: DefaultTheme }>`
+  font-size: 13px;
+  color: ${({ theme }: { theme: DefaultTheme }) =>
+    theme["core-05"] || "#020001"};
+  font-weight: 500;
+  font-family: "Roboto";
+  font-style: normal;
+`;
+
+const ButtonView = styled.TouchableOpacity<{ theme: DefaultTheme }>`
+  margin-top: 12px;
+  margin-horizontal: 12px;
+  align-self: center;
+  padding-horizontal: 16px;
+  padding-vertical: 6px;
+  background-color: ${({ theme }: { theme: DefaultTheme }) =>
+    theme["primary-bg-static"] || "#292735"};
+  border-radius: 8px;
+  align-items: center;
+  gap: 16px;
+  width: 100%;
+  flex-direction: row;
+  justify-content: center;
+  align-content: center;
+`;
+
+const ButtonText = styled.Text<{ theme: DefaultTheme }>`
+  color: ${({ theme }: { theme: DefaultTheme }) =>
+    theme["primary-cont"] || "#ffffff"};
+  font-size: 14px;
+  font-weight: 600;
+`;
+
+const styles = StyleSheet.create({
   listContent: {
     gap: 8,
   },
-
-  row: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    paddingVertical: 6,
-    backgroundColor: "#fff",
-  },
-
   left: {
     flexDirection: "row",
     alignItems: "flex-start",
@@ -234,34 +340,9 @@ const styles = StyleSheet.create({
     width: "100%",
     height: 0,
   },
-
-  serial: {
-    fontSize: 13,
-    color: "#020001",
-    fontWeight: "500",
-  },
-
-  textStyleOne: {
-    fontFamily: "Roboto",
-    fontSize: 13,
-    fontStyle: "normal",
-    fontWeight: "400",
-    color: "#4F4E57",
-  },
-
-  textStyleTwo: {
-    fontFamily: "Roboto",
-    fontSize: 13,
-    fontStyle: "normal",
-    fontWeight: "500",
-    color: "#020001",
-  },
-
-  price: {
-    fontSize: 13,
-    fontWeight: "500",
-    color: "#020001",
-    textAlign: "left",
+  rowCenter: {
+    flexDirection: "row",
+    alignItems: "center",
   },
   priceContainer: {
     alignItems: "flex-start",
@@ -275,28 +356,6 @@ const styles = StyleSheet.create({
   itemHover: {
     backgroundColor: "#EDEDF2",
   },
-
-  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);

package/src/components/SuggestionsRow.tsx

@@ -6,6 +6,9 @@ import {
   StyleSheet,
   ScrollView,
 } from "react-native";
+import styled from "styled-components/native";
+import { useTheme } from "styled-components/native";
+import { DefaultTheme } from "styled-components/native";
 
 interface SuggestionsRowProps {
   suggestions: string[];
@@ -21,6 +24,7 @@ const SuggestionsRowComponent: React.FC<SuggestionsRowProps> = ({
 }) => {
   if (!suggestions.length) return null;
   const ScrollViewComponent = variant === "inline" ? View : ScrollView;
+  const theme = useTheme();
   return (
     <ScrollViewComponent
       showsVerticalScrollIndicator={false}
@@ -32,14 +36,15 @@ const SuggestionsRowComponent: React.FC<SuggestionsRowProps> = ({
     >
       {suggestions.map((s, index) => (
         <>
-          <TouchableOpacity
+          <ChipButton
             key={`${s}-${index}`}
-            style={[styles.chip, variant === "inline" && styles.chipInline]}
+            theme={theme}
+            variant={variant}
             onPress={() => onSelect(s)}
             activeOpacity={0.75}
           >
-            <Text style={styles.chipText}>{s}</Text>
-          </TouchableOpacity>
+            <ChipText>{s}</ChipText>
+          </ChipButton>
           {index < suggestions.length - 1 && <View style={styles.spacer} />}
         </>
       ))}
@@ -47,6 +52,37 @@ const SuggestionsRowComponent: React.FC<SuggestionsRowProps> = ({
   );
 };
 
+const ChipButton = styled.TouchableOpacity<{
+  theme: DefaultTheme;
+  variant: "inline" | "default";
+}>`
+  background-color: ${({
+    theme,
+    variant,
+  }: {
+    theme: DefaultTheme;
+    variant: "inline" | "default";
+  }) =>
+    variant === "inline"
+      ? theme["core-01"] || "#FFFFFF"
+      : theme["core-02"] || "#EDEDF2"};
+  border-radius: 6px;
+  padding-horizontal: 8px;
+  padding-vertical: 6px;
+  width: 100%;
+  align-self: stretch;
+  justify-content: center;
+  align-items: flex-start;
+`;
+
+const ChipText = styled.Text<{ theme: DefaultTheme }>`
+  color: ${({ theme }: { theme: DefaultTheme }) =>
+    theme["core-05"] || "#1A1A1A"};
+  font-size: 14px;
+  font-weight: 500;
+  text-align: left;
+`;
+
 const styles = StyleSheet.create({
   scroll: {
     maxWidth: "80%",
@@ -71,27 +107,6 @@ const styles = StyleSheet.create({
     // inside bubble, rely on bubble background
     gap: 6,
   },
-
-  chip: {
-    backgroundColor: "#EDEDF2",
-    borderRadius: 6,
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    width: "100%",
-    alignSelf: "stretch",
-    justifyContent: "center",
-    alignItems: "flex-start",
-  },
-  chipInline: {
-    backgroundColor: "#FFFFFF",
-  },
-
-  chipText: {
-    fontSize: 14,
-    color: "#1A1A1A",
-    fontWeight: "500",
-    textAlign: "left",
-  },
   spacer: {
     width: 4,
     height: 4,

package/src/contexts/ThemeProvider.tsx

@@ -0,0 +1,87 @@
+import { Platform } from "react-native";
+import React from "react";
+import {
+  DefaultTheme,
+  ThemeProvider as OriginalThemeProvider,
+} from "styled-components/native";
+import { useMediaQuery } from "react-responsive";
+import { DEFAULT_THEME } from "./utils";
+import { DEVICE_SIZE, isIpad } from "../components/utils";
+import { useMemo, useState, useEffect } from "react";
+import { Storage } from "../storage";
+
+// Conditionally import expo-device only on native platforms
+let Device: { osName?: string } | null = null;
+if (Platform.OS !== "web") {
+  try {
+    Device = require("expo-device");
+  } catch {
+    // expo-device not installed
+  }
+}
+
+interface Props {
+  children?: React.ReactElement;
+}
+
+const ThemeProvider = ({ children }: Props) => {
+  const [theme, setTheme] = useState<Record<string, any>>(DEFAULT_THEME);
+
+  useEffect(() => {
+    const loadTheme = async () => {
+      try {
+        const rootState = JSON.parse(
+          (await Storage.getItem("persist:root")) || "{}"
+        );
+        const userTheme = rootState.theme ? JSON.parse(rootState.theme) : null;
+        if (userTheme) {
+          setTheme(userTheme);
+        }
+      } catch {
+        // Keep default theme on error
+      }
+    };
+    loadTheme();
+  }, []);
+
+  if (Platform.OS === "web") {
+    const mediaQuery = window.matchMedia("print");
+    if (mediaQuery.matches) {
+      return null;
+    }
+  }
+
+  const mobileQuery = useMediaQuery({ maxWidth: 767 });
+  const tabletQuery = useMediaQuery({ minWidth: 767, maxWidth: 1279 });
+  const desktopQuery = useMediaQuery({ minWidth: 1279 });
+
+  const { width } = DEVICE_SIZE;
+  const isMobile = mobileQuery || width <= 767;
+  const isTablet =
+    tabletQuery ||
+    (width > 767 && width <= 1279) ||
+    (Device?.osName === "iPadOS") ||
+    isIpad();
+  const isDesktop =
+    (desktopQuery || width > 1279) &&
+    !(Device?.osName === "iPadOS" || isIpad());
+  const isLargeScreen = isDesktop && !isTablet && !isMobile;
+
+  const media = {
+    isMobile,
+    isTablet,
+    isDesktop,
+    isLargeScreen,
+  };
+
+  const mediaTheme = useMemo(
+    () => ({ ...theme, ...media } as DefaultTheme),
+    [theme, isMobile, isTablet, isDesktop, isLargeScreen]
+  );
+
+  return (
+    <OriginalThemeProvider theme={mediaTheme}>{children}</OriginalThemeProvider>
+  );
+};
+
+export default ThemeProvider;