openAgent

1import { TextAttributes } from "@opentui/core"
2import { useTheme } from "../context/theme"
3import { useDialog } from "./dialog"
4import { useBindings, useCommandShortcut } from "../keymap"
5 
6export function DialogHelp() {
7  const dialog = useDialog()
8  const { theme } = useTheme()
9  const commandShortcut = useCommandShortcut("command.palette.show")
10 
11  useBindings(() => ({
12    bindings: [
13      { key: "return", desc: "Close help", group: "Dialog", cmd: () => dialog.clear() },
14      { key: "escape", desc: "Close help", group: "Dialog", cmd: () => dialog.clear() },
15    ],
16  }))
17 
18  return (
19    <box paddingLeft={2} paddingRight={2} gap={1}>
20      <box flexDirection="row" justifyContent="space-between">
21        <text attributes={TextAttributes.BOLD} fg={theme.text}>
22          Help
23        </text>
24        <text fg={theme.textMuted} onMouseUp={() => dialog.clear()}>
25          esc/enter
26        </text>
27      </box>
28      <box paddingBottom={1}>
29        <text fg={theme.textMuted}>
30          Press {commandShortcut()} to see all available actions and commands in any context.
31        </text>
32      </box>
33      <box flexDirection="row" justifyContent="flex-end" paddingBottom={1}>
34        <box paddingLeft={3} paddingRight={3} backgroundColor={theme.primary} onMouseUp={() => dialog.clear()}>
35          <text fg={theme.selectedListItemText}>ok</text>
36        </box>
37      </box>
38    </box>
39  )
40}
41