openAgent

1import { TextAttributes } from "@opentui/core"
2import { useTheme } from "../context/theme"
3import { useDialog, type DialogContext } from "./dialog"
4import { createStore } from "solid-js/store"
5import { For } from "solid-js"
6import { Locale } from "../util/locale"
7import { useBindings } from "../keymap"
8 
9export type DialogConfirmProps = {
10  title: string
11  message: string
12  onConfirm?: () => void
13  onCancel?: () => void
14  label?: string
15}
16 
17export type DialogConfirmResult = boolean | undefined
18 
19export function DialogConfirm(props: DialogConfirmProps) {
20  const dialog = useDialog()
21  const { theme } = useTheme()
22  const [store, setStore] = createStore({
23    active: "confirm" as "confirm" | "cancel",
24  })
25 
26  useBindings(() => ({
27    bindings: [
28      {
29        key: "return",
30        desc: "Confirm dialog selection",
31        group: "Dialog",
32        cmd: () => {
33          if (store.active === "confirm") props.onConfirm?.()
34          if (store.active === "cancel") props.onCancel?.()
35          dialog.clear()
36        },
37      },
38      {
39        key: "left",
40        desc: "Previous dialog option",
41        group: "Dialog",
42        cmd: () => {
43          setStore("active", store.active === "confirm" ? "cancel" : "confirm")
44        },
45      },
46      {
47        key: "right",
48        desc: "Next dialog option",
49        group: "Dialog",
50        cmd: () => {
51          setStore("active", store.active === "confirm" ? "cancel" : "confirm")
52        },
53      },
54    ],
55  }))
56  return (
57    <box paddingLeft={2} paddingRight={2} gap={1}>
58      <box flexDirection="row" justifyContent="space-between">
59        <text attributes={TextAttributes.BOLD} fg={theme.text}>
60          {props.title}
61        </text>
62        <text fg={theme.textMuted} onMouseUp={() => dialog.clear()}>
63          esc
64        </text>
65      </box>
66      <box paddingBottom={1}>
67        <text fg={theme.textMuted}>{props.message}</text>
68      </box>
69      <box flexDirection="row" justifyContent="flex-end" paddingBottom={1}>
70        <For each={["cancel", "confirm"] as const}>
71          {(key) => (
72            <box
73              paddingLeft={1}
74              paddingRight={1}
75              backgroundColor={key === store.active ? theme.primary : undefined}
76              onMouseUp={() => {
77                if (key === "confirm") props.onConfirm?.()
78                if (key === "cancel") props.onCancel?.()
79                dialog.clear()
80              }}
81            >
82              <text fg={key === store.active ? theme.selectedListItemText : theme.textMuted}>
83                {Locale.titlecase(key === "cancel" ? (props.label ?? key) : key)}
84              </text>
85            </box>
86          )}
87        </For>
88      </box>
89    </box>
90  )
91}
92 
93DialogConfirm.show = (dialog: DialogContext, title: string, message: string, label?: string) => {
94  return new Promise<DialogConfirmResult>((resolve) => {
95    dialog.replace(
96      () => (
97        <DialogConfirm
98          title={title}
99          message={message}
100          onConfirm={() => resolve(true)}
101          onCancel={() => resolve(false)}
102          label={label}
103        />
104      ),
105      () => resolve(undefined),
106    )
107  })
108}
109