Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UX updates on TaskUI textarea #132

Merged
merged 3 commits into from
Apr 22, 2024
+8 −5
Merged

UX updates on TaskUI textarea #132

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
66e2ac8
feat: only disable textarea when listening
mondaychen Apr 22, 2024
7f43658
feat: use shift+enter to run task instead
mondaychen Apr 22, 2024
57ad69e
feat: auto size text area in TaskUI
mondaychen Apr 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/common/AutosizeTextarea.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const AutosizeTextarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
w="100%"
resize="none"
ref={ref}
minRows={1}
minRows={4}
as={ResizeTextarea}
{...props}
/>
Expand Down
11 changes: 7 additions & 4 deletions src/common/TaskUI.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import VoiceButton from "./VoiceButton";
import TaskHistory from "./TaskHistory";
import TaskStatus from "./TaskStatus";
import RecommendedTasks from "./RecommendedTasks";
import AutosizeTextarea from "./AutosizeTextarea";

function ActionExecutor() {
const state = useAppState((state) => ({
Expand Down Expand Up @@ -62,6 +63,7 @@ const TaskUI = () => {
instructions: state.ui.instructions,
setInstructions: state.ui.actions.setInstructions,
voiceMode: state.settings.voiceMode,
isListening: state.currentTask.isListening,
}));
const taskInProgress = state.taskStatus === "running";

Expand Down Expand Up @@ -93,20 +95,20 @@ const TaskUI = () => {
};

const onKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
if (e.key === "Enter" && !e.shiftKey) {
if (e.key === "Enter" && e.shiftKey) {
e.preventDefault();
runTask();
}
};

return (
<>
<Textarea
<AutosizeTextarea
// eslint-disable-next-line jsx-a11y/no-autofocus
autoFocus
placeholder="Try telling WebWand to do something..."
value={state.instructions || ""}
disabled={taskInProgress || state.voiceMode}
isDisabled={taskInProgress || state.isListening}
onChange={(e) => state.setInstructions(e.target.value)}
mb={2}
onKeyDown={onKeyDown}
Expand All @@ -127,7 +129,8 @@ const TaskUI = () => {
<AlertIcon />
<AlertDescription fontSize="sm">
In Voice Mode, you can press Space to start speaking and Space again
to stop. WebWand will run the task when you stop speaking.
to stop. WebWand will run the task when you stop speaking. To turn
off Voice Mode, click the Setting icon in the top right corner.
</AlertDescription>
</Alert>
)}
Expand Down
Loading