diff options
Diffstat (limited to 'extension/react-app/src')
| -rw-r--r-- | extension/react-app/src/components/StepContainer.tsx | 12 | ||||
| -rw-r--r-- | extension/react-app/src/components/ToggleErrorDiv.tsx | 41 | ||||
| -rw-r--r-- | extension/react-app/src/tabs/gui.tsx | 4 |
3 files changed, 50 insertions, 7 deletions
diff --git a/extension/react-app/src/components/StepContainer.tsx b/extension/react-app/src/components/StepContainer.tsx index dab5a752..a150e370 100644 --- a/extension/react-app/src/components/StepContainer.tsx +++ b/extension/react-app/src/components/StepContainer.tsx @@ -22,6 +22,7 @@ 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; @@ -170,13 +171,10 @@ function StepContainer(props: StepContainerProps) { )} {props.historyNode.observation?.error ? ( - <> - Error while running step: - <br /> - <pre className="overflow-scroll"> - {props.historyNode.observation.error as string} - </pre> - </> + <ToggleErrorDiv + title={"Error while running step:"} + error={props.historyNode.observation.error as string} + /> ) : ( <ReactMarkdown key={1} className="overflow-scroll"> {props.historyNode.step.description as any} 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/tabs/gui.tsx b/extension/react-app/src/tabs/gui.tsx index c66172a9..308dfd57 100644 --- a/extension/react-app/src/tabs/gui.tsx +++ b/extension/react-app/src/tabs/gui.tsx @@ -43,6 +43,10 @@ function GUI(props: GUIProps) { // description: // "Run `python3 /Users/natesesti/Desktop/continue/extension/examples/python/main.py`", // }, + // observation: { + // 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'", + // }, // output: [ // { // traceback: { |