diff --git a/webview-ui/src/components/HistoryView.tsx b/webview-ui/src/components/HistoryView.tsx index 3a75808..527d7c1 100644 --- a/webview-ui/src/components/HistoryView.tsx +++ b/webview-ui/src/components/HistoryView.tsx @@ -1,17 +1,31 @@ -import { VSCodeButton, VSCodeTextField } from "@vscode/webview-ui-toolkit/react" +import { VSCodeButton, VSCodeTextField, VSCodeRadioGroup, VSCodeRadio } from "@vscode/webview-ui-toolkit/react" import { useExtensionState } from "../context/ExtensionStateContext" import { vscode } from "../utils/vscode" import { Virtuoso } from "react-virtuoso" -import { memo, useMemo, useState } from "react" +import { memo, useMemo, useState, useEffect } from "react" import Fuse, { FuseResult } from "fuse.js" type HistoryViewProps = { onDone: () => void } +type SortOption = "newest" | "oldest" | "mostExpensive" | "mostTokens" | "mostRelevant" + const HistoryView = ({ onDone }: HistoryViewProps) => { const { taskHistory } = useExtensionState() const [searchQuery, setSearchQuery] = useState("") + const [sortOption, setSortOption] = useState("newest") + const [lastNonRelevantSort, setLastNonRelevantSort] = useState("newest") + + useEffect(() => { + if (searchQuery && sortOption !== "mostRelevant" && !lastNonRelevantSort) { + setLastNonRelevantSort(sortOption) + setSortOption("mostRelevant") + } else if (!searchQuery && sortOption === "mostRelevant" && lastNonRelevantSort) { + setSortOption(lastNonRelevantSort) + setLastNonRelevantSort(null) + } + }, [searchQuery, sortOption, lastNonRelevantSort]) const handleHistorySelect = (id: string) => { vscode.postMessage({ type: "showTaskWithId", text: id }) @@ -43,20 +57,42 @@ const HistoryView = ({ onDone }: HistoryViewProps) => { const fuse = useMemo(() => { return new Fuse(presentableTasks, { keys: ["task"], - threshold: 0.4, + threshold: 0.6, shouldSort: true, isCaseSensitive: false, - ignoreLocation: true, + ignoreLocation: false, includeMatches: true, minMatchCharLength: 1, }) }, [presentableTasks]) const taskHistorySearchResults = useMemo(() => { - if (!searchQuery) return presentableTasks - const searchResults = fuse.search(searchQuery) - return highlight(searchResults) - }, [presentableTasks, searchQuery, fuse]) + let results = searchQuery ? highlight(fuse.search(searchQuery)) : presentableTasks + + results.sort((a, b) => { + switch (sortOption) { + case "oldest": + return a.ts - b.ts + case "mostExpensive": + return (b.totalCost || 0) - (a.totalCost || 0) + case "mostTokens": + return ( + (b.tokensIn || 0) + + (b.tokensOut || 0) + + (b.cacheWrites || 0) + + (b.cacheReads || 0) - + ((a.tokensIn || 0) + (a.tokensOut || 0) + (a.cacheWrites || 0) + (a.cacheReads || 0)) + ) + case "mostRelevant": + return searchQuery ? 0 : b.ts - a.ts // Keep fuse order if searching, otherwise sort by newest + case "newest": + default: + return b.ts - a.ts + } + }) + + return results + }, [presentableTasks, searchQuery, fuse, sortOption]) return ( <> @@ -78,6 +114,13 @@ const HistoryView = ({ onDone }: HistoryViewProps) => { background-color: var(--vscode-editor-findMatchHighlightBackground); color: inherit; } + .clear-search-button { + cursor: pointer; + opacity: 0.5; + } + .clear-search-button:hover { + opacity: 1; + } `}
{

History

Done
-
- setSearchQuery((e.target as HTMLInputElement)?.value)}> -
- {searchQuery && ( - setSearchQuery("")} - slot="end"> - - - )} -
+
+
+ { + const newValue = (e.target as HTMLInputElement)?.value + setSearchQuery(newValue) + if (newValue && !searchQuery && sortOption !== "mostRelevant") { + setLastNonRelevantSort(sortOption) + setSortOption("mostRelevant") + } + }}> +
+ {searchQuery && ( +
setSearchQuery("")} + slot="end" + style={{ + display: "flex", + justifyContent: "center", + alignItems: "center", + height: "100%", + }}> + +
+ )} +
+ setSortOption((e.target as HTMLInputElement).value as SortOption)}> + Newest + Oldest + Most Expensive + Most Tokens + + Most Relevant + + +
{presentableTasks.length === 0 && ( @@ -139,11 +212,7 @@ const HistoryView = ({ onDone }: HistoryViewProps) => { -
- No history found, -
- start a new task to see it here... -
+
No history found
)}