diff --git a/packages/tui/src/feature-plugins/prompt/btw.tsx b/packages/tui/src/feature-plugins/prompt/btw.tsx index f7a12d7b91e..c6cf228f2cb 100644 --- a/packages/tui/src/feature-plugins/prompt/btw.tsx +++ b/packages/tui/src/feature-plugins/prompt/btw.tsx @@ -1,7 +1,7 @@ import { Plugin } from "@opencode/plugin/tui" import { TextAttributes, type ScrollBoxRenderable } from "@opentui/core" -import { useKeyboard } from "@opentui/solid" -import { createSignal, Show } from "solid-js" +import { useKeyboard, useTerminalDimensions } from "@opentui/solid" +import { createMemo, createSignal, Show } from "solid-js" import { Spinner } from "../../component/spinner" import { useConfig } from "../../config" import { useClipboard } from "../../context/clipboard" @@ -97,6 +97,8 @@ export function Answer(props: { const overlay = useTheme() const syntax = useThemes().currentSyntax const config = useConfig().data + const dimensions = useTerminalDimensions() + const maxHeight = createMemo(() => Math.max(8, Math.floor(dimensions().height * 0.6))) const [copied, setCopied] = createSignal(false) let scroll: ScrollBoxRenderable | undefined @@ -114,34 +116,31 @@ export function Answer(props: { useKeyboard((event) => { if (!scroll) return - if (event.name === "up") return scroll.scrollBy(-1) - if (event.name === "down") return scroll.scrollBy(1) - if (event.name === "pageup") return scroll.scrollBy(-20) - if (event.name === "pagedown") return scroll.scrollBy(20) + if (event.name === "up" || event.name === "k") return scroll.scrollBy(-1) + if (event.name === "down" || event.name === "j") return scroll.scrollBy(1) + if (event.name === "pageup") return scroll.scrollBy(-maxHeight()) + if (event.name === "pagedown") return scroll.scrollBy(maxHeight()) if (event.name === "home") return scroll.scrollTo(0) if (event.name === "end") return scroll.scrollTo(scroll.scrollHeight) }) return ( - - - - - /btw - - dialog.clear()}> - esc - - - - - {props.question} - - + + + + /btw + + + {props.question} + + dialog.clear()}> + esc + (scroll = element)} - maxHeight={20} + maxHeight={maxHeight()} + contentOptions={{ minHeight: 0 }} backgroundColor={overlay.background.raised.high} scrollbarOptions={{ visible: false }} scrollAcceleration={getScrollAcceleration(config)} @@ -159,14 +158,14 @@ export function Answer(props: { /> - + {copied() ? "✓ copied" : "c"} {copied() ? "" : " copy"} - ↑/↓ scroll + j/k ↑/↓ scroll )