|
|
|
|
@ -28,6 +28,11 @@ const ChatStatus={ |
|
|
|
|
Processing: 'processing', |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const Voice={ |
|
|
|
|
ONYX: 'onyx', |
|
|
|
|
SHIMMER: 'shimmer', |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
export function FreeFlow(){ |
|
|
|
|
|
|
|
|
|
const { data }=useData(); |
|
|
|
|
@ -39,6 +44,8 @@ export function FreeFlow(){ |
|
|
|
|
const [autoSend, setAutoSend] = useState(true); |
|
|
|
|
const [userId, setUserId] = useState(); |
|
|
|
|
const [summary, setSummary] = useState(null); |
|
|
|
|
const [voice, setVoice] = useState(Voice.ONYX); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const [chatStatus, setChatStatus] = useState(ChatStatus.System); // System, User, Processing |
|
|
|
|
|
|
|
|
|
@ -78,7 +85,11 @@ export function FreeFlow(){ |
|
|
|
|
refAudio.current.pause(); // Stop any currently playing audio |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const audio = new Audio(url); |
|
|
|
|
let audioUrl = url; |
|
|
|
|
if(voice==Voice.SHIMMER) audioUrl = url.replace(Voice.ONYX, Voice.SHIMMER); |
|
|
|
|
console.log('Using voice:', voice, 'for audio:', audioUrl); |
|
|
|
|
|
|
|
|
|
const audio = new Audio(audioUrl); |
|
|
|
|
audio.loop=refCurrentCue.current?.loop || false; // Set loop if defined in cue |
|
|
|
|
audio.play().catch(error => { |
|
|
|
|
console.error("Audio playback error:", error); |
|
|
|
|
@ -122,14 +133,14 @@ export function FreeFlow(){ |
|
|
|
|
// Special case for starting a conversation |
|
|
|
|
resetTranscript(); |
|
|
|
|
console.log('Starting conversation...'); |
|
|
|
|
sendMessage(); |
|
|
|
|
sendMessage(null, false, false, voice); // Send initial message with voice |
|
|
|
|
setChatWelcome(true); |
|
|
|
|
resetData(); // Reset data for new conversation |
|
|
|
|
break; |
|
|
|
|
case 'chat_end': |
|
|
|
|
const message= refInput.current?.value?.trim(); |
|
|
|
|
console.log('Ending conversation with message:', message); |
|
|
|
|
sendMessage(message, false, true); |
|
|
|
|
sendMessage(message, false, true, voice); |
|
|
|
|
setChatWelcome(false); |
|
|
|
|
|
|
|
|
|
break; |
|
|
|
|
@ -246,7 +257,7 @@ export function FreeFlow(){ |
|
|
|
|
const message= refInput.current?.value?.trim(); |
|
|
|
|
if(message && message.length>0) { |
|
|
|
|
console.log('Ending conversation with message:', message); |
|
|
|
|
sendMessage(message, false, false); |
|
|
|
|
sendMessage(message, false, false, voice); |
|
|
|
|
setChatWelcome(false); |
|
|
|
|
|
|
|
|
|
setChatStatus(ChatStatus.Processing); // Set chat status to Processing |
|
|
|
|
@ -341,19 +352,25 @@ export function FreeFlow(){ |
|
|
|
|
<main className="items-start"> |
|
|
|
|
<section className="flex-1 flex flex-col gap-2 self-stretch overflow-hidden"> |
|
|
|
|
<DebugControl/> |
|
|
|
|
<div className="w-full p-2 flex flex-row justify-center gap-2 *:w-[12vw] *:h-[5rem]"> |
|
|
|
|
<div className="w-full p-2 grid grid-cols-4 gap-2 items-stretch justify-center *:max-h-[5rem]"> |
|
|
|
|
<div className="bg-gray-100 text-4xl font-bold mb-4 flex justify-center items-center"> |
|
|
|
|
{refCurrentCue.current?.name} |
|
|
|
|
</div> |
|
|
|
|
<Countdown ref={refTimer} /> |
|
|
|
|
<button className="!bg-red-300" onClick={onStop}>Stop</button> |
|
|
|
|
<button className="!bg-yellow-300" onClick={()=>{ |
|
|
|
|
saveHistory(history); |
|
|
|
|
}}>Save Log</button> |
|
|
|
|
<button onClick={saveImage}>Save image</button> |
|
|
|
|
|
|
|
|
|
{/* <button onClick={saveImage}>Save image</button> */} |
|
|
|
|
<NumPad onSend={onNumpad} /> |
|
|
|
|
<Light ref={refLight} /> |
|
|
|
|
<VoiceAnalysis/> |
|
|
|
|
<div className="flex flex-col"> |
|
|
|
|
<label className="text-center">Voice</label> |
|
|
|
|
<button className={`${voice==Voice.ONYX && 'bg-gray-300'}`} onClick={() => setVoice(Voice.ONYX)}>Onyx</button> |
|
|
|
|
<button className={`${voice==Voice.SHIMMER && 'bg-gray-300'}`} onClick={() => setVoice(Voice.SHIMMER)}>Shimmer</button> |
|
|
|
|
</div> |
|
|
|
|
<button className="!bg-yellow-300" onClick={()=>{ |
|
|
|
|
saveHistory(history); |
|
|
|
|
}}>Save Log</button> |
|
|
|
|
</div> |
|
|
|
|
<div className="flex-1 overflow-y-auto"> |
|
|
|
|
<table className="border-collapse **:border-y w-full **:p-2"> |
|
|
|
|
|
