Fix: Multiple invokes of a prompt after changing mode

frontend/realtime/src/GenerationRootComponent/GenerationRootComponent.tsx

@@ -10,7 +10,11 @@ import { Transition } from "@headlessui/react";
 import { GenerationEngine } from "~/KonvaApp/GenerationEngine";
 import { ensureBase64Prefix } from "~/KonvaApp/EngineUtitlities/Base64Helpers";
 
-export const GenerationRootComponent = () => {
+export const GenerationRootComponent = ({
+  generationEngineRef,
+}: {
+  generationEngineRef: React.MutableRefObject<GenerationEngine | null>;
+}) => {
   // This is a hook that will log the number of times the component has rerendered
   // Let's make sure we only log once
   useRenderCounter("GenerationRootComponent");
@@ -19,7 +23,6 @@ export const GenerationRootComponent = () => {
   const generationState = generationSignal.value;
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const [isInputFocused, setIsInputFocused] = useState(false);
-  const generationEngineRef = useRef<GenerationEngine | null>(null);
 
   if (generationEngineRef.current === null) {
     generationEngineRef.current = new GenerationEngine();

frontend/realtime/src/app/pages/main/index.tsx

@@ -14,6 +14,9 @@ import { appMode } from "~/signals";
 import { useSignals } from "@preact/signals-react/runtime";
 import { GenerationRootComponent } from "~/GenerationRootComponent/GenerationRootComponent";
 import { EditModeRootComponent } from "~/EditModeRootComponent/EditModeRootComponent";
+import { useRef } from "react";
+import { EngineType } from "~/KonvaApp";
+import { GenerationEngine } from "~/KonvaApp/GenerationEngine";
 
 export const Main = withProtectionRoute(() => {
   // This is a hook that will log the number of times the component has rerendered
@@ -26,6 +29,9 @@ export const Main = withProtectionRoute(() => {
 
   useSignals();
 
+  const realtimeEngineRef = useRef<EngineType | null>(null);
+  const generationEngineRef = useRef<GenerationEngine | null>(null);
+
   const appModeValue = appMode.value;
   let childView;
 
@@ -36,7 +42,9 @@ export const Main = withProtectionRoute(() => {
       );
       break;
     case "generate":
-      childView = <GenerationRootComponent />;
+      childView = (
+        <GenerationRootComponent generationEngineRef={generationEngineRef} />
+      );
       break;
     case "realtime":
     default: