@shop-prompter/react 0.1.1

package/dist/index.mjs

@@ -0,0 +1,1144 @@
+// src/shop-prompter.component.jsx
+import * as React from "react";
+import { useState, useEffect } from "react";
+
+// src/api/shop-prompter-api.ts
+var DefaultShopPrompterApi = class {
+  constructor() {
+    this.config = null;
+  }
+  setApiConfig(config) {
+    this.config = config;
+  }
+  async execute(prompt, userId, sessionId) {
+    if (!this.config) {
+      throw new Error("API configuration not set. Call setApiConfig first.");
+    }
+    const response = await fetch(`${this.config.baseUrl}/interaction`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-Api-Key": this.config.apiKey
+      },
+      body: JSON.stringify({
+        prompt,
+        userId,
+        sessionId
+      })
+    });
+    if (!response.ok) {
+      throw new Error(`API error: ${response.status}`);
+    }
+    return response.json();
+  }
+  async executeStream(prompt, userId, sessionId, onEvent, cartContext) {
+    var _a;
+    if (!this.config) {
+      throw new Error("API configuration not set. Call setApiConfig first.");
+    }
+    const url = `${this.config.baseUrl}/interaction/stream`;
+    console.log("ShopPrompter Request:", {
+      url,
+      prompt,
+      userId,
+      sessionId,
+      cartContext
+    });
+    let response;
+    try {
+      response = await fetch(url, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "X-Api-Key": this.config.apiKey,
+          Accept: "text/event-stream",
+          "Cache-Control": "no-cache"
+        },
+        body: JSON.stringify({
+          prompt,
+          userId,
+          sessionId,
+          cart: cartContext
+        })
+      });
+    } catch (fetchError) {
+      console.error("ShopPrompter Fetch Error:", fetchError);
+      onEvent({
+        type: "error",
+        reason: `Failed to fetch: ${fetchError instanceof Error ? fetchError.message : "Network error"}`
+      });
+      return;
+    }
+    console.log("ShopPrompter Response:", response.status);
+    if (!response.ok) {
+      const errorText = await response.text().catch(() => "");
+      console.error("ShopPrompter API Error:", response.status, errorText);
+      onEvent({
+        type: "error",
+        reason: `API error: ${response.status} - ${errorText}`
+      });
+      return;
+    }
+    const reader = (_a = response.body) == null ? void 0 : _a.getReader();
+    if (!reader) {
+      onEvent({ type: "error", reason: "No response body" });
+      return;
+    }
+    const decoder = new TextDecoder();
+    let buffer = "";
+    try {
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) {
+          console.log("ShopPrompter Stream done");
+          onEvent({ type: "close" });
+          break;
+        }
+        const chunk = decoder.decode(value, { stream: true });
+        console.log("ShopPrompter Raw chunk:", chunk);
+        buffer += chunk;
+        const lines = buffer.split("\n");
+        buffer = lines.pop() || "";
+        let currentEventType = "";
+        for (const line of lines) {
+          console.log("ShopPrompter Line:", line);
+          if (line.startsWith("event:")) {
+            currentEventType = line.slice(6).trim();
+            console.log("ShopPrompter Event type:", currentEventType);
+            if (currentEventType === "error") {
+              onEvent({
+                type: "error",
+                reason: "Server returned an error event. Check backend configuration."
+              });
+            }
+          } else if (line.startsWith("data:")) {
+            const data = line.slice(5).trim();
+            console.log("ShopPrompter Data:", data);
+            if (data) {
+              if (currentEventType === "error") {
+                try {
+                  const errorData = JSON.parse(data);
+                  onEvent({
+                    type: "error",
+                    reason: errorData.message || errorData.error || "Unknown server error"
+                  });
+                } catch {
+                  onEvent({
+                    type: "error",
+                    reason: data || "Unknown server error"
+                  });
+                }
+              } else {
+                const event = this.parseEvent(data);
+                console.log("ShopPrompter Parsed event:", event);
+                if (event) {
+                  onEvent(event);
+                }
+              }
+            }
+            currentEventType = "";
+          }
+        }
+      }
+    } catch (error) {
+      console.error("ShopPrompter Stream error:", error);
+      onEvent({
+        type: "error",
+        reason: error instanceof Error ? error.message : "Unknown error"
+      });
+    }
+  }
+  async getAgentExperience() {
+    if (!this.config) {
+      console.warn("API configuration not set. Call setApiConfig first.");
+      return null;
+    }
+    try {
+      const response = await fetch(`${this.config.baseUrl}/agent-experience`, {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+          "X-Api-Key": this.config.apiKey
+        }
+      });
+      if (!response.ok) {
+        console.error(`Failed to fetch agent experience: ${response.status}`);
+        return null;
+      }
+      const data = await response.json();
+      console.log(
+        "## ~ DefaultShopPrompterApi ~ getAgentExperience ~ data:",
+        data
+      );
+      return data;
+    } catch (error) {
+      console.error("Error fetching agent experience:", error);
+      return null;
+    }
+  }
+  parseEvent(data) {
+    try {
+      const json = JSON.parse(data);
+      if (json.token !== void 0) {
+        if (json.token === "close") {
+          return { type: "close" };
+        }
+        return {
+          type: "text",
+          text: json.token
+        };
+      }
+      if (json.text !== void 0) {
+        return {
+          type: "text",
+          text: json.text
+        };
+      }
+      if (json.skus !== void 0) {
+        return {
+          type: "productSkus",
+          skus: json.skus
+        };
+      }
+      if (json.products !== void 0 && Array.isArray(json.products)) {
+        const skus = json.products.map((p) => p.sku).filter(Boolean);
+        if (skus.length > 0) {
+          return {
+            type: "productSkus",
+            skus
+          };
+        }
+      }
+      if (json.productSkus !== void 0) {
+        return {
+          type: "productSkus",
+          skus: json.productSkus
+        };
+      }
+      if (json.output !== void 0 && Array.isArray(json.output)) {
+        for (const item of json.output) {
+          if (item.type === "product" && item.data && Array.isArray(item.data)) {
+            const skus = item.data.filter((p) => p !== null).map((p) => typeof p === "string" ? p : p == null ? void 0 : p.sku).filter(Boolean);
+            if (skus.length > 0) {
+              return {
+                type: "productSkus",
+                skus
+              };
+            }
+          }
+          if (item.type === "product" && item.skus && Array.isArray(item.skus)) {
+            return {
+              type: "productSkus",
+              skus: item.skus
+            };
+          }
+        }
+      }
+      if (json.navigation !== void 0) {
+        return {
+          type: "navigation",
+          navigationOperations: json.navigation.map((nav) => ({
+            name: nav.name,
+            route: nav.path || nav.route,
+            description: nav.description
+          }))
+        };
+      }
+      if (json.cart !== void 0) {
+        return {
+          type: "cart",
+          operations: json.cart.map((op) => ({
+            sku: op.sku,
+            action: op.action,
+            quantity: op.quantity || 1
+          }))
+        };
+      }
+      if (json.output !== void 0 && Array.isArray(json.output)) {
+        for (const item of json.output) {
+          if (item.type === "cart" && item.data) {
+            return {
+              type: "cart",
+              operations: (Array.isArray(item.data) ? item.data : [item.data]).map((op) => ({
+                sku: op.sku,
+                action: op.action || "add",
+                quantity: op.quantity || 1
+              }))
+            };
+          }
+        }
+      }
+      if (json.close !== void 0 || json.type === "close") {
+        return { type: "close" };
+      }
+      return null;
+    } catch {
+      if (data && typeof data === "string") {
+        return {
+          type: "text",
+          text: data
+        };
+      }
+      return null;
+    }
+  }
+};
+var shopPrompterApi = new DefaultShopPrompterApi();
+
+// src/api/session-handler.ts
+import { v4 as uuidv4 } from "uuid";
+var SESSION_KEY = "shopprompter_sessionId";
+var USER_KEY = "shopprompter_userId";
+var DefaultSessionHandler = class {
+  constructor() {
+    this.sessionId = "";
+    this.userId = "";
+  }
+  initialize(userIdentifier) {
+    this.userId = userIdentifier || this.getPersistedUserId() || uuidv4();
+    this.persistUserId(this.userId);
+    this.sessionId = this.getPersistedSessionId() || this.userId;
+    this.persistSessionId(this.sessionId);
+  }
+  regenerate() {
+    this.sessionId = uuidv4();
+    this.persistSessionId(this.sessionId);
+  }
+  getSessionId() {
+    if (!this.sessionId) {
+      this.initialize();
+    }
+    return this.sessionId;
+  }
+  getUserId() {
+    if (!this.userId) {
+      this.initialize();
+    }
+    return this.userId;
+  }
+  getPersistedSessionId() {
+    try {
+      return localStorage.getItem(SESSION_KEY);
+    } catch {
+      return null;
+    }
+  }
+  persistSessionId(sessionId) {
+    try {
+      localStorage.setItem(SESSION_KEY, sessionId);
+    } catch {
+    }
+  }
+  getPersistedUserId() {
+    try {
+      return localStorage.getItem(USER_KEY);
+    } catch {
+      return null;
+    }
+  }
+  persistUserId(userId) {
+    try {
+      localStorage.setItem(USER_KEY, userId);
+    } catch {
+    }
+  }
+};
+var sessionHandler = new DefaultSessionHandler();
+
+// src/shop-prompter.service.ts
+var SHOP_PROMPTER_CONFIG = {
+  baseUrl: "https://demo.dev.shop-prompter.com/touch-points-api",
+  apiKey: "864c87266ef52c079c09b3248d86b4b5ef430bf9e5a4188476124c93ee2f6dda380f337986837b30b60f73e6aceefe7a0e0f778b3d21a7fa7698cf8546afc709"
+};
+var ShopPrompterService = class {
+  constructor() {
+    this.isLoading = false;
+    this.error = null;
+    this.streamingText = "";
+    shopPrompterApi.setApiConfig(SHOP_PROMPTER_CONFIG);
+    sessionHandler.initialize();
+  }
+  async sendMessage(prompt, callbacks, cartContext) {
+    var _a, _b, _c;
+    this.isLoading = true;
+    (_a = callbacks.onLoadingChange) == null ? void 0 : _a.call(callbacks, true);
+    this.error = null;
+    this.streamingText = "";
+    const userId = sessionHandler.getUserId();
+    const sessionId = sessionHandler.getSessionId();
+    let accumulatedText = "";
+    try {
+      await shopPrompterApi.executeStream(
+        prompt,
+        userId,
+        sessionId,
+        (event) => {
+          var _a2, _b2, _c2, _d, _e, _f, _g;
+          switch (event.type) {
+            case "text":
+              accumulatedText += event.text;
+              this.streamingText = accumulatedText;
+              (_a2 = callbacks.onTextUpdate) == null ? void 0 : _a2.call(callbacks, accumulatedText);
+              break;
+            case "productSkus":
+              (_b2 = callbacks.onProductSkus) == null ? void 0 : _b2.call(callbacks, event.skus);
+              break;
+            case "navigation":
+              console.log("Navigation event:", event.navigationOperations);
+              break;
+            case "cart":
+              (_c2 = callbacks.onCartOperation) == null ? void 0 : _c2.call(callbacks, event.operations);
+              break;
+            case "close":
+              this.isLoading = false;
+              (_d = callbacks.onLoadingChange) == null ? void 0 : _d.call(callbacks, false);
+              (_e = callbacks.onComplete) == null ? void 0 : _e.call(callbacks);
+              break;
+            case "error":
+              this.error = event.reason;
+              this.isLoading = false;
+              (_f = callbacks.onLoadingChange) == null ? void 0 : _f.call(callbacks, false);
+              (_g = callbacks.onError) == null ? void 0 : _g.call(callbacks, event.reason);
+              break;
+          }
+        },
+        cartContext
+      );
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : "Unknown error";
+      this.error = errorMessage;
+      this.isLoading = false;
+      (_b = callbacks.onLoadingChange) == null ? void 0 : _b.call(callbacks, false);
+      (_c = callbacks.onError) == null ? void 0 : _c.call(callbacks, errorMessage);
+    }
+    return accumulatedText;
+  }
+  async getAgentExperience() {
+    console.log(
+      "## ~ ShopPrompterService ~ getAgentExperience ~ getAgentExperience:"
+    );
+    try {
+      return await shopPrompterApi.getAgentExperience();
+    } catch (err) {
+      console.error("Failed to fetch agent experience:", err);
+      throw err;
+    }
+  }
+  resetSession() {
+    sessionHandler.regenerate();
+  }
+  getStatus() {
+    return {
+      isLoading: this.isLoading,
+      error: this.error,
+      streamingText: this.streamingText
+    };
+  }
+};
+
+// src/shop-prompter.component.jsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var styles = {
+  header: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "16px"
+  },
+  subHeaderContainer: {
+    display: "flex",
+    alignItems: "center",
+    gap: "0.5rem"
+  },
+  headerButton: {
+    fontSize: "0.75rem",
+    color: "#71717a",
+    padding: "0.25rem 0.5rem",
+    borderRadius: "0.25rem",
+    backgroundColor: "transparent",
+    border: "none",
+    cursor: "pointer",
+    transition: "background-color 0.2s, color 0.2s",
+    onHover: {
+      backgroundColor: "hsl(220 14% 96%)",
+      color: "hsl(220 13% 13%)"
+    }
+  },
+  headerText: {
+    color: "hsl(220 13% 13%)",
+    fontWeight: 600
+  },
+  button: {
+    padding: "0.625rem 1rem",
+    border: "1px solid #e5e7eb",
+    borderRadius: "0.75rem",
+    backgroundColor: "transparent",
+    transition: "background-color 0.2s, color 0.2s",
+    display: "flex",
+    alignItems: "center",
+    gap: "0.5rem",
+    cursor: "pointer",
+    fontSize: "0.875rem",
+    color: "#09090b"
+  },
+  ButtonSheetButton: {
+    color: "#6b7280",
+    backgroundColor: "transparent",
+    border: "none",
+    cursor: "pointer",
+    padding: "0.25rem",
+    fontSize: "1.25rem",
+    transition: "color 0.2s"
+  },
+  chatContainer: {
+    flex: 1,
+    overflowY: "auto",
+    padding: "1rem",
+    backgroundColor: "white"
+  },
+  welcomeContainer: {
+    textAlign: "center",
+    paddingTop: "3rem",
+    paddingBottom: "3rem",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center"
+  },
+  welcomeTitle: {
+    color: "#111827",
+    marginBottom: "0.5rem",
+    fontFamily: 'var(--font-space-grotesk), "Space Grotesk", sans-serif',
+    fontWeight: 500,
+    fontStyle: "Medium",
+    fontSize: "32px",
+    leadingTrim: "NONE",
+    lineHeight: "100%",
+    letterSpacing: "0%",
+    textAlign: "center"
+  },
+  welcomeDescription: {
+    color: "#4b5563",
+    maxWidth: "20rem",
+    fontFamily: 'var(--font-space-grotesk), "Space Grotesk", sans-serif',
+    fontWeight: 400,
+    fontStyle: "Regular",
+    fontSize: "16px",
+    leadingTrim: "NONE",
+    lineHeight: "100%",
+    letterSpacing: "0%",
+    textAlign: "center"
+  },
+  buttonContainer: {
+    marginTop: "2rem",
+    display: "flex",
+    flexWrap: "wrap",
+    justifyContent: "center",
+    gap: "0.5rem"
+  },
+  messageContainerUser: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-end"
+  },
+  messageContainerAssistant: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start"
+  },
+  messageBubbleUser: {
+    backgroundColor: "#111827",
+    color: "white",
+    borderRadius: "1rem",
+    borderTopRightRadius: "0",
+    padding: "0.5rem 1rem",
+    fontSize: "0.875rem",
+    boxShadow: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+    maxWidth: "85%"
+  },
+  messageBubbleAssistant: {
+    backgroundColor: "#f3f4f6",
+    color: "#1f2937",
+    borderRadius: "1rem",
+    borderTopLeftRadius: "0",
+    padding: "0.5rem 1rem",
+    fontSize: "0.875rem",
+    boxShadow: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+    maxWidth: "85%"
+  },
+  thinkingIndicator: {
+    display: "flex",
+    alignItems: "center",
+    gap: "0.5rem",
+    fontStyle: "italic",
+    color: "#6b7280"
+  },
+  productCardsContainer: {
+    marginTop: "1rem",
+    display: "flex",
+    gap: "0.75rem",
+    overflowX: "auto",
+    width: "100%",
+    paddingBottom: "0.5rem"
+  },
+  productCard: {
+    minWidth: "8rem",
+    backgroundColor: "white",
+    border: "1px solid #e5e7eb",
+    borderRadius: "0.75rem",
+    overflow: "hidden",
+    boxShadow: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+    display: "flex",
+    flexDirection: "column"
+  },
+  productImageContainer: {
+    height: "6rem",
+    backgroundColor: "#f9fafb",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: "0.5rem"
+  },
+  productInfo: {
+    padding: "0.5rem"
+  },
+  productSku: {
+    fontSize: "0.75rem",
+    fontWeight: 600,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    color: "#111827"
+  },
+  productLink: {
+    fontSize: "0.625rem",
+    color: "#2563eb",
+    fontWeight: "bold",
+    textDecoration: "none"
+  },
+  errorContainer: {
+    padding: "0.75rem",
+    backgroundColor: "#fef2f2",
+    border: "1px solid #fecaca",
+    color: "#dc2626",
+    fontSize: "0.75rem",
+    borderRadius: "0.5rem"
+  },
+  inputSection: {
+    padding: "1rem",
+    borderTop: "1px solid #e5e7eb",
+    backgroundColor: "#f9fafb"
+  },
+  inputWrapper: {
+    display: "flex",
+    alignItems: "center",
+    gap: "0.5rem",
+    backgroundColor: "white",
+    border: "1px solid #d1d5db",
+    borderRadius: "0.75rem",
+    padding: "0.5rem 1rem",
+    transition: "all 0.2s"
+  },
+  input: {
+    flex: 1,
+    backgroundColor: "transparent",
+    border: "none",
+    outline: "none",
+    fontSize: "0.875rem",
+    color: "#111827",
+    padding: "0.25rem 0"
+  },
+  formButton: {
+    backgroundColor: "transparent",
+    color: "white",
+    width: "32px",
+    height: "32px",
+    borderRadius: "0.5rem",
+    padding: 0,
+    fontSize: "0.75rem",
+    fontWeight: "bold",
+    border: "none",
+    cursor: "pointer",
+    transition: "background-color 0.2s"
+  },
+  sendButton: {
+    backgroundColor: "#AD59FF1A"
+  },
+  disclaimer: {
+    fontSize: "0.625rem",
+    color: "#9ca3af",
+    textAlign: "center",
+    marginTop: "0.75rem"
+  }
+};
+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...",
+  showPopularItems: "Show popular items",
+  compareProducts: "Compare products",
+  findByBudget: "Find by budget"
+};
+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",
+  popularitems: "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"
+};
+function ShopPrompter(props) {
+  var _a, _b, _c;
+  const [input, setInput] = useState(() => "");
+  const [isLoading, setIsLoading] = useState(() => false);
+  const [error, setError] = useState(() => null);
+  const [chatMessages, setChatMessages] = useState(() => []);
+  const [showChat, setShowChat] = useState(
+    () => props.chatPosition === "right-panel" || props.chatPosition === "full-page"
+  );
+  const [service, setService] = useState(() => null);
+  const [isHeaderButtonHovered, setIsHeaderButtonHovered] = useState(
+    () => false
+  );
+  const [agentExperience, setAgentExperience] = useState(() => null);
+  function containerStyle() {
+    const pos = props.chatPosition || "classic-chatbot";
+    const isFull = pos === "full-page";
+    const isBottom = pos === "bottom-sheet";
+    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",
+      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)"
+    };
+  }
+  function containerClass() {
+    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";
+    return "sh-full";
+  }
+  function messages() {
+    return chatMessages.map((msg) => ({
+      ...msg,
+      safeProductSkus: msg.productSkus || []
+    }));
+  }
+  function showWelcome() {
+    return chatMessages.length === 0;
+  }
+  function getProductImageUrl(sku) {
+    return "https://placehold.co/100x100?text=" + sku;
+  }
+  function getProductLink(sku) {
+    return "/product/" + sku;
+  }
+  function handleSend() {
+    if (!input.trim() || isLoading) return;
+    const userQuery = input;
+    setInput("");
+    const userMsg = {
+      id: Date.now().toString() + "-user",
+      role: "user",
+      content: userQuery,
+      productSkus: []
+    };
+    setChatMessages([...chatMessages, userMsg]);
+    const assistantMsg = {
+      id: Date.now().toString() + "-assistant",
+      role: "assistant",
+      content: "",
+      productSkus: []
+    };
+    setChatMessages([...chatMessages, assistantMsg]);
+    service == null ? void 0 : service.sendMessage(
+      userQuery,
+      {
+        onTextUpdate: (text) => {
+          const updatedMessages = [...chatMessages];
+          const lastMsg = updatedMessages[updatedMessages.length - 1];
+          if (lastMsg) {
+            lastMsg.content = text;
+            setChatMessages(updatedMessages);
+          }
+        },
+        onProductSkus: (skus) => {
+          const updatedMessages = [...chatMessages];
+          const lastMsg = updatedMessages[updatedMessages.length - 1];
+          if (lastMsg) {
+            lastMsg.productSkus = skus;
+            setChatMessages(updatedMessages);
+          }
+        },
+        onLoadingChange: (loading) => {
+          setIsLoading(loading);
+        },
+        onError: (err) => {
+          setError(err);
+        },
+        onCartOperation: (ops) => {
+          if (props.onCartOperation) {
+            props.onCartOperation(ops);
+          }
+        }
+      },
+      props.cart || []
+    );
+  }
+  function toggleChat() {
+    setShowChat(!showChat);
+    if (!showChat && props.onClose) {
+      props.onClose();
+    }
+  }
+  function handleNewChat() {
+    setChatMessages([]);
+    service == null ? void 0 : service.resetSession();
+  }
+  function onPopularItemsClick() {
+    setInput(TRANSLATIONS.showPopularItems);
+    handleSend();
+  }
+  function onCompareProductsClick() {
+    setInput(TRANSLATIONS.compareProducts);
+    handleSend();
+  }
+  function onInputChange(event) {
+    setInput(event.target.value);
+  }
+  function onInputKeyDown(event) {
+    if (event.key === "Enter") {
+      handleSend();
+    }
+  }
+  function onHeaderButtonMouseEnter() {
+    setIsHeaderButtonHovered(true);
+  }
+  function onHeaderButtonMouseLeave() {
+    setIsHeaderButtonHovered(false);
+  }
+  function doSomethingAsync() {
+    void (async function() {
+      console.log("## ~ ShopPrompter ~ state.service:", service);
+      if (!service) {
+        console.warn("Service not initialized yet");
+        return;
+      }
+      const response = await (service == null ? void 0 : service.getAgentExperience());
+      console.log("## ~ ShopPrompter ~ response:", response);
+      setAgentExperience(response);
+    })();
+  }
+  useEffect(() => {
+    const shopPrompterService = new ShopPrompterService();
+    setService(shopPrompterService);
+  }, []);
+  useEffect(() => {
+    if (service && !agentExperience) {
+      doSomethingAsync();
+    }
+    if (agentExperience) {
+      console.log("## ~ ShopPrompter ~ agentExperience updated:", {
+        greeting: agentExperience.greeting,
+        agentLogoUrl: agentExperience.agentLogoUrl
+      });
+    }
+  }, [service, agentExperience]);
+  return /* @__PURE__ */ jsxs("div", { className: "shopprompter-sdk", children: [
+    props.chatPosition === "classic-chatbot" ? /* @__PURE__ */ jsx(Fragment, { children: !showChat ? /* @__PURE__ */ jsx(
+      "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)"
+        },
+        children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            alt: "Chat",
+            src: ICONS.chat,
+            style: {
+              width: "28px",
+              height: "28px"
+            }
+          }
+        )
+      }
+    ) : null }) : null,
+    showChat ? /* @__PURE__ */ jsxs("div", { style: containerStyle(), className: containerClass(), children: [
+      /* @__PURE__ */ jsxs("div", { style: styles.header, children: [
+        /* @__PURE__ */ jsxs("div", { style: styles.subHeaderContainer, children: [
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              viewBox: "0 0 46 47",
+              width: "24",
+              height: "24",
+              fill: "none",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "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"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "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"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "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"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "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"
+                  }
+                ),
+                /* @__PURE__ */ jsxs("defs", { children: [
+                  /* @__PURE__ */ jsxs(
+                    "linearGradient",
+                    {
+                      id: "a",
+                      x1: "14.3",
+                      x2: "3.322",
+                      y1: "22.494",
+                      y2: "4.382",
+                      gradientUnits: "userSpaceOnUse",
+                      children: [
+                        /* @__PURE__ */ jsx("stop", { stopColor: "#B0145C" }),
+                        /* @__PURE__ */ jsx("stop", { offset: ".37", stopColor: "#AE2E9A" }),
+                        /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#AD59FF" })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "linearGradient",
+                    {
+                      id: "b",
+                      x1: "21.156",
+                      x2: "40.431",
+                      y1: "21.216",
+                      y2: "1.624",
+                      gradientUnits: "userSpaceOnUse",
+                      children: [
+                        /* @__PURE__ */ jsx("stop", { offset: ".08", stopColor: "#E7A2FF" }),
+                        /* @__PURE__ */ jsx("stop", { offset: ".37", stopColor: "#E983CD" }),
+                        /* @__PURE__ */ jsx("stop", { offset: ".99", stopColor: "#F03A58" })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "linearGradient",
+                    {
+                      id: "c",
+                      x1: "30.464",
+                      x2: "46.567",
+                      y1: "27.405",
+                      y2: "42.472",
+                      gradientUnits: "userSpaceOnUse",
+                      children: [
+                        /* @__PURE__ */ jsx("stop", { stopColor: "#B0145C" }),
+                        /* @__PURE__ */ jsx("stop", { offset: ".02", stopColor: "#B11861" }),
+                        /* @__PURE__ */ jsx("stop", { offset: ".27", stopColor: "#C44999" }),
+                        /* @__PURE__ */ jsx("stop", { offset: ".5", stopColor: "#D36FC5" }),
+                        /* @__PURE__ */ jsx("stop", { offset: ".71", stopColor: "#DE8BE4" }),
+                        /* @__PURE__ */ jsx("stop", { offset: ".88", stopColor: "#E49BF8" }),
+                        /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#E7A2FF" })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "linearGradient",
+                    {
+                      id: "d",
+                      x1: "23.356",
+                      x2: "-.618",
+                      y1: "44.082",
+                      y2: "30.739",
+                      gradientUnits: "userSpaceOnUse",
+                      children: [
+                        /* @__PURE__ */ jsx("stop", { stopColor: "#AD59FF" }),
+                        /* @__PURE__ */ jsx("stop", { offset: ".1", stopColor: "#B455EB" }),
+                        /* @__PURE__ */ jsx("stop", { offset: ".54", stopColor: "#D4469C" }),
+                        /* @__PURE__ */ jsx("stop", { offset: ".85", stopColor: "#E83D6B" }),
+                        /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#F03A58" })
+                      ]
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { style: styles.headerText, children: "ShopPrompter\xAE" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: styles.subHeaderContainer, children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: (e) => handleNewChat(),
+              onMouseEnter: (e) => onHeaderButtonMouseEnter(),
+              onMouseLeave: (e) => onHeaderButtonMouseLeave(),
+              style: {
+                ...styles.headerButton,
+                ...isHeaderButtonHovered ? styles.headerButton.onHover : {}
+              },
+              children: TRANSLATIONS.newChat
+            }
+          ),
+          props.chatPosition === "classic-chatbot" || props.chatPosition === "right-panel" || props.chatPosition === "bottom-sheet" ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: (e) => toggleChat(),
+              style: styles.ButtonSheetButton,
+              children: "\xD7"
+            }
+          ) : null
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: styles.chatContainer, children: [
+        showWelcome() ? /* @__PURE__ */ jsxs("div", { style: styles.welcomeContainer, children: [
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              alt: "ShopPrompter",
+              src: (agentExperience == null ? void 0 : agentExperience.agentLogoUrl) ? agentExperience.agentLogoUrl : ICONS.shopprompter,
+              style: {
+                width: "64px",
+                height: "64px",
+                marginBottom: "24px"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx("h3", { style: styles.welcomeTitle, children: ((_a = agentExperience == null ? void 0 : agentExperience.greeting) == null ? void 0 : _a.title) || TRANSLATIONS.welcomeToShopPrompter }),
+          /* @__PURE__ */ jsx("p", { style: styles.welcomeDescription, children: ((_b = agentExperience == null ? void 0 : agentExperience.greeting) == null ? void 0 : _b.description) || TRANSLATIONS.welcomeDescription }),
+          /* @__PURE__ */ jsxs("div", { style: styles.buttonContainer, children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                style: styles.button,
+                onClick: (e) => onPopularItemsClick(),
+                children: TRANSLATIONS.showPopularItems
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                style: styles.button,
+                onClick: (e) => onCompareProductsClick(),
+                children: TRANSLATIONS.compareProducts
+              }
+            )
+          ] })
+        ] }) : /* @__PURE__ */ jsx(Fragment, { children: (_c = messages()) == null ? void 0 : _c.map((message) => {
+          var _a2;
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: message.role === "user" ? styles.messageContainerUser : styles.messageContainerAssistant,
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: message.role === "user" ? styles.messageBubbleUser : styles.messageBubbleAssistant,
+                    children: [
+                      message.content,
+                      !message.content ? /* @__PURE__ */ jsx(Fragment, { children: message.role === "assistant" ? /* @__PURE__ */ jsx(Fragment, { children: isLoading ? /* @__PURE__ */ jsx("div", { style: styles.thinkingIndicator, children: TRANSLATIONS.thinking }) : null }) : null }) : null
+                    ]
+                  }
+                ),
+                message.role === "assistant" ? /* @__PURE__ */ jsx("div", { style: styles.productCardsContainer, children: (_a2 = message.safeProductSkus) == null ? void 0 : _a2.map((sku) => /* @__PURE__ */ jsxs("div", { style: styles.productCard, children: [
+                  /* @__PURE__ */ jsx("div", { style: styles.productImageContainer, children: /* @__PURE__ */ jsx(
+                    "img",
+                    {
+                      src: getProductImageUrl(sku),
+                      alt: sku,
+                      style: {
+                        maxHeight: "100%",
+                        maxWidth: "100%"
+                      }
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxs("div", { style: styles.productInfo, children: [
+                    /* @__PURE__ */ jsx("p", { style: styles.productSku, children: sku }),
+                    /* @__PURE__ */ jsx(
+                      "a",
+                      {
+                        href: getProductLink(sku),
+                        style: styles.productLink,
+                        children: "VIEW DETAILS"
+                      }
+                    )
+                  ] })
+                ] }, sku)) }) : null
+              ]
+            },
+            message.id
+          );
+        }) }),
+        error ? /* @__PURE__ */ jsxs("div", { style: styles.errorContainer, children: [
+          "Error: ",
+          error
+        ] }) : null
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: styles.inputSection, children: [
+        /* @__PURE__ */ jsxs("div", { style: styles.inputWrapper, children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "text",
+              style: styles.input,
+              placeholder: TRANSLATIONS.askMeAnything,
+              value: input,
+              onInput: (e) => onInputChange(e),
+              onKeyDown: (e) => onInputKeyDown(e)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: (e) => handleSend(),
+              style: {
+                ...styles.formButton,
+                ...styles.sendButton
+              },
+              children: /* @__PURE__ */ jsx("img", { alt: "Send", src: ICONS.sendHorizontal })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("p", { style: styles.disclaimer, children: "AI content may be inaccurate." })
+      ] })
+    ] }) : null
+  ] });
+}
+var shop_prompter_component_default = ShopPrompter;
+export {
+  shop_prompter_component_default as ShopPrompter
+};