openAgent

1import {
2  InputRenderable,
3  RGBA,
4  ScrollBoxRenderable,
5  TextAttributes,
6  type KeyEvent,
7  type Renderable,
8} from "@opentui/core"
9import type { Binding } from "@opentui/keymap"
10import { useTheme, selectedForeground } from "../context/theme"
11import { entries, filter, flatMap, groupBy, pipe } from "remeda"
12import { batch, createEffect, createMemo, createSignal, For, Show, type JSX, on, onCleanup } from "solid-js"
13import { createStore } from "solid-js/store"
14import { useTerminalDimensions } from "@opentui/solid"
15import * as fuzzysort from "fuzzysort"
16import { isDeepEqual } from "remeda"
17import { useDialog, type DialogContext } from "./dialog"
18import { Locale } from "../util/locale"
19import { getScrollAcceleration } from "../util/scroll"
20import { useTuiConfig } from "../config"
21import { formatKeyBindings, useBindings, useKeymapSelector } from "../keymap"
22 
23export interface DialogSelectProps<T> {
24  title: string
25  titleView?: JSX.Element
26  placeholder?: string
27  footer?: JSX.Element
28  emptyView?: JSX.Element
29  options: DialogSelectOption<T>[]
30  flat?: boolean
31  ref?: (ref: DialogSelectRef<T>) => void
32  onMove?: (option: DialogSelectOption<T>) => void
33  onFilter?: (query: string) => void
34  onSelect?: (option: DialogSelectOption<T>) => void
35  skipFilter?: boolean
36  renderFilter?: boolean
37  locked?: boolean
38  preserveSelection?: boolean
39  actions?: {
40    command: string
41    title: string
42    side?: "left" | "right"
43    hidden?: boolean
44    disabled?: boolean | ((option: DialogSelectOption<T> | undefined) => boolean)
45    onTrigger: (option: DialogSelectOption<T>) => void
46  }[]
47  footerHints?: {
48    title: string
49    label: string
50    side?: "left" | "right"
51  }[]
52  bindings?: readonly Binding<Renderable, KeyEvent>[]
53  current?: T
54}
55 
56export interface DialogSelectOption<T = any> {
57  title: string
58  titleView?: JSX.Element
59  value: T
60  description?: string
61  details?: string[]
62  footer?: JSX.Element | string
63  titleWidth?: number
64  truncateTitle?: boolean | "left"
65  category?: string
66  categoryView?: JSX.Element
67  disabled?: boolean
68  bg?: RGBA
69  gutter?: () => JSX.Element
70  margin?: JSX.Element
71  onSelect?: (ctx: DialogContext) => void
72}
73 
74export type DialogSelectRef<T> = {
75  filter: string
76  filtered: DialogSelectOption<T>[]
77  moveTo(value: T): void
78}
79 
80export function DialogSelect<T>(props: DialogSelectProps<T>) {
81  type Action = NonNullable<DialogSelectProps<T>["actions"]>[number]
82  type FooterHint = NonNullable<DialogSelectProps<T>["footerHints"]>[number]
83  type VisibleAction = (Action & { label: string }) | FooterHint
84 
85  const dialog = useDialog()
86  const { theme } = useTheme()
87  const tuiConfig = useTuiConfig()
88  const scrollAcceleration = createMemo(() => getScrollAcceleration(tuiConfig))
89 
90  const [store, setStore] = createStore({
91    selected: 0,
92    filter: "",
93    input: "keyboard" as "keyboard" | "mouse",
94  })
95  const [focusedAction, setFocusedAction] = createSignal<number>()
96  const actionFocused = createMemo(() => focusedAction() !== undefined)
97  let selection: { value: T; category?: string } | undefined
98  let resetSelection = false
99  let visibilityGeneration = 0
100 
101  createEffect(
102    on(
103      () => props.current,
104      (current) => {
105        if (current) {
106          const currentIndex = flat().findIndex((opt) => isDeepEqual(opt.value, current))
107          if (currentIndex >= 0) {
108            setStore("selected", currentIndex)
109            selection = flat()[currentIndex]
110          }
111        }
112      },
113    ),
114  )
115 
116  let input: InputRenderable
117 
118  const actions = createMemo(() => props.actions ?? [])
119  const shownActions = createMemo(() => actions().filter((item) => !item.hidden))
120  const actionBindings = useKeymapSelector((keymap) =>
121    keymap.getCommandBindings({
122      visibility: "registered",
123      commands: shownActions().map((item) => item.command),
124    }),
125  )
126 
127  const actionLabels = createMemo(() => {
128    const labels = new Map<string, string>()
129 
130    for (const action of shownActions()) {
131      const label = formatKeyBindings(actionBindings().get(action.command), tuiConfig)
132      if (label) labels.set(action.command, label)
133    }
134 
135    return labels
136  })
137  const visibleActions = createMemo(() => [
138    ...shownActions()
139      .map((item) => ({ ...item, label: actionLabels().get(item.command) ?? "" }))
140      .filter((item) => item.label),
141    ...(props.footerHints ?? []),
142  ])
143  const actionItems = createMemo(() =>
144    visibleActions()
145      .filter(isActionItem)
146      .filter((item) => !isActionDisabled(item)),
147  )
148 
149  createEffect(() => {
150    const index = focusedAction()
151    if (index !== undefined && index >= actionItems().length) setFocusedAction(undefined)
152  })
153 
154  const filtered = createMemo(() => {
155    if (props.skipFilter || props.renderFilter === false) return props.options.filter((x) => x.disabled !== true)
156    const needle = store.filter.toLowerCase()
157    const options = pipe(
158      props.options,
159      filter((x) => x.disabled !== true),
160    )
161    if (!needle) return options
162 
163    // prioritize title matches (weight: 2) over category matches (weight: 1).
164    // users typically search by the item name, and not its category.
165    const result = fuzzysort
166      .go(needle, options, {
167        keys: ["title", "category"],
168        scoreFn: (r) => r[0].score * 2 + r[1].score,
169      })
170      .map((x) => x.obj)
171 
172    return result
173  })
174 
175  // When the filter changes due to how TUI works, the mousemove might still be triggered
176  // via a synthetic event as the layout moves underneath the cursor. This is a workaround to make sure the input mode remains keyboard
177  // that the mouseover event doesn't trigger when filtering.
178  createEffect(() => {
179    filtered()
180    setStore("input", "keyboard")
181    setFocusedAction(undefined)
182  })
183 
184  const flatten = createMemo(() => props.flat && store.filter.length > 0)
185 
186  const grouped = createMemo<[string, DialogSelectOption<T>[]][]>(() => {
187    if (flatten()) return [["", filtered()]]
188    const result = pipe(
189      filtered(),
190      groupBy((x) => x.category ?? ""),
191      // mapValues((x) => x.sort((a, b) => a.title.localeCompare(b.title))),
192      entries(),
193    )
194    return result
195  })
196 
197  const flat = createMemo(() => {
198    return pipe(
199      grouped(),
200      flatMap(([_, options]) => options),
201    )
202  })
203 
204  const rows = createMemo(() => {
205    const headers = grouped().reduce((acc, [category], i) => {
206      if (!category) return acc
207      return acc + (i > 0 ? 2 : 1)
208    }, 0)
209    return flat().reduce((acc, option) => acc + 1 + (option.details?.length ?? 0), headers)
210  })
211 
212  const dimensions = useTerminalDimensions()
213  const height = createMemo(() => Math.min(rows(), Math.floor(dimensions().height / 2) - 6))
214 
215  const selected = createMemo(() => flat()[store.selected])
216 
217  createEffect(
218    on(
219      () => props.options,
220      () => {
221        if (!props.preserveSelection) return
222        if (resetSelection && store.filter.length > 0) {
223          const option = flat()[0]
224          if (!option) return
225          setStore("selected", 0)
226          selection = option
227          return
228        }
229        if (!selection) {
230          if (props.current !== undefined) {
231            const index = flat().findIndex((option) => isDeepEqual(option.value, props.current))
232            if (index >= 0) {
233              setStore("selected", index)
234              selection = flat()[index]
235              return
236            }
237          }
238          const option = selected()
239          if (!option) return
240          selection = option
241          return
242        }
243        const previous = selection
244        const index = flat().findIndex((option) => isDeepEqual(option.value, previous.value))
245        if (index >= 0) {
246          const option = flat()[index]
247          const moved = index !== store.selected || option.category !== previous.category
248          setStore("selected", index)
249          selection = option
250          if (!moved) return
251          const value = option.value
252          const generation = ++visibilityGeneration
253          requestAnimationFrame(() => {
254            requestAnimationFrame(() => {
255              if (generation !== visibilityGeneration) return
256              if (!props.preserveSelection || store.filter.length > 0) return
257              if (!isDeepEqual(selected()?.value, value)) return
258              scrollToSelection(false)
259            })
260          })
261          return
262        }
263        const next = Math.min(store.selected, flat().length - 1)
264        if (next < 0) return
265        setStore("selected", next)
266        selection = flat()[next]
267      },
268    ),
269  )
270  onCleanup(() => {
271    visibilityGeneration++
272  })
273 
274  createEffect(
275    on([() => store.filter, () => props.current], ([filter, current]) => {
276      if (filter.length > 0) resetSelection = true
277      setTimeout(() => {
278        if (filter.length > 0) {
279          moveTo(0, true, false)
280        } else if (current) {
281          const currentIndex = flat().findIndex((opt) => isDeepEqual(opt.value, current))
282          if (currentIndex >= 0) {
283            moveTo(currentIndex, true)
284          }
285        }
286      }, 0)
287    }),
288  )
289 
290  function move(direction: number) {
291    if (props.locked) return
292    if (flat().length === 0) return
293    let next = store.selected + direction
294    if (next < 0) next = flat().length - 1
295    if (next >= flat().length) next = 0
296    moveTo(next, true)
297  }
298 
299  function moveTo(next: number, center = false, preserve = true) {
300    setFocusedAction(undefined)
301    setStore("selected", next)
302    const option = selected()
303    if (option) {
304      selection = option
305      resetSelection = !preserve
306    }
307    if (option) props.onMove?.(option)
308    scrollToSelection(center)
309  }
310 
311  function scrollToSelection(center: boolean) {
312    if (!scroll) return
313    let remaining = store.selected
314    let index = 0
315    // Locate the row by position because a unique renderable ID cannot currently be ensured.
316    for (const [category, options] of grouped()) {
317      if (category) index++
318      if (remaining < options.length) {
319        index += remaining
320        break
321      }
322      index += options.length
323      remaining -= options.length
324    }
325    const target = scroll.getChildren()[index]
326    if (!target) return
327    const y = target.y - scroll.y
328    if (center) {
329      const centerOffset = Math.floor(scroll.height / 2)
330      scroll.scrollBy(y - centerOffset)
331    } else {
332      if (y >= scroll.height) {
333        scroll.scrollBy(y - scroll.height + 1)
334      }
335      if (y < 0) {
336        scroll.scrollBy(y)
337        if (isDeepEqual(flat()[0].value, selected()?.value)) {
338          scroll.scrollTo(0)
339        }
340      }
341    }
342  }
343 
344  function submit() {
345    if (props.locked) return
346    setStore("input", "keyboard")
347    const index = focusedAction()
348    if (index !== undefined) {
349      triggerAction(actionItems()[index])
350      return
351    }
352    const option = selected()
353    if (!option) return
354    option.onSelect?.(dialog)
355    props.onSelect?.(option)
356  }
357 
358  function moveAction(direction: 1 | -1) {
359    if (props.locked) return
360    const total = actionItems().length
361    if (total === 0) return
362    setFocusedAction((index) => {
363      if (index === undefined) return direction === 1 ? 0 : total - 1
364      const next = index + direction
365      return next < 0 || next >= total ? undefined : next
366    })
367  }
368 
369  useBindings(() => {
370    const visible = shownActions()
371 
372    return {
373      commands: [
374        {
375          name: "dialog.select.prev",
376          title: "Previous item",
377          category: "Dialog",
378          run() {
379            setStore("input", "keyboard")
380            move(-1)
381          },
382        },
383        {
384          name: "dialog.select.next",
385          title: "Next item",
386          category: "Dialog",
387          run() {
388            setStore("input", "keyboard")
389            move(1)
390          },
391        },
392        {
393          name: "dialog.select.page_up",
394          title: "Page up",
395          category: "Dialog",
396          run() {
397            setStore("input", "keyboard")
398            move(-10)
399          },
400        },
401        {
402          name: "dialog.select.page_down",
403          title: "Page down",
404          category: "Dialog",
405          run() {
406            setStore("input", "keyboard")
407            move(10)
408          },
409        },
410        {
411          name: "dialog.select.home",
412          title: "First item",
413          category: "Dialog",
414          run() {
415            if (props.locked) return
416            setStore("input", "keyboard")
417            moveTo(0)
418          },
419        },
420        {
421          name: "dialog.select.end",
422          title: "Last item",
423          category: "Dialog",
424          run() {
425            if (props.locked) return
426            setStore("input", "keyboard")
427            moveTo(flat().length - 1)
428          },
429        },
430        {
431          name: "dialog.select.submit",
432          title: "Select item",
433          category: "Dialog",
434          run: submit,
435        },
436        ...visible.map((item) => ({
437          name: item.command,
438          title: item.title,
439          category: "Dialog",
440          run() {
441            if (props.locked) return
442            if (isActionDisabled(item)) return
443            setStore("input", "keyboard")
444            const option = selected()
445            if (!option) return
446            item.onTrigger(option)
447          },
448        })),
449      ],
450      bindings: [
451        ...tuiConfig.keybinds.gather("dialog.select", [
452          "dialog.select.prev",
453          "dialog.select.next",
454          "dialog.select.page_up",
455          "dialog.select.page_down",
456          "dialog.select.home",
457          "dialog.select.end",
458          "dialog.select.submit",
459        ]),
460        ...visible.flatMap((item) => tuiConfig.keybinds.get(item.command)),
461        ...(visible.length
462          ? [
463              {
464                key: "tab",
465                desc: "Next dialog action",
466                group: "Dialog",
467                cmd: () => moveAction(1),
468              },
469              {
470                key: "shift+tab",
471                desc: "Previous dialog action",
472                group: "Dialog",
473                cmd: () => moveAction(-1),
474              },
475            ]
476          : []),
477        ...(props.bindings ?? []).filter((binding) => {
478          if (typeof binding.cmd !== "string") return true
479          return visible.some((item) => item.command === binding.cmd)
480        }),
481      ],
482    }
483  })
484 
485  let scroll: ScrollBoxRenderable | undefined
486  const ref: DialogSelectRef<T> = {
487    get filter() {
488      return store.filter
489    },
490    get filtered() {
491      return filtered()
492    },
493    moveTo(value) {
494      const index = flat().findIndex((option) => isDeepEqual(option.value, value))
495      if (index >= 0) moveTo(index, true)
496    },
497  }
498  props.ref?.(ref)
499 
500  const left = createMemo(() => visibleActions().filter((item) => item.side !== "right"))
501  const right = createMemo(() => visibleActions().filter((item) => item.side === "right"))
502 
503  function triggerAction(item: VisibleAction | undefined) {
504    if (props.locked) return
505    if (!item || !isActionItem(item) || isActionDisabled(item)) return
506    setStore("input", "keyboard")
507    const option = selected()
508    if (!option) return
509    item.onTrigger(option)
510  }
511 
512  function isActionItem(item: VisibleAction): item is Action & { label: string } {
513    return "onTrigger" in item
514  }
515 
516  function isActionDisabled(item: Action) {
517    return typeof item.disabled === "function" ? item.disabled(selected()) : item.disabled
518  }
519 
520  function isActionFocused(item: VisibleAction) {
521    if (props.locked) return false
522    if (!isActionItem(item)) return false
523    return actionItems().indexOf(item) === focusedAction()
524  }
525 
526  function FooterAction(action: { item: VisibleAction }) {
527    if (!isActionItem(action.item))
528      return (
529        <text>
530          <span style={{ fg: theme.text }}>
531            <b>{action.item.title}</b>{" "}
532          </span>
533          <span style={{ fg: theme.textMuted }}>{action.item.label}</span>
534        </text>
535      )
536    const item = action.item
537    const active = createMemo(() => isActionFocused(item))
538    const disabled = createMemo(() => isActionDisabled(item))
539    const fg = selectedForeground(theme)
540    return (
541      <box
542        flexDirection="row"
543        backgroundColor={active() ? theme.primary : RGBA.fromInts(0, 0, 0, 0)}
544        onMouseUp={() => triggerAction(item)}
545      >
546        <text
547          fg={disabled() ? theme.textMuted : active() ? fg : theme.text}
548          attributes={active() ? TextAttributes.BOLD : undefined}
549        >
550          {item.title}
551        </text>
552        <text fg={disabled() ? theme.textMuted : active() ? fg : theme.textMuted}> {item.label}</text>
553      </box>
554    )
555  }
556 
557  return (
558    <box gap={1} paddingBottom={1} flexGrow={1}>
559      <box paddingLeft={4} paddingRight={4}>
560        <box flexDirection="row" justifyContent="space-between">
561          {props.titleView ?? (
562            <text fg={theme.text} attributes={TextAttributes.BOLD}>
563              {props.title}
564            </text>
565          )}
566          <text fg={theme.textMuted} onMouseUp={() => dialog.clear()}>
567            esc
568          </text>
569        </box>
570        <Show when={props.renderFilter !== false}>
571          <box paddingTop={1}>
572            <input
573              onInput={(e) => {
574                if (props.locked) return
575                batch(() => {
576                  setStore("filter", e)
577                  props.onFilter?.(e)
578                })
579              }}
580              focusedBackgroundColor={theme.backgroundPanel}
581              cursorColor={theme.primary}
582              cursorStyle={tuiConfig.cursor}
583              focusedTextColor={theme.textMuted}
584              ref={(r) => {
585                input = r
586                input.traits = { status: "FILTER" }
587                setTimeout(() => {
588                  if (!input) return
589                  if (input.isDestroyed) return
590                  input.focus()
591                }, 1)
592              }}
593              placeholder={props.placeholder ?? "Search"}
594              placeholderColor={theme.textMuted}
595            />
596          </box>
597        </Show>
598      </box>
599      <box flexGrow={1} flexShrink={1}>
600        <Show
601          when={grouped().length > 0}
602          fallback={
603            props.emptyView ?? (
604              <box paddingLeft={4} paddingRight={4} paddingTop={1}>
605                <text fg={theme.textMuted}>No results found</text>
606              </box>
607            )
608          }
609        >
610          <scrollbox
611            paddingLeft={1}
612            paddingRight={1}
613            scrollbarOptions={{ visible: false }}
614            scrollAcceleration={scrollAcceleration()}
615            ref={(r: ScrollBoxRenderable) => (scroll = r)}
616            maxHeight={height()}
617          >
618            <For each={grouped()}>
619              {([category, options], index) => (
620                <>
621                  <Show when={category}>
622                    <box paddingTop={index() > 0 ? 1 : 0} paddingLeft={3}>
623                      <Show
624                        when={options[0]?.categoryView}
625                        fallback={
626                          <text fg={theme.accent} attributes={TextAttributes.BOLD}>
627                            {category}
628                          </text>
629                        }
630                      >
631                        {options[0]?.categoryView}
632                      </Show>
633                    </box>
634                  </Show>
635                  <For each={options}>
636                    {(option) => {
637                      const active = createMemo(() => !props.locked && isDeepEqual(option.value, selected()?.value))
638                      const current = createMemo(() => isDeepEqual(option.value, props.current))
639                      return (
640                        <box
641                          flexDirection="column"
642                          position="relative"
643                          onMouseMove={() => {
644                            if (props.locked) return
645                            setStore("input", "mouse")
646                            setFocusedAction(undefined)
647                          }}
648                          onMouseUp={() => {
649                            if (props.locked) return
650                            option.onSelect?.(dialog)
651                            props.onSelect?.(option)
652                          }}
653                          onMouseOver={() => {
654                            if (props.locked) return
655                            if (store.input !== "mouse") return
656                            const index = flat().findIndex((x) => isDeepEqual(x.value, option.value))
657                            if (index === -1) return
658                            moveTo(index)
659                          }}
660                          onMouseDown={() => {
661                            if (props.locked) return
662                            const index = flat().findIndex((x) => isDeepEqual(x.value, option.value))
663                            if (index === -1) return
664                            moveTo(index)
665                          }}
666                        >
667                          <box
668                            flexDirection="row"
669                            paddingLeft={current() || option.gutter ? 1 : 3}
670                            paddingRight={3}
671                            gap={1}
672                            backgroundColor={
673                              active()
674                                ? actionFocused()
675                                  ? theme.backgroundElement
676                                  : (option.bg ?? theme.primary)
677                                : RGBA.fromInts(0, 0, 0, 0)
678                            }
679                          >
680                            <Show when={!current() && option.margin}>
681                              <box position="absolute" left={1} flexShrink={0}>
682                                {option.margin}
683                              </box>
684                            </Show>
685                            <Option
686                              title={option.title}
687                              titleView={option.titleView}
688                              footer={flatten() ? (option.category ?? option.footer) : option.footer}
689                              titleWidth={option.titleWidth}
690                              truncateTitle={option.truncateTitle}
691                              description={option.description !== category ? option.description : undefined}
692                              active={active()}
693                              current={current()}
694                              muted={actionFocused()}
695                              gutter={option.gutter}
696                            />
697                          </box>
698                          <For each={option.details}>
699                            {(detail) => (
700                              <box paddingLeft={3} paddingRight={3}>
701                                <text fg={theme.textMuted} wrapMode="none">
702                                  {Locale.truncateMiddle(detail, Math.max(1, Math.min(76, dimensions().width - 12)))}
703                                </text>
704                              </box>
705                            )}
706                          </For>
707                        </box>
708                      )
709                    }}
710                  </For>
711                </>
712              )}
713            </For>
714          </scrollbox>
715        </Show>
716      </box>
717      <Show when={props.footer || visibleActions().length} fallback={<box flexShrink={0} />}>
718        <box paddingRight={2} paddingLeft={4} flexDirection="row" justifyContent="space-between" flexShrink={0}>
719          <box flexDirection="row" gap={2}>
720            {props.footer}
721            <For each={left()}>{(item) => <FooterAction item={item} />}</For>
722          </box>
723          <box flexDirection="row" gap={2}>
724            <For each={right()}>{(item) => <FooterAction item={item} />}</For>
725          </box>
726        </box>
727      </Show>
728    </box>
729  )
730}
731 
732function Option(props: {
733  title: string
734  titleView?: JSX.Element
735  description?: string
736  active?: boolean
737  current?: boolean
738  muted?: boolean
739  footer?: JSX.Element | string
740  titleWidth?: number
741  truncateTitle?: boolean | "left"
742  gutter?: () => JSX.Element
743  onMouseOver?: () => void
744}) {
745  const { theme } = useTheme()
746  const fg = selectedForeground(theme)
747  const text = createMemo(() => {
748    if (props.active && !props.muted) return fg
749    if (props.muted && (props.active || props.current)) return theme.textMuted
750    if (props.current) return theme.primary
751    return theme.text
752  })
753 
754  return (
755    <>
756      <Show when={props.current && !props.gutter}>
757        <text flexShrink={0} fg={text()} marginRight={0}>
758          ●
759        </text>
760      </Show>
761      <Show when={props.gutter}>
762        <box flexShrink={0} marginRight={0}>
763          {props.gutter?.()}
764        </box>
765      </Show>
766      <text
767        flexGrow={1}
768        fg={text()}
769        attributes={props.active && !props.muted ? TextAttributes.BOLD : undefined}
770        overflow="hidden"
771        wrapMode="none"
772        paddingLeft={3}
773      >
774        {props.titleView ??
775          (props.truncateTitle === false
776            ? props.title
777            : props.truncateTitle === "left"
778              ? Locale.truncateLeft(props.title, props.titleWidth ?? 61)
779              : Locale.truncate(props.title, props.titleWidth ?? 61))}
780        <Show when={props.description}>
781          <span style={{ fg: props.active && !props.muted ? fg : theme.textMuted }}> {props.description}</span>
782        </Show>
783      </text>
784      <Show when={props.footer}>
785        <box flexShrink={0}>
786          <text fg={props.active && !props.muted ? fg : theme.textMuted}>{props.footer}</text>
787        </box>
788      </Show>
789    </>
790  )
791}
792