131 lines
4.7 KiB
TypeScript
131 lines
4.7 KiB
TypeScript
import { useState, useEffect, useRef } from 'react'
|
||
|
||
/**
|
||
* Displays a live robot interaction panel with user input, conversation history,
|
||
* and real-time updates from the robot backend via Server-Sent Events (SSE).
|
||
*
|
||
* @returns A React element rendering the interactive robot UI.
|
||
*/
|
||
export default function Robot() {
|
||
/** The text message currently entered by the user. */
|
||
const [message, setMessage] = useState('');
|
||
|
||
/** Whether the robot’s microphone or listening mode is currently active. */
|
||
const [listening, setListening] = useState(false);
|
||
/** The ongoing conversation history as a sequence of user/assistant messages. */
|
||
const [conversation, setConversation] = useState<
|
||
{"role": "user" | "assistant", "content": string}[]>([])
|
||
/** Reference to the scrollable conversation container for auto-scrolling. */
|
||
const conversationRef = useRef<HTMLDivElement | null>(null);
|
||
/**
|
||
* Index used to force refresh the SSE connection or clear conversation.
|
||
* Incrementing this value triggers a reset of the live data stream.
|
||
*/
|
||
const [conversationIndex, setConversationIndex] = useState(0);
|
||
|
||
/**
|
||
* Sends a message to the robot backend.
|
||
*
|
||
* Makes a POST request to `/message` with the user’s text.
|
||
* The backend may respond with confirmation or error information.
|
||
*/
|
||
const sendMessage = async () => {
|
||
try {
|
||
const response = await fetch("http://localhost:8000/message", {
|
||
method: "POST",
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
},
|
||
body: JSON.stringify({ message }),
|
||
});
|
||
const data = await response.json();
|
||
console.log(data);
|
||
} catch (error) {
|
||
console.error("Error sending message: ", error);
|
||
}
|
||
};
|
||
|
||
/**
|
||
* Establishes a persistent Server-Sent Events (SSE) connection
|
||
* to receive real-time updates from the robot backend.
|
||
*
|
||
* Handles three event types:
|
||
* - `voice_active`: whether the robot is currently listening.
|
||
* - `speech`: recognized user speech input.
|
||
* - `llm_response`: the robot’s language model-generated reply.
|
||
*
|
||
* The connection resets whenever `conversationIndex` changes.
|
||
*/
|
||
useEffect(() => {
|
||
const eventSource = new EventSource("http://localhost:8000/sse");
|
||
|
||
eventSource.onmessage = (event) => {
|
||
try {
|
||
const data = JSON.parse(event.data);
|
||
if ("voice_active" in data) setListening(data.voice_active);
|
||
if ("speech" in data) setConversation(conversation => [...conversation, {"role": "user", "content": data.speech}]);
|
||
if ("llm_response" in data) setConversation(conversation => [...conversation, {"role": "assistant", "content": data.llm_response}]);
|
||
} catch {
|
||
console.log("Unparsable SSE message:", event.data);
|
||
}
|
||
};
|
||
|
||
return () => {
|
||
eventSource.close();
|
||
};
|
||
}, [conversationIndex]);
|
||
|
||
/**
|
||
* Automatically scrolls the conversation view to the bottom
|
||
* whenever a new message is added.
|
||
*/
|
||
useEffect(() => {
|
||
if (!conversationRef || !conversationRef.current) return;
|
||
conversationRef.current.scrollTop = conversationRef.current.scrollHeight;
|
||
}, [conversation]);
|
||
|
||
return (
|
||
<>
|
||
<h1>Robot interaction</h1>
|
||
<h2>Force robot speech</h2>
|
||
<div className={"flex-row gap-md justify-center"}>
|
||
<input
|
||
type="text"
|
||
value={message}
|
||
onChange={(e) => setMessage(e.target.value)}
|
||
onKeyDown={(e) => e.key === "Enter" && sendMessage().then(() => setMessage(""))}
|
||
placeholder="Enter a message"
|
||
/>
|
||
<button onClick={sendMessage}>Speak</button>
|
||
</div>
|
||
<div className={"flex-col gap-lg align-center"}>
|
||
<h2>Conversation</h2>
|
||
<p>Listening {listening ? "🟢" : "🔴"}</p>
|
||
<div style={{ maxHeight: "200px", maxWidth: "600px", overflowY: "auto"}} ref={conversationRef}>
|
||
{conversation.map((item, i) => (
|
||
<p key={i}
|
||
style={{
|
||
backgroundColor: item["role"] == "user"
|
||
? "color-mix(in oklab, canvas, blue 20%)"
|
||
: "color-mix(in oklab, canvas, gray 20%)",
|
||
whiteSpace: "pre-line",
|
||
}}
|
||
className={"round-md padding-md"}
|
||
>{item["content"]}</p>
|
||
))}
|
||
</div>
|
||
<div className={"flex-row gap-md justify-center"}>
|
||
<button onClick={() => {
|
||
setConversationIndex((conversationIndex) => conversationIndex + 1)
|
||
setConversation([])
|
||
}}>Reset</button>
|
||
<button onClick={() => {
|
||
setConversationIndex((conversationIndex) => conversationIndex == -1 ? 0 : -1)
|
||
setConversation([])
|
||
}}>{conversationIndex == -1 ? "Start" : "Stop"}</button>
|
||
</div>
|
||
</div>
|
||
</>
|
||
);
|
||
}
|