From b60b9bff6ca8120bf09e356f795da22e747fca9b Mon Sep 17 00:00:00 2001
From: Tanish <tanish2k09.dev@gmail.com>
Date: Fri, 14 Feb 2025 04:29:51 -0800
Subject: [PATCH] Add a prompt textarea

---
 .../KonvaRootComponent/KonvaRootComponent.tsx |  2 +
 .../KonvaRootComponent/SignaledPromptText.tsx | 45 +++++++++++++++++++
 2 files changed, 47 insertions(+)
 create mode 100644 frontend/realtime/src/KonvaRootComponent/SignaledPromptText.tsx

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}
       />
       <SignaledPromptSlider />
+      <SignaledPromptText />
       <SignaledToolbarMain
         layoutSignal={layoutContext.signal}
         appUiContext={appUiContext}
diff --git a/frontend/realtime/src/KonvaRootComponent/SignaledPromptText.tsx b/frontend/realtime/src/KonvaRootComponent/SignaledPromptText.tsx
new file mode 100644
index 0000000000..19202e3354
--- /dev/null
+++ b/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>
+  );
+};