@shop-prompter/react 0.1.1 → 1.0.0

package/dist/index.js

@@ -35,8 +35,9 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/shop-prompter.component.jsx
-var React = __toESM(require("react"));
-var import_react = require("react");
+var React4 = __toESM(require("react"));
+var import_react2 = require("react");
+var import_marked = require("marked");
 
 // src/api/shop-prompter-api.ts
 var DefaultShopPrompterApi = class {
@@ -46,16 +47,27 @@ var DefaultShopPrompterApi = class {
   setApiConfig(config) {
     this.config = config;
   }
+  getHeaders() {
+    if (!this.config) {
+      return { "Content-Type": "application/json" };
+    }
+    const headers = {
+      "Content-Type": "application/json"
+    };
+    if (this.config.shopPrompterToken) {
+      headers["Authorization"] = `Bearer ${this.config.shopPrompterToken}`;
+    } else if (this.config.apiKey) {
+      headers["X-Api-Key"] = this.config.apiKey;
+    }
+    return headers;
+  }
   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
-      },
+      headers: this.getHeaders(),
       body: JSON.stringify({
         prompt,
         userId,
@@ -73,20 +85,12 @@ var DefaultShopPrompterApi = class {
       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,
+          ...this.getHeaders(),
           Accept: "text/event-stream",
           "Cache-Control": "no-cache"
         },
@@ -105,7 +109,6 @@ var DefaultShopPrompterApi = class {
       });
       return;
     }
-    console.log("ShopPrompter Response:", response.status);
     if (!response.ok) {
       const errorText = await response.text().catch(() => "");
       console.error("ShopPrompter API Error:", response.status, errorText);
@@ -126,21 +129,17 @@ var DefaultShopPrompterApi = class {
       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",
@@ -149,7 +148,6 @@ var DefaultShopPrompterApi = class {
             }
           } else if (line.startsWith("data:")) {
             const data = line.slice(5).trim();
-            console.log("ShopPrompter Data:", data);
             if (data) {
               if (currentEventType === "error") {
                 try {
@@ -166,7 +164,6 @@ var DefaultShopPrompterApi = class {
                 }
               } else {
                 const event = this.parseEvent(data);
-                console.log("ShopPrompter Parsed event:", event);
                 if (event) {
                   onEvent(event);
                 }
@@ -192,26 +189,47 @@ var DefaultShopPrompterApi = class {
     try {
       const response = await fetch(`${this.config.baseUrl}/agent-experience`, {
         method: "GET",
-        headers: {
-          "Content-Type": "application/json",
-          "X-Api-Key": this.config.apiKey
-        }
+        headers: this.getHeaders()
       });
       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;
     }
   }
+  async sendFeedback(threadId, message, feedback) {
+    if (!this.config) {
+      throw new Error("API configuration not set. Call setApiConfig first.");
+    }
+    try {
+      const response = await fetch(`${this.config.baseUrl}/feedback`, {
+        method: "POST",
+        headers: this.getHeaders(),
+        body: JSON.stringify({
+          threadId,
+          message,
+          feedback
+        })
+      });
+      if (!response.ok) {
+        throw new Error(
+          "We are sorry, but we could not process your feedback. Please try again later."
+        );
+      }
+    } catch (error) {
+      if (error instanceof Error && error.message.startsWith("We are sorry")) {
+        throw error;
+      }
+      throw new Error(
+        "We are sorry, but we could not process your feedback. Please try again later."
+      );
+    }
+  }
   parseEvent(data) {
     try {
       const json = JSON.parse(data);
@@ -321,10 +339,78 @@ var DefaultShopPrompterApi = class {
 };
 var shopPrompterApi = new DefaultShopPrompterApi();
 
+// src/api/product-api.ts
+var DefaultProductApi = class {
+  constructor() {
+    this.config = null;
+    this.cache = /* @__PURE__ */ new Map();
+  }
+  setApiConfig(config) {
+    this.config = config;
+  }
+  isCached(skus) {
+    if (!skus || skus.length === 0) return true;
+    return skus.every((sku) => this.cache.has(sku));
+  }
+  getCached(skus) {
+    if (!skus || skus.length === 0) return [];
+    return skus.map((sku) => this.cache.get(sku)).filter(Boolean);
+  }
+  async getProducts(skus) {
+    if (!this.config) {
+      throw new Error("API configuration not set. Call setApiConfig first.");
+    }
+    const cachedProducts = [];
+    const missingSkus = [];
+    for (const sku of skus) {
+      if (this.cache.has(sku)) {
+        const cachedVal = this.cache.get(sku);
+        if (cachedVal) {
+          cachedProducts.push(cachedVal);
+        }
+      } else {
+        missingSkus.push(sku);
+      }
+    }
+    if (missingSkus.length === 0) {
+      return skus.map((sku) => this.cache.get(sku)).filter(Boolean);
+    }
+    const baseUrl = this.config.productsBaseUrl || this.config.baseUrl;
+    const url = `${baseUrl}/products?skus=${encodeURIComponent(missingSkus.join(","))}`;
+    const headers = {
+      "Content-Type": "application/json"
+    };
+    const response = await fetch(url, {
+      method: "GET",
+      headers
+    });
+    if (!response.ok) {
+      throw new Error(`Product API error: ${response.status}`);
+    }
+    const newProducts = await response.json();
+    const returnedSkus = /* @__PURE__ */ new Set();
+    for (const p of newProducts) {
+      if (p.sku) {
+        this.cache.set(p.sku, p);
+        returnedSkus.add(p.sku);
+      }
+    }
+    for (const sku of missingSkus) {
+      if (!returnedSkus.has(sku)) {
+        this.cache.set(sku, null);
+      }
+    }
+    return skus.map((sku) => this.cache.get(sku)).filter(Boolean);
+  }
+};
+var productApi = new DefaultProductApi();
+
 // src/api/session-handler.ts
 var import_uuid = require("uuid");
 var SESSION_KEY = "shopprompter_sessionId";
 var USER_KEY = "shopprompter_userId";
+var SESSIONS_KEY = "shopprompter_sessions";
+var MAX_SESSIONS = 3;
 var DefaultSessionHandler = class {
   constructor() {
     this.sessionId = "";
@@ -352,6 +438,98 @@ var DefaultSessionHandler = class {
     }
     return this.userId;
   }
+  // -------------------------------------------------------------------------
+  // Message persistence
+  // -------------------------------------------------------------------------
+  /** Persist a user message immediately when it is sent. */
+  saveUserMessage(sessionId, message) {
+    try {
+      const store = this.loadSessionStore();
+      if (!store[sessionId]) {
+        this.evictIfNeeded(store);
+        store[sessionId] = { createdAt: Date.now(), messages: [] };
+      }
+      store[sessionId].messages.push(message);
+      this.saveSessionStore(store);
+    } catch {
+    }
+  }
+  /**
+   * Persist the fully-streamed assistant message.
+   * If the message ID already exists in the store (shouldn't normally happen)
+   * it is replaced; otherwise it is appended.
+   */
+  saveAssistantMessage(sessionId, message) {
+    try {
+      const store = this.loadSessionStore();
+      if (!store[sessionId]) {
+        store[sessionId] = { createdAt: Date.now(), messages: [] };
+      }
+      const msgs = store[sessionId].messages;
+      const existingIdx = msgs.findIndex((m) => m.id === message.id);
+      if (existingIdx !== -1) {
+        msgs[existingIdx] = message;
+      } else {
+        msgs.push(message);
+      }
+      this.saveSessionStore(store);
+    } catch {
+    }
+  }
+  /** Return the persisted messages for the given session (newest first order preserved). */
+  loadMessages(sessionId) {
+    var _a, _b;
+    try {
+      const store = this.loadSessionStore();
+      return (_b = (_a = store[sessionId]) == null ? void 0 : _a.messages) != null ? _b : [];
+    } catch {
+      return [];
+    }
+  }
+  /** Update the feedback field of a specific persisted message. */
+  updateMessageFeedback(sessionId, messageId, feedback) {
+    try {
+      const store = this.loadSessionStore();
+      const session = store[sessionId];
+      if (!session) return;
+      const msg = session.messages.find((m) => m.id === messageId);
+      if (!msg) return;
+      msg.feedback = feedback;
+      this.saveSessionStore(store);
+    } catch {
+    }
+  }
+  // -------------------------------------------------------------------------
+  // Private helpers
+  // -------------------------------------------------------------------------
+  /**
+   * Remove the single oldest session from the store when it already holds
+   * MAX_SESSIONS entries. Mutates the store object in place.
+   */
+  evictIfNeeded(store) {
+    const sessionIds = Object.keys(store);
+    if (sessionIds.length < MAX_SESSIONS) return;
+    let oldestId = sessionIds[0];
+    let oldestTime = store[oldestId].createdAt;
+    for (const id of sessionIds) {
+      if (store[id].createdAt < oldestTime) {
+        oldestId = id;
+        oldestTime = store[id].createdAt;
+      }
+    }
+    delete store[oldestId];
+  }
+  loadSessionStore() {
+    try {
+      const raw = localStorage.getItem(SESSIONS_KEY);
+      return raw ? JSON.parse(raw) : {};
+    } catch {
+      return {};
+    }
+  }
+  saveSessionStore(store) {
+    localStorage.setItem(SESSIONS_KEY, JSON.stringify(store));
+  }
   getPersistedSessionId() {
     try {
       return localStorage.getItem(SESSION_KEY);
@@ -382,16 +560,13 @@ var DefaultSessionHandler = class {
 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() {
+  constructor(apiConfig) {
     this.isLoading = false;
     this.error = null;
     this.streamingText = "";
-    shopPrompterApi.setApiConfig(SHOP_PROMPTER_CONFIG);
+    shopPrompterApi.setApiConfig(apiConfig);
+    productApi.setApiConfig(apiConfig);
     sessionHandler.initialize();
   }
   async sendMessage(prompt, callbacks, cartContext) {
@@ -402,7 +577,16 @@ var ShopPrompterService = class {
     this.streamingText = "";
     const userId = sessionHandler.getUserId();
     const sessionId = sessionHandler.getSessionId();
+    const userMsgId = Date.now().toString() + "-user";
+    sessionHandler.saveUserMessage(sessionId, {
+      id: userMsgId,
+      role: "user",
+      content: prompt,
+      productSkus: []
+    });
+    const assistantMsgId = Date.now().toString() + "-assistant";
     let accumulatedText = "";
+    let accumulatedSkus = [];
     try {
       await shopPrompterApi.executeStream(
         prompt,
@@ -417,6 +601,7 @@ var ShopPrompterService = class {
               (_a2 = callbacks.onTextUpdate) == null ? void 0 : _a2.call(callbacks, accumulatedText);
               break;
             case "productSkus":
+              accumulatedSkus = event.skus;
               (_b2 = callbacks.onProductSkus) == null ? void 0 : _b2.call(callbacks, event.skus);
               break;
             case "navigation":
@@ -429,6 +614,12 @@ var ShopPrompterService = class {
               this.isLoading = false;
               (_d = callbacks.onLoadingChange) == null ? void 0 : _d.call(callbacks, false);
               (_e = callbacks.onComplete) == null ? void 0 : _e.call(callbacks);
+              sessionHandler.saveAssistantMessage(sessionId, {
+                id: assistantMsgId,
+                role: "assistant",
+                content: accumulatedText,
+                productSkus: accumulatedSkus
+              });
               break;
             case "error":
               this.error = event.reason;
@@ -450,9 +641,6 @@ var ShopPrompterService = class {
     return accumulatedText;
   }
   async getAgentExperience() {
-    console.log(
-      "## ~ ShopPrompterService ~ getAgentExperience ~ getAgentExperience:"
-    );
     try {
       return await shopPrompterApi.getAgentExperience();
     } catch (err) {
@@ -460,6 +648,32 @@ var ShopPrompterService = class {
       throw err;
     }
   }
+  /**
+   * Load persisted chat messages for the current session from localStorage.
+   * Returns an empty array if nothing is stored yet.
+   */
+  loadMessages() {
+    const sessionId = sessionHandler.getSessionId();
+    const persisted = sessionHandler.loadMessages(sessionId);
+    return persisted.map((msg) => {
+      var _a, _b;
+      return {
+        id: msg.id,
+        role: msg.role,
+        content: msg.content,
+        productSkus: (_a = msg.productSkus) != null ? _a : [],
+        feedback: (_b = msg.feedback) != null ? _b : null
+      };
+    });
+  }
+  async sendFeedback(messageId, messageContent, feedback) {
+    const userId = sessionHandler.getUserId();
+    const sessionId = sessionHandler.getSessionId();
+    const threadId = `${userId}:${sessionId}`;
+    await shopPrompterApi.sendFeedback(threadId, messageContent, feedback);
+    const storedFeedback = feedback === "clear" ? null : feedback;
+    sessionHandler.updateMessageFeedback(sessionId, messageId, storedFeedback);
+  }
   resetSession() {
     sessionHandler.regenerate();
   }
@@ -472,14 +686,244 @@ var ShopPrompterService = class {
   }
 };
 
-// src/shop-prompter.component.jsx
+// src/thumbs-up-icon.component.jsx
+var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
+function ThumbsUpIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "18",
+      height: "18",
+      viewBox: "0 0 24 24",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      fill: props.fill || "none",
+      stroke: props.stroke || "currentColor",
+      style: {
+        overflow: "visible"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M7 10v12" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z" })
+      ]
+    }
+  );
+}
+var thumbs_up_icon_component_default = ThumbsUpIcon;
+
+// src/thumbs-down-icon.component.jsx
+var React2 = __toESM(require("react"));
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function ThumbsDownIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "18",
+      height: "18",
+      viewBox: "0 0 24 24",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      fill: props.fill || "none",
+      stroke: props.stroke || "currentColor",
+      style: {
+        overflow: "visible"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M17 14V2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22h0a3.13 3.13 0 0 1-3-3.88Z" })
+      ]
+    }
+  );
+}
+var thumbs_down_icon_component_default = ThumbsDownIcon;
+
+// src/product-card-list.component.jsx
+var React3 = __toESM(require("react"));
+var import_react = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var styles = {
+  productCardsContainer: {
+    marginTop: "0.75rem",
+    display: "flex",
+    gap: "0.75rem",
+    overflowX: "auto",
+    width: "100%",
+    paddingBottom: "0.5rem",
+    boxSizing: "border-box",
+    scrollbarWidth: "thin",
+    scrollSnapType: "x mandatory",
+    WebkitOverflowScrolling: "touch"
+  },
+  productCard: {
+    minWidth: "9.5rem",
+    maxWidth: "9.5rem",
+    backgroundColor: "white",
+    border: "1px solid #f3f4f6",
+    borderRadius: "0.75rem",
+    overflow: "hidden",
+    boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03)",
+    display: "flex",
+    flexDirection: "column",
+    scrollSnapAlign: "start"
+  },
+  productImageContainer: {
+    height: "7rem",
+    backgroundColor: "#f9fafb",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: "0.5rem",
+    borderBottom: "1px solid #f3f4f6"
+  },
+  productImage: {
+    maxHeight: "100%",
+    maxWidth: "100%",
+    objectFit: "contain"
+  },
+  productInfo: {
+    padding: "0.625rem",
+    display: "flex",
+    flexDirection: "column",
+    gap: "0.25rem"
+  },
+  productName: {
+    fontSize: "0.8125rem",
+    fontWeight: 600,
+    color: "#1f2937",
+    margin: 0,
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis"
+  },
+  productPrice: {
+    fontSize: "0.8125rem",
+    fontWeight: 500,
+    color: "#4b5563",
+    margin: 0
+  },
+  statusContainer: {
+    padding: "0.5rem 0",
+    fontSize: "0.75rem",
+    color: "#6b7280",
+    display: "flex",
+    alignItems: "center",
+    gap: "0.5rem"
+  },
+  errorText: {
+    color: "#ef4444"
+  },
+  spinner: {
+    color: "#6b7280"
+  },
+  wrapper: {
+    width: "100%",
+    maxWidth: "100%",
+    boxSizing: "border-box",
+    overflow: "hidden"
+  }
+};
+function ProductCardList(props) {
+  const [products, setProducts] = (0, import_react.useState)(() => []);
+  const [loading, setLoading] = (0, import_react.useState)(() => false);
+  const [error, setError] = (0, import_react.useState)(() => null);
+  function fetchProducts() {
+    let skusList = props.skus;
+    if (typeof skusList === "string") {
+      skusList = skusList.split(",").map((s) => s.trim()).filter(Boolean);
+    }
+    if (!skusList || skusList.length === 0) {
+      setProducts([]);
+      setLoading(false);
+      return;
+    }
+    if (productApi.isCached(skusList)) {
+      setProducts(productApi.getCached(skusList));
+      setLoading(false);
+      setError(null);
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    productApi.getProducts(skusList).then((data) => {
+      setProducts(data || []);
+      setLoading(false);
+    }).catch((err) => {
+      console.error("Failed to fetch products:", err);
+      setError((err == null ? void 0 : err.message) || "Failed to load products");
+      setLoading(false);
+    });
+  }
+  function getProductName(product) {
+    var _a;
+    const locale = props.defaultLocale || "de";
+    const localized = ((_a = product.localization) == null ? void 0 : _a[locale]) || Object.values(product.localization || {})[0];
+    return (localized == null ? void 0 : localized.name) || product.sku;
+  }
+  function getProductPrice(product) {
+    if (!product.pricing) return "";
+    const priceVal = product.pricing.gross;
+    const currency = product.pricing.currency;
+    if (priceVal === void 0 || priceVal === null) return "";
+    return priceVal.toFixed(2) + " " + (currency || "\u20AC");
+  }
+  function getProductImage(product) {
+    var _a;
+    return ((_a = product.images) == null ? void 0 : _a[0]) || "https://placehold.co/150x150?text=" + product.sku;
+  }
+  (0, import_react.useEffect)(() => {
+    fetchProducts();
+  }, []);
+  (0, import_react.useEffect)(() => {
+    fetchProducts();
+  }, [
+    props.skus ? Array.isArray(props.skus) ? props.skus.join(",") : props.skus : ""
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: props.skus && props.skus.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: styles.wrapper, children: [
+    loading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: styles.statusContainer, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Loading products..." }) }) : null,
+    !loading && error ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: styles.statusContainer, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { style: styles.errorText, children: [
+      "Error: ",
+      error
+    ] }) }) : null,
+    !loading && products && products.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: styles.productCardsContainer, children: products == null ? void 0 : products.map((product) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: styles.productCard, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: styles.productImageContainer, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "img",
+        {
+          src: getProductImage(product),
+          alt: getProductName(product),
+          style: styles.productImage
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: styles.productInfo, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "p",
+          {
+            style: styles.productName,
+            title: getProductName(product),
+            children: getProductName(product)
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: styles.productPrice, children: getProductPrice(product) })
+      ] })
+    ] }, product.sku)) }) : null
+  ] }) }) : null });
+}
+var product_card_list_component_default = ProductCardList;
+
+// src/shop-prompter.component.jsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var THINKING_SPINNER = "M21 12a9 9 0 1 1-6.219-8.56";
+var styles2 = {
   header: {
     display: "flex",
     alignItems: "center",
     justifyContent: "space-between",
-    padding: "16px"
+    padding: "16px",
+    borderBottom: "1px solid #e5e7eb"
   },
   subHeaderContainer: {
     display: "flex",
@@ -495,6 +939,7 @@ var 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%)"
@@ -515,7 +960,8 @@ var styles = {
     gap: "0.5rem",
     cursor: "pointer",
     fontSize: "0.875rem",
-    color: "#09090b"
+    color: "#09090b",
+    fontFamily: "inherit"
   },
   ButtonSheetButton: {
     color: "#6b7280",
@@ -524,11 +970,13 @@ var styles = {
     cursor: "pointer",
     padding: "0.25rem",
     fontSize: "1.25rem",
-    transition: "color 0.2s"
+    transition: "color 0.2s",
+    fontFamily: "inherit"
   },
   chatContainer: {
     flex: 1,
     overflowY: "auto",
+    overflowX: "hidden",
     padding: "1rem",
     backgroundColor: "white"
   },
@@ -574,12 +1022,17 @@ var styles = {
   messageContainerUser: {
     display: "flex",
     flexDirection: "column",
-    alignItems: "flex-end"
+    alignItems: "flex-end",
+    marginBottom: "8px"
   },
   messageContainerAssistant: {
     display: "flex",
     flexDirection: "column",
-    alignItems: "flex-start"
+    alignItems: "flex-start",
+    marginBottom: "8px",
+    width: "100%",
+    maxWidth: "100%",
+    boxSizing: "border-box"
   },
   messageBubbleUser: {
     backgroundColor: "#111827",
@@ -589,7 +1042,8 @@ var styles = {
     padding: "0.5rem 1rem",
     fontSize: "0.875rem",
     boxShadow: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
-    maxWidth: "85%"
+    maxWidth: "85%",
+    textAlign: "left"
   },
   messageBubbleAssistant: {
     backgroundColor: "#f3f4f6",
@@ -599,7 +1053,8 @@ var styles = {
     padding: "0.5rem 1rem",
     fontSize: "0.875rem",
     boxShadow: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
-    maxWidth: "85%"
+    maxWidth: "85%",
+    textAlign: "left"
   },
   thinkingIndicator: {
     display: "flex",
@@ -681,7 +1136,8 @@ var styles = {
     outline: "none",
     fontSize: "0.875rem",
     color: "#111827",
-    padding: "0.25rem 0"
+    padding: "0.25rem 0",
+    fontFamily: "inherit"
   },
   formButton: {
     backgroundColor: "transparent",
@@ -694,7 +1150,8 @@ var styles = {
     fontWeight: "bold",
     border: "none",
     cursor: "pointer",
-    transition: "background-color 0.2s"
+    transition: "background-color 0.2s",
+    fontFamily: "inherit"
   },
   sendButton: {
     backgroundColor: "#AD59FF1A"
@@ -704,17 +1161,169 @@ var styles = {
     color: "#9ca3af",
     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: 1e3
+  },
+  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)"
   }
 };
+var 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;
+    }
+  `;
 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"
+  findByBudget: "Find by budget",
+  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",
@@ -725,69 +1334,108 @@ var ICONS = {
   sendHorizontal: "https://cdn.jsdelivr.net/gh/lucide-icons/lucide@latest/icons/send-horizontal.svg"
 };
 function ShopPrompter(props) {
-  var _a, _b, _c;
-  const [input, setInput] = (0, import_react.useState)(() => "");
-  const [isLoading, setIsLoading] = (0, import_react.useState)(() => false);
-  const [error, setError] = (0, import_react.useState)(() => null);
-  const [chatMessages, setChatMessages] = (0, import_react.useState)(() => []);
-  const [showChat, setShowChat] = (0, import_react.useState)(
-    () => props.chatPosition === "right-panel" || props.chatPosition === "full-page"
-  );
-  const [service, setService] = (0, import_react.useState)(() => null);
-  const [isHeaderButtonHovered, setIsHeaderButtonHovered] = (0, import_react.useState)(
-    () => false
+  var _a, _b, _c, _d;
+  const [input, setInput] = (0, import_react2.useState)(() => "");
+  const [isLoading, setIsLoading] = (0, import_react2.useState)(() => false);
+  const [error, setError] = (0, import_react2.useState)(() => null);
+  const [chatMessages, setChatMessages] = (0, import_react2.useState)(() => []);
+  const [showChat, setShowChat] = (0, import_react2.useState)(() => false);
+  const [isClosing, setIsClosing] = (0, import_react2.useState)(() => false);
+  const [closeTimeout, setCloseTimeout] = (0, import_react2.useState)(() => null);
+  const [service, setService] = (0, import_react2.useState)(() => null);
+  const [agentExperience, setAgentExperience] = (0, import_react2.useState)(() => null);
+  const [animationClass, setAnimationClass] = (0, import_react2.useState)(() => "");
+  const [backdropAnimationClass, setBackdropAnimationClass] = (0, import_react2.useState)(
+    () => ""
   );
-  const [agentExperience, setAgentExperience] = (0, import_react.useState)(() => null);
+  function hasToken() {
+    var _a2;
+    const token = props.shopPrompterToken || ((_a2 = apiConfigObj == null ? void 0 : apiConfigObj()) == null ? void 0 : _a2.shopPrompterToken);
+    return !!token;
+  }
+  function isConfigInsufficient() {
+    var _a2, _b2;
+    const token = props.shopPrompterToken || ((_a2 = apiConfigObj == null ? void 0 : apiConfigObj()) == null ? void 0 : _a2.shopPrompterToken);
+    const apiKey = (_b2 = apiConfigObj == null ? void 0 : apiConfigObj()) == null ? void 0 : _b2.apiKey;
+    return !token && !apiKey;
+  }
+  function themeObj() {
+    if (typeof props.theme === "string") {
+      try {
+        return JSON.parse(props.theme);
+      } catch (e) {
+        return {};
+      }
+    }
+    return props.theme || {};
+  }
+  function prompts() {
+    return (agentExperience == null ? void 0 : 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)"
+      boxShadow: isFull ? "none" : "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+      fontFamily: themeObj().fontFamily || void 0
     };
   }
   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";
+    if (pos === "dialog") {
+      return "sh-dialog " + animationClass;
+    }
     return "sh-full";
   }
   function messages() {
-    return chatMessages.map((msg) => ({
-      ...msg,
-      safeProductSkus: msg.productSkus || []
-    }));
+    return chatMessages;
+  }
+  function parseMarkdown(content) {
+    if (!content) return "";
+    return String(import_marked.marked.parse(content));
   }
   function showWelcome() {
     return chatMessages.length === 0;
   }
-  function getProductImageUrl(sku) {
-    return "https://placehold.co/100x100?text=" + sku;
+  function getShowProducts(message) {
+    return message.productSkus && message.productSkus.length > 0;
   }
-  function getProductLink(sku) {
-    return "/product/" + sku;
-  }
-  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",
@@ -795,30 +1443,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 == null ? void 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);
           }
         },
@@ -832,29 +1495,63 @@ 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);
     }
   }
   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);
   }
@@ -863,49 +1560,196 @@ function ShopPrompter(props) {
       handleSend();
     }
   }
-  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 == null ? void 0 : service.getAgentExperience());
-      console.log("## ~ ShopPrompter ~ response:", response);
       setAgentExperience(response);
     })();
   }
-  (0, import_react.useEffect)(() => {
-    const shopPrompterService = new ShopPrompterService();
-    setService(shopPrompterService);
+  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;
+    const oldMessages = [...chatMessages];
+    setChatMessages(
+      chatMessages.map((m) => {
+        if (m.id === messageId) {
+          return {
+            ...m,
+            feedback: targetFeedback === "clear" ? null : targetFeedback
+          };
+        }
+        return m;
+      })
+    );
+    setError(null);
+    service == null ? void 0 : service.sendFeedback(messageId, messageContent, targetFeedback).catch((err) => {
+      setChatMessages(oldMessages);
+      setError((err == null ? void 0 : 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;
+  }
+  (0, import_react2.useEffect)(() => {
+    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 service2 = new ShopPrompterService(apiConfig);
+        setService(service2);
+        const savedMessages = service2.loadMessages();
+        if (savedMessages.length > 0) {
+          setChatMessages(savedMessages);
+        }
+      }
+    } else {
+      console.error("ShopPrompter: apiConfig prop is required!");
+    }
+    if ((props == null ? void 0 : props.chatPosition) === "right-panel" || (props == null ? void 0 : props.chatPosition) === "full-page") {
+      setShowChat(true);
+    }
+    if (typeof window !== "undefined") {
+      document.addEventListener("click", handleTriggerClick);
+    }
   }, []);
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     if (service && !agentExperience) {
-      doSomethingAsync();
-    }
-    if (agentExperience) {
-      console.log("## ~ ShopPrompter ~ agentExperience updated:", {
-        greeting: agentExperience.greeting,
-        agentLogoUrl: agentExperience.agentLogoUrl
-      });
+      loadAgentExperience();
     }
   }, [service, agentExperience]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "shopprompter-sdk", children: [
-    props.chatPosition === "classic-chatbot" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: !showChat ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  (0, import_react2.useEffect)(() => {
+    if (themeObj().fontFamily) {
+      loadCustomFont(themeObj().fontFamily);
+    }
+  }, [themeObj().fontFamily || ""]);
+  (0, import_react2.useEffect)(() => {
+    if ((props == null ? void 0 : props.chatPosition) === "right-panel" || (props == null ? void 0 : props.chatPosition) === "full-page") {
+      setShowChat(true);
+    } else if ((props == null ? void 0 : props.chatPosition) === "dialog" || (props == null ? void 0 : props.chatPosition) === "classic-chatbot") {
+      setShowChat(false);
+      setIsClosing(false);
+      setAnimationClass("");
+      setBackdropAnimationClass("");
+    }
+  }, [(props == null ? void 0 : props.chatPosition) || ""]);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "shopprompter-sdk", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("style", { dangerouslySetInnerHTML: { __html: ANIMATION_STYLES } }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "div",
+      {
+        onClick: (e) => toggleChat(),
+        style: {
+          ...styles2.backdrop,
+          display: props.chatPosition === "dialog" && (showChat || isClosing) ? "block" : "none"
+        },
+        className: backdropAnimationClass
+      }
+    ),
+    props.chatPosition === "classic-chatbot" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: !showChat ? /* @__PURE__ */ (0, import_jsx_runtime4.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)"
+          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 || void 0
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "img",
           {
             alt: "Chat",
@@ -918,259 +1762,404 @@ function ShopPrompter(props) {
         )
       }
     ) : null }) : null,
-    showChat ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: containerStyle(), className: containerClass(), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.header, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.subHeaderContainer, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-            "svg",
-            {
-              xmlns: "http://www.w3.org/2000/svg",
-              viewBox: "0 0 46 47",
-              width: "24",
-              height: "24",
-              fill: "none",
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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"
+    showChat || isClosing ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: containerStyle(), className: containerClass(), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        "div",
+        {
+          style: {
+            ...styles2.header,
+            backgroundColor: themeObj().headerBackgroundColor || "transparent"
+          },
+          children: [
+            themeObj().showAgentName !== false ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles2.subHeaderContainer, children: [
+              (agentExperience == null ? void 0 : agentExperience.agentLogoUrl) ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "img",
+                {
+                  src: agentExperience.agentLogoUrl,
+                  alt: agentExperience.agentName,
+                  style: {
+                    width: "24px",
+                    height: "24px",
+                    borderRadius: "4px",
+                    objectFit: "cover"
                   }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("defs", { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                    "linearGradient",
-                    {
-                      id: "a",
-                      x1: "14.3",
-                      x2: "3.322",
-                      y1: "22.494",
-                      y2: "4.382",
-                      gradientUnits: "userSpaceOnUse",
-                      children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { stopColor: "#B0145C" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: ".37", stopColor: "#AE2E9A" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "1", stopColor: "#AD59FF" })
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                    "linearGradient",
-                    {
-                      id: "b",
-                      x1: "21.156",
-                      x2: "40.431",
-                      y1: "21.216",
-                      y2: "1.624",
-                      gradientUnits: "userSpaceOnUse",
-                      children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: ".08", stopColor: "#E7A2FF" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: ".37", stopColor: "#E983CD" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: ".99", stopColor: "#F03A58" })
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                    "linearGradient",
-                    {
-                      id: "c",
-                      x1: "30.464",
-                      x2: "46.567",
-                      y1: "27.405",
-                      y2: "42.472",
-                      gradientUnits: "userSpaceOnUse",
-                      children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { stopColor: "#B0145C" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: ".02", stopColor: "#B11861" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: ".27", stopColor: "#C44999" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: ".5", stopColor: "#D36FC5" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: ".71", stopColor: "#DE8BE4" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: ".88", stopColor: "#E49BF8" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "1", stopColor: "#E7A2FF" })
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                    "linearGradient",
+                }
+              ) : null,
+              (agentExperience == null ? void 0 : agentExperience.agentName) ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: styles2.headerText, children: agentExperience.agentName }) : null
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: styles2.subHeaderContainer }) }),
+            !hasToken() && ((_a = apiConfigObj == null ? void 0 : apiConfigObj()) == null ? void 0 : _a.apiKey) ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: styles2.warningBanner, children: "API Key is only for development purposes" }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles2.subHeaderContainer, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "button",
+                {
+                  className: "sh-header-btn",
+                  onClick: (e) => handleNewChat(),
+                  style: styles2.headerButton,
+                  children: TRANSLATIONS.newChat
+                }
+              ),
+              props.chatPosition === "classic-chatbot" || props.chatPosition === "right-panel" || props.chatPosition === "dialog" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "button",
+                {
+                  onClick: (e) => toggleChat(),
+                  style: styles2.ButtonSheetButton,
+                  children: "\xD7"
+                }
+              ) : null
+            ] })
+          ]
+        }
+      ),
+      isConfigInsufficient() ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles2.insufficientConfigContainer, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: styles2.insufficientConfigIconContainer, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          "svg",
+          {
+            width: "48",
+            height: "48",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            style: {
+              color: "#ef4444"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M7 11V7a5 5 0 0 1 9.9-1" })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "h3",
+          {
+            style: {
+              ...styles2.insufficientConfigTitle,
+              fontFamily: themeObj().fontFamily || void 0
+            },
+            children: "Configuration Error"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "p",
+          {
+            style: {
+              ...styles2.insufficientConfigMessage,
+              fontFamily: themeObj().fontFamily || void 0
+            },
+            children: "ShopPrompter requires a secure token or API key to initialize. Please check your setup."
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          "div",
+          {
+            style: {
+              ...styles2.insufficientConfigDetails,
+              fontFamily: themeObj().fontFamily || void 0
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "div",
+                {
+                  style: {
+                    fontWeight: 600,
+                    marginBottom: "0.25rem"
+                  },
+                  children: "Missing Parameters:"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: "0.25rem",
+                    fontFamily: "monospace",
+                    fontSize: "0.75rem"
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      "span",
+                      {
+                        style: {
+                          color: "#ef4444"
+                        },
+                        children: "\u2717 shopPrompterToken (not found)"
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      "span",
+                      {
+                        style: {
+                          color: "#ef4444"
+                        },
+                        children: "\u2717 apiConfig.apiKey (not found)"
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ] }) : null,
+      !isConfigInsufficient() ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        "div",
+        {
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            flex: 1,
+            overflow: "hidden"
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+              "div",
+              {
+                id: "shop-prompter-chat-container",
+                style: {
+                  ...styles2.chatContainer,
+                  backgroundColor: themeObj().mainBackgroundColor || styles2.chatContainer.backgroundColor
+                },
+                children: [
+                  showWelcome() ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles2.welcomeContainer, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      "img",
+                      {
+                        alt: "ShopPrompter",
+                        src: (agentExperience == null ? void 0 : agentExperience.agentLogoUrl) ? agentExperience.agentLogoUrl : ICONS.shopprompter,
+                        style: {
+                          width: "64px",
+                          height: "64px",
+                          marginBottom: "24px",
+                          borderRadius: "12px",
+                          objectFit: "cover"
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      "h3",
+                      {
+                        style: {
+                          ...styles2.welcomeTitle,
+                          fontFamily: themeObj().fontFamily || styles2.welcomeTitle.fontFamily
+                        },
+                        children: ((_b = agentExperience == null ? void 0 : agentExperience.greeting) == null ? void 0 : _b.title) || TRANSLATIONS.welcomeToShopPrompter
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      "p",
+                      {
+                        style: {
+                          ...styles2.welcomeDescription,
+                          fontFamily: themeObj().fontFamily || styles2.welcomeDescription.fontFamily
+                        },
+                        children: ((_c = agentExperience == null ? void 0 : agentExperience.greeting) == null ? void 0 : _c.description) || TRANSLATIONS.welcomeDescription
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: styles2.buttonContainer, children: (_d = prompts()) == null ? void 0 : _d.map((item) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      "button",
+                      {
+                        style: styles2.button,
+                        onClick: (event) => {
+                          setInput(item.prompt);
+                          handleSend(item.prompt);
+                        },
+                        children: item.prompt
+                      },
+                      item.prompt
+                    )) })
+                  ] }) : null,
+                  !showWelcome() ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    "div",
                     {
-                      id: "d",
-                      x1: "23.356",
-                      x2: "-.618",
-                      y1: "44.082",
-                      y2: "30.739",
-                      gradientUnits: "userSpaceOnUse",
-                      children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { stopColor: "#AD59FF" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: ".1", stopColor: "#B455EB" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: ".54", stopColor: "#D4469C" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: ".85", stopColor: "#E83D6B" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "1", stopColor: "#F03A58" })
-                      ]
+                      style: {
+                        width: "100%"
+                      },
+                      children: chatMessages == null ? void 0 : chatMessages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
+                        message.role === "user" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: styles2.messageContainerUser, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                          "div",
+                          {
+                            style: {
+                              ...styles2.messageBubbleUser,
+                              backgroundColor: themeObj().userMessageBackgroundColor || styles2.messageBubbleUser.backgroundColor
+                            },
+                            children: message.content
+                          }
+                        ) }) : null,
+                        message.role === "assistant" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles2.messageContainerAssistant, children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                            "div",
+                            {
+                              style: {
+                                ...styles2.messageBubbleAssistant,
+                                backgroundColor: themeObj().assistantMessageBackgroundColor || styles2.messageBubbleAssistant.backgroundColor
+                              },
+                              children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                                  "div",
+                                  {
+                                    dangerouslySetInnerHTML: {
+                                      __html: parseMarkdown(message.content)
+                                    }
+                                  }
+                                ),
+                                !message.content && isLoading ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: (agentExperience == null ? void 0 : agentExperience.loadingIndicatorUrl) ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                                  "lottie-player",
+                                  {
+                                    background: "transparent",
+                                    speed: "1",
+                                    src: agentExperience.loadingIndicatorUrl,
+                                    style: {
+                                      width: "40px",
+                                      height: "40px"
+                                    },
+                                    loop: true,
+                                    autoplay: true
+                                  }
+                                ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: styles2.thinkingIndicator, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                                  "svg",
+                                  {
+                                    width: "24",
+                                    height: "24",
+                                    viewBox: "0 0 24 24",
+                                    fill: "none",
+                                    stroke: "currentColor",
+                                    strokeWidth: "2",
+                                    strokeLinecap: "round",
+                                    strokeLinejoin: "round",
+                                    style: {
+                                      color: "#6b7280"
+                                    },
+                                    children: [
+                                      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: THINKING_SPINNER }),
+                                      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                                        "animateTransform",
+                                        {
+                                          attributeName: "transform",
+                                          type: "rotate",
+                                          from: "0 12 12",
+                                          to: "360 12 12",
+                                          dur: "1s",
+                                          repeatCount: "indefinite"
+                                        }
+                                      )
+                                    ]
+                                  }
+                                ) }) }) : null
+                              ]
+                            }
+                          ),
+                          canShowFeedback(message) ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles2.feedbackRow, children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                              "button",
+                              {
+                                className: "sh-feedback-btn",
+                                onClick: (event) => handleFeedback(
+                                  message.id,
+                                  message.content,
+                                  "upvote"
+                                ),
+                                style: styles2.feedbackButton,
+                                children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                                  thumbs_up_icon_component_default,
+                                  {
+                                    fill: message.feedback === "upvote" ? themeObj().actionColor || "#2563eb" : "none",
+                                    stroke: message.feedback === "upvote" ? themeObj().actionColor || "#2563eb" : "currentColor"
+                                  }
+                                )
+                              }
+                            ),
+                            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                              "button",
+                              {
+                                className: "sh-feedback-btn",
+                                onClick: (event) => handleFeedback(
+                                  message.id,
+                                  message.content,
+                                  "downvote"
+                                ),
+                                style: styles2.feedbackButton,
+                                children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                                  thumbs_down_icon_component_default,
+                                  {
+                                    fill: message.feedback === "downvote" ? themeObj().actionColor || "#2563eb" : "none",
+                                    stroke: message.feedback === "downvote" ? themeObj().actionColor || "#2563eb" : "currentColor"
+                                  }
+                                )
+                              }
+                            )
+                          ] }) : null,
+                          getShowProducts(message) ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                            product_card_list_component_default,
+                            {
+                              skus: message.productSkus,
+                              defaultLocale: props.defaultLocale
+                            }
+                          ) : null
+                        ] }) : null
+                      ] }, message.id))
                     }
-                  )
-                ] })
-              ]
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: styles.headerText, children: "ShopPrompter\xAE" })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.subHeaderContainer, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(
-            "button",
-            {
-              onClick: (e) => toggleChat(),
-              style: styles.ButtonSheetButton,
-              children: "\xD7"
-            }
-          ) : null
-        ] })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.chatContainer, children: [
-        showWelcome() ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.welcomeContainer, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "img",
-            {
-              alt: "ShopPrompter",
-              src: (agentExperience == null ? void 0 : agentExperience.agentLogoUrl) ? agentExperience.agentLogoUrl : ICONS.shopprompter,
-              style: {
-                width: "64px",
-                height: "64px",
-                marginBottom: "24px"
-              }
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { style: styles.welcomeTitle, children: ((_a = agentExperience == null ? void 0 : agentExperience.greeting) == null ? void 0 : _a.title) || TRANSLATIONS.welcomeToShopPrompter }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: styles.welcomeDescription, children: ((_b = agentExperience == null ? void 0 : agentExperience.greeting) == null ? void 0 : _b.description) || TRANSLATIONS.welcomeDescription }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.buttonContainer, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "button",
-              {
-                style: styles.button,
-                onClick: (e) => onPopularItemsClick(),
-                children: TRANSLATIONS.showPopularItems
+                  ) : null,
+                  error ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles2.errorContainer, children: [
+                    "Error: ",
+                    error
+                  ] }) : null
+                ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "button",
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+              "div",
               {
-                style: styles.button,
-                onClick: (e) => onCompareProductsClick(),
-                children: TRANSLATIONS.compareProducts
-              }
-            )
-          ] })
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: (_c = messages()) == null ? void 0 : _c.map((message) => {
-          var _a2;
-          return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-            "div",
-            {
-              style: message.role === "user" ? styles.messageContainerUser : styles.messageContainerAssistant,
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                  "div",
-                  {
-                    style: message.role === "user" ? styles.messageBubbleUser : styles.messageBubbleAssistant,
-                    children: [
-                      message.content,
-                      !message.content ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: message.role === "assistant" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: styles.thinkingIndicator, children: TRANSLATIONS.thinking }) : null }) : null }) : null
-                    ]
-                  }
-                ),
-                message.role === "assistant" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: styles.productCardsContainer, children: (_a2 = message.safeProductSkus) == null ? void 0 : _a2.map((sku) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.productCard, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: styles.productImageContainer, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                    "img",
-                    {
-                      src: getProductImageUrl(sku),
-                      alt: sku,
-                      style: {
-                        maxHeight: "100%",
-                        maxWidth: "100%"
+                style: {
+                  ...styles2.inputSection,
+                  backgroundColor: themeObj().mainBackgroundColor || styles2.inputSection.backgroundColor
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles2.inputWrapper, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      "input",
+                      {
+                        id: "shop-prompter-input",
+                        type: "text",
+                        style: styles2.input,
+                        placeholder: (agentExperience == null ? void 0 : agentExperience.hintText) || TRANSLATIONS.askMeAnything,
+                        value: input,
+                        onInput: (e) => onInputChange(e),
+                        onKeyDown: (e) => onInputKeyDown(e)
                       }
-                    }
-                  ) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.productInfo, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: styles.productSku, children: sku }),
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                      "a",
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      "button",
                       {
-                        href: getProductLink(sku),
-                        style: styles.productLink,
-                        children: "VIEW DETAILS"
+                        onClick: (e) => handleSend(),
+                        style: {
+                          ...styles2.formButton,
+                          ...styles2.sendButton,
+                          backgroundColor: themeObj().actionColor || styles2.sendButton.backgroundColor
+                        },
+                        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                          "img",
+                          {
+                            alt: "Send",
+                            src: ICONS.sendHorizontal,
+                            style: {
+                              padding: "4px"
+                            }
+                          }
+                        )
                       }
                     )
-                  ] })
-                ] }, sku)) }) : null
-              ]
-            },
-            message.id
-          );
-        }) }),
-        error ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.errorContainer, children: [
-          "Error: ",
-          error
-        ] }) : null
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.inputSection, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.inputWrapper, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "input",
-            {
-              type: "text",
-              style: styles.input,
-              placeholder: TRANSLATIONS.askMeAnything,
-              value: input,
-              onInput: (e) => onInputChange(e),
-              onKeyDown: (e) => onInputKeyDown(e)
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "button",
-            {
-              onClick: (e) => handleSend(),
-              style: {
-                ...styles.formButton,
-                ...styles.sendButton
-              },
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { alt: "Send", src: ICONS.sendHorizontal })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: styles.disclaimer, children: "AI content may be inaccurate." })
-      ] })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { style: styles2.disclaimer, children: "AI content may be inaccurate." })
+                ]
+              }
+            )
+          ]
+        }
+      ) : null
     ] }) : null
   ] });
 }