src/App.tsx

@@ -2,6 +2,7 @@ import { Routes, Route, Link } from 'react-router'
 import './App.css'
 import TemplatePage from './pages/TemplatePage/Template.tsx'
 import Home from './pages/Home/Home.tsx'
+import Robot from './pages/Robot/Robot.tsx';
 
 function App(){
   return (
@@ -13,6 +14,7 @@ function App(){
         <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/template" element={<TemplatePage />} />
+          <Route path="/robot" element={<Robot />} />
         </Routes>
       </main>
     </div>

src/pages/Home/Home.tsx

@@ -11,6 +11,7 @@ function Home() {
         </a>
       </div>
       <div className={styles.links}>
+        <Link to={"/robot"}>Robot Interaction →</Link>
         <Link to={"/template"}>Template →</Link>
       </div>
     </div>

src/pages/Robot/Robot.tsx

@@ -0,0 +1,94 @@
+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>
+    </>
+  );
+}

src/pages/ServerComms/ServerComms.tsx

@@ -1,80 +0,0 @@
-import { useState, useEffect } from 'react'
-import { Link } from 'react-router'
-//import Counter from '../../components/components.tsx'
-
-
-//this is your css file where you can style your buttons and such
-//you can still use css parts from App.css, but also overwrite them
-
-function ServerComms() {
-  const [message, setMessage] = useState('');
-  const [sseMessage, setSseMessage] = useState('');
-  const [spoken, setSpoken] = useState<string>("");
-
-  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) => {
-      setSseMessage(event.data);
-
-      try {
-          const data = JSON.parse(event.data);
-          if (data.speech) setSpoken(data.speech);
-      } catch {}
-    };
-
-    return () => {
-      eventSource.close();
-    };
-  }, []);
-
-  return (
-    <div className="App">
-      <div>
-        <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}>Send Message to Backend</button>
-      </div>
-      <div>
-        <h2>Message from Server (SSE):</h2>
-        <p>{sseMessage}</p>
-      </div>
-      <div>
-        <h2>Spoken text (SSE):</h2>
-        <p>{spoken}</p>
-      </div>
-      <div>
-        <Link to = {"/"}> {/* here you link to the homepage, in App.tsx you can link new pages */}
-          <button className= 'movePage left' onClick={() :void => {}}>
-            Page {'<'}-- Go Home
-          </button>
-        </Link>
-      </div>
-    </div>
-    
-    
-  );
-}
-
-export default ServerComms