feat: :lipstick: UI Improvements!

4 files changed, 116 insertions, 148 deletions

diff --git a/extension/react-app/src/components/Layout.tsx b/extension/react-app/src/components/Layout.tsx
index a3b1946a..0721585d 100644
--- a/extension/react-app/src/components/Layout.tsx
+++ b/extension/react-app/src/components/Layout.tsx
@@ -3,15 +3,13 @@ import { defaultBorderRadius, secondaryDark, vscForeground } from ".";
 import { Outlet } from "react-router-dom";
 import Onboarding from "./Onboarding";
 import TextDialog from "./TextDialog";
-import { useContext } from "react";
+import { useContext, useEffect } from "react";
 import { GUIClientContext } from "../App";
 import { useDispatch, useSelector } from "react-redux";
 import { RootStore } from "../redux/store";
 import {
   setBottomMessage,
   setBottomMessageCloseTimeout,
-  setDialogEntryOn,
-  setDialogMessage,
   setShowDialog,
 } from "../redux/slices/uiStateSlice";
 import {
@@ -57,8 +55,6 @@ const Footer = styled.footer`
   justify-content: right;
   padding: 8px;
   align-items: center;
-  margin-top: 8px;
-  border-top: 0.1px solid gray;
 `;
 
 // #endregion
@@ -78,9 +74,6 @@ const Layout = () => {
   );
 
   // #region Selectors
-  const vscMediaUrl = useSelector(
-    (state: RootStore) => state.config.vscMediaUrl
-  );
 
   const bottomMessage = useSelector(
     (state: RootStore) => state.uiState.bottomMessage
@@ -91,6 +84,20 @@ const Layout = () => {
 
   // #endregion
 
+  useEffect(() => {
+    const handleKeyDown = (event: any) => {
+      if (event.metaKey && event.key === "n" && event.altKey) {
+        client?.loadSession(undefined);
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [client]);
+
   return (
     <LayoutTopDiv>
       <div
@@ -131,51 +138,11 @@ const Layout = () => {
           {bottomMessage}
         </BottomMessageDiv>
         <Footer>
-          {vscMediaUrl && (
-            <a
-              href="https://github.com/continuedev/continue"
-              style={{ marginRight: "auto" }}
-            >
-              <img
-                src={`${vscMediaUrl}/continue-dev-square.png`}
-                width="22px"
-                style={{ backgroundColor: "black", color: "red" }}
-              />
-            </a>
-          )}
-          <HeaderButtonWithText
-            onClick={() => {
-              // Show the dialog
-              dispatch(
-                setDialogMessage(`Continue uses GPT-4 by default, but works with any model. If you'd like to keep your code completely private, there are few options:
-  
-  Run a local model with ggml: [5 minute quickstart](https://github.com/continuedev/ggml-server-example)
-  
-  Use Azure OpenAI service, which is GDPR and HIPAA compliant: [Tutorial](https://continue.dev/docs/customization#azure-openai-service)
-  
-  If you already have an LLM deployed on your own infrastructure, or would like to do so, please contact us at hi@continue.dev.
-              `)
-              );
-              dispatch(setDialogEntryOn(false));
-              dispatch(setShowDialog(true));
-            }}
-            text={"Use Private Model"}
-          >
-            <div
-              style={{
-                fontSize: "18px",
-                marginLeft: "2px",
-                marginRight: "2px",
-              }}
-            >
-              🔒
-            </div>
-          </HeaderButtonWithText>
           <HeaderButtonWithText
             onClick={() => {
               client?.loadSession(undefined);
             }}
-            text="New Session"
+            text="New Session (⌥⌘N)"
           >
             <PlusIcon width="1.4em" height="1.4em" />
           </HeaderButtonWithText>
@@ -195,21 +162,14 @@ const Layout = () => {
               <BookOpenIcon width="1.4em" height="1.4em" />
             </HeaderButtonWithText>
           </a>
-          <HeaderButtonWithText
-            onClick={() => {
-              // Set dialog open
-              dispatch(
-                setDialogMessage(
-                  "Having trouble using Continue? Want a new feature? Let us know! This box is anonymous, but we will promptly address your feedback."
-                )
-              );
-              dispatch(setDialogEntryOn(true));
-              dispatch(setShowDialog(true));
-            }}
-            text="Feedback"
+          <a
+            href="https://github.com/continuedev/continue/issues/new/choose"
+            className="no-underline"
           >
-            <ChatBubbleOvalLeftEllipsisIcon width="1.4em" height="1.4em" />
-          </HeaderButtonWithText>
+            <HeaderButtonWithText text="Feedback">
+              <ChatBubbleOvalLeftEllipsisIcon width="1.4em" height="1.4em" />
+            </HeaderButtonWithText>
+          </a>
         </Footer>
       </div>
     </LayoutTopDiv>
diff --git a/extension/react-app/src/components/StepContainer.tsx b/extension/react-app/src/components/StepContainer.tsx
index fe81e9e1..ce7d9a58 100644
--- a/extension/react-app/src/components/StepContainer.tsx
+++ b/extension/react-app/src/components/StepContainer.tsx
@@ -1,12 +1,6 @@
 import { useContext, useEffect, useRef, useState } from "react";
 import styled, { keyframes } from "styled-components";
-import {
-  defaultBorderRadius,
-  secondaryDark,
-  vscBackground,
-  vscBackgroundTransparent,
-  vscForeground,
-} from ".";
+import { secondaryDark, vscBackground } from ".";
 import {
   ChevronDownIcon,
   ChevronRightIcon,
@@ -48,18 +42,10 @@ const MainDiv = styled.div<{
   margin-right: 0px;
 `;
 
-const StepContainerDiv = styled.div<{ open: boolean }>`
-  /* background-color: ${(props) =>
-    props.open ? vscBackground : secondaryDark}; */
-  /* border-radius: ${defaultBorderRadius}; */
-  /* padding: 8px; */
-`;
-
 const HeaderDiv = styled.div<{ error: boolean; loading: boolean }>`
   background-color: ${(props) => (props.error ? "#522" : vscBackground)};
   display: grid;
   grid-template-columns: 1fr auto auto;
-  grid-gap: 8px;
   align-items: center;
   padding-right: 8px;
 `;
@@ -73,7 +59,8 @@ const LeftHeaderSubDiv = styled.div`
 `;
 
 const ContentDiv = styled.div<{ isUserInput: boolean }>`
-  padding: 8px;
+  padding-left: 4px;
+  padding-right: 2px;
   background-color: ${(props) =>
     props.isUserInput ? secondaryDark : vscBackground};
   font-size: 13px;
@@ -151,9 +138,9 @@ function StepContainer(props: StepContainerProps) {
       }}
       hidden={props.historyNode.step.hide as any}
     >
-      <StepContainerDiv open={props.open}>
+      <div>
         <GradientBorder
-          loading={(props.historyNode.active as boolean) || false}
+          loading={props.historyNode.active as boolean}
           isFirst={props.isFirst}
           isLast={props.isLast}
           borderColor={
@@ -198,62 +185,63 @@ function StepContainer(props: StepContainerProps) {
             >
               <Backward size="1.6em" onClick={props.onReverse}></Backward>
             </HeaderButton> */}
-
-            <>
-              {(props.historyNode.logs as any)?.length > 0 && (
+            {(isHovered || (props.historyNode.active as boolean)) && (
+              <div className="flex gap-2 items-center">
+                {(props.historyNode.logs as any)?.length > 0 && (
+                  <HeaderButtonWithText
+                    text="Logs"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      client?.showLogsAtIndex(props.index);
+                    }}
+                  >
+                    <MagnifyingGlassIcon width="1.4em" height="1.4em" />
+                  </HeaderButtonWithText>
+                )}
                 <HeaderButtonWithText
-                  text="Logs"
                   onClick={(e) => {
                     e.stopPropagation();
-                    client?.showLogsAtIndex(props.index);
+                    props.onDelete();
                   }}
+                  text={
+                    props.historyNode.active
+                      ? `Stop (${getMetaKeyLabel()}⌫)`
+                      : "Delete"
+                  }
                 >
-                  <MagnifyingGlassIcon width="1.4em" height="1.4em" />
+                  {props.historyNode.active ? (
+                    <StopCircleIcon
+                      width="1.4em"
+                      height="1.4em"
+                      onClick={props.onDelete}
+                    />
+                  ) : (
+                    <XMarkIcon
+                      width="1.4em"
+                      height="1.4em"
+                      onClick={props.onDelete}
+                    />
+                  )}
                 </HeaderButtonWithText>
-              )}
-              <HeaderButtonWithText
-                onClick={(e) => {
-                  e.stopPropagation();
-                  props.onDelete();
-                }}
-                text={
-                  props.historyNode.active
-                    ? `Stop (${getMetaKeyLabel()}⌫)`
-                    : "Delete"
-                }
-              >
-                {props.historyNode.active ? (
-                  <StopCircleIcon
-                    width="1.4em"
-                    height="1.4em"
-                    onClick={props.onDelete}
-                  />
+                {props.historyNode.observation?.error ? (
+                  <HeaderButtonWithText
+                    text="Retry"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      props.onRetry();
+                    }}
+                  >
+                    <ArrowPathIcon
+                      width="1.4em"
+                      height="1.4em"
+                      onClick={props.onRetry}
+                    />
+                  </HeaderButtonWithText>
                 ) : (
-                  <XMarkIcon
-                    width="1.4em"
-                    height="1.4em"
-                    onClick={props.onDelete}
-                  />
+                  <></>
                 )}
-              </HeaderButtonWithText>
-              {props.historyNode.observation?.error ? (
-                <HeaderButtonWithText
-                  text="Retry"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    props.onRetry();
-                  }}
-                >
-                  <ArrowPathIcon
-                    width="1.4em"
-                    height="1.4em"
-                    onClick={props.onRetry}
-                  />
-                </HeaderButtonWithText>
-              ) : (
-                <></>
-              )}
-            </>
+              </div>
+            )}
           </HeaderDiv>
         </GradientBorder>
         <ContentDiv hidden={!props.open} isUserInput={isUserInput}>
@@ -283,7 +271,7 @@ function StepContainer(props: StepContainerProps) {
             />
           )}
         </ContentDiv>
-      </StepContainerDiv>
+      </div>
     </MainDiv>
   );
 }
diff --git a/extension/react-app/src/components/StyledMarkdownPreview.tsx b/extension/react-app/src/components/StyledMarkdownPreview.tsx
index b1079c96..5957f8dd 100644
--- a/extension/react-app/src/components/StyledMarkdownPreview.tsx
+++ b/extension/react-app/src/components/StyledMarkdownPreview.tsx
@@ -11,7 +11,6 @@ const StyledMarkdownPreview = styled(MarkdownPreview)<{ light?: boolean }>`
   pre {
     background-color: ${(props) =>
       props.light ? vscBackground : secondaryDark};
-    padding: 1px;
     border-radius: ${defaultBorderRadius};
     border: 0.5px solid white;
   }
@@ -27,6 +26,7 @@ const StyledMarkdownPreview = styled(MarkdownPreview)<{ light?: boolean }>`
     background-color: ${(props) =>
       props.light ? vscBackground : secondaryDark};
     color: ${vscForeground};
+    padding: 10px;
   }
 
   background-color: ${(props) => (props.light ? "transparent" : vscBackground)};
diff --git a/extension/react-app/src/components/UserInputContainer.tsx b/extension/react-app/src/components/UserInputContainer.tsx
index 7e964ad9..90cd549b 100644
--- a/extension/react-app/src/components/UserInputContainer.tsx
+++ b/extension/react-app/src/components/UserInputContainer.tsx
@@ -1,7 +1,7 @@
-import React from "react";
+import React, { useState } from "react";
 import ReactMarkdown from "react-markdown";
 import styled from "styled-components";
-import { secondaryDark, vscBackground } from ".";
+import { defaultBorderRadius, secondaryDark, vscBackground } from ".";
 import HeaderButtonWithText from "./HeaderButtonWithText";
 import { XMarkIcon } from "@heroicons/react/24/outline";
 import { HistoryNode } from "../../../schema/HistoryNode";
@@ -21,35 +21,55 @@ const StyledDiv = styled.div`
   align-items: center;
   border-bottom: 1px solid ${vscBackground};
   padding: 8px;
-  padding-top: 4px;
-  padding-bottom: 4px;
+  padding-top: 0px;
+  padding-bottom: 0px;
 `;
 
 const DeleteButtonDiv = styled.div`
   position: absolute;
   top: 8px;
-  right: 16px;
+  right: 8px;
+`;
+
+const StyledPre = styled.pre`
+  margin-right: 22px;
+  margin-left: 8px;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  font-family: "Lexend", sans-serif;
+  font-size: 13px;
 `;
 
 const UserInputContainer = (props: UserInputContainerProps) => {
+  const [isHovered, setIsHovered] = useState(false);
   return (
-    <StyledDiv>
-      <StyledMarkdownPreview
+    <StyledDiv
+      onMouseEnter={() => {
+        setIsHovered(true);
+      }}
+      onMouseLeave={() => {
+        setIsHovered(false);
+      }}
+    >
+      {/* <StyledMarkdownPreview
         light={true}
         source={props.children}
         className="mr-6"
-      />
+      /> */}
+      <StyledPre className="mr-6">{props.children}</StyledPre>
       {/* <ReactMarkdown children={props.children} className="w-fit mr-10" /> */}
       <DeleteButtonDiv>
-        <HeaderButtonWithText
-          onClick={(e) => {
-            props.onDelete();
-            e.stopPropagation();
-          }}
-          text="Delete"
-        >
-          <XMarkIcon width="1.4em" height="1.4em" />
-        </HeaderButtonWithText>
+        {isHovered && (
+          <HeaderButtonWithText
+            onClick={(e) => {
+              props.onDelete();
+              e.stopPropagation();
+            }}
+            text="Delete"
+          >
+            <XMarkIcon width="1.4em" height="1.4em" />
+          </HeaderButtonWithText>
+        )}
       </DeleteButtonDiv>
     </StyledDiv>
   );