From 63584449002d93aab65599ec34d2352663d5caf7 Mon Sep 17 00:00:00 2001
From: Abdulelah Hajjar <aab.hajjar@gmail.com>
Date: Mon, 30 Mar 2026 04:14:59 +0300
Subject: [PATCH] fix(web): Fix duplicate highlight in composer slash command
 menu (#1445)

---
 apps/web/src/components/chat/ComposerCommandMenu.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/chat/ComposerCommandMenu.tsx b/apps/web/src/components/chat/ComposerCommandMenu.tsx
index 7af4e6da43da2d3b58dfdfba6fc31020e23a472b..cc48e9ae2119208300580ce2b97df125af524213 100644
--- a/apps/web/src/components/chat/ComposerCommandMenu.tsx
+++ b/apps/web/src/components/chat/ComposerCommandMenu.tsx
@@ -43,6 +43,7 @@ export const ComposerCommandMenu = memo(function ComposerCommandMenu(props: {
 }) {
   return (
     <Command
+      autoHighlight={false}
       mode="none"
       onItemHighlighted={(highlightedValue) => {
         props.onHighlightedItemChange(
@@ -58,6 +59,7 @@ export const ComposerCommandMenu = memo(function ComposerCommandMenu(props: {
               item={item}
               resolvedTheme={props.resolvedTheme}
               isActive={props.activeItemId === item.id}
+              onHighlight={props.onHighlightedItemChange}
               onSelect={props.onSelect}
             />
           ))}
@@ -80,15 +82,19 @@ const ComposerCommandMenuItem = memo(function ComposerCommandMenuItem(props: {
   item: ComposerCommandItem;
   resolvedTheme: "light" | "dark";
   isActive: boolean;
+  onHighlight: (itemId: string | null) => void;
   onSelect: (item: ComposerCommandItem) => void;
 }) {
   return (
     <CommandItem
       value={props.item.id}
       className={cn(
-        "cursor-pointer select-none gap-2",
-        props.isActive && "bg-accent text-accent-foreground",
+        "cursor-pointer select-none gap-2 data-highlighted:bg-transparent data-highlighted:text-inherit",
+        props.isActive && "bg-accent! text-accent-foreground!",
       )}
+      onMouseMove={() => {
+        if (!props.isActive) props.onHighlight(props.item.id);
+      }}
       onMouseDown={(event) => {
         event.preventDefault();
       }}
-- 
2.54.0