feat: Add the ability to navigate up and down between previous prompts using arrow keys while focused on the message editor (#378)

Author: charlesvien

apps/array/src/renderer/features/message-editor/components/MessageEditor.tsx

@@ -58,6 +58,7 @@ export const MessageEditor = forwardRef<EditorHandle, MessageEditorProps>(
       insertChip,
     } = useTiptapEditor({
       sessionId,
+      taskId,
       placeholder,
       disabled,
       isCloud,

apps/array/src/renderer/features/message-editor/stores/promptHistoryStore.ts

@@ -0,0 +1,51 @@
+import { getUserPromptsForTask } from "@features/sessions/stores/sessionStore";
+import { create } from "zustand";
+
+interface PromptHistoryStore {
+  index: number;
+  savedInput: string;
+  navigateUp: (taskId: string, currentInput: string) => string | null;
+  navigateDown: (taskId: string) => string | null;
+  reset: () => void;
+}
+
+export const usePromptHistoryStore = create<PromptHistoryStore>((set, get) => ({
+  index: -1,
+  savedInput: "",
+
+  navigateUp: (taskId, currentInput) => {
+    const history = getUserPromptsForTask(taskId);
+    if (history.length === 0) return null;
+
+    const { index } = get();
+
+    if (index === -1) {
+      set({ savedInput: currentInput, index: 0 });
+      return history[history.length - 1] ?? null;
+    }
+
+    if (index >= history.length - 1) return null;
+
+    const newIndex = index + 1;
+    set({ index: newIndex });
+    return history[history.length - 1 - newIndex] ?? null;
+  },
+
+  navigateDown: (taskId) => {
+    const { index, savedInput } = get();
+    if (index === -1) return null;
+
+    const history = getUserPromptsForTask(taskId);
+
+    if (index > 0) {
+      const newIndex = index - 1;
+      set({ index: newIndex });
+      return history[history.length - 1 - newIndex] ?? null;
+    }
+
+    set({ index: -1, savedInput: "" });
+    return savedInput;
+  },
+
+  reset: () => set({ index: -1, savedInput: "" }),
+}));

apps/array/src/renderer/features/message-editor/tiptap/useTiptapEditor.ts

@@ -1,13 +1,15 @@
 import { toast } from "@renderer/utils/toast";
 import { useEditor } from "@tiptap/react";
 import { useCallback, useRef, useState } from "react";
+import { usePromptHistoryStore } from "../stores/promptHistoryStore";
 import type { MentionChip } from "../utils/content";
 import { contentToXml } from "../utils/content";
 import { getEditorExtensions } from "./extensions";
 import { type DraftContext, useDraftSync } from "./useDraftSync";
 
 export interface UseTiptapEditorOptions {
   sessionId: string;
+  taskId?: string;
   placeholder?: string;
   disabled?: boolean;
   isCloud?: boolean;
@@ -30,6 +32,7 @@ const EDITOR_CLASS =
 export function useTiptapEditor(options: UseTiptapEditorOptions) {
   const {
     sessionId,
+    taskId,
     placeholder = "",
     disabled = false,
     isCloud = false,
@@ -66,7 +69,7 @@ export function useTiptapEditor(options: UseTiptapEditorOptions) {
   const submitRef = useRef<() => void>(() => {});
   const draftRef = useRef<ReturnType<typeof useDraftSync> | null>(null);
 
-  // Track isEmpty state to trigger re-renders when content changes
+  const historyActions = usePromptHistoryStore.getState();
   const [isEmptyState, setIsEmptyState] = useState(true);
 
   const handleCommandSubmit = useCallback((text: string) => {
@@ -91,14 +94,53 @@ export function useTiptapEditor(options: UseTiptapEditorOptions) {
       autofocus: autoFocus ? "end" : false,
       editorProps: {
         attributes: { class: EDITOR_CLASS },
-        handleKeyDown: (_view, event) => {
+        handleKeyDown: (view, event) => {
           if (event.key === "Enter" && !event.shiftKey) {
             const suggestionPopup = document.querySelector("[data-tippy-root]");
             if (suggestionPopup) return false;
             event.preventDefault();
+            historyActions.reset();
             submitRef.current();
             return true;
           }
+
+          if (
+            taskId &&
+            (event.key === "ArrowUp" || event.key === "ArrowDown")
+          ) {
+            const currentText = view.state.doc.textContent;
+            const isEmpty = !currentText.trim();
+            const { from } = view.state.selection;
+            const isAtStart = from === 1;
+            const isAtEnd = from === view.state.doc.content.size - 1;
+
+            if (event.key === "ArrowUp" && (isEmpty || isAtStart)) {
+              const newText = historyActions.navigateUp(taskId, currentText);
+              if (newText !== null) {
+                event.preventDefault();
+                view.dispatch(
+                  view.state.tr
+                    .delete(1, view.state.doc.content.size - 1)
+                    .insertText(newText, 1),
+                );
+                return true;
+              }
+            }
+
+            if (event.key === "ArrowDown" && (isEmpty || isAtEnd)) {
+              const newText = historyActions.navigateDown(taskId);
+              if (newText !== null) {
+                event.preventDefault();
+                view.dispatch(
+                  view.state.tr
+                    .delete(1, view.state.doc.content.size - 1)
+                    .insertText(newText, 1),
+                );
+                return true;
+              }
+            }
+          }
+
           return false;
         },
       },

apps/array/src/renderer/features/sessions/stores/sessionStore.ts

@@ -750,6 +750,47 @@ export function getAvailableCommandsForTask(
   return extractAvailableCommandsFromEvents(session.events);
 }
 
+/**
+ * Extract user prompts from session events.
+ * Returns an array of user prompt strings, most recent last.
+ */
+function extractUserPromptsFromEvents(events: AcpMessage[]): string[] {
+  const prompts: string[] = [];
+
+  for (const event of events) {
+    const msg = event.message;
+    if (isJsonRpcRequest(msg) && msg.method === "session/prompt") {
+      const params = msg.params as { prompt?: ContentBlock[] };
+      if (params?.prompt?.length) {
+        // Find first visible text block (skip hidden context blocks)
+        const textBlock = params.prompt.find((b) => {
+          if (b.type !== "text") return false;
+          const meta = (b as { _meta?: { ui?: { hidden?: boolean } } })._meta;
+          return !meta?.ui?.hidden;
+        });
+        if (textBlock && textBlock.type === "text") {
+          prompts.push(textBlock.text);
+        }
+      }
+    }
+  }
+
+  return prompts;
+}
+
+/**
+ * Get user prompts for a task, most recent last.
+ */
+export function getUserPromptsForTask(taskId: string | undefined): string[] {
+  if (!taskId) return [];
+  const sessions = useStore.getState().sessions;
+  const session = Object.values(sessions).find(
+    (sess) => sess.taskId === taskId,
+  );
+  if (!session?.events) return [];
+  return extractUserPromptsFromEvents(session.events);
+}
+
 // Token refresh subscription
 let lastKnownToken: string | null = null;
 useAuthStore.subscribe(