diff --git a/frontend/realtime/src/KonvaRootComponent/KonvaRootComponent.tsx b/frontend/realtime/src/KonvaRootComponent/KonvaRootComponent.tsx
index 67fe699ce1..c6464bd632 100644
--- a/frontend/realtime/src/KonvaRootComponent/KonvaRootComponent.tsx
+++ b/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}
/>
+
{
+ const textAreaRef = useRef(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) => {
+ dispatchUiEvents.promptSettings.setPrompt(event.target.value);
+ };
+
+ // This makes component re-render whenever the signal value changes
+ useSignalEffect(() => {
+ promptText.value;
+ })
+
+ return (
+
+
+
+ );
+};