From 1ac947bcf67da9c67340974a7c71921d09f94cb6 Mon Sep 17 00:00:00 2001
From: adetyaz <tuneymitch@gmail.com>
Date: Tue, 19 Nov 2024 09:50:39 +0100
Subject: [PATCH] fix: transcript, header

---
 src/components/header.tsx          | 50 +++++++++++++-------------
 src/components/voice-assistant.tsx | 56 +++++++++++++++---------------
 2 files changed, 54 insertions(+), 52 deletions(-)

diff --git a/src/components/header.tsx b/src/components/header.tsx
index bef6ecb..05c82ac 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -12,7 +12,7 @@ const Header = ({
 	home,
 	onClick,
 	userType,
-	showAttestation
+	showAttestation,
 }: {
 	home: boolean
 	onClick?: React.ReactEventHandler
@@ -33,7 +33,6 @@ const Header = ({
 
 	const [storedAddress, setStoredAddress] = useState<string | null>(null)
 
-
 	const baseUri = process.env.NEXT_PUBLIC_URI || 'https://app.myriadflow.com'
 
 	useEffect(() => {
@@ -136,7 +135,7 @@ const Header = ({
 				className={`fixed top-0 w-full py-4 transition-all duration-300 ease-in-out
 					${isScrolled ? 'bg-white' : 'bg-transparent'} 
 					${home ? 'bg-gradient-to-r' : 'bg-transparent'} 
-				
+				text-white
 				z-20`}
 				style={
 					home
@@ -156,27 +155,28 @@ const Header = ({
 							!home ? 'hidden' : 'sm:flex'
 						}`}
 					>
-						<Link
-							href='https://myriadflow.com'
-							style={{ color: getLinkColor('https://myriadflow.com') }}
-						>
-							Home
-						</Link>
-						<Link
-							href='https://studio.myriadflow.com'
-							style={{ color: getLinkColor('https://studio.myriadflow.com') }}
-						>
-							Studio
+						<Link href='https://studio.myriadflow.com'>Studio</Link>
+						<Link href='https://discover.myriadflow.com'>Discover</Link>
+						<Link href='/' style={{ color: getLinkColor('/') }}>
+							WebXR
 						</Link>
 						<Link
-							href='https://discover.myriadflow.com'
-							style={{ color: getLinkColor('https://discover.myriadflow.com') }}
+							href='https://myriadflow.com'
+							className='flex cursor-pointer items-center gap-2'
 						>
-							Discover
-						</Link>
-
-						<Link href='/' style={{ color: getLinkColor('/') }}>
-							WebXR
+							<span>Home</span>
+							<svg
+								width='13'
+								height='13'
+								viewBox='0 0 13 13'
+								fill='none'
+								xmlns='http://www.w3.org/2000/svg'
+							>
+								<path
+									d='M12.75 0.999999C12.75 0.585786 12.4142 0.25 12 0.249999L5.25 0.25C4.83579 0.25 4.5 0.585786 4.5 1C4.5 1.41421 4.83579 1.75 5.25 1.75L11.25 1.75L11.25 7.75C11.25 8.16421 11.5858 8.5 12 8.5C12.4142 8.5 12.75 8.16421 12.75 7.75L12.75 0.999999ZM1.53033 12.5303L12.5303 1.53033L11.4697 0.469669L0.46967 11.4697L1.53033 12.5303Z'
+									fill='white'
+								/>
+							</svg>
 						</Link>
 					</div>
 					<div className='flex gap-4 items-baseline'>
@@ -314,9 +314,11 @@ const Header = ({
 							<img src='/menu.png' alt='Menu' className='w-6 h-6 ml-4' />
 						</button>
 						<BadgeInfo className='cursor-pointer md:hidden' onClick={onClick} />
-						{userType === 'owner' && <div onClick={showAttestation} className='cursor-pointer'>
-							<Image src='/receipt.png' alt='Create' width={38} height={38} />
-						</div>}
+						{userType === 'owner' && (
+							<div onClick={showAttestation} className='cursor-pointer'>
+								<Image src='/receipt.png' alt='Create' width={38} height={38} />
+							</div>
+						)}
 					</div>
 				</div>
 				{isDropdownOpen && (
diff --git a/src/components/voice-assistant.tsx b/src/components/voice-assistant.tsx
index c6b8e85..f554d00 100644
--- a/src/components/voice-assistant.tsx
+++ b/src/components/voice-assistant.tsx
@@ -18,7 +18,7 @@ export const VoiceAssistant = ({
 	userType,
 }: any) => {
 	const [isListening, setIsListening] = useState(false)
-	// const [transcript, setTranscript] = useState('')
+	const [transcript, setTranscript] = useState('')
 	// const [response, setResponse] = useState('')
 
 	// console.log(userType)
@@ -95,30 +95,30 @@ export const VoiceAssistant = ({
 		},
 	])
 
-	// useEffect(() => {
-	// 	const synth = window.speechSynthesis
-
-	// 	// Create a speech synthesis utterance
-	// 	const utterance = new SpeechSynthesisUtterance(
-	// 		`Welcome, Feel free to explore ${brandName} and discover hidden treasures together with your AI companion.`
-	// 	)
-
-	// 	// Speak the message after a delay of 5 seconds
-	// 	const timeoutId = setTimeout(() => {
-	// 		if (!synth.speaking) {
-	// 			synth.speak(utterance)
-	// 		}
-	// 	}, 5000)
-
-	// 	// Cleanup function to cancel speech synthesis and timeout if necessary
-	// 	return () => {
-	// 		clearTimeout(timeoutId)
-	// 		if (synth.speaking) {
-	// 			synth.cancel()
-	// 			console.log('Speech synthesis canceled')
-	// 		}
-	// 	}
-	// }, [])
+	useEffect(() => {
+		const synth = window.speechSynthesis
+
+		// Create a speech synthesis utterance
+		const utterance = new SpeechSynthesisUtterance(
+			`Welcome, Feel free to explore ${brandName} and discover hidden treasures together with your AI companion.`
+		)
+
+		// Speak the message after a delay of 5 seconds
+		const timeoutId = setTimeout(() => {
+			if (!synth.speaking) {
+				synth.speak(utterance)
+			}
+		}, 5000)
+
+		// Cleanup function to cancel speech synthesis and timeout if necessary
+		return () => {
+			clearTimeout(timeoutId)
+			if (synth.speaking) {
+				synth.cancel()
+				console.log('Speech synthesis canceled')
+			}
+		}
+	}, [])
 
 	useEffect(() => {
 		// Feature detection for webkitSpeechRecognition
@@ -135,7 +135,7 @@ export const VoiceAssistant = ({
 
 			recognition.onresult = (event: any) => {
 				const speechToText = event.results[0][0].transcript
-				// setTranscript(speechToText)
+				setTranscript(speechToText)
 				addMessage({ role: 'user', content: speechToText })
 				getOpenAIResponse(speechToText)
 			}
@@ -236,12 +236,12 @@ export const VoiceAssistant = ({
 
 	return (
 		<div className='flex flex-col justify-center items-center text-center'>
-			{/* {transcript && (
+			{transcript && (
 				<div className='mb-4 bg-black text-white p-4 rounded-md w-3/4'>
 					<p>User: &nbsp;{transcript}</p>
 				</div>
 			)}
-			{response && (
+			{/* {response && (
 				<div className='mb-4 bg-black text-white p-4 rounded-md w-3/4'>
 					<p>Assistant: &nbsp;{response}</p>
 				</div>