UNPKG

feedaura

Version:

Feedaura is a smart feedback collection tool that helps you gather, analyze, and manage user feedback efficiently.

3 lines (2 loc) 29.2 kB
import{jsxs as n,jsx as e,Fragment as o}from"react/jsx-runtime";import{useState as t,useRef as r,useEffect as i}from"react";var a=function(){return a=Object.assign||function(n){for(var e,o=1,t=arguments.length;o<t;o++)for(var r in e=arguments[o])Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n},a.apply(this,arguments)};function s(n,e,o,t){return new(o||(o=Promise))((function(r,i){function a(n){try{c(t.next(n))}catch(n){i(n)}}function s(n){try{c(t.throw(n))}catch(n){i(n)}}function c(n){var e;n.done?r(n.value):(e=n.value,e instanceof o?e:new o((function(n){n(e)}))).then(a,s)}c((t=t.apply(n,e||[])).next())}))}function c(n,e){var o,t,r,i={label:0,sent:function(){if(1&r[0])throw r[1];return r[1]},trys:[],ops:[]},a=Object.create(("function"==typeof Iterator?Iterator:Object).prototype);return a.next=s(0),a.throw=s(1),a.return=s(2),"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function s(s){return function(c){return function(s){if(o)throw new TypeError("Generator is already executing.");for(;a&&(a=0,s[0]&&(i=0)),i;)try{if(o=1,t&&(r=2&s[0]?t.return:s[0]?t.throw||((r=t.return)&&r.call(t),0):t.next)&&!(r=r.call(t,s[1])).done)return r;switch(t=0,r&&(s=[2&s[0],r.value]),s[0]){case 0:case 1:r=s;break;case 4:return i.label++,{value:s[1],done:!1};case 5:i.label++,t=s[1],s=[0];continue;case 7:s=i.ops.pop(),i.trys.pop();continue;default:if(!(r=i.trys,(r=r.length>0&&r[r.length-1])||6!==s[0]&&2!==s[0])){i=0;continue}if(3===s[0]&&(!r||s[1]>r[0]&&s[1]<r[3])){i.label=s[1];break}if(6===s[0]&&i.label<r[1]){i.label=r[1],r=s;break}if(r&&i.label<r[2]){i.label=r[2],i.ops.push(s);break}r[2]&&i.ops.pop(),i.trys.pop();continue}s=e.call(n,i)}catch(n){s=[6,n],t=0}finally{o=r=0}if(5&s[0])throw s[1];return{value:s[0]?s[1]:void 0,done:!0}}([s,c])}}}"function"==typeof SuppressedError&&SuppressedError;!function(n,e){void 0===e&&(e={});var o=e.insertAt;if("undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===o&&t.firstChild?t.insertBefore(r,t.firstChild):t.appendChild(r),r.styleSheet?r.styleSheet.cssText=n:r.appendChild(document.createTextNode(n))}}('.feedback-widget {\n --primary-color: #0f8cff;\n --secondary-color: #0070e0;\n --text-color: #333333;\n --background-color: #ffffff;\n --button-radius: 50%;\n --z-index: 9999;\n --icon-color: #ffffff;\n \n position: fixed;\n z-index: var(--z-index);\n font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",\n "Helvetica Neue", sans-serif;\n }\n \n /* Positioning */\n .feedback-widget.position-bottom-right {\n bottom: 20px;\n right: 20px;\n }\n \n .feedback-widget.position-bottom-left {\n bottom: 20px;\n left: 20px;\n }\n \n .feedback-widget.position-top-right {\n top: 20px;\n right: 20px;\n }\n \n .feedback-widget.position-top-left {\n top: 20px;\n left: 20px;\n }\n \n /* Button */\n .feedback-button {\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--icon-color);\n border: none;\n cursor: pointer;\n transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);\n overflow: hidden;\n position: relative;\n }\n \n /* Widget Styles */\n .style-floating .feedback-button {\n box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);\n }\n \n .style-minimal .feedback-button {\n background-color: transparent !important;\n border: 2px solid var(--primary-color);\n color: var(--primary-color);\n }\n \n .style-minimal .feedback-button svg {\n stroke: var(--primary-color);\n }\n \n .style-solid .feedback-button {\n box-shadow: none;\n }\n \n /* Button hover effects */\n .feedback-button::before {\n content: "";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(255, 255, 255, 0.1);\n transform: scale(0);\n border-radius: 50%;\n transition: transform 0.5s ease-out;\n }\n \n .feedback-button:hover::before {\n transform: scale(2);\n }\n \n .style-floating .feedback-button:hover {\n transform: translateY(-3px);\n box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);\n }\n \n .style-minimal .feedback-button:hover {\n background-color: rgba(15, 140, 255, 0.1) !important;\n }\n \n .feedback-button:active {\n transform: translateY(-1px);\n }\n \n .button-small {\n padding: 10px;\n font-size: 12px;\n }\n \n .button-medium {\n padding: 12px;\n font-size: 14px;\n }\n \n .button-large {\n padding: 16px;\n font-size: 16px;\n }\n \n .button-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n \n .button-text {\n font-weight: 500;\n letter-spacing: 0.01em;\n margin-left: 8px;\n }\n \n /* Animated Icon */\n .animated-icon {\n animation: pulse 2s infinite;\n }\n \n @keyframes pulse {\n 0% {\n transform: scale(1);\n }\n 50% {\n transform: scale(1.1);\n }\n 100% {\n transform: scale(1);\n }\n }\n \n /* Modal */\n .feedback-modal {\n position: absolute;\n bottom: calc(100% + 16px);\n right: 0;\n width: auto;\n max-width: 500px;\n background-color: var(--background-color);\n border-radius: 12px;\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);\n overflow: hidden;\n transform-origin: bottom right;\n }\n \n .modalFadeIn {\n animation: modalFadeIn 0.3s ease forwards;\n }\n \n .modalFadeOut {\n animation: modalFadeOut 0.3s ease forwards;\n }\n \n @keyframes modalFadeIn {\n from {\n opacity: 0;\n transform: scale(0.95) translateY(10px);\n }\n to {\n opacity: 1;\n transform: scale(1) translateY(0);\n }\n }\n \n @keyframes modalFadeOut {\n from {\n opacity: 1;\n transform: scale(1) translateY(0);\n }\n to {\n opacity: 0;\n transform: scale(0.95) translateY(10px);\n }\n }\n \n .position-bottom-left .feedback-modal {\n right: auto;\n left: 0;\n transform-origin: bottom left;\n }\n \n .position-top-right .feedback-modal {\n bottom: auto;\n top: calc(100% + 16px);\n transform-origin: top right;\n }\n \n .position-top-left .feedback-modal {\n bottom: auto;\n top: calc(100% + 16px);\n right: auto;\n left: 0;\n transform-origin: top left;\n }\n \n .feedback-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-bottom: 1px solid #f0f0f0;\n }\n \n .feedback-header h3 {\n margin: 0;\n font-size: 18px;\n font-weight: 600;\n color: var(--text-color);\n }\n \n .close-button {\n background: none;\n border: none;\n color: #999;\n cursor: pointer;\n display: flex;\n padding: 6px;\n opacity: 0.8;\n transition: opacity 0.2s ease, transform 0.2s ease;\n border-radius: 50%;\n }\n \n .close-button:hover {\n opacity: 1;\n transform: scale(1.1);\n background-color: rgba(0, 0, 0, 0.05);\n }\n \n .feedback-content {\n padding: 20px;\n }\n \n .feedback-question {\n margin-bottom: 20px;\n }\n \n .feedback-question p {\n margin: 0;\n font-size: 16px;\n color: var(--text-color);\n }\n \n /* Emojis */\n .feedback-emojis {\n display: flex;\n justify-content: space-between;\n margin-bottom: 24px;\n }\n \n .emoji-button {\n background: none;\n border: none;\n cursor: pointer;\n padding: 12px;\n border-radius: 12px;\n transition: transform 0.3s ease, background-color 0.2s ease;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n flex: 1;\n position: relative;\n }\n \n @media (max-width: 640px) {\n .emoji-button {\n padding: 5px;\n }\n }\n \n \n .emoji-button:hover {\n background-color: rgba(15, 140, 255, 0.05);\n }\n \n .emoji-button.active {\n background-color: rgba(15, 140, 255, 0.1);\n }\n \n .emoji-button.active::after {\n content: "";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 2px solid var(--primary-color);\n border-radius: 12px;\n pointer-events: none;\n }\n \n .emoji-icon {\n font-size: 28px;\n transition: transform 0.2s ease;\n }\n\n @media (max-width: 640px) {\n .emoji-icon {\n font-size: 23px;\n }\n }\n \n .emoji-button:hover .emoji-icon {\n transform: scale(1.1);\n }\n \n .emoji-button.active .emoji-icon {\n transform: scale(1.2);\n }\n \n .emoji-label {\n font-size: 12px;\n color: var(--text-color);\n font-weight: 500;\n opacity: 0.8;\n }\n \n /* Text input */\n .feedback-text-section {\n margin-bottom: 24px;\n }\n \n .feedback-text-section label {\n display: block;\n margin-bottom: 8px;\n font-size: 16px;\n font-weight: 500;\n color: var(--text-color);\n }\n\n .error-message {\n color: red;\n font-size: 14px;\n margin-top: 8px;\n }\n \n .optional-text {\n font-weight: normal;\n opacity: 0.6;\n font-size: 14px;\n }\n \n .feedback-text-section textarea {\n width: 100%;\n height: 120px;\n padding: 16px;\n border: 1px solid #eaeaea;\n border-radius: 8px;\n resize: none;\n font-family: inherit;\n font-size: 15px;\n color: var(--text-color);\n transition: border-color 0.2s ease, box-shadow 0.2s ease;\n background-color: #f9f9f9;\n }\n \n .feedback-text-section textarea:focus {\n outline: none;\n border-color: var(--primary-color);\n box-shadow: 0 0 0 2px rgba(15, 140, 255, 0.1);\n background-color: #fff;\n }\n \n /* Actions */\n .feedback-actions {\n display: flex;\n justify-content: center;\n }\n \n .submit-button {\n padding: 12px 24px;\n background-color: var(--primary-color);\n color: white;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n font-size: 16px;\n font-weight: 500;\n min-width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;\n }\n \n .submit-button:hover:not(:disabled) {\n transform: translateY(-2px);\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);\n background-color: var(--secondary-color);\n }\n \n .submit-button:active:not(:disabled) {\n transform: translateY(-1px);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n }\n \n .submit-button:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n }\n \n /* Success state */\n .feedback-success {\n display: flex;\n width: 100%;\n max-width: 400px;\n min-width: 300px; /* Ensure it doesn\'t go too small */\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 30px 20px;\n animation: successPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;\n opacity: 0;\n transform: scale(0.8);\n text-align: center;\n box-sizing: border-box;\n background-color: white; /* optional */\n }\n \n \n \n @keyframes successPop {\n to {\n opacity: 1;\n transform: scale(1);\n }\n }\n \n .success-icon {\n width: 64px;\n height: 64px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 20px;\n background-color: rgba(15, 140, 255, 0.1);\n flex-shrink: 0;\n }\n \n .feedback-success h4 {\n margin: 0 0 8px;\n font-size: 1.25rem; /* 20px */\n font-weight: 600;\n color: var(--text-color);\n }\n \n .feedback-success p {\n margin: 0;\n font-size: 1rem; /* 16px */\n color: var(--text-color);\n opacity: 0.8;\n line-height: 1.4;\n }\n \n /* Responsive adjustments */\n @media (max-width: 480px) {\n .feedback-success {\n padding: 24px 16px;\n }\n \n .feedback-success h4 {\n font-size: 1.125rem; /* 18px */\n }\n \n .feedback-success p {\n font-size: 0.95rem; /* 15px */\n }\n \n .success-icon {\n width: 48px;\n height: 48px;\n }\n }\n \n \n \n /* Loading spinner */\n .loading-spinner {\n display: inline-block;\n width: 18px;\n height: 18px;\n border: 2px solid rgba(255, 255, 255, 0.3);\n border-radius: 50%;\n border-top-color: white;\n animation: spin 0.8s linear infinite;\n }\n \n @keyframes spin {\n to {\n transform: rotate(360deg);\n }\n }\n \n /* Theme */\n .theme-dark {\n --text-color: #e0e0e0;\n --background-color: #1e1e1e;\n }\n \n .theme-dark .feedback-header {\n border-bottom-color: #333;\n }\n \n .theme-dark .feedback-text-section textarea {\n background-color: #2a2a2a;\n border-color: #444;\n color: #e0e0e0;\n }\n \n .theme-dark .feedback-text-section textarea:focus {\n background-color: #333;\n border-color: var(--primary-color);\n }\n \n .theme-dark .emoji-button:hover {\n background-color: rgba(15, 140, 255, 0.15);\n }\n \n .theme-dark .emoji-button.active {\n background-color: rgba(15, 140, 255, 0.2);\n }\n \n .theme-dark .feedback-modal {\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);\n }\n \n /* Fix dark mode for all elements */\n .theme-dark .feedback-question p,\n .theme-dark .feedback-text-section label,\n .theme-dark .emoji-label,\n .theme-dark .feedback-success h4,\n .theme-dark .feedback-success p {\n color: #e0e0e0;\n }\n \n .theme-dark .close-button {\n color: #777;\n }\n \n .theme-dark .close-button:hover {\n background-color: rgba(255, 255, 255, 0.1);\n }\n \n /* Responsive adjustments */\n @media (max-width: 480px) {\n .feedback-modal {\n width: 320px;\n }\n \n .feedback-emojis {\n justify-content: center;\n gap: 8px;\n }\n \n .emoji-button {\n flex: 0 0 calc(20% - 8px);\n }\n \n .emoji-label {\n font-size: 10px;\n }\n }\n \n \n\n\n .powered-by-feedaura {\n display: flex;\n align-items: center;\n gap: 6px;\n margin-top: 1rem;\n font-size: 0.875rem; /* equivalent to Tailwind\'s text-sm */\n color: #4b5563; \n justify-content: end;\n }\n \n .feedaura-highlight {\n font-weight: 600;\n }\n ');var d={small:24,medium:32,large:40},l=function(){if("undefined"==typeof navigator)return"Unknown";var n=navigator.userAgent,e="Unknown";return n.includes("Firefox")?e="Firefox":n.includes("Edg/")?e="Edge":n.includes("OPR")||n.includes("Opera")?e="Opera":n.includes("Chrome")?e="Chrome":n.includes("Safari")?e="Safari":(n.includes("Trident")||n.includes("MSIE"))&&(e="Internet Explorer"),e},u=function(){if("undefined"==typeof navigator)return"Unknown";var n=navigator.userAgent;return/Android/i.test(n)?"Android":/iPhone|iPad|iPod/i.test(n)?/iPad/i.test(n)?"iPad":/iPod/i.test(n)?"iPod":"iPhone":/Windows Phone/i.test(n)?"Windows Phone":/Windows/i.test(n)?"Windows":/Macintosh/i.test(n)?"Mac":/Linux/i.test(n)?"Linux":"Unknown"};var f=function(o){var t=o.isOpen,r=o.modalAnimation,i=o.onClose,a=o.modalRef,s=o.children,c=o.headerText;return t?n("div",{className:"feedback-modal ".concat(r),ref:a,role:"dialog","aria-modal":"true",children:[n("div",{className:"feedback-header",children:[e("h3",{id:"feedback-header",children:c}),e("button",{className:"close-button",onClick:i,"aria-label":"Close feedback form",children:n("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[e("path",{d:"M18 6L6 18",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}),e("path",{d:"M6 6L18 18",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]})})]}),e("div",{className:"feedback-content",children:s})]}):null},p=[{icon:"😭",label:"Dissatisfied",value:"dissatisfied"},{icon:"😔",label:"Somewhat Dissatisfied",value:"somewhat_dissatisfied"},{icon:"😐",label:"Neutral",value:"neutral"},{icon:"🙂",label:"Somewhat Satisfied",value:"somewhat_satisfied"},{icon:"🤩",label:"Satisfied",value:"satisfied"}],m=function(o){var t=o.selectedEmoji,r=o.onSelectEmoji;return e("div",{className:"feedback-emojis",children:p.map((function(o){return n("button",{type:"button",className:"emoji-button ".concat(t===o.value?"active":""),onClick:function(){return r(t===o.value?"":o.value)},"aria-label":o.label,children:[e("span",{className:"emoji-icon",children:o.icon}),e("span",{className:"emoji-label",children:"Somewhat Dissatisfied"===o.label?"Dissatisfied":"Somewhat Satisfied"===o.label?"Satisfied":o.label})]},o.value)}))})},b=function(o){var t=o.value,r=o.onChange,i=o.errorMsg,a=o.placeholder,s=o.label;return n("div",{className:"feedback-text-section",children:[n("label",{htmlFor:"feedback-text",children:[s," ",e("span",{className:"required-text",children:"*"})]}),e("textarea",{id:"feedback-text",placeholder:a,value:t,onChange:r,"aria-label":"Feedback text",required:!0}),i&&e("div",{className:"error-message",children:i})]})},h=function(n){var o=n.isSubmitting,t=n.disabled,r=n.onClick,i=n.primaryColor,a=n.submitText;return e("button",{className:"submit-button",onClick:r,disabled:t,style:{backgroundColor:i},children:o?e("span",{className:"loading-spinner"}):a})},x=function(o){var t=o.size,r=void 0===t?20:t,i=o.color,a=void 0===i?"#EF2101":i;return n("svg",{width:r,height:r,viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[e("path",{d:"M31.5 7.23333C30.3333 7.23333 29.1667 7 28 7C26.8333 7 25.6667 7.23333 24.5 7.23333",stroke:a,strokeWidth:"3.05455",strokeLinecap:"round",strokeLinejoin:"round"}),e("path",{d:"M45.0333 15.8666C43.6416 14.0083 41.9916 12.3583 40.1333 10.9666",stroke:a,strokeWidth:"3.05455",strokeLinecap:"round",strokeLinejoin:"round"}),e("path",{d:"M48.7666 31.5C48.9999 30.3333 48.9999 29.1667 48.9999 28C48.9999 26.8333 48.7666 25.6667 48.7666 24.5",stroke:a,strokeWidth:"3.05455",strokeLinecap:"round",strokeLinejoin:"round"}),e("path",{d:"M40.1333 45.0333C41.9916 43.6416 43.6416 41.9916 45.0333 40.1333",stroke:a,strokeWidth:"3.05455",strokeLinecap:"round",strokeLinejoin:"round"}),e("path",{d:"M24.5 48.7666C25.6667 48.9999 26.8333 48.9999 28 48.9999C29.1667 48.9999 30.3333 48.7666 31.5 48.7666",stroke:a,strokeWidth:"3.05455",strokeLinecap:"round",strokeLinejoin:"round"}),e("path",{d:"M8.1665 40.8333L4.6665 51.3333L15.1665 47.8333",stroke:a,strokeWidth:"3.05455",strokeLinecap:"round",strokeLinejoin:"round"}),e("path",{d:"M7.23333 24.5C7.23333 25.6667 7 26.8333 7 28C7 29.1667 7.23333 30.3333 7.23333 31.5",stroke:a,strokeWidth:"3.05455",strokeLinecap:"round",strokeLinejoin:"round"}),e("path",{d:"M15.8668 10.9666C14.0085 12.3583 12.3585 14.0083 10.9668 15.8666",stroke:a,strokeWidth:"3.05455",strokeLinecap:"round",strokeLinejoin:"round"}),e("path",{d:"M39.3133 28.0001H36.5076C36.0132 27.9991 35.532 28.16 35.1377 28.4583C34.7434 28.7566 34.4577 29.1758 34.3242 29.6519L31.6656 39.1096C31.6485 39.1684 31.6127 39.22 31.5638 39.2567C31.5148 39.2934 31.4553 39.3133 31.3941 39.3133C31.3329 39.3133 31.2733 39.2934 31.2244 39.2567C31.1754 39.22 31.1397 39.1684 31.1226 39.1096L24.8777 16.8906C24.8606 16.8319 24.8249 16.7803 24.7759 16.7436C24.7269 16.7069 24.6674 16.687 24.6062 16.687C24.545 16.687 24.4855 16.7069 24.4365 16.7436C24.3876 16.7803 24.3518 16.8319 24.3347 16.8906L21.6761 26.3484C21.5431 26.8226 21.2591 27.2405 20.8671 27.5386C20.475 27.8367 19.9965 27.9987 19.504 28.0001H16.687",stroke:a,strokeWidth:"3.05455",strokeLinecap:"round",strokeLinejoin:"round"})]})},k=function(o){var t=o.primaryColor;return n("div",{className:"powered-by-feedaura",children:[e(x,{color:t,size:18}),n("span",{children:["Powered by ",e("span",{className:"feedaura-highlight",style:{color:t},children:"Feedaura"})]})]})},g=function(t){var r=t.feedback,i=t.setFeedback,s=t.errorMsg,c=t.setErrorMsg,d=t.placeholder,l=t.feedbackLabel,u=t.submitText,f=t.isSubmitting,p=t.onSubmit,x=t.questionText,g=t.primaryColor;return n(o,{children:[e("div",{className:"feedback-question",children:e("p",{children:x})}),e(m,{selectedEmoji:r.emoji,onSelectEmoji:function(n){return i((function(e){return a(a({},e),{emoji:e.emoji===n?"":n})}))}}),e(b,{value:r.text,onChange:function(n){var e=n.target.value;e.length>200?c("Feedback text cannot exceed 200 words."):(c(""),i((function(n){return a(a({},n),{text:e})})))},errorMsg:s,placeholder:d,label:l}),e("div",{className:"feedback-actions",children:e(h,{isSubmitting:f,disabled:f||!r.text.trim()||Boolean(s),onClick:p,primaryColor:g,submitText:u})}),e(k,{primaryColor:g})]})},v=function(n){var o=n.size,t=void 0===o?24:o,r=n.color,i=void 0===r?"white":r,a=n.animated;return e("svg",{width:t,height:t,viewBox:"0 0 24 24",fill:"none",className:void 0!==a&&a?"animated-icon":void 0,xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M21 11.5C21.0034 12.8199 20.6951 14.1219 20.1 15.3C19.3944 16.7118 18.3098 17.8992 16.9674 18.7293C15.6251 19.5594 14.0782 19.9994 12.5 20C11.1801 20.0035 9.87812 19.6951 8.7 19.1L3 21L4.9 15.3C4.30493 14.1219 3.99656 12.8199 4 11.5C4.00061 9.92179 4.44061 8.37488 5.27072 7.03258C6.10083 5.69028 7.28825 4.6056 8.7 3.90003C9.87812 3.30496 11.1801 2.99659 12.5 3.00003H13C15.0843 3.11502 17.053 3.99479 18.5291 5.47089C20.0052 6.94699 20.885 8.91568 21 11V11.5Z",stroke:i,strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})},w=function(o){var t=o.size,r=void 0===t?24:t,i=o.color,a=void 0===i?"white":i,s=o.animated;return n("svg",{width:r,height:r,viewBox:"0 0 24 24",fill:"none",className:void 0!==s&&s?"animated-icon":void 0,xmlns:"http://www.w3.org/2000/svg",children:[e("path",{d:"M4 4H20C21.1 4 22 4.9 22 6V18C22 19.1 21.1 20 20 20H4C2.9 20 2 19.1 2 18V6C2 4.9 2.9 4 4 4Z",stroke:a,strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}),e("path",{d:"M22 6L12 13L2 6",stroke:a,strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]})},y=function(n){var o=n.size,t=void 0===o?24:o,r=n.color,i=void 0===r?"white":r,a=n.animated;return e("svg",{width:t,height:t,viewBox:"0 0 24 24",fill:"none",className:void 0!==a&&a?"animated-icon":void 0,xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M21 15C21 15.5304 20.7893 16.0391 20.4142 16.4142C20.0391 16.7893 19.5304 17 19 17H7L3 21V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V15Z",stroke:i,strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})},C=function(n){var o=n.size,t=void 0===o?24:o,r=n.color,i=void 0===r?"white":r,a=n.animated;return e("div",{className:void 0!==a&&a?"animated-icon":void 0,style:{lineHeight:0},children:e(x,{size:t,color:i})})},j="production"===process.env.NODE_ENV?"https://feedaura.feedaura-ai.workers.dev/feedbacks":"http://localhost:8787/feedbacks",L=function(p){var m=p.projectSecret,b=p.position,h=void 0===b?"bottom-right":b,x=p.primaryColor,k=void 0===x?"#0F8CFF":x,L=p.secondaryColor,S=void 0===L?"#0070E0":L,z=p.textColor,F=void 0===z?"#333333":z,N=p.backgroundColor,M=void 0===N?"#FFFFFF":N,E=p.theme,T=void 0===E?"light":E,W=p.buttonText,O=void 0===W?"":W,P=p.buttonIcon,I=void 0===P?"feedaura":P,A=p.iconColor,B=void 0===A?"#FFFFFF":A,R=p.buttonSize,q=void 0===R?"medium":R,H=p.buttonRadius,U=void 0===H?"50%":H,Y=p.widgetStyle,V=void 0===Y?"floating":Y,D=p.zIndex,_=void 0===D?9999:D,Z=p.autoCloseAfterSubmit,G=void 0===Z||Z,J=p.apiEndpoint,K=void 0===J?j:J,Q=p.animated,X=void 0===Q||Q,$=p.productName,nn=void 0===$?"product":$,en=p.placeholder,on=void 0===en?"Please write here":en,tn=p.submitText,rn=void 0===tn?"Submit":tn,an=p.headerText,sn=void 0===an?"Give us your feedback":an,cn=p.questionText,dn=void 0===cn?"What was your experience while using ".concat(nn,"?"):cn,ln=p.feedbackLabelText,un=void 0===ln?"Write your feedback":ln,fn=t({text:"",emoji:""}),pn=fn[0],mn=fn[1],bn=t(""),hn=bn[0],xn=bn[1],kn=t(!1),gn=kn[0],vn=kn[1],wn=t(!1),yn=wn[0],Cn=wn[1],jn=function(n,e){var o=t((function(){return"undefined"==typeof window?null:window.localStorage.getItem(n)||e})),r=o[0],i=o[1];return[r,function(e){e!==r&&(i(e),"undefined"!=typeof window&&window.localStorage.setItem(n,e))}]}("feedback-widget-text",""),Ln=jn[0],Sn=jn[1],zn=function(n,e){void 0===e&&(e=300);var o=t(!1),a=o[0],s=o[1],c=t(""),d=c[0],l=c[1],u=r(null),f=r(null),p=function(){l("modalFadeOut"),setTimeout((function(){s(!1),l(""),n()}),e)};return i((function(){var n,e,o;a?null===(e=null===(n=u.current)||void 0===n?void 0:n.querySelector(".close-button"))||void 0===e||e.focus():null===(o=f.current)||void 0===o||o.focus()}),[a]),i((function(){var n=function(n){"Escape"===n.key&&a&&p()},e=function(n){u.current&&!u.current.contains(n.target)&&p()};return a&&(document.addEventListener("keydown",n),document.addEventListener("mousedown",e)),function(){document.removeEventListener("keydown",n),document.removeEventListener("mousedown",e)}}),[a]),{isOpen:a,modalAnimation:d,openModal:function(){s(!0),l("modalFadeIn")},closeModal:p,modalRef:u,triggerButtonRef:f}}((function(){return Cn(!1)})),Fn=zn.isOpen,Nn=zn.modalAnimation,Mn=zn.openModal,En=zn.closeModal,Tn=zn.modalRef,Wn=zn.triggerButtonRef;i((function(){Ln&&""===pn.text&&mn((function(n){return a(a({},n),{text:Ln})}))}),[]),i((function(){pn.text!==Ln&&Sn(pn.text)}),[pn.text,Sn,Ln]),i((function(){if(yn&&G){var n=setTimeout((function(){En()}),3e3);return function(){return clearTimeout(n)}}}),[yn,G,En]);var On={"--primary-color":k,"--secondary-color":S,"--text-color":F,"--background-color":M,"--button-radius":U,"--z-index":_,"--icon-color":B},Pn="button-".concat(q),In="position-".concat(h),An="theme-".concat(T),Bn="style-".concat(V),Rn=d[q];return n("div",{className:"feedback-widget ".concat(In," ").concat(An," ").concat(Bn),style:On,children:[n("button",{ref:Wn,className:"feedback-button ".concat(Pn),onClick:Mn,style:{backgroundColor:k,borderRadius:U},"aria-label":"Open feedback form",children:["none"!==I&&e("span",{className:"button-icon",children:function(){var n={size:Rn,color:B,animated:X};switch(I){case"feedback":return e(v,a({},n));case"message":return e(w,a({},n));case"chat":return e(y,a({},n));case"feedaura":return e(C,a({},n));default:return null}}()}),O&&e("span",{className:"button-text",children:O})]}),Fn&&e(f,{isOpen:Fn,modalAnimation:Nn,onClose:En,modalRef:Tn,headerText:sn,children:yn?n("div",{className:"feedback-success","aria-live":"polite",children:[e("div",{className:"success-icon",children:n("svg",{width:"32",height:"32",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[e("path",{d:"M22 11.08V12C21.9988 14.1564 21.3005 16.2547 20.0093 17.9818C18.7182 19.709 16.9033 20.9725 14.8354 21.5839C12.7674 22.1953 10.5573 22.1219 8.53447 21.3746C6.51168 20.6273 4.78465 19.2461 3.61096 17.4371C2.43727 15.628 1.87979 13.4881 2.02168 11.3363C2.16356 9.18455 2.99721 7.13631 4.39828 5.49706C5.79935 3.85781 7.69279 2.71537 9.79619 2.24013C11.8996 1.7649 14.1003 1.98232 16.07 2.85999",stroke:k,strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}),e("path",{d:"M22 4L12 14.01L9 11.01",stroke:k,strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]})}),e("h4",{children:"Thank you for your feedback!"}),e("p",{children:"We appreciate your input and will use it to improve our service."})]}):e(o,{children:e(g,{feedback:pn,setFeedback:mn,errorMsg:hn,setErrorMsg:xn,primaryColor:k,placeholder:on,feedbackLabel:un,submitText:rn,isSubmitting:gn,onSubmit:function(){return s(void 0,void 0,void 0,(function(){var n,e,o,t,r;return c(this,(function(i){switch(i.label){case 0:if(!m)return xn("Project secret is missing."),[2];if(!K)return xn("API endpoint is missing."),[2];if(""===pn.text.trim())return xn("Feedback text is required."),[2];xn(""),vn(!0),i.label=1;case 1:return i.trys.push([1,7,8,9]),[4,s(void 0,void 0,void 0,(function(){var n,e;return c(this,(function(o){switch(o.label){case 0:return o.trys.push([0,3,,4]),[4,fetch("https://ipapi.co/json/")];case 1:return[4,o.sent().json()];case 2:return[2,{country:(n=o.sent()).country_name||"Unknown",countryCode:n.country||"Unknown",device:u(),browser:l(),url:window.location.href,referrer:document.referrer}];case 3:return e=o.sent(),console.error("Error fetching country data:",e),[2,{country:"Unknown",countryCode:"Unknown",device:u(),browser:l(),url:window.location.href,referrer:document.referrer}];case 4:return[2]}}))}))];case 2:return n=i.sent(),e=a({text:pn.text},pn.emoji?{emoji:pn.emoji}:{}),[4,fetch(K,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({projectSecret:m,feedback:e,metadata:n})})];case 3:return(o=i.sent()).ok?(Cn(!0),Sn(""),mn({text:"",emoji:""}),[3,6]):[3,4];case 4:return[4,o.json()];case 5:"LIMIT_REACHED"===(null==(t=i.sent())?void 0:t.code)?xn("The author has run out of free credits and can't accept more feedback at this time."):xn((null==t?void 0:t.message)||"Failed to submit feedback. Please try again later."),i.label=6;case 6:return[3,9];case 7:return r=i.sent(),console.error("Error submitting feedback:",r),xn("An error occurred while submitting feedback."),[3,9];case 8:return vn(!1),[7];case 9:return[2]}}))}))},questionText:dn})})})]})};export{L as Feedback}; //# sourceMappingURL=index.mjs.map