@molin.ai/shop-ai 0.9.55 → 0.9.56

package/dist/molin-shop-ai.min.js

@@ -131,9 +131,20 @@ var el=Object.create;var rs=Object.defineProperty;var tl=Object.getOwnPropertyDe
     :host {
       display: block;
     }
-    .spin-slow {
+    .spinning-bg {
       animation: spin-slow 4s linear infinite;
     }
+    :host(:focus-within) .spinning-bg {
+      animation: none;
+      background-image: none !important;
+    }
+    .solid-bg {
+      opacity: 0;
+      transition: opacity 0.3s;
+    }
+    :host(:focus-within) .solid-bg {
+      opacity: 1;
+    }
     @keyframes spin-slow {
       from {
         transform: rotate(0deg);
@@ -145,11 +156,13 @@ var el=Object.create;var rs=Object.defineProperty;var tl=Object.getOwnPropertyDe
   `;constructor(){super(),this.color="#601feb",this.radius="16.8576px",this.size="320px",this.border="#d1d5db",this.darkMode=!1}render(){return u`
       <div class="${this.darkMode?"dark":""} flex flex-row flex-wrap gap-0">
         <div class="relative z-0 flex min-h-9 items-center justify-center overflow-hidden" style="border-radius: ${this.radius};">
-          <!-- Spinning gradient background  -->
+          <!-- Spinning gradient background -->
           <div
-            class="absolute z-[-2] m-auto animate-[spin-slow_4s_linear_infinite] bg-[0_0] bg-cover bg-no-repeat"
-            style="background-image: conic-gradient(transparent,  ${this.color}, transparent 30%); height: ${this.size}; width: ${this.size}; background-color: ${this.border};"></div>
-          <!-- White background with 1px border space for gradient  -->
+            class="spinning-bg absolute z-[-2] m-auto bg-[0_0] bg-cover bg-no-repeat transition-all duration-300"
+            style="background-image: conic-gradient(transparent, ${this.color}, transparent 30%); background-color: ${this.border}; height: ${this.size}; width: ${this.size};"></div>
+          <!-- Solid color shown on focus -->
+          <div class="solid-bg absolute z-[-2] m-auto" style="background-color: ${this.color}; height: ${this.size}; width: ${this.size};"></div>
+          <!-- White background with 1px border space for gradient -->
           <div class="absolute top-[1px] left-[1px] z-[-1] h-[calc(100%_-_2px)] w-[calc(100%_-_2px)] bg-white dark:bg-[#2B2D31]" style="border-radius: ${this.radius};"></div>
           <slot></slot>
         </div>
@@ -1859,11 +1872,10 @@ var el=Object.create;var rs=Object.defineProperty;var tl=Object.getOwnPropertyDe
     :host {
       display: block;
     }
-  `;#e=7;constructor(){super(),this.question="",this.options=["No","Yes"],this.heading="",this.gameTitle="",this.resultPrefix="",this.correctButtonText="Correct",this.wrongButtonText="Wrong",this.color="#601feb",this.apiBaseUrl="",this.cdnBaseUrl="",this.minutes="00",this.seconds="00",this.darkMode=!1,this._questionHistory=[],this._currentQuestion="",this._guessedJob="",this._isLoadingNextQuestion=!1,this._loadingAnswer="",this._guessValidated=!1,this._validatingButton="",this._currentAttemptQuestionCount=0}firstUpdated(){this._currentQuestion=this.question}async#t(){if(!this.apiBaseUrl)return console.warn("API base URL not configured, cannot fetch next question"),null;this._isLoadingNextQuestion=!0;try{let e=await fetch(`${this.apiBaseUrl}/preview/wait-game/next-question`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({questionAnswers:this._questionHistory,takeGuess:this._currentAttemptQuestionCount>=this.#e})});return e.ok?await e.json():(console.error("failed to fetch next question",e.status),null)}catch(e){return console.error("error fetching next question",e),null}finally{this._isLoadingNextQuestion=!1}}#r=async e=>{this._loadingAnswer=e,this._questionHistory.push({question:this._currentQuestion,answer:e}),this._currentAttemptQuestionCount++,this.dispatchEvent(new CustomEvent("mw-chat-wait-game:question-answered",{bubbles:!0,composed:!0,detail:{questionIndex:this._questionHistory.length-1,question:this._currentQuestion,answer:e,totalQuestions:this.#e,allAnswers:this._questionHistory.map(i=>i.answer)}}));let r=await this.#t();r&&(r.isComplete&&r.guessedJob?(this._guessedJob=r.guessedJob,this.dispatchEvent(new CustomEvent("mw-chat-wait-game:game-completed",{bubbles:!0,composed:!0,detail:{guessedProfession:this._guessedJob,questionCount:this._questionHistory.length,allAnswers:this._questionHistory.map(i=>i.answer)}}))):r.nextQuestion&&(this._currentQuestion=r.nextQuestion)),this._loadingAnswer=""};#i=async e=>{if(this._validatingButton=e?"correct":"wrong",this.dispatchEvent(new CustomEvent("mw-chat-wait-game:guess-validated",{bubbles:!0,composed:!0,detail:{guessedProfession:this._guessedJob,isCorrect:e,questionCount:this._questionHistory.length,allAnswers:this._questionHistory.map(r=>r.answer)}})),e)this._guessValidated=!0,this._validatingButton="";else{let r=await this.#t();r?.nextQuestion&&(this._currentQuestion=r.nextQuestion),this._guessedJob="",this._currentAttemptQuestionCount=0,this._validatingButton=""}};#n(){return Math.round(this._currentAttemptQuestionCount/this.#e*100)}#s(){let e=this.cdnBaseUrl?`${this.cdnBaseUrl}/assets/career-ladder`:"https://widget.molin.ai/assets/career-ladder";return u`
+  `;#e=7;constructor(){super(),this.question="",this.options=["No","Yes"],this.heading="",this.gameTitle="",this.resultPrefix="",this.correctButtonText="Correct",this.wrongButtonText="Wrong",this.color="#601feb",this.apiBaseUrl="",this.cdnBaseUrl="",this.minutes="00",this.seconds="00",this.darkMode=!1,this._questionHistory=[],this._currentQuestion="",this._guessedJob="",this._isLoadingNextQuestion=!1,this._loadingAnswer="",this._guessValidated=!1,this._validatingButton="",this._currentAttemptQuestionCount=0}firstUpdated(){this._currentQuestion=this.question}async#t(){if(!this.apiBaseUrl)return console.warn("API base URL not configured, cannot fetch next question"),null;this._isLoadingNextQuestion=!0;try{let e=await fetch(`${this.apiBaseUrl}/preview/wait-game/next-question`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({questionAnswers:this._questionHistory,takeGuess:this._currentAttemptQuestionCount>=this.#e})});return e.ok?await e.json():(console.error("failed to fetch next question",e.status),null)}catch(e){return console.error("error fetching next question",e),null}finally{this._isLoadingNextQuestion=!1}}#r=async e=>{this._loadingAnswer=e,this._questionHistory.push({question:this._currentQuestion,answer:e}),this._currentAttemptQuestionCount++,this.dispatchEvent(new CustomEvent("mw-chat-wait-game:question-answered",{bubbles:!0,composed:!0,detail:{questionIndex:this._questionHistory.length-1,question:this._currentQuestion,answer:e,totalQuestions:this.#e,allAnswers:this._questionHistory.map(i=>i.answer)}}));let r=await this.#t();r&&(r.isComplete&&r.guessedJob?(this._guessedJob=r.guessedJob,this.dispatchEvent(new CustomEvent("mw-chat-wait-game:game-completed",{bubbles:!0,composed:!0,detail:{guessedProfession:this._guessedJob,questionCount:this._questionHistory.length,allAnswers:this._questionHistory.map(i=>i.answer)}}))):r.nextQuestion&&(this._currentQuestion=r.nextQuestion)),this._loadingAnswer=""};#i=async e=>{if(this._validatingButton=e?"correct":"wrong",this.dispatchEvent(new CustomEvent("mw-chat-wait-game:guess-validated",{bubbles:!0,composed:!0,detail:{guessedProfession:this._guessedJob,isCorrect:e,questionCount:this._questionHistory.length,allAnswers:this._questionHistory.map(r=>r.answer)}})),e)this._guessValidated=!0,this._validatingButton="";else{let r=await this.#t();r?.nextQuestion&&(this._currentQuestion=r.nextQuestion),this._guessedJob="",this._currentAttemptQuestionCount=0,this._validatingButton=""}};#n(){return Math.round(this._currentAttemptQuestionCount/this.#e*100)}#s(){let e=new URL("/assets/career-ladder.png",this.cdnBaseUrl||"https://widget.molin.ai");return u`
       <div class="mt-3 flex items-center justify-center gap-1">
         <span class="text-[11px] text-black/40 dark:text-gray-500">Inspired by</span>
-
-        <img src="${e}" alt="Career Ladder" class="h-6" />
+        <img src="${e.href}" alt="Career Ladder" class="h-6" />
       </div>
     `}render(){let e=this.#n(),r=this.heading||"Agent joining in",i=this.gameTitle||"\u{1F9E0} I'll guess your job",n=this.resultPrefix||"I'm pretty confident:";return this._guessedJob?u`
         <div class="${this.darkMode?"dark bg-[#1E1F23] ring-white/10":"bg-white/70 ring-black/10"} mx-auto w-full rounded-2xl p-4 shadow-sm ring-1 backdrop-blur">
@@ -2792,39 +2804,37 @@ var el=Object.create;var rs=Object.defineProperty;var tl=Object.getOwnPropertyDe
         </div>
       </div>
     `}#l(e){let i=e.composedPath().find(n=>n instanceof HTMLAnchorElement);if(i){if(e.preventDefault(),this.callbacks.onUserClickedLink?.({widgetId:this.widgetId,url:i.href,conversationId:this.conversationId}),window.self!==window.top){window.open(i.href,"_blank");return}let s=this.config?.linksNewTab?"_blank":"_self";window.open(i.href,i.target||s)}}#h(e){if(this.isStreaming)return;e.preventDefault();let r=e.detail.example;this.#p(r)}#p=Ze({interval:200},async e=>{D(this.#e.value,"widget context is required"),await this.#e.value.enqueueUserInput(e,{xUserData:this.#e.value?.xUserData,xCustomInstructions:this.#e.value?.xCustomInstructions})&&(this.#g?.setValue(""),this.callbacks.onUserSentInput?.({widgetId:this.widgetId,text:e,example:!0,conversationId:this.conversationId}))});#f(e){if(D(this.#e.value,"widget context is required"),e.preventDefault(),this.config?.enableImageUpload&&this.#i.hasPendingImages)return;let r=e.detail;this.#e.value.enqueueUserInput(r,{xUserData:this.#e.value?.xUserData,xCustomInstructions:this.#e.value?.xCustomInstructions}).then(i=>{i&&(this.#g?.setValue(""),this.#i.clearImages(),this.#r.typingStopped(),this.callbacks.onUserSentInput?.({widgetId:this.widgetId,text:r,example:!1,conversationId:this.conversationId}),window.requestAnimationFrame(()=>{this.#g?.focus()}))}).catch(console.warn)}#w(e){this.#r.onInput(e.detail.full)}#x(){D(this.#e.value,"widget context is required"),this.#e.value.sendUserCancel(),this.callbacks.onUserCanceledStreaming?.({widgetId:this.widgetId})}#v(e){this.#i.onImageDelete(e.detail)}#b(){D(this.#e.value,"widget context is required"),this.#e.value.sendNewChat(),this.reset()}#y(){this.dispatchEvent(new t.CloseClickEvent)}#u(e){D(this.#e.value,"widget context is required");let r=this.#m,i=r[this._currentRequestInputIndex];if(!i){console.warn("no current state found for request input");return}switch(e.detail.type){case"star-rating":{let{rating:s,type:o}=e.detail;this.#t.set(i.key||i.title,{type:o,rating:s,key:i.key,title:i.title});break}case"binary-vote":{let{vote:s,type:o}=e.detail;this.#t.set(i.key||i.title,{type:o,vote:s,key:i.key,title:i.title});break}case"new-conversation-button":{this.#b(),this.requestUpdate();return}default:console.warn("unknown request input type",e.detail);return}this._currentRequestInputIndex+=1;let n=r.filter(s=>s.type==="star-rating"||s.type==="binary-vote").length;this.#t.size>=n&&this.#k(),this.requestUpdate()}async#k(){if(D(this.#e.value,"widget context is required"),this.#t.size===0)return;if(!this.#e.value.lastMsg?.id){console.warn("cannot submit request inputs without message ID");return}await this.#e.value.enqueueUserInput("",{role:"user",expectStreaming:!1,requestInputResponse:Array.from(this.#t.values())})&&this.#t.clear(),this.requestUpdate()}get#m(){D(this.#e.value,"widget context is required");let e=this.messages.findLast(n=>n.role==="assistant"&&n.parts?.some(s=>"tag"in s&&s.tag==="request-input-v1"&&"data"in s&&s.data.type==="new-conversation-button")),r=this.#e.value.lastMsg;if(e&&r?.id!==e.id){let n=e?.parts?.find(s=>"tag"in s&&s.tag==="request-input-v1"&&"data"in s&&s.data.type==="new-conversation-button");if(n&&"data"in n)return[{title:n.data.title,type:n.data.type,key:n.data.key}]}if(r?.role!=="assistant")return[];let i=r.parts?.filter(n=>"tag"in n&&n.tag==="request-input-v1");return!i||i.length===0?[]:i.map(n=>!("data"in n)||!Wu.includes(n.data.type)?null:{title:n.data.title,type:n.data.type,key:n.data.key}).filter(n=>n!==null)}get#C(){if(this.#m.length===0)return!1;let r=this.#m.filter(i=>i.type==="star-rating"||i.type==="binary-vote").length;return this.#t.size<r}get#_(){return this.renderRoot.querySelector("#scrollable-content")}get#g(){return this.renderRoot.querySelector("mw-chat-input")}reloadConfig(){this.#e.value?.reloadConfig(),this.requestUpdate()}sendMessage=Ze({interval:200},async e=>{if(!e?.trim())return console.warn("sendMessage: Message must be a non-empty string"),!1;D(this.#e.value,"Widget context is required");let{value:r}=this.#e,i=await r.enqueueUserInput(e,{xUserData:r.xUserData,xCustomInstructions:r.xCustomInstructions,role:"user",expectStreaming:!0});return i&&this.#g?.setValue(""),i??!1});setInputValue(e){if(!e||typeof e!="string"){console.warn("setInputValue requires a valid string value");return}let r=this.#g;if(!r){console.warn("input element not found, cannot set value");return}r.setValue?r.setValue(e):console.warn("input element does not have setValue method")}focusInput(){window.requestAnimationFrame(()=>{this.#g?.focus()})}reset(){this.#i.clearImages(),this._currentRequestInputIndex=0,this.#t.clear(),this.#e.value?.reset()}};Wt.CloseClickEvent=class extends CustomEvent{static type="mw:close-click";constructor(e={}){super(Wt.CloseClickEvent.type,{...e})}};customElements.get("mw-chat")||customElements.define("mw-chat",Wt);var qe=class t extends k(v){static properties={color:{type:String},disabled:{type:Boolean},placeholder:{type:String},dark:{type:Boolean},_inputValue:{type:String,state:!0}};constructor(){super(),this.color="#8B5CF6",this.disabled=!1,this.placeholder="Ask AI...",this.dark=!1,this._inputValue=""}#e=new Date;#t(e){let r=e.target;this._inputValue=r.value,this.dispatchEvent(new t.ChangeEvent({value:this._inputValue}))}render(){return u`
-      <mw-spinning-border
-        .size=${"420px"}
-        .color=${this.color||"#8B5CF6"}
-        .radius=${"24px"}
-        ?dark-mode="${this.dark}"
-        class="${this.dark?"dark":""} rounded-[24px] font-sans text-sm shadow-lg transition-transform duration-500 hover:scale-105">
-        <form
-          @submit="${this.#r}"
-          class="m-[1px] flex w-[250px] items-center rounded-[24px] bg-white px-2 py-2 text-gray-800 transition-all duration-500 focus-within:w-[calc(100vw-2rem)] focus-within:scale-100 active:w-[calc(100vw-2rem)] md:focus-within:w-[350px] md:active:w-[350px] dark:bg-gray-900 dark:text-white">
-          <lucide-icon class="h-5 w-5 flex-none text-[${this.color||"#8B5CF6"}]" name="${"sparkles"}"></lucide-icon>
-
-          <input
-            ?disabled="${this.disabled}"
-            @keydown="${this.#s}"
-            @input="${this.#t}"
-            .value="${this._inputValue}"
-            placeholder="${this.placeholder}"
-            autocomplete="off"
-            name="input"
-            class="ml-2 w-full bg-transparent text-gray-800 placeholder:font-light placeholder:text-gray-500 focus:outline-none dark:text-white dark:placeholder:text-gray-400" />
-
-          <!-- submit button -->
-          <button
-            ?disabled="${this.disabled||!this._inputValue.trim()}"
-            class="${this.dark?"text-gray-800":"text-white"} relative ml-2 h-8 w-8 flex-none rounded-full bg-[${this.color||"#8B5CF6"}] p-0 hover:opacity-70 disabled:bg-gray-400 disabled:text-gray-300 disabled:hover:opacity-100"
-            type="submit">
-            <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
-              <lucide-icon class="${this.dark?"text-gray-800":"text-white"} block h-5 w-5" name="${"arrow-up"}"></lucide-icon>
-            </div>
-          </button>
-        </form>
-      </mw-spinning-border>
-    `}#r(e){e.preventDefault();let r=new Date;if(r.getTime()-this.#e.getTime()<500)return;this.#e=r;let n=this._inputValue.trim();n&&this.dispatchEvent(new t.SubmitInputEvent({text:n}))&&(this._inputValue="")}get#i(){return this.renderRoot.querySelector('input[name="input"]')??null}get#n(){return this.renderRoot.querySelector('button[type="submit"]')??null}#s(e){Gu(e)&&(e.preventDefault(),this.disabled||this.#n?.click())}};qe.SubmitInputEvent=class extends CustomEvent{static type="mw-floating-ask-ai:submit";constructor(e,r={}){super(qe.SubmitInputEvent.type,{detail:e,bubbles:!0,composed:!0,...r})}};qe.ChangeEvent=class extends CustomEvent{static type="mw-floating-ask-ai:change";constructor(e,r={}){super(qe.ChangeEvent.type,{detail:e,bubbles:!0,composed:!0,...r})}};function Gu(t){return(t.code==="Enter"||t.code==="NumpadEnter")&&!t.ctrlKey&&!t.metaKey&&!t.shiftKey}customElements.get("mw-floating-ask-ai")||customElements.define("mw-floating-ask-ai",qe);var Ve=class t extends k(v){static properties={text:{type:String},color:{type:String},darkMode:{type:Boolean,attribute:"dark-mode"}};static styles=O`
+      <div class="${this.dark?"dark":""} group rounded-[18px] font-sans text-sm shadow-lg transition-transform duration-500 focus-within:scale-100 hover:scale-105">
+        <mw-spinning-border .size=${"420px"} .color=${this.color||"#8B5CF6"} .radius=${"18px"} ?dark-mode="${this.dark}">
+          <form
+            @submit="${this.#r}"
+            class="m-[1px] flex w-[250px] items-center rounded-[17px] bg-white px-2 py-2 text-gray-800 transition-all duration-500 group-focus-within:w-[calc(100vw-2rem)] md:group-focus-within:w-[350px] dark:bg-gray-900 dark:text-white">
+            <lucide-icon class="h-5 w-5 flex-none" style="color: ${this.color};" name="${"sparkles"}"></lucide-icon>
+
+            <input
+              ?disabled="${this.disabled}"
+              @keydown="${this.#n}"
+              @input="${this.#t}"
+              .value="${this._inputValue}"
+              placeholder="${this.placeholder}"
+              autocomplete="off"
+              name="input"
+              class="ml-2 w-full bg-transparent text-gray-800 placeholder:font-light placeholder:text-gray-500 focus:outline-none dark:text-white dark:placeholder:text-gray-400" />
+
+            <!-- submit button -->
+            <button
+              ?disabled="${this.disabled||!this._inputValue.trim()}"
+              class="${this.dark?"text-gray-800":"text-white"} relative ml-2 h-8 w-8 flex-none rounded-full p-0 hover:opacity-70 disabled:bg-gray-400 disabled:text-gray-300 disabled:hover:opacity-100"
+              style="background-color: ${this.color};"
+              type="submit">
+              <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+                <lucide-icon class="${this.dark?"text-gray-800":"text-white"} block h-5 w-5" name="${"arrow-up"}"></lucide-icon>
+              </div>
+            </button>
+          </form>
+        </mw-spinning-border>
+      </div>
+    `}#r(e){e.preventDefault();let r=new Date;if(r.getTime()-this.#e.getTime()<500)return;this.#e=r;let n=this._inputValue.trim();n&&this.dispatchEvent(new t.SubmitInputEvent({text:n}))&&(this._inputValue="")}get#i(){return this.renderRoot.querySelector('button[type="submit"]')??null}#n(e){Gu(e)&&(e.preventDefault(),this.disabled||this.#i?.click())}};qe.SubmitInputEvent=class extends CustomEvent{static type="mw-floating-ask-ai:submit";constructor(e,r={}){super(qe.SubmitInputEvent.type,{detail:e,bubbles:!0,composed:!0,...r})}};qe.ChangeEvent=class extends CustomEvent{static type="mw-floating-ask-ai:change";constructor(e,r={}){super(qe.ChangeEvent.type,{detail:e,bubbles:!0,composed:!0,...r})}};function Gu(t){return(t.code==="Enter"||t.code==="NumpadEnter")&&!t.ctrlKey&&!t.metaKey&&!t.shiftKey}customElements.get("mw-floating-ask-ai")||customElements.define("mw-floating-ask-ai",qe);var Ve=class t extends k(v){static properties={text:{type:String},color:{type:String},darkMode:{type:Boolean,attribute:"dark-mode"}};static styles=O`
     .popup-desktop:hover button {
       transition-delay: 0s !important;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@molin.ai/shop-ai",
-  "version": "0.9.55",
+  "version": "0.9.56",
   "description": "Molin Shop AI",
   "keywords": [
     "molin",