fix: update command suggestions on slash command register/unregister (#12281)

When a slash command is registered or unregistered at runtime, the
command suggestion dropdown now updates immediately. Previously,
suggestions only refreshed on user input change, causing stale
entries to remain visible if a command was dynamically removed.

Adds an onChange listener to SlashCommandRegistry that notifies
the useCommandMenuKeyboard hook to re-evaluate suggestions.

Signed-off-by: Lin Wang <wonglam@amazon.com>

Author: wanglam

src/plugins/chat/public/hooks/use_command_menu_keyboard.test.ts

@@ -13,6 +13,7 @@ jest.mock('../services/slash_commands', () => {
   const mockRegistry = {
     getSuggestions: jest.fn(),
     get: jest.fn(),
+    onChange: jest.fn(() => jest.fn()),
   };
   return {
     slashCommandRegistry: mockRegistry,
@@ -663,4 +664,67 @@ describe('useCommandMenuKeyboard', () => {
       expect(mockOnKeyDown).toHaveBeenCalledWith(event);
     });
   });
+
+  describe('onChange registry subscription', () => {
+    it('should not subscribe to onChange when command menu is hidden', () => {
+      (slashCommandRegistry.getSuggestions as jest.Mock).mockReturnValue([]);
+      (slashCommandRegistry.onChange as jest.Mock).mockClear();
+
+      renderHook(() =>
+        useCommandMenuKeyboard({
+          input: 'hello',
+          onInputChange: mockOnInputChange,
+          onKeyDown: mockOnKeyDown,
+          inputRef,
+        })
+      );
+
+      expect(slashCommandRegistry.onChange).not.toHaveBeenCalled();
+    });
+
+    it('should subscribe to onChange when command menu is shown', () => {
+      (slashCommandRegistry.getSuggestions as jest.Mock).mockReturnValue([mockCommands[0]]);
+      (slashCommandRegistry.onChange as jest.Mock).mockClear();
+
+      renderHook(() =>
+        useCommandMenuKeyboard({
+          input: '/h',
+          onInputChange: mockOnInputChange,
+          onKeyDown: mockOnKeyDown,
+          inputRef,
+        })
+      );
+
+      expect(slashCommandRegistry.onChange).toHaveBeenCalled();
+    });
+
+    it('should update suggestions when onChange fires', () => {
+      let onChangeCallback: (() => void) | undefined;
+      (slashCommandRegistry.onChange as jest.Mock).mockImplementation((cb) => {
+        onChangeCallback = cb;
+        return jest.fn();
+      });
+      (slashCommandRegistry.getSuggestions as jest.Mock).mockReturnValue([mockCommands[0]]);
+
+      const { result } = renderHook(() =>
+        useCommandMenuKeyboard({
+          input: '/h',
+          onInputChange: mockOnInputChange,
+          onKeyDown: mockOnKeyDown,
+          inputRef,
+        })
+      );
+
+      expect(result.current.commandSuggestions).toHaveLength(1);
+
+      // Simulate command unregistration
+      (slashCommandRegistry.getSuggestions as jest.Mock).mockReturnValue([]);
+      act(() => {
+        onChangeCallback?.();
+      });
+
+      expect(result.current.commandSuggestions).toHaveLength(0);
+      expect(result.current.showCommandMenu).toBe(false);
+    });
+  });
 });

src/plugins/chat/public/hooks/use_command_menu_keyboard.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { useState, useEffect, RefObject } from 'react';
+import { useState, useEffect, useRef, RefObject } from 'react';
 import { slashCommandRegistry, SlashCommand } from '../services/slash_commands';
 
 interface UseCommandMenuKeyboardParams {
@@ -36,7 +36,8 @@ export const useCommandMenuKeyboard = ({
   const [commandSuggestions, setCommandSuggestions] = useState<SlashCommand[]>([]);
   const [selectedCommandIndex, setSelectedCommandIndex] = useState(0);
   const [ghostText, setGhostText] = useState('');
-
+  const inputValueRef = useRef(input);
+  inputValueRef.current = input;
   // Update command suggestions when input changes
   useEffect(() => {
     if (input.startsWith('/')) {
@@ -84,6 +85,16 @@ export const useCommandMenuKeyboard = ({
     }
   }, [input]);
 
+  // Clear suggestions when commands are registered/unregistered
+  useEffect(() => {
+    if (!showCommandMenu) return;
+    return slashCommandRegistry.onChange(() => {
+      const suggestions = slashCommandRegistry.getSuggestions(inputValueRef.current);
+      setCommandSuggestions(suggestions);
+      setShowCommandMenu(suggestions.length > 0);
+    });
+  }, [showCommandMenu]);
+
   useEffect(() => {
     const textArea = inputRef.current;
     if (textArea) {

src/plugins/chat/public/services/slash_commands.test.ts

@@ -624,4 +624,65 @@ describe('SlashCommandRegistry', () => {
       consoleWarnSpy.mockRestore();
     });
   });
+
+  describe('onChange', () => {
+    it('should notify listener on register', () => {
+      const listener = jest.fn();
+      slashCommandRegistry.onChange(listener);
+
+      slashCommandRegistry.register({
+        command: 'test',
+        description: 'Test',
+        handler: () => 'result',
+      });
+
+      expect(listener).toHaveBeenCalledTimes(1);
+    });
+
+    it('should notify listener on unregister', () => {
+      slashCommandRegistry.register({
+        command: 'test',
+        description: 'Test',
+        handler: () => 'result',
+      });
+
+      const listener = jest.fn();
+      slashCommandRegistry.onChange(listener);
+
+      slashCommandRegistry.unregister('test');
+
+      expect(listener).toHaveBeenCalledTimes(1);
+    });
+
+    it('should not notify after unsubscribe', () => {
+      const listener = jest.fn();
+      const unsubscribe = slashCommandRegistry.onChange(listener);
+
+      unsubscribe();
+
+      slashCommandRegistry.register({
+        command: 'test',
+        description: 'Test',
+        handler: () => 'result',
+      });
+
+      expect(listener).not.toHaveBeenCalled();
+    });
+
+    it('should notify multiple listeners', () => {
+      const listener1 = jest.fn();
+      const listener2 = jest.fn();
+      slashCommandRegistry.onChange(listener1);
+      slashCommandRegistry.onChange(listener2);
+
+      slashCommandRegistry.register({
+        command: 'test',
+        description: 'Test',
+        handler: () => 'result',
+      });
+
+      expect(listener1).toHaveBeenCalledTimes(1);
+      expect(listener2).toHaveBeenCalledTimes(1);
+    });
+  });
 });

src/plugins/chat/public/services/slash_commands.ts

@@ -17,6 +17,7 @@ export interface SlashCommand {
 
 class SlashCommandRegistry {
   private commands: Map<string, SlashCommand> = new Map();
+  private listeners: Set<() => void> = new Set();
 
   register(command: SlashCommand) {
     if (this.commands.has(command.command)) {
@@ -25,10 +26,21 @@ class SlashCommandRegistry {
       return;
     }
     this.commands.set(command.command, command);
+    this.notifyListeners();
   }
 
   unregister(commandName: string) {
     this.commands.delete(commandName);
+    this.notifyListeners();
+  }
+
+  onChange(listener: () => void): () => void {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+
+  private notifyListeners() {
+    this.listeners.forEach((fn) => fn());
   }
 
   get(commandName: string): SlashCommand | undefined {