pepperplus-ui/src/pages/Robot/Robot.tsx

import { useState, useEffect, useRef } from 'react'

export default function Robot() {
  const [message, setMessage] = useState('');

  const [listening, setListening] = useState(false);
  const [conversation, setConversation] = useState<{"role": "user" | "assistant", "content": string}[]>([])
  const conversationRef = useRef<HTMLDivElement | null>(null);
  const [conversationIndex, setConversationIndex] = useState(0);

  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);
    }
  };

  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]);

  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>
    </>
  );
}