dlt stuff

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>
   );
 }