diff options
Diffstat (limited to 'extension/react-app')
| -rw-r--r-- | extension/react-app/src/components/StepContainer.tsx | 22 | ||||
| -rw-r--r-- | extension/react-app/src/components/index.ts | 8 | ||||
| -rw-r--r-- | extension/react-app/src/tabs/gui.tsx | 17 |
3 files changed, 30 insertions, 17 deletions
diff --git a/extension/react-app/src/components/StepContainer.tsx b/extension/react-app/src/components/StepContainer.tsx index a150e370..8ea54325 100644 --- a/extension/react-app/src/components/StepContainer.tsx +++ b/extension/react-app/src/components/StepContainer.tsx @@ -50,8 +50,9 @@ const StepContainerDiv = styled.div<{ open: boolean }>` /* padding: 8px; */ `; -const HeaderDiv = styled.div` - background-color: ${vscBackgroundTransparent}; +const HeaderDiv = styled.div<{ error: boolean }>` + background-color: ${(props) => + props.error ? "#522" : vscBackgroundTransparent}; display: grid; grid-template-columns: 1fr auto; align-items: center; @@ -124,17 +125,23 @@ function StepContainer(props: StepContainerProps) { > <StepContainerDiv open={open}> <GradientBorder + borderColor={ + props.historyNode.observation?.error ? "#f00" : undefined + } className="overflow-hidden cursor-pointer" onClick={() => setOpen((prev) => !prev)} > - <HeaderDiv> + <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) => { @@ -171,10 +178,9 @@ function StepContainer(props: StepContainerProps) { )} {props.historyNode.observation?.error ? ( - <ToggleErrorDiv - title={"Error while running step:"} - error={props.historyNode.observation.error as string} - /> + <pre className="overflow-x-scroll"> + {props.historyNode.observation.error as string} + </pre> ) : ( <ReactMarkdown key={1} className="overflow-scroll"> {props.historyNode.step.description as any} diff --git a/extension/react-app/src/components/index.ts b/extension/react-app/src/components/index.ts index ac5faa41..4966f3e8 100644 --- a/extension/react-app/src/components/index.ts +++ b/extension/react-app/src/components/index.ts @@ -98,17 +98,21 @@ export const Loader = styled.div` 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: linear-gradient( + 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 }>` diff --git a/extension/react-app/src/tabs/gui.tsx b/extension/react-app/src/tabs/gui.tsx index 308dfd57..5c75579b 100644 --- a/extension/react-app/src/tabs/gui.tsx +++ b/extension/react-app/src/tabs/gui.tsx @@ -44,6 +44,7 @@ function GUI(props: GUIProps) { // "Run `python3 /Users/natesesti/Desktop/continue/extension/examples/python/main.py`", // }, // observation: { + // title: "ERROR FOUND", // error: // "Traceback (most recent call last):\n File \"/Users/natesesti/Desktop/continue/extension/examples/python/main.py\", line 7, in <module>\n print(sum(first, second))\n ^^^^^^^^^^^^^^^^^^\n File \"/Users/natesesti/Desktop/continue/extension/examples/python/sum.py\", line 2, in sum\n return a + b\n ~~^~~\nTypeError: unsupported operand type(s) for +: 'int' and 'str'", // }, @@ -228,9 +229,9 @@ function GUI(props: GUIProps) { setUserInputQueue((queue) => { return [...queue, input]; }); - mainTextInputRef.current.value = ""; - mainTextInputRef.current.style.height = ""; } + mainTextInputRef.current.value = ""; + mainTextInputRef.current.style.height = ""; } setWaitingForSteps(true); @@ -307,13 +308,15 @@ function GUI(props: GUIProps) { }} rows={1} onChange={() => { - let textarea = mainTextInputRef.current!; + const textarea = mainTextInputRef.current!; textarea.style.height = ""; /* Reset the height*/ - textarea.style.height = - Math.min(textarea.scrollHeight - 15, 500) + "px"; + textarea.style.height = `${Math.min( + textarea.scrollHeight - 15, + 500 + )}px`; }} - ></MainTextInput> - <ContinueButton onClick={onMainTextInput}></ContinueButton> + /> + <ContinueButton onClick={onMainTextInput} /> </TopGUIDiv> ); } |