Merge remote-tracking branch 'origin/dev' into feat/visual-programming-interface

# Conflicts:
#	src/App.tsx
#	src/pages/Home/Home.tsx
#	src/pages/TemplatePage/Template.tsx

src/pages/Home/Home.module.css

@@ -1,6 +1,24 @@
 .read_the_docs {
   color: #888;
 }
+
 .card {
   padding: 2em;
 }
+
+.links {
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+  align-items: center;
+}
+
+.gap-xl {
+  gap: 2rem;
+}
+
+.links {
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+}

src/pages/Home/Home.tsx

@@ -1,47 +1,20 @@
 import { Link } from 'react-router'
-import reactLogo from '../../assets/react.svg'
-import viteLogo from '../../assets/vite.svg'
 import pepperLogo from '../../assets/pepper_transp2_small.svg'
-import style from './Home.module.css'
-import Counter from '../../components/components.tsx'
+import styles from './Home.module.css'
 
 function Home() {
-  
-
-
   return (
-    <>
-      <div>
-        <div className = "logoPepperScaling">
-          <a href="https://git.science.uu.nl/ics/sp/2025/n25b" target="_blank">
-            <img src={pepperLogo} className="logopepper" alt="Pepper logo" />
-          </a>
-        </div>
-        
-        <a href="https://vite.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
+    <div className={`flex-col ${styles.gapXl}`}>
+      <div className="logoPepperScaling">
+        <a href="https://git.science.uu.nl/ics/sp/2025/n25b" target="_blank">
+          <img src={pepperLogo} className="logopepper" alt="Pepper logo" />
         </a>
       </div>
-      <h1>Vite + React</h1>
-      
-        <Counter />
-        <Link to = '/visprog'>
-            <button className='movePage right' onClick={() : void => {}}>
-            Page Cool --{'>'}
-            </button>
-        </Link>
-        
-        <p>
-            Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      
-      <p className={style.read_the_docs}>
-        Click on the Vite and React logos to learn more
-      </p>
-    </>
+      <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/TemplatePage/Template.module.css

@@ -1,4 +0,0 @@
-button.reset:hover {
-  background-color: yellow;
-}
-

src/pages/TemplatePage/Template.tsx

@@ -1,21 +1,9 @@
-
-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 TemplatePage() {
-  
-
   return (
     <>
       <Counter />
-      <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>
     </>
   )
 }