interview-widget 0.0.5 → 0.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/types.d.ts +0 -2
  2. package/dist/widget.css +1 -1
  3. package/dist/widget.es.js +110 -104
  4. package/dist/widget.umd.js +2 -2
  5. package/package.json +1 -1
package/dist/types.d.ts CHANGED
@@ -17,6 +17,4 @@ export interface InterviewWidgetProps {
17
17
  onComplete?: (answers: InterviewAnswer[]) => void;
18
18
  onAnswerSubmit?: (answer: InterviewAnswer) => void;
19
19
  className?: string;
20
- width?: string;
21
- height?: string;
22
20
  }
package/dist/widget.css CHANGED
@@ -1 +1 @@
1
- *,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Inter,system-ui,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.iw-fixed{position:fixed!important}.iw-relative{position:relative!important}.iw-inset-0{top:0!important;right:0!important;bottom:0!important;left:0!important}.iw-z-50{z-index:50!important}.iw-mx-4{margin-left:1rem!important;margin-right:1rem!important}.iw-mx-auto{margin-left:auto!important;margin-right:auto!important}.iw-mb-1{margin-bottom:.25rem!important}.iw-mb-2{margin-bottom:.5rem!important}.iw-mb-3{margin-bottom:.75rem!important}.iw-mb-4{margin-bottom:1rem!important}.iw-mr-2{margin-right:.5rem!important}.iw-mt-1{margin-top:.25rem!important}.iw-mt-2{margin-top:.5rem!important}.iw-mt-3{margin-top:.75rem!important}.iw-mt-4{margin-top:1rem!important}.iw-mt-auto{margin-top:auto!important}.iw-block{display:block!important}.iw-flex{display:flex!important}.iw-inline-flex{display:inline-flex!important}.iw-grid{display:grid!important}.iw-h-12{height:3rem!important}.iw-h-4{height:1rem!important}.iw-h-64{height:16rem!important}.iw-h-7{height:1.75rem!important}.iw-h-\[400px\]{height:400px!important}.iw-h-full{height:100%!important}.iw-h-px{height:1px!important}.iw-h-screen{height:100vh!important}.iw-min-h-\[112px\]{min-height:112px!important}.iw-w-12{width:3rem!important}.iw-w-4{width:1rem!important}.iw-w-7{width:1.75rem!important}.iw-w-full{width:100%!important}.iw-w-screen{width:100vw!important}.iw-max-w-3xl{max-width:48rem!important}.iw-flex-1{flex:1 1 0%!important}.iw-flex-grow{flex-grow:1!important}@keyframes iw-spin{to{transform:rotate(360deg)}}.iw-animate-spin{animation:iw-spin 1s linear infinite!important}.iw-cursor-pointer{cursor:pointer!important}.iw-resize-none{resize:none!important}.iw-list-disc{list-style-type:disc!important}.iw-grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))!important}.iw-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))!important}.iw-flex-col{flex-direction:column!important}.iw-items-center{align-items:center!important}.iw-justify-center{justify-content:center!important}.iw-justify-between{justify-content:space-between!important}.iw-gap-2{gap:.5rem!important}.iw-gap-3{gap:.75rem!important}.iw-gap-4{gap:1rem!important}.iw-space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0 !important;margin-right:calc(.5rem * var(--tw-space-x-reverse))!important;margin-left:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))!important}.iw-space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0 !important;margin-right:calc(.75rem * var(--tw-space-x-reverse))!important;margin-left:calc(.75rem * calc(1 - var(--tw-space-x-reverse)))!important}.iw-space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0 !important;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)))!important;margin-bottom:calc(.5rem * var(--tw-space-y-reverse))!important}.iw-overflow-hidden{overflow:hidden!important}.iw-rounded{border-radius:.25rem!important}.iw-rounded-lg{border-radius:.5rem!important}.iw-rounded-md{border-radius:.375rem!important}.iw-rounded-none{border-radius:0!important}.iw-rounded-xl{border-radius:.75rem!important}.iw-border{border-width:1px!important}.iw-border-b{border-bottom-width:1px!important}.iw-border-gray-200{--tw-border-opacity: 1 !important;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1))!important}.iw-border-gray-300{--tw-border-opacity: 1 !important;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1))!important}.iw-border-indigo-100{--tw-border-opacity: 1 !important;border-color:rgb(224 231 255 / var(--tw-border-opacity, 1))!important}.iw-border-primary-500{--tw-border-opacity: 1 !important;border-color:rgb(59 130 246 / var(--tw-border-opacity, 1))!important}.iw-border-red-500{--tw-border-opacity: 1 !important;border-color:rgb(239 68 68 / var(--tw-border-opacity, 1))!important}.iw-border-transparent{border-color:transparent!important}.iw-bg-black\/50{background-color:#00000080!important}.iw-bg-gray-200{--tw-bg-opacity: 1 !important;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1))!important}.iw-bg-gray-50{--tw-bg-opacity: 1 !important;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))!important}.iw-bg-gray-900{--tw-bg-opacity: 1 !important;background-color:rgb(17 24 39 / var(--tw-bg-opacity, 1))!important}.iw-bg-primary-100{--tw-bg-opacity: 1 !important;background-color:rgb(219 234 254 / var(--tw-bg-opacity, 1))!important}.iw-bg-primary-600{--tw-bg-opacity: 1 !important;background-color:rgb(37 99 235 / var(--tw-bg-opacity, 1))!important}.iw-bg-purple-500{--tw-bg-opacity: 1 !important;background-color:rgb(168 85 247 / var(--tw-bg-opacity, 1))!important}.iw-bg-transparent{background-color:transparent!important}.iw-bg-white{--tw-bg-opacity: 1 !important;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))!important}.iw-bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))!important}.iw-bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))!important}.iw-from-indigo-50{--tw-gradient-from: #eef2ff var(--tw-gradient-from-position) !important;--tw-gradient-to: rgb(238 242 255 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important}.iw-from-purple-500{--tw-gradient-from: #a855f7 var(--tw-gradient-from-position) !important;--tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important}.iw-to-indigo-500{--tw-gradient-to: #6366f1 var(--tw-gradient-to-position) !important}.iw-to-white{--tw-gradient-to: #fff var(--tw-gradient-to-position) !important}.iw-object-cover{-o-object-fit:cover!important;object-fit:cover!important}.iw-p-2{padding:.5rem!important}.iw-p-4{padding:1rem!important}.iw-p-5{padding:1.25rem!important}.iw-px-3{padding-left:.75rem!important;padding-right:.75rem!important}.iw-px-4{padding-left:1rem!important;padding-right:1rem!important}.iw-px-5{padding-left:1.25rem!important;padding-right:1.25rem!important}.iw-py-1\.5{padding-top:.375rem!important;padding-bottom:.375rem!important}.iw-py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.iw-py-2\.5{padding-top:.625rem!important;padding-bottom:.625rem!important}.iw-py-3{padding-top:.75rem!important;padding-bottom:.75rem!important}.iw-py-4{padding-top:1rem!important;padding-bottom:1rem!important}.iw-py-5{padding-top:1.25rem!important;padding-bottom:1.25rem!important}.iw-pl-4{padding-left:1rem!important}.iw-pt-2{padding-top:.5rem!important}.iw-text-center{text-align:center!important}.iw-text-\[15px\]{font-size:15px!important}.iw-text-base{font-size:1rem!important;line-height:1.5rem!important}.iw-text-sm{font-size:.875rem!important;line-height:1.25rem!important}.iw-text-xl{font-size:1.25rem!important;line-height:1.75rem!important}.iw-text-xs{font-size:.75rem!important;line-height:1rem!important}.iw-font-bold{font-weight:700!important}.iw-font-medium{font-weight:500!important}.iw-font-semibold{font-weight:600!important}.iw-leading-6{line-height:1.5rem!important}.iw-text-gray-500{--tw-text-opacity: 1 !important;color:rgb(107 114 128 / var(--tw-text-opacity, 1))!important}.iw-text-gray-700{--tw-text-opacity: 1 !important;color:rgb(55 65 81 / var(--tw-text-opacity, 1))!important}.iw-text-gray-800{--tw-text-opacity: 1 !important;color:rgb(31 41 55 / var(--tw-text-opacity, 1))!important}.iw-text-gray-900{--tw-text-opacity: 1 !important;color:rgb(17 24 39 / var(--tw-text-opacity, 1))!important}.iw-text-primary-600{--tw-text-opacity: 1 !important;color:rgb(37 99 235 / var(--tw-text-opacity, 1))!important}.iw-text-primary-700{--tw-text-opacity: 1 !important;color:rgb(29 78 216 / var(--tw-text-opacity, 1))!important}.iw-text-red-600{--tw-text-opacity: 1 !important;color:rgb(220 38 38 / var(--tw-text-opacity, 1))!important}.iw-text-white{--tw-text-opacity: 1 !important;color:rgb(255 255 255 / var(--tw-text-opacity, 1))!important}.iw-opacity-25{opacity:.25!important}.iw-opacity-75{opacity:.75!important}.iw-shadow-2xl{--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / .25) !important;--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color) !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)!important}.iw-shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1) !important;--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color) !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)!important}.iw-shadow-none{--tw-shadow: 0 0 #0000 !important;--tw-shadow-colored: 0 0 #0000 !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)!important}.iw-shadow-sm{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05) !important;--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color) !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)!important}.iw-backdrop-blur-sm{--tw-backdrop-blur: blur(4px) !important;-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)!important;backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)!important}.iw-transition-all{transition-property:all!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important;transition-duration:.15s!important}.iw-transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important;transition-duration:.15s!important}:root{--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-opacity: .5}.interview-widget-container{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.interview-messages::-webkit-scrollbar{width:6px}.interview-messages::-webkit-scrollbar-track{background:#f1f1f1}.interview-messages::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.interview-messages::-webkit-scrollbar-thumb:hover{background:#a8a8a8}@keyframes slideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.message-animation{animation:slideIn .3s ease-out}.iw-hover\:bg-primary-600:hover{background-color:#2563eb!important}.iw-focus\:outline-none:focus{outline:2px solid transparent!important;outline-offset:2px!important}.iw-focus\:ring-2:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)!important}.iw-focus\:ring-primary-500:focus{--tw-ring-opacity: 1 !important;--tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1)) !important}.iw-disabled\:opacity-50:disabled{opacity:.5!important}.iw-disabled\:cursor-not-allowed:disabled{cursor:not-allowed!important}@media (min-width: 1024px){.iw-lg\:max-w-md{max-width:28rem!important}}@media (min-width: 768px){.iw-md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))!important}}.hover\:iw-from-purple-600:hover{--tw-gradient-from: #9333ea var(--tw-gradient-from-position) !important;--tw-gradient-to: rgb(147 51 234 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important}.hover\:iw-to-indigo-600:hover{--tw-gradient-to: #4f46e5 var(--tw-gradient-to-position) !important}.hover\:iw-text-gray-700:hover{--tw-text-opacity: 1 !important;color:rgb(55 65 81 / var(--tw-text-opacity, 1))!important}
1
+ .interview-widget-container .iw-fixed{position:fixed}.interview-widget-container .iw-relative{position:relative}.interview-widget-container .iw-inset-0{top:0;right:0;bottom:0;left:0}.interview-widget-container .iw-z-50{z-index:50}.interview-widget-container .iw-mx-4{margin-left:1rem;margin-right:1rem}.interview-widget-container .iw-mx-auto{margin-left:auto;margin-right:auto}.interview-widget-container .iw-mb-1{margin-bottom:.25rem}.interview-widget-container .iw-mb-2{margin-bottom:.5rem}.interview-widget-container .iw-mb-3{margin-bottom:.75rem}.interview-widget-container .iw-mb-4{margin-bottom:1rem}.interview-widget-container .iw-mr-2{margin-right:.5rem}.interview-widget-container .iw-mt-1{margin-top:.25rem}.interview-widget-container .iw-mt-2{margin-top:.5rem}.interview-widget-container .iw-mt-3{margin-top:.75rem}.interview-widget-container .iw-mt-4{margin-top:1rem}.interview-widget-container .iw-mt-auto{margin-top:auto}.interview-widget-container .iw-block{display:block}.interview-widget-container .iw-flex{display:flex}.interview-widget-container .iw-inline-flex{display:inline-flex}.interview-widget-container .iw-grid{display:grid}.interview-widget-container .iw-h-12{height:3rem}.interview-widget-container .iw-h-4{height:1rem}.interview-widget-container .iw-h-64{height:16rem}.interview-widget-container .iw-h-7{height:1.75rem}.interview-widget-container .iw-h-\[400px\]{height:400px}.interview-widget-container .iw-h-\[calc\(100vh-1rem\)\]{height:calc(100vh - 1rem)}.interview-widget-container .iw-h-full{height:100%}.interview-widget-container .iw-h-px{height:1px}.interview-widget-container .iw-h-screen{height:100vh}.interview-widget-container .iw-min-h-\[112px\]{min-height:112px}.interview-widget-container .iw-w-12{width:3rem}.interview-widget-container .iw-w-4{width:1rem}.interview-widget-container .iw-w-7{width:1.75rem}.interview-widget-container .iw-w-full{width:100%}.interview-widget-container .iw-w-screen{width:100vw}.interview-widget-container .iw-max-w-3xl{max-width:48rem}.interview-widget-container .iw-flex-1{flex:1 1 0%}.interview-widget-container .iw-flex-grow{flex-grow:1}@keyframes iw-spin{to{transform:rotate(360deg)}}.interview-widget-container .iw-animate-spin{animation:iw-spin 1s linear infinite}.interview-widget-container .iw-cursor-pointer{cursor:pointer}.interview-widget-container .iw-resize-none{resize:none}.interview-widget-container .iw-list-disc{list-style-type:disc}.interview-widget-container .iw-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.interview-widget-container .iw-flex-col{flex-direction:column}.interview-widget-container .iw-items-center{align-items:center}.interview-widget-container .iw-justify-center{justify-content:center}.interview-widget-container .iw-justify-between{justify-content:space-between}.interview-widget-container .iw-gap-2{gap:.5rem}.interview-widget-container .iw-gap-3{gap:.75rem}.interview-widget-container .iw-gap-4{gap:1rem}.interview-widget-container :is(.iw-space-x-2>:not([hidden])~:not([hidden])){--tw-space-x-reverse: 0;margin-right:calc(.5rem * var(--tw-space-x-reverse));margin-left:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))}.interview-widget-container :is(.iw-space-x-3>:not([hidden])~:not([hidden])){--tw-space-x-reverse: 0;margin-right:calc(.75rem * var(--tw-space-x-reverse));margin-left:calc(.75rem * calc(1 - var(--tw-space-x-reverse)))}.interview-widget-container :is(.iw-space-y-2>:not([hidden])~:not([hidden])){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.interview-widget-container .iw-overflow-hidden{overflow:hidden}.interview-widget-container .iw-rounded{border-radius:.25rem}.interview-widget-container .iw-rounded-lg{border-radius:.5rem}.interview-widget-container .iw-rounded-md{border-radius:.375rem}.interview-widget-container .iw-rounded-none{border-radius:0}.interview-widget-container .iw-rounded-xl{border-radius:.75rem}.interview-widget-container .iw-border{border-width:1px}.interview-widget-container .iw-border-b{border-bottom-width:1px}.interview-widget-container .iw-border-gray-200{--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1))}.interview-widget-container .iw-border-gray-300{--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1))}.interview-widget-container .iw-border-indigo-100{--tw-border-opacity: 1;border-color:rgb(224 231 255 / var(--tw-border-opacity, 1))}.interview-widget-container .iw-border-primary-500{--tw-border-opacity: 1;border-color:rgb(59 130 246 / var(--tw-border-opacity, 1))}.interview-widget-container .iw-border-red-500{--tw-border-opacity: 1;border-color:rgb(239 68 68 / var(--tw-border-opacity, 1))}.interview-widget-container .iw-border-transparent{border-color:transparent}.interview-widget-container .\!iw-bg-orange-200{--tw-bg-opacity: 1 !important;background-color:rgb(254 215 170 / var(--tw-bg-opacity, 1))!important}.interview-widget-container .iw-bg-black\/50{background-color:#00000080}.interview-widget-container .iw-bg-gray-200{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1))}.interview-widget-container .iw-bg-gray-50{--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}.interview-widget-container .iw-bg-gray-900{--tw-bg-opacity: 1;background-color:rgb(17 24 39 / var(--tw-bg-opacity, 1))}.interview-widget-container .iw-bg-primary-100{--tw-bg-opacity: 1;background-color:rgb(219 234 254 / var(--tw-bg-opacity, 1))}.interview-widget-container .iw-bg-primary-600{--tw-bg-opacity: 1;background-color:rgb(37 99 235 / var(--tw-bg-opacity, 1))}.interview-widget-container .iw-bg-purple-500{--tw-bg-opacity: 1;background-color:rgb(168 85 247 / var(--tw-bg-opacity, 1))}.interview-widget-container .iw-bg-transparent{background-color:transparent}.interview-widget-container .iw-bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.interview-widget-container .iw-object-cover{-o-object-fit:cover;object-fit:cover}.interview-widget-container .iw-p-2{padding:.5rem}.interview-widget-container .iw-p-4{padding:1rem}.interview-widget-container .iw-p-5{padding:1.25rem}.interview-widget-container .iw-px-3{padding-left:.75rem;padding-right:.75rem}.interview-widget-container .iw-px-4{padding-left:1rem;padding-right:1rem}.interview-widget-container .iw-px-5{padding-left:1.25rem;padding-right:1.25rem}.interview-widget-container .iw-py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.interview-widget-container .iw-py-2{padding-top:.5rem;padding-bottom:.5rem}.interview-widget-container .iw-py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.interview-widget-container .iw-py-3{padding-top:.75rem;padding-bottom:.75rem}.interview-widget-container .iw-py-4{padding-top:1rem;padding-bottom:1rem}.interview-widget-container .iw-py-5{padding-top:1.25rem;padding-bottom:1.25rem}.interview-widget-container .iw-pl-4{padding-left:1rem}.interview-widget-container .iw-pt-2{padding-top:.5rem}.interview-widget-container .iw-text-center{text-align:center}.interview-widget-container .iw-text-\[15px\]{font-size:15px}.interview-widget-container .iw-text-base{font-size:1rem;line-height:1.5rem}.interview-widget-container .iw-text-sm{font-size:.875rem;line-height:1.25rem}.interview-widget-container .iw-text-xl{font-size:1.25rem;line-height:1.75rem}.interview-widget-container .iw-text-xs{font-size:.75rem;line-height:1rem}.interview-widget-container .iw-font-bold{font-weight:700}.interview-widget-container .iw-font-medium{font-weight:500}.interview-widget-container .iw-font-semibold{font-weight:600}.interview-widget-container .iw-leading-6{line-height:1.5rem}.interview-widget-container .iw-text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.interview-widget-container .iw-text-gray-700{--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.interview-widget-container .iw-text-gray-800{--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity, 1))}.interview-widget-container .iw-text-gray-900{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}.interview-widget-container .iw-text-primary-600{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity, 1))}.interview-widget-container .iw-text-primary-700{--tw-text-opacity: 1;color:rgb(29 78 216 / var(--tw-text-opacity, 1))}.interview-widget-container .iw-text-red-600{--tw-text-opacity: 1;color:rgb(220 38 38 / var(--tw-text-opacity, 1))}.interview-widget-container .iw-text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.interview-widget-container .iw-opacity-25{opacity:.25}.interview-widget-container .iw-opacity-75{opacity:.75}.interview-widget-container .iw-shadow-2xl{--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.interview-widget-container .iw-shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.interview-widget-container .iw-shadow-none{--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.interview-widget-container .iw-shadow-sm{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.interview-widget-container .iw-backdrop-blur-sm{--tw-backdrop-blur: blur(4px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.interview-widget-container .iw-transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.interview-widget-container .iw-transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.interview-widget-container{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent;--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-opacity: .5;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-gradient-from: transparent var(--tw-gradient-from-position);--tw-gradient-to: transparent var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.interview-widget-container *,.interview-widget-container *:before,.interview-widget-container *:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb;--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.interview-widget-container *:before,.interview-widget-container *:after{--tw-content: ""}.interview-widget-container h1,.interview-widget-container h2,.interview-widget-container h3,.interview-widget-container h4,.interview-widget-container h5,.interview-widget-container h6{font-size:inherit;font-weight:inherit}.interview-widget-container a{color:inherit;text-decoration:inherit}.interview-widget-container b,.interview-widget-container strong{font-weight:bolder}.interview-widget-container code,.interview-widget-container kbd,.interview-widget-container samp,.interview-widget-container pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}.interview-widget-container small{font-size:80%}.interview-widget-container button,.interview-widget-container input,.interview-widget-container optgroup,.interview-widget-container select,.interview-widget-container textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}.interview-widget-container button,.interview-widget-container select{text-transform:none}.interview-widget-container button,.interview-widget-container [type=button],.interview-widget-container [type=reset],.interview-widget-container [type=submit]{-webkit-appearance:button;-moz-appearance:button;appearance:button;background-color:transparent;background-image:none}.interview-widget-container button,.interview-widget-container [role=button]{cursor:pointer}.interview-widget-container :disabled{cursor:default}.interview-widget-container img,.interview-widget-container svg,.interview-widget-container video,.interview-widget-container canvas,.interview-widget-container audio,.interview-widget-container iframe,.interview-widget-container embed,.interview-widget-container object{display:block}.interview-widget-container img,.interview-widget-container video{max-width:100%;height:auto}.interview-widget-container [hidden]{display:none}.interview-widget-container blockquote,.interview-widget-container dl,.interview-widget-container dd,.interview-widget-container h1,.interview-widget-container h2,.interview-widget-container h3,.interview-widget-container h4,.interview-widget-container h5,.interview-widget-container h6,.interview-widget-container hr,.interview-widget-container figure,.interview-widget-container p,.interview-widget-container pre{margin:0}.interview-widget-container fieldset{margin:0;padding:0}.interview-widget-container legend{padding:0}.interview-widget-container ol,.interview-widget-container ul,.interview-widget-container menu{list-style:none;margin:0;padding:0}.interview-widget-container dialog{padding:0}.interview-widget-container textarea{resize:vertical}.interview-widget-container input::placeholder,.interview-widget-container textarea::placeholder{opacity:1;color:#9ca3af}.interview-widget-container input::-moz-placeholder,.interview-widget-container textarea::-moz-placeholder{opacity:1;color:#9ca3af}.interview-widget-container .iw-bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.interview-widget-container .iw-bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.interview-widget-container .iw-from-indigo-50{--tw-gradient-from: #eef2ff var(--tw-gradient-from-position);--tw-gradient-to: rgb(238 242 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.interview-widget-container .iw-from-purple-500{--tw-gradient-from: #a855f7 var(--tw-gradient-from-position);--tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.interview-widget-container .iw-to-white{--tw-gradient-to: #fff var(--tw-gradient-to-position)}.interview-widget-container .iw-to-indigo-500{--tw-gradient-to: #6366f1 var(--tw-gradient-to-position)}.interview-widget-container .iw-to-indigo-600{--tw-gradient-to: #4f46e5 var(--tw-gradient-to-position)}.interview-messages::-webkit-scrollbar{width:6px}.interview-messages::-webkit-scrollbar-track{background:#f1f1f1}.interview-messages::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.interview-messages::-webkit-scrollbar-thumb:hover{background:#a8a8a8}@keyframes slideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.message-animation{animation:slideIn .3s ease-out}.iw-hover\:bg-primary-600:hover{background-color:#2563eb!important}.iw-focus\:outline-none:focus{outline:2px solid transparent!important;outline-offset:2px!important}.iw-focus\:ring-2:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)!important}.iw-focus\:ring-primary-500:focus{--tw-ring-opacity: 1 !important;--tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1)) !important}.iw-disabled\:opacity-50:disabled{opacity:.5!important}.iw-disabled\:cursor-not-allowed:disabled{cursor:not-allowed!important}.interview-widget-container .hover\:iw-from-purple-600:hover{--tw-gradient-from: #9333ea var(--tw-gradient-from-position);--tw-gradient-to: rgb(147 51 234 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.interview-widget-container .hover\:iw-to-indigo-600:hover{--tw-gradient-to: #4f46e5 var(--tw-gradient-to-position)}.interview-widget-container .hover\:iw-text-gray-700:hover{--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}
package/dist/widget.es.js CHANGED
@@ -1,5 +1,5 @@
1
- import { useRef as j, useState as c, useEffect as E, useMemo as z } from "react";
2
- var I = { exports: {} }, y = {};
1
+ import { useRef as j, useState as d, useEffect as C, useMemo as A } from "react";
2
+ var E = { exports: {} }, y = {};
3
3
  /**
4
4
  * @license React
5
5
  * react-jsx-runtime.production.js
@@ -9,7 +9,7 @@ var I = { exports: {} }, y = {};
9
9
  * This source code is licensed under the MIT license found in the
10
10
  * LICENSE file in the root directory of this source tree.
11
11
  */
12
- var F = Symbol.for("react.transitional.element"), G = Symbol.for("react.fragment");
12
+ var D = Symbol.for("react.transitional.element"), z = Symbol.for("react.fragment");
13
13
  function $(r, s, i) {
14
14
  var a = null;
15
15
  if (i !== void 0 && (a = "" + i), s.key !== void 0 && (a = "" + s.key), "key" in s) {
@@ -18,45 +18,45 @@ function $(r, s, i) {
18
18
  t !== "key" && (i[t] = s[t]);
19
19
  } else i = s;
20
20
  return s = i.ref, {
21
- $$typeof: F,
21
+ $$typeof: D,
22
22
  type: r,
23
23
  key: a,
24
24
  ref: s !== void 0 ? s : null,
25
25
  props: i
26
26
  };
27
27
  }
28
- y.Fragment = G;
28
+ y.Fragment = z;
29
29
  y.jsx = $;
30
30
  y.jsxs = $;
31
- I.exports = y;
32
- var e = I.exports;
31
+ E.exports = y;
32
+ var e = E.exports;
33
33
  const k = ({
34
34
  children: r,
35
35
  variant: s = "primary",
36
36
  size: i = "md",
37
37
  fullWidth: a = !1,
38
38
  isLoading: t = !1,
39
- disabled: o,
39
+ disabled: l,
40
40
  className: w = "",
41
- ...l
41
+ ...c
42
42
  }) => {
43
- const m = "iw-inline-flex iw-items-center iw-justify-center iw-rounded-md iw-font-medium iw-transition-colors iw-focus:outline-none iw-focus:ring-2 iw-focus:ring-primary-500 iw-focus:ring-offset-2", x = {
43
+ const x = "iw-inline-flex iw-items-center iw-justify-center iw-rounded-md iw-font-medium iw-transition-colors iw-focus:outline-none iw-focus:ring-2 iw-focus:ring-primary-500 iw-focus:ring-offset-2", m = {
44
44
  primary: "iw-bg-primary-600 iw-text-white iw-hover:bg-primary-700 iw-border iw-border-transparent",
45
45
  secondary: "iw-bg-primary-100 iw-text-primary-700 iw-hover:bg-primary-200 iw-border iw-border-transparent",
46
46
  outline: "iw-bg-transparent iw-text-primary-700 iw-border iw-border-primary-500 iw-hover:bg-primary-50",
47
47
  text: "iw-bg-transparent iw-text-primary-600 iw-hover:bg-primary-50 iw-border iw-border-transparent",
48
48
  gradient: "iw-text-white iw-border iw-border-transparent iw-bg-gradient-to-r iw-from-purple-500 iw-to-indigo-500 hover:iw-from-purple-600 hover:iw-to-indigo-600"
49
- }, h = {
49
+ }, o = {
50
50
  sm: "iw-px-3 iw-py-1.5 iw-text-sm",
51
51
  md: "iw-px-4 iw-py-2 iw-text-sm",
52
52
  lg: "iw-px-5 iw-py-2.5 iw-text-base"
53
- }, d = "iw-disabled:opacity-50 iw-disabled:cursor-not-allowed iw-disabled:pointer-events-none", u = a ? "iw-w-full" : "";
53
+ }, u = "iw-disabled:opacity-50 iw-disabled:cursor-not-allowed iw-disabled:pointer-events-none", f = a ? "iw-w-full" : "";
54
54
  return /* @__PURE__ */ e.jsxs(
55
55
  "button",
56
56
  {
57
- className: `${m} ${x[s]} ${h[i]} ${u} ${d} ${w}`,
58
- disabled: o || t,
59
- ...l,
57
+ className: `${x} ${m[s]} ${o[i]} ${f} ${u} ${w}`,
58
+ disabled: l || t,
59
+ ...c,
60
60
  children: [
61
61
  t && /* @__PURE__ */ e.jsxs(
62
62
  "svg",
@@ -92,16 +92,16 @@ const k = ({
92
92
  ]
93
93
  }
94
94
  );
95
- }, Q = ({
95
+ }, F = ({
96
96
  isOpen: r,
97
97
  onStart: s,
98
98
  onClose: i
99
99
  }) => {
100
100
  var g;
101
- const a = j(null), t = j(null), [o, w] = c(!1), [l, m] = c(null), [x, h] = c(!1), d = () => {
101
+ const a = j(null), t = j(null), [l, w] = d(!1), [c, x] = d(null), [m, o] = d(!1), u = () => {
102
102
  t.current && (t.current.getTracks().forEach((n) => n.stop()), t.current = null);
103
- }, u = async () => {
104
- h(!0), m(null);
103
+ }, f = async () => {
104
+ o(!0), x(null);
105
105
  try {
106
106
  const n = await navigator.mediaDevices.getUserMedia({
107
107
  video: { width: { ideal: 1280 }, height: { ideal: 720 } },
@@ -110,23 +110,23 @@ const k = ({
110
110
  t.current = n, a.current && (a.current.srcObject = n), w(!0);
111
111
  } catch (n) {
112
112
  console.error("Media permission error:", n);
113
- let f = "Unable to access camera or microphone.";
114
- (n == null ? void 0 : n.name) === "NotAllowedError" ? f = "Permissions denied. Please allow access to camera and microphone." : (n == null ? void 0 : n.name) === "NotFoundError" ? f = "No camera/microphone found. Please connect a device and retry." : n != null && n.message && (f = n.message), w(!1), m(f);
113
+ let h = "Unable to access camera or microphone.";
114
+ (n == null ? void 0 : n.name) === "NotAllowedError" ? h = "Permissions denied. Please allow access to camera and microphone." : (n == null ? void 0 : n.name) === "NotFoundError" ? h = "No camera/microphone found. Please connect a device and retry." : n != null && n.message && (h = n.message), w(!1), x(h);
115
115
  } finally {
116
- h(!1);
116
+ o(!1);
117
117
  }
118
118
  };
119
- if (E(() => {
119
+ if (C(() => {
120
120
  if (!r) {
121
- d();
121
+ u();
122
122
  return;
123
123
  }
124
- return u(), () => {
125
- d();
124
+ return f(), () => {
125
+ u();
126
126
  };
127
127
  }, [r]), !r) return null;
128
128
  const N = () => {
129
- s(), d();
129
+ s(), u();
130
130
  };
131
131
  return /* @__PURE__ */ e.jsx("div", { className: "iw-fixed iw-inset-0 iw-z-50 iw-flex iw-items-center iw-justify-center iw-bg-black/50 iw-backdrop-blur-sm", children: /* @__PURE__ */ e.jsxs("div", { className: "iw-bg-white iw-rounded-xl iw-shadow-2xl iw-w-full iw-max-w-3xl iw-mx-4", children: [
132
132
  /* @__PURE__ */ e.jsxs("div", { className: "iw-px-5 iw-py-4 iw-border-b iw-border-gray-200 iw-flex iw-items-center iw-justify-between", children: [
@@ -137,13 +137,13 @@ const k = ({
137
137
  "aria-label": "Close",
138
138
  className: "iw-text-gray-500 hover:iw-text-gray-700",
139
139
  onClick: () => {
140
- d(), i == null || i();
140
+ u(), i == null || i();
141
141
  },
142
142
  children: "✕"
143
143
  }
144
144
  )
145
145
  ] }),
146
- /* @__PURE__ */ e.jsxs("div", { className: "iw-p-4 iw-grid iw-grid-cols-1 iw-md:grid-cols-2 iw-gap-4", children: [
146
+ /* @__PURE__ */ e.jsxs("div", { className: "iw-p-4 iw-grid iw-grid-cols-2 iw-gap-4", children: [
147
147
  /* @__PURE__ */ e.jsx("div", { className: "iw-border iw-border-gray-200 iw-rounded-lg iw-overflow-hidden iw-bg-gray-900", children: /* @__PURE__ */ e.jsx(
148
148
  "video",
149
149
  {
@@ -157,23 +157,23 @@ const k = ({
157
157
  /* @__PURE__ */ e.jsxs("div", { className: "iw-flex iw-flex-col iw-gap-3", children: [
158
158
  /* @__PURE__ */ e.jsx("p", { className: "iw-text-sm iw-text-gray-700", children: "We will need access to your camera and microphone. Grant permission to preview your setup and to enable the Start Interview button." }),
159
159
  !((g = navigator.mediaDevices) != null && g.getUserMedia) && /* @__PURE__ */ e.jsx("div", { className: "iw-text-xs iw-text-red-600", children: "Your browser does not support media devices. Please use a modern browser like Chrome, Edge, or Firefox." }),
160
- l && /* @__PURE__ */ e.jsx("div", { className: "iw-text-xs iw-text-red-600", children: l }),
160
+ c && /* @__PURE__ */ e.jsx("div", { className: "iw-text-xs iw-text-red-600", children: c }),
161
161
  /* @__PURE__ */ e.jsxs("div", { className: "iw-flex iw-items-center iw-gap-2", children: [
162
162
  /* @__PURE__ */ e.jsx(
163
163
  k,
164
164
  {
165
- onClick: u,
166
- isLoading: x,
165
+ onClick: f,
166
+ isLoading: m,
167
167
  variant: "outline",
168
168
  size: "sm",
169
- children: o ? "Recheck Permissions" : "Enable Camera & Mic"
169
+ children: l ? "Recheck Permissions" : "Enable Camera & Mic"
170
170
  }
171
171
  ),
172
172
  /* @__PURE__ */ e.jsx(
173
173
  k,
174
174
  {
175
175
  onClick: N,
176
- disabled: !o,
176
+ disabled: !l,
177
177
  size: "sm",
178
178
  children: "Start Interview"
179
179
  }
@@ -186,7 +186,7 @@ const k = ({
186
186
  ] })
187
187
  ] })
188
188
  ] }) });
189
- }, Y = ({ title: r }) => /* @__PURE__ */ e.jsxs("header", { className: "iw-w-full iw-text-gray-900", children: [
189
+ }, G = ({ title: r }) => /* @__PURE__ */ e.jsxs("header", { className: "iw-w-full iw-text-gray-900", children: [
190
190
  /* @__PURE__ */ e.jsxs("div", { className: "iw-mx-auto iw-flex iw-items-center iw-justify-between iw-px-4 iw-py-3", children: [
191
191
  /* @__PURE__ */ e.jsxs("div", { className: "iw-flex iw-items-center iw-space-x-2", children: [
192
192
  /* @__PURE__ */ e.jsx(
@@ -202,10 +202,16 @@ const k = ({
202
202
  /* @__PURE__ */ e.jsx("button", { className: "iw-text-sm iw-text-gray-500 hover:iw-text-gray-700", children: "Exit Interview" })
203
203
  ] }),
204
204
  /* @__PURE__ */ e.jsx("div", { className: "iw-h-px iw-bg-gray-200" })
205
- ] }), _ = ({ question: r }) => /* @__PURE__ */ e.jsxs(
205
+ ] }), Q = ({ question: r }) => /* @__PURE__ */ e.jsxs(
206
206
  "div",
207
207
  {
208
208
  className: "iw-rounded-xl iw-mb-4 message-animation iw-bg-gradient-to-b iw-from-indigo-50 iw-to-white iw-text-gray-800 iw-border iw-border-indigo-100 iw-p-5",
209
+ style: {
210
+ // Fallback styles in case CSS classes don't load properly
211
+ background: "linear-gradient(to bottom, #eef2ff, #ffffff)",
212
+ border: "1px solid #e0e7ff",
213
+ color: "#1f2937"
214
+ },
209
215
  children: [
210
216
  /* @__PURE__ */ e.jsxs("div", { className: "iw-flex iw-items-center iw-space-x-3 iw-mb-3", children: [
211
217
  /* @__PURE__ */ e.jsx(
@@ -231,9 +237,9 @@ const k = ({
231
237
  )) })
232
238
  ]
233
239
  }
234
- ), U = ({ className: r = "" }) => {
240
+ ), Y = ({ className: r = "" }) => {
235
241
  const s = j(null);
236
- return E(() => {
242
+ return C(() => {
237
243
  let i = null;
238
244
  return (async () => {
239
245
  try {
@@ -257,43 +263,49 @@ const k = ({
257
263
  className: "iw-w-full iw-h-full iw-object-cover iw-rounded-md"
258
264
  }
259
265
  ) });
260
- }, W = ({
266
+ }, _ = ({
261
267
  label: r,
262
268
  error: s,
263
269
  fullWidth: i = !1,
264
270
  className: a = "",
265
271
  id: t,
266
- ...o
272
+ ...l
267
273
  }) => {
268
- const w = t || `textarea-${Math.random().toString(36).substring(2, 9)}`, l = "iw-block iw-rounded-md iw-border iw-border-gray-300 iw-shadow-sm iw-px-4 iw-py-2 iw-text-sm iw-focus:border-primary-500 iw-focus:ring-primary-500 iw-focus:outline-none iw-transition-all", m = s ? "iw-border-red-500 iw-focus:border-red-500 iw-focus:ring-red-500" : "", x = i ? "iw-w-full" : "";
269
- return /* @__PURE__ */ e.jsxs("div", { className: `${i ? "iw-w-full" : ""} ${a}`, children: [
270
- r && /* @__PURE__ */ e.jsx(
271
- "label",
272
- {
273
- htmlFor: w,
274
- className: "iw-block iw-text-sm iw-font-medium iw-text-gray-700 iw-mb-1",
275
- children: r
276
- }
277
- ),
278
- /* @__PURE__ */ e.jsx(
279
- "textarea",
280
- {
281
- id: w,
282
- className: `${l} ${m} ${x}`,
283
- "aria-invalid": s ? "true" : "false",
284
- ...o
285
- }
286
- ),
287
- s && /* @__PURE__ */ e.jsx("p", { className: "iw-mt-1 iw-text-sm iw-text-red-600", children: s })
288
- ] });
289
- }, V = ({
274
+ const w = t || `textarea-${Math.random().toString(36).substring(2, 9)}`, c = "iw-block iw-rounded-md iw-border iw-border-gray-300 iw-shadow-sm iw-px-4 iw-py-2 iw-text-sm iw-focus:border-primary-500 iw-focus:ring-primary-500 iw-focus:outline-none iw-transition-all", x = s ? "iw-border-red-500 iw-focus:border-red-500 iw-focus:ring-red-500" : "", m = i ? "iw-w-full" : "", o = a.includes("iw-h-full") ? "iw-h-full" : "";
275
+ return /* @__PURE__ */ e.jsxs(
276
+ "div",
277
+ {
278
+ className: `${i ? "iw-w-full iw-h-full" : ""} ${o ? "iw-flex iw-flex-col" : ""}`,
279
+ children: [
280
+ r && /* @__PURE__ */ e.jsx(
281
+ "label",
282
+ {
283
+ htmlFor: w,
284
+ className: "iw-block iw-text-sm iw-font-medium iw-text-gray-700 iw-mb-1",
285
+ children: r
286
+ }
287
+ ),
288
+ /* @__PURE__ */ e.jsx(
289
+ "textarea",
290
+ {
291
+ id: w,
292
+ className: `${c} ${x} ${m} ${o} ${a}`,
293
+ "aria-invalid": s ? "true" : "false",
294
+ ...l
295
+ }
296
+ ),
297
+ s && /* @__PURE__ */ e.jsx("p", { className: "iw-mt-1 iw-text-sm iw-text-red-600", children: s })
298
+ ]
299
+ }
300
+ );
301
+ }, U = ({
290
302
  value: r,
291
303
  onChange: s,
292
304
  onSubmit: i,
293
305
  isSubmitDisabled: a,
294
306
  remainingTimeText: t
295
307
  }) => {
296
- const o = (w) => {
308
+ const l = (w) => {
297
309
  w.key === "Enter" && (w.ctrlKey || w.metaKey) && !a && (w.preventDefault(), i());
298
310
  };
299
311
  return /* @__PURE__ */ e.jsx("div", { className: "iw-mt-auto", children: /* @__PURE__ */ e.jsxs("div", { className: "iw-rounded-xl iw-overflow-hidden iw-border iw-border-gray-200", children: [
@@ -302,13 +314,13 @@ const k = ({
302
314
  t && /* @__PURE__ */ e.jsx("div", { className: "iw-text-xs iw-text-gray-500", children: t })
303
315
  ] }),
304
316
  /* @__PURE__ */ e.jsx(
305
- W,
317
+ _,
306
318
  {
307
319
  value: r,
308
320
  onChange: s,
309
- onKeyDown: o,
321
+ onKeyDown: l,
310
322
  placeholder: "Type your answer here...",
311
- className: "iw-w-full iw-resize-none iw-focus:outline-none iw-bg-transparent iw-min-h-[112px]",
323
+ className: "iw-bg-gray-50 iw-w-full iw-resize-none iw-focus:outline-none iw-bg-transparent iw-min-h-[112px]",
312
324
  rows: 5,
313
325
  fullWidth: !0
314
326
  }
@@ -327,78 +339,72 @@ const k = ({
327
339
  )
328
340
  ] })
329
341
  ] }) });
330
- }, B = ({
342
+ }, W = ({
331
343
  title: r = "Interview",
332
344
  questions: s = [],
333
345
  onComplete: i,
334
346
  onAnswerSubmit: a,
335
- className: t = "",
336
- width: o = "100%",
337
- height: w = "600px"
347
+ className: t = ""
338
348
  }) => {
339
- const [l, m] = c(0), [x, h] = c([]), [d, u] = c(""), [N, g] = c(!1), [n, f] = c(!0), [C, P] = c(!1), [S] = c(!0), M = j(null), p = s[l], T = () => {
349
+ const [l, w] = d(0), [c, x] = d([]), [m, o] = d(""), [u, f] = d(!1), [N, g] = d(!0), [n, h] = d(!1), [I] = d(!0), P = j(null), p = s[l], S = () => {
340
350
  const v = {
341
351
  questionId: (p == null ? void 0 : p.id) || "",
342
- answerText: d,
352
+ answerText: m,
343
353
  timestamp: /* @__PURE__ */ new Date()
344
354
  };
345
- h([...x, v]), a && a(v), l < s.length - 1 ? (m((b) => b + 1), u("")) : (g(!0), i && i(x));
346
- }, R = z(() => {
347
- const b = 60 - Math.floor(Date.now() / 1e3 % 60), A = Math.floor(b / 60).toString().padStart(2, "0"), D = (b % 60).toString().padStart(2, "0");
348
- return `Time to Talk: ${A}:${D} min`;
355
+ x([...c, v]), a && a(v), l < s.length - 1 ? (w((b) => b + 1), o("")) : (f(!0), i && i(c));
356
+ }, M = A(() => {
357
+ const b = 60 - Math.floor(Date.now() / 1e3 % 60), T = Math.floor(b / 60).toString().padStart(2, "0"), R = (b % 60).toString().padStart(2, "0");
358
+ return `Time to Talk: ${T}:${R} min`;
349
359
  }, [l]);
350
- return C ? /* @__PURE__ */ e.jsxs(
360
+ return n ? /* @__PURE__ */ e.jsx("div", { className: "interview-widget-container", children: /* @__PURE__ */ e.jsx(
351
361
  "div",
352
362
  {
353
- ref: M,
354
- className: `interview-widget-container iw-flex iw-flex-col iw-rounded-xl iw-shadow-lg iw-overflow-hidden ${t}`,
355
- style: {
356
- width: o,
357
- height: w
358
- },
359
- children: [
360
- /* @__PURE__ */ e.jsx(Y, { title: r }),
361
- /* @__PURE__ */ e.jsx("div", { className: "iw-flex iw-flex-col iw-flex-grow iw-overflow-hidden iw-px-4 iw-py-5", children: N ? /* @__PURE__ */ e.jsxs("div", { className: "iw-flex iw-flex-col iw-items-center iw-justify-center iw-h-full", children: [
363
+ ref: P,
364
+ className: `iw-flex iw-flex-col iw-rounded-xl iw-shadow-lg iw-overflow-hidden iw-h-[calc(100vh-1rem)] ${t}`,
365
+ children: /* @__PURE__ */ e.jsxs("div", { className: " iw-h-full iw-flex iw-flex-col", children: [
366
+ /* @__PURE__ */ e.jsx(G, { title: r }),
367
+ /* @__PURE__ */ e.jsx("div", { className: "iw-flex iw-flex-col iw-flex-grow iw-overflow-hidden iw-px-4 iw-py-5", children: u ? /* @__PURE__ */ e.jsxs("div", { className: "iw-flex iw-flex-col iw-items-center iw-justify-center iw-h-full", children: [
362
368
  /* @__PURE__ */ e.jsx("div", { className: "iw-text-xl iw-font-bold iw-mb-2", children: "Interview Complete!" }),
363
369
  /* @__PURE__ */ e.jsx("p", { className: "iw-text-center iw-mb-4", children: "Thank you for participating in this interview." })
364
- ] }) : /* @__PURE__ */ e.jsxs("div", { className: "iw-h-full iw-flex iw-flex-col", children: [
365
- /* @__PURE__ */ e.jsx("div", { className: "iw-flex-1", children: p && /* @__PURE__ */ e.jsx(_, { question: p }) }),
370
+ ] }) : /* @__PURE__ */ e.jsxs("div", { className: "iw-h-full iw-flex iw-flex-col ", children: [
371
+ /* @__PURE__ */ e.jsx("div", { className: "iw-flex-1", children: p && /* @__PURE__ */ e.jsx(Q, { question: p }) }),
366
372
  /* @__PURE__ */ e.jsxs("div", { className: "iw-grid iw-grid-cols-2 iw-gap-4 iw-mt-4", children: [
367
- S && /* @__PURE__ */ e.jsx(
373
+ I && /* @__PURE__ */ e.jsx(
368
374
  "div",
369
375
  {
370
376
  className: "iw-mt-2 iw-border iw-border-gray-200 iw-rounded-xl iw-p-2",
371
- children: /* @__PURE__ */ e.jsx(U, { className: "iw-w-full iw-h-[400px]" })
377
+ children: /* @__PURE__ */ e.jsx(Y, { className: "iw-w-full iw-h-[400px]" })
372
378
  }
373
379
  ),
374
380
  /* @__PURE__ */ e.jsx(
375
- V,
381
+ U,
376
382
  {
377
- value: d,
378
- onChange: (v) => u(v.target.value),
379
- onSubmit: T,
380
- isSubmitDisabled: !d.trim() || !C,
381
- remainingTimeText: R
383
+ value: m,
384
+ onChange: (v) => o(v.target.value),
385
+ onSubmit: S,
386
+ isSubmitDisabled: !m.trim() || !n,
387
+ remainingTimeText: M
382
388
  }
383
389
  )
384
390
  ] })
385
391
  ] }) })
386
- ]
392
+ ] })
387
393
  }
388
- ) : /* @__PURE__ */ e.jsx("div", { className: "iw-h-screen iw-w-screen", children: /* @__PURE__ */ e.jsx(
389
- Q,
394
+ ) }) : /* @__PURE__ */ e.jsx("div", { className: "interview-widget-container iw-h-screen iw-w-screen", children: /* @__PURE__ */ e.jsx(
395
+ F,
390
396
  {
391
- isOpen: n,
397
+ isOpen: N,
392
398
  onStart: () => {
393
- console.log("Permissions granted, starting interview"), P(!0), f(!1);
399
+ console.log("Permissions granted, starting interview"), h(!0), g(!1);
394
400
  }
395
401
  }
396
402
  ) });
397
403
  };
398
404
  typeof window < "u" && (window.InterviewWidget = {
399
- InterviewWidget: B
405
+ InterviewWidget: W
400
406
  });
401
407
  export {
402
- B as InterviewWidget,
403
- B as default
408
+ W as InterviewWidget,
409
+ W as default
404
410
  };
package/dist/widget.umd.js CHANGED
@@ -1,4 +1,4 @@
1
- (function(m,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],n):(m=typeof globalThis<"u"?globalThis:m||self,n(m.InterviewWidget={},m.React))})(this,function(m,n){"use strict";var C={exports:{}},b={};/**
1
+ (function(x,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],n):(x=typeof globalThis<"u"?globalThis:x||self,n(x.InterviewWidget={},x.React))})(this,function(x,n){"use strict";var C={exports:{}},b={};/**
2
2
  * @license React
3
3
  * react-jsx-runtime.production.js
4
4
  *
@@ -6,4 +6,4 @@
6
6
  *
7
7
  * This source code is licensed under the MIT license found in the
8
8
  * LICENSE file in the root directory of this source tree.
9
- */var M=Symbol.for("react.transitional.element"),P=Symbol.for("react.fragment");function E(r,s,i){var a=null;if(i!==void 0&&(a=""+i),s.key!==void 0&&(a=""+s.key),"key"in s){i={};for(var t in s)t!=="key"&&(i[t]=s[t])}else i=s;return s=i.ref,{$$typeof:M,type:r,key:a,ref:s!==void 0?s:null,props:i}}b.Fragment=P,b.jsx=E,b.jsxs=E,C.exports=b;var e=C.exports;const N=({children:r,variant:s="primary",size:i="md",fullWidth:a=!1,isLoading:t=!1,disabled:l,className:o="",...d})=>{const x="iw-inline-flex iw-items-center iw-justify-center iw-rounded-md iw-font-medium iw-transition-colors iw-focus:outline-none iw-focus:ring-2 iw-focus:ring-primary-500 iw-focus:ring-offset-2",u={primary:"iw-bg-primary-600 iw-text-white iw-hover:bg-primary-700 iw-border iw-border-transparent",secondary:"iw-bg-primary-100 iw-text-primary-700 iw-hover:bg-primary-200 iw-border iw-border-transparent",outline:"iw-bg-transparent iw-text-primary-700 iw-border iw-border-primary-500 iw-hover:bg-primary-50",text:"iw-bg-transparent iw-text-primary-600 iw-hover:bg-primary-50 iw-border iw-border-transparent",gradient:"iw-text-white iw-border iw-border-transparent iw-bg-gradient-to-r iw-from-purple-500 iw-to-indigo-500 hover:iw-from-purple-600 hover:iw-to-indigo-600"},h={sm:"iw-px-3 iw-py-1.5 iw-text-sm",md:"iw-px-4 iw-py-2 iw-text-sm",lg:"iw-px-5 iw-py-2.5 iw-text-base"},c="iw-disabled:opacity-50 iw-disabled:cursor-not-allowed iw-disabled:pointer-events-none",f=a?"iw-w-full":"";return e.jsxs("button",{className:`${x} ${u[s]} ${h[i]} ${f} ${c} ${o}`,disabled:l||t,...d,children:[t&&e.jsxs("svg",{className:"iw-animate-spin iw-mr-2 iw-h-4 iw-w-4 iw-text-white",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",children:[e.jsx("circle",{className:"iw-opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),e.jsx("path",{className:"iw-opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})]}),r]})},R=({isOpen:r,onStart:s,onClose:i})=>{var j;const a=n.useRef(null),t=n.useRef(null),[l,o]=n.useState(!1),[d,x]=n.useState(null),[u,h]=n.useState(!1),c=()=>{t.current&&(t.current.getTracks().forEach(w=>w.stop()),t.current=null)},f=async()=>{h(!0),x(null);try{const w=await navigator.mediaDevices.getUserMedia({video:{width:{ideal:1280},height:{ideal:720}},audio:!0});t.current=w,a.current&&(a.current.srcObject=w),o(!0)}catch(w){console.error("Media permission error:",w);let p="Unable to access camera or microphone.";(w==null?void 0:w.name)==="NotAllowedError"?p="Permissions denied. Please allow access to camera and microphone.":(w==null?void 0:w.name)==="NotFoundError"?p="No camera/microphone found. Please connect a device and retry.":w!=null&&w.message&&(p=w.message),o(!1),x(p)}finally{h(!1)}};if(n.useEffect(()=>{if(!r){c();return}return f(),()=>{c()}},[r]),!r)return null;const k=()=>{s(),c()};return e.jsx("div",{className:"iw-fixed iw-inset-0 iw-z-50 iw-flex iw-items-center iw-justify-center iw-bg-black/50 iw-backdrop-blur-sm",children:e.jsxs("div",{className:"iw-bg-white iw-rounded-xl iw-shadow-2xl iw-w-full iw-max-w-3xl iw-mx-4",children:[e.jsxs("div",{className:"iw-px-5 iw-py-4 iw-border-b iw-border-gray-200 iw-flex iw-items-center iw-justify-between",children:[e.jsx("h2",{className:"iw-text-base iw-font-semibold",children:"Camera & Microphone Check"}),i&&e.jsx("button",{"aria-label":"Close",className:"iw-text-gray-500 hover:iw-text-gray-700",onClick:()=>{c(),i==null||i()},children:"✕"})]}),e.jsxs("div",{className:"iw-p-4 iw-grid iw-grid-cols-1 iw-md:grid-cols-2 iw-gap-4",children:[e.jsx("div",{className:"iw-border iw-border-gray-200 iw-rounded-lg iw-overflow-hidden iw-bg-gray-900",children:e.jsx("video",{ref:a,autoPlay:!0,playsInline:!0,muted:!0,className:"iw-w-full iw-h-64 iw-object-cover"})}),e.jsxs("div",{className:"iw-flex iw-flex-col iw-gap-3",children:[e.jsx("p",{className:"iw-text-sm iw-text-gray-700",children:"We will need access to your camera and microphone. Grant permission to preview your setup and to enable the Start Interview button."}),!((j=navigator.mediaDevices)!=null&&j.getUserMedia)&&e.jsx("div",{className:"iw-text-xs iw-text-red-600",children:"Your browser does not support media devices. Please use a modern browser like Chrome, Edge, or Firefox."}),d&&e.jsx("div",{className:"iw-text-xs iw-text-red-600",children:d}),e.jsxs("div",{className:"iw-flex iw-items-center iw-gap-2",children:[e.jsx(N,{onClick:f,isLoading:u,variant:"outline",size:"sm",children:l?"Recheck Permissions":"Enable Camera & Mic"}),e.jsx(N,{onClick:k,disabled:!l,size:"sm",children:"Start Interview"})]}),e.jsxs("ul",{className:"iw-text-xs iw-text-gray-500 iw-pt-2 iw-list-disc iw-pl-4",children:[e.jsx("li",{children:"Your preview is muted to avoid echo."}),e.jsx("li",{children:"You can change devices from your browser’s site settings."})]})]})]})]})})},T=({title:r})=>e.jsxs("header",{className:"iw-w-full iw-text-gray-900",children:[e.jsxs("div",{className:"iw-mx-auto iw-flex iw-items-center iw-justify-between iw-px-4 iw-py-3",children:[e.jsxs("div",{className:"iw-flex iw-items-center iw-space-x-2",children:[e.jsx("div",{className:"iw-h-7 iw-w-7 iw-rounded-md iw-bg-purple-500 iw-flex iw-items-center iw-justify-center iw-text-white iw-font-semibold",children:"N"}),e.jsx("p",{className:"iw-text-sm iw-font-medium",children:"Novara"})]}),e.jsx("h1",{className:"iw-text-base iw-font-medium",children:r}),e.jsx("button",{className:"iw-text-sm iw-text-gray-500 hover:iw-text-gray-700",children:"Exit Interview"})]}),e.jsx("div",{className:"iw-h-px iw-bg-gray-200"})]}),$=({question:r})=>e.jsxs("div",{className:"iw-rounded-xl iw-mb-4 message-animation iw-bg-gradient-to-b iw-from-indigo-50 iw-to-white iw-text-gray-800 iw-border iw-border-indigo-100 iw-p-5",children:[e.jsxs("div",{className:"iw-flex iw-items-center iw-space-x-3 iw-mb-3",children:[e.jsx("div",{className:"iw-h-12 iw-w-12 iw-rounded-lg iw-bg-purple-500 iw-flex iw-items-center iw-justify-center iw-text-white iw-font-semibold",children:"N"}),e.jsxs("div",{children:[e.jsx("div",{className:"iw-text-sm iw-font-semibold",children:"Novara"}),e.jsx("div",{className:"iw-text-xs iw-text-gray-500",children:"Assistant"})]})]}),e.jsx("p",{className:"iw-text-[15px] iw-leading-6",children:r.text}),r.type==="multiple-choice"&&r.options&&e.jsx("div",{className:"iw-mt-3 iw-space-y-2",children:r.options.map((s,i)=>e.jsx("div",{className:"iw-p-2 iw-rounded iw-border iw-border-gray-300 iw-hover:bg-gray-100 iw-cursor-pointer iw-transition-colors",children:s},i))})]}),A=({className:r=""})=>{const s=n.useRef(null);return n.useEffect(()=>{let i=null;return(async()=>{try{i=await navigator.mediaDevices.getUserMedia({video:!0,audio:!1}),s.current&&(s.current.srcObject=i)}catch(t){console.error("Error accessing camera:",t)}})(),()=>{i&&i.getTracks().forEach(t=>t.stop())}},[]),e.jsx("div",{className:`iw-relative ${r}`,children:e.jsx("video",{ref:s,autoPlay:!0,playsInline:!0,muted:!0,className:"iw-w-full iw-h-full iw-object-cover iw-rounded-md"})})},D=({label:r,error:s,fullWidth:i=!1,className:a="",id:t,...l})=>{const o=t||`textarea-${Math.random().toString(36).substring(2,9)}`,d="iw-block iw-rounded-md iw-border iw-border-gray-300 iw-shadow-sm iw-px-4 iw-py-2 iw-text-sm iw-focus:border-primary-500 iw-focus:ring-primary-500 iw-focus:outline-none iw-transition-all",x=s?"iw-border-red-500 iw-focus:border-red-500 iw-focus:ring-red-500":"",u=i?"iw-w-full":"";return e.jsxs("div",{className:`${i?"iw-w-full":""} ${a}`,children:[r&&e.jsx("label",{htmlFor:o,className:"iw-block iw-text-sm iw-font-medium iw-text-gray-700 iw-mb-1",children:r}),e.jsx("textarea",{id:o,className:`${d} ${x} ${u}`,"aria-invalid":s?"true":"false",...l}),s&&e.jsx("p",{className:"iw-mt-1 iw-text-sm iw-text-red-600",children:s})]})},z=({value:r,onChange:s,onSubmit:i,isSubmitDisabled:a,remainingTimeText:t})=>{const l=o=>{o.key==="Enter"&&(o.ctrlKey||o.metaKey)&&!a&&(o.preventDefault(),i())};return e.jsx("div",{className:"iw-mt-auto",children:e.jsxs("div",{className:"iw-rounded-xl iw-overflow-hidden iw-border iw-border-gray-200",children:[e.jsxs("div",{className:"iw-flex iw-items-center iw-justify-between iw-px-3 iw-py-2 iw-bg-gray-50 iw-border-b iw-border-gray-200",children:[e.jsx("div",{className:"iw-text-sm iw-font-medium",children:"Your answer"}),t&&e.jsx("div",{className:"iw-text-xs iw-text-gray-500",children:t})]}),e.jsx(D,{value:r,onChange:s,onKeyDown:l,placeholder:"Type your answer here...",className:"iw-w-full iw-resize-none iw-focus:outline-none iw-bg-transparent iw-min-h-[112px]",rows:5,fullWidth:!0}),e.jsxs("div",{className:"iw-p-2 iw-flex iw-justify-between iw-items-center iw-bg-gray-50",children:[e.jsx("div",{className:"iw-text-xs iw-text-gray-500",children:e.jsx("kbd",{children:" Press Ctrl+Enter to submit"})}),e.jsx(N,{onClick:i,disabled:a,size:"sm",variant:"gradient",children:"Submit Answer"})]})]})})},S=({title:r="Interview",questions:s=[],onComplete:i,onAnswerSubmit:a,className:t="",width:l="100%",height:o="600px"})=>{const[d,x]=n.useState(0),[u,h]=n.useState([]),[c,f]=n.useState(""),[k,j]=n.useState(!1),[w,p]=n.useState(!0),[I,_]=n.useState(!1),[F]=n.useState(!0),G=n.useRef(null),v=s[d],Q=()=>{const g={questionId:(v==null?void 0:v.id)||"",answerText:c,timestamp:new Date};h([...u,g]),a&&a(g),d<s.length-1?(x(y=>y+1),f("")):(j(!0),i&&i(u))},W=n.useMemo(()=>{const y=60-Math.floor(Date.now()/1e3%60),Y=Math.floor(y/60).toString().padStart(2,"0"),U=(y%60).toString().padStart(2,"0");return`Time to Talk: ${Y}:${U} min`},[d]);return I?e.jsxs("div",{ref:G,className:`interview-widget-container iw-flex iw-flex-col iw-rounded-xl iw-shadow-lg iw-overflow-hidden ${t}`,style:{width:l,height:o},children:[e.jsx(T,{title:r}),e.jsx("div",{className:"iw-flex iw-flex-col iw-flex-grow iw-overflow-hidden iw-px-4 iw-py-5",children:k?e.jsxs("div",{className:"iw-flex iw-flex-col iw-items-center iw-justify-center iw-h-full",children:[e.jsx("div",{className:"iw-text-xl iw-font-bold iw-mb-2",children:"Interview Complete!"}),e.jsx("p",{className:"iw-text-center iw-mb-4",children:"Thank you for participating in this interview."})]}):e.jsxs("div",{className:"iw-h-full iw-flex iw-flex-col",children:[e.jsx("div",{className:"iw-flex-1",children:v&&e.jsx($,{question:v})}),e.jsxs("div",{className:"iw-grid iw-grid-cols-2 iw-gap-4 iw-mt-4",children:[F&&e.jsx("div",{className:"iw-mt-2 iw-border iw-border-gray-200 iw-rounded-xl iw-p-2",children:e.jsx(A,{className:"iw-w-full iw-h-[400px]"})}),e.jsx(z,{value:c,onChange:g=>f(g.target.value),onSubmit:Q,isSubmitDisabled:!c.trim()||!I,remainingTimeText:W})]})]})})]}):e.jsx("div",{className:"iw-h-screen iw-w-screen",children:e.jsx(R,{isOpen:w,onStart:()=>{console.log("Permissions granted, starting interview"),_(!0),p(!1)}})})};typeof window<"u"&&(window.InterviewWidget={InterviewWidget:S}),m.InterviewWidget=S,m.default=S,Object.defineProperties(m,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
9
+ */var I=Symbol.for("react.transitional.element"),$=Symbol.for("react.fragment");function E(r,s,i){var a=null;if(i!==void 0&&(a=""+i),s.key!==void 0&&(a=""+s.key),"key"in s){i={};for(var t in s)t!=="key"&&(i[t]=s[t])}else i=s;return s=i.ref,{$$typeof:I,type:r,key:a,ref:s!==void 0?s:null,props:i}}b.Fragment=$,b.jsx=E,b.jsxs=E,C.exports=b;var e=C.exports;const N=({children:r,variant:s="primary",size:i="md",fullWidth:a=!1,isLoading:t=!1,disabled:o,className:l="",...c})=>{const u="iw-inline-flex iw-items-center iw-justify-center iw-rounded-md iw-font-medium iw-transition-colors iw-focus:outline-none iw-focus:ring-2 iw-focus:ring-primary-500 iw-focus:ring-offset-2",m={primary:"iw-bg-primary-600 iw-text-white iw-hover:bg-primary-700 iw-border iw-border-transparent",secondary:"iw-bg-primary-100 iw-text-primary-700 iw-hover:bg-primary-200 iw-border iw-border-transparent",outline:"iw-bg-transparent iw-text-primary-700 iw-border iw-border-primary-500 iw-hover:bg-primary-50",text:"iw-bg-transparent iw-text-primary-600 iw-hover:bg-primary-50 iw-border iw-border-transparent",gradient:"iw-text-white iw-border iw-border-transparent iw-bg-gradient-to-r iw-from-purple-500 iw-to-indigo-500 hover:iw-from-purple-600 hover:iw-to-indigo-600"},d={sm:"iw-px-3 iw-py-1.5 iw-text-sm",md:"iw-px-4 iw-py-2 iw-text-sm",lg:"iw-px-5 iw-py-2.5 iw-text-base"},f="iw-disabled:opacity-50 iw-disabled:cursor-not-allowed iw-disabled:pointer-events-none",h=a?"iw-w-full":"";return e.jsxs("button",{className:`${u} ${m[s]} ${d[i]} ${h} ${f} ${l}`,disabled:o||t,...c,children:[t&&e.jsxs("svg",{className:"iw-animate-spin iw-mr-2 iw-h-4 iw-w-4 iw-text-white",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",children:[e.jsx("circle",{className:"iw-opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),e.jsx("path",{className:"iw-opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})]}),r]})},M=({isOpen:r,onStart:s,onClose:i})=>{var j;const a=n.useRef(null),t=n.useRef(null),[o,l]=n.useState(!1),[c,u]=n.useState(null),[m,d]=n.useState(!1),f=()=>{t.current&&(t.current.getTracks().forEach(w=>w.stop()),t.current=null)},h=async()=>{d(!0),u(null);try{const w=await navigator.mediaDevices.getUserMedia({video:{width:{ideal:1280},height:{ideal:720}},audio:!0});t.current=w,a.current&&(a.current.srcObject=w),l(!0)}catch(w){console.error("Media permission error:",w);let p="Unable to access camera or microphone.";(w==null?void 0:w.name)==="NotAllowedError"?p="Permissions denied. Please allow access to camera and microphone.":(w==null?void 0:w.name)==="NotFoundError"?p="No camera/microphone found. Please connect a device and retry.":w!=null&&w.message&&(p=w.message),l(!1),u(p)}finally{d(!1)}};if(n.useEffect(()=>{if(!r){f();return}return h(),()=>{f()}},[r]),!r)return null;const k=()=>{s(),f()};return e.jsx("div",{className:"iw-fixed iw-inset-0 iw-z-50 iw-flex iw-items-center iw-justify-center iw-bg-black/50 iw-backdrop-blur-sm",children:e.jsxs("div",{className:"iw-bg-white iw-rounded-xl iw-shadow-2xl iw-w-full iw-max-w-3xl iw-mx-4",children:[e.jsxs("div",{className:"iw-px-5 iw-py-4 iw-border-b iw-border-gray-200 iw-flex iw-items-center iw-justify-between",children:[e.jsx("h2",{className:"iw-text-base iw-font-semibold",children:"Camera & Microphone Check"}),i&&e.jsx("button",{"aria-label":"Close",className:"iw-text-gray-500 hover:iw-text-gray-700",onClick:()=>{f(),i==null||i()},children:"✕"})]}),e.jsxs("div",{className:"iw-p-4 iw-grid iw-grid-cols-2 iw-gap-4",children:[e.jsx("div",{className:"iw-border iw-border-gray-200 iw-rounded-lg iw-overflow-hidden iw-bg-gray-900",children:e.jsx("video",{ref:a,autoPlay:!0,playsInline:!0,muted:!0,className:"iw-w-full iw-h-64 iw-object-cover"})}),e.jsxs("div",{className:"iw-flex iw-flex-col iw-gap-3",children:[e.jsx("p",{className:"iw-text-sm iw-text-gray-700",children:"We will need access to your camera and microphone. Grant permission to preview your setup and to enable the Start Interview button."}),!((j=navigator.mediaDevices)!=null&&j.getUserMedia)&&e.jsx("div",{className:"iw-text-xs iw-text-red-600",children:"Your browser does not support media devices. Please use a modern browser like Chrome, Edge, or Firefox."}),c&&e.jsx("div",{className:"iw-text-xs iw-text-red-600",children:c}),e.jsxs("div",{className:"iw-flex iw-items-center iw-gap-2",children:[e.jsx(N,{onClick:h,isLoading:m,variant:"outline",size:"sm",children:o?"Recheck Permissions":"Enable Camera & Mic"}),e.jsx(N,{onClick:k,disabled:!o,size:"sm",children:"Start Interview"})]}),e.jsxs("ul",{className:"iw-text-xs iw-text-gray-500 iw-pt-2 iw-list-disc iw-pl-4",children:[e.jsx("li",{children:"Your preview is muted to avoid echo."}),e.jsx("li",{children:"You can change devices from your browser’s site settings."})]})]})]})]})})},P=({title:r})=>e.jsxs("header",{className:"iw-w-full iw-text-gray-900",children:[e.jsxs("div",{className:"iw-mx-auto iw-flex iw-items-center iw-justify-between iw-px-4 iw-py-3",children:[e.jsxs("div",{className:"iw-flex iw-items-center iw-space-x-2",children:[e.jsx("div",{className:"iw-h-7 iw-w-7 iw-rounded-md iw-bg-purple-500 iw-flex iw-items-center iw-justify-center iw-text-white iw-font-semibold",children:"N"}),e.jsx("p",{className:"iw-text-sm iw-font-medium",children:"Novara"})]}),e.jsx("h1",{className:"iw-text-base iw-font-medium",children:r}),e.jsx("button",{className:"iw-text-sm iw-text-gray-500 hover:iw-text-gray-700",children:"Exit Interview"})]}),e.jsx("div",{className:"iw-h-px iw-bg-gray-200"})]}),R=({question:r})=>e.jsxs("div",{className:"iw-rounded-xl iw-mb-4 message-animation iw-bg-gradient-to-b iw-from-indigo-50 iw-to-white iw-text-gray-800 iw-border iw-border-indigo-100 iw-p-5",style:{background:"linear-gradient(to bottom, #eef2ff, #ffffff)",border:"1px solid #e0e7ff",color:"#1f2937"},children:[e.jsxs("div",{className:"iw-flex iw-items-center iw-space-x-3 iw-mb-3",children:[e.jsx("div",{className:"iw-h-12 iw-w-12 iw-rounded-lg iw-bg-purple-500 iw-flex iw-items-center iw-justify-center iw-text-white iw-font-semibold",children:"N"}),e.jsxs("div",{children:[e.jsx("div",{className:"iw-text-sm iw-font-semibold",children:"Novara"}),e.jsx("div",{className:"iw-text-xs iw-text-gray-500",children:"Assistant"})]})]}),e.jsx("p",{className:"iw-text-[15px] iw-leading-6",children:r.text}),r.type==="multiple-choice"&&r.options&&e.jsx("div",{className:"iw-mt-3 iw-space-y-2",children:r.options.map((s,i)=>e.jsx("div",{className:"iw-p-2 iw-rounded iw-border iw-border-gray-300 iw-hover:bg-gray-100 iw-cursor-pointer iw-transition-colors",children:s},i))})]}),T=({className:r=""})=>{const s=n.useRef(null);return n.useEffect(()=>{let i=null;return(async()=>{try{i=await navigator.mediaDevices.getUserMedia({video:!0,audio:!1}),s.current&&(s.current.srcObject=i)}catch(t){console.error("Error accessing camera:",t)}})(),()=>{i&&i.getTracks().forEach(t=>t.stop())}},[]),e.jsx("div",{className:`iw-relative ${r}`,children:e.jsx("video",{ref:s,autoPlay:!0,playsInline:!0,muted:!0,className:"iw-w-full iw-h-full iw-object-cover iw-rounded-md"})})},A=({label:r,error:s,fullWidth:i=!1,className:a="",id:t,...o})=>{const l=t||`textarea-${Math.random().toString(36).substring(2,9)}`,c="iw-block iw-rounded-md iw-border iw-border-gray-300 iw-shadow-sm iw-px-4 iw-py-2 iw-text-sm iw-focus:border-primary-500 iw-focus:ring-primary-500 iw-focus:outline-none iw-transition-all",u=s?"iw-border-red-500 iw-focus:border-red-500 iw-focus:ring-red-500":"",m=i?"iw-w-full":"",d=a.includes("iw-h-full")?"iw-h-full":"";return e.jsxs("div",{className:`${i?"iw-w-full iw-h-full":""} ${d?"iw-flex iw-flex-col":""}`,children:[r&&e.jsx("label",{htmlFor:l,className:"iw-block iw-text-sm iw-font-medium iw-text-gray-700 iw-mb-1",children:r}),e.jsx("textarea",{id:l,className:`${c} ${u} ${m} ${d} ${a}`,"aria-invalid":s?"true":"false",...o}),s&&e.jsx("p",{className:"iw-mt-1 iw-text-sm iw-text-red-600",children:s})]})},D=({value:r,onChange:s,onSubmit:i,isSubmitDisabled:a,remainingTimeText:t})=>{const o=l=>{l.key==="Enter"&&(l.ctrlKey||l.metaKey)&&!a&&(l.preventDefault(),i())};return e.jsx("div",{className:"iw-mt-auto",children:e.jsxs("div",{className:"iw-rounded-xl iw-overflow-hidden iw-border iw-border-gray-200",children:[e.jsxs("div",{className:"iw-flex iw-items-center iw-justify-between iw-px-3 iw-py-2 iw-bg-gray-50 iw-border-b iw-border-gray-200",children:[e.jsx("div",{className:"iw-text-sm iw-font-medium",children:"Your answer"}),t&&e.jsx("div",{className:"iw-text-xs iw-text-gray-500",children:t})]}),e.jsx(A,{value:r,onChange:s,onKeyDown:o,placeholder:"Type your answer here...",className:"iw-bg-gray-50 iw-w-full iw-resize-none iw-focus:outline-none iw-bg-transparent iw-min-h-[112px]",rows:5,fullWidth:!0}),e.jsxs("div",{className:"iw-p-2 iw-flex iw-justify-between iw-items-center iw-bg-gray-50",children:[e.jsx("div",{className:"iw-text-xs iw-text-gray-500",children:e.jsx("kbd",{children:" Press Ctrl+Enter to submit"})}),e.jsx(N,{onClick:i,disabled:a,size:"sm",variant:"gradient",children:"Submit Answer"})]})]})})},S=({title:r="Interview",questions:s=[],onComplete:i,onAnswerSubmit:a,className:t=""})=>{const[o,l]=n.useState(0),[c,u]=n.useState([]),[m,d]=n.useState(""),[f,h]=n.useState(!1),[k,j]=n.useState(!0),[w,p]=n.useState(!1),[z]=n.useState(!0),_=n.useRef(null),v=s[o],F=()=>{const g={questionId:(v==null?void 0:v.id)||"",answerText:m,timestamp:new Date};u([...c,g]),a&&a(g),o<s.length-1?(l(y=>y+1),d("")):(h(!0),i&&i(c))},G=n.useMemo(()=>{const y=60-Math.floor(Date.now()/1e3%60),Q=Math.floor(y/60).toString().padStart(2,"0"),W=(y%60).toString().padStart(2,"0");return`Time to Talk: ${Q}:${W} min`},[o]);return w?e.jsx("div",{className:"interview-widget-container",children:e.jsx("div",{ref:_,className:`iw-flex iw-flex-col iw-rounded-xl iw-shadow-lg iw-overflow-hidden iw-h-[calc(100vh-1rem)] ${t}`,children:e.jsxs("div",{className:" iw-h-full iw-flex iw-flex-col",children:[e.jsx(P,{title:r}),e.jsx("div",{className:"iw-flex iw-flex-col iw-flex-grow iw-overflow-hidden iw-px-4 iw-py-5",children:f?e.jsxs("div",{className:"iw-flex iw-flex-col iw-items-center iw-justify-center iw-h-full",children:[e.jsx("div",{className:"iw-text-xl iw-font-bold iw-mb-2",children:"Interview Complete!"}),e.jsx("p",{className:"iw-text-center iw-mb-4",children:"Thank you for participating in this interview."})]}):e.jsxs("div",{className:"iw-h-full iw-flex iw-flex-col ",children:[e.jsx("div",{className:"iw-flex-1",children:v&&e.jsx(R,{question:v})}),e.jsxs("div",{className:"iw-grid iw-grid-cols-2 iw-gap-4 iw-mt-4",children:[z&&e.jsx("div",{className:"iw-mt-2 iw-border iw-border-gray-200 iw-rounded-xl iw-p-2",children:e.jsx(T,{className:"iw-w-full iw-h-[400px]"})}),e.jsx(D,{value:m,onChange:g=>d(g.target.value),onSubmit:F,isSubmitDisabled:!m.trim()||!w,remainingTimeText:G})]})]})})]})})}):e.jsx("div",{className:"interview-widget-container iw-h-screen iw-w-screen",children:e.jsx(M,{isOpen:k,onStart:()=>{console.log("Permissions granted, starting interview"),p(!0),j(!1)}})})};typeof window<"u"&&(window.InterviewWidget={InterviewWidget:S}),x.InterviewWidget=S,x.default=S,Object.defineProperties(x,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "interview-widget",
3
3
  "type": "module",
4
- "version": "0.0.5",
4
+ "version": "0.0.7",
5
5
  "description": "Advanced React interview widget with STT, TTS, camera access, and ML-powered analysis",
6
6
  "main": "dist/widget.umd.js",
7
7
  "module": "dist/widget.es.js",