rapida-react/dist/components/device-selector.mjs

An easy to use react client for building generative ai application using Rapida platform.

import {
  useSelectInputDeviceAgent
} from "../chunk-FHDCWUKE.mjs";
import "../chunk-5UOY4SG5.mjs";
import {
  cn
} from "../chunk-32YFHJN5.mjs";

// src/components/device-selector.tsx
import { useEffect, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
var DeviceSelector = () => {
  const [showMenu, setShowMenu] = useState(false);
  const deviceSelect = useSelectInputDeviceAgent({});
  const [selectedDeviceName, setSelectedDeviceName] = useState("");
  useEffect(() => {
    deviceSelect.devices.forEach((device) => {
      if (device.deviceId === deviceSelect.activeDeviceId) {
        setSelectedDeviceName(device.label);
      }
    });
  }, [deviceSelect.activeDeviceId, deviceSelect.devices, selectedDeviceName]);
  useEffect(() => {
    const handleClickOutside = (_) => {
      if (showMenu) {
        setShowMenu(false);
      }
    };
    document.addEventListener("click", handleClickOutside);
    return () => {
      document.removeEventListener("click", handleClickOutside);
    };
  }, [showMenu]);
  const activeClassName = showMenu ? "rotate-180" : "rotate-0";
  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
    /* @__PURE__ */ jsx(
      "button",
      {
        className: `flex hover:opacity-50 ${activeClassName} transition-all duration-100`,
        onClick: (e) => {
          setShowMenu(!showMenu);
          e.stopPropagation();
        },
        children: /* @__PURE__ */ jsx(ChevronSVG, {})
      }
    ),
    /* @__PURE__ */ jsx(
      "div",
      {
        className: "absolute left-0 bottom-7 text-left rounded-md border z-10 w-[280px] shadow-lg",
        style: {
          display: showMenu ? "block" : "none"
        },
        children: deviceSelect.devices.map((device, index) => {
          return /* @__PURE__ */ jsx(
            "div",
            {
              onClick: (e) => {
                e.stopPropagation();
                deviceSelect.setActiveMediaDevice(device.deviceId);
                setShowMenu(false);
              },
              className: cn(
                device.deviceId === deviceSelect.activeDeviceId && "!text-blue-800",
                "text-gray-900",
                "text-xl",
                "bg-white text-xs py-2 px-2 cursor-pointer hover:bg-gray-200 hover:text-gray-600 rounded-md"
              ),
              children: device.label
            },
            index
          );
        })
      }
    )
  ] });
};
var ChevronSVG = () => /* @__PURE__ */ jsx(
  "svg",
  {
    xmlns: "http://www.w3.org/2000/svg",
    width: "16",
    height: "16",
    viewBox: "0 0 16 16",
    fill: "none",
    children: /* @__PURE__ */ jsx(
      "path",
      {
        d: "M13.3334 6L8.00003 11.3333L2.66669 6",
        stroke: "currentColor",
        strokeWidth: "2"
      }
    )
  }
);
export {
  DeviceSelector
};
//# sourceMappingURL=device-selector.mjs.map