Files
kandev/apps/web/components/task/chat/message-history.ts
T
João Salavisa f3aeab020a feat(web): chat history nav with ArrowUp/Down and Ctrl+R fuzzy search (#1246)
* feat(web): chat history nav with ArrowUp/Down and Ctrl+R fuzzy search

ArrowUp/ArrowDown cycle the user's previous messages in the chat composer
(bash-style), Ctrl+R opens a fuzzy reverse-search overlay anchored to the
input. Opening the overlay drains the paginated message history in the
background so search covers the whole session, not only the pages already
loaded in the chat list.

* fix(web): address PR review on chat history nav (#1246)

- Always clear isDraining on cancel, error, and normal completion (cleanup
  setter + try/catch/finally in the drain loop).
- Ctrl+R no longer dead-keys when the loaded history is empty: the overlay
  opens unconditionally and renders "No matches" until drained pages arrive.
- Dedupe adjacent user prompts in the original message stream, not in the
  extracted output, so repeated prompts separated by agent/tool turns stay
  reachable from ArrowUp and Ctrl+R.
- Stabilize handleReverseSearchSelect by depending on the destructured
  closeReverseSearch instead of the spread overlay object.
- HitRow key={hit.index} so React reuses rows across re-rankings.
- Reorder SSR/isOpen guards before computeStyle so window.* isn't touched
  during a server render.
- Add use-drain-older-messages.test.ts covering normal drain, batch cap,
  cancellation on active->false, and rejection clearing isDraining.

* fix(web): address PR feedback on chat history nav (#1246)

- writeHistoryContent wraps editor mutations in try/finally so
  state.isApplying clears even if a chain or onChange handler throws.
- Dismiss the Ctrl+R overlay on window resize and capture-phase scroll so
  the fixed-position portal can't drift away from the editor anchor.
- Drop the unused historyRef from useChatHistory's return value.
- Extract HitRow into message-history-search-row.tsx so the search file
  stays under the 200-line cap.

* fix(web): keep Ctrl+R overlay open during keyboard navigation (#1246)

- Drop capture:true on the window scroll listener so scrollIntoView inside
  the overlay's own result list (triggered by keyboard navigation past the
  visible window) no longer dismisses the overlay.
- Remove the always-true isOpen prop and the unreachable guard from
  MessageHistorySearch; visibility is controlled solely by the parent's
  conditional render.

---------

Co-authored-by: Kandev Agent <agent@kandev.dev>
2026-06-02 17:00:38 +01:00

103 lines
3.7 KiB
TypeScript

import type { Message } from "@/lib/types/http";
/** Extract the user's previously sent text messages for a session, newest-first.
* Consecutive duplicates *in the original message stream* are collapsed —
* duplicates separated by an assistant or tool turn stay, since the user
* meaningfully repeated themselves and should be able to recall the older
* one from history. Empty/whitespace-only messages are skipped. */
export function extractUserHistory(messages: readonly Message[]): string[] {
const out: string[] = [];
for (let i = messages.length - 1; i >= 0; i--) {
const m = messages[i];
if (m.author_type !== "user" || m.type !== "message") continue;
const content = m.content ?? "";
if (!content.trim()) continue;
const newer = messages[i + 1];
const isAdjacentUserDuplicate =
newer?.author_type === "user" &&
newer.type === "message" &&
(newer.content ?? "") === content;
if (isAdjacentUserDuplicate) continue;
out.push(content);
}
return out;
}
export type HistoryState = {
/** Position within the history list (0 = most recent). `null` means the user
* is currently editing their own draft, not viewing history. */
index: number | null;
};
/** Decide the next history navigation state when ArrowUp/ArrowDown is pressed.
* Returns `null` if the press should be deferred (e.g. no history, or at the
* oldest entry on ArrowUp — caller should treat as a no-op). */
export function navigateHistory(
state: HistoryState,
direction: "up" | "down",
historyLength: number,
): HistoryState | null {
if (historyLength === 0) return null;
if (direction === "up") {
const next = state.index === null ? 0 : state.index + 1;
if (next >= historyLength) return null;
return { index: next };
}
if (state.index === null) return null;
if (state.index === 0) return { index: null };
return { index: state.index - 1 };
}
/** Lightweight subsequence-fuzzy scorer. Returns `null` if `needle`'s
* characters cannot be found in `haystack` in order (case-insensitive).
* Higher score = better match; consecutive matches and word-boundary hits
* rank higher. Shorter haystacks tie-break ahead of longer ones. */
export function fuzzyScore(needle: string, haystack: string): number | null {
if (!needle) return 1;
const n = needle.toLowerCase();
const h = haystack.toLowerCase();
let hi = 0;
let score = 0;
let consecutive = 0;
for (let ni = 0; ni < n.length; ni++) {
const c = n.charAt(ni);
const next = h.indexOf(c, hi);
if (next === -1) return null;
if (next === hi) {
consecutive++;
score += 2 + consecutive;
} else {
consecutive = 0;
score += 1;
}
const prev = next === 0 ? "" : h.charAt(next - 1);
if (next === 0 || /[\s\-_/.,(){}[\]]/.test(prev)) score += 2;
hi = next + 1;
}
return score - haystack.length * 0.01;
}
export type SearchHit = {
/** Original index in the history array (lets the caller jump the history
* index when the user picks a search result). */
index: number;
content: string;
score: number;
};
/** Score every history entry against `query` and return matches sorted
* best-first. An empty query returns every entry in newest-first order
* (preserving the original index). */
export function searchHistory(history: readonly string[], query: string): SearchHit[] {
if (!query) {
return history.map((content, index) => ({ index, content, score: 0 }));
}
const hits: SearchHit[] = [];
for (let i = 0; i < history.length; i++) {
const score = fuzzyScore(query, history[i]);
if (score !== null) hits.push({ index: i, content: history[i], score });
}
hits.sort((a, b) => b.score - a.score);
return hits;
}