vdb-ai-chat 1.0.0

package/src/components/ChatWidget.tsx

@@ -0,0 +1,679 @@
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import {
+  View,
+  StyleSheet,
+  ScrollView,
+  Text,
+  TextInput,
+  DeviceEventEmitter,
+  Platform,
+} from "react-native";
+import { ChatInput } from "./ChatInput";
+import { MessageBubble } from "./MessageBubble";
+import type { ChatMessage, ChatWidgetProps, ChatWidgetRef } from "../types";
+import { mergeTheme } from "../theme";
+import {
+  ChatApiParams,
+  fetchInitialMessages,
+  getProducts,
+  handleFeedbackActionApi,
+  normaliseMessages,
+  sendUserMessage,
+} from "../api";
+import ChatHeader from "./ChatHeader";
+import SuggestionsRow from "./SuggestionsRow";
+import ProductsList from "./ProductsList";
+import { FeedbackAction, formatToTime } from "./utils";
+import { Storage } from "../storage";
+
+export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
+  (
+    {
+      apiUrl,
+      userId: userIdProp,
+      userToken: userTokenProp,
+      priceMode: priceModeProp,
+      modalHeight,
+      theme: themeOverrides,
+      initialMessages = [],
+      placeholder,
+      onClose,
+      onClearChat,
+      onViewAllPress,
+      onItemPress: onItemPressProp,
+    },
+    ref
+  ) => {
+    const [messages, setMessages] = useState<ChatMessage[]>(initialMessages);
+    const [input, setInput] = useState("");
+    const [loading, setLoading] = useState(false);
+    const [loadingMessageId, setLoadingMessageId] = useState<string | null>(
+      null
+    );
+    const [typingMessageId, setTypingMessageId] = useState<string | null>(null);
+    const [typingFullText, setTypingFullText] = useState<string>("");
+    const [assistantResponse, setAssistantResponse] = useState<
+      ChatMessage | undefined
+    >(undefined);
+    const [products, setProducts] = useState<{
+      messageId: string;
+      data: any;
+    } | null>(null);
+    const [priceMode, setPriceMode] = useState<string | null>(
+      priceModeProp || null
+    );
+    const [conversationId, setConversationId] = useState<string | null>(null);
+    const [userId, setUserId] = useState<string>(userIdProp || "");
+    const [userToken, setUserToken] = useState<string>(userTokenProp || "");
+    const scrollRef = useRef<ScrollView | null>(null);
+    const inputRef = useRef<TextInput | null>(null);
+    const theme = useMemo(() => mergeTheme(themeOverrides), [themeOverrides]);
+
+    // Load user auth data from storage on mount
+    useEffect(() => {
+      const loadAuthData = async () => {
+        try {
+          if (!userIdProp) {
+            const userData = await Storage.getJSON<{ id?: string }>(
+              "userData",
+              {}
+            );
+            if (userData?.id) {
+              setUserId(userData.id);
+            }
+          }
+          if (!userTokenProp) {
+            const token = await Storage.getItem("token");
+            if (token) {
+              setUserToken(token);
+            }
+          }
+        } catch (e) {
+          console.error("Failed to load auth data from storage", e);
+        }
+      };
+      loadAuthData();
+    }, [userIdProp, userTokenProp]);
+
+    const onViewAll = useCallback(() => {
+      const searchPayload = JSON.stringify(
+        assistantResponse?.agent_response?.payload
+      );
+      const payload = assistantResponse?.agent_response?.payload;
+      if (!payload) return;
+
+      const domain = apiUrl.split("v3");
+      const deepLinkUrl = `${domain[0]}webapp/${
+        payload.lab_grown === "true" ? "lab-grown-diamonds" : "natural-diamonds"
+      }/search?priceMode=${priceMode}&productType=${
+        payload.lab_grown === "true" ? "lab_grown_diamond" : "diamond"
+      }&fromNewFilterScreen=false&filterSplitStep=1&sectionName=Single%20Stones&breadCrumbLabel=Stone%20Search&enterSecondFlow=false&saved_search=${searchPayload}`;
+
+      // If custom handler is provided (React Native), use it
+      if (onViewAllPress) {
+        onViewAllPress(deepLinkUrl, payload);
+      } else if (Platform.OS === "web") {
+        // Default behavior for web
+        window.open(deepLinkUrl, "_parent");
+      }
+    }, [assistantResponse, apiUrl, priceMode, onViewAllPress]);
+
+    const onItemPress = useCallback(
+      (item: any) => {
+        const domain = apiUrl.split("v3");
+        const deepLinkUrl = `${domain[0]}webapp/${
+          item.type === "lab_grown_diamond"
+            ? "lab-grown-diamonds"
+            : "natural-diamonds"
+        }/item-detail/${item.id}?productType=${
+          item.type
+        }&priceMode=${priceMode}&breadCrumbLabel=Stone%20Details`;
+
+        // If custom handler is provided (React Native), use it
+        if (onItemPressProp) {
+          onItemPressProp(deepLinkUrl, item);
+        } else if (Platform.OS === "web") {
+          // Default behavior for web
+          window.open(deepLinkUrl, "_parent");
+        }
+      },
+      [apiUrl, priceMode, onItemPressProp]
+    );
+
+    const hasAuth = useMemo(
+      () => Boolean(userId || userToken),
+      [userId, userToken]
+    );
+
+    const apiParams: ChatApiParams = useMemo(
+      () => ({
+        conversationId: userToken || userId,
+      }),
+      [userId, userToken]
+    );
+
+    const handleFeedbackAction = useCallback(
+      async (
+        action: FeedbackAction,
+        conversation_id: string,
+        message_id: string
+      ) => {
+        try {
+          // Use functional update to get current messages without dependency
+          let currentReaction = "0";
+          setMessages((prev) => {
+            const msg = prev.find((m) => m.id === message_id);
+            currentReaction = msg?.reaction || "0";
+            return prev;
+          });
+
+          const nextAction: FeedbackAction =
+            currentReaction === action ? FeedbackAction.UNSET : action;
+          const res = await handleFeedbackActionApi(
+            nextAction,
+            conversation_id,
+            message_id
+          );
+          if (res.ok) {
+            setMessages((prev) =>
+              prev.map((m) =>
+                m.id === message_id ? { ...m, reaction: nextAction } : m
+              )
+            );
+          } else {
+            console.error("Feedback API failed", res.status);
+          }
+        } catch (e) {
+          console.error("Feedback API error", e);
+        }
+      },
+      []
+    );
+
+    // Load initial history on mount
+    useEffect(() => {
+      let cancelled = false;
+
+      const load = async () => {
+        if (!hasAuth) return;
+        try {
+          const initial = await fetchInitialMessages(
+            apiUrl,
+            apiParams,
+            priceMode
+          );
+          if (!cancelled) {
+            setMessages(normaliseMessages(initial).reverse());
+          }
+        } catch (error) {
+          console.error("Failed to fetch initial messages", error);
+        }
+      };
+
+      if (!initialMessages.length) {
+        load();
+      }
+
+      return () => {
+        cancelled = true;
+      };
+    }, [apiUrl, apiParams, initialMessages.length, hasAuth, priceMode]);
+
+    const sendMessage = useCallback(
+      async (rawText: string) => {
+        const trimmed = rawText.trim();
+        if (!trimmed || loading) return;
+        if (products) {
+          setProducts(null);
+        }
+        const userMessage: ChatMessage = {
+          id: `user-${Date.now()}`,
+          role: "user",
+          text: trimmed,
+          createdAt: Date.now(),
+        };
+
+        const loadingId = `bot-loading-${Date.now()}`;
+        const loadingMessage: ChatMessage = {
+          id: loadingId,
+          role: "assistant",
+          text: "Thinking",
+          createdAt: Date.now(),
+          isLoading: true,
+        };
+
+        setMessages((prev) => [...prev, userMessage, loadingMessage]);
+        setLoadingMessageId(loadingId);
+        setLoading(true);
+
+        try {
+          if (!hasAuth) {
+            setMessages((prev) =>
+              prev.map((msg) =>
+                msg.id === loadingId
+                  ? {
+                      ...msg,
+                      text: "Chat is unavailable (missing user authentication).",
+                      isLoading: false,
+                    }
+                  : msg
+              )
+            );
+            return;
+          }
+
+          const historyForApi = [...messages, userMessage];
+          const updatedMessages = await sendUserMessage(
+            apiUrl,
+            trimmed,
+            apiParams,
+            historyForApi,
+            priceMode
+          );
+
+          const normalised = normaliseMessages(updatedMessages);
+          const latestAssistant = normalised.find(
+            (m) => m.role === "assistant"
+          );
+
+          setAssistantResponse(latestAssistant);
+
+          if (latestAssistant?.text) {
+            // If there is an agent_response, try to fetch products first
+            if (
+              latestAssistant?.agent_response &&
+              typeof latestAssistant.agent_response === "object" &&
+              Object.keys(latestAssistant.agent_response).length > 0
+            ) {
+              const productsResult = await getProducts(
+                latestAssistant.agent_response.payload
+              );
+
+              const hasDiamonds =
+                productsResult &&
+                productsResult.response &&
+                productsResult.response.body &&
+                Array.isArray(productsResult.response.body.diamonds) &&
+                productsResult.response.body.diamonds.length > 0;
+
+              if (!hasDiamonds) {
+                const noResultsText =
+                  "No results found for your search. Try adjusting your filters or query.";
+
+                setLoadingMessageId(null);
+                setTypingMessageId(null);
+                setTypingFullText("");
+                setProducts(null);
+
+                setMessages((prev) =>
+                  prev.map((msg) =>
+                    msg.id === loadingId
+                      ? {
+                          ...msg,
+                          id: latestAssistant?.id ?? msg.id,
+                          text: noResultsText,
+                          isLoading: false,
+                          suggestions: [],
+                        }
+                      : msg
+                  )
+                );
+                inputRef.current?.focus();
+                return;
+              }
+              setProducts({
+                messageId: latestAssistant.id,
+                data: productsResult,
+              });
+            }
+            setLoadingMessageId(null);
+
+            setMessages((prev) =>
+              prev.map((msg) =>
+                msg.id === loadingId
+                  ? {
+                      ...msg,
+                      id: latestAssistant.id,
+                      text: "",
+                      isLoading: false,
+                      suggestions: latestAssistant.suggestions,
+                    }
+                  : msg
+              )
+            );
+
+            // Use setTimeout to ensure state is updated before starting typewriter
+            setTimeout(() => {
+              setTypingMessageId(latestAssistant.id);
+              setTypingFullText(latestAssistant.text);
+            }, 50);
+          } else {
+            setMessages((prev) =>
+              prev.map((msg) =>
+                msg.id === loadingId
+                  ? {
+                      ...msg,
+                      isLoading: false,
+                    }
+                  : msg
+              )
+            );
+          }
+        } catch (err) {
+          setMessages((prev) =>
+            prev.map((msg) =>
+              msg.id === loadingId
+                ? {
+                    ...msg,
+                    text: "Sorry, something went wrong. Please try again.",
+                    isLoading: false,
+                  }
+                : msg
+            )
+          );
+          console.error(err);
+        } finally {
+          setLoading(false);
+          setLoadingMessageId(null);
+          inputRef.current?.focus();
+        }
+      },
+      [apiUrl, loading, messages, apiParams, hasAuth, priceMode, products]
+    );
+
+    const handleSend = useCallback(async () => {
+      const trimmed = input.trim();
+      if (!trimmed) return;
+      setInput("");
+      sendMessage(trimmed);
+    }, [input, sendMessage]);
+
+    const handleSuggestionSelect = useCallback(
+      (value: string) => {
+        sendMessage(value);
+      },
+      [sendMessage]
+    );
+
+    const handleReloadResults = useCallback(async (msg: ChatMessage) => {
+      try {
+        const payload = msg?.agent_response?.payload;
+        if (!payload) return;
+        const productsResult = await getProducts(payload);
+        setProducts({ messageId: msg.id, data: productsResult });
+      } catch (e) {
+        console.error("Reload results failed", e);
+      }
+    }, []);
+
+    useEffect(() => {
+      DeviceEventEmitter.addListener("clearChat", handleClearChat);
+      DeviceEventEmitter.addListener(
+        "changePriceMode",
+        (data: { priceMode: string }) => changePriceMode(data.priceMode)
+      );
+      changePriceMode(undefined);
+
+      return () => {
+        DeviceEventEmitter.removeAllListeners("clearChat");
+        DeviceEventEmitter.removeAllListeners("changePriceMode");
+      };
+    }, []);
+
+    const changePriceMode = async (_priceMode?: any) => {
+      // Priority: passed argument > prop > storage
+      if (!_priceMode && priceModeProp) {
+        _priceMode = priceModeProp;
+      }
+      if (!_priceMode) {
+        const userData = await Storage.getJSON<{ price_mode?: string }>(
+          "userData",
+          {}
+        );
+        _priceMode = userData?.price_mode;
+      }
+      setPriceMode(_priceMode || null);
+    };
+
+    // Update conversationId when priceMode changes
+    useEffect(() => {
+      const loadConversationId = async () => {
+        if (!priceMode) {
+          setConversationId(null);
+          return;
+        }
+        const conversations = await Storage.getJSON<Record<string, any>>(
+          "vdbchat_conversations",
+          {}
+        );
+        const storedId = conversations?.[priceMode]?.conversation_id ?? null;
+        setConversationId(storedId ? String(storedId) : null);
+      };
+      loadConversationId();
+    }, [priceMode, messages]); // Re-fetch when messages change (new conversation might be created)
+
+    const handleClearChat = useCallback(async () => {
+      try {
+        const conversations = await Storage.getJSON<Record<string, any>>(
+          "vdbchat_conversations",
+          {}
+        );
+        const storedId =
+          conversations?.[priceMode as string]?.conversation_id ?? null;
+        if (storedId && priceMode) {
+          const updatedConversations = conversations || {};
+          delete updatedConversations[priceMode];
+          await Storage.setJSON("vdbchat_conversations", updatedConversations);
+        }
+        setMessages([]);
+        setAssistantResponse(undefined);
+        setProducts(null);
+        setLoading(false);
+        setLoadingMessageId(null);
+        setTypingMessageId(null);
+        setTypingFullText("");
+
+        const fresh = await fetchInitialMessages(apiUrl, undefined, priceMode);
+        setMessages(normaliseMessages(fresh).reverse());
+        onClearChat?.();
+      } catch (err) {
+        console.error("Failed to clear chat", err);
+      }
+    }, [apiUrl, onClearChat, priceMode]);
+
+    // Expose clearChat method via ref for external use (React Native)
+    useImperativeHandle(
+      ref,
+      () => ({
+        clearChat: handleClearChat,
+      }),
+      [handleClearChat]
+    );
+
+    // "Thinking..." dot animation while waiting for the API
+    useEffect(() => {
+      if (!loadingMessageId || typingMessageId) {
+        return;
+      }
+
+      let step = 0;
+      const base = "Thinking";
+      const msgId = loadingMessageId;
+
+      const interval = setInterval(() => {
+        step = (step + 1) % 3;
+        const dots = ".".repeat(step + 1);
+        setMessages((prev) =>
+          prev.map((msg) =>
+            msg.id === msgId && msg.isLoading
+              ? { ...msg, text: `${base}${dots}` }
+              : msg
+          )
+        );
+      }, 500);
+
+      return () => {
+        clearInterval(interval);
+      };
+    }, [loadingMessageId, typingMessageId]);
+
+    // Typewriter-style animation for assistant reply once it arrives
+    const typingIndexRef = useRef(0);
+
+    useEffect(() => {
+      if (!typingMessageId || !typingFullText) {
+        typingIndexRef.current = 0;
+        return;
+      }
+
+      typingIndexRef.current = 0;
+      const total = typingFullText.length;
+      const finalMsgId = typingMessageId;
+      const fullText = typingFullText;
+
+      const interval = setInterval(() => {
+        typingIndexRef.current += 1;
+        const currentIndex = typingIndexRef.current;
+        const slice = fullText.slice(0, currentIndex);
+
+        setMessages((prev) =>
+          prev.map((msg) =>
+            msg.id === finalMsgId
+              ? {
+                  ...msg,
+                  text: slice,
+                }
+              : msg
+          )
+        );
+
+        if (currentIndex >= total) {
+          clearInterval(interval);
+          setTypingMessageId(null);
+          setTypingFullText("");
+          setMessages((prev) =>
+            prev.map((msg) =>
+              msg.id === finalMsgId ? { ...msg, isLoading: false } : msg
+            )
+          );
+        }
+      }, 25);
+
+      return () => {
+        clearInterval(interval);
+      };
+    }, [typingMessageId, typingFullText]);
+
+    return (
+      <View
+        style={[styles.container, { backgroundColor: theme.backgroundColor }]}
+      >
+        {Platform.OS === "web" && (
+          <ChatHeader onClose={onClose} onClearChat={handleClearChat} />
+        )}
+        <ScrollView
+          ref={scrollRef}
+          style={modalHeight ? { height: modalHeight } : undefined}
+          contentContainerStyle={{
+            backgroundColor: theme?.listContentBackgroundColor || "#f5f5f5",
+            ...styles.listContent,
+            justifyContent: messages.length === 0 ? "center" : "flex-end",
+            minHeight: modalHeight ? modalHeight : undefined,
+          }}
+          onContentSizeChange={() => {
+            scrollRef.current?.scrollToEnd({ animated: false });
+          }}
+        >
+          <View style={styles.emptyContainer}>
+            <Text style={styles.emptyText}>
+              {messages.length === 0
+                ? "Start a conversation to Find the Perfect Diamond"
+                : `Chat Started at ${formatToTime(messages[0].createdAt)}`}
+            </Text>
+          </View>
+          {(() => {
+            const ordered = [...messages];
+            return ordered.map((item, index) => {
+              const isLatest = index === ordered.length - 1;
+              return (
+                <View key={item.id + index}>
+                  <MessageBubble
+                    message={item}
+                    theme={theme}
+                    conversationId={conversationId}
+                    handleFeedbackAction={handleFeedbackAction}
+                    onReloadResults={handleReloadResults}
+                  />
+                  {item.role === "assistant" &&
+                    products &&
+                    products.messageId === item.id && (
+                      <ProductsList
+                        data={products?.data?.response?.body?.diamonds}
+                        onViewAll={onViewAll}
+                        onItemPress={onItemPress}
+                      />
+                    )}
+                  {item.role === "assistant" &&
+                    item.suggestions &&
+                    item.suggestions.length > 0 &&
+                    isLatest && (
+                      <SuggestionsRow
+                        suggestions={item.suggestions || []}
+                        onSelect={handleSuggestionSelect}
+                      />
+                    )}
+                </View>
+              );
+            });
+          })()}
+        </ScrollView>
+        <ChatInput
+          value={input}
+          onChangeText={setInput}
+          onSend={handleSend}
+          disabled={loading}
+          placeholder={placeholder}
+          theme={theme}
+          inputRef={inputRef}
+        />
+      </View>
+    );
+  }
+);
+
+ChatWidget.displayName = "ChatWidget";
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    width: "100%",
+  },
+  listContent: {
+    paddingVertical: 8,
+    flexGrow: 1,
+    justifyContent: "flex-end",
+  },
+  loading: {
+    paddingVertical: 8,
+    alignItems: "center",
+  },
+  emptyContainer: {
+    padding: 16,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "#f5f5f5",
+  },
+  emptyText: {
+    fontSize: 14,
+    fontWeight: "500",
+    color: "#666666",
+  },
+});