fix: 引用附件菜单多层滚动容器的问题

frontend/src/components/ui/scroll-area.tsx

@@ -8,8 +8,11 @@ import { cn } from "@/lib/utils";
 function ScrollArea({
   className,
   children,
+  hideScrollbar = true,
   ...props
-}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root> & {
+  hideScrollbar?: boolean;
+}) {
   return (
     <ScrollAreaPrimitive.Root
       data-slot="scroll-area"
@@ -22,8 +25,8 @@ function ScrollArea({
       >
         {children}
       </ScrollAreaPrimitive.Viewport>
-      <ScrollBar />
+      <ScrollBar hidden={hideScrollbar} />
-      <ScrollAreaPrimitive.Corner />
+      <ScrollAreaPrimitive.Corner hidden={hideScrollbar} />
     </ScrollAreaPrimitive.Root>
   );
 }

frontend/src/components/workspace/input-box.tsx

@@ -96,6 +96,7 @@ import { ModeHoverGuide } from "./mode-hover-guide";
 import { Tooltip } from "./tooltip";
 import { useThread } from "./messages/context";
 import type { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
+import { ScrollArea } from "../ui/scroll-area";
 
 const MAX_REFERENCES_PER_MESSAGE = 10;
 
@@ -688,7 +689,7 @@ export function InputBox({
               align="start"
               side="top"
               sideOffset={8}
-              className="w-[min(32rem,var(--radix-dropdown-menu-trigger-width)+28rem)] max-h-[400px] overflow-y-visible p-[20px]"
+              className="w-[min(32rem,var(--radix-dropdown-menu-trigger-width)+28rem)] max-h-[400px] overflow-y-hidden p-[20px]"
               data-testid="mention-candidate-panel"
               onCloseAutoFocus={(event) => {
                 event.preventDefault();
@@ -699,8 +700,9 @@ export function InputBox({
                 {t.inputBox.addReference}
               </DropdownMenuLabel>
               <DropdownMenuSeparator className="mx-0 mt-[20px] mb-0" />
-              <DropdownMenuGroup className="flex pt-[20px] px-0 max-h-[480px] flex-col gap-[10px] overflow-y-auto">
+              <DropdownMenuGroup className="flex pt-[20px] px-0 max-h-[480px] flex-col gap-[10px]">
-                {filteredMentionCandidates.slice(0, 20).map((candidate, index) => {
+                <ScrollArea className="h-[480px]" data-state="hidden">
+                {filteredMentionCandidates.map((candidate, index) => {
                   const detail = [candidate.typeLabel, candidate.pathTail]
                     .filter(Boolean)
                     .join(" · ");
@@ -744,6 +746,7 @@ export function InputBox({
                   </DropdownMenuItem>
                 );
                 })}
+                </ScrollArea>
               </DropdownMenuGroup>
             </DropdownMenuContent>
           </DropdownMenu>

frontend/src/styles/globals.css

@@ -398,13 +398,14 @@
 
 /* Hide scrollbar but keep scroll behavior */
 * {
-  scrollbar-width: none; /* Firefox */
+  scrollbar-width: none;
-  -ms-overflow-style: none; /* IE and Edge */
+  -ms-overflow-style: none;
 }
+
 /* Chrome, Safari, Opera */
-/* *::-webkit-scrollbar {
+*::-webkit-scrollbar {
   display: none;
-} */
+}
 
 :root {
   --container-width-xs: calc(var(--spacing) * 72);