feat: prompt history (#260)

Co-authored-by: Thomas Ricouard <ricouard77@gmail.com>

Author: ignaciocervino

src/features/composer/components/Composer.tsx

@@ -17,6 +17,7 @@ import {
   normalizePastedText,
 } from "../../../utils/composerText";
 import { useComposerAutocompleteState } from "../hooks/useComposerAutocompleteState";
+import { usePromptHistory } from "../hooks/usePromptHistory";
 import { ComposerInput } from "./ComposerInput";
 import { ComposerMetaBar } from "./ComposerMetaBar";
 import { ComposerQueue } from "./ComposerQueue";
@@ -51,6 +52,7 @@ type ComposerProps = {
   sendLabel?: string;
   draftText?: string;
   onDraftChange?: (text: string) => void;
+  historyKey?: string | null;
   attachedImages?: string[];
   onPickImages?: () => void;
   onAttachImages?: (paths: string[]) => void;
@@ -117,6 +119,7 @@ export function Composer({
   sendLabel = "Send",
   draftText = "",
   onDraftChange,
+  historyKey = null,
   attachedImages = [],
   onPickImages,
   onAttachImages,
@@ -170,6 +173,51 @@ export function Composer({
     [onDraftChange],
   );
 
+  const {
+    isAutocompleteOpen,
+    autocompleteMatches,
+    highlightIndex,
+    setHighlightIndex,
+    applyAutocomplete,
+    handleInputKeyDown,
+    handleTextChange,
+    handleSelectionChange,
+  } = useComposerAutocompleteState({
+    text,
+    selectionStart,
+    disabled,
+    skills,
+    prompts,
+    files,
+    textareaRef,
+    setText: setComposerText,
+    setSelectionStart,
+  });
+
+  const {
+    handleHistoryKeyDown,
+    handleHistoryTextChange,
+    recordHistory,
+    resetHistoryNavigation,
+  } = usePromptHistory({
+    historyKey,
+    text,
+    hasAttachments: attachedImages.length > 0,
+    disabled,
+    isAutocompleteOpen,
+    textareaRef,
+    setText: setComposerText,
+    setSelectionStart,
+  });
+
+  const handleTextChangeWithHistory = useCallback(
+    (next: string, cursor: number | null) => {
+      handleHistoryTextChange(next);
+      handleTextChange(next, cursor);
+    },
+    [handleHistoryTextChange, handleTextChange],
+  );
+
   const handleSend = useCallback(() => {
     if (disabled) {
       return;
@@ -178,9 +226,21 @@ export function Composer({
     if (!trimmed && attachedImages.length === 0) {
       return;
     }
+    if (trimmed) {
+      recordHistory(trimmed);
+    }
     onSend(trimmed, attachedImages);
+    resetHistoryNavigation();
     setComposerText("");
-  }, [attachedImages, disabled, onSend, setComposerText, text]);
+  }, [
+    attachedImages,
+    disabled,
+    onSend,
+    recordHistory,
+    resetHistoryNavigation,
+    setComposerText,
+    text,
+  ]);
 
   const handleQueue = useCallback(() => {
     if (disabled) {
@@ -190,46 +250,39 @@ export function Composer({
     if (!trimmed && attachedImages.length === 0) {
       return;
     }
+    if (trimmed) {
+      recordHistory(trimmed);
+    }
     onQueue(trimmed, attachedImages);
+    resetHistoryNavigation();
     setComposerText("");
-  }, [attachedImages, disabled, onQueue, setComposerText, text]);
-
-  const {
-    isAutocompleteOpen,
-    autocompleteMatches,
-    highlightIndex,
-    setHighlightIndex,
-    applyAutocomplete,
-    handleInputKeyDown,
-    handleTextChange,
-    handleSelectionChange,
-  } = useComposerAutocompleteState({
-    text,
-    selectionStart,
+  }, [
+    attachedImages,
     disabled,
-    skills,
-    prompts,
-    files,
-    textareaRef,
-    setText: setComposerText,
-    setSelectionStart,
-  });
+    onQueue,
+    recordHistory,
+    resetHistoryNavigation,
+    setComposerText,
+    text,
+  ]);
 
   useEffect(() => {
     if (!prefillDraft) {
       return;
     }
     setComposerText(prefillDraft.text);
+    resetHistoryNavigation();
     onPrefillHandled?.(prefillDraft.id);
-  }, [prefillDraft, onPrefillHandled, setComposerText]);
+  }, [onPrefillHandled, prefillDraft, resetHistoryNavigation, setComposerText]);
 
   useEffect(() => {
     if (!insertText) {
       return;
     }
     setComposerText(insertText.text);
+    resetHistoryNavigation();
     onInsertHandled?.(insertText.id);
-  }, [insertText, onInsertHandled, setComposerText]);
+  }, [insertText, onInsertHandled, resetHistoryNavigation, setComposerText]);
 
   useEffect(() => {
     if (!dictationTranscript) {
@@ -250,6 +303,7 @@ export function Composer({
       end,
     );
     setComposerText(nextText);
+    resetHistoryNavigation();
     requestAnimationFrame(() => {
       if (!textareaRef.current) {
         return;
@@ -263,6 +317,7 @@ export function Composer({
     dictationTranscript,
     handleSelectionChange,
     onDictationTranscriptHandled,
+    resetHistoryNavigation,
     selectionStart,
     setComposerText,
     text,
@@ -412,7 +467,7 @@ export function Composer({
         onAddAttachment={onPickImages}
         onAttachImages={onAttachImages}
         onRemoveAttachment={onRemoveImage}
-        onTextChange={handleTextChange}
+        onTextChange={handleTextChangeWithHistory}
         onSelectionChange={handleSelectionChange}
         onTextPaste={handleTextPaste}
         isExpanded={editorExpanded}
@@ -421,6 +476,10 @@ export function Composer({
           if (isComposingEvent(event)) {
             return;
           }
+          handleHistoryKeyDown(event);
+          if (event.defaultPrevented) {
+            return;
+          }
           if (
             expandFenceOnSpace &&
             event.key === " " &&

src/features/composer/hooks/usePromptHistory.test.tsx

@@ -0,0 +1,132 @@
+// @vitest-environment jsdom
+import { act, renderHook } from "@testing-library/react";
+import { useRef, useState } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { usePromptHistory } from "./usePromptHistory";
+
+const STORAGE_PREFIX = "codexmonitor.promptHistory.";
+
+function getStorageKey(key: string) {
+  return `${STORAGE_PREFIX}${key}`;
+}
+
+function createKeyEvent(key: "ArrowUp" | "ArrowDown") {
+  let prevented = false;
+  return {
+    key,
+    metaKey: false,
+    ctrlKey: false,
+    altKey: false,
+    shiftKey: false,
+    get defaultPrevented() {
+      return prevented;
+    },
+    preventDefault() {
+      prevented = true;
+    },
+  } as unknown as React.KeyboardEvent<HTMLTextAreaElement>;
+}
+
+describe("usePromptHistory", () => {
+  it("stores and recalls history per workspace key", () => {
+    globalThis.localStorage.clear();
+    vi.useFakeTimers();
+    const textarea = document.createElement("textarea");
+    document.body.appendChild(textarea);
+
+    const { result, rerender, unmount } = renderHook(
+      ({ historyKey }) => {
+        const [text, setText] = useState("");
+        const [, setSelectionStart] = useState<number | null>(null);
+        const textareaRef = useRef<HTMLTextAreaElement | null>(textarea);
+        const history = usePromptHistory({
+          historyKey,
+          text,
+          disabled: false,
+          isAutocompleteOpen: false,
+          textareaRef,
+          setText,
+          setSelectionStart,
+        });
+        return { text, ...history };
+      },
+      { initialProps: { historyKey: "ws-1" } },
+    );
+
+    act(() => {
+      result.current.recordHistory("first prompt");
+    });
+    expect(globalThis.localStorage.getItem(getStorageKey("ws-1"))).toBe(
+      JSON.stringify(["first prompt"]),
+    );
+
+    rerender({ historyKey: "ws-2" });
+    act(() => {
+      result.current.recordHistory("second prompt");
+    });
+    expect(globalThis.localStorage.getItem(getStorageKey("ws-2"))).toBe(
+      JSON.stringify(["second prompt"]),
+    );
+    expect(globalThis.localStorage.getItem(getStorageKey("ws-1"))).toBe(
+      JSON.stringify(["first prompt"]),
+    );
+
+    rerender({ historyKey: "ws-1" });
+    act(() => {
+      result.current.handleHistoryKeyDown(createKeyEvent("ArrowUp"));
+    });
+    act(() => {
+      vi.runAllTimers();
+    });
+    expect(result.current.text).toBe("first prompt");
+
+    unmount();
+    textarea.remove();
+    vi.useRealTimers();
+  });
+
+  it("does not clobber stored history when switching keys", () => {
+    globalThis.localStorage.clear();
+    globalThis.localStorage.setItem(
+      getStorageKey("ws-a"),
+      JSON.stringify(["alpha prompt"]),
+    );
+    globalThis.localStorage.setItem(
+      getStorageKey("ws-b"),
+      JSON.stringify(["beta prompt"]),
+    );
+
+    const textarea = document.createElement("textarea");
+    document.body.appendChild(textarea);
+
+    const { rerender, unmount } = renderHook(
+      ({ historyKey }) => {
+        const [text, setText] = useState("");
+        const [, setSelectionStart] = useState<number | null>(null);
+        const textareaRef = useRef<HTMLTextAreaElement | null>(textarea);
+        return usePromptHistory({
+          historyKey,
+          text,
+          disabled: false,
+          isAutocompleteOpen: false,
+          textareaRef,
+          setText,
+          setSelectionStart,
+        });
+      },
+      { initialProps: { historyKey: "ws-a" } },
+    );
+
+    rerender({ historyKey: "ws-b" });
+
+    expect(globalThis.localStorage.getItem(getStorageKey("ws-a"))).toBe(
+      JSON.stringify(["alpha prompt"]),
+    );
+    expect(globalThis.localStorage.getItem(getStorageKey("ws-b"))).toBe(
+      JSON.stringify(["beta prompt"]),
+    );
+
+    unmount();
+    textarea.remove();
+  });
+});