@yassirbenmoussa/aicommerce-sdk 1.1.0 → 1.3.0

package/dist/widget.min.js

@@ -0,0 +1,653 @@
+var AICommerceWidget=(function(exports){'use strict';/*! AI Commerce Widget v1.0.0 | MIT License | https://aicommerce.dev */
+var L=class a{constructor(r){this.sessionToken=null;this.products={create:async r=>this.request("/api/v1/products",{method:"POST",body:JSON.stringify(r)}),batchUpsert:async r=>this.request("/api/v1/products",{method:"POST",body:JSON.stringify({products:r})}),list:async r=>{let e=new URLSearchParams;r?.page&&e.set("page",String(r.page)),r?.perPage&&e.set("perPage",String(r.perPage)),r?.search&&e.set("search",r.search),r?.categoryId&&e.set("categoryId",r.categoryId),r?.isActive!==void 0&&e.set("isActive",String(r.isActive));let s=e.toString();return this.request(`/api/v1/products${s?`?${s}`:""}`)},get:async r=>this.request(`/api/v1/products/${r}`),update:async(r,e)=>this.request(`/api/v1/products/${r}`,{method:"PUT",body:JSON.stringify(e)}),delete:async r=>this.request(`/api/v1/products/${r}`,{method:"DELETE"})};if(!r.apiKey)throw new Error("AICommerce: apiKey is required");this.apiKey=r.apiKey,this.baseUrl=this.normalizeUrl(r.baseUrl||this.detectBaseUrl()),this.timeout=r.timeout||3e4;}detectBaseUrl(){return typeof window<"u"?window.location.origin:"https://api.aicommerce.dev"}normalizeUrl(r){return r.replace(/\/$/,"")}async request(r,e={}){let s=`${this.baseUrl}${r}`,g=new AbortController,i=setTimeout(()=>g.abort(),this.timeout);try{let m=await fetch(s,{...e,signal:g.signal,headers:{"Content-Type":"application/json","X-API-Key":this.apiKey,...this.sessionToken&&{"X-Session-Token":this.sessionToken},...e.headers}});if(clearTimeout(i),!m.ok){let T=await m.json().catch(()=>({})),f={code:T.code||"UNKNOWN_ERROR",message:T.message||T.error||`HTTP ${m.status}`,status:m.status};throw new P(f.message,f.code,f.status)}return m.json()}catch(m){throw clearTimeout(i),m instanceof P?m:m instanceof Error&&m.name==="AbortError"?new P("Request timeout","TIMEOUT",408):new P(m instanceof Error?m.message:"Unknown error","NETWORK_ERROR",0)}}async chat(r,e){let s=typeof r=="string"?{message:r,context:e,sessionToken:this.sessionToken||void 0}:{...r,sessionToken:r.sessionToken||this.sessionToken||void 0},g=await this.request("/api/v1/chat",{method:"POST",body:JSON.stringify(s)});return g.sessionToken&&(this.sessionToken=g.sessionToken),g}async chatWithAudio(r,e){let s=await r.arrayBuffer(),i={audioBase64:btoa(new Uint8Array(s).reduce((T,f)=>T+String.fromCharCode(f),"")),audioMimeType:r.type||"audio/webm",context:e,sessionToken:this.sessionToken||void 0},m=await this.request("/api/v1/chat",{method:"POST",body:JSON.stringify(i)});return m.sessionToken&&(this.sessionToken=m.sessionToken),m}async createSession(){let r=await this.request("/api/v1/chat/session",{method:"POST"});return this.sessionToken=r.session.token,r.session}clearSession(){this.sessionToken=null;}getSessionToken(){return this.sessionToken}setSessionToken(r){this.sessionToken=r;}async upload(r,e){let s=new FormData;s.append("file",r),e?.folder&&s.append("folder",e.folder),e?.productId&&s.append("productId",e.productId),e?.isPrimary&&s.append("isPrimary","true");let g=`${this.baseUrl}/api/v1/upload`,i=await fetch(g,{method:"POST",headers:{"X-API-Key":this.apiKey},body:s});if(!i.ok){let m=await i.json().catch(()=>({}));throw new P(m.message||m.error||`HTTP ${i.status}`,m.code||"UPLOAD_ERROR",i.status)}return i.json()}static async quickChat(r){return new a({apiKey:r.apiKey,baseUrl:r.baseUrl}).chat(r.message,r.context)}},P=class a extends Error{constructor(r,e,s){super(r),this.name="AICommerceError",this.code=e,this.status=s,Object.setPrototypeOf(this,a.prototype);}};function _(a){let r=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(a);return r?{r:parseInt(r[1],16),g:parseInt(r[2],16),b:parseInt(r[3],16)}:{r:99,g:102,b:241}}function q(a){let r=a.primaryColor,e=_(r),s=a.position==="bottom-left";return `
+/* AI Commerce Widget Styles */
+#aicommerce-widget {
+    --aic-primary: ${r};
+    --aic-primary-rgb: ${e.r}, ${e.g}, ${e.b};
+    --aic-primary-light: rgba(${e.r}, ${e.g}, ${e.b}, 0.1);
+    --aic-primary-dark: rgba(${e.r}, ${e.g}, ${e.b}, 0.9);
+    --aic-bg: #ffffff;
+    --aic-bg-secondary: #f8fafc;
+    --aic-text: #1e293b;
+    --aic-text-secondary: #64748b;
+    --aic-border: #e2e8f0;
+    --aic-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --aic-radius: 16px;
+    --aic-z-index: ${a.zIndex};
+    
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
+    font-size: 14px;
+    line-height: 1.5;
+    position: fixed;
+    bottom: 20px;
+    ${s?"left: 20px;":"right: 20px;"}
+    z-index: var(--aic-z-index);
+}
+
+/* Dark theme */
+#aicommerce-widget.aicommerce-theme-dark,
+@media (prefers-color-scheme: dark) {
+    #aicommerce-widget.aicommerce-theme-auto {
+        --aic-bg: #1e293b;
+        --aic-bg-secondary: #0f172a;
+        --aic-text: #f1f5f9;
+        --aic-text-secondary: #94a3b8;
+        --aic-border: #334155;
+    }
+}
+
+/* Launcher Button */
+.aicommerce-launcher {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, var(--aic-primary), var(--aic-primary-dark));
+    border: none;
+    cursor: pointer;
+    box-shadow: 0 4px 20px rgba(var(--aic-primary-rgb), 0.4);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    animation: aic-pulse 2s infinite;
+}
+
+.aicommerce-launcher:hover {
+    transform: scale(1.1);
+    box-shadow: 0 6px 30px rgba(var(--aic-primary-rgb), 0.5);
+}
+
+.aicommerce-launcher-icon {
+    font-size: 24px;
+}
+
+.aicommerce-hidden {
+    display: none !important;
+}
+
+@keyframes aic-pulse {
+    0%, 100% { box-shadow: 0 4px 20px rgba(var(--aic-primary-rgb), 0.4); }
+    50% { box-shadow: 0 4px 30px rgba(var(--aic-primary-rgb), 0.6); }
+}
+
+/* Chat Window */
+.aicommerce-chat {
+    position: absolute;
+    bottom: 0;
+    ${s?"left: 0;":"right: 0;"}
+    width: 380px;
+    max-width: calc(100vw - 40px);
+    height: 600px;
+    max-height: calc(100vh - 100px);
+    background: var(--aic-bg);
+    border-radius: var(--aic-radius);
+    box-shadow: var(--aic-shadow);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    transform-origin: bottom ${s?"left":"right"};
+}
+
+.aicommerce-chat.aicommerce-closed {
+    opacity: 0;
+    transform: scale(0.9) translateY(20px);
+    pointer-events: none;
+}
+
+.aicommerce-chat.aicommerce-open {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+}
+
+/* Header */
+.aicommerce-header {
+    background: linear-gradient(135deg, var(--aic-primary), var(--aic-primary-dark));
+    color: white;
+    padding: 16px 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.aicommerce-header-info {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.aicommerce-avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+    overflow: hidden;
+}
+
+.aicommerce-avatar img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.aicommerce-header-text {
+    display: flex;
+    flex-direction: column;
+}
+
+.aicommerce-bot-name {
+    font-weight: 600;
+    font-size: 16px;
+}
+
+.aicommerce-status {
+    font-size: 12px;
+    opacity: 0.9;
+}
+
+.aicommerce-close {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.2);
+    border: none;
+    color: white;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    transition: background 0.2s;
+}
+
+.aicommerce-close:hover {
+    background: rgba(255, 255, 255, 0.3);
+}
+
+/* Messages */
+.aicommerce-messages {
+    flex: 1;
+    overflow-y: auto;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    background: var(--aic-bg-secondary);
+}
+
+.aicommerce-message {
+    max-width: 85%;
+    animation: aic-slide-in 0.3s ease-out;
+}
+
+.aicommerce-message.aicommerce-user {
+    align-self: flex-end;
+}
+
+.aicommerce-message.aicommerce-assistant {
+    align-self: flex-start;
+}
+
+.aicommerce-message-content {
+    padding: 12px 16px;
+    border-radius: 16px;
+    line-height: 1.5;
+}
+
+.aicommerce-user .aicommerce-message-content {
+    background: var(--aic-primary);
+    color: white;
+    border-bottom-right-radius: 4px;
+}
+
+.aicommerce-assistant .aicommerce-message-content {
+    background: var(--aic-bg);
+    color: var(--aic-text);
+    border-bottom-left-radius: 4px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+@keyframes aic-slide-in {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+/* Typing Indicator */
+.aicommerce-typing {
+    display: flex;
+    gap: 4px;
+    padding: 12px 16px;
+    background: var(--aic-bg);
+    border-radius: 16px;
+    width: fit-content;
+}
+
+.aicommerce-typing span {
+    width: 8px;
+    height: 8px;
+    background: var(--aic-text-secondary);
+    border-radius: 50%;
+    animation: aic-bounce 1.4s infinite ease-in-out;
+}
+
+.aicommerce-typing span:nth-child(1) { animation-delay: -0.32s; }
+.aicommerce-typing span:nth-child(2) { animation-delay: -0.16s; }
+
+@keyframes aic-bounce {
+    0%, 80%, 100% { transform: scale(0); }
+    40% { transform: scale(1); }
+}
+
+/* Product Cards */
+.aicommerce-products {
+    display: flex;
+    gap: 16px;
+    margin-top: 12px;
+    overflow-x: auto;
+    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: 280px;
+    background: var(--aic-bg);
+    border-radius: 12px;
+    overflow: hidden;
+    cursor: pointer;
+    transition: all 0.2s;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.aicommerce-product-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+}
+
+.aicommerce-product-image {
+    width: 100%;
+    aspect-ratio: 16/9;
+    height: auto;
+    object-fit: cover;
+}
+
+.aicommerce-product-placeholder {
+    width: 100%;
+    aspect-ratio: 16/9;
+    height: auto;
+    background: var(--aic-bg-secondary);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 32px;
+}
+
+.aicommerce-product-info {
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.aicommerce-product-name {
+    font-weight: 500;
+    font-size: 13px;
+    color: var(--aic-text);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.aicommerce-product-price {
+    font-weight: 600;
+    font-size: 14px;
+    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;
+    background: var(--aic-bg);
+    border-top: 1px solid var(--aic-border);
+    display: flex;
+    gap: 12px;
+}
+
+.aicommerce-input {
+    flex: 1;
+    padding: 12px 16px;
+    border: 1px solid var(--aic-border);
+    border-radius: 24px;
+    background: var(--aic-bg-secondary);
+    color: var(--aic-text);
+    font-size: 14px;
+    outline: none;
+    transition: all 0.2s;
+}
+
+.aicommerce-input:focus {
+    border-color: var(--aic-primary);
+    box-shadow: 0 0 0 3px var(--aic-primary-light);
+}
+
+.aicommerce-input::placeholder {
+    color: var(--aic-text-secondary);
+}
+
+.aicommerce-send {
+    width: 44px;
+    height: 44px;
+    border-radius: 50%;
+    background: var(--aic-primary);
+    border: none;
+    color: white;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s;
+}
+
+.aicommerce-send:hover:not(:disabled) {
+    background: var(--aic-primary-dark);
+    transform: scale(1.05);
+}
+
+.aicommerce-send:disabled {
+    opacity: 0.6;
+    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 {
+        bottom: 16px;
+        ${s?"left: 16px;":"right: 16px;"}
+    }
+    
+    .aicommerce-chat {
+        width: calc(100vw - 32px);
+        height: calc(100vh - 100px);
+        border-radius: 12px;
+    }
+    
+    .aicommerce-launcher {
+        width: 56px;
+        height: 56px;
+    }
+}
+
+/* Scrollbar */
+.aicommerce-messages::-webkit-scrollbar {
+    width: 6px;
+}
+
+.aicommerce-messages::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.aicommerce-messages::-webkit-scrollbar-thumb {
+    background: var(--aic-border);
+    border-radius: 3px;
+}
+
+.aicommerce-messages::-webkit-scrollbar-thumb:hover {
+    background: var(--aic-text-secondary);
+}
+`}function z(a){let r=document.createElement("style");r.id="aicommerce-widget-styles",r.textContent=a;let e=document.getElementById("aicommerce-widget-styles");return e&&e.remove(),document.head.appendChild(r),r}function Q(a){if(!a.apiKey)throw new Error("AICommerceWidget: apiKey is required");let r=new L({apiKey:a.apiKey,baseUrl:a.baseUrl}),e={isOpen:false,isLoading:true,isRecording:false,messages:[],storeConfig:null},s=null,g=[],i=null,f=null,u;async function D(){try{let t=a.baseUrl||O(),o=await fetch(`${t}/api/v1/store`,{headers:{"x-api-key":a.apiKey}});return o.ok?(await o.json()).store:null}catch(t){return console.error("Failed to fetch store config:",t),null}}function O(){if(typeof window<"u"){let t=document.querySelector("script[data-aicommerce-url]");if(t)return t.getAttribute("data-aicommerce-url")||""}return "https://api.aicommerce.dev"}async function j(){e.storeConfig=await D(),u={apiKey:a.apiKey,baseUrl:a.baseUrl||O(),position:a.position||"bottom-right",theme:a.theme||"auto",primaryColor:a.primaryColor||e.storeConfig?.primaryColor||"#6366f1",welcomeMessage:a.welcomeMessage||e.storeConfig?.welcomeMessage||"Hi! How can I help you find the perfect product today?",botName:a.botName||e.storeConfig?.chatBotName||"Shopping Assistant",zIndex:a.zIndex||9999,buttonText:a.buttonText||"\u{1F4AC}",hideLauncher:a.hideLauncher||false,onOpen:a.onOpen,onClose:a.onClose,onProductClick:a.onProductClick,onMessage:a.onMessage};let t=q(u);f=z(t),i=document.createElement("div"),i.id="aicommerce-widget",i.className=`aicommerce-widget aicommerce-${u.position} aicommerce-theme-${u.theme}`,document.body.appendChild(i),b(),e.messages.push({role:"assistant",content:u.welcomeMessage}),e.isLoading=false,b();}function b(){if(!i)return;let t=`
+            ${u.hideLauncher?"":`
+                <button class="aicommerce-launcher ${e.isOpen?"aicommerce-hidden":""}" aria-label="Open chat">
+                    <span class="aicommerce-launcher-icon">${u.buttonText}</span>
+                </button>
+            `}
+            
+            <div class="aicommerce-chat ${e.isOpen?"aicommerce-open":"aicommerce-closed"}">
+                <div class="aicommerce-header">
+                    <div class="aicommerce-header-info">
+                        <div class="aicommerce-avatar">
+                            ${e.storeConfig?.logo?`<img src="${e.storeConfig.logo}" alt="${u.botName}" />`:"<span>\u{1F916}</span>"}
+                        </div>
+                        <div class="aicommerce-header-text">
+                            <span class="aicommerce-bot-name">${u.botName}</span>
+                            <span class="aicommerce-status">Online</span>
+                        </div>
+                    </div>
+                    <button class="aicommerce-close" aria-label="Close chat">\u2715</button>
+                </div>
+                
+                <div class="aicommerce-messages">
+                    ${e.messages.map((n,y)=>{let l=N(n.content),C=n.role==="user";return `
+                        <div class="aicommerce-message aicommerce-${n.role}">
+                            <div class="aicommerce-message-content ${l?"aicommerce-rtl":"aicommerce-ltr"}">
+                                ${n.audioUrl?H(n,y,C):R(n.content)}
+                            </div>
+                            ${n.products&&n.products.length>0?`
+                                <div class="aicommerce-products">
+                                    ${n.products.map(p=>`
+                                        <div class="aicommerce-product-card" data-product-id="${p.id}">
+                                            ${p.image||p.imageUrl?`
+                                                <img src="${p.image||p.imageUrl}" alt="${R(p.name)}" class="aicommerce-product-image" />
+                                            `:`
+                                                <div class="aicommerce-product-placeholder">\u{1F4E6}</div>
+                                            `}
+                                            <div class="aicommerce-product-info">
+                                                <span class="aicommerce-product-name" title="${R(p.name)}">${R(p.name)}</span>
+                                                ${p.description?`<p class="aicommerce-product-desc">${R(p.description)}</p>`:""}
+                                                <span class="aicommerce-product-price">${G(p.price,p.currency)}</span>
+                                            </div>
+                                        </div>
+                                    `).join("")}
+                                </div>
+                            `:""}
+                        </div>
+                    `}).join("")}
+                    ${e.isLoading?`
+                        <div class="aicommerce-message aicommerce-assistant">
+                            <div class="aicommerce-typing">
+                                <span></span><span></span><span></span>
+                            </div>
+                        </div>
+                    `:""}
+                </div>
+                
+                <div class="aicommerce-input-container">
+                    <input 
+                        type="text" 
+                        class="aicommerce-input" 
+                        placeholder="Type your message..."
+                        ${e.isLoading||e.isRecording?"disabled":""}
+                    />
+                    <button class="aicommerce-mic ${e.isRecording?"aicommerce-recording":""}" ${e.isLoading?"disabled":""} aria-label="${e.isRecording?"Stop recording":"Voice input"}">
+                        ${e.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" ${e.isLoading||e.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>
+            </div>
+        `;i.innerHTML=t,W();let o=i.querySelector(".aicommerce-messages");o&&(o.scrollTop=o.scrollHeight);}function H(t,o,n){return `
+            <div class="aicommerce-audio-player" data-message-index="${o}">
+                <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">
+                        ${(t.waveformBars||Array(40).fill(10)).map(y=>`
+                            <div class="aicommerce-waveform-bar" style="height: ${y}%; background-color: ${n?"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>${B(t.audioDuration||0)}</span>
+                    </div>
+                </div>
+                <audio src="${t.audioUrl}" preload="metadata"></audio>
+            </div>
+        `}function W(){if(!i)return;let t=i.querySelector(".aicommerce-launcher");t&&t.addEventListener("click",()=>A());let o=i.querySelector(".aicommerce-close");o&&o.addEventListener("click",()=>M());let n=i.querySelector(".aicommerce-input"),y=i.querySelector(".aicommerce-send");n&&n.addEventListener("keypress",c=>{c.key==="Enter"&&n.value.trim()&&(E(n.value.trim()),n.value="");}),y&&n&&y.addEventListener("click",()=>{n.value.trim()&&(E(n.value.trim()),n.value="");});let l=i.querySelector(".aicommerce-mic");l&&l.addEventListener("click",()=>F()),i.querySelectorAll(".aicommerce-product-card").forEach(c=>{c.addEventListener("click",()=>{let d=c.getAttribute("data-product-id"),h=e.messages.flatMap(x=>x.products||[]).find(x=>x.id===d);h&&u.onProductClick&&u.onProductClick(h);});}),i.querySelectorAll(".aicommerce-products").forEach(c=>{let d=false,h=0,x=0;c.addEventListener("mousedown",k=>{d=true,c.style.cursor="grabbing",h=k.pageX-c.offsetLeft,x=c.scrollLeft;}),c.addEventListener("mouseleave",()=>{d=false,c.style.cursor="grab";}),c.addEventListener("mouseup",()=>{d=false,c.style.cursor="grab";}),c.addEventListener("mousemove",k=>{if(!d)return;k.preventDefault();let v=(k.pageX-c.offsetLeft-h)*2;c.scrollLeft=x-v;});}),i.querySelectorAll(".aicommerce-audio-player").forEach(c=>{let d=c.querySelector("audio"),h=c.querySelector(".aicommerce-audio-btn"),x=c.querySelectorAll(".aicommerce-waveform-bar"),k=c.querySelector(".aicommerce-current-time");if(!d||!h)return;h.addEventListener("click",()=>{!d.paused?(d.pause(),h.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>'):(i?.querySelectorAll("audio").forEach(w=>{if(w!==d&&!w.paused){w.pause();let $=w.closest(".aicommerce-audio-player")?.querySelector(".aicommerce-audio-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>');}}),d.play(),h.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>');}),d.addEventListener("timeupdate",()=>{if(k&&(k.textContent=B(d.currentTime)),d.duration){let v=d.currentTime/d.duration*100;x.forEach((w,U)=>{U/x.length*100<=v?w.style.backgroundColor=c.closest(".aicommerce-user")?"rgba(255,255,255,1)":"var(--aic-primary)":w.style.backgroundColor=c.closest(".aicommerce-user")?"rgba(255,255,255,0.4)":"rgba(99,102,241,0.3)";});}}),d.addEventListener("ended",()=>{h.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>';});let S=c.querySelector(".aicommerce-waveform-bars");S&&S.addEventListener("click",v=>{let w=S.getBoundingClientRect(),$=(v.clientX-w.left)/w.width;d.duration&&(d.currentTime=$*d.duration);});});}async function F(){if(e.isRecording)s&&s.state!=="inactive"&&s.stop();else try{let t=await navigator.mediaDevices.getUserMedia({audio:!0});g=[],s=new MediaRecorder(t,{mimeType:MediaRecorder.isTypeSupported("audio/webm")?"audio/webm":"audio/mp4"}),s.ondataavailable=o=>{o.data.size>0&&g.push(o.data);},s.onstop=async()=>{if(t.getTracks().forEach(o=>o.stop()),g.length>0){let o=new Blob(g,{type:s?.mimeType||"audio/webm"});await K(o);}e.isRecording=!1,b();},s.start(),e.isRecording=!0,b();}catch(t){console.error("Failed to start recording:",t),e.messages.push({role:"assistant",content:"Unable to access microphone. Please check your permissions."}),b();}}async function K(t){let o=URL.createObjectURL(t),n=Array(40).fill(10),y=0;try{n=await X(t);let l=new Audio(o);await new Promise(C=>{l.onloadedmetadata=()=>{y=l.duration,C();},l.onerror=()=>C();});}catch(l){console.error("Audio analysis failed",l);}e.messages.push({role:"user",content:"Voice message",audioUrl:o,audioDuration:y,waveformBars:n}),e.isLoading=true,b();try{let l=await r.chatWithAudio(t);return e.messages.push({role:"assistant",content:l.reply,products:l.products}),u.onMessage&&u.onMessage("Voice message",l),l}catch(l){throw e.messages.push({role:"assistant",content:"Sorry, I encountered an error processing your voice message. Please try again."}),l}finally{e.isLoading=false,b();}}function N(t){return /[\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF\uFB50-\uFDFF\uFE70-\uFEFF]/.test(t)}function B(t){let o=Math.floor(t/60),n=Math.floor(t%60);return `${o}:${n.toString().padStart(2,"0")}`}async function X(t){try{let o=new(window.AudioContext||window.webkitAudioContext),n=await t.arrayBuffer(),l=(await o.decodeAudioData(n)).getChannelData(0),C=40,p=Math.floor(l.length/C),I=[];for(let c=0;c<C;c++){let d=c*p,h=d+p,x=0;for(let v=d;v<h;v++)l[v]&&(x+=l[v]*l[v]);let k=Math.sqrt(x/p),S=Math.min(100,Math.max(10,k*400));I.push(S);}return I}catch(o){return console.error("Analysis error",o),Array.from({length:40},()=>20+Math.random()*60)}}async function E(t){e.messages.push({role:"user",content:t}),e.isLoading=true,b();try{let o=await r.chat(t);return e.messages.push({role:"assistant",content:o.reply,products:o.products}),u.onMessage&&u.onMessage(t,o),o}catch(o){throw e.messages.push({role:"assistant",content:"Sorry, I encountered an error. Please try again."}),o}finally{e.isLoading=false,b();}}function A(){e.isOpen=true,b(),u.onOpen?.(),setTimeout(()=>{i?.querySelector(".aicommerce-input")?.focus();},100);}function M(){e.isOpen=false,b(),u.onClose?.();}function Y(){e.isOpen?M():A();}function J(){i&&(i.remove(),i=null),f&&(f.remove(),f=null);}function V(t){if(Object.assign(u,t),t.primaryColor){let o=q(u);f&&(f.textContent=o);}b();}function R(t){let o=document.createElement("div");return o.textContent=t,o.innerHTML}function G(t,o){let y={USD:"$",EUR:"\u20AC",GBP:"\xA3",MAD:"DH",SAR:"SAR",AED:"AED",JPY:"\xA5",CNY:"\xA5"}[o||"USD"]||o||"$";return `${t.toFixed(2)} ${y}`}return j(),{open:A,close:M,toggle:Y,destroy:J,sendMessage:E,updateConfig:V}}var Z={init:Q,VERSION:"1.0.0"};typeof window<"u"&&(window.AICommerceWidget=Z);exports.AICommerceWidget=Z;exports.createWidget=Q;return exports;})({});//# sourceMappingURL=widget.min.js.map
+//# sourceMappingURL=widget.min.js.map