Spaces:
Sleeping
Sleeping
| import React, { useEffect, useState } from "react"; | |
| import { NavLink } from "react-router-dom"; | |
| import { useAtom } from "jotai"; | |
| import { VoiceAssistAtom } from "../Variables"; | |
| export function CusNavbar() { | |
| const [voiceAssist, setVoiceAssist] = useAtom(VoiceAssistAtom); | |
| const [commands, setCommands] = useState([]); | |
| const [isListening, setIsListening] = useState(false); | |
| const [isSpeaking, setIsSpeaking] = useState(false); | |
| const [infoOpen, setInfoOpen] = useState(false); | |
| useEffect(() => { | |
| let tempCommands = []; | |
| let finalCommands = []; | |
| let commandsArr = voiceAssist?.getAvailableCommands(); | |
| for (let index = 0; index < commandsArr.length; index++) { | |
| if (!tempCommands.includes(commandsArr[index]?.indexes?.join(", "))) { | |
| tempCommands.push(commandsArr[index]?.indexes?.join(", ")); | |
| finalCommands.push(commandsArr[index]); | |
| } | |
| } | |
| setCommands(finalCommands); | |
| setIsListening(voiceAssist?.isRecognizing()); | |
| setIsSpeaking(voiceAssist?.isSpeaking()); | |
| setInterval(() => { | |
| setIsListening(voiceAssist?.isRecognizing()); | |
| setIsSpeaking(voiceAssist?.isSpeaking()); | |
| }, 1000); | |
| }, [voiceAssist, infoOpen]); | |
| return ( | |
| <div className="h-16 w-full relative z-50"> | |
| <div className="h-full max-w-full rounded-none px-8 pl-4 py-1"> | |
| <div className="flex items-center justify-between text-primary-400"> | |
| <NavLink to="/" className="cursor-pointer w-48 h-full font-medium"> | |
| <svg viewBox="0 0 370.185 62.836" className="h-full w-auto text-primary-900" xmlns="http://www.w3.org/2000/svg"> | |
| <path fill="currentColor" d="M43.192 22.554c.705-4.174 1.102-8.074 1.149-11.46.063-4.577-.488-10.2-3.472-11.004a2.6 2.6 0 0 0-1.094-.06 3 3 0 0 0-.392-.03c-3.562 0-7.798 6.72-11.27 15.022-6.215-5.278-11.757-8.507-15.036-8.507-.917 0-1.66.249-2.206.74-2.7 2.422.358 9.623 5.356 17.185C6.856 26.267-.171 29.222.003 32.77c.238 4.867 13.725 7.11 26.312 7.158a2.66 2.66 0 0 0 2.313 1.356c1.463 0 2.653-1.19 2.653-2.654s-1.19-2.654-2.653-2.654a2.66 2.66 0 0 0-2.543 1.897c-11.14-.084-20.396-1.787-23.68-4.372-.005-.005-.564-.484-.577-1.087-.007-.355.185-.71.571-1.055l.02-.02c2.668-2.056 8.139-3.861 15.025-5.103a106 106 0 0 0 4.724 6.272.48.48 0 0 0 .667.074l.861-.676a.48.48 0 0 0 .077-.677 106 106 0 0 1-4.078-5.37c3.779-.588 7.907-1.01 12.188-1.22q1.623-.08 3.243-.12a125 125 0 0 1 3.92 4.347q-.468 2.013-1.019 4.062a134 134 0 0 1-1.314 4.562q-1.522.122-3.079.205a.48.48 0 0 0-.354.19l-.856 1.127a.479.479 0 0 0 .405.768q1.624-.08 3.22-.199c-4.08 12.503-8.967 20.735-11.797 21.496a1.3 1.3 0 0 1-.305-.152c-.644-.437-.793-1.456-.793-1.465a.476.476 0 0 0-.474-.415h-.002a.48.48 0 0 0-.397.224.48.48 0 0 0-.4-.224.48.48 0 0 0-.474.418c-.256 2.04 1.048 3.035 1.8 3.284a2.6 2.6 0 0 0 1.086.057q.197.03.4.032c4.128 0 9.992-9.78 14.389-23.518 2.554-.254 5.02-.583 7.352-.978 4.765 6.83 7.57 12.689 7 15.234-.114.517-.371.852-.783 1.025a1.5 1.5 0 0 1-.58.107 2.9 2.9 0 0 1-1.08-.24.478.478 0 0 0-.514.797c.652.55 1.35.83 2.074.83a2.8 2.8 0 0 0 1.66-.55c2.665-2.391-.253-9.567-5.636-17.596 2.474-.482 4.773-1.041 6.83-1.673 4.375-1.343 9.558-3.593 9.407-6.68-.21-4.265-10.588-6.515-21.62-7.04M40.678 2.803l.012.024c1.34 3.728 1.161 11.038-.334 19.63a106 106 0 0 0-2.264-.024c-.696 0-1.404.014-2.11.026a114 114 0 0 0-5.643-5.485c3.011-7.443 6.363-12.983 9.096-14.821.004-.003.196-.12.467-.197.318.118.575.397.776.847M29.549 18.994a113 113 0 0 1 3.664 3.545c-.41.016-.817.025-1.227.045-1.269.062-2.542.148-3.807.25q.665-1.982 1.37-3.84m8.76 5.484q.844.001 1.673.013-.183.939-.384 1.893-.324-.368-.652-.734a128 128 0 0 0-1.06-1.166c.14 0 .283-.006.423-.006m2.44 9.177q.283-1.055.545-2.105a118 118 0 0 1 3.838 4.968c-1.732.268-3.539.501-5.399.695q.526-1.743 1.016-3.558M13.503 8.226c3.355.791 8.359 4.026 13.81 8.764a108 108 0 0 0-2.19 6.13 110 110 0 0 0-6.687.918c-4.09-6.065-6.57-11.374-6.618-14.455.005-.233.086-1.391 1.28-1.391q.178 0 .38.032zm48.442 23.186-.06.034c-2.873 1.9-8.099 3.55-14.545 4.704a112 112 0 0 0-5.446-7.088 118 118 0 0 0 .941-4.499c10.3.39 18.246 2.105 19.994 4.434.3.4.386.796.265 1.21-.216.749-1.141 1.201-1.149 1.205" /> | |
| <path fill="currentColor" d="M112.545 13.17h5.581l-13.82 37.597h-5.535L85.001 13.17h5.553l11.01 31.109zm22.919 38.103c-7.683 0-13.477-5.238-13.477-13.695 0-8.426 5.74-13.667 13.477-13.667s13.455 5.24 13.455 13.667c0 8.457-5.745 13.695-13.455 13.695m-.054-4.201c4.813 0 8.456-3.725 8.456-9.494 0-5.745-3.643-9.464-8.454-9.464-4.759 0-8.35 3.722-8.35 9.464 0 5.772 3.591 9.494 8.35 9.494m23.08-28.451c-1.808 0-3.349-1.49-3.349-3.322s1.541-3.3 3.349-3.3c1.783 0 3.297 1.465 3.297 3.297s-1.514 3.325-3.294 3.325m-2.611 32.146V24.444h5.132v26.323zm25.366.479c-7.658 0-13.321-5.45-13.321-13.668s5.663-13.667 13.321-13.667c5.955 0 10.635 3.245 12.203 8.88l-4.759.72c-1.17-3.51-4.013-5.397-7.498-5.397-4.68 0-8.162 3.722-8.162 9.464 0 5.718 3.485 9.467 8.162 9.467 3.485 0 6.327-1.887 7.498-5.396l4.76.716c-1.569 5.608-6.328 8.88-12.204 8.88m42.117-14.144-.082 1.356h-20.392c.185 5.82 3.855 8.638 8.217 8.638 3.136 0 5.742-1.701 7.07-4.546l4.629.904c-1.863 4.892-6.303 7.819-11.648 7.819-7.814 0-13.267-5.053-13.267-13.668s5.584-13.694 13.11-13.694c7.152 0 12.336 4.31 12.36 13.19zm-12.34-9.306c-4.067 0-7.124 2.178-7.922 6.78h15.13c-.428-4.575-3.325-6.78-7.207-6.78m44.775 22.97-3.137-8.774h-16.804l-3.136 8.775h-5.506l13.853-37.597h6.382l13.853 37.597zm-18.291-13.4h13.504l-6.752-18.958zm38.313 13.907c-5.636 0-9.864-2.5-10.69-7.313l4.387-1.25c.64 3.137 3.033 4.787 6.276 4.787 2.447 0 5.077-.931 4.998-3.828-.081-3.112-3.643-3.619-7.868-4.92-3.591-1.09-7.074-2.578-7.074-7.259 0-5.21 4.28-7.525 9.464-7.525 4.841 0 8.909 2.047 9.758 6.888l-4.12 1.008c-.639-3.003-2.978-4.253-5.608-4.253-2.341 0-4.762.958-4.762 3.512 0 2.764 3.112 3.403 6.488 4.28 4.122 1.035 8.67 2.5 8.67 8.056 0 5.663-4.708 7.814-9.92 7.814zm25.34 0c-5.637 0-9.865-2.5-10.69-7.313l4.386-1.25c.637 3.137 3.03 4.787 6.276 4.787 2.445 0 5.078-.931 4.999-3.828-.082-3.112-3.643-3.619-7.869-4.92-3.593-1.09-7.076-2.578-7.076-7.259 0-5.21 4.283-7.525 9.467-7.525 4.838 0 8.908 2.047 9.758 6.888l-4.122 1.008c-.637-3.003-2.976-4.253-5.609-4.253-2.341 0-4.76.958-4.76 3.512 0 2.764 3.11 3.403 6.489 4.28 4.12 1.035 8.666 2.5 8.666 8.056 0 5.663-4.705 7.814-9.916 7.814zm19.46-32.652c-1.807 0-3.348-1.49-3.348-3.322s1.54-3.3 3.349-3.3c1.78 0 3.297 1.465 3.297 3.297s-1.517 3.325-3.295 3.325m-2.608 32.146V24.444h5.132v26.323zm22.761.506c-5.636 0-9.867-2.5-10.689-7.313l4.384-1.25c.64 3.137 3.033 4.787 6.278 4.787 2.445 0 5.078-.931 4.999-3.828-.082-3.112-3.643-3.619-7.871-4.92-3.591-1.09-7.074-2.578-7.074-7.259 0-5.21 4.28-7.525 9.467-7.525 4.838 0 8.906 2.047 9.758 6.888l-4.122 1.008c-.637-3.003-2.979-4.253-5.609-4.253-2.341 0-4.76.958-4.76 3.512 0 2.764 3.11 3.403 6.486 4.28 4.122 1.035 8.67 2.5 8.67 8.056 0 5.663-4.708 7.814-9.92 7.814zm25.498-.506c-4.44 0-7.18-2.66-7.18-7.338V28.46h-5.372v-4.016h1.942c2.739 0 3.855-1.143 3.855-4.2v-4.545h4.707v8.748h5.955v4.016h-5.955v14.435c0 2.527 1.462 3.855 3.534 3.855h2.423v4.014z" /> | |
| </svg> | |
| </NavLink> | |
| <div className="flex items-center gap-4"> | |
| <div className="mr-4"> | |
| <div className="mt-2 mb-4 flex flex-row items-center gap-3"> | |
| <NavLink to="/" className={({ isActive }) => (isActive ? "text-white bg-gradient-to-tr from-primary-900 to-primary-700 p-2 px-4 rounded-lg" : "text-primary-900 p-2 px-4")}> | |
| Home | |
| </NavLink> | |
| {/* <NavLink to="/add-roll" className={({ isActive }) => (isActive ? "text-white bg-gradient-to-tr from-primary-900 to-primary-700 p-2 px-4 rounded-lg" : "text-primary-900 p-2 px-4")}> | |
| Add Roll | |
| </NavLink> */} | |
| <NavLink to="/grn" className={({ isActive }) => (isActive ? "text-white bg-gradient-to-tr from-primary-900 to-primary-700 p-2 px-4 rounded-lg" : "text-primary-900 p-2 px-4")}> | |
| GRN Detail | |
| </NavLink> | |
| <NavLink to="/roll" className={({ isActive }) => (isActive ? "text-white bg-gradient-to-tr from-primary-900 to-primary-700 p-2 px-4 rounded-lg" : "text-primary-900 p-2 px-4")}> | |
| Roll Detail | |
| </NavLink> | |
| {/* <NavLink to="/Docs" className={({ isActive }) => (isActive ? "text-white bg-gradient-to-tr from-primary-900 to-primary-700 p-2 px-4 rounded-lg" : "text-primary-900 p-2 px-4")}> | |
| Docs | |
| </NavLink> */} | |
| <NavLink to="/transcribe" className={({ isActive }) => (isActive ? "text-white bg-gradient-to-tr from-primary-900 to-primary-700 p-2 px-4 rounded-lg" : "text-primary-900 p-2 px-4")}> | |
| Transcribe | |
| </NavLink> | |
| {isSpeaking ? ( | |
| <svg className={"h-7 w-7 animate-pulse text-green-500 "} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.459 87.459" xmlSpace="preserve"> | |
| <path fill="currentColor" d="M37.44 73.283H7.694V55.66A23.82 23.82 0 0 1 0 38.09c0-13.186 10.728-23.913 23.913-23.913 10.765 0 20.254 7.251 23.074 17.634l.088.32.178 3.921 7.217 10.12-6.344 4.608v3.524c0 4.244-3.453 7.698-7.7 7.698h-2.985zm-23.746-6H31.44V56.004h8.985c.938 0 1.7-.763 1.7-1.699v-6.58l4.006-2.91-4.794-6.72-.227-5.016c-2.214-7.612-9.241-12.9-17.198-12.9-9.877 0-17.913 8.036-17.913 17.913 0 5.4 2.402 10.458 6.591 13.877l1.103.9zm47.458-10.311L56.91 52.73c2.706-2.707 2.706-7.111-.001-9.819l4.244-4.242c5.045 5.046 5.045 13.258-.001 18.303" /> | |
| <path fill="currentColor" d="m69.251 63.361-4.242-4.242c6.229-6.229 6.229-16.366 0-22.596l4.242-4.242c8.567 8.569 8.567 22.512 0 31.08" /> | |
| <path fill="currentColor" d="m78.555 69.351-4.244-4.242c9.531-9.533 9.531-25.043.002-34.575l4.242-4.242c11.872 11.869 11.872 31.186 0 43.059" /> | |
| </svg> | |
| ) : ( | |
| <svg title={"Voice Recognition " + (isListening ? "Working" : "Stopped")} className={"h-7 w-7 animate-pulse " + (isListening ? "text-green-500 " : "text-red-500")} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path fill="currentColor" d="M0 12C0 5.373 5.373 0 12 0s12 5.373 12 12-5.373 12-12 12C5.376 23.992.008 18.624 0 12.001zm2.4 0c0 5.302 4.298 9.6 9.6 9.6s9.6-4.298 9.6-9.6-4.298-9.6-9.6-9.6c-5.299.006-9.594 4.301-9.6 9.599zm4 0a5.6 5.6 0 1 1 11.2 0 5.6 5.6 0 0 1-11.2 0" /> | |
| </svg> | |
| )} | |
| <svg | |
| onClick={() => { | |
| setInfoOpen(!infoOpen); | |
| }} | |
| className="h-7 w-auto border-2 border-primary-700 text-primary-700 hover:scale-110 transition-all cursor-pointer rounded-full p-1" | |
| viewBox="-6.5 0 24 24" | |
| xmlns="http://www.w3.org/2000/svg" | |
| > | |
| <path fill="currentColor" d="M8.436.006a2.24 2.24 0 0 1 2.408 2.354v-.006a3.156 3.156 0 0 1-3.151 3.01l-.065-.001h.003a2.15 2.15 0 0 1-2.367-2.398l-.001.01A3.087 3.087 0 0 1 8.44.004h-.005zM3.489 24c-1.268 0-2.199-.783-1.311-4.226l1.456-6.108c.254-.978.295-1.369 0-1.369a9.6 9.6 0 0 0-3.035 1.359l.033-.021-.633-1.057c3.086-2.622 6.638-4.159 8.158-4.159 1.268 0 1.48 1.526.845 3.874l-1.666 6.421c-.296 1.135-.168 1.526.126 1.526a6.55 6.55 0 0 0 2.863-1.456l-.008.007.72.979c-3.004 3.052-6.281 4.232-7.549 4.232z" /> | |
| </svg> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div | |
| onMouseLeave={() => { | |
| setInfoOpen(false); | |
| }} | |
| className={"absolute top-100 right-10 overflow-y-auto overflow-x-clip custom-scrollbar bg-white border border-t-0 border-primary-950 rounded-b-xl w-fit h-fit max-h-96 shadow-lg origin-top transition-all " + (infoOpen ? "scale-y-100" : "scale-y-0")} | |
| > | |
| {commands?.map((command, index) => { | |
| return ( | |
| <p key={index} className="p-1 pr-4 pl-2 hover:text-primary-950 cursor-pointer hover:scale-105 origin-left text-primary-900 font-semibold whitespace-nowrap"> | |
| {">> "} | |
| {command?.indexes?.join(", ")} | |
| </p> | |
| ); | |
| })} | |
| </div> | |
| </div> | |
| ); | |
| } | |