Add a prompt textarea

frontend/realtime/src/KonvaRootComponent/KonvaRootComponent.tsx

@@ -24,6 +24,7 @@ import { useRenderCounter } from "~/hooks/useRenderCounter";
 import { useNavigate } from "react-router-dom";
 import { SignaledMagicBox } from "./SignaledMagicBox";
 import { SignaledPromptSlider } from "./SignaledPromptSlider";
+import { SignaledPromptText } from "./SignaledPromptText";
 
 export const KonvaRootComponent = ({
   className,
@@ -63,6 +64,7 @@ export const KonvaRootComponent = ({
         openAddVideo={appUiContext.openAddVideo}
       />
       <SignaledPromptSlider />
+      <SignaledPromptText />
       <SignaledToolbarMain
         layoutSignal={layoutContext.signal}
         appUiContext={appUiContext}

frontend/realtime/src/KonvaRootComponent/SignaledPromptText.tsx

@@ -0,0 +1,45 @@
+import { useSignalEffect } from "@preact/signals-react";
+import { useCallback, useEffect, useRef } from "react";
+import { ResizeType, Textarea } from "~/components/ui";
+import { dispatchUiEvents } from "~/signals";
+import { promptText } from "~/signals/uiEvents/promptSettings";
+
+export const SignaledPromptText = ({
+}) => {
+  const textAreaRef = useRef<HTMLTextAreaElement>(null);
+  const focusOnTextArea = useCallback(() => {
+    if (textAreaRef.current === null) {
+      return;
+    }
+    textAreaRef.current.focus();
+  }, []);
+  useEffect(() => {
+    focusOnTextArea();
+  }, []);
+
+  const TextAreaStates = {
+    style: {
+      width: "500px",
+      height: "240px",
+    },
+    placeholder: "...",
+    label: "Prompt Text",
+    resize: "none" as ResizeType,
+  };
+
+  const textContent = promptText.value;
+  const onTextChanged = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    dispatchUiEvents.promptSettings.setPrompt(event.target.value);
+  };
+
+  // This makes component re-render whenever the signal value changes
+  useSignalEffect(() => {
+    promptText.value;
+  })
+
+  return (
+    <div className="fixed bottom-24 left-1/2 -translate-x-1/2">
+      <Textarea {...TextAreaStates} ref={textAreaRef} onChange={onTextChanged} value={textContent} />
+    </div>
+  );
+};