perf(tui): don't regenerate command suggestions in chat input

Author: remarkablemark

src/components/Chat.tsx

@@ -27,6 +27,7 @@ export function Chat({ model, onCommand, autoExecute }: Props) {
         role: ROLE.ASSISTANT,
         content: '',
       };
+
       setMessages((previousMessages) => [
         ...previousMessages,
         assistantMessage,
@@ -156,7 +157,9 @@ export function Chat({ model, onCommand, autoExecute }: Props) {
   const handleSubmit = useCallback(
     async (value: string) => {
       const userContent = value.trim();
-      if (!userContent) return;
+      if (!userContent) {
+        return;
+      }
 
       if (userContent.startsWith('/')) {
         onCommand(userContent);
@@ -191,12 +194,8 @@ export function Chat({ model, onCommand, autoExecute }: Props) {
       )}
 
       {!pendingToolCall && (
-        <ChatInput
-          isDisabled={isLoading}
-          onSubmit={(val) => {
-            void handleSubmit(val);
-          }}
-        />
+        // eslint-disable-next-line @typescript-eslint/no-misused-promises
+        <ChatInput isDisabled={isLoading} onSubmit={handleSubmit} />
       )}
     </Box>
   );

src/components/ChatInput.test.tsx

@@ -1,19 +1,7 @@
 import { render } from 'ink-testing-library';
 
-import { tick } from '../utils/test';
-
-vi.mock('../constants', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('../constants')>();
-  return {
-    ...actual,
-    COMMANDS: [
-      { name: '/model', description: 'switch the model' },
-      { name: '/mock', description: 'mock command' },
-    ],
-  };
-});
-
 import { KEY } from '../constants';
+import { tick } from '../utils/test';
 import { ChatInput } from './ChatInput';
 
 describe('ChatInput', () => {
@@ -36,18 +24,6 @@ describe('ChatInput', () => {
     expect(lastFrame()).toContain('/model');
   });
 
-  it('filters inline suggestions as input narrows', async () => {
-    const { lastFrame, stdin } = render(<ChatInput onSubmit={vi.fn()} />);
-    stdin.write('/');
-    await tick();
-    stdin.write('m');
-    await tick();
-    expect(lastFrame()).toContain('/model');
-    stdin.write('x');
-    await tick();
-    expect(lastFrame()).not.toContain('/model');
-  });
-
   it('submits typed text on Enter', async () => {
     const onSubmit = vi.fn();
     const { stdin } = render(<ChatInput onSubmit={onSubmit} />);

src/components/ChatInput.tsx

@@ -1,30 +1,17 @@
 import { TextInput } from '@inkjs/ui';
 import { Box, Text } from 'ink';
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useState } from 'react';
 
-import { COMMANDS, UI } from '../constants';
+import { COMMAND, UI } from '../constants';
 
 interface Props {
   isDisabled?: boolean;
   onSubmit: (value: string) => void;
 }
 
-function getSuggestions(input: string): string[] {
-  if (!input.startsWith('/')) {
-    return [];
-  }
-
-  return COMMANDS.filter((command) => command.name.startsWith(input)).map(
-    (command) => command.name,
-  );
-}
-
 export function ChatInput({ isDisabled = false, onSubmit }: Props) {
-  const [value, setValue] = useState('');
   const [resetKey, setResetKey] = useState(0);
 
-  const suggestions = useMemo(() => getSuggestions(value), [value]);
-
   const handleSubmit = useCallback(
     (input: string) => {
       const trimmed = input.trim();
@@ -33,7 +20,6 @@ export function ChatInput({ isDisabled = false, onSubmit }: Props) {
       }
 
       onSubmit(trimmed);
-      setValue('');
       setResetKey((key) => key + 1);
     },
     [onSubmit],
@@ -42,12 +28,11 @@ export function ChatInput({ isDisabled = false, onSubmit }: Props) {
   return (
     <Box>
       <Text>{UI.PROMPT_PREFIX}</Text>
+
       <TextInput
-        key={resetKey}
         isDisabled={isDisabled}
-        defaultValue=""
-        suggestions={suggestions}
-        onChange={setValue}
+        key={resetKey}
+        suggestions={COMMAND.NAMES}
         onSubmit={handleSubmit}
       />
     </Box>

src/constants/command.ts

@@ -0,0 +1,10 @@
+export interface CommandList {
+  name: string;
+  description: string;
+}
+
+export const LIST: CommandList[] = [
+  { name: '/model', description: 'switch the model' },
+] as const;
+
+export const NAMES = LIST.map(({ name }) => name);

src/constants/commands.ts

@@ -1,4 +1,4 @@
-export * from './commands';
+export * as COMMAND from './command';
 export * as KEY from './key';
 export * as PACKAGE from './package';
 export * as PROMPT from './prompt';