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

.githooks/pre-commit

@@ -8,11 +8,11 @@ if echo "$branch" | grep -Eq "(dev|main)"; then
 fi
 
 # allowed pattern <type/>
-if echo "$branch" | grep -Eq "^(feat|fix|refactor|perf|style|test|docs|build|chore|revert)\/\w+-\w+-\w+"; then
+if echo "$branch" | grep -Eq "^(feat|fix|refactor|perf|style|test|docs|build|chore|revert)\/\w+(-\w+){0,5}$"; then
   echo "✅ Branch name valid: $branch"
   exit 0
 else
   echo "❌ Invalid branch name: $branch"
-  echo "Branch must be named <type>/<description-of-branch> (must have 2 stipes - -)"
+  echo "Branch must be named <type>/<description-of-branch> (must have one to six words separated by a dash)"
   exit 1
 fi

src/App.css

@@ -1,24 +1,3 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-
 .logopepper {
   height: 8em;
   padding: 1.5em;
@@ -32,27 +11,21 @@
   filter: drop-shadow(0 0 10em #4eff14aa);
 }
 
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-
 @keyframes logo-pepper-spin {
-  from {
+  0% {
-    transform: rotate(-20deg);
+    transform: rotate(0);
   }
-  to {
+  25% {
     transform: rotate(20deg);
   }
+  75% {
+    transform: rotate(-20deg);
+  }
+  100% {
+    transform: rotate(0);
+  }
 }
 
-
-
 @keyframes logo-pepper-scale {
   from {
     transform: scale(1,1);
@@ -63,19 +36,13 @@
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
+  .logopepper:hover {
-    animation: logo-spin infinite 20s linear;
+    animation: logo-pepper-spin infinite 1s linear;
   }
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  .logopepper {
+  .logoPepperScaling:hover {
-    animation: logo-pepper-spin infinite 1s linear alternate;
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .logoPepperScaling {
     animation: logo-pepper-scale infinite 1s linear alternate;
   }
 }
@@ -113,3 +80,83 @@ button.movePage.right{
 button.movePage:hover{
   background-color: rgb(0, 176, 176);
 }
+
+
+
+header {
+  position: sticky;
+  top: 0;
+  left: 0;
+  right: 0;
+
+  padding: 1rem;
+
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  justify-content: center;
+
+  backdrop-filter: blur(10px);
+  z-index: 1; /* Otherwise any translated elements render above the blur?? */
+}
+
+main {
+  padding: 1rem 0;
+}
+
+.flex-row {
+  display: flex;
+  flex-direction: row;
+}
+.flex-col {
+  display: flex;
+  flex-direction: column;
+}
+
+.flex-1 {
+  flex: 1;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.align-center {
+  align-items: center;
+}
+.justify-center {
+  justify-content: center;
+}
+.justify-between {
+  justify-content: space-between;
+}
+
+.gap-sm {
+  gap: .25rem;
+}
+.gap-md {
+  gap: .5rem;
+}
+.gap-lg {
+  gap: 1rem;
+}
+
+.padding-sm {
+  padding: .25rem;
+}
+.padding-md {
+  padding: .5rem;
+}
+.padding-lg {
+  padding: 1rem;
+}
+
+.round-sm {
+  border-radius: .25rem;
+}
+.round-md {
+  border-radius: .5rem;
+}
+.round-lg {
+  border-radius: 1rem;
+}

src/App.tsx

@@ -1,16 +1,23 @@
-import { Routes, Route } from 'react-router'
+import { Routes, Route, Link } from 'react-router'
 import './App.css'
-import VisProg from './pages/VisProgPage/VisProg.tsx'
+import TemplatePage from './pages/TemplatePage/Template.tsx'
 import Home from './pages/Home/Home.tsx'
-
+import Robot from './pages/Robot/Robot.tsx';
 
 function App(){
-  
   return (
+    <div>
+      <header>
+        <Link to={"/"}>Home</Link>
+      </header>
+      <main className={"flex-col align-center"}>
         <Routes>
           <Route path="/" element={<Home />} />
-      <Route path="/visprog" element={<VisProg />} />
+          <Route path="/template" element={<TemplatePage />} />
+          <Route path="/robot" element={<Robot />} />
         </Routes>
+      </main>
+    </div>
   )
 }
 

src/components/components.tsx

@@ -1,14 +1,11 @@
-// src/components/Counter.tsx
 import { useState } from 'react'
-//import style from './Counter.module.css' // optional, if you want a CSS module for reset button
-import '../App.css'
 
 function Counter() {
   const [count, setCount] = useState(0)
 
   return (
     <div className="card">
-      <button onClick={() => setCount((count) => count + 3)}>
+      <button onClick={() => setCount((count) => count + 1)}>
         count is {count}
       </button>
       <button className='reset' onClick={() => setCount(0)}>

src/index.css

@@ -13,6 +13,16 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+html, body {
+  margin: 0;
+  padding: 0;
+
+  height: 100dvh;
+  width: 100dvw;
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
+
 a {
   font-weight: 500;
   color: #646cff;
@@ -22,14 +32,6 @@ a:hover {
   color: #535bf2;
 }
 
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
 h1 {
   font-size: 3.2em;
   line-height: 1.1;

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 styles from './Home.module.css'
-import Counter from '../../components/components.tsx'
 
 function Home() {
-  
-
-
   return (
-    <>
+    <div className={`flex-col ${styles.gapXl}`}>
-      <div>
+      <div className="logoPepperScaling">
-        <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>
-        
+      <div className={styles.links}>
-        <a href="https://vite.dev" target="_blank">
+        <Link to={"/robot"}>Robot Interaction →</Link>
-          <img src={viteLogo} className="logo" alt="Vite logo" />
+        <Link to={"/template"}>Template →</Link>
-        </a>
+      </div>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React 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>
-    </>
   )
 }
 

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

vite.config.ts

@@ -4,4 +4,9 @@ import react from '@vitejs/plugin-react'
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
+  css: {
+    modules: {
+      localsConvention: "camelCase",
+    }
+  },
 })