@shop-prompter/react 1.1.0 → 1.2.0

package/src/shop-prompter.component.jsx

@@ -3,6 +3,7 @@ import * as React from "react";
 import { useState, useEffect } from "react";
 import { marked } from "marked";
 import { ShopPrompterService } from "./shop-prompter.service";
+import { getTranslations, DEFAULT_LOCALE } from "./translations";
 import ThumbsUpIcon from "./thumbs-up-icon.component";
 import ThumbsDownIcon from "./thumbs-down-icon.component";
 import ProductCardList from "./product-card-list.component";
@@ -84,7 +85,7 @@ const styles = {
     fontFamily: 'var(--font-space-grotesk), "Space Grotesk", sans-serif',
     fontWeight: 500,
     fontStyle: "Medium",
-    fontSize: "32px",
+    fontSize: "28px",
     leadingTrim: "NONE",
     lineHeight: "100%",
     letterSpacing: "0%",
@@ -92,7 +93,7 @@ const styles = {
   },
   welcomeDescription: {
     color: "#4b5563",
-    maxWidth: "20rem",
+    maxWidth: "32rem",
     fontFamily: 'var(--font-space-grotesk), "Space Grotesk", sans-serif',
     fontWeight: 400,
     fontStyle: "Regular",
@@ -107,7 +108,7 @@ const styles = {
     display: "flex",
     flexWrap: "wrap",
     justifyContent: "center",
-    gap: "0.5rem",
+    gap: "1rem",
   },
   messageContainerUser: {
     display: "flex",
@@ -252,6 +253,13 @@ const styles = {
     textAlign: "center",
     marginTop: "0.75rem",
   },
+  predefinedPromptDisclaimer: {
+    fontSize: "0.75rem",
+    color: "#6b7280",
+    textAlign: "center",
+    marginTop: "2rem",
+    width: "100%",
+  },
   backdrop: {
     position: "fixed",
     top: 0,
@@ -407,16 +415,6 @@ const ANIMATION_STYLES = `
       border-color: #d1d5db !important;
     }
   `;
-const 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.",
-};
 const ICONS = {
   chat: "https://cdn.jsdelivr.net/gh/lucide-icons/lucide@latest/icons/message-square.svg",
   shopprompter:
@@ -454,6 +452,23 @@ function ShopPrompter(props) {
     () => ""
   );
 
+  function t() {
+    return getTranslations(props.defaultLocale);
+  }
+
+  function requireClickOnPredefinedPromptVal() {
+    const flag = props.requireClickOnPredefinedPrompt;
+    return typeof flag === "string" ? flag !== "false" : 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() {
     const token =
       props.shopPrompterToken || apiConfigObj?.()?.shopPrompterToken;
@@ -635,7 +650,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) {
@@ -794,6 +815,10 @@ function ShopPrompter(props) {
         return;
       }
       const response = await service?.getAgentExperience();
+      if (!response) {
+        setError(t().agentExperienceError);
+        return;
+      }
       setAgentExperience(response);
     })();
   }
@@ -824,7 +849,7 @@ function ShopPrompter(props) {
       .catch((err) => {
         // Revert optimistic update
         setChatMessages(oldMessages);
-        setError(err?.message || TRANSLATIONS.feedbackError);
+        setError(err?.message || t().feedbackError);
       });
   }
 
@@ -996,9 +1021,7 @@ function ShopPrompter(props) {
               </>
             )}
             {!hasToken() && apiConfigObj?.()?.apiKey ? (
-              <div style={styles.warningBanner}>
-                API Key is only for development purposes
-              </div>
+              <div style={styles.warningBanner}>{t().apiKeyWarning}</div>
             ) : null}
             <div style={styles.subHeaderContainer}>
               <button
@@ -1006,7 +1029,7 @@ function ShopPrompter(props) {
                 onClick={(e) => handleNewChat()}
                 style={styles.headerButton}
               >
-                {TRANSLATIONS.newChat}
+                {t().newChat}
               </button>
               {props.chatPosition === "classic-chatbot" ||
               props.chatPosition === "right-panel" ||
@@ -1046,7 +1069,7 @@ function ShopPrompter(props) {
                   fontFamily: themeObj().fontFamily || undefined,
                 }}
               >
-                Configuration Error
+                {t().configErrorTitle}
               </h3>
               <p
                 style={{
@@ -1054,8 +1077,7 @@ function ShopPrompter(props) {
                   fontFamily: themeObj().fontFamily || undefined,
                 }}
               >
-                ShopPrompter requires a secure token or API key to initialize.
-                Please check your setup.
+                {t().configErrorMessage}
               </p>
               <div
                 style={{
@@ -1069,7 +1091,7 @@ function ShopPrompter(props) {
                     marginBottom: "0.25rem",
                   }}
                 >
-                  Missing Parameters:
+                  {t().configMissingParams}
                 </div>
                 <div
                   style={{
@@ -1085,14 +1107,14 @@ function ShopPrompter(props) {
                       color: "#ef4444",
                     }}
                   >
-                    ✗ shopPrompterToken (not found)
+                    {t().configMissingToken}
                   </span>
                   <span
                     style={{
                       color: "#ef4444",
                     }}
                   >
-                    ✗ apiConfig.apiKey (not found)
+                    {t().configMissingApiKey}
                   </span>
                 </div>
               </div>
@@ -1126,8 +1148,8 @@ function ShopPrompter(props) {
                           : ICONS.shopprompter
                       }
                       style={{
-                        width: "64px",
-                        height: "64px",
+                        width: "96px",
+                        height: "96px",
                         marginBottom: "24px",
                         borderRadius: "12px",
                         objectFit: "cover",
@@ -1140,10 +1162,12 @@ function ShopPrompter(props) {
                           themeObj().fontFamily ||
                           styles.welcomeTitle.fontFamily,
                       }}
-                    >
-                      {agentExperience?.greeting?.title ||
-                        TRANSLATIONS.welcomeToShopPrompter}
-                    </h3>
+                      dangerouslySetInnerHTML={{
+                        __html:
+                          agentExperience?.greeting?.title ||
+                          t().welcomeToShopPrompter,
+                      }}
+                    />
                     <p
                       style={{
                         ...styles.welcomeDescription,
@@ -1151,15 +1175,21 @@ function ShopPrompter(props) {
                           themeObj().fontFamily ||
                           styles.welcomeDescription.fontFamily,
                       }}
-                    >
-                      {agentExperience?.greeting?.description ||
-                        TRANSLATIONS.welcomeDescription}
-                    </p>
+                      dangerouslySetInnerHTML={{
+                        __html:
+                          agentExperience?.greeting?.message ||
+                          t().welcomeDescription,
+                      }}
+                    />
                     <div style={styles.buttonContainer}>
                       {prompts()?.map((item) => (
                         <button
                           key={item.prompt}
-                          style={styles.button}
+                          style={{
+                            ...styles.button,
+                            borderColor: themeObj().actionColor || "#e5e7eb",
+                            outlineColor: themeObj().actionColor || undefined,
+                          }}
                           onClick={(event) => {
                             setInput(item.prompt);
                             handleSend(item.prompt);
@@ -1169,6 +1199,17 @@ function ShopPrompter(props) {
                         </button>
                       ))}
                     </div>
+                    {requireClickOnPredefinedPromptVal() &&
+                    prompts().length > 0 ? (
+                      <div
+                        style={{
+                          ...styles.predefinedPromptDisclaimer,
+                          fontFamily: themeObj().fontFamily || undefined,
+                        }}
+                      >
+                        {t().predefinedPromptDisclaimer}
+                      </div>
+                    ) : null}
                   </div>
                 ) : null}
                 {!showWelcome() ? (
@@ -1307,7 +1348,9 @@ function ShopPrompter(props) {
                             {getShowProducts(message) ? (
                               <ProductCardList
                                 skus={message.productSkus}
-                                defaultLocale={props.defaultLocale}
+                                defaultLocale={
+                                  props.defaultLocale || DEFAULT_LOCALE
+                                }
                                 showPriceIfEmpty={showPriceIfEmptyVal()}
                                 visibleFields={visibleFieldsList()}
                               />
@@ -1319,50 +1362,59 @@ function ShopPrompter(props) {
                   </div>
                 ) : null}
                 {error ? (
-                  <div style={styles.errorContainer}>Error: {error}</div>
+                  <div style={styles.errorContainer}>{error}</div>
                 ) : null}
               </div>
-              <div
-                style={{
-                  ...styles.inputSection,
-                  backgroundColor:
-                    themeObj().mainBackgroundColor ||
-                    styles.inputSection.backgroundColor,
-                }}
-              >
-                <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}
+              {!shouldHideInput() ? (
+                <div
+                  style={{
+                    ...styles.inputSection,
+                    backgroundColor:
+                      themeObj().mainBackgroundColor ||
+                      styles.inputSection.backgroundColor,
+                    ...(error
+                      ? {
+                          opacity: "0.5",
+                          pointerEvents: "none",
+                        }
+                      : {}),
+                  }}
+                >
+                  <div style={styles.inputWrapper}>
+                    <input
+                      id="shop-prompter-input"
+                      type="text"
+                      style={styles.input}
+                      placeholder={
+                        agentExperience?.hintText || t().askMeAnything
+                      }
+                      value={input}
+                      onInput={(e) => onInputChange(e)}
+                      onKeyDown={(e) => onInputKeyDown(e)}
+                      disabled={!!error}
+                    />
+                    <button
+                      onClick={(e) => handleSend()}
                       style={{
-                        padding: "4px",
+                        ...styles.formButton,
+                        ...styles.sendButton,
+                        backgroundColor:
+                          themeObj().actionColor ||
+                          styles.sendButton.backgroundColor,
                       }}
-                    />
-                  </button>
+                    >
+                      <img
+                        alt="Send"
+                        src={ICONS.sendHorizontal}
+                        style={{
+                          padding: "4px",
+                        }}
+                      />
+                    </button>
+                  </div>
+                  <p style={styles.disclaimer}>{t().disclaimer}</p>
                 </div>
-                <p style={styles.disclaimer}>AI content may be inaccurate.</p>
-              </div>
+              ) : null}
             </div>
           ) : null}
         </div>

package/src/translations.ts

@@ -0,0 +1,53 @@
+export const DEFAULT_LOCALE = 'en'
+
+export const TRANSLATIONS: Record<string, Record<string, string>> = {
+  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‚. 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önlicher KI-Einkaufsassistent. Fragen Sie mich alles über was Sie wissen möchten!',
+    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äter erneut.',
+    guestLimitReached: 'Es tut uns leid, der Chat steht für Gastbenutzer nicht mehr zur Verfügung. 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ür Entwicklungszwecke',
+    configErrorTitle: 'Konfigurationsfehler',
+    configErrorMessage: 'Die Initialsierung benötigt gewisse Parameter, die nicht vorhanden sind. Bitte überprüfen Sie Ihre Einrichtung.',
+    configMissingParams: 'Fehlende Parameter:',
+    configMissingToken: '- Gültiger Token (nicht gefunden)',
+    configMissingApiKey: '- API Key (nicht gefunden)',
+    disclaimer: 'KI-Inhalte können 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',
+  },
+}
+
+export function getTranslations(locale?: string): Record<string, string> {
+  const resolved = locale || DEFAULT_LOCALE
+  return TRANSLATIONS[resolved] || TRANSLATIONS[DEFAULT_LOCALE]
+}