vdb-ai-chat 1.0.7 → 1.0.9

package/lib/module/components/MessageMetaRow.js

@@ -1,6 +1,9 @@
 import React from "react";
-import { View, Text, StyleSheet, Image, Platform, Pressable } from "react-native";
+import { View, StyleSheet, Image, Platform } from "react-native";
 import { FeedbackAction, fetchConversationId, formatToTime } from "./utils";
+import { useTheme } from "styled-components/native";
+import styled from "styled-components/native";
+import { css } from "styled-components/native";
 let ImageComponent = Image;
 if (Platform.OS !== "web") {
   try {
@@ -11,11 +14,9 @@ if (Platform.OS !== "web") {
 export const MessageMetaRow = ({
   message,
   priceMode,
-  handleFeedbackAction,
-  onReloadResults,
-  reloading,
-  hasResults
+  handleFeedbackAction
 }) => {
+  const theme = useTheme();
   const isUser = message.role === "user";
   const [conversationId, setConversationId] = React.useState(null);
   React.useEffect(() => {
@@ -31,12 +32,14 @@ export const MessageMetaRow = ({
     style: [styles.rowContainer, isUser ? styles.alignRight : styles.alignLeft]
   }, /*#__PURE__*/React.createElement(View, {
     style: styles.timeContainer
-  }, /*#__PURE__*/React.createElement(Text, {
-    style: styles.timeText
+  }, /*#__PURE__*/React.createElement(TimeText, {
+    theme: theme
   }, formatToTime(message.createdAt))), canFeedback ? /*#__PURE__*/React.createElement(View, {
     style: styles.likeDislikeContainer
-  }, /*#__PURE__*/React.createElement(Pressable, {
-    style: state => [styles.borderButton, state?.hovered && styles.borderButtonHover, message.reaction === FeedbackAction.LIKE && styles.borderButtonLike],
+  }, /*#__PURE__*/React.createElement(LikeButton, {
+    type: "like",
+    style: state => [state?.hovered && styles.borderButtonHover],
+    reaction: message.reaction,
     onPress: () => handleFeedbackAction(FeedbackAction.LIKE, String(conversationId), message.id),
     disabled: !canFeedback
   }, /*#__PURE__*/React.createElement(ImageComponent, {
@@ -47,10 +50,12 @@ export const MessageMetaRow = ({
     style: {
       width: 20,
       height: 20,
-      tintColor: message.reaction === FeedbackAction.LIKE ? "#00B140" : "#020001"
+      tintColor: message.reaction === FeedbackAction.LIKE ? theme["success-01"] || "#00B140" : theme["core-05"] || "#020001"
     }
-  })), /*#__PURE__*/React.createElement(Pressable, {
-    style: state => [styles.borderButton, state?.hovered && styles.borderButtonHover, message.reaction === FeedbackAction.DISLIKE && styles.borderButtonDislike],
+  })), /*#__PURE__*/React.createElement(LikeButton, {
+    type: "dislike",
+    style: state => [state?.hovered && styles.borderButtonHover],
+    reaction: message.reaction,
     onPress: () => handleFeedbackAction(FeedbackAction.DISLIKE, String(conversationId), message.id),
     disabled: !canFeedback
   }, /*#__PURE__*/React.createElement(ImageComponent, {
@@ -61,10 +66,44 @@ export const MessageMetaRow = ({
     style: {
       width: 20,
       height: 20,
-      tintColor: message.reaction === FeedbackAction.DISLIKE ? "#D0021B" : "#020001"
+      tintColor: message.reaction === FeedbackAction.DISLIKE ? theme["error-01"] || "#D0021B" : theme["core-05"] || "#020001"
     }
   }))) : null);
 };
+const LikeButton = styled.Pressable`
+  border-width: 1;
+  border-radius: 8px;
+  padding-horizontal: 4px;
+  padding-vertical: 4px;
+  ${({
+  reaction,
+  type
+}) => reaction === FeedbackAction.LIKE && type === "like" ? css`
+          background-color: ${({
+  theme
+}) => theme["success-02"] || "#DBFFE4"};
+          border-color: ${({
+  theme
+}) => theme["success-01"] || "#00B140"};
+        ` : reaction === FeedbackAction.DISLIKE && type === "dislike" ? css`
+          background-color: ${({
+  theme
+}) => theme["error-02"] || "#FFE2E0"};
+          border-color: ${({
+  theme
+}) => theme["error-01"] || "#D0021B"};
+        ` : css`
+          border-color: ${({
+  theme
+}) => theme["core-03"] || "#D5D5DC"};
+        `}
+`;
+const TimeText = styled.Text`
+  font-size: 12px;
+  color: ${({
+  theme
+}) => theme["core-06"] || "#666"};
+`;
 const styles = StyleSheet.create({
   rowContainer: {
     flexDirection: "row",
@@ -88,27 +127,8 @@ const styles = StyleSheet.create({
   timeContainer: {
     margin: 0
   },
-  borderButton: {
-    borderWidth: 1,
-    borderColor: "#D5D5DC",
-    borderRadius: 8,
-    paddingHorizontal: 4,
-    paddingVertical: 4
-  },
   borderButtonHover: {
     backgroundColor: "#EDEDF2"
-  },
-  borderButtonLike: {
-    backgroundColor: "#DBFFE4",
-    borderColor: "#00B140"
-  },
-  borderButtonDislike: {
-    backgroundColor: "#FFE2E0",
-    borderColor: "#D0021B"
-  },
-  timeText: {
-    fontSize: 12,
-    color: "#666"
   }
 });
 export default MessageMetaRow;

package/lib/module/components/MessageMetaRow.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","Text","StyleSheet","Image","Platform","Pressable","FeedbackAction","fetchConversationId","formatToTime","ImageComponent","OS","ExpoImage","require","MessageMetaRow","message","priceMode","handleFeedbackAction","onReloadResults","reloading","hasResults","isUser","role","conversationId","setConversationId","useState","useEffect","fetchId","id","isValidMessageId","length","startsWith","canFeedback","isLoading","createElement","style","styles","rowContainer","alignRight","alignLeft","timeContainer","timeText","createdAt","likeDislikeContainer","state","borderButton","hovered","borderButtonHover","reaction","LIKE","borderButtonLike","onPress","String","disabled","source","uri","resizeMode","width","height","tintColor","DISLIKE","borderButtonDislike","create","flexDirection","justifyContent","alignItems","gap","marginHorizontal","marginTop","marginBottom","alignSelf","margin","borderWidth","borderColor","borderRadius","paddingHorizontal","paddingVertical","backgroundColor","fontSize","color"],"sourceRoot":"../../../src","sources":["components/MessageMetaRow.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","View","StyleSheet","Image","Platform","FeedbackAction","fetchConversationId","formatToTime","useTheme","styled","css","ImageComponent","OS","ExpoImage","require","MessageMetaRow","message","priceMode","handleFeedbackAction","theme","isUser","role","conversationId","setConversationId","useState","useEffect","fetchId","id","isValidMessageId","length","startsWith","canFeedback","isLoading","createElement","style","styles","rowContainer","alignRight","alignLeft","timeContainer","TimeText","createdAt","likeDislikeContainer","LikeButton","type","state","hovered","borderButtonHover","reaction","onPress","LIKE","String","disabled","source","uri","resizeMode","width","height","tintColor","DISLIKE","Pressable","Text","create","flexDirection","justifyContent","alignItems","gap","marginHorizontal","marginTop","marginBottom","alignSelf","margin","backgroundColor"],"sourceRoot":"../../../src","sources":["components/MessageMetaRow.tsx"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,UAAU,EAAEC,KAAK,EAAEC,QAAQ,QAAQ,cAAc;AAEhE,SAASC,cAAc,EAAEC,mBAAmB,EAAEC,YAAY,QAAQ,SAAS;AAC3E,SAASC,QAAQ,QAAQ,0BAA0B;AACnD,OAAOC,MAAM,MAAM,0BAA0B;AAE7C,SAASC,GAAG,QAAQ,0BAA0B;AAE9C,IAAIC,cAA4B,GAAGR,KAAK;AACxC,IAAIC,QAAQ,CAACQ,EAAE,KAAK,KAAK,EAAE;EACzB,IAAI;IACF,MAAMC,SAAS,GAAGC,OAAO,CAAC,YAAY,CAAC,CAACX,KAAK;IAC7C,IAAIU,SAAS,EAAEF,cAAc,GAAGE,SAAS;EAC3C,CAAC,CAAC,MAAM,CAAC;AACX;AAeA,OAAO,MAAME,cAA+B,GAAGA,CAAC;EAC9CC,OAAO;EACPC,SAAS;EACTC;AACF,CAAC,KAAK;EACJ,MAAMC,KAAK,GAAGX,QAAQ,CAAC,CAAC;EACxB,MAAMY,MAAM,GAAGJ,OAAO,CAACK,IAAI,KAAK,MAAM;EACtC,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAGvB,KAAK,CAACwB,QAAQ,CACxD,IACF,CAAC;EAEDxB,KAAK,CAACyB,SAAS,CAAC,MAAM;IACpB,MAAMC,OAAO,GAAG,MAAAA,CAAA,KAAY;MAC1B,MAAMC,EAAE,GAAG,MAAMrB,mBAAmB,CAACW,SAAS,CAAC;MAC/CM,iBAAiB,CAACI,EAAE,CAAC;IACvB,CAAC;IACDD,OAAO,CAAC,CAAC;EACX,CAAC,EAAE,CAACT,SAAS,CAAC,CAAC;EAEf,MAAMW,gBAAgB,GACpB,OAAOZ,OAAO,CAACW,EAAE,KAAK,QAAQ,IAC9BX,OAAO,CAACW,EAAE,CAACE,MAAM,GAAG,CAAC,IACrB,CAACb,OAAO,CAACW,EAAE,CAACG,UAAU,CAAC,cAAc,CAAC;EACxC,MAAMC,WAAW,GACff,OAAO,CAACK,IAAI,KAAK,WAAW,IAC5B,CAACL,OAAO,CAACgB,SAAS,IAClBJ,gBAAgB,IAChB,CAAC,CAACN,cAAc;EAElB,oBACEtB,KAAA,CAAAiC,aAAA,CAAChC,IAAI;IACHiC,KAAK,EAAE,CACLC,MAAM,CAACC,YAAY,EACnBhB,MAAM,GAAGe,MAAM,CAACE,UAAU,GAAGF,MAAM,CAACG,SAAS;EAC7C,gBAEFtC,KAAA,CAAAiC,aAAA,CAAChC,IAAI;IAACiC,KAAK,EAAEC,MAAM,CAACI;EAAc,gBAChCvC,KAAA,CAAAiC,aAAA,CAACO,QAAQ;IAACrB,KAAK,EAAEA;EAAM,GAAEZ,YAAY,CAACS,OAAO,CAACyB,SAAS,CAAY,CAC/D,CAAC,EACNV,WAAW,gBACV/B,KAAA,CAAAiC,aAAA,CAAChC,IAAI;IAACiC,KAAK,EAAEC,MAAM,CAACO;EAAqB,gBACvC1C,KAAA,CAAAiC,aAAA,CAACU,UAAU;IACTC,IAAI,EAAC,MAAM;IACXV,KAAK,EAAGW,KAAU,IAAK,CAACA,KAAK,EAAEC,OAAO,IAAIX,MAAM,CAACY,iBAAiB,CAAE;IACpEC,QAAQ,EAAEhC,OAAO,CAACgC,QAAS;IAC3BC,OAAO,EAAEA,CAAA,KACP/B,oBAAoB,CAClBb,cAAc,CAAC6C,IAAI,EACnBC,MAAM,CAAC7B,cAAc,CAAC,EACtBN,OAAO,CAACW,EACV,CACD;IACDyB,QAAQ,EAAE,CAACrB;EAAY,gBAEvB/B,KAAA,CAAAiC,aAAA,CAACtB,cAAc;IACb0C,MAAM,EAAE;MACNC,GAAG,EAAE;IACP,CAAE;IACFC,UAAU,EAAC,SAAS;IACpBrB,KAAK,EAAE;MACLsB,KAAK,EAAE,EAAE;MACTC,MAAM,EAAE,EAAE;MACVC,SAAS,EACP1C,OAAO,CAACgC,QAAQ,KAAK3C,cAAc,CAAC6C,IAAI,GACpC/B,KAAK,CAAC,YAAY,CAAC,IAAI,SAAS,GAChCA,KAAK,CAAC,SAAS,CAAC,IAAI;IAC5B;EAAE,CACH,CACS,CAAC,eACbnB,KAAA,CAAAiC,aAAA,CAACU,UAAU;IACTC,IAAI,EAAC,SAAS;IACdV,KAAK,EAAGW,KAAU,IAAK,CAACA,KAAK,EAAEC,OAAO,IAAIX,MAAM,CAACY,iBAAiB,CAAE;IACpEC,QAAQ,EAAEhC,OAAO,CAACgC,QAAS;IAC3BC,OAAO,EAAEA,CAAA,KACP/B,oBAAoB,CAClBb,cAAc,CAACsD,OAAO,EACtBR,MAAM,CAAC7B,cAAc,CAAC,EACtBN,OAAO,CAACW,EACV,CACD;IACDyB,QAAQ,EAAE,CAACrB;EAAY,gBAEvB/B,KAAA,CAAAiC,aAAA,CAACtB,cAAc;IACb0C,MAAM,EAAE;MACNC,GAAG,EAAE;IACP,CAAE;IACFC,UAAU,EAAC,SAAS;IACpBrB,KAAK,EAAE;MACLsB,KAAK,EAAE,EAAE;MACTC,MAAM,EAAE,EAAE;MACVC,SAAS,EACP1C,OAAO,CAACgC,QAAQ,KAAK3C,cAAc,CAACsD,OAAO,GACvCxC,KAAK,CAAC,UAAU,CAAC,IAAI,SAAS,GAC9BA,KAAK,CAAC,SAAS,CAAC,IAAI;IAC5B;EAAE,CACH,CACS,CACR,CAAC,GACL,IA2BA,CAAC;AAEX,CAAC;AAED,MAAMwB,UAAU,GAAGlC,MAAM,CAACmD,SAIxB;AACF;AACA;AACA;AACA;AACA,IAAI,CAAC;EACDZ,QAAQ;EACRJ;AAIF,CAAC,KACCI,QAAQ,KAAK3C,cAAc,CAAC6C,IAAI,IAAIN,IAAI,KAAK,MAAM,GAC/ClC,GAAG;AACX,8BAA8B,CAAC;EAAES;AAA+B,CAAC,KACrDA,KAAK,CAAC,YAAY,CAAC,IAAI,SAAS;AAC5C,0BAA0B,CAAC;EAAEA;AAA+B,CAAC,KACjDA,KAAK,CAAC,YAAY,CAAC,IAAI,SAAS;AAC5C,SAAS,GACD6B,QAAQ,KAAK3C,cAAc,CAACsD,OAAO,IAAIf,IAAI,KAAK,SAAS,GACzDlC,GAAG;AACX,8BAA8B,CAAC;EAAES;AAA+B,CAAC,KACrDA,KAAK,CAAC,UAAU,CAAC,IAAI,SAAS;AAC1C,0BAA0B,CAAC;EAAEA;AAA+B,CAAC,KACjDA,KAAK,CAAC,UAAU,CAAC,IAAI,SAAS;AAC1C,SAAS,GACDT,GAAG;AACX,0BAA0B,CAAC;EAAES;AAA+B,CAAC,KACjDA,KAAK,CAAC,SAAS,CAAC,IAAI,SAAS;AACzC,SAAS;AACT,CAAC;AAED,MAAMqB,QAAQ,GAAG/B,MAAM,CAACoD,IAA6B;AACrD;AACA,WAAW,CAAC;EAAE1C;AAA+B,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC,IAAI,MAAM;AAC7E,CAAC;AAED,MAAMgB,MAAM,GAAGjC,UAAU,CAAC4D,MAAM,CAAC;EAC/B1B,YAAY,EAAE;IACZ2B,aAAa,EAAE,KAAK;IACpBC,cAAc,EAAE,eAAe;IAC/BC,UAAU,EAAE,QAAQ;IACpBC,GAAG,EAAE,CAAC;IACNC,gBAAgB,EAAE,CAAC;IACnBC,SAAS,EAAE,CAAC;IACZC,YAAY,EAAE;EAChB,CAAC;EACDhC,UAAU,EAAE;IACViC,SAAS,EAAE;EACb,CAAC;EACDhC,SAAS,EAAE;IACTgC,SAAS,EAAE;EACb,CAAC;EACD5B,oBAAoB,EAAE;IACpBqB,aAAa,EAAE,KAAK;IACpBG,GAAG,EAAE;EACP,CAAC;EACD3B,aAAa,EAAE;IACbgC,MAAM,EAAE;EACV,CAAC;EACDxB,iBAAiB,EAAE;IACjByB,eAAe,EAAE;EACnB;AACF,CAAC,CAAC;AAEF,eAAezD,cAAc","ignoreList":[]}

package/lib/module/components/ProductsListView.js

@@ -1,6 +1,8 @@
 import React, { memo, useEffect, useState } from "react";
-import { View, StyleSheet, Text, TouchableOpacity, ScrollView, Platform, Image, Pressable } from "react-native";
+import { View, StyleSheet, ScrollView, Platform, Image, Pressable } from "react-native";
 import { getUserCurrencySymbol } from "./utils";
+import { useTheme } from "styled-components/native";
+import styled from "styled-components/native";
 let ImageComponent = Image;
 if (Platform.OS !== "web") {
   try {
@@ -10,6 +12,171 @@ if (Platform.OS !== "web") {
     // expo-image not installed, use React Native Image
   }
 }
+
+// Token configuration for diamond details display
+
+const DIAMOND_TOKENS = [
+// 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: " ="
+}];
+const renderToken = (token, item, userCurrency, index) => {
+  const TextView = token.style === "secondary" ? TextStyleTwo : TextStyleOne;
+  const currency = userCurrency || "$";
+  const theme = useTheme();
+  switch (token.type) {
+    case "separator":
+      return /*#__PURE__*/React.createElement(TextView, {
+        key: index,
+        theme: theme
+      }, "·");
+    case "lineBreak":
+      return /*#__PURE__*/React.createElement(View, {
+        key: index,
+        style: styles.lineBreak
+      });
+    case "field":
+      {
+        let value = item[token.field] ?? "-";
+        if (token.format === "percent" && value !== "-") {
+          value = `${value}%`;
+        }
+        return /*#__PURE__*/React.createElement(React.Fragment, {
+          key: index
+        }, token.prefix && /*#__PURE__*/React.createElement(TextView, {
+          theme: theme
+        }, token.prefix), /*#__PURE__*/React.createElement(TextView, {
+          theme: theme
+        }, value));
+      }
+    case "fieldWithSuffix":
+      {
+        const value = item[token.field] ?? "-";
+        const showSuffix = token.showCurrencyIf ? item[token.showCurrencyIf] : true;
+        return /*#__PURE__*/React.createElement(View, {
+          key: index,
+          style: styles.rowCenter
+        }, /*#__PURE__*/React.createElement(TextView, {
+          theme: theme
+        }, value), showSuffix && token.suffix && /*#__PURE__*/React.createElement(TextView, {
+          theme: theme
+        }, token.suffix));
+      }
+    case "priceField":
+      {
+        const value = item[token.field];
+        return /*#__PURE__*/React.createElement(View, {
+          key: index,
+          style: styles.rowCenter
+        }, token.prefix && /*#__PURE__*/React.createElement(TextView, {
+          theme: theme
+        }, token.prefix), value && /*#__PURE__*/React.createElement(TextView, {
+          theme: theme
+        }, currency), /*#__PURE__*/React.createElement(TextView, {
+          theme: theme
+        }, value ?? "-"), token.suffix && /*#__PURE__*/React.createElement(TextView, {
+          theme: theme
+        }, token.suffix));
+      }
+    case "group":
+      return /*#__PURE__*/React.createElement(View, {
+        key: index,
+        style: styles.rowCenter
+      }, token.items?.map((subToken, subIndex) => renderToken(subToken, item, userCurrency, subIndex)));
+    default:
+      return null;
+  }
+};
 const ProductsListViewComponent = ({
   data,
   totalResults,
@@ -18,6 +185,7 @@ const ProductsListViewComponent = ({
   item
 }) => {
   if (!data || !data.length) return null;
+  const theme = useTheme();
   const [userCurrency, setUserCurrency] = useState(null);
   useEffect(() => {
     const fetchCurrency = async () => {
@@ -26,118 +194,29 @@ const ProductsListViewComponent = ({
     };
     fetchCurrency();
   }, []);
-  return /*#__PURE__*/React.createElement(View, {
-    style: styles.wrapper
+  return /*#__PURE__*/React.createElement(Wrapper, {
+    theme: theme
   }, /*#__PURE__*/React.createElement(ScrollView, {
     showsVerticalScrollIndicator: false,
     contentContainerStyle: styles.listContent
-  }, data.map((item, index) => /*#__PURE__*/React.createElement(Pressable, {
-    key: item.id,
-    onPress: () => onItemPress?.(item)
+  }, data.map((dataItem, index) => /*#__PURE__*/React.createElement(Pressable, {
+    key: dataItem.id,
+    onPress: () => onItemPress?.(dataItem)
     // @ts-ignore - hovered is available on web
     ,
     style: ({
       hovered
     }) => [styles.itemContainer, hovered && styles.itemHover]
-  }, /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
+  }, /*#__PURE__*/React.createElement(View, {
     style: styles.left
   }, /*#__PURE__*/React.createElement(View, {
     style: styles.serialContainer
-  }, /*#__PURE__*/React.createElement(Text, {
-    style: styles.serial
-  }, index + 1, ".")), /*#__PURE__*/React.createElement(View, {
+  }, /*#__PURE__*/React.createElement(Serial, null, index + 1, ".")), /*#__PURE__*/React.createElement(View, {
     style: styles.tokens
-  }, /*#__PURE__*/React.createElement(Text, {
-    style: styles.textStyleOne
-  }, item.shape_long ?? "-"), /*#__PURE__*/React.createElement(View, {
-    style: {
-      flexDirection: "row",
-      alignItems: "center"
-    }
-  }, /*#__PURE__*/React.createElement(Text, {
-    style: styles.textStyleTwo
-  }, item.size ?? "-"), item.price_per_carat ? /*#__PURE__*/React.createElement(Text, {
-    style: styles.textStyleOne
-  }, "ct") : /*#__PURE__*/React.createElement(React.Fragment, null)), /*#__PURE__*/React.createElement(Text, {
-    style: styles.textStyleOne
-  }, item.color ?? "-"), /*#__PURE__*/React.createElement(Text, {
-    style: styles.textStyleOne
-  }, item.clarity_short ?? "-"), /*#__PURE__*/React.createElement(Text, {
-    style: styles.textStyleOne
-  }, "·"), /*#__PURE__*/React.createElement(View, {
-    style: {
-      flexDirection: "row",
-      alignItems: "center"
-    }
-  }, /*#__PURE__*/React.createElement(Text, {
-    style: styles.textStyleOne
-  }, item.cut_short ?? "-"), /*#__PURE__*/React.createElement(Text, {
-    style: styles.textStyleOne
-  }, "/"), /*#__PURE__*/React.createElement(Text, {
-    style: styles.textStyleOne
-  }, item.polish_short ?? "-"), /*#__PURE__*/React.createElement(Text, {
-    style: styles.textStyleOne
-  }, "/"), /*#__PURE__*/React.createElement(Text, {
-    style: styles.textStyleOne
-  }, item.symmetry_short ?? "-")), /*#__PURE__*/React.createElement(Text, {
-    style: styles.textStyleOne
-  }, "·"), /*#__PURE__*/React.createElement(Text, {
-    style: styles.textStyleOne
-  }, item.fluorescence_intensity_short ?? "-"), /*#__PURE__*/React.createElement(Text, {
-    style: styles.textStyleOne
-  }, "·"), /*#__PURE__*/React.createElement(Text, {
-    style: styles.textStyleOne
-  }, item.lab_short ?? "-"), /*#__PURE__*/React.createElement(Text, {
-    style: styles.textStyleOne
-  }, "·"), /*#__PURE__*/React.createElement(Text, {
-    style: styles.textStyleTwo
-  }, item.discount_percent ? item.discount_percent + "%" : "-"), /*#__PURE__*/React.createElement(View, {
-    style: styles.lineBreak
-  }), /*#__PURE__*/React.createElement(Text, {
-    style: styles.textStyleOne
-  }, "D"), /*#__PURE__*/React.createElement(Text, {
-    style: styles.textStyleTwo
-  }, item.depth_percent ? item.depth_percent + "%" : "-"), /*#__PURE__*/React.createElement(Text, {
-    style: styles.textStyleOne
-  }, "·"), /*#__PURE__*/React.createElement(Text, {
-    style: styles.textStyleOne
-  }, "T"), /*#__PURE__*/React.createElement(Text, {
-    style: styles.textStyleTwo
-  }, item.table_percent ? item.table_percent + "%" : "-"), /*#__PURE__*/React.createElement(Text, {
-    style: styles.textStyleOne
-  }, "·"), /*#__PURE__*/React.createElement(Text, {
-    style: styles.textStyleTwo
-  }, item.measurement ?? "-"), /*#__PURE__*/React.createElement(Text, {
-    style: styles.textStyleOne
-  }, "·"), /*#__PURE__*/React.createElement(View, {
-    style: {
-      flexDirection: "row",
-      alignItems: "center"
-    }
-  }, item.price_per_carat ? /*#__PURE__*/React.createElement(Text, {
-    style: styles.textStyleTwo
-  }, userCurrency ? userCurrency : "$") : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(Text, {
-    style: styles.textStyleTwo
-  }, item.price_per_carat ?? "-"), /*#__PURE__*/React.createElement(Text, {
-    style: styles.textStyleOne
-  }, "PC")), /*#__PURE__*/React.createElement(View, {
-    style: {
-      flexDirection: "row",
-      alignItems: "center"
-    }
-  }, /*#__PURE__*/React.createElement(Text, {
-    style: styles.textStyleOne
-  }, " ="), item.total_sales_price ? /*#__PURE__*/React.createElement(Text, {
-    style: styles.textStyleTwo
-  }, userCurrency ? userCurrency : "$") : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(Text, {
-    style: styles.textStyleTwo
-  }, item.total_sales_price ?? "-")))))))), /*#__PURE__*/React.createElement(TouchableOpacity, {
-    style: styles.button,
+  }, DIAMOND_TOKENS.map((token, tokenIndex) => renderToken(token, dataItem, userCurrency, tokenIndex))))))), /*#__PURE__*/React.createElement(ButtonView, {
     activeOpacity: 0.8,
     onPress: () => onViewAll(item)
-  }, /*#__PURE__*/React.createElement(Text, {
-    style: styles.buttonText
-  }, `View All ${totalResults} Results`), /*#__PURE__*/React.createElement(ImageComponent, {
+  }, /*#__PURE__*/React.createElement(ButtonText, null, `View All ${totalResults} Results`), /*#__PURE__*/React.createElement(ImageComponent, {
     source: {
       uri: "https://cdn.vdbapp.com/ai/chat-widget/assets/img/right.svg"
     },
@@ -145,24 +224,66 @@ const ProductsListViewComponent = ({
     style: {
       width: 20,
       height: 20,
-      tintColor: "#fff"
+      tintColor: theme["primary-cont"] || "#ffffff"
     }
   })));
 };
+const Wrapper = styled.View`
+  padding-horizontal: 8px;
+`;
+const Serial = styled.Text`
+  font-size: 13px;
+  color: ${({
+  theme
+}) => theme["core-05"] || "#020001"};
+  font-weight: 500;
+`;
+const TextStyleOne = styled.Text`
+  font-size: 13px;
+  color: ${({
+  theme
+}) => theme["core-06"] || "#4F4E57"};
+  font-weight: 400;
+  font-family: "Roboto";
+  font-style: normal;
+`;
+const TextStyleTwo = styled.Text`
+  font-size: 13px;
+  color: ${({
+  theme
+}) => theme["core-05"] || "#020001"};
+  font-weight: 500;
+  font-family: "Roboto";
+  font-style: normal;
+`;
+const ButtonView = styled.TouchableOpacity`
+  margin-top: 12px;
+  margin-horizontal: 12px;
+  align-self: center;
+  padding-horizontal: 16px;
+  padding-vertical: 6px;
+  background-color: ${({
+  theme
+}) => 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`
+  color: ${({
+  theme
+}) => theme["primary-cont"] || "#ffffff"};
+  font-size: 14px;
+  font-weight: 600;
+`;
 const styles = StyleSheet.create({
-  wrapper: {
-    paddingHorizontal: 8
-  },
   listContent: {
     gap: 8
   },
-  row: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    paddingVertical: 6,
-    backgroundColor: "#fff"
-  },
   left: {
     flexDirection: "row",
     alignItems: "flex-start",
@@ -184,30 +305,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",
@@ -218,26 +318,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 = /*#__PURE__*/memo(ProductsListViewComponent);