*]:col-start-1 [&>*]:row-start-1", disabled && "cursor-not-allowed opacity-50", @@ -980,6 +986,12 @@ const ChatMessageInput = ({ } 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 ( <> +

@@ -240,3 +258,26 @@ export const SelectsCommandByClick: Story = { expect(args.onSelect).toHaveBeenCalledWith(compactCommandItem); }, }; + +// 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 d0f03d841ec..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 9d314789426..1f796dea3c5 100644 --- a/site/src/pages/AgentsPage/components/ChatMessageInput/SkillsTriggerPlugin.tsx +++ b/site/src/pages/AgentsPage/components/ChatMessageInput/SkillsTriggerPlugin.tsx @@ -13,13 +13,12 @@ import { } 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< @@ -30,42 +29,13 @@ type DismissedSkillsTrigger = Pick< type SkillsTriggerPluginProps = { open: boolean; skills: readonly SkillMenuItem[]; + skillsLoading: boolean; selectedIndex: number; onSelectedIndexChange: (index: number) => void; onTriggerChange: (trigger: ActiveSkillsTrigger | null) => void; 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, - }; -}; - const isSameTrigger = ( trigger: DismissedSkillsTrigger, dismissedTrigger: DismissedSkillsTrigger | null, @@ -76,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; @@ -112,6 +79,7 @@ const activeTriggerFromSelection = (): Omit< export const SkillsTriggerPlugin = ({ open, skills, + skillsLoading, selectedIndex, onSelectedIndexChange, onTriggerChange, @@ -146,30 +114,13 @@ export const SkillsTriggerPlugin = ({ return; } - onTriggerChange({ - ...trigger, - anchorRect: 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) { @@ -193,11 +144,25 @@ export const SkillsTriggerPlugin = ({ if (!open) { return false; } - event?.preventDefault(); const skill = selectedIndex >= 0 ? skills[selectedIndex] : undefined; - if (skill) { - onSkillSelect(skill); + if (!skill) { + // A still-loading source may yet produce matches, so keep + // consuming Enter until every source resolves. + if (skillsLoading) { + event?.preventDefault(); + return true; + } + // Nothing is selectable (e.g. the trailing token is a filesystem + // path, not a skill): dismiss the menu and let the same keypress + // fall through to the submit handler. + dismissedTriggerRef.current = editor + .getEditorState() + .read(() => activeTriggerFromSelection()); + onTriggerChange(null); + return false; } + event?.preventDefault(); + onSkillSelect(skill); return true; });