Merge pull request #30 from ai-action/feat/input

Author: remarkablemark

src/components/Chat/Input.test.tsx

@@ -5,6 +5,17 @@ import { useRef, useState } from 'react';
 import { COMMAND, KEY } from '../../constants';
 import { time } from '../../utils';
 
+const { mockExit } = vi.hoisted(() => ({
+  mockExit: vi.fn(),
+}));
+
+vi.mock('ink', async () => ({
+  ...(await vi.importActual('ink')),
+  useApp: vi.fn(() => ({
+    exit: mockExit,
+  })),
+}));
+
 vi.mock('@inkjs/ui', () => ({
   TextInput: ({
     defaultValue,
@@ -40,6 +51,10 @@ vi.mock('@inkjs/ui', () => ({
         return;
       }
 
+      if (key.ctrl) {
+        return;
+      }
+
       if (key.upArrow || key.downArrow || key.leftArrow || key.rightArrow) {
         return;
       }
@@ -177,6 +192,10 @@ vi.mock('./FileSuggestions', () => ({
 import { Input } from './Input';
 
 describe('Input', () => {
+  beforeEach(() => {
+    mockExit.mockReset();
+  });
+
   it('renders input prompt', () => {
     const { lastFrame } = render(<Input onSubmit={vi.fn()} />);
     expect(lastFrame()).toContain('>');
@@ -387,6 +406,26 @@ describe('Input', () => {
     expect(lastFrame()).not.toContain('src/components/Chat/Input.tsx');
   });
 
+  it('clears input on Ctrl+C when input is non-empty', async () => {
+    const { lastFrame, stdin } = render(<Input onSubmit={vi.fn()} />);
+    stdin.write('hi');
+    await time.tick();
+    expect(lastFrame()).toContain('[value:hi]');
+    stdin.write(KEY.CTRL_C);
+    await time.tick();
+    expect(lastFrame()).not.toContain('[value:hi]');
+    expect(lastFrame()).toContain(
+      '[placeholder:Ask anything... (/ commands, @ files)]',
+    );
+  });
+
+  it('calls exit on Ctrl+C when input is empty', async () => {
+    const { stdin } = render(<Input onSubmit={vi.fn()} />);
+    stdin.write(KEY.CTRL_C);
+    await time.tick();
+    expect(mockExit).toHaveBeenCalledOnce();
+  });
+
   it('does not accept input when disabled', async () => {
     const onSubmit = vi.fn();
     const { lastFrame, stdin } = render(

src/components/Chat/Input.tsx

@@ -1,5 +1,5 @@
 import { TextInput } from '@inkjs/ui';
-import { Box, Text } from 'ink';
+import { Box, Text, useApp, useInput } from 'ink';
 import { useCallback, useState } from 'react';
 
 import { COMMAND, UI } from '../../constants';
@@ -17,8 +17,13 @@ function hasActiveMentionQuery(input: string): boolean {
 }
 
 export function Input({ isDisabled = false, onSubmit }: Props) {
+  const { exit } = useApp();
   const [input, setInput] = useState('');
-  const [resetKey, setResetKey] = useState(0);
+  const [inputKey, setInputKey] = useState(0);
+
+  const remountTextInput = useCallback(() => {
+    setInputKey((key) => key + 1);
+  }, [setInputKey]);
 
   const handleSubmitText = useCallback(
     async (input: string) => {
@@ -35,9 +40,9 @@ export function Input({ isDisabled = false, onSubmit }: Props) {
 
       onSubmit(trimmedInput);
       setInput('');
-      setResetKey((key) => key + 1);
+      remountTextInput();
     },
-    [onSubmit],
+    [onSubmit, remountTextInput],
   );
 
   const handleSubmitCommand = useCallback(
@@ -48,15 +53,29 @@ export function Input({ isDisabled = false, onSubmit }: Props) {
 
       onSubmit(input);
       setInput('');
-      setResetKey((key) => key + 1);
+      remountTextInput();
     },
-    [onSubmit],
+    [onSubmit, remountTextInput],
   );
 
-  const handleSelectFileSuggestion = useCallback((nextInput: string) => {
-    setInput(nextInput);
-    setResetKey((key) => key + 1);
-  }, []);
+  const handleSelectFileSuggestion = useCallback(
+    (nextInput: string) => {
+      setInput(nextInput);
+      remountTextInput();
+    },
+    [remountTextInput],
+  );
+
+  useInput((_input, key) => {
+    if (key.ctrl && _input === 'c') {
+      if (input) {
+        setInput('');
+        remountTextInput();
+      } else {
+        exit();
+      }
+    }
+  });
 
   const showCommandMenu = input.startsWith('/');
   const showFileSuggestions = !showCommandMenu && hasActiveMentionQuery(input);
@@ -69,7 +88,7 @@ export function Input({ isDisabled = false, onSubmit }: Props) {
         <TextInput
           defaultValue={input}
           isDisabled={isDisabled}
-          key={resetKey}
+          key={inputKey}
           onChange={setInput}
           // eslint-disable-next-line @typescript-eslint/no-misused-promises
           onSubmit={handleSubmitText}

src/constants/key.ts

@@ -1,4 +1,5 @@
 export const BACKSPACE = '\x7f';
+export const CTRL_C = '\x03';
 export const DOWN = '\x1B[B';
 export const ENTER = '\r';
 export const ESCAPE = '\x1B\x1B';

src/tui.test.tsx

@@ -35,6 +35,7 @@ describe('tui', () => {
     renderApp();
 
     expect(render).toHaveBeenCalledWith(expect.anything(), {
+      exitOnCtrlC: false,
       incrementalRendering: true,
       maxFps: 60,
     });

src/tui.tsx

@@ -6,6 +6,7 @@ import { screen } from './utils';
 export function renderApp(): void {
   const tree = <App />;
   const app = render(tree, {
+    exitOnCtrlC: false,
     incrementalRendering: true,
     maxFps: 60,
   });