Refactor Output and TextOutput

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "Launch Chrome against localhost",
+      "url": "http://localhost:3000",
+      "webRoot": "${workspaceFolder}"
+    }
+  ]
+}

client/src/components/Council.jsx

@@ -9,7 +9,7 @@ import Contact from "./Contact";
 import Share from "./Share";
 import ResetWarning from "./ResetWarning";
 import Navbar from "./Navbar";
-import TextOutput from "./TextOutput";
+import Output from "./Output";
 import useWindowSize from "../hooks/useWindowSize";
 
 function Council({ options }) {
@@ -108,7 +108,7 @@ function Council({ options }) {
             className="text-container"
             style={{ justifyContent: "end" }}
           >
-            <TextOutput conversation={conversation} />
+            <Output conversation={conversation} />
           </div>
         )}
         <div style={foodsContainerStyle}>

client/src/components/TextOutput.jsx

@@ -1,58 +1,13 @@
-import React, { useState, useEffect } from "react";
+import React from "react";
 
-function TextOutput({ conversation }) {
-  const [currentMessageIndex, setCurrentMessageIndex] = useState(0);
-  const [currentSnippetIndex, setCurrentSnippetIndex] = useState(0);
-  const [currentMessageTextSnippet, setCurrentMessageTextSnippet] =
-    useState("");
-  const [initialize, setInitialize] = useState(true); // Flag to control initialization
+function TextOutput({ currentMessageTextSnippet }) {
   const textOutputStyle = {
     fontFamily: "Arial, sans-serif",
     backgroundColor: "rgba(0,0,0,0.7)",
   };
 
-  // Function to calculate the display time based on text length
-  const calculateDisplayTime = (text) => Math.max(3, text.length * 0.05);
-
-  useEffect(() => {
-    if (initialize && conversation.length > 0) {
-      setCurrentMessageIndex(0);
-      setCurrentSnippetIndex(0);
-      setInitialize(false); // Reset initialization flag after first setup
-    }
-  }, [conversation, initialize]);
-
-  useEffect(() => {
-    const processSnippets = () => {
-      if (conversation.length > currentMessageIndex) {
-        const snippets =
-          conversation[currentMessageIndex].text.split(/(?<=\.\s)/);
-        if (snippets.length > currentSnippetIndex) {
-          setCurrentMessageTextSnippet(snippets[currentSnippetIndex]);
-          const timeout = setTimeout(() => {
-            if (currentSnippetIndex < snippets.length - 1) {
-              setCurrentSnippetIndex(currentSnippetIndex + 1);
-            } else if (currentMessageIndex < conversation.length - 1) {
-              setCurrentMessageIndex(currentMessageIndex + 1);
-              setCurrentSnippetIndex(0);
-            }
-          }, calculateDisplayTime(snippets[currentSnippetIndex]) * 1000);
-          return () => clearTimeout(timeout);
-        }
-      }
-    };
-
-    processSnippets();
-  }, [currentMessageIndex, currentSnippetIndex, conversation]);
-
   return (
     <div style={{ textAlign: "center", width: "75%" }}>
-      <h2 style={textOutputStyle}>
-        Speaking:{" "}
-        {conversation.length > 0
-          ? conversation[currentMessageIndex].speaker
-          : ""}
-      </h2>
       <h2 style={textOutputStyle}>{currentMessageTextSnippet || ""}</h2>
     </div>
   );