*]:col-start-1 [&>*]:row-start-1", disabled && "cursor-not-allowed opacity-50", @@ -995,7 +1001,7 @@ const ChatMessageInput = ({ {autoFocus && } createSkillMenuItem("workspace", skill), ); +// Provides the composer-box element the menu anchors to, since the +// menu is pinned above its anchor at the anchor's width. +const MenuStoryHarness = (args: ComponentProps) => { + const [anchor, setAnchor] = useState(null); + return ( + <> +

+ Mock composer +

+ + + ); +}; + const meta: Meta = { title: "components/ChatMessageInput/SkillsTriggerMenu", component: SkillsTriggerMenu, args: { open: true, - anchorRect: { top: 120, left: 80, height: 20 }, + anchor: null, query: "", personalSkills: mockPersonalSkillItems, workspaceSkills: [], @@ -50,12 +67,10 @@ const meta: Meta = { onSelect: fn(), onClose: fn(), }, + render: (args) => , decorators: [ (Story) => ( -

- The menu is anchored to a mock caret position. -

), @@ -161,13 +176,16 @@ const SelectionScrollHarness = ( args: ComponentProps, ) => { const [selectedIndex, setSelectedIndex] = useState(0); + const [anchor, setAnchor] = useState(null); return ( <> +

@@ -241,16 +259,25 @@ export const SelectsCommandByClick: Story = { }, }; -// The menu opens above its anchor on desktop, matching the mobile -// pinned-above-composer placement (CODAGT-956). -export const OpensAboveAnchor: Story = { - args: { - anchorRect: { top: 400, left: 80, height: 20 }, - }, +// The menu opens above its anchor at the anchor's exact width, +// matching the mobile pinned-above-composer placement (CODAGT-956). +export const OpensAboveAnchorAtAnchorWidth: Story = { play: async () => { const item = await findVisibleText("/reviewer"); const content = item.closest("[data-side]"); expect(content).not.toBeNull(); expect(content).toHaveAttribute("data-side", "top"); + const anchorBox = (await findVisibleText("Mock composer")).closest("div"); + expect(anchorBox).not.toBeNull(); + if (!anchorBox || !(content instanceof HTMLElement)) return; + // The entrance animation scales the content from 95%, so wait + // for the settled geometry. + await waitFor(() => { + const anchorRect = anchorBox.getBoundingClientRect(); + const contentRect = content.getBoundingClientRect(); + expect(contentRect.width).toBeCloseTo(anchorRect.width, 0); + expect(contentRect.left).toBeCloseTo(anchorRect.left, 0); + expect(contentRect.bottom).toBeLessThanOrEqual(anchorRect.top); + }); }, }; diff --git a/site/src/pages/AgentsPage/components/ChatMessageInput/SkillsTriggerMenu.tsx b/site/src/pages/AgentsPage/components/ChatMessageInput/SkillsTriggerMenu.tsx index d2ee81c000d..317d54b23d9 100644 --- a/site/src/pages/AgentsPage/components/ChatMessageInput/SkillsTriggerMenu.tsx +++ b/site/src/pages/AgentsPage/components/ChatMessageInput/SkillsTriggerMenu.tsx @@ -1,4 +1,4 @@ -import { useLayoutEffect, useRef, useState } from "react"; +import { useLayoutEffect, useRef } from "react"; import { Command, CommandEmpty, @@ -13,15 +13,6 @@ import { } from "#/components/Popover/Popover"; import { cn } from "#/utils/cn"; -// Prevent zero-height anchors when the browser returns a degenerate caret rect. -const MIN_ANCHOR_HEIGHT_PX = 16; - -export type CaretAnchorRect = { - top: number; - left: number; - height: number; -}; - type SkillSource = "personal" | "workspace"; export type SkillMetadata = { @@ -67,7 +58,8 @@ export const createSkillMenuItem = ( type SkillsTriggerMenuProps = { open: boolean; - anchorRect: CaretAnchorRect | null; + // The composer box the menu is pinned above and sized to match. + anchor: HTMLElement | null; query: string; commands?: readonly SkillMenuItem[]; personalSkills: readonly SkillMenuItem[]; @@ -160,7 +152,7 @@ const SkillCommandItem = ({ export const SkillsTriggerMenu = ({ open, - anchorRect, + anchor, query, commands = [], personalSkills, @@ -186,15 +178,7 @@ export const SkillsTriggerMenu = ({ ? "Loading workspace skills..." : undefined, ].filter((item) => item !== undefined); - const shouldRender = open && anchorRect; - // Radix keeps closing content mounted through its exit animation. - // Unmounting the anchor then would reposition the closing menu to - // the viewport origin, so keep it at the last known caret rect. - const [lastAnchorRect, setLastAnchorRect] = useState(anchorRect); - if (anchorRect && anchorRect !== lastAnchorRect) { - setLastAnchorRect(anchorRect); - } - const renderedAnchorRect = anchorRect ?? lastAnchorRect; + const shouldRender = open && anchor !== null; const shouldShowEmpty = allSkills.length === 0 && statusItems.length === 0; const selectedValue = selectedIndex >= 0 ? String(selectedIndex) : ""; @@ -239,25 +223,12 @@ export const SkillsTriggerMenu = ({ } }} > - {renderedAnchorRect && ( - - - )} + {anchor && } event.preventDefault()} onOpenAutoFocus={(event) => event.preventDefault()} onCloseAutoFocus={(event) => event.preventDefault()} diff --git a/site/src/pages/AgentsPage/components/ChatMessageInput/SkillsTriggerPlugin.tsx b/site/src/pages/AgentsPage/components/ChatMessageInput/SkillsTriggerPlugin.tsx index c8646fe4ac9..1f796dea3c5 100644 --- a/site/src/pages/AgentsPage/components/ChatMessageInput/SkillsTriggerPlugin.tsx +++ b/site/src/pages/AgentsPage/components/ChatMessageInput/SkillsTriggerPlugin.tsx @@ -9,18 +9,16 @@ import { KEY_ENTER_COMMAND, KEY_ESCAPE_COMMAND, KEY_TAB_COMMAND, - type LexicalEditor, type NodeKey, } from "lexical"; import { useEffect, useEffectEvent, useLayoutEffect, useRef } from "react"; import { parsePersonalSkillTrigger } from "../../utils/personalSkills"; -import type { CaretAnchorRect, SkillMenuItem } from "./SkillsTriggerMenu"; +import type { SkillMenuItem } from "./SkillsTriggerMenu"; export type ActiveSkillsTrigger = { nodeKey: NodeKey; slashOffset: number; query: string; - anchorRect: CaretAnchorRect | null; }; type DismissedSkillsTrigger = Pick< @@ -38,68 +36,6 @@ type SkillsTriggerPluginProps = { onSkillSelect: (skill: SkillMenuItem) => void; }; -const currentCaretRect = (): CaretAnchorRect | null => { - const selection = getSelection(); - if (!selection || selection.rangeCount === 0) { - return null; - } - - const range = selection.getRangeAt(0); - let rect = range.getBoundingClientRect(); - if ((rect.width === 0 && rect.height === 0) || Number.isNaN(rect.top)) { - const fallbackRange = range.cloneRange(); - if (fallbackRange.startOffset > 0) { - fallbackRange.setStart( - fallbackRange.startContainer, - fallbackRange.startOffset - 1, - ); - } - rect = fallbackRange.getBoundingClientRect(); - } - - if (Number.isNaN(rect.top)) { - return null; - } - - return { - top: rect.top, - left: rect.left, - height: rect.height, - }; -}; - -// Anchors the menu to the slash character itself so it stays put -// while the user types the query, instead of following the caret. -const slashAnchorRect = ( - editor: LexicalEditor, - trigger: Omit, -): CaretAnchorRect | null => { - const element = editor.getElementByKey(trigger.nodeKey); - const textNode = element?.firstChild; - if (!textNode || textNode.nodeType !== Node.TEXT_NODE) { - return null; - } - - const textLength = textNode.textContent?.length ?? 0; - if (trigger.slashOffset >= textLength) { - return null; - } - - const range = document.createRange(); - range.setStart(textNode, trigger.slashOffset); - range.setEnd(textNode, trigger.slashOffset + 1); - const rect = range.getBoundingClientRect(); - if ((rect.width === 0 && rect.height === 0) || Number.isNaN(rect.top)) { - return null; - } - - return { - top: rect.top, - left: rect.left, - height: rect.height, - }; -}; - const isSameTrigger = ( trigger: DismissedSkillsTrigger, dismissedTrigger: DismissedSkillsTrigger | null, @@ -110,10 +46,7 @@ const isSameTrigger = ( ); }; -const activeTriggerFromSelection = (): Omit< - ActiveSkillsTrigger, - "anchorRect" -> | null => { +const activeTriggerFromSelection = (): ActiveSkillsTrigger | null => { const selection = $getSelection(); if (!$isRangeSelection(selection) || !selection.isCollapsed()) { return null; @@ -181,30 +114,13 @@ export const SkillsTriggerPlugin = ({ return; } - onTriggerChange({ - ...trigger, - anchorRect: slashAnchorRect(editor, trigger) ?? currentCaretRect(), - }); + onTriggerChange(trigger); }); useEffect(() => { return editor.registerUpdateListener(() => refreshTrigger()); }, [editor]); - useEffect(() => { - return editor.registerRootListener((rootElement, previousRootElement) => { - previousRootElement?.removeEventListener("scroll", refreshTrigger); - rootElement?.addEventListener("scroll", refreshTrigger, { - passive: true, - }); - }); - }, [editor]); - - useEffect(() => { - addEventListener("resize", refreshTrigger); - return () => removeEventListener("resize", refreshTrigger); - }, []); - const moveMenuHighlight = useEffectEvent( (event: KeyboardEvent, delta: number) => { if (!open) {