@shop-prompter/react 1.1.0 → 1.2.0

package/dist/index.mjs

@@ -650,6 +650,57 @@ var ShopPrompterService = class {
   }
 };
 
+// src/translations.ts
+var DEFAULT_LOCALE = "en";
+var TRANSLATIONS = {
+  en: {
+    newChat: "New Chat",
+    welcomeToShopPrompter: "Welcome",
+    welcomeDescription: "I am your personal AI shopping assistant. Ask me what you would like to know!",
+    askMeAnything: "Ask me anything...",
+    thinking: "Thinking...",
+    feedbackError: "We are sorry, but we could not process your feedback. Please try again later.",
+    guestLimitReached: "We are sorry, the chat is no longer available for a guest user. Please log in to continue chatting.",
+    sessionExpired: "We are sorry. It looks like the session just expired. Please refresh the page to continue chatting.",
+    agentExperienceError: "We are sorry. The session seems to be expired, or the connection is wrongly configured. Please reload the page.",
+    apiKeyWarning: "API Key is only for development purposes",
+    configErrorTitle: "Configuration Error",
+    configErrorMessage: "The initialization requires certain parameters to be present\u201A. Please check your setup.",
+    configMissingParams: "Missing Parameters:",
+    configMissingToken: "- Valid token (not found)",
+    configMissingApiKey: "- Valid API Key. (not found)",
+    disclaimer: "AI content may be inaccurate.",
+    loadingProducts: "Loading products...",
+    productFetchError: "We are unable to fetch products.",
+    predefinedPromptDisclaimer: "Click on a prompt, to start the conversation"
+  },
+  de: {
+    newChat: "Neuer Chat",
+    welcomeToShopPrompter: "Willkommen",
+    welcomeDescription: "Ich bin Ihr pers\xF6nlicher KI-Einkaufsassistent. Fragen Sie mich alles \xFCber was Sie wissen m\xF6chten!",
+    askMeAnything: "Fragen Sie mich etwas...",
+    thinking: "Einen Moment...",
+    feedbackError: "Es tut uns leid, aber wir konnten Ihr Feedback nicht verarbeiten. Bitte versuchen Sie es sp\xE4ter erneut.",
+    guestLimitReached: "Es tut uns leid, der Chat steht f\xFCr Gastbenutzer nicht mehr zur Verf\xFCgung. Bitte melden Sie sich an, um weiter zu chatten.",
+    sessionExpired: "Es tut uns leid. Die Sitzung scheint abgelaufen zu sein. Bitte laden Sie die Seite neu, um weiter zu chatten.",
+    agentExperienceError: "Es tut uns leid. Die Sitzung scheint abgelaufen zu sein oder die Verbindung ist falsch konfiguriert. Bitte laden Sie die Seite neu.",
+    apiKeyWarning: "API Key ist nur f\xFCr Entwicklungszwecke",
+    configErrorTitle: "Konfigurationsfehler",
+    configErrorMessage: "Die Initialsierung ben\xF6tigt gewisse Parameter, die nicht vorhanden sind. Bitte \xFCberpr\xFCfen Sie Ihre Einrichtung.",
+    configMissingParams: "Fehlende Parameter:",
+    configMissingToken: "- G\xFCltiger Token (nicht gefunden)",
+    configMissingApiKey: "- API Key (nicht gefunden)",
+    disclaimer: "KI-Inhalte k\xF6nnen Fehler beinhalten.",
+    loadingProducts: "Produkte werden geladen...",
+    productFetchError: "Die Produkte konnten leider nicht geladen werden.",
+    predefinedPromptDisclaimer: "Klicken Sie auf einen Text, um die Unterhaltung zu starten"
+  }
+};
+function getTranslations(locale) {
+  const resolved = locale || DEFAULT_LOCALE;
+  return TRANSLATIONS[resolved] || TRANSLATIONS[DEFAULT_LOCALE];
+}
+
 // src/thumbs-up-icon.component.jsx
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -797,12 +848,23 @@ var styles = {
     maxWidth: "100%",
     boxSizing: "border-box",
     overflow: "hidden"
+  },
+  errorContainer: {
+    padding: "0.75rem",
+    backgroundColor: "#fef2f2",
+    border: "1px solid #fecaca",
+    color: "#dc2626",
+    fontSize: "0.75rem",
+    borderRadius: "0.5rem"
   }
 };
 function ProductCardList(props) {
   const [products, setProducts] = useState(() => []);
   const [loading, setLoading] = useState(() => false);
   const [error, setError] = useState(() => null);
+  function t() {
+    return getTranslations(props.defaultLocale);
+  }
   function fetchProducts() {
     let skusList = props.skus;
     if (typeof skusList === "string") {
@@ -826,13 +888,13 @@ function ProductCardList(props) {
       setLoading(false);
     }).catch((err) => {
       console.error("Failed to fetch products:", err);
-      setError((err == null ? void 0 : err.message) || "Failed to load products");
+      setError(t().productFetchError);
       setLoading(false);
     });
   }
   function getProductName(product) {
     var _a;
-    const locale = props.defaultLocale || "de";
+    const locale = props.defaultLocale;
     const localized = ((_a = product.localization) == null ? void 0 : _a[locale]) || Object.values(product.localization || {})[0];
     return (localized == null ? void 0 : localized.name) || product.sku;
   }
@@ -856,7 +918,7 @@ function ProductCardList(props) {
   }
   function getDynamicField(product, field) {
     var _a;
-    const locale = props.defaultLocale || "de";
+    const locale = props.defaultLocale;
     const localized = ((_a = product.localization) == null ? void 0 : _a[locale]) || Object.values(product.localization || {})[0];
     if (!localized) return void 0;
     const parts = field.split(".");
@@ -888,11 +950,8 @@ function ProductCardList(props) {
     props.skus ? Array.isArray(props.skus) ? props.skus.join(",") : props.skus : ""
   ]);
   return /* @__PURE__ */ jsx3(Fragment, { children: props.skus && props.skus.length > 0 ? /* @__PURE__ */ jsx3(Fragment, { children: /* @__PURE__ */ jsxs3("div", { style: styles.wrapper, children: [
-    loading ? /* @__PURE__ */ jsx3("div", { style: styles.statusContainer, children: /* @__PURE__ */ jsx3("span", { children: "Loading products..." }) }) : null,
-    !loading && error ? /* @__PURE__ */ jsx3("div", { style: styles.statusContainer, children: /* @__PURE__ */ jsxs3("span", { style: styles.errorText, children: [
-      "Error: ",
-      error
-    ] }) }) : null,
+    loading ? /* @__PURE__ */ jsx3("div", { style: styles.statusContainer, children: /* @__PURE__ */ jsx3("span", { children: t().loadingProducts }) }) : null,
+    !loading && error ? /* @__PURE__ */ jsx3("div", { style: styles.errorContainer, children: t().productFetchError }) : null,
     !loading && products && products.length > 0 ? /* @__PURE__ */ jsx3("div", { style: styles.productCardsContainer, children: products == null ? void 0 : products.map((product) => {
       var _a;
       return /* @__PURE__ */ jsxs3("div", { style: styles.productCard, children: [
@@ -1011,7 +1070,7 @@ var styles2 = {
     fontFamily: 'var(--font-space-grotesk), "Space Grotesk", sans-serif',
     fontWeight: 500,
     fontStyle: "Medium",
-    fontSize: "32px",
+    fontSize: "28px",
     leadingTrim: "NONE",
     lineHeight: "100%",
     letterSpacing: "0%",
@@ -1019,7 +1078,7 @@ var styles2 = {
   },
   welcomeDescription: {
     color: "#4b5563",
-    maxWidth: "20rem",
+    maxWidth: "32rem",
     fontFamily: 'var(--font-space-grotesk), "Space Grotesk", sans-serif',
     fontWeight: 400,
     fontStyle: "Regular",
@@ -1034,7 +1093,7 @@ var styles2 = {
     display: "flex",
     flexWrap: "wrap",
     justifyContent: "center",
-    gap: "0.5rem"
+    gap: "1rem"
   },
   messageContainerUser: {
     display: "flex",
@@ -1179,6 +1238,13 @@ var styles2 = {
     textAlign: "center",
     marginTop: "0.75rem"
   },
+  predefinedPromptDisclaimer: {
+    fontSize: "0.75rem",
+    color: "#6b7280",
+    textAlign: "center",
+    marginTop: "2rem",
+    width: "100%"
+  },
   backdrop: {
     position: "fixed",
     top: 0,
@@ -1333,14 +1399,6 @@ var ANIMATION_STYLES = `
       border-color: #d1d5db !important;
     }
   `;
-var TRANSLATIONS = {
-  newChat: "New Chat",
-  welcomeToShopPrompter: "Welcome to ShopPrompter",
-  welcomeDescription: "I am your personal AI shopping assistant. Ask me anything about our products!",
-  askMeAnything: "Ask me anything...",
-  thinking: "Thinking...",
-  feedbackError: "We are sorry, but we could not process your feedback. Please try again later."
-};
 var ICONS = {
   chat: "https://cdn.jsdelivr.net/gh/lucide-icons/lucide@latest/icons/message-square.svg",
   shopprompter: "https://cdn.jsdelivr.net/gh/lucide-icons/lucide@latest/icons/bot.svg",
@@ -1363,6 +1421,20 @@ function ShopPrompter(props) {
   const [backdropAnimationClass, setBackdropAnimationClass] = useState2(
     () => ""
   );
+  function t() {
+    return getTranslations(props.defaultLocale);
+  }
+  function requireClickOnPredefinedPromptVal() {
+    const flag = props.requireClickOnPredefinedPrompt;
+    return typeof flag === "string" ? flag !== "false" : flag != null ? flag : true;
+  }
+  function shouldHideInput() {
+    const requireClick = requireClickOnPredefinedPromptVal();
+    if (!requireClick) return false;
+    if (chatMessages.length > 0) return false;
+    if (prompts().length === 0) return false;
+    return true;
+  }
   function hasToken() {
     var _a2;
     const token = props.shopPrompterToken || ((_a2 = apiConfigObj == null ? void 0 : apiConfigObj()) == null ? void 0 : _a2.shopPrompterToken);
@@ -1522,7 +1594,13 @@ function ShopPrompter(props) {
           setIsLoading(loading);
         },
         onError: (err) => {
-          setError(err);
+          if (err.includes("429")) {
+            setError(t().guestLimitReached);
+          } else if (err.includes("401") || err.includes("403")) {
+            setError(t().sessionExpired);
+          } else {
+            setError(err);
+          }
         },
         onCartOperation: (ops) => {
           if (props.onCartOperation) {
@@ -1659,6 +1737,10 @@ function ShopPrompter(props) {
         return;
       }
       const response = await (service == null ? void 0 : service.getAgentExperience());
+      if (!response) {
+        setError(t().agentExperienceError);
+        return;
+      }
       setAgentExperience(response);
     })();
   }
@@ -1682,7 +1764,7 @@ function ShopPrompter(props) {
     setError(null);
     service == null ? void 0 : service.sendFeedback(messageId, messageContent, targetFeedback).catch((err) => {
       setChatMessages(oldMessages);
-      setError((err == null ? void 0 : err.message) || TRANSLATIONS.feedbackError);
+      setError((err == null ? void 0 : err.message) || t().feedbackError);
     });
   }
   function canShowFeedback(message) {
@@ -1820,7 +1902,7 @@ function ShopPrompter(props) {
               ) : null,
               (agentExperience == null ? void 0 : agentExperience.agentName) ? /* @__PURE__ */ jsx4("span", { style: styles2.headerText, children: agentExperience.agentName }) : null
             ] }) : /* @__PURE__ */ jsx4(Fragment2, { children: /* @__PURE__ */ jsx4("div", { style: styles2.subHeaderContainer }) }),
-            !hasToken() && ((_a = apiConfigObj == null ? void 0 : apiConfigObj()) == null ? void 0 : _a.apiKey) ? /* @__PURE__ */ jsx4("div", { style: styles2.warningBanner, children: "API Key is only for development purposes" }) : null,
+            !hasToken() && ((_a = apiConfigObj == null ? void 0 : apiConfigObj()) == null ? void 0 : _a.apiKey) ? /* @__PURE__ */ jsx4("div", { style: styles2.warningBanner, children: t().apiKeyWarning }) : null,
             /* @__PURE__ */ jsxs4("div", { style: styles2.subHeaderContainer, children: [
               /* @__PURE__ */ jsx4(
                 "button",
@@ -1828,7 +1910,7 @@ function ShopPrompter(props) {
                   className: "sh-header-btn",
                   onClick: (e) => handleNewChat(),
                   style: styles2.headerButton,
-                  children: TRANSLATIONS.newChat
+                  children: t().newChat
                 }
               ),
               props.chatPosition === "classic-chatbot" || props.chatPosition === "right-panel" || props.chatPosition === "dialog" ? /* @__PURE__ */ jsx4(
@@ -1871,7 +1953,7 @@ function ShopPrompter(props) {
               ...styles2.insufficientConfigTitle,
               fontFamily: themeObj().fontFamily || void 0
             },
-            children: "Configuration Error"
+            children: t().configErrorTitle
           }
         ),
         /* @__PURE__ */ jsx4(
@@ -1881,7 +1963,7 @@ function ShopPrompter(props) {
               ...styles2.insufficientConfigMessage,
               fontFamily: themeObj().fontFamily || void 0
             },
-            children: "ShopPrompter requires a secure token or API key to initialize. Please check your setup."
+            children: t().configErrorMessage
           }
         ),
         /* @__PURE__ */ jsxs4(
@@ -1899,7 +1981,7 @@ function ShopPrompter(props) {
                     fontWeight: 600,
                     marginBottom: "0.25rem"
                   },
-                  children: "Missing Parameters:"
+                  children: t().configMissingParams
                 }
               ),
               /* @__PURE__ */ jsxs4(
@@ -1919,7 +2001,7 @@ function ShopPrompter(props) {
                         style: {
                           color: "#ef4444"
                         },
-                        children: "\u2717 shopPrompterToken (not found)"
+                        children: t().configMissingToken
                       }
                     ),
                     /* @__PURE__ */ jsx4(
@@ -1928,7 +2010,7 @@ function ShopPrompter(props) {
                         style: {
                           color: "#ef4444"
                         },
-                        children: "\u2717 apiConfig.apiKey (not found)"
+                        children: t().configMissingApiKey
                       }
                     )
                   ]
@@ -1964,8 +2046,8 @@ function ShopPrompter(props) {
                         alt: "ShopPrompter",
                         src: (agentExperience == null ? void 0 : agentExperience.agentLogoUrl) ? agentExperience.agentLogoUrl : ICONS.shopprompter,
                         style: {
-                          width: "64px",
-                          height: "64px",
+                          width: "96px",
+                          height: "96px",
                           marginBottom: "24px",
                           borderRadius: "12px",
                           objectFit: "cover"
@@ -1979,7 +2061,9 @@ function ShopPrompter(props) {
                           ...styles2.welcomeTitle,
                           fontFamily: themeObj().fontFamily || styles2.welcomeTitle.fontFamily
                         },
-                        children: ((_b = agentExperience == null ? void 0 : agentExperience.greeting) == null ? void 0 : _b.title) || TRANSLATIONS.welcomeToShopPrompter
+                        dangerouslySetInnerHTML: {
+                          __html: ((_b = agentExperience == null ? void 0 : agentExperience.greeting) == null ? void 0 : _b.title) || t().welcomeToShopPrompter
+                        }
                       }
                     ),
                     /* @__PURE__ */ jsx4(
@@ -1989,13 +2073,19 @@ function ShopPrompter(props) {
                           ...styles2.welcomeDescription,
                           fontFamily: themeObj().fontFamily || styles2.welcomeDescription.fontFamily
                         },
-                        children: ((_c = agentExperience == null ? void 0 : agentExperience.greeting) == null ? void 0 : _c.description) || TRANSLATIONS.welcomeDescription
+                        dangerouslySetInnerHTML: {
+                          __html: ((_c = agentExperience == null ? void 0 : agentExperience.greeting) == null ? void 0 : _c.message) || t().welcomeDescription
+                        }
                       }
                     ),
                     /* @__PURE__ */ jsx4("div", { style: styles2.buttonContainer, children: (_d = prompts()) == null ? void 0 : _d.map((item) => /* @__PURE__ */ jsx4(
                       "button",
                       {
-                        style: styles2.button,
+                        style: {
+                          ...styles2.button,
+                          borderColor: themeObj().actionColor || "#e5e7eb",
+                          outlineColor: themeObj().actionColor || void 0
+                        },
                         onClick: (event) => {
                           setInput(item.prompt);
                           handleSend(item.prompt);
@@ -2003,7 +2093,17 @@ function ShopPrompter(props) {
                         children: item.prompt
                       },
                       item.prompt
-                    )) })
+                    )) }),
+                    requireClickOnPredefinedPromptVal() && prompts().length > 0 ? /* @__PURE__ */ jsx4(
+                      "div",
+                      {
+                        style: {
+                          ...styles2.predefinedPromptDisclaimer,
+                          fontFamily: themeObj().fontFamily || void 0
+                        },
+                        children: t().predefinedPromptDisclaimer
+                      }
+                    ) : null
                   ] }) : null,
                   !showWelcome() ? /* @__PURE__ */ jsx4(
                     "div",
@@ -2129,7 +2229,7 @@ function ShopPrompter(props) {
                             product_card_list_component_default,
                             {
                               skus: message.productSkus,
-                              defaultLocale: props.defaultLocale,
+                              defaultLocale: props.defaultLocale || DEFAULT_LOCALE,
                               showPriceIfEmpty: showPriceIfEmptyVal(),
                               visibleFields: visibleFieldsList()
                             }
@@ -2138,19 +2238,20 @@ function ShopPrompter(props) {
                       ] }, message.id))
                     }
                   ) : null,
-                  error ? /* @__PURE__ */ jsxs4("div", { style: styles2.errorContainer, children: [
-                    "Error: ",
-                    error
-                  ] }) : null
+                  error ? /* @__PURE__ */ jsx4("div", { style: styles2.errorContainer, children: error }) : null
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs4(
+            !shouldHideInput() ? /* @__PURE__ */ jsxs4(
               "div",
               {
                 style: {
                   ...styles2.inputSection,
-                  backgroundColor: themeObj().mainBackgroundColor || styles2.inputSection.backgroundColor
+                  backgroundColor: themeObj().mainBackgroundColor || styles2.inputSection.backgroundColor,
+                  ...error ? {
+                    opacity: "0.5",
+                    pointerEvents: "none"
+                  } : {}
                 },
                 children: [
                   /* @__PURE__ */ jsxs4("div", { style: styles2.inputWrapper, children: [
@@ -2160,10 +2261,11 @@ function ShopPrompter(props) {
                         id: "shop-prompter-input",
                         type: "text",
                         style: styles2.input,
-                        placeholder: (agentExperience == null ? void 0 : agentExperience.hintText) || TRANSLATIONS.askMeAnything,
+                        placeholder: (agentExperience == null ? void 0 : agentExperience.hintText) || t().askMeAnything,
                         value: input,
                         onInput: (e) => onInputChange(e),
-                        onKeyDown: (e) => onInputKeyDown(e)
+                        onKeyDown: (e) => onInputKeyDown(e),
+                        disabled: !!error
                       }
                     ),
                     /* @__PURE__ */ jsx4(
@@ -2188,10 +2290,10 @@ function ShopPrompter(props) {
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ jsx4("p", { style: styles2.disclaimer, children: "AI content may be inaccurate." })
+                  /* @__PURE__ */ jsx4("p", { style: styles2.disclaimer, children: t().disclaimer })
                 ]
               }
-            )
+            ) : null
           ]
         }
       ) : null

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shop-prompter/react",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",

package/src/product-card-list.component.jsx

@@ -2,6 +2,7 @@
 import * as React from "react";
 import { useState, useEffect } from "react";
 import { productApi } from "./api/product-api";
+import { getTranslations } from "./translations";
 const styles = {
   productCardsContainer: {
     marginTop: "0.75rem",
@@ -91,6 +92,14 @@ const styles = {
     boxSizing: "border-box",
     overflow: "hidden",
   },
+  errorContainer: {
+    padding: "0.75rem",
+    backgroundColor: "#fef2f2",
+    border: "1px solid #fecaca",
+    color: "#dc2626",
+    fontSize: "0.75rem",
+    borderRadius: "0.5rem",
+  },
 };
 
 function ProductCardList(props) {
@@ -100,6 +109,10 @@ function ProductCardList(props) {
 
   const [error, setError] = useState(() => null);
 
+  function t() {
+    return getTranslations(props.defaultLocale);
+  }
+
   function fetchProducts() {
     let skusList = props.skus;
     if (typeof skusList === "string") {
@@ -129,13 +142,13 @@ function ProductCardList(props) {
       })
       .catch((err) => {
         console.error("Failed to fetch products:", err);
-        setError(err?.message || "Failed to load products");
+        setError(t().productFetchError);
         setLoading(false);
       });
   }
 
   function getProductName(product) {
-    const locale = props.defaultLocale || "de";
+    const locale = props.defaultLocale;
     const localized =
       product.localization?.[locale] ||
       Object.values(product.localization || {})[0];
@@ -166,7 +179,7 @@ function ProductCardList(props) {
   }
 
   function getDynamicField(product, field) {
-    const locale = props.defaultLocale || "de";
+    const locale = props.defaultLocale;
     const localized =
       product.localization?.[locale] ||
       Object.values(product.localization || {})[0];
@@ -215,13 +228,11 @@ function ProductCardList(props) {
           <div style={styles.wrapper}>
             {loading ? (
               <div style={styles.statusContainer}>
-                <span>Loading products...</span>
+                <span>{t().loadingProducts}</span>
               </div>
             ) : null}
             {!loading && error ? (
-              <div style={styles.statusContainer}>
-                <span style={styles.errorText}>Error: {error}</span>
-              </div>
+              <div style={styles.errorContainer}>{t().productFetchError}</div>
             ) : null}
             {!loading && products && products.length > 0 ? (
               <div style={styles.productCardsContainer}>