Add Keyboard Shortcuts to Agent Inbox

src/components/agent-inbox/components/inbox-item-input.tsx

@@ -6,13 +6,17 @@ import {
   SubmitType,
 } from "../types";
 import { Textarea } from "@/components/ui/textarea";
-import React from "react";
+import React, { useRef } from "react";
 import { haveArgsChanged, prettifyText } from "../utils";
 import { MarkdownText } from "@/components/ui/markdown-text";
 import { Separator } from "@/components/ui/separator";
 import { Button } from "@/components/ui/button";
 import { CircleX, LoaderCircle, Undo2 } from "lucide-react";
 import { useToast } from "@/hooks/use-toast";
+import { useAgentInboxShortcuts } from "@/hooks/use-keyboard-shortcuts";
+
+// Assigning a CSS class for easy identification from keyboard shortcuts
+const INBOX_ITEM_INPUT_CLASS = "InboxItemInput";
 
 function ResetButton({ handleReset }: { handleReset: () => void }) {
   return (
@@ -89,6 +93,7 @@ function ResponseComponent({
   interruptValue,
   onResponseChange,
   handleSubmit,
+  responseInputRef,
 }: {
   humanResponse: HumanResponseWithEdits[];
   streaming: boolean;
@@ -98,6 +103,7 @@ function ResponseComponent({
   handleSubmit: (
     e: React.MouseEvent<HTMLButtonElement, MouseEvent> | React.KeyboardEvent
   ) => Promise<void>;
+  responseInputRef?: React.RefObject<HTMLTextAreaElement>;
 }) {
   const res = humanResponse.find((r) => r.type === "response");
   if (!res || typeof res.args !== "string") {
@@ -131,6 +137,7 @@ function ResponseComponent({
       <div className="flex flex-col gap-[6px] items-start w-full">
         <p className="text-sm min-w-fit font-medium">Response</p>
         <Textarea
+          ref={responseInputRef}
           disabled={streaming}
           value={res.args}
           onChange={(e) => onResponseChange(e.target.value, res)}
@@ -490,11 +497,31 @@ export function InboxItemInput({
     });
   };
 
+  const containerRef = useRef<HTMLDivElement>(null);
+  const responseInputRef = useRef<HTMLTextAreaElement>(null);
+
+  // Use our custom hook for keyboard shortcuts
+  const { textInputValuesRef } = useAgentInboxShortcuts();
+
+  // Store initial input values for undo functionality
+  React.useEffect(() => {
+    // Store the initial values of all editable fields
+    const textareas = containerRef.current?.querySelectorAll("textarea");
+    if (textareas) {
+      textareas.forEach((textarea) => {
+        if (!textInputValuesRef.current.has(textarea)) {
+          textInputValuesRef.current.set(textarea, textarea.value);
+        }
+      });
+    }
+  }, [textInputValuesRef]);
+
   return (
     <div
+      ref={containerRef}
       className={cn(
         "w-full flex flex-col items-start justify-start gap-2 shadow-sm",
-        ""
+        INBOX_ITEM_INPUT_CLASS
       )}
     >
       {showArgsOutsideActionCards && (
@@ -524,6 +551,7 @@ export function InboxItemInput({
           interruptValue={interruptValue}
           onResponseChange={onResponseChange}
           handleSubmit={handleSubmit}
+          responseInputRef={responseInputRef}
         />
         {streaming && !currentNode && (
           <p className="text-sm text-gray-600">Waiting for Graph to start...</p>

src/components/agent-inbox/inbox-view.tsx

@@ -7,6 +7,7 @@ import { ThreadStatusWithAll } from "./types";
 import { Pagination } from "./components/pagination";
 import { Inbox as InboxIcon, LoaderCircle } from "lucide-react";
 import { InboxButtons } from "./components/inbox-buttons";
+import { useKeyboardShortcuts } from "@/hooks/use-keyboard-shortcuts";
 
 interface AgentInboxViewProps<
   _ThreadValues extends Record<string, any> = Record<string, any>,
@@ -23,6 +24,109 @@ export function AgentInboxView<
   const selectedInbox = (getSearchParam(INBOX_PARAM) ||
     "interrupted") as ThreadStatusWithAll;
   const scrollableContentRef = React.useRef<HTMLDivElement>(null);
+  const [selectedThreadIndex, setSelectedThreadIndex] =
+    React.useState<number>(-1);
+
+  // Setup keyboard shortcuts for thread navigation with arrow keys
+  const navigateThreadsUp = React.useCallback(() => {
+    const threadItems = document.querySelectorAll(
+      '[class*="InterruptedInboxItem"], [class*="GenericInboxItem"]'
+    );
+    if (!threadItems.length) return;
+
+    // Navigate to previous thread with wrap-around
+    const newIndex =
+      selectedThreadIndex <= 0
+        ? threadItems.length - 1
+        : selectedThreadIndex - 1;
+    setSelectedThreadIndex(newIndex);
+
+    // Scroll the selected thread into view
+    threadItems[newIndex].scrollIntoView({
+      behavior: "smooth",
+      block: "center",
+    });
+
+    // Add visual indicator (could be done with a class or style)
+    threadItems.forEach((item, idx) => {
+      if (idx === newIndex) {
+        item.classList.add("thread-selected");
+      } else {
+        item.classList.remove("thread-selected");
+      }
+    });
+  }, [selectedThreadIndex]);
+
+  const navigateThreadsDown = React.useCallback(() => {
+    const threadItems = document.querySelectorAll(
+      '[class*="InterruptedInboxItem"], [class*="GenericInboxItem"]'
+    );
+    if (!threadItems.length) return;
+
+    // Navigate to next thread with wrap-around
+    const newIndex =
+      selectedThreadIndex >= threadItems.length - 1
+        ? 0
+        : selectedThreadIndex + 1;
+    setSelectedThreadIndex(newIndex);
+
+    // Scroll the selected thread into view
+    threadItems[newIndex].scrollIntoView({
+      behavior: "smooth",
+      block: "center",
+    });
+
+    // Add visual indicator
+    threadItems.forEach((item, idx) => {
+      if (idx === newIndex) {
+        item.classList.add("thread-selected");
+      } else {
+        item.classList.remove("thread-selected");
+      }
+    });
+  }, [selectedThreadIndex]);
+
+  const openSelectedThread = React.useCallback(() => {
+    const threadItems = document.querySelectorAll(
+      '[class*="InterruptedInboxItem"], [class*="GenericInboxItem"]'
+    );
+    if (
+      !threadItems.length ||
+      selectedThreadIndex < 0 ||
+      selectedThreadIndex >= threadItems.length
+    )
+      return;
+
+    // First save scroll position
+    handleThreadClick();
+
+    // Then simulate click on the selected thread
+    (threadItems[selectedThreadIndex] as HTMLElement).click();
+  }, [selectedThreadIndex]);
+
+  // Configure keyboard shortcuts
+  useKeyboardShortcuts({
+    shortcuts: React.useMemo(
+      () => [
+        {
+          key: "ArrowUp",
+          description: "Navigate to previous thread",
+          handler: navigateThreadsUp,
+        },
+        {
+          key: "ArrowDown",
+          description: "Navigate to next thread",
+          handler: navigateThreadsDown,
+        },
+        {
+          key: "Enter",
+          description: "Open selected thread",
+          handler: openSelectedThread,
+        },
+      ],
+      [navigateThreadsUp, navigateThreadsDown, openSelectedThread]
+    ),
+  });
 
   // Register scroll event listener to automatically save scroll position whenever user scrolls
   React.useEffect(() => {

src/components/agent-inbox/thread-view.tsx

@@ -6,6 +6,10 @@ import React from "react";
 import { cn } from "@/lib/utils";
 import { useQueryParams } from "./hooks/use-query-params";
 import { VIEW_STATE_THREAD_QUERY_PARAM } from "./constants";
+import {
+  useKeyboardShortcuts,
+  useAgentInboxShortcuts,
+} from "@/hooks/use-keyboard-shortcuts";
 
 export function ThreadView<
   ThreadValues extends Record<string, any> = Record<string, any>,
@@ -18,6 +22,23 @@ export function ThreadView<
   const [showState, setShowState] = React.useState(false);
   const showSidePanel = showDescription || showState;
 
+  // Use our custom hook that provides keyboard shortcut handlers
+  const { closeThread } = useAgentInboxShortcuts();
+
+  // Setup keyboard shortcuts for navigating back to inbox
+  const shortcuts = React.useMemo(
+    () => [
+      {
+        key: "e",
+        description: "Close thread and return to inbox",
+        handler: closeThread,
+      },
+    ],
+    [closeThread]
+  );
+
+  useKeyboardShortcuts({ shortcuts });
+
   // Scroll to top when thread view is mounted
   React.useEffect(() => {
     if (typeof window !== "undefined") {