slash commands and better designed user input box

3 files changed, 74 insertions, 16 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)";