4 files changed, 92 insertions, 31 deletions
diff --git a/extension/react-app/src/components/StepContainer.tsx b/extension/react-app/src/components/StepContainer.tsx
index cb83f20a..ab0d307f 100644
--- a/extension/react-app/src/components/StepContainer.tsx
+++ b/extension/react-app/src/components/StepContainer.tsx
@@ -22,7 +22,6 @@ interface StepContainerProps {
   historyNode: HistoryNode;
   onReverse: () => void;
   inFuture: boolean;
-  onRefinement: (input: string) => void;
   onUserInput: (input: string) => void;
   onRetry: () => void;
   onDelete: () => void;
@@ -33,6 +32,8 @@ interface StepContainerProps {
   isLast: boolean;
 }
 
+// #region styled components
+
 const MainDiv = styled.div<{ stepDepth: number; inFuture: boolean }>`
   opacity: ${(props) => (props.inFuture ? 0.3 : 1)};
   animation: ${appear} 0.3s ease-in-out;
@@ -63,9 +64,12 @@ const HeaderDiv = styled.div<{ error: boolean; loading: boolean }>`
   padding-right: 8px;
 `;
 
-const ContentDiv = styled.div`
+const ContentDiv = styled.div<{ isUserInput: boolean }>`
   padding: 8px;
   padding-left: 16px;
+  background-color: ${(props) =>
+    props.isUserInput ? secondaryDark : vscBackground};
+  font-size: 13px;
 `;
 
 const MarkdownPre = styled.pre`
@@ -119,10 +123,13 @@ const GradientBorder = styled.div<{
   background-size: 200% 200%;
 `;
 
+// #endregion
+
 function StepContainer(props: StepContainerProps) {
   const [isHovered, setIsHovered] = useState(false);
   const naturalLanguageInputRef = useRef<HTMLTextAreaElement>(null);
   const userInputRef = useRef<HTMLInputElement>(null);
+  const isUserInput = props.historyNode.step.name === "UserInputStep";
 
   useEffect(() => {
     if (userInputRef?.current) {
@@ -136,13 +143,6 @@ function StepContainer(props: StepContainerProps) {
     }
   }, [isHovered]);
 
-  const onTextInput = useCallback(() => {
-    if (naturalLanguageInputRef.current) {
-      props.onRefinement(naturalLanguageInputRef.current.value);
-      naturalLanguageInputRef.current.value = "";
-    }
-  }, [naturalLanguageInputRef]);
-
   return (
     <MainDiv
       stepDepth={(props.historyNode.depth as any) || 0}
@@ -181,11 +181,12 @@ function StepContainer(props: StepContainerProps) {
             error={props.historyNode.observation?.error ? true : false}
           >
             <h4 className="m-2">
-              {props.open ? (
-                <ChevronDown size="1.4em" />
-              ) : (
-                <ChevronRight size="1.4em" />
-              )}
+              {!isUserInput &&
+                (props.open ? (
+                  <ChevronDown size="1.4em" />
+                ) : (
+                  <ChevronRight size="1.4em" />
+                ))}
               {props.historyNode.observation?.title ||
                 (props.historyNode.step.name as any)}
             </h4>
@@ -225,7 +226,7 @@ function StepContainer(props: StepContainerProps) {
             </>
           </HeaderDiv>
         </GradientBorder>
-        <ContentDiv hidden={!props.open}>
+        <ContentDiv hidden={!props.open} isUserInput={isUserInput}>
           {props.open && false && (
             <>
               <pre className="overflow-x-scroll">
diff --git a/extension/react-app/src/components/UserInputContainer.tsx b/extension/react-app/src/components/UserInputContainer.tsx
new file mode 100644
index 00000000..7d6f0d4e
--- /dev/null
+++ b/extension/react-app/src/components/UserInputContainer.tsx
@@ -0,0 +1,57 @@
+import React from "react";
+import ReactMarkdown from "react-markdown";
+import styled from "styled-components";
+import { buttonColor, secondaryDark } from ".";
+import HeaderButtonWithText from "./HeaderButtonWithText";
+import { Play, XMark } from "@styled-icons/heroicons-outline";
+import { RootStore } from "../redux/store";
+import { useSelector } from "react-redux";
+
+interface UserInputContainerProps {
+  onDelete: () => void;
+  children: string;
+}
+
+const StyledDiv = styled.div`
+  background-color: rgb(50 50 50);
+  padding: 8px;
+  padding-left: 16px;
+  border-bottom: 1px solid white;
+  border-top: 1px solid white;
+  font-size: 13px;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+`;
+
+const DeleteButton = styled.button`
+  position: absolute;
+  top: 0;
+  right: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  margin-left: auto;
+`;
+
+const UserInputContainer: React.FC<UserInputContainerProps> = ({
+  children,
+  onDelete,
+}) => {
+  return (
+    <StyledDiv>
+      {children}
+      <HeaderButtonWithText
+        onClick={(e) => {
+          e.stopPropagation();
+          onDelete();
+        }}
+        text="Delete"
+      >
+        <XMark size="1.6em" onClick={onDelete} />
+      </HeaderButtonWithText>
+    </StyledDiv>
+  );
+};
+
+export default UserInputContainer;
diff --git a/extension/react-app/src/components/index.ts b/extension/react-app/src/components/index.ts
index fc94c51f..429a7df5 100644
--- a/extension/react-app/src/components/index.ts
+++ b/extension/react-app/src/components/index.ts
@@ -1,7 +1,7 @@
 import styled, { keyframes } from "styled-components";
 
 export const defaultBorderRadius = "5px";
-export const secondaryDark = "rgb(37 37 38)";
+export const secondaryDark = "rgb(42 42 42)";
 export const vscBackground = "rgb(30 30 30)";
 export const vscBackgroundTransparent = "#1e1e1ede";
 export const buttonColor = "rgb(113 28 59)";
diff --git a/extension/react-app/src/tabs/gui.tsx b/extension/react-app/src/tabs/gui.tsx
index cccd184e..40256f86 100644
--- a/extension/react-app/src/tabs/gui.tsx
+++ b/extension/react-app/src/tabs/gui.tsx
@@ -20,6 +20,7 @@ import { useSelector } from "react-redux";
 import { RootStore } from "../redux/store";
 import LoadingCover from "../components/LoadingCover";
 import { postVscMessage } from "../vscode";
+import UserInputContainer from "../components/UserInputContainer";
 
 const TopGUIDiv = styled.div`
   overflow: hidden;
@@ -152,6 +153,14 @@ function GUI(props: GUIProps) {
       setHistory(state.history);
       setHighlightedRanges(state.highlighted_ranges);
       setUserInputQueue(state.user_input_queue);
+      setAvailableSlashCommands(
+        state.slash_commands.map((c: any) => {
+          return {
+            name: `/${c.name}`,
+            description: c.description,
+          };
+        })
+      );
       setStepsOpen((prev) => {
         const nextStepsOpen = [...prev];
         for (
@@ -168,17 +177,6 @@ function GUI(props: GUIProps) {
         scrollToBottom();
       }
     });
-    client?.onAvailableSlashCommands((commands) => {
-      console.log("Received available slash commands: ", commands);
-      setAvailableSlashCommands(
-        commands.map((c) => {
-          return {
-            name: "/" + c.name,
-            description: c.description,
-          };
-        })
-      );
-    });
   }, [client]);
 
   useEffect(() => {
@@ -283,7 +281,15 @@ function GUI(props: GUIProps) {
           </>
         )}
         {history?.timeline.map((node: HistoryNode, index: number) => {
-          return (
+          return node.step.name === "User Input" ? (
+            <UserInputContainer
+              onDelete={() => {
+                client?.deleteAtIndex(index);
+              }}
+            >
+              {node.step.description as string}
+            </UserInputContainer>
+          ) : (
             <StepContainer
               isLast={index === history.timeline.length - 1}
               isFirst={index === 0}
@@ -302,9 +308,6 @@ function GUI(props: GUIProps) {
               }}
               inFuture={index > history?.current_index}
               historyNode={node}
-              onRefinement={(input: string) => {
-                client?.sendRefinementInput(input, index);
-              }}
               onReverse={() => {
                 client?.reverseToIndex(index);
               }}