@gram-ai/elements 1.34.0 → 1.35.0

package/src/compat-shims.ts

@@ -39,6 +39,7 @@ function createUseSyncExternalStoreShim(R: ReactLike) {
       inst.value = value;
       inst.getSnapshot = getSnapshot;
       if (snapshotChanged(inst)) forceUpdate({ inst });
+      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [subscribe, value, getSnapshot]);
 
     R.useEffect(() => {
@@ -46,6 +47,7 @@ function createUseSyncExternalStoreShim(R: ReactLike) {
       return subscribe(() => {
         if (snapshotChanged(inst)) forceUpdate({ inst });
       });
+      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [subscribe]);
 
     return value;
@@ -61,14 +63,26 @@ function createUseIdShim(R: ReactLike) {
   };
 }
 
+export interface ReactShims {
+  useSyncExternalStore: <T>(
+    subscribe: (cb: () => void) => () => void,
+    getSnapshot: () => T,
+  ) => T;
+  useId: () => string;
+  useInsertionEffect: typeof import("react").useLayoutEffect;
+  startTransition: (cb: () => void) => void;
+  useTransition: () => [boolean, (cb: () => void) => void];
+  useDeferredValue: <T>(value: T) => T;
+}
+
 /** Build polyfills for a React instance. Native APIs take precedence via ??. */
-export function createShims(R: ReactLike) {
+export function createShims(R: ReactLike): ReactShims {
   return {
     useSyncExternalStore:
       R.useSyncExternalStore ?? createUseSyncExternalStoreShim(R),
     useId: R.useId ?? createUseIdShim(R),
     useInsertionEffect: R.useInsertionEffect ?? R.useLayoutEffect,
-    startTransition: R.startTransition ?? ((cb: () => void) => cb()),
+    startTransition: R.startTransition ?? ((cb: () => void): void => cb()),
     useTransition:
       R.useTransition ??
       ((): [boolean, (cb: () => void) => void] => [false, (cb) => cb()]),

package/src/components/Chat/index.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import * as React from "react";
 import { useElements } from "@/hooks/useElements";
 import { AssistantModal } from "../assistant-ui/assistant-modal";
 import { AssistantSidecar } from "../assistant-ui/assistant-sidecar";
@@ -11,7 +12,7 @@ interface ChatProps {
   className?: string;
 }
 
-export const Chat = ({ className }: ChatProps) => {
+export const Chat = ({ className }: ChatProps): React.JSX.Element => {
   const { config } = useElements();
 
   switch (config.variant) {
@@ -34,6 +35,8 @@ export const Chat = ({ className }: ChatProps) => {
 
     // If no variant is provided then fallback to the modal
     // Modal has its own internal ErrorBoundary around Thread
+    case "widget":
+    case undefined:
     default:
       return (
         <ShadowRoot>

package/src/components/Chat/stories/FrontendTools.stories.tsx

@@ -29,7 +29,7 @@ const FetchTool = defineFrontendTool<{ url: string }, string>(
         const text = await response.text();
         return text;
       } catch (error) {
-        return `Error fetching ${url}: ${error instanceof Error ? error.message : "Unknown error"}. Note: URL must support CORS for browser requests.`;
+        return `Error fetching ${String(url)}: ${error instanceof Error ? error.message : "Unknown error"}. Note: URL must support CORS for browser requests.`;
       }
     },
   },

package/src/components/Chat/stories/ToolApproval.stories.tsx

@@ -93,8 +93,8 @@ const deleteFile = defineFrontendTool<{ fileId: string }, string>(
       fileId: z.string().describe("The ID of the file to delete"),
     }),
     execute: async ({ fileId }) => {
-      alert(`File ${fileId} deleted`);
-      return `File ${fileId} deleted`;
+      alert(`File ${String(fileId)} deleted`);
+      return `File ${String(fileId)} deleted`;
     },
   },
   "deleteFile",

package/src/components/Chat/stories/Tools.stories.tsx

@@ -139,7 +139,9 @@ const ProductCardComponent = ({ result }: ToolCallMessagePartProps) => {
               ${product.price?.toFixed(2)}
             </span>
             <button
-              onClick={handleAddToCart}
+              onClick={() => {
+                void handleAddToCart();
+              }}
               disabled={
                 isLoading || addedToCart || !canAddToCart || !product.inStock
               }
@@ -242,8 +244,10 @@ const ApproveRequestTool = defineFrontendTool<{ id: number }, string>(
     }),
     execute: async ({ id }) => {
       // Simulate API call
-      await new Promise((resolve) => setTimeout(resolve, 500));
-      return `Request #${id} has been approved successfully.`;
+      await new Promise((resolve) => {
+        setTimeout(resolve, 500);
+      });
+      return `Request #${String(id)} has been approved successfully.`;
     },
   },
   "approve_request",
@@ -260,8 +264,12 @@ const RejectRequestTool = defineFrontendTool<
       reason: z.string().optional().describe("Reason for rejection"),
     }),
     execute: async ({ id, reason }) => {
-      await new Promise((resolve) => setTimeout(resolve, 500));
-      return `Request #${id} has been rejected.${reason ? ` Reason: ${reason}` : ""}`;
+      await new Promise((resolve) => {
+        setTimeout(resolve, 500);
+      });
+      return `Request #${String(id)} has been rejected.${
+        reason ? ` Reason: ${JSON.stringify(reason)}` : ""
+      }`;
     },
   },
   "reject_request",

package/src/components/ChatHistory.tsx

@@ -7,7 +7,9 @@ interface ChatHistoryProps {
   className?: string;
 }
 
-export const ChatHistory = ({ className }: ChatHistoryProps) => {
+export const ChatHistory = ({
+  className,
+}: ChatHistoryProps): React.JSX.Element => {
   return (
     <ShadowRoot hostStyle={{ height: "inherit", width: "inherit" }}>
       <ThreadList className={className} />

package/src/components/FrontendTools/index.tsx

@@ -5,7 +5,7 @@ export function FrontendTools({
   tools: frontendTools,
 }: {
   tools: FrontendTools;
-}) {
+}): React.JSX.Element {
   return (
     <>
       {Object.entries(frontendTools).map(([, tool]) =>

package/src/components/MessageContent.tsx

@@ -26,6 +26,7 @@ const STUB_CONTEXT: ElementsContextType = {
   setIsOpen: () => {},
   plugins: recommended,
   mcpTools: undefined,
+  mcpToolsLoading: false,
 };
 
 export interface MessageContentProps {

package/src/components/Replay.stories.tsx

@@ -1,10 +1,9 @@
-import type { StoryFn } from "@storybook/react-vite";
+import type { Meta, StoryFn } from "@storybook/react-vite";
 import { Chat } from "@/components/Chat";
 import { Replay } from "@/components/Replay";
 import type { Cassette } from "@/lib/cassette";
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const meta: any = {
+const meta: Meta<typeof Replay> = {
   title: "Misc/Replay",
   component: Replay,
   parameters: {

package/src/components/Replay.tsx

@@ -63,17 +63,20 @@ export const Replay = ({
   userMessageDelay,
   assistantStartDelay,
   onComplete,
-}: ReplayProps) => {
-  const replayOptions: ReplayOptions = {
-    typingSpeed,
-    userMessageDelay,
-    assistantStartDelay,
-    onComplete,
-  };
+}: ReplayProps): React.JSX.Element => {
+  const replayOptions = useMemo<ReplayOptions>(
+    () => ({
+      typingSpeed,
+      userMessageDelay,
+      assistantStartDelay,
+      onComplete,
+    }),
+    [typingSpeed, userMessageDelay, assistantStartDelay, onComplete],
+  );
 
   const transport = useMemo(
     () => createReplayTransport(cassette, replayOptions),
-    [cassette, typingSpeed, userMessageDelay, assistantStartDelay, onComplete],
+    [cassette, replayOptions],
   );
 
   const runtime = useChatRuntime({ transport });
@@ -108,6 +111,7 @@ export const Replay = ({
       setIsOpen: () => {},
       plugins,
       mcpTools: undefined,
+      mcpToolsLoading: false,
     }),
     [config, plugins],
   );
@@ -148,7 +152,9 @@ export const Replay = ({
 // ---------------------------------------------------------------------------
 
 function sleep(ms: number): Promise<void> {
-  return new Promise((resolve) => setTimeout(resolve, ms));
+  return new Promise((resolve) => {
+    setTimeout(resolve, ms);
+  });
 }
 
 /**
@@ -238,11 +244,12 @@ const ReplayController = ({ cassette, options }: ReplayControllerProps) => {
       options.onComplete?.();
     };
 
-    runReplay();
+    void runReplay();
 
     return () => {
       cancelled = true;
     };
+    // oxlint-disable-next-line react-hooks/exhaustive-deps -- run-once driver, see hasStarted ref
   }, []);
 
   return null;

package/src/components/ShadowRoot.tsx

@@ -26,7 +26,7 @@ export const ShadowRoot = ({
   children,
   hostClassName,
   hostStyle,
-}: ShadowRootProps) => {
+}: ShadowRootProps): React.JSX.Element => {
   const hostRef = useRef<HTMLDivElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
   const [shadowRoot, setShadowRoot] = useState<ShadowRoot | null>(null);
@@ -66,7 +66,7 @@ export const ShadowRoot = ({
     styleElement.setAttribute("data-gram-elements", "true");
     styleElement.textContent = elementsStyles;
     shadowRoot.prepend(styleElement);
-  }, [shadowRoot, elementsStyles]);
+  }, [shadowRoot]);
 
   return (
     <div

package/src/components/ShareButton/index.tsx

@@ -80,7 +80,7 @@ export function ShareButton({
   size = "sm",
   className,
   children,
-}: ShareButtonProps) {
+}: ShareButtonProps): React.JSX.Element {
   const { threadId } = useThreadId();
 
   const handleShare = useCallback(async () => {
@@ -118,7 +118,9 @@ export function ShareButton({
         <Button
           variant={variant}
           size={size}
-          onClick={handleShare}
+          onClick={() => {
+            void handleShare();
+          }}
           disabled={!threadId}
           className={cn("aui-share-button", className)}
           aria-label="Share chat"

package/src/components/assistant-ui/assistant-modal.tsx

@@ -36,9 +36,9 @@ const LAYOUT_TRANSITION = {
 } as const;
 
 type Dimensions = {
-  width?: string | number | `${number}%`;
-  height?: string | number | `${number}%`;
-  maxHeight?: string | number | `${number}%`;
+  width?: string | number;
+  height?: string | number;
+  maxHeight?: string | number;
 };
 
 interface AssistantModalProps {
@@ -277,6 +277,8 @@ function positionClassname(
       return "left-4 top-4";
     case "bottom-right":
       return "right-4 bottom-4";
+    case undefined:
+      return "right-4 bottom-4";
     default:
       assertNever(position);
   }

package/src/components/assistant-ui/attachment.tsx

@@ -140,7 +140,7 @@ const AttachmentUI: FC = () => {
         return "File";
       default: {
         const _exhaustiveCheck: never = type;
-        throw new Error(`Unknown attachment type: ${_exhaustiveCheck}`);
+        throw new Error(`Unknown attachment type: ${String(_exhaustiveCheck)}`);
       }
     }
   });

package/src/components/assistant-ui/error-boundary.tsx

@@ -90,7 +90,7 @@ export class ErrorBoundary extends Component<
     this.props.onError?.(error, errorInfo);
   }
 
-  handleRetry = () => {
+  handleRetry = (): void => {
     // Increment resetKey to force remount of children, reinitializing the chat
     this.setState((state) => ({
       hasError: false,

package/src/components/assistant-ui/markdown-text.tsx

@@ -66,7 +66,7 @@ const useCopyToClipboard = ({
   const copyToClipboard = (value: string) => {
     if (!value) return;
 
-    navigator.clipboard.writeText(value).then(() => {
+    void navigator.clipboard.writeText(value).then(() => {
       setIsCopied(true);
       setTimeout(() => setIsCopied(false), copiedDuration);
     });

package/src/components/assistant-ui/thread.tsx

@@ -1,6 +1,7 @@
 import {
   ArrowDownIcon,
   ArrowUpIcon,
+  AtSign,
   CheckIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
@@ -8,8 +9,10 @@ import {
   CopyIcon,
   DownloadIcon,
   PencilIcon,
+  Search,
   Settings2,
   Square,
+  Wrench,
 } from "lucide-react";
 
 import {
@@ -20,6 +23,7 @@ import {
   ImageMessagePartProps,
   MessagePrimitive,
   ThreadPrimitive,
+  useAssistantApi,
   useAssistantState,
 } from "@assistant-ui/react";
 
@@ -68,6 +72,10 @@ import { useToolMentions } from "@/hooks/useToolMentions";
 import { getApiUrl } from "@/lib/api";
 import { EASE_OUT_QUINT } from "@/lib/easing";
 import { MODELS } from "@/lib/models";
+import {
+  type MentionableTool,
+  toolSetToMentionableTools,
+} from "@/lib/tool-mentions";
 import { cn } from "@/lib/utils";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
 import {
@@ -262,7 +270,7 @@ const ThreadScrollToBottom: FC = () => {
 const ThreadWelcome: FC = () => {
   const { config } = useElements();
   const d = useDensity();
-  const { title, subtitle } = config.welcome ?? {};
+  const { logo, title, subtitle } = config.welcome ?? {};
   const isStandalone = config.variant === "standalone";
 
   return (
@@ -288,6 +296,19 @@ const ThreadWelcome: FC = () => {
             !isStandalone && d("py-md"),
           )}
         >
+          {logo && (
+            <m.img
+              src={logo}
+              alt=""
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: 10 }}
+              transition={{ duration: 0.25, ease: EASE_OUT_QUINT }}
+              className={cn(
+                "aui-thread-welcome-logo mb-2 size-12 object-contain",
+              )}
+            />
+          )}
           <m.div
             initial={{ opacity: 0, y: 10 }}
             animate={{ opacity: 1, y: 0 }}
@@ -524,7 +545,9 @@ const ComposerFeedback: FC = () => {
               <MessageFeedback
                 className="mx-auto"
                 onResolved={setResolved}
-                onFeedback={handleFeedback}
+                onFeedback={(type) => {
+                  void handleFeedback(type);
+                }}
               />
             </m.div>
           )}
@@ -794,6 +817,218 @@ const ComposerCassetteRecorder: FC = () => {
   );
 };
 
+// Sentinel for the "All" pseudo-category in the tool-mention picker.
+const TOOL_MENTION_ALL_CATEGORY = "__all__";
+
+function humanizeToolCategory(raw: string): string {
+  const cleaned = raw.replace(/[-_]+/g, " ").trim();
+  if (!cleaned) return "Tools";
+  return cleaned.replace(/\b\w/g, (c) => c.toUpperCase());
+}
+
+// Derive a grouping label for a tool. Tools from multiple MCP servers are
+// namespaced as `<server>__<tool>`; otherwise group by the first
+// underscore-delimited segment (e.g. `platform_search_logs` -> "Platform"),
+// falling back to a single "Tools" bucket.
+function deriveToolCategory(name: string): string {
+  const namespaceIdx = name.indexOf("__");
+  if (namespaceIdx > 0)
+    return humanizeToolCategory(name.slice(0, namespaceIdx));
+  const underscoreIdx = name.indexOf("_");
+  if (underscoreIdx > 0)
+    return humanizeToolCategory(name.slice(0, underscoreIdx));
+  return "Tools";
+}
+
+interface ToolCategory {
+  name: string;
+  tools: MentionableTool[];
+}
+
+// A discoverable counterpart to the type-`@` autocomplete: a composer button
+// that opens a searchable, category-grouped picker of the available tools and
+// inserts an @mention for the chosen one. Inserts through the composer runtime
+// so it stays in sync with the autocomplete's own textarea handling. Hidden when
+// tool mentions are disabled or there are no tools.
+const ComposerToolMentionPicker: FC = () => {
+  const { config, mcpTools, mcpToolsLoading } = useElements();
+  const api = useAssistantApi();
+  // Read the composer text from the same reactive source the tool-mention
+  // badges parse, so an inserted mention renders a pill just like the type-`@`
+  // autocomplete does.
+  const composerText = useAssistantState(({ composer }) => composer.text);
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [activeCategory, setActiveCategory] = useState(
+    TOOL_MENTION_ALL_CATEGORY,
+  );
+
+  const composerConfig = config.composer;
+  const toolMentionsEnabled =
+    composerConfig?.toolMentions === undefined ||
+    composerConfig.toolMentions === true ||
+    (typeof composerConfig.toolMentions === "object" &&
+      composerConfig.toolMentions.enabled !== false);
+
+  const tools = useMemo(() => toolSetToMentionableTools(mcpTools), [mcpTools]);
+
+  const categories = useMemo<ToolCategory[]>(() => {
+    const grouped = new Map<string, MentionableTool[]>();
+    for (const tool of tools) {
+      const category = deriveToolCategory(tool.name);
+      const existing = grouped.get(category);
+      if (existing) {
+        existing.push(tool);
+      } else {
+        grouped.set(category, [tool]);
+      }
+    }
+    return [...grouped.entries()]
+      .map(([name, categoryTools]) => ({ name, tools: categoryTools }))
+      .sort((a, b) => a.name.localeCompare(b.name));
+  }, [tools]);
+
+  // Show the button while tools are still loading (so it appears immediately
+  // rather than popping in once the async MCP list resolves) or once there are
+  // tools — but hide it when the list has loaded and is empty, so we don't
+  // expose a dead-end control.
+  if (!toolMentionsEnabled || (!mcpToolsLoading && tools.length === 0)) {
+    return null;
+  }
+
+  const normalizedQuery = query.trim().toLowerCase();
+  const inActiveCategory =
+    activeCategory === TOOL_MENTION_ALL_CATEGORY
+      ? tools
+      : (categories.find((c) => c.name === activeCategory)?.tools ?? []);
+  const visibleTools = normalizedQuery
+    ? inActiveCategory.filter(
+        (tool) =>
+          tool.name.toLowerCase().includes(normalizedQuery) ||
+          (tool.description?.toLowerCase().includes(normalizedQuery) ?? false),
+      )
+    : inActiveCategory;
+
+  const insertMention = (toolName: string) => {
+    const base =
+      composerText && !/\s$/.test(composerText)
+        ? `${composerText} `
+        : composerText;
+    api.composer().setText(`${base}@${toolName} `);
+    setOpen(false);
+    setQuery("");
+  };
+
+  const handleOpenChange = (next: boolean) => {
+    setOpen(next);
+    if (!next) {
+      setQuery("");
+      setActiveCategory(TOOL_MENTION_ALL_CATEGORY);
+    }
+  };
+
+  return (
+    <Popover open={open} onOpenChange={handleOpenChange}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          data-state={open ? "open" : "closed"}
+          className="aui-composer-tool-mention-picker flex w-fit items-center gap-2 rounded-full px-2.5 py-1 text-xs font-semibold data-[state=open]:bg-muted-foreground/15 dark:border-muted-foreground/15 dark:hover:bg-muted-foreground/30"
+          aria-label="Mention a tool"
+        >
+          <AtSign className="size-5 stroke-[1.5px]" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        side="top"
+        align="start"
+        className="aui-composer-tool-mention-popover w-[420px] overflow-hidden p-0"
+      >
+        <div className="flex items-center gap-2 border-b border-input px-3 py-2">
+          <Search className="size-4 shrink-0 text-muted-foreground" />
+          <input
+            autoFocus
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Search tools…"
+            className="w-full bg-transparent text-sm text-foreground outline-none placeholder:text-muted-foreground"
+            aria-label="Search tools"
+          />
+        </div>
+        <div className="flex h-72">
+          <div className="w-36 shrink-0 overflow-y-auto border-r border-input p-2">
+            <div className="px-2 pb-1 text-[10px] font-semibold tracking-wide text-muted-foreground uppercase">
+              Categories
+            </div>
+            <button
+              type="button"
+              onClick={() => setActiveCategory(TOOL_MENTION_ALL_CATEGORY)}
+              className={cn(
+                "flex w-full items-center justify-between rounded px-2 py-1 text-left text-xs transition-colors",
+                activeCategory === TOOL_MENTION_ALL_CATEGORY
+                  ? "bg-muted font-medium text-foreground"
+                  : "text-muted-foreground hover:bg-muted/60",
+              )}
+            >
+              <span className="truncate">All</span>
+              <span className="ml-2 shrink-0 tabular-nums opacity-60">
+                {tools.length}
+              </span>
+            </button>
+            {categories.map((category) => (
+              <button
+                key={category.name}
+                type="button"
+                onClick={() => setActiveCategory(category.name)}
+                className={cn(
+                  "flex w-full items-center justify-between rounded px-2 py-1 text-left text-xs transition-colors",
+                  activeCategory === category.name
+                    ? "bg-muted font-medium text-foreground"
+                    : "text-muted-foreground hover:bg-muted/60",
+                )}
+              >
+                <span className="truncate">{category.name}</span>
+                <span className="ml-2 shrink-0 tabular-nums opacity-60">
+                  {category.tools.length}
+                </span>
+              </button>
+            ))}
+          </div>
+          <div className="min-w-0 flex-1 overflow-y-auto p-2">
+            {visibleTools.length === 0 ? (
+              <div className="px-2 py-6 text-center text-xs text-muted-foreground">
+                {mcpToolsLoading ? "Loading tools…" : "No tools found"}
+              </div>
+            ) : (
+              visibleTools.map((tool) => (
+                <button
+                  key={tool.id}
+                  type="button"
+                  onClick={() => insertMention(tool.name)}
+                  className="flex w-full items-start gap-2 rounded px-2 py-1.5 text-left transition-colors hover:bg-muted"
+                >
+                  <Wrench className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
+                  <span className="min-w-0 flex-1">
+                    <span className="block truncate text-sm font-medium text-foreground">
+                      {tool.name}
+                    </span>
+                    {tool.description && (
+                      <span className="line-clamp-2 text-xs text-muted-foreground">
+                        {tool.description}
+                      </span>
+                    )}
+                  </span>
+                </button>
+              ))
+            )}
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
 const ComposerAction: FC = () => {
   const { config } = useElements();
   const r = useRadius();
@@ -807,6 +1042,8 @@ const ComposerAction: FC = () => {
           <div className="aui-composer-add-attachment-placeholder" />
         )}
 
+        <ComposerToolMentionPicker />
+
         {config.model?.showModelPicker && !config.languageModel && (
           <ComposerModelPicker />
         )}
@@ -879,21 +1116,22 @@ const ToolCallStreamingIndicator: FC = () => {
 const AssistantMessage: FC = () => {
   const { config } = useElements();
   const toolsConfig = config.tools ?? {};
-  const components = config.components ?? {};
+  const components = config.components;
+  const toolsComponents = toolsConfig.components;
 
   const partsComponents = useMemo(
     () => ({
-      Text: components.Text ?? MarkdownText,
-      Image: components.Image ?? Image,
+      Text: components?.Text ?? MarkdownText,
+      Image: components?.Image ?? Image,
       tools: {
-        by_name: toolsConfig.components,
-        Fallback: components.ToolFallback ?? ToolFallback,
+        by_name: toolsComponents,
+        Fallback: components?.ToolFallback ?? ToolFallback,
       },
-      Reasoning: components.Reasoning ?? Reasoning,
-      ReasoningGroup: components.ReasoningGroup ?? ReasoningGroup,
-      ToolGroup: components.ToolGroup ?? ToolGroup,
+      Reasoning: components?.Reasoning ?? Reasoning,
+      ReasoningGroup: components?.ReasoningGroup ?? ReasoningGroup,
+      ToolGroup: components?.ToolGroup ?? ToolGroup,
     }),
-    [components, toolsConfig.components],
+    [components, toolsComponents],
   );
 
   return (

package/src/components/assistant-ui/tool-mention-autocomplete.tsx

@@ -74,7 +74,7 @@ export const ToolMentionAutocomplete: FC<ToolMentionAutocompleteProps> = ({
       onValueChange(result.text, result.cursorPosition);
       setIsVisible(false);
     },
-    [mentionContext, value, cursorPosition, onValueChange, textareaRef],
+    [mentionContext, value, cursorPosition, onValueChange],
   );
 
   useEffect(() => {