interview-widget 0.0.3 → 0.0.5

package/README.md

@@ -1,6 +1,6 @@
 # Interview Widget
 
-A customizable React interview widget that can be easily embedded into any website or React application via CDN.
+A customizable React interview widget that can be easily embedded into any website or React application.
 
 ## Features
 
@@ -88,8 +88,9 @@ import {
   InterviewQuestion,
   InterviewAnswer,
 } from "interview-widget";
+import "interview-widget/style.css";
 
-function App() {
+export function InterviewWidgetDemo() {
   const questions: InterviewQuestion[] = [
     {
       id: "1",
@@ -131,7 +132,7 @@ function App() {
 ### InterviewWidget Props
 
 | Prop             | Type                                   | Default       | Description                             |
-| ---------------- | -------------------------------------- | ------------- | --------------------------------------- | --- |
+| ---------------- | -------------------------------------- | ------------- | --------------------------------------- |
 | `title`          | `string`                               | `"Interview"` | Title displayed in the interview header |
 | `candidateName`  | `string`                               | `""`          | Optional name of the candidate          |
 | `questions`      | `InterviewQuestion[]`                  | Required      | Array of interview questions            |
@@ -139,26 +140,19 @@ function App() {
 | `onComplete`     | `(answers: InterviewAnswer[]) => void` | `undefined`   | Callback when interview is completed    |
 | `className`      | `string`                               | `""`          | Additional CSS classes                  |
 | `height`         | `string`                               | `"600px"`     | Height of the interview widget          |
-| `width`          | `string`                               | `"100%"`      | Width of the interview widget           |     |
+| `width`          | `string`                               | `"100%"`      | Width of the interview widget           |
 
-### InterviewQuestion Interface
+## Browser Support
 
-```typescript
-interface InterviewQuestion {
-  id: string;
-  text: string;
-  type?: "text" | "code" | "multiple-choice";
-  options?: string[]; // For multiple choice questions
-  timestamp: Date;
-}
-```
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
 
-### InterviewAnswer Interface
+## Contributing
 
-```typescript
-interface InterviewAnswer {
-  questionId: string;
-  answerText: string;
-  timestamp: Date;
-}
-```
+1. Fork the repository
+2. Create a feature branch
+3. Make your changes
+4. Add tests if applicable
+5. Submit a pull request

package/dist/widget.es.js

@@ -175,7 +175,6 @@ const k = ({
               onClick: N,
               disabled: !o,
               size: "sm",
-              variant: "gradient",
               children: "Start Interview"
             }
           )

package/dist/widget.umd.js

@@ -6,4 +6,4 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */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",variant:"gradient",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"}})});
+ */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"}})});

package/package.json

@@ -1,13 +1,22 @@
 {
   "name": "interview-widget",
   "type": "module",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "Advanced React interview widget with STT, TTS, camera access, and ML-powered analysis",
   "main": "dist/widget.umd.js",
   "module": "dist/widget.es.js",
   "types": "dist/index.d.ts",
   "unpkg": "dist/widget.umd.js",
   "jsdelivr": "dist/widget.umd.js",
+  "style": "dist/widget.css",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/widget.es.js",
+      "require": "./dist/widget.umd.js"
+    },
+    "./style.css": "./dist/widget.css"
+  },
   "files": [
     "dist"
   ],