@hoosei/voxweave-react/dist/esm/index11.js

A customizable and interactive voice UI component for React applications

import { useState as c, useEffect as u, useCallback as S } from "react";
import { Button as x } from "./index6.js";
import { Popover as k, PopoverTrigger as z, PopoverContent as B } from "./index55.js";
import { Command as E, CommandGroup as O, CommandItem as A } from "./index56.js";
import { jsxs as n, jsx as e } from "react/jsx-runtime";
import G from "./index45.js";
import H from "./index43.js";
import T from "./index18.js";
import U from "./index17.js";
function Z({
  isListening: i,
  onStartCall: f,
  onClose: l,
  audioData: m,
  agentAudioData: h,
  agentStatus: d,
  darkMode: v,
  startCallLabel: b,
  endCallLabel: y
}) {
  const [w, N] = c([]), [C, p] = c(null), [I, g] = c(!1), [D, $] = c(Array(8).fill(2));
  u(() => {
    (async () => {
      try {
        await navigator.mediaDevices.getUserMedia({
          audio: !0
        });
        const t = (await navigator.mediaDevices.enumerateDevices()).filter((r) => r.kind === "audioinput").map((r) => ({
          deviceId: r.deviceId,
          label: r.label || `Microphone ${r.deviceId.slice(0, 5)}...`
        }));
        N(t), t.length > 0 && p(t[0]);
      } catch (a) {
        console.error("Error accessing audio devices:", a);
      }
    })();
  }, []);
  const M = S((o, a) => {
    if (!i) return 0;
    let t = o, r = 2;
    if (d === "speaking" && a && (t = a, r = 1.6), !t || t.length === 0) return 0;
    const s = t.reduce((F, P) => F + P, 0);
    if (s === 0)
      return 0;
    const j = s / t.length;
    return Math.pow(j / 255, 1.2) * r;
  }, [i, d]);
  return u(() => {
    const o = M(m, h);
    $((a) => a.map(() => {
      if (o === 0) return 1;
      const t = Math.random() * 2.5, r = o * 55, s = Math.max(2, r * t);
      return Math.min(s, 24);
    }));
  }, [i, m, h]), /* @__PURE__ */ n("div", {
    className: "vox:flex vox:items-center vox:gap-3",
    children: [/* @__PURE__ */ n("div", {
      className: `vox:bg-${v ? "gray-800" : "white"} vox:rounded-full vox:py-2.5 vox:px-4 vox:flex vox:items-center vox:gap-3 vox:shadow-sm`,
      children: [/* @__PURE__ */ n(k, {
        open: I,
        onOpenChange: g,
        children: [/* @__PURE__ */ e(z, {
          asChild: !0,
          children: /* @__PURE__ */ e(x, {
            variant: "ghost",
            size: "icon",
            className: "vox:h-5 vox:w-5 vox:p-0 hover:vox:bg-transparent",
            "aria-label": "Select a microphone",
            children: /* @__PURE__ */ e(G, {
              className: `vox:h-5 vox:w-5 ${v ? "vox:text-gray-300" : "vox:text-gray-600"}`
            })
          })
        }), /* @__PURE__ */ e(B, {
          className: "vox:w-[200px] vox:p-0",
          align: "start",
          children: /* @__PURE__ */ e(E, {
            children: /* @__PURE__ */ e(O, {
              heading: "Select Microphone",
              children: w.map((o) => /* @__PURE__ */ n(A, {
                onSelect: () => {
                  p(o), g(!1);
                },
                className: "vox:flex vox:items-center vox:justify-between",
                children: [/* @__PURE__ */ e("span", {
                  className: "vox:truncate",
                  children: o.label
                }), C?.deviceId === o.deviceId && /* @__PURE__ */ e(H, {
                  className: "vox:h-4 vox:w-4 vox:text-green-600"
                })]
              }, o.deviceId))
            })
          })
        })]
      }), /* @__PURE__ */ e("div", {
        className: "vox:flex vox:items-end vox:gap-0.5 vox:h-6",
        children: D.map((o, a) => /* @__PURE__ */ e("div", {
          className: `vox:w-1 ${v ? "vox:bg-gray-400" : "vox:bg-gray-600"} vox:rounded-full vox:transition-all vox:duration-100`,
          style: {
            height: `${o}px`
          }
        }, a))
      }), /* @__PURE__ */ e(x, {
        variant: "ghost",
        size: "icon",
        className: "vox:h-5 vox:w-5 vox:p-0 hover:vox:bg-transparent",
        onClick: l,
        children: /* @__PURE__ */ e(T, {
          className: `vox:h-5 vox:w-5 ${v ? "vox:text-gray-300" : "vox:text-gray-600"}`
        })
      })]
    }), /* @__PURE__ */ n(x, {
      className: `vox:inline-flex vox:justify-center vox:items-center vox:gap-1 vox:px-3 vox:py-1 vox:rounded-full vox:text-xs vox:transition vox:duration-300 vox:ease-in-out ${v ? "vox:bg-gray-700 vox:text-white hover:vox:bg-gray-600" : "vox:bg-black vox:text-white hover:vox:bg-gray-700"}`,
      size: "sm",
      onClick: i ? l : f,
      children: [/* @__PURE__ */ e(U, {
        className: "vox:w-3 vox:h-3",
        "aria-hidden": "true"
      }), i ? y : b]
    })]
  });
}
export {
  Z as VoxweaveMinimal
};
//# sourceMappingURL=index11.js.map