feat(Chat): use Ctrl+C to clear dirty 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,6 +17,7 @@ function hasActiveMentionQuery(input: string): boolean {
 }
 
 export function Input({ isDisabled = false, onSubmit }: Props) {
+  const { exit } = useApp();
   const [input, setInput] = useState('');
   const [resetKey, setResetKey] = useState(0);
 
@@ -58,6 +59,17 @@ export function Input({ isDisabled = false, onSubmit }: Props) {
     setResetKey((key) => key + 1);
   }, []);
 
+  useInput((_input, key) => {
+    if (key.ctrl && _input === 'c') {
+      if (input) {
+        setInput('');
+        setResetKey((key) => key + 1);
+      } else {
+        exit();
+      }
+    }
+  });
+
   const showCommandMenu = input.startsWith('/');
   const showFileSuggestions = !showCommandMenu && hasActiveMentionQuery(input);
 

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,
   });