From 8815d27e1d85a2a07db0a0d2e5804b282b428c59 Mon Sep 17 00:00:00 2001
From: Naiyuan Qing <145280634+NevilleQingNY@users.noreply.github.com>
Date: Wed, 1 Apr 2026 19:35:23 +0800
Subject: [PATCH] fix(web): use ActorAvatar in mention picker and fix keyboard
 scroll

- Replace inline initials/Bot icon with ActorAvatar component so
  mention suggestions show real profile pictures consistently
- Add scrollIntoView on keyboard navigation so the selected item
  stays visible when the list overflows

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../components/common/mention-suggestion.tsx  | 41 +++++++++++--------
 1 file changed, 23 insertions(+), 18 deletions(-)

diff --git a/apps/web/components/common/mention-suggestion.tsx b/apps/web/components/common/mention-suggestion.tsx
index b00b4c1d..b0092f78 100644
--- a/apps/web/components/common/mention-suggestion.tsx
+++ b/apps/web/components/common/mention-suggestion.tsx
@@ -2,15 +2,18 @@
 
 import {
   forwardRef,
+  useCallback,
   useEffect,
   useImperativeHandle,
+  useRef,
   useState,
 } from "react";
-import { Bot, Hash } from "lucide-react";
+import { Hash } from "lucide-react";
 import { ReactRenderer } from "@tiptap/react";
 import { computePosition, offset, flip, shift } from "@floating-ui/dom";
 import { useWorkspaceStore } from "@/features/workspace";
 import { useIssueStore } from "@/features/issues";
+import { ActorAvatar } from "@/components/common/actor-avatar";
 import type { SuggestionOptions, SuggestionProps } from "@tiptap/suggestion";
 
 // ---------------------------------------------------------------------------
@@ -41,15 +44,23 @@ export interface MentionListRef {
 const MentionList = forwardRef<MentionListRef, MentionListProps>(
   function MentionList({ items, command }, ref) {
     const [selectedIndex, setSelectedIndex] = useState(0);
+    const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);
 
     useEffect(() => {
       setSelectedIndex(0);
     }, [items]);
 
-    const selectItem = (index: number) => {
-      const item = items[index];
-      if (item) command(item);
-    };
+    useEffect(() => {
+      itemRefs.current[selectedIndex]?.scrollIntoView({ block: "nearest" });
+    }, [selectedIndex]);
+
+    const selectItem = useCallback(
+      (index: number) => {
+        const item = items[index];
+        if (item) command(item);
+      },
+      [items, command],
+    );
 
     useImperativeHandle(ref, () => ({
       onKeyDown: ({ event }) => {
@@ -81,29 +92,23 @@ const MentionList = forwardRef<MentionListRef, MentionListProps>(
       <div className="rounded-md border bg-popover py-1 shadow-md min-w-[180px] max-h-[240px] overflow-y-auto">
         {items.map((item, index) => (
           <button
+            ref={(el) => { itemRefs.current[index] = el; }}
             key={`${item.type}-${item.id}`}
             className={`flex w-full items-center gap-2 px-2.5 py-1.5 text-left text-sm transition-colors ${
               index === selectedIndex ? "bg-accent" : "hover:bg-accent/50"
             }`}
             onClick={() => selectItem(index)}
           >
-            {item.type === "agent" ? (
-              <span className="inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-info/10 text-info">
-                <Bot className="h-3 w-3" />
-              </span>
-            ) : item.type === "issue" ? (
+            {item.type === "issue" ? (
               <span className="inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary">
                 <Hash className="h-3 w-3" />
               </span>
             ) : (
-              <span className="inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground text-[9px] font-medium">
-                {item.label
-                  .split(" ")
-                  .map((w) => w[0])
-                  .join("")
-                  .toUpperCase()
-                  .slice(0, 2)}
-              </span>
+              <ActorAvatar
+                actorType={item.type}
+                actorId={item.id}
+                size={20}
+              />
             )}
             <div className="flex flex-col min-w-0">
               <span className="truncate">{item.label}</span>