terminal-chat-ui/dist/components/HelpPanel.js

Shared UI components for terminal-based chat interfaces using Theater actors

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * HelpPanel - displays keyboard shortcuts and help information
 */
import { Box, Text } from 'ink';
/**
 * Help panel component that displays keyboard shortcuts and usage information
 */
export function HelpPanel({ shortcuts = [], variant = 'default', borderColor = 'blue' }) {
    // Default shortcuts if none provided
    const defaultShortcuts = [
        { key: 'Ctrl+C', description: 'Exit application' },
        { key: 'Ctrl+L', description: 'Clear message history' },
        { key: 'Ctrl+T', description: 'Toggle tool display' },
        { key: 'Ctrl+H', description: 'Toggle help' },
        { key: 'Enter', description: 'Send message' },
    ];
    const displayShortcuts = shortcuts.length > 0 ? shortcuts : defaultShortcuts;
    // Add variant-specific shortcuts
    const variantShortcuts = {
        git: [
            { key: 'commit', description: 'Start commit workflow' },
            { key: 'review', description: 'Start code review' },
            { key: 'rebase', description: 'Interactive rebase helper' }
        ],
        chat: [
            { key: 'Ctrl+Return', description: 'Send message (multiline mode)' },
            { key: 'Esc', description: 'Switch to command mode' }
        ]
    };
    const allShortcuts = [
        ...displayShortcuts,
        ...(variantShortcuts[variant] || [])
    ];
    return (_jsxs(Box, { borderStyle: "round", borderColor: borderColor, padding: 1, marginBottom: 1, flexDirection: "column", children: [_jsx(Text, { color: "cyan", bold: true, children: "\uD83D\uDCA1 Keyboard Shortcuts" }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: allShortcuts.map((shortcut, index) => (_jsxs(Box, { justifyContent: "space-between", minWidth: 50, children: [_jsx(Text, { color: "yellow", children: shortcut.key }), _jsx(Text, { color: "gray", children: shortcut.description })] }, index))) }), variant === 'git' && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "gray", dimColor: true, children: "\uD83D\uDCA1 Tip: Use workflow commands from any git repository" }) }))] }));
}