Enhancements to autocomplete to allow for modification of debounce delay and model timeout in configuration GUI, fix to debounce delay handling

Author: Ben Jones

core/autocomplete/filtering/streamTransforms/StreamTransformPipeline.ts

@@ -1,5 +1,4 @@
 import { streamLines } from "../../../diff/util";
-import { PosthogFeatureFlag, Telemetry } from "../../../util/posthog";
 import { HelperVars } from "../../util/HelperVars";
 
 import { stopAtStartOf, stopAtStopTokens } from "./charStream";
@@ -73,10 +72,7 @@ export class StreamTransformPipeline {
       fullStop,
     );
 
-    const timeoutValue = await Telemetry.getValueForFeatureFlag(
-      PosthogFeatureFlag.AutocompleteTimeout,
-    );
-
+    const timeoutValue = helper.options.modelTimeout;
     lineGenerator = showWhateverWeHaveAtXMs(lineGenerator, timeoutValue!);
 
     const finalGenerator = streamWithNewLines(lineGenerator);

core/autocomplete/util/AutocompleteDebouncer.ts

@@ -1,32 +1,32 @@
 import { v4 as uuidv4 } from "uuid";
+
 export class AutocompleteDebouncer {
   private debounceTimeout: NodeJS.Timeout | undefined = undefined;
-  private debouncing = false;
-  private lastUUID: string | undefined = undefined;
+  private currentRequestId: string | undefined = undefined;
 
   async delayAndShouldDebounce(debounceDelay: number): Promise<boolean> {
-    // Debounce
-    const uuid = uuidv4();
-    this.lastUUID = uuid;
-
-    // Debounce
-    if (this.debouncing) {
-      this.debounceTimeout?.refresh();
-      const lastUUID = await new Promise((resolve) =>
-        setTimeout(() => {
-          resolve(this.lastUUID);
-        }, debounceDelay),
-      );
-      if (uuid !== lastUUID) {
-        return true;
-      }
-    } else {
-      this.debouncing = true;
-      this.debounceTimeout = setTimeout(async () => {
-        this.debouncing = false;
-      }, debounceDelay);
+    // Generate a unique ID for this request
+    const requestId = uuidv4();
+    this.currentRequestId = requestId;
+    
+    // Clear any existing timeout
+    if (this.debounceTimeout) {
+      clearTimeout(this.debounceTimeout);
     }
-
-    return false;
+    
+    // Create a new promise that resolves after the debounce delay
+    return new Promise<boolean>((resolve) => {
+      this.debounceTimeout = setTimeout(() => {
+        // When the timeout completes, check if this is still the most recent request
+        const shouldDebounce = this.currentRequestId !== requestId;
+        
+        // If this is the most recent request, it shouldn't be debounced
+        if (!shouldDebounce) {
+          this.currentRequestId = undefined;
+        }
+        
+        resolve(shouldDebounce);
+      }, debounceDelay);
+    });
   }
 }

core/config/sharedConfig.ts

@@ -31,6 +31,8 @@ export const sharedConfigSchema = z
     useAutocompleteCache: z.boolean(),
     useAutocompleteMultilineCompletions: z.enum(["always", "never", "auto"]),
     disableAutocompleteInFiles: z.array(z.string()),
+    modelTimeout: z.number(),
+    debounceDelay: z.number(),
   })
   .partial();
 
@@ -103,6 +105,14 @@ export function modifyAnyConfigWithSharedConfig<
     configCopy.tabAutocompleteOptions.disableInFiles =
       sharedConfig.disableAutocompleteInFiles;
   }
+  if (sharedConfig.modelTimeout !== undefined) {
+    configCopy.tabAutocompleteOptions.modelTimeout =
+      sharedConfig.modelTimeout;
+  }
+  if (sharedConfig.debounceDelay !== undefined) {
+    configCopy.tabAutocompleteOptions.debounceDelay =
+      sharedConfig.debounceDelay;
+  }
 
   configCopy.ui = {
     ...configCopy.ui,

core/index.d.ts

@@ -983,6 +983,7 @@ export interface TabAutocompleteOptions {
   disable: boolean;
   maxPromptTokens: number;
   debounceDelay: number;
+  modelTimeout: number;
   maxSuffixPercentage: number;
   prefixPercentage: number;
   transform?: boolean;

core/util/parameters.ts

@@ -6,6 +6,7 @@ export const DEFAULT_AUTOCOMPLETE_OPTS: TabAutocompleteOptions = {
   prefixPercentage: 0.3,
   maxSuffixPercentage: 0.2,
   debounceDelay: 350,
+  modelTimeout: 150,
   multilineCompletions: "auto",
   // @deprecated TO BE REMOVED
   slidingWindowPrefixPercentage: 0.75,

gui/src/components/gui/NumberInput.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 
 interface NumberInputProps {
   value: number;
@@ -13,24 +13,50 @@ const NumberInput: React.FC<NumberInputProps> = ({
   max,
   min,
 }) => {
+  const [inputValue, setInputValue] = useState(value.toString());
+
   const handleIncrement = () => {
     if (value < max) {
-      onChange(value + 1);
+      const newValue = value + 1;
+      onChange(newValue);
+      setInputValue(newValue.toString());
     }
   };
 
   const handleDecrement = () => {
     if (value > min) {
-      onChange(value - 1);
+      const newValue = value - 1;
+      onChange(newValue);
+      setInputValue(newValue.toString());
+    }
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newInputValue = e.target.value;
+    setInputValue(newInputValue);
+    
+    // Only update the actual value if it's a valid number
+    const numValue = parseInt(newInputValue, 10);
+    if (!isNaN(numValue)) {
+      // Apply min/max constraints
+      const constrainedValue = Math.min(Math.max(numValue, min), max);
+      onChange(constrainedValue);
     }
   };
 
+  const handleBlur = () => {
+    // When input loses focus, ensure the displayed value matches the actual value
+    // This handles cases where the user entered an invalid value
+    setInputValue(value.toString());
+  };
+
   return (
     <div className="border-vsc-input-border bg-vsc-input-background flex flex-row overflow-hidden rounded-md border border-solid">
       <input
         type="text"
-        value={value}
-        readOnly
+        value={inputValue}
+        onChange={handleInputChange}
+        onBlur={handleBlur}
         className="text-vsc-foreground max-w-7 border-none bg-inherit pr-1.5 text-right outline-none ring-0 focus:border-none focus:outline-none focus:ring-0"
         style={{
           appearance: "none",

gui/src/pages/config/index.tsx

@@ -130,6 +130,10 @@ function ConfigPage() {
   const codeBlockToolbarPosition = config.ui?.codeBlockToolbarPosition ?? "top";
   const useAutocompleteMultilineCompletions =
     config.tabAutocompleteOptions?.multilineCompletions ?? "auto";
+  const modelTimeout = 
+    config.tabAutocompleteOptions?.modelTimeout ?? 150;
+  const debounceDelay = 
+    config.tabAutocompleteOptions?.debounceDelay ?? 250;
   const fontSize = getFontSize();
 
   // Disable autocomplete
@@ -513,7 +517,32 @@ function ConfigPage() {
                       <option value="never">Never</option>
                     </Select>
                   </label>
-
+                  <label className="flex items-center justify-between gap-3">
+                    <span className="text-left">Model Timeout (ms)</span>
+                    <NumberInput
+                      value={modelTimeout}
+                      onChange={(val) =>
+                        handleUpdate({
+                          modelTimeout: val,
+                        })
+                      }
+                      min={100}
+                      max={5000}
+                    />
+                  </label>
+                  <label className="flex items-center justify-between gap-3">
+                    <span className="text-left">Model Debounce (ms)</span>
+                    <NumberInput
+                      value={debounceDelay}
+                      onChange={(val) =>
+                        handleUpdate({
+                          debounceDelay: val,
+                        })
+                      }
+                      min={0}
+                      max={2500}
+                    />
+                  </label>
                   <label className="flex items-center justify-between gap-3">
                     <span className="text-left">Font Size</span>
                     <NumberInput