From 0d9046533961d0b3845280ac5c6a4c5d6c324e04 Mon Sep 17 00:00:00 2001
From: soldier <1224954468@qq.com>
Date: Tue, 16 Jun 2026 11:00:32 +0800
Subject: [PATCH] feat: enhance MentionMenu with active item scrolling
 functionality

---
 .../(user)/canvas/components/canvas-config-composer.tsx    | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/web/src/app/(user)/canvas/components/canvas-config-composer.tsx b/web/src/app/(user)/canvas/components/canvas-config-composer.tsx
index eb7235f..1fbde49 100644
--- a/web/src/app/(user)/canvas/components/canvas-config-composer.tsx
+++ b/web/src/app/(user)/canvas/components/canvas-config-composer.tsx
@@ -183,6 +183,12 @@ export function CanvasConfigComposer({ value, inputs, onChange, onClose }: Canva
 
 function MentionMenu({ inputs, allInputs, activeIndex, theme, onSelect }: { inputs: NodeGenerationInput[]; allInputs: NodeGenerationInput[]; activeIndex: number; theme: (typeof canvasThemes)[keyof typeof canvasThemes]; onSelect: (input: NodeGenerationInput) => void }) {
     const selectedRef = useRef(false);
+    const activeItemRef = useRef<HTMLButtonElement | null>(null);
+
+    useEffect(() => {
+        activeItemRef.current?.scrollIntoView({ block: "nearest" });
+    }, [activeIndex, inputs]);
+
     const selectInput = (input: NodeGenerationInput) => {
         if (selectedRef.current) return;
         selectedRef.current = true;
@@ -194,6 +200,7 @@ function MentionMenu({ inputs, allInputs, activeIndex, theme, onSelect }: { inpu
             {inputs.map((input, index) => (
                 <button
                     key={input.nodeId}
+                    ref={index === activeIndex ? activeItemRef : undefined}
                     type="button"
                     className="flex w-full min-w-0 items-center gap-2 rounded-lg px-2 py-1.5 text-left text-xs transition"
                     style={{ background: index === activeIndex ? theme.toolbar.activeBg : "transparent", color: index === activeIndex ? theme.toolbar.activeText : theme.node.text }}