From 4c9ed33c14df9e37d7d11faafb4182a3534141ca Mon Sep 17 00:00:00 2001
From: Nate Sesti <sestinj@gmail.com>
Date: Mon, 5 Jun 2023 12:09:13 -0400
Subject: Enter button on user input
---
.../react-app/src/components/ContinueButton.tsx | 8 ++-
.../react-app/src/components/InputAndButton.tsx | 77 ++++++++++++++++++++++
.../react-app/src/components/StepContainer.tsx | 20 ++----
3 files changed, 88 insertions(+), 17 deletions(-)
create mode 100644 extension/react-app/src/components/InputAndButton.tsx
(limited to 'extension/react-app/src/components')
diff --git a/extension/react-app/src/components/ContinueButton.tsx b/extension/react-app/src/components/ContinueButton.tsx
index 11dc7a92..c6117bf9 100644
--- a/extension/react-app/src/components/ContinueButton.tsx
+++ b/extension/react-app/src/components/ContinueButton.tsx
@@ -24,9 +24,13 @@ let StyledButton = styled(Button)`
}
`;
-function ContinueButton(props: { onClick?: () => void }) {
+function ContinueButton(props: { onClick?: () => void; hidden?: boolean }) {
return (
- <StyledButton className="m-auto" onClick={props.onClick}>
+ <StyledButton
+ hidden={props.hidden}
+ className="m-auto"
+ onClick={props.onClick}
+ >
<Play />
{/* <img src={"/continue_arrow.png"} width="16px"></img> */}
Continue
diff --git a/extension/react-app/src/components/InputAndButton.tsx b/extension/react-app/src/components/InputAndButton.tsx
new file mode 100644
index 00000000..0a8592f2
--- /dev/null
+++ b/extension/react-app/src/components/InputAndButton.tsx
@@ -0,0 +1,77 @@
+import React, { useRef } from "react";
+import styled from "styled-components";
+import { vscBackground } from ".";
+
+interface InputAndButtonProps {
+ onUserInput: (input: string) => void;
+}
+
+const TopDiv = styled.div`
+ display: grid;
+ grid-template-columns: 3fr 1fr;
+ grid-gap: 0;
+`;
+
+const Input = styled.input`
+ padding: 0.5rem;
+ border: 1px solid white;
+ background-color: ${vscBackground};
+ color: white;
+ border-radius: 4px;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ outline: none;
+`;
+
+const Button = styled.button`
+ padding: 0.5rem;
+ border: 1px solid white;
+ background-color: ${vscBackground};
+ color: white;
+ border-radius: 4px;
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ border-left: 0;
+ cursor: pointer;
+
+ &:hover {
+ background-color: white;
+ color: black;
+ }
+`;
+
+function InputAndButton(props: InputAndButtonProps) {
+ const userInputRef = useRef<HTMLInputElement>(null);
+
+ return (
+ <TopDiv className="grid grid-cols-2 space-x-0">
+ <Input
+ ref={userInputRef}
+ onKeyDown={(e) => {
+ if (e.key === "Enter") {
+ props.onUserInput(e.currentTarget.value);
+ }
+ }}
+ type="text"
+ onSubmit={(ev) => {
+ props.onUserInput(ev.currentTarget.value);
+ }}
+ onClick={(e) => {
+ e.stopPropagation();
+ }}
+ />
+ <Button
+ onClick={(e) => {
+ if (userInputRef.current) {
+ props.onUserInput(userInputRef.current.value);
+ }
+ e.stopPropagation();
+ }}
+ >
+ Enter
+ </Button>
+ </TopDiv>
+ );
+}
+
+export default InputAndButton;
diff --git a/extension/react-app/src/components/StepContainer.tsx b/extension/react-app/src/components/StepContainer.tsx
index 903f9b94..f54d4d75 100644
--- a/extension/react-app/src/components/StepContainer.tsx
+++ b/extension/react-app/src/components/StepContainer.tsx
@@ -23,6 +23,7 @@ import {
import { HistoryNode } from "../../../schema/HistoryNode";
import ReactMarkdown from "react-markdown";
import ContinueButton from "./ContinueButton";
+import InputAndButton from "./InputAndButton";
interface StepContainerProps {
historyNode: HistoryNode;
@@ -177,22 +178,11 @@ function StepContainer(props: StepContainerProps) {
)}
{props.historyNode.step.name === "Waiting for user input" && (
- <input
- ref={userInputRef}
- className="m-auto p-2 rounded-md border-1 border-solid text-white w-3/4 border-gray-200 bg-vsc-background"
- onKeyDown={(e) => {
- if (e.key === "Enter") {
- props.onUserInput(e.currentTarget.value);
- }
+ <InputAndButton
+ onUserInput={(value) => {
+ props.onUserInput(value);
}}
- type="text"
- onSubmit={(ev) => {
- props.onUserInput(ev.currentTarget.value);
- }}
- onClick={(e) => {
- e.stopPropagation();
- }}
- />
+ ></InputAndButton>
)}
{props.historyNode.step.name === "Waiting for user confirmation" && (
<>
--
cgit v1.2.3-70-g09d2