vdb-ai-chat 1.0.7 → 1.0.9

package/lib/typescript/contexts/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/contexts/utils.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsIzB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vdb-ai-chat",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "Cross-platform AI chat widget for React Native and Web",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -61,8 +61,12 @@
     }
   },
   "dependencies": {
+    "@types/styled-components": "^5.1.36",
+    "@types/styled-components-react-native": "^5.2.5",
+    "expo-device": "^8.0.10",
     "react-native-web": "^0.19.13",
-    "react-responsive": "^10.0.1"
+    "react-responsive": "^10.0.1",
+    "styled-components": "^6.1.19"
   },
   "devDependencies": {
     "@babel/core": "^7.26.0",

package/src/api.ts

@@ -251,6 +251,18 @@ export async function getProducts(
     });
   }
 
+  let depth_percent_from: number | undefined;
+  let depth_percent_to: number | undefined;
+  let table_percent_from: number | undefined;
+  let table_percent_to: number | undefined;
+
+  if (userInfo?.user?.max_search_key_values) {
+    depth_percent_from = userInfo.user.max_search_key_values.min_depth;
+    depth_percent_to = userInfo.user.max_search_key_values.max_depth;
+    table_percent_from = userInfo.user.max_search_key_values.min_table;
+    table_percent_to = userInfo.user.max_search_key_values.max_table;
+  }
+
   const res = await fetch(
     "https://pdpdemo1.demo.customvirtual.app/v3/vdb/search_diamonds",
     {
@@ -268,6 +280,18 @@ export async function getProducts(
           pair: sectionName === "Single Stones" ? "other" : "pair",
           with_available_items: false,
           page_number: 1,
+          ...(depth_percent_from !== undefined && depth_percent_to !== undefined
+            ? {
+                depth_percent_from: depth_percent_from,
+                depth_percent_to: depth_percent_to,
+              }
+            : {}),
+          ...(table_percent_from !== undefined && table_percent_to !== undefined
+            ? {
+                table_percent_from: table_percent_from,
+                table_percent_to: table_percent_to,
+              }
+            : {}),
         },
       }),
     }

package/src/components/BetaNotice.tsx

@@ -1,17 +1,28 @@
 import React from "react";
-import { View, Text, StyleSheet } from "react-native";
+import { View, StyleSheet } from "react-native";
+import styled from "styled-components/native";
+import { DefaultTheme } from "styled-components/native";
 
 export const BetaNotice = ({ active }: { active?: boolean }) => {
   if (!active) return null;
   return (
     <View style={styles.container}>
-      <Text style={styles.text}>
-        This AI feature is in beta and may make mistakes.
-      </Text>
+      <TextView>This AI feature is in beta and may make mistakes.</TextView>
     </View>
   );
 };
 
+const TextView = styled.Text<{ theme: DefaultTheme }>`
+  color: ${({ theme }: { theme: DefaultTheme }) =>
+    theme["core-06"] || "#4F4E57"};
+  font-family: "Roboto";
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 18px;
+  text-align: center;
+`;
+
 const styles = StyleSheet.create({
   container: {
     alignSelf: "stretch",
@@ -21,15 +32,6 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
   },
-  text: {
-    color: "#4F4E57",
-    fontFamily: "Roboto",
-    fontSize: 13,
-    fontStyle: "normal",
-    fontWeight: "400",
-    lineHeight: 18,
-    textAlign: "center",
-  },
 });
 
 export default BetaNotice;

package/src/components/ChatInput.tsx

@@ -1,14 +1,14 @@
 import React from "react";
 import {
-  View,
   TextInput,
-  TouchableOpacity,
-  Text,
   StyleSheet,
   Platform,
   Image,
 } from "react-native";
 import type { ChatTheme } from "../types";
+import { useTheme } from "styled-components/native";
+import { DefaultTheme } from "styled-components/native";
+import styled from "styled-components/native";
 
 // Use expo-image on native if available, fallback to RN Image
 let ImageComponent: typeof Image = Image;
@@ -17,7 +17,7 @@ if (Platform.OS !== "web") {
     const ExpoImage = require("expo-image").Image;
     if (ExpoImage) ImageComponent = ExpoImage;
   } catch {
-    // expo-image not installed, use React Native Image
+    ImageComponent = Image;
   }
 }
 
@@ -39,7 +39,7 @@ const SendIcon = ({
   isEmpty: boolean;
 }) => {
   const isInactive = disabled || isEmpty;
-
+  const theme = useTheme();
   return (
     <ImageComponent
       source={{
@@ -48,7 +48,9 @@ const SendIcon = ({
       resizeMode="contain"
       style={{
         ...styles.buttonIcon,
-        tintColor: isInactive ? "#ACACB3" : "#020001",
+        tintColor: isInactive
+          ? theme["core-04"] || "#ACACB3"
+          : theme["core-05"] || "#020001",
         cursor: isInactive ? "auto" : "pointer",
       }}
     />
@@ -61,56 +63,80 @@ export const ChatInput: React.FC<Props> = ({
   onSend,
   disabled,
   placeholder,
-  theme,
   inputRef,
 }) => {
-  const isInactive = disabled || value.trim() === "";
-
+  const theme = useTheme();
   return (
-    <View
-      style={[
-        styles.inputContainer,
-        Platform.OS === "web" ? styles.webShadow : styles.nativeShadow,
-      ]}
+    <InputContainer
+      theme={theme}
+      style={[Platform.OS === "web" ? styles.webShadow : styles.nativeShadow]}
     >
-      <TextInput
+      <Input
         ref={inputRef}
         // @ts-ignore - supported on web via react-native-web
         id="chat-input"
-        style={[styles.input, styles.inputWeb]}
+        style={[styles.inputWeb]}
         placeholder={placeholder || "What are you looking for?"}
-        placeholderTextColor="#999"
+        placeholderTextColor={theme["core-06"] || "#999"}
         value={value}
         onChangeText={onChangeText}
         onSubmitEditing={onSend}
         editable={!disabled}
         autoFocus
       />
-      <TouchableOpacity
-        style={styles.button}
-        onPress={onSend}
-        disabled={disabled}
-      >
+      <SendButton onPress={onSend} disabled={disabled}>
         <SendIcon disabled={disabled} isEmpty={value.trim() === ""} />
-      </TouchableOpacity>
-    </View>
+      </SendButton>
+    </InputContainer>
   );
 };
 
+const InputContainer = styled.View<{ theme: DefaultTheme }>`
+  flex-direction: row;
+  padding-horizontal: 12px;
+  padding-vertical: 16px;
+  justify-content: space-between;
+  align-items: center;
+  align-self: stretch;
+  border-radius: 8px;
+  background-color: ${({ theme }: { theme: DefaultTheme }) =>
+    theme["core-01"] || "#FFFFFF"};
+  border-color: ${({ theme }: { theme: DefaultTheme }) =>
+    theme["core-04"] || "#ACACB3"};
+  border-width: 1;
+  height: 56px;
+`;
+
+const Input = styled.TextInput<{ theme: DefaultTheme }>`
+  flex: 1;
+  color: ${({ theme }: { theme: DefaultTheme }) =>
+    theme["core-06"] || "#4F4E57"};
+  font-family: "Roboto";
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+  min-height: 20px;
+  max-height: 120px;
+  padding-horizontal: 0;
+  padding-vertical: 0;
+  background-color: transparent;
+  border-width: 0;
+`;
+
+const SendButton = styled.TouchableOpacity<{ theme: DefaultTheme }>`
+  margin-left: 0;
+  padding: 0;
+  justify-content: center;
+  align-items: center;
+  height: 24;
+  aspect-ratio: 1;
+  border-radius: 0px;
+  background-color: ${({ theme }: { theme: DefaultTheme }) =>
+    theme["core-01"] || "#FFFFFF"};
+`;
+
 const styles = StyleSheet.create({
-  inputContainer: {
-    flexDirection: "row",
-    paddingHorizontal: 12,
-    paddingVertical: 16,
-    justifyContent: "space-between",
-    alignItems: "center",
-    alignSelf: "stretch",
-    borderRadius: 8,
-    backgroundColor: "#FFF",
-    borderColor: "#ACACB3",
-    borderWidth: 1,
-    height: 56,
-  },
   webShadow: {
     ...(Platform.OS === "web"
       ? ({ boxShadow: "2px 8px 24px -6px rgba(55, 54, 64, 0.26)" } as any)
@@ -123,36 +149,11 @@ const styles = StyleSheet.create({
     shadowRadius: 12,
     elevation: 3,
   },
-  input: {
-    flex: 1,
-    color: "#4F4E57",
-    fontFamily: "Roboto",
-    fontSize: 14,
-    fontStyle: "normal",
-    fontWeight: "400",
-    lineHeight: 20,
-    minHeight: 20,
-    maxHeight: 120,
-    paddingHorizontal: 0,
-    paddingVertical: 0,
-    backgroundColor: "transparent",
-    borderWidth: 0,
-  },
   inputWeb: {
     ...(Platform.OS === "web"
       ? ({ outlineStyle: "none", outlineWidth: 0, boxShadow: "none" } as any)
       : {}),
   },
-  button: {
-    marginLeft: 0,
-    padding: 0,
-    justifyContent: "center",
-    alignItems: "center",
-    height: 24,
-    aspectRatio: 1,
-    borderRadius: 0,
-    backgroundColor: "#FFFFFF",
-  },
   buttonIcon: {
     height: 24,
     width: 24,