@yassirbenmoussa/aicommerce-sdk 1.7.0 → 1.9.0

package/dist/index.mjs

@@ -900,6 +900,301 @@ function createWidgetStyles(config) {
 .aicommerce-messages::-webkit-scrollbar-thumb:hover {
     background: var(--aic-text-secondary);
 }
+
+/* ============================================
+   Embedded Mode Styles - ChatGPT Style
+   ============================================ */
+
+/* Embedded container - fit content with max height */
+#aicommerce-widget.aicommerce-embedded {
+    position: relative;
+    bottom: auto;
+    left: auto;
+    right: auto;
+    width: 100%;
+    height: auto;
+    max-height: var(--aic-max-height, 600px);
+    display: flex;
+    flex-direction: column;
+    background: transparent;
+}
+
+/* Embedded mode: hide launcher button */
+.aicommerce-embedded .aicommerce-launcher {
+    display: none !important;
+}
+
+/* Embedded mode: hide the header completely */
+.aicommerce-embedded .aicommerce-header {
+    display: none !important;
+}
+
+/* Embedded mode: hide close button */
+.aicommerce-embedded .aicommerce-close {
+    display: none !important;
+}
+
+/* Embedded mode: chat fills container with transparent background */
+.aicommerce-embedded .aicommerce-chat {
+    position: relative;
+    width: 100%;
+    height: auto;
+    max-width: 100%;
+    border-radius: 0;
+    background: transparent;
+    box-shadow: none;
+    transform: none !important;
+    opacity: 1 !important;
+    pointer-events: auto !important;
+    display: flex;
+    flex-direction: column;
+}
+
+/* Embedded mode: no open/close animations */
+.aicommerce-embedded .aicommerce-chat.aicommerce-closed {
+    opacity: 1 !important;
+    transform: none !important;
+    pointer-events: auto !important;
+}
+
+/* Embedded mode: messages area - messages start from bottom, grow upward */
+.aicommerce-embedded .aicommerce-messages {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    overflow-y: auto;
+    max-height: calc(var(--aic-max-height, 600px) - 100px);
+    padding: 16px;
+    max-width: 700px;
+    margin: 0 auto;
+    width: 100%;
+    background: transparent;
+    gap: 12px;
+    scrollbar-width: thin;
+    scrollbar-color: var(--aic-border) transparent;
+}
+
+/* Embedded mode: custom scrollbar for webkit browsers */
+.aicommerce-embedded .aicommerce-messages::-webkit-scrollbar {
+    width: 6px;
+}
+
+.aicommerce-embedded .aicommerce-messages::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.aicommerce-embedded .aicommerce-messages::-webkit-scrollbar-thumb {
+    background-color: var(--aic-border);
+    border-radius: 3px;
+}
+
+.aicommerce-embedded .aicommerce-messages::-webkit-scrollbar-thumb:hover {
+    background-color: var(--aic-text-secondary);
+}
+
+/* Embedded mode: messages have different styling */
+.aicommerce-embedded .aicommerce-message {
+    max-width: 100%;
+}
+
+.aicommerce-embedded .aicommerce-message-content {
+    background: var(--aic-bg);
+    border: 1px solid var(--aic-border);
+    border-radius: 12px;
+    padding: 12px 16px;
+}
+
+.aicommerce-embedded .aicommerce-user .aicommerce-message-content {
+    background: var(--aic-primary);
+    color: white;
+    border-color: var(--aic-primary);
+}
+
+/* Embedded mode: input container wrapper - always at bottom */
+.aicommerce-embedded .aicommerce-input-wrapper {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 16px;
+    flex-shrink: 0;
+}
+
+/* Embedded mode: input container styled like ChatGPT */
+.aicommerce-embedded .aicommerce-input-container {
+    width: 100%;
+    max-width: 700px;
+    background: var(--aic-bg);
+    border: 1px solid var(--aic-border);
+    border-radius: 24px;
+    padding: 8px 12px;
+    display: flex;
+    align-items: flex-end;
+    gap: 8px;
+}
+
+/* Embedded mode: textarea field styling - auto-grow */
+.aicommerce-embedded .aicommerce-input {
+    flex: 1;
+    min-width: 0;
+    border: none;
+    background: transparent;
+    padding: 8px 4px;
+    font-size: 16px;
+    font-family: inherit;
+    color: var(--aic-text);
+    outline: none;
+    resize: none;
+    min-height: 24px;
+    max-height: 150px;
+    line-height: 1.5;
+    overflow-y: auto;
+}
+
+.aicommerce-embedded .aicommerce-input::placeholder {
+    color: var(--aic-text-secondary);
+}
+
+/* Embedded mode: buttons styling - smaller, no overflow */
+.aicommerce-embedded .aicommerce-mic,
+.aicommerce-embedded .aicommerce-send {
+    flex-shrink: 0;
+    width: 36px;
+    height: 36px;
+    min-width: 36px;
+    border-radius: 50%;
+    background: var(--aic-primary);
+    color: white;
+    border: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.aicommerce-embedded .aicommerce-mic:hover,
+.aicommerce-embedded .aicommerce-send:hover {
+    opacity: 0.9;
+}
+
+.aicommerce-embedded .aicommerce-mic {
+    background: transparent;
+    color: var(--aic-text-secondary);
+}
+
+.aicommerce-embedded .aicommerce-mic:hover {
+    background: rgba(0, 0, 0, 0.05);
+    color: var(--aic-text);
+}
+
+/* Embedded mode: product cards styling */
+.aicommerce-embedded .aicommerce-products {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+    margin-top: 12px;
+}
+
+.aicommerce-embedded .aicommerce-product-card {
+    background: var(--aic-bg);
+    border: 1px solid var(--aic-border);
+    border-radius: 12px;
+    max-width: 180px;
+}
+
+/* Embedded mode: typing indicator */
+.aicommerce-embedded .aicommerce-typing {
+    background: var(--aic-bg);
+    border: 1px solid var(--aic-border);
+    border-radius: 12px;
+    padding: 12px 16px;
+}
+
+/* Embedded mode responsive - mobile fixes */
+@media (max-width: 640px) {
+    .aicommerce-embedded .aicommerce-input-container {
+        padding: 6px 10px;
+        gap: 6px;
+        border-radius: 20px;
+    }
+    
+    .aicommerce-embedded .aicommerce-mic,
+    .aicommerce-embedded .aicommerce-send {
+        width: 32px;
+        height: 32px;
+        min-width: 32px;
+    }
+    
+    .aicommerce-embedded .aicommerce-mic svg,
+    .aicommerce-embedded .aicommerce-send svg {
+        width: 16px;
+        height: 16px;
+    }
+    
+    .aicommerce-embedded .aicommerce-input {
+        font-size: 16px;
+        padding: 6px 4px;
+    }
+    
+    .aicommerce-embedded .aicommerce-messages {
+        padding: 12px;
+    }
+    
+    .aicommerce-embedded .aicommerce-input-wrapper {
+        padding: 12px;
+    }
+}
+
+/* ============================================
+   Add to Cart Button Styles
+   ============================================ */
+
+.aicommerce-add-to-cart {
+    width: 100%;
+    padding: 8px 12px;
+    background: var(--aic-primary);
+    color: white;
+    border: none;
+    border-radius: 6px;
+    font-size: 12px;
+    font-weight: 500;
+    cursor: pointer;
+    margin-top: 8px;
+    transition: all 0.2s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+}
+
+.aicommerce-add-to-cart:hover {
+    opacity: 0.9;
+    transform: translateY(-1px);
+}
+
+.aicommerce-add-to-cart:active {
+    transform: translateY(0);
+}
+
+.aicommerce-add-to-cart:disabled {
+    opacity: 0.7;
+    cursor: not-allowed;
+    transform: none;
+}
+
+.aicommerce-add-to-cart svg {
+    flex-shrink: 0;
+}
+
+/* Spinner animation for loading state */
+@keyframes aicommerce-spin {
+    to { transform: rotate(360deg); }
+}
+
+.aicommerce-spinner {
+    animation: aicommerce-spin 1s linear infinite;
+}
 `;
 }
 function injectStyles(css) {
@@ -970,10 +1265,16 @@ function createWidget(config) {
   }
   async function initialize() {
     state.storeConfig = await fetchStoreConfig();
+    const displayMode = config.displayMode || "widget";
+    const isEmbedded = displayMode === "embedded";
     resolvedConfig = {
       apiKey: config.apiKey,
       storeId: config.storeId,
       baseUrl: config.baseUrl || detectBaseUrl(),
+      displayMode,
+      container: config.container,
+      maxHeight: config.maxHeight || "600px",
+      placeholder: config.placeholder || "Ask me anything about our products...",
       position: config.position || "bottom-right",
       theme: config.theme || "auto",
       primaryColor: config.primaryColor || state.storeConfig?.primaryColor || "#6366f1",
@@ -982,35 +1283,120 @@ function createWidget(config) {
       zIndex: config.zIndex || 9999,
       buttonText: config.buttonText || "\u{1F4AC}",
       hideLauncher: config.hideLauncher || false,
+      addToCartText: config.addToCartText,
       onOpen: config.onOpen,
       onClose: config.onClose,
       onProductClick: config.onProductClick,
+      onAddToCart: config.onAddToCart,
       onMessage: config.onMessage
     };
     const styles = createWidgetStyles(resolvedConfig);
     styleElement = injectStyles(styles);
-    container = document.createElement("div");
-    container.id = "aicommerce-widget";
-    container.className = `aicommerce-widget aicommerce-${resolvedConfig.position} aicommerce-theme-${resolvedConfig.theme}`;
-    document.body.appendChild(container);
+    if (isEmbedded) {
+      let targetContainer = null;
+      if (typeof config.container === "string") {
+        targetContainer = document.querySelector(config.container);
+      } else if (config.container instanceof HTMLElement) {
+        targetContainer = config.container;
+      }
+      if (!targetContainer) {
+        console.error("[AI Commerce] Embedded mode requires a valid container element or selector");
+        return;
+      }
+      container = document.createElement("div");
+      container.id = "aicommerce-widget";
+      container.className = `aicommerce-widget aicommerce-embedded aicommerce-theme-${resolvedConfig.theme}`;
+      container.style.setProperty("--aic-max-height", resolvedConfig.maxHeight);
+      targetContainer.appendChild(container);
+      state.isOpen = true;
+    } else {
+      container = document.createElement("div");
+      container.id = "aicommerce-widget";
+      container.className = `aicommerce-widget aicommerce-${resolvedConfig.position} aicommerce-theme-${resolvedConfig.theme}`;
+      document.body.appendChild(container);
+    }
     render();
-    state.messages.push({
-      role: "assistant",
-      content: resolvedConfig.welcomeMessage
-    });
+    if (!isEmbedded) {
+      state.messages.push({
+        role: "assistant",
+        content: resolvedConfig.welcomeMessage
+      });
+    }
     state.isLoading = false;
     render();
   }
+  async function addToShopifyCart(variantId, quantity = 1) {
+    const response = await fetch("/cart/add.js", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({
+        id: variantId,
+        quantity
+      })
+    });
+    if (!response.ok) {
+      throw new Error("Failed to add to cart");
+    }
+    document.dispatchEvent(new CustomEvent("cart:refresh"));
+  }
   function render() {
     if (!container) return;
+    const isEmbedded = resolvedConfig.displayMode === "embedded";
+    const hasUserMessages = state.messages.some((m) => m.role === "user");
+    if (isEmbedded) {
+      container.classList.remove("aicommerce-no-messages", "aicommerce-has-messages");
+      container.classList.add(hasUserMessages ? "aicommerce-has-messages" : "aicommerce-no-messages");
+    }
+    const placeholder = resolvedConfig.placeholder || "Ask me anything about our products...";
+    const inputContainerHtml = `
+            <div class="aicommerce-input-container">
+                ${isEmbedded ? `
+                <textarea 
+                    class="aicommerce-input" 
+                    placeholder="${placeholder}"
+                    rows="1"
+                    ${state.isLoading || state.isRecording ? "disabled" : ""}
+                ></textarea>
+                ` : `
+                <input 
+                    type="text" 
+                    class="aicommerce-input" 
+                    placeholder="${placeholder}"
+                    ${state.isLoading || state.isRecording ? "disabled" : ""}
+                />
+                `}
+                <button class="aicommerce-mic ${state.isRecording ? "aicommerce-recording" : ""}" ${state.isLoading ? "disabled" : ""} aria-label="${state.isRecording ? "Stop recording" : "Voice input"}">
+                    ${state.isRecording ? `
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                            <rect x="6" y="6" width="12" height="12" rx="2"/>
+                        </svg>
+                    ` : `
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/>
+                            <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
+                            <line x1="12" y1="19" x2="12" y2="23"/>
+                            <line x1="8" y1="23" x2="16" y2="23"/>
+                        </svg>
+                    `}
+                </button>
+                <button class="aicommerce-send" ${state.isLoading || state.isRecording ? "disabled" : ""} aria-label="Send message">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M22 2L11 13M22 2L15 22L11 13M22 2L2 9L11 13"/>
+                    </svg>
+                </button>
+            </div>
+        `;
     const html = `
-            ${!resolvedConfig.hideLauncher ? `
+            ${!isEmbedded && !resolvedConfig.hideLauncher ? `
                 <button class="aicommerce-launcher ${state.isOpen ? "aicommerce-hidden" : ""}" aria-label="Open chat">
                     <span class="aicommerce-launcher-icon">${resolvedConfig.buttonText}</span>
                 </button>
             ` : ""}
             
             <div class="aicommerce-chat ${state.isOpen ? "aicommerce-open" : "aicommerce-closed"}">
+                ${!isEmbedded ? `
                 <div class="aicommerce-header">
                     <div class="aicommerce-header-info">
                         <div class="aicommerce-avatar">
@@ -1023,7 +1409,9 @@ function createWidget(config) {
                     </div>
                     <button class="aicommerce-close" aria-label="Close chat">\u2715</button>
                 </div>
+                ` : ""}
                 
+                ${isEmbedded && hasUserMessages ? `
                 <div class="aicommerce-messages">
                     ${state.messages.map((msg, index) => {
       const isRtl = isArabic(msg.content);
@@ -1062,34 +1450,61 @@ function createWidget(config) {
                         </div>
                     ` : ""}
                 </div>
+                ` : ""}
                 
-                <div class="aicommerce-input-container">
-                    <input 
-                        type="text" 
-                        class="aicommerce-input" 
-                        placeholder="Type your message..."
-                        ${state.isLoading || state.isRecording ? "disabled" : ""}
-                    />
-                    <button class="aicommerce-mic ${state.isRecording ? "aicommerce-recording" : ""}" ${state.isLoading ? "disabled" : ""} aria-label="${state.isRecording ? "Stop recording" : "Voice input"}">
-                        ${state.isRecording ? `
-                            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
-                                <rect x="6" y="6" width="12" height="12" rx="2"/>
-                            </svg>
-                        ` : `
-                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/>
-                                <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
-                                <line x1="12" y1="19" x2="12" y2="23"/>
-                                <line x1="8" y1="23" x2="16" y2="23"/>
-                            </svg>
-                        `}
-                    </button>
-                    <button class="aicommerce-send" ${state.isLoading || state.isRecording ? "disabled" : ""} aria-label="Send message">
-                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                            <path d="M22 2L11 13M22 2L15 22L11 13M22 2L2 9L11 13"/>
-                        </svg>
-                    </button>
+                ${!isEmbedded ? `
+                <div class="aicommerce-messages">
+                    ${state.messages.map((msg, index) => {
+      const isRtl = isArabic(msg.content);
+      const isUser = msg.role === "user";
+      return `
+                        <div class="aicommerce-message aicommerce-${msg.role}">
+                            <div class="aicommerce-message-content ${isRtl ? "aicommerce-rtl" : "aicommerce-ltr"}">
+                                ${msg.audioUrl ? renderAudioPlayer(msg, index, isUser) : escapeHtml(msg.content)}
+                            </div>
+                            ${msg.products && msg.products.length > 0 ? `
+                                <div class="aicommerce-products">
+                                    ${msg.products.map((product) => `
+                                        <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" />
+                                            ` : `
+                                                <div class="aicommerce-product-placeholder">\u{1F4E6}</div>
+                                            `}
+                                            <div class="aicommerce-product-info">
+                                                <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("")}
+                                </div>
+                            ` : ""}
+                        </div>
+                    `;
+    }).join("")}
+                    ${state.isLoading ? `
+                        <div class="aicommerce-message aicommerce-assistant">
+                            <div class="aicommerce-typing">
+                                <span></span><span></span><span></span>
+                            </div>
+                        </div>
+                    ` : ""}
+                </div>
+                ` : ""}
+                
+                ${isEmbedded ? `
+                <div class="aicommerce-input-wrapper">
+                    ${inputContainerHtml}
                 </div>
+                ` : inputContainerHtml}
             </div>
         `;
     container.innerHTML = html;
@@ -1133,18 +1548,40 @@ function createWidget(config) {
     const inputEl = container.querySelector(".aicommerce-input");
     const sendEl = container.querySelector(".aicommerce-send");
     if (inputEl) {
-      inputEl.addEventListener("keypress", (e) => {
-        if (e.key === "Enter" && inputEl.value.trim()) {
-          handleSend(inputEl.value.trim());
-          inputEl.value = "";
+      inputEl.addEventListener("keydown", (e) => {
+        const keyEvent = e;
+        if (keyEvent.key === "Enter") {
+          const isTextarea = inputEl instanceof HTMLTextAreaElement;
+          if (isTextarea && keyEvent.shiftKey) {
+            return;
+          }
+          e.preventDefault();
+          const value = inputEl.value.trim();
+          if (value) {
+            handleSend(value);
+            inputEl.value = "";
+            if (isTextarea) {
+              inputEl.style.height = "auto";
+            }
+          }
         }
       });
+      if (inputEl instanceof HTMLTextAreaElement) {
+        inputEl.addEventListener("input", () => {
+          inputEl.style.height = "auto";
+          inputEl.style.height = Math.min(inputEl.scrollHeight, 150) + "px";
+        });
+      }
     }
     if (sendEl && inputEl) {
       sendEl.addEventListener("click", () => {
-        if (inputEl.value.trim()) {
-          handleSend(inputEl.value.trim());
+        const value = inputEl.value.trim();
+        if (value) {
+          handleSend(value);
           inputEl.value = "";
+          if (inputEl instanceof HTMLTextAreaElement) {
+            inputEl.style.height = "auto";
+          }
         }
       });
     }
@@ -1154,7 +1591,8 @@ function createWidget(config) {
     }
     const productCards = container.querySelectorAll(".aicommerce-product-card");
     productCards.forEach((card) => {
-      card.addEventListener("click", () => {
+      card.addEventListener("click", (e) => {
+        if (e.target.closest(".aicommerce-add-to-cart")) return;
         const productId = card.getAttribute("data-product-id");
         const product = state.messages.flatMap((m) => m.products || []).find((p) => p.id === productId);
         if (product) {
@@ -1166,6 +1604,49 @@ function createWidget(config) {
         }
       });
     });
+    const addToCartBtns = container.querySelectorAll(".aicommerce-add-to-cart");
+    addToCartBtns.forEach((btn) => {
+      btn.addEventListener("click", async (e) => {
+        e.stopPropagation();
+        const button = btn;
+        const productCard = button.closest(".aicommerce-product-card");
+        const productId = productCard?.getAttribute("data-product-id");
+        const variantId = productCard?.getAttribute("data-variant-id");
+        const product = state.messages.flatMap((m) => m.products || []).find((p) => p.id === productId);
+        if (!product) return;
+        const originalText = button.innerHTML;
+        button.disabled = true;
+        button.innerHTML = `
+                    <svg class="aicommerce-spinner" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <circle cx="12" cy="12" r="10" stroke-dasharray="32" stroke-dashoffset="32"/>
+                    </svg>
+                    Adding...
+                `;
+        try {
+          if (resolvedConfig.onAddToCart) {
+            await resolvedConfig.onAddToCart(product);
+          } else if (variantId && window.Shopify) {
+            await addToShopifyCart(variantId);
+          } else if (product.url) {
+            window.open(product.url, "_blank", "noopener,noreferrer");
+          }
+          button.innerHTML = `
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <polyline points="20 6 9 17 4 12"/>
+                        </svg>
+                        Added!
+                    `;
+          setTimeout(() => {
+            button.innerHTML = originalText;
+            button.disabled = false;
+          }, 2e3);
+        } catch (error) {
+          console.error("[AI Commerce] Add to cart failed:", error);
+          button.innerHTML = originalText;
+          button.disabled = false;
+        }
+      });
+    });
     const sliders = container.querySelectorAll(".aicommerce-products");
     sliders.forEach((slider) => {
       let isDown = false;