add light control

vite/src/comps/light.jsx

@@ -0,0 +1,54 @@
+import gsap from "gsap"
+import { forwardRef, useEffect, useImperativeHandle, useRef } from "react"
+import { sendOsc } from "../util/osc";
+
+const FADE_TIME=3;
+
+export const Light=forwardRef((props, ref)=>{
+
+    const refVal=useRef({val: 0});
+    const refInput=useRef();
+    const refContainer=useRef();
+
+    function fade(from, to){
+        
+        const time= parseFloat(refInput.current.value) || FADE_TIME;
+        gsap.fromTo(refVal.current,{val: from}, { 
+            val: to, 
+            duration: time,
+            onUpdate: () => {
+                // console.log(refVal.current.val);
+                sendOsc('/light', refVal.current.val.toString());
+                refContainer.current.style.background= `rgba(0, 255, 0, ${refVal.current.val})`; // Update background color based on value
+            },
+        });
+    }
+    useImperativeHandle(ref, () => ({
+        fadeIn: ()=>{
+            console.log('fadeIn');
+            fade(0, 1);
+        },
+        fadeOut: ()=>{
+            console.log('fadeOut');
+            fade(1, 0);
+        }
+    }));
+    useEffect(()=>{
+
+        refInput.current.value=FADE_TIME;
+
+    },[]);
+
+    return (
+        <div ref={refContainer} className="flex flex-row gap-4 !w-auto p-1 border">
+            <span className="flex flex-col justify-between">
+                <label className="text-center">Light</label>
+                <input ref={refInput} type="text" className="border w-[5vw]" defaultValue={5}/>                
+            </span>
+            <span className="flex flex-col justify-between">
+                <button onClick={()=>fade(0,1)}>fadeIn</button>
+                <button onClick={()=>fade(1,0)}>fadeOut</button>
+            </span>
+        </div>
+    )
+});

vite/src/comps/numpad.jsx

@@ -31,7 +31,7 @@ export default function NumPad({onSend}){
             }
             return;
         }else if(e.key===KEY_BACKSPACE || e.key==='Backspace' || e.key==='Delete'){
-            setInput((prev)=>prev?.slice(0,-1));
+            setInput((prev)=>'');
             return;
         }
         

vite/src/pages/flow.jsx

@@ -7,6 +7,7 @@ import { Status, useChat } from "../util/useChat";
 import { getSummary } from "../util/chat";
 import { saveHistory } from "../util/output";
 import NumPad from "../comps/numpad";
+import { Light } from "../comps/light";
 
 
 const EmojiType={
@@ -28,6 +29,7 @@ export function Flow(){
     const refTimer=useRef();
     const refAudio=useRef();
     const refInput=useRef();
+    const refLight=useRef();
 
     const refCurrentCue= useRef(null);
 
@@ -89,7 +91,7 @@ export function Flow(){
                 sendMessage();            
                 setChatWelcome(true); 
             }else{
-                const message= refInput.current.value?.trim();
+                const message= refInput.current?.value?.trim();
                 if(message && message.length>0) {
                                 
                     sendMessage(message);
@@ -119,6 +121,9 @@ export function Flow(){
 
         console.log('onCueEnd:', cue.id);
 
+        if(cue.callback=='start_conversation') refLight.current.fadeIn(); // Fade in light for conversation start
+        if(cue.callback=='summary') refLight.current.fadeOut(); // Fade out light for conversation end
+
        
         if(cue.auto) {
             playCue(cuelist.find(c => c.id === cue.nextcue));
@@ -250,7 +255,7 @@ export function Flow(){
     return (
         <main className="items-center">
 
-            <div className="w-full p-2 flex flex-row justify-center gap-2 *:w-[10vw] *:h-[10vw]">
+            <div className="w-full p-2 flex flex-row justify-center gap-2 *:w-[12vw] *:h-[12vw]">
                 <div className="bg-gray-100 text-4xl font-bold mb-4 flex justify-center items-center">
                     {refCurrentCue.current?.name}
                 </div>
@@ -260,6 +265,7 @@ export function Flow(){
                     saveHistory(history);
                 }}>Save Log</button>
                 <NumPad onSend={onNumpad} />
+                <Light ref={refLight} />
             </div>
             <div className=" max-h-[33vh] overflow-y-auto">
                 <table className="border-collapse **:border-y w-full **:p-2">
@@ -282,7 +288,7 @@ export function Flow(){
                                 <td>{description}</td>
                                 <td>{EmojiType[type]}</td>
                                 <td>{auto ? '⤵️' : ''}</td>
-                                <td>{audioFile || props.duration}</td>
+                                <td>{audioFile || props.duration} {props.callback && `<${props.callback}>`}</td>
                                 <td>
                                     <button className="rounded-full !bg-green-200"
                                         onClick={()=>{