@shop-prompter/react 0.1.1 → 1.1.0

package/src/shop-prompter.component.jsx

@@ -1,13 +1,19 @@
 "use client";
 import * as React from "react";
 import { useState, useEffect } from "react";
+import { marked } from "marked";
 import { ShopPrompterService } from "./shop-prompter.service";
+import ThumbsUpIcon from "./thumbs-up-icon.component";
+import ThumbsDownIcon from "./thumbs-down-icon.component";
+import ProductCardList from "./product-card-list.component";
+const THINKING_SPINNER = "M21 12a9 9 0 1 1-6.219-8.56";
 const styles = {
   header: {
     display: "flex",
     alignItems: "center",
     justifyContent: "space-between",
     padding: "16px",
+    borderBottom: "1px solid #e5e7eb",
   },
   subHeaderContainer: {
     display: "flex",
@@ -23,6 +29,7 @@ const styles = {
     border: "none",
     cursor: "pointer",
     transition: "background-color 0.2s, color 0.2s",
+    fontFamily: "inherit",
     onHover: {
       backgroundColor: "hsl(220 14% 96%)",
       color: "hsl(220 13% 13%)",
@@ -44,6 +51,7 @@ const styles = {
     cursor: "pointer",
     fontSize: "0.875rem",
     color: "#09090b",
+    fontFamily: "inherit",
   },
   ButtonSheetButton: {
     color: "#6b7280",
@@ -53,10 +61,12 @@ const styles = {
     padding: "0.25rem",
     fontSize: "1.25rem",
     transition: "color 0.2s",
+    fontFamily: "inherit",
   },
   chatContainer: {
     flex: 1,
     overflowY: "auto",
+    overflowX: "hidden",
     padding: "1rem",
     backgroundColor: "white",
   },
@@ -103,11 +113,16 @@ const styles = {
     display: "flex",
     flexDirection: "column",
     alignItems: "flex-end",
+    marginBottom: "8px",
   },
   messageContainerAssistant: {
     display: "flex",
     flexDirection: "column",
     alignItems: "flex-start",
+    marginBottom: "8px",
+    width: "100%",
+    maxWidth: "100%",
+    boxSizing: "border-box",
   },
   messageBubbleUser: {
     backgroundColor: "#111827",
@@ -118,6 +133,7 @@ const styles = {
     fontSize: "0.875rem",
     boxShadow: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
     maxWidth: "85%",
+    textAlign: "left",
   },
   messageBubbleAssistant: {
     backgroundColor: "#f3f4f6",
@@ -128,6 +144,7 @@ const styles = {
     fontSize: "0.875rem",
     boxShadow: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
     maxWidth: "85%",
+    textAlign: "left",
   },
   thinkingIndicator: {
     display: "flex",
@@ -210,6 +227,7 @@ const styles = {
     fontSize: "0.875rem",
     color: "#111827",
     padding: "0.25rem 0",
+    fontFamily: "inherit",
   },
   formButton: {
     backgroundColor: "transparent",
@@ -223,6 +241,7 @@ const styles = {
     border: "none",
     cursor: "pointer",
     transition: "background-color 0.2s",
+    fontFamily: "inherit",
   },
   sendButton: {
     backgroundColor: "#AD59FF1A",
@@ -233,7 +252,161 @@ const styles = {
     textAlign: "center",
     marginTop: "0.75rem",
   },
+  backdrop: {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    backdropFilter: "blur(4px)",
+    zIndex: 1000,
+  },
+  feedbackRow: {
+    display: "flex",
+    alignItems: "center",
+    gap: "0.5rem",
+    marginTop: "0.5rem",
+    marginLeft: "0.75rem",
+  },
+  feedbackButton: {
+    backgroundColor: "transparent",
+    border: "none",
+    cursor: "pointer",
+    padding: "6px",
+    borderRadius: "6px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    transition: "background-color 0.2s",
+  },
+  warningBanner: {
+    backgroundColor: "#fffbeb",
+    color: "#b45309",
+    border: "1px solid #fde68a",
+    borderRadius: "0.375rem",
+    padding: "0.25rem 0.5rem",
+    fontSize: "0.6875rem",
+    fontWeight: 500,
+    textAlign: "center",
+    margin: "0 0.5rem",
+    flex: 1,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  insufficientConfigContainer: {
+    flex: 1,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: "2rem",
+    textAlign: "center",
+    backgroundColor: "#fff5f5",
+    color: "#2d3748",
+  },
+  insufficientConfigIconContainer: {
+    backgroundColor: "#fee2e2",
+    padding: "1rem",
+    borderRadius: "50%",
+    marginBottom: "1rem",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    boxShadow:
+      "0 4px 6px -1px rgba(239, 68, 68, 0.1), 0 2px 4px -1px rgba(239, 68, 68, 0.06)",
+  },
+  insufficientConfigTitle: {
+    fontSize: "1.25rem",
+    fontWeight: 700,
+    color: "#991b1b",
+    marginBottom: "0.5rem",
+  },
+  insufficientConfigMessage: {
+    fontSize: "0.875rem",
+    color: "#7f1d1d",
+    marginBottom: "1.5rem",
+    lineHeight: "1.5",
+    maxWidth: "280px",
+  },
+  insufficientConfigDetails: {
+    backgroundColor: "white",
+    border: "1px solid #fee2e2",
+    borderRadius: "0.5rem",
+    padding: "1rem",
+    textAlign: "left",
+    width: "100%",
+    maxWidth: "300px",
+    boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.05)",
+  },
 };
+const ANIMATION_STYLES = `
+    @keyframes sh-fade-in {
+      from {
+        opacity: 0;
+        transform: translate(-50%, -48%) scale(0.96);
+      }
+      to {
+        opacity: 1;
+        transform: translate(-50%, -50%) scale(1);
+      }
+    }
+    @keyframes sh-fade-out {
+      from {
+        opacity: 1;
+        transform: translate(-50%, -50%) scale(1);
+      }
+      to {
+        opacity: 0;
+        transform: translate(-50%, -48%) scale(0.96);
+      }
+    }
+    @keyframes sh-backdrop-fade-in {
+      from {
+        opacity: 0;
+      }
+      to {
+        opacity: 1;
+      }
+    }
+    @keyframes sh-backdrop-fade-out {
+      from {
+        opacity: 1;
+      }
+      to {
+        opacity: 0;
+      }
+    }
+    .sh-dialog-animate {
+      animation: sh-fade-in 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+    }
+    .sh-dialog-animate-out {
+      animation: sh-fade-out 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+    }
+    .sh-backdrop-animate {
+      animation: sh-backdrop-fade-in 0.18s ease-out forwards;
+    }
+    .sh-backdrop-animate-out {
+      animation: sh-backdrop-fade-out 0.18s ease-out forwards;
+    }
+    .sh-feedback-btn {
+      color: #a1a1aa;
+      border-radius: 4px;
+      transition: color 0.2s, background-color 0.2s;
+    }
+    .sh-feedback-btn:hover {
+      background-color: #f4f4f5 !important;
+      color: #3f3f46 !important;
+    }
+    .sh-header-btn {
+      transition: all 0.2s;
+    }
+    .sh-header-btn:hover {
+      background-color: #f9fafb !important;
+      border-color: #d1d5db !important;
+    }
+  `;
 const TRANSLATIONS = {
   newChat: "New Chat",
   welcomeToShopPrompter: "Welcome to ShopPrompter",
@@ -241,9 +414,8 @@ const TRANSLATIONS = {
     "I am your personal AI shopping assistant. Ask me anything about our products!",
   askMeAnything: "Ask me anything...",
   thinking: "Thinking...",
-  showPopularItems: "Show popular items",
-  compareProducts: "Compare products",
-  findByBudget: "Find by budget",
+  feedbackError:
+    "We are sorry, but we could not process your feedback. Please try again later.",
 };
 const ICONS = {
   chat: "https://cdn.jsdelivr.net/gh/lucide-icons/lucide@latest/icons/message-square.svg",
@@ -253,8 +425,6 @@ const ICONS = {
     "https://cdn.jsdelivr.net/gh/lucide-icons/lucide@latest/icons/fire.svg",
   compareproducts:
     "https://cdn.jsdelivr.net/gh/lucide-icons/lucide@latest/icons/box.svg",
-  findbybudget:
-    "https://cdn.jsdelivr.net/gh/lucide-icons/lucide@latest/icons/foto.svg",
   sendHorizontal:
     "https://cdn.jsdelivr.net/gh/lucide-icons/lucide@latest/icons/send-horizontal.svg",
 };
@@ -268,42 +438,116 @@ function ShopPrompter(props) {
 
   const [chatMessages, setChatMessages] = useState(() => []);
 
-  const [showChat, setShowChat] = useState(
-    () =>
-      props.chatPosition === "right-panel" || props.chatPosition === "full-page"
-  );
+  const [showChat, setShowChat] = useState(() => false);
+
+  const [isClosing, setIsClosing] = useState(() => false);
+
+  const [closeTimeout, setCloseTimeout] = useState(() => null);
 
   const [service, setService] = useState(() => null);
 
-  const [isHeaderButtonHovered, setIsHeaderButtonHovered] = useState(
-    () => false
+  const [agentExperience, setAgentExperience] = useState(() => null);
+
+  const [animationClass, setAnimationClass] = useState(() => "");
+
+  const [backdropAnimationClass, setBackdropAnimationClass] = useState(
+    () => ""
   );
 
-  const [agentExperience, setAgentExperience] = useState(() => null);
+  function hasToken() {
+    const token =
+      props.shopPrompterToken || apiConfigObj?.()?.shopPrompterToken;
+    return !!token;
+  }
+
+  function isConfigInsufficient() {
+    const token =
+      props.shopPrompterToken || apiConfigObj?.()?.shopPrompterToken;
+    const apiKey = apiConfigObj?.()?.apiKey;
+    return !token && !apiKey;
+  }
+
+  function showPriceIfEmptyVal() {
+    const val = props.showPriceIfEmpty;
+    if (typeof val === "string") {
+      return val === "true";
+    }
+    return val ?? false;
+  }
+
+  function visibleFieldsList() {
+    const val = props.visibleFields;
+    if (typeof val === "string") {
+      try {
+        return JSON.parse(val);
+      } catch (e) {
+        return val
+          .split(",")
+          .map((s) => s.trim())
+          .filter(Boolean);
+      }
+    }
+    return val || [];
+  }
+
+  function themeObj() {
+    if (typeof props.theme === "string") {
+      try {
+        return JSON.parse(props.theme);
+      } catch (e) {
+        return {};
+      }
+    }
+    return props.theme || {};
+  }
+
+  function prompts() {
+    return agentExperience?.predefinedPrompts || [];
+  }
+
+  function apiConfigObj() {
+    if (typeof props.apiConfig === "string") {
+      try {
+        return JSON.parse(props.apiConfig);
+      } catch (e) {
+        return null;
+      }
+    }
+    return props.apiConfig || null;
+  }
 
   function containerStyle() {
     const pos = props.chatPosition || "classic-chatbot";
     const isFull = pos === "full-page";
-    const isBottom = pos === "bottom-sheet";
+    const isDialog = pos === "dialog";
     const isClassic = pos === "classic-chatbot";
     const isRight = pos === "right-panel";
     return {
       position: isFull ? "relative" : "fixed",
-      bottom: isClassic ? "1rem" : isBottom ? "2rem" : "0",
-      right: isClassic || isRight ? "1rem" : "0",
-      width: isFull ? "100%" : isBottom ? "90%" : "24rem",
-      height: isClassic ? "550px" : isBottom ? "700px" : "100%",
-      maxWidth: isBottom ? "900px" : "none",
-      left: isBottom ? "50%" : "auto",
-      transform: isBottom ? "translateX(-50%)" : "none",
-      zIndex: 50,
-      backgroundColor: "white",
+      bottom: isClassic ? "1rem" : isDialog ? "auto" : "0",
+      top: isDialog ? "50%" : "auto",
+      right: isClassic || isRight ? "1rem" : isDialog ? "auto" : "0",
+      left: isDialog ? "50%" : isClassic || isRight || isFull ? "auto" : "0",
+      transform: isDialog ? "translate(-50%, -50%)" : "none",
+      width: isFull ? "100%" : isDialog ? "90%" : "24rem",
+      height: isClassic
+        ? "550px"
+        : isDialog
+        ? "700px"
+        : isFull
+        ? "600px"
+        : "100%",
+      maxWidth: isDialog ? "900px" : "none",
+      maxHeight: isDialog ? "90vh" : "none",
+      zIndex: isDialog ? 1001 : isClassic || isRight ? 1001 : 50,
+      backgroundColor: themeObj().mainBackgroundColor || "white",
       display: "flex",
       flexDirection: "column",
       overflow: "hidden",
       borderRadius: isFull ? "0" : "0.5rem",
       border: isFull ? "none" : "1px solid #e5e7eb",
       boxShadow: isFull ? "none" : "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+      fontFamily: themeObj().fontFamily || undefined,
     };
   }
 
@@ -311,32 +555,33 @@ function ShopPrompter(props) {
     const pos = props.chatPosition || "classic-chatbot";
     if (pos === "classic-chatbot") return "sh-classic";
     if (pos === "right-panel") return "sh-right";
-    if (pos === "bottom-sheet") return "sh-bottom";
+    if (pos === "dialog") {
+      return "sh-dialog " + animationClass;
+    }
     return "sh-full";
   }
 
   function messages() {
-    return chatMessages.map((msg) => ({
-      ...msg,
-      safeProductSkus: msg.productSkus || [],
-    }));
+    return chatMessages;
   }
 
-  function showWelcome() {
-    return chatMessages.length === 0;
+  function parseMarkdown(content) {
+    if (!content) return "";
+    return String(marked.parse(content));
   }
 
-  function getProductImageUrl(sku) {
-    return "https://placehold.co/100x100?text=" + sku;
+  function showWelcome() {
+    return chatMessages.length === 0;
   }
 
-  function getProductLink(sku) {
-    return "/product/" + sku;
+  function getShowProducts(message) {
+    return message.productSkus && message.productSkus.length > 0;
   }
 
-  function handleSend() {
-    if (!input.trim() || isLoading) return;
-    const userQuery = input;
+  function handleSend(overrideQuery) {
+    const actualQuery = overrideQuery || input;
+    if (!actualQuery.trim() || isLoading) return;
+    const userQuery = actualQuery;
     setInput("");
     const userMsg = {
       id: Date.now().toString() + "-user",
@@ -344,30 +589,45 @@ function ShopPrompter(props) {
       content: userQuery,
       productSkus: [],
     };
-    setChatMessages([...chatMessages, userMsg]);
     const assistantMsg = {
       id: Date.now().toString() + "-assistant",
       role: "assistant",
       content: "",
       productSkus: [],
     };
-    setChatMessages([...chatMessages, assistantMsg]);
+    let currentMessages = [...chatMessages, userMsg, assistantMsg];
+    setChatMessages(currentMessages);
+    setTimeout(() => {
+      const inputEl = document.getElementById("shop-prompter-input");
+      if (inputEl) {
+        inputEl.value = "";
+        inputEl.focus();
+      }
+    }, 0);
     service?.sendMessage(
       userQuery,
       {
         onTextUpdate: (text) => {
-          const updatedMessages = [...chatMessages];
+          const updatedMessages = [...currentMessages];
           const lastMsg = updatedMessages[updatedMessages.length - 1];
           if (lastMsg) {
-            lastMsg.content = text;
+            updatedMessages[updatedMessages.length - 1] = {
+              ...lastMsg,
+              content: text,
+            };
+            currentMessages = updatedMessages;
             setChatMessages(updatedMessages);
           }
         },
         onProductSkus: (skus) => {
-          const updatedMessages = [...chatMessages];
+          const updatedMessages = [...currentMessages];
           const lastMsg = updatedMessages[updatedMessages.length - 1];
           if (lastMsg) {
-            lastMsg.productSkus = skus;
+            updatedMessages[updatedMessages.length - 1] = {
+              ...lastMsg,
+              productSkus: skus,
+            };
+            currentMessages = updatedMessages;
             setChatMessages(updatedMessages);
           }
         },
@@ -381,16 +641,65 @@ function ShopPrompter(props) {
           if (props.onCartOperation) {
             props.onCartOperation(ops);
           }
+          dispatchCartOperation(ops);
         },
       },
       props.cart || []
     );
   }
 
+  function dispatchCartOperation(ops) {
+    if (typeof window !== "undefined") {
+      const root =
+        typeof self !== "undefined" &&
+        self &&
+        "dispatchEvent" in self &&
+        !(self instanceof Window)
+          ? self
+          : null;
+      if (root) {
+        root.dispatchEvent(
+          new CustomEvent("cartOperation", {
+            detail: ops,
+          })
+        );
+      }
+    }
+  }
+
   function toggleChat() {
-    setShowChat(!showChat);
-    if (!showChat && props.onClose) {
-      props.onClose();
+    if (showChat) {
+      setIsClosing(true);
+      setAnimationClass("sh-dialog-animate-out");
+      setBackdropAnimationClass("sh-backdrop-animate-out");
+      if (closeTimeout) {
+        clearTimeout(closeTimeout);
+      }
+      setCloseTimeout(
+        setTimeout(() => {
+          setShowChat(false);
+          setIsClosing(false);
+          setAnimationClass("");
+          setBackdropAnimationClass("");
+          setCloseTimeout(null);
+          if (props.onClose) {
+            props.onClose();
+          }
+        }, 200)
+      );
+    } else {
+      if (closeTimeout) {
+        clearTimeout(closeTimeout);
+        setCloseTimeout(null);
+      }
+      setShowChat(true);
+      setIsClosing(false);
+      setAnimationClass("sh-dialog-animate");
+      setBackdropAnimationClass("sh-backdrop-animate");
+      setTimeout(() => {
+        setAnimationClass("");
+        setBackdropAnimationClass("");
+      }, 250);
     }
   }
 
@@ -399,16 +708,6 @@ function ShopPrompter(props) {
     service?.resetSession();
   }
 
-  function onPopularItemsClick() {
-    setInput(TRANSLATIONS.showPopularItems);
-    handleSend();
-  }
-
-  function onCompareProductsClick() {
-    setInput(TRANSLATIONS.compareProducts);
-    handleSend();
-  }
-
   function onInputChange(event) {
     setInput(event.target.value);
   }
@@ -419,53 +718,235 @@ function ShopPrompter(props) {
     }
   }
 
-  function onHeaderButtonMouseEnter() {
-    setIsHeaderButtonHovered(true);
+  function handleTriggerClick(e) {
+    if (props.chatPosition !== "dialog") return;
+    if (!props.dialogTrigger) return;
+    const isTargetClicked =
+      typeof props.dialogTrigger === "string"
+        ? e.target.closest(props.dialogTrigger)
+        : (() => {
+            let target = null;
+            if (typeof props.dialogTrigger === "object") {
+              if ("current" in props.dialogTrigger) {
+                target = props.dialogTrigger.current;
+              } else {
+                target = props.dialogTrigger;
+              }
+            }
+            return target && target.contains && target.contains(e.target);
+          })();
+    if (isTargetClicked) {
+      if (closeTimeout) {
+        clearTimeout(closeTimeout);
+        setCloseTimeout(null);
+      }
+      setShowChat(true);
+      setIsClosing(false);
+      setAnimationClass("sh-dialog-animate");
+      setBackdropAnimationClass("sh-backdrop-animate");
+      setTimeout(() => {
+        setAnimationClass("");
+        setBackdropAnimationClass("");
+      }, 250);
+    }
   }
 
-  function onHeaderButtonMouseLeave() {
-    setIsHeaderButtonHovered(false);
+  function loadCustomFont(fontFamily) {
+    if (!fontFamily || typeof window === "undefined") return;
+    const systemFonts = [
+      "sans-serif",
+      "serif",
+      "monospace",
+      "cursive",
+      "fantasy",
+      "system-ui",
+      "-apple-system",
+      "blinkmacsystemfont",
+      "segoe ui",
+      "roboto",
+      "helvetica",
+      "arial",
+      "inherit",
+    ];
+    const cleanFont = fontFamily
+      .split(",")[0]
+      .trim()
+      .replace(new RegExp("['\"]", "g"), "");
+    if (!cleanFont || systemFonts.includes(cleanFont.toLowerCase())) return;
+    const linkId = `shopprompter-font-${cleanFont
+      .toLowerCase()
+      .replace(new RegExp("\\s+", "g"), "-")}`;
+    if (document.getElementById(linkId)) return;
+    const link = document.createElement("link");
+    link.id = linkId;
+    link.rel = "stylesheet";
+    const fontNameUrl = cleanFont.replace(new RegExp("\\s+", "g"), "+");
+    link.href = `https://fonts.googleapis.com/css2?family=${fontNameUrl}:wght@400;500;600;700&display=swap`;
+    document.head.appendChild(link);
   }
 
-  function doSomethingAsync() {
+  function loadAgentExperience() {
     void (async function () {
-      console.log("## ~ ShopPrompter ~ state.service:", service);
       if (!service) {
-        console.warn("Service not initialized yet");
+        console.warn(
+          "Service not initialized yet! Cannot load AgentExperience."
+        );
         return;
       }
       const response = await service?.getAgentExperience();
-      console.log("## ~ ShopPrompter ~ response:", response);
       setAgentExperience(response);
     })();
   }
 
+  function handleFeedback(messageId, messageContent, newFeedback) {
+    const msg = chatMessages.find((m) => m.id === messageId);
+    if (!msg) return;
+    const currentFeedback = msg.feedback;
+    const targetFeedback =
+      currentFeedback === newFeedback ? "clear" : newFeedback;
+
+    // Optimistically update the UI state
+    const oldMessages = [...chatMessages];
+    setChatMessages(
+      chatMessages.map((m) => {
+        if (m.id === messageId) {
+          return {
+            ...m,
+            feedback: targetFeedback === "clear" ? null : targetFeedback,
+          };
+        }
+        return m;
+      })
+    );
+    setError(null);
+    service
+      ?.sendFeedback(messageId, messageContent, targetFeedback)
+      .catch((err) => {
+        // Revert optimistic update
+        setChatMessages(oldMessages);
+        setError(err?.message || TRANSLATIONS.feedbackError);
+      });
+  }
+
+  function canShowFeedback(message) {
+    if (message.role !== "assistant") return false;
+    if (!message.content) return false;
+    const lastMsg = chatMessages[chatMessages.length - 1];
+    if (lastMsg && lastMsg.id === message.id && isLoading) {
+      return false;
+    }
+    return true;
+  }
+
   useEffect(() => {
-    const shopPrompterService = new ShopPrompterService();
-    setService(shopPrompterService);
+    if (
+      typeof window !== "undefined" &&
+      !document.getElementById("lottie-player-script")
+    ) {
+      const script = document.createElement("script");
+      script.id = "lottie-player-script";
+      script.src =
+        "https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player";
+      document.head.appendChild(script);
+    }
+    if (themeObj().fontFamily) {
+      loadCustomFont(themeObj().fontFamily);
+    }
+    if (apiConfigObj()) {
+      if (!isConfigInsufficient()) {
+        const apiConfig = {
+          ...apiConfigObj(),
+          shopPrompterToken:
+            props.shopPrompterToken || apiConfigObj().shopPrompterToken,
+        };
+        const service = new ShopPrompterService(apiConfig);
+        setService(service);
+        // Restore persisted messages for the current session.
+        const savedMessages = service.loadMessages();
+        if (savedMessages.length > 0) {
+          setChatMessages(savedMessages);
+        }
+      }
+    } else {
+      console.error("ShopPrompter: apiConfig prop is required!");
+    }
+    if (
+      props?.chatPosition === "right-panel" ||
+      props?.chatPosition === "full-page"
+    ) {
+      setShowChat(true);
+    }
+    if (typeof window !== "undefined") {
+      document.addEventListener("click", handleTriggerClick);
+    }
   }, []);
   useEffect(() => {
     if (service && !agentExperience) {
-      doSomethingAsync();
-    }
-    if (agentExperience) {
-      console.log("## ~ ShopPrompter ~ agentExperience updated:", {
-        greeting: agentExperience.greeting,
-        agentLogoUrl: agentExperience.agentLogoUrl,
-      });
+      loadAgentExperience();
     }
   }, [service, agentExperience]);
+  useEffect(() => {
+    if (themeObj().fontFamily) {
+      loadCustomFont(themeObj().fontFamily);
+    }
+  }, [themeObj().fontFamily || ""]);
+  useEffect(() => {
+    if (
+      props?.chatPosition === "right-panel" ||
+      props?.chatPosition === "full-page"
+    ) {
+      setShowChat(true);
+    } else if (
+      props?.chatPosition === "dialog" ||
+      props?.chatPosition === "classic-chatbot"
+    ) {
+      setShowChat(false);
+      setIsClosing(false);
+      setAnimationClass("");
+      setBackdropAnimationClass("");
+    }
+  }, [props?.chatPosition || ""]);
 
   return (
     <div className="shopprompter-sdk">
+      <style dangerouslySetInnerHTML={{ __html: ANIMATION_STYLES }} />
+      <div
+        onClick={(e) => toggleChat()}
+        style={{
+          ...styles.backdrop,
+          display:
+            props.chatPosition === "dialog" && (showChat || isClosing)
+              ? "block"
+              : "none",
+        }}
+        className={backdropAnimationClass}
+      />
       {props.chatPosition === "classic-chatbot" ? (
         <>
           {!showChat ? (
             <button
-              className="fixed bottom-6 right-6 w-16 h-16 bg-blue-600 hover:bg-blue-700 rounded-full shadow-lg z-50 flex items-center justify-center transition-colors border-none cursor-pointer"
               onClick={(e) => toggleChat()}
               style={{
-                boxShadow: "0 0 0 8px rgba(37, 99, 235, 0.2)",
+                position: "fixed",
+                bottom: "1.5rem",
+                right: "1.5rem",
+                width: "4rem",
+                height: "4rem",
+                backgroundColor: themeObj().actionColor || "#2563eb",
+                borderRadius: "9999px",
+                zIndex: 50,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                transition: "background-color 0.2s",
+                border: "none",
+                cursor: "pointer",
+                boxShadow: themeObj().actionColor
+                  ? `0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 0 0 8px ${
+                      themeObj().actionColor
+                    }33`
+                  : "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 0 0 8px rgba(37, 99, 235, 0.2)",
+                fontFamily: themeObj().fontFamily || undefined,
               }}
             >
               <img
@@ -480,107 +961,56 @@ function ShopPrompter(props) {
           ) : null}
         </>
       ) : null}
-      {showChat ? (
+      {showChat || isClosing ? (
         <div style={containerStyle()} className={containerClass()}>
-          <div style={styles.header}>
-            <div style={styles.subHeaderContainer}>
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 46 47"
-                width="24"
-                height="24"
-                fill="none"
-              >
-                <path
-                  fill="url(#a)"
-                  d="M16.452 32.747c-1.587 0-2.874-1.3-2.874-2.903V14.25h5.259V0H5.747C2.576 0 0 2.6 0 5.806v21.139c0 3.208 2.575 5.805 5.748 5.805h10.704v-.003Z"
-                />
-                <path
-                  fill="url(#b)"
-                  d="M19.326 0c-3.173 0-5.748 2.6-5.748 5.806v8.444h15.438c1.586 0 2.874 1.3 2.874 2.902v3.924H46V0H19.326Z"
-                />
-                <path
-                  fill="url(#c)"
-                  d="M40.252 14.25H29.016c1.586 0 2.874 1.3 2.874 2.902v15.595h-6.751V47h15.117c3.173 0 5.748-2.6 5.748-5.806V20.055c0-3.205-2.575-5.806-5.748-5.806h-.004Z"
-                />
-                <path
-                  fill="url(#d)"
-                  d="M8.669 32.75H5.751c-3.173 0-5.747-2.6-5.747-5.805V47h26.142c3.172 0 5.747-2.6 5.747-5.806V32.75H8.67Z"
-                />
-                <defs>
-                  <linearGradient
-                    id="a"
-                    x1="14.3"
-                    x2="3.322"
-                    y1="22.494"
-                    y2="4.382"
-                    gradientUnits="userSpaceOnUse"
-                  >
-                    <stop stopColor="#B0145C" />
-                    <stop offset=".37" stopColor="#AE2E9A" />
-                    <stop offset="1" stopColor="#AD59FF" />
-                  </linearGradient>
-                  <linearGradient
-                    id="b"
-                    x1="21.156"
-                    x2="40.431"
-                    y1="21.216"
-                    y2="1.624"
-                    gradientUnits="userSpaceOnUse"
-                  >
-                    <stop offset=".08" stopColor="#E7A2FF" />
-                    <stop offset=".37" stopColor="#E983CD" />
-                    <stop offset=".99" stopColor="#F03A58" />
-                  </linearGradient>
-                  <linearGradient
-                    id="c"
-                    x1="30.464"
-                    x2="46.567"
-                    y1="27.405"
-                    y2="42.472"
-                    gradientUnits="userSpaceOnUse"
-                  >
-                    <stop stopColor="#B0145C" />
-                    <stop offset=".02" stopColor="#B11861" />
-                    <stop offset=".27" stopColor="#C44999" />
-                    <stop offset=".5" stopColor="#D36FC5" />
-                    <stop offset=".71" stopColor="#DE8BE4" />
-                    <stop offset=".88" stopColor="#E49BF8" />
-                    <stop offset="1" stopColor="#E7A2FF" />
-                  </linearGradient>
-                  <linearGradient
-                    id="d"
-                    x1="23.356"
-                    x2="-.618"
-                    y1="44.082"
-                    y2="30.739"
-                    gradientUnits="userSpaceOnUse"
-                  >
-                    <stop stopColor="#AD59FF" />
-                    <stop offset=".1" stopColor="#B455EB" />
-                    <stop offset=".54" stopColor="#D4469C" />
-                    <stop offset=".85" stopColor="#E83D6B" />
-                    <stop offset="1" stopColor="#F03A58" />
-                  </linearGradient>
-                </defs>
-              </svg>
-              <span style={styles.headerText}>ShopPrompter&reg;</span>
-            </div>
+          <div
+            style={{
+              ...styles.header,
+              backgroundColor:
+                themeObj().headerBackgroundColor || "transparent",
+            }}
+          >
+            {themeObj().showAgentName !== false ? (
+              <div style={styles.subHeaderContainer}>
+                {agentExperience?.agentLogoUrl ? (
+                  <img
+                    src={agentExperience.agentLogoUrl}
+                    alt={agentExperience.agentName}
+                    style={{
+                      width: "24px",
+                      height: "24px",
+                      borderRadius: "4px",
+                      objectFit: "cover",
+                    }}
+                  />
+                ) : null}
+                {agentExperience?.agentName ? (
+                  <span style={styles.headerText}>
+                    {agentExperience.agentName}
+                  </span>
+                ) : null}
+              </div>
+            ) : (
+              <>
+                <div style={styles.subHeaderContainer} />
+              </>
+            )}
+            {!hasToken() && apiConfigObj?.()?.apiKey ? (
+              <div style={styles.warningBanner}>
+                API Key is only for development purposes
+              </div>
+            ) : null}
             <div style={styles.subHeaderContainer}>
               <button
+                className="sh-header-btn"
                 onClick={(e) => handleNewChat()}
-                onMouseEnter={(e) => onHeaderButtonMouseEnter()}
-                onMouseLeave={(e) => onHeaderButtonMouseLeave()}
-                style={{
-                  ...styles.headerButton,
-                  ...(isHeaderButtonHovered ? styles.headerButton.onHover : {}),
-                }}
+                style={styles.headerButton}
               >
                 {TRANSLATIONS.newChat}
               </button>
               {props.chatPosition === "classic-chatbot" ||
               props.chatPosition === "right-panel" ||
-              props.chatPosition === "bottom-sheet" ? (
+              props.chatPosition === "dialog" ? (
                 <button
                   onClick={(e) => toggleChat()}
                   style={styles.ButtonSheetButton}
@@ -590,135 +1020,351 @@ function ShopPrompter(props) {
               ) : null}
             </div>
           </div>
-          <div style={styles.chatContainer}>
-            {showWelcome() ? (
-              <div style={styles.welcomeContainer}>
-                <img
-                  alt="ShopPrompter"
-                  src={
-                    agentExperience?.agentLogoUrl
-                      ? agentExperience.agentLogoUrl
-                      : ICONS.shopprompter
-                  }
+          {isConfigInsufficient() ? (
+            <div style={styles.insufficientConfigContainer}>
+              <div style={styles.insufficientConfigIconContainer}>
+                <svg
+                  width="48"
+                  height="48"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
                   style={{
-                    width: "64px",
-                    height: "64px",
-                    marginBottom: "24px",
+                    color: "#ef4444",
                   }}
-                />
-                <h3 style={styles.welcomeTitle}>
-                  {agentExperience?.greeting?.title ||
-                    TRANSLATIONS.welcomeToShopPrompter}
-                </h3>
-                <p style={styles.welcomeDescription}>
-                  {agentExperience?.greeting?.description ||
-                    TRANSLATIONS.welcomeDescription}
-                </p>
-                <div style={styles.buttonContainer}>
-                  <button
-                    style={styles.button}
-                    onClick={(e) => onPopularItemsClick()}
+                >
+                  <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
+                  <path d="M7 11V7a5 5 0 0 1 9.9-1" />
+                </svg>
+              </div>
+              <h3
+                style={{
+                  ...styles.insufficientConfigTitle,
+                  fontFamily: themeObj().fontFamily || undefined,
+                }}
+              >
+                Configuration Error
+              </h3>
+              <p
+                style={{
+                  ...styles.insufficientConfigMessage,
+                  fontFamily: themeObj().fontFamily || undefined,
+                }}
+              >
+                ShopPrompter requires a secure token or API key to initialize.
+                Please check your setup.
+              </p>
+              <div
+                style={{
+                  ...styles.insufficientConfigDetails,
+                  fontFamily: themeObj().fontFamily || undefined,
+                }}
+              >
+                <div
+                  style={{
+                    fontWeight: 600,
+                    marginBottom: "0.25rem",
+                  }}
+                >
+                  Missing Parameters:
+                </div>
+                <div
+                  style={{
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: "0.25rem",
+                    fontFamily: "monospace",
+                    fontSize: "0.75rem",
+                  }}
+                >
+                  <span
+                    style={{
+                      color: "#ef4444",
+                    }}
                   >
-                    {TRANSLATIONS.showPopularItems}
-                  </button>
-                  <button
-                    style={styles.button}
-                    onClick={(e) => onCompareProductsClick()}
+                    ✗ shopPrompterToken (not found)
+                  </span>
+                  <span
+                    style={{
+                      color: "#ef4444",
+                    }}
                   >
-                    {TRANSLATIONS.compareProducts}
-                  </button>
+                    ✗ apiConfig.apiKey (not found)
+                  </span>
                 </div>
               </div>
-            ) : (
-              <>
-                {messages()?.map((message) => (
-                  <div
-                    key={message.id}
-                    style={
-                      message.role === "user"
-                        ? styles.messageContainerUser
-                        : styles.messageContainerAssistant
-                    }
-                  >
-                    <div
-                      style={
-                        message.role === "user"
-                          ? styles.messageBubbleUser
-                          : styles.messageBubbleAssistant
+            </div>
+          ) : null}
+          {!isConfigInsufficient() ? (
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                flex: 1,
+                overflow: "hidden",
+              }}
+            >
+              <div
+                id="shop-prompter-chat-container"
+                style={{
+                  ...styles.chatContainer,
+                  backgroundColor:
+                    themeObj().mainBackgroundColor ||
+                    styles.chatContainer.backgroundColor,
+                }}
+              >
+                {showWelcome() ? (
+                  <div style={styles.welcomeContainer}>
+                    <img
+                      alt="ShopPrompter"
+                      src={
+                        agentExperience?.agentLogoUrl
+                          ? agentExperience.agentLogoUrl
+                          : ICONS.shopprompter
                       }
+                      style={{
+                        width: "64px",
+                        height: "64px",
+                        marginBottom: "24px",
+                        borderRadius: "12px",
+                        objectFit: "cover",
+                      }}
+                    />
+                    <h3
+                      style={{
+                        ...styles.welcomeTitle,
+                        fontFamily:
+                          themeObj().fontFamily ||
+                          styles.welcomeTitle.fontFamily,
+                      }}
                     >
-                      {message.content}
-                      {!message.content ? (
-                        <>
-                          {message.role === "assistant" ? (
-                            <>
-                              {isLoading ? (
-                                <div style={styles.thinkingIndicator}>
-                                  {TRANSLATIONS.thinking}
-                                </div>
-                              ) : null}
-                            </>
-                          ) : null}
-                        </>
-                      ) : null}
+                      {agentExperience?.greeting?.title ||
+                        TRANSLATIONS.welcomeToShopPrompter}
+                    </h3>
+                    <p
+                      style={{
+                        ...styles.welcomeDescription,
+                        fontFamily:
+                          themeObj().fontFamily ||
+                          styles.welcomeDescription.fontFamily,
+                      }}
+                    >
+                      {agentExperience?.greeting?.description ||
+                        TRANSLATIONS.welcomeDescription}
+                    </p>
+                    <div style={styles.buttonContainer}>
+                      {prompts()?.map((item) => (
+                        <button
+                          key={item.prompt}
+                          style={styles.button}
+                          onClick={(event) => {
+                            setInput(item.prompt);
+                            handleSend(item.prompt);
+                          }}
+                        >
+                          {item.prompt}
+                        </button>
+                      ))}
                     </div>
-                    {message.role === "assistant" ? (
-                      <div style={styles.productCardsContainer}>
-                        {message.safeProductSkus?.map((sku) => (
-                          <div key={sku} style={styles.productCard}>
-                            <div style={styles.productImageContainer}>
-                              <img
-                                src={getProductImageUrl(sku)}
-                                alt={sku}
-                                style={{
-                                  maxHeight: "100%",
-                                  maxWidth: "100%",
+                  </div>
+                ) : null}
+                {!showWelcome() ? (
+                  <div
+                    style={{
+                      width: "100%",
+                    }}
+                  >
+                    {chatMessages?.map((message) => (
+                      <div key={message.id}>
+                        {message.role === "user" ? (
+                          <div style={styles.messageContainerUser}>
+                            <div
+                              style={{
+                                ...styles.messageBubbleUser,
+                                backgroundColor:
+                                  themeObj().userMessageBackgroundColor ||
+                                  styles.messageBubbleUser.backgroundColor,
+                              }}
+                            >
+                              {message.content}
+                            </div>
+                          </div>
+                        ) : null}
+                        {message.role === "assistant" ? (
+                          <div style={styles.messageContainerAssistant}>
+                            <div
+                              style={{
+                                ...styles.messageBubbleAssistant,
+                                backgroundColor:
+                                  themeObj().assistantMessageBackgroundColor ||
+                                  styles.messageBubbleAssistant.backgroundColor,
+                              }}
+                            >
+                              <div
+                                dangerouslySetInnerHTML={{
+                                  __html: parseMarkdown(message.content),
                                 }}
                               />
+                              {!message.content && isLoading ? (
+                                <>
+                                  {agentExperience?.loadingIndicatorUrl ? (
+                                    <lottie-player
+                                      background="transparent"
+                                      speed="1"
+                                      src={agentExperience.loadingIndicatorUrl}
+                                      style={{
+                                        width: "40px",
+                                        height: "40px",
+                                      }}
+                                      loop
+                                      autoplay
+                                    />
+                                  ) : (
+                                    <div style={styles.thinkingIndicator}>
+                                      <svg
+                                        width="24"
+                                        height="24"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        strokeWidth="2"
+                                        strokeLinecap="round"
+                                        strokeLinejoin="round"
+                                        style={{
+                                          color: "#6b7280",
+                                        }}
+                                      >
+                                        <path d={THINKING_SPINNER} />
+                                        <animateTransform
+                                          attributeName="transform"
+                                          type="rotate"
+                                          from="0 12 12"
+                                          to="360 12 12"
+                                          dur="1s"
+                                          repeatCount="indefinite"
+                                        />
+                                      </svg>
+                                    </div>
+                                  )}
+                                </>
+                              ) : null}
                             </div>
-                            <div style={styles.productInfo}>
-                              <p style={styles.productSku}>{sku}</p>
-                              <a
-                                href={getProductLink(sku)}
-                                style={styles.productLink}
-                              >
-                                VIEW DETAILS
-                              </a>
-                            </div>
+                            {canShowFeedback(message) ? (
+                              <div style={styles.feedbackRow}>
+                                <button
+                                  className="sh-feedback-btn"
+                                  onClick={(event) =>
+                                    handleFeedback(
+                                      message.id,
+                                      message.content,
+                                      "upvote"
+                                    )
+                                  }
+                                  style={styles.feedbackButton}
+                                >
+                                  <ThumbsUpIcon
+                                    fill={
+                                      message.feedback === "upvote"
+                                        ? themeObj().actionColor || "#2563eb"
+                                        : "none"
+                                    }
+                                    stroke={
+                                      message.feedback === "upvote"
+                                        ? themeObj().actionColor || "#2563eb"
+                                        : "currentColor"
+                                    }
+                                  />
+                                </button>
+                                <button
+                                  className="sh-feedback-btn"
+                                  onClick={(event) =>
+                                    handleFeedback(
+                                      message.id,
+                                      message.content,
+                                      "downvote"
+                                    )
+                                  }
+                                  style={styles.feedbackButton}
+                                >
+                                  <ThumbsDownIcon
+                                    fill={
+                                      message.feedback === "downvote"
+                                        ? themeObj().actionColor || "#2563eb"
+                                        : "none"
+                                    }
+                                    stroke={
+                                      message.feedback === "downvote"
+                                        ? themeObj().actionColor || "#2563eb"
+                                        : "currentColor"
+                                    }
+                                  />
+                                </button>
+                              </div>
+                            ) : null}
+                            {getShowProducts(message) ? (
+                              <ProductCardList
+                                skus={message.productSkus}
+                                defaultLocale={props.defaultLocale}
+                                showPriceIfEmpty={showPriceIfEmptyVal()}
+                                visibleFields={visibleFieldsList()}
+                              />
+                            ) : null}
                           </div>
-                        ))}
+                        ) : null}
                       </div>
-                    ) : null}
+                    ))}
                   </div>
-                ))}
-              </>
-            )}
-            {error ? (
-              <div style={styles.errorContainer}>Error: {error}</div>
-            ) : null}
-          </div>
-          <div style={styles.inputSection}>
-            <div style={styles.inputWrapper}>
-              <input
-                type="text"
-                style={styles.input}
-                placeholder={TRANSLATIONS.askMeAnything}
-                value={input}
-                onInput={(e) => onInputChange(e)}
-                onKeyDown={(e) => onInputKeyDown(e)}
-              />
-              <button
-                onClick={(e) => handleSend()}
+                ) : null}
+                {error ? (
+                  <div style={styles.errorContainer}>Error: {error}</div>
+                ) : null}
+              </div>
+              <div
                 style={{
-                  ...styles.formButton,
-                  ...styles.sendButton,
+                  ...styles.inputSection,
+                  backgroundColor:
+                    themeObj().mainBackgroundColor ||
+                    styles.inputSection.backgroundColor,
                 }}
               >
-                <img alt="Send" src={ICONS.sendHorizontal} />
-              </button>
+                <div style={styles.inputWrapper}>
+                  <input
+                    id="shop-prompter-input"
+                    type="text"
+                    style={styles.input}
+                    placeholder={
+                      agentExperience?.hintText || TRANSLATIONS.askMeAnything
+                    }
+                    value={input}
+                    onInput={(e) => onInputChange(e)}
+                    onKeyDown={(e) => onInputKeyDown(e)}
+                  />
+                  <button
+                    onClick={(e) => handleSend()}
+                    style={{
+                      ...styles.formButton,
+                      ...styles.sendButton,
+                      backgroundColor:
+                        themeObj().actionColor ||
+                        styles.sendButton.backgroundColor,
+                    }}
+                  >
+                    <img
+                      alt="Send"
+                      src={ICONS.sendHorizontal}
+                      style={{
+                        padding: "4px",
+                      }}
+                    />
+                  </button>
+                </div>
+                <p style={styles.disclaimer}>AI content may be inaccurate.</p>
+              </div>
             </div>
-            <p style={styles.disclaimer}>AI content may be inaccurate.</p>
-          </div>
+          ) : null}
         </div>
       ) : null}
     </div>