makethisbetter 1.1.2 → 1.1.3

package/dist/makethisbetter.cjs.js

@@ -80,7 +80,7 @@
         <input class="mtb-clarify-input" type="text" placeholder="${L(t.clarify.placeholder)}" />
         <button class="mtb-clarify-send" disabled>${L(t.clarify.send)}</button>
       </div>
-    `}bindEvents(t){this.el.querySelector(".mtb-clarify-skip").addEventListener("click",()=>{this.stopPolling(),this.onDone()}),this.inputEl.addEventListener("input",()=>{const e=this.inputEl.value.trim().length>0;this.sendBtn.disabled=!e||this.sending}),this.inputEl.addEventListener("keydown",e=>{e.key==="Enter"&&(e.preventDefault(),this.sendMessage(t))}),this.sendBtn.addEventListener("click",()=>this.sendMessage(t))}async startConversation(){this.showThinking();try{const t=await this.apiClient.startClarification(this.feedbackId);if(this.destroyed)return;this.renderMessages(t.messages),t.done?this.handleDone():this.startPolling()}catch{if(this.destroyed)return;this.onDone()}}async sendMessage(t){const e=this.inputEl.value.trim();if(!(!e||this.sending)){this.sending=!0,this.inputEl.disabled=!0,this.sendBtn.disabled=!0,this.stopPolling(),this.appendMessage({role:"user",content:e}),this.inputEl.value="",this.showThinking();try{const s=await this.apiClient.startClarification(this.feedbackId,e);if(this.destroyed)return;this.renderMessages(s.messages),s.done?this.handleDone():this.startPolling()}catch{if(this.destroyed)return;this.onDone()}finally{this.sending=!1,this.inputEl.disabled=!1,this.sendBtn.disabled=this.inputEl.value.trim().length===0,this.inputEl.focus()}}}startPolling(){this.stopPolling(),this.pollTimer=setInterval(()=>this.poll(),Tt)}stopPolling(){this.pollTimer!==null&&(clearInterval(this.pollTimer),this.pollTimer=null)}async poll(){try{const t=await this.apiClient.getClarification(this.feedbackId);if(this.destroyed)return;this.renderMessages(t.messages),t.done&&(this.stopPolling(),this.handleDone())}catch{if(this.destroyed)return;this.stopPolling()}}handleDone(){this.inputEl.disabled=!0,this.sendBtn.disabled=!0,this.doneTimer=setTimeout(()=>{this.destroyed||this.onDone()},Lt)}renderMessages(t){this.messagesEl.innerHTML="";for(const e of t)this.appendMessage(e);this.messagesEl.scrollTop=this.messagesEl.scrollHeight}appendMessage(t){const e=document.createElement("div");e.className=t.role==="user"?"mtb-clarify-bubble mtb-clarify-user":"mtb-clarify-bubble mtb-clarify-ai",e.textContent=t.content,this.messagesEl.appendChild(e),this.messagesEl.scrollTop=this.messagesEl.scrollHeight}showThinking(){const t=document.createElement("div");t.className="mtb-clarify-bubble mtb-clarify-ai mtb-clarify-thinking",t.innerHTML='<span class="mtb-dot"></span><span class="mtb-dot"></span><span class="mtb-dot"></span>',this.messagesEl.appendChild(t),this.messagesEl.scrollTop=this.messagesEl.scrollHeight}destroy(){this.destroyed=!0,this.stopPolling(),this.doneTimer!==null&&(clearTimeout(this.doneTimer),this.doneTimer=null),this.el.remove()}}function L(i){return i.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#039;")}const Pt=5e3;class Dt{constructor(t,e,s,r){this.el=t.el("div","mtb-success"),this.el.style.right="20px",this.el.style.bottom="20px";const n=r?`<button class="mtb-view-feedback-link">${e.success.view_feedback}</button>`:"";this.el.innerHTML=`
+    `}bindEvents(t){this.el.querySelector(".mtb-clarify-skip").addEventListener("click",()=>{this.stopPolling(),this.onDone()}),this.inputEl.addEventListener("input",()=>{const e=this.inputEl.value.trim().length>0;this.sendBtn.disabled=!e||this.sending}),this.inputEl.addEventListener("keydown",e=>{e.isComposing||e.keyCode===229||e.key==="Enter"&&(e.preventDefault(),this.sendMessage(t))}),this.sendBtn.addEventListener("click",()=>this.sendMessage(t))}async startConversation(){this.showThinking();try{const t=await this.apiClient.startClarification(this.feedbackId);if(this.destroyed)return;this.renderConversation(t.messages,t.done),t.done?this.handleDone():this.startPolling()}catch{if(this.destroyed)return;this.onDone()}}async sendMessage(t){const e=this.inputEl.value.trim();if(!(!e||this.sending)){this.sending=!0,this.inputEl.disabled=!0,this.sendBtn.disabled=!0,this.stopPolling(),this.appendMessage({role:"user",content:e}),this.inputEl.value="",this.showThinking();try{const s=await this.apiClient.startClarification(this.feedbackId,e);if(this.destroyed)return;this.renderConversation(s.messages,s.done),s.done?this.handleDone():this.startPolling()}catch{if(this.destroyed)return;this.onDone()}finally{this.sending=!1,this.inputEl.disabled=!1,this.sendBtn.disabled=this.inputEl.value.trim().length===0,this.inputEl.focus()}}}startPolling(){this.stopPolling(),this.pollTimer=setInterval(()=>this.poll(),Tt)}stopPolling(){this.pollTimer!==null&&(clearInterval(this.pollTimer),this.pollTimer=null)}async poll(){try{const t=await this.apiClient.getClarification(this.feedbackId);if(this.destroyed)return;this.renderConversation(t.messages,t.done),t.done&&(this.stopPolling(),this.handleDone())}catch{if(this.destroyed)return;this.stopPolling()}}handleDone(){this.inputEl.disabled=!0,this.sendBtn.disabled=!0,this.doneTimer=setTimeout(()=>{this.destroyed||this.onDone()},Lt)}renderConversation(t,e){this.renderMessages(t);const s=t[t.length-1];!e&&(!s||s.role==="user")&&this.showThinking()}renderMessages(t){this.messagesEl.innerHTML="";for(const e of t)this.appendMessage(e);this.messagesEl.scrollTop=this.messagesEl.scrollHeight}appendMessage(t){const e=document.createElement("div");e.className=t.role==="user"?"mtb-clarify-bubble mtb-clarify-user":"mtb-clarify-bubble mtb-clarify-ai",e.textContent=t.content,this.messagesEl.appendChild(e),this.messagesEl.scrollTop=this.messagesEl.scrollHeight}showThinking(){const t=document.createElement("div");t.className="mtb-clarify-bubble mtb-clarify-ai mtb-clarify-thinking",t.innerHTML='<span class="mtb-dot"></span><span class="mtb-dot"></span><span class="mtb-dot"></span>',this.messagesEl.appendChild(t),this.messagesEl.scrollTop=this.messagesEl.scrollHeight}destroy(){this.destroyed=!0,this.stopPolling(),this.doneTimer!==null&&(clearTimeout(this.doneTimer),this.doneTimer=null),this.el.remove()}}function L(i){return i.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#039;")}const Pt=5e3;class Dt{constructor(t,e,s,r){this.el=t.el("div","mtb-success"),this.el.style.right="20px",this.el.style.bottom="20px";const n=r?`<button class="mtb-view-feedback-link">${e.success.view_feedback}</button>`:"";this.el.innerHTML=`
       <div class="mtb-success-icon">
         <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="${x}" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
           <polyline points="20 6 9 17 4 12"/>
@@ -95,5 +95,5 @@
       <span class="mtb-record-dot"></span>
       <span class="mtb-record-timer">00:00</span>
       <button class="mtb-record-stop" type="button">${e.record.stop}</button>
-    `,t.append(this.el),this.timerEl=this.el.querySelector(".mtb-record-timer"),this.el.querySelector(".mtb-record-stop").addEventListener("click",r),this.intervalId=setInterval(()=>this.updateTimer(),1e3)}updateTimer(){const t=this.getDuration(),e=String(Math.floor(t/60)).padStart(2,"0"),s=String(t%60).padStart(2,"0");this.timerEl.textContent=`${e}:${s}`}destroy(){this.intervalId&&(clearInterval(this.intervalId),this.intervalId=null),this.el.remove()}}class di{constructor(){this.session=null,this.bar=null,this.result=null}async start(t,e,s){this.session=new ci(t,s),this.bar=new hi(t,e,()=>this.session?.getDuration()??0,s),await this.session.start()}stop(){return this.session?(this.result=this.session.stop(),this.teardownUI(),this.result):null}getRecording(){return this.result}destroy(){this.teardownUI(),this.result=null}teardownUI(){this.session?.destroy(),this.session=null,this.bar?.destroy(),this.bar=null}}class V{constructor(t){this.tab=null,this.pet=null,this.toolbar=null,this.session=null,this.popup=null,this.clarify=null,this.success=null,this.frustrationPrompt=null,this.frustrationDetector=null,this.mode="idle",this.currentAnnotation=null,this.recordingManager=null,this.config=t,this.messages=ii(t.locale??"en"),this.apiClient=new Ve(t.projectKey,t.apiUrl,void 0,t.userToken,t.userTokenFn),this.consoleCollector=new Re,this.consoleCollector.start(),this.buildUI(),t.frustrationDetection!==!1&&(this.frustrationDetector=new D(()=>this.handleFrustration()),this.frustrationDetector.start())}buildUI(){this.shadow=new pt(this.config.theme??"auto"),(this.config.entryMode??"button")==="pet"?this.pet=new mt(this.shadow,this.messages,()=>this.handleTabClick()):this.tab=new ft(this.shadow,this.messages,this.config.position??"right",()=>this.handleTabClick(),this.config.tabText)}handleTabClick(){this.mode==="idle"?(this.dismissFrustrationPrompt(),this.enterAnnotationMode()):this.exitAll()}handleFrustration(){this.mode!=="idle"||this.frustrationPrompt||(this.frustrationPrompt=new gt(this.shadow,this.messages,{onTell:()=>{this.dismissFrustrationPrompt(),this.enterAnnotationMode()},onDismiss:()=>this.dismissFrustrationPrompt()}))}dismissFrustrationPrompt(){this.frustrationPrompt?.destroy(),this.frustrationPrompt=null}enterAnnotationMode(){this.mode="annotating",this.tab?.setActive(!0),this.pet?.setActive(!0),this.toolbar=new yt(this.shadow,this.messages,()=>this.exitAll(),t=>this.handleToolbarModeChange(t)),this.session=new $(this.shadow,this.messages,(t,e)=>{this.currentAnnotation=t,this.showPopup(t.x,t.y,e)})}handleToolbarModeChange(t){t==="record"?(this.mode="recording",this.session?.destroy(),this.session=null,this.recordingManager=new di,this.recordingManager.start(this.shadow,this.messages,()=>{this.recordingManager&&(this.recordingManager.stop(),this.showPopup(window.innerWidth/2,window.innerHeight/2,this.messages.record.timer_label))}).catch(()=>{this.mode==="recording"&&(this.toolbar?.setMode("markup"),this.handleToolbarModeChange("markup"))})):(this.recordingManager?.destroy(),this.recordingManager=null,this.session||(this.session=new $(this.shadow,this.messages,(e,s)=>{this.currentAnnotation=e,this.showPopup(e.x,e.y,s)})),this.mode="annotating")}showPopup(t,e,s){this.mode="popup",this.session?.dismissInteraction(),this.popup=new Mt(this.shadow,{targetName:s,x:t,y:e,messages:this.messages,onSubmit:r=>this.handleSubmit(r),onClose:()=>this.exitAll()})}async handleSubmit(t){if(!this.popup)return;this.popup.setLoading(!0);const e=this.currentAnnotation,s=this.recordingManager?.getRecording()??void 0,[r,n]=await Promise.all([Ce(e?[e]:[]),Promise.resolve(Be())]),o=Xe(t,n,this.consoleCollector.getErrors(),e,this.config.user,s);try{const a=await this.apiClient.submitFeedback(o,r);this.popup?.destroy(),this.popup=null,this.session?.destroy(),this.session=null,this.recordingManager?.destroy(),this.recordingManager=null,this.showClarify(a.id,a.project_id)}catch{this.popup?.setLoading(!1),this.popup?.setError(this.messages.error.submit)}}showClarify(t,e){this.mode="idle",this.tab?.setActive(!1),this.pet?.setActive(!1),this.clarify=new At(this.shadow,{feedbackId:t,apiClient:this.apiClient,messages:this.messages,onDone:()=>{this.clarify?.destroy(),this.clarify=null,this.showSuccess(e)}})}showSuccess(t){this.mode="idle",this.tab?.setActive(!1),this.pet?.setActive(!1);const s=`${this.config.apiUrl?this.config.apiUrl.replace(/\/api\/v1\/?$/,""):"https://makethisbetter.dev"}/board/projects/${t}/feedbacks`,r=!!(this.config.userToken||this.config.userTokenFn);this.success=new Dt(this.shadow,this.messages,()=>{this.success?.destroy(),this.success=null},r?async()=>{const n=await this.apiClient.resolveUserToken();n&&window.open(`${s}?identity=${encodeURIComponent(n)}`,"_blank")}:void 0)}exitAll(){this.mode="idle",this.tab?.setActive(!1),this.pet?.setActive(!1),this.toolbar?.destroy(),this.toolbar=null,this.session?.destroy(),this.session=null,this.popup?.destroy(),this.popup=null,this.clarify?.destroy(),this.clarify=null,this.currentAnnotation=null,this.recordingManager?.destroy(),this.recordingManager=null}destroy(){this.exitAll(),this.consoleCollector.stop(),this.frustrationDetector?.stop(),this.dismissFrustrationPrompt(),this.clarify?.destroy(),this.success?.destroy(),this.tab?.destroy(),this.pet?.destroy(),this.recordingManager?.destroy(),this.shadow.destroy()}}let f=null;const st={init(i){f&&(f.destroy(),f=null),document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>{f=new V(i)}):f=new V(i)},destroy(){f?.destroy(),f=null}};typeof window<"u"&&(window.MakeThisBetter=st);exports.MakeThisBetter=st;
+    `,t.append(this.el),this.timerEl=this.el.querySelector(".mtb-record-timer"),this.el.querySelector(".mtb-record-stop").addEventListener("click",r),this.intervalId=setInterval(()=>this.updateTimer(),1e3)}updateTimer(){const t=this.getDuration(),e=String(Math.floor(t/60)).padStart(2,"0"),s=String(t%60).padStart(2,"0");this.timerEl.textContent=`${e}:${s}`}destroy(){this.intervalId&&(clearInterval(this.intervalId),this.intervalId=null),this.el.remove()}}class di{constructor(){this.session=null,this.bar=null,this.result=null}async start(t,e,s){this.session=new ci(t,s),this.bar=new hi(t,e,()=>this.session?.getDuration()??0,s),await this.session.start()}stop(){return this.session?(this.result=this.session.stop(),this.teardownUI(),this.result):null}getRecording(){return this.result}destroy(){this.teardownUI(),this.result=null}teardownUI(){this.session?.destroy(),this.session=null,this.bar?.destroy(),this.bar=null}}class V{constructor(t){this.tab=null,this.pet=null,this.toolbar=null,this.session=null,this.popup=null,this.clarify=null,this.success=null,this.frustrationPrompt=null,this.frustrationDetector=null,this.mode="idle",this.currentAnnotation=null,this.recordingManager=null,this.config=t,this.messages=ii(t.locale??"en"),this.apiClient=new Ve(t.projectKey,t.apiUrl,void 0,t.userToken,t.userTokenFn),this.consoleCollector=new Re,this.consoleCollector.start(),this.buildUI(),t.frustrationDetection!==!1&&(this.frustrationDetector=new D(()=>this.handleFrustration()),this.frustrationDetector.start())}buildUI(){this.shadow=new pt(this.config.theme??"auto"),(this.config.entryMode??"button")==="pet"?this.pet=new mt(this.shadow,this.messages,()=>this.handleTabClick()):this.tab=new ft(this.shadow,this.messages,this.config.position??"right",()=>this.handleTabClick(),this.config.tabText)}handleTabClick(){this.mode==="idle"?(this.dismissFrustrationPrompt(),this.enterAnnotationMode()):this.exitAll()}handleFrustration(){this.mode!=="idle"||this.frustrationPrompt||(this.frustrationPrompt=new gt(this.shadow,this.messages,{onTell:()=>{this.dismissFrustrationPrompt(),this.enterAnnotationMode()},onDismiss:()=>this.dismissFrustrationPrompt()}))}dismissFrustrationPrompt(){this.frustrationPrompt?.destroy(),this.frustrationPrompt=null}enterAnnotationMode(){this.mode="annotating",this.tab?.setActive(!0),this.pet?.setActive(!0),this.toolbar=new yt(this.shadow,this.messages,()=>this.exitAll(),t=>this.handleToolbarModeChange(t)),this.session=new $(this.shadow,this.messages,(t,e)=>{this.currentAnnotation=t,this.showPopup(t.x,t.y,e)})}handleToolbarModeChange(t){t==="record"?(this.mode="recording",this.session?.destroy(),this.session=null,this.recordingManager=new di,this.recordingManager.start(this.shadow,this.messages,()=>{this.recordingManager&&(this.recordingManager.stop(),this.showPopup(window.innerWidth/2,window.innerHeight/2,this.messages.record.timer_label))}).catch(()=>{this.mode==="recording"&&(this.toolbar?.setMode("markup"),this.handleToolbarModeChange("markup"))})):(this.recordingManager?.destroy(),this.recordingManager=null,this.session||(this.session=new $(this.shadow,this.messages,(e,s)=>{this.currentAnnotation=e,this.showPopup(e.x,e.y,s)})),this.mode="annotating")}showPopup(t,e,s){this.mode="popup",this.session?.dismissInteraction(),this.popup=new Mt(this.shadow,{targetName:s,x:t,y:e,messages:this.messages,onSubmit:r=>this.handleSubmit(r),onClose:()=>this.exitAll()})}async handleSubmit(t){if(!this.popup)return;this.popup.setLoading(!0);const e=this.currentAnnotation,s=this.recordingManager?.getRecording()??void 0,[r,n]=await Promise.all([Ce(e?[e]:[]),Promise.resolve(Be())]),o=Xe(t,n,this.consoleCollector.getErrors(),e,this.config.user,s);try{const a=await this.apiClient.submitFeedback(o,r);this.popup?.destroy(),this.popup=null,this.session?.destroy(),this.session=null,this.recordingManager?.destroy(),this.recordingManager=null,a.ai_clarify_available===!1?this.showSuccess(a.project_id):this.showClarify(a.id,a.project_id)}catch{this.popup?.setLoading(!1),this.popup?.setError(this.messages.error.submit)}}showClarify(t,e){this.mode="idle",this.tab?.setActive(!1),this.pet?.setActive(!1),this.clarify=new At(this.shadow,{feedbackId:t,apiClient:this.apiClient,messages:this.messages,onDone:()=>{this.clarify?.destroy(),this.clarify=null,this.showSuccess(e)}})}showSuccess(t){this.mode="idle",this.tab?.setActive(!1),this.pet?.setActive(!1);const s=`${this.config.apiUrl?this.config.apiUrl.replace(/\/api\/v1\/?$/,""):"https://makethisbetter.dev"}/board/projects/${t}/feedbacks`,r=!!(this.config.userToken||this.config.userTokenFn);this.success=new Dt(this.shadow,this.messages,()=>{this.success?.destroy(),this.success=null},r?async()=>{const n=await this.apiClient.resolveUserToken();n&&window.open(`${s}?identity=${encodeURIComponent(n)}`,"_blank")}:void 0)}exitAll(){this.mode="idle",this.tab?.setActive(!1),this.pet?.setActive(!1),this.toolbar?.destroy(),this.toolbar=null,this.session?.destroy(),this.session=null,this.popup?.destroy(),this.popup=null,this.clarify?.destroy(),this.clarify=null,this.currentAnnotation=null,this.recordingManager?.destroy(),this.recordingManager=null}destroy(){this.exitAll(),this.consoleCollector.stop(),this.frustrationDetector?.stop(),this.dismissFrustrationPrompt(),this.clarify?.destroy(),this.success?.destroy(),this.tab?.destroy(),this.pet?.destroy(),this.recordingManager?.destroy(),this.shadow.destroy()}}let f=null;const st={init(i){f&&(f.destroy(),f=null),document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>{f=new V(i)}):f=new V(i)},destroy(){f?.destroy(),f=null}};typeof window<"u"&&(window.MakeThisBetter=st);exports.MakeThisBetter=st;
 //# sourceMappingURL=makethisbetter.cjs.js.map