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

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

{"version":3,"sources":["../../src/components/device-selector.tsx"],"sourcesContent":["/*\n *  Copyright (c) 2024. Rapida\n *\n *  Permission is hereby granted, free of charge, to any person obtaining a copy\n *  of this software and associated documentation files (the \"Software\"), to deal\n *  in the Software without restriction, including without limitation the rights\n *  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n *  copies of the Software, and to permit persons to whom the Software is\n *  furnished to do so, subject to the following conditions:\n *\n *  The above copyright notice and this permission notice shall be included in\n *  all copies or substantial portions of the Software.\n *\n *  THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n *  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n *  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n *  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n *  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n *  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n *  THE SOFTWARE.\n *\n *  Author: Prashant <prashant@rapida.ai>\n *\n */\nimport { useSelectInputDeviceAgent } from \"@/rapida/hooks/use-select-input-device-agent\";\nimport { cn } from \"@/rapida/styles\";\nimport { useEffect, useState } from \"react\";\n\nexport const DeviceSelector = () => {\n  const [showMenu, setShowMenu] = useState(false);\n  const deviceSelect = useSelectInputDeviceAgent({});\n  const [selectedDeviceName, setSelectedDeviceName] = useState(\"\");\n\n  useEffect(() => {\n    deviceSelect.devices.forEach((device) => {\n      if (device.deviceId === deviceSelect.activeDeviceId) {\n        setSelectedDeviceName(device.label);\n      }\n    });\n  }, [deviceSelect.activeDeviceId, deviceSelect.devices, selectedDeviceName]);\n\n  useEffect(() => {\n    const handleClickOutside = (_: MouseEvent) => {\n      if (showMenu) {\n        setShowMenu(false);\n      }\n    };\n    document.addEventListener(\"click\", handleClickOutside);\n    return () => {\n      document.removeEventListener(\"click\", handleClickOutside);\n    };\n  }, [showMenu]);\n\n  const activeClassName = showMenu ? \"rotate-180\" : \"rotate-0\";\n\n  return (\n    <div className=\"relative\">\n      <button\n        className={`flex hover:opacity-50 ${activeClassName} transition-all duration-100`}\n        onClick={(e) => {\n          setShowMenu(!showMenu);\n          e.stopPropagation();\n        }}\n      >\n        <ChevronSVG />\n      </button>\n      <div\n        className=\"absolute left-0 bottom-7 text-left rounded-md border z-10 w-[280px] shadow-lg\"\n        style={{\n          display: showMenu ? \"block\" : \"none\",\n        }}\n      >\n        {deviceSelect.devices.map((device, index) => {\n          return (\n            <div\n              onClick={(e) => {\n                e.stopPropagation();\n                deviceSelect.setActiveMediaDevice(device.deviceId);\n                setShowMenu(false);\n              }}\n              className={cn(\n                device.deviceId === deviceSelect.activeDeviceId &&\n                  \"!text-blue-800\",\n                \"text-gray-900\",\n                \"text-xl\",\n                \"bg-white text-xs py-2 px-2 cursor-pointer hover:bg-gray-200 hover:text-gray-600 rounded-md\"\n              )}\n              key={index}\n            >\n              {device.label}\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nconst ChevronSVG = () => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"16\"\n    height=\"16\"\n    viewBox=\"0 0 16 16\"\n    fill=\"none\"\n  >\n    <path\n      d=\"M13.3334 6L8.00003 11.3333L2.66669 6\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n    />\n  </svg>\n);\n"],"mappings":";;;;;;;;;AA0BA,SAAS,WAAW,gBAAgB;AA8BhC,SAQI,KARJ;AA5BG,IAAM,iBAAiB,MAAM;AAClC,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,eAAe,0BAA0B,CAAC,CAAC;AACjD,QAAM,CAAC,oBAAoB,qBAAqB,IAAI,SAAS,EAAE;AAE/D,YAAU,MAAM;AACd,iBAAa,QAAQ,QAAQ,CAAC,WAAW;AACvC,UAAI,OAAO,aAAa,aAAa,gBAAgB;AACnD,8BAAsB,OAAO,KAAK;AAAA,MACpC;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,aAAa,gBAAgB,aAAa,SAAS,kBAAkB,CAAC;AAE1E,YAAU,MAAM;AACd,UAAM,qBAAqB,CAAC,MAAkB;AAC5C,UAAI,UAAU;AACZ,oBAAY,KAAK;AAAA,MACnB;AAAA,IACF;AACA,aAAS,iBAAiB,SAAS,kBAAkB;AACrD,WAAO,MAAM;AACX,eAAS,oBAAoB,SAAS,kBAAkB;AAAA,IAC1D;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,kBAAkB,WAAW,eAAe;AAElD,SACE,qBAAC,SAAI,WAAU,YACb;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,yBAAyB,eAAe;AAAA,QACnD,SAAS,CAAC,MAAM;AACd,sBAAY,CAAC,QAAQ;AACrB,YAAE,gBAAgB;AAAA,QACpB;AAAA,QAEA,8BAAC,cAAW;AAAA;AAAA,IACd;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO;AAAA,UACL,SAAS,WAAW,UAAU;AAAA,QAChC;AAAA,QAEC,uBAAa,QAAQ,IAAI,CAAC,QAAQ,UAAU;AAC3C,iBACE;AAAA,YAAC;AAAA;AAAA,cACC,SAAS,CAAC,MAAM;AACd,kBAAE,gBAAgB;AAClB,6BAAa,qBAAqB,OAAO,QAAQ;AACjD,4BAAY,KAAK;AAAA,cACnB;AAAA,cACA,WAAW;AAAA,gBACT,OAAO,aAAa,aAAa,kBAC/B;AAAA,gBACF;AAAA,gBACA;AAAA,gBACA;AAAA,cACF;AAAA,cAGC,iBAAO;AAAA;AAAA,YAFH;AAAA,UAGP;AAAA,QAEJ,CAAC;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;AAEA,IAAM,aAAa,MACjB;AAAA,EAAC;AAAA;AAAA,IACC,OAAM;AAAA,IACN,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IAEL;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,QAAO;AAAA,QACP,aAAY;AAAA;AAAA,IACd;AAAA;AACF;","names":[]}