From 44d05ed709b4fae5aec32c72f0b29bbcdf6d3f83 Mon Sep 17 00:00:00 2001
From: klotske <ilya@mokhov.vg>
Date: Sat, 7 Jan 2023 00:06:15 +0300
Subject: [PATCH] Initial implementation of progressbar tracking

---
 .../src/components/Survey/TrackedTextarea.tsx | 35 +++++++++++++++++++
 website/src/pages/create/assistant_reply.tsx  | 24 +++++++++----
 website/src/pages/create/initial_prompt.tsx   | 22 +++++++++---
 website/src/pages/create/summarize_story.tsx  | 22 +++++++++---
 website/src/pages/create/user_reply.tsx       | 22 +++++++++---
 5 files changed, 104 insertions(+), 21 deletions(-)
 create mode 100644 website/src/components/Survey/TrackedTextarea.tsx

diff --git a/website/src/components/Survey/TrackedTextarea.tsx b/website/src/components/Survey/TrackedTextarea.tsx
new file mode 100644
index 00000000..205d7588
--- /dev/null
+++ b/website/src/components/Survey/TrackedTextarea.tsx
@@ -0,0 +1,35 @@
+import { Progress, Stack, Textarea, TextareaProps } from "@chakra-ui/react";
+
+interface TrackedTextboxProps {
+  text: string;
+  thresholds: {
+    low: number;
+    medium: number;
+    goal: number;
+  };
+  textareaProps?: TextareaProps;
+  onTextChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+}
+
+export const TrackedTextarea = (props: TrackedTextboxProps) => {
+  const wordCount = props.text.split(" ").length - 1;
+
+  let progressColor: string;
+  switch (true) {
+    case wordCount < props.thresholds.low:
+      progressColor = "red";
+      break;
+    case wordCount < props.thresholds.medium:
+      progressColor = "yellow";
+      break;
+    default:
+      progressColor = "green";
+  }
+
+  return (
+    <Stack direction={"column"}>
+      <Textarea data-cy="reply" value={props.text} onChange={props.onTextChange} {...props.textareaProps} onCapture />
+      <Progress size={"md"} rounded={"md"} value={wordCount} colorScheme={progressColor} max={props.thresholds.goal} />
+    </Stack>
+  );
+};
diff --git a/website/src/pages/create/assistant_reply.tsx b/website/src/pages/create/assistant_reply.tsx
index 2f7ca748..a674f741 100644
--- a/website/src/pages/create/assistant_reply.tsx
+++ b/website/src/pages/create/assistant_reply.tsx
@@ -1,9 +1,10 @@
-import { Container, Textarea } from "@chakra-ui/react";
+import { Center, Container, Textarea } from "@chakra-ui/react";
 import { useColorMode } from "@chakra-ui/react";
 import { useEffect, useRef, useState } from "react";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Messages } from "src/components/Messages";
 import { TaskControls } from "src/components/Survey/TaskControls";
+import { TrackedTextarea } from "src/components/Survey/TrackedTextarea";
 import { TwoColumnsWithCards } from "src/components/Survey/TwoColumnsWithCards";
 import fetcher from "src/lib/fetcher";
 import poster from "src/lib/poster";
@@ -12,8 +13,7 @@ import useSWRMutation from "swr/mutation";
 
 const AssistantReply = () => {
   const [tasks, setTasks] = useState([]);
-
-  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const [inputText, setInputText] = useState("");
 
   const { isLoading, mutate } = useSWRImmutable("/api/new_task/assistant_reply ", fetcher, {
     onSuccess: (data) => {
@@ -35,7 +35,7 @@ const AssistantReply = () => {
   });
 
   const submitResponse = (task: { id: string }) => {
-    const text = inputRef.current.value.trim();
+    const text = inputText.trim();
     trigger({
       id: task.id,
       update_type: "text_reply_to_message",
@@ -46,10 +46,14 @@ const AssistantReply = () => {
   };
 
   const fetchNextTask = () => {
-    inputRef.current.value = "";
+    setInputText("");
     mutate();
   };
 
+  const textChangeHandler = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setInputText(event.target.value);
+  };
+
   const { colorMode } = useColorMode();
   const mainBgClasses = colorMode === "light" ? "bg-slate-300 text-gray-800" : "bg-slate-900 text-white";
 
@@ -71,7 +75,15 @@ const AssistantReply = () => {
           <p className="text-lg py-1">Given the following conversation, provide an adequate reply</p>
           <Messages messages={task.conversation.messages} post_id={task.id} />
         </>
-        <Textarea name="reply" data-cy="reply" placeholder="Reply..." ref={inputRef} />
+        <>
+          <h5 className="text-lg font-semibold">Provide the assistant`s reply</h5>
+          <TrackedTextarea
+            text={inputText}
+            onTextChange={textChangeHandler}
+            thresholds={{ low: 20, medium: 40, goal: 50 }}
+            textareaProps={{ placeholder: "Reply..." }}
+          />
+        </>
       </TwoColumnsWithCards>
 
       <TaskControls tasks={tasks} onSubmitResponse={submitResponse} onSkip={fetchNextTask} />
diff --git a/website/src/pages/create/initial_prompt.tsx b/website/src/pages/create/initial_prompt.tsx
index a4aed9c3..92390562 100644
--- a/website/src/pages/create/initial_prompt.tsx
+++ b/website/src/pages/create/initial_prompt.tsx
@@ -3,6 +3,7 @@ import { useColorMode } from "@chakra-ui/react";
 import { useEffect, useRef, useState } from "react";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { TaskControls } from "src/components/Survey/TaskControls";
+import { TrackedTextarea } from "src/components/Survey/TrackedTextarea";
 import { TwoColumnsWithCards } from "src/components/Survey/TwoColumnsWithCards";
 import fetcher from "src/lib/fetcher";
 import poster from "src/lib/poster";
@@ -11,8 +12,7 @@ import useSWRMutation from "swr/mutation";
 
 const InitialPrompt = () => {
   const [tasks, setTasks] = useState([]);
-
-  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const [inputText, setInputText] = useState("");
 
   const { isLoading, mutate } = useSWRImmutable("/api/new_task/initial_prompt ", fetcher, {
     onSuccess: (data) => {
@@ -34,7 +34,7 @@ const InitialPrompt = () => {
   }, [tasks]);
 
   const submitResponse = (task: { id: string }) => {
-    const text = inputRef.current.value.trim();
+    const text = inputText.trim();
     trigger({
       id: task.id,
       update_type: "text_reply_to_message",
@@ -45,10 +45,14 @@ const InitialPrompt = () => {
   };
 
   const fetchNextTask = () => {
-    inputRef.current.value = "";
+    setInputText("");
     mutate();
   };
 
+  const textChangeHandler = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setInputText(event.target.value);
+  };
+
   const { colorMode } = useColorMode();
   const mainBgClasses = colorMode === "light" ? "bg-slate-300 text-gray-800" : "bg-slate-900 text-white";
 
@@ -69,7 +73,15 @@ const InitialPrompt = () => {
           <h5 className="text-lg font-semibold">Start a conversation</h5>
           <p className="text-lg py-1">Create an initial message to send to the assistant</p>
         </>
-        <Textarea name="reply" data-cy="reply" placeholder="Question, task, greeting or similar..." ref={inputRef} />
+        <>
+          <h5 className="text-lg font-semibold">Provide the initial prompt</h5>
+          <TrackedTextarea
+            text={inputText}
+            onTextChange={textChangeHandler}
+            thresholds={{ low: 20, medium: 40, goal: 50 }}
+            textareaProps={{ placeholder: "Question, task, greeting or similar..." }}
+          />
+        </>
       </TwoColumnsWithCards>
 
       <TaskControls tasks={tasks} onSubmitResponse={submitResponse} onSkip={fetchNextTask} />
diff --git a/website/src/pages/create/summarize_story.tsx b/website/src/pages/create/summarize_story.tsx
index 8a4ed291..1f03a1cc 100644
--- a/website/src/pages/create/summarize_story.tsx
+++ b/website/src/pages/create/summarize_story.tsx
@@ -3,6 +3,7 @@ import { useColorMode } from "@chakra-ui/react";
 import { useRef, useState } from "react";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { TaskControls } from "src/components/Survey/TaskControls";
+import { TrackedTextarea } from "src/components/Survey/TrackedTextarea";
 import { TwoColumnsWithCards } from "src/components/Survey/TwoColumnsWithCards";
 import fetcher from "src/lib/fetcher";
 import poster from "src/lib/poster";
@@ -13,8 +14,7 @@ const SummarizeStory = () => {
   // Use an array of tasks that record the sequence of steps until a task is
   // deemed complete.
   const [tasks, setTasks] = useState([]);
-
-  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const [inputText, setInputText] = useState("");
 
   // Fetch the very fist task.  We can ignore everything except isLoading
   // because the onSuccess handler will update `tasks` when ready.
@@ -38,7 +38,7 @@ const SummarizeStory = () => {
   // Trigger a mutation that updates the current task.  We should probably
   // signal somewhere that this interaction is being processed.
   const submitResponse = (task: { id: string }) => {
-    const text = inputRef.current.value.trim();
+    const text = inputText.trim();
     trigger({
       id: task.id,
       update_type: "text_reply_to_message",
@@ -49,10 +49,14 @@ const SummarizeStory = () => {
   };
 
   const fetchNextTask = () => {
-    inputRef.current.value = "";
+    setInputText("");
     mutate();
   };
 
+  const textChangeHandler = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setInputText(event.target.value);
+  };
+
   const { colorMode } = useColorMode();
   const mainBgClasses = colorMode === "light" ? "bg-slate-300 text-gray-800" : "bg-slate-900 text-white";
 
@@ -73,7 +77,15 @@ const SummarizeStory = () => {
             <p className="text-lg py-1">Summarize the following story</p>
             <div className="bg-slate-800 p-6 rounded-xl text-white whitespace-pre-wrap">{tasks[0].task.story}</div>
           </>
-          <Textarea name="summary" placeholder="Summary" ref={inputRef} />
+          <>
+            <h5 className="text-lg font-semibold">Provide the assistant`s reply</h5>
+            <TrackedTextarea
+              text={inputText}
+              onTextChange={textChangeHandler}
+              thresholds={{ low: 20, medium: 40, goal: 50 }}
+              textareaProps={{ placeholder: "Summary" }}
+            />
+          </>
         </TwoColumnsWithCards>
 
         <TaskControls tasks={tasks} onSubmitResponse={submitResponse} onSkip={fetchNextTask} />
diff --git a/website/src/pages/create/user_reply.tsx b/website/src/pages/create/user_reply.tsx
index 40409189..89c195b6 100644
--- a/website/src/pages/create/user_reply.tsx
+++ b/website/src/pages/create/user_reply.tsx
@@ -4,6 +4,7 @@ import { useEffect, useRef, useState } from "react";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Messages } from "src/components/Messages";
 import { TaskControls } from "src/components/Survey/TaskControls";
+import { TrackedTextarea } from "src/components/Survey/TrackedTextarea";
 import { TwoColumnsWithCards } from "src/components/Survey/TwoColumnsWithCards";
 import fetcher from "src/lib/fetcher";
 import poster from "src/lib/poster";
@@ -12,8 +13,7 @@ import useSWRMutation from "swr/mutation";
 
 const UserReply = () => {
   const [tasks, setTasks] = useState([]);
-
-  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const [inputText, setInputText] = useState("");
 
   const { isLoading, mutate } = useSWRImmutable("/api/new_task/prompter_reply", fetcher, {
     onSuccess: (data) => {
@@ -35,7 +35,7 @@ const UserReply = () => {
   });
 
   const submitResponse = (task: { id: string }) => {
-    const text = inputRef.current.value.trim();
+    const text = inputText.trim();
     trigger({
       id: task.id,
       update_type: "text_reply_to_message",
@@ -46,10 +46,14 @@ const UserReply = () => {
   };
 
   const fetchNextTask = () => {
-    inputRef.current.value = "";
+    setInputText("");
     mutate();
   };
 
+  const textChangeHandler = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setInputText(event.target.value);
+  };
+
   const { colorMode } = useColorMode();
   const mainBgClasses = colorMode === "light" ? "bg-slate-300 text-gray-800" : "bg-slate-900 text-white";
 
@@ -78,7 +82,15 @@ const UserReply = () => {
           <Messages messages={task.conversation.messages} post_id={task.id} />
           {task.hint && <p className="text-lg py-1">Hint: {task.hint}</p>}
         </>
-        <Textarea name="reply" data-cy="reply" placeholder="Reply..." ref={inputRef} />
+        <>
+          <h5 className="text-lg font-semibold">Provide the user`s reply</h5>
+          <TrackedTextarea
+            text={inputText}
+            onTextChange={textChangeHandler}
+            thresholds={{ low: 20, medium: 40, goal: 50 }}
+            textareaProps={{ placeholder: "Reply..." }}
+          />
+        </>
       </TwoColumnsWithCards>
 
       <TaskControls tasks={tasks} onSubmitResponse={submitResponse} onSkip={fetchNextTask} />