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 (
(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 {/* (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 */} (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 (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 {/* (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 */} (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 {isSpeaking ? ( ) : ( )} { 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" >
{ 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 (

{">> "} {command?.indexes?.join(", ")}

); })}
); }