diff --git a/packages/app/src/components/prompt-input.tsx b/packages/app/src/components/prompt-input.tsx index 1a1cba67827..c7b888c4e82 100644 --- a/packages/app/src/components/prompt-input.tsx +++ b/packages/app/src/components/prompt-input.tsx @@ -106,6 +106,7 @@ export const PromptInput: Component = (props) => { let editorRef!: HTMLDivElement let fileInputRef!: HTMLInputElement let scrollRef!: HTMLDivElement + let slashPopoverRef!: HTMLDivElement const scrollCursorIntoView = () => { const container = scrollRef @@ -502,6 +503,17 @@ export const PromptInput: Component = (props) => { ), ) +// Auto-scroll active command into view when navigating with keyboard + createEffect(() => { + const activeId = slashActive() + if (!activeId || !slashPopoverRef) return + + requestAnimationFrame(() => { + const element = slashPopoverRef.querySelector(`[data-slash-id="${activeId}"]`) + element?.scrollIntoView({ block: "nearest", behavior: "smooth" }) + }) + }) + createEffect( on( () => prompt.current(), @@ -1258,6 +1270,9 @@ export const PromptInput: Component = (props) => {
{ + if (store.popover === "slash") slashPopoverRef = el + }} class="absolute inset-x-0 -top-3 -translate-y-full origin-bottom-left max-h-80 min-h-10 overflow-auto no-scrollbar flex flex-col p-2 rounded-md border border-border-base bg-surface-raised-stronger-non-alpha shadow-md" @@ -1316,6 +1331,7 @@ export const PromptInput: Component = (props) => { {(cmd) => (