wassname/Open-Assistant
1
0
Fork 0
mirror of https://github.com/wassname/Open-Assistant.git synced 2026-06-27 16:10:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

Initial implementation of progressbar tracking

Browse Source
This commit is contained in:
klotske
2023-01-07 00:06:15 +03:00
parent 05c4550569
commit 44d05ed709
5 changed files with 104 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/components/Survey/TrackedTextarea.tsx
+35
View File
@@ -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>
);
};
website/src/pages/create/assistant_reply.tsx
+18 -6
View File
@@ -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} />
website/src/pages/create/initial_prompt.tsx
+17 -5
View File
@@ -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} />
website/src/pages/create/summarize_story.tsx
+17 -5
View File
@@ -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} />
website/src/pages/create/user_reply.tsx
+17 -5
View File
@@ -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} />