feat: :zap: queue messages before load, then send

2 files changed, 35 insertions, 8 deletions

diff --git a/extension/react-app/src/components/StepContainer.tsx b/extension/react-app/src/components/StepContainer.tsx
index 1f999892..8eb132cd 100644
--- a/extension/react-app/src/components/StepContainer.tsx
+++ b/extension/react-app/src/components/StepContainer.tsx
@@ -1,7 +1,6 @@
 import { useContext, useEffect, useRef, useState } from "react";
 import styled, { keyframes } from "styled-components";
 import {
-  appear,
   defaultBorderRadius,
   secondaryDark,
   vscBackground,
@@ -39,9 +38,11 @@ interface StepContainerProps {
 
 // #region styled components
 
-const MainDiv = styled.div<{ stepDepth: number; inFuture: boolean }>`
+const MainDiv = styled.div<{
+  stepDepth: number;
+  inFuture: boolean;
+}>`
   opacity: ${(props) => (props.inFuture ? 0.3 : 1)};
-  animation: ${appear} 0.3s ease-in-out;
   overflow: hidden;
   margin-left: 0px;
   margin-right: 0px;
diff --git a/extension/react-app/src/pages/gui.tsx b/extension/react-app/src/pages/gui.tsx
index 9456c235..d69da57e 100644
--- a/extension/react-app/src/pages/gui.tsx
+++ b/extension/react-app/src/pages/gui.tsx
@@ -120,9 +120,9 @@ function GUI(props: GUIProps) {
         step: {
           name: "Welcome to Continue",
           hide: false,
-          description: `- Highlight code and ask a question or give instructions
-          - Use \`cmd+m\` (Mac) / \`ctrl+m\` (Windows) to open Continue
-          - Use \`/help\` to ask questions about how to use Continue`,
+          description: `- Highlight code section and ask a question or give instructions
+- Use \`cmd+m\` (Mac) / \`ctrl+m\` (Windows) to open Continue
+- Use \`/help\` to ask questions about how to use Continue`,
           system_message: null,
           chat_context: [],
           manage_own_chat_context: false,
@@ -260,6 +260,16 @@ function GUI(props: GUIProps) {
     scrollToBottom();
   }, [waitingForSteps]);
 
+  const [waitingForClient, setWaitingForClient] = useState(true);
+  useEffect(() => {
+    if (client && waitingForClient) {
+      setWaitingForClient(false);
+      for (const input of userInputQueue) {
+        client.sendMainInput(input);
+      }
+    }
+  }, [client, userInputQueue, waitingForClient]);
+
   const onMainTextInput = (event?: any) => {
     if (mainTextInputRef.current) {
       let input = (mainTextInputRef.current as any).inputValue;
@@ -268,7 +278,12 @@ function GUI(props: GUIProps) {
         input = `/edit ${input}`;
       }
       (mainTextInputRef.current as any).setInputValue("");
-      if (!client) return;
+      if (!client) {
+        setUserInputQueue((queue) => {
+          return [...queue, input];
+        });
+        return;
+      }
 
       setWaitingForSteps(true);
 
@@ -376,6 +391,17 @@ function GUI(props: GUIProps) {
     client.sendStepUserInput(input, index);
   };
 
+  const [showLoading, setShowLoading] = useState(false);
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setShowLoading(true);
+    }, 3000);
+
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, []);
+
   // const iterations = useSelector(selectIterations);
   return (
     <>
@@ -401,7 +427,7 @@ function GUI(props: GUIProps) {
           }
         }}
       >
-        {typeof client === "undefined" && (
+        {showLoading && typeof client === "undefined" && (
           <>
             <RingLoader />
             <p