update

vite/public/cuelist.json

@@ -29,65 +29,76 @@
             "id": 4, 
             "name": "Q4", 
             "type": "phone",
-            "description": "Guide to construct scene",
-            "auto": true,
+            "description": "Guide to call",
+            "auto": false,
             "audioFile": "assets/q4.mp3",
-            "nextcue": 4.1
+            "nextcue": 4.1,
+            "callback":"numpad"
         },
         { 
             "id": 4.1, 
             "name": "Q4.1", 
-            "type": "chat",
-            "description": "chat-1 system",
+            "type": "phone",
+            "description": "Guide to construct scene",
             "auto": true,
+            "audioFile": "assets/q4-1.mp3",
             "nextcue": 4.2
         },
         { 
             "id": 4.2, 
             "name": "Q4.2", 
-            "type": "user_input",
-            "description": "chat-1 user",
+            "type": "chat",
+            "description": "chat-1 system",
             "auto": true,
-            "duration": 20,
-            "nextcue": 4.3
+            "nextcue": 4.3,
+            "callback":"start_conversation"
         },
         { 
             "id": 4.3, 
             "name": "Q4.3", 
-            "type": "chat",
-            "description": "chat-2 system",
+            "type": "user_input",
+            "description": "chat-1 user",
             "auto": true,
+            "duration": 20,
             "nextcue": 4.4
         },
         { 
             "id": 4.4, 
             "name": "Q4.4", 
-            "type": "user_input",
-            "description": "chat-2 user",
+            "type": "chat",
+            "description": "chat-2 system",
             "auto": true,
-            "duration": 20,
             "nextcue": 4.5
         },
         { 
             "id": 4.5, 
-            "name": "Q4.1", 
-            "type": "chat",
-            "description": "chat-3 system",
+            "name": "Q4.5", 
+            "type": "user_input",
+            "description": "chat-2 user",
             "auto": true,
+            "duration": 20,
             "nextcue": 4.6
         },
         { 
             "id": 4.6, 
             "name": "Q4.6", 
-            "type": "user_input",
-            "description": "chat-3 user",
+            "type": "chat",
+            "description": "chat-3 system",
             "auto": true,
-            "duration": 20,
             "nextcue": 4.7
         },
         { 
             "id": 4.7, 
             "name": "Q4.7", 
+            "type": "user_input",
+            "description": "chat-3 user",
+            "auto": true,
+            "duration": 20,
+            "nextcue": 4.8
+        },
+        { 
+            "id": 4.8, 
+            "name": "Q4.8", 
             "type": "chat",
             "description": "chat-3 system",
             "auto": true,            

vite/src/comps/numpad.jsx

@@ -0,0 +1,75 @@
+import { use, useEffect, useRef, useState } from "react";
+
+const KEY_ENTER='q';
+const KEY_BACKSPACE='a';
+
+export default function NumPad({onSend}){
+
+    const [input, _setInput]=useState();
+    const refInput=useRef();
+    const setInput=(valueFunc)=>{
+        if(typeof valueFunc==='function'){            
+            _setInput(valueFunc(refInput.current));
+            refInput.current=valueFunc(refInput.current);
+        }else{
+            _setInput(valueFunc);
+            refInput.current=valueFunc;
+        }
+    }
+
+    const refAudio=useRef([]);
+
+    function onkeydown(e){
+        // console.log(e.key);
+
+        if(e.key===KEY_ENTER){
+
+            if(refInput.current && refInput.current.length>0){
+                const num=parseInt(refInput.current);            
+                if(num>=1 && num<=24) onSend(num);
+                setInput(()=>'');
+            }
+            return;
+        }else if(e.key===KEY_BACKSPACE || e.key==='Backspace' || e.key==='Delete'){
+            setInput((prev)=>prev?.slice(0,-1));
+            return;
+        }
+        
+        const numKey = parseInt(e.key);
+        if(isNaN(numKey) || numKey < 0 || numKey > 9) return; // Ignore non-numeric keys
+
+        refAudio.current[numKey]?.play();          
+        setInput((prev)=>`${prev||''}${e.key}`);        
+        
+        
+    }
+
+
+    useEffect(() => {
+     
+        refAudio.current = [...Array(10).keys()].map(index =>{
+            const file=`assets/number/${index}.mp3`;
+            // console.log(`Loading audio file: ${file}`);
+            return new Audio(file);
+        });
+
+    },[]);
+
+
+    useEffect(()=>{
+
+        window.onkeydown=onkeydown;
+
+        return () => {
+            window.onkeydown=null; // Clean up the event listener
+        };
+
+    },[]);
+
+    return (
+        <div className="flex flex-col justify-center bg-yellow-400 text-4xl overflow-hidden">
+            {input}
+        </div>
+    );
+
+}

vite/src/pages/flow.jsx

@@ -6,6 +6,7 @@ import { Countdown } from "../comps/timer";
 import { Status, useChat } from "../util/useChat";
 import { getSummary } from "../util/chat";
 import { saveHistory } from "../util/output";
+import NumPad from "../comps/numpad";
 
 
 const EmojiType={
@@ -22,6 +23,7 @@ export function Flow(){
     const [currentCue, setCurrentCue] = useState(null);
     const [chatWelcome, setChatWelcome] = useState(null);
     const [audioInput, setAudioInput] = useState(false); 
+    const [userId, setUserId] = useState();
 
     const refTimer=useRef();
     const refAudio=useRef();
@@ -72,7 +74,7 @@ export function Flow(){
         setCurrentCue(cue);
         refCurrentCue.current = cue; // Store the current cue in ref
 
-        if(parseFloat(cue.id)<=4.1){
+        if(parseFloat(cue.id)<=4.2){
             // Special case for starting a conversation
             console.log('clear conversation...');
             reset();            
@@ -82,7 +84,7 @@ export function Flow(){
             // Special case for starting a conversation
             resetTranscript();
 
-            if(cue.id==4.1){
+            if(cue.callback=="start_conversation"){
                 console.log('Starting conversation...');
                 sendMessage();            
                 setChatWelcome(true); 
@@ -139,6 +141,23 @@ export function Flow(){
         stopChat(); // Stop chat processing
     }
 
+
+    function onNumpad(mess){
+        if(refCurrentCue.current?.callback!='numpad') return;        
+
+        console.log('Numpad input:', mess);
+        setUserId(()=>mess);
+    }
+
+    useEffect(()=>{
+
+        if(userId>=1 && userId<=24) {
+            console.log('User ID set:', userId);
+            playCue(cuelist.find(c => c.id === currentCue.nextcue)); // Play cue 5 when userId is set            
+        }
+
+    },[userId]);
+
     useEffect(()=>{
         if(audioInput && isMicrophoneAvailable) {
            
@@ -209,12 +228,6 @@ export function Flow(){
                 
 
                 break;
-            // case Status.AUDIO_ENDED:
-            //     console.log('Audio ended');
-            //     if(currentCue.nextcue==5 || currentCue.nextcue==6){ // Q5 & Q6 wait for audio end
-            //         playCue(cuelist.find(c => c.id === currentCue.nextcue));
-            //     }
-            //     break;
         }
 
     },[status]);
@@ -245,7 +258,8 @@ export function Flow(){
                 <button className="!bg-red-300" onClick={onStop}>Stop</button>
                 <button className="!bg-yellow-300" onClick={()=>{
                     saveHistory(history);
-                }}>Save</button>
+                }}>Save Log</button>
+                <NumPad onSend={onNumpad} />
             </div>
             <div className=" max-h-[33vh] overflow-y-auto">
                 <table className="border-collapse **:border-y w-full **:p-2">