Add human interjection

Nonhuman-Nonsense · Apr 25, 2024 · 0c28951 · 0c28951
1 parent ce22340
commit 0c28951
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 17 deletions.
diff --git a/client/src/components/Council.jsx b/client/src/components/Council.jsx
@@ -20,6 +20,10 @@ function Council({ options }) {
   const [isRaisedHand, setIsRaisedHand] = useState(false);
   const [humanInterjection, setHumanInterjection] = useState(false);
   const [skipForward, setSkipForward] = useState(false);
+  const [newTopic, setNewTopic] = useState("");
+  const [interjectionCounter, setInterjectionCounter] = useState(-1000);
+  const [interjectionReplyRecieved, setInterjectionReplyRecieved] =
+    useState(false);
 
   const socketRef = useRef(null); // Using useRef to persist socket instance
 
@@ -35,39 +39,54 @@ function Council({ options }) {
   };
 
   useEffect(() => {
+    initializeConversation(); // Call the function to start the conversation when component mounts
+  }, []);
+
+  // Function to initialize or restart the conversation
+  const initializeConversation = (customTopic) => {
+    const topicToSend = customTopic || topic; // Use custom topic if provided, else use default topic
+
     socketRef.current = io();
 
-    // Send initial data to start the conversation
-    let promptsAndOptions = {
+    const promptsAndOptions = {
       options: {
         ...globalOptions,
         humanName,
         raiseHandPrompt: false,
         neverMindPrompt: false,
       },
       name: "New room",
-      topic,
+      topic: topicToSend,
       characters: foods,
     };
+
     socketRef.current.emit("start_conversation", promptsAndOptions);
 
-    // Listen for conversation text updates
     socketRef.current.on("conversation_update", (textMessage) => {
+      setInterjectionCounter((prev) => prev + 1);
       setTextMessages((prev) => [...prev, textMessage]);
     });
 
-    // Listen for audio updates
     socketRef.current.on("audio_update", (audioMessage) => {
+      setInterjectionCounter((prev) => prev + 1);
       setAudioMessages((prevAudioMessages) => [
         ...prevAudioMessages,
         audioMessage,
       ]);
     });
+  };
 
-    return () => {
-      socketRef.current.disconnect();
-    };
-  }, []);
+  useEffect(() => {
+    if (interjectionCounter === 2) {
+      setInterjectionReplyRecieved(true);
+      setHumanInterjection(false);
+      setIsRaisedHand(false);
+    }
+  }, [interjectionCounter]);
+
+  function handleOnResetInterjectionReply() {
+    setInterjectionReplyRecieved(false);
+  }
 
   function handleOnIsReady() {
     setIsReady(true);
@@ -78,7 +97,21 @@ function Council({ options }) {
   }
 
   function handleOnSubmit() {
-    console.log("Submitting new issue");
+    const promptsAndOptions = {
+      options: {
+        ...globalOptions,
+        humanName,
+        raiseHandPrompt: newTopic,
+        neverMindPrompt: false,
+      },
+      name: "New room",
+      topic: newTopic,
+      characters: foods,
+    };
+
+    setInterjectionCounter(() => 0);
+
+    socketRef.current.emit("raise_hand", promptsAndOptions);
   }
 
   function handleOnRaiseHandOrNevermind() {
@@ -89,6 +122,10 @@ function Council({ options }) {
     setHumanInterjection(value);
   }
 
+  function handleOnAddNewTopic(newTopic) {
+    setNewTopic(newTopic);
+  }
+
   function displayResetWarning() {
     setActiveOverlay("reset");
   }
@@ -109,7 +146,9 @@ function Council({ options }) {
           className="text-container"
           style={{ justifyContent: "end" }}
         >
-          {humanInterjection && <HumanInput />}
+          {humanInterjection && (
+            <HumanInput onAddNewTopic={handleOnAddNewTopic} />
+          )}
           <Output
             textMessages={textMessages}
             audioMessages={audioMessages}
@@ -119,6 +158,8 @@ function Council({ options }) {
             onHumanInterjection={handleOnHumanInterjection}
             humanInterjection={humanInterjection}
             skipForward={skipForward}
+            interjectionReplyRecieved={interjectionReplyRecieved}
+            onResetInterjectionReply={handleOnResetInterjectionReply}
           />
           {isReady && (
             <ConversationControls

diff --git a/client/src/components/HumanInput.jsx b/client/src/components/HumanInput.jsx
@@ -1,9 +1,14 @@
 import React from "react";
 
-function HumanInput() {
+function HumanInput({ onAddNewTopic }) {
+  function handleOnInput(e) {
+    onAddNewTopic(e.target.value);
+  }
+
   return (
     <div style={{ pointerEvents: "auto" }}>
       <textarea
+        onInput={handleOnInput}
         rows="2"
         placeholder="your input"
       />

diff --git a/client/src/components/Output.jsx b/client/src/components/Output.jsx
@@ -11,12 +11,28 @@ function Output({
   onHumanInterjection,
   humanInterjection,
   skipForward,
+  interjectionReplyRecieved,
+  onResetInterjectionReply,
 }) {
   const [currentMessageIndex, setCurrentMessageIndex] = useState(0);
   const [currentTextMessage, setCurrentTextMessage] = useState(null);
   const [currentAudioMessage, setCurrentAudioMessage] = useState(null);
   const [stopAudio, setStopAudio] = useState(false);
 
+  useEffect(() => {
+    if (interjectionReplyRecieved) {
+      console.log(
+        "Should be about dancing: ",
+        textMessages[textMessages.length - 1].text
+      );
+
+      setCurrentTextMessage(textMessages[textMessages.length - 1]);
+      setCurrentAudioMessage(audioMessages[audioMessages.length - 1]);
+
+      onResetInterjectionReply();
+    }
+  }, [interjectionReplyRecieved]);
+
   useEffect(() => {
     if (currentTextMessage && currentAudioMessage) {
       proceedToNextMessage();
@@ -39,29 +55,35 @@ function Output({
     if (
       !isRaisedHand &&
       currentTextMessage === null &&
-      currentAudioMessage === null
+      currentAudioMessage === null &&
+      !interjectionReplyRecieved
     ) {
       onHumanInterjection(false);
       findTextAndAudio();
     }
   }, [isRaisedHand]);
 
   useEffect(() => {
+    console.log("Amount of text messages :", textMessages.length);
+    console.log("Amount of voice messages :", audioMessages.length);
+
+    console.log("Text messages:", textMessages);
+    console.log("Audio messages:", audioMessages);
+
     findTextAndAudio();
   }, [textMessages, audioMessages]);
 
   function findTextAndAudio() {
     const textMessage = textMessages[currentMessageIndex];
-    const audioMessage = audioMessages.find(
-      (a) => a.message_index === currentMessageIndex
-    );
+    const audioMessage = audioMessages.find((a) => a.id === textMessage.id);
 
     if (
       textMessage &&
       audioMessage &&
       !currentTextMessage &&
       !currentAudioMessage &&
-      !isRaisedHand
+      !isRaisedHand &&
+      !interjectionReplyRecieved
     ) {
       console.log("Both found!");
 
@@ -76,6 +98,8 @@ function Output({
   function proceedToNextMessage() {
     setCurrentTextMessage(() => null);
     setCurrentAudioMessage(() => null);
+
+    console.log("Current index: ", currentMessageIndex);
     setCurrentMessageIndex((prev) => prev + 1);
   }