Merge branch 'main' into too-large

7 files changed, 174 insertions, 172 deletions

diff --git a/extension/react-app/src/components/ComboBox.tsx b/extension/react-app/src/components/ComboBox.tsx
index ace0605e..2b140567 100644
--- a/extension/react-app/src/components/ComboBox.tsx
+++ b/extension/react-app/src/components/ComboBox.tsx
@@ -113,6 +113,9 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
               (event.nativeEvent as any).preventDownshiftDefault = true;
               if (props.onEnter) props.onEnter(event);
               setInputValue("");
+            } else if (event.key === "Tab" && items.length > 0) {
+              setInputValue(items[0].name);
+              event.preventDefault();
             }
           },
           ref: ref as any,
diff --git a/extension/react-app/src/components/DebugPanel.tsx b/extension/react-app/src/components/DebugPanel.tsx
index 11ec2fe2..30f38779 100644
--- a/extension/react-app/src/components/DebugPanel.tsx
+++ b/extension/react-app/src/components/DebugPanel.tsx
@@ -17,39 +17,15 @@ interface DebugPanelProps {
   }[];
 }
 
-const GradientContainer = styled.div`
-  // Uncomment to get gradient border
-  /* 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; */
-  border-radius: ${defaultBorderRadius};
-`;
-
-const MainDiv = styled.div`
-  height: 100%;
-  border-radius: ${defaultBorderRadius};
-  scrollbar-base-color: transparent;
-  background-color: ${vscBackground};
-`;
-
 const TabBar = styled.div<{ numTabs: number }>`
   display: grid;
   grid-template-columns: repeat(${(props) => props.numTabs}, 1fr);
 `;
 
 const TabsAndBodyDiv = styled.div`
-  display: grid;
-  grid-template-rows: auto 1fr;
   height: 100%;
+  border-radius: ${defaultBorderRadius};
+  scrollbar-base-color: transparent;
 `;
 
 function DebugPanel(props: DebugPanelProps) {
@@ -76,42 +52,43 @@ function DebugPanel(props: DebugPanelProps) {
   const [currentTab, setCurrentTab] = useState(0);
 
   return (
-    <GradientContainer>
-      <MainDiv>
-        <TabsAndBodyDiv>
-          {props.tabs.length > 1 && (
-            <TabBar numTabs={props.tabs.length}>
-              {props.tabs.map((tab, index) => {
-                return (
-                  <div
-                    key={index}
-                    className={`p-2 cursor-pointer text-center ${
-                      index === currentTab
-                        ? "bg-secondary-dark"
-                        : "bg-vsc-background"
-                    }`}
-                    onClick={() => setCurrentTab(index)}
-                  >
-                    {tab.title}
-                  </div>
-                );
-              })}
-            </TabBar>
-          )}
+    <TabsAndBodyDiv>
+      {props.tabs.length > 1 && (
+        <TabBar numTabs={props.tabs.length}>
           {props.tabs.map((tab, index) => {
             return (
               <div
                 key={index}
-                hidden={index !== currentTab}
-                style={{ scrollbarGutter: "stable both-edges" }}
+                className={`p-2 cursor-pointer text-center ${
+                  index === currentTab
+                    ? "bg-secondary-dark"
+                    : "bg-vsc-background"
+                }`}
+                onClick={() => setCurrentTab(index)}
               >
-                {tab.element}
+                {tab.title}
               </div>
             );
           })}
-        </TabsAndBodyDiv>
-      </MainDiv>
-    </GradientContainer>
+        </TabBar>
+      )}
+      {props.tabs.map((tab, index) => {
+        return (
+          <div
+            key={index}
+            hidden={index !== currentTab}
+            style={{
+              scrollbarGutter: "stable both-edges",
+              minHeight: "100%",
+              display: "grid",
+              gridTemplateRows: "1fr auto",
+            }}
+          >
+            {tab.element}
+          </div>
+        );
+      })}
+    </TabsAndBodyDiv>
   );
 }
 
diff --git a/extension/react-app/src/components/HeaderButtonWithText.tsx b/extension/react-app/src/components/HeaderButtonWithText.tsx
new file mode 100644
index 00000000..c4f22211
--- /dev/null
+++ b/extension/react-app/src/components/HeaderButtonWithText.tsx
@@ -0,0 +1,30 @@
+import React, { useState } from "react";
+
+import { HeaderButton } from ".";
+
+interface HeaderButtonWithTextProps {
+  text: string;
+  onClick?: (e: any) => void;
+  children: React.ReactNode;
+}
+
+const HeaderButtonWithText = (props: HeaderButtonWithTextProps) => {
+  const [hover, setHover] = useState(false);
+  return (
+    <HeaderButton
+      style={{ padding: "3px" }}
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => {
+        setTimeout(() => {
+          setHover(false);
+        }, 100);
+      }}
+      onClick={props.onClick}
+    >
+      <span hidden={!hover}>{props.text}</span>
+      {props.children}
+    </HeaderButton>
+  );
+};
+
+export default HeaderButtonWithText;
diff --git a/extension/react-app/src/components/StepContainer.tsx b/extension/react-app/src/components/StepContainer.tsx
index 48f970d7..480f517f 100644
--- a/extension/react-app/src/components/StepContainer.tsx
+++ b/extension/react-app/src/components/StepContainer.tsx
@@ -21,9 +21,7 @@ import {
 } from "@styled-icons/heroicons-outline";
 import { HistoryNode } from "../../../schema/HistoryNode";
 import ReactMarkdown from "react-markdown";
-import ContinueButton from "./ContinueButton";
-import InputAndButton from "./InputAndButton";
-import ToggleErrorDiv from "./ToggleErrorDiv";
+import HeaderButtonWithText from "./HeaderButtonWithText";
 
 interface StepContainerProps {
   historyNode: HistoryNode;
@@ -152,23 +150,25 @@ function StepContainer(props: StepContainerProps) {
             </HeaderButton> */}
 
             <>
-              <HeaderButton
+              <HeaderButtonWithText
                 onClick={(e) => {
                   e.stopPropagation();
                   props.onDelete();
                 }}
+                text="Delete"
               >
                 <XMark size="1.6em" onClick={props.onDelete} />
-              </HeaderButton>
+              </HeaderButtonWithText>
               {props.historyNode.observation?.error ? (
-                <HeaderButton
+                <HeaderButtonWithText
+                  text="Retry"
                   onClick={(e) => {
                     e.stopPropagation();
                     props.onRetry();
                   }}
                 >
                   <ArrowPath size="1.6em" onClick={props.onRetry} />
-                </HeaderButton>
+                </HeaderButtonWithText>
               ) : (
                 <></>
               )}
@@ -193,7 +193,7 @@ function StepContainer(props: StepContainerProps) {
           ) : (
             <ReactMarkdown
               key={1}
-              className="overflow-scroll"
+              className="overflow-x-scroll"
               components={
                 {
                   // pre: ({ node, ...props }) => {
diff --git a/extension/react-app/src/components/index.ts b/extension/react-app/src/components/index.ts
index 525989af..d99b4d96 100644
--- a/extension/react-app/src/components/index.ts
+++ b/extension/react-app/src/components/index.ts
@@ -48,7 +48,7 @@ export const Pre = styled.pre`
   max-height: 150px;
   overflow-y: scroll;
   margin: 0;
-  background-color: ${secondaryDark};
+  background-color: ${vscBackground};
   border: none;
 
   /* text wrapping */
diff --git a/extension/react-app/src/index.css b/extension/react-app/src/index.css
index 20599d30..db8afab9 100644
--- a/extension/react-app/src/index.css
+++ b/extension/react-app/src/index.css
@@ -21,7 +21,8 @@
 html,
 body,
 #root {
-  height: calc(100%);
+  height: 100%;
+  background-color: var(--vsc-background);
 }
 
 body {
@@ -31,4 +32,5 @@ body {
   font-family: "Mona Sans", "Arial", sans-serif;
   padding: 0px;
   margin: 0px;
+  height: 100%;
 }
diff --git a/extension/react-app/src/tabs/gui.tsx b/extension/react-app/src/tabs/gui.tsx
index 5316f42b..994cb896 100644
--- a/extension/react-app/src/tabs/gui.tsx
+++ b/extension/react-app/src/tabs/gui.tsx
@@ -14,25 +14,18 @@ import StepContainer from "../components/StepContainer";
 import useContinueGUIProtocol from "../hooks/useWebsocket";
 import {
   BookOpen,
-  ChatBubbleOvalLeft,
   ChatBubbleOvalLeftEllipsis,
   Trash,
 } from "@styled-icons/heroicons-outline";
 import ComboBox from "../components/ComboBox";
 import TextDialog from "../components/TextDialog";
+import HeaderButtonWithText from "../components/HeaderButtonWithText";
 
-const MainDiv = styled.div`
-  display: grid;
-  grid-template-rows: 1fr auto;
+const TopGUIDiv = styled.div`
+  overflow: hidden;
 `;
 
-let TopGUIDiv = styled.div`
-  display: grid;
-  grid-template-columns: 1fr;
-  background-color: ${vscBackground};
-`;
-
-let UserInputQueueItem = styled.div`
+const UserInputQueueItem = styled.div`
   border-radius: ${defaultBorderRadius};
   color: gray;
   padding: 8px;
@@ -40,7 +33,7 @@ let UserInputQueueItem = styled.div`
   text-align: center;
 `;
 
-const TopBar = styled.div`
+const Footer = styled.footer`
   display: flex;
   flex-direction: row;
   gap: 8px;
@@ -201,7 +194,7 @@ function GUI(props: GUIProps) {
     if (topGuiDivRef.current) {
       const timeout = setTimeout(() => {
         window.scrollTo({
-          top: window.outerHeight,
+          top: topGuiDivRef.current!.offsetHeight,
           behavior: "smooth",
         });
       }, 200);
@@ -213,7 +206,9 @@ function GUI(props: GUIProps) {
     console.log("CLIENT ON STATE UPDATE: ", client, client?.onStateUpdate);
     client?.onStateUpdate((state) => {
       // Scroll only if user is at very bottom of the window.
-      const shouldScrollToBottom = window.outerHeight - window.scrollY < 200;
+      const shouldScrollToBottom =
+        topGuiDivRef.current &&
+        topGuiDivRef.current?.offsetHeight - window.scrollY < 100;
       setWaitingForSteps(state.active);
       setHistory(state.history);
       setUserInputQueue(state.user_input_queue);
@@ -303,103 +298,98 @@ function GUI(props: GUIProps) {
           setShowFeedbackDialog(false);
         }}
       ></TextDialog>
-      <MainDiv>
-        <TopGUIDiv
-          ref={topGuiDivRef}
-          onKeyDown={(e) => {
-            if (e.key === "Enter" && e.ctrlKey) {
-              onMainTextInput();
-            }
-          }}
-        >
-          {typeof client === "undefined" && (
-            <>
-              <Loader></Loader>
-              <p style={{ textAlign: "center" }}>
-                Trying to reconnect with server...
-              </p>
-            </>
-          )}
-          {history?.timeline.map((node: HistoryNode, index: number) => {
-            return (
-              <StepContainer
-                key={index}
-                onUserInput={(input: string) => {
-                  onStepUserInput(input, index);
-                }}
-                inFuture={index > history?.current_index}
-                historyNode={node}
-                onRefinement={(input: string) => {
-                  client?.sendRefinementInput(input, index);
-                }}
-                onReverse={() => {
-                  client?.reverseToIndex(index);
-                }}
-                onRetry={() => {
-                  client?.retryAtIndex(index);
-                  setWaitingForSteps(true);
-                }}
-                onDelete={() => {
-                  client?.deleteAtIndex(index);
-                }}
-              />
-            );
-          })}
-          {waitingForSteps && <Loader></Loader>}
 
-          <div>
-            {userInputQueue.map((input) => {
-              return <UserInputQueueItem>{input}</UserInputQueueItem>;
-            })}
-          </div>
-
-          <ComboBox
-            disabled={
-              history?.timeline.length
-                ? history.timeline[history.current_index].step.name ===
-                  "Waiting for user confirmation"
-                : false
-            }
-            ref={mainTextInputRef}
-            onEnter={(e) => {
-              onMainTextInput();
-              e.stopPropagation();
-              e.preventDefault();
-            }}
-            onInputValueChange={() => {}}
-            items={availableSlashCommands}
-          />
-          <ContinueButton onClick={onMainTextInput} />
-
-          <TopBar>
-            <a href="https://continue.dev/docs" className="no-underline">
-              <HeaderButton style={{ padding: "3px" }}>
-                Continue Docs
-                <BookOpen size="1.6em" />
-              </HeaderButton>
-            </a>
-            <HeaderButton
-              style={{ padding: "3px" }}
-              onClick={() => {
-                // Set dialog open
-                setShowFeedbackDialog(true);
+      <TopGUIDiv
+        ref={topGuiDivRef}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" && e.ctrlKey) {
+            onMainTextInput();
+          }
+        }}
+      >
+        {typeof client === "undefined" && (
+          <>
+            <Loader></Loader>
+            <p style={{ textAlign: "center" }}>
+              Trying to reconnect with server...
+            </p>
+          </>
+        )}
+        {history?.timeline.map((node: HistoryNode, index: number) => {
+          return (
+            <StepContainer
+              key={index}
+              onUserInput={(input: string) => {
+                onStepUserInput(input, index);
+              }}
+              inFuture={index > history?.current_index}
+              historyNode={node}
+              onRefinement={(input: string) => {
+                client?.sendRefinementInput(input, index);
+              }}
+              onReverse={() => {
+                client?.reverseToIndex(index);
               }}
-            >
-              Feedback
-              <ChatBubbleOvalLeftEllipsis size="1.6em" />
-            </HeaderButton>
-            <HeaderButton
-              onClick={() => {
-                client?.sendClear();
+              onRetry={() => {
+                client?.retryAtIndex(index);
+                setWaitingForSteps(true);
               }}
-              style={{ padding: "3px" }}
-            >
-              Clear History
-              <Trash size="1.6em" />
-            </HeaderButton>
-          </TopBar>
-        </TopGUIDiv>
-      </MainDiv>
+              onDelete={() => {
+                client?.deleteAtIndex(index);
+              }}
+            />
+          );
+        })}
+        {waitingForSteps && <Loader></Loader>}
+
+        <div>
+          {userInputQueue.map((input) => {
+            return <UserInputQueueItem>{input}</UserInputQueueItem>;
+          })}
+        </div>
+
+        <ComboBox
+          // disabled={
+          //   history?.timeline.length
+          //     ? history.timeline[history.current_index].step.name ===
+          //       "Waiting for user confirmation"
+          //     : false
+          // }
+          ref={mainTextInputRef}
+          onEnter={(e) => {
+            onMainTextInput();
+            e.stopPropagation();
+            e.preventDefault();
+          }}
+          onInputValueChange={() => {}}
+          items={availableSlashCommands}
+        />
+        <ContinueButton onClick={onMainTextInput} />
+      </TopGUIDiv>
+      <Footer>
+        <HeaderButtonWithText
+          onClick={() => {
+            client?.sendClear();
+          }}
+          text="Clear History"
+        >
+          <Trash size="1.6em" />
+        </HeaderButtonWithText>
+        <a href="https://continue.dev/docs" className="no-underline">
+          <HeaderButtonWithText text="Continue Docs">
+            <BookOpen size="1.6em" />
+          </HeaderButtonWithText>
+        </a>
+        <HeaderButtonWithText
+          onClick={() => {
+            // Set dialog open
+            setShowFeedbackDialog(true);
+          }}
+          text="Feedback"
+        >
+          <ChatBubbleOvalLeftEllipsis size="1.6em" />
+        </HeaderButtonWithText>
+      </Footer>
     </>
   );
 }