Add functionality for raising hand

client/src/components/ConversationControls.jsx

@@ -1,10 +1,19 @@
 import React from "react";
 
-function ConversationControls({ isPaused, onPauseResume, onSkipForward }) {
+function ConversationControls({
+  isPaused,
+  onPauseResume,
+  onSkipForward,
+  onRaiseHandOrNevermind,
+  isRaisedHand,
+}) {
   return (
     <div style={{ pointerEvents: "auto" }}>
       <button onClick={onPauseResume}>{isPaused ? "Resume" : "Pause"}</button>
       <button onClick={onSkipForward}>Skip forward</button>
+      <button onClick={onRaiseHandOrNevermind}>
+        {isRaisedHand ? "Nevermind" : "Raise hand"}
+      </button>
     </div>
   );
 }

client/src/components/Council.jsx

@@ -6,14 +6,19 @@ import Overlay from "./Overlay";
 import CouncilOverlays from "./CouncilOverlays";
 import Navbar from "./Navbar";
 import Output from "./Output";
+import ConversationControls from "./ConversationControls";
 import useWindowSize from "../hooks/useWindowSize";
+import HumanInput from "./HumanInput";
 
 function Council({ options }) {
   const { foods, humanName, topic } = options;
   const [activeOverlay, setActiveOverlay] = useState("");
   const { width: screenWidth } = useWindowSize();
   const [textMessages, setTextMessages] = useState([]); // State to store conversation updates
   const [audioMessages, setAudioMessages] = useState([]); // To store multiple ArrayBuffers
+  const [isReady, setIsReady] = useState(false);
+  const [isRaisedHand, setIsRaisedHand] = useState(false);
+
   const socketRef = useRef(null); // Using useRef to persist socket instance
 
   const foodsContainerStyle = {
@@ -62,6 +67,15 @@ function Council({ options }) {
     };
   }, []);
 
+  function handleOnIsReady() {
+    setIsReady(true);
+  }
+
+  function handleOnRaiseHandOrNevermind() {
+    console.log("Setting isRaisedHand...");
+    setIsRaisedHand((prev) => !prev);
+  }
+
   function displayResetWarning() {
     setActiveOverlay("reset");
   }
@@ -82,12 +96,19 @@ function Council({ options }) {
           className="text-container"
           style={{ justifyContent: "end" }}
         >
-          {/* Render the Output component regardless of the overlay */}
           <Output
             textMessages={textMessages}
             audioMessages={audioMessages}
             isActiveOverlay={activeOverlay !== ""}
+            isRaisedHand={isRaisedHand}
+            onIsReady={handleOnIsReady}
           />
+          {isReady && (
+            <ConversationControls
+              onRaiseHandOrNevermind={handleOnRaiseHandOrNevermind}
+              isRaisedHand={isRaisedHand}
+            />
+          )}
         </div>
         <div style={foodsContainerStyle}>
           {foods.map((food, index) => (

client/src/components/HumanInput.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+function HumanInput() {
+  return (
+    <div>
+      <textarea
+        rows="2"
+        placeholder="your input"
+        style={{ width: "80%" }}
+      />
+    </div>
+  );
+}
+
+export default HumanInput;

client/src/components/Output.jsx

@@ -2,14 +2,44 @@ import React, { useState, useEffect } from "react";
 import TextOutput from "./TextOutput";
 import AudioOutput from "./AudioOutput";
 
-function Output({ textMessages, audioMessages, isActiveOverlay }) {
+function Output({
+  textMessages,
+  audioMessages,
+  isActiveOverlay,
+  isRaisedHand,
+  onIsReady,
+}) {
   const [currentMessageIndex, setCurrentMessageIndex] = useState(0);
   const [currentTextMessage, setCurrentTextMessage] = useState(null);
   const [currentAudioMessage, setCurrentAudioMessage] = useState(null);
 
+  // useEffect for raising hand or nevermind when a food is talking
+  useEffect(() => {
+    if (!isRaisedHand) {
+      tryFindTextAndAudio();
+    } else {
+      console.log("Human interjection time!");
+    }
+  }, [currentMessageIndex]);
+
+  // useEffect for nevermind when adding new input
+  useEffect(() => {
+    if (
+      !isRaisedHand &&
+      currentTextMessage === null &&
+      currentAudioMessage === null
+    ) {
+      tryFindTextAndAudio();
+    }
+  }, [isRaisedHand]);
+
   useEffect(() => {
     tryFindTextAndAudio();
-  }, [currentMessageIndex, textMessages, audioMessages]);
+  }, [textMessages, audioMessages]);
+
+  useEffect(() => {
+    console.log("Hand raised: ", isRaisedHand);
+  }, [isRaisedHand]);
 
   function tryFindTextAndAudio() {
     const textMessage = textMessages[currentMessageIndex];
@@ -25,6 +55,8 @@ function Output({ textMessages, audioMessages, isActiveOverlay }) {
     ) {
       console.log("Both found!");
 
+      onIsReady();
+
       setCurrentTextMessage((prev) => textMessage);
       setCurrentAudioMessage((prev) => audioMessage);
     }

client/src/components/TextOutput.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 
-function TextOutput({ currentTextMessage }) {
+function TextOutput({ currentTextMessage, currentAudioMessage }) {
   const [currentSnippetIndex, setCurrentSnippetIndex] = useState(0);
   const [currentSnippet, setCurrentSnippet] = useState("");
 
@@ -10,7 +10,7 @@ function TextOutput({ currentTextMessage }) {
   }, [currentTextMessage]);
 
   useEffect(() => {
-    if (currentTextMessage && currentTextMessage.text) {
+    if (currentTextMessage && currentTextMessage.text && currentAudioMessage) {
       const text = currentTextMessage.text;
       // Split the text into sentences, ignoring periods followed by a number
       const sentences = text.split(/(?<=[.!?])(?=\s+(?![0-9]))/);
@@ -23,7 +23,12 @@ function TextOutput({ currentTextMessage }) {
       }, calculateDisplayTime(currentSnippet) * 1000);
       return () => clearInterval(interval);
     }
-  }, [currentTextMessage, currentSnippetIndex]);
+  }, [
+    currentTextMessage,
+    currentSnippetIndex,
+    currentAudioMessage,
+    currentSnippet,
+  ]);
 
   // Calculate the display time based on the number of characters in the snippet
   const calculateDisplayTime = (text) => {