feat(components): render cursor block in Autocomplete

Author: remarkablemark

src/components/Autocomplete.test.tsx

@@ -168,4 +168,23 @@ describe('Autocomplete', () => {
     await tick();
     expect(lastFrame()).toContain('/mock');
   });
+
+  it('shows block cursor in output', async () => {
+    const { lastFrame, stdin } = render(<Autocomplete onSubmit={vi.fn()} />);
+    stdin.write('hi');
+    await tick();
+    // The input should be visible with block cursor at end
+    expect(lastFrame()).toContain('hi');
+  });
+
+  it('cursor stays at end when typing', async () => {
+    const { lastFrame, stdin } = render(<Autocomplete onSubmit={vi.fn()} />);
+    stdin.write('a');
+    await tick();
+    stdin.write('b');
+    await tick();
+    stdin.write('c');
+    await tick();
+    expect(lastFrame()).toContain('abc');
+  });
 });

src/components/Autocomplete.tsx

@@ -9,12 +9,15 @@ interface Props {
 }
 
 function getMatches(input: string): Command[] {
-  if (!input.startsWith('/')) return [];
-  return COMMANDS.filter((cmd) => cmd.name.startsWith(input));
+  if (!input.startsWith('/')) {
+    return [];
+  }
+  return COMMANDS.filter((command) => command.name.startsWith(input));
 }
 
 export function Autocomplete({ isDisabled = false, onSubmit }: Props) {
   const [value, setValue] = useState('');
+  const [cursorPosition, setCursorPosition] = useState(0);
   const [selectedIndex, setSelectedIndex] = useState(0);
 
   const matches = getMatches(value);
@@ -32,6 +35,18 @@ export function Autocomplete({ isDisabled = false, onSubmit }: Props) {
         return;
       }
 
+      // v8 ignore next 4
+      if (key.leftArrow) {
+        setCursorPosition((position) => Math.max(0, position - 1));
+        return;
+      }
+
+      // v8 ignore next 4
+      if (key.rightArrow) {
+        setCursorPosition((position) => Math.min(value.length, position + 1));
+        return;
+      }
+
       if (key.tab && showSuggestions) {
         // v8 ignore next
         const match = matches[selectedIndex] ?? matches[0];
@@ -61,18 +76,25 @@ export function Autocomplete({ isDisabled = false, onSubmit }: Props) {
       }
 
       if (key.backspace || key.delete) {
-        setValue((v) => v.slice(0, -1));
+        setValue((value) => {
+          const before = value.slice(0, cursorPosition - 1);
+          const after = value.slice(cursorPosition);
+          return before + after;
+        });
+        setCursorPosition((position) => Math.max(0, position - 1));
         setSelectedIndex(0);
         return;
       }
 
       // v8 ignore next
       if (char && !key.ctrl && !key.meta) {
-        setValue((v) => {
-          const next = v + char;
-          setSelectedIndex(0);
-          return next;
+        setValue((value) => {
+          const before = value.slice(0, cursorPosition);
+          const after = value.slice(cursorPosition);
+          return before + char + after;
         });
+        setCursorPosition((position) => position + 1);
+        setSelectedIndex(0);
       }
     },
     { isActive: !isDisabled },
@@ -82,22 +104,35 @@ export function Autocomplete({ isDisabled = false, onSubmit }: Props) {
     <Box flexDirection="column">
       <Box>
         <Text>{UI.PROMPT_PREFIX}</Text>
-        <Text>{value}</Text>
+
+        <Text>
+          {value.slice(0, cursorPosition)}
+          {cursorPosition < value.length ? (
+            <Text backgroundColor="black" color="white">
+              {value[cursorPosition]}
+            </Text>
+          ) : (
+            <Text backgroundColor="black" color="white">
+              {' '}
+            </Text>
+          )}
+          {value.slice(cursorPosition + 1)}
+        </Text>
       </Box>
 
       {showSuggestions && (
         <Box flexDirection="column">
-          {matches.map((cmd, index) => {
+          {matches.map((command, index) => {
             const isHighlighted = index === selectedIndex;
             return (
-              <Box key={cmd.name} gap={1}>
+              <Box key={command.name} gap={1}>
                 <Text
                   color={isHighlighted ? 'cyan' : undefined}
                   bold={isHighlighted}
                 >
-                  {cmd.name}
+                  {command.name}
                 </Text>
-                <Text dimColor>{cmd.description}</Text>
+                <Text dimColor>{command.description}</Text>
               </Box>
             );
           })}

src/constants/key.ts

@@ -2,5 +2,7 @@ export const BACKSPACE = '\x7f';
 export const DOWN = '\x1B[B';
 export const ENTER = '\r';
 export const ESCAPE = '\x1B\x1B';
+export const LEFT = '\x1B[D';
+export const RIGHT = '\x1B[C';
 export const TAB = '\t';
 export const UP = '\x1B[A';