vdb-ai-chat 1.0.0

package/src/components/MessageBubble.tsx

@@ -0,0 +1,181 @@
+import React, { memo } from "react";
+import { View, Text, StyleSheet, Image, TouchableOpacity, Platform } from "react-native";
+import type { ChatMessage, ChatTheme } from "../types";
+import { FeedbackAction, formatToTime } from "./utils";
+
+// Use expo-image on native if available, fallback to RN Image
+let ImageComponent: typeof Image = Image;
+if (Platform.OS !== "web") {
+  try {
+    const ExpoImage = require("expo-image").Image;
+    if (ExpoImage) ImageComponent = ExpoImage;
+  } catch {
+    // expo-image not installed, use React Native Image
+  }
+}
+
+interface Props {
+  message: ChatMessage;
+  theme: ChatTheme;
+  conversationId: string | null;
+  handleFeedbackAction: (
+    action: FeedbackAction,
+    conversation_id: string,
+    message_id: string
+  ) => void;
+  onReloadResults?: (message: ChatMessage) => void;
+}
+
+const MessageBubbleComponent: React.FC<Props> = ({
+  message,
+  theme,
+  conversationId,
+  handleFeedbackAction,
+  onReloadResults,
+}) => {
+  const isUser = message.role === "user";
+  const isValidMessageId =
+    typeof message.id === "string" &&
+    message.id.length > 0 &&
+    !message.id.startsWith("bot-loading-");
+  const canFeedback =
+    message.role === "assistant" &&
+    !message.isLoading &&
+    isValidMessageId &&
+    !!conversationId;
+
+  return (
+    <View
+      style={[styles.container, isUser ? styles.alignRight : styles.alignLeft]}
+    >
+      <View
+        style={[
+          styles.bubble,
+          {
+            backgroundColor: isUser
+              ? theme.userBubbleColor
+              : theme.botBubbleColor,
+            borderRadius: theme.borderRadius || 4,
+            borderTopRightRadius: isUser ? 4 : theme.borderRadius,
+            borderTopLeftRadius: isUser ? theme.borderRadius : 4,
+          },
+        ]}
+      >
+        <Text
+          style={[
+            styles.text,
+            {
+              color: isUser ? theme.userTextColor : theme.botTextColor,
+              fontFamily: theme.fontFamily,
+              fontSize: theme.fontSize,
+            },
+          ]}
+        >
+          {message.text || ""}
+        </Text>
+      </View>
+      {(canFeedback ||
+        (message.agent_response &&
+          typeof message.agent_response === "object")) && (
+        <View style={styles.rowContainer}>
+          <View style={styles.time}>
+            <Text>{formatToTime(message.createdAt)}</Text>
+          </View>
+          {message.agent_response &&
+            typeof message.agent_response === "object" && (
+              <TouchableOpacity onPress={() => onReloadResults?.(message)}>
+                <Text>Reload Results</Text>
+              </TouchableOpacity>
+            )}
+          <View style={styles.likeDislikeContainer}>
+            <TouchableOpacity
+              onPress={() =>
+                handleFeedbackAction(
+                  FeedbackAction.LIKE,
+                  String(conversationId),
+                  message.id
+                )
+              }
+              disabled={!canFeedback}
+            >
+              <ImageComponent
+                source={{
+                  uri:
+                    message.reaction === FeedbackAction.LIKE
+                      ? "https://cdn.vdbapp.com/ai/chat-widget/assets/img/like-filled.svg"
+                      : "https://cdn.vdbapp.com/ai/chat-widget/assets/img/like.svg",
+                }}
+                resizeMode="contain"
+                style={{ width: 16, height: 16 }}
+              />
+            </TouchableOpacity>
+            <TouchableOpacity
+              onPress={() =>
+                handleFeedbackAction(
+                  FeedbackAction.DISLIKE,
+                  String(conversationId),
+                  message.id
+                )
+              }
+              disabled={!canFeedback}
+            >
+              <ImageComponent
+                source={{
+                  uri:
+                    message.reaction === FeedbackAction.DISLIKE
+                      ? "https://cdn.vdbapp.com/ai/chat-widget/assets/img/dislike-filled.svg"
+                      : "https://cdn.vdbapp.com/ai/chat-widget/assets/img/dislike.svg",
+                }}
+                resizeMode="contain"
+                style={{ width: 16, height: 16 }}
+              />
+            </TouchableOpacity>
+          </View>
+        </View>
+      )}
+    </View>
+  );
+};
+
+// Memoize to prevent re-renders when parent re-renders
+export const MessageBubble = memo(MessageBubbleComponent);
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: 8,
+    marginVertical: 4,
+    width: "100%",
+  },
+  rowContainer: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    gap: 12,
+  },
+  likeDislikeContainer: {
+    flexDirection: "row",
+    gap: 12,
+    marginTop: 4,
+    marginBottom: 4,
+  },
+  alignRight: {
+    alignItems: "flex-end",
+  },
+  alignLeft: {
+    alignItems: "flex-start",
+  },
+  bubble: {
+    maxWidth: "80%",
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+  },
+  text: {
+    lineHeight: 20,
+  },
+  time: {
+    fontSize: 12,
+    color: "#666",
+    marginTop: 4,
+    marginLeft: 8,
+  },
+});

package/src/components/ProductsList.tsx

@@ -0,0 +1,160 @@
+import {
+  View,
+  Image,
+  StyleSheet,
+  Text,
+  ScrollView,
+  TouchableOpacity,
+  Platform,
+} from "react-native";
+import React, { memo } from "react";
+
+// Use expo-image on native if available, fallback to RN Image
+let ImageComponent: typeof Image = Image;
+if (Platform.OS !== "web") {
+  try {
+    const ExpoImage = require("expo-image").Image;
+    if (ExpoImage) ImageComponent = ExpoImage;
+  } catch {
+    // expo-image not installed, use React Native Image
+  }
+}
+
+interface ProductsListProps {
+  data: any;
+  onViewAll?: () => void;
+  onItemPress?: (item: any) => void;
+}
+
+const ProductsListComponent: React.FC<ProductsListProps> = ({
+  data,
+  onViewAll,
+  onItemPress,
+}) => {
+  if (!data || !data.length) return null;
+
+  return (
+    <View style={styles.wrapper}>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={styles.listContent}
+      >
+        {data.map((item: any) => (
+          <TouchableOpacity
+            key={item.id}
+            onPress={() => {
+              onItemPress?.(item);
+            }}
+          >
+            <View key={item.id} style={styles.card}>
+              <ImageComponent
+                style={styles.image}
+                source={{ uri: item.image_thumb_url }}
+              />
+
+              <View style={styles.content}>
+                <Text numberOfLines={2} style={styles.title}>
+                  {item.short_title}
+                </Text>
+                <Text style={styles.price}>${item.total_sales_price}</Text>
+            </View>
+            </View>
+          </TouchableOpacity>
+        ))}
+      </ScrollView>
+
+      {/* View All Button */}
+      <TouchableOpacity
+        style={styles.button}
+        activeOpacity={0.8}
+        onPress={onViewAll}
+      >
+        <Text style={styles.buttonText}>View All {">>"}</Text>
+      </TouchableOpacity>
+      </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    paddingHorizontal: 12,
+    marginHorizontal: 12,
+    marginBottom: 12,
+    paddingTop: 6,
+    paddingBottom: 14,
+    backgroundColor: "#fff",
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: "#e8e8e8",
+    elevation: 3,
+    shadowColor: "#000",
+    shadowOpacity: 0.08,
+    shadowOffset: { width: 0, height: 2 },
+    shadowRadius: 6,
+  },
+
+  listContent: {
+    gap: 12,
+    paddingVertical: 6,
+  },
+
+  card: {
+    width: 150,
+    backgroundColor: "#fff",
+    borderRadius: 14,
+    overflow: "hidden",
+    borderColor: "#e8e8e8",
+    borderWidth: 1,
+    elevation: 3,
+    shadowColor: "#000",
+    shadowOpacity: 0.08,
+    shadowOffset: { width: 0, height: 2 },
+    shadowRadius: 6,
+  },
+
+  image: {
+    width: "100%",
+    height: 120,
+    borderBottomWidth: 1,
+    borderBottomColor: "#e8e8e8",
+  },
+
+  content: {
+    padding: 10,
+    gap: 4,
+  },
+
+  title: {
+    fontSize: 13,
+    color: "#222",
+    fontWeight: "500",
+  },
+
+  price: {
+    marginTop: 4,
+    fontSize: 14,
+    fontWeight: "700",
+    color: "#000",
+  },
+
+  button: {
+    marginTop: 12,
+    alignSelf: "center",
+    paddingHorizontal: 20,
+    paddingVertical: 8,
+    backgroundColor: "#804195",
+    borderRadius: 20,
+    width: 300,
+    alignItems: "center",
+  },
+
+  buttonText: {
+    color: "#fff",
+    fontSize: 14,
+    fontWeight: "600",
+  },
+});
+
+const ProductsList = memo(ProductsListComponent);
+export default ProductsList;

package/src/components/SuggestionsRow.tsx

@@ -0,0 +1,73 @@
+import React, { memo } from "react";
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  ScrollView,
+} from "react-native";
+
+interface SuggestionsRowProps {
+  suggestions: string[];
+  onSelect: (value: string) => void;
+}
+
+const SuggestionsRowComponent: React.FC<SuggestionsRowProps> = ({
+  suggestions,
+  onSelect,
+}) => {
+  if (!suggestions.length) return null;
+
+  return (
+    <ScrollView
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      contentContainerStyle={styles.container}
+    >
+      {suggestions.map((s) => (
+        <TouchableOpacity
+          key={s}
+          style={styles.chip}
+          onPress={() => onSelect(s)}
+          activeOpacity={0.75}
+        >
+          <Text style={styles.chipText}>{s}</Text>
+        </TouchableOpacity>
+      ))}
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: 12,
+    paddingBottom: 8,
+    flexDirection: "row",
+    gap: 10,
+  },
+
+  chip: {
+    backgroundColor: "#ffffff",
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    borderRadius: 18,
+
+    // Modern soft shadow (Material 3 / iOS style)
+    shadowColor: "#000",
+    shadowOpacity: 0.07,
+    shadowRadius: 4,
+    shadowOffset: { width: 0, height: 2 },
+
+    elevation: 2,
+  },
+
+  chipText: {
+    fontSize: 14,
+    color: "#1A1A1A",
+    fontWeight: "500",
+    letterSpacing: 0.3,
+  },
+});
+
+const SuggestionsRow = memo(SuggestionsRowComponent);
+export default SuggestionsRow;

package/src/components/utils.ts

@@ -0,0 +1,43 @@
+import { Storage } from "../storage";
+
+export function formatToTime(timestamp: number): string {
+  const date = new Date(timestamp);
+
+  let hours = date.getHours();
+  const minutes = date.getMinutes();
+  const ampm = hours >= 12 ? "pm" : "am";
+
+  hours = hours % 12;
+  hours = hours ? hours : 12; // 0 → 12
+
+  const mins = minutes < 10 ? `0${minutes}` : minutes;
+
+  return `${hours}:${mins} ${ampm}`;
+}
+
+export enum FeedbackAction {
+  LIKE = "1",
+  DISLIKE = "2",
+  UNSET = "0",
+}
+
+export const fetchConversationId = async (
+  _priceMode: string
+): Promise<string | null> => {
+  const conversations = await Storage.getJSON<Record<string, any>>(
+    "vdbchat_conversations",
+    {}
+  );
+  if (!conversations) return null;
+
+  let priceMode = _priceMode;
+  if (!priceMode) {
+    const userData = await Storage.getJSON<{ price_mode?: string }>(
+      "userData",
+      {}
+    );
+    priceMode = userData?.price_mode || "";
+  }
+
+  return conversations[priceMode]?.conversation_id || null;
+};

package/src/index.native.tsx

@@ -0,0 +1,6 @@
+// React Native entry point - re-export everything from main index
+export { ChatWidget } from './components/ChatWidget';
+export * from './types';
+export * from './theme';
+export { normaliseMessages } from './api';
+export { initStorage, isStorageInitialized, Storage } from './storage';

package/src/index.ts

@@ -0,0 +1,7 @@
+// Main entry for package consumers
+export { ChatWidget } from './components/ChatWidget';
+export * from './types';
+export * from './theme';
+export { normaliseMessages } from './api';
+export { initStorage, isStorageInitialized, Storage } from './storage';
+

package/src/index.web.tsx

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { createRoot } from "react-dom/client";
+import { View, StyleSheet } from "react-native";
+import { ChatWidget } from "./components/ChatWidget";
+import type { ChatTheme } from "./types";
+
+export function renderChatApp(
+  domElement: HTMLElement,
+  apiUrl: string,
+  theme?: Partial<ChatTheme>,
+  onClose?: () => void,
+  onClearChat?: () => void
+) {
+  const root = createRoot(domElement);
+  root.render(
+    <View style={styles.root}>
+      <ChatWidget
+        apiUrl={apiUrl}
+        theme={theme}
+        onClose={onClose}
+        onClearChat={onClearChat}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    height: "100%",
+    width: "100%",
+  },
+});

package/src/storage.ts

@@ -0,0 +1,142 @@
+import { Platform } from 'react-native';
+
+// Storage interface that works across platforms
+interface StorageInterface {
+  getItem: (key: string) => Promise<string | null>;
+  setItem: (key: string, value: string) => Promise<void>;
+  removeItem: (key: string) => Promise<void>;
+}
+
+// Helper to safely get localStorage (only available on web)
+function getLocalStorage(): Storage | null {
+  if (typeof window !== 'undefined' && window.localStorage) {
+    return window.localStorage;
+  }
+  return null;
+}
+
+// Web storage implementation using localStorage (lazy access)
+const webStorage: StorageInterface = {
+  getItem: async (key: string) => {
+    try {
+      const storage = getLocalStorage();
+      return storage ? storage.getItem(key) : null;
+    } catch {
+      return null;
+    }
+  },
+  setItem: async (key: string, value: string) => {
+    try {
+      const storage = getLocalStorage();
+      if (storage) {
+        storage.setItem(key, value);
+      }
+    } catch {
+      // ignore
+    }
+  },
+  removeItem: async (key: string) => {
+    try {
+      const storage = getLocalStorage();
+      if (storage) {
+        storage.removeItem(key);
+      }
+    } catch {
+      // ignore
+    }
+  },
+};
+
+// Native storage - will be set by the app
+let nativeStorage: StorageInterface | null = null;
+let hasWarnedAboutStorage = false;
+
+/**
+ * Initialize storage with AsyncStorage for React Native.
+ * Call this once at app startup before using ChatWidget.
+ * 
+ * @example
+ * import AsyncStorage from '@react-native-async-storage/async-storage';
+ * import { initStorage } from 'vdb-ai-chat';
+ * initStorage(AsyncStorage);
+ */
+export function initStorage(asyncStorage: StorageInterface): void {
+  nativeStorage = asyncStorage;
+  hasWarnedAboutStorage = false;
+}
+
+/**
+ * Check if storage is properly initialized for the current platform
+ */
+export function isStorageInitialized(): boolean {
+  if (Platform.OS === 'web') {
+    return getLocalStorage() !== null;
+  }
+  return nativeStorage !== null;
+}
+
+// No-op storage for when native storage isn't initialized
+const noopStorage: StorageInterface = {
+  getItem: async () => null,
+  setItem: async () => {},
+  removeItem: async () => {},
+};
+
+// Get the appropriate storage based on platform
+function getStorage(): StorageInterface {
+  if (Platform.OS === 'web') {
+    return webStorage;
+  }
+  
+  if (!nativeStorage) {
+    // Only warn once to avoid console spam
+    if (!hasWarnedAboutStorage) {
+      console.warn(
+        '[vdb-ai-chat] AsyncStorage not initialized. Call initStorage(AsyncStorage) at app startup.'
+      );
+      hasWarnedAboutStorage = true;
+    }
+    return noopStorage;
+  }
+  
+  return nativeStorage;
+}
+
+// Exported storage methods
+export const Storage = {
+  getItem: async (key: string): Promise<string | null> => {
+    return getStorage().getItem(key);
+  },
+  
+  setItem: async (key: string, value: string): Promise<void> => {
+    return getStorage().setItem(key, value);
+  },
+  
+  removeItem: async (key: string): Promise<void> => {
+    return getStorage().removeItem(key);
+  },
+  
+  // Convenience method to get and parse JSON
+  getJSON: async <T = any>(key: string, defaultValue: T | null = null): Promise<T | null> => {
+    try {
+      const value = await getStorage().getItem(key);
+      if (value) {
+        return JSON.parse(value) as T;
+      }
+      return defaultValue;
+    } catch {
+      return defaultValue;
+    }
+  },
+  
+  // Convenience method to stringify and set JSON
+  setJSON: async (key: string, value: any): Promise<void> => {
+    try {
+      await getStorage().setItem(key, JSON.stringify(value));
+    } catch {
+      // ignore
+    }
+  },
+};
+
+export default Storage;

package/src/theme.ts

@@ -0,0 +1,21 @@
+import type { ChatTheme } from "./types";
+
+export const defaultTheme: ChatTheme = {
+  primaryColor: "#0b93f6",
+  backgroundColor: "#ffffff",
+  inputColor: "#FFF",
+  inputBackgroundColor: "#f5f5f5",
+  inputBorderRadius: 8,
+  inputTextColor: "#000000",
+  userBubbleColor: "#804195",
+  userTextColor: "#ffffff",
+  botBubbleColor: "#e5e5ea",
+  botTextColor: "#000000",
+  borderRadius: 18,
+  fontFamily: undefined,
+  fontSize: 16,
+};
+
+export function mergeTheme(overrides?: Partial<ChatTheme>): ChatTheme {
+  return { ...defaultTheme, ...(overrides || {}) };
+}