From 5b63917db308ab75dc765de543e97819f16924b7 Mon Sep 17 00:00:00 2001
From: Nate Sesti <sestinj@gmail.com>
Date: Thu, 6 Jul 2023 20:07:45 -0700
Subject: details

---
 extension/react-app/src/components/ComboBox.tsx    | 62 +++++++++++++---------
 .../react-app/src/components/ContinueButton.tsx    |  3 +-
 .../react-app/src/components/StepContainer.tsx     |  3 ++
 extension/react-app/src/tabs/gui.tsx               | 26 +--------
 4 files changed, 44 insertions(+), 50 deletions(-)

(limited to 'extension/react-app/src')

diff --git a/extension/react-app/src/components/ComboBox.tsx b/extension/react-app/src/components/ComboBox.tsx
index 55496fb9..4dab8bcd 100644
--- a/extension/react-app/src/components/ComboBox.tsx
+++ b/extension/react-app/src/components/ComboBox.tsx
@@ -1,4 +1,9 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useState,
+} from "react";
 import { useCombobox } from "downshift";
 import styled from "styled-components";
 import {
@@ -151,22 +156,13 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
   const [highlightedCodeSections, setHighlightedCodeSections] = React.useState(
     props.highlightedCodeSections || []
   );
+  const inputRef = React.useRef<HTMLInputElement>(null);
 
   useEffect(() => {
     setHighlightedCodeSections(props.highlightedCodeSections || []);
   }, [props.highlightedCodeSections]);
 
-  const {
-    isOpen,
-    getToggleButtonProps,
-    getLabelProps,
-    getMenuProps,
-    getInputProps,
-    highlightedIndex,
-    getItemProps,
-    selectedItem,
-    setInputValue,
-  } = useCombobox({
+  const { getInputProps, ...downshiftProps } = useCombobox({
     onInputValueChange({ inputValue }) {
       if (!inputValue) return;
       props.onInputValueChange(inputValue);
@@ -182,6 +178,24 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
     },
   });
 
+  useImperativeHandle(ref, () => downshiftProps, [downshiftProps]);
+
+  useEffect(() => {
+    if (!inputRef.current) {
+      return;
+    }
+    inputRef.current.focus();
+    const handler = (event: any) => {
+      if (event.data.type === "focusContinueInput") {
+        inputRef.current!.focus();
+      }
+    };
+    window.addEventListener("message", handler);
+    return () => {
+      window.removeEventListener("message", handler);
+    };
+  }, [inputRef.current]);
+
   const divRef = React.useRef<HTMLDivElement>(null);
   const ulRef = React.useRef<HTMLUListElement>(null);
   const showAbove = () => {
@@ -255,7 +269,7 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
             </HeaderButtonWithText>
           ))}
       </div>
-      <div className="flex px-2" ref={divRef} hidden={!isOpen}>
+      <div className="flex px-2" ref={divRef} hidden={!downshiftProps.isOpen}>
         <MainTextInput
           disabled={props.disabled}
           placeholder="Ask a question, give instructions, or type '/' to see slash commands"
@@ -277,9 +291,9 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
                 (event.nativeEvent as any).preventDownshiftDefault = true;
               } else if (
                 event.key === "Enter" &&
-                (!isOpen || items.length === 0)
+                (!downshiftProps.isOpen || items.length === 0)
               ) {
-                setInputValue("");
+                downshiftProps.setInputValue("");
                 const value = event.currentTarget.value;
                 if (value !== "") {
                   setPositionInHistory(history.length + 1);
@@ -294,7 +308,7 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
                 }
                 if (props.onEnter) props.onEnter(event);
               } else if (event.key === "Tab" && items.length > 0) {
-                setInputValue(items[0].name);
+                downshiftProps.setInputValue(items[0].name);
                 event.preventDefault();
               } else if (
                 (event.key === "ArrowUp" || event.key === "ArrowDown") &&
@@ -311,35 +325,35 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
                 ) {
                   setHistory([...history, event.currentTarget.value]);
                 }
-                setInputValue(history[positionInHistory - 1]);
+                downshiftProps.setInputValue(history[positionInHistory - 1]);
                 setPositionInHistory((prev) => prev - 1);
               } else if (event.key === "ArrowDown") {
                 if (positionInHistory < history.length) {
-                  setInputValue(history[positionInHistory + 1]);
+                  downshiftProps.setInputValue(history[positionInHistory + 1]);
                 }
                 setPositionInHistory((prev) =>
                   Math.min(prev + 1, history.length)
                 );
               }
             },
-            ref: ref as any,
+            ref: inputRef,
           })}
         />
         <Ul
-          {...getMenuProps({
+          {...downshiftProps.getMenuProps({
             ref: ulRef,
           })}
           showAbove={showAbove()}
           ulHeightPixels={ulRef.current?.getBoundingClientRect().height || 0}
         >
-          {isOpen &&
+          {downshiftProps.isOpen &&
             items.map((item, index) => (
               <Li
                 style={{ borderTop: index === 0 ? "none" : undefined }}
                 key={`${item.name}${index}`}
-                {...getItemProps({ item, index })}
-                highlighted={highlightedIndex === index}
-                selected={selectedItem === item}
+                {...downshiftProps.getItemProps({ item, index })}
+                highlighted={downshiftProps.highlightedIndex === index}
+                selected={downshiftProps.selectedItem === item}
               >
                 <span>
                   {item.name}: {item.description}
diff --git a/extension/react-app/src/components/ContinueButton.tsx b/extension/react-app/src/components/ContinueButton.tsx
index 72f6dcd2..d7739b20 100644
--- a/extension/react-app/src/components/ContinueButton.tsx
+++ b/extension/react-app/src/components/ContinueButton.tsx
@@ -13,9 +13,8 @@ let StyledButton = styled(Button)`
   background: #be1b55;
 
   &:hover {
-    transition-delay: 0.5s;
     transition-property: "background";
-    opacity: 0.8;
+    opacity: 0.7;
   }
 `;
 
diff --git a/extension/react-app/src/components/StepContainer.tsx b/extension/react-app/src/components/StepContainer.tsx
index 590b1166..d480c565 100644
--- a/extension/react-app/src/components/StepContainer.tsx
+++ b/extension/react-app/src/components/StepContainer.tsx
@@ -260,6 +260,9 @@ function StepContainer(props: StepContainerProps) {
                 code: ({ node, ...props }) => {
                   return <StyledCode children={props.children[0] as any} />;
                 },
+                ul: ({ node, ...props }) => {
+                  return <ul className="ml-0" {...props} />;
+                },
               }}
             >
               {props.historyNode.step.description as any}
diff --git a/extension/react-app/src/tabs/gui.tsx b/extension/react-app/src/tabs/gui.tsx
index c8a42d9a..1ea70dd2 100644
--- a/extension/react-app/src/tabs/gui.tsx
+++ b/extension/react-app/src/tabs/gui.tsx
@@ -217,25 +217,10 @@ function GUI(props: GUIProps) {
     [client]
   );
 
-  useEffect(() => {
-    if (mainTextInputRef.current) {
-      mainTextInputRef.current.focus();
-      let handler = (event: any) => {
-        if (event.data.type === "focusContinueInput") {
-          mainTextInputRef.current?.focus();
-        }
-      };
-      window.addEventListener("message", handler);
-      return () => {
-        window.removeEventListener("message", handler);
-      };
-    }
-  }, [mainTextInputRef]);
-
   const onMainTextInput = () => {
     if (mainTextInputRef.current) {
-      let input = mainTextInputRef.current.value;
-      mainTextInputRef.current.value = "";
+      const input = (mainTextInputRef.current as any).inputValue;
+      (mainTextInputRef.current as any).setInputValue("");
       if (!client) return;
 
       setWaitingForSteps(true);
@@ -266,13 +251,6 @@ function GUI(props: GUIProps) {
       setUserInputQueue((queue) => {
         return [...queue, input];
       });
-
-      // Delete all context items unless locked
-      if (!pinned) {
-        client?.deleteContextAtIndices(
-          highlightedRanges.map((_, index) => index)
-        );
-      }
     }
   };
 
-- 
cgit v1.2.3-70-g09d2