vdb-ai-chat 1.0.6 → 1.0.8

package/src/api.ts

@@ -5,10 +5,14 @@ import type { ChatMessage } from "./types";
 // Generic params type reused for downstream APIs (e.g. product search payload)
 export type ChatApiParams = Record<string, any>;
 
-async function buildHeaders() {
+async function getUserToken(): Promise<string> {
   const userInfo = await Storage.getJSON<UserDetails>("persist:userInfo", {});
   const userData = JSON.parse(userInfo?.user || "{}");
-  const token = userData?.token || "";
+  return userData?.token || "";
+}
+
+async function buildHeaders() {
+  const token = await getUserToken();
   const iid = (await Storage.getItem("persist:appState")) || "{}";
   let installationId = "";
   try {
@@ -29,6 +33,45 @@ async function buildHeaders() {
   };
 }
 
+// Structure for storing conversations with session token
+interface StoredConversations {
+  token: string;
+  conversations: Record<string, { conversation_id: string | number }>;
+}
+
+// Validates that stored conversations belong to current session
+// If token changed (user re-logged), clears old data and returns empty
+async function getValidConversations(): Promise<
+  Record<string, { conversation_id: string | number }>
+> {
+  const currentToken = await getUserToken();
+  const stored = await Storage.getJSON<StoredConversations>(
+    "vdbchat_conversations",
+    null
+  );
+
+  // If no stored data or token doesn't match, clear and return empty
+  if (!stored || stored.token !== currentToken) {
+    // Clear old conversation data since session changed
+    await Storage.removeItem("vdbchat_conversations");
+    return {};
+  }
+
+  return stored.conversations || {};
+}
+
+// Saves conversations with current session token
+async function saveConversations(
+  conversations: Record<string, { conversation_id: string | number }>
+): Promise<void> {
+  const currentToken = await getUserToken();
+  const data: StoredConversations = {
+    token: currentToken,
+    conversations,
+  };
+  await Storage.setJSON("vdbchat_conversations", data);
+}
+
 export function normaliseMessages(raw: any): ChatMessage[] {
   const messages = Array.isArray(raw) ? raw : raw?.messages;
   if (!Array.isArray(messages)) return [];
@@ -54,10 +97,8 @@ export async function fetchInitialMessages(
   _params?: ChatApiParams,
   priceMode?: string | null
 ): Promise<any> {
-  const conversations = await Storage.getJSON<Record<string, any>>(
-    "vdbchat_conversations",
-    {}
-  );
+  // Get conversations valid for current session (auto-clears if token changed)
+  const conversations = await getValidConversations();
   const storedId = conversations?.[priceMode ?? ""]?.conversation_id ?? null;
   if (priceMode === undefined) return;
 
@@ -82,11 +123,11 @@ export async function fetchInitialMessages(
 
   // Persist conversation_id returned by the server for future calls
   if (data && data.conversation_id != null && priceMode) {
-    const updatedConversations = conversations || {};
+    const updatedConversations = { ...conversations };
     updatedConversations[priceMode] = {
       conversation_id: data.conversation_id,
     };
-    await Storage.setJSON("vdbchat_conversations", updatedConversations);
+    await saveConversations(updatedConversations);
   }
 
   return data;
@@ -99,10 +140,8 @@ export async function sendUserMessage(
   _history: ChatMessage[],
   priceMode: any
 ): Promise<any> {
-  const conversations = await Storage.getJSON<Record<string, any>>(
-    "vdbchat_conversations",
-    {}
-  );
+  // Get conversations valid for current session
+  const conversations = await getValidConversations();
   const storedId = conversations?.[priceMode]?.conversation_id ?? null;
 
   if (priceMode === undefined) {
@@ -131,11 +170,11 @@ export async function sendUserMessage(
   const data = await res.json();
 
   if (data && data.conversation_id != null && priceMode) {
-    const updatedConversations = conversations || {};
+    const updatedConversations = { ...conversations };
     updatedConversations[priceMode] = {
       conversation_id: data.conversation_id,
     };
-    await Storage.setJSON("vdbchat_conversations", updatedConversations);
+    await saveConversations(updatedConversations);
   }
 
   return data;
@@ -145,15 +184,13 @@ export async function clearChatHistory(
   apiUrl: string,
   priceMode: any
 ): Promise<void> {
-  const conversations = await Storage.getJSON<Record<string, any>>(
-    "vdbchat_conversations",
-    {}
-  );
+  // Get conversations valid for current session
+  const conversations = await getValidConversations();
   const storedId = conversations?.[priceMode]?.conversation_id ?? null;
   if (!storedId || priceMode === undefined) return;
 
   const url = new URL(apiUrl);
-  url.searchParams.set("conversation_id", storedId);
+  url.searchParams.set("conversation_id", String(storedId));
 
   const res = await fetch(url.toString(), {
     method: "DELETE",
@@ -165,9 +202,9 @@ export async function clearChatHistory(
   }
 
   // Clear from storage as well
-  const updatedConversations = conversations || {};
+  const updatedConversations = { ...conversations };
   delete updatedConversations[priceMode];
-  await Storage.setJSON("vdbchat_conversations", updatedConversations);
+  await saveConversations(updatedConversations);
 }
 
 export async function getProducts(

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,