Skip to content

Commit 16153af

Browse files
koki-developclaude
andcommitted
feat: Add keyboard shortcuts help text below input field
- Display help text showing Ctrl+J for new line, Enter to send, and Ctrl+C to exit - Style help text with dimmed separators for better visual hierarchy - Implement Ctrl+J keybinding for adding line breaks in input 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
1 parent 7874ab9 commit 16153af

File tree

1 file changed

+21
-3
lines changed

1 file changed

+21
-3
lines changed

src/components/InputField.tsx

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -183,6 +183,13 @@ export const InputField: React.FC<InputFieldProps> = ({
183183
return;
184184
}
185185

186+
// Line break (Ctrl+j)
187+
if (key.ctrl && input === "j") {
188+
const newValue = `${value.slice(0, cursorPosition)}\n${value.slice(cursorPosition)}`;
189+
updateValue(newValue, cursorPosition + 1);
190+
return;
191+
}
192+
186193
// Regular character input
187194
if (input && !key.ctrl && !key.meta) {
188195
const newValue =
@@ -227,9 +234,20 @@ export const InputField: React.FC<InputFieldProps> = ({
227234
}, [value, cursorPosition, showCursor]);
228235

229236
return (
230-
<Box borderStyle="single" borderColor="gray" paddingX={1}>
231-
<Text color="yellow">&gt; </Text>
232-
{renderText}
237+
<Box flexDirection="column">
238+
<Box borderStyle="single" borderColor="gray" paddingX={1}>
239+
<Text color="yellow">&gt; </Text>
240+
{renderText}
241+
</Box>
242+
<Box paddingX={1}>
243+
<Text color="gray">
244+
<Text>Ctrl+J: New line</Text>
245+
<Text dimColor> / </Text>
246+
<Text>Enter: Send</Text>
247+
<Text dimColor> / </Text>
248+
<Text>Ctrl+C: Exit</Text>
249+
</Text>
250+
</Box>
233251
</Box>
234252
);
235253
};

0 commit comments

Comments
 (0)