interview-widget 0.0.8 → 0.1.0

package/dist/widget.es.js

@@ -1,8 +1,9 @@
-var L = Object.defineProperty;
-var q = (i, e, s) => e in i ? L(i, e, { enumerable: !0, configurable: !0, writable: !0, value: s }) : i[e] = s;
-var $ = (i, e, s) => q(i, typeof e != "symbol" ? e + "" : e, s);
-import { useRef as j, useState as m, useEffect as P, useCallback as T, useMemo as H } from "react";
-var M = { exports: {} }, N = {};
+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 = {};
 /**
  * @license React
  * react-jsx-runtime.production.js
@@ -12,56 +13,281 @@ var M = { exports: {} }, N = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var G = Symbol.for("react.transitional.element"), z = Symbol.for("react.fragment");
-function I(i, e, s) {
-  var n = null;
-  if (s !== void 0 && (n = "" + s), e.key !== void 0 && (n = "" + e.key), "key" in e) {
-    s = {};
-    for (var r in e)
-      r !== "key" && (s[r] = e[r]);
-  } else s = e;
-  return e = s.ref, {
-    $$typeof: G,
+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) {
+    e = {};
+    for (var s in t)
+      s !== "key" && (e[s] = t[s]);
+  } else e = t;
+  return t = e.ref, {
+    $$typeof: be,
     type: i,
-    key: n,
-    ref: e !== void 0 ? e : null,
-    props: s
+    key: a,
+    ref: t !== void 0 ? t : null,
+    props: e
   };
 }
-N.Fragment = z;
-N.jsx = I;
-N.jsxs = I;
-M.exports = N;
-var t = M.exports;
-const E = ({
+U.Fragment = ye;
+U.jsx = Z;
+U.jsxs = Z;
+X.exports = U;
+var r = X.exports;
+const C = {
+  api: {
+    baseUrl: "/api",
+    retryConfig: {
+      attempts: 3,
+      backoff: "exponential",
+      baseDelay: 1e3
+    }
+  },
+  ui: {
+    baseColor: "#3B82F6",
+    borderRadius: "8px"
+  },
+  interview: {
+    timers: {
+      thinkingDuration: 30,
+      answeringDuration: 120,
+      editingDuration: 30
+    },
+    stt: {
+      provider: "groq",
+      model: "whisper-large-v3-turbo",
+      language: "en"
+    },
+    tts: {
+      provider: "piper"
+    }
+  }
+}, ee = he(
+  null
+);
+function Ne({
+  config: i = {},
+  children: t
+}) {
+  var a, s, c, n;
+  const e = {
+    api: {
+      ...C.api,
+      ...i.api,
+      retryConfig: {
+        ...C.api.retryConfig,
+        ...(a = i.api) == null ? void 0 : a.retryConfig
+      }
+    },
+    ui: {
+      ...C.ui,
+      ...i.ui
+    },
+    interview: {
+      ...C.interview,
+      ...i.interview,
+      timers: {
+        ...C.interview.timers,
+        ...(s = i.interview) == null ? void 0 : s.timers
+      },
+      stt: {
+        ...C.interview.stt,
+        ...(c = i.interview) == null ? void 0 : c.stt
+      },
+      tts: {
+        ...C.interview.tts,
+        ...(n = i.interview) == null ? void 0 : n.tts
+      }
+    }
+  };
+  return /* @__PURE__ */ r.jsx(ee.Provider, { value: e, children: t });
+}
+function q() {
+  const i = fe(ee);
+  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 F() {
+  return q().ui || C.ui;
+}
+function Ie() {
+  return q().interview || C.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";
+  }), [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)
+      }
+    )
+  ] });
+}, $ = ({
   children: i,
-  variant: e = "primary",
-  size: s = "md",
-  fullWidth: n = !1,
-  isLoading: r = !1,
-  disabled: a,
-  className: o = "",
-  ...l
+  variant: t = "primary",
+  size: e = "md",
+  fullWidth: a = !1,
+  isLoading: s = !1,
+  disabled: c,
+  className: n = "",
+  ...o
 }) => {
-  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", d = {
+  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 = {
     primary: "iw-bg-primary-600 iw-text-white iw-hover:bg-primary-700 iw-border iw-border-transparent",
     secondary: "iw-bg-primary-100 iw-text-primary-700 iw-hover:bg-primary-200 iw-border iw-border-transparent",
     outline: "iw-bg-transparent iw-text-primary-700 iw-border iw-border-primary-500 iw-hover:bg-primary-50",
     text: "iw-bg-transparent iw-text-primary-600 iw-hover:bg-primary-50 iw-border iw-border-transparent",
     gradient: "iw-text-white iw-border iw-border-transparent iw-bg-gradient-to-r iw-from-purple-500 iw-to-indigo-500 hover:iw-from-purple-600 hover:iw-to-indigo-600"
-  }, u = {
+  }, 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"
-  }, h = "iw-disabled:opacity-50 iw-disabled:cursor-not-allowed iw-disabled:pointer-events-none", f = n ? "iw-w-full" : "";
-  return /* @__PURE__ */ t.jsxs(
+  }, u = "iw-disabled:opacity-50 iw-disabled:cursor-not-allowed iw-disabled:pointer-events-none", h = a ? "iw-w-full" : "";
+  return /* @__PURE__ */ r.jsxs(
     "button",
     {
-      className: `${w} ${d[e]} ${u[s]} ${f} ${h} ${o}`,
-      disabled: a || r,
-      ...l,
+      className: `${m} ${g[t]} ${d[e]} ${h} ${u} ${n}`,
+      disabled: c || s,
+      ...o,
       children: [
-        r && /* @__PURE__ */ t.jsxs(
+        s && /* @__PURE__ */ r.jsxs(
           "svg",
           {
             className: "iw-animate-spin iw-mr-2 iw-h-4 iw-w-4 iw-text-white",
@@ -69,7 +295,7 @@ const E = ({
             fill: "none",
             viewBox: "0 0 24 24",
             children: [
-              /* @__PURE__ */ t.jsx(
+              /* @__PURE__ */ r.jsx(
                 "circle",
                 {
                   className: "iw-opacity-25",
@@ -80,7 +306,7 @@ const E = ({
                   strokeWidth: "4"
                 }
               ),
-              /* @__PURE__ */ t.jsx(
+              /* @__PURE__ */ r.jsx(
                 "path",
                 {
                   className: "iw-opacity-75",
@@ -95,165 +321,321 @@ const E = ({
       ]
     }
   );
-}, O = ({
+}, Se = ({
   isOpen: i,
-  onStart: e,
-  onClose: s
+  onStart: t,
+  onClose: e
 }) => {
-  var y;
-  const n = j(null), r = j(null), [a, o] = m(!1), [l, w] = m(null), [d, u] = m(!1), h = () => {
-    r.current && (r.current.getTracks().forEach((c) => c.stop()), r.current = null);
-  }, f = async () => {
-    u(!0), w(null);
+  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);
     try {
-      const c = await navigator.mediaDevices.getUserMedia({
+      const w = await navigator.mediaDevices.getUserMedia({
         video: { width: { ideal: 1280 }, height: { ideal: 720 } },
         audio: !0
       });
-      r.current = c, n.current && (n.current.srcObject = c), o(!0);
-    } catch (c) {
-      console.error("Media permission error:", c);
-      let g = "Unable to access camera or microphone.";
-      (c == null ? void 0 : c.name) === "NotAllowedError" ? g = "Permissions denied. Please allow access to camera and microphone." : (c == null ? void 0 : c.name) === "NotFoundError" ? g = "No camera/microphone found. Please connect a device and retry." : c != null && c.message && (g = c.message), o(!1), w(g);
+      s.current = w, a.current && (a.current.srcObject = w), m(!0);
+    } catch (w) {
+      console.error("Media permission error:", w);
+      let p = "Unable to access camera or microphone.";
+      (w == null ? void 0 : w.name) === "NotAllowedError" ? p = "Permissions denied. Please allow access to camera and microphone." : (w == null ? void 0 : w.name) === "NotFoundError" ? p = "No camera/microphone found. Please connect a device and retry." : w != null && w.message && (p = w.message), m(!1), d(p);
     } finally {
-      u(!1);
+      h(!1);
     }
   };
-  if (P(() => {
+  if (A(() => {
     if (!i) {
-      h();
+      x();
       return;
     }
-    return f(), () => {
-      h();
+    return k(), () => {
+      x();
     };
   }, [i]), !i) return null;
-  const k = () => {
-    e(), h();
+  const j = () => {
+    t(), x();
   };
-  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-3xl 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: "Camera & Microphone Check" }),
-      s && /* @__PURE__ */ t.jsx(
+  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(
         "button",
         {
           "aria-label": "Close",
           className: "iw-text-gray-500 hover:iw-text-gray-700",
           onClick: () => {
-            h(), s == null || s();
+            x(), e == null || e();
           },
           children: "✕"
         }
       )
     ] }),
-    /* @__PURE__ */ t.jsxs("div", { className: "iw-p-4 iw-grid iw-grid-cols-2 iw-gap-4", 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(
+    /* @__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: n,
+          ref: a,
           autoPlay: !0,
           playsInline: !0,
           muted: !0,
           className: "iw-w-full iw-h-64 iw-object-cover"
         }
       ) }),
-      /* @__PURE__ */ t.jsxs("div", { className: "iw-flex iw-flex-col iw-gap-3", children: [
-        /* @__PURE__ */ t.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." }),
-        !((y = navigator.mediaDevices) != null && y.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." }),
-        l && /* @__PURE__ */ t.jsx("div", { className: "iw-text-xs iw-text-red-600", children: l }),
-        /* @__PURE__ */ t.jsxs("div", { className: "iw-flex iw-items-center iw-gap-2", children: [
-          /* @__PURE__ */ t.jsx(
-            E,
+      /* @__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(
+            $,
             {
-              onClick: f,
-              isLoading: d,
+              onClick: k,
+              isLoading: u,
               variant: "outline",
               size: "sm",
-              children: a ? "Recheck Permissions" : "Enable Camera & Mic"
+              style: {
+                borderColor: c,
+                borderRadius: n,
+                color: c
+              },
+              children: o ? "Recheck Permissions" : "Enable Camera & Mic"
             }
           ),
-          /* @__PURE__ */ t.jsx(
-            E,
+          /* @__PURE__ */ r.jsx(
+            $,
             {
-              onClick: k,
-              disabled: !a,
+              onClick: j,
+              disabled: !o,
               size: "sm",
-              children: "Start Interview"
+              style: { backgroundColor: c, borderRadius: n },
+              children: "Proceed"
             }
           )
         ] }),
-        /* @__PURE__ */ t.jsxs("ul", { className: "iw-text-xs iw-text-gray-500 iw-pt-2 iw-list-disc iw-pl-4", children: [
-          /* @__PURE__ */ t.jsx("li", { children: "Your preview is muted to avoid echo." }),
-          /* @__PURE__ */ t.jsx("li", { children: "You can change devices from your browser’s site settings." })
+        /* @__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." })
         ] })
       ] })
     ] })
   ] }) });
-}, Q = ({ title: i }) => /* @__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-bg-purple-500 iw-flex iw-items-center iw-justify-center iw-text-white iw-font-semibold",
-          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-medium", children: i }),
-    /* @__PURE__ */ t.jsx("button", { className: "iw-text-sm iw-text-gray-500 hover:iw-text-gray-700", children: "Exit Interview" })
-  ] }),
-  /* @__PURE__ */ t.jsx("div", { className: "iw-h-px iw-bg-gray-200" })
-] });
-function Y(i, e = {
-  immediate: !0,
-  enabled: !0
-}) {
-  const [s, n] = m({
+};
+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 = {
+  thinkingDuration: 30,
+  answeringDuration: 120,
+  editingDuration: 30,
+  totalInterviewDuration: 600,
+  minimumTimeForNextQuestion: 120
+}, Ce = {
+  idle: {
+    next: "fetching_question"
+    /* FETCHING_QUESTION */
+  },
+  fetching_question: {
+    next: "reading_question"
+    /* READING_QUESTION */
+  },
+  reading_question: {
+    next: "thinking"
+    /* THINKING */
+  },
+  thinking: { next: "answering", duration: 30 },
+  answering: { next: "transcribing", duration: 120 },
+  transcribing: {
+    next: "editing"
+    /* EDITING */
+  },
+  editing: { next: "submitting", duration: 30 },
+  submitting: {
+    next: "completed"
+    /* COMPLETED */
+  },
+  completed: {
+    next: "completed"
+    /* 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 = {
+      phase: "idle",
+      currentPhaseTimeRemaining: 0,
+      totalTimeRemaining: this.config.totalInterviewDuration,
+      totalTimeElapsed: 0,
+      currentQuestionNumber: 0
+    };
+  }
+  /**
+   * Get current state
+   */
+  getState() {
+    return { ...this.state };
+  }
+  /**
+   * 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];
+    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();
+  }
+  /**
+   * Cleanup
+   */
+  destroy() {
+    this.stopPhaseTimer(), this.stopGlobalTimer();
+  }
+  /**
+   * Get duration for a phase
+   */
+  getDurationForPhase(t) {
+    switch (t) {
+      case "thinking":
+        return this.config.thinkingDuration;
+      case "answering":
+        return this.config.answeringDuration;
+      case "editing":
+        return this.config.editingDuration;
+      default:
+        return 0;
+    }
+  }
+  /**
+   * Start global timer (runs continuously during entire interview)
+   */
+  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());
+    }, 1e3);
+  }
+  /**
+   * Stop global timer
+   */
+  stopGlobalTimer() {
+    this.globalIntervalId && (clearInterval(this.globalIntervalId), this.globalIntervalId = null);
+  }
+  /**
+   * Start phase timer (only for timed phases)
+   */
+  startPhaseTimer() {
+    this.phaseIntervalId = setInterval(() => {
+      this.state.currentPhaseTimeRemaining--, this.state.currentPhaseTimeRemaining <= 0 && this.nextPhase();
+    }, 1e3);
+  }
+  /**
+   * Stop phase timer
+   */
+  stopPhaseTimer() {
+    this.phaseIntervalId && (clearInterval(this.phaseIntervalId), this.phaseIntervalId = null);
+  }
+  /**
+   * Notify phase change
+   */
+  notifyChange() {
+    var t, e;
+    (e = (t = this.callbacks).onPhaseChange) == null || e.call(t, 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());
+  }, [s]);
+  A(() => {
+    const d = {
+      onPhaseChange: (u, h) => {
+        var x;
+        o(), (x = e.onPhaseChange) == null || x.call(e, u, h);
+      },
+      onTick: (u) => {
+        var h;
+        o(), (h = e.onTick) == null || h.call(e, u);
+      },
+      onInterviewEnd: () => {
+        var u;
+        o(), (u = e.onInterviewEnd) == null || u.call(e);
+      }
+    };
+    s.callbacks = d;
+  }, [s, e, o]), A(() => () => {
+    s.destroy();
+  }, [s]);
+  const m = v(() => {
+    s.startQuestion(), o();
+  }, [s, o]), g = v(() => {
+    s.nextPhase(), o();
+  }, [s, o]);
+  return {
+    state: c,
+    startQuestion: m,
+    nextPhase: g,
+    timerService: s
+  };
+}
+function Pe(i, t = {}) {
+  const [e, a] = y({
     data: null,
     loading: !1,
     error: null
-  }), r = T(async () => {
-    var o, l;
-    if (e.enabled !== !1) {
-      n((w) => ({ ...w, loading: !0, error: null }));
+  }), s = v(
+    async (...c) => {
+      var n, o, m, g;
+      a((d) => ({ ...d, loading: !0, error: null }));
       try {
-        const w = await i();
-        n((d) => ({
-          ...d,
-          data: w,
+        const d = await i(...c);
+        a((u) => ({
+          ...u,
+          data: d,
           loading: !1,
           error: null
-        })), (o = e.onSuccess) == null || o.call(e, w);
-      } catch (w) {
-        const d = w.type ? w : {
+        })), (n = t.onSuccess) == null || n.call(t, d), (o = t.onSettled) == null || o.call(t, d, null);
+      } catch (d) {
+        const u = d.type ? d : {
           type: "unknown",
-          message: w.message || "Unknown error",
+          message: d.message || "Unknown error",
           retryable: !0,
           userMessage: "Something went wrong. Please try again.",
-          originalError: w
+          originalError: d
         };
-        n((u) => ({
-          ...u,
+        a((h) => ({
+          ...h,
           loading: !1,
-          error: d
-        })), (l = e.onError) == null || l.call(e, d);
+          error: u
+        })), (m = t.onError) == null || m.call(t, u), (g = t.onSettled) == null || g.call(t, null, u);
       }
-    }
-  }, [i, e]), a = T(() => {
-    e.enabled !== !1 && r();
-  }, [r, e.enabled]);
-  return P(() => {
-    (e.immediate && e.enabled !== !1 || e.enabled === !0) && r();
-  }, [e.immediate, e.enabled]), {
-    ...s,
-    execute: r,
-    retry: a
+    },
+    [i, t]
+  );
+  return {
+    ...e,
+    execute: s
   };
 }
-function _(i) {
-  var e;
+function Ae(i) {
+  var t;
   if (!navigator.onLine)
     return {
       type: "network",
@@ -261,7 +643,7 @@ function _(i) {
       retryable: !0,
       userMessage: "Please check your internet connection and try again."
     };
-  if (i.name === "AbortError" || (e = i.message) != null && e.includes("timeout"))
+  if (i.name === "AbortError" || (t = i.message) != null && t.includes("timeout"))
     return {
       type: "timeout",
       message: "Request timed out",
@@ -269,36 +651,36 @@ function _(i) {
       userMessage: "The request is taking longer than expected. Please try again."
     };
   if (i.status) {
-    const { status: s } = i;
-    if (s === 401 || s === 403)
+    const { status: e } = i;
+    if (e === 401 || e === 403)
       return {
         type: "auth",
-        status: s,
+        status: e,
         message: "Authentication failed",
         retryable: !1,
         userMessage: "Your session has expired. Please refresh the page."
       };
-    if (s === 429)
+    if (e === 429)
       return {
         type: "rate-limit",
-        status: s,
+        status: e,
         message: "Too many requests",
         retryable: !0,
         userMessage: "Please wait a moment before trying again."
       };
-    if (s >= 500)
+    if (e >= 500)
       return {
         type: "server",
-        status: s,
-        message: `Server error: ${s}`,
+        status: e,
+        message: `Server error: ${e}`,
         retryable: !0,
         userMessage: "Our servers are experiencing issues. Please try again in a few moments."
       };
-    if (s >= 400)
+    if (e >= 400)
       return {
         type: "client",
-        status: s,
-        message: `Client error: ${s}`,
+        status: e,
+        message: `Client error: ${e}`,
         retryable: !1,
         userMessage: "There was an issue with your request. Please check your input."
       };
@@ -311,329 +693,798 @@ function _(i) {
     originalError: i
   };
 }
-async function x(i, e = {}, s = {
+async function H(i, t = {}, e = {
   attempts: 3,
   backoff: "exponential",
   baseDelay: 1e3,
   maxDelay: 1e4,
   jitter: !0
 }) {
-  let n;
-  for (let r = 1; r <= s.attempts; r++)
+  let a;
+  for (let s = 1; s <= e.attempts; s++)
     try {
-      const a = new AbortController(), o = setTimeout(() => a.abort(), 6e4), l = await fetch(i, {
-        ...e,
-        signal: a.signal
+      const c = new AbortController(), n = setTimeout(() => c.abort(), 6e4), o = await fetch(i, {
+        ...t,
+        signal: c.signal
       });
-      if (clearTimeout(o), l.status >= 400 && l.status < 500 && l.status !== 429)
-        return l;
-      if (!l.ok)
-        throw new Error(`HTTP ${l.status}: ${l.statusText}`);
-      return l;
-    } catch (a) {
-      n = a;
-      const o = _(a);
-      if (!o.retryable || r === s.attempts)
-        throw o;
-      const l = W(r, s);
+      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;
+    } catch (c) {
+      a = c;
+      const n = Ae(c);
+      if (!n.retryable || s === e.attempts)
+        throw n;
+      const o = Ge(s, e);
       console.warn(
-        `API request failed (attempt ${r}/${s.attempts}), retrying in ${l}ms:`,
-        o.message
-      ), await new Promise((w) => setTimeout(w, l));
+        `API request failed (attempt ${s}/${e.attempts}), retrying in ${o}ms:`,
+        n.message
+      ), await new Promise((m) => setTimeout(m, o));
     }
-  throw n;
+  throw a;
 }
-function W(i, e) {
-  let s;
-  return e.backoff === "exponential" ? s = e.baseDelay * Math.pow(2, i - 1) : s = e.baseDelay, s = Math.min(s, e.maxDelay), e.jitter && (s = s * (0.5 + Math.random() * 0.5)), Math.round(s);
+function Ge(i, t) {
+  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);
 }
-class B {
-  constructor(e = "/api", s) {
-    $(this, "baseURL");
-    $(this, "authToken");
-    this.baseURL = e, this.authToken = s;
+class Me {
+  constructor(t = {}) {
+    I(this, "config");
+    this.config = t;
   }
   /**
-   * Set authentication token for API requests
+   * Update configuration
    */
-  setAuthToken(e) {
-    this.authToken = e;
+  updateConfig(t) {
+    this.config = { ...this.config, ...t };
   }
   /**
    * Get default headers for API requests
    */
   getHeaders() {
-    const e = {
-      "Content-Type": "application/json"
+    var e;
+    const t = {
+      "Content-Type": "application/json",
+      "X-Auth-Token": "appkey"
     };
-    return this.authToken && (e.Authorization = `Bearer ${this.authToken}`), e;
+    return (e = this.config) != null && e.authToken && (t.Authorization = `Bearer ${this.config.authToken}`), t;
   }
   /**
-   * Start a new interview session
+   * Get base URL from config with fallback
    */
-  async startInterview(e) {
-    const s = await x(`${this.baseURL}/interviews/start`, {
-      method: "POST",
-      headers: this.getHeaders(),
-      body: JSON.stringify({ candidateId: e })
-    });
-    if (!s.ok)
-      throw new Error(`Failed to start interview: ${s.status}`);
-    return s.json();
+  getBaseUrl() {
+    var t;
+    return ((t = this.config) == null ? void 0 : t.baseUrl) || "/api";
   }
   /**
    * Get questions for an interview
    */
-  async getQuestions(e) {
-    const s = await x(
-      `${this.baseURL}/interviews/${e}/questions`,
+  async generateQuestion({
+    interviewId: t,
+    isInterviewDone: e = !1,
+    qnaId: a,
+    question: s,
+    answer: c,
+    answerDuration: n
+  }) {
+    const o = await H(
+      `${this.getBaseUrl()}/interview/generate-question`,
       {
-        method: "GET",
-        headers: this.getHeaders()
+        method: "POST",
+        headers: this.getHeaders(),
+        body: JSON.stringify({
+          interview_id: t,
+          is_interview_done: e,
+          qna_id: a,
+          question: s,
+          answer: c,
+          // TODO: Hardcoded for now, will be dynamic later
+          answer_duration: n ?? "00:00:30"
+        })
       }
     );
-    if (!s.ok)
-      throw new Error(`Failed to get questions: ${s.status}`);
-    const n = await s.json();
-    return n.questions || n;
+    if (!o.ok)
+      throw new Error(`Failed to get questions: ${o.status}`);
+    return await o.json();
+  }
+}
+function Oe() {
+  const i = q();
+  return xe(() => {
+    const e = i.api || {};
+    return new Me(e);
+  }, [i.api]);
+}
+class b extends Error {
+  constructor(t, e, a = !1) {
+    super(t), this.code = e, this.recoverable = a, 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);
+    this.config = {
+      baseUrl: "http://localhost:8000",
+      provider: "groq",
+      model: "whisper-large-v3-turbo",
+      language: "en",
+      includeTimestamps: !1,
+      temperature: 0,
+      ...t
+    };
   }
   /**
-   * Submit an answer for a question
+   * Update STT configuration
    */
-  async submitAnswer(e) {
-    const s = await x(`${this.baseURL}/answers`, {
-      method: "POST",
-      headers: this.getHeaders(),
-      body: JSON.stringify(e)
-    });
-    if (!s.ok)
-      throw new Error(`Failed to submit answer: ${s.status}`);
+  updateConfig(t) {
+    this.config = { ...this.config, ...t };
   }
   /**
-   * Complete an interview session
+   * Check if browser supports audio recording
    */
-  async completeInterview(e) {
-    const s = await x(
-      `${this.baseURL}/interviews/${e}/complete`,
-      {
-        method: "POST",
-        headers: this.getHeaders()
+  isRecordingSupported() {
+    return !!(navigator.mediaDevices && typeof navigator.mediaDevices.getUserMedia == "function" && window.MediaRecorder);
+  }
+  /**
+   * Start recording audio from user's microphone
+   */
+  async startRecording(t, e) {
+    var a;
+    if (!this.isRecordingSupported())
+      throw new b(
+        "Audio recording is not supported in this browser",
+        "RECORDING_NOT_SUPPORTED",
+        !1
+      );
+    if (this.isRecording())
+      throw new b(
+        "Recording is already in progress",
+        "ALREADY_RECORDING",
+        !0
+      );
+    try {
+      this.recordingStream = await navigator.mediaDevices.getUserMedia({
+        audio: {
+          echoCancellation: !0,
+          noiseSuppression: !0,
+          sampleRate: 44100
+        }
+      }), this.audioChunks = [];
+      const s = this.getSupportedMimeType();
+      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));
+      }, 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(
+          `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(() => {
+        this.isRecording() && this.stopRecording();
+      }, t * 1e3));
+    } catch (s) {
+      if (this.cleanup(), s instanceof Error) {
+        if (s.name === "NotAllowedError" || s.name === "PermissionDeniedError")
+          throw new b(
+            "Microphone permission was denied",
+            "PERMISSION_DENIED",
+            !1
+          );
+        if (s.name === "NotFoundError")
+          throw new b("No microphone found", "NO_MICROPHONE", !1);
       }
-    );
-    if (!s.ok)
-      throw new Error(`Failed to complete interview: ${s.status}`);
-    return s.json();
+      throw new b(
+        `Failed to start recording: ${s instanceof Error ? s.message : String(s)}`,
+        "START_RECORDING_FAILED",
+        !0
+      );
+    }
   }
   /**
-   * Get interview statistics
+   * Stop recording and return the audio blob
    */
-  async getInterviewStats() {
-    const e = await x(`${this.baseURL}/interviews/stats`, {
-      method: "GET",
-      headers: this.getHeaders()
+  async stopRecording() {
+    if (this.autoStopTimeoutId && (clearTimeout(this.autoStopTimeoutId), this.autoStopTimeoutId = null), !this.mediaRecorder || !this.isRecording())
+      throw new b(
+        "No active recording to stop",
+        "NO_ACTIVE_RECORDING",
+        !1
+      );
+    return new Promise((t, e) => {
+      if (!this.mediaRecorder) {
+        e(
+          new b("MediaRecorder is null", "MEDIARECORDER_NULL", !1)
+        );
+        return;
+      }
+      const a = this.mediaRecorder, s = () => {
+        try {
+          const c = a.mimeType || "audio/webm", n = new Blob(this.audioChunks, { type: c });
+          this.cleanup(), t(n);
+        } catch (c) {
+          e(
+            new b(
+              `Failed to create audio blob: ${c instanceof Error ? c.message : String(c)}`,
+              "BLOB_CREATION_FAILED",
+              !1
+            )
+          );
+        }
+      };
+      a.addEventListener("stop", s, { once: !0 }), a.stop();
     });
-    if (!e.ok)
-      throw new Error(`Failed to get stats: ${e.status}`);
-    return e.json();
   }
   /**
-   * Get interview session details
+   * Transcribe audio blob using the STT API
    */
-  async getInterviewSession(e) {
-    const s = await x(
-      `${this.baseURL}/interviews/${e}`,
-      {
-        method: "GET",
-        headers: this.getHeaders()
+  async transcribe(t) {
+    const {
+      audioBlob: e,
+      model: a = this.config.model,
+      language: s = this.config.language,
+      includeTimestamps: c = this.config.includeTimestamps,
+      temperature: n = this.config.temperature
+    } = t;
+    if (!e || e.size === 0)
+      throw new b(
+        "Audio blob is empty or invalid",
+        "INVALID_AUDIO",
+        !1
+      );
+    try {
+      const o = new FormData(), m = 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(
+        `${this.config.baseUrl}/speech/transcribe`,
+        {
+          method: "POST",
+          headers: {
+            accept: "application/json",
+            "X-STT-Provider": this.config.provider || "groq"
+          },
+          body: o
+        },
+        {
+          attempts: 1,
+          backoff: "exponential",
+          baseDelay: 1e3,
+          maxDelay: 3e3,
+          jitter: !0
+        }
+      );
+      if (!g.ok) {
+        const u = await g.text();
+        let h = `STT request failed: ${g.status} ${g.statusText}`;
+        try {
+          const x = JSON.parse(u);
+          h = x.message || x.error || h;
+        } catch {
+          h = u || h;
+        }
+        throw new b(
+          h,
+          `HTTP_${g.status}`,
+          g.status >= 500
+        );
       }
-    );
-    if (!s.ok)
-      throw new Error(`Failed to get session: ${s.status}`);
-    return s.json();
+      return {
+        transcript: (await g.json()).data.text ?? ""
+      };
+    } catch (o) {
+      throw o instanceof b ? o : new b(
+        `Transcription failed: ${o instanceof Error ? o.message : String(o)}`,
+        "TRANSCRIPTION_FAILED",
+        !0
+      );
+    }
   }
   /**
-   * Get Products
-   * Fake API example
-   * This API endpoint retrieves a list of products from the fake store API.
+   * Cancel current recording without processing
    */
-  async getProducts() {
-    const e = await x(`${this.baseURL}/products`, {
-      method: "GET",
-      headers: this.getHeaders()
-    });
-    if (!e.ok)
-      throw new Error(`Failed to get products: ${e.status}`);
-    return e.json();
-  }
-  // Delete product
-  async deleteProduct(e) {
-    const s = await x(
-      `${this.baseURL}/products/${e}`,
-      {
-        method: "DELETE",
-        headers: this.getHeaders()
-      }
-    );
-    if (!s.ok)
-      throw new Error(`Failed to delete product: ${s.status}`);
+  cancelRecording() {
+    this.autoStopTimeoutId && (clearTimeout(this.autoStopTimeoutId), this.autoStopTimeoutId = null), this.mediaRecorder && this.isRecording() && this.mediaRecorder.stop(), this.cleanup();
+  }
+  /**
+   * Check if currently recording
+   */
+  isRecording() {
+    return this.mediaRecorder !== null && this.mediaRecorder.state === "recording";
+  }
+  /**
+   * Get supported MIME type for recording
+   */
+  getSupportedMimeType() {
+    const t = [
+      "audio/webm",
+      "audio/webm;codecs=opus",
+      "audio/ogg;codecs=opus",
+      "audio/mp4",
+      "audio/wav"
+    ];
+    for (const e of t)
+      if (MediaRecorder.isTypeSupported(e))
+        return e;
+    return "audio/webm";
+  }
+  /**
+   * 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);
   }
 }
-const S = new B("https://fakestoreapi.com"), J = ({ question: i }) => {
-  console.log("🚀 ~ question:", i);
-  const {
-    data: e,
-    loading: s,
-    retry: n
-  } = Y(() => S.getProducts(), {
-    immediate: !0,
-    onSuccess: (a) => {
-      console.log("Products loaded:", a);
+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;
+    try {
+      m(null), n(null), d(null), await O.startRecording(j, {
+        onStart: () => {
+          var w;
+          e(!0), (w = i.onStart) == null || w.call(i);
+        },
+        onStop: () => {
+          var w;
+          e(!1), (w = i.onStop) == null || w.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);
+        }
+      });
+    } catch (w) {
+      const p = w instanceof b ? w : new b(
+        w instanceof Error ? w.message : String(w),
+        "START_FAILED",
+        !1
+      );
+      throw m(p), e(!1), (N = i.onError) == null || N.call(i, p), p;
+    }
+  }, []), h = v(async () => {
+    var j, N;
+    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),
+        "STOP_FAILED",
+        !1
+      );
+      throw m(p), e(!1), (N = i.onError) == null || N.call(i, p), p;
+    }
+  }, []), x = v(
+    async (j, N = {}) => {
+      var w, 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),
+          "TRANSCRIPTION_FAILED",
+          !0
+        );
+        throw m(S), s(!1), (p = i.onError) == null || p.call(i, S), S;
+      }
     },
-    onError: (a) => {
-      console.error("Failed to load products:", a.userMessage);
+    []
+  ), k = v(() => {
+    O.cancelRecording(), e(!1), d(null);
+  }, []);
+  return {
+    startRecording: u,
+    stopRecording: h,
+    transcribe: x,
+    cancelRecording: k,
+    isRecording: t,
+    isTranscribing: a,
+    transcript: c,
+    error: o,
+    audioBlob: g
+  };
+};
+class Le {
+  constructor(t = {}) {
+    I(this, "config");
+    I(this, "currentAudio", null);
+    this.config = {
+      baseUrl: "http://localhost:8000",
+      provider: "piper",
+      voice: "string",
+      speed: 1,
+      ...t
+    };
+  }
+  /**
+   * Update TTS configuration
+   */
+  updateConfig(t) {
+    this.config = { ...this.config, ...t };
+  }
+  /**
+   * Get TTS audio from the API and return as blob
+   */
+  async synthesizeSpeech(t) {
+    const {
+      text: e,
+      voice: a = 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(
+      `${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"
+        },
+        body: c
+      },
+      {
+        attempts: 1,
+        backoff: "fixed",
+        baseDelay: 1e3,
+        maxDelay: 1e3,
+        jitter: !1
+      }
+    );
+    if (!n.ok)
+      throw new Error(
+        `TTS request failed: ${n.status} ${n.statusText}`
+      );
+    const o = n.headers.get("content-type");
+    if (o && o.includes("audio/"))
+      return n.blob();
+    try {
+      const m = await n.json();
+      throw new Error(`TTS Error: ${JSON.stringify(m)}`);
+    } catch {
+      throw new Error("TTS request failed with unknown error");
     }
-  }), r = async (a) => {
+  }
+  /**
+   * Speak text and return a promise that resolves when playback completes
+   */
+  async speak(t, e) {
+    var a, s;
     try {
-      await S.deleteProduct(a), console.log(`Product ${a} deleted successfully`), n();
-    } catch (o) {
-      console.error("Failed to delete product:", o);
+      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) => {
+        if (!this.currentAudio) {
+          m(new Error("Audio element not created"));
+          return;
+        }
+        const g = this.currentAudio;
+        g.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);
+        });
+      });
+    } 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;
     }
+  }
+  /**
+   * Stop current audio playback
+   */
+  stop() {
+    this.currentAudio && (this.currentAudio.pause(), this.currentAudio.currentTime = 0, this.currentAudio = null);
+  }
+  /**
+   * Check if audio is currently playing
+   */
+  isPlaying() {
+    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;
+      try {
+        n(null), s(!0);
+        const h = {
+          text: g,
+          ...d
+        };
+        await B.speak(h, {
+          onStart: () => {
+            var x;
+            s(!1), e(!0), (x = i.onStart) == null || x.call(i);
+          },
+          onEnd: () => {
+            var x;
+            e(!1), (x = i.onEnd) == null || x.call(i);
+          },
+          onError: (x) => {
+            var k;
+            e(!1), s(!1), n(x), (k = i.onError) == null || k.call(i, x);
+          }
+        });
+      } 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;
+      }
+    },
+    [i]
+  ), m = v(() => {
+    B.stop(), e(!1), s(!1);
+  }, []);
+  return {
+    speak: o,
+    stop: m,
+    isPlaying: t,
+    isLoading: a,
+    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"
   };
-  return /* @__PURE__ */ t.jsxs(
+}
+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;
+  }
+  const g = i.currentPhaseTimeRemaining > 0;
+  return /* @__PURE__ */ r.jsxs(
     "div",
     {
-      className: "iw-rounded-xl iw-mb-4 message-animation iw-bg-gradient-to-b iw-from-indigo-50 iw-to-white iw-text-gray-800 iw-border iw-border-indigo-100 iw-p-5",
-      style: {
-        // Fallback styles in case CSS classes don't load properly
-        background: "linear-gradient(to bottom, #eef2ff, #ffffff)",
-        border: "1px solid #e0e7ff",
-        color: "#1f2937"
-      },
+      className: `iw-iw-bg-white iw-rounded-lg iw-shadow-md iw-p-4 iw-border iw-border-gray-200 ${t}`,
       children: [
-        /* @__PURE__ */ t.jsxs("div", { className: "iw-flex iw-items-center iw-space-x-3 iw-mb-3", children: [
-          /* @__PURE__ */ t.jsx(
+        /* @__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",
+                {
+                  className: `iw-px-3 iw-py-1.5 iw-rounded-md iw-font-medium  ${n(
+                    i.phase
+                  )}`,
+                  children: i.phase
+                }
+              )
+            ] }),
+            /* @__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",
+          {
+            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}%`
+            }
+          }
+        ) }) }),
+        /* @__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-12 iw-w-12 iw-rounded-lg iw-bg-purple-500 iw-flex iw-items-center iw-justify-center iw-text-white iw-font-semibold",
-              children: "N"
+              className: `iw-h-full ${c(
+                i.phase
+              )} iw-transition-all iw-duration-300`,
+              style: {
+                width: `${i.currentPhaseTimeRemaining / m(i.phase) * 100}%`
+              }
             }
-          ),
-          /* @__PURE__ */ t.jsxs("div", { children: [
-            /* @__PURE__ */ t.jsx("div", { className: "iw-text-sm iw-font-semibold", children: "Novara" }),
-            /* @__PURE__ */ t.jsx("div", { className: "iw-text-xs iw-text-gray-500", children: "Assistant" })
-          ] })
+          ) })
         ] }),
-        s ? /* @__PURE__ */ t.jsx("p", { children: "Loading products..." }) : /* @__PURE__ */ t.jsx("ul", { className: "iw-list-disc iw-pl-5 iw-space-y-1", children: e == null ? void 0 : e.slice(0, 10).map((a) => /* @__PURE__ */ t.jsxs(
-          "li",
-          {
-            className: "iw-cursor-pointer",
-            onClick: () => r(a.id),
-            children: [
-              /* @__PURE__ */ t.jsx("span", { className: "iw-font-medium", children: a.title }),
-              " - $",
-              a.price
-            ]
-          },
-          a.id
-        )) })
+        /* @__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) }) })
       ]
     }
   );
-}, V = ({ className: i = "" }) => {
-  const e = j(null);
-  return P(() => {
-    let s = null;
-    return (async () => {
-      try {
-        s = await navigator.mediaDevices.getUserMedia({
-          video: !0,
-          audio: !1
-        }), e.current && (e.current.srcObject = s);
-      } catch (r) {
-        console.error("Error accessing camera:", r);
-      }
-    })(), () => {
-      s && s.getTracks().forEach((r) => r.stop());
-    };
-  }, []), /* @__PURE__ */ t.jsx("div", { className: `iw-relative ${i}`, children: /* @__PURE__ */ t.jsx(
-    "video",
-    {
-      ref: e,
-      autoPlay: !0,
-      playsInline: !0,
-      muted: !0,
-      className: "iw-w-full iw-h-full iw-object-cover iw-rounded-md"
-    }
-  ) });
-}, X = ({
+}, We = ({
   label: i,
-  error: e,
-  fullWidth: s = !1,
-  className: n = "",
-  id: r,
-  ...a
+  error: t,
+  fullWidth: e = !1,
+  className: a = "",
+  id: s,
+  ...c
 }) => {
-  const o = r || `textarea-${Math.random().toString(36).substring(2, 9)}`, l = "iw-block iw-rounded-md iw-border iw-border-gray-300 iw-shadow-sm iw-px-4 iw-py-2 iw-text-sm iw-focus:border-primary-500 iw-focus:ring-primary-500 iw-focus:outline-none iw-transition-all", w = e ? "iw-border-red-500 iw-focus:border-red-500 iw-focus:ring-red-500" : "", d = s ? "iw-w-full" : "", u = n.includes("iw-h-full") ? "iw-h-full" : "";
-  return /* @__PURE__ */ t.jsxs(
+  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(
     "div",
     {
-      className: `${s ? "iw-w-full iw-h-full" : ""} ${u ? "iw-flex iw-flex-col" : ""}`,
+      className: `${e ? "iw-w-full iw-h-full" : ""} ${d ? "iw-flex iw-flex-col" : ""}`,
       children: [
-        i && /* @__PURE__ */ t.jsx(
+        i && /* @__PURE__ */ r.jsx(
           "label",
           {
-            htmlFor: o,
+            htmlFor: n,
             className: "iw-block iw-text-sm iw-font-medium iw-text-gray-700 iw-mb-1",
             children: i
           }
         ),
-        /* @__PURE__ */ t.jsx(
+        /* @__PURE__ */ r.jsx(
           "textarea",
           {
-            id: o,
-            className: `${l} ${w} ${d} ${u} ${n}`,
-            "aria-invalid": e ? "true" : "false",
-            ...a
+            id: n,
+            className: `${o} ${m} ${g} ${d} ${a}`,
+            "aria-invalid": t ? "true" : "false",
+            ...c
           }
         ),
-        e && /* @__PURE__ */ t.jsx("p", { className: "iw-mt-1 iw-text-sm iw-text-red-600", children: e })
+        t && /* @__PURE__ */ r.jsx("p", { className: "iw-mt-1 iw-text-sm iw-text-red-600", children: t })
       ]
     }
   );
-}, Z = ({
+}, ze = ({
   value: i,
-  onChange: e,
-  onSubmit: s,
-  isSubmitDisabled: n,
-  remainingTimeText: r
+  onChange: t,
+  onSubmit: e,
+  isSubmitDisabled: a,
+  remainingTimeText: s
 }) => {
-  const a = (o) => {
-    o.key === "Enter" && (o.ctrlKey || o.metaKey) && !n && (o.preventDefault(), s());
+  const c = (n) => {
+    n.key === "Enter" && (n.ctrlKey || n.metaKey) && !a && (n.preventDefault(), e());
   };
-  return /* @__PURE__ */ t.jsx("div", { className: "iw-mt-auto", children: /* @__PURE__ */ t.jsxs("div", { className: "iw-rounded-xl iw-overflow-hidden iw-border iw-border-gray-200", children: [
-    /* @__PURE__ */ t.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__ */ t.jsx("div", { className: "iw-text-sm iw-font-medium", children: "Your answer" }),
-      r && /* @__PURE__ */ t.jsx("div", { className: "iw-text-xs iw-text-gray-500", children: r })
+  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 })
     ] }),
-    /* @__PURE__ */ t.jsx(
-      X,
+    /* @__PURE__ */ r.jsx(
+      We,
       {
         value: i,
-        onChange: e,
-        onKeyDown: a,
+        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
       }
     ),
-    /* @__PURE__ */ t.jsxs("div", { className: "iw-p-2 iw-flex iw-justify-between iw-items-center iw-bg-gray-50", children: [
-      /* @__PURE__ */ t.jsx("div", { className: "iw-text-xs iw-text-gray-500", children: /* @__PURE__ */ t.jsx("kbd", { children: " Press Ctrl+Enter to submit" }) }),
-      /* @__PURE__ */ t.jsx(
-        E,
+    /* @__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(
+        $,
         {
-          onClick: s,
-          disabled: n,
+          onClick: e,
+          disabled: a,
           size: "sm",
           variant: "gradient",
           children: "Submit Answer"
@@ -641,72 +1492,383 @@ const S = new B("https://fakestoreapi.com"), J = ({ question: i }) => {
       )
     ] })
   ] }) });
-}, K = ({
-  title: i = "Interview",
-  questions: e = [],
-  onComplete: s,
-  onAnswerSubmit: n,
-  className: r = ""
+}, Ye = ({
+  question: i,
+  isLoading: t = !1
 }) => {
-  const [a, o] = m(0), [l, w] = m([]), [d, u] = m(""), [h, f] = m(!1), [k, y] = m(!0), [c, g] = m(!1), [C] = m(!0), R = j(null), p = e[a], A = () => {
-    const b = {
-      questionId: (p == null ? void 0 : p.id) || "",
-      answerText: d,
-      timestamp: /* @__PURE__ */ new Date()
-    };
-    w([...l, b]), n && n(b), a < e.length - 1 ? (o((v) => v + 1), u("")) : (f(!0), s && s(l));
-  }, D = H(() => {
-    const v = 60 - Math.floor(Date.now() / 1e3 % 60), F = Math.floor(v / 60).toString().padStart(2, "0"), U = (v % 60).toString().padStart(2, "0");
-    return `Time to Talk: ${F}:${U} min`;
-  }, [a]);
-  return c ? /* @__PURE__ */ t.jsx("div", { className: "interview-widget-container", children: /* @__PURE__ */ t.jsx(
+  const { baseColor: e } = F();
+  return t ? /* @__PURE__ */ r.jsxs(
     "div",
     {
-      ref: R,
-      className: `iw-flex iw-flex-col iw-rounded-xl iw-shadow-lg iw-overflow-hidden  iw-h-[calc(100vh-1rem)] ${r}`,
-      children: /* @__PURE__ */ t.jsxs("div", { className: " iw-h-full iw-flex iw-flex-col", children: [
-        /* @__PURE__ */ t.jsx(Q, { title: i }),
-        /* @__PURE__ */ t.jsx("div", { className: "iw-flex iw-flex-col iw-flex-grow iw-overflow-hidden iw-px-4 iw-py-5", children: h ? /* @__PURE__ */ t.jsxs("div", { className: "iw-flex iw-flex-col iw-items-center iw-justify-center iw-h-full", children: [
-          /* @__PURE__ */ t.jsx("div", { className: "iw-text-xl iw-font-bold iw-mb-2", children: "Interview Complete!" }),
-          /* @__PURE__ */ t.jsx("p", { className: "iw-text-center iw-mb-4", children: "Thank you for participating in this interview." })
-        ] }) : /* @__PURE__ */ t.jsxs("div", { className: "iw-h-full iw-flex iw-flex-col ", children: [
-          /* @__PURE__ */ t.jsx("div", { className: "iw-flex-1", children: p && /* @__PURE__ */ t.jsx(J, { question: p }) }),
-          /* @__PURE__ */ t.jsxs("div", { className: "iw-grid iw-grid-cols-2 iw-gap-4 iw-mt-4", children: [
-            C && /* @__PURE__ */ t.jsx(
-              "div",
-              {
-                className: "iw-mt-2 iw-border iw-border-gray-200 iw-rounded-xl iw-p-2",
-                children: /* @__PURE__ */ t.jsx(V, { className: "iw-w-full iw-h-[400px]" })
-              }
-            ),
-            /* @__PURE__ */ t.jsx(
-              Z,
-              {
-                value: d,
-                onChange: (b) => u(b.target.value),
-                onSubmit: A,
-                isSubmitDisabled: !d.trim() || !c,
-                remainingTimeText: D
-              }
-            )
+      className: "iw-rounded-xl iw-mb-4  iw-p-5",
+      style: {
+        background: "linear-gradient(to bottom, #eef2ff, #ffffff)",
+        border: "1px solid #e0e7ff",
+        color: "#1f2937"
+      },
+      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" })
+        ] })
+      ]
+    }
+  ) : i ? /* @__PURE__ */ r.jsxs(
+    "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-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"
+            }
+          ),
+          /* @__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.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" })
+    }
+  );
+}, Ke = ({
+  interviewId: i,
+  onComplete: t,
+  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({
+    config: {
+      baseUrl: c,
+      provider: m == null ? void 0 : m.provider
+    },
+    onEnd: () => {
+      console.log("TTS playback completed"), _.current = !1, E();
+    },
+    onError: (f) => {
+      console.error("TTS Error:", f), _.current || (_.current = !0, E());
+    }
+  }), G = D(!1), L = D(!1), {
+    startRecording: z,
+    stopRecording: Y,
+    transcribe: K,
+    isRecording: ne,
+    isTranscribing: ae,
+    error: M
+  } = _e({
+    config: {
+      baseUrl: c,
+      provider: o == null ? void 0 : o.provider,
+      model: o == null ? void 0 : o.model,
+      language: o == null ? void 0 : o.language
+    },
+    onStart: () => {
+      console.log("STT recording started"), G.current = !1, L.current = !1;
+    },
+    onStop: () => {
+      console.log("STT recording stopped");
+    },
+    onTranscriptionComplete: (f) => {
+      console.log("Transcription completed:", f), h(f.transcript), L.current || (L.current = !0, E());
+    },
+    onError: (f) => {
+      console.error("STT Error:", f), G.current || (G.current = !0, E());
+    }
+  }), { state: R, startQuestion: Q, nextPhase: E } = De({
+    config: {
+      thinkingDuration: p,
+      answeringDuration: T,
+      editingDuration: S,
+      totalInterviewDuration: ie,
+      minimumTimeForNextQuestion: re
+    },
+    callbacks: {
+      onPhaseChange: (f) => {
+        switch (console.log("Phase changed:", f), f) {
+          case l.FETCHING_QUESTION:
+            oe();
+            break;
+          case l.READING_QUESTION:
+            le();
+            break;
+          case l.ANSWERING:
+            de();
+            break;
+          case l.TRANSCRIBING:
+            we();
+            break;
+          case l.SUBMITTING:
+            ce();
+            break;
+        }
+      },
+      onInterviewEnd: () => {
+        t == null || t();
+      }
     }
-  ) }) : /* @__PURE__ */ t.jsx("div", { className: "interview-widget-container iw-h-screen iw-w-screen", children: /* @__PURE__ */ t.jsx(
-    O,
+  }), { execute: oe } = Pe(
+    async () => {
+      var P, J;
+      const f = await a.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
+      });
+      return N.current = f.data, f;
+    },
     {
-      isOpen: k,
-      onStart: () => {
-        console.log("Permissions granted, starting interview"), g(!0), y(!1);
+      onSuccess: async (f) => {
+        console.log("Questions fetched successfully", f), f && f.data && (h(""), 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 () => {
+    var f;
+    if ((f = N.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);
+      }
+    else
+      E();
+  }, []), de = v(async () => {
+    console.log("Starting recording...");
+    try {
+      const f = T;
+      console.log("🚀 ~ maxDuration:", f), await z(f);
+    } catch (f) {
+      console.error("Failed to start recording:", f), E();
+    }
+  }, [z, E]), we = v(async () => {
+    console.log("Stopping recording and processing STT...");
+    try {
+      const f = await Y();
+      console.log("Recording stopped, audio blob size:", f.size), await K(f);
+    } catch (f) {
+      console.error("STT processing failed:", f), !G.current && !L.current && (G.current = !0, E());
+    }
+  }, [Y, K, E]), ue = () => {
+    const { phase: f } = R;
+    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,
+          {
+            value: u,
+            onChange: (P) => h(P.target.value),
+            onSubmit: () => E(),
+            isSubmitDisabled: !u.trim(),
+            remainingTimeText: `${R.currentPhaseTimeRemaining}s remaining`
+          }
+        ) });
+      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,
+          {
+            question: g,
+            isLoading: R.phase === l.FETCHING_QUESTION
+          }
+        ),
+        /* @__PURE__ */ r.jsx("div", { className: "iw-bg-white iw-rounded-lg iw-shadow-md iw-p-6", children: ue() }),
+        /* @__PURE__ */ r.jsx(
+          He,
+          {
+            state: R,
+            defaultTimers: {
+              thinking: p,
+              answering: T,
+              editing: S
+            }
+          }
+        ),
+        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(
+          $,
+          {
+            className: "w-full",
+            style: { backgroundColor: s },
+            onClick: () => {
+              Q(), k(!0);
+            },
+            children: "Start Interview"
+          }
+        ) })
+      ]
+    }
+  ) });
+}, 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,
+      {
+        isOpen: n,
+        onStart: () => {
+          console.log("Permissions granted, starting interview"), c(!0), o(!1);
+        }
+      }
+    ) });
+  const g = () => {
+    e == null || e();
+  };
+  return /* @__PURE__ */ r.jsx("div", { className: "interview-widget-container", children: /* @__PURE__ */ r.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 || (() => {
+            })
+          }
+        )
+      ] })
+    }
   ) });
 };
 typeof window < "u" && (window.InterviewWidget = {
-  InterviewWidget: K
+  InterviewWidget: Je,
+  InterviewWidgetProvider: Ne
 });
 export {
-  K as InterviewWidget,
-  K as default
+  Je as InterviewWidget,
+  Ne as InterviewWidgetProvider,
+  Je as default
 };