@yassirbenmoussa/aicommerce-sdk 1.9.0 → 1.9.1

package/dist/index.mjs

@@ -905,7 +905,7 @@ function createWidgetStyles(config) {
    Embedded Mode Styles - ChatGPT Style
    ============================================ */
 
-/* Embedded container - fit content with max height */
+/* Embedded container - starts small, grows to max-height, then scrolls */
 #aicommerce-widget.aicommerce-embedded {
     position: relative;
     bottom: auto;
@@ -913,6 +913,7 @@ function createWidgetStyles(config) {
     right: auto;
     width: 100%;
     height: auto;
+    min-height: 80px;
     max-height: var(--aic-max-height, 600px);
     display: flex;
     flex-direction: column;
@@ -934,11 +935,12 @@ function createWidgetStyles(config) {
     display: none !important;
 }
 
-/* Embedded mode: chat fills container with transparent background */
+/* Embedded mode: chat container grows with content */
 .aicommerce-embedded .aicommerce-chat {
     position: relative;
     width: 100%;
     height: auto;
+    max-height: 100%;
     max-width: 100%;
     border-radius: 0;
     background: transparent;
@@ -957,13 +959,15 @@ function createWidgetStyles(config) {
     pointer-events: auto !important;
 }
 
-/* Embedded mode: messages area - messages start from bottom, grow upward */
+/* Embedded mode: messages area - scrollable when content overflows */
 .aicommerce-embedded .aicommerce-messages {
+    flex: 1 1 auto;
+    min-height: 0;
+    max-height: calc(var(--aic-max-height, 600px) - 100px);
     display: flex;
     flex-direction: column;
-    justify-content: flex-end;
+    justify-content: flex-start;
     overflow-y: auto;
-    max-height: calc(var(--aic-max-height, 600px) - 100px);
     padding: 16px;
     max-width: 700px;
     margin: 0 auto;
@@ -1088,19 +1092,28 @@ function createWidgetStyles(config) {
     color: var(--aic-text);
 }
 
-/* Embedded mode: product cards styling */
+/* Embedded mode: product cards styling - horizontal scroll like widget mode */
 .aicommerce-embedded .aicommerce-products {
     display: flex;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
     gap: 12px;
     margin-top: 12px;
+    overflow-x: auto;
+    padding-bottom: 8px;
+    cursor: grab;
+    scrollbar-width: none;
+}
+
+.aicommerce-embedded .aicommerce-products::-webkit-scrollbar {
+    display: none;
 }
 
 .aicommerce-embedded .aicommerce-product-card {
+    flex-shrink: 0;
+    width: 180px;
     background: var(--aic-bg);
     border: 1px solid var(--aic-border);
     border-radius: 12px;
-    max-width: 180px;
 }
 
 /* Embedded mode: typing indicator */
@@ -1326,13 +1339,20 @@ function createWidget(config) {
     render();
   }
   async function addToShopifyCart(variantId, quantity = 1) {
+    let numericVariantId = variantId;
+    if (variantId.includes("gid://")) {
+      const match = variantId.match(/\/(\d+)$/);
+      if (match) {
+        numericVariantId = match[1];
+      }
+    }
     const response = await fetch("/cart/add.js", {
       method: "POST",
       headers: {
         "Content-Type": "application/json"
       },
       body: JSON.stringify({
-        id: variantId,
+        id: numericVariantId,
         quantity
       })
     });
@@ -1424,7 +1444,7 @@ function createWidget(config) {
                             ${msg.products && msg.products.length > 0 ? `
                                 <div class="aicommerce-products">
                                     ${msg.products.map((product) => `
-                                        <div class="aicommerce-product-card" data-product-id="${product.id}">
+                                        <div class="aicommerce-product-card" data-product-id="${product.id}" data-variant-id="${product.variantId || ""}">
                                             ${product.image || product.imageUrl ? `
                                                 <img src="${product.image || product.imageUrl}" alt="${escapeHtml(product.name)}" class="aicommerce-product-image" />
                                             ` : `
@@ -1434,6 +1454,13 @@ function createWidget(config) {
                                                 <span class="aicommerce-product-name" title="${escapeHtml(product.name)}">${escapeHtml(product.name)}</span>
                                                 ${product.description ? `<p class="aicommerce-product-desc">${escapeHtml(product.description)}</p>` : ""}
                                                 <span class="aicommerce-product-price">${formatPrice(product.price, product.currency)}</span>
+                                                <button class="aicommerce-add-to-cart" data-product-id="${product.id}">
+                                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                                        <circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/>
+                                                        <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/>
+                                                    </svg>
+                                                    ${resolvedConfig.addToCartText || "Add to Cart"}
+                                                </button>
                                             </div>
                                         </div>
                                     `).join("")}