interview-widget 0.1.3 → 0.1.5

package/dist/widget.es.js

@@ -1,9 +1,9 @@
-var me = Object.defineProperty;
-var ge = (i, t, e) => t in i ? me(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
-var I = (i, t, e) => ge(i, typeof t != "symbol" ? t + "" : t, e);
-import { createContext as he, useContext as fe, useEffect as A, useState as y, useRef as D, useCallback as v, useMemo as xe } from "react";
-import { createPortal as pe } from "react-dom";
-var X = { exports: {} }, U = {};
+var ve = Object.defineProperty;
+var je = (i, r, e) => r in i ? ve(i, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[r] = e;
+var D = (i, r, e) => je(i, typeof r != "symbol" ? r + "" : r, e);
+import ce, { createContext as Ne, useContext as Te, useRef as S, useState as T, useEffect as P, useCallback as A, useMemo as V } from "react";
+import { createPortal as ke } from "react-dom";
+var de = { exports: {} }, J = {};
 /**
  * @license React
  * react-jsx-runtime.production.js
@@ -13,28 +13,28 @@ var X = { exports: {} }, U = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var be = Symbol.for("react.transitional.element"), ye = Symbol.for("react.fragment");
-function Z(i, t, e) {
-  var a = null;
-  if (e !== void 0 && (a = "" + e), t.key !== void 0 && (a = "" + t.key), "key" in t) {
+var Ie = Symbol.for("react.transitional.element"), Ee = Symbol.for("react.fragment");
+function we(i, r, e) {
+  var o = null;
+  if (e !== void 0 && (o = "" + e), r.key !== void 0 && (o = "" + r.key), "key" in r) {
     e = {};
-    for (var s in t)
-      s !== "key" && (e[s] = t[s]);
-  } else e = t;
-  return t = e.ref, {
-    $$typeof: be,
+    for (var s in r)
+      s !== "key" && (e[s] = r[s]);
+  } else e = r;
+  return r = e.ref, {
+    $$typeof: Ie,
     type: i,
-    key: a,
-    ref: t !== void 0 ? t : null,
+    key: o,
+    ref: r !== void 0 ? r : null,
     props: e
   };
 }
-U.Fragment = ye;
-U.jsx = Z;
-U.jsxs = Z;
-X.exports = U;
-var r = X.exports;
-const C = {
+J.Fragment = Ee;
+J.jsx = we;
+J.jsxs = we;
+de.exports = J;
+var t = de.exports;
+const $ = {
   api: {
     baseUrl: "/api",
     retryConfig: {
@@ -62,214 +62,103 @@ const C = {
       provider: "piper"
     }
   }
-}, ee = he(
+}, ue = Ne(
   null
 );
-function Ne({
+function Re({
   config: i = {},
-  children: t
+  children: r
 }) {
-  var a, s, c, n;
+  var o, s, c, a;
   const e = {
     api: {
-      ...C.api,
+      ...$.api,
       ...i.api,
       retryConfig: {
-        ...C.api.retryConfig,
-        ...(a = i.api) == null ? void 0 : a.retryConfig
+        ...$.api.retryConfig,
+        ...(o = i.api) == null ? void 0 : o.retryConfig
       }
     },
     ui: {
-      ...C.ui,
+      ...$.ui,
       ...i.ui
     },
     interview: {
-      ...C.interview,
+      ...$.interview,
       ...i.interview,
       timers: {
-        ...C.interview.timers,
+        ...$.interview.timers,
         ...(s = i.interview) == null ? void 0 : s.timers
       },
       stt: {
-        ...C.interview.stt,
+        ...$.interview.stt,
         ...(c = i.interview) == null ? void 0 : c.stt
       },
       tts: {
-        ...C.interview.tts,
-        ...(n = i.interview) == null ? void 0 : n.tts
+        ...$.interview.tts,
+        ...(a = i.interview) == null ? void 0 : a.tts
       }
     }
   };
-  return /* @__PURE__ */ r.jsx(ee.Provider, { value: e, children: t });
+  return /* @__PURE__ */ t.jsx(ue.Provider, { value: e, children: r });
 }
-function q() {
-  const i = fe(ee);
+function X() {
+  const i = Te(ue);
   if (!i)
     throw new Error(
       "useInterviewConfig must be used within an InterviewWidgetProvider. Wrap your component tree with <InterviewWidgetProvider config={...}>"
     );
   return i;
 }
-function Te() {
-  return q().api || C.api;
+function Se() {
+  return X().api || $.api;
 }
-function F() {
-  return q().ui || C.ui;
+function W() {
+  return X().ui || $.ui;
 }
-function Ie() {
-  return q().interview || C.interview;
+function Ce() {
+  return X().interview || $.interview;
 }
-const ve = ({
-  isOpen: i,
-  onClose: t,
-  children: e,
-  title: a,
-  showCloseButton: s = !0,
-  closeOnOverlayClick: c = !0,
-  closeOnEscape: n = !0,
-  className: o = ""
-}) => {
-  if (A(() => {
-    if (!i || !n) return;
-    const d = (u) => {
-      u.key === "Escape" && t();
-    };
-    return document.addEventListener("keydown", d), () => document.removeEventListener("keydown", d);
-  }, [i, n, t]), A(() => (i ? (document.body.style.overflow = "hidden", document.body.classList.add("interview-widget-container")) : (document.body.style.overflow = "unset", document.body.classList.remove("interview-widget-container")), () => {
-    document.body.style.overflow = "unset", document.body.classList.remove("interview-widget-container");
-  }), [i]), !i) return null;
-  const m = (d) => {
-    c && d.target === d.currentTarget && t();
-  }, g = /* @__PURE__ */ r.jsxs("div", { className: "iw-fixed iw-inset-0 iw-z-50 iw-flex iw-items-center iw-justify-center", children: [
-    /* @__PURE__ */ r.jsx(
-      "div",
-      {
-        className: "iw-fixed iw-inset-0 iw-bg-black iw-bg-opacity-50 iw-transition-opacity",
-        onClick: m
-      }
-    ),
-    /* @__PURE__ */ r.jsxs(
-      "div",
-      {
-        className: `iw-relative iw-bg-white iw-rounded-lg iw-shadow-xl iw-max-w-md iw-w-full iw-mx-4 iw-max-h-[90vh] iw-overflow-hidden ${o}`,
-        role: "dialog",
-        "aria-modal": "true",
-        "aria-labelledby": a ? "dialog-title" : void 0,
-        children: [
-          (a || s) && /* @__PURE__ */ r.jsxs("div", { className: "iw-flex iw-items-center iw-justify-between iw-p-4 iw-border-b iw-border-gray-200", children: [
-            a && /* @__PURE__ */ r.jsx(
-              "h2",
-              {
-                id: "dialog-title",
-                className: "iw-text-lg iw-font-semibold iw-text-gray-900",
-                children: a
-              }
-            ),
-            s && /* @__PURE__ */ r.jsx(
-              "button",
-              {
-                onClick: t,
-                className: "iw-p-1 iw-text-gray-400 iw-hover:text-gray-600 iw-transition-colors iw-rounded iw-hover:bg-gray-100",
-                "aria-label": "Close dialog",
-                children: /* @__PURE__ */ r.jsx(
-                  "svg",
-                  {
-                    className: "iw-w-5 iw-h-5",
-                    fill: "none",
-                    stroke: "currentColor",
-                    viewBox: "0 0 24 24",
-                    children: /* @__PURE__ */ r.jsx(
-                      "path",
-                      {
-                        strokeLinecap: "round",
-                        strokeLinejoin: "round",
-                        strokeWidth: 2,
-                        d: "M6 18L18 6M6 6l12 12"
-                      }
-                    )
-                  }
-                )
-              }
-            )
-          ] }),
-          /* @__PURE__ */ r.jsx("div", { className: "iw-p-4 iw-overflow-y-auto", children: e })
-        ]
-      }
-    )
-  ] });
-  return pe(g, document.body);
-}, Ee = ({
-  confirmExitInterview: i,
-  isOpen: t,
-  onClose: e
-}) => /* @__PURE__ */ r.jsx(ve, { isOpen: t, onClose: e, title: "Exit Interview", children: /* @__PURE__ */ r.jsxs("div", { className: "iw-space-y-4", children: [
-  /* @__PURE__ */ r.jsx("p", { className: "iw-text-base iw-text-gray-700", children: "Are you sure you want to exit the interview? All progress will be lost and you will not be able to resume." }),
-  /* @__PURE__ */ r.jsxs("div", { className: "iw-flex iw-justify-end iw-space-x-2", children: [
-    /* @__PURE__ */ r.jsx(
-      "button",
-      {
-        className: "iw-px-4 iw-py-2 iw-bg-gray-200 iw-rounded iw-text-gray-700 iw-font-medium",
-        onClick: e,
-        children: "Cancel"
-      }
-    ),
-    /* @__PURE__ */ r.jsx(
-      "button",
-      {
-        className: "iw-px-4 iw-py-2 iw-bg-red-600 iw-text-white iw-rounded iw-font-medium",
-        onClick: i,
-        children: "Confirm Exit"
-      }
-    )
-  ] })
-] }) }), je = ({ title: i, onExit: t }) => {
-  const { baseColor: e } = F(), [a, s] = y(!1);
-  return /* @__PURE__ */ r.jsxs("header", { className: "iw-w-full iw-text-gray-900", children: [
-    /* @__PURE__ */ r.jsxs("div", { className: "iw-mx-auto iw-flex iw-items-center iw-justify-between iw-px-4 iw-py-3", children: [
-      /* @__PURE__ */ r.jsxs("div", { className: "iw-flex iw-items-center iw-space-x-2", children: [
-        /* @__PURE__ */ r.jsx(
-          "div",
-          {
-            className: "iw-h-7 iw-w-7 iw-rounded-md  iw-flex iw-items-center iw-justify-center iw-text-white iw-font-semibold",
-            style: { backgroundColor: e },
-            children: "N"
-          }
-        ),
-        /* @__PURE__ */ r.jsx("p", { className: "iw-text-sm iw-font-medium", children: "Novara" })
-      ] }),
-      /* @__PURE__ */ r.jsx("h1", { className: "iw-text-base iw-font-medium", children: i }),
-      /* @__PURE__ */ r.jsx(
-        "button",
-        {
-          className: "iw-text-sm iw-text-gray-500 hover:iw-text-gray-700",
-          onClick: () => s(!0),
-          children: "Exit Interview"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ r.jsx("div", { className: "iw-h-px iw-bg-gray-200" }),
-    /* @__PURE__ */ r.jsx(
-      Ee,
-      {
-        isOpen: a,
-        confirmExitInterview: () => {
-          t(), s(!1);
-        },
-        onClose: () => s(!1)
-      }
-    )
-  ] });
-}, $ = ({
+const he = ({
+  className: i,
+  ...r
+}) => /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsxs(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className: `iw-animate-spin ${i}`,
+    ...r,
+    children: [
+      /* @__PURE__ */ t.jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+      /* @__PURE__ */ t.jsx("path", { d: "M12 6l0 -3" }),
+      /* @__PURE__ */ t.jsx("path", { d: "M16.25 7.75l2.15 -2.15" }),
+      /* @__PURE__ */ t.jsx("path", { d: "M18 12l3 0" }),
+      /* @__PURE__ */ t.jsx("path", { d: "M16.25 16.25l2.15 2.15" }),
+      /* @__PURE__ */ t.jsx("path", { d: "M12 18l0 3" }),
+      /* @__PURE__ */ t.jsx("path", { d: "M7.75 16.25l-2.15 2.15" }),
+      /* @__PURE__ */ t.jsx("path", { d: "M6 12l-3 0" }),
+      /* @__PURE__ */ t.jsx("path", { d: "M7.75 7.75l-2.15 -2.15" })
+    ]
+  }
+) }), se = ({
   children: i,
-  variant: t = "primary",
+  variant: r = "primary",
   size: e = "md",
-  fullWidth: a = !1,
+  fullWidth: o = !1,
   isLoading: s = !1,
   disabled: c,
-  className: n = "",
-  ...o
+  className: a = "",
+  ...n
 }) => {
-  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", g = {
+  const w = "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",
@@ -277,159 +166,194 @@ const ve = ({
     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"
-  }, u = "iw-disabled:opacity-50 iw-disabled:cursor-not-allowed iw-disabled:pointer-events-none", h = a ? "iw-w-full" : "";
-  return /* @__PURE__ */ r.jsxs(
+    md: "iw-px-4 iw-py-2.5 iw-text-sm",
+    lg: "iw-px-5 iw-py-3 iw-text-base"
+  }, h = "iw-disabled:opacity-50 iw-disabled:cursor-not-allowed iw-disabled:pointer-events-none", u = o ? "iw-w-full" : "";
+  return /* @__PURE__ */ t.jsxs(
     "button",
     {
-      className: `${m} ${g[t]} ${d[e]} ${h} ${u} ${n}`,
+      className: `${w} ${m[r]} ${d[e]} ${u} ${h} ${a}`,
       disabled: c || s,
-      ...o,
+      ...n,
       children: [
-        s && /* @__PURE__ */ r.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: [
-              /* @__PURE__ */ r.jsx(
-                "circle",
-                {
-                  className: "iw-opacity-25",
-                  cx: "12",
-                  cy: "12",
-                  r: "10",
-                  stroke: "currentColor",
-                  strokeWidth: "4"
-                }
-              ),
-              /* @__PURE__ */ r.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"
-                }
-              )
-            ]
-          }
-        ),
+        s && /* @__PURE__ */ t.jsx(he, { height: 16, width: 16, style: { marginRight: "3px" } }),
         i
       ]
     }
   );
-}, Se = ({
+};
+function Me(i) {
+  const r = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(i);
+  return r ? {
+    r: parseInt(r[1], 16),
+    g: parseInt(r[2], 16),
+    b: parseInt(r[3], 16)
+  } : null;
+}
+function Ae(i, r, e) {
+  return "#" + [i, r, e].map((o) => {
+    const s = Math.round(o).toString(16);
+    return s.length === 1 ? "0" + s : s;
+  }).join("");
+}
+function me(i, r) {
+  const e = Me(i);
+  if (!e) return i;
+  const o = e.r + (255 - e.r) * r, s = e.g + (255 - e.g) * r, c = e.b + (255 - e.b) * r;
+  return Ae(o, s, c);
+}
+function De(i, r = 0.8) {
+  return {
+    background: `linear-gradient(to bottom, ${me(i, r)}, #ffffff)`,
+    color: "#1f2937"
+  };
+}
+function Pe(i) {
+  return new Promise((r) => setTimeout(r, i));
+}
+function ge(i) {
+  return `linear-gradient(to left, ${me(i, 0.4)}, ${i})`;
+}
+const $e = (i) => /* @__PURE__ */ t.jsxs(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    ...i,
+    children: [
+      /* @__PURE__ */ t.jsx("path", { d: "M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" }),
+      /* @__PURE__ */ t.jsx("path", { d: "m9 12 2 2 4-4" })
+    ]
+  }
+), _e = [
+  "Do not refresh or reload the page during your assessment",
+  "Refrain from switching tabs or opening other applications while the session is in progress",
+  "Ensure your face remains clearly visible on camera at all times",
+  "Avoid frequent distractions or leaving your seat during the session",
+  "Do not disable or interfere with audio/video monitoring",
+  "All activities are being recorded, and any violations may result in penalties, including disqualification"
+], Le = ({
   isOpen: i,
-  onStart: t,
+  onStart: r,
   onClose: e
 }) => {
-  var N;
-  const a = D(null), s = D(null), { baseColor: c, borderRadius: n } = F(), [o, m] = y(!1), [g, d] = y(null), [u, h] = y(!1), x = () => {
-    s.current && (s.current.getTracks().forEach((w) => w.stop()), s.current = null);
-  }, k = async () => {
-    h(!0), d(null);
+  var j;
+  const o = S(null), s = S(null), { baseColor: c, borderRadius: a } = W(), [n, w] = T(!1), [m, d] = T(null), [h, u] = T(!1), g = () => {
+    s.current && (s.current.getTracks().forEach((l) => l.stop()), s.current = null);
+  }, y = async () => {
+    u(!0), d(null);
     try {
-      const w = await navigator.mediaDevices.getUserMedia({
+      const l = await navigator.mediaDevices.getUserMedia({
         video: { width: { ideal: 1280 }, height: { ideal: 720 } },
         audio: !0
       });
-      s.current = w, a.current && (a.current.srcObject = w), m(!0);
-    } catch (w) {
-      console.error("Media permission error:", w);
+      s.current = l, o.current && (o.current.srcObject = l), w(!0);
+    } catch (l) {
+      console.error("Media permission error:", l);
       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), m(!1), d(p);
+      (l == null ? void 0 : l.name) === "NotAllowedError" ? p = "Permissions denied. Please allow access to camera and microphone." : (l == null ? void 0 : l.name) === "NotFoundError" ? p = "No camera/microphone found. Please connect a device and retry." : l != null && l.message && (p = l.message), w(!1), d(p);
     } finally {
-      h(!1);
+      u(!1);
     }
   };
-  if (A(() => {
+  if (P(() => {
     if (!i) {
-      x();
+      g();
       return;
     }
-    return k(), () => {
-      x();
+    return y(), () => {
+      g();
     };
   }, [i]), !i) return null;
-  const j = () => {
-    t(), x();
+  const k = () => {
+    r(), g();
   };
-  return /* @__PURE__ */ r.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__ */ r.jsxs("div", { className: "iw-bg-white iw-rounded-xl iw-shadow-2xl iw-w-full iw-max-w-3xl iw-mx-4", children: [
-    /* @__PURE__ */ r.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: [
-      /* @__PURE__ */ r.jsx("h2", { className: "iw-text-base iw-font-semibold", children: "Camera & Microphone Check" }),
-      e && /* @__PURE__ */ r.jsx(
+  return /* @__PURE__ */ t.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__ */ t.jsxs("div", { className: "iw-bg-white iw-rounded-xl iw-shadow-2xl iw-w-full iw-max-w-[800px] iw-mx-4", children: [
+    /* @__PURE__ */ t.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: [
+      /* @__PURE__ */ t.jsx("h2", { className: "iw-text-base iw-font-semibold", children: "Interview Onboarding" }),
+      e && /* @__PURE__ */ t.jsx(
         "button",
         {
           "aria-label": "Close",
           className: "iw-text-gray-500 hover:iw-text-gray-700",
           onClick: () => {
-            x(), e == null || e();
+            g(), e == null || e();
           },
           children: "✕"
         }
       )
     ] }),
-    /* @__PURE__ */ r.jsxs("div", { className: "iw-p-4 iw-grid iw-grid-cols-2 iw-gap-4", children: [
-      /* @__PURE__ */ r.jsx("div", { className: "iw-border iw-border-gray-200 iw-rounded-lg iw-overflow-hidden iw-bg-gray-900", children: /* @__PURE__ */ r.jsx(
-        "video",
-        {
-          ref: a,
-          autoPlay: !0,
-          playsInline: !0,
-          muted: !0,
-          className: "iw-w-full iw-h-64 iw-object-cover"
-        }
-      ) }),
-      /* @__PURE__ */ r.jsxs("div", { className: "iw-flex iw-flex-col iw-gap-3", children: [
-        /* @__PURE__ */ r.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." }),
-        !((N = navigator.mediaDevices) != null && N.getUserMedia) && /* @__PURE__ */ r.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." }),
-        g && /* @__PURE__ */ r.jsx("div", { className: "iw-text-xs iw-text-red-600", children: g }),
-        /* @__PURE__ */ r.jsxs("div", { className: "iw-flex iw-items-center iw-gap-2", children: [
-          /* @__PURE__ */ r.jsx(
-            $,
+    /* @__PURE__ */ t.jsxs("div", { className: "iw-p-4 iw-grid iw-grid-cols-2 iw-gap-4", children: [
+      /* @__PURE__ */ t.jsxs("div", { children: [
+        /* @__PURE__ */ t.jsx("div", { className: "iw-border iw-border-gray-200 iw-rounded-lg iw-overflow-hidden iw-bg-gray-900", children: /* @__PURE__ */ t.jsx(
+          "video",
+          {
+            ref: o,
+            autoPlay: !0,
+            playsInline: !0,
+            muted: !0,
+            className: "iw-w-full iw-h-64 iw-object-cover",
+            style: {
+              transform: "scaleX(-1)"
+            }
+          }
+        ) }),
+        /* @__PURE__ */ t.jsxs("div", { className: "iw-grid iw-grid-cols-2 iw-gap-2 iw-mt-3", children: [
+          /* @__PURE__ */ t.jsx(
+            se,
             {
-              onClick: k,
-              isLoading: u,
+              onClick: y,
+              disabled: h,
               variant: "outline",
               size: "sm",
               style: {
                 borderColor: c,
-                borderRadius: n,
+                borderRadius: a,
                 color: c
               },
-              children: o ? "Recheck Permissions" : "Enable Camera & Mic"
+              children: n ? "Recheck Permissions" : "Enable Camera & Mic"
             }
           ),
-          /* @__PURE__ */ r.jsx(
-            $,
+          /* @__PURE__ */ t.jsx(
+            se,
             {
-              onClick: j,
-              disabled: !o,
+              onClick: k,
+              disabled: !n,
               size: "sm",
-              style: { backgroundColor: c, borderRadius: n },
-              children: "Proceed"
+              style: {
+                background: ge(c),
+                borderRadius: a
+              },
+              children: "Start Interview"
             }
           )
-        ] }),
-        /* @__PURE__ */ r.jsxs("ul", { className: "iw-text-xs iw-text-gray-500 iw-pt-2 iw-list-disc iw-pl-4", children: [
-          /* @__PURE__ */ r.jsx("li", { children: "Your preview is muted to avoid echo." }),
-          /* @__PURE__ */ r.jsx("li", { children: "You can change devices from your browser’s site settings." })
         ] })
+      ] }),
+      /* @__PURE__ */ t.jsxs("div", { className: "iw-flex iw-flex-col iw-gap-3", children: [
+        /* @__PURE__ */ t.jsxs("div", { className: "iw-flex iw-items-center iw-gap-2 iw-text-gray-800 iw-font-semibold", children: [
+          /* @__PURE__ */ t.jsx($e, {}),
+          /* @__PURE__ */ t.jsx("h3", { children: "Interview Guidelines" })
+        ] }),
+        !((j = navigator.mediaDevices) != null && j.getUserMedia) && /* @__PURE__ */ t.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." }),
+        m && /* @__PURE__ */ t.jsx("div", { className: "iw-text-xs iw-text-red-600", children: m }),
+        /* @__PURE__ */ t.jsx("ul", { className: "iw-mt-1 iw-text-sm iw-text-gray-500 iw-list-disc iw-pl-4 iw-space-y-1.5", children: _e.map((l, p) => /* @__PURE__ */ t.jsx("li", { children: l }, p)) })
       ] })
     ] })
   ] }) });
 };
-var l = /* @__PURE__ */ ((i) => (i.IDLE = "idle", i.FETCHING_QUESTION = "fetching_question", i.READING_QUESTION = "reading_question", i.THINKING = "thinking", i.ANSWERING = "answering", i.TRANSCRIBING = "transcribing", i.EDITING = "editing", i.SUBMITTING = "submitting", i.COMPLETED = "completed", i))(l || {});
-const Re = {
+var R = /* @__PURE__ */ ((i) => (i.IDLE = "idle", i.FETCHING_QUESTION = "fetching_question", i.READING_QUESTION = "reading_question", i.THINKING = "thinking", i.ANSWERING = "answering", i.TRANSCRIBING = "transcribing", i.EDITING = "editing", i.SUBMITTING = "submitting", i.COMPLETED = "completed", i))(R || {});
+const Oe = {
   thinkingDuration: 30,
   answeringDuration: 120,
-  editingDuration: 30,
-  totalInterviewDuration: 600,
-  minimumTimeForNextQuestion: 120
-}, Ce = {
+  editingDuration: 30
+}, Fe = {
   idle: {
     next: "fetching_question"
     /* FETCHING_QUESTION */
@@ -458,17 +382,16 @@ const Re = {
     /* COMPLETED */
   }
 };
-class ke {
-  constructor(t = {}, e = {}) {
-    I(this, "config");
-    I(this, "state");
-    I(this, "phaseIntervalId", null);
-    I(this, "globalIntervalId", null);
-    I(this, "callbacks");
-    this.config = { ...Re, ...t }, this.callbacks = e, this.state = {
+class Ue {
+  constructor(r = {}, e = {}) {
+    D(this, "config");
+    D(this, "state");
+    D(this, "phaseIntervalId", null);
+    D(this, "globalIntervalId", null);
+    D(this, "callbacks");
+    this.config = { ...Oe, ...r }, this.callbacks = e, this.state = {
       phase: "idle",
       currentPhaseTimeRemaining: 0,
-      totalTimeRemaining: this.config.totalInterviewDuration,
       totalTimeElapsed: 0,
       currentQuestionNumber: 0
     };
@@ -483,22 +406,24 @@ class ke {
    * Start a new question cycle
    */
   startQuestion() {
-    var t, e;
-    if (this.state.totalTimeRemaining < this.config.minimumTimeForNextQuestion) {
-      this.state.phase = "completed", this.stopGlobalTimer(), this.stopPhaseTimer(), (e = (t = this.callbacks).onInterviewEnd) == null || e.call(t), this.notifyChange();
-      return;
-    }
     this.state.currentQuestionNumber === 0 && this.startGlobalTimer(), this.state.currentQuestionNumber = this.state.currentQuestionNumber + 1, this.state.phase = "fetching_question", this.notifyChange();
   }
   /**
    * Move to next phase
    */
   nextPhase() {
-    const t = this.state.phase, e = Ce[t];
+    const r = this.state.phase, e = Fe[r];
     if (!e) return;
     this.stopPhaseTimer(), this.state.phase = e.next;
-    const a = this.getDurationForPhase(e.next);
-    a > 0 ? (this.state.currentPhaseTimeRemaining = a, this.startPhaseTimer()) : this.state.currentPhaseTimeRemaining = 0, this.notifyChange();
+    const o = this.getDurationForPhase(e.next);
+    o > 0 ? (this.state.currentPhaseTimeRemaining = o, this.startPhaseTimer()) : this.state.currentPhaseTimeRemaining = 0, this.notifyChange();
+  }
+  /**
+   * Manually complete the interview
+   */
+  completeInterview() {
+    var r, e;
+    this.stopGlobalTimer(), this.stopPhaseTimer(), this.state.phase = "completed", (e = (r = this.callbacks).onInterviewEnd) == null || e.call(r), this.notifyChange();
   }
   /**
    * Cleanup
@@ -509,8 +434,8 @@ class ke {
   /**
    * Get duration for a phase
    */
-  getDurationForPhase(t) {
-    switch (t) {
+  getDurationForPhase(r) {
+    switch (r) {
       case "thinking":
         return this.config.thinkingDuration;
       case "answering":
@@ -522,12 +447,12 @@ class ke {
     }
   }
   /**
-   * Start global timer (runs continuously during entire interview)
+   * Start global timer (runs continuously during entire interview for tracking)
    */
   startGlobalTimer() {
     this.globalIntervalId = setInterval(() => {
-      var t, e, a, s;
-      this.state.totalTimeRemaining--, this.state.totalTimeElapsed++, (e = (t = this.callbacks).onTick) == null || e.call(t, this.getState()), this.state.totalTimeRemaining <= 0 && (this.stopGlobalTimer(), this.stopPhaseTimer(), this.state.phase = "completed", (s = (a = this.callbacks).onInterviewEnd) == null || s.call(a), this.notifyChange());
+      var r, e;
+      this.state.totalTimeElapsed++, (e = (r = this.callbacks).onTick) == null || e.call(r, this.getState());
     }, 1e3);
   }
   /**
@@ -554,88 +479,91 @@ class ke {
    * Notify phase change
    */
   notifyChange() {
-    var t, e;
-    (e = (t = this.callbacks).onPhaseChange) == null || e.call(t, this.state.phase, this.getState());
+    var r, e;
+    (e = (r = this.callbacks).onPhaseChange) == null || e.call(r, this.state.phase, this.getState());
   }
 }
-function De(i = {}) {
-  const { config: t = {}, callbacks: e = {} } = i, a = D(null);
-  a.current || (a.current = new ke(t, {}));
-  const s = a.current, [c, n] = y(s.getState()), o = v(() => {
-    n(s.getState());
+function Ge(i = {}) {
+  const { config: r = {}, callbacks: e = {} } = i, o = S(null);
+  o.current || (o.current = new Ue(r, {}));
+  const s = o.current, [c, a] = T(s.getState()), n = A(() => {
+    a(s.getState());
   }, [s]);
-  A(() => {
-    const d = {
-      onPhaseChange: (u, h) => {
-        var x;
-        o(), (x = e.onPhaseChange) == null || x.call(e, u, h);
+  P(() => {
+    const h = {
+      onPhaseChange: (u, g) => {
+        var y;
+        n(), (y = e.onPhaseChange) == null || y.call(e, u, g);
       },
       onTick: (u) => {
-        var h;
-        o(), (h = e.onTick) == null || h.call(e, u);
+        var g;
+        n(), (g = e.onTick) == null || g.call(e, u);
       },
       onInterviewEnd: () => {
         var u;
-        o(), (u = e.onInterviewEnd) == null || u.call(e);
+        n(), (u = e.onInterviewEnd) == null || u.call(e);
       }
     };
-    s.callbacks = d;
-  }, [s, e, o]), A(() => () => {
+    s.callbacks = h;
+  }, [s, e, n]), P(() => () => {
     s.destroy();
   }, [s]);
-  const m = v(() => {
-    s.startQuestion(), o();
-  }, [s, o]), g = v(() => {
-    s.nextPhase(), o();
-  }, [s, o]);
+  const w = A(() => {
+    s.startQuestion(), n();
+  }, [s, n]), m = A(() => {
+    s.nextPhase(), n();
+  }, [s, n]), d = A(() => {
+    s.completeInterview(), n();
+  }, [s, n]);
   return {
     state: c,
-    startQuestion: m,
-    nextPhase: g,
+    startQuestion: w,
+    nextPhase: m,
+    completeInterview: d,
     timerService: s
   };
 }
-function Pe(i, t = {}) {
-  const [e, a] = y({
+function qe(i, r = {}) {
+  const [e, o] = T({
     data: null,
     loading: !1,
     error: null
-  }), s = v(
+  }), s = A(
     async (...c) => {
-      var n, o, m, g;
-      a((d) => ({ ...d, loading: !0, error: null }));
+      var a, n, w, m;
+      o((d) => ({ ...d, loading: !0, error: null }));
       try {
         const d = await i(...c);
-        a((u) => ({
-          ...u,
+        o((h) => ({
+          ...h,
           data: d,
           loading: !1,
           error: null
-        })), (n = t.onSuccess) == null || n.call(t, d), (o = t.onSettled) == null || o.call(t, d, null);
+        })), (a = r.onSuccess) == null || a.call(r, d), (n = r.onSettled) == null || n.call(r, d, null);
       } catch (d) {
-        const u = d.type ? d : {
+        const h = d.type ? d : {
           type: "unknown",
           message: d.message || "Unknown error",
           retryable: !0,
           userMessage: "Something went wrong. Please try again.",
           originalError: d
         };
-        a((h) => ({
-          ...h,
+        o((u) => ({
+          ...u,
           loading: !1,
-          error: u
-        })), (m = t.onError) == null || m.call(t, u), (g = t.onSettled) == null || g.call(t, null, u);
+          error: h
+        })), (w = r.onError) == null || w.call(r, h), (m = r.onSettled) == null || m.call(r, null, h);
       }
     },
-    [i, t]
+    [i, r]
   );
   return {
     ...e,
     execute: s
   };
 }
-function Ae(i) {
-  var t;
+function Be(i) {
+  var r;
   if (!navigator.onLine)
     return {
       type: "network",
@@ -643,7 +571,7 @@ function Ae(i) {
       retryable: !0,
       userMessage: "Please check your internet connection and try again."
     };
-  if (i.name === "AbortError" || (t = i.message) != null && t.includes("timeout"))
+  if (i.name === "AbortError" || (r = i.message) != null && r.includes("timeout"))
     return {
       type: "timeout",
       message: "Request timed out",
@@ -693,122 +621,122 @@ function Ae(i) {
     originalError: i
   };
 }
-async function H(i, t = {}, e = {
+async function ae(i, r = {}, e = {
   attempts: 3,
   backoff: "exponential",
   baseDelay: 1e3,
   maxDelay: 1e4,
   jitter: !0
 }) {
-  let a;
+  let o;
   for (let s = 1; s <= e.attempts; s++)
     try {
-      const c = new AbortController(), n = setTimeout(() => c.abort(), 6e4), o = await fetch(i, {
-        ...t,
+      const c = new AbortController(), a = setTimeout(() => c.abort(), 6e4), n = await fetch(i, {
+        ...r,
         signal: c.signal
       });
-      if (clearTimeout(n), o.status >= 400 && o.status < 500 && o.status !== 429)
-        return o;
-      if (!o.ok)
-        throw new Error(`HTTP ${o.status}: ${o.statusText}`);
-      return o;
+      if (clearTimeout(a), n.status >= 400 && n.status < 500 && n.status !== 429)
+        return n;
+      if (!n.ok)
+        throw new Error(`HTTP ${n.status}: ${n.statusText}`);
+      return n;
     } catch (c) {
-      a = c;
-      const n = Ae(c);
-      if (!n.retryable || s === e.attempts)
-        throw n;
-      const o = Ge(s, e);
+      o = c;
+      const a = Be(c);
+      if (!a.retryable || s === e.attempts)
+        throw a;
+      const n = ze(s, e);
       console.warn(
-        `API request failed (attempt ${s}/${e.attempts}), retrying in ${o}ms:`,
-        n.message
-      ), await new Promise((m) => setTimeout(m, o));
+        `API request failed (attempt ${s}/${e.attempts}), retrying in ${n}ms:`,
+        a.message
+      ), await new Promise((w) => setTimeout(w, n));
     }
-  throw a;
+  throw o;
 }
-function Ge(i, t) {
+function ze(i, r) {
   let e;
-  return t.backoff === "exponential" ? e = t.baseDelay * Math.pow(2, i - 1) : e = t.baseDelay, e = Math.min(e, t.maxDelay), t.jitter && (e = e * (0.5 + Math.random() * 0.5)), Math.round(e);
+  return r.backoff === "exponential" ? e = r.baseDelay * Math.pow(2, i - 1) : e = r.baseDelay, e = Math.min(e, r.maxDelay), r.jitter && (e = e * (0.5 + Math.random() * 0.5)), Math.round(e);
 }
-class Me {
-  constructor(t = {}) {
-    I(this, "config");
-    this.config = t;
+class Qe {
+  constructor(r = {}) {
+    D(this, "config");
+    this.config = r;
   }
   /**
    * Update configuration
    */
-  updateConfig(t) {
-    this.config = { ...this.config, ...t };
+  updateConfig(r) {
+    this.config = { ...this.config, ...r };
   }
   /**
    * Get default headers for API requests
    */
   getHeaders() {
     var e;
-    const t = {
+    const r = {
       "Content-Type": "application/json",
       "X-Auth-Token": "appkey"
     };
-    return (e = this.config) != null && e.authToken && (t.Authorization = `Bearer ${this.config.authToken}`), t;
+    return (e = this.config) != null && e.authToken && (r.Authorization = `Bearer ${this.config.authToken}`), r;
   }
   /**
    * Get base URL from config with fallback
    */
   getBaseUrl() {
-    var t;
-    return ((t = this.config) == null ? void 0 : t.baseUrl) || "/api";
+    var r;
+    return ((r = this.config) == null ? void 0 : r.baseUrl) || "/api";
   }
   /**
    * Get questions for an interview
    */
   async generateQuestion({
-    interviewId: t,
+    interviewId: r,
     isInterviewDone: e = !1,
-    qnaId: a,
+    qnaId: o,
     question: s,
     answer: c,
-    answerDuration: n
+    answerDuration: a
   }) {
-    const o = await H(
-      `${this.getBaseUrl()}/interview/generate-question`,
+    const n = await ae(
+      `${this.getBaseUrl()}/questions/next`,
       {
         method: "POST",
         headers: this.getHeaders(),
         body: JSON.stringify({
-          interview_id: t,
+          interview_id: r,
           is_interview_done: e,
-          qna_id: a,
+          qna_id: o,
           question: s,
           answer: c,
           // TODO: Hardcoded for now, will be dynamic later
-          answer_duration: n ?? "00:00:30"
+          answer_duration: a ?? "00:00:30"
         })
       }
     );
-    if (!o.ok)
-      throw new Error(`Failed to get questions: ${o.status}`);
-    return await o.json();
+    if (!n.ok)
+      throw new Error(`Failed to get questions: ${n.status}`);
+    return await n.json();
   }
 }
-function Oe() {
-  const i = q();
-  return xe(() => {
+function We() {
+  const i = X();
+  return V(() => {
     const e = i.api || {};
-    return new Me(e);
+    return new Qe(e);
   }, [i.api]);
 }
-class b extends Error {
-  constructor(t, e, a = !1) {
-    super(t), this.code = e, this.recoverable = a, this.name = "STTError";
+class v extends Error {
+  constructor(r, e, o = !1) {
+    super(r), this.code = e, this.recoverable = o, this.name = "STTError";
   }
 }
-class $e {
-  constructor(t = {}) {
-    I(this, "config");
-    I(this, "mediaRecorder", null);
-    I(this, "audioChunks", []);
-    I(this, "recordingStream", null);
-    I(this, "autoStopTimeoutId", null);
+class He {
+  constructor(r = {}) {
+    D(this, "config");
+    D(this, "mediaRecorder", null);
+    D(this, "audioChunks", []);
+    D(this, "recordingStream", null);
+    D(this, "autoStopTimeoutId", null);
     this.config = {
       baseUrl: "http://localhost:8000",
       provider: "groq",
@@ -816,14 +744,14 @@ class $e {
       language: "en",
       includeTimestamps: !1,
       temperature: 0,
-      ...t
+      ...r
     };
   }
   /**
    * Update STT configuration
    */
-  updateConfig(t) {
-    this.config = { ...this.config, ...t };
+  updateConfig(r) {
+    this.config = { ...this.config, ...r };
   }
   /**
    * Check if browser supports audio recording
@@ -834,16 +762,16 @@ class $e {
   /**
    * Start recording audio from user's microphone
    */
-  async startRecording(t, e) {
-    var a;
+  async startRecording(r, e) {
+    var o;
     if (!this.isRecordingSupported())
-      throw new b(
+      throw new v(
         "Audio recording is not supported in this browser",
         "RECORDING_NOT_SUPPORTED",
         !1
       );
     if (this.isRecording())
-      throw new b(
+      throw new v(
         "Recording is already in progress",
         "ALREADY_RECORDING",
         !0
@@ -860,34 +788,34 @@ class $e {
       this.mediaRecorder = new MediaRecorder(this.recordingStream, {
         mimeType: s
       }), this.mediaRecorder.ondataavailable = (c) => {
-        var n;
-        c.data.size > 0 && (this.audioChunks.push(c.data), (n = e == null ? void 0 : e.onDataAvailable) == null || n.call(e, c.data));
+        var a;
+        c.data.size > 0 && (this.audioChunks.push(c.data), (a = e == null ? void 0 : e.onDataAvailable) == null || a.call(e, c.data));
       }, this.mediaRecorder.onstop = () => {
         var c;
         (c = e == null ? void 0 : e.onStop) == null || c.call(e);
       }, this.mediaRecorder.onerror = (c) => {
-        var o;
-        const n = new b(
+        var n;
+        const a = new v(
           `Recording failed: ${c.error}`,
           "RECORDING_ERROR",
           !0
         );
-        (o = e == null ? void 0 : e.onError) == null || o.call(e, n), this.cleanup();
-      }, this.mediaRecorder.start(100), (a = e == null ? void 0 : e.onStart) == null || a.call(e), t && t > 0 && (this.autoStopTimeoutId = setTimeout(() => {
+        (n = e == null ? void 0 : e.onError) == null || n.call(e, a), this.cleanup();
+      }, this.mediaRecorder.start(100), (o = e == null ? void 0 : e.onStart) == null || o.call(e), r && r > 0 && (this.autoStopTimeoutId = setTimeout(() => {
         this.isRecording() && this.stopRecording();
-      }, t * 1e3));
+      }, r * 1e3));
     } catch (s) {
       if (this.cleanup(), s instanceof Error) {
         if (s.name === "NotAllowedError" || s.name === "PermissionDeniedError")
-          throw new b(
+          throw new v(
             "Microphone permission was denied",
             "PERMISSION_DENIED",
             !1
           );
         if (s.name === "NotFoundError")
-          throw new b("No microphone found", "NO_MICROPHONE", !1);
+          throw new v("No microphone found", "NO_MICROPHONE", !1);
       }
-      throw new b(
+      throw new v(
         `Failed to start recording: ${s instanceof Error ? s.message : String(s)}`,
         "START_RECORDING_FAILED",
         !0
@@ -899,25 +827,25 @@ class $e {
    */
   async stopRecording() {
     if (this.autoStopTimeoutId && (clearTimeout(this.autoStopTimeoutId), this.autoStopTimeoutId = null), !this.mediaRecorder || !this.isRecording())
-      throw new b(
+      throw new v(
         "No active recording to stop",
         "NO_ACTIVE_RECORDING",
         !1
       );
-    return new Promise((t, e) => {
+    return new Promise((r, e) => {
       if (!this.mediaRecorder) {
         e(
-          new b("MediaRecorder is null", "MEDIARECORDER_NULL", !1)
+          new v("MediaRecorder is null", "MEDIARECORDER_NULL", !1)
         );
         return;
       }
-      const a = this.mediaRecorder, s = () => {
+      const o = this.mediaRecorder, s = () => {
         try {
-          const c = a.mimeType || "audio/webm", n = new Blob(this.audioChunks, { type: c });
-          this.cleanup(), t(n);
+          const c = o.mimeType || "audio/webm", a = new Blob(this.audioChunks, { type: c });
+          this.cleanup(), r(a);
         } catch (c) {
           e(
-            new b(
+            new v(
               `Failed to create audio blob: ${c instanceof Error ? c.message : String(c)}`,
               "BLOB_CREATION_FAILED",
               !1
@@ -925,40 +853,43 @@ class $e {
           );
         }
       };
-      a.addEventListener("stop", s, { once: !0 }), a.stop();
+      o.addEventListener("stop", s, { once: !0 }), o.stop();
     });
   }
   /**
    * Transcribe audio blob using the STT API
    */
-  async transcribe(t) {
+  async transcribe(r) {
     const {
       audioBlob: e,
-      model: a = this.config.model,
+      model: o = this.config.model,
       language: s = this.config.language,
       includeTimestamps: c = this.config.includeTimestamps,
-      temperature: n = this.config.temperature
-    } = t;
+      temperature: a = this.config.temperature
+    } = r;
     if (!e || e.size === 0)
-      throw new b(
+      throw new v(
         "Audio blob is empty or invalid",
         "INVALID_AUDIO",
         !1
       );
     try {
-      const o = new FormData(), m = new File([e], "recording.wav", {
+      const n = new FormData(), w = new File([e], "recording.wav", {
         type: e.type || "audio/wav"
       });
-      o.append("file", m), o.append("model", a || "whisper-large-v3-turbo"), o.append("language", s || "en"), o.append("include_timestamps", String(c || !1)), o.append("temperature", String(n || 0));
-      const g = await H(
+      n.append("file", w), n.append("model", o || "whisper-large-v3-turbo"), n.append("language", s || "en"), n.append("include_timestamps", String(c || !1)), n.append("temperature", String(a || 0));
+      const m = await ae(
         `${this.config.baseUrl}/speech/transcribe`,
         {
           method: "POST",
           headers: {
             accept: "application/json",
-            "X-STT-Provider": this.config.provider || "groq"
+            "X-STT-Provider": this.config.provider || "groq",
+            ...this.config.authToken && {
+              Authorization: `Bearer ${this.config.authToken}`
+            }
           },
-          body: o
+          body: n
         },
         {
           attempts: 1,
@@ -968,27 +899,27 @@ class $e {
           jitter: !0
         }
       );
-      if (!g.ok) {
-        const u = await g.text();
-        let h = `STT request failed: ${g.status} ${g.statusText}`;
+      if (!m.ok) {
+        const h = await m.text();
+        let u = `STT request failed: ${m.status} ${m.statusText}`;
         try {
-          const x = JSON.parse(u);
-          h = x.message || x.error || h;
+          const g = JSON.parse(h);
+          u = g.message || g.error || u;
         } catch {
-          h = u || h;
+          u = h || u;
         }
-        throw new b(
-          h,
-          `HTTP_${g.status}`,
-          g.status >= 500
+        throw new v(
+          u,
+          `HTTP_${m.status}`,
+          m.status >= 500
         );
       }
       return {
-        transcript: (await g.json()).data.text ?? ""
+        transcript: (await m.json()).data.text ?? ""
       };
-    } catch (o) {
-      throw o instanceof b ? o : new b(
-        `Transcription failed: ${o instanceof Error ? o.message : String(o)}`,
+    } catch (n) {
+      throw n instanceof v ? n : new v(
+        `Transcription failed: ${n instanceof Error ? n.message : String(n)}`,
         "TRANSCRIPTION_FAILED",
         !0
       );
@@ -1010,14 +941,14 @@ class $e {
    * Get supported MIME type for recording
    */
   getSupportedMimeType() {
-    const t = [
+    const r = [
       "audio/webm",
       "audio/webm;codecs=opus",
       "audio/ogg;codecs=opus",
       "audio/mp4",
       "audio/wav"
     ];
-    for (const e of t)
+    for (const e of r)
       if (MediaRecorder.isTypeSupported(e))
         return e;
     return "audio/webm";
@@ -1026,122 +957,125 @@ class $e {
    * Clean up recording resources
    */
   cleanup() {
-    this.recordingStream && (this.recordingStream.getTracks().forEach((t) => t.stop()), this.recordingStream = null), this.mediaRecorder = null, this.audioChunks = [], this.autoStopTimeoutId && (clearTimeout(this.autoStopTimeoutId), this.autoStopTimeoutId = null);
+    this.recordingStream && (this.recordingStream.getTracks().forEach((r) => r.stop()), this.recordingStream = null), this.mediaRecorder = null, this.audioChunks = [], this.autoStopTimeoutId && (clearTimeout(this.autoStopTimeoutId), this.autoStopTimeoutId = null);
   }
 }
-const O = new $e(), _e = (i = {}) => {
-  const [t, e] = y(!1), [a, s] = y(!1), [c, n] = y(null), [o, m] = y(null), [g, d] = y(null);
-  i.config && O.updateConfig(i.config);
-  const u = v(async (j) => {
-    var N;
+const Q = new He(), Ye = (i = {}) => {
+  const [r, e] = T(!1), [o, s] = T(!1), [c, a] = T(null), [n, w] = T(null), [m, d] = T(null);
+  i.config && Q.updateConfig(i.config);
+  const h = A(async (k) => {
+    var j;
     try {
-      m(null), n(null), d(null), await O.startRecording(j, {
+      w(null), a(null), d(null), await Q.startRecording(k, {
         onStart: () => {
-          var w;
-          e(!0), (w = i.onStart) == null || w.call(i);
+          var l;
+          e(!0), (l = i.onStart) == null || l.call(i);
         },
         onStop: () => {
-          var w;
-          e(!1), (w = i.onStop) == null || w.call(i);
+          var l;
+          e(!1), (l = i.onStop) == null || l.call(i);
         },
-        onError: (w) => {
-          var T;
-          const p = w instanceof b ? w : new b(w.message, "RECORDING_ERROR", !0);
-          m(p), e(!1), (T = i.onError) == null || T.call(i, p);
+        onError: (l) => {
+          var I;
+          const p = l instanceof v ? l : new v(l.message, "RECORDING_ERROR", !0);
+          w(p), e(!1), (I = i.onError) == null || I.call(i, p);
         }
       });
-    } catch (w) {
-      const p = w instanceof b ? w : new b(
-        w instanceof Error ? w.message : String(w),
+    } catch (l) {
+      const p = l instanceof v ? l : new v(
+        l instanceof Error ? l.message : String(l),
         "START_FAILED",
         !1
       );
-      throw m(p), e(!1), (N = i.onError) == null || N.call(i, p), p;
+      throw w(p), e(!1), (j = i.onError) == null || j.call(i, p), p;
     }
-  }, []), h = v(async () => {
-    var j, N;
+  }, []), u = A(async () => {
+    var k, j;
     try {
-      const w = await O.stopRecording();
-      return d(w), e(!1), (j = i.onStop) == null || j.call(i), w;
-    } catch (w) {
-      const p = w instanceof b ? w : new b(
-        w instanceof Error ? w.message : String(w),
+      const l = await Q.stopRecording();
+      return d(l), e(!1), (k = i.onStop) == null || k.call(i), l;
+    } catch (l) {
+      const p = l instanceof v ? l : new v(
+        l instanceof Error ? l.message : String(l),
         "STOP_FAILED",
         !1
       );
-      throw m(p), e(!1), (N = i.onError) == null || N.call(i, p), p;
+      throw w(p), e(!1), (j = i.onError) == null || j.call(i, p), p;
     }
-  }, []), x = v(
-    async (j, N = {}) => {
-      var w, p;
+  }, []), g = A(
+    async (k, j = {}) => {
+      var l, p;
       try {
-        m(null), s(!0);
-        const T = {
-          audioBlob: j,
-          ...N
-        }, S = await O.transcribe(T);
-        return n(S.transcript), s(!1), (w = i.onTranscriptionComplete) == null || w.call(i, S), S;
-      } catch (T) {
-        const S = T instanceof b ? T : new b(
-          T instanceof Error ? T.message : String(T),
+        w(null), s(!0);
+        const I = {
+          audioBlob: k,
+          ...j
+        }, b = await Q.transcribe(I);
+        return a(b.transcript), s(!1), (l = i.onTranscriptionComplete) == null || l.call(i, b), b;
+      } catch (I) {
+        const b = I instanceof v ? I : new v(
+          I instanceof Error ? I.message : String(I),
           "TRANSCRIPTION_FAILED",
           !0
         );
-        throw m(S), s(!1), (p = i.onError) == null || p.call(i, S), S;
+        throw w(b), s(!1), (p = i.onError) == null || p.call(i, b), b;
       }
     },
     []
-  ), k = v(() => {
-    O.cancelRecording(), e(!1), d(null);
+  ), y = A(() => {
+    Q.cancelRecording(), e(!1), d(null);
   }, []);
   return {
-    startRecording: u,
-    stopRecording: h,
-    transcribe: x,
-    cancelRecording: k,
-    isRecording: t,
-    isTranscribing: a,
+    startRecording: h,
+    stopRecording: u,
+    transcribe: g,
+    cancelRecording: y,
+    isRecording: r,
+    isTranscribing: o,
     transcript: c,
-    error: o,
-    audioBlob: g
+    error: n,
+    audioBlob: m
   };
 };
-class Le {
-  constructor(t = {}) {
-    I(this, "config");
-    I(this, "currentAudio", null);
+class Ve {
+  constructor(r = {}) {
+    D(this, "config");
+    D(this, "currentAudio", null);
     this.config = {
       baseUrl: "http://localhost:8000",
       provider: "piper",
       voice: "string",
       speed: 1,
-      ...t
+      ...r
     };
   }
   /**
    * Update TTS configuration
    */
-  updateConfig(t) {
-    this.config = { ...this.config, ...t };
+  updateConfig(r) {
+    this.config = { ...this.config, ...r };
   }
   /**
    * Get TTS audio from the API and return as blob
    */
-  async synthesizeSpeech(t) {
+  async synthesizeSpeech(r) {
     const {
       text: e,
-      voice: a = this.config.voice,
+      voice: o = this.config.voice,
       speed: s = this.config.speed
-    } = t, c = new URLSearchParams();
-    c.append("text", e), c.append("voice", a || "string"), c.append("speed", (s == null ? void 0 : s.toString()) || "1");
-    const n = await H(
+    } = r, c = new URLSearchParams();
+    c.append("text", e), c.append("voice", o || "string"), c.append("speed", (s == null ? void 0 : s.toString()) || "1");
+    const a = await ae(
       `${this.config.baseUrl}/speech/synthesize`,
       {
         method: "POST",
         headers: {
           accept: "application/json",
           "X-TTS-Provider": this.config.provider || "piper",
-          "Content-Type": "application/x-www-form-urlencoded"
+          "Content-Type": "application/x-www-form-urlencoded",
+          ...this.config.authToken && {
+            Authorization: `Bearer ${this.config.authToken}`
+          }
         },
         body: c
       },
@@ -1153,16 +1087,16 @@ class Le {
         jitter: !1
       }
     );
-    if (!n.ok)
+    if (!a.ok)
       throw new Error(
-        `TTS request failed: ${n.status} ${n.statusText}`
+        `TTS request failed: ${a.status} ${a.statusText}`
       );
-    const o = n.headers.get("content-type");
-    if (o && o.includes("audio/"))
-      return n.blob();
+    const n = a.headers.get("content-type");
+    if (n && n.includes("audio/"))
+      return a.blob();
     try {
-      const m = await n.json();
-      throw new Error(`TTS Error: ${JSON.stringify(m)}`);
+      const w = await a.json();
+      throw new Error(`TTS Error: ${JSON.stringify(w)}`);
     } catch {
       throw new Error("TTS request failed with unknown error");
     }
@@ -1170,35 +1104,35 @@ class Le {
   /**
    * Speak text and return a promise that resolves when playback completes
    */
-  async speak(t, e) {
-    var a, s;
+  async speak(r, e) {
+    var o, s;
     try {
-      this.stop(), (a = e == null ? void 0 : e.onStart) == null || a.call(e);
-      const c = await this.synthesizeSpeech(t), n = URL.createObjectURL(c);
-      return this.currentAudio = new Audio(n), new Promise((o, m) => {
+      this.stop(), (o = e == null ? void 0 : e.onStart) == null || o.call(e);
+      const c = await this.synthesizeSpeech(r), a = URL.createObjectURL(c);
+      return this.currentAudio = new Audio(a), new Promise((n, w) => {
         if (!this.currentAudio) {
-          m(new Error("Audio element not created"));
+          w(new Error("Audio element not created"));
           return;
         }
-        const g = this.currentAudio;
-        g.onended = () => {
+        const m = this.currentAudio;
+        m.onended = () => {
           var d;
-          URL.revokeObjectURL(n), this.currentAudio = null, (d = e == null ? void 0 : e.onEnd) == null || d.call(e), o();
-        }, g.onerror = (d) => {
-          var h;
-          URL.revokeObjectURL(n), this.currentAudio = null;
-          const u = new Error(`Audio playback failed: ${d}`);
-          (h = e == null ? void 0 : e.onError) == null || h.call(e, u), m(u);
-        }, g.play().catch((d) => {
-          var h;
-          URL.revokeObjectURL(n), this.currentAudio = null;
-          const u = new Error(`Failed to play audio: ${d.message}`);
-          (h = e == null ? void 0 : e.onError) == null || h.call(e, u), m(u);
+          URL.revokeObjectURL(a), this.currentAudio = null, (d = e == null ? void 0 : e.onEnd) == null || d.call(e), n();
+        }, m.onerror = (d) => {
+          var u;
+          URL.revokeObjectURL(a), this.currentAudio = null;
+          const h = new Error(`Audio playback failed: ${d}`);
+          (u = e == null ? void 0 : e.onError) == null || u.call(e, h), w(h);
+        }, m.play().catch((d) => {
+          var u;
+          URL.revokeObjectURL(a), this.currentAudio = null;
+          const h = new Error(`Failed to play audio: ${d.message}`);
+          (u = e == null ? void 0 : e.onError) == null || u.call(e, h), w(h);
         });
       });
     } catch (c) {
-      const n = c instanceof Error ? c : new Error(`TTS Error: ${String(c)}`);
-      throw (s = e == null ? void 0 : e.onError) == null || s.call(e, n), n;
+      const a = c instanceof Error ? c : new Error(`TTS Error: ${String(c)}`);
+      throw (s = e == null ? void 0 : e.onError) == null || s.call(e, a), a;
     }
   }
   /**
@@ -1214,661 +1148,1153 @@ class Le {
     return this.currentAudio !== null && !this.currentAudio.paused;
   }
 }
-const B = new Le(), Ue = (i = {}) => {
-  const [t, e] = y(!1), [a, s] = y(!1), [c, n] = y(null);
-  i.config && B.updateConfig(i.config);
-  const o = v(
-    async (g, d = {}) => {
-      var u;
+const ie = new Ve(), Je = (i = {}) => {
+  const [r, e] = T(!1), [o, s] = T(!1), [c, a] = T(null);
+  i.config && ie.updateConfig(i.config);
+  const n = A(
+    async (m, d = {}) => {
+      var h;
       try {
-        n(null), s(!0);
-        const h = {
-          text: g,
+        a(null), s(!0);
+        const u = {
+          text: m,
           ...d
         };
-        await B.speak(h, {
+        await ie.speak(u, {
           onStart: () => {
-            var x;
-            s(!1), e(!0), (x = i.onStart) == null || x.call(i);
+            var g;
+            s(!1), e(!0), (g = i.onStart) == null || g.call(i);
           },
           onEnd: () => {
-            var x;
-            e(!1), (x = i.onEnd) == null || x.call(i);
+            var g;
+            e(!1), (g = i.onEnd) == null || g.call(i);
           },
-          onError: (x) => {
-            var k;
-            e(!1), s(!1), n(x), (k = i.onError) == null || k.call(i, x);
+          onError: (g) => {
+            var y;
+            e(!1), s(!1), a(g), (y = i.onError) == null || y.call(i, g);
           }
         });
-      } catch (h) {
-        const x = h instanceof Error ? h : new Error(String(h));
-        throw n(x), e(!1), s(!1), (u = i.onError) == null || u.call(i, x), x;
+      } catch (u) {
+        const g = u instanceof Error ? u : new Error(String(u));
+        throw a(g), e(!1), s(!1), (h = i.onError) == null || h.call(i, g), g;
       }
     },
     [i]
-  ), m = v(() => {
-    B.stop(), e(!1), s(!1);
+  ), w = A(() => {
+    ie.stop(), e(!1), s(!1);
   }, []);
   return {
-    speak: o,
-    stop: m,
-    isPlaying: t,
-    isLoading: a,
+    speak: n,
+    stop: w,
+    isPlaying: r,
+    isLoading: o,
     error: c
   };
-};
-function qe(i) {
-  const t = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(i);
-  return t ? {
-    r: parseInt(t[1], 16),
-    g: parseInt(t[2], 16),
-    b: parseInt(t[3], 16)
-  } : null;
-}
-function Fe(i, t, e) {
-  return "#" + [i, t, e].map((a) => {
-    const s = Math.round(a).toString(16);
-    return s.length === 1 ? "0" + s : s;
-  }).join("");
-}
-function V(i, t) {
-  const e = qe(i);
-  if (!e) return i;
-  const a = e.r + (255 - e.r) * t, s = e.g + (255 - e.g) * t, c = e.b + (255 - e.b) * t;
-  return Fe(a, s, c);
-}
-function Qe(i, t = 0.8) {
-  const e = V(i, t), a = V(i, 0.7);
-  return {
-    background: `linear-gradient(to bottom, ${e}, #ffffff)`,
-    border: `1px solid ${a}`,
-    color: "#1f2937"
-  };
-}
-function Be(i) {
-  return new Promise((t) => setTimeout(t, i));
-}
-const He = ({
-  state: i,
-  className: t = "",
-  defaultTimers: e = { thinking: 30, answering: 120, editing: 30 }
-}) => {
-  const a = (d) => {
-    const u = Math.floor(d / 60), h = d % 60;
-    return `${u.toString().padStart(2, "0")}:${h.toString().padStart(2, "0")}`;
-  }, s = (d) => ({
-    [l.IDLE]: "Ready",
-    [l.FETCHING_QUESTION]: "Loading Question...",
-    [l.READING_QUESTION]: "Reading Question...",
-    [l.THINKING]: "Preparation Time",
-    [l.ANSWERING]: "Recording Answer",
-    [l.TRANSCRIBING]: "Processing Speech...",
-    [l.EDITING]: "Edit Your Answer",
-    [l.SUBMITTING]: "Submitting...",
-    [l.COMPLETED]: "Interview Complete"
-  })[d] || d, c = (d) => ({
-    [l.IDLE]: "iw-bg-gray-500",
-    [l.FETCHING_QUESTION]: "iw-bg-blue-500",
-    [l.READING_QUESTION]: "iw-bg-indigo-500",
-    [l.THINKING]: "iw-bg-yellow-500",
-    [l.ANSWERING]: "iw-bg-red-500",
-    [l.TRANSCRIBING]: "iw-bg-purple-500",
-    [l.EDITING]: "iw-bg-orange-500",
-    [l.SUBMITTING]: "iw-bg-green-500",
-    [l.COMPLETED]: "iw-bg-green-600"
-  })[d] || "iw-bg-gray-500", n = (d) => ({
-    [l.IDLE]: "iw-bg-gray-100 iw-text-gray-800",
-    [l.FETCHING_QUESTION]: "iw-bg-blue-100 iw-text-blue-800",
-    [l.READING_QUESTION]: "iw-bg-indigo-100 iw-text-indigo-800",
-    [l.THINKING]: "iw-bg-yellow-100 iw-text-yellow-800",
-    [l.ANSWERING]: "iw-bg-red-100 iw-text-red-800",
-    [l.TRANSCRIBING]: "iw-bg-purple-100 iw-text-purple-800",
-    [l.EDITING]: "iw-bg-orange-100 iw-text-orange-800",
-    [l.SUBMITTING]: "iw-bg-green-100 iw-text-green-800",
-    [l.COMPLETED]: "iw-bg-green-200 iw-text-green-900"
-  })[d] || "iw-bg-gray-100 iw-text-gray-800", o = (d) => ({
-    [l.IDLE]: "Ready to start next question.",
-    [l.FETCHING_QUESTION]: "Please wait while we load the next question...",
-    [l.READING_QUESTION]: "Listening to the question...",
-    [l.THINKING]: "Take time to think about your answer.",
-    [l.ANSWERING]: "Speak clearly into your microphone.",
-    [l.TRANSCRIBING]: "Converting your speech to text...",
-    [l.EDITING]: "Review and edit your answer.",
-    [l.SUBMITTING]: "Submitting your answer...",
-    [l.COMPLETED]: "Thank you for completing the interview!"
-  })[d] || "";
-  function m(d) {
-    return {
-      [l.THINKING]: e.thinking || 30,
-      [l.ANSWERING]: e.answering || 120,
-      [l.EDITING]: e.editing || 30
-    }[d] || 1;
+}, Xe = ({ className: i = "" }) => {
+  const r = S(null);
+  return P(() => {
+    let e = null;
+    return (async () => {
+      try {
+        e = await navigator.mediaDevices.getUserMedia({
+          video: !0,
+          audio: !1
+        }), r.current && (r.current.srcObject = e);
+      } catch (s) {
+        console.error("Error accessing camera:", s);
+      }
+    })(), () => {
+      e && e.getTracks().forEach((s) => s.stop());
+    };
+  }, []), /* @__PURE__ */ t.jsx("div", { className: `iw-relative ${i}`, children: /* @__PURE__ */ t.jsx(
+    "video",
+    {
+      ref: r,
+      autoPlay: !0,
+      playsInline: !0,
+      muted: !0,
+      className: "iw-w-full iw-h-full iw-object-cover iw-scale-75 iw-rounded-md iw-min-h-[400px] iw-max-h-[600px] iw-aspect-video",
+      style: {
+        transform: "scaleX(-1)"
+      }
+    }
+  ) });
+}, Z = (i) => {
+  const { baseColor: r, borderRadius: e } = W(), { loading: o, children: s, ...c } = i;
+  return /* @__PURE__ */ t.jsx(
+    se,
+    {
+      style: {
+        background: ge(r),
+        borderRadius: e
+      },
+      ...c,
+      children: o ? /* @__PURE__ */ t.jsx(he, {}) : s
+    }
+  );
+}, ne = (i) => /* @__PURE__ */ t.jsxs(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    ...i,
+    children: [
+      /* @__PURE__ */ t.jsx("path", { d: "M12 2a10 10 0 0 1 7.38 16.75" }),
+      /* @__PURE__ */ t.jsx("path", { d: "M12 6v6l4 2" }),
+      /* @__PURE__ */ t.jsx("path", { d: "M2.5 8.875a10 10 0 0 0-.5 3" }),
+      /* @__PURE__ */ t.jsx("path", { d: "M2.83 16a10 10 0 0 0 2.43 3.4" }),
+      /* @__PURE__ */ t.jsx("path", { d: "M4.636 5.235a10 10 0 0 1 .891-.857" }),
+      /* @__PURE__ */ t.jsx("path", { d: "M8.644 21.42a10 10 0 0 0 7.631-.38" })
+    ]
   }
-  const g = i.currentPhaseTimeRemaining > 0;
-  return /* @__PURE__ */ r.jsxs(
+), Ze = (i, r, e) => Math.max(r, Math.min(e, i)), le = (i) => {
+  const r = Math.max(0, Math.floor(i)), e = Math.floor(r / 60).toString().padStart(2, "0"), o = (r % 60).toString().padStart(2, "0");
+  return `${e}:${o}`;
+}, oe = ({
+  total: i,
+  remaining: r,
+  size: e = 64,
+  strokeWidth: o = 6,
+  className: s = "",
+  showLabel: c = !0
+}) => {
+  const a = Math.max(1, i || 1), n = Ze(r / a, 0, 1), { radius: w, circumference: m, dashOffset: d, center: h } = V(() => {
+    const y = (e - o) / 2, k = 2 * Math.PI * y, j = k * (1 - n), l = Math.round(o) % 2 === 1, p = e / 2 + (l ? 0.5 : 0);
+    return { radius: y, circumference: k, dashOffset: j, center: p };
+  }, [e, o, n]), u = V(() => n <= 0.25 ? "iw-stroke-red-500" : n <= 0.5 ? "iw-stroke-yellow-500" : "iw-stroke-green-500", [n]), g = n <= 0.25 ? "iw-animate-pulse" : "";
+  return /* @__PURE__ */ t.jsxs(
     "div",
     {
-      className: `iw-iw-bg-white iw-rounded-lg iw-shadow-md iw-p-4 iw-border iw-border-gray-200 ${t}`,
+      className: `iw-relative iw-inline-flex iw-items-center iw-justify-center iw-rounded-full iw-bg-white ${s}`,
+      style: { width: e, height: e },
+      "aria-label": `Time remaining ${le(r)}`,
+      role: "timer",
+      "aria-live": "polite",
       children: [
-        /* @__PURE__ */ r.jsxs("div", { className: "iw-flex iw-justify-between iw-items-center iw-mb-4", children: [
-          /* @__PURE__ */ r.jsxs("div", { children: [
-            /* @__PURE__ */ r.jsx("h3", { className: "iw-text-sm iw-font-semibold iw-text-gray-700", children: "Interview Timer" }),
-            /* @__PURE__ */ r.jsxs("p", { className: "iw-text-xs iw-text-gray-700 iw-my-3 iw-font-mono", children: [
-              "Phase",
-              " ",
-              /* @__PURE__ */ r.jsx(
-                "span",
+        /* @__PURE__ */ t.jsx(
+          "svg",
+          {
+            width: e,
+            height: e,
+            viewBox: `0 0 ${e} ${e}`,
+            preserveAspectRatio: "xMidYMid meet",
+            children: /* @__PURE__ */ t.jsxs("g", { transform: `rotate(-90 ${h} ${h})`, children: [
+              /* @__PURE__ */ t.jsx(
+                "circle",
                 {
-                  className: `iw-px-3 iw-py-1.5 iw-rounded-md iw-font-medium  ${n(
-                    i.phase
-                  )}`,
-                  children: i.phase
+                  cx: h,
+                  cy: h,
+                  r: w,
+                  className: "iw-stroke-gray-200",
+                  strokeWidth: o,
+                  fill: "none",
+                  shapeRendering: "geometricPrecision",
+                  vectorEffect: "non-scaling-stroke"
+                }
+              ),
+              /* @__PURE__ */ t.jsx(
+                "circle",
+                {
+                  cx: h,
+                  cy: h,
+                  r: w,
+                  className: `${u} ${g}`,
+                  strokeWidth: o,
+                  strokeLinecap: "round",
+                  fill: "none",
+                  strokeDasharray: m,
+                  strokeDashoffset: d,
+                  shapeRendering: "geometricPrecision",
+                  vectorEffect: "non-scaling-stroke",
+                  style: {
+                    transition: "stroke-dashoffset 0.3s ease, stroke 0.2s ease"
+                  }
                 }
               )
-            ] }),
-            /* @__PURE__ */ r.jsxs("p", { className: "iw-text-xs iw-text-gray-700 iw-font-mono", children: [
-              "Question ",
-              i.currentQuestionNumber
             ] })
-          ] }),
-          /* @__PURE__ */ r.jsxs("div", { className: "iw-text-right", children: [
-            /* @__PURE__ */ r.jsx("div", { className: "iw-text-2xl iw-font-bold iw-text-gray-900", children: a(i.totalTimeRemaining) }),
-            /* @__PURE__ */ r.jsx("div", { className: "iw-text-xs iw-text-gray-500", children: "Total Time Left" })
-          ] })
-        ] }),
-        /* @__PURE__ */ r.jsx("div", { className: "iw-mb-4", children: /* @__PURE__ */ r.jsx("div", { className: "iw-w-full iw-h-2 iw-iw-bg-gray-200 iw-rounded-full iw-overflow-hidden", children: /* @__PURE__ */ r.jsx(
-          "div",
+          }
+        ),
+        c && /* @__PURE__ */ t.jsx("div", { className: "iw-absolute iw-inset-0 iw-flex iw-items-center iw-justify-center iw-rotate-0", children: /* @__PURE__ */ t.jsx(
+          "span",
           {
-            className: "iw-h-full iw-iw-bg-gradient-to-r iw-from-blue-500 iw-to-purple-500 iw-transition-all iw-duration-300",
-            style: {
-              width: `${i.totalTimeElapsed / (i.totalTimeElapsed + i.totalTimeRemaining) * 100}%`
-            }
+            className: `iw-text-[11px] iw-font-semibold iw-tabular-nums ${n <= 0.25 ? "iw-text-red-600" : n <= 0.5 ? "iw-text-yellow-600" : "iw-text-green-600"}`,
+            children: le(r)
           }
-        ) }) }),
-        /* @__PURE__ */ r.jsxs("div", { className: "iw-mb-4", children: [
-          /* @__PURE__ */ r.jsxs("div", { className: "iw-flex iw-items-center iw-justify-between iw-mb-2", children: [
-            /* @__PURE__ */ r.jsxs("div", { className: "iw-flex iw-items-center iw-space-x-2", children: [
-              /* @__PURE__ */ r.jsx(
-                "div",
-                {
-                  className: `iw-w-3 iw-h-3 iw-rounded-full ${c(
-                    i.phase
-                  )} ${g ? "iw-animate-pulse" : ""}`
-                }
-              ),
-              /* @__PURE__ */ r.jsx("span", { className: "iw-text-sm iw-font-medium iw-text-gray-700", children: s(i.phase) })
-            ] }),
-            g && /* @__PURE__ */ r.jsx("span", { className: "iw-text-lg iw-font-bold iw-text-gray-900", children: a(i.currentPhaseTimeRemaining) })
-          ] }),
-          g && /* @__PURE__ */ r.jsx("div", { className: "iw-w-full iw-h-1.5 iw-iw-bg-gray-200 iw-rounded-full iw-overflow-hidden", children: /* @__PURE__ */ r.jsx(
-            "div",
-            {
-              className: `iw-h-full ${c(
-                i.phase
-              )} iw-transition-all iw-duration-300`,
-              style: {
-                width: `${i.currentPhaseTimeRemaining / m(i.phase) * 100}%`
-              }
-            }
-          ) })
-        ] }),
-        /* @__PURE__ */ r.jsx("div", { className: "iw-mt-3 iw-pt-3 iw-border-t iw-border-gray-200", children: /* @__PURE__ */ r.jsx("p", { className: "iw-text-xs iw-text-gray-600", children: o(i.phase) }) })
+        ) })
       ]
     }
   );
-}, We = ({
+}, Ke = ({
   label: i,
-  error: t,
+  error: r,
   fullWidth: e = !1,
-  className: a = "",
+  className: o = "",
   id: s,
   ...c
 }) => {
-  const n = s || `textarea-${Math.random().toString(36).substring(2, 9)}`, o = "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 = t ? "iw-border-red-500 iw-focus:border-red-500 iw-focus:ring-red-500" : "", g = e ? "iw-w-full" : "", d = a.includes("iw-h-full") ? "iw-h-full" : "";
-  return /* @__PURE__ */ r.jsxs(
+  const a = s || `textarea-${Math.random().toString(36).substring(2, 9)}`, n = "iw-block iw-rounded-md iw-border iw-border-gray-300 iw-shadow-sm iw-px-4 iw-py-2 iw-text-sm  iw-transition-all", w = r ? "iw-border-red-500 iw-focus:border-red-500 iw-focus:ring-red-500" : "", m = e ? "iw-w-full" : "", d = o.includes("iw-h-full") || e ? "iw-h-full" : "";
+  return /* @__PURE__ */ t.jsxs(
     "div",
     {
-      className: `${e ? "iw-w-full iw-h-full" : ""} ${d ? "iw-flex iw-flex-col" : ""}`,
+      className: `iw-h-full iw-flex iw-flex-col ${e ? "iw-w-full" : ""}`,
       children: [
-        i && /* @__PURE__ */ r.jsx(
+        i && /* @__PURE__ */ t.jsx(
           "label",
           {
-            htmlFor: n,
+            htmlFor: a,
             className: "iw-block iw-text-sm iw-font-medium iw-text-gray-700 iw-mb-1",
             children: i
           }
         ),
-        /* @__PURE__ */ r.jsx(
+        /* @__PURE__ */ t.jsx(
           "textarea",
           {
-            id: n,
-            className: `${o} ${m} ${g} ${d} ${a}`,
-            "aria-invalid": t ? "true" : "false",
+            id: a,
+            className: `${n} ${w} ${m} ${d} ${o}`,
+            "aria-invalid": r ? "true" : "false",
             ...c
           }
         ),
-        t && /* @__PURE__ */ r.jsx("p", { className: "iw-mt-1 iw-text-sm iw-text-red-600", children: t })
+        r && /* @__PURE__ */ t.jsx("p", { className: "iw-mt-1 iw-text-sm iw-text-red-600", children: r })
       ]
     }
   );
-}, ze = ({
+}, et = ({
   value: i,
-  onChange: t,
+  onChange: r,
   onSubmit: e,
-  isSubmitDisabled: a,
-  remainingTimeText: s
+  isSubmitDisabled: o,
+  state: s,
+  editingTime: c
 }) => {
-  const c = (n) => {
-    n.key === "Enter" && (n.ctrlKey || n.metaKey) && !a && (n.preventDefault(), e());
+  const a = (n) => {
+    n.key === "Enter" && (n.ctrlKey || n.metaKey) && !o && (n.preventDefault(), e());
   };
-  return /* @__PURE__ */ r.jsx("div", { className: "iw-mt-auto", children: /* @__PURE__ */ r.jsxs("div", { className: "iw-rounded-xl iw-overflow-hidden iw-border iw-border-gray-200", children: [
-    /* @__PURE__ */ r.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: [
-      /* @__PURE__ */ r.jsx("div", { className: "iw-text-sm iw-font-medium", children: "Your answer" }),
-      s && /* @__PURE__ */ r.jsx("div", { className: "iw-text-xs iw-text-gray-500", children: s })
+  return /* @__PURE__ */ t.jsxs("div", { className: "iw-flex iw-flex-col iw-h-full ", children: [
+    /* @__PURE__ */ t.jsxs("div", { className: "iw-flex iw-items-center iw-justify-between", children: [
+      /* @__PURE__ */ t.jsx("h3", { className: "iw-text-lg iw-font-semibold iw-text-gray-900 iw-mb-1", children: "Your Answer" }),
+      /* @__PURE__ */ t.jsxs("div", { className: "iw-flex iw-items-center iw-justify-center iw-gap-2", children: [
+        /* @__PURE__ */ t.jsxs("div", { className: "iw-flex iw-items-center iw-gap-1", children: [
+          /* @__PURE__ */ t.jsx(ne, { className: "iw-size-4 iw-text-orange-600" }),
+          /* @__PURE__ */ t.jsx("p", { className: "iw-text-gray-700 iw-text-sm", children: "Time to edit: " })
+        ] }),
+        /* @__PURE__ */ t.jsx(
+          oe,
+          {
+            total: c,
+            remaining: s.currentPhaseTimeRemaining,
+            size: 50,
+            strokeWidth: 4
+          }
+        )
+      ] })
     ] }),
-    /* @__PURE__ */ r.jsx(
-      We,
+    /* @__PURE__ */ t.jsxs("div", { className: " iw-overflow-hidden  iw-flex iw-flex-col iw-h-full iw-mt-2", children: [
+      /* @__PURE__ */ t.jsx(
+        Ke,
+        {
+          value: i,
+          onChange: r,
+          onKeyDown: a,
+          placeholder: "Type your answer here...",
+          className: " iw-w-full iw-h-full iw-flex-1 iw-resize-none !iw-p-4 iw-bg-transparent iw-min-h-full  focus-visible:iw-outline-0",
+          onPaste: (n) => n.preventDefault(),
+          onCopy: (n) => n.preventDefault(),
+          onCut: (n) => n.preventDefault(),
+          onDrop: (n) => n.preventDefault(),
+          onDragOver: (n) => n.preventDefault()
+        }
+      ),
+      /* @__PURE__ */ t.jsx("div", { className: "iw-w-full iw-grid iw-grid-cols-1 iw-mt-4", children: /* @__PURE__ */ t.jsx(Z, { onClick: e, disabled: o, children: "Submit Answer" }) })
+    ] })
+  ] });
+}, tt = ({
+  className: i = "",
+  width: r,
+  height: e = 56,
+  barWidth: o = 3,
+  gap: s = 2,
+  fftSize: c = 1024,
+  smoothingTimeConstant: a = 0.8,
+  mediaStream: n,
+  startOnMount: w = !0
+}) => {
+  const { baseColor: m } = W(), d = S(null), h = S(null), u = S(null), g = S(null), y = S(null), k = S(null), j = S(!1), [l, p] = T(null);
+  P(() => {
+    if (r || !h.current) return;
+    const b = h.current, _ = () => {
+      const N = d.current;
+      if (!N) return;
+      const C = b.clientWidth, M = e;
+      N.width = Math.max(1, Math.floor(C * window.devicePixelRatio || 1)), N.height = Math.max(1, Math.floor(M * window.devicePixelRatio || 1));
+    }, x = new ResizeObserver(_);
+    return x.observe(b), _(), () => x.disconnect();
+  }, [r, e]), P(() => {
+    if (!r) return;
+    const b = d.current;
+    b && (b.width = Math.max(
+      1,
+      Math.floor(r * (window.devicePixelRatio || 1))
+    ), b.height = Math.max(
+      1,
+      Math.floor(e * (window.devicePixelRatio || 1))
+    ));
+  }, [r, e]), P(() => {
+    let b = !1;
+    return (async () => {
+      try {
+        const x = new (window.AudioContext || window.webkitAudioContext)();
+        u.current = x;
+        let N = n;
+        if (!N) {
+          if (!w) return;
+          N = await navigator.mediaDevices.getUserMedia({
+            audio: !0,
+            video: !1
+          }), j.current = !0;
+        }
+        if (b) return;
+        const C = x.createAnalyser();
+        C.fftSize = c, C.smoothingTimeConstant = a, g.current = C;
+        const M = x.createMediaStreamSource(N);
+        y.current = M, M.connect(C), I();
+      } catch (x) {
+        p((x == null ? void 0 : x.message) || "Failed to initialize microphone");
+      }
+    })(), () => {
+      var x, N, C, M;
+      b = !0, k.current && cancelAnimationFrame(k.current);
+      try {
+        (x = y.current) == null || x.disconnect();
+      } catch {
+      }
+      try {
+        (N = g.current) == null || N.disconnect();
+      } catch {
+      }
+      j.current && ((M = ((C = y.current) == null ? void 0 : C.mediaStream) || void 0) == null || M.getTracks().forEach((q) => q.stop())), u.current && u.current.state !== "closed" && u.current.close();
+    };
+  }, [n, c, a, w]);
+  const I = () => {
+    const b = d.current, _ = g.current;
+    if (!b || !_) return;
+    const x = b.getContext("2d");
+    if (!x) return;
+    const N = window.devicePixelRatio || 1, C = b.width, M = b.height, q = _.frequencyBinCount, U = new Uint8Array(q), L = () => {
+      k.current = requestAnimationFrame(L), _.getByteTimeDomainData(U), x.clearRect(0, 0, C, M), x.fillStyle = "rgba(0,0,0,0)", x.fillRect(0, 0, C, M);
+      const O = Math.max(1, Math.floor(o * N)), E = Math.max(1, Math.floor(s * N)), B = O + E, H = Math.max(8, Math.floor((C + E) / B)), K = Math.floor(U.length / H);
+      for (let z = 0; z < H; z++) {
+        const ee = Math.min(U.length - 1, z * K), te = U[ee] / 128 - 1, G = Math.abs(te), re = Math.pow(G, 0.6), f = Math.max(M * 0.06, re * (M * 0.9)), F = z * B, Y = (M - f) / 2, xe = 140 - Math.min(140, 140 * G), pe = 85, be = 48 + Math.floor(12 * (1 - G));
+        x.fillStyle = `${m}`, x.shadowColor = `hsla(${xe}, ${pe}%, ${be}%, ${0.25 * G})`, x.shadowBlur = 8 * G;
+        const ye = Math.min(O / 2, f / 2);
+        rt(x, F, Y, O, f, ye), x.fill();
+      }
+    };
+    L();
+  };
+  return /* @__PURE__ */ t.jsxs(
+    "div",
+    {
+      ref: h,
+      className: `iw-relative iw-w-full iw-overflow-hidden iw-rounded-md iw-bg-gray-50 ${i}`,
+      style: { height: e },
+      children: [
+        /* @__PURE__ */ t.jsx("canvas", { ref: d, className: "iw-w-full iw-h-full" }),
+        l && /* @__PURE__ */ t.jsx("div", { className: "iw-absolute iw-inset-0 iw-flex iw-items-center iw-justify-center", children: /* @__PURE__ */ t.jsx("span", { className: "iw-text-xs iw-text-red-600 iw-bg-red-50 iw-border iw-border-red-200 iw-px-2 iw-py-1 iw-rounded", children: l }) })
+      ]
+    }
+  );
+};
+function rt(i, r, e, o, s, c) {
+  const a = Math.min(c, o / 2, s / 2);
+  i.beginPath(), i.moveTo(r + a, e), i.lineTo(r + o - a, e), i.quadraticCurveTo(r + o, e, r + o, e + a), i.lineTo(r + o, e + s - a), i.quadraticCurveTo(r + o, e + s, r + o - a, e + s), i.lineTo(r + a, e + s), i.quadraticCurveTo(r, e + s, r, e + s - a), i.lineTo(r, e + a), i.quadraticCurveTo(r, e, r + a, e), i.closePath();
+}
+const it = ({
+  state: i,
+  answeringTime: r,
+  nextPhase: e,
+  sttError: o
+}) => /* @__PURE__ */ t.jsxs("div", { className: "iw-flex iw-flex-col iw-justify-between iw-h-full ", children: [
+  /* @__PURE__ */ t.jsxs("div", { children: [
+    /* @__PURE__ */ t.jsxs("div", { className: "iw-flex iw-items-center iw-justify-between", children: [
+      /* @__PURE__ */ t.jsx("h3", { className: "iw-text-lg iw-font-semibold iw-text-gray-900 iw-mb-1", children: "You may start speaking now. We're listening...." }),
+      /* @__PURE__ */ t.jsxs("div", { className: "iw-flex iw-items-center iw-justify-center iw-gap-2", children: [
+        /* @__PURE__ */ t.jsxs("div", { className: "iw-flex iw-items-center iw-gap-1", children: [
+          /* @__PURE__ */ t.jsx(ne, { className: "iw-size-4 iw-text-orange-600" }),
+          /* @__PURE__ */ t.jsx("p", { className: "iw-text-gray-700 iw-text-sm", children: "Time to talk: " })
+        ] }),
+        /* @__PURE__ */ t.jsx(
+          oe,
+          {
+            total: r,
+            remaining: i.currentPhaseTimeRemaining,
+            size: 50,
+            strokeWidth: 4
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ t.jsx("p", { className: "iw-max-w-lg iw-text-gray-500 iw-text-xs iw-leading-[21px]", children: "Done talking? Click the button to review your answer." })
+  ] }),
+  /* @__PURE__ */ t.jsxs("div", { children: [
+    /* @__PURE__ */ t.jsx(tt, {}),
+    o && /* @__PURE__ */ t.jsxs("div", { className: "iw-mt-2 iw-text-xs iw-text-red-600", children: [
+      "Recording error: ",
+      o.message
+    ] })
+  ] }),
+  /* @__PURE__ */ t.jsx("div", { className: "iw-w-full iw-grid iw-grid-cols-1", children: /* @__PURE__ */ t.jsx(
+    Z,
+    {
+      onClick: () => {
+        e();
+      },
+      children: "Transcribe My Answer"
+    }
+  ) })
+] });
+function st() {
+  const [i, r] = T(!0), e = V(
+    () => [0, 1, 2].map((o) => ({ id: o })),
+    []
+  );
+  return P(() => {
+    const o = setInterval(() => {
+      r((s) => !s);
+    }, 1500);
+    return () => clearInterval(o);
+  }, []), /* @__PURE__ */ t.jsxs("div", { className: "iw-flex iw-flex-col iw-items-center iw-justify-center iw-gap-8 iw-h-full", children: [
+    /* @__PURE__ */ t.jsx("div", { className: "iw-relative iw-w-80 iw-h-48 ", "aria-hidden": !0, children: e.map((o, s) => {
+      const c = s * 50, a = i ? c : c + 12, n = i ? 1 : 0.08, w = s * 140;
+      return /* @__PURE__ */ t.jsx(
+        "div",
+        {
+          role: "presentation",
+          className: "iw-absolute iw-w-full iw-rounded-lg iw-p-4 iw-shadow-md iw-bg-gradient-to-b iw-from-gray-50 iw-to-gray-100 iw-overflow-hidden",
+          style: {
+            top: 0,
+            transform: `translateY(${a}px)`,
+            opacity: n,
+            transition: `transform 600ms cubic-bezier(.2,.9,.3,1) ${w}ms, opacity 400ms ease ${w}ms`
+          },
+          children: /* @__PURE__ */ t.jsxs("div", { className: "iw-flex iw-gap-3 iw-items-center", children: [
+            /* @__PURE__ */ t.jsx("div", { className: "iw-w-10 iw-h-10 iw-bg-gray-300 iw-rounded iw-flex-shrink-0" }),
+            /* @__PURE__ */ t.jsxs("div", { className: "iw-flex-1 iw-space-y-2", children: [
+              /* @__PURE__ */ t.jsx("div", { className: "iw-h-2 iw-bg-gray-300 iw-rounded iw-w-24" }),
+              /* @__PURE__ */ t.jsx("div", { className: "iw-h-2 iw-bg-gray-300 iw-rounded iw-w-32" })
+            ] })
+          ] })
+        },
+        o.id
+      );
+    }) }),
+    /* @__PURE__ */ t.jsx("div", { className: "iw-text-center", children: /* @__PURE__ */ t.jsx("p", { className: "iw-text-gray-500  iw-font-medium", children: "Preparing your question..." }) })
+  ] });
+}
+const fe = ({
+  isOpen: i,
+  onClose: r,
+  children: e,
+  title: o,
+  showCloseButton: s = !0,
+  closeOnOverlayClick: c = !0,
+  closeOnEscape: a = !0,
+  className: n = ""
+}) => {
+  if (P(() => {
+    if (!i || !a) return;
+    const d = (h) => {
+      h.key === "Escape" && r();
+    };
+    return document.addEventListener("keydown", d), () => document.removeEventListener("keydown", d);
+  }, [i, a, r]), P(() => (i ? (document.body.style.overflow = "hidden", document.body.classList.add("interview-widget-container")) : (document.body.style.overflow = "unset", document.body.classList.remove("interview-widget-container")), () => {
+    document.body.style.overflow = "unset", document.body.classList.remove("interview-widget-container");
+  }), [i]), !i) return null;
+  const w = (d) => {
+    c && d.target === d.currentTarget && r();
+  }, m = /* @__PURE__ */ t.jsxs("div", { className: "iw-fixed iw-inset-0 iw-z-50 iw-flex iw-items-center iw-justify-center", children: [
+    /* @__PURE__ */ t.jsx(
+      "div",
       {
-        value: i,
-        onChange: t,
-        onKeyDown: c,
-        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
+        className: "iw-fixed iw-inset-0 iw-bg-black iw-bg-opacity-50 iw-transition-opacity",
+        onClick: w
       }
     ),
-    /* @__PURE__ */ r.jsxs("div", { className: "iw-p-2 iw-flex iw-justify-between iw-items-center iw-bg-gray-50", children: [
-      /* @__PURE__ */ r.jsx("div", { className: "iw-text-xs iw-text-gray-500", children: /* @__PURE__ */ r.jsx("kbd", { children: " Press Ctrl+Enter to submit" }) }),
-      /* @__PURE__ */ r.jsx(
-        $,
+    /* @__PURE__ */ t.jsxs(
+      "div",
+      {
+        className: `iw-relative iw-bg-white iw-rounded-lg iw-shadow-xl iw-max-w-md iw-w-full iw-mx-4 iw-max-h-[90vh] iw-overflow-hidden ${n}`,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": o ? "dialog-title" : void 0,
+        children: [
+          (o || s) && /* @__PURE__ */ t.jsxs("div", { className: "iw-flex iw-items-center iw-justify-between iw-p-4 iw-border-b iw-border-gray-200", children: [
+            o && /* @__PURE__ */ t.jsx(
+              "h2",
+              {
+                id: "dialog-title",
+                className: "iw-text-lg iw-font-semibold iw-text-gray-900",
+                children: o
+              }
+            ),
+            s && /* @__PURE__ */ t.jsx(
+              "button",
+              {
+                onClick: r,
+                className: "iw-p-1 iw-text-gray-400 iw-hover:text-gray-600 iw-transition-colors iw-rounded iw-hover:bg-gray-100",
+                "aria-label": "Close dialog",
+                children: /* @__PURE__ */ t.jsx(
+                  "svg",
+                  {
+                    className: "iw-w-5 iw-h-5",
+                    fill: "none",
+                    stroke: "currentColor",
+                    viewBox: "0 0 24 24",
+                    children: /* @__PURE__ */ t.jsx(
+                      "path",
+                      {
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        strokeWidth: 2,
+                        d: "M6 18L18 6M6 6l12 12"
+                      }
+                    )
+                  }
+                )
+              }
+            )
+          ] }),
+          /* @__PURE__ */ t.jsx("div", { className: "iw-p-4 iw-overflow-y-auto", children: e })
+        ]
+      }
+    )
+  ] });
+  return ke(m, document.body);
+}, at = ({
+  open: i,
+  onClose: r
+}) => /* @__PURE__ */ t.jsx(
+  fe,
+  {
+    isOpen: i,
+    onClose: r || (() => {
+    }),
+    title: "Interview Complete!",
+    className: "",
+    children: /* @__PURE__ */ t.jsxs("div", { className: "iw-flex iw-flex-col iw-items-center iw-justify-center iw-text-center iw-py-2", children: [
+      /* @__PURE__ */ t.jsx(
+        "svg",
         {
-          onClick: e,
-          disabled: a,
-          size: "sm",
-          variant: "gradient",
-          children: "Submit Answer"
+          className: "iw-w-16 iw-h-16 iw-mx-auto iw-mb-4 iw-text-green-500",
+          fill: "none",
+          stroke: "currentColor",
+          viewBox: "0 0 24 24",
+          children: /* @__PURE__ */ t.jsx(
+            "path",
+            {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: 2,
+              d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+            }
+          )
         }
-      )
+      ),
+      /* @__PURE__ */ t.jsx("p", { className: "iw-text-gray-600 iw-mb-6", children: "Thank you for your time. Your answers have been recorded and submitted for review." })
     ] })
-  ] }) });
-}, Ye = ({
-  question: i,
-  isLoading: t = !1
+  }
+), nt = ({
+  size: i = "192px",
+  className: r,
+  colors: e,
+  animationDuration: o = 20
 }) => {
-  const { baseColor: e } = F();
-  return t ? /* @__PURE__ */ r.jsxs(
+  const c = { ...{
+    bg: "oklch(95% 0.02 264.695)",
+    c1: "oklch(75% 0.15 350)",
+    // Pastel pink
+    c2: "oklch(80% 0.12 200)",
+    // Pastel blue
+    c3: "oklch(78% 0.14 280)"
+    // Pastel purple/lavender
+  }, ...e }, a = parseInt(i.replace("px", ""), 10), n = a < 50 ? Math.max(a * 8e-3, 1) : Math.max(a * 0.015, 4), w = a < 50 ? Math.max(a * 4e-3, 1.2) : Math.max(a * 8e-3, 1.5), m = a < 50 ? Math.max(a * 4e-3, 0.05) : Math.max(a * 8e-3, 0.1), d = a < 50 ? Math.max(a * 4e-3, 0.5) : Math.max(a * 8e-3, 2), h = a < 30 ? "0%" : a < 50 ? "5%" : a < 100 ? "15%" : "25%", u = a < 30 ? 1.1 : a < 50 ? Math.max(w * 1.2, 1.3) : w;
+  return /* @__PURE__ */ t.jsx(
     "div",
     {
-      className: "iw-rounded-xl iw-mb-4  iw-p-5",
+      className: `siri-orb ${r}`,
       style: {
-        background: "linear-gradient(to bottom, #eef2ff, #ffffff)",
-        border: "1px solid #e0e7ff",
-        color: "#1f2937"
+        width: i,
+        height: i,
+        "--bg": c.bg,
+        "--c1": c.c1,
+        "--c2": c.c2,
+        "--c3": c.c3,
+        "--animation-duration": `${o}s`,
+        "--blur-amount": `${n}px`,
+        "--contrast-amount": u,
+        "--dot-size": `${m}px`,
+        "--shadow-spread": `${d}px`,
+        "--mask-radius": h
       },
-      children: [
-        /* @__PURE__ */ r.jsxs("div", { className: "iw-flex iw-items-center iw-space-x-3 iw-mb-3", children: [
-          /* @__PURE__ */ r.jsx(
-            "div",
-            {
-              className: "iw-h-12 iw-w-12 iw-rounded-lg  iw-flex iw-items-center iw-justify-center iw-text-white iw-font-semibold iw-animate-pulse",
-              style: { backgroundColor: e },
-              children: "N"
-            }
-          ),
-          /* @__PURE__ */ r.jsxs("div", { children: [
-            /* @__PURE__ */ r.jsx("div", { className: "iw-text-sm iw-font-semibold", children: "Novara" }),
-            /* @__PURE__ */ r.jsx("div", { className: "iw-text-xs iw-text-gray-500", children: "Assistant" })
-          ] })
-        ] }),
-        /* @__PURE__ */ r.jsxs("div", { className: "iw-animate-pulse", children: [
-          /* @__PURE__ */ r.jsx("div", { className: "iw-h-4 iw-bg-gray-200 iw-rounded iw-w-3/4 iw-mb-2" }),
-          /* @__PURE__ */ r.jsx("div", { className: "iw-h-4 iw-bg-gray-200 iw-rounded iw-w-full" })
-        ] })
-      ]
+      children: /* @__PURE__ */ t.jsx("style", { children: `
+        @property --angle {
+          syntax: "<angle>";
+          inherits: false;
+          initial-value: 0deg;
+        }
+
+        .siri-orb {
+          display: grid;
+          grid-template-areas: "stack";
+          overflow: hidden;
+          border-radius: 50%;
+          position: relative;
+          transform: scale(1.1);
+        }
+
+        .siri-orb::before,
+        .siri-orb::after {
+          content: "";
+          display: block;
+          grid-area: stack;
+          width: 100%;
+          height: 100%;
+          border-radius: 50%;
+          transform: translateZ(0);
+        }
+
+        .siri-orb::before {
+          background: conic-gradient(
+              from calc(var(--angle) * 2) at 25% 70%,
+              var(--c3),
+              transparent 20% 80%,
+              var(--c3)
+            ),
+            conic-gradient(
+              from calc(var(--angle) * 2) at 45% 75%,
+              var(--c2),
+              transparent 30% 60%,
+              var(--c2)
+            ),
+            conic-gradient(
+              from calc(var(--angle) * -3) at 80% 20%,
+              var(--c1),
+              transparent 40% 60%,
+              var(--c1)
+            ),
+            conic-gradient(
+              from calc(var(--angle) * 2) at 15% 5%,
+              var(--c2),
+              transparent 10% 90%,
+              var(--c2)
+            ),
+            conic-gradient(
+              from calc(var(--angle) * 1) at 20% 80%,
+              var(--c1),
+              transparent 10% 90%,
+              var(--c1)
+            ),
+            conic-gradient(
+              from calc(var(--angle) * -2) at 85% 10%,
+              var(--c3),
+              transparent 20% 80%,
+              var(--c3)
+            );
+          box-shadow: inset var(--bg) 0 0 var(--shadow-spread)
+            calc(var(--shadow-spread) * 0.2);
+          filter: blur(var(--blur-amount)) contrast(var(--contrast-amount));
+          animation: rotate var(--animation-duration) linear infinite;
+        }
+
+        .siri-orb::after {
+          background-image: radial-gradient(
+            circle at center,
+            var(--bg) var(--dot-size),
+            transparent var(--dot-size)
+          );
+          background-size: calc(var(--dot-size) * 2) calc(var(--dot-size) * 2);
+          backdrop-filter: blur(calc(var(--blur-amount) * 2))
+            contrast(calc(var(--contrast-amount) * 2));
+          mix-blend-mode: overlay;
+        }
+
+        /* Apply mask only when radius is greater than 0 */
+        .siri-orb[style*="--mask-radius: 0%"]::after {
+          mask-image: none;
+        }
+
+        .siri-orb:not([style*="--mask-radius: 0%"])::after {
+          mask-image: radial-gradient(
+            black var(--mask-radius),
+            transparent 75%
+          );
+        }
+
+        @keyframes rotate {
+          to {
+            --angle: 360deg;
+          }
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+          .siri-orb::before {
+            animation: none;
+          }
+        }
+      ` })
+    }
+  );
+};
+function ot({ ttsError: i }) {
+  return /* @__PURE__ */ t.jsxs("div", { className: "iw-flex iw-flex-col iw-items-center iw-justify-center iw-gap-8 iw-w-full iw-h-full", children: [
+    /* @__PURE__ */ t.jsx(nt, { size: "80px" }),
+    i && /* @__PURE__ */ t.jsxs("div", { className: "iw-mt-2 iw-text-xs iw-text-red-600", children: [
+      "Audio playback failed: ",
+      i.message
+    ] }),
+    /* @__PURE__ */ t.jsx("p", { className: "iw-text- iw-text-gray-700", children: "Your AI interviewer is speaking..." })
+  ] });
+}
+const ct = ({ state: i, thinkingTime: r, nextPhase: e }) => /* @__PURE__ */ t.jsxs("div", { className: "iw-flex iw-flex-col iw-gap-6 iw-items-center iw-justify-center iw-text-center iw-h-full ", children: [
+  /* @__PURE__ */ t.jsxs("div", { children: [
+    /* @__PURE__ */ t.jsx("h3", { className: "iw-text-lg iw-font-semibold iw-text-gray-900 iw-mb-1", children: "Get Ready to Answer" }),
+    /* @__PURE__ */ t.jsx("p", { className: "iw-max-w-lg iw-text-gray-500 iw-text-xs iw-leading-[21px]", children: "After 30-seconds thinking time, recording will start automatically, or you can begin recording early by clicking the button below." })
+  ] }),
+  /* @__PURE__ */ t.jsxs("div", { className: "iw-flex iw-items-center iw-justify-center iw-gap-2", children: [
+    /* @__PURE__ */ t.jsxs("div", { className: "iw-flex iw-items-center iw-gap-1", children: [
+      /* @__PURE__ */ t.jsx(ne, { className: "iw-size-4 iw-text-orange-600" }),
+      /* @__PURE__ */ t.jsx("p", { className: "iw-text-gray-700 iw-text-sm", children: "Time to think: " })
+    ] }),
+    /* @__PURE__ */ t.jsx(
+      oe,
+      {
+        total: r,
+        remaining: i.currentPhaseTimeRemaining,
+        size: 50,
+        strokeWidth: 4
+      }
+    )
+  ] }),
+  /* @__PURE__ */ t.jsx("div", { className: "iw-w-full iw-grid iw-grid-cols-1", children: /* @__PURE__ */ t.jsx(
+    Z,
+    {
+      onClick: () => {
+        e();
+      },
+      children: "Start Answering"
     }
-  ) : i ? /* @__PURE__ */ r.jsxs(
+  ) })
+] }), lt = ({ sttError: i }) => /* @__PURE__ */ t.jsxs("div", { className: "iw-flex iw-flex-col iw-items-center iw-justify-center iw-h-full", children: [
+  /* @__PURE__ */ t.jsxs("svg", { width: "48", height: "48", viewBox: "0 0 60 60", fill: "none", children: [
+    /* @__PURE__ */ t.jsx(
+      "rect",
+      {
+        width: 60,
+        height: 60,
+        rx: 30,
+        fill: "url(#prefix__paint0_linear_1460_12482)"
+      }
+    ),
+    /* @__PURE__ */ t.jsx(
+      "path",
+      {
+        d: "M28.127 14c.276 7.685 6.442 13.851 14.127 14.127-7.684.276-13.85 6.442-14.127 14.127-.275-7.685-6.442-13.851-14.126-14.127 7.684-.276 13.85-6.442 14.126-14.127zM38.937 31.873A7.331 7.331 0 0046 38.937 7.331 7.331 0 0038.937 46a7.331 7.331 0 00-7.064-7.063 7.331 7.331 0 007.064-7.064z",
+        fill: "#fff"
+      }
+    ),
+    /* @__PURE__ */ t.jsx("defs", { children: /* @__PURE__ */ t.jsxs(
+      "linearGradient",
+      {
+        id: "prefix__paint0_linear_1460_12482",
+        x1: 30,
+        y1: -6.563,
+        x2: 77.813,
+        y2: 54.375,
+        gradientUnits: "userSpaceOnUse",
+        children: [
+          /* @__PURE__ */ t.jsx("stop", { offset: 0.211, stopColor: "#5C92FA" }),
+          /* @__PURE__ */ t.jsx("stop", { offset: 1, stopColor: "#A75FFD" })
+        ]
+      }
+    ) })
+  ] }),
+  /* @__PURE__ */ t.jsx("h3", { className: "iw-text-lg iw-font-semibold iw-text-gray-900 iw-mb-1 iw-mt-3", children: "Just a moment... We're analyzing your response" }),
+  /* @__PURE__ */ t.jsx("p", { className: "iw-max-w-lg iw-text-gray-500 iw-text-xs iw-leading-[21px]", children: "After transcription, you'll have 45 sec to review your answer." }),
+  i && /* @__PURE__ */ t.jsxs("div", { className: "iw-mt-2 iw-text-xs iw-text-red-600", children: [
+    "Transcription error: ",
+    i.message,
+    i.recoverable && " (attempting to continue)"
+  ] })
+] }), dt = (i) => /* @__PURE__ */ t.jsxs(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    ...i,
+    children: [
+      /* @__PURE__ */ t.jsx("path", { d: "M12 8V4H8" }),
+      /* @__PURE__ */ t.jsx("rect", { width: "16", height: "12", x: "4", y: "8", rx: "2" }),
+      /* @__PURE__ */ t.jsx("path", { d: "M2 14h2" }),
+      /* @__PURE__ */ t.jsx("path", { d: "M20 14h2" }),
+      /* @__PURE__ */ t.jsx("path", { d: "M15 13v2" }),
+      /* @__PURE__ */ t.jsx("path", { d: "M9 13v2" })
+    ]
+  }
+), wt = ({
+  question: i,
+  isLoading: r = !1
+}) => {
+  const { baseColor: e } = W();
+  return /* @__PURE__ */ t.jsx(
     "div",
     {
-      className: "iw-rounded-xl iw-mb-4 message-animation  iw-text-gray-800 iw-border iw-border-indigo-100 iw-p-5",
-      style: Qe(e ?? "#8C75FB", 0.85),
-      children: [
-        /* @__PURE__ */ r.jsxs("div", { className: "iw-flex iw-items-center iw-space-x-3 iw-mb-3", children: [
-          /* @__PURE__ */ r.jsx(
-            "div",
+      className: "iw-rounded-xl iw-mb-4 message-animation  iw-text-gray-800 iw-p-6 ",
+      style: De(e, 0.85),
+      children: /* @__PURE__ */ t.jsxs("div", { className: "iw-flex iw-items-center iw-gap-8", children: [
+        /* @__PURE__ */ t.jsxs("div", { className: "iw-flex iw-flex-col iw-items-center iw-relative iw-h-32 iw-w-32 iw-shrink-0 iw-shadow iw-rounded-lg iw-bg-white", children: [
+          /* @__PURE__ */ t.jsx("div", { className: "iw-mt-8", children: /* @__PURE__ */ t.jsx(
+            dt,
             {
-              className: "iw-h-12 iw-w-12 iw-rounded-lg  iw-flex iw-items-center iw-justify-center iw-text-white iw-font-semibold",
-              style: { backgroundColor: e },
-              children: "N"
+              className: "iw-h-12 iw-w-12",
+              style: { stroke: e }
             }
-          ),
-          /* @__PURE__ */ r.jsxs("div", { children: [
-            /* @__PURE__ */ r.jsx("div", { className: "iw-text-sm iw-font-semibold", children: "Novara" }),
-            /* @__PURE__ */ r.jsx("div", { className: "iw-text-xs iw-text-gray-500", children: "Assistant" })
-          ] })
+          ) }),
+          /* @__PURE__ */ t.jsx("div", { className: "iw-absolute iw-bottom-2 iw-translate-x-1/2  iw-flex iw-mt-2", children: /* @__PURE__ */ t.jsx("div", { className: "iw-text-sm", children: "Novara" }) })
         ] }),
-        /* @__PURE__ */ r.jsx("p", { className: "iw-text-[15px] iw-leading-6", children: i.question })
-      ]
-    }
-  ) : /* @__PURE__ */ r.jsx(
-    "div",
-    {
-      className: "iw-rounded-xl iw-mb-4 iw-bg-gray-50 iw-text-gray-500 iw-border iw-border-gray-200 iw-p-5 iw-text-center",
-      children: /* @__PURE__ */ r.jsx("p", { className: "iw-text-sm", children: "No question available" })
+        r ? /* @__PURE__ */ t.jsxs("div", { className: "iw-animate-pulse iw-w-full iw-space-y-3 iw-mr-10", children: [
+          /* @__PURE__ */ t.jsx("div", { className: "iw-h-5 iw-bg-gray-200 iw-rounded iw-w-full" }),
+          /* @__PURE__ */ t.jsx("div", { className: "iw-h-5 iw-bg-gray-200 iw-rounded iw-w-3/4" })
+        ] }) : /* @__PURE__ */ t.jsx("p", { className: "iw-text-lg iw-leading-8", children: i == null ? void 0 : i.question })
+      ] })
     }
   );
-}, Ke = ({
+}, ut = ({
+  confirmExitInterview: i,
+  isOpen: r,
+  onClose: e
+}) => /* @__PURE__ */ t.jsx(fe, { isOpen: r, onClose: e, title: "Exit Interview", children: /* @__PURE__ */ t.jsxs("div", { className: "iw-space-y-4", children: [
+  /* @__PURE__ */ t.jsx("p", { className: "iw-text-base iw-text-gray-700", children: "Are you sure you want to exit the interview? All progress will be lost and you will not be able to resume." }),
+  /* @__PURE__ */ t.jsxs("div", { className: "iw-flex iw-justify-end iw-space-x-2", children: [
+    /* @__PURE__ */ t.jsx(
+      "button",
+      {
+        className: "iw-px-4 iw-py-2 iw-bg-gray-200 iw-rounded iw-text-gray-700 iw-font-medium",
+        onClick: e,
+        children: "Cancel"
+      }
+    ),
+    /* @__PURE__ */ t.jsx(
+      "button",
+      {
+        className: "iw-px-4 iw-py-2 iw-bg-red-600 iw-text-white iw-rounded iw-font-medium",
+        onClick: i,
+        children: "Confirm Exit"
+      }
+    )
+  ] })
+] }) }), ht = ({ title: i, onExit: r }) => {
+  const { baseColor: e } = W(), [o, s] = T(!1);
+  return /* @__PURE__ */ t.jsxs("header", { className: "iw-w-full iw-text-gray-900", children: [
+    /* @__PURE__ */ t.jsxs("div", { className: "iw-mx-auto iw-flex iw-items-center iw-justify-between iw-px-4 iw-py-3", children: [
+      /* @__PURE__ */ t.jsxs("div", { className: "iw-flex iw-items-center iw-space-x-2", children: [
+        /* @__PURE__ */ t.jsx(
+          "div",
+          {
+            className: "iw-h-7 iw-w-7 iw-rounded-md  iw-flex iw-items-center iw-justify-center iw-text-white iw-font-semibold",
+            style: { backgroundColor: e },
+            children: "N"
+          }
+        ),
+        /* @__PURE__ */ t.jsx("p", { className: "iw-text-sm iw-font-medium", children: "Novara" })
+      ] }),
+      /* @__PURE__ */ t.jsx("h1", { className: "iw-text-base iw-font-bold", children: i }),
+      /* @__PURE__ */ t.jsx(
+        "button",
+        {
+          className: "iw-text-sm iw-text-gray-500 hover:iw-text-gray-700",
+          onClick: () => s(!0),
+          children: "Exit Interview"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ t.jsx("div", { className: "iw-h-px iw-bg-gray-200" }),
+    /* @__PURE__ */ t.jsx(
+      ut,
+      {
+        isOpen: o,
+        confirmExitInterview: () => {
+          r(), s(!1);
+        },
+        onClose: () => s(!1)
+      }
+    )
+  ] });
+}, mt = ({
   interviewId: i,
-  onComplete: t,
+  onComplete: r,
   className: e = ""
 }) => {
-  const a = Oe(), { baseColor: s } = F(), { baseUrl: c } = Te(), { timers: n, stt: o, tts: m } = Ie(), [g, d] = y(null), [u, h] = y(""), [x, k] = y(!1), j = D(""), N = D(null), w = {
-    thinkingTime: (n == null ? void 0 : n.thinkingDuration) || 30,
-    answeringTime: (n == null ? void 0 : n.answeringDuration) || 120,
-    editingTime: (n == null ? void 0 : n.editingDuration) || 30,
-    totalTime: (n == null ? void 0 : n.totalInterviewDuration) || 600,
-    minimumBufferTime: (n == null ? void 0 : n.minimumTimeForNextQuestion) || 120
-  }, {
-    thinkingTime: p,
-    answeringTime: T,
-    editingTime: S,
-    totalTime: ie,
-    minimumBufferTime: re
-  } = w;
-  A(() => {
-    j.current = u;
-  }, [u]);
-  const _ = D(!1), {
-    speak: te,
-    isPlaying: se,
-    error: W
-  } = Ue({
+  const o = We(), { baseUrl: s, authToken: c } = Se(), { timers: a, stt: n, tts: w } = Ce(), [m, d] = T(null), [h, u] = T(""), g = S(""), y = S(null), k = {
+    thinkingTime: (a == null ? void 0 : a.thinkingDuration) || 30,
+    answeringTime: (a == null ? void 0 : a.answeringDuration) || 120,
+    editingTime: (a == null ? void 0 : a.editingDuration) || 30
+  }, { thinkingTime: j, answeringTime: l, editingTime: p } = k;
+  P(() => {
+    g.current = h;
+  }, [h]);
+  const I = S(!1), { speak: b, error: _ } = Je({
     config: {
-      baseUrl: c,
-      provider: m == null ? void 0 : m.provider
+      baseUrl: s,
+      provider: w == null ? void 0 : w.provider,
+      authToken: c
     },
     onEnd: () => {
-      console.log("TTS playback completed"), _.current = !1, E();
+      I.current = !1, E();
     },
-    onError: (f) => {
-      console.error("TTS Error:", f), _.current || (_.current = !0, E());
+    onError: () => {
+      I.current || (I.current = !0, E());
     }
-  }), G = D(!1), L = D(!1), {
-    startRecording: z,
-    stopRecording: Y,
-    transcribe: K,
-    isRecording: ne,
-    isTranscribing: ae,
-    error: M
-  } = _e({
+  }), x = S(!1), N = S(!1), {
+    startRecording: C,
+    stopRecording: M,
+    transcribe: q,
+    error: U
+  } = Ye({
     config: {
-      baseUrl: c,
-      provider: o == null ? void 0 : o.provider,
-      model: o == null ? void 0 : o.model,
-      language: o == null ? void 0 : o.language
+      baseUrl: s,
+      provider: n == null ? void 0 : n.provider,
+      model: n == null ? void 0 : n.model,
+      language: n == null ? void 0 : n.language,
+      authToken: c
     },
     onStart: () => {
-      console.log("STT recording started"), G.current = !1, L.current = !1;
+      x.current = !1, N.current = !1;
     },
     onStop: () => {
-      console.log("STT recording stopped");
     },
     onTranscriptionComplete: (f) => {
-      console.log("Transcription completed:", f), h(f.transcript), L.current || (L.current = !0, E());
+      u(f.transcript), N.current || (N.current = !0, E());
     },
     onError: (f) => {
-      console.error("STT Error:", f), G.current || (G.current = !0, E());
+      console.error("STT Error:", f), x.current || (x.current = !0, E());
     }
-  }), { state: R, startQuestion: Q, nextPhase: E } = De({
+  }), { state: L, startQuestion: O, nextPhase: E, completeInterview: B } = Ge({
     config: {
-      thinkingDuration: p,
-      answeringDuration: T,
-      editingDuration: S,
-      totalInterviewDuration: ie,
-      minimumTimeForNextQuestion: re
+      thinkingDuration: j,
+      answeringDuration: l,
+      editingDuration: p
     },
     callbacks: {
       onPhaseChange: (f) => {
-        switch (console.log("Phase changed:", f), f) {
-          case l.FETCHING_QUESTION:
-            oe();
+        switch (f) {
+          case R.FETCHING_QUESTION:
+            H();
             break;
-          case l.READING_QUESTION:
-            le();
+          case R.READING_QUESTION:
+            ee();
             break;
-          case l.ANSWERING:
-            de();
+          case R.ANSWERING:
+            te();
             break;
-          case l.TRANSCRIBING:
-            we();
+          case R.TRANSCRIBING:
+            G();
             break;
-          case l.SUBMITTING:
-            ce();
+          case R.SUBMITTING:
+            z();
             break;
         }
       },
       onInterviewEnd: () => {
-        t == null || t();
+        r == null || r();
       }
     }
-  }), { execute: oe } = Pe(
+  });
+  P(() => {
+    O();
+  }, []);
+  const { execute: H, loading: K } = qe(
     async () => {
-      var P, J;
-      const f = await a.generateQuestion({
+      var F, Y;
+      const f = await o.generateQuestion({
         interviewId: i,
-        isInterviewDone: R.totalTimeRemaining < 120,
-        question: ((P = N.current) == null ? void 0 : P.question) || "",
-        qnaId: ((J = N.current) == null ? void 0 : J.qna_id) || "",
-        answer: j.current
+        question: ((F = y.current) == null ? void 0 : F.question) || "",
+        qnaId: ((Y = y.current) == null ? void 0 : Y.qna_id) || "",
+        answer: g.current
       });
-      return N.current = f.data, f;
+      return y.current = f.data, f;
     },
     {
       onSuccess: async (f) => {
-        console.log("Questions fetched successfully", f), f && f.data && (h(""), d(f.data), E());
+        f && f.data && (u(""), d(f.data), E());
       },
       onError: (f) => {
         console.error("Failed to fetch questions:", f);
       }
     }
-  ), ce = v(async () => {
-    console.log("Answer submitted successfully"), await Be(1500), Q();
-  }, [Q]), le = v(async () => {
+  ), z = A(async () => {
+    O();
+  }, [O]), ee = A(async () => {
     var f;
-    if ((f = N.current) != null && f.question)
+    if ((f = y.current) != null && f.question)
       try {
-        _.current = !1, console.log("Starting TTS for question"), await te(N.current.question);
-      } catch (P) {
-        console.error("Failed to speak question:", P);
+        I.current = !1, await b(y.current.question), y.current.is_interview_done && (await Pe(2e3), B());
+      } catch (F) {
+        console.error("Failed to speak question:", F);
       }
     else
       E();
-  }, []), de = v(async () => {
-    console.log("Starting recording...");
+  }, [b, E, B]), te = A(async () => {
     try {
-      const f = T;
-      console.log("🚀 ~ maxDuration:", f), await z(f);
+      await C(l);
     } catch (f) {
       console.error("Failed to start recording:", f), E();
     }
-  }, [z, E]), we = v(async () => {
-    console.log("Stopping recording and processing STT...");
+  }, [C, E]), G = A(async () => {
     try {
-      const f = await Y();
-      console.log("Recording stopped, audio blob size:", f.size), await K(f);
+      const f = await M();
+      await q(f);
     } catch (f) {
-      console.error("STT processing failed:", f), !G.current && !L.current && (G.current = !0, E());
+      console.error("STT processing failed:", f), !x.current && !N.current && (x.current = !0, E());
     }
-  }, [Y, K, E]), ue = () => {
-    const { phase: f } = R;
+  }, [M, q, E]), re = () => {
+    const { phase: f } = L;
     switch (f) {
-      case l.IDLE:
-        return /* @__PURE__ */ r.jsx("div", { className: "iw-text-center iw-py-8", children: /* @__PURE__ */ r.jsx("p", { className: "iw-text-gray-600", children: "Ready to start..." }) });
-      case l.FETCHING_QUESTION:
-        return /* @__PURE__ */ r.jsx("div", { className: "iw-space-y-4" });
-      case l.READING_QUESTION:
-        return /* @__PURE__ */ r.jsx("div", { className: "iw-space-y-4", children: /* @__PURE__ */ r.jsxs("div", { className: "iw-p-4 iw-bg-indigo-50 iw-border iw-border-indigo-200 iw-rounded-lg", children: [
-          /* @__PURE__ */ r.jsxs("div", { className: "iw-flex iw-items-center iw-space-x-2", children: [
-            /* @__PURE__ */ r.jsx("div", { className: "iw-w-3 iw-h-3 iw-bg-indigo-500 iw-rounded-full iw-animate-pulse" }),
-            /* @__PURE__ */ r.jsx("span", { className: "iw-text-sm iw-font-medium iw-text-indigo-700", children: se ? "Playing question audio..." : "Reading the question..." })
-          ] }),
-          W && /* @__PURE__ */ r.jsxs("div", { className: "iw-mt-2 iw-text-xs iw-text-red-600", children: [
-            "Audio playback failed: ",
-            W.message
-          ] })
-        ] }) });
-      case l.THINKING:
-      case l.ANSWERING:
-        return /* @__PURE__ */ r.jsx("div", { className: "iw-space-y-4", children: f === l.ANSWERING && /* @__PURE__ */ r.jsxs("div", { className: "iw-p-4 iw-bg-red-50 iw-border iw-border-red-200 iw-rounded-lg", children: [
-          /* @__PURE__ */ r.jsxs("div", { className: "iw-flex iw-items-center iw-space-x-2", children: [
-            /* @__PURE__ */ r.jsx("div", { className: "iw-w-3 iw-h-3 iw-bg-red-500 iw-rounded-full iw-animate-pulse" }),
-            /* @__PURE__ */ r.jsx("span", { className: "iw-text-sm iw-font-medium iw-text-red-700", children: ne ? "Recording in progress..." : "Preparing to record..." })
-          ] }),
-          M && /* @__PURE__ */ r.jsxs("div", { className: "iw-mt-2 iw-text-xs iw-text-red-600", children: [
-            "Recording error: ",
-            M.message
-          ] })
-        ] }) });
-      case l.TRANSCRIBING:
-        return /* @__PURE__ */ r.jsx("div", { className: "iw-space-y-4", children: /* @__PURE__ */ r.jsxs("div", { className: "iw-p-4 iw-bg-purple-50 iw-border iw-border-purple-200 iw-rounded-lg", children: [
-          /* @__PURE__ */ r.jsxs("div", { className: "iw-flex iw-items-center iw-space-x-2", children: [
-            /* @__PURE__ */ r.jsx("div", { className: "iw-animate-spin iw-h-4 iw-w-4 iw-border-2 iw-border-purple-500 iw-border-t-transparent iw-rounded-full" }),
-            /* @__PURE__ */ r.jsx("span", { className: "iw-text-sm iw-font-medium iw-text-purple-700", children: ae ? "Transcribing your speech..." : "Processing audio..." })
-          ] }),
-          M && /* @__PURE__ */ r.jsxs("div", { className: "iw-mt-2 iw-text-xs iw-text-red-600", children: [
-            "Transcription error: ",
-            M.message,
-            M.recoverable && " (attempting to continue)"
-          ] })
-        ] }) });
-      case l.EDITING:
-        return /* @__PURE__ */ r.jsx("div", { className: "iw-space-y-4", children: /* @__PURE__ */ r.jsx(
-          ze,
+      case R.IDLE:
+        return /* @__PURE__ */ t.jsxs("div", { className: "iw-text-center iw-flex iw-flex-col iw-items-center iw-justify-center iw-gap-2 iw-h-full", children: [
+          /* @__PURE__ */ t.jsx("h3", { className: "iw-text-lg iw-font-semibold iw-text-gray-900 iw-mb-1", children: "Ready to start the Interview?" }),
+          /* @__PURE__ */ t.jsx("p", { className: "iw-max-w-xl iw-text-gray-500 iw-text-xs iw-leading-[21px]", children: `You will be asked a series of behavioral and technical questions. For each one you'll get a short thinking period, then a timed recording window. We'll transcribe your response so you can review and edit it before submitting. Click "Start Interview" when you're ready.` }),
+          /* @__PURE__ */ t.jsx(Z, { onClick: O, className: "iw-mt-2 iw-w-40", children: "Start Interview" })
+        ] });
+      case R.FETCHING_QUESTION:
+        return /* @__PURE__ */ t.jsx(st, {});
+      case R.READING_QUESTION:
+        return /* @__PURE__ */ t.jsx(ot, { ttsError: _ });
+      case R.THINKING:
+        return /* @__PURE__ */ t.jsx(
+          ct,
           {
-            value: u,
-            onChange: (P) => h(P.target.value),
-            onSubmit: () => E(),
-            isSubmitDisabled: !u.trim(),
-            remainingTimeText: `${R.currentPhaseTimeRemaining}s remaining`
+            state: L,
+            thinkingTime: j,
+            nextPhase: E
           }
-        ) });
-      case l.SUBMITTING:
-        return /* @__PURE__ */ r.jsx("div", { className: "iw-space-y-4", children: /* @__PURE__ */ r.jsx("div", { className: "iw-p-4 iw-bg-green-50 iw-border iw-border-green-200 iw-rounded-lg", children: /* @__PURE__ */ r.jsxs("div", { className: "iw-flex iw-items-center iw-space-x-2", children: [
-          /* @__PURE__ */ r.jsx("div", { className: "iw-animate-spin iw-h-4 iw-w-4 iw-border-2 iw-border-green-500 iw-border-t-transparent iw-rounded-full" }),
-          /* @__PURE__ */ r.jsx("span", { className: "iw-text-sm iw-font-medium iw-text-green-700", children: "Submitting your answer..." })
-        ] }) }) });
-      case l.COMPLETED:
-        return /* @__PURE__ */ r.jsxs("div", { className: "iw-text-center iw-py-8", children: [
-          /* @__PURE__ */ r.jsx("div", { className: "iw-mb-4", children: /* @__PURE__ */ r.jsx(
-            "svg",
-            {
-              className: "iw-w-16 iw-h-16 iw-mx-auto iw-text-green-500",
-              fill: "none",
-              stroke: "currentColor",
-              viewBox: "0 0 24 24",
-              children: /* @__PURE__ */ r.jsx(
-                "path",
-                {
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  strokeWidth: 2,
-                  d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-                }
-              )
-            }
-          ) }),
-          /* @__PURE__ */ r.jsx("h3", { className: "iw-text-xl iw-font-bold iw-text-gray-900 iw-mb-2", children: "Interview Complete!" }),
-          /* @__PURE__ */ r.jsx("p", { className: "iw-text-gray-600", children: "Thank you for your time. Your answers have been recorded." })
-        ] });
-      default:
-        return null;
-    }
-  };
-  return /* @__PURE__ */ r.jsx("div", { className: "interview-widget-container", children: /* @__PURE__ */ r.jsxs(
-    "div",
-    {
-      className: ` iw-max-w-3xl iw-mx-auto iw-space-y-4 iw-py-8  ${e}`,
-      children: [
-        R.phase !== l.IDLE && R.phase !== l.COMPLETED && /* @__PURE__ */ r.jsx(
-          Ye,
+        );
+      case R.ANSWERING:
+        return /* @__PURE__ */ t.jsx(
+          it,
           {
-            question: g,
-            isLoading: R.phase === l.FETCHING_QUESTION
+            state: L,
+            answeringTime: l,
+            nextPhase: E,
+            sttError: U
           }
-        ),
-        /* @__PURE__ */ r.jsx("div", { className: "iw-bg-white iw-rounded-lg iw-shadow-md iw-p-6", children: ue() }),
-        /* @__PURE__ */ r.jsx(
-          He,
+        );
+      case R.TRANSCRIBING:
+        return /* @__PURE__ */ t.jsx(lt, { sttError: U });
+      case R.EDITING:
+      case R.SUBMITTING:
+        return /* @__PURE__ */ t.jsx("div", { className: "iw-space-y-4 iw-h-full", children: /* @__PURE__ */ t.jsx(
+          et,
           {
-            state: R,
-            defaultTimers: {
-              thinking: p,
-              answering: T,
-              editing: S
-            }
+            value: h,
+            onChange: (F) => u(F.target.value),
+            onSubmit: () => E(),
+            isSubmitDisabled: !h.trim() || K,
+            state: L,
+            editingTime: p
           }
-        ),
-        x && (R.phase === l.THINKING || R.phase === l.ANSWERING || R.phase === l.EDITING) && /* @__PURE__ */ r.jsx($, { onClick: E, children: "Next Phase" }),
-        !x && /* @__PURE__ */ r.jsx("div", { className: "iw-text-center iw-py-12 w-full", children: /* @__PURE__ */ r.jsx(
-          $,
+        ) });
+      case R.COMPLETED:
+        return /* @__PURE__ */ t.jsx("div", { className: "iw-fixed iw-inset-0 iw-bg-white", children: /* @__PURE__ */ t.jsx(
+          at,
           {
-            className: "w-full",
-            style: { backgroundColor: s },
-            onClick: () => {
-              Q(), k(!0);
-            },
-            children: "Start Interview"
+            open: !0,
+            onClose: r || (() => {
+            })
           }
-        ) })
-      ]
+        ) });
+      default:
+        return null;
     }
-  ) });
-}, Je = ({
-  interviewId: i,
-  title: t = "Interview",
-  onInterviewEnd: e,
-  className: a = ""
-}) => {
-  const [s, c] = y(!1), [n, o] = y(!0), m = D(null);
-  if (!s)
-    return /* @__PURE__ */ r.jsx("div", { className: "interview-widget-container", children: /* @__PURE__ */ r.jsx(
-      Se,
+  };
+  return /* @__PURE__ */ t.jsxs("div", { className: "interview-widget-container", children: [
+    /* @__PURE__ */ t.jsx(
+      ht,
       {
-        isOpen: n,
-        onStart: () => {
-          console.log("Permissions granted, starting interview"), c(!0), o(!1);
-        }
+        title: "Interview for Python Developer",
+        onExit: B
       }
-    ) });
-  const g = () => {
-    e == null || e();
-  };
-  return /* @__PURE__ */ r.jsx("div", { className: "interview-widget-container", children: /* @__PURE__ */ r.jsx(
+    ),
+    /* @__PURE__ */ t.jsxs(
+      "div",
+      {
+        className: `iw-p-4 iw-space-y-4 iw-pb-6 ${e}  iw-min-h-[calc(100vh_-_3.8rem)] iw-flex iw-flex-col iw-justify-between`,
+        children: [
+          /* @__PURE__ */ t.jsx("div", { className: "iw-flex iw-items-start iw-justify-between iw-gap-3", children: /* @__PURE__ */ t.jsx("div", { className: "iw-flex-1", children: /* @__PURE__ */ t.jsx(
+            wt,
+            {
+              question: m,
+              isLoading: L.phase === R.FETCHING_QUESTION || L.phase === R.IDLE
+            }
+          ) }) }),
+          /* @__PURE__ */ t.jsxs("div", { className: "iw iw-bg-[#F6F6F6] iw-grid iw-grid-cols-2 iw-rounded-xl iw-p-4", children: [
+            /* @__PURE__ */ t.jsx("div", { className: "iw-min-h-[400px] iw-max-h-[600px]", children: /* @__PURE__ */ t.jsx(Xe, {}) }),
+            /* @__PURE__ */ t.jsx("div", { className: "iw-bg-white iw-rounded-lg iw-shadow iw-p-6", children: re() })
+          ] })
+        ]
+      }
+    )
+  ] });
+}, gt = ({
+  interviewId: i,
+  onInterviewEnd: r,
+  className: e = ""
+}) => {
+  const [o, s] = ce.useState(!1), [c, a] = ce.useState(!0), n = S(null);
+  return o ? /* @__PURE__ */ t.jsx("div", { className: "interview-widget-container", children: /* @__PURE__ */ t.jsx(
     "div",
     {
-      ref: m,
-      className: `iw-flex iw-flex-col iw-rounded-xl iw-shadow-lg iw-overflow-hidden  iw-h-[calc(100vh-1rem)] ${a}`,
-      children: /* @__PURE__ */ r.jsxs("div", { className: " iw-h-full iw-flex iw-flex-col", children: [
-        /* @__PURE__ */ r.jsx(je, { title: t, onExit: g }),
-        /* @__PURE__ */ r.jsx(
-          Ke,
-          {
-            interviewId: i,
-            className: a,
-            onComplete: e || (() => {
-            })
-          }
-        )
-      ] })
+      ref: n,
+      className: `iw-flex iw-flex-col iw-rounded-xl iw-shadow-lg iw-overflow-hidden  iw-h-[calc(100vh-1rem)] ${e}`,
+      children: /* @__PURE__ */ t.jsx("div", { className: " iw-h-full iw-flex iw-flex-col", children: /* @__PURE__ */ t.jsx(
+        mt,
+        {
+          interviewId: i,
+          className: e,
+          onComplete: r || (() => {
+          })
+        }
+      ) })
+    }
+  ) }) : /* @__PURE__ */ t.jsx("div", { className: "interview-widget-container", children: /* @__PURE__ */ t.jsx(
+    Le,
+    {
+      isOpen: c,
+      onStart: () => {
+        console.log("Permissions granted, starting interview"), s(!0), a(!1);
+      }
     }
   ) });
 };
 typeof window < "u" && (window.InterviewWidget = {
-  InterviewWidget: Je,
-  InterviewWidgetProvider: Ne
+  InterviewWidget: gt,
+  InterviewWidgetProvider: Re
 });
 export {
-  Je as InterviewWidget,
-  Ne as InterviewWidgetProvider,
-  Je as default
+  gt as InterviewWidget,
+  Re as InterviewWidgetProvider,
+  gt as default
 };