Merge branch 'main' into dlt-transform

8 files changed, 262 insertions, 84 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 }>`
diff --git a/extension/react-app/src/tabs/chat/MessageDiv.tsx b/extension/react-app/src/tabs/chat/MessageDiv.tsx
index ad81f5e9..1d7bb5f5 100644
--- a/extension/react-app/src/tabs/chat/MessageDiv.tsx
+++ b/extension/react-app/src/tabs/chat/MessageDiv.tsx
@@ -21,7 +21,6 @@ const Container = styled.div`
   width: fit-content;
   max-width: 75%;
   overflow-y: scroll;
-  scrollbar-gutter: stable both-edges;
   word-wrap: break-word;
   -ms-word-wrap: break-word;
   height: fit-content;
diff --git a/extension/react-app/src/tabs/gui.tsx b/extension/react-app/src/tabs/gui.tsx
index a08698a4..5c75579b 100644
--- a/extension/react-app/src/tabs/gui.tsx
+++ b/extension/react-app/src/tabs/gui.tsx
@@ -1,25 +1,21 @@
 import styled from "styled-components";
 import {
-  Button,
   defaultBorderRadius,
   vscBackground,
-  MainTextInput,
   Loader,
+  MainTextInput,
 } from "../components";
 import ContinueButton from "../components/ContinueButton";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { History } from "../../../schema/History";
 import { HistoryNode } from "../../../schema/HistoryNode";
 import StepContainer from "../components/StepContainer";
-import { useSelector } from "react-redux";
-import { RootStore } from "../redux/store";
-import useContinueWebsocket from "../hooks/useWebsocket";
 import useContinueGUIProtocol from "../hooks/useWebsocket";
 
 let TopGUIDiv = styled.div`
   display: grid;
   grid-template-columns: 1fr;
-  overflow: scroll;
+  background-color: ${vscBackground};
 `;
 
 let UserInputQueueItem = styled.div`
@@ -38,15 +34,20 @@ function GUI(props: GUIProps) {
   const [waitingForSteps, setWaitingForSteps] = useState(false);
   const [userInputQueue, setUserInputQueue] = useState<string[]>([]);
   const [history, setHistory] = useState<History | undefined>();
-  // {
+  //   {
   //   timeline: [
   //     {
   //       step: {
-  //         name: "RunCodeStep",
+  //         name: "Waiting for user input",
   //         cmd: "python3 /Users/natesesti/Desktop/continue/extension/examples/python/main.py",
   //         description:
   //           "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'",
+  //       },
   //       output: [
   //         {
   //           traceback: {
@@ -156,8 +157,20 @@ function GUI(props: GUIProps) {
   //   current_index: 0,
   // } as any);
 
+  const topGuiDivRef = useRef<HTMLDivElement>(null);
   const client = useContinueGUIProtocol();
 
+  const scrollToBottom = useCallback(() => {
+    if (topGuiDivRef.current) {
+      setTimeout(() => {
+        window.scrollTo({
+          top: window.outerHeight,
+          behavior: "smooth",
+        });
+      }, 100);
+    }
+  }, [topGuiDivRef.current]);
+
   useEffect(() => {
     console.log("CLIENT ON STATE UPDATE: ", client, client?.onStateUpdate);
     client?.onStateUpdate((state) => {
@@ -165,9 +178,15 @@ function GUI(props: GUIProps) {
       setWaitingForSteps(state.active);
       setHistory(state.history);
       setUserInputQueue(state.user_input_queue);
+
+      scrollToBottom();
     });
   }, [client]);
 
+  useEffect(() => {
+    scrollToBottom();
+  }, [waitingForSteps]);
+
   const mainTextInputRef = useRef<HTMLTextAreaElement>(null);
 
   useEffect(() => {
@@ -189,14 +208,33 @@ function GUI(props: GUIProps) {
     if (mainTextInputRef.current) {
       if (!client) return;
       let input = mainTextInputRef.current.value;
-      setWaitingForSteps(true);
-      client.sendMainInput(input);
-      setUserInputQueue((queue) => {
-        return [...queue, input];
-      });
+
+      if (
+        history &&
+        history.timeline[history.current_index].step.name ===
+          "Waiting for user input"
+      ) {
+        if (input.trim() === "") return;
+        onStepUserInput(input, history!.current_index);
+      } else if (
+        history &&
+        history.timeline[history.current_index].step.name ===
+          "Waiting for user confirmation"
+      ) {
+        onStepUserInput("ok", history!.current_index);
+      } else {
+        if (input.trim() === "") return;
+
+        client.sendMainInput(input);
+        setUserInputQueue((queue) => {
+          return [...queue, input];
+        });
+      }
       mainTextInputRef.current.value = "";
       mainTextInputRef.current.style.height = "";
     }
+
+    setWaitingForSteps(true);
   };
 
   const onStepUserInput = (input: string, index: number) => {
@@ -207,7 +245,14 @@ function GUI(props: GUIProps) {
 
   // const iterations = useSelector(selectIterations);
   return (
-    <TopGUIDiv>
+    <TopGUIDiv
+      ref={topGuiDivRef}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" && e.ctrlKey) {
+          onMainTextInput();
+        }
+      }}
+    >
       {typeof client === "undefined" && (
         <>
           <Loader></Loader>
@@ -247,6 +292,12 @@ function GUI(props: GUIProps) {
       </div>
 
       <MainTextInput
+        disabled={
+          history
+            ? history.timeline[history.current_index].step.name ===
+              "Waiting for user confirmation"
+            : false
+        }
         ref={mainTextInputRef}
         onKeyDown={(e) => {
           if (e.key === "Enter") {
@@ -257,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>
   );
 }