diff options
Diffstat (limited to 'extension/react-app/src/components')
| -rw-r--r-- | extension/react-app/src/components/ContinueButton.tsx | 8 | ||||
| -rw-r--r-- | extension/react-app/src/components/DebugPanel.tsx | 15 | ||||
| -rw-r--r-- | extension/react-app/src/components/InputAndButton.tsx | 77 | ||||
| -rw-r--r-- | extension/react-app/src/components/StepContainer.tsx | 94 | ||||
| -rw-r--r-- | extension/react-app/src/components/ToggleErrorDiv.tsx | 41 | ||||
| -rw-r--r-- | extension/react-app/src/components/index.ts | 19 |
6 files changed, 190 insertions, 64 deletions
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/DebugPanel.tsx b/extension/react-app/src/components/DebugPanel.tsx index 9dacc624..11ec2fe2 100644 --- a/extension/react-app/src/components/DebugPanel.tsx +++ b/extension/react-app/src/components/DebugPanel.tsx @@ -9,7 +9,7 @@ import { } from "../redux/slices/configSlice"; import { setHighlightedCode } from "../redux/slices/miscSlice"; import { updateFileSystem } from "../redux/slices/debugContexSlice"; -import { buttonColor, defaultBorderRadius, vscBackground } from "."; +import { defaultBorderRadius, secondaryDark, vscBackground } from "."; interface DebugPanelProps { tabs: { element: React.ReactElement; @@ -19,14 +19,15 @@ interface DebugPanelProps { const GradientContainer = styled.div` // Uncomment to get gradient border - background: linear-gradient( + /* background: linear-gradient( 101.79deg, #12887a 0%, #87245c 37.64%, #e12637 65.98%, #ffb215 110.45% - ); + ); */ /* padding: 10px; */ + background-color: ${secondaryDark}; margin: 0; height: 100%; /* border: 1px solid white; */ @@ -36,11 +37,8 @@ const GradientContainer = styled.div` const MainDiv = styled.div` height: 100%; border-radius: ${defaultBorderRadius}; - overflow-y: scroll; - scrollbar-gutter: stable both-edges; scrollbar-base-color: transparent; - /* background: ${vscBackground}; */ - background-color: #1e1e1ede; + background-color: ${vscBackground}; `; const TabBar = styled.div<{ numTabs: number }>` @@ -105,9 +103,6 @@ function DebugPanel(props: DebugPanelProps) { <div key={index} hidden={index !== currentTab} - className={ - tab.title === "Chat" ? "overflow-hidden" : "overflow-scroll" - } style={{ scrollbarGutter: "stable both-edges" }} > {tab.element} 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..8ea54325 100644 --- a/extension/react-app/src/components/StepContainer.tsx +++ b/extension/react-app/src/components/StepContainer.tsx @@ -2,13 +2,11 @@ import { useCallback, useEffect, useRef, useState } from "react"; import styled, { keyframes } from "styled-components"; import { appear, - buttonColor, defaultBorderRadius, - MainContainerWithBorder, - MainTextInput, secondaryDark, vscBackground, GradientBorder, + vscBackgroundTransparent, } from "."; import { RangeInFile, FileEdit } from "../../../src/client"; import CodeBlock from "./CodeBlock"; @@ -23,6 +21,8 @@ import { import { HistoryNode } from "../../../schema/HistoryNode"; import ReactMarkdown from "react-markdown"; import ContinueButton from "./ContinueButton"; +import InputAndButton from "./InputAndButton"; +import ToggleErrorDiv from "./ToggleErrorDiv"; interface StepContainerProps { historyNode: HistoryNode; @@ -31,6 +31,7 @@ interface StepContainerProps { onRefinement: (input: string) => void; onUserInput: (input: string) => void; onRetry: () => void; + open?: boolean; } const MainDiv = styled.div<{ stepDepth: number; inFuture: boolean }>` @@ -43,17 +44,26 @@ const MainDiv = styled.div<{ stepDepth: number; inFuture: boolean }>` `; const StepContainerDiv = styled.div<{ open: boolean }>` - background-color: ${(props) => (props.open ? vscBackground : secondaryDark)}; - border-radius: ${defaultBorderRadius}; - padding: 8px; + /* background-color: ${(props) => + props.open ? vscBackground : secondaryDark}; */ + /* border-radius: ${defaultBorderRadius}; */ + /* padding: 8px; */ `; -const HeaderDiv = styled.div` +const HeaderDiv = styled.div<{ error: boolean }>` + background-color: ${(props) => + props.error ? "#522" : vscBackgroundTransparent}; display: grid; grid-template-columns: 1fr auto; align-items: center; `; +const ContentDiv = styled.div` + padding: 8px; + padding-left: 16px; + background-color: ${vscBackground}; +`; + const HeaderButton = styled.button` background-color: transparent; border: 1px solid white; @@ -74,12 +84,10 @@ const OnHoverDiv = styled.div` animation: ${appear} 0.3s ease-in-out; `; -const NaturalLanguageInput = styled(MainTextInput)` - width: 80%; -`; - function StepContainer(props: StepContainerProps) { - const [open, setOpen] = useState(false); + const [open, setOpen] = useState( + typeof props.open === "undefined" ? true : props.open + ); const [isHovered, setIsHovered] = useState(false); const naturalLanguageInputRef = useRef<HTMLTextAreaElement>(null); const userInputRef = useRef<HTMLInputElement>(null); @@ -115,19 +123,25 @@ function StepContainer(props: StepContainerProps) { }} hidden={props.historyNode.step.hide as any} > - <GradientBorder - className="m-2 overflow-hidden cursor-pointer" - onClick={() => setOpen((prev) => !prev)} - > - <StepContainerDiv open={open}> - <HeaderDiv> + <StepContainerDiv open={open}> + <GradientBorder + borderColor={ + props.historyNode.observation?.error ? "#f00" : undefined + } + className="overflow-hidden cursor-pointer" + onClick={() => setOpen((prev) => !prev)} + > + <HeaderDiv + error={props.historyNode.observation?.error ? true : false} + > <h4 className="m-2"> {open ? ( <ChevronDown size="1.4em" /> ) : ( <ChevronRight size="1.4em" /> )} - {props.historyNode.step.name as any}: + {props.historyNode.observation?.title || + (props.historyNode.step.name as any)} </h4> {/* <HeaderButton onClick={(e) => { @@ -151,8 +165,9 @@ function StepContainer(props: StepContainerProps) { <></> )} </HeaderDiv> - - {open && ( + </GradientBorder> + <ContentDiv hidden={!open}> + {open && false && ( <> <pre className="overflow-scroll"> Step Details: @@ -163,36 +178,21 @@ function StepContainer(props: StepContainerProps) { )} {props.historyNode.observation?.error ? ( - <> - Error while running step: - <br /> - <pre className="overflow-scroll"> - {props.historyNode.observation.error as string} - </pre> - </> + <pre className="overflow-x-scroll"> + {props.historyNode.observation.error as string} + </pre> ) : ( <ReactMarkdown key={1} className="overflow-scroll"> {props.historyNode.step.description as any} </ReactMarkdown> )} - {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); - } - }} - type="text" - onSubmit={(ev) => { - props.onUserInput(ev.currentTarget.value); + {/* {props.historyNode.step.name === "Waiting for user input" && ( + <InputAndButton + onUserInput={(value) => { + props.onUserInput(value); }} - onClick={(e) => { - e.stopPropagation(); - }} - /> + ></InputAndButton> )} {props.historyNode.step.name === "Waiting for user confirmation" && ( <> @@ -212,9 +212,9 @@ function StepContainer(props: StepContainerProps) { value="Confirm" /> </> - )} - </StepContainerDiv> - </GradientBorder> + )} */} + </ContentDiv> + </StepContainerDiv> {/* <OnHoverDiv hidden={!open}> <NaturalLanguageInput diff --git a/extension/react-app/src/components/ToggleErrorDiv.tsx b/extension/react-app/src/components/ToggleErrorDiv.tsx new file mode 100644 index 00000000..69112ef7 --- /dev/null +++ b/extension/react-app/src/components/ToggleErrorDiv.tsx @@ -0,0 +1,41 @@ +import React, { useState } from "react"; +import styled from "styled-components"; +import { defaultBorderRadius } from "."; + +// Should be a toggleable div with red border and light red background that displays a main message and detail inside + +interface ToggleErrorDivProps { + title: string; + error: string; +} + +const TopDiv = styled.div` + border: 1px solid red; + background-color: #ff000020; + padding: 8px; + + border-radius: ${defaultBorderRadius}; + cursor: pointer; +`; + +const ToggleErrorDiv = (props: ToggleErrorDivProps) => { + const [open, setOpen] = useState(false); + return ( + <TopDiv + onClick={() => { + setOpen(!open); + }} + > + <div className="flex flex-row"> + <div className="flex-grow"> + <p> + {open ? "▼" : "▶"} {props.title} + </p> + </div> + </div> + {open && <pre className="overflow-scroll">{props.error}</pre>} + </TopDiv> + ); +}; + +export default ToggleErrorDiv; diff --git a/extension/react-app/src/components/index.ts b/extension/react-app/src/components/index.ts index 7ba60467..4966f3e8 100644 --- a/extension/react-app/src/components/index.ts +++ b/extension/react-app/src/components/index.ts @@ -3,6 +3,7 @@ import styled, { keyframes } from "styled-components"; export const defaultBorderRadius = "5px"; export const secondaryDark = "rgb(37 37 38)"; export const vscBackground = "rgb(30 30 30)"; +export const vscBackgroundTransparent = "#1e1e1ede"; export const buttonColor = "rgb(113 28 59)"; export const buttonColorHover = "rgb(113 28 59 0.67)"; @@ -94,16 +95,24 @@ export const Loader = styled.div` margin: auto; `; -export const GradientBorder = styled.div<{ borderWidth?: string }>` - border-radius: ${defaultBorderRadius}; - padding: ${(props) => props.borderWidth || "1px"}; - background: linear-gradient( +export const GradientBorder = styled.div<{ + borderWidth?: string; + borderRadius?: string; + borderColor?: string; +}>` + border-radius: ${(props) => props.borderRadius || "0"}; + padding-top: ${(props) => props.borderWidth || "1px"}; + padding-bottom: ${(props) => props.borderWidth || "1px"}; + background: ${(props) => + props.borderColor + ? props.borderColor + : `linear-gradient( 101.79deg, #12887a 0%, #87245c 37.64%, #e12637 65.98%, #ffb215 110.45% - ); + )`}; `; export const MainContainerWithBorder = styled.div<{ borderWidth?: string }>` |