From 7af8208d0adb9586e60bd67fd6f4f321a35262d8 Mon Sep 17 00:00:00 2001
From: Nate Sesti <sestinj@gmail.com>
Date: Tue, 6 Jun 2023 17:50:50 -0400
Subject: trying to reliably capture terminal output in vsc

---
 .../react-app/src/components/StepContainer.tsx     | 12 +++----
 .../react-app/src/components/ToggleErrorDiv.tsx    | 41 ++++++++++++++++++++++
 extension/react-app/src/tabs/gui.tsx               |  4 +++
 3 files changed, 50 insertions(+), 7 deletions(-)
 create mode 100644 extension/react-app/src/components/ToggleErrorDiv.tsx

(limited to 'extension/react-app/src')

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: {
-- 
cgit v1.2.3-70-g09d2