feat: tab autocomplete

Author: 0l1v3rr

src/components/terminal/TerminalPromptInput.tsx

@@ -1,7 +1,8 @@
-import { FC, FormEvent, useState } from "react";
+import { FC, FormEvent, Fragment, KeyboardEvent, useState } from "react";
 import { twMerge } from "tailwind-merge";
 import { getColorfulPrompt } from "../../lib/utils";
 import parse from "html-react-parser";
+import { COMMAND_NAMES } from "../../lib/commands";
 
 interface TerminalPromptInputProps {
   onEnter(prompt: string): void;
@@ -18,6 +19,20 @@ const TerminalPromptInput: FC<TerminalPromptInputProps> = ({ onEnter }) => {
     setInput("");
   }
 
+  const autocompleteCommand = input
+    ? COMMAND_NAMES.find((x) => x.startsWith(input))
+    : undefined;
+
+  function handleKeyDown(e: KeyboardEvent<HTMLInputElement>) {
+    setCaretPosition(e.currentTarget.selectionStart ?? 0);
+
+    if (autocompleteCommand && e.key === "Tab") {
+      e.preventDefault();
+      setInput(autocompleteCommand);
+      setCaretPosition(autocompleteCommand.length);
+    }
+  }
+
   return (
     <form onSubmit={handleSubmit} className="relative w-full">
       <input
@@ -30,13 +45,23 @@ const TerminalPromptInput: FC<TerminalPromptInputProps> = ({ onEnter }) => {
         }}
         value={input}
         onClick={(e) => setCaretPosition(e.currentTarget.selectionStart ?? 0)}
-        onKeyDown={(e) => setCaretPosition(e.currentTarget.selectionStart ?? 0)}
+        onKeyDown={handleKeyDown}
         onChange={(e) => {
           setInput(e.target.value);
           setCaretPosition(e.target.selectionStart ?? 0);
         }}
         className="w-full cursor-default whitespace-nowrap bg-transparent p-0 text-kali-white text-transparent focus:outline-none"
       />
+
+      {autocompleteCommand && (
+        <div className="absolute left-0 top-1/2 -translate-y-1/2 text-kali-text-muted">
+          {[...input].map((_, idx) => (
+            <Fragment key={idx}>&nbsp;</Fragment>
+          ))}
+          {autocompleteCommand.substring(input.length)}
+        </div>
+      )}
+
       <div
         className={twMerge(
           "pointer-events-none absolute left-0 top-1/2 h-[20px] max-w-full -translate-y-1/2 overflow-hidden overflow-ellipsis whitespace-nowrap pr-2"

src/lib/commands.ts

@@ -105,8 +105,8 @@ const COMMANDS: Record<string, (username: string, args: string[]) => string> = {
   echo: (_, args) => args.join("&nbsp;"),
 };
 
-const COMMAND_NAMES = [...Object.keys(COMMANDS), "clear", "help"].sort((a, z) =>
-  a.localeCompare(z)
+export const COMMAND_NAMES = [...Object.keys(COMMANDS), "clear", "help"].sort(
+  (a, z) => a.localeCompare(z)
 );
 
 export function getCommandResponse(