@yassirbenmoussa/aicommerce-sdk 1.2.0 → 1.3.0

package/dist/index.cjs

@@ -191,6 +191,49 @@ var init_client = __esm({
         }
         return response;
       }
+      /**
+       * Send an audio message and get product recommendations
+       * 
+       * @param audioBlob - Audio blob (from MediaRecorder or file input)
+       * @param context - Optional context for better recommendations
+       * @returns Chat response with AI reply and products
+       * 
+       * @example
+       * ```typescript
+       * // Record audio using MediaRecorder
+       * const mediaRecorder = new MediaRecorder(stream);
+       * const chunks: Blob[] = [];
+       * mediaRecorder.ondataavailable = (e) => chunks.push(e.data);
+       * mediaRecorder.onstop = async () => {
+       *   const audioBlob = new Blob(chunks, { type: 'audio/webm' });
+       *   const response = await client.chatWithAudio(audioBlob);
+       *   console.log(response.reply);
+       * };
+       * ```
+       */
+      async chatWithAudio(audioBlob, context) {
+        const arrayBuffer = await audioBlob.arrayBuffer();
+        const base64 = btoa(
+          new Uint8Array(arrayBuffer).reduce(
+            (data, byte) => data + String.fromCharCode(byte),
+            ""
+          )
+        );
+        const request = {
+          audioBase64: base64,
+          audioMimeType: audioBlob.type || "audio/webm",
+          context,
+          sessionToken: this.sessionToken || void 0
+        };
+        const response = await this.request("/api/v1/chat", {
+          method: "POST",
+          body: JSON.stringify(request)
+        });
+        if (response.sessionToken) {
+          this.sessionToken = response.sessionToken;
+        }
+        return response;
+      }
       /**
        * Create a new chat session
        * 
@@ -552,15 +595,24 @@ function createWidgetStyles(config) {
 /* Product Cards */
 .aicommerce-products {
     display: flex;
-    gap: 8px;
+    gap: 16px;
     margin-top: 12px;
     overflow-x: auto;
-    padding-bottom: 4px;
+    padding-bottom: 16px;
+    width: 100%;
+    max-width: 100%;
+    cursor: grab;
+    user-select: none;
+    -webkit-user-select: none;
+    scrollbar-width: none; /* Firefox */
+}
+.aicommerce-products::-webkit-scrollbar {
+    display: none; /* Chrome/Safari */
 }
 
 .aicommerce-product-card {
     flex-shrink: 0;
-    width: 140px;
+    width: 280px;
     background: var(--aic-bg);
     border-radius: 12px;
     overflow: hidden;
@@ -576,13 +628,15 @@ function createWidgetStyles(config) {
 
 .aicommerce-product-image {
     width: 100%;
-    height: 100px;
+    aspect-ratio: 16/9;
+    height: auto;
     object-fit: cover;
 }
 
 .aicommerce-product-placeholder {
     width: 100%;
-    height: 100px;
+    aspect-ratio: 16/9;
+    height: auto;
     background: var(--aic-bg-secondary);
     display: flex;
     align-items: center;
@@ -612,6 +666,109 @@ function createWidgetStyles(config) {
     color: var(--aic-primary);
 }
 
+.aicommerce-product-desc {
+    font-size: 12px;
+    color: var(--aic-text-secondary);
+    line-height: 1.4;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    margin-top: 4px;
+}
+
+/* Audio Player */
+.aicommerce-audio-player {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    min-width: 240px;
+    padding: 4px 0;
+}
+
+.aicommerce-audio-btn {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    cursor: pointer;
+    transition: all 0.2s;
+    background: rgba(255, 255, 255, 0.25);
+    color: white;
+    flex-shrink: 0;
+    padding: 0;
+}
+
+.aicommerce-audio-btn:hover {
+    background: rgba(255, 255, 255, 0.35);
+    transform: scale(1.05);
+}
+
+.aicommerce-audio-btn:active {
+    transform: scale(0.95);
+}
+
+/* Invert colors for assistant (since background is white/gray) */
+.aicommerce-assistant .aicommerce-audio-btn {
+    background: var(--aic-primary);
+    color: white;
+}
+.aicommerce-assistant .aicommerce-audio-btn:hover {
+    background: var(--aic-primary-dark);
+}
+
+.aicommerce-audio-waveform {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    min-width: 0; /* Prevent overflow */
+}
+
+.aicommerce-waveform-bars {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    height: 24px;
+    cursor: pointer;
+    width: 100%;
+}
+
+.aicommerce-waveform-bar {
+    width: 3px;
+    border-radius: 2px;
+    min-height: 3px;
+    transition: background-color 0.1s;
+    flex-shrink: 0;
+}
+
+.aicommerce-audio-time {
+    display: flex;
+    justify-content: space-between;
+    font-size: 11px;
+    font-weight: 500;
+}
+
+.aicommerce-user .aicommerce-audio-time {
+    color: rgba(255, 255, 255, 0.8);
+}
+.aicommerce-assistant .aicommerce-audio-time {
+    color: var(--aic-text-secondary);
+}
+
+/* RTL Support */
+.aicommerce-rtl {
+    direction: rtl;
+    text-align: right;
+}
+.aicommerce-ltr {
+    direction: ltr;
+    text-align: left;
+}
+
 /* Input Area */
 .aicommerce-input-container {
     padding: 16px 20px;
@@ -666,6 +823,44 @@ function createWidgetStyles(config) {
     cursor: not-allowed;
 }
 
+/* Microphone Button */
+.aicommerce-mic {
+    width: 44px;
+    height: 44px;
+    border-radius: 50%;
+    background: var(--aic-bg-secondary);
+    border: 1px solid var(--aic-border);
+    color: var(--aic-text-secondary);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s;
+}
+
+.aicommerce-mic:hover:not(:disabled) {
+    background: var(--aic-primary-light);
+    border-color: var(--aic-primary);
+    color: var(--aic-primary);
+}
+
+.aicommerce-mic.aicommerce-recording {
+    background: #ef4444;
+    border-color: #ef4444;
+    color: white;
+    animation: aic-recording-pulse 1s infinite;
+}
+
+.aicommerce-mic:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+@keyframes aic-recording-pulse {
+    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
+    50% { transform: scale(1.05); box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
+}
+
 /* Mobile Responsive */
 @media (max-width: 420px) {
     #aicommerce-widget {
@@ -737,9 +932,12 @@ function createWidget(config) {
   const state = {
     isOpen: false,
     isLoading: true,
+    isRecording: false,
     messages: [],
     storeConfig: null
   };
+  let mediaRecorder = null;
+  let audioChunks = [];
   let container = null;
   let styleElement = null;
   let resolvedConfig;
@@ -822,20 +1020,26 @@ function createWidget(config) {
                 </div>
                 
                 <div class="aicommerce-messages">
-                    ${state.messages.map((msg) => `
+                    ${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">${escapeHtml(msg.content)}</div>
+                            <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}">
-                                            ${product.imageUrl ? `
-                                                <img src="${product.imageUrl}" alt="${escapeHtml(product.name)}" class="aicommerce-product-image" />
+                                            ${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">${escapeHtml(product.name)}</span>
+                                                <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>
                                             </div>
                                         </div>
@@ -843,7 +1047,8 @@ function createWidget(config) {
                                 </div>
                             ` : ""}
                         </div>
-                    `).join("")}
+                    `;
+    }).join("")}
                     ${state.isLoading ? `
                         <div class="aicommerce-message aicommerce-assistant">
                             <div class="aicommerce-typing">
@@ -858,9 +1063,23 @@ function createWidget(config) {
                         type="text" 
                         class="aicommerce-input" 
                         placeholder="Type your message..."
-                        ${state.isLoading ? "disabled" : ""}
+                        ${state.isLoading || state.isRecording ? "disabled" : ""}
                     />
-                    <button class="aicommerce-send" ${state.isLoading ? "disabled" : ""} aria-label="Send message">
+                    <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>
@@ -875,6 +1094,27 @@ function createWidget(config) {
       messagesEl.scrollTop = messagesEl.scrollHeight;
     }
   }
+  function renderAudioPlayer(msg, index, isUser) {
+    return `
+            <div class="aicommerce-audio-player" data-message-index="${index}">
+                <button class="aicommerce-audio-btn">
+                     <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
+                </button>
+                <div class="aicommerce-audio-waveform">
+                    <div class="aicommerce-waveform-bars">
+                        ${(msg.waveformBars || Array(40).fill(10)).map((height) => `
+                            <div class="aicommerce-waveform-bar" style="height: ${height}%; background-color: ${isUser ? "rgba(255,255,255,0.4)" : "rgba(99,102,241,0.3)"}"></div>
+                        `).join("")}
+                    </div>
+                    <div class="aicommerce-audio-time">
+                        <span class="aicommerce-current-time">0:00</span>
+                        <span>${formatTime(msg.audioDuration || 0)}</span>
+                    </div>
+                </div>
+                <audio src="${msg.audioUrl}" preload="metadata"></audio>
+            </div>
+        `;
+  }
   function attachEventListeners() {
     if (!container) return;
     const launcherEl = container.querySelector(".aicommerce-launcher");
@@ -903,6 +1143,10 @@ function createWidget(config) {
         }
       });
     }
+    const micEl = container.querySelector(".aicommerce-mic");
+    if (micEl) {
+      micEl.addEventListener("click", () => handleMicClick());
+    }
     const productCards = container.querySelectorAll(".aicommerce-product-card");
     productCards.forEach((card) => {
       card.addEventListener("click", () => {
@@ -913,6 +1157,208 @@ function createWidget(config) {
         }
       });
     });
+    const sliders = container.querySelectorAll(".aicommerce-products");
+    sliders.forEach((slider) => {
+      let isDown = false;
+      let startX = 0;
+      let scrollLeft = 0;
+      slider.addEventListener("mousedown", (e) => {
+        isDown = true;
+        slider.style.cursor = "grabbing";
+        startX = e.pageX - slider.offsetLeft;
+        scrollLeft = slider.scrollLeft;
+      });
+      slider.addEventListener("mouseleave", () => {
+        isDown = false;
+        slider.style.cursor = "grab";
+      });
+      slider.addEventListener("mouseup", () => {
+        isDown = false;
+        slider.style.cursor = "grab";
+      });
+      slider.addEventListener("mousemove", (e) => {
+        if (!isDown) return;
+        e.preventDefault();
+        const x = e.pageX - slider.offsetLeft;
+        const walk = (x - startX) * 2;
+        slider.scrollLeft = scrollLeft - walk;
+      });
+    });
+    const audioPlayers = container.querySelectorAll(".aicommerce-audio-player");
+    audioPlayers.forEach((player) => {
+      const audio = player.querySelector("audio");
+      const btn = player.querySelector(".aicommerce-audio-btn");
+      const bars = player.querySelectorAll(".aicommerce-waveform-bar");
+      const timeDisplay = player.querySelector(".aicommerce-current-time");
+      if (!audio || !btn) return;
+      btn.addEventListener("click", () => {
+        const isPlaying = !audio.paused;
+        if (!isPlaying) {
+          container?.querySelectorAll("audio").forEach((a) => {
+            if (a !== audio && !a.paused) {
+              a.pause();
+              const parent = a.closest(".aicommerce-audio-player");
+              const otherBtn = parent?.querySelector(".aicommerce-audio-btn");
+              if (otherBtn) otherBtn.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>`;
+            }
+          });
+          audio.play();
+          btn.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2"><rect x="6" y="4" width="4" height="16"></rect><rect x="14" y="4" width="4" height="16"></rect></svg>`;
+        } else {
+          audio.pause();
+          btn.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>`;
+        }
+      });
+      audio.addEventListener("timeupdate", () => {
+        if (timeDisplay) timeDisplay.textContent = formatTime(audio.currentTime);
+        if (audio.duration) {
+          const progress = audio.currentTime / audio.duration * 100;
+          bars.forEach((bar, i) => {
+            const barPos = i / bars.length * 100;
+            if (barPos <= progress) {
+              bar.style.backgroundColor = player.closest(".aicommerce-user") ? "rgba(255,255,255,1)" : "var(--aic-primary)";
+            } else {
+              bar.style.backgroundColor = player.closest(".aicommerce-user") ? "rgba(255,255,255,0.4)" : "rgba(99,102,241,0.3)";
+            }
+          });
+        }
+      });
+      audio.addEventListener("ended", () => {
+        btn.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>`;
+      });
+      const waveform = player.querySelector(".aicommerce-waveform-bars");
+      if (waveform) {
+        waveform.addEventListener("click", (e) => {
+          const rect = waveform.getBoundingClientRect();
+          const x = e.clientX - rect.left;
+          const percent = x / rect.width;
+          if (audio.duration) {
+            audio.currentTime = percent * audio.duration;
+          }
+        });
+      }
+    });
+  }
+  async function handleMicClick() {
+    if (state.isRecording) {
+      if (mediaRecorder && mediaRecorder.state !== "inactive") {
+        mediaRecorder.stop();
+      }
+    } else {
+      try {
+        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+        audioChunks = [];
+        mediaRecorder = new MediaRecorder(stream, {
+          mimeType: MediaRecorder.isTypeSupported("audio/webm") ? "audio/webm" : "audio/mp4"
+        });
+        mediaRecorder.ondataavailable = (e) => {
+          if (e.data.size > 0) {
+            audioChunks.push(e.data);
+          }
+        };
+        mediaRecorder.onstop = async () => {
+          stream.getTracks().forEach((track) => track.stop());
+          if (audioChunks.length > 0) {
+            const audioBlob = new Blob(audioChunks, { type: mediaRecorder?.mimeType || "audio/webm" });
+            await handleAudioSend(audioBlob);
+          }
+          state.isRecording = false;
+          render();
+        };
+        mediaRecorder.start();
+        state.isRecording = true;
+        render();
+      } catch (error) {
+        console.error("Failed to start recording:", error);
+        state.messages.push({
+          role: "assistant",
+          content: "Unable to access microphone. Please check your permissions."
+        });
+        render();
+      }
+    }
+  }
+  async function handleAudioSend(audioBlob) {
+    const audioUrl = URL.createObjectURL(audioBlob);
+    let waveformBars = Array(40).fill(10);
+    let audioDuration = 0;
+    try {
+      waveformBars = await analyzeAudio(audioBlob);
+      const audio = new Audio(audioUrl);
+      await new Promise((resolve) => {
+        audio.onloadedmetadata = () => {
+          audioDuration = audio.duration;
+          resolve();
+        };
+        audio.onerror = () => resolve();
+      });
+    } catch (e) {
+      console.error("Audio analysis failed", e);
+    }
+    state.messages.push({
+      role: "user",
+      content: "Voice message",
+      audioUrl,
+      audioDuration,
+      waveformBars
+    });
+    state.isLoading = true;
+    render();
+    try {
+      const response = await client.chatWithAudio(audioBlob);
+      state.messages.push({
+        role: "assistant",
+        content: response.reply,
+        products: response.products
+      });
+      if (resolvedConfig.onMessage) {
+        resolvedConfig.onMessage("Voice message", response);
+      }
+      return response;
+    } catch (error) {
+      state.messages.push({
+        role: "assistant",
+        content: "Sorry, I encountered an error processing your voice message. Please try again."
+      });
+      throw error;
+    } finally {
+      state.isLoading = false;
+      render();
+    }
+  }
+  function isArabic(text) {
+    return /[\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF\uFB50-\uFDFF\uFE70-\uFEFF]/.test(text);
+  }
+  function formatTime(seconds) {
+    const mins = Math.floor(seconds / 60);
+    const secs = Math.floor(seconds % 60);
+    return `${mins}:${secs.toString().padStart(2, "0")}`;
+  }
+  async function analyzeAudio(blob) {
+    try {
+      const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+      const arrayBuffer = await blob.arrayBuffer();
+      const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
+      const channelData = audioBuffer.getChannelData(0);
+      const bars = 40;
+      const step = Math.floor(channelData.length / bars);
+      const calculatedBars = [];
+      for (let i = 0; i < bars; i++) {
+        const start = i * step;
+        const end = start + step;
+        let sum = 0;
+        for (let j = start; j < end; j++) {
+          if (channelData[j]) sum += channelData[j] * channelData[j];
+        }
+        const rms = Math.sqrt(sum / step);
+        const height = Math.min(100, Math.max(10, rms * 400));
+        calculatedBars.push(height);
+      }
+      return calculatedBars;
+    } catch (e) {
+      console.error("Analysis error", e);
+      return Array.from({ length: 40 }, () => 20 + Math.random() * 60);
+    }
   }
   async function handleSend(message) {
     state.messages.push({ role: "user", content: message });