vdb-ai-chat 1.0.1 → 1.0.2

package/src/components/MessageBubble.tsx

@@ -1,61 +1,39 @@
 import React, { memo } from "react";
-import {
-  View,
-  Text,
-  StyleSheet,
-  Image,
-  TouchableOpacity,
-  Platform,
-  ActivityIndicator,
-} from "react-native";
+import { View, Text, StyleSheet } from "react-native";
+import SuggestionsRow from "./SuggestionsRow";
 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;
+  priceMode?: string;
+  handleFeedbackAction?: (...args: any[]) => void;
   onReloadResults?: (message: ChatMessage) => void;
   reloading?: boolean;
   hasResults?: boolean;
+  totalResults?: number;
+  shownResults?: number;
+  onSuggestionSelect?: (value: string) => void;
+  isLatest?: boolean;
+  isTyping?: boolean;
 }
 
 const MessageBubbleComponent: React.FC<Props> = ({
   message,
   theme,
-  conversationId,
+  priceMode,
   handleFeedbackAction,
   onReloadResults,
   reloading,
   hasResults,
+  totalResults,
+  shownResults,
+  onSuggestionSelect,
+  isLatest,
+  isTyping,
 }) => {
   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]}
@@ -67,9 +45,9 @@ const MessageBubbleComponent: React.FC<Props> = ({
             backgroundColor: isUser
               ? theme.userBubbleColor
               : theme.botBubbleColor,
-            borderRadius: theme.borderRadius || 4,
-            borderTopRightRadius: isUser ? 4 : theme.borderRadius,
-            borderTopLeftRadius: isUser ? theme.borderRadius : 4,
+            borderRadius: theme.borderRadius || 8,
+            borderBottomRightRadius: isUser ? 0 : theme.borderRadius,
+            borderBottomLeftRadius: isUser ? theme.borderRadius : 0,
           },
         ]}
       >
@@ -84,100 +62,26 @@ const MessageBubbleComponent: React.FC<Props> = ({
           ]}
         >
           {message.text || ""}
+          {message.role === "assistant" && hasResults && typeof totalResults === "number" ? (
+            ` Found ${Number(totalResults).toLocaleString()} diamonds (showing first ${shownResults})`
+          ) : null}
         </Text>
-      </View>
-      {(canFeedback ||
-        (message.search_payload &&
-          typeof message.search_payload === "object" &&
-          Object.keys(message.search_payload).length > 0)) && (
-        <View style={styles.rowContainer}>
-          <View style={styles.time}>
-            <Text>{formatToTime(message.createdAt)}</Text>
-          </View>
-          {message.search_payload &&
-            typeof message.search_payload === "object" &&
-            Object.keys(message.search_payload).length > 0 &&
-            !hasResults &&
-            (reloading ? (
-              <View
-                style={{ flexDirection: "row", alignItems: "center", gap: 6 }}
-              >
-                <ActivityIndicator size="small" color="#1a73e8" />
-                <Text
-                  style={{
-                    fontSize: 12,
-                    color: "#1a73e8",
-                    textDecorationLine: "underline",
-                  }}
-                >
-                  Loading…
-                </Text>
-              </View>
-            ) : (
-              <TouchableOpacity
-                onPress={() => onReloadResults?.(message)}
-                disabled={reloading}
-              >
-                <Text
-                  style={{
-                    fontSize: 12,
-                    color: "#1a73e8",
-                    textDecorationLine: "underline",
-                  }}
-                >
-                  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 }}
+        {message.role === "assistant" &&
+          Array.isArray(message.suggestions) &&
+          message.suggestions.length > 0 &&
+          isLatest &&
+          !isTyping && (
+            <View style={styles.suggestionsWrapper}>
+              <SuggestionsRow
+                suggestions={message.suggestions}
+                onSelect={(v) => onSuggestionSelect?.(v)}
+                variant="inline"
               />
-            </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>
-  );
-};
+            </View>
+          )}
+      </View>
+  </View>
+)};
 
 // Memoize to prevent re-renders when parent re-renders
 export const MessageBubble = memo(MessageBubbleComponent);
@@ -185,21 +89,10 @@ export const MessageBubble = memo(MessageBubbleComponent);
 const styles = StyleSheet.create({
   container: {
     paddingHorizontal: 8,
-    marginVertical: 4,
+    marginVertical: 0,
     width: "100%",
   },
-  rowContainer: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    gap: 12,
-    marginTop: 8,
-    marginBottom: 8,
-  },
-  likeDislikeContainer: {
-    flexDirection: "row",
-    gap: 12,
-  },
+  
   alignRight: {
     alignItems: "flex-end",
   },
@@ -214,10 +107,12 @@ const styles = StyleSheet.create({
   text: {
     lineHeight: 20,
   },
-  time: {
+  resultsInfo: {
+    marginTop: 4,
     fontSize: 12,
     color: "#666",
-    marginTop: 4,
-    marginLeft: 8,
+  },
+  suggestionsWrapper: {
+    marginTop: 8,
   },
 });

package/src/components/MessageMetaRow.tsx

@@ -0,0 +1,199 @@
+import React from "react";
+import {
+  View,
+  Text,
+  StyleSheet,
+  Image,
+  Platform,
+  ActivityIndicator,
+  Pressable,
+} from "react-native";
+import type { ChatMessage } from "../types";
+import { FeedbackAction, fetchConversationId, formatToTime } from "./utils";
+
+let ImageComponent: typeof Image = Image;
+if (Platform.OS !== "web") {
+  try {
+    const ExpoImage = require("expo-image").Image;
+    if (ExpoImage) ImageComponent = ExpoImage;
+  } catch {}
+}
+
+interface Props {
+  message: ChatMessage;
+  priceMode: string;
+  handleFeedbackAction: (
+    action: FeedbackAction,
+    conversationId: string,
+    message_id: string
+  ) => void;
+  onReloadResults?: (message: ChatMessage) => void;
+  reloading?: boolean;
+  hasResults?: boolean;
+}
+
+export const MessageMetaRow: React.FC<Props> = ({
+  message,
+  priceMode,
+  handleFeedbackAction,
+  onReloadResults,
+  reloading,
+  hasResults,
+}) => {
+  const isUser = message.role === "user";
+  const [conversationId, setConversationId] = React.useState<string | null>(
+    null
+  );
+
+  React.useEffect(() => {
+    const fetchId = async () => {
+      const id = await fetchConversationId(priceMode);
+      setConversationId(id);
+    };
+    fetchId();
+  }, [priceMode]);
+
+  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.rowContainer,
+        isUser ? styles.alignRight : styles.alignLeft,
+      ]}
+    >
+      <View style={styles.timeContainer}>
+        <Text style={styles.timeText}>{formatToTime(message.createdAt)}</Text>
+      </View>
+      {canFeedback ? (
+        <View style={styles.likeDislikeContainer}>
+          <Pressable
+            style={(state: any) => [
+              styles.borderButton,
+              state?.hovered && styles.borderButtonHover,
+            ]}
+            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 }}
+            />
+          </Pressable>
+          <Pressable
+            style={(state: any) => [
+              styles.borderButton,
+              state?.hovered && styles.borderButtonHover,
+            ]}
+            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 }}
+            />
+          </Pressable>
+        </View>
+      ) : null}
+      {message.search_payload &&
+        typeof message.search_payload === "object" &&
+        Object.keys(message.search_payload).length > 0 &&
+        !hasResults &&
+        (reloading ? (
+          <View style={styles.borderButton}>
+            <ActivityIndicator size="small" color="#020001" style={{ width: 16, height: 16 }} />
+          </View>
+        ) : (
+          <Pressable
+            style={(state: any) => [
+              styles.borderButton,
+              state?.hovered && styles.borderButtonHover,
+            ]}
+            onPress={() => onReloadResults?.(message)}
+            disabled={reloading}
+          >
+            <ImageComponent
+              source={{
+                uri: "https://cdn.vdbapp.com/ai/chat-widget/assets/img/arrow-reset.svg",
+              }}
+              resizeMode="contain"
+              style={{ width: 16, height: 16 }}
+            />
+          </Pressable>
+        ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  rowContainer: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    gap: 6,
+    marginHorizontal: 8,
+    marginTop: 0,
+    marginBottom: 12,
+  },
+  alignRight: {
+    alignSelf: "flex-end",
+  },
+  alignLeft: {
+    alignSelf: "flex-start",
+  },
+  likeDislikeContainer: {
+    flexDirection: "row",
+    gap: 6,
+  },
+  timeContainer: {
+    margin: 0,
+  },
+  borderButton: {
+    borderWidth: 1,
+    borderColor: "#D5D5DC",
+    borderRadius: 8,
+    paddingHorizontal: 4,
+    paddingVertical: 4,
+  },
+  borderButtonHover: {
+    backgroundColor: "#EDEDF2",
+  },
+  timeText: {
+    fontSize: 12,
+    color: "#666",
+  },
+});
+
+export default MessageMetaRow;

package/src/components/ProductsGrid.tsx

@@ -0,0 +1,163 @@
+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 ProductsGridProps {
+  data: any[];
+  onViewAll?: () => void;
+  onItemPress?: (item: any) => void;
+  totalResults?: number;
+}
+
+const ProductsGridComponent: React.FC<ProductsGridProps> = ({
+  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}>
+              {item.image_thumb_url ? (
+                <ImageComponent
+                  style={styles.image}
+                  source={{ uri: item.image_thumb_url }}
+                />
+              ) : null}
+
+              <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 ProductsGrid = memo(ProductsGridComponent);
+export default ProductsGrid;