1 files changed, 16 insertions, 8 deletions
diff --git a/extension/react-app/src/tabs/gui.tsx b/extension/react-app/src/tabs/gui.tsx
index bbf0b126..e5320c6a 100644
--- a/extension/react-app/src/tabs/gui.tsx
+++ b/extension/react-app/src/tabs/gui.tsx
@@ -71,6 +71,7 @@ function GUI(props: GUIProps) {
   const [waitingForSteps, setWaitingForSteps] = useState(false);
   const [userInputQueue, setUserInputQueue] = useState<string[]>([]);
   const [highlightedRanges, setHighlightedRanges] = useState([]);
+  const [addingHighlightedCode, setAddingHighlightedCode] = useState(false);
   const [availableSlashCommands, setAvailableSlashCommands] = useState<
     { name: string; description: string }[]
   >([]);
@@ -157,6 +158,7 @@ function GUI(props: GUIProps) {
       setHistory(state.history);
       setHighlightedRanges(state.highlighted_ranges);
       setUserInputQueue(state.user_input_queue);
+      setAddingHighlightedCode(state.adding_highlighted_code);
       setAvailableSlashCommands(
         state.slash_commands.map((c: any) => {
           return {
@@ -293,14 +295,16 @@ function GUI(props: GUIProps) {
         )}
         {history?.timeline.map((node: HistoryNode, index: number) => {
           return node.step.name === "User Input" ? (
-            <UserInputContainer
-              onDelete={() => {
-                client?.deleteAtIndex(index);
-              }}
-              historyNode={node}
-            >
-              {node.step.description as string}
-            </UserInputContainer>
+            node.step.hide || (
+              <UserInputContainer
+                onDelete={() => {
+                  client?.deleteAtIndex(index);
+                }}
+                historyNode={node}
+              >
+                {node.step.description as string}
+              </UserInputContainer>
+            )
           ) : (
             <StepContainer
               isLast={index === history.timeline.length - 1}
@@ -361,6 +365,10 @@ function GUI(props: GUIProps) {
           onTogglePin={() => {
             setPinned((prev: boolean) => !prev);
           }}
+          onToggleAddContext={() => {
+            client?.toggleAddingHighlightedCode();
+          }}
+          addingHighlightedCode={addingHighlightedCode}
         />
         <ContinueButton onClick={onMainTextInput} />
       </TopGUIDiv>