From 9cad6a60c0f9f986fd35cc4c3d56d5ba472dc99f Mon Sep 17 00:00:00 2001
From: angelplusultra <macfittondev@gmail.com>
Date: Thu, 18 Sep 2025 14:42:47 -0700
Subject: [PATCH 1/6] Add functionality for slash command selection via keydown
 event

---
 .../SlashCommands/SlashPresets/index.jsx      | 51 ++++++++++++---
 .../PromptInput/SlashCommands/index.jsx       | 16 ++++-
 .../PromptInput/SlashCommands/reset.jsx       | 33 +++++++++-
 .../ChatContainer/PromptInput/index.jsx       | 63 ++++++++++++++++---
 4 files changed, 144 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/SlashPresets/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/SlashPresets/index.jsx
index d38378536ab..12126ed970e 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/SlashPresets/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/SlashPresets/index.jsx
@@ -11,7 +11,12 @@ import { useTranslation } from "react-i18next";
 import PublishEntityModal from "@/components/CommunityHub/PublishEntityModal";
 
 export const CMD_REGEX = new RegExp(/[^a-zA-Z0-9_-]/g);
-export default function SlashPresets({ setShowing, sendCommand, promptRef }) {
+export default function SlashPresets({
+  setShowing,
+  sendCommand,
+  promptRef,
+  highlightedSlashCommand,
+}) {
   const { t } = useTranslation();
   const isActiveAgentSession = useIsAgentSessionActive();
   const {
@@ -38,6 +43,37 @@ export default function SlashPresets({ setShowing, sendCommand, promptRef }) {
     fetchPresets();
   }, []);
 
+  useEffect(() => {
+    const handleSelectHighlighted = (event) => {
+      const { highlightedIndex } = event.detail;
+      if (highlightedIndex === 0) {
+        // Reset command is selected
+        return;
+      }
+
+      // Check if it's a preset selection (index 1 and above)
+      const presetIndex = highlightedIndex - 1;
+      if (presetIndex >= 0 && presetIndex < presets.length) {
+        const preset = presets[presetIndex];
+        setShowing(false);
+        sendCommand({ text: `${preset.command} ` });
+        promptRef?.current?.focus();
+      }
+    };
+
+    window.addEventListener(
+      "selectHighlightedSlashCommand",
+      handleSelectHighlighted
+    );
+
+    return () => {
+      window.removeEventListener(
+        "selectHighlightedSlashCommand",
+        handleSelectHighlighted
+      );
+    };
+  }, [presets, setShowing, sendCommand, promptRef]);
+
   /*
    * @checklist-item
    * If the URL has the slash-commands param, open the add modal for the user
@@ -49,7 +85,7 @@ export default function SlashPresets({ setShowing, sendCommand, promptRef }) {
       !isAddModalOpen
     )
       openAddModal();
-  }, []);
+  }, [isAddModalOpen, openAddModal, searchParams]);
 
   if (isActiveAgentSession) return null;
 
@@ -60,7 +96,7 @@ export default function SlashPresets({ setShowing, sendCommand, promptRef }) {
 
   const handleSavePreset = async (preset) => {
     const { error } = await System.createSlashCommandPreset(preset);
-    if (!!error) {
+    if (error) {
       showToast(error, "error");
       return false;
     }
@@ -81,7 +117,7 @@ export default function SlashPresets({ setShowing, sendCommand, promptRef }) {
       updatedPreset
     );
 
-    if (!!error) {
+    if (error) {
       showToast(error, "error");
       return;
     }
@@ -113,10 +149,11 @@ export default function SlashPresets({ setShowing, sendCommand, promptRef }) {
 
   return (
     <>
-      {presets.map((preset) => (
+      {presets.map((preset, index) => (
         <PresetItem
           key={preset.id}
           preset={preset}
+          highlighted={highlightedSlashCommand === index + 1}
           onUse={() => {
             setShowing(false);
             sendCommand({ text: `${preset.command} ` });
@@ -161,7 +198,7 @@ export default function SlashPresets({ setShowing, sendCommand, promptRef }) {
   );
 }
 
-function PresetItem({ preset, onUse, onEdit, onPublish }) {
+function PresetItem({ preset, onUse, onEdit, onPublish, highlighted }) {
   const [showMenu, setShowMenu] = useState(false);
   const menuRef = useRef(null);
   const menuButtonRef = useRef(null);
@@ -187,7 +224,7 @@ function PresetItem({ preset, onUse, onEdit, onPublish }) {
   return (
     <button
       onClick={onUse}
-      className="border-none w-full hover:cursor-pointer hover:bg-theme-action-menu-item-hover px-2 py-2 rounded-xl flex flex-row justify-start items-center relative"
+      className={`border-none w-full hover:cursor-pointer hover:bg-theme-action-menu-item-hover px-2 py-2 rounded-xl flex flex-row justify-start items-center relative ${highlighted ? "bg-theme-action-menu-item-hover" : ""}`}
     >
       <div className="flex-col text-left flex pointer-events-none flex-1 min-w-0">
         <div className="text-theme-text-primary text-sm font-bold truncate">
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/index.jsx
index d0b52bea88e..adacefdd51e 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/index.jsx
@@ -32,7 +32,14 @@ export default function SlashCommandsButton({ showing, setShowSlashCommand }) {
   );
 }
 
-export function SlashCommands({ showing, setShowing, sendCommand, promptRef }) {
+export function SlashCommands({
+  showing,
+  setShowing,
+  sendCommand,
+  promptRef,
+  highlightedSlashCommand,
+  setHighlightedSlashCommand,
+}) {
   const cmdRef = useRef(null);
   useEffect(() => {
     function listenForOutsideClick() {
@@ -56,12 +63,17 @@ export function SlashCommands({ showing, setShowing, sendCommand, promptRef }) {
           ref={cmdRef}
           className="w-[600px] bg-theme-action-menu-bg rounded-2xl flex shadow flex-col justify-start items-start gap-2.5 p-2 overflow-y-auto max-h-[300px] no-scroll"
         >
-          <ResetCommand sendCommand={sendCommand} setShowing={setShowing} />
+          <ResetCommand
+            highlightedSlashCommand={highlightedSlashCommand}
+            sendCommand={sendCommand}
+            setShowing={setShowing}
+          />
           <EndAgentSession sendCommand={sendCommand} setShowing={setShowing} />
           <SlashPresets
             sendCommand={sendCommand}
             setShowing={setShowing}
             promptRef={promptRef}
+            highlightedSlashCommand={highlightedSlashCommand}
           />
         </div>
       </div>
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/reset.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/reset.jsx
index 94f54b1b0d7..ba61a74fd75 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/reset.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/reset.jsx
@@ -1,9 +1,38 @@
+import React, { useEffect } from "react";
 import { useIsAgentSessionActive } from "@/utils/chat/agent";
 import { useTranslation } from "react-i18next";
 
-export default function ResetCommand({ setShowing, sendCommand }) {
+export default function ResetCommand({
+  setShowing,
+  sendCommand,
+  highlightedSlashCommand,
+}) {
   const { t } = useTranslation();
   const isActiveAgentSession = useIsAgentSessionActive();
+
+  useEffect(() => {
+    const handleSelectHighlighted = (event) => {
+      const { highlightedIndex } = event.detail;
+      if (highlightedIndex === 0) {
+        // Reset command is selected
+        setShowing(false);
+        sendCommand({ text: "/reset", autoSubmit: true });
+      }
+    };
+
+    window.addEventListener(
+      "selectHighlightedSlashCommand",
+      handleSelectHighlighted
+    );
+
+    return () => {
+      window.removeEventListener(
+        "selectHighlightedSlashCommand",
+        handleSelectHighlighted
+      );
+    };
+  }, [setShowing, sendCommand]);
+
   if (isActiveAgentSession) return null; // cannot reset during active agent chat
 
   return (
@@ -12,7 +41,7 @@ export default function ResetCommand({ setShowing, sendCommand }) {
         setShowing(false);
         sendCommand({ text: "/reset", autoSubmit: true });
       }}
-      className="border-none w-full hover:cursor-pointer hover:bg-theme-action-menu-item-hover px-2 py-2 rounded-xl flex flex-col justify-start"
+      className={`border-none w-full hover:cursor-pointer hover:bg-theme-action-menu-item-hover px-2 py-2 rounded-xl flex flex-col justify-start ${highlightedSlashCommand === 0 ? "bg-theme-action-menu-item-hover" : ""}`}
     >
       <div className="w-full flex-col text-left flex pointer-events-none">
         <div className="text-white text-sm font-bold">
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx
index 8a498f0b350..785c3c395a1 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx
@@ -24,6 +24,7 @@ import {
 import useTextSize from "@/hooks/useTextSize";
 import { useTranslation } from "react-i18next";
 import Appearance from "@/models/appearance";
+import System from "@/models/system";
 
 export const PROMPT_INPUT_ID = "primary-prompt-input";
 export const PROMPT_INPUT_EVENT = "set_prompt_input";
@@ -41,11 +42,12 @@ export default function PromptInput({
   const [promptInput, setPromptInput] = useState("");
   const { showAgents, setShowAgents } = useAvailableAgents();
   const { showSlashCommand, setShowSlashCommand } = useSlashCommands();
+  const [highlightedSlashCommand, setHighlightedSlashCommand] = useState(1);
   const formRef = useRef(null);
   const textareaRef = useRef(null);
-  const [_, setFocused] = useState(false);
   const undoStack = useRef([]);
   const redoStack = useRef([]);
+  const [qtyOfSlashCommands, setQtyOfSlashCommands] = useState(0);
   const { textSizeClass } = useTextSize();
 
   /**
@@ -60,9 +62,17 @@ export default function PromptInput({
     else setPromptInput(messageContent ?? "");
   }
 
+  const fetchPresets = async () => {
+    const presets = await System.getSlashCommandPresets();
+    setQtyOfSlashCommands(presets.length + 1);
+  };
+
+  useEffect(() => {
+    fetchPresets();
+  }, []);
+
   useEffect(() => {
-    if (!!window)
-      window.addEventListener(PROMPT_INPUT_EVENT, handlePromptUpdate);
+    if (window) window.addEventListener(PROMPT_INPUT_EVENT, handlePromptUpdate);
     return () =>
       window?.removeEventListener(PROMPT_INPUT_EVENT, handlePromptUpdate);
   }, []);
@@ -88,7 +98,6 @@ export default function PromptInput({
   const debouncedSaveState = debounce(saveCurrentState, 250);
 
   function handleSubmit(e) {
-    setFocused(false);
     submit(e);
   }
 
@@ -99,7 +108,10 @@ export default function PromptInput({
 
   function checkForSlash(e) {
     const input = e.target.value;
-    if (input === "/") setShowSlashCommand(true);
+    if (input === "/") {
+      setShowSlashCommand(true);
+      setHighlightedSlashCommand(0); // Start with reset command highlighted
+    }
     if (showSlashCommand) setShowSlashCommand(false);
     return;
   }
@@ -121,6 +133,8 @@ export default function PromptInput({
     // Is simple enter key press w/o shift key
     if (event.keyCode === 13 && !event.shiftKey) {
       event.preventDefault();
+      // Don't submit if slash commands are showing - let the slash command handler take care of it
+      if (showSlashCommand) return;
       if (isStreaming || isDisabled) return; // Prevent submission if streaming or disabled
       return submit(event);
     }
@@ -243,12 +257,47 @@ export default function PromptInput({
   }
 
   return (
-    <div className="w-full fixed md:absolute bottom-0 left-0 z-10 md:z-0 flex justify-center items-center">
+    <div
+      onKeyDown={(e) => {
+        // Only handle arrow keys when slash commands are showing
+        if (!showSlashCommand) return;
+
+        if (e.key === "ArrowUp") {
+          e.preventDefault();
+          setHighlightedSlashCommand((prev) => {
+            if (prev <= 0) {
+              return qtyOfSlashCommands - 1;
+            }
+            return prev - 1;
+          });
+        }
+        if (e.key === "ArrowDown") {
+          e.preventDefault();
+          setHighlightedSlashCommand((prev) => {
+            if (prev >= qtyOfSlashCommands - 1) {
+              return 0;
+            }
+            return prev + 1;
+          });
+        }
+        if (e.key === "Enter" && showSlashCommand) {
+          e.preventDefault();
+          // Trigger the highlighted command
+          const event = new CustomEvent("selectHighlightedSlashCommand", {
+            detail: { highlightedIndex: highlightedSlashCommand },
+          });
+          window.dispatchEvent(event);
+        }
+      }}
+      className="w-full fixed md:absolute bottom-0 left-0 z-10 md:z-0 flex justify-center items-center"
+    >
       <SlashCommands
         showing={showSlashCommand}
         setShowing={setShowSlashCommand}
         sendCommand={sendCommand}
         promptRef={textareaRef}
+        highlightedSlashCommand={highlightedSlashCommand}
+        setHighlightedSlashCommand={setHighlightedSlashCommand}
       />
       <AvailableAgents
         showing={showAgents}
@@ -274,9 +323,7 @@ export default function PromptInput({
                   handlePasteEvent(e);
                 }}
                 required={true}
-                onFocus={() => setFocused(true)}
                 onBlur={(e) => {
-                  setFocused(false);
                   adjustTextArea(e);
                 }}
                 value={promptInput}

From 26ac150161b42d87366f9eab6bb15b2048209c2c Mon Sep 17 00:00:00 2001
From: angelplusultra <macfittondev@gmail.com>
Date: Thu, 18 Sep 2025 14:51:30 -0700
Subject: [PATCH 2/6] Move keydown event handler from inline to function
 declaration

---
 .../ChatContainer/PromptInput/index.jsx       | 61 ++++++++++---------
 1 file changed, 31 insertions(+), 30 deletions(-)

diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx
index 785c3c395a1..35260334370 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx
@@ -256,39 +256,40 @@ export default function PromptInput({
     setPromptInput(e.target.value);
   }
 
-  return (
-    <div
-      onKeyDown={(e) => {
-        // Only handle arrow keys when slash commands are showing
-        if (!showSlashCommand) return;
+  function handleKeyDown(e) {
+    // Only handle arrow keys when slash commands are showing
+    if (!showSlashCommand) return;
 
-        if (e.key === "ArrowUp") {
-          e.preventDefault();
-          setHighlightedSlashCommand((prev) => {
-            if (prev <= 0) {
-              return qtyOfSlashCommands - 1;
-            }
-            return prev - 1;
-          });
-        }
-        if (e.key === "ArrowDown") {
-          e.preventDefault();
-          setHighlightedSlashCommand((prev) => {
-            if (prev >= qtyOfSlashCommands - 1) {
-              return 0;
-            }
-            return prev + 1;
-          });
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setHighlightedSlashCommand((prev) => {
+        if (prev <= 0) {
+          return qtyOfSlashCommands - 1;
         }
-        if (e.key === "Enter" && showSlashCommand) {
-          e.preventDefault();
-          // Trigger the highlighted command
-          const event = new CustomEvent("selectHighlightedSlashCommand", {
-            detail: { highlightedIndex: highlightedSlashCommand },
-          });
-          window.dispatchEvent(event);
+        return prev - 1;
+      });
+    }
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setHighlightedSlashCommand((prev) => {
+        if (prev >= qtyOfSlashCommands - 1) {
+          return 0;
         }
-      }}
+        return prev + 1;
+      });
+    }
+    if (e.key === "Enter" && showSlashCommand) {
+      e.preventDefault();
+      // Trigger the highlighted command
+      const event = new CustomEvent("selectHighlightedSlashCommand", {
+        detail: { highlightedIndex: highlightedSlashCommand },
+      });
+      window.dispatchEvent(event);
+    }
+  }
+  return (
+    <div
+      onKeyDown={handleKeyDown}
       className="w-full fixed md:absolute bottom-0 left-0 z-10 md:z-0 flex justify-center items-center"
     >
       <SlashCommands

From f0840edf9bcf78b66c6391219caaac706d664ea1 Mon Sep 17 00:00:00 2001
From: angelplusultra <macfittondev@gmail.com>
Date: Thu, 18 Sep 2025 16:08:45 -0700
Subject: [PATCH 3/6] Add Escape key functionality to hide slash command input

---
 .../WorkspaceChat/ChatContainer/PromptInput/index.jsx        | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx
index 35260334370..1d6800fd623 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx
@@ -286,6 +286,11 @@ export default function PromptInput({
       });
       window.dispatchEvent(event);
     }
+
+    if (e.key === "Escape") {
+      e.preventDefault();
+      setShowSlashCommand(false);
+    }
   }
   return (
     <div

From 7549f51dbca5c87ab01e7a83bdb9a912ba6fdea0 Mon Sep 17 00:00:00 2001
From: angelplusultra <macfittondev@gmail.com>
Date: Thu, 18 Sep 2025 16:10:34 -0700
Subject: [PATCH 4/6] Update Escape key functionality to conditionally hide
 slash command input only if its enabled

---
 .../WorkspaceChat/ChatContainer/PromptInput/index.jsx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx
index 1d6800fd623..d4143b30f62 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx
@@ -287,7 +287,7 @@ export default function PromptInput({
       window.dispatchEvent(event);
     }
 
-    if (e.key === "Escape") {
+    if (e.key === "Escape" && showSlashCommand) {
       e.preventDefault();
       setShowSlashCommand(false);
     }

From 3e85053755a50e7aecb3e54a2aef49c15deb4a93 Mon Sep 17 00:00:00 2001
From: angelplusultra <macfittondev@gmail.com>
Date: Mon, 22 Sep 2025 12:31:27 -0700
Subject: [PATCH 5/6] Abstract majority of slash command logic into
 useSlashCommand hook | Fix bug where slash command navigation wasn't working
 when triggered with slash command button | Fix bug with overflowed slash
 commands not being scrolled into view on navigation | Refactored slash
 command selection logic from custom event emission to direct handling in
 handleKeyDown fn.

---
 .../SlashCommands/SlashPresets/index.jsx      |  50 +++------
 .../PromptInput/SlashCommands/index.jsx       |  12 +-
 .../PromptInput/SlashCommands/reset.jsx       |  35 ++----
 .../ChatContainer/PromptInput/index.jsx       |  77 +++----------
 frontend/src/hooks/useSlashCommands.js        | 104 ++++++++++++++++++
 5 files changed, 148 insertions(+), 130 deletions(-)
 create mode 100644 frontend/src/hooks/useSlashCommands.js

diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/SlashPresets/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/SlashPresets/index.jsx
index 12126ed970e..d8a0631ed4a 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/SlashPresets/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/SlashPresets/index.jsx
@@ -16,6 +16,8 @@ export default function SlashPresets({
   sendCommand,
   promptRef,
   highlightedSlashCommand,
+  presets,
+  setPresets,
 }) {
   const { t } = useTranslation();
   const isActiveAgentSession = useIsAgentSessionActive();
@@ -34,7 +36,7 @@ export default function SlashPresets({
     openModal: openPublishModal,
     closeModal: closePublishModal,
   } = useModal();
-  const [presets, setPresets] = useState([]);
+  // const [presets, setPresets] = useState([]);
   const [selectedPreset, setSelectedPreset] = useState(null);
   const [presetToPublish, setPresetToPublish] = useState(null);
   const [searchParams] = useSearchParams();
@@ -43,37 +45,6 @@ export default function SlashPresets({
     fetchPresets();
   }, []);
 
-  useEffect(() => {
-    const handleSelectHighlighted = (event) => {
-      const { highlightedIndex } = event.detail;
-      if (highlightedIndex === 0) {
-        // Reset command is selected
-        return;
-      }
-
-      // Check if it's a preset selection (index 1 and above)
-      const presetIndex = highlightedIndex - 1;
-      if (presetIndex >= 0 && presetIndex < presets.length) {
-        const preset = presets[presetIndex];
-        setShowing(false);
-        sendCommand({ text: `${preset.command} ` });
-        promptRef?.current?.focus();
-      }
-    };
-
-    window.addEventListener(
-      "selectHighlightedSlashCommand",
-      handleSelectHighlighted
-    );
-
-    return () => {
-      window.removeEventListener(
-        "selectHighlightedSlashCommand",
-        handleSelectHighlighted
-      );
-    };
-  }, [presets, setShowing, sendCommand, promptRef]);
-
   /*
    * @checklist-item
    * If the URL has the slash-commands param, open the add modal for the user
@@ -153,7 +124,7 @@ export default function SlashPresets({
         <PresetItem
           key={preset.id}
           preset={preset}
-          highlighted={highlightedSlashCommand === index + 1}
+          isHighlighted={highlightedSlashCommand === index + 1}
           onUse={() => {
             setShowing(false);
             sendCommand({ text: `${preset.command} ` });
@@ -198,10 +169,18 @@ export default function SlashPresets({
   );
 }
 
-function PresetItem({ preset, onUse, onEdit, onPublish, highlighted }) {
+function PresetItem({ preset, onUse, onEdit, onPublish, isHighlighted }) {
   const [showMenu, setShowMenu] = useState(false);
   const menuRef = useRef(null);
   const menuButtonRef = useRef(null);
+  const slashCommandItemRef = useRef(null);
+
+  // Scroll to the highlighted slash command
+  useEffect(() => {
+    if (slashCommandItemRef.current && isHighlighted) {
+      slashCommandItemRef.current.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [isHighlighted]);
 
   useEffect(() => {
     const handleClickOutside = (event) => {
@@ -223,8 +202,9 @@ function PresetItem({ preset, onUse, onEdit, onPublish, highlighted }) {
 
   return (
     <button
+      ref={slashCommandItemRef}
       onClick={onUse}
-      className={`border-none w-full hover:cursor-pointer hover:bg-theme-action-menu-item-hover px-2 py-2 rounded-xl flex flex-row justify-start items-center relative ${highlighted ? "bg-theme-action-menu-item-hover" : ""}`}
+      className={`border-none w-full hover:cursor-pointer hover:bg-theme-action-menu-item-hover px-2 py-2 rounded-xl flex flex-row justify-start items-center relative ${isHighlighted ? "bg-theme-action-menu-item-hover" : ""}`}
     >
       <div className="flex-col text-left flex pointer-events-none flex-1 min-w-0">
         <div className="text-theme-text-primary text-sm font-bold truncate">
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/index.jsx
index adacefdd51e..ec10099b778 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/index.jsx
@@ -38,7 +38,8 @@ export function SlashCommands({
   sendCommand,
   promptRef,
   highlightedSlashCommand,
-  setHighlightedSlashCommand,
+  slashCommands,
+  setSlashCommands,
 }) {
   const cmdRef = useRef(null);
   useEffect(() => {
@@ -64,7 +65,7 @@ export function SlashCommands({
           className="w-[600px] bg-theme-action-menu-bg rounded-2xl flex shadow flex-col justify-start items-start gap-2.5 p-2 overflow-y-auto max-h-[300px] no-scroll"
         >
           <ResetCommand
-            highlightedSlashCommand={highlightedSlashCommand}
+            isHighlighted={highlightedSlashCommand === 0}
             sendCommand={sendCommand}
             setShowing={setShowing}
           />
@@ -74,14 +75,11 @@ export function SlashCommands({
             setShowing={setShowing}
             promptRef={promptRef}
             highlightedSlashCommand={highlightedSlashCommand}
+            presets={slashCommands}
+            setPresets={setSlashCommands}
           />
         </div>
       </div>
     </div>
   );
 }
-
-export function useSlashCommands() {
-  const [showSlashCommand, setShowSlashCommand] = useState(false);
-  return { showSlashCommand, setShowSlashCommand };
-}
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/reset.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/reset.jsx
index ba61a74fd75..edad74a99f7 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/reset.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/reset.jsx
@@ -1,47 +1,32 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useRef } from "react";
 import { useIsAgentSessionActive } from "@/utils/chat/agent";
 import { useTranslation } from "react-i18next";
 
 export default function ResetCommand({
   setShowing,
   sendCommand,
-  highlightedSlashCommand,
+  isHighlighted,
 }) {
   const { t } = useTranslation();
   const isActiveAgentSession = useIsAgentSessionActive();
-
+  const slashCommandItemRef = useRef(null);
+  // Scroll to the highlighted slash command
   useEffect(() => {
-    const handleSelectHighlighted = (event) => {
-      const { highlightedIndex } = event.detail;
-      if (highlightedIndex === 0) {
-        // Reset command is selected
-        setShowing(false);
-        sendCommand({ text: "/reset", autoSubmit: true });
-      }
-    };
-
-    window.addEventListener(
-      "selectHighlightedSlashCommand",
-      handleSelectHighlighted
-    );
-
-    return () => {
-      window.removeEventListener(
-        "selectHighlightedSlashCommand",
-        handleSelectHighlighted
-      );
-    };
-  }, [setShowing, sendCommand]);
+    if (isHighlighted) {
+      slashCommandItemRef.current.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [isHighlighted]);
 
   if (isActiveAgentSession) return null; // cannot reset during active agent chat
 
   return (
     <button
+      ref={slashCommandItemRef}
       onClick={() => {
         setShowing(false);
         sendCommand({ text: "/reset", autoSubmit: true });
       }}
-      className={`border-none w-full hover:cursor-pointer hover:bg-theme-action-menu-item-hover px-2 py-2 rounded-xl flex flex-col justify-start ${highlightedSlashCommand === 0 ? "bg-theme-action-menu-item-hover" : ""}`}
+      className={`border-none w-full hover:cursor-pointer hover:bg-theme-action-menu-item-hover px-2 py-2 rounded-xl flex flex-col justify-start ${isHighlighted ? "bg-theme-action-menu-item-hover" : ""}`}
     >
       <div className="w-full flex-col text-left flex pointer-events-none">
         <div className="text-white text-sm font-bold">
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx
index d4143b30f62..f3e9d3f76f8 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx
@@ -1,7 +1,7 @@
 import React, { useState, useRef, useEffect } from "react";
 import SlashCommandsButton, {
   SlashCommands,
-  useSlashCommands,
+  // useSlashCommands,
 } from "./SlashCommands";
 import debounce from "lodash.debounce";
 import { PaperPlaneRight } from "@phosphor-icons/react";
@@ -24,7 +24,7 @@ import {
 import useTextSize from "@/hooks/useTextSize";
 import { useTranslation } from "react-i18next";
 import Appearance from "@/models/appearance";
-import System from "@/models/system";
+import { useSlashCommands } from "@/hooks/useSlashCommands";
 
 export const PROMPT_INPUT_ID = "primary-prompt-input";
 export const PROMPT_INPUT_EVENT = "set_prompt_input";
@@ -41,13 +41,19 @@ export default function PromptInput({
   const { isDisabled } = useIsDisabled();
   const [promptInput, setPromptInput] = useState("");
   const { showAgents, setShowAgents } = useAvailableAgents();
-  const { showSlashCommand, setShowSlashCommand } = useSlashCommands();
-  const [highlightedSlashCommand, setHighlightedSlashCommand] = useState(1);
+  const {
+    showSlashCommand,
+    setShowSlashCommand,
+    handleKeyDown,
+    highlightedSlashCommand,
+    watchForSlash,
+    textareaRef,
+    slashCommands,
+    setSlashCommands,
+  } = useSlashCommands({ sendCommand });
   const formRef = useRef(null);
-  const textareaRef = useRef(null);
   const undoStack = useRef([]);
   const redoStack = useRef([]);
-  const [qtyOfSlashCommands, setQtyOfSlashCommands] = useState(0);
   const { textSizeClass } = useTextSize();
 
   /**
@@ -62,15 +68,6 @@ export default function PromptInput({
     else setPromptInput(messageContent ?? "");
   }
 
-  const fetchPresets = async () => {
-    const presets = await System.getSlashCommandPresets();
-    setQtyOfSlashCommands(presets.length + 1);
-  };
-
-  useEffect(() => {
-    fetchPresets();
-  }, []);
-
   useEffect(() => {
     if (window) window.addEventListener(PROMPT_INPUT_EVENT, handlePromptUpdate);
     return () =>
@@ -106,17 +103,6 @@ export default function PromptInput({
     textareaRef.current.style.height = "auto";
   }
 
-  function checkForSlash(e) {
-    const input = e.target.value;
-    if (input === "/") {
-      setShowSlashCommand(true);
-      setHighlightedSlashCommand(0); // Start with reset command highlighted
-    }
-    if (showSlashCommand) setShowSlashCommand(false);
-    return;
-  }
-  const watchForSlash = debounce(checkForSlash, 300);
-
   function checkForAt(e) {
     const input = e.target.value;
     if (input === "@") return setShowAgents(true);
@@ -256,42 +242,6 @@ export default function PromptInput({
     setPromptInput(e.target.value);
   }
 
-  function handleKeyDown(e) {
-    // Only handle arrow keys when slash commands are showing
-    if (!showSlashCommand) return;
-
-    if (e.key === "ArrowUp") {
-      e.preventDefault();
-      setHighlightedSlashCommand((prev) => {
-        if (prev <= 0) {
-          return qtyOfSlashCommands - 1;
-        }
-        return prev - 1;
-      });
-    }
-    if (e.key === "ArrowDown") {
-      e.preventDefault();
-      setHighlightedSlashCommand((prev) => {
-        if (prev >= qtyOfSlashCommands - 1) {
-          return 0;
-        }
-        return prev + 1;
-      });
-    }
-    if (e.key === "Enter" && showSlashCommand) {
-      e.preventDefault();
-      // Trigger the highlighted command
-      const event = new CustomEvent("selectHighlightedSlashCommand", {
-        detail: { highlightedIndex: highlightedSlashCommand },
-      });
-      window.dispatchEvent(event);
-    }
-
-    if (e.key === "Escape" && showSlashCommand) {
-      e.preventDefault();
-      setShowSlashCommand(false);
-    }
-  }
   return (
     <div
       onKeyDown={handleKeyDown}
@@ -303,7 +253,8 @@ export default function PromptInput({
         sendCommand={sendCommand}
         promptRef={textareaRef}
         highlightedSlashCommand={highlightedSlashCommand}
-        setHighlightedSlashCommand={setHighlightedSlashCommand}
+        slashCommands={slashCommands}
+        setSlashCommands={setSlashCommands}
       />
       <AvailableAgents
         showing={showAgents}
diff --git a/frontend/src/hooks/useSlashCommands.js b/frontend/src/hooks/useSlashCommands.js
new file mode 100644
index 00000000000..6cf589fba53
--- /dev/null
+++ b/frontend/src/hooks/useSlashCommands.js
@@ -0,0 +1,104 @@
+import System from "@/models/system";
+import debounce from "lodash.debounce";
+import { useEffect, useRef, useState } from "react";
+
+export function useSlashCommands({ sendCommand }) {
+  const [showSlashCommand, setShowSlashCommand] = useState(false);
+  const [highlightedSlashCommand, setHighlightedSlashCommand] = useState(1);
+  const [slashCommands, setSlashCommands] = useState([]);
+  //   const [qtyOfSlashCommands, setQtyOfSlashCommands] = useState(0);
+  // Ref to the textarea element, this is needed to apply focus to the textarea when slash commands are triggered by clicking the slash command button
+  const textareaRef = useRef(null);
+
+  // Check for slash command to show slash commands
+  function checkForSlash(e) {
+    const input = e.target.value;
+    if (input === "/") {
+      setShowSlashCommand(true);
+      setHighlightedSlashCommand(0); // Start with reset command highlighted
+    }
+    if (showSlashCommand) setShowSlashCommand(false);
+    return;
+  }
+  const watchForSlash = debounce(checkForSlash, 300);
+  const fetchSlashCommands = async () => {
+    const presets = await System.getSlashCommandPresets();
+    setSlashCommands(presets);
+    // setQtyOfSlashCommands(presets.length + 1);
+  };
+
+  useEffect(() => {
+    fetchSlashCommands();
+  }, []);
+
+  // Focus the textarea when slash commands are shown, this is needed to enable keyboard navigation
+  useEffect(() => {
+    if (showSlashCommand) {
+      if (textareaRef.current) {
+        textareaRef.current.focus();
+      }
+    }
+  }, [showSlashCommand]);
+
+  // Handle key down events for slash command navigation and selection
+  function handleKeyDown(e) {
+    // Only handle arrow keys when slash commands are showing
+    if (!showSlashCommand) return;
+
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setHighlightedSlashCommand((prev) => {
+        if (prev <= 0) {
+          return slashCommands.length;
+        }
+        return prev - 1;
+      });
+    }
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setHighlightedSlashCommand((prev) => {
+        if (prev >= slashCommands.length) {
+          return 0;
+        }
+        return prev + 1;
+      });
+    }
+    if (e.key === "Enter" && showSlashCommand) {
+      e.preventDefault();
+
+      if (highlightedSlashCommand === 0) {
+        setShowSlashCommand(false);
+        sendCommand({ text: "/reset", autoSubmit: true });
+        // Reset command is selected
+        return;
+      }
+
+      // Check if it's a preset selection (index 1 and above)
+      const presetIndex = highlightedSlashCommand - 1;
+      if (presetIndex >= 0 && presetIndex < slashCommands.length) {
+        const preset = slashCommands[presetIndex];
+        setShowSlashCommand(false);
+        sendCommand({ text: `${preset.command} ` });
+        textareaRef?.current?.focus();
+      }
+    }
+
+    if (e.key === "Escape" && showSlashCommand) {
+      e.preventDefault();
+      setShowSlashCommand(false);
+    }
+  }
+  return {
+    slashCommands,
+    setSlashCommands,
+    showSlashCommand,
+    setShowSlashCommand,
+    highlightedSlashCommand,
+    setHighlightedSlashCommand,
+    // qtyOfSlashCommands,
+    // setQtyOfSlashCommands,
+    watchForSlash,
+    handleKeyDown,
+    textareaRef,
+  };
+}

From 9389a2ff2b50c6beb45134d33ddb05b2502ae211 Mon Sep 17 00:00:00 2001
From: angelplusultra <macfittondev@gmail.com>
Date: Mon, 22 Sep 2025 12:53:09 -0700
Subject: [PATCH 6/6] Remove unused state variables from useSlashCommands hook
 to clean up code and improve readability.

---
 frontend/src/hooks/useSlashCommands.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/frontend/src/hooks/useSlashCommands.js b/frontend/src/hooks/useSlashCommands.js
index 6cf589fba53..61af6d759b2 100644
--- a/frontend/src/hooks/useSlashCommands.js
+++ b/frontend/src/hooks/useSlashCommands.js
@@ -6,7 +6,6 @@ export function useSlashCommands({ sendCommand }) {
   const [showSlashCommand, setShowSlashCommand] = useState(false);
   const [highlightedSlashCommand, setHighlightedSlashCommand] = useState(1);
   const [slashCommands, setSlashCommands] = useState([]);
-  //   const [qtyOfSlashCommands, setQtyOfSlashCommands] = useState(0);
   // Ref to the textarea element, this is needed to apply focus to the textarea when slash commands are triggered by clicking the slash command button
   const textareaRef = useRef(null);
 
@@ -24,7 +23,6 @@ export function useSlashCommands({ sendCommand }) {
   const fetchSlashCommands = async () => {
     const presets = await System.getSlashCommandPresets();
     setSlashCommands(presets);
-    // setQtyOfSlashCommands(presets.length + 1);
   };
 
   useEffect(() => {
@@ -95,8 +93,6 @@ export function useSlashCommands({ sendCommand }) {
     setShowSlashCommand,
     highlightedSlashCommand,
     setHighlightedSlashCommand,
-    // qtyOfSlashCommands,
-    // setQtyOfSlashCommands,
     watchForSlash,
     handleKeyDown,
     textareaRef,